@eturnity/eturnity_reusable_components 1.2.14 → 1.2.15-0

package/package.json

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

package/src/App.vue

@@ -1,74 +1,38 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <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>
       <br />
+      <input-number
+        :value="inputValue"
+        @input-change="inputValue = $event"
+        inputWidth="250px"
+        slotSize="50%"
+        ><InputAnnexContainer>
+          <span>123m2</span>
+          <info-text size="10" 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 size="15" text="infoText ceci est le text"></info-text>
+        </InputAnnexContainer>
+      </input-number>
       <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"
-      />
       <br />
       <input-number
         placeholder="Enter distance"
         :numberPrecision="2"
         :value="inputValue"
         @input-change="onInputChange($event)"
-      />
+        >unit</input-number
+      >
       <br />
-      <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" />
-      <icon name="Battery" />
-      <icon name="Bubble" color="red" hoveredColor="blue" size="60px" />
-      <icon name="Call" color="red" hoveredColor="blue" size="60px" />
-      <icon name="Camera" color="yellow" hoveredColor="green" size="60px" />
-      <icon name="House" color="red" hoveredColor="blue" size="20px" />
-      <icon name="House" color="red" hoveredColor="blue" size="40px" />
-      <icon name="House" color="red" hoveredColor="blue" size="80px" />
-      <icon name="House" color="red" hoveredColor="blue" size="120px" />
-      <icon name="Area_Active" color="red" hoveredColor="blue" size="150px" />
-      <icon name="Area_Active" color="red" hoveredColor="blue" size="120px" />
-      <icon name="Area_Active" color="red" hoveredColor="blue" size="80px" />
-      <icon name="Area_Active" color="red" hoveredColor="blue" size="40px" />
-      <collection />
     </page-container>
   </ThemeProvider>
 </template>
@@ -77,17 +41,15 @@
 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 icon from '@/components/icon'
-import collection from '@/components/icons/iconCollection'
+import infoText from '@/components/infoText'
 // import TableDropdown from "@/components/tableDropdown"
+const InputAnnexContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-gap: 10px;
+`
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -98,16 +60,9 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    MainTable,
-    ThreeDots,
-    Toggle,
     InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    ExternalButton,
-    collection,
-    icon
+    infoText,
+    InputAnnexContainer
     // TableDropdown,
   },
   data() {

package/src/assets/svgIcons/info.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 -1.04907e-06C14.3734 -8.41587e-07 16.6934 0.703787 18.6668 2.02236C20.6402 3.34094 22.1783 5.21509 23.0865 7.4078C23.9948 9.60051 24.2324 12.0133 23.7694 14.3411C23.3064 16.6689 22.1635 18.8071 20.4853 20.4853C18.807 22.1635 16.6688 23.3064 14.3411 23.7694C12.0133 24.2324 9.6005 23.9948 7.40779 23.0866C5.21508 22.1783 3.34093 20.6402 2.02236 18.6668C0.703782 16.6935 -6.97861e-06 14.3734 -6.77112e-06 12C-6.49289e-06 8.8174 1.26428 5.76515 3.51471 3.51472C5.76515 1.26428 8.8174 -1.32731e-06 12 -1.04907e-06ZM9.74999 19.81L14.25 19.81L14.25 10.81L9.74999 10.81L9.74999 19.81ZM12 8.69C12.445 8.69 12.88 8.55804 13.25 8.31081C13.62 8.06357 13.9084 7.71217 14.0787 7.30104C14.249 6.8899 14.2936 6.4375 14.2068 6.00105C14.1199 5.56459 13.9057 5.16368 13.591 4.84901C13.2763 4.53434 12.8754 4.32005 12.4389 4.23323C12.0025 4.14642 11.5501 4.19097 11.139 4.36127C10.7278 4.53157 10.3764 4.81996 10.1292 5.18997C9.88195 5.55998 9.74999 5.99499 9.74999 6.44C9.75079 7.03649 9.98809 7.60833 10.4099 8.03011C10.8317 8.4519 11.4035 8.68921 12 8.69Z" fill="#B2B9C5"/>
+</svg>

package/src/components/infoText/index.vue

@@ -1,6 +1,6 @@
 <template>
   <component-wrapper>
-    <icon-wrapper>
+    <icon-wrapper :size="size">
       <icon-img
         :isActive="showInfo"
         :size="size"
@@ -9,20 +9,7 @@
         @mouseenter="toggleShowInfo()"
         @mouseleave="toggleShowInfo()"
       >
-        <svg
-          class="img-icon"
-          :width="size"
-          :height="size"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            class="img-icon"
-            d="M20.4853 3.51469C18.2188 1.24823 15.2053 0 12 0C8.79469 0 5.78123 1.24823 3.51469 3.51469C1.24823 5.78123 0 8.79469 0 12C0 15.2053 1.24823 18.2188 3.51469 20.4853C5.78123 22.7518 8.79469 24 12 24C15.2053 24 18.2188 22.7518 20.4853 20.4853C22.7518 18.2188 24 15.2053 24 12C24 8.79469 22.7518 5.78123 20.4853 3.51469ZM12 3.28125C13.4216 3.28125 14.5781 4.4378 14.5781 5.85938C14.5781 7.28095 13.4216 8.4375 12 8.4375C10.5784 8.4375 9.42188 7.28095 9.42188 5.85938C9.42188 4.4378 10.5784 3.28125 12 3.28125ZM15.2812 19.6875H8.71875V18.2812H10.125V11.9167H8.71875V10.5104H13.875V18.2812H15.2812V19.6875Z"
-            fill="#D5D5D5"
-          />
-        </svg>
+        <icon :size="size + 'px'" name="info" :color="iconColor" />
       </icon-img>
       <text-overlay
         v-if="showInfo"
@@ -44,19 +31,16 @@
 //     size="20"
 //     alignText="right" // default is left
 // />
-
-import styled from "vue-styled-components"
-
-const IconWrapper = styled.div`
-  position: relative;
-`
+import theme from '@/assets/theme.js'
+import styled from 'vue-styled-components'
+import icon from '../icon'
 
 const textAttrs = { borderColor: String, alignText: String }
-const TextOverlay = styled("div", textAttrs)`
+const TextOverlay = styled('div', textAttrs)`
   position: absolute;
   top: 26px;
-  right: ${(props) => (props.alignText === "left" ? "-10px" : "inherit")};
-  left: ${(props) => (props.alignText === "left" ? "inherit" : "-10px")};
+  right: ${(props) => (props.alignText === 'left' ? '-10px' : 'inherit')};
+  left: ${(props) => (props.alignText === 'left' ? 'inherit' : '-10px')};
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
   width: max-content;
@@ -68,12 +52,12 @@ const TextOverlay = styled("div", textAttrs)`
   color: ${(props) => props.theme.colors.white};
 
   :before {
-    content: "";
+    content: '';
     background-color: ${(props) => props.theme.colors.black};
     position: absolute;
     top: 2px;
-    right: ${(props) => (props.alignText === "left" ? "-12px" : "inherit")};
-    left: ${(props) => (props.alignText === "left" ? "inherit" : "40px")};
+    right: ${(props) => (props.alignText === 'left' ? '-12px' : 'inherit')};
+    left: ${(props) => (props.alignText === 'left' ? 'inherit' : '40px')};
     height: 8px;
     width: 8px;
     transform-origin: center center;
@@ -82,18 +66,15 @@ const TextOverlay = styled("div", textAttrs)`
 `
 
 const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
-const IconImg = styled("div", iconAttrs)`
-  cursor: pointer;
-  height: ${(props) => props.size + "px"};
 
-  .img-icon {
-    fill: ${(props) =>
-      props.isActive
-        ? props.borderColor
-          ? props.borderColor
-          : props.theme.colors.secondary
-        : props.theme.colors.mediumGray};
-  }
+const IconWrapper = styled('div', iconAttrs)`
+  position: relative;
+  top: 1px;
+  height: ${(props) => props.size}px;
+`
+const IconImg = styled('div', iconAttrs)`
+  cursor: pointer;
+  height: ${(props) => props.size}px;
 `
 
 const ComponentWrapper = styled.div`
@@ -101,38 +82,39 @@ const ComponentWrapper = styled.div`
 `
 
 export default {
-  name: "info-text",
+  name: 'info-text',
   components: {
     IconWrapper,
     TextOverlay,
     ComponentWrapper,
     IconImg,
+    icon
   },
   props: {
     text: {
-      required: true,
+      required: true
     },
     borderColor: {
       required: false,
-      default: null,
+      default: null
     },
     size: {
       required: false,
-      default: "20",
+      default: '14'
     },
     alignText: {
       required: false,
-      default: "left", // "left" or "right"
-    },
+      default: 'left' // "left" or "right"
+    }
   },
   methods: {
     toggleShowInfo() {
       this.showInfo = !this.showInfo
 
       if (this.showInfo) {
-        document.addEventListener("click", this.clickOutside)
+        document.addEventListener('click', this.clickOutside)
       } else {
-        document.removeEventListener("click", this.clickOutside)
+        document.removeEventListener('click', this.clickOutside)
       }
     },
     clickOutside(event) {
@@ -140,12 +122,21 @@ export default {
         return
       }
       this.toggleShowInfo()
-    },
+    }
   },
   data() {
     return {
-      showInfo: false,
+      showInfo: false
     }
   },
+  computed: {
+    iconColor() {
+      return this.isActive
+        ? this.borderColor
+          ? this.borderColor
+          : theme.colors.secondary
+        : theme.colors.mediumGray
+    }
+  }
 }
-</script>
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <container>
+  <container :inputWidth="inputWidth">
     <label-wrapper v-if="labelText">
       <label-text>
         {{ labelText }}
@@ -8,7 +8,7 @@
         v-if="labelInfoText"
         :text="labelInfoText"
         borderColor="#ccc"
-        size="13"
+        size="14"
         :alignText="labelInfoAlign"
       />
     </label-wrapper>
@@ -30,9 +30,15 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
+        :hasSlot="hasSlot"
+        :slotSize="slotSize"
       />
+      <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
+        <slot></slot>
+      </slot-container>
+
       <unit-container
-        v-if="unitName && showLinearUnitName"
+        v-if="unitName && showLinearUnitName && !hasSlot"
         :hasLength="!!textInput.length"
         :isError="isError"
         >{{ unitName }}</unit-container
@@ -68,17 +74,12 @@
 //     :minNumber="0"
 //     fontColor="blue"
 // />
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 import {
   stringToNumber,
-  numberToString,
-} from "../../../helpers/numberConverter"
-import InfoText from "../../infoText"
-
-const Container = styled.div`
-  width: 100%;
-  position: relative;
-`
+  numberToString
+} from '../../../helpers/numberConverter'
+import InfoText from '../../infoText'
 
 const inputProps = {
   isError: Boolean,
@@ -90,30 +91,45 @@ const inputProps = {
   textAlign: String,
   fontSize: String,
   fontColor: String,
+  hasSlot: Boolean,
+  slotSize: String
 }
-const InputContainer = styled("input", inputProps)`
+
+const Container = styled('div', inputProps)`
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+  position: relative;
+`
+
+const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
-      ? "1px solid " + props.theme.colors.red
+      ? '1px solid ' + props.theme.colors.red
       : props.noBorder
-      ? "none"
-      : "1px solid " + props.theme.colors.mediumGray};
-  padding: ${(props) =>
-    props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
+      ? 'none'
+      : '1px solid ' + props.theme.colors.mediumGray};
+  padding-top: 11px;
+  padding-bottom: 11px;
+  padding-left: 10px;
+  padding-right: ${(props) =>
+    props.slotSize
+      ? 'calc(' + props.slotSize + ' + 10px)'
+      : props.hasUnit
+      ? '40px'
+      : '5px'};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
-  font-size: ${(props) => (props.fontSize ? props.fontSize : "13px")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   color: ${(props) =>
     props.isError
       ? props.theme.colors.red
       : props.fontColor
-      ? props.fontColor + " !important"
+      ? props.fontColor + ' !important'
       : props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
-  min-width: ${(props) => (props.minWidth ? props.minWidth : "unset")};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+  min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   background-color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey5 : "#fff"};
+    props.isDisabled ? props.theme.colors.grey5 : '#fff'};
   box-sizing: border-box;
 
   &::placeholder {
@@ -130,7 +146,7 @@ const InputWrapper = styled.span`
   position: relative;
 `
 
-const UnitContainer = styled("span", inputProps)`
+const UnitContainer = styled('span', inputProps)`
   border-left: 1px solid
     ${(props) =>
       props.isError
@@ -142,6 +158,7 @@ const UnitContainer = styled("span", inputProps)`
   right: 10px;
   top: 0;
   padding-left: 10px;
+  text-align: right;
   color: ${(props) =>
     props.isError
       ? props.theme.colors.red
@@ -150,6 +167,28 @@ const UnitContainer = styled("span", inputProps)`
       : props.theme.colors.mediumGray};
 `
 
+const SlotContainer = styled('span', inputProps)`
+  text-align: right;
+  border-left: 1px solid
+    ${(props) =>
+      props.isError
+        ? props.theme.colors.red
+        : props.hasLength
+        ? props.theme.colors.black
+        : props.theme.colors.mediumGray};
+  position: absolute;
+  width: ${(props) =>
+    props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
+  right: 10px;
+  top: 0;
+  padding-left: 10px;
+  color: ${(props) =>
+    props.isError
+      ? props.theme.colors.red
+      : props.hasLength
+      ? props.theme.colors.black
+      : props.theme.colors.mediumGray};
+`
 const ErrorMessage = styled.div`
   font-size: 14px;
   color: ${(props) => props.theme.colors.red};
@@ -169,7 +208,7 @@ const LabelText = styled.div`
 `
 
 export default {
-  name: "input-number",
+  name: 'input-number',
   components: {
     Container,
     InputContainer,
@@ -178,131 +217,144 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
-    InfoText,
+    SlotContainer,
+    InfoText
   },
   data() {
     return {
-      textInput: "",
-      isFocused: false,
+      textInput: '',
+      isFocused: false
     }
   },
   props: {
     placeholder: {
       required: false,
-      default: "",
+      default: ''
     },
     isError: {
       required: false,
-      default: false,
+      default: false
     },
     inputWidth: {
       required: false,
-      default: null,
+      default: null
     },
     minWidth: {
       required: false,
-      default: null,
+      default: null
     },
     value: {
       required: true,
-      default: null,
+      default: null
     },
     clearInput: {
       required: false,
-      default: false,
+      default: false
     },
     errorMessage: {
       required: false,
-      default: "Please insert a correct number",
+      default: 'Please insert a correct number'
     },
     numberPrecision: {
       required: false,
-      default: 0,
+      default: 0
     },
     unitName: {
       required: false,
-      default: "",
+      default: ''
     },
     showLinearUnitName: {
       required: false,
-      default: false,
+      default: false
     },
     disabled: {
       required: false,
-      default: false,
+      default: false
     },
     noBorder: {
       required: false,
-      default: false,
+      default: false
     },
     textAlign: {
       required: false,
-      default: "left",
+      default: 'left'
     },
     fontSize: {
       required: false,
-      default: "13px",
+      default: '13px'
     },
     labelText: {
       required: false,
-      default: null,
+      default: null
     },
     labelInfoText: {
       required: false,
-      default: null,
+      default: null
     },
     labelInfoAlign: {
       required: false,
-      default: "right",
+      default: 'right'
     },
     minNumber: {
       required: false,
-      default: null,
+      default: null
     },
     fontColor: {
       required: false,
-      default: null,
+      default: null
     },
     numberToStringEnabled: {
       required: false,
-      default: true,
+      default: true
+    },
+    slotSize: {
+      required: false
+    }
+  },
+  computed: {
+    hasSlot() {
+      console.log(this.$slots.default)
+      return !!this.$slots.default
     },
+    computedSlotSize() {
+      return this.slotSize || this.$slots['default'][0].elm.clientWidth
+    }
   },
   methods: {
     onChangeHandler(event) {
       if (isNaN(event)) {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
-      this.$emit("input-change", event)
+      this.$emit('input-change', event)
     },
     onEvaluateCode(val) {
       // function to perform math on the code
       // filter the string in case of any malicious content
-      let filtered = val.replace(/[^-()\d/*+.,]/g, "")
+      let filtered = val.replace(/[^-()\d/*+.,]/g, '')
       filtered = filtered.split(/([-+*/()])/)
       let formatted = filtered.map((item) => {
         if (
-          item === "+" ||
-          item === "-" ||
-          item === "*" ||
-          item === "/" ||
-          item === "(" ||
-          item === ")" ||
-          item === ""
+          item === '+' ||
+          item === '-' ||
+          item === '*' ||
+          item === '/' ||
+          item === '(' ||
+          item === ')' ||
+          item === ''
         ) {
           return item
         } else {
           let num = stringToNumber({
             value: item,
-            numberPrecision: false,
+            numberPrecision: false
           })
           return num
         }
       })
-      let evaluated = eval(formatted.join(""))
+      let evaluated = eval(formatted.join(''))
       evaluated = stringToNumber({
         value: evaluated,
-        numberPrecision: this.numberPrecision,
+        numberPrecision: this.numberPrecision
       })
       return evaluated
     },
@@ -315,7 +367,7 @@ export default {
         this.textInput = numberToString({
           value:
             evaluatedInput && value.length ? evaluatedInput : this.minNumber,
-          numberPrecision: this.numberPrecision,
+          numberPrecision: this.numberPrecision
         })
       }
       let adjustedMinValue =
@@ -323,8 +375,8 @@ export default {
           ? value
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ""
-      this.$emit("input-blur", adjustedMinValue)
+          : ''
+      this.$emit('input-blur', adjustedMinValue)
     },
     focusInput() {
       if (this.disabled) {
@@ -341,38 +393,38 @@ export default {
           ? value
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ""
+          : ''
       if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
         let input = this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision,
+              numberPrecision: this.numberPrecision
             })
           : adjustedMinValue
-        let unit = this.showLinearUnitName ? "" : this.unitName
-        return input + " " + unit
+        let unit = this.showLinearUnitName ? '' : this.unitName
+        return input + ' ' + unit
       } else if (!adjustedMinValue && adjustedMinValue !== 0) {
-        return ""
+        return ''
       } else {
         return this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision,
+              numberPrecision: this.numberPrecision
             })
           : adjustedMinValue
       }
-    },
+    }
   },
   created() {
     if (this.value) {
       this.textInput = numberToString({
         value: this.value,
-        numberPrecision: this.numberPrecision,
+        numberPrecision: this.numberPrecision
       })
     } else if (this.minNumber !== null) {
       this.textInput = numberToString({
         value: this.minNumber,
-        numberPrecision: this.numberPrecision,
+        numberPrecision: this.numberPrecision
       })
     }
   },
@@ -380,9 +432,9 @@ export default {
     clearInput: function (value) {
       if (value) {
         // If the value is typed, then we should clear the textInput on Continue
-        this.textInput = ""
+        this.textInput = ''
       }
-    },
-  },
+    }
+  }
 }
-</script>
+</script>

package/src/helpers/numberConverter.js

@@ -4,6 +4,9 @@ export const stringToNumber = ({
   allowNegative
 }) => {
   // This is for saving. It converts our input string to a readable number
+  if (value === undefined) {
+    value = ''
+  }
   let newVal = value.toString()
   const selectedLang = localStorage.getItem('lang')
   // The first replace will replace not allowed characters with a blank