From 8906fb52b1b40d480f027d5d80514b60b2c61b3f Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Tue, 8 Feb 2022 14:45:04 +0100
Subject: [PATCH] =?UTF-8?q?fixes=20+=20=C3=B3=C3=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zero.Backoffice.UI/app/components/ui-pick.vue  |  2 +-
 .../app/components/ui-property.vue             |  7 ++++++-
 zero.Backoffice.UI/app/editor/compile.ts       |  4 ++--
 zero.Backoffice.UI/app/editor/editor-field.ts  |  4 ++--
 .../app/editor/ui-editor-component.vue         | 18 +++++++++---------
 .../media/components/ui-mediapicker.vue        |  1 +
 zero.Backoffice.UI/app/utils/arrays.ts         |  7 ++++++-
 7 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/zero.Backoffice.UI/app/components/ui-pick.vue b/zero.Backoffice.UI/app/components/ui-pick.vue
index b086a6ed..253dde33 100644
--- a/zero.Backoffice.UI/app/components/ui-pick.vue
+++ b/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;
diff --git a/zero.Backoffice.UI/app/components/ui-property.vue b/zero.Backoffice.UI/app/components/ui-property.vue
index 9778cd74..3d3ea408 100644
--- a/zero.Backoffice.UI/app/components/ui-property.vue
+++ b/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);
+      }
     }
   }
 
diff --git a/zero.Backoffice.UI/app/editor/compile.ts b/zero.Backoffice.UI/app/editor/compile.ts
index 040de6e4..0cfc44a5 100644
--- a/zero.Backoffice.UI/app/editor/compile.ts
+++ b/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)
   {
diff --git a/zero.Backoffice.UI/app/editor/editor-field.ts b/zero.Backoffice.UI/app/editor/editor-field.ts
index 220e79aa..7f2cf8e9 100644
--- a/zero.Backoffice.UI/app/editor/editor-field.ts
+++ b/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;
   }
diff --git a/zero.Backoffice.UI/app/editor/ui-editor-component.vue b/zero.Backoffice.UI/app/editor/ui-editor-component.vue
index 72160369..9dbad1c2 100644
--- a/zero.Backoffice.UI/app/editor/ui-editor-component.vue
+++ b/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,
diff --git a/zero.Backoffice.UI/app/modules/media/components/ui-mediapicker.vue b/zero.Backoffice.UI/app/modules/media/components/ui-mediapicker.vue
index b9a4b705..1786928a 100644
--- a/zero.Backoffice.UI/app/modules/media/components/ui-mediapicker.vue
+++ b/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)
diff --git a/zero.Backoffice.UI/app/utils/arrays.ts b/zero.Backoffice.UI/app/utils/arrays.ts
index 2165074c..cf4859b6 100644
--- a/zero.Backoffice.UI/app/utils/arrays.ts
+++ b/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);
-}
\ No newline at end of file
+}
+
+export function arrayContainsAll(array: any[], other: any[]): boolean
+{
+  return other.every(x => array.indexOf(x) > -1);
+}