Merge pull request #74 from abhimediratta:feature/disabled-state

Add disabled and readonly state

Author: abhimediratta

src/components/MultiSelect/MultiSelect.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="msl-multi-select">
     <SearchableList
+      v-if="!readOnly"
       :list-items="availableOptions"
       :no-options-text="noOptionsText"
       :no-items-found-text="noOptionsFoundText"
@@ -15,12 +16,13 @@
       :highlight-diff="highlightDiff"
       :hide-search-input="hideSearchInputs"
       @onClickOption="onOptionSelect"
+      :disabled="disabled"
     />
 
-    <div class="msl-multi-select__actions">
+    <div class="msl-multi-select__actions" v-if="!readOnly">
       <a
         class="msl-multi-select__action msl-multi-select__action-select-all"
-        :class="{'invisible': !showSelectAllButtons}"
+        :class="{'invisible': !showSelectAllButtons, 'msl-multi-select__action--disabled': disabled }"
         @click="onSelectAllOptions"
       >
         <font-awesome-icon icon="angle-double-right" />
@@ -30,7 +32,7 @@
 
       <a
         class="msl-multi-select__action msl-multi-select__action-unselect-all"
-        :class="{'invisible': !showSelectAllButtons}"
+        :class="{'invisible': !showSelectAllButtons, 'msl-multi-select__action--disabled': disabled}"
         @click="onUnselectAllOptions"
       >
         <font-awesome-icon icon="angle-double-left" />
@@ -51,6 +53,8 @@
       :hide-search-input="hideSearchInputs"
       class="msl-multi-select__selected msl-multi-select__list"
       @onClickOption="onOptionRemove"
+      :disabled="disabled"
+      :read-only="readOnly"
     />
   </div>
 </template>
@@ -201,6 +205,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -296,6 +308,10 @@ export default {
     },
 
     onSelectAllOptions() {
+      if (this.disabled || this.readOnly) {
+        return;
+      }
+
       this.selectedItems = [...this.options];
 
       const selectedValues = getValuesFromOptions(this.reduceValueProperty, this.options);
@@ -309,6 +325,10 @@ export default {
     },
 
     onUnselectAllOptions() {
+      if (this.disabled || this.readOnly) {
+        return;
+      }
+
       this.addToNewlyRemovedItems(this.selectedItems);
       this.addToNewlyAddedItems([], true);
 

src/components/SearchableList/SearchableList.vue

@@ -7,12 +7,13 @@
       :class="searchInputClass"
       :placeholder="placeholderText"
     >
-    <div class="msl-searchable-list__items">
+    <div class="msl-searchable-list__items"
+    :class="{ 'msl-searchable-list__items--disabled': disabled || readOnly }">
       <div
         v-for="(option, index) in filteredListItems"
         :key="index"
         class="msl-searchable-list__item"
-        :class="{'msl-searchable-list__item--disabled': option.disabled, [highlightClass]: highlightDiff && highlightedItemsMap[getValue(option)] }"
+        :class="{'msl-searchable-list__item--disabled': option.disabled || disabled || readOnly, [highlightClass]: highlightDiff && highlightedItemsMap[getValue(option)] }"
         @click="clickOption(option)"
       >
         {{ getOptionDisplay(option) }}
@@ -109,6 +110,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -185,6 +194,10 @@ export default {
     },
 
     clickOption(option) {
+      if (this.disabled || this.readOnly) {
+        return;
+      }
+
       this.$emit('onClickOption', option);
     },
   },

src/scss/_variables.scss

@@ -1,5 +1,6 @@
 // Searchable listbox
 $msl-multi-select-items-box-border-color: #5b5d66 !default;
+$msl-multi-select-items-box-disabled-border-color: #d2d2d2 !default;
 $msl-multi-select-item-border-bottom-color: #252b45 !default;
 $msl-multi-select-item-hover-bg: #3858e7 !default;
 $msl-multi-select-item-hover-font-color: #fff !default;

src/scss/modules/_multi-select.scss

@@ -19,6 +19,14 @@
   }
 }
 
+.msl-multi-select__action--disabled {
+  cursor: default;
+
+  &:hover {
+    color: inherit;
+  }
+}
+
 .msl-multi-select__action-select-all {
   margin-bottom: 20px;
 }

src/scss/modules/_searchable-list.scss

@@ -15,6 +15,10 @@
   overflow-x: hidden;
 }
 
+.msl-searchable-list__items--disabled {
+  border: 1px solid $msl-multi-select-items-box-disabled-border-color;
+}
+
 .msl-searchable-list__no-item {
   font-size: 0.8em;
   padding: 5px 10px;
@@ -30,6 +34,19 @@
     background: $msl-multi-select-item-hover-bg;
     color: $msl-multi-select-item-hover-font-color;
   }
+
+  .msl-searchable-list__items--disabled & {
+    border-bottom: 1px solid $msl-multi-select-items-box-disabled-border-color;
+  }
+}
+
+.msl-searchable-list__item--disabled {
+  cursor: default;
+
+  &:hover {
+    background: transparent;
+    color: inherit;
+  }
 }