Merge pull request epicmaxco#266 from vlad-shusterman/simple-select-u…

…nselect

simple-select and multi-select improvements

src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.demo.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-container__item">
+      <vuestic-multi-select
+        label="Select country"
+        v-model="selectedCountries"
+        :options="CountriesList"
+      />
+    </div>
+    <div class="demo-container__item">
+      <vuestic-multi-select
+        label="Select country duplicate"
+        v-model="selectedCountries"
+        :options="CountriesList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import CountriesList from 'data/CountriesList'
+import VuesticMultiSelect from './VuesticMultiSelect'
+
+export default {
+  components: {
+    VuesticMultiSelect,
+  },
+  data () {
+    return {
+      selectedCountries: [],
+      CountriesList,
+    }
+  },
+}
+</script>

src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue

@@ -8,9 +8,15 @@
         :class="{'has-value': !!displayValue}"
         v-bind:value="displayValue"
         required/>
-      <i class="ion ion-ios-arrow-down icon-right input-icon"></i>
       <label class="control-label">{{label}}</label><i class="bar"></i>
       <small v-show="hasErrors()" class="help text-danger">{{ showRequiredError() }}</small>
+      <i class="ion ion-ios-arrow-down icon-right input-icon dropdown-ion"></i>
+    </div>
+    <div v-if="isClearable">
+      <i
+        class="fa fa-close icon-cross icon-right input-icon multiselect-form-group__unselect"
+        @click="unselectOptions"
+      />
     </div>
     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
       <scrollbar ref="scrollbar">
@@ -28,102 +34,126 @@
 </template>
 
 <script>
-  import Dropdown from 'vuestic-directives/Dropdown'
-  import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
+import Dropdown from 'vuestic-directives/Dropdown'
+import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
 
-  export default {
-    name: 'vuestic-multi-select',
-    components: {
-      Scrollbar
+export default {
+  name: 'vuestic-multi-select',
+  components: {
+    Scrollbar
+  },
+  directives: {
+    dropdown: Dropdown
+  },
+  data () {
+    return {
+      displayValue: '',
+      validated: false
+    }
+  },
+  props: {
+    label: String,
+    itemsChosenPlaceholder: {
+      type: String,
+      default: 'chosen'
     },
-    directives: {
-      dropdown: Dropdown
+    clearable: {
+      type: Boolean,
+      default: true
     },
-    data () {
-      return {
-        displayValue: '',
-        validated: false
-      }
+    options: Array,
+    value: Array,
+    optionKey: String,
+    required: {
+      type: Boolean,
+      default: false
+    },
+    name: {
+      type: String,
+      default: 'multiselect'
+    }
+  },
+  mounted () {
+    this.$emit('input', this.value)
+  },
+
+  updated: function () {
+    this.updateDisplayValue(this.value)
+  },
+
+  methods: {
+    unselectOptions () {
+      this.value.splice(0, this.value.length)
+      this.displayValue = ''
+      this.$emit('input', this.value)
+    },
+    toggleSelection (option) {
+      let newVal = this.isOptionSelected(option) ? this.deselectOption(option) : this.selectOption(option)
+      this.updateDisplayValue(newVal)
+      this.$emit('input', newVal)
+    },
+    isOptionSelected (option) {
+      return this.value.includes(option)
+    },
+    selectOption (option) {
+      return this.value.concat(option)
+    },
+    deselectOption (option) {
+      return this.value.filter(item => item !== option)
     },
-    props: {
-      label: String,
-      itemsChosenPlaceholder: {
-        type: String,
-        default: 'chosen'
-      },
-      options: Array,
-      value: Array,
-      optionKey: String,
-      required: {
-        type: Boolean,
-        default: false
-      },
-      name: {
-        type: String,
-        default: 'multiselect'
+    updateDisplayValue (newVal) {
+      if (newVal.length > 2) {
+        this.displayValue = `${newVal.length}/${this.options.length} ${this.itemsChosenPlaceholder}`
+      } else {
+        this.displayValue = (this.optionKey ? newVal.map(item => item[this.optionKey]) : newVal).join(', ')
       }
     },
-    mounted () {
-      this.$emit('input', this.value)
+    validate () {
+      this.validated = true
     },
-
-    updated: function () {
-      this.updateDisplayValue(this.value)
+    isValid () {
+      let isValid = true
+      if (this.required) {
+        isValid = !!this.displayValue
+      }
+      return isValid
     },
-
-    methods: {
-      toggleSelection (option) {
-        let newVal = this.isOptionSelected(option) ? this.deselectOption(option) : this.selectOption(option)
-        this.updateDisplayValue(newVal)
-        this.$emit('input', newVal)
-      },
-      isOptionSelected (option) {
-        return this.value.includes(option)
-      },
-      selectOption (option) {
-        return this.value.concat(option)
-      },
-      deselectOption (option) {
-        return this.value.filter(item => item !== option)
-      },
-      updateDisplayValue (newVal) {
-        if (newVal.length > 2) {
-          this.displayValue = `${newVal.length}/${this.options.length} ${this.itemsChosenPlaceholder}`
-        } else {
-          this.displayValue = (this.optionKey ? newVal.map(item => item[this.optionKey]) : newVal).join(', ')
-        }
-      },
-      validate () {
-        this.validated = true
-      },
-      isValid () {
-        let isValid = true
-        if (this.required) {
-          isValid = !!this.displayValue
-        }
-        return isValid
-      },
-      hasErrors () {
-        let hasErrors = false
-        if (this.required) {
-          hasErrors = this.validated && !this.displayValue
-        }
-        return hasErrors
-      },
-      showRequiredError () {
-        return `The ${this.name} field is required`
+    hasErrors () {
+      let hasErrors = false
+      if (this.required) {
+        hasErrors = this.validated && !this.displayValue
       }
+      return hasErrors
+    },
+    showRequiredError () {
+      return `The ${this.name} field is required`
+    }
+  },
+  computed: {
+    isClearable () {
+      return (this.clearable && this.value.length !== 0 && this.displayValue !== '')
     }
   }
+}
 </script>
 
-<style lang="scss">
-  .multiselect-form-group {
-    .dropdown-menu {
-      padding: 0;
-      .vuestic-scrollbar {
-        height: $dropdown-item-height * 4;
-      }
+<style lang="scss" scoped>
+.multiselect-form-group {
+  &__unselect {
+    margin-right: 20px;
+    cursor: pointer;
+  }
+
+  .dropdown-ion {
+    top: 12px;
+    cursor: pointer;
+  }
+
+  .dropdown-menu {
+    padding: 0;
+    .vuestic-scrollbar {
+      height: $dropdown-item-height * 4;
     }
   }
+}
 </style>

src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.demo.vue

@@ -1,17 +1,19 @@
 <template>
-  <div class="row justify-content-around">
-    <vuestic-simple-select
-      style="width: 240px; padding-top: 400px"
-      label="Select country"
-      v-model="selectedCountry"
-      :options="CountriesList"
-    />
-    <vuestic-simple-select
-      style="width: 240px"
-      label="Select country duplicate"
-      v-model="selectedCountry"
-      :options="CountriesList"
-    />
+  <div class="demo-container">
+    <div class="demo-container__item">
+      <vuestic-simple-select
+        label="Select country"
+        v-model="selectedCountry"
+        :options="CountriesList"
+      />
+    </div>
+    <div class="demo-container__item">
+      <vuestic-simple-select
+        label="Select country duplicate"
+        v-model="selectedCountry"
+        :options="CountriesList"
+      />
+    </div>
   </div>
 </template>