@eturnity/eturnity_reusable_components 1.2.34-3d-master.3 → 1.2.34-3d-master.7

package/package.json

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

package/src/App.vue

@@ -3,7 +3,7 @@
     <page-container>
       <br />
 
-      <modal v-if="false" backdrop="dark" :isLoading="false" :isOpen="true">
+      <modal v-if="true" backdrop="dark" :isLoading="false" :isOpen="true">
 
     <div :style="{padding:'50px'}">
       
@@ -53,18 +53,16 @@
                   alignItems="vertical"
                   colorMode="dark"
                   @input-change="value=$event"
+                  @search-change="searchValue=$event"
                   >
                   <template #selector="{selectedValue}">
                     value selected: {{selectedValue}}
                   </template>
                   <template #dropdown>
-                    <Option value="1">value one</Option>
-                    <Option value="2">value two</Option>
-                    <Option value="3">value three</Option>
-                    <Option value="4">value four</Option>
+                    <Option v-for="opt in filteredOptionList" :key="opt.id" :value="opt.val">{{ opt.lookFor }}</Option>
                   </template>
                 </Select> 
-                
+                {{filteredOptionList  }}
                 </div>
       </modal>
       <iconCollection/>
@@ -110,7 +108,19 @@ export default {
     return {
       value:42,
       value2:42,
-      companyName:"toto"
+      companyName:"toto",
+      optionList:[
+        {id:'a',val:'A',lookFor:'babababa'},
+        {id:'b',val:'B',lookFor:'abab'},
+        {id:'c',val:'C',lookFor:'ccc'},
+        {id:'d',val:'D',lookFor:'ddd'}
+      ],
+      searchValue:""
+    }
+  },
+  computed:{
+    filteredOptionList(){
+     return this.optionList.filter(opt=>opt.lookFor.includes(this.searchValue))
     }
   },
   methods: {

package/src/assets/svgIcons/align_panel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><path d="M3.32 2.668c-.472.22-.937.707-1.09 1.142-.17.478-.163 40.686.006 41.27.08.277.228.512.485.768.852.852 2.09.819 2.901-.079.584-.646.542 1.105.519-21.492L6.12 3.96l-.233-.42c-.527-.951-1.609-1.319-2.567-.872m5.5 9.512.02 9.38H36.2l.02-9.38.021-9.38H8.799l.021 9.38m23.74.02v5.48h-20V6.72h20v5.48M13.016 29.362c-2.807 1.987-5.093 3.643-5.08 3.678.026.073 10.119 8.16 10.182 8.16.022 0 .049-1.125.061-2.5l.021-2.5 14.02-.02 14.02-.02v-5.52H18.162l-.021-2.446-.021-2.445-5.104 3.613" fill-rule="evenodd"/></svg>

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

@@ -1,7 +1,6 @@
 <template>
     <Container 
         :selectWidth="selectWidth" 
-        v-click-outside="closeDropdown"
         @mouseenter="mouseEnterHandler"
         @mouseleave="mouseLeaveHandler"
         >
@@ -23,25 +22,44 @@
             </label-wrapper>
             <div>
             <selectButton 
-                @click="toggleDropdown" 
+                ref="select"
+                @click="toggleDropdown"
                 :isActive="isActive"
+                :selectHeight="selectHeight"
                 :bgColor="buttonBgColor || colorMode=='dark'?'transparentBlack1':'white'"
                 :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
-                
+                @keydown.native="onKeyDown"
                 >
-                <slot name="selector" :selectedValue="selectedValue"></slot>
-                <Caret :isUp="isDropdownOpen">
+                <inputText 
+                    v-if="isSearchBarVisible"
+                    ref="searchInput"
+                    tabindex="0"
+                    :noBorder="true"
+                    :inputHeight="selectHeight"
+                    backgroundColor="transparent"
+                    :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
+                    :value="textSearch" 
+                    @keydown.stop="onKeyDown"
+                    @input-change="searchChange" />
+                <div v-else>
+                    <slot name="selector" :selectedValue="selectedValue"></slot>
+                </div>
+                <Caret :isUp="isDropdownOpen" @click.stop="isSearchBarVisible ? closeDropdown() : toggleDropdown() " >
                     <icon name="arrow_up" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
                 </Caret>
             </selectButton>
             <DropdownWrapper>
             <selectDropdown 
-                v-if="isDropdownOpen"
+                ref="dropdown"
+                v-show="isDropdownOpen"
+                :hoveredIndex="hoveredIndex"
                 :isActive="isActive"
                 :optionWidth="optionWidth"
                 :bgColor="dropdownBgColor || colorMode=='dark'?'black':'white'"
                 :fontColor="dropdownFontColor || colorMode=='dark'?'white':'black'"
-                @option-selected="optionSelected">
+                :selectedValue="selectedValue"
+                @option-selected="optionSelected"
+                @option-hovered="optionHovered">
                 <slot name="dropdown"></slot>
             </selectDropdown>
             </DropdownWrapper>
@@ -73,7 +91,8 @@
   import styled from 'vue-styled-components'
   import InfoText from '../../infoText'
   import icon from '../../icon'
-
+  import inputText from '../inputText'
+  
   const caretAttrs={isUp:Boolean}
   const Caret=styled('div', caretAttrs)`
   position:absolute;
@@ -105,23 +124,25 @@ const LabelWrapper = styled.div`
   align-items: center;
   justify-content: start;
 `
-const selectButtonAttrs={bgColor:String,fontColor:String,isActive:Boolean}
+const selectButtonAttrs={bgColor:String,fontColor:String,isActive:Boolean,selectHeight:String}
 const selectButton = styled('div',selectButtonAttrs)`
     position:relative;
     box-sizing: border-box;
     border:1px solid red;
     border-radius:4px;
-    padding:10px 15px;
+    padding:0px 10px;
     text-align:left;
     border-radius:4px;
     min-height:36px;
-    display: flex;
+    display: grid;
+    grid-template-columns:auto 40px;
     align-items: center;
+    max-height:${props=>props.selectHeight};
     border:1px solid ${(props)=>props.theme.colors.grey4}
     background-color:${(props) => props.theme.colors[props.bgColor]?props.theme.colors[props.bgColor]:props.bgColor};
     color:${(props) => props.theme.colors[props.fontColor]?props.theme.colors[props.fontColor]:props.fontColor};
 `
-const selectDropdownAttrs={bgColor:String,fontColor:String,selectWidth: String, optionWidth: String}
+const selectDropdownAttrs={bgColor:String,fontColor:String,selectWidth: String, optionWidth: String,hoveredIndex:Number,selectedValue:Number | String}
 const selectDropdown = styled('div',selectDropdownAttrs)`
     box-sizing: border-box;
     z-index:${props=>props.isActive?'2':'1'};
@@ -140,6 +161,12 @@ const selectDropdown = styled('div',selectDropdownAttrs)`
     color:${(props) => props.theme.colors[props.fontColor]?props.theme.colors[props.fontColor]:props.fontColor};
     max-height:300px;
     overflow-y:auto;
+    & [data-value="${props=>props.selectedValue}"]{
+        backdrop-filter: brightness(1.4);
+    }
+    &>div:nth-child(${props=>props.hoveredIndex}){
+        backdrop-filter: brightness(1.2);
+    }
 `
   const DropdownWrapper=styled('div')`
   position:relative;
@@ -178,6 +205,10 @@ const InputWrapper = styled('div', inputAttrs)`
             required: false,
             default: null
         },
+        selectHeight: {
+            required: false,
+            default: null
+        },
         optionWidth: {
             required: false,
             default: null
@@ -211,6 +242,14 @@ const InputWrapper = styled('div', inputAttrs)`
         colorMode:{
             required:false,
             default:'light'
+        },
+        isSearchable:{
+            required:false,
+            default:true
+        },
+        isAutoSearch:{
+            required:false,
+            default:true
         }
     },
   
@@ -224,7 +263,8 @@ const InputWrapper = styled('div', inputAttrs)`
         InputWrapper,
         DropdownWrapper,
         icon,
-        Caret
+        Caret,
+        inputText
     },
   
     data() {
@@ -232,9 +272,11 @@ const InputWrapper = styled('div', inputAttrs)`
         selectedValue: null,
         isDropdownOpen:false,
         isActive:false,
+        textSearch:"",
+        hoveredIndex:0,
       }
     },
-    created(){
+    mounted(){
         this.selectedValue=this.value
     },
     methods:{
@@ -244,13 +286,25 @@ const InputWrapper = styled('div', inputAttrs)`
         blur(){
             this.isActive=false
         },
-        toggleDropdown(){
-            this.focus()
+        toggleDropdown(e){
+            if(this.isSearchBarVisible){return}
             this.isDropdownOpen=!this.isDropdownOpen
+            if (this.isDropdownOpen) {
+                setTimeout(()=>document.addEventListener('click', this.clickOutside),10)
+            } else {
+                document.removeEventListener('click', this.clickOutside)
+            }
+            
+        },
+        openDropdown(){
+            this.focus()
+            this.isDropdownOpen=true
+            setTimeout(()=>document.addEventListener('click', this.clickOutside),10)
         },
         closeDropdown(){
             this.blur()
             this.isDropdownOpen=false
+            document.removeEventListener('click', this.clickOutside)
         },
         optionSelected(e){
             this.selectedValue=e
@@ -258,21 +312,74 @@ const InputWrapper = styled('div', inputAttrs)`
             this.blur()
             this.$emit('input-change',e)
         },
+        optionHovered(e){
+            const optionElement=this.$el.querySelector(`[data-value="${e}"]`)
+            if(this.$refs.dropdown){
+            this.hoveredIndex=this.$refs.dropdown.$children.map(component=>component.$el).indexOf(optionElement)+1
+            }
+        },
         mouseEnterHandler(){
-            this.focus()
             if(this.hoverDropdown){
+                this.focus()
                 this.isDropdownOpen=true
             }
         },
         mouseLeaveHandler(){
-            this.blur()
+            if(this.hoverDropdown){
+                this.blur()
+            }
+        },
+        searchChange(value){
+            this.textSearch=value
+            this.$emit('search-change',value)
+            this.$refs.dropdown.$children.map(component=>component.$el).forEach((el=>{
+                if(!el.textContent.toLowerCase().includes(value.toLowerCase())){el.style.display='none'}else{el.style.display='inherit'}
+            }))
+        },
+        clickOutside(event) {
+            if (this.$el==event.target || this.$el.contains(event.target)) {
+                return
+            }
+            this.closeDropdown()
         },
+        onKeyDown(e){
+            if(e.key=='ArrowDown'){
+                this.onArrowPress(1)
+            } else if(e.key=='ArrowUp'){
+                this.onArrowPress(-1)
+            } else if(e.key=='Enter'){
+                const optionHoveredComponent=this.$refs.dropdown.$children[(this.hoveredIndex-1+this.optionLength)%this.optionLength]
+                this.optionSelected(optionHoveredComponent.$el.dataset.value)
+            }
+            
+        },
+        onArrowPress(dir){
+            this.hoveredIndex=((this.hoveredIndex+dir+this.optionLength-1)%this.optionLength)+1
+            const optionHoveredComponent=this.$refs.dropdown.$children[(this.hoveredIndex-1+this.optionLength)%this.optionLength]
+            const topPos = optionHoveredComponent.$el.offsetTop;
+            this.$refs.dropdown.$el.scrollTop = topPos;
+        }
     },
     computed: {
+        optionLength(){
+            if(this.isDropdownOpen){
+                return this.$refs.dropdown.$children.length
+            }else{
+                return 0
+            }
+        },
+        isSearchBarVisible(){
+            return this.isSearchable && this.optionLength>=5 && this.isDropdownOpen
+        }
     },
     watch:{
         value(val){
             this.selectedValue=val
+        },
+        isDropdownOpen(val){
+            if(val && this.isSearchable){
+                this.$nextTick(()=>{if(this.$refs.searchInput){this.$refs.searchInput.$el.querySelector('input').focus()}})
+            }
         }
     }
   }

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

@@ -1,5 +1,5 @@
 <template>
-    <optionContainer :hoveredBgColor="hoveredBgColor || colorMode=='dark'?'#000000':'grey5'" @click="clickHandler">
+    <optionContainer :data-value="value" :hoveredBgColor="hoveredBgColor || colorMode=='dark'?'#000000':'grey5'" @click="clickHandler" @mouseover="hoverHandler">
         <slot></slot>
     </optionContainer>
   </template>
@@ -48,6 +48,9 @@
     methods:{
         clickHandler(){
             this.$parent.$emit('option-selected',this.value)
+        },
+        hoverHandler(){
+            this.$parent.$emit('option-hovered',this.value)
         }
     },
     computed: {