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

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.7",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -53,6 +53,23 @@
                     </div>
                   </template>
                 </input-number>
+                <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> 
     </div>
       </modal>
     </page-container>
@@ -64,6 +81,8 @@ 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 TableDropdown from "@/components/tableDropdown"
 
@@ -83,12 +102,15 @@ export default {
     ThemeProvider,
     PageContainer,
     InputNumber,
-    Modal
+    Modal,
+    Option,
+    Select
   },
   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,217 @@
+<template>
+    <Container :selectWidth="selectWidth" v-click-outside="closeDropdown">
+        <input-wrapper
+        :hasLabel="!!label && label.length > 0"
+        :alignItems="alignItems"
+        >
+            <label-wrapper v-if="label">
+                <input-label :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" @mouseenter="mouseEnterHandler">
+                <slot name="selector" :selectedValue="selectedValue"></slot>
+                <Caret :isUp="isDropdownOpen">
+                    <icon name="arrow_up" size="12px"/>
+                </Caret>
+            </selectButton>
+            <DropdownWrapper>
+            <selectDropdown 
+                v-if="isDropdownOpen"
+                :optionWidth="optionWidth"
+                @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 '@/components/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: 6px 17px;
+  `
+
+  const labelAttrs = { fontSize: String }
+  const InputLabel = styled('div', labelAttrs)`
+  color: ${(props) => props.theme.colors.eturnityGrey};
+  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 selectButton = styled('div')`
+    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}
+
+  `
+  const selectDropdown = styled('div',inputProps)`
+    box-sizing: border-box;
+    z-index: 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%')};
+  `
+  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'
+        }
+    },
+  
+    components: {
+        selectButton,
+        selectDropdown,
+        Container,
+        InputLabel,
+        LabelWrapper,
+        InfoText,
+        InputWrapper,
+        DropdownWrapper,
+        icon,
+        Caret
+    },
+  
+    data() {
+      return {
+        selectedValue: null,
+        isDropdownOpen:false
+      }
+    },
+    created(){
+        this.selectedValue=this.value
+    },
+    methods:{
+        toggleDropdown(){
+            this.isDropdownOpen=!this.isDropdownOpen
+        },
+        closeDropdown(){
+            this.isDropdownOpen=false
+        },
+        optionSelected(e){
+            this.selectedValue=e
+            this.closeDropdown()
+            this.$emit('input-change',e)
+        },
+        mouseEnterHandler(){
+            if(this.hoverDropdown){
+                this.isDropdownOpen=true
+            }
+        },
+    },
+    computed: {
+    }
+  }
+  </script>
+ 

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

@@ -0,0 +1,54 @@
+<template>
+    <optionContainer @click="clickHandler">
+        <slot></slot>
+    </optionContainer>
+  </template>
+  
+  <script>
+//   import selectButton from './selectButton'
+//   import selectDropdown from './selectDropDown'
+  import styled from 'vue-styled-components'
+  
+  const optionContainer = styled('div')`
+    display:flex;
+    height:40px;
+    cursor: pointer;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 15px;
+    gap: 14px;
+    width:100%;
+    box-sizing:inherit;
+    &:hover{
+      background-color:${(props)=>props.theme.colors.grey5};
+    }
+  `
+  
+  export default {
+    name: 'RCoption',
+  
+    props: {
+      value: {
+        required: true
+      },
+    },
+  
+    components: {optionContainer},
+  
+    data() {
+      return {}
+    },
+    methods:{
+        clickHandler(){
+            console.log('click from option component')
+            console.log(this.$parent)
+            console.log(this.$parent.$parent)
+            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"
+}
+