goodteditor-ui 1.0.94 → 1.0.95

package/package.json

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

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