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

package/package.json

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

package/src/App.vue

@@ -3,146 +3,75 @@
     <page-container>
       <br />
 
-      <iconWrapper name="bell"/>
       <modal backdrop="dark" :isLoading="false" :isOpen="true">
 
-      <modal backdrop="dark" :isLoading="false" :isOpen="false">
-
-        <main-table titleText="My Table">
-          <thead>
-            <tr>
-              <th>Column 1</th>
-              <th>Column 2</th>
-              <th>Column 3</th>
-              <div />
-            </tr>
-          </thead>
-          <tbody>
-            <tr> -->
-      <!-- <table-dropdown
-              :colSpan="3"
-              :tableItems="getDropdownValues()"
-              @toggle-dropdown-open="toggleDropdownOpen()"
-              @item-selected="onItemSelected({ item: $event, index })"
-              :isOpen="isDropdownOpen()"
-              :optionItems="itemOptions"
-              :optionsDisplay="['display_name', 'company_item_number', 'model']"
-            /> -->
-      <!-- <td>Test</td>
-              <div class="icons-container">
-                <three-dots :options="listOptions" :isLoading="false" />
-              </div>
-            </tr>
-          </tbody>
-        </main-table>
-      </modal>
-      <row-container>
-        <div v-for="(item, index) in markersArray" :key="item.index">
-          <project-marker
-            :activeLanguage="'en-us'"
-            :markerData="item"
-            :isLimitedPartner="false"
-            :isGroupSupport="false"
-            :isEditable="true"
-            :gettext="gettext"
-            :date="'23.07.2022'"
-            @editHandler="consoleLog('edit index ' + index)"
-            @deleteHandler="consoleLog('delete id ' + item.id)"
-          />
-        </div>
-      </row-container>
-      <br />
-      <iconCollection />
-      <br />
-      <toggle
-        @on-toggle-change="onInputChange($event)"
-        :isChecked="inputValue"
-        label="My Label Text"
-        infoTextMessage="This is my test message"
-        infoTextAlign="right"
-        labelAlign="right"
-        :disabled="false"
-      />
-<<<<<<< HEAD
-      <br />
->>>>>>> EPDM-5448
-      <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text size="10px" alignArrow="right" text="infoText ceci est le text"></info-text>
-        </InputAnnexContainer>
-      </input-number>
-      <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        :isError="true"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text :style="{'justify-self': 'end'}" size="12px" alignArrow="center" text="infoText ceci est le text">This is the tooltip text</info-text>
-        </InputAnnexContainer>
-      </input-number>
-      <br />
+    <div :style="{padding:'50px'}">
       
-  <p>InputText</p>
-   <input-text
-     placeholder="Company name"
-     :value="inputValue"
-     :isError="true"
-     errorMessage="This is my error message"
-     infoTextAlign="right" 
-     infoTextMessage="My info message"
-     label="Question 5"
-     alignItems="vertical"
-     inputWidth="250px"
-     minWidth="100px"
-   />
-   <br/>
       <input-number
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
-      />
-=======
-      <br /> -->
-      <!-- <iconCollection /> -->
-      <input-text
-        placeholder="Company name"
-        :value="inputValue"
-        @input-change="onInputChange($event)"
-        @input-blur="onInputBlur($event)"
-        type="password"
-      />
-      <br />
-<<<<<<< HEAD
-      <!-- <page-subtitle text="My Subtitle" infoText="My info Text" />
-      <spinner size="30px" />
-      <checkbox
-        label="Do you accept the Terms?"
-        :isChecked="true"
-        size="small"
-        :isDisabled="false"
-      /> -->
-      <!-- <external-button text="Click me!" minWidth="500px" /> -->
->>>>>>> master
-=======
+                  :value="value"
+                  :minNumber="0"
+                  unitName="mm"
+                  :numberPrecision="0"
+                  backgroundColor="transparent"
+                  inputHeight="34px"
+                  inputWidth="420px"
+                  textAlign="left"
+                  :isInteractive="true"
+                  :interactionStep="50"
+                  alignItems="horizontal"
+                  @on-input="value=$event"
+                  @input-change="changeHandler"
+                  @input-focus="focusHandler"
+                  @input-blur="blurHandler"
+                >
+                  <template v-slot:label>
+                    <div>
+                      Interactive Label
+                    </div>
+                  </template>
+                </input-number>
       <input-number
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
-      />
->>>>>>> master
+                  :value="value2"
+                  :minNumber="0"
+                  unitName="mm"
+                  :numberPrecision="0"
+                  backgroundColor="transparent"
+                  inputHeight="34px"
+                  inputWidth="420px"
+                  textAlign="left"
+                  :isInteractive="true"
+                  :interactionStep="50"
+                  alignItems="horizontal"
+                  @input-change="changeHandler"
+                  @input-focus="focusHandler"
+                  @input-blur="blurHandler"
+                  @on-input="inputHandler"
+                >
+                  <template v-slot:label>
+                    <div>
+                      Interactive Label
+                    </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>
   </ThemeProvider>
 </template>
@@ -151,15 +80,10 @@
 import { ThemeProvider } from "vue-styled-components"
 import theme from "./assets/theme"
 import styled from "vue-styled-components"
-import MainTable from "@/components/tables/mainTable"
-import ThreeDots from "@/components/threeDots"
-import Toggle from "@/components/inputs/toggle"
 import InputNumber from "@/components/inputs/inputNumber"
-import Checkbox from "@/components/inputs/checkbox"
-import PageSubtitle from "@/components/pageSubtitle"
-import Spinner from "@/components/spinner"
-import ExternalButton from "@/components/buttons/externalButton"
-import InputText from "@/components/inputs/inputText"
+import Select from "@/components/inputs/select"
+import Option from "@/components/inputs/select/option"
+import Modal from "@/components/modals/modal"
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -178,117 +102,31 @@ export default {
     ThemeProvider,
     PageContainer,
     InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    InputText,
-    ExternalButton,
-    iconWrapper,
     Modal,
-    ProjectMarker,
-    iconCollection,
-    RowContainer
+    Option,
+    Select
   },
-        {
-          value: 'option_4'
-        }
-      ],
-      itemOptions: [
-        {
-          display_name: 'Test 1',
-          company_item_number: '123',
-          model: 'BTB-2145 Long Text Long Text Long Text Long Text Long Text',
-          id: 1
-        },
-        {
-          display_name: 'Test 2',
-          company_item_number: '1234',
-          model: 'BTB-123',
-          id: 2
-        },
-        {
-          display_name: 'Test 3',
-          company_item_number: '12345',
-          model: 'BTB-543',
-          id: 3
-        },
-        {
-          display_name: 'Test 4',
-          company_item_number: '123456',
-          model: 'BTB-4930',
-          id: 4
-        }
-      ],
-      markersArray: [
-        {
-          id: 1180,
-          choice: 'project-on-hold',
-          translations: {
-            fr: { name: 'fr - Project on hold' },
-            'en-us': { name: 'Project on hold' },
-            'it-ch': { name: 'it-ch - Project on hold' },
-            'de-ch': { name: 'de-ch - Project on hold' },
-            'fr-be': { name: 'fr-be - Project on hold' }
-          },
-          color: '#D27CCA',
-          can_be_deleted: true
-        },
-        {
-          id: 266,
-          choice: 'transferred',
-          translations: {
-            'en-us': { name: 'Transferred' },
-            fr: { name: 'fr - Transferred' },
-            'de-ch': { name: 'de-ch - Transferred' },
-            'it-ch': { name: 'it-ch - Transferred' },
-            'fr-be': { name: 'fr-be - Transferred' }
-          },
-          color: '#20A4CA',
-          can_be_deleted: false
-        },
-        {
-          id: 267,
-          choice: 'sold',
-          translations: {
-            'en-us': { name: 'Sold' },
-            fr: { name: 'Vendu' },
-            'de-ch': { name: 'Verkauft' },
-            'it-ch': { name: 'Venduto' },
-            'fr-be': { name: 'Vendu' }
-          },
-          color: '#008351',
-          can_be_deleted: false
-        },
-        {
-          id: 268,
-          choice: 'lost',
-          translations: {
-            'en-us': { name: 'Lost' },
-            fr: { name: 'Perdu' },
-            'de-ch': { name: 'Verloren' },
-            'it-ch': { name: 'Perso' },
-            'fr-be': { name: 'Perdu' }
-          },
-          color: '#A52019',
-          can_be_deleted: false
-        },
-        {
-          id: 1181,
-          choice: 'project-created',
-          translations: {
-            fr: { name: 'Project created' },
-            'en-us': { name: 'Project created' },
-            'it-ch': { name: 'Project created' },
-            'de-ch': { name: 'Project created' },
-            'fr-be': { name: 'Project created' }
-          },
-          color: '#FDB813',
-          can_be_deleted: true
-        }
-      ]
+  data() {
+    return {
+      value:42,
+      value2:42,
+      companyName:"toto"
     }
   },
   methods: {
+    blurHandler(e){
+      console.log('blur',e)
+    },
+    changeHandler(e){
+      console.log('change',e)
+    },
+    focusHandler(e){
+      console.log('focus',e)
+    },
+    inputHandler(e){
+      this.value2=e
+      console.log('input',e)
+    },
     keydownHandler(e) {
       console.log('test', e)
     },

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: {
@@ -402,9 +407,6 @@ export default {
     hasLabelSlot(){
       return !!this.$slots.label
     },
-    computedSlotSize() {
-      return this.slotSize || this.$slots['default'][0].elm.clientWidth
-    }
   },
   methods: {
     onChangeHandler(event) {
@@ -525,10 +527,10 @@ export default {
       }
     },
     initInteraction(e) {
-      this.focusInput()
       window.addEventListener('mousemove', this.interact, false);
       window.addEventListener('mouseup', this.stopInteract, false);
       e.preventDefault() 
+      this.focusInput()
     },
     interact(e) {
       e.preventDefault() 

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