goodteditor-ui 1.0.36 → 1.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.36",
+    "version": "1.0.38",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/components/ui/InputDatePicker.vue

@@ -192,10 +192,6 @@ export default {
     data() {
         return {
             date: null,
-            inputBinds: {
-                placeholder: this.placeholder,
-                readonly: this.readonly || !this.editable,
-            },
             inputEvents: {
                 input: this.onInputInput,
                 change: this.onInputChange,
@@ -206,6 +202,21 @@ export default {
             inputValueRaw: '',
         };
     },
+    computed: {
+        isRange() {
+            return !!this.datepicker.range;
+        },
+        valueLabel() {
+            return Array.isArray(this.value) ? this.value.join(this.delimiter) : this.value;
+        },
+        inputBinds() {
+            const { placeholder, readonly, editable } = this;
+            return {
+                placeholder,
+                readonly: readonly || !editable
+            }
+        }
+    },
     watch: {
         value: {
             handler(val) {
@@ -232,18 +243,7 @@ export default {
              * @property {String} date
              */
             this.$emit('input', val ? [] : '');
-        },
-        placeholder(placeholder) {
-            this.inputBinds = { ...this.inputBinds, placeholder };
-        },
-    },
-    computed: {
-        isRange() {
-            return !!this.datepicker.range;
-        },
-        valueLabel() {
-            return Array.isArray(this.value) ? this.value.join(this.delimiter) : this.value;
-        },
+        }
     },
     methods: {
         clear() {

package/src/components/ui/InputTimePicker.vue

@@ -8,7 +8,7 @@
     >
         <div class="ui-input-time-picker-wrapper d-flex flex-v-center w-100">
             <div style="flex: 1 0 0">
-                <!-- 
+                <!--
                 @slot Custom input slot
                 @binding {String} id    input id attribute value
                 @binding {String} value    input value
@@ -26,7 +26,7 @@
                     />
                 </slot>
             </div>
-            <!-- 
+            <!--
             @slot Custom clear icon slot
             @binding {Function} clear    function that clears the value
             -->
@@ -35,7 +35,7 @@
                     <i class="mdi mdi-close"></i>
                 </div>
             </slot>
-            <!-- 
+            <!--
             @slot Icon slot
             @binding {Function} toggle  function that toggles the datepicker
             -->
@@ -171,10 +171,6 @@ export default {
     data() {
         return {
             time: null,
-            inputBinds: {
-                placeholder: this.placeholder,
-                readonly: this.readonly || !this.editable,
-            },
             inputEvents: {
                 change: this.onInputChange,
                 input: this.onInputInput,
@@ -183,6 +179,15 @@ export default {
             },
         };
     },
+    computed: {
+        inputBinds() {
+            const { placeholder, readonly, editable } = this;
+            return {
+                placeholder,
+                readonly: readonly || !editable
+            }
+        }
+    },
     watch: {
         value: {
             handler(val) {

package/src/components/ui/Select.vue

@@ -100,7 +100,7 @@
                 class="w-100 pull-left"
                 @click.native.stop
                 @select-option="onDatalistSelectOption"
-                v-bind="{ size, options }"
+                v-bind="{ size, options, class: datalistCssClass }"
                 :cursorIndex.sync="dataListCursorIndex"
                 ref="datalist"
             >
@@ -155,18 +155,18 @@
                                 <div class="col col-vmid text-truncate">
                                     <div
                                         class="text-truncate"
-                                        style="min-height: calc(var(--line-height)*1em)"
+                                        style="min-height: calc(var(--line-height) * 1em)"
                                     >
                                         {{ getOptionLabel(option) }}
                                     </div>
                                 </div>
                                 <div class="col col-auto col-vmid" v-if="isOptionSelected(option)">
-                                    <i class="mdi mdi-check" style="line-height:1"></i>
+                                    <i class="mdi mdi-check" style="line-height: 1"></i>
                                 </div>
                             </div>
                             <div
                                 class="text-truncate"
-                                style="min-height: calc(var(--line-height)*1rem)"
+                                style="min-height: calc(var(--line-height) * 1rem)"
                                 v-else
                             >
                                 {{ getOptionLabel(option) }}
@@ -238,6 +238,13 @@ export default {
                 return [];
             },
         },
+        /**
+         * Datalist css classes (optional)
+         */
+        datalistCssClass: {
+            type: [String, Array],
+            default: '',
+        },
         /**
          * Allow multiple selection
          */