schema extensions

zero.Backoffice.UI/app/editor/fields/createFields.ts

@@ -6,6 +6,7 @@ export default function createFields(app: ZeroPluginOptions): void
 {
   app.fieldType('text', defineAsyncComponent(() => import('./text.vue')));
   app.fieldType('number', defineAsyncComponent(() => import('./number.vue')));
+  app.fieldType('password', defineAsyncComponent(() => import('./password.vue')));
   app.fieldType('toggle', defineAsyncComponent(() => import('./toggle.vue')));
   app.fieldType('rte', defineAsyncComponent(() => import('./rte.vue')));
   app.fieldType('output', defineAsyncComponent(() => import('./output.vue')));

zero.Backoffice.UI/app/editor/fields/editor-field-extensions.d.ts

@@ -22,6 +22,12 @@ declare module 'zero/schemas'
      */
     number(options?: NumberFieldOptions): ZeroEditorField;
 
+    /**
+     * Render a password input
+     * @param {TextFieldOptions} [options] - Custom options
+     */
+    password(options?: TextFieldOptions): ZeroEditorField;
+
     /**
      * Render a toggle
      * @param {ToggleFieldOptions} [options] - Custom options
@@ -132,7 +138,7 @@ declare module 'zero/schemas'
 
   export interface SelectFieldOptions
   {
-    items: SelectFieldItem[];
+    items: SelectFieldItem[] | ((model: any) => SelectFieldItem[]);
     emptyOption?: boolean | null;
   }
 
@@ -156,6 +162,7 @@ declare module 'zero/schemas'
     limit?: number;
     reverse?: boolean | null;
     labelKey?: string;
+    descriptionKey?: string;
     idKey?: string;
   }
 

zero.Backoffice.UI/app/editor/fields/nested.vue

@@ -127,8 +127,6 @@
           width: this.width,
         });
 
-        console.info('nested result: ', result);
-
         if (result.eventType == 'confirm')
         {
           if (isAdd)
@@ -141,6 +139,8 @@
             this.removeItem(index);
             this.items.splice(index, 0, result.value);
           }
+
+          this.onChange();
         }
       },
 
@@ -154,7 +154,9 @@
 
       onChange()
       {
-        this.$emit('input', this.multiple ? this.items : (this.items.length > 0 ? this.items[0] : null));
+        let value = this.multiple ? this.items : (this.items.length > 0 ? this.items[0] : null)
+        this.$emit('input', value);
+        this.$emit('update:value', value);
       },
 
 

zero.Backoffice.UI/app/editor/fields/password.vue

@@ -0,0 +1,22 @@
+<template>
+  <input :value="value" @input="$emit('input', $event.target.value)" type="password" class="ui-input" v-placeholder="{ placeholder, model: config.model }" :maxlength="maxLength" :disabled="config.disabled" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: String,
+      config: Object,
+
+      maxLength: {
+        type: Number,
+        default: null
+      },
+      placeholder: {
+        type: [String, Function],
+        default: null
+      }
+    }
+  }
+</script>

zero.Backoffice.UI/app/editor/fields/select.vue

@@ -32,13 +32,15 @@
     watch: {
       items: {
         deep: true,
-        handler()
+        handler(val)
         {
-          this.rebuild();
-          this.onChange({ target: { value: this.value } });
+          if (typeof val !== 'function')
+          {
+            this.rebuild();
+          }
         }
       },
-      'config.model.addresses': {
+      'config.model': {
         deep: true,
         handler()
         {
@@ -52,20 +54,24 @@
       rebuild()
       {
         let items = [];
+        let options = [];
 
         if (!this.config.model || !this.items)
         {
-          this.options = items;
-          return;
+          options = items;
         }
-
-        if (typeof this.items === 'function')
+        else if (typeof this.items === 'function')
         {
-          this.options = this.items(this.config.model);
+          options = this.items(this.config.model);
         }
         else
         {
-          this.options = [...this.items];
+          options = [...this.items];
+        }
+
+        if (JSON.stringify(options) !== JSON.stringify(this.options))
+        {
+          this.options = options;
         }
       },
 
@@ -78,7 +84,13 @@
           value = null;
         }
 
+        if (this.value === value)
+        {
+          return;
+        }
+
         this.$emit('input', value);
+        this.$emit('update:value', value);
       }
     }
   }