feat(component): improve the inputStyles logic and height style

README.md

@@ -50,6 +50,8 @@
 - validation
 - support on mobile devices
 - disabled and readonly
+- the ability to set the size of the field and other styles
+- TypeScript support
 
 Write your suggestions, glad to add.
 

gh-pages-src/pages/dev/Example6.vue

@@ -2,7 +2,15 @@
   <div class="demo-page-wrap">
     <div>
       <cool-select
-        ref="select"
+        v-model="selected"
+        :items="items"
+        :style="{
+          height: '50px'
+        }"
+        placeholder="Select name"
+      />
+
+      <cool-select
         v-model="selected"
         :items="items"
         placeholder="Select name"

src/component.vue

@@ -42,17 +42,19 @@
 
         <input
           ref="IZ-select__input-for-text"
-          v-bind="inputElCustomAttributes"
-          :value="inputValue"
-          :placeholder="placeholder"
-          :style="inputForTextStyles"
-          :class="inputForTextClass"
-          :disabled="disableSearch || disabled"
-          :readonly="readonly"
-          :tabindex="disableSearch ? -1 : 0"
-          type="text"
-          role="combobox"
-          autocomplete="off"
+          v-bind="{
+            value: inputValue,
+            placeholder,
+            class: inputForTextClass,
+            disabled: disableSearch || disabled,
+            readonly,
+            tabindex: disableSearch ? -1 : 0,
+            type: 'text',
+            role: 'combobox',
+            autocomplete: 'off',
+            ...inputElCustomAttributes,
+            style: inputForTextStyles,
+          }"
           @keyup="onSearchKeyUp"
           @keydown="onSearchKeyDown"
           @input="onSearch"

src/computed.js

@@ -24,13 +24,19 @@ export default {
     return this.$scopedSlots.selection && this.selectedItem && !this.getSearchData()
   },
   inputForTextStyles () {
+    let styles = {}
+
     if (this.loading) {
-      return {
-        'background-image': `url(${this.loadingIndicator})`
+      styles['background-image'] = `url(${this.loadingIndicator})`
+    }
+    if (this.inputElCustomAttributes) {
+      styles = {
+        ...styles,
+        ...this.inputElCustomAttributes
       }
     }
 
-    return {}
+    return styles
   },
   hasMenu () {
     return this.wishShowMenu && !this.loading // this.focused && !this.loading

src/styles/common/main.styl

@@ -5,6 +5,13 @@
 .IZ-select__input-wrap
   display: flex
   align-items: center
+  height: 100%
+
+.IZ-select__input
+  height: 100%;
+
+  input
+    height: 100%;
 
 .fade
   &-leave-active
@@ -16,3 +23,4 @@
   &-enter, &-leave-to
     opacity: 0
 
+