@eturnity/eturnity_reusable_components 1.2.36 → 1.2.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.36",
+  "version": "1.2.38",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -4,82 +4,87 @@
       <br />
 
       <modal v-if="true" backdrop="dark" :isLoading="false" :isOpen="true">
+        <div :style="{ padding: '50px' }">
+          <input-number
+            :value="value"
+            :minNumber="0"
+            unitName="mm"
+            :numberPrecision="0"
+            backgroundColor="transparent"
+            borderColor="eturnityGrey"
+            inputHeight="34px"
+            inputWidth="420px"
+            textAlign="left"
+            :isInteractive="true"
+            :interactionStep="1"
+            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>
 
-    <div :style="{padding:'50px'}">
-      
-      <input-number
-                  :value="value"
-                  :minNumber="0"
-                  unitName="mm"
-                  :numberPrecision="0"
-                  backgroundColor="transparent"
-                  borderColor="eturnityGrey"
-                  inputHeight="34px"
-                  inputWidth="420px"
-                  textAlign="left"
-                  :isInteractive="true"
-                  :interactionStep="1"
-                  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>
+          <SwitchField
+            @on-switch-change="onInputChange($event)"
+            :options="[
+              { value: 0, content: 'zero' },
+              { value: 1, content: 'one' },
+              { value: 2, content: 'two' }
+            ]"
+            :value="value"
+            label="label"
+            toggleColor="red"
+            size="large"
+            backgroundColor="blue"
+            labelAlign="left"
+            fontColor="black"
+            :disabled="false"
+          />
 
-                <SwitchField
-                  @on-switch-change="onInputChange($event)"
-                  :options="[{value:0,content:'zero'},{value:1,content:'one'},{value:2,content:'two'}]"
-                  :value="value"
-                  label="label"
-                  toggleColor="red"
-                  size="large"
-                  backgroundColor="blue"
-                  labelAlign="left"
-                  fontColor="black"
-                  :disabled="false"
-                />
-               
-                <Select 
-                  :value="value"
-                  selectWidth="100%"
-                  optionWidth="50%"
-                  label="that is a label"
-                  alignItems="vertical"
-                  colorMode="dark"
-                  @input-change="value=$event"
-                  @search-change="searchValue=$event"
-                  >
-                  <template #selector="{selectedValue}">
-                    value selected: {{selectedValue}}
-                  </template>
-                  <template #dropdown>
-                    <Option v-for="opt in filteredOptionList" :key="opt.id" :value="opt.val">{{ opt.lookFor }}</Option>
-                  </template>
-                </Select> 
-                {{filteredOptionList  }}
-                </div>
+          <Select
+            :value="value"
+            selectWidth="100%"
+            optionWidth="50%"
+            label="that is a label"
+            alignItems="vertical"
+            colorMode="dark"
+            @input-change="value = $event"
+            @search-change="searchValue = $event"
+          >
+            <template #selector="{ selectedValue }">
+              value selected: {{ selectedValue }}
+            </template>
+            <template #dropdown>
+              <Option
+                v-for="opt in filteredOptionList"
+                :key="opt.id"
+                :value="opt.val"
+                >{{ opt.lookFor }}</Option
+              >
+            </template>
+          </Select>
+          {{ filteredOptionList }}
+        </div>
       </modal>
-      <iconCollection/>
+      <iconCollection />
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-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 SwitchField from "@/components/inputs/switchField"
-import Option from "@/components/inputs/select/option"
-import Modal from "@/components/modals/modal"
- import iconCollection from "@/components/icon/iconCollection"
+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 SwitchField from '@/components/inputs/switchField'
+import Option from '@/components/inputs/select/option'
+import Modal from '@/components/modals/modal'
+import iconCollection from '@/components/icon/iconCollection'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -106,36 +111,38 @@ export default {
   },
   data() {
     return {
-      value:42,
-      value2:42,
-      companyName:"toto",
-      optionList:[
-        {id:'a',val:'A',lookFor:'babababa'},
-        {id:'b',val:'B',lookFor:'abab'},
-        {id:'c',val:'C',lookFor:'ccc'},
-        {id:'d',val:'D',lookFor:'ddd'}
+      value: 42,
+      value2: 42,
+      companyName: 'toto',
+      optionList: [
+        { id: 'a', val: 'A', lookFor: 'babababa' },
+        { id: 'b', val: 'B', lookFor: 'abab' },
+        { id: 'c', val: 'C', lookFor: 'ccc' },
+        { id: 'd', val: 'D', lookFor: 'ddd' }
       ],
-      searchValue:""
+      searchValue: ''
     }
   },
-  computed:{
-    filteredOptionList(){
-     return this.optionList.filter(opt=>opt.lookFor.includes(this.searchValue))
+  computed: {
+    filteredOptionList() {
+      return this.optionList.filter((opt) =>
+        opt.lookFor.includes(this.searchValue)
+      )
     }
   },
   methods: {
-    blurHandler(e){
-      console.log('blur',e)
+    blurHandler(e) {
+      console.log('blur', e)
     },
-    changeHandler(e){
-      console.log('change',e)
+    changeHandler(e) {
+      console.log('change', e)
     },
-    focusHandler(e){
-      console.log('focus',e)
+    focusHandler(e) {
+      console.log('focus', e)
     },
-    inputHandler(e){
-      this.value2=e
-      console.log('input',e)
+    inputHandler(e) {
+      this.value2 = e
+      console.log('input', e)
     },
     keydownHandler(e) {
       console.log('test', e)

package/src/assets/svgIcons/dislike.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.40533 12.7951L9.87682 9.32359C10.1087 9.09174 10.2403 8.77216 10.2403 8.44005V2.18009C10.2403 1.4908 9.6763 0.92684 8.98702 0.92684H3.34741C2.84611 0.92684 2.39494 1.22762 2.19442 1.68505L0.151629 6.45366C-0.374734 7.69437 0.53387 9.07294 1.88111 9.07294H5.42153L4.82624 11.9429C4.76358 12.2562 4.85757 12.5758 5.08315 12.8013C5.45286 13.1648 6.04189 13.1648 6.40533 12.7951ZM12.7468 0.92684C12.0575 0.92684 11.4935 1.4908 11.4935 2.18009V7.19307C11.4935 7.88236 12.0575 8.44632 12.7468 8.44632C13.436 8.44632 14 7.88236 14 7.19307V2.18009C14 1.4908 13.436 0.92684 12.7468 0.92684Z"/>
+</svg>

package/src/assets/svgIcons/external_icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+	<path d="m12.6 14h-11.4c-0.7 0-1.3-0.6-1.3-1.3v-11.4c0-0.7 0.6-1.3 1.3-1.3h4.8v2h-3.1c-0.5 0-1 0.4-1 0.9v8.3c0 0.4 0.5 0.8 1 0.8h8.3c0.4 0 0.9-0.4 0.9-0.9v-3.1h2v4.7c-0.2 0.7-0.7 1.3-1.5 1.3z"/>
+	<path d="m7.9 0h6v6z"/>
+	<path d="m5.7 9.8l-1.4-1.5 7.1-7.1 1.4 1.4z"/>
+</svg>

package/src/assets/svgIcons/like.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.59467 1.20492L4.12318 4.67641C3.89133 4.90826 3.75974 5.22784 3.75974 5.55995V11.8199C3.75974 12.5092 4.3237 13.0732 5.01298 13.0732H10.6526C11.1539 13.0732 11.6051 12.7724 11.8056 12.3149L13.8484 7.54634C14.3747 6.30563 13.4661 4.92706 12.1189 4.92706H8.57847L9.17376 2.05713C9.23642 1.74381 9.14243 1.42424 8.91685 1.19865C8.54714 0.835211 7.95811 0.835211 7.59467 1.20492V1.20492ZM1.25325 13.0732C1.94253 13.0732 2.50649 12.5092 2.50649 11.8199V6.80693C2.50649 6.11764 1.94253 5.55368 1.25325 5.55368C0.563961 5.55368 0 6.11764 0 6.80693V11.8199C0 12.5092 0.563961 13.0732 1.25325 13.0732Z"/>
+</svg>

package/src/assets/theme.js

@@ -9,7 +9,7 @@ const theme = {
     gray1: '#666',
     mediumGray: '#d5d5d5',
     lightGray: '#f2f2f2',
-    white: '#fff',
+    white: '#ffffff',
     blue: '#48a2d0',
     red: '#ff5656',
     blue1: '#e4efff',

package/src/components/buttons/buttonIcon/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <page-container>
+    <button-wrapper
+      :isDisabled="isDisabled"
+      :minWidth="minWidth"
+      :customColor="customColor"
+      :height="height"
+    >
+      <icon-container :width="height">
+        <icon
+            :name="iconName"
+            :color="fontColor ? fontColor : theme.colors.white"
+            size="14px"
+        />
+      </icon-container>
+      <button-container :fontSize="fontSize" :fontColor="fontColor">{{ text }}</button-container>
+    </button-wrapper>
+  </page-container>
+</template>
+
+<script>
+// import buttonIcon from "@eturnity/eturnity_reusable_components/src/components/buttons/buttonIcon"
+// <button-icon
+//   :isDisabled="true"
+//   text="Click Me"
+//   minWidth="300px"
+//   customColor="#000"
+//   iconName="external_icon"
+//   fontColor="white"
+//   fontSize="12px"
+//   height="24px"
+// />
+
+import Icon from "../../icon"
+import styled from "vue-styled-components"
+import Theme from "@/assets/theme";
+
+const PageContainer = styled.div``
+
+const ButtonAttrs = {
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: String,
+  height: String
+}
+const ButtonWrapper = styled("div", ButtonAttrs)`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  background-color: ${(props) =>
+    props.isDisabled
+      ? props.theme.colors.disabled
+      : props.customColor
+      ? props.customColor
+      : props.theme.colors.yellow};
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  user-select: none;
+  border-radius: 4px;
+  overflow: hidden;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : "initial")};
+  height: ${(props) => props.height};
+
+  &:hover {
+    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
+  }
+
+  &:active {
+    opacity: 1;
+  }
+`
+
+const ButtonContainerAttrs = {
+  fontSize: String,
+  fontColor: String
+}
+const ButtonContainer = styled('div', ButtonContainerAttrs)`
+  font-size: ${(props) => props.fontSize};
+  color: ${(props) => props.fontColor ? props.fontColor : props.theme.colors.white};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 15px;
+`
+
+const IconContainerAttrs = {
+  width: String
+}
+const IconContainer = styled('div', IconContainerAttrs)`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  width: ${(props) => props.width};
+  background: ${(props) => props.theme.colors.white + '1a'};
+`
+
+export default {
+  name: "button-icon",
+  components: {
+    PageContainer,
+    ButtonContainer,
+    ButtonWrapper,
+    IconContainer,
+    Icon
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    text: {
+      required: true
+    },
+    minWidth: {
+      required: false,
+      default: null
+    },
+    customColor: {
+      required: false,
+      default: null
+    },
+    iconName: {
+      required: true
+    },
+    fontColor: {
+      required: false,
+      default: null
+    },
+    fontSize: {
+      required: false,
+      default: '13px'
+    },
+    height: {
+      required: false,
+      default: '30px'
+    }
+  },
+  data () {
+    return {
+      theme: Theme
+    }
+  }
+}
+</script>

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

@@ -1,9 +1,13 @@
 <template>
   <container :inputWidth="inputWidth" :alignItems="alignItems">
-    <label-slot-wrapper v-if="hasLabelSlot" :isInteractive="isInteractive" @mousedown="initInteraction">
+    <label-slot-wrapper
+      v-if="hasLabelSlot"
+      :isInteractive="isInteractive"
+      @mousedown="initInteraction"
+    >
       <slot name="label"></slot>
     </label-slot-wrapper>
-    
+
     <label-wrapper v-if="labelText">
       <label-text :labelFontColor="labelFontColor">
         {{ labelText }}
@@ -108,23 +112,23 @@ const inputProps = {
   textAlign: String,
   fontSize: String,
   fontColor: String,
-  backgroundColor:String,
+  backgroundColor: String,
   hasSlot: Boolean,
   hasLabelSlot: Boolean,
   slotSize: String,
-  inputHeight:String,
-  isInteractive:Boolean,
-  alignItems:String,
-  labelFontColor:String,
-  borderColor:String
+  inputHeight: String,
+  isInteractive: Boolean,
+  alignItems: String,
+  labelFontColor: String,
+  borderColor: String
 }
 
 const Container = styled('div', inputProps)`
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   position: relative;
-  display:grid;
+  display: grid;
   grid-template-columns: ${(props) =>
-    props.alignItems === "vertical" ? "1fr" : "auto 1fr"};
+    props.alignItems === 'vertical' ? '1fr' : 'auto 1fr'};
 `
 
 const InputContainer = styled('input', inputProps)`
@@ -133,18 +137,16 @@ const InputContainer = styled('input', inputProps)`
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
-      : props.borderColor ?
-      props.theme.colors[props.borderColor]
-      ? '1px solid ' + props.theme.colors[props.borderColor]
-      : '1px solid ' + props.borderColor
+      : props.borderColor
+      ? props.theme.colors[props.borderColor]
+        ? '1px solid ' + props.theme.colors[props.borderColor]
+        : '1px solid ' + props.borderColor
       : '1px solid ' + props.theme.colors.grey4};
   padding-top: 11px;
   padding-bottom: 11px;
   padding-left: 10px;
   padding-right: ${(props) =>
-    props.slotSize
-      ? 'calc(' + props.slotSize + ' + 10px)'
-      : '5px'};
+    props.slotSize ? 'calc(' + props.slotSize + ' + 10px)' : '5px'};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
@@ -157,10 +159,12 @@ const InputContainer = styled('input', inputProps)`
       : props.fontColor
       ? props.fontColor + ' !important'
       : props.theme.colors.black};
-  background-color:${(props) => props.backgroundColor
-    ? props.backgroundColor+' !important'
-    : props.theme.colors.white};
-  width: ${(props) => (props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%')};
+  background-color: ${(props) =>
+    props.backgroundColor
+      ? props.backgroundColor + ' !important'
+      : props.theme.colors.white};
+  width: ${(props) =>
+    props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   background-color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
@@ -198,7 +202,7 @@ const UnitContainer = styled('span', inputProps)`
         : props.theme.colors.mediumGray};
   position: absolute;
   right: 10px;
-  top: 0;
+  top: 10px;
   padding-left: 10px;
   text-align: right;
   color: ${(props) =>
@@ -232,23 +236,26 @@ const SlotContainer = styled('span', inputProps)`
       : props.theme.colors.mediumGray};
 `
 
-const LabelWrapper = styled('div',inputProps)`
+const LabelWrapper = styled('div', inputProps)`
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 8px;
-  cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
+  cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
 `
-const LabelSlotWrapper = styled('div',inputProps)`
+const LabelSlotWrapper = styled('div', inputProps)`
   display: flex;
   gap: 10px;
-  align-items:center;
-  cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
+  align-items: center;
+  cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
 `
 
-const LabelText = styled('div',inputProps)`
+const LabelText = styled('div', inputProps)`
   font-size: 13px;
-  color: ${(props) => props.theme.colors[props.labelFontColor]?props.theme.colors[props.labelFontColor]:props.labelFontColor};
+  color: ${(props) =>
+    props.theme.colors[props.labelFontColor]
+      ? props.theme.colors[props.labelFontColor]
+      : props.labelFontColor};
   font-weight: 700;
 `
 
@@ -265,7 +272,7 @@ export default {
     LabelText,
     InfoText,
     Icon,
-    SlotContainer,
+    SlotContainer
   },
   inheritAttrs: false,
   data() {
@@ -306,7 +313,7 @@ export default {
     },
     alignItems: {
       required: false,
-      default: "vertical",
+      default: 'vertical'
     },
     errorMessage: {
       required: false,
@@ -332,8 +339,8 @@ export default {
       required: false,
       default: false
     },
-    borderColor:{
-      required:false,
+    borderColor: {
+      required: false
     },
     textAlign: {
       required: false,
@@ -347,9 +354,9 @@ export default {
       required: false,
       default: false
     },
-    interactionStep:{
-      required:false,
-      default:1
+    interactionStep: {
+      required: false,
+      default: 1
     },
     labelText: {
       required: false,
@@ -401,9 +408,9 @@ export default {
     slotSize: {
       required: false
     },
-    labelFontColor:{
-      required:false,
-      default:'eturnityGrey'
+    labelFontColor: {
+      required: false,
+      default: 'eturnityGrey'
     }
   },
   computed: {
@@ -414,9 +421,9 @@ export default {
     hasSlot() {
       return !!this.$slots.default
     },
-    hasLabelSlot(){
+    hasLabelSlot() {
       return !!this.$slots.label
-    },
+    }
   },
   methods: {
     onChangeHandler(event) {
@@ -465,13 +472,13 @@ export default {
       }
       return evaluated
     },
-    onInput(value){
+    onInput(value) {
       let evaluatedVal
-      try{
-       evaluatedVal=this.onEvaluateCode(value)
-      }finally {
-        if(evaluatedVal){
-            this.$emit('on-input',evaluatedVal)
+      try {
+        evaluatedVal = this.onEvaluateCode(value)
+      } finally {
+        if (evaluatedVal) {
+          this.$emit('on-input', evaluatedVal)
         }
       }
     },
@@ -543,31 +550,30 @@ export default {
       }
     },
     initInteraction(e) {
-      window.addEventListener('mousemove', this.interact, false);
-      window.addEventListener('mouseup', this.stopInteract, false);
-      e.preventDefault() 
+      window.addEventListener('mousemove', this.interact, false)
+      window.addEventListener('mouseup', this.stopInteract, false)
+      e.preventDefault()
       this.focusInput()
     },
     interact(e) {
-      e.preventDefault() 
-      let value=parseFloat(this.value || 0)
-      console.log("value",value)
-      value+=parseFloat(this.interactionStep)*parseInt(e.movementX)
-      this.$emit('on-input',value)
+      e.preventDefault()
+      let value = parseFloat(this.value || 0)
+      console.log('value', value)
+      value += parseFloat(this.interactionStep) * parseInt(e.movementX)
+      this.$emit('on-input', value)
 
-      this.textInput=numberToString({
-          value:
-          value && value.length ? value : this.minNumber,
-          numberPrecision: this.numberPrecision
-        })
+      this.textInput = numberToString({
+        value: value && value.length ? value : this.minNumber,
+        numberPrecision: this.numberPrecision
+      })
       //this.value=value
     },
     stopInteract(e) {
-      e.preventDefault() 
-      window.removeEventListener('mousemove', this.interact, false);
-      window.removeEventListener('mouseup', this.stopInteract, false);
+      e.preventDefault()
+      window.removeEventListener('mousemove', this.interact, false)
+      window.removeEventListener('mouseup', this.stopInteract, false)
       this.blurInput()
-    },
+    }
   },
   created() {
     if (this.value) {

package/src/components/buttons/externalButton/index.vue

@@ -1,101 +0,0 @@
-<template>
-  <page-container>
-    <button-wrapper
-      :isDisabled="isDisabled"
-      :minWidth="minWidth"
-      :customColor="customColor"
-    >
-      <icon-container>
-        <icon-element
-          :src="require('../../../assets/icons/external_icon.svg')"
-        />
-      </icon-container>
-      <button-container>{{ text }}</button-container>
-    </button-wrapper>
-  </page-container>
-</template>
-
-<script>
-// import ExternalButton from "@eturnity/eturnity_reusable_components/src/components/buttons/externalButton"
-// <main-button
-//   :isDisabled="true"
-//   text="Click Me"
-//   minWidth="300px"
-//   customColor="#000"
-// />
-
-import styled from "vue-styled-components"
-
-const PageContainer = styled.div``
-
-const ButtonAttrs = {
-  isDisabled: Boolean,
-  minWidth: String,
-  customColor: String,
-}
-const ButtonWrapper = styled("div", ButtonAttrs)`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  background-color: ${(props) =>
-    props.isDisabled
-      ? props.theme.colors.disabled
-      : props.customColor
-      ? props.customColor
-      : props.theme.colors.yellow};
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
-  user-select: none;
-  border-radius: 4px;
-  min-width: ${(props) => (props.minWidth ? props.minWidth : "initial")};
-
-  &:hover {
-    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
-  }
-
-  &:active {
-    opacity: 1;
-  }
-`
-
-const ButtonContainer = styled.div`
-  padding: 7px 15px;
-  font-size: 13px;
-  color: ${(props) => props.theme.colors.white};
-  text-align: center;
-`
-
-const IconContainer = styled.div`
-  display: grid;
-  align-items: center;
-  justify-items: center;
-`
-
-const IconElement = styled.img``
-
-export default {
-  name: "external-button",
-  components: {
-    PageContainer,
-    ButtonContainer,
-    ButtonWrapper,
-    IconContainer,
-    IconElement,
-  },
-  props: {
-    isDisabled: {
-      required: false,
-      default: false,
-    },
-    text: {
-      required: true,
-    },
-    minWidth: {
-      required: false,
-      default: null,
-    },
-    customColor: {
-      required: false,
-      default: null,
-    },
-  },
-}
-</script>