Meta inputs enhancement

client/components/meta-inputs/meta-checkbox/Edit.vue

@@ -1,28 +1,51 @@
 <template>
-  <div class="control">
+  <validation-provider
+    ref="validator"
+    v-slot="{ errors }"
+    :name="lowerCase(meta.label)"
+    :rules="validationRules"
+    tag="div"
+    class="control">
     <div v-if="meta.label" class="control-label">{{ meta.label }}</div>
     <v-checkbox
-      @change="value => $emit('update', meta.key, value)"
-      :input-value="meta.value"
+      v-model="value"
+      @change="update"
       :name="meta.key"
       :label="meta.description"
+      :error-messages="errors"
       color="primary darken-2"
       class="mt-1" />
-  </div>
+  </validation-provider>
 </template>
 
 <script>
+import debounce from 'lodash/debounce';
+import get from 'lodash/get';
+import lowerCase from 'lodash/lowerCase';
+
 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: {
+    lowerCase,
+    update: debounce(async function (value) {
+      const { valid } = await this.$refs.validator.validate();
+      if (!valid) return;
+      this.$emit('update', this.meta.key, value);
+    }, 200)
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .control {
-  padding: 3px 8px;
+  padding: 0.1875rem 0.5rem;
 
   ::v-deep label.v-label {
     margin-bottom: 0;

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,21 +46,21 @@ 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;
   box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
 
   .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>

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;
   }

client/components/meta-inputs/meta-combobox/Edit.vue

@@ -1,33 +1,56 @@
 <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="lowerCase(meta.label)"
+    :rules="validationRules"
+    slim>
+    <v-combobox
+      v-model="value"
+      @change="update"
+      :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 get from 'lodash/get';
 import isObject from 'lodash/isObject';
+import last from 'lodash/last';
+import lowerCase from 'lodash/lowerCase';
+
+function processValue(val) {
+  if (!Array.isArray(val)) return val?.trim();
+  return val.map(item => isObject(item) ? item.value : item);
+}
 
 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: {
+    lowerCase,
+    async update(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();
+      if (!valid) return;
+      this.$emit('update', this.meta.key, value);
     }
   }
 };

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 }
 };

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 })
   },

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)
   },
@@ -39,7 +35,6 @@ export default {
     async onChange() {
       const { valid } = await this.$refs.validator.validate();
       if (!valid) return;
-      if (this.value === this.meta.value) return;
       this.$emit('update', this.meta.key, this.value);
     }
   }