From c59e468a32bfa2987e24430faffe477200a8a2c0 Mon Sep 17 00:00:00 2001
From: Luka Saric <rpg.ari7@gmail.com>
Date: Fri, 19 Mar 2021 17:45:39 +0100
Subject: [PATCH 1/9] Meta inputs cleanup :nail_care:

- Added validation on checkbox, combobox & select inputs
- Meta input formatting & code polishing
---
 .../meta-inputs/meta-checkbox/Edit.vue        | 30 +++++++-
 .../meta-color/Edit/ColorInput.vue            | 24 +++---
 .../meta-inputs/meta-color/Edit/index.vue     | 30 ++++----
 .../meta-inputs/meta-combobox/Edit.vue        | 49 ++++++++-----
 .../components/meta-inputs/meta-file/Edit.vue | 18 ++---
 .../components/meta-inputs/meta-html/Edit.vue | 10 +--
 .../meta-inputs/meta-input/Edit.vue           |  9 +--
 .../meta-inputs/meta-select/Edit.vue          | 73 ++++++++++---------
 .../meta-inputs/meta-switch/Edit.vue          |  2 +-
 .../meta-inputs/meta-textarea/Edit.vue        |  9 +--
 10 files changed, 136 insertions(+), 118 deletions(-)

diff --git a/client/components/meta-inputs/meta-checkbox/Edit.vue b/client/components/meta-inputs/meta-checkbox/Edit.vue
index 9c772556b..e175cdbc0 100644
--- a/client/components/meta-inputs/meta-checkbox/Edit.vue
+++ b/client/components/meta-inputs/meta-checkbox/Edit.vue
@@ -1,28 +1,50 @@
 <template>
-  <div class="control">
+  <validation-provider
+    ref="validator"
+    v-slot="{ errors }"
+    :name="meta.label.toLowerCase()"
+    :rules="validationRules"
+    tag="div"
+    slim
+    class="control">
     <div v-if="meta.label" class="control-label">{{ meta.label }}</div>
     <v-checkbox
-      @change="value => $emit('update', meta.key, value)"
+      v-model="value"
+      @change="update"
       :input-value="meta.value"
       :name="meta.key"
       :label="meta.description"
+      :error-messages="errors"
       color="primary darken-2"
       class="mt-1" />
-  </div>
+  </validation-provider>
 </template>
 
 <script>
+import get from 'lodash/get';
+
 export default {
   name: 'meta-checkbox',
   props: {
     meta: { type: Object, default: () => ({ value: null }) }
+  },
+  data: vm => ({ value: vm.meta.value }),
+  computed: {
+    validationRules: vm => get(vm.meta, 'validate.rules', vm.meta.validate)
+  },
+  methods: {
+    async update(data) {
+      const { valid } = await this.$refs.validator.validate();
+      if (!valid || this.value === this.meta.value) return;
+      return this.$emit('update', this.meta.key, data);
+    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .control {
-  padding: 3px 8px;
+  padding: 0.1875rem 0.5rem;
 
   ::v-deep label.v-label {
     margin-bottom: 0;
diff --git a/client/components/meta-inputs/meta-color/Edit/ColorInput.vue b/client/components/meta-inputs/meta-color/Edit/ColorInput.vue
index b29744f33..e0b499c56 100644
--- a/client/components/meta-inputs/meta-color/Edit/ColorInput.vue
+++ b/client/components/meta-inputs/meta-color/Edit/ColorInput.vue
@@ -30,12 +30,10 @@ export default {
   props: {
     value: { type: String, required: true }
   },
-  data() {
-    return {
-      menu: false,
-      color: this.value || '#ffffff'
-    };
-  },
+  data: vm => ({
+    menu: false,
+    color: vm.value || '#ffffff'
+  }),
   methods: {
     submit() {
       this.$emit('input', this.color);
@@ -48,12 +46,12 @@ export default {
 <style lang="scss" scoped>
 .preview {
   float: left;
-  margin-right: 10px;
+  margin-right: 0.625rem;
 }
 
 .selected {
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
   text-align: center;
   border-radius: 50%;
   cursor: pointer;
@@ -61,8 +59,8 @@ export default {
 
   .eyedropper {
     color: #fff;
-    font-size: 18px;
-    line-height: 40px;
+    font-size: 1.125rem;
+    line-height: 2.5rem;
     opacity: 0;
     transition: opacity 0.3s ease;
   }
@@ -73,10 +71,10 @@ export default {
 }
 
 ::v-deep .v-color-picker__edit {
-  margin-top: 16px;
+  margin-top: 1rem;
 
   input {
-    font-size: 14px;
+    font-size: 0.875rem;
   }
 }
 </style>
diff --git a/client/components/meta-inputs/meta-color/Edit/index.vue b/client/components/meta-inputs/meta-color/Edit/index.vue
index 97deffc87..861552e4b 100644
--- a/client/components/meta-inputs/meta-color/Edit/index.vue
+++ b/client/components/meta-inputs/meta-color/Edit/index.vue
@@ -47,17 +47,13 @@ export default {
   props: {
     meta: { type: Object, default: () => ({ value: null }) }
   },
-  data() {
-    return {
-      showInput: false,
-      colors: this.meta.colors || DEFAULT_COLORS,
-      value: this.meta.value
-    };
-  },
+  data: ({ meta }) => ({
+    showInput: false,
+    colors: meta.colors || DEFAULT_COLORS,
+    value: meta.value
+  }),
   computed: {
-    selected() {
-      return this.value || get(this.colors, '[0][0]', '#000000');
-    }
+    selected: vm => vm.value || get(vm.colors, '[0][0]', '#000000')
   },
   methods: {
     select(color) {
@@ -74,25 +70,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$size: 18px;
-$gutter: 5px;
+$size: 1.125rem;
+$gutter: 0.3125rem;
 
 .control-group {
-  margin: 5px 0;
+  margin: 0.3125rem 0;
   color: #333;
   font-weight: normal;
-  line-height: 24px;
+  line-height: 1.5rem;
   word-wrap: break-word;
 }
 
 .picker {
-  padding: 10px;
+  padding: 0.625rem;
 
   .title {
     display: block;
-    margin-bottom: 10px;
+    margin-bottom: 0.625rem;
     color: #808080;
-    font-size: 14px !important;
+    font-size: 0.875rem !important;
     font-weight: normal;
     line-height: 1rem;
   }
diff --git a/client/components/meta-inputs/meta-combobox/Edit.vue b/client/components/meta-inputs/meta-combobox/Edit.vue
index e7ea2cea5..faabe5b61 100644
--- a/client/components/meta-inputs/meta-combobox/Edit.vue
+++ b/client/components/meta-inputs/meta-combobox/Edit.vue
@@ -1,33 +1,44 @@
 <template>
-  <v-combobox
-    @change="$emit('update', meta.key, $event)"
-    :value="meta.value"
-    :name="meta.key"
-    :items="meta.options"
-    :placeholder="meta.placeholder"
-    :label="meta.label"
-    :multiple="meta.multiple"
-    :chips="meta.multiple"
-    item-text="label"
-    item-value="value"
-    deletable-chips
-    outlined />
+  <validation-provider
+    ref="validator"
+    v-slot="{ errors }"
+    :name="meta.label.toLowerCase()"
+    :rules="validationRules"
+    slim>
+    <v-combobox
+      v-model="value"
+      @change="update"
+      :value="meta.value"
+      :name="meta.key"
+      :items="meta.options"
+      :placeholder="meta.placeholder"
+      :label="meta.label"
+      :multiple="meta.multiple"
+      :chips="meta.multiple"
+      :error-messages="errors"
+      item-text="label"
+      item-value="value"
+      deletable-chips clearable outlined />
+  </validation-provider>
 </template>
 
 <script>
-import isObject from 'lodash/isObject';
+import get from 'lodash/get';
 
 export default {
   name: 'meta-combobox',
   props: {
     meta: { type: Object, default: () => ({ value: null }) }
   },
+  data: vm => ({ value: vm.meta.value }),
   computed: {
-    value() {
-      const { meta: { value, options } } = this;
-      const hasPrimitiveOptions = !isObject(options[0]);
-      if (hasPrimitiveOptions) return value;
-      return value.map(val => options.find(it => it.value === val));
+    validationRules: vm => get(vm.meta, 'validate.rules', vm.meta.validate)
+  },
+  methods: {
+    async update(value) {
+      const { valid } = await this.$refs.validator.validate();
+      if (!valid || this.value === this.meta.value) return;
+      this.$emit('update', this.meta.key, value);
     }
   }
 };
diff --git a/client/components/meta-inputs/meta-file/Edit.vue b/client/components/meta-inputs/meta-file/Edit.vue
index 83598881f..a415b073d 100644
--- a/client/components/meta-inputs/meta-file/Edit.vue
+++ b/client/components/meta-inputs/meta-file/Edit.vue
@@ -16,16 +16,14 @@ export default {
     meta: { type: Object, default: () => ({ value: null }) }
   },
   computed: {
-    options() {
-      return {
-        id: this.meta.key,
-        fileKey: get(this.meta, 'value.key', ''),
-        fileName: get(this.meta, 'value.name', ''),
-        validate: this.meta.validate,
-        label: this.meta.label,
-        placeholder: this.meta.placeholder
-      };
-    }
+    options: ({ meta }) => ({
+      id: meta.key,
+      fileKey: get(meta, 'value.key', ''),
+      fileName: get(meta, 'value.name', ''),
+      validate: meta.validate,
+      label: meta.label,
+      placeholder: meta.placeholder
+    })
   },
   components: { FileInput }
 };
diff --git a/client/components/meta-inputs/meta-html/Edit.vue b/client/components/meta-inputs/meta-html/Edit.vue
index 909e0aa4f..4dc17dd33 100644
--- a/client/components/meta-inputs/meta-html/Edit.vue
+++ b/client/components/meta-inputs/meta-html/Edit.vue
@@ -39,12 +39,10 @@ export default {
   props: {
     meta: { type: Object, default: () => ({ value: null }) }
   },
-  data() {
-    return {
-      content: this.meta.value,
-      editing: false
-    };
-  },
+  data: vm => ({
+    content: vm.meta.value,
+    editing: false
+  }),
   computed: {
     options: ({ meta }) => ({ ...defaultOptions(), ...meta.editorOptions })
   },
diff --git a/client/components/meta-inputs/meta-input/Edit.vue b/client/components/meta-inputs/meta-input/Edit.vue
index 74ad09dd2..25e593699 100644
--- a/client/components/meta-inputs/meta-input/Edit.vue
+++ b/client/components/meta-inputs/meta-input/Edit.vue
@@ -26,11 +26,7 @@ export default {
   props: {
     meta: { type: Object, default: () => ({ value: null }) }
   },
-  data() {
-    return {
-      value: this.meta.value
-    };
-  },
+  data: vm => ({ value: vm.meta.value }),
   computed: {
     validationRules: vm => get(vm.meta, 'validate.rules', vm.meta.validate)
   },
@@ -38,8 +34,7 @@ export default {
     lowerCase,
     async onChange() {
       const { valid } = await this.$refs.validator.validate();
-      if (!valid) return;
-      if (this.value === this.meta.value) return;
+      if (!valid || this.value === this.meta.value) return;
       this.$emit('update', this.meta.key, this.value);
     }
   }
diff --git a/client/components/meta-inputs/meta-select/Edit.vue b/client/components/meta-inputs/meta-select/Edit.vue
index 4a12c4a64..b5a51684d 100644
--- a/client/components/meta-inputs/meta-select/Edit.vue
+++ b/client/components/meta-inputs/meta-select/Edit.vue
@@ -1,52 +1,57 @@
 <template>
-  <v-select
-    @change="update"
-    :value="meta.value"
-    :name="meta.key"
-    :items="meta.options"
-    :placeholder="meta.placeholder"
-    :label="meta.label"
-    :multiple="meta.multiple"
-    :chips="meta.multiple"
-    :small-chips="!hasImgProp"
-    item-text="label"
-    item-value="value"
-    deletable-chips
-    outlined>
-    <template v-if="hasImgProp" v-slot:item="{ item }">
-      <img v-if="item.img" :src="item.img" :alt="item.label" class="img">
-      <span>{{ item.label }}</span>
-    </template>
-    <template v-if="hasImgProp" v-slot:selection="{ item }">
-      <component :is="meta.multiple ? 'v-chip' : 'div'">
+  <validation-provider
+    ref="validator"
+    v-slot="{ errors }"
+    :name="meta.label.toLowerCase()"
+    :rules="validationRules"
+    slim>
+    <v-select
+      v-model="value"
+      @change="update"
+      :value="meta.value"
+      :name="meta.key"
+      :items="meta.options"
+      :placeholder="meta.placeholder"
+      :label="meta.label"
+      :multiple="meta.multiple"
+      :chips="meta.multiple"
+      :small-chips="!hasImgProp"
+      :error-messages="errors"
+      item-text="label"
+      item-value="value"
+      deletable-chips
+      outlined>
+      <template v-if="hasImgProp" v-slot:item="{ item }">
         <img v-if="item.img" :src="item.img" :alt="item.label" class="img">
         <span>{{ item.label }}</span>
-      </component>
-    </template>
-  </v-select>
+      </template>
+      <template v-if="hasImgProp" v-slot:selection="{ item }">
+        <component :is="meta.multiple ? 'v-chip' : 'div'">
+          <img v-if="item.img" :src="item.img" :alt="item.label" class="img">
+          <span>{{ item.label }}</span>
+        </component>
+      </template>
+    </v-select>
+  </validation-provider>
 </template>
 
 <script>
-import isObject from 'lodash/isObject';
+import get from 'lodash/get';
 
 export default {
   name: 'meta-select',
   props: {
     meta: { type: Object, default: () => ({ value: null }) }
   },
+  data: vm => ({ value: vm.meta.value }),
   computed: {
-    value() {
-      const { meta: { value, options } } = this;
-      const hasPrimitiveOptions = !isObject(options[0]);
-      if (hasPrimitiveOptions) return value;
-      return value.map(val => options.find(it => it.value === val));
-    },
-    hasImgProp() {
-      return this.meta.options.some(it => it.img);
-    }
+    validationRules: vm => get(vm.meta, 'validate.rules', vm.meta.validate),
+    hasImgProp: vm => vm.meta.options.some(it => it.img)
   },
   methods: {
-    update(data) {
+    async update(data) {
+      const { valid } = await this.$refs.validator.validate();
+      if (!valid || this.value === this.meta.value) return;
       return this.$emit('update', this.meta.key, data);
     }
   }
diff --git a/client/components/meta-inputs/meta-switch/Edit.vue b/client/components/meta-inputs/meta-switch/Edit.vue
index a14ca359a..2531ac295 100644
--- a/client/components/meta-inputs/meta-switch/Edit.vue
+++ b/client/components/meta-inputs/meta-switch/Edit.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="px-1 pt-0 pb-10">
     <v-switch
-      @change="value => $emit('update', meta.key, value)"
+      @change="$emit('update', meta.key, $event)"
       :input-value="meta.value"
       :name="meta.key"
       :label="meta.label"
diff --git a/client/components/meta-inputs/meta-textarea/Edit.vue b/client/components/meta-inputs/meta-textarea/Edit.vue
index bb1e6a572..d830e6acf 100644
--- a/client/components/meta-inputs/meta-textarea/Edit.vue
+++ b/client/components/meta-inputs/meta-textarea/Edit.vue
@@ -29,11 +29,7 @@ export default {
     meta: { type: Object, default: () => ({ value: null }) },
     rows: { type: Number, default: 2 }
   },
-  data() {
-    return {
-      value: this.meta.value
-    };
-  },
+  data: vm => ({ value: vm.meta.value }),
   computed: {
     validationRules: vm => get(vm.meta, 'validate.rules', vm.meta.validate)
   },
@@ -41,8 +37,7 @@ export default {
     lowerCase,
     async onChange() {
       const { valid } = await this.$refs.validator.validate();
-      if (!valid) return;
-      if (this.value === this.meta.value) return;
+      if (!valid || this.value === this.meta.value) return;
       this.$emit('update', this.meta.key, this.value);
     }
   }

From 9d490ffc6e49cd5ad728e3c461a95ac3bbe874d1 Mon Sep 17 00:00:00 2001
From: Luka Saric <rpg.ari7@gmail.com>
Date: Mon, 22 Mar 2021 11:35:17 +0100
Subject: [PATCH 2/9] Removed unnecessary slim prop

---
 client/components/meta-inputs/meta-checkbox/Edit.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/components/meta-inputs/meta-checkbox/Edit.vue b/client/components/meta-inputs/meta-checkbox/Edit.vue
index e175cdbc0..a241cd75d 100644
--- a/client/components/meta-inputs/meta-checkbox/Edit.vue
+++ b/client/components/meta-inputs/meta-checkbox/Edit.vue
@@ -5,7 +5,6 @@
     :name="meta.label.toLowerCase()"
     :rules="validationRules"
     tag="div"
-    slim
     class="control">
     <div v-if="meta.label" class="control-label">{{ meta.label }}</div>
     <v-checkbox

From 37386d48a1564d8a4cd7b308c944abe678454a73 Mon Sep 17 00:00:00 2001
From: Luka Saric <rpg.ari7@gmail.com>
Date: Mon, 22 Mar 2021 11:42:20 +0100
Subject: [PATCH 3/9] Replaced native lowe case with lodash

---
 client/components/meta-inputs/meta-checkbox/Edit.vue | 4 +++-
 client/components/meta-inputs/meta-combobox/Edit.vue | 4 +++-
 client/components/meta-inputs/meta-select/Edit.vue   | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/components/meta-inputs/meta-checkbox/Edit.vue b/client/components/meta-inputs/meta-checkbox/Edit.vue
index a241cd75d..40343d9ac 100644
--- a/client/components/meta-inputs/meta-checkbox/Edit.vue
+++ b/client/components/meta-inputs/meta-checkbox/Edit.vue
@@ -2,7 +2,7 @@
   <validation-provider
     ref="validator"
     v-slot="{ errors }"
-    :name="meta.label.toLowerCase()"
+    :name="lowerCase(meta.label)"
     :rules="validationRules"
     tag="div"
     class="control">
@@ -21,6 +21,7 @@
 
 <script>
 import get from 'lodash/get';
+import lowerCase from 'lodash/lowerCase';
 
 export default {
   name: 'meta-checkbox',
@@ -32,6 +33,7 @@ export default {
     validationRules: vm => get(vm.meta, 'validate.rules', vm.meta.validate)
   },
   methods: {
+    lowerCase,
     async update(data) {
       const { valid } = await this.$refs.validator.validate();
       if (!valid || this.value === this.meta.value) return;
diff --git a/client/components/meta-inputs/meta-combobox/Edit.vue b/client/components/meta-inputs/meta-combobox/Edit.vue
index faabe5b61..4cf99a00c 100644
--- a/client/components/meta-inputs/meta-combobox/Edit.vue
+++ b/client/components/meta-inputs/meta-combobox/Edit.vue
@@ -2,7 +2,7 @@
   <validation-provider
     ref="validator"
     v-slot="{ errors }"
-    :name="meta.label.toLowerCase()"
+    :name="lowerCase(meta.label)"
     :rules="validationRules"
     slim>
     <v-combobox
@@ -24,6 +24,7 @@
 
 <script>
 import get from 'lodash/get';
+import lowerCase from 'lodash/lowerCase';
 
 export default {
   name: 'meta-combobox',
@@ -35,6 +36,7 @@ export default {
     validationRules: vm => get(vm.meta, 'validate.rules', vm.meta.validate)
   },
   methods: {
+    lowerCase,
     async update(value) {
       const { valid } = await this.$refs.validator.validate();
       if (!valid || this.value === this.meta.value) return;
diff --git a/client/components/meta-inputs/meta-select/Edit.vue b/client/components/meta-inputs/meta-select/Edit.vue
index b5a51684d..4f0c3b970 100644
--- a/client/components/meta-inputs/meta-select/Edit.vue
+++ b/client/components/meta-inputs/meta-select/Edit.vue
@@ -2,7 +2,7 @@
   <validation-provider
     ref="validator"
     v-slot="{ errors }"
-    :name="meta.label.toLowerCase()"
+    :name="lowerCase(meta.label)"
     :rules="validationRules"
     slim>
     <v-select
@@ -37,6 +37,7 @@
 
 <script>
 import get from 'lodash/get';
+import lowerCase from 'lodash/lowerCase';
 
 export default {
   name: 'meta-select',
@@ -49,6 +50,7 @@ export default {
     hasImgProp: vm => vm.meta.options.some(it => it.img)
   },
   methods: {
+    lowerCase,
     async update(data) {
       const { valid } = await this.$refs.validator.validate();
       if (!valid || this.value === this.meta.value) return;

From d69693acf92aa83136809427c27d12fa2414ff4d Mon Sep 17 00:00:00 2001
From: Luka Saric <rpg.ari7@gmail.com>
Date: Mon, 22 Mar 2021 12:29:59 +0100
Subject: [PATCH 4/9] Enhanced combobox & select

- Handled empty values
- Converted value into one value type
---
 client/components/meta-inputs/meta-combobox/Edit.vue | 12 ++++++++++--
 client/components/meta-inputs/meta-select/Edit.vue   |  3 ++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/components/meta-inputs/meta-combobox/Edit.vue b/client/components/meta-inputs/meta-combobox/Edit.vue
index 4cf99a00c..530ae6cc6 100644
--- a/client/components/meta-inputs/meta-combobox/Edit.vue
+++ b/client/components/meta-inputs/meta-combobox/Edit.vue
@@ -24,8 +24,13 @@
 
 <script>
 import get from 'lodash/get';
+import isEqual from 'lodash/isEqual';
+import isObject from 'lodash/isObject';
+import last from 'lodash/last';
 import lowerCase from 'lodash/lowerCase';
 
+const processValue = val => val.map(item => isObject(item) ? item.value : item);
+
 export default {
   name: 'meta-combobox',
   props: {
@@ -37,9 +42,12 @@ export default {
   },
   methods: {
     lowerCase,
-    async update(value) {
+    async update(val) {
+      const value = processValue(val);
+      const isEmpty = value.length && !last(value).trim();
+      if (isEmpty) return value.pop();
       const { valid } = await this.$refs.validator.validate();
-      if (!valid || this.value === this.meta.value) return;
+      if (!valid || isEqual(this.value, this.meta.value)) return;
       this.$emit('update', this.meta.key, value);
     }
   }
diff --git a/client/components/meta-inputs/meta-select/Edit.vue b/client/components/meta-inputs/meta-select/Edit.vue
index 4f0c3b970..955222db8 100644
--- a/client/components/meta-inputs/meta-select/Edit.vue
+++ b/client/components/meta-inputs/meta-select/Edit.vue
@@ -37,6 +37,7 @@
 
 <script>
 import get from 'lodash/get';
+import isEqual from 'lodash/isEqual';
 import lowerCase from 'lodash/lowerCase';
 
 export default {
@@ -53,7 +54,7 @@ export default {
     lowerCase,
     async update(data) {
       const { valid } = await this.$refs.validator.validate();
-      if (!valid || this.value === this.meta.value) return;
+      if (!valid || isEqual(this.value, this.meta.value)) return;
       return this.$emit('update', this.meta.key, data);
     }
   }

From f222ee2a714fe7dba2ca73d139c5939057d2d0c4 Mon Sep 17 00:00:00 2001
From: Luka Saric <rpg.ari7@gmail.com>
Date: Mon, 22 Mar 2021 15:12:06 +0100
Subject: [PATCH 5/9] Handled non-primitive values

---
 client/components/meta-inputs/meta-combobox/Edit.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/components/meta-inputs/meta-combobox/Edit.vue b/client/components/meta-inputs/meta-combobox/Edit.vue
index 530ae6cc6..57b85ceea 100644
--- a/client/components/meta-inputs/meta-combobox/Edit.vue
+++ b/client/components/meta-inputs/meta-combobox/Edit.vue
@@ -29,7 +29,10 @@ import isObject from 'lodash/isObject';
 import last from 'lodash/last';
 import lowerCase from 'lodash/lowerCase';
 
-const processValue = val => val.map(item => isObject(item) ? item.value : item);
+function processValue(val) {
+  if (!Array.isArray(val)) return val;
+  return val.map(item => isObject(item) ? item.value : item);
+}
 
 export default {
   name: 'meta-combobox',
@@ -44,7 +47,7 @@ export default {
     lowerCase,
     async update(val) {
       const value = processValue(val);
-      const isEmpty = value.length && !last(value).trim();
+      const isEmpty = value?.length && !last(value).trim();
       if (isEmpty) return value.pop();
       const { valid } = await this.$refs.validator.validate();
       if (!valid || isEqual(this.value, this.meta.value)) return;

From a0a3944901f465154c009cd70c333ae6f4d3e048 Mon Sep 17 00:00:00 2001
From: Luka Saric <rpg.ari7@gmail.com>
Date: Wed, 24 Mar 2021 19:29:08 +0100
Subject: [PATCH 6/9] :wrench:

---
 client/components/meta-inputs/meta-combobox/Edit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/meta-inputs/meta-combobox/Edit.vue b/client/components/meta-inputs/meta-combobox/Edit.vue
index 57b85ceea..8121081d8 100644
--- a/client/components/meta-inputs/meta-combobox/Edit.vue
+++ b/client/components/meta-inputs/meta-combobox/Edit.vue
@@ -30,7 +30,7 @@ import last from 'lodash/last';
 import lowerCase from 'lodash/lowerCase';
 
 function processValue(val) {
-  if (!Array.isArray(val)) return val;
+  if (!Array.isArray(val)) return val?.trim();
   return val.map(item => isObject(item) ? item.value : item);
 }
 

From f1894557d699b0f2759a61d9bd9b952fc8944c15 Mon Sep 17 00:00:00 2001
From: Luka Saric <rpg.ari7@gmail.com>
Date: Thu, 25 Mar 2021 14:00:43 +0100
Subject: [PATCH 7/9] Debounced checkbox input update & cleanup

---
 client/components/meta-inputs/meta-checkbox/Edit.vue | 10 +++++-----
 client/components/meta-inputs/meta-combobox/Edit.vue |  1 -
 client/components/meta-inputs/meta-select/Edit.vue   |  1 -
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/client/components/meta-inputs/meta-checkbox/Edit.vue b/client/components/meta-inputs/meta-checkbox/Edit.vue
index 40343d9ac..eac4f5813 100644
--- a/client/components/meta-inputs/meta-checkbox/Edit.vue
+++ b/client/components/meta-inputs/meta-checkbox/Edit.vue
@@ -10,7 +10,6 @@
     <v-checkbox
       v-model="value"
       @change="update"
-      :input-value="meta.value"
       :name="meta.key"
       :label="meta.description"
       :error-messages="errors"
@@ -20,6 +19,7 @@
 </template>
 
 <script>
+import debounce from 'lodash/debounce';
 import get from 'lodash/get';
 import lowerCase from 'lodash/lowerCase';
 
@@ -34,11 +34,11 @@ export default {
   },
   methods: {
     lowerCase,
-    async update(data) {
+    update: debounce(async function (value) {
       const { valid } = await this.$refs.validator.validate();
-      if (!valid || this.value === this.meta.value) return;
-      return this.$emit('update', this.meta.key, data);
-    }
+      if (!valid) return;
+      this.$emit('update', this.meta.key, value);
+    }, 200)
   }
 };
 </script>
diff --git a/client/components/meta-inputs/meta-combobox/Edit.vue b/client/components/meta-inputs/meta-combobox/Edit.vue
index 8121081d8..870f476c8 100644
--- a/client/components/meta-inputs/meta-combobox/Edit.vue
+++ b/client/components/meta-inputs/meta-combobox/Edit.vue
@@ -8,7 +8,6 @@
     <v-combobox
       v-model="value"
       @change="update"
-      :value="meta.value"
       :name="meta.key"
       :items="meta.options"
       :placeholder="meta.placeholder"
diff --git a/client/components/meta-inputs/meta-select/Edit.vue b/client/components/meta-inputs/meta-select/Edit.vue
index 955222db8..84c595215 100644
--- a/client/components/meta-inputs/meta-select/Edit.vue
+++ b/client/components/meta-inputs/meta-select/Edit.vue
@@ -8,7 +8,6 @@
     <v-select
       v-model="value"
       @change="update"
-      :value="meta.value"
       :name="meta.key"
       :items="meta.options"
       :placeholder="meta.placeholder"

From c5b23b8cd3a84f4d0936282b51905ff5c4eedc9e Mon Sep 17 00:00:00 2001
From: Luka Saric <rpg.ari7@gmail.com>
Date: Thu, 25 Mar 2021 14:09:43 +0100
Subject: [PATCH 8/9] Removed value & meta value comparison

---
 client/components/meta-inputs/meta-combobox/Edit.vue | 3 +--
 client/components/meta-inputs/meta-input/Edit.vue    | 2 +-
 client/components/meta-inputs/meta-select/Edit.vue   | 3 +--
 client/components/meta-inputs/meta-textarea/Edit.vue | 2 +-
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/components/meta-inputs/meta-combobox/Edit.vue b/client/components/meta-inputs/meta-combobox/Edit.vue
index 870f476c8..fb05e13f4 100644
--- a/client/components/meta-inputs/meta-combobox/Edit.vue
+++ b/client/components/meta-inputs/meta-combobox/Edit.vue
@@ -23,7 +23,6 @@
 
 <script>
 import get from 'lodash/get';
-import isEqual from 'lodash/isEqual';
 import isObject from 'lodash/isObject';
 import last from 'lodash/last';
 import lowerCase from 'lodash/lowerCase';
@@ -49,7 +48,7 @@ export default {
       const isEmpty = value?.length && !last(value).trim();
       if (isEmpty) return value.pop();
       const { valid } = await this.$refs.validator.validate();
-      if (!valid || isEqual(this.value, this.meta.value)) return;
+      if (!valid) return;
       this.$emit('update', this.meta.key, value);
     }
   }
diff --git a/client/components/meta-inputs/meta-input/Edit.vue b/client/components/meta-inputs/meta-input/Edit.vue
index 25e593699..8d929b4d8 100644
--- a/client/components/meta-inputs/meta-input/Edit.vue
+++ b/client/components/meta-inputs/meta-input/Edit.vue
@@ -34,7 +34,7 @@ export default {
     lowerCase,
     async onChange() {
       const { valid } = await this.$refs.validator.validate();
-      if (!valid || this.value === this.meta.value) return;
+      if (!valid) return;
       this.$emit('update', this.meta.key, this.value);
     }
   }
diff --git a/client/components/meta-inputs/meta-select/Edit.vue b/client/components/meta-inputs/meta-select/Edit.vue
index 84c595215..2c1a4f57a 100644
--- a/client/components/meta-inputs/meta-select/Edit.vue
+++ b/client/components/meta-inputs/meta-select/Edit.vue
@@ -36,7 +36,6 @@
 
 <script>
 import get from 'lodash/get';
-import isEqual from 'lodash/isEqual';
 import lowerCase from 'lodash/lowerCase';
 
 export default {
@@ -53,7 +52,7 @@ export default {
     lowerCase,
     async update(data) {
       const { valid } = await this.$refs.validator.validate();
-      if (!valid || isEqual(this.value, this.meta.value)) return;
+      if (!valid) return;
       return this.$emit('update', this.meta.key, data);
     }
   }
diff --git a/client/components/meta-inputs/meta-textarea/Edit.vue b/client/components/meta-inputs/meta-textarea/Edit.vue
index d830e6acf..9c0aad64a 100644
--- a/client/components/meta-inputs/meta-textarea/Edit.vue
+++ b/client/components/meta-inputs/meta-textarea/Edit.vue
@@ -37,7 +37,7 @@ export default {
     lowerCase,
     async onChange() {
       const { valid } = await this.$refs.validator.validate();
-      if (!valid || this.value === this.meta.value) return;
+      if (!valid) return;
       this.$emit('update', this.meta.key, this.value);
     }
   }

From 90e043ab2bedd99cdcde50c0a2885da92b79a0d3 Mon Sep 17 00:00:00 2001
From: Luka Saric <rpg.ari7@gmail.com>
Date: Thu, 25 Mar 2021 14:17:44 +0100
Subject: [PATCH 9/9] Used proper value in combobox

---
 client/components/meta-inputs/meta-combobox/Edit.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/components/meta-inputs/meta-combobox/Edit.vue b/client/components/meta-inputs/meta-combobox/Edit.vue
index fb05e13f4..9fa5ced02 100644
--- a/client/components/meta-inputs/meta-combobox/Edit.vue
+++ b/client/components/meta-inputs/meta-combobox/Edit.vue
@@ -44,7 +44,8 @@ export default {
   methods: {
     lowerCase,
     async update(val) {
-      const value = processValue(val);
+      this.value = processValue(val);
+      const { value } = this;
       const isEmpty = value?.length && !last(value).trim();
       if (isEmpty) return value.pop();
       const { valid } = await this.$refs.validator.validate();