@eturnity/eturnity_reusable_components 1.2.31-3d-master.6 → 1.2.31-3d-master.8

package/package.json

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

package/src/App.vue

@@ -53,6 +53,83 @@
                     </div>
                   </template>
                 </input-number>
+                <Select 
+                  selectWidth="100%"
+                  optionWidth="50%"
+                  label="that is a label"
+                  alignItems="vertical"
+                  colorMode="light"
+                  >
+                  <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> 
+                <Select 
+                  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> 
+                <Select 
+                  selectWidth="100%"
+                  optionWidth="50%"
+                  label="that is a label"
+                  alignItems="vertical"
+                  colorMode="dark"
+                  >
+                  <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> 
+                <hr>
+                <SwitchField
+                  @on-switch-change="onInputChange($event)"
+                  :options="[{value:0,content:'zero'},{value:1,content:'one'},{value:2,content:'two'}]"
+                  :value="1"
+                  label="label"
+                  toggleColor="red"
+                  size="large"
+                  backgroundColor="blue"
+                  labelAlign="left"
+                  fontColor="black"
+                  :disabled="false"
+                />
+                <div :style="{padding:'50px',backgroundColor:'#1e1e1e'}">
+                <SwitchField
+                  @on-switch-change="onInputChange($event)"
+                  :options="[{value:'test',content:'zero'},{value:'1',content:'one'},{value:'2',content:'two'}]"
+                  value='test'
+                  label="label"
+                  toggleColor="red"
+                  size="large"
+                  backgroundColor="blue"
+                  labelAlign="left"
+                  colorMode="dark"
+                  alignItems="vertical"
+                />
+                </div>
     </div>
       </modal>
     </page-container>
@@ -64,7 +141,11 @@ import { ThemeProvider } from "vue-styled-components"
 import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import InputNumber from "@/components/inputs/inputNumber"
+import Select from "@/components/inputs/select"
+import Option from "@/components/inputs/select/option"
 import Modal from "@/components/modals/modal"
+import SwitchField from "@/components/inputs/switchField"
+ 
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -83,12 +164,16 @@ export default {
     ThemeProvider,
     PageContainer,
     InputNumber,
-    Modal
+    Modal,
+    Option,
+    Select,
+    SwitchField
   },
   data() {
     return {
       value:42,
-      value2:42
+      value2:42,
+      companyName:"toto"
     }
   },
   methods: {

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

@@ -5,7 +5,7 @@
     </label-slot-wrapper>
     
     <label-wrapper v-if="labelText">
-      <label-text>
+      <label-text :labelFontColor="labelFontColor">
         {{ labelText }}
       </label-text>
       <info-text
@@ -113,7 +113,8 @@ const inputProps = {
   slotSize: String,
   inputHeight:String,
   isInteractive:Boolean,
-  alignItems:String
+  alignItems:String,
+  labelFontColor:String
 }
 
 const Container = styled('div', inputProps)`
@@ -238,9 +239,9 @@ const LabelSlotWrapper = styled('div',inputProps)`
   cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
 `
 
-const LabelText = styled.div`
+const LabelText = styled('div',inputProps)`
   font-size: 13px;
-  color: ${(props) => props.theme.colors.eturnityGrey};
+  color: ${(props) => props.theme.colors[props.labelFontColor]?props.theme.colors[props.labelFontColor]:props.labelFontColor};
   font-weight: 700;
 `
 
@@ -389,6 +390,10 @@ export default {
     },
     slotSize: {
       required: false
+    },
+    labelFontColor:{
+      required:false,
+      default:'eturnityGrey'
     }
   },
   computed: {

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

@@ -0,0 +1,275 @@
+<template>
+    <Container 
+        :selectWidth="selectWidth" 
+        v-click-outside="closeDropdown"
+        @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 
+                @click="toggleDropdown" 
+                :isActive="isActive"
+                :bgColor="buttonBgColor || colorMode=='dark'?'transparentBlack1':'white'"
+                :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
+                
+                >
+                <slot name="selector" :selectedValue="selectedValue"></slot>
+                <Caret :isUp="isDropdownOpen">
+                    <icon name="arrow_up" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
+                </Caret>
+            </selectButton>
+            <DropdownWrapper>
+            <selectDropdown 
+                v-if="isDropdownOpen"
+                :isActive="isActive"
+                :optionWidth="optionWidth"
+                :bgColor="dropdownBgColor || colorMode=='dark'?'black':'white'"
+                :fontColor="dropdownFontColor || colorMode=='dark'?'white':'black'"
+                @option-selected="optionSelected">
+                <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'
+
+  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}
+const selectButton = styled('div',selectButtonAttrs)`
+    position:relative;
+    box-sizing: border-box;
+    border:1px solid red;
+    border-radius:4px;
+    padding:10px 15px;
+    text-align:left;
+    border-radius:4px;
+    min-height:36px;
+    display: flex;
+    align-items: center;
+    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 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:scroll;
+`
+  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
+        },
+        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'
+        }
+    },
+  
+    components: {
+        selectButton,
+        selectDropdown,
+        Container,
+        InputLabel,
+        LabelWrapper,
+        InfoText,
+        InputWrapper,
+        DropdownWrapper,
+        icon,
+        Caret
+    },
+  
+    data() {
+      return {
+        selectedValue: null,
+        isDropdownOpen:false,
+        isActive:false,
+      }
+    },
+    created(){
+        this.selectedValue=this.value
+    },
+    methods:{
+        focus(){
+            this.isActive=true
+        },
+        blur(){
+            this.isActive=false
+        },
+        toggleDropdown(){
+            this.focus()
+            this.isDropdownOpen=!this.isDropdownOpen
+        },
+        closeDropdown(){
+            this.blur()
+            this.isDropdownOpen=false
+        },
+        optionSelected(e){
+            this.selectedValue=e
+            this.closeDropdown()
+            this.blur()
+            this.$emit('input-change',e)
+        },
+        mouseEnterHandler(){
+            this.focus()
+            if(this.hoverDropdown){
+                this.isDropdownOpen=true
+            }
+        },
+        mouseLeaveHandler(){
+            this.blur()
+        },
+    },
+    computed: {
+    }
+  }
+  </script>
+ 

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

@@ -0,0 +1,57 @@
+<template>
+    <optionContainer :hoveredBgColor="hoveredBgColor || colorMode=='dark'?'#000000':'grey5'" @click="clickHandler">
+        <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)
+        }
+    },
+    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"
+}
+

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

@@ -0,0 +1,239 @@
+<template>
+    <container>
+      <flex-wrapper :size="size" :disabled="disabled" :alignItems="alignItems" :label="label">
+        <label-container
+          v-if="label && labelAlign === 'left'"
+          :hasInfoMessage="!!infoTextMessage"
+          :colorMode="colorMode"
+        >
+          <label-text :size="size">{{ label }}</label-text>
+          <info-text
+            v-if="infoTextMessage"
+            :text="infoTextMessage"
+            borderColor="#ccc"
+            size="14px"
+            :alignText="infoTextAlign"
+          />
+        </label-container>
+        
+        <switch-wrapper
+          :size="size"
+          :disabled="disabled"
+          :backgroundColor="backgroundColor"
+        >
+            <switchOption 
+                v-for="(item,index) in options"
+                :key="index"
+                @click="selectItem(item.value)"
+                :isActive="selectedValue==item.value"
+                :colorMode="colorMode"
+                :primaryColor="primaryColor"
+                :secondaryColor="secondaryColor"
+                :inactiveColor="inactiveColor"
+            >
+                {{ item.content }}
+            </switchOption>
+        </switch-wrapper>
+        <label-container
+          v-if="label && labelAlign === 'right'"
+          :hasInfoMessage="!!infoTextMessage"
+        >
+          <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
+          <info-text
+            @click.native.stop
+            v-if="infoTextMessage"
+            :text="infoTextMessage"
+            borderColor="#ccc"
+            size="14px"
+            :alignText="infoTextAlign"
+          />
+        </label-container>
+      </flex-wrapper>
+    </container>
+  </template>
+  
+  <script>
+    // import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
+    // To use:
+    // <SwitchField
+    //     @on-switch-change="onInputChange($event)"
+    //     :options="[{value:0,content:'zero'},{value:1,content:'one'},{value:2,content:'two'}]"
+    //     :value="1"
+    //     label="label"
+    //     toggleColor="red"
+    //     size="large"
+    //     backgroundColor="blue"
+    //     labelAlign="left"
+    //     fontColor="black"
+    //     :disabled="false"
+    // />
+  
+import styled from "vue-styled-components"
+  import InfoText from "../../infoText"
+  import theme from "../../../assets/theme"
+  const Container = styled.div`
+    display: inline-block;
+  `
+  
+  const flexAttrs = { label:String,size: String, disabled: Boolean,alignItems: String }
+  const FlexWrapper = styled("div", flexAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 10px;
+    align-items: center;
+    cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+    grid-template-columns: ${(props) =>
+    props.alignItems === 'vertical' || !props.label ? '1fr' : 'auto 1fr'};
+  `
+  
+  const toggleAttrs = {
+    size: String,
+    fontColor: String,
+    disabled: Boolean,
+    backgroundColor: String,
+    isChecked: Boolean,
+  }
+  const LabelText = styled("div", toggleAttrs)`
+    color: white;
+    font-size: 13px;
+    font-family: 'Lato-Bold',Arial;
+  `
+  
+  const SwitchWrapper = styled("span", toggleAttrs)`
+    display: flex;
+    position: relative;
+    cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+    height: ${(props) =>
+      props.size === "medium"
+        ? "24px"
+        : props.size === "small"
+        ? "16px"
+        : "24px"};
+  `
+  const optionAttrs={isActive:Boolean,primaryColor:String,secondaryColor:String,inactiveColor:String}
+  const switchOption=styled('div',optionAttrs)`
+    color:${props=>props.isActive?props.primaryColor:props.inactiveColor};
+    background-color:${props=>props.isActive?props.secondaryColor:"transparent"};
+    border:1px solid ${props=>props.isActive?props.secondaryColor:props.inactiveColor};
+    display:flex;
+    align-items:center;
+	font-size: 14px;
+	line-height: 1;
+	text-align: center;
+	padding: 10px;
+	margin-right: -1px;
+	transition: all 0.1s ease-in-out;
+    overflow:hidden;
+    & :hover{
+        cursor: pointer;
+    }
+    &:first-child {
+	    border-radius: 4px 0 0 4px;
+    }
+    &:last-child {
+	    border-radius: 0 4px 4px 0;
+    }
+
+  `
+  
+  const labelAttrs = { hasInfoMessage: Boolean }
+  const LabelContainer = styled("div", labelAttrs)`
+    display: inline-grid;
+    grid-template-columns: ${(props) =>
+      props.hasInfoMessage ? "auto 1fr" : "auto"};
+    grid-gap: 12px;
+    align-items: center;
+  `
+  
+  export default {
+    name: "switchField",
+    components: {
+      Container,
+      SwitchWrapper,
+      FlexWrapper,
+      LabelText,
+      InfoText,
+      LabelContainer,
+      switchOption,
+    },
+    props: {
+      label: {
+        required: false,
+        default: "",
+      },
+      toggleColor: {
+        required: false,
+      },
+      backgroundColor: {
+        required: false,
+      },
+      size: {
+        required: false,
+        default: "small",
+      },
+      labelAlign: {
+        required: false,
+        default: "left",
+      },
+      fontColor: {
+        required: false,
+      },
+      disabled: {
+        required: false,
+        default: false,
+      },
+      infoTextMessage: {
+        required: false,
+      },
+      infoTextAlign: {
+        required: false,
+      },
+      colorMode: {
+        required: false,
+        default:'light'
+      },
+      alignItems:{
+        required: false,
+        default: 'horizontal'
+      },
+      options:{
+        required:true
+      },
+      value:{
+        required:false,
+        default:null
+      },
+    },
+    data() {
+        return {
+            selectedValue:null,
+            primaryColor:"white",
+            secondaryColor:"black",
+            inactiveColor:"grey6"
+        }
+    },
+    created(){
+        this.selectedValue=this.value
+        
+        if(this.colorMode=='dark'){
+            this.primaryColor=theme.colors.black
+            this.secondaryColor=theme.colors.white
+            this.inactiveColor=theme.colors.grey6
+        }else{
+            this.primaryColor=theme.colors.white
+            this.secondaryColor=theme.colors.black
+            this.inactiveColor=theme.colors.grey6
+        }
+    },
+    methods: {
+        selectItem(value){
+            if (this.disabled) {
+                return
+            }
+            this.selectedValue=value
+            this.$emit("on-switch-change", this.selectedValue)
+        },
+    },
+  }
+  </script>
+