schema extensions

zero.Backoffice.UI/app/components/ui-check-list.vue

@@ -1,134 +1,151 @@
 <template>
-  <div class="ui-input-list" :class="{'is-disabled': disabled }">
+  <div class="ui-check-list" :class="{'is-disabled': disabled, 'is-inline': inline }">
-    <div v-for="item in items" class="ui-input-list-item">
+    <label v-for="item in list" class="ui-native-check ui-check-list-item">
-      <input v-model="item.value" type="text" class="ui-input" :maxlength="maxLength" :readonly="disabled" @input="onChange" size="5" />
+      <input type="checkbox" :checked="isChecked(item)" @input="onChange(item)" :disabled="disabled" />
-      <ui-icon-button type="light" icon="fth-x" @click="removeItem(item)" v-if="!disabled" />
+      <span class="ui-native-check-toggle"></span>
-    </div>
+      <span v-localize="item[labelKey]"></span>
-    <ui-button v-if="!disabled && !plusButton" type="light" :label="addLabel" @click="addItem" />
+      <span class="-desc" v-if="item[descriptionKey]" v-localize="item[descriptionKey]"></span>
-    <ui-select-button v-if="!disabled && plusButton" icon="fth-plus" :label="items.length > 0 ? null : addLabel" @click="addItem" />
+    </label>
   </div>
 </template>
 
 
 <script>
   export default {
-    name: 'uiInputList',
+    name: 'uiCheckList',
-
     props: {
-      addLabel: {
-        type: String,
-        default: '@ui.add'
-      },
       value: {
         type: Array,
         default: () => []
       },
+      items: {
+        type: [Array, Function, Promise],
+        required: true
+      },
       disabled: {
         type: Boolean,
         default: false
       },
-      maxItems: {
+      inline: {
-        type: Number,
-        default: 100
-      },
-      maxLength: {
-        type: Number,
-        default: 200
-      },
-      plusButton: {
         type: Boolean,
         default: false
       },
+      limit: {
+        type: Number,
+        default: 100
+      },
+      reverse: Boolean,
+      labelKey: {
+        type: String,
+        default: 'value'
+      },
+      descriptionKey: {
+        type: String,
+        default: 'description'
+      },
+      idKey: {
+        type: String,
+        default: 'key'
+      }
     },
 
     data: () => ({
-      items: []
+      list: []
     }),
 
     watch: {
-      value(value)
+      items()
       {
-        this.reload();
+        this.init();
       }
     },
 
     mounted()
     {
-      this.reload();
+      this.init();
     },
 
     methods: {
-
+      init()
-      reload()
       {
-        this.items = this.value.map(item => ({ value: item }));
+        if (typeof this.items === 'function')
-      },
-
-      onChange()
-      {
-        this.$emit('input', this.items.map(item => item.value));
-        this.$emit('change', this.items.map(item => item.value));
-      },
-
-      addItem()
-      {
-        this.items.push({
-          value: null
-        });
-        this.onChange();
-
-        this.$nextTick(() =>
         {
-          this.$el.querySelector('.ui-input-list-item:last-of-type input').focus();
+          this.items().then(res =>
-        });
+          {
+            this.list = res.data;
+          });
+        }
+        else
+        {
+          this.list = JSON.parse(JSON.stringify(this.items));
+        }
       },
 
-      removeItem(item)
+      isChecked(item)
       {
-        const index = this.items.indexOf(item);
+        let index = this.value.indexOf(item[this.idKey]);
-        this.items.splice(index, 1);
+        return (!this.reverse && index > -1) || (this.reverse && index < 0);
-        this.onChange();
+      },
+
+      onChange(item)
+      {
+        let index = this.value.indexOf(item[this.idKey]);
+        let value = JSON.parse(JSON.stringify(this.value));
+        if (index < 0)
+        {
+          value.push(item[this.idKey]);
+        }
+        else
+        {
+          value.splice(index, 1);
+        }
+
+        this.$emit('input', value);
       }
     }
   }
 </script>
 
 <style lang="scss">
-  .ui-input-list
+  .ui-check-list-item
   {
+    display: block;
   }
 
-  .ui-input-list-item
+  .ui-check-list .ui-check-list-item + .ui-check-list-item
   {
-    display: grid;
+    margin-top: 8px;
-    grid-template-columns: 1fr auto auto;
+  }
-    background: var(--color-input);
-    border-radius: var(--radius);
-    margin-bottom: 6px;
 
-    .ui-input-list.is-disabled &
+  .ui-alias + .ui-check-list-item
-    {
+  {
-      background: transparent;
+    margin-top: 14px;
-    }
+  }
 
-    .ui-input
+  .ui-check-list.is-inline .ui-check-list-item
-    {
+  {
-      border-radius: var(--radius) 0 0 var(--radius);
+    display: inline-block;
-    }
+  }
 
-    .ui-icon-button
+  .ui-check-list.is-inline .ui-check-list-item + .ui-check-list-item
-    {
+  {
-      border-radius: 0 var(--radius) var(--radius) 0;
+    margin-top: 0;
-      height: 48px;
+    margin-left: 30px;
-      width: 48px;
+  }
-      border-left: none;
-      background: transparent !important;
-      box-shadow: none;
-    }
 
-    .ui-icon-button + .ui-icon-button
+  .ui-check-list.is-inline .ui-check-list-item .ui-native-check-toggle
-    {
+  {
-      margin-left: 0;
+    margin-right: 6px;
-    }
+  }
+
+  .ui-check-list-item .-desc
+  {
+    display: inline-block;
+    color: var(--color-text-dim);
+    font-size: var(--font-size-s);
+    margin-left: 0.5em;
+
+    &:before { content: '('; }
+    &:after { content: ')'; }
   }
 </style>

zero.Backoffice.UI/app/components/ui-form.vue

@@ -143,8 +143,6 @@
         this.setState('loading');
         this.clearErrors();
 
-        console.info(response);
-
         if (!response.success)
         {
           this.setState('error');

zero.Backoffice.UI/app/components/ui-pick.vue

@@ -426,7 +426,7 @@
           if (this.configuration.paging && typeof items === 'object' && !Array.isArray(items))
           {
             // TODO we need to store metadata to allow pagination
-            items = items.items;
+            items = items.data;
           }
 
           if (needsFilter)

zero.Backoffice.UI/app/core/types/zero.ts

@@ -1,6 +1,6 @@
 import { Emitter, EventType } from "mitt";
 import { Component } from "vue";
-import { ZeroSchema } from "zero/schemas";
+import { ZeroSchema, ZeroSchemaExtension } from "zero/schemas";
 
 export interface Zero
 {
@@ -27,6 +27,11 @@ export interface Zero
    **/
   getSchema(alias: string): Promise<ZeroSchema | null>;
 
+  /**
+   * get all defined extensions for a schema
+   **/
+  getSchemaExtensions(alias: string): ZeroSchemaExtension[];
+
   /**
    * get all defined link areas
    **/

zero.Backoffice.UI/app/core/types/zeroPluginOptions.ts

@@ -3,6 +3,7 @@ import { RouteRecordRaw } from 'vue-router';
 import { App, Component } from 'vue';
 import { ZeroSchemaProp } from '../zero';
 import { ZeroLinkArea } from './zero';
+import { ZeroSchema, ZeroSchemaExtension } from 'zero/schemas';
 
 export interface ZeroPluginOptions
 {
@@ -11,6 +12,8 @@ export interface ZeroPluginOptions
   route: (route: RouteRecordRaw) => void;
   schemas: Record<string, ZeroSchemaProp>;
   schema: (alias: string, schema: ZeroSchemaProp) => void;
+  schemaExtensions: ZeroSchemaExtension[];
+  extendSchema: (alias: string, extension: ((schema: ZeroSchema) => void)) => void;
   fieldTypes: Record<string, Component>;
   fieldType: (alias: string, component: Component) => void;
   linkAreas: Record<string, ZeroLinkArea>;

zero.Backoffice.UI/app/core/zeroRuntime.ts

@@ -25,7 +25,7 @@ import
   pageModulePlugin
 } from '../modules';
 import editorPlugin from '../editor/plugin';
-import { ZeroSchema } from 'zero/schemas';
+import { ZeroSchema, ZeroSchemaExtension } from 'zero/schemas';
 import { ZeroSchemaProp } from './zero';
 import * as zeroOptions from '../options';
 import plugins from '../plugins.generated';
@@ -45,6 +45,7 @@ export class ZeroRuntime implements Zero
   _installOptions: ZeroInstallOptions;
   _routerConfig: RouterOptions;
   _schemas: Record<string, ZeroSchemaProp> = {};
+  _schemaExtensions: ZeroSchemaExtension[] = [];
   _fieldTypes: Record<string, Component> = {};
   _linkAreas: Record<string, ZeroLinkArea> = {};
 
@@ -105,6 +106,7 @@ export class ZeroRuntime implements Zero
       vue: this._app,
       routes: this._routerConfig.routes,
       schemas: this._schemas,
+      schemaExtensions: this._schemaExtensions,
       fieldTypes: this._fieldTypes,
       linkAreas: this._linkAreas,
       route(route: RouteRecordRaw)
@@ -115,6 +117,10 @@ export class ZeroRuntime implements Zero
       {
         this.schemas[alias] = schema;
       },
+      extendSchema(alias: string, extension: ((schema: ZeroSchema) => void))
+      {
+        this.schemaExtensions.push({ alias, extension });
+      },
       fieldType(alias: string, component: Component) // TODO v3 allow default field options
       {
         this.fieldTypes[alias] = component;
@@ -171,7 +177,7 @@ export class ZeroRuntime implements Zero
    **/
   async getSchema(alias: string): Promise<ZeroSchema | null>
   {
-    const schema: ZeroSchemaProp = this._schemas[alias];
+    let schema: ZeroSchemaProp = this._schemas[alias];
 
     if (!schema)
     {
@@ -181,13 +187,24 @@ export class ZeroRuntime implements Zero
     if (typeof schema === 'function')
     {
       const res = await schema();
-      return res.default;
+      schema = res.default as ZeroSchema;
     }
 
+    schema.alias = alias;
+
     return Promise.resolve(schema);
   }
 
 
+  /**
+   * get all defined extensions for a schema
+   **/
+  getSchemaExtensions(alias: string): ZeroSchemaExtension[]
+  {
+    return this._schemaExtensions.filter(x => x.alias == alias);
+  }
+
+
   /**
    * get all defined link areas
    **/

zero.Backoffice.UI/app/editor/_fields/pagepicker.vue

@@ -1,24 +0,0 @@
-<template>
-  <ui-pagepicker :config="config" :value="value" @input="$emit('input', $event)" :disabled="disabled" :limit="1" />
-</template>
-
-
-<script>
-  export default {
-    props: {
-      value: {
-        type: [String, Array],
-        default: null
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      limit: {
-        type: Number,
-        default: 1
-      },
-      config: Object
-    },
-  }
-</script>

zero.Backoffice.UI/app/editor/compile.ts

@@ -8,6 +8,8 @@ import { ZeroEditorFieldConfiguration, ZeroEditorFieldFilterPreview } from "./ed
 import { localize } from '../services/localization';
 
 
+let appliedExtensionsTo: string[] = [];
+
 export interface ZeroCompiledEditor
 {
   alias: string;
@@ -162,6 +164,18 @@ export function compileEditor(zero: Zero, editor: ZeroEditor): ZeroCompiledEdito
     return null;
   }
 
+  if (appliedExtensionsTo.indexOf(editor.alias) < 0)
+  {
+    appliedExtensionsTo.push(editor.alias);
+
+    let extensions = zero.getSchemaExtensions(editor.alias);
+
+    extensions.forEach(extension =>
+    {
+      extension.extension(editor);
+    });
+  }
+
   let model = {
     alias: editor.alias,
     blueprint: null,

zero.Backoffice.UI/app/editor/editor-canvas.ts

@@ -21,6 +21,11 @@ export class ZeroEditorCanvasBase
     this.fields.push(proxy);
     return proxy;
   }
+
+  getField(path: string): ZeroEditorField | undefined
+  {
+    return this.fields.find(x => x.path == path);
+  }
 }
 
 
@@ -55,6 +60,11 @@ export class ZeroEditorCanvas extends ZeroEditorCanvasBaseWithFieldset
     this.tabs.push(tab);
     return tab;
   }
+
+  getTab(alias: string): ZeroEditorTab | undefined
+  {
+    return this.tabs.find(x => x.alias == alias);
+  }
 }
 
 

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

@@ -1,28 +1,22 @@
 <template>
-  <input :value="value" @input="$emit('input', $event.target.value)" type="password" class="ui-input" v-placeholder="{ placeholder, model: entity }" :maxlength="maxLength" :disabled="disabled" />
+  <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: {
+      value: String,
-        type: String,
+      config: Object,
-        default: null
+
-      },
       maxLength: {
         type: Number,
         default: null
       },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
       placeholder: {
-        type: String,
+        type: [String, Function],
         default: null
-      },
+      }
-      entity: Object
     }
   }
 </script>

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

@@ -32,13 +32,15 @@
     watch: {
       items: {
         deep: true,
-        handler()
+        handler(val)
         {
-          this.rebuild();
+          if (typeof val !== 'function')
-          this.onChange({ target: { value: this.value } });
+          {
+            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;
+          options = items;
-          return;
         }
-
+        else if (typeof this.items === 'function')
-        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);
       }
     }
   }

zero.Backoffice.UI/app/schemas/schemas.d.ts

@@ -5,4 +5,10 @@ declare module 'zero/schemas'
   {
     alias: string;
   }
+
+  export interface ZeroSchemaExtension
+  {
+    alias: string;
+    extension: (schema: ZeroSchema) => void;
+  }
 }

zero.Core/Localization/CountryStore.cs

@@ -9,8 +9,8 @@ public class CountryStore : EntityStore<Country>, ICountryStore
   /// <inheritdoc />
   protected override void ValidationRules(ZeroValidator<Country> validator)
   {
-    validator.RuleFor(x => x.Code).Length(2).Unique(Session);
+    validator.RuleFor(x => x.Code).NotEmpty().Length(2).Unique(Session);
-    validator.RuleFor(x => x.Name).Length(2, 120);
+    validator.RuleFor(x => x.Name).NotEmpty().Length(2, 120);
   }
 }