@eturnity/eturnity_reusable_components 1.2.42 → 1.2.44

package/package.json

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

package/src/App.vue

@@ -3,8 +3,7 @@
     <page-container>
       <br />
 
-      <modal v-if="true" backdrop="dark" :isLoading="false" :isOpen="true">
-        <div :style="{ padding: '50px' }">
+     
           <input-number
             :value="value"
             :minNumber="0"
@@ -45,6 +44,50 @@
             :disabled="false"
           />
 
+          <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>
           <Select
             :value="value"
             selectWidth="100%"
@@ -68,8 +111,7 @@
             </template>
           </Select>
           {{ filteredOptionList }}
-        </div>
-      </modal>
+        
       <iconCollection />
     </page-container>
   </ThemeProvider>
@@ -83,7 +125,6 @@ import InputNumber from '@/components/inputs/inputNumber'
 import Select from '@/components/inputs/select'
 import SwitchField from '@/components/inputs/switchField'
 import Option from '@/components/inputs/select/option'
-import Modal from '@/components/modals/modal'
 import iconCollection from '@/components/icon/iconCollection'
 // import TableDropdown from "@/components/tableDropdown"
 
@@ -103,7 +144,6 @@ export default {
     ThemeProvider,
     PageContainer,
     InputNumber,
-    Modal,
     Option,
     Select,
     SwitchField,

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

@@ -44,7 +44,7 @@
                 <div v-else>
                     <slot name="selector" :selectedValue="selectedValue"></slot>
                 </div>
-                <Caret :isUp="isDropdownOpen" @click.stop="isSearchBarVisible ? closeDropdown() : toggleDropdown() " >
+                <Caret :isUp="isDropdownOpen" >
                     <icon name="arrow_up" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
                 </Caret>
             </selectButton>
@@ -279,6 +279,9 @@ const InputWrapper = styled('div', inputAttrs)`
     mounted(){
         this.selectedValue=this.value
     },
+    beforeDestroy(){
+        document.removeEventListener('click', this.clickOutside)
+    },
     methods:{
         focus(){
             this.isActive=true
@@ -286,11 +289,11 @@ const InputWrapper = styled('div', inputAttrs)`
         blur(){
             this.isActive=false
         },
-        toggleDropdown(e){
+        toggleDropdown(){
             if(this.isSearchBarVisible){return}
             this.isDropdownOpen=!this.isDropdownOpen
             if (this.isDropdownOpen) {
-                setTimeout(()=>document.addEventListener('click', this.clickOutside),10)
+                document.addEventListener('click', this.clickOutside)
             } else {
                 document.removeEventListener('click', this.clickOutside)
             }
@@ -299,7 +302,7 @@ const InputWrapper = styled('div', inputAttrs)`
         openDropdown(){
             this.focus()
             this.isDropdownOpen=true
-            setTimeout(()=>document.addEventListener('click', this.clickOutside),10)
+            document.addEventListener('click', this.clickOutside)
         },
         closeDropdown(){
             this.blur()
@@ -337,6 +340,7 @@ const InputWrapper = styled('div', inputAttrs)`
             }))
         },
         clickOutside(event) {
+            console.log("click outside",event)
             if (this.$el==event.target || this.$el.contains(event.target)) {
                 return
             }