@eturnity/eturnity_reusable_components 1.2.41-3d-master.0 → 1.2.41-3d-master.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.41-3d-master.0",
+  "version": "1.2.41-3d-master.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,9 +1,7 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <br />
-
-      <modal v-if="true" backdrop="dark" :isLoading="false" :isOpen="true">
+      <!-- <modal v-if="true" backdrop="dark" :isLoading="false" :isOpen="true"> -->
         <div :style="{ padding: '50px' }">
           <input-number
             :value="value"
@@ -45,6 +43,28 @@
             :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%"
@@ -69,8 +89,8 @@
           </Select>
           {{ filteredOptionList }}
         </div>
-      </modal>
-      <iconCollection />
+      <!-- </modal> -->
+      <!-- <iconCollection /> -->
     </page-container>
   </ThemeProvider>
 </template>
@@ -83,8 +103,8 @@ 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 Modal from '@/components/modals/modal'
+// import iconCollection from '@/components/icon/iconCollection'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -103,11 +123,11 @@ export default {
     ThemeProvider,
     PageContainer,
     InputNumber,
-    Modal,
+    // Modal,
     Option,
     Select,
     SwitchField,
-    iconCollection
+    // iconCollection
   },
   data() {
     return {

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

@@ -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()