@eturnity/eturnity_reusable_components 1.2.57 → 1.2.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.57",
+  "version": "1.2.58",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -51,6 +51,7 @@
             label="that is a label"
             alignItems="vertical"
             colorMode="dark"
+            isSearchable="true"
             @input-change="value = $event"
             @search-change="searchValue = $event"
           >
@@ -66,50 +67,8 @@
               >
             </template>
           </Select>
-          <Select
-            :value="value"
-            selectWidth="100%"
-            optionWidth="50%"
-            label="that is a label"
-            alignItems="vertical"
-            colorMode="dark"
-            @input-change="value = $event"
-            @search-change="searchValue = $event"
-          >
-            <template #selector="{ selectedValue }">
-              value selected: {{ selectedValue }}
-            </template>
-            <template #dropdown>
-              <Option
-                v-for="opt in filteredOptionList"
-                :key="opt.id"
-                :value="opt.val"
-                >{{ opt.lookFor }}</Option
-              >
-            </template>
-          </Select>
-          <Select
-            :value="value"
-            selectWidth="100%"
-            optionWidth="50%"
-            label="that is a label"
-            alignItems="vertical"
-            colorMode="dark"
-            @input-change="value = $event"
-            @search-change="searchValue = $event"
-          >
-            <template #selector="{ selectedValue }">
-              value selected: {{ selectedValue }}
-            </template>
-            <template #dropdown>
-              <Option
-                v-for="opt in filteredOptionList"
-                :key="opt.id"
-                :value="opt.val"
-                >{{ opt.lookFor }}</Option
-              >
-            </template>
-          </Select>
+         
+          
           {{ filteredOptionList }}
         
       <iconCollection />
@@ -158,7 +117,11 @@ export default {
         { id: 'a', val: 'A', lookFor: 'babababa' },
         { id: 'b', val: 'B', lookFor: 'abab' },
         { id: 'c', val: 'C', lookFor: 'ccc' },
-        { id: 'd', val: 'D', lookFor: 'ddd' }
+        { id: 'd', val: 'D', lookFor: 'ddd' },
+        { id: 'e', val: 'E', lookFor: 'dddee' },
+        { id: 'f', val: 'F', lookFor: 'ddfff' },
+        { id: 'g', val: 'G', lookFor: 'dggg' },
+        { id: 'h', val: 'H', lookFor: 'dddhhh' },
       ],
       searchValue: ''
     }

package/src/components/inputs/select/index.vue

@@ -42,7 +42,8 @@
                     :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
                     :value="textSearch"
                     @keydown.stop="onKeyDown"
-                    @input-change="searchChange" />
+                    @input-change="searchChange"
+                    @click.native.stop />
                 <selector v-else>
                     <slot name="selector" :selectedValue="selectedValue"></slot>
                 </selector>
@@ -103,6 +104,7 @@ const Caret = styled.div`
   width: 30px;
   min-width: 30px;
   height: 100%;
+  align-items: stretch
   padding-top: 5px;
   cursor: pointer;
   margin-left: auto;
@@ -323,7 +325,6 @@ const InputWrapper = styled('div', inputAttrs)`
             this.isActive=false
         },
         toggleDropdown(){
-            if(this.isSearchBarVisible){return}
             this.isDropdownOpen=!this.isDropdownOpen
         },
         toggleCaretDropdown(){
@@ -372,7 +373,7 @@ const InputWrapper = styled('div', inputAttrs)`
         },
         clickOutside(event) {
             if(!this.isClickOutsideActive) return
-            if (this.$el==event.target || this.$el.contains(event.target)) {
+            if (this.$refs.select.$el==event.target || this.$refs.select.$el.contains(event.target)) {
                 return
             }else{
             this.closeDropdown()