@eturnity/eturnity_reusable_components 1.2.57 → 1.2.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.57",
+  "version": "1.2.59",
   "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()

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

@@ -80,20 +80,20 @@ const InputContainer = styled('div', inputProps)`
   textarea {
     border: ${(props) =>
       props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : '1px solid ' + props.theme.colors.grey4};
+        ? `1px solid ${props.theme.colors.red} !important`
+        : `1px solid ${props.theme.colors.grey3} !important`};
     padding: ${(props) =>
-      props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
-    border-radius: 4px;
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
-    color: ${(props) => props.theme.colors.black};
+      props.hasUnit ? '11px 40px 11px 10px !important' : '15px !important'};
+    border-radius: 4px !important;
+    font-size: ${(props) => `${props.fontSize} !important`};
+    color: ${(props) => `${props.theme.colors.grey1} !important`};
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
     max-width: 100%;
     box-sizing: border-box; // to allow width of 100% with padding
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
 
     &::placeholder {
-      color: ${(props) => props.theme.colors.grey2};
+      color: ${(props) => `${props.theme.colors.grey2} !important`};
     }
 
     &:focus {
@@ -172,7 +172,7 @@ export default {
     },
     fontSize: {
       required: false,
-      default: '16px'
+      default: '13px'
     },
     inputWidth: {
       required: false,

package/src/components/tableDropdown/index.vue

@@ -31,7 +31,7 @@
               item.type === 'template' &&
               (item.value === '' || item.value === '-')
             "
-            :key="idx"
+            :key="index + '_button'"
             >{{ $gettext('Use template...') }}</template-button
           >
           <template-link