goodteditor-ui 1.0.93 → 1.0.95

package/package.json

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

package/src/components/ui/InputColorPicker.vue

@@ -4,8 +4,7 @@
         :class="cssClass"
         @focus="onRootFocus"
         tabindex="0"
-        :data-popover="popoverTargetId"
-    >
+        :data-popover="popoverTargetId">
         <div class="ui-input-color-picker-wrapper d-flex flex-v-center w-100">
             <div style="flex: 1 0 0">
                 <!--
@@ -22,8 +21,7 @@
                         type="text"
                         :value="value"
                         v-bind="inputBinds"
-                        v-on="inputEvents"
-                    />
+                        v-on="inputEvents" />
                 </slot>
             </div>
             <!--
@@ -34,10 +32,9 @@
             <slot name="icon" v-bind="{ value, toggle: togglePopover }">
                 <div
                     class="ui-input-color-picker-icon-preview mar-left-2"
-                    :class="[ readonly ? 'events-none': 'cursor-pointer' ]"
+                    :class="[readonly ? 'events-none' : 'cursor-pointer']"
                     :style="{ ...(isValid && { background: value }) }"
-                    @click="togglePopover"
-                ></div>
+                    @click="togglePopover"></div>
             </slot>
         </div>
         <ui-popover v-if="popoverShow" :show.sync="popoverShow" v-bind="popoverOptions">
@@ -46,12 +43,11 @@
                 v-bind="{
                     value,
                     colorsDefault,
-                    showSubmit: true,
+                    showSubmit: true
                 }"
                 @close="onColorPickerClose"
                 @submit="onColorPickerSubmit"
-                @valid="emitValid"
-            ></color-picker>
+                @valid="emitValid"></color-picker>
         </ui-popover>
     </div>
 </template>
@@ -124,7 +120,6 @@ export default {
     },
     data() {
         return {
-            isValid: false,
             inputBinds: {
                 placeholder: this.placeholder,
                 readonly: this.readonly || !this.editable,
@@ -139,8 +134,21 @@ export default {
             }
         };
     },
-    created() {
-        this.validateInput(this.value);
+    computed: {
+        /**
+         * @return {boolean}
+         */
+        isValid() {
+            return this.value === '' ? true : isValidColorString(this.value);
+        }
+    },
+    watch: {
+        isValid: {
+            handler() {
+                this.emitValid(this.isValid);
+            },
+            immediate: true
+        }
     },
     methods: {
         inputColor(val) {
@@ -160,11 +168,6 @@ export default {
         emitValid(isValid) {
             this.$emit('valid', isValid);
         },
-        validateInput(value) {
-            const isValid = value === '' ? true : isValidColorString(value);
-            this.isValid = isValid;
-            this.emitValid(isValid);
-        },
         // EVENT HANDLERS
         onRootFocus(e) {
             if (this.disabled) {
@@ -175,13 +178,11 @@ export default {
         },
         onInputChange(e) {
             const { value } = e.target;
-            this.validateInput(value);
             this.changeColor(value);
         },
         onInputInput(e) {
             const { value } = e.target;
-            this.validateInput(value);
-            this.inputColor(e.target.value);
+            this.inputColor(value);
         },
         onInputFocus(e) {
             if (this.disabled) {

package/src/components/ui/Select.vue

@@ -27,10 +27,10 @@
                         }">
                         <ui-badge
                             class="mar-none mar-right-2"
-                            theme="primary"
+                            :theme="selectedBadgeTheme"
                             size="small"
                             :key="index"
-                            removable
+                            :removable="isSelectedRemovable"
                             @click.native.stop
                             @remove="deselectOption(option)">
                             <span>{{ getOptionLabel(option) }}</span>
@@ -79,20 +79,23 @@
         @slot Open state icon slot
         -->
         <slot name="icon-open" v-if="popoverShow">
-            <i class="icon mdi mdi-chevron-up" :class="{
-                'mdi-18px': size === '',
-                'h-auto w-auto': size === 'small'
-               }">
-            </i>
+            <i
+                class="icon mdi mdi-chevron-up"
+                :class="{
+                    'mdi-18px': size === '',
+                    'h-auto w-auto': size === 'small'
+                }"></i>
         </slot>
         <!--
         @slot Close state icon slot
         -->
         <slot name="icon-close" v-else>
-            <i class="icon mdi mdi-chevron-down" :class="{
-                'mdi-18px': size === '',
-                'h-auto w-auto': size === 'small'
-            }"></i>
+            <i
+                class="icon mdi mdi-chevron-down"
+                :class="{
+                    'mdi-18px': size === '',
+                    'h-auto w-auto': size === 'small'
+                }"></i>
         </slot>
 
         <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
@@ -375,7 +378,7 @@ export default {
         itemHeight: {
             type: String,
             default: null
-        },
+        }
     },
     data() {
         return {
@@ -388,8 +391,17 @@ export default {
          * @return {object}
          */
         cssClassExt() {
-            let obj = { 'u-select-none': this.readonly };
-            return { ...this.cssClass, ...obj };
+            if (this.readonly) {
+                const { ['events-none']: eventsNone, ...cssClass } = this.cssClass;
+                return cssClass;
+            }
+            return this.cssClass;
+        },
+        selectedBadgeTheme() {
+            return this.disabled ? '' : 'primary';
+        },
+        isSelectedRemovable() {
+            return this.readonly === false && this.disabled === false;
         }
     },
     watch: {
@@ -487,6 +499,9 @@ export default {
             };
         },
         selectOption(option) {
+            if (this.readonly) {
+                return;
+            }
             if (this.isOptionSelected(option)) {
                 return;
             }
@@ -502,6 +517,9 @@ export default {
             this.triggerModelChange(rollback);
         },
         deselectOption(option) {
+            if (this.readonly) {
+                return;
+            }
             if (!this.multiple) {
                 this.popoverShow = false;
                 return;

package/src/components/ui/utils/FormComponent.js

@@ -67,7 +67,8 @@ export default {
         },
         readonly: {
             handler(val) {
-                this.$set(this.cssClass, 'readonly events-none', val);
+                this.$set(this.cssClass, 'readonly', val);
+                this.$set(this.cssClass, 'events-none', val);
             },
             immediate: true,
         },