feat(slots): added 4 new slots for input

`input-before`, `input-start`, `input-end`, `input-after` re #98
iliyaZelenko · Mar 29, 2019 · 3f892e0 · 3f892e0
1 parent a03694b
commit 3f892e0
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -34,9 +34,9 @@
 - 2 themes: Bootstrap 4, Material Design
 - autocomplete (you can use custom search)
 - control through arrows
-- slots (9)
+- slots (13)
 - events (7)
-- props (22)
+- props (23)
 - loading indicator (helpful for REST requests)
 - validation
 - support on mobile devices

diff --git a/gh-pages-src/pages/Docs.vue b/gh-pages-src/pages/Docs.vue
@@ -127,6 +127,22 @@ export default {
         },
         description: 'Define a custom item appearance'
       },
+      {
+        name: 'input-before',
+        description: 'Before input (text field)'
+      },
+      {
+        name: 'input-start',
+        description: 'Inside the input at the start'
+      },
+      {
+        name: 'input-end',
+        description: 'Inside the input at the end'
+      },
+      {
+        name: 'input-after',
+        description: 'After input'
+      },
       {
         name: 'before-items',
         scopeProperties: {},

diff --git a/gh-pages-src/pages/dev/Example5.vue b/gh-pages-src/pages/dev/Example5.vue
@@ -23,23 +23,48 @@
         v-model="selected"
         :items="items"
         :error-message="errorMessage"
+        :successful="!errorMessage && selected"
         :disabled="disabled"
         :readonly="readonly"
         :disable-search="disableSearch"
         placeholder="Select name"
         @blur="validate"
-      />
+      >
+        <template
+          v-if="!errorMessage && selected"
+          #input-end
+        >
+          <span style="color: green; margin-right: 8px;">
+            ✔
+          </span>
+        </template>
+      </cool-select>
 
       <br>
 
       <cool-select
-        v-model="selected2"
+        v-model="selected"
         :items="items"
+        :error-message="errorMessage"
         :disabled="disabled"
         :readonly="readonly"
         :disable-search="disableSearch"
         placeholder="Select name"
-      />
+      >
+        <template #input-before>
+          before
+        </template>
+        <template #input-start>
+          start
+        </template>
+
+        <template #input-end>
+          end
+        </template>
+        <template #input-after>
+          after
+        </template>
+      </cool-select>
 
       <br>
       <button @click="disabled = !disabled">
@@ -67,7 +92,6 @@ export default {
     readonly: false,
     disableSearch: false,
     selected: null,
-    selected2: null,
     items: '[{"first_name":"one"}, {"first_name":"two"}, {"first_name":"three"}, {"first_name":"four"}, {"first_name":"five"}]',
     errorMessage: null
   }),

diff --git a/src/component.vue b/src/component.vue
@@ -11,43 +11,62 @@
     @mousedown="onClick"
     @focus="onFocus"
   >
-    <div
-      ref="IZ-select__input"
-      :class="{
-        'IZ-select__input': true,
-        'IZ-select__input--focused': focused,
-        'IZ-select__input--has-menu': hasMenu,
-        'IZ-select__input--has-error': hasError,
-        'IZ-select__input--selection-slot': showSelectionSlot,
-        'IZ-select__input--disabled': disabled,
-        'IZ-select__input--readonly': readonly
-      }"
-      :style="inputStyles"
-    >
+    <div class="IZ-select__input-wrap">
       <slot
-        v-if="showSelectionSlot"
-        :item="selectedItem"
-        name="selection"
+        name="input-before"
       />
 
-      <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 : 1"
-        type="text"
-        role="combobox"
-        autocomplete="off"
-        @keyup="onSearchKeyUp"
-        @keydown="onSearchKeyDown"
-        @input="onSearch"
-        @focus="onFocus"
+      <div
+        ref="IZ-select__input"
+        :class="{
+          'IZ-select__input': true,
+          'IZ-select__input--focused': focused,
+          'IZ-select__input--has-menu': hasMenu,
+          'IZ-select__input--has-error': hasError,
+          'IZ-select__input--successful': successful,
+          'IZ-select__input--selection-slot': showSelectionSlot,
+          'IZ-select__input--disabled': disabled,
+          'IZ-select__input--readonly': readonly
+        }"
+        :style="inputStyles"
       >
+        <slot
+          name="input-start"
+        />
+
+        <slot
+          v-if="showSelectionSlot"
+          :item="selectedItem"
+          name="selection"
+        />
+
+        <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 : 1"
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          @keyup="onSearchKeyUp"
+          @keydown="onSearchKeyDown"
+          @input="onSearch"
+          @focus="onFocus"
+        >
+
+        <slot
+          name="input-end"
+        />
+      </div>
+
+      <slot
+        name="input-after"
+      />
     </div>
 
     <transition name="fade">

diff --git a/src/props.js b/src/props.js
@@ -140,5 +140,10 @@ export default {
     type: [Array, String, Object],
     default: () => '',
     note: 'custom "class" attribute for the input field. You can specify dynamic class.'
+  },
+  successful: {
+    type: Boolean,
+    default: false,
+    note: 'does the component have a successful state. If true, then apply green colors.'
   }
 }
diff --git a/src/styles/main.styl b/src/styles/main.styl
@@ -2,6 +2,10 @@
   *
     box-sizing: border-box;
 
+.IZ-select__input-wrap
+  display: flex;
+  align-items: center;
+
 .fade
   &-leave-active
     position: absolute;

diff --git a/src/styles/themes/bootstrap.styl b/src/styles/themes/bootstrap.styl
@@ -42,6 +42,10 @@
     input
       color: #ff5252 !important;
 
+  &.IZ-select__input--successful
+    border: 1px solid #28a745 !important;
+    caret-color: #28c346 !important;
+
   &.IZ-select__input--focused
     border-color: #80bdff;
     outline: 0;
@@ -50,6 +54,9 @@
     &.IZ-select__input--has-error
       box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
 
+    &.IZ-select__input--successful
+      box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
+
   &.IZ-select__input--disabled
     pointer-events: none;
     background-color: #e9ecef;

diff --git a/src/styles/themes/material-design.styl b/src/styles/themes/material-design.styl
@@ -59,13 +59,11 @@
     input
       color: #ff5252 !important;
 
-  //&.IZ-select__input--focused
-  //  border-color: #80bdff;
-  //  outline: 0;
-  //  box-shadow: 0 0 0 0.2rem rgba(128, 189, 255, 0.5);
-  //
-  //  &.IZ-select__input--has-error
-  //    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
+  &.IZ-select__input--successful
+    border: 1px solid #28a745 !important;
+    caret-color: #28c346 !important;
+
+  // focused состояние не нужно
 
   &.IZ-select__input--disabled
     pointer-events: none;