introduce static editor components (which are used for UI elements)

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;

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;
 
 

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>

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('.');