@eturnity/eturnity_reusable_components 1.2.34 → 1.2.36

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

@@ -0,0 +1,387 @@
+<template>
+    <Container 
+        :selectWidth="selectWidth" 
+        @mouseenter="mouseEnterHandler"
+        @mouseleave="mouseLeaveHandler"
+        >
+        <input-wrapper
+        :hasLabel="!!label && label.length > 0"
+        :alignItems="alignItems"
+        >
+            <label-wrapper v-if="label"  >
+                <input-label 
+                    :fontColor="labelFontColor || colorMode=='dark'?'white':'eturnityGrey'"
+                    :fontSize="fontSize">{{ label }}</input-label>
+                <info-text
+                v-if="infoTextMessage"
+                :text="infoTextMessage"
+                borderColor="#ccc"
+                :size="fontSize ? fontSize : '16px'"
+                :alignText="infoTextAlign"
+                />
+            </label-wrapper>
+            <div>
+            <selectButton 
+                ref="select"
+                @click="toggleDropdown"
+                :isActive="isActive"
+                :selectHeight="selectHeight"
+                :bgColor="buttonBgColor || colorMode=='dark'?'transparentBlack1':'white'"
+                :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
+                @keydown.native="onKeyDown"
+                >
+                <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 
+                ref="dropdown"
+                v-show="isDropdownOpen"
+                :hoveredIndex="hoveredIndex"
+                :isActive="isActive"
+                :optionWidth="optionWidth"
+                :bgColor="dropdownBgColor || colorMode=='dark'?'black':'white'"
+                :fontColor="dropdownFontColor || colorMode=='dark'?'white':'black'"
+                :selectedValue="selectedValue"
+                @option-selected="optionSelected"
+                @option-hovered="optionHovered">
+                <slot name="dropdown"></slot>
+            </selectDropdown>
+            </DropdownWrapper>
+            </div>
+        </input-wrapper>    
+    </Container>
+  </template>
+  
+  <script>
+    //How to use it
+    // <Select 
+    //     hoverDropdown="true"
+    //     selectWidth="100%"
+    //     optionWidth="50%"
+    //     label="that is a label"
+    //     alignItems="vertical"
+    //     >
+    //     <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>
+    //     </template>
+    // </Select> 
+                
+  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;
+  display:flex;
+  align-items:center;
+  height:100%;
+  right:15px;
+  top:-2px
+  transform: ${props=>!props.isUp?"rotate(180deg)":""};
+  transform-origin: center;
+  `
+
+  const labelAttrs = { fontSize: String }
+  const InputLabel = styled('div', labelAttrs)`
+  color:${(props) => props.theme.colors[props.fontColor]?props.theme.colors[props.fontColor]:props.fontColor};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-weight: 700;
+`
+  const inputProps={selectWidth: String, optionWidth: String}
+  const Container = styled('div', inputProps)`
+    width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
+    position: relative;
+    display: inline-block;
+`
+const LabelWrapper = styled.div`
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  grid-gap: 12px;
+  align-items: center;
+  justify-content: start;
+`
+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:0px 10px;
+    text-align:left;
+    border-radius:4px;
+    min-height:36px;
+    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,hoveredIndex:Number,selectedValue:Number | String}
+const selectDropdown = styled('div',selectDropdownAttrs)`
+    box-sizing: border-box;
+    z-index:${props=>props.isActive?'2':'1'};
+    position:absolute;
+    top:5px;
+    padding:10px;
+    border:1px solid ${(props)=>props.theme.colors.grey4}
+    border-radius:4px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
+    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};
+    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;
+  `
+  const inputAttrs = { alignItems: String, hasLabel: Boolean }
+const InputWrapper = styled('div', inputAttrs)`
+  position: relative;
+  display: grid;
+  align-items: center;
+  gap: 8px;
+  grid-template-columns: ${(props) =>
+    props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
+`
+  export default {
+    name: 'RCselect',
+  
+    props: {
+        value:{
+            required:false,
+            default: null
+        },
+        fontSize:{
+            required:false,
+            default: null
+        },
+        label:{
+            required:false
+        },
+        infoTextMessage:{
+            required:false
+        },
+        infoTextAlign:{
+            required:false
+        },
+        selectWidth: {
+            required: false,
+            default: null
+        },
+        selectHeight: {
+            required: false,
+            default: null
+        },
+        optionWidth: {
+            required: false,
+            default: null
+        },
+        hoverDropdown: {
+            required: false,
+            default: false
+        },
+        alignItems:{
+            required: false,
+            default: 'horizontal'
+        },
+        buttonBgColor:{
+            required: false,
+        },
+        buttonFontColor:{
+            required: false,
+        },
+        dropdownBgColor:{
+            required: false,
+        },
+        dropdownFontColor:{
+            required: false,
+        },
+        caretColor:{
+            required:false,
+        },
+        labelFontColor:{
+            required:false
+        },
+        colorMode:{
+            required:false,
+            default:'light'
+        },
+        isSearchable:{
+            required:false,
+            default:true
+        },
+        isAutoSearch:{
+            required:false,
+            default:true
+        }
+    },
+  
+    components: {
+        selectButton,
+        selectDropdown,
+        Container,
+        InputLabel,
+        LabelWrapper,
+        InfoText,
+        InputWrapper,
+        DropdownWrapper,
+        icon,
+        Caret,
+        inputText
+    },
+  
+    data() {
+      return {
+        selectedValue: null,
+        isDropdownOpen:false,
+        isActive:false,
+        textSearch:"",
+        hoveredIndex:0,
+      }
+    },
+    mounted(){
+        this.selectedValue=this.value
+    },
+    methods:{
+        focus(){
+            this.isActive=true
+        },
+        blur(){
+            this.isActive=false
+        },
+        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
+            this.closeDropdown()
+            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(){
+            if(this.hoverDropdown){
+                this.focus()
+                this.isDropdownOpen=true
+            }
+        },
+        mouseLeaveHandler(){
+            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()}})
+            }
+        }
+    }
+  }
+  </script>
+ 

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

@@ -0,0 +1,60 @@
+<template>
+    <optionContainer :data-value="value" :hoveredBgColor="hoveredBgColor || colorMode=='dark'?'#000000':'grey5'" @click="clickHandler" @mouseover="hoverHandler">
+        <slot></slot>
+    </optionContainer>
+  </template>
+  
+  <script>
+//   import selectButton from './selectButton'
+//   import selectDropdown from './selectDropDown'
+  import styled from 'vue-styled-components'
+  const optionProps={hoveredBgColor:String}
+  const optionContainer = styled('div',optionProps)`
+    display:flex;
+    cursor: pointer;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 15px;
+    gap: 14px;
+    width:100%;
+    box-sizing:inherit;
+    &:hover{
+      background-color:${(props) => props.theme.colors[props.hoveredBgColor]?props.theme.colors[props.hoveredBgColor]:props.hoveredBgColor};
+    }
+  `
+  
+  export default {
+    name: 'RCoption',
+  
+    props: {
+      value: {
+        required: true
+      },
+      hoveredBgColor:{
+        required:false,
+      },
+      colorMode:{
+        required:false,
+        default:'light'
+      }
+    },
+  
+    components: {optionContainer},
+  
+    data() {
+      return {}
+    },
+    methods:{
+        clickHandler(){
+            this.$parent.$emit('option-selected',this.value)
+        },
+        hoverHandler(){
+            this.$parent.$emit('option-hovered',this.value)
+        }
+    },
+    computed: {
+    }
+  }
+  </script>
+ 

package/src/components/inputs/select/select.stories.js

@@ -0,0 +1,59 @@
+import Select from "./index.vue"
+import Option from "./option/index.vue"
+
+export default {
+  title: "select",
+  component: Select,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Select,Option },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: `<Select v-bind="$props">
+                <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>
+                </template>
+            </Select>`,
+
+    // import Select from "@eturnity/eturnity_reusable_components/src/components/inputs/select"
+    // import Option from "@eturnity/eturnity_reusable_components/src/components/inputs/select/option"
+    // To use:
+    // How to use it
+    // <Select 
+    //     hoverDropdown="true"
+    //     selectWidth="100%"
+    //     optionWidth="50%"
+    //     label="that is a label"
+    //     alignItems="vertical"
+    //     >
+    //     <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>
+    //     </template>
+    // </Select> 
+})
+
+export const Default = Template.bind({})
+Default.args = {
+    hoverDropdown="true"
+    selectWidth="100%"
+    optionWidth="50%"
+    label="that is a label"
+    alignItems="vertical"
+    value="2"
+}
+