fixes + óÒ

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

@@ -223,7 +223,7 @@
 
         if (this.previews.length > 0)
         {
-          html += ': <b>' + this.previews.map(p => p[this.configuration.keys.name]).join(', ') + '</b>';
+          html += (html ? ': ' : '') + '<b>' + this.previews.map(p => p[this.configuration.keys.name]).join(', ') + '</b>';
         }
 
         return html;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="ui-property" :class="{'is-vertical': vertical, 'is-text': isText, 'hide-label': hideLabel, 'is-disabled': disabled, 'is-locked': locked, 'can-unlock': canUnlock }">
     <label v-if="label && !hideLabel" class="ui-property-label" :for="field" v-localize:title="description" :class="{ 'has-description': !!description }">
-      <button type="button" v-if="canUnlock" class="ui-property-label-small is-lock" :class="{'is-unlocked': !locked}" :title="locked ? 'Unlock property...' : 'Lock property'" @click="$emit(locked ? 'unlock' : 'lock')">
+      <button type="button" v-if="canUnlock" class="ui-property-label-small is-lock" :class="{'is-unlocked': !locked}" :title="locked ? 'Unlock property...' : 'Lock property'" @click.prevent="$emit(locked ? 'unlock' : 'lock')">
         <ui-icon :size="13" :symbol="locked ? 'fth-lock' : 'fth-unlock'"></ui-icon>
       </button>
       <span v-localize="label"></span>
@@ -212,6 +212,11 @@
       {
         color: var(--color-text);
       }
+
+      .is-locked &
+      {
+        color: var(--color-accent-error);
+      }
     }
   }
 

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

@@ -1,4 +1,4 @@
-import { Component } from "vue";
+import { Component, markRaw } from "vue";
 import { ZeroEditorField, ZeroEditorDisplay } from "zero/schemas";
 import { Zero } from "../core";
 import { ZeroEditor } from "./editor";
@@ -76,7 +76,7 @@ export interface ZeroCompiledEditorField
 
 export function compileField(zero: Zero, editor: ZeroEditor, field: ZeroEditorField): ZeroCompiledEditorField | undefined
 {
-  const component = field.customComponent || zero.getFieldTypeComponent(field.fieldType);
+  const component = markRaw(field.customComponent || zero.getFieldTypeComponent(field.fieldType));
 
   if (!component)
   {

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

@@ -1,4 +1,4 @@
-import { Component } from "vue";
+import { Component, markRaw } from "vue";
 import { ZeroEditorField } from "zero/schemas";
 import { extendObject } from '../utils/objects';
 
@@ -92,7 +92,7 @@ export class ZeroEditorFieldImpl implements ZeroEditorField
    */
   component(component: Component, options?: any): ZeroEditorField
   {
-    this.customComponent = component;
+    this.customComponent = markRaw(component);
     this.options = options;
     return this;
   }

zero.Backoffice.UI/app/editor/ui-editor-component.vue

@@ -55,15 +55,15 @@
       }
     },
 
-    watch: {
-      value: {
-        deep: true,
-        handler: function ()
-        {
-          this.rebuildModel();
-        }
-      }
-    },
+    //watch: {
+    //  value: {
+    //    deep: true,
+    //    handler: function ()
+    //    {
+    //      this.rebuildModel();
+    //    }
+    //  }
+    //},
 
     data: () => ({
       model: null,

zero.Backoffice.UI/app/modules/media/components/ui-mediapicker.vue

@@ -70,6 +70,7 @@
         }
 
         this.$emit('input', value);
+        this.$emit('update:value', value);
       },
 
       async onSortingUpdated(ev)

zero.Backoffice.UI/app/utils/arrays.ts

@@ -99,4 +99,9 @@ export function arrayUnique(array: any[]): any[]
 export function arrayDifference(array: any[], other: any[]): any[]
 {
   return _difference(array, other);
-}
+}
+
+export function arrayContainsAll(array: any[], other: any[]): boolean
+{
+  return other.every(x => array.indexOf(x) > -1);
+}