From ef05a059f08ed71d909401ca8e95e159f4bdf978 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Tue, 15 Sep 2020 16:09:01 +0200
Subject: [PATCH] introduce static editor components (which are used for UI
 elements)

---
 zero.Web.UI/App/components/forms/property.vue | 14 ++++++++++---
 zero.Web.UI/App/editor/editor-component.vue   | 20 ++++++++++++++-----
 zero.Web.UI/App/editor/fields/static/line.vue | 11 ++++++++++
 zero.Web.UI/App/services/strings.js           |  4 ++++
 4 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 zero.Web.UI/App/editor/fields/static/line.vue

diff --git a/zero.Web.UI/App/components/forms/property.vue b/zero.Web.UI/App/components/forms/property.vue
index f8b97000..bac3373f 100644
--- a/zero.Web.UI/App/components/forms/property.vue
+++ b/zero.Web.UI/App/components/forms/property.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ui-property" :class="{'is-vertical': vertical, 'is-text': isText, 'hide-label': hideLabel }">
-    <label v-if="label" class="ui-property-label" :for="field">
+    <label v-if="label && !hideLabel" class="ui-property-label" :for="field">
       <span v-localize="label"></span>
       <strong class="ui-property-required" v-if="required">*</strong>
       <slot name="label-after"></slot>
@@ -80,16 +80,24 @@
   }
 
   .ui-property.full-width > .ui-property-content,
-  .ui-property.hide-label > .ui-property-content
+  .ui-property.hide-label > .ui-property-content,
+  .ui-property.is-static > .ui-property-content
   {
     max-width: 100%;
   }
 
-  .ui-property.hide-label > .ui-property-label
+  .ui-property.hide-label > .ui-property-label,
+  .ui-property.is-static > .ui-property-label
   {
     display: none;
   }
 
+  .ui-property.is-static,
+  .ui-property.is-static + .ui-property
+  {
+    margin-top: 0 !important;
+  }
+
   .ui-property-label
   {
     display: block;
diff --git a/zero.Web.UI/App/editor/editor-component.vue b/zero.Web.UI/App/editor/editor-component.vue
index e1c6f6b8..0aa3bfa4 100644
--- a/zero.Web.UI/App/editor/editor-component.vue
+++ b/zero.Web.UI/App/editor/editor-component.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-property v-if="!isHidden" :field="config.field" :label="label" :hide-label="config.hideLabel" :description="description" :required="config.required" :class="classList" :is-text="view === 'output'">
+  <ui-property v-if="!isHidden" :field="config.field" :label="label" :hide-label="config.hideLabel || isStatic" :description="description" :required="config.required" :class="classList" :is-text="view === 'output'">
     <component v-if="fieldComponent" :is="fieldComponent" :config="config" :value="model" :entity="value" @input="onChange" :meta="meta" :disabled="isDisabled" :depth="depth" />
     <p v-if="config.helpText" class="ui-property-help" v-localize="config.helpText"></p>
   </ui-property>
@@ -11,6 +11,8 @@
   import Objects from 'zero/services/objects';
   import Localization from 'zero/services/localization';
 
+  const staticViews = ['line'];
+
   export default {
     name: 'uiEditorComponent',
 
@@ -82,10 +84,6 @@
       view()
       {
         return this.config.display;
-      },
-      classes()
-      {
-        
       },
       isHidden()
       {
@@ -94,6 +92,10 @@
       isDisabled()
       {
         return (typeof this.config.disabled === 'boolean' && this.config.disabled) || (typeof this.config.disabled === 'function' && this.config.disabled(this.value));
+      },
+      isStatic()
+      {
+        return staticViews.indexOf(this.config.display) > -1;
       }
     },
 
@@ -120,6 +122,10 @@
         {
           return import(`zero/editor/editor`);
         }
+        else if (this.isStatic)
+        {
+          return import(`zero/editor/fields/static/${this.view.toLowerCase()}`);
+        }
         else
         {
           return import(`zero/editor/fields/${this.view.toLowerCase()}`);
@@ -172,6 +178,10 @@
         {
           classes.push('is-nested');
         }
+        if (this.isStatic)
+        {
+          classes.push('is-static');
+        }
         this.classList = classes;
 
 
diff --git a/zero.Web.UI/App/editor/fields/static/line.vue b/zero.Web.UI/App/editor/fields/static/line.vue
new file mode 100644
index 00000000..f39baecd
--- /dev/null
+++ b/zero.Web.UI/App/editor/fields/static/line.vue
@@ -0,0 +1,11 @@
+<template>
+  <hr style="margin: 50px 0;" />
+</template>
+
+<script>
+  export default {
+    props: {
+      config: Object
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/services/strings.js b/zero.Web.UI/App/services/strings.js
index b3e5abdf..30c550f0 100644
--- a/zero.Web.UI/App/services/strings.js
+++ b/zero.Web.UI/App/services/strings.js
@@ -71,6 +71,10 @@ export default {
 
   selectorToArray(selector)
   {
+    if (!selector)
+    {
+      return selector;
+    }
     selector = selector.replace(/\[(\w+)\]/g, '.$1');
     selector = selector.replace(/^\./, '');
     return selector.split('.');