Vuestic select enhancements (epicmaxco#233)

* fix vertical scrollbar * set minimal height to thumb * change style to vue * test * auto scroll when typing first letters(Test version). * prepare * demo * fix disappear items * unbind * initial commit * remove listeners * add logic to simple select * refactor logic * fix bug with dissapeared dropdown * problem with select item * working variant. non-working unbind and some other dropdowns * working variant * working select + demo * refactor logic[1] * computed sort * last refactor * refactor demo. * fix reactive problem * fix dissapearing value * non-reactive * Minor * Minor * fix setup profile tab * fix setup profile tab [1] * final refactor * delete useless dependency * unused variable * style refactor * remove useless getter
wsenfuma · Jun 13, 2018 · 75eb986 · 75eb986
1 parent aba0def
commit 75eb986
Show file tree

Hide file tree

Showing 6 changed files with 180 additions and 78 deletions.
diff --git a/src/components/dashboard/setup-profile-tab/SetupProfileTab.vue b/src/components/dashboard/setup-profile-tab/SetupProfileTab.vue
@@ -6,52 +6,70 @@
       :wizard-type="wizardType">
       <div slot="page1" class="form-wizard-tab-content">
         <h4>Type your name</h4>
-        <p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-          soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-          their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
-        <div class="form-group with-icon-right" :class="{'has-error': errors.has('name'), 'valid': isFormFieldValid('name')}">
+        <p>Zebras communicate with facial expressions and sounds. They make loud
+          braying or barking sounds and
+          soft snorting sounds. The position of their ears, how wide open their
+          eyes are, and whether they show
+          their teeth all send a signal. For example, ears flat back means
+          trouble, or "you better follow orders!"</p>
+        <div class="form-group with-icon-right"
+             :class="{'has-error': errors.has('name'), 'valid': isFormFieldValid('name')}">
           <div class="input-group">
             <input
               type="text"
               name="name"
               v-model="name"
               v-validate="'required'"
               required="required"/>
-            <i class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
+            <i
+              class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
             <i class="fa fa-check valid-icon icon-right input-icon"></i>
             <label class="control-label">Name</label><i class="bar"></i>
-            <small v-show="errors.has('name')" class="help text-danger">{{ errors.first('name') }}</small>
+            <small v-show="errors.has('name')" class="help text-danger">{{
+              errors.first('name') }}
+            </small>
           </div>
         </div>
       </div>
       <div slot="page2" class="form-wizard-tab-content">
         <h4>Select your country</h4>
-        <p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-          soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-          their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
+        <p>Zebras communicate with facial expressions and sounds. They make loud
+          braying or barking sounds and
+          soft snorting sounds. The position of their ears, how wide open their
+          eyes are, and whether they show
+          their teeth all send a signal. For example, ears flat back means
+          trouble, or "you better follow orders!"</p>
+
         <vuestic-simple-select
           label="Select country"
           v-model="selectedCountry"
           name="country"
           :required="true"
           ref="selectedCountrySelect"
-          v-bind:options="countriesList">
+          :options="countriesList">
         </vuestic-simple-select>
       </div>
       <div slot="page3" class="form-wizard-tab-content">
         <h4>Confirm selection</h4>
         <p>
-          Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-          soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-          their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
+          Zebras communicate with facial expressions and sounds. They make loud
+          braying or barking sounds and
+          soft snorting sounds. The position of their ears, how wide open their
+          eyes are, and whether they show
+          their teeth all send a signal. For example, ears flat back means
+          trouble, or "you better follow orders!"
         </p>
       </div>
-      <div slot="wizardCompleted" class="form-wizard-tab-content wizard-completed-tab">
+      <div slot="wizardCompleted"
+           class="form-wizard-tab-content wizard-completed-tab">
         <h4>Wizard completed!</h4>
         <p>
-          Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-          soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-          their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
+          Zebras communicate with facial expressions and sounds. They make loud
+          braying or barking sounds and
+          soft snorting sounds. The position of their ears, how wide open their
+          eyes are, and whether they show
+          their teeth all send a signal. For example, ears flat back means
+          trouble, or "you better follow orders!"
         </p>
       </div>
     </vuestic-wizard>
@@ -63,13 +81,11 @@
 
   export default {
     name: 'setup-profile-tab',
-
     props: {
       wizardType: {
         default: 'rich'
-      }
+      },
     },
-
     data () {
       return {
         steps: [
@@ -98,8 +114,8 @@
             slot: 'page3'
           }
         ],
-        name: '',
         selectedCountry: '',
+        name: '',
         countriesList: CountriesList
       }
     },

diff --git a/src/directives/ResizeHandler.js b/src/directives/ResizeHandler.js
@@ -21,6 +21,6 @@ export default {
       }
       prevMatchlg = getWindowMatch()
     })
-  }
+  },
 }
 
diff --git a/src/vuestic-theme/vuestic-components/vuestic-scrollbar/VuesticScrollbar.vue b/src/vuestic-theme/vuestic-components/vuestic-scrollbar/VuesticScrollbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vuestic-scrollbar">
+  <div class="vuestic-scrollbar" ref="vuesticScrollbar">
     <div class="scrollbar-wrapper" ref="scrollbarWrapper">
       <div class="scrollbar-content" ref="scrollbarContent"
            @wheel="scroll"
@@ -9,7 +9,9 @@
            @transitionend="onContentResize">
         <slot></slot>
       </div>
-      <div class="track" ref="track"><div class="thumb" ref="thumb"></div></div>
+      <div class="track" ref="track">
+        <div class="thumb" ref="thumb"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -31,7 +33,13 @@
         this.maxHeight = parseFloat(this.wrapper.offsetHeight, 10)
         this.contentHeight = parseFloat(this.content.offsetHeight, 10)
         this.trackHeight = parseFloat(this.track.offsetHeight, 10)
-        this.thumb.style.height = this.maxHeight / this.contentHeight * this.trackHeight + 'px'
+
+        if (this.maxHeight / this.contentHeight * this.trackHeight < 10) {
+          this.thumb.style.height = 10 + 'px'
+        } else {
+          this.thumb.style.height = this.maxHeight / this.contentHeight * this.trackHeight + 'px'
+        }
+
         if (this.maxHeight / this.contentHeight < 1) {
           this.thumb.classList.add('active')
         } else {
@@ -163,16 +171,16 @@
       overflow: hidden;
       max-height: 100%;
       .track {
+        width: 5px;
         position: absolute;
         right: 0;
         top: 0;
         height: 100%;
-        width: 3px;
         .thumb {
           transition: height .3s linear, opacity .6s linear;
           position: absolute;
           width: 100%;
-          background-color: black;
+          background-color: $vue-green;
           opacity: 0;
           &.active {
             opacity: .3;

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.demo.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.demo.vue
@@ -0,0 +1,34 @@
+<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>
+</template>
+
+<script>
+
+import CountriesList from 'data/CountriesList'
+import VuesticSimpleSelect from './VuesticSimpleSelect'
+
+export default {
+  components: {
+    VuesticSimpleSelect,
+  },
+  data () {
+    return {
+      selectedCountry: '',
+      CountriesList,
+    }
+  },
+}
+</script>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -1,25 +1,31 @@
 <template>
-  <div class="form-group with-icon-right dropdown select-form-group"
-       v-dropdown.closeOnMenuClick
-       :class="{'has-error': hasErrors()}">
+  <div
+    class="form-group with-icon-right dropdown select-form-group"
+    v-dropdown.isBlocked
+    :class="{'has-error': hasErrors()}">
     <div class="input-group dropdown-toggle">
       <input
-        readonly
-        :class="{'has-value': !!displayValue}"
+        @focus="showDropdown()"
+        :class="{'has-value': !!value}"
         v-model="displayValue"
         :name="name"
-        required/>
+        :options="options"/>
       <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>
+      <small v-show="hasErrors()" class="help text-danger">
+        {{ showRequiredError() }}
+      </small>
     </div>
-    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <div
+      class="dropdown-menu" aria-labelledby="dropdownMenuButton">
       <scrollbar ref="scrollbar">
         <div class="dropdown-menu-content">
           <div class="dropdown-item"
-               :class="{'selected': isOptionSelected(option)}" v-for="option in options"
+               :class="{'selected': isOptionSelected(option)}"
+               v-for="option in filteredList"
                @click="selectOption(option)">
-            <span class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
+            <span
+              class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
           </div>
         </div>
       </scrollbar>
@@ -39,16 +45,14 @@
     directives: {
       dropdown: Dropdown
     },
-    data () {
-      return {
-        displayValue: '',
-        validated: false
-      }
-    },
     props: {
       label: String,
       options: Array,
-      value: {},
+      value: {
+        type: String,
+        default: '',
+        required: true
+      },
       optionKey: String,
       required: {
         type: Boolean,
@@ -57,48 +61,58 @@
       name: {
         type: String,
         default: 'simple-select'
+      },
+    },
+    data () {
+      return {
+        validated: false,
+        displayValue: this.value,
       }
     },
-    mounted () {
-      this.updateDisplayValue(this.value)
-      this.$emit('input', this.value)
+    watch: {
+      value: {
+        handler (value) {
+          this.displayValue = value || ''
+        },
+        immediate: true,
+      }
     },
-
-    updated: function () {
-      this.updateDisplayValue(this.value)
+    computed: {
+      filteredList () {
+        return this.options.filter(item => item.search(this.displayValue) === 0)
+      },
     },
-
     methods: {
+      showDropdown () {
+        this.displayValue = ''
+      },
       isOptionSelected (option) {
-        return this.value === option
+        return this.displayValue === option
       },
       selectOption (option) {
-        this.updateDisplayValue(option)
+        this.displayValue = option
         this.$emit('input', option)
       },
-      updateDisplayValue (val) {
-        this.displayValue = this.optionKey ? val[this.optionKey] : val
-      },
       validate () {
         this.validated = true
       },
       isValid () {
         let isValid = true
         if (this.required) {
-          isValid = !!this.displayValue
+          isValid = !!this.value
         }
         return isValid
       },
       hasErrors () {
         let hasErrors = false
         if (this.required) {
-          hasErrors = this.validated && !this.displayValue
+          hasErrors = this.validated && !this.value
         }
         return hasErrors
       },
       showRequiredError () {
         return `The ${this.name} field is required`
-      }
+      },
     }
   }
 </script>
@@ -107,13 +121,6 @@
   @import "../../../sass/variables";
 
   .select-form-group {
-    .dropdown-toggle {
-      input {
-        color: transparent;
-        text-shadow: 0 0 0 #000;
-        cursor: pointer;
-      }
-    }
     .dropdown-menu {
       padding: 0;
       .vuestic-scrollbar {
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,6 @@ export default { @@
           }
           prevMatchlg = getWindowMatch()
         })
-      }
+      },
     }