@eturnity/eturnity_reusable_components 1.2.14-QA03-2092022.4 → 1.2.15-0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.14-QA03-2092022.4",
+  "version": "1.2.15-0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -13,8 +13,7 @@
     "@vueform/slider": "1.0.5",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-styled-components": "^1.6.0",
-    "html-loader": "^0.5.5"
+    "vue-styled-components": "^1.6.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.2.8",
@@ -29,7 +28,8 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "html-loader": "^0.5.5"
   },
   "eslintConfig": {
     "root": true,

package/src/App.vue

@@ -2,54 +2,37 @@
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
       <br />
-      <modal backdrop="dark" :isLoading="false" :isOpen="true">
-        <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>
+      <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
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
-      />
+        placeholder="Enter distance"
+        :numberPrecision="2"
+        :value="inputValue"
+        @input-change="onInputChange($event)"
+        >unit</input-number
+      >
+      <br />
     </page-container>
   </ThemeProvider>
 </template>
@@ -58,16 +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 Modal from '@/components/modals/modal'
+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;
@@ -78,19 +60,13 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    MainTable,
-    ThreeDots,
-    Toggle,
     InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    ExternalButton,
-    Modal
+    infoText,
+    InputAnnexContainer
+    // TableDropdown,
   },
   data() {
     return {
-      num: 42,
       inputValue: null,
       checkedOption: 'button_1',
       question: {
@@ -149,9 +125,6 @@ export default {
     }
   },
   methods: {
-    keydownHandler(e) {
-      console.log('test', e)
-    },
     getTheme() {
       return theme
     },

package/src/assets/theme.js

@@ -1,34 +1,34 @@
 const theme = {
   colors: {
-    primary: '#48a2d0',
-    secondary: '#fdb813',
-    tertiary: '#d5d5d5',
-    black: '#353535',
-    yellow: '#fdb813',
-    darkGray: '#818181',
-    gray1: '#666',
-    mediumGray: '#d5d5d5',
-    lightGray: '#f2f2f2',
-    white: '#fff',
-    blue: '#48a2d0',
-    red: '#ff5656',
-    blue1: '#e4efff',
-    grey1: '#666',
-    grey2: '#c4c4c4',
-    grey3: '#b2b9c5',
-    grey4: '#dee2eb',
-    grey5: '#fafafa',
-    green: '#99db0c',
-    disabled: '#dfe1e1'
+    primary: "#48a2d0",
+    secondary: "#fdb813",
+    tertiary: "#d5d5d5",
+    black: "#353535",
+    yellow: "#fdb813",
+    darkGray: "#818181",
+    gray1: "#666",
+    mediumGray: "#d5d5d5",
+    lightGray: "#f2f2f2",
+    white: "#fff",
+    blue: "#48a2d0",
+    red: "#ff5656",
+    blue1: "#e4efff",
+    grey1: "#666",
+    grey2: "#c4c4c4",
+    grey3: "#b2b9c5",
+    grey4: "#ebeef4",
+    grey5: "#fafafa",
+    green: "#99db0c",
+    disabled: "#dfe1e1",
   },
   screen: {
-    mobileSmall: '345px',
-    mobile: '425px',
-    mobileLarge: '530px',
-    tablet: '768px',
-    tabletLarge: '950px'
+    mobileSmall: "345px",
+    mobile: "425px",
+    mobileLarge: "530px",
+    tablet: "768px",
+    tabletLarge: "950px",
   },
-  borderRadius: '4px'
+  borderRadius: "4px",
 }
 
 export default theme

package/src/components/icon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <wrapper :size="size">
+  <wrapper :isDisabled="isDisabled" :size="size">
     <icon-image
       :size="size"
       :color="color"
@@ -23,11 +23,12 @@
 
 import styled from 'vue-styled-components'
 
-const wrapperAttrs = { size: String }
+const wrapperAttrs = { isDisabled: Boolean, size: String }
 const Wrapper = styled('div', wrapperAttrs)`
   display: inline-block;
   width: ${(props) => props.size};
   height: ${(props) => props.size};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
 `
 const IconImageProps = { color: String, hoveredColor: String, size: String }
 const IconImage = styled('div', IconImageProps)`
@@ -50,6 +51,10 @@ export default {
     IconImage
   },
   props: {
+    isDisabled: {
+      required: false,
+      default: false
+    },
     name: {
       required: true
     },

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,16 +8,15 @@
         v-if="labelInfoText"
         :text="labelInfoText"
         borderColor="#ccc"
-        size="13"
+        size="14"
         :alignText="labelInfoAlign"
       />
     </label-wrapper>
     <input-wrapper>
       <input-container
-        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
-        :placeholder="displayedPlaceholder"
+        :placeholder="placeholder"
         :isError="isError"
         :inputWidth="inputWidth"
         :minWidth="minWidth"
@@ -31,10 +30,15 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
-        v-on="$listeners"
+        :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
@@ -77,11 +81,6 @@ import {
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
 
-const Container = styled.div`
-  width: 100%;
-  position: relative;
-`
-
 const inputProps = {
   isError: Boolean,
   hasUnit: Boolean,
@@ -91,8 +90,16 @@ const inputProps = {
   noBorder: Boolean,
   textAlign: String,
   fontSize: String,
-  fontColor: String
+  fontColor: String,
+  hasSlot: Boolean,
+  slotSize: String
 }
+
+const Container = styled('div', inputProps)`
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+  position: relative;
+`
+
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
@@ -100,8 +107,15 @@ const InputContainer = styled('input', inputProps)`
       : props.noBorder
       ? 'none'
       : '1px solid ' + props.theme.colors.mediumGray};
-  padding: ${(props) =>
-    props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
+  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')};
@@ -144,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
@@ -152,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};
@@ -180,21 +217,15 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
+    SlotContainer,
     InfoText
   },
-  inheritAttrs: false,
   data() {
     return {
       textInput: '',
       isFocused: false
     }
   },
-  computed: {
-    displayedPlaceholder() {
-      if (this.placeholder) return this.placeholder
-      return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
-    }
-  },
   props: {
     placeholder: {
       required: false,
@@ -275,6 +306,18 @@ export default {
     numberToStringEnabled: {
       required: false,
       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: {
@@ -308,7 +351,7 @@ export default {
           return num
         }
       })
-      let evaluated = eval(formatted.join('')) || ''
+      let evaluated = eval(formatted.join(''))
       evaluated = stringToNumber({
         value: evaluated,
         numberPrecision: this.numberPrecision

package/src/components/modals/modal/index.vue

@@ -3,18 +3,15 @@
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
     @click.native="onOutsideClose()"
-    :backdrop="backdrop"
   >
     <modal-container @click.stop>
-      <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
-      <content-container :visible="!isLoading">
-        <slot />
-      </content-container>
+      <spinner v-if="isLoading" size="50px" :fullWidth="true" />
       <close-button
         v-if="!hideClose"
         @click.native="onCloseModal()"
         class="close"
       />
+      <slot />
     </modal-container>
   </page-wrapper>
 </template>
@@ -31,12 +28,7 @@ import styled from 'vue-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
 
-const contentAttrs = { visible: Boolean }
-const ContentContainer = styled('div', contentAttrs)`
-  visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
-`
-
-const pageAttrs = { isOpen: Boolean, backdrop: String }
+const pageAttrs = { isOpen: Boolean }
 const PageWrapper = styled('div', pageAttrs)`
   position: fixed;
   display: grid;
@@ -44,10 +36,7 @@ const PageWrapper = styled('div', pageAttrs)`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: ${(props) =>
-    props.backdrop == 'dark'
-      ? 'rgba(0, 0, 0, 0.4)'
-      : 'rgba(255, 255, 255, 0.9)'};
+  background-color: rgba(255, 255, 255, 0.9);
   z-index: 99999;
   overflow: auto;
 
@@ -109,8 +98,7 @@ export default {
     PageWrapper,
     ModalContainer,
     CloseButton,
-    Spinner,
-    ContentContainer
+    Spinner
   },
   props: {
     isOpen: {
@@ -128,10 +116,6 @@ export default {
     hideClose: {
       required: false,
       default: false
-    },
-    backdrop: {
-      required: false,
-      default: 'white'
     }
   },
   methods: {
@@ -151,4 +135,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/modals/modal/modal.stories.js

@@ -26,6 +26,5 @@ export const Default = Template.bind({
   preventOutsideClose: true,
   isLoading: false,
   hideClose: false,
-  backdrop: 'dark',
-})
+});
 Default.args = {};

package/src/components/spinner/index.vue

@@ -7,7 +7,7 @@
       />
     </container>
   </spinner-container>
-  <container v-else :limitedToModal="limitedToModal">
+  <container v-else>
     <spinner-wrapper
       :size="size"
       :src="require('../../assets/icons/black_spinner.svg')"
@@ -18,7 +18,7 @@
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from 'vue-styled-components'
+import styled from "vue-styled-components"
 
 const SpinnerContainer = styled.div`
   position: fixed;
@@ -32,41 +32,34 @@ const SpinnerContainer = styled.div`
   justify-items: center;
   z-index: 100;
 `
-const containerAttrs = { limitedToModal: Boolean }
-const Container = styled('div', containerAttrs)`
+
+const Container = styled.div`
   display: grid;
   align-items: center;
   justify-items: center;
-  position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-  height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-  width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
 `
 
 const spinnerAttrs = { size: String }
-const SpinnerWrapper = styled('img', spinnerAttrs)`
-  width: ${(props) => (props.size ? props.size : '60px')};
+const SpinnerWrapper = styled("img", spinnerAttrs)`
+  width: ${(props) => (props.size ? props.size : "60px")};
 `
 
 export default {
-  name: 'spinner',
+  name: "spinner",
   components: {
     Container,
     SpinnerWrapper,
-    SpinnerContainer
+    SpinnerContainer,
   },
   props: {
     fullWidth: {
       required: false,
-      default: false
-    },
-    limitedToModal: {
-      required: false,
-      default: false
+      default: false,
     },
     size: {
       required: false,
-      default: null
-    }
-  }
+      default: null,
+    },
+  },
 }
-</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