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

package/package.json

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

package/src/App.vue

@@ -54,11 +54,11 @@
                   </template>
                 </input-number>
                 <Select 
-                  hoverDropdown="true"
                   selectWidth="100%"
                   optionWidth="50%"
                   label="that is a label"
                   alignItems="vertical"
+                  colorMode="light"
                   >
                   <template #selector="{selectedValue}">
                     value selected: {{selectedValue}}
@@ -70,6 +70,66 @@
                     <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>
@@ -84,6 +144,8 @@ 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`
@@ -104,7 +166,8 @@ export default {
     InputNumber,
     Modal,
     Option,
-    Select
+    Select,
+    SwitchField
   },
   data() {
     return {

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

@@ -1,11 +1,18 @@
 <template>
-    <Container :selectWidth="selectWidth" v-click-outside="closeDropdown">
+    <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 :fontSize="fontSize">{{ label }}</input-label>
+            <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"
@@ -15,16 +22,25 @@
                 />
             </label-wrapper>
             <div>
-            <selectButton @click="toggleDropdown" @mouseenter="mouseEnterHandler">
+            <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"/>
+                    <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>
@@ -56,7 +72,8 @@
                 
   import styled from 'vue-styled-components'
   import InfoText from '../../infoText'
-  import icon from '@/components/icon'
+  import icon from '../../icon'
+
   const caretAttrs={isUp:Boolean}
   const Caret=styled('div', caretAttrs)`
   position:absolute;
@@ -64,14 +81,14 @@
   align-items:center;
   height:100%;
   right:15px;
-  top:2px
+  top:-2px
   transform: ${props=>!props.isUp?"rotate(180deg)":""};
-  transform-origin: 6px 17px;
+  transform-origin: center;
   `
 
   const labelAttrs = { fontSize: String }
   const InputLabel = styled('div', labelAttrs)`
-  color: ${(props) => props.theme.colors.eturnityGrey};
+  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;
 `
@@ -88,8 +105,8 @@ const LabelWrapper = styled.div`
   align-items: center;
   justify-content: start;
 `
-
-  const selectButton = styled('div')`
+const selectButtonAttrs={bgColor:String,fontColor:String,isActive:Boolean}
+const selectButton = styled('div',selectButtonAttrs)`
     position:relative;
     box-sizing: border-box;
     border:1px solid red;
@@ -101,24 +118,29 @@ const LabelWrapper = styled.div`
     display: flex;
     align-items: center;
     border:1px solid ${(props)=>props.theme.colors.grey4}
-
-  `
-  const selectDropdown = styled('div',inputProps)`
+    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: 1;
-    position:absolute
+    z-index:${props=>props.isActive?'2':'1'};
+    position:absolute;
     top:5px;
     padding:10px;
     border:1px solid ${(props)=>props.theme.colors.grey4}
     border-radius:4px;
-    background-color:white;
     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;
   `
@@ -167,6 +189,28 @@ const InputWrapper = styled('div', inputAttrs)`
         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'
         }
     },
   
@@ -186,29 +230,43 @@ const InputWrapper = styled('div', inputAttrs)`
     data() {
       return {
         selectedValue: null,
-        isDropdownOpen:false
+        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: {
     }

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

@@ -1,5 +1,5 @@
 <template>
-    <optionContainer @click="clickHandler">
+    <optionContainer :hoveredBgColor="hoveredBgColor || colorMode=='dark'?'#000000':'grey5'" @click="clickHandler">
         <slot></slot>
     </optionContainer>
   </template>
@@ -8,20 +8,19 @@
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
   import styled from 'vue-styled-components'
-  
-  const optionContainer = styled('div')`
+  const optionProps={hoveredBgColor:String}
+  const optionContainer = styled('div',optionProps)`
     display:flex;
-    height:40px;
     cursor: pointer;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding: 0px 15px;
+    padding: 12px 15px;
     gap: 14px;
     width:100%;
     box-sizing:inherit;
     &:hover{
-      background-color:${(props)=>props.theme.colors.grey5};
+      background-color:${(props) => props.theme.colors[props.hoveredBgColor]?props.theme.colors[props.hoveredBgColor]:props.hoveredBgColor};
     }
   `
   
@@ -32,6 +31,13 @@
       value: {
         required: true
       },
+      hoveredBgColor:{
+        required:false,
+      },
+      colorMode:{
+        required:false,
+        default:'light'
+      }
     },
   
     components: {optionContainer},
@@ -41,9 +47,6 @@
     },
     methods:{
         clickHandler(){
-            console.log('click from option component')
-            console.log(this.$parent)
-            console.log(this.$parent.$parent)
             this.$parent.$emit('option-selected',this.value)
         }
     },

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>
+