@eturnity/eturnity_reusable_components 1.2.21 → 1.2.22-3d-master.4

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

@@ -1,7 +1,7 @@
 <template>
   <component-wrapper :layout="layout">
     <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value">
+      <label-container :size="size" :isDisabled="item.disabled">
         <radio
           type="radio"
           :value="selectedOption"
@@ -12,7 +12,7 @@
         />
         <span class="checkmark"></span>
         <label-text :isDisabled="item.disabled">{{ item.label }}</label-text>
-        <info-text v-if="item.infoText" :text="item.infoText" size="16" />
+        <info-text v-if="item.infoText" :text="item.infoText" size="16px" />
       </label-container>
       <image-container v-if="item.img">
         <radio-image :src="item.img" />
@@ -76,6 +76,14 @@ const Radio = styled.input`
   cursor: pointer;
   height: 0;
   width: 0;
+
+  &:checked ~ .checkmark {
+    background-color: white;
+
+    &:after {
+      display: block;
+    }
+  }
 `
 
 const RadioWrapper = styled.div`
@@ -83,22 +91,22 @@ const RadioWrapper = styled.div`
   grid-gap: 10px;
 `
 
-const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean }
+const containerProps = { size: String, isDisabled: Boolean }
 const LabelContainer = styled("label", containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-gap: 15px;
   align-items: center;
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
   position: relative;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: ${(props) =>
     props.size === "large"
       ? "16px"
       : props.size === "medium"
-        ? "13px"
-        : "10px"};
+      ? "13px"
+      : "10px"};
   user-select: none;
   flex: auto;
   align-self: baseline;
@@ -108,14 +116,14 @@ const LabelContainer = styled("label", containerProps)`
       props.size === "large"
         ? "23px"
         : props.size === "medium"
-          ? "16px"
-          : "12px"};
+        ? "16px"
+        : "12px"};
     width: ${(props) =>
       props.size === "large"
         ? "23px"
         : props.size === "medium"
-          ? "16px"
-          : "12px"};
+        ? "16px"
+        : "12px"};
     background-color: #fff;
     border-radius: 100%;
     border: 1px solid ${(props) => props.theme.colors.mediumGray};
@@ -125,29 +133,32 @@ const LabelContainer = styled("label", containerProps)`
 
     &:after {
       content: "";
-      display: ${(props) => props.isChecked ? 'block' : 'none'};
-      width: ${(props) =>
-        props.size === "large"
-          ? "10px"
-          : props.size === "medium"
-            ? "8px"
-            : "6px"};
-      height: ${(props) =>
-        props.size === "large"
-          ? "10px"
-          : props.size === "medium"
-            ? "8px"
-            : "6px"};
-      border-radius: 100%;
-      background: ${(props) => props.theme.colors.primary};
+      display: none;
     }
   }
+
+  .checkmark:after {
+    width: ${(props) =>
+      props.size === "large"
+        ? "10px"
+        : props.size === "medium"
+        ? "8px"
+        : "6px"};
+    height: ${(props) =>
+      props.size === "large"
+        ? "10px"
+        : props.size === "medium"
+        ? "8px"
+        : "6px"};
+    border-radius: 100%;
+    background: ${(props) => props.theme.colors.primary};
+  }
 `
 
 const textAttrs = { isDisabled: Boolean }
 const LabelText = styled("div", textAttrs)`
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
 `
 
 const RadioImage = styled.img`
@@ -217,15 +228,11 @@ export default {
       required: false,
       default: "medium", // small, medium, large
     },
-    name: {
-      required: false,
-      default: ''
-    }
   },
   data() {
     return {
+      radioName: "",
       selectedImage: null,
-      radioName: ''
     }
   },
   methods: {
@@ -240,7 +247,7 @@ export default {
     },
   },
   created() {
-    this.radioName = this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
+    this.radioName = Math.round(Math.random() * 10000)
   },
 }
 </script>

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

@@ -59,8 +59,7 @@ const InputWrapper = styled.span`
   img {
     position: absolute;
     right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
+    top: 0;
   }
 `
 

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="16"
+          size="16px"
           :alignText="infoTextAlign"
         />
       </label-wrapper>
@@ -23,6 +23,7 @@
         :disabled="isDisabled"
         :fontSize="fontSize"
         @input="onChangeHandler"
+        :resize="resize"
       />
     </input-wrapper>
     <error-message v-if="isError && errorText">{{ errorText }}</error-message>
@@ -174,7 +175,11 @@ export default {
     },
     inputWidth: {
       required: false,
-      default: null
+      default: null,
+    },
+    resize:{
+      required:false,
+      default: "none"
     }
   },
   methods: {

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

@@ -10,7 +10,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="14"
+          size="14px"
           :alignText="infoTextAlign"
         />
       </label-container>
@@ -46,7 +46,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="14"
+          size="14px"
           :alignText="infoTextAlign"
         />
       </label-container>

package/src/components/pageSubtitle/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
+  <subtitle-text :color="color" :hasInfoText="!!infoText">
     <span>
       {{ text }}
     </span>
     <info-text
       :text="infoText"
       v-if="!!infoText"
-      size="14"
+      size="14px"
       borderColor="#ccc"
       :alignText="alignInfoText"
     />
@@ -24,7 +24,7 @@
 import styled from "vue-styled-components"
 import InfoText from "../infoText"
 
-const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }
+const textAttrs = { color: String, hasInfoText: Boolean }
 const SubtitleText = styled("div", textAttrs)`
   display: grid;
   align-items: center;
@@ -33,7 +33,7 @@ const SubtitleText = styled("div", textAttrs)`
     props.hasInfoText ? "auto auto 1fr" : "1fr"};
   color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
   font-size: 13px;
-  margin-bottom: ${(props) => (props.marginBottom ? props.marginBottom : '30px')};
+  margin-bottom: 30px;
   line-height: 1.5;
   position: relative;
 `
@@ -59,10 +59,6 @@ export default {
       required: false,
       default: "left",
     },
-    marginBottom: {
-      required: false,
-      default: "30px",
-    }
   },
 }
 </script>

package/src/components/pageTitle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
+  <title-text :color="color">{{ text }}</title-text>
 </template>
 
 <script>
@@ -11,12 +11,12 @@
 // />
 import styled from "vue-styled-components"
 
-const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
+const textAttrs = { color: String }
 const TitleText = styled("div", textAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
-  text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
+  font-size: 16px;
+  text-transform: uppercase;
   margin-bottom: 20px;
 `
 
@@ -32,14 +32,6 @@ export default {
     color: {
       required: false,
     },
-    fontSize: {
-      required: false,
-      default: '16px'
-    },
-    uppercase: {
-      required: false,
-      default: true
-    }
   },
 }
 </script>

package/src/components/tables/mainTable/index.vue

@@ -8,7 +8,7 @@
         <spinner-wrapper v-if="isLoading">
           <spinner />
         </spinner-wrapper>
-        <table-container v-else :cellPaddings="cellPaddings">
+        <table-container v-else>
           <slot />
         </table-container>
       </table-wrapper>
@@ -63,8 +63,7 @@ const SpinnerWrapper = styled.div`
   justify-items: center;
 `
 
-const containerAttrs = { cellPaddings: String }
-const TableContainer = styled("table", containerAttrs)`
+const TableContainer = styled.table`
   width: 100%;
   border-collapse: collapse;
   border: none;
@@ -115,7 +114,7 @@ const TableContainer = styled("table", containerAttrs)`
   }
 
   td {
-    padding: ${(props) => props.cellPaddings ? props.cellPaddings : "6px 6px 7px 4px" };
+    padding: 6px 6px 7px 4px;
     border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
     &.empty {
@@ -353,10 +352,6 @@ export default {
       required: false,
       default: true,
     },
-    cellPaddings: {
-      required: false,
-      default: '',
-    },
     isLoading: {
       required: false,
       default: false,

package/src/components/threeDots/index.vue

@@ -10,8 +10,7 @@
       @click.stop
       :top="getItemLocation('top')"
       :right="getItemLocation('right')"
-      :containerWidth="childOpen ? 440 : 240"
-      ref="dropdownContainer"
+      :containerWidth="childOpen ? 420 : 220"
     >
       <loading-container v-if="isLoading">
         <spinner />
@@ -27,13 +26,13 @@
           @click.stop="
             onSelect({
               item: child,
-              hasChildren: hasChildren(child)
+              hasChildren: hasChildren(child),
             })
           "
           @keyup.enter.stop="
             onSelect({
               item: child,
-              hasChildren: hasChildren(child)
+              hasChildren: hasChildren(child),
             })
           "
         >
@@ -52,10 +51,7 @@
           @mouseover="onItemHover({ index, item })"
           :isDisabled="item.disabled"
         >
-          <arrow-left
-            :hasChildren="hasChildren(item)"
-            v-if="hasChildren(item)"
-          />
+          <arrow-left :hasChildren="hasChildren(item)" />
           <span>
             {{ item.name }}
           </span>
@@ -121,8 +117,8 @@
 //         },
 //       ],
 
-import styled from 'vue-styled-components'
-import Spinner from '../spinner'
+import styled from "vue-styled-components"
+import Spinner from "../spinner"
 
 const PageContainer = styled.div`
   display: grid;
@@ -159,11 +155,11 @@ const DotItem = styled.div`
 `
 
 const dropdownAttrs = { top: Number, right: Number, containerWidth: Number }
-const DropdownContainer = styled('div', dropdownAttrs)`
+const DropdownContainer = styled("div", dropdownAttrs)`
   z-index: 99;
   height: 200px;
-  top: ${(props) => props.top + 'px'};
-  left: ${(props) => props.right - props.containerWidth + 'px'};
+  top: ${(props) => props.top + "px"};
+  left: ${(props) => props.right - props.containerWidth + "px"};
   position: absolute;
   display: grid;
   grid-template-columns: auto auto;
@@ -184,21 +180,19 @@ const OptionsContainer = styled.div`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
   grid-template-columns: 1fr;
-  min-width: 220px;
-  max-width: 220px;
+  min-width: 200px;
   width: max-content;
   border-radius: 4px;
   background-color: #fff;
   max-height: 220px;
   overflow: auto;
   height: max-content;
-  white-space: normal;
 `
 
 const optionAttrs = { isDisabled: Boolean }
-const OptionItem = styled('div', optionAttrs)`
+const OptionItem = styled("div", optionAttrs)`
   padding: 12px;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: 13px;
   position: relative;
 
@@ -228,7 +222,7 @@ const OptionChild = styled.div`
 `
 
 const arrowAttrs = { hasChildren: Boolean }
-const ArrowLeft = styled('span', arrowAttrs)`
+const ArrowLeft = styled("span", arrowAttrs)`
   border: solid #9f9f9f;
   border-width: 0 1.5px 1.5px 0;
   display: inline-block;
@@ -236,18 +230,16 @@ const ArrowLeft = styled('span', arrowAttrs)`
   margin-bottom: 1px;
   transform: rotate(135deg);
   margin-right: 3px;
-  visibility: ${(props) => (props.hasChildren ? 'visible' : 'hidden')};
+  visibility: ${(props) => (props.hasChildren ? "visible" : "hidden")};
 `
 
 const childAttrs = { isOpen: Boolean }
-const ChildrenContainer = styled('div', childAttrs)`
+const ChildrenContainer = styled("div", childAttrs)`
   border: ${(props) =>
-    props.isOpen ? '1px solid' + props.theme.colors.grey3 : 'none'};
+    props.isOpen ? "1px solid" + props.theme.colors.grey3 : "none"};
   display: grid;
   grid-template-columns: 1fr;
   min-width: 200px;
-  max-width: 200px;
-  white-space: normal;
   width: max-content;
   border-radius: 4px;
   background-color: #fff;
@@ -258,7 +250,7 @@ const ChildrenContainer = styled('div', childAttrs)`
 `
 
 export default {
-  name: 'three-dots',
+  name: "three-dots",
   components: {
     PageContainer,
     ButtonContainer,
@@ -270,23 +262,22 @@ export default {
     ArrowLeft,
     DropdownContainer,
     Spinner,
-    LoadingContainer
+    LoadingContainer,
   },
   props: {
     options: {
-      required: true
+      required: true,
     },
     isLoading: {
       required: false,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
       isOpen: false,
       hoverItem: null,
       childOpen: null,
-      containerWidth: 16
     }
   },
   methods: {
@@ -294,15 +285,15 @@ export default {
       this.isOpen = !this.isOpen
 
       if (this.isOpen) {
-        document.addEventListener('click', this.clickOutside)
+        document.addEventListener("click", this.clickOutside)
       } else {
-        document.removeEventListener('click', this.clickOutside)
+        document.removeEventListener("click", this.clickOutside)
       }
     },
     getItemLocation(value) {
       let ref = this.$refs.dropdownItem
       let location = ref.$el.getBoundingClientRect()[value]
-      if (value === 'top') {
+      if (value === "top") {
         location = location + window.scrollY
       }
       return location
@@ -319,7 +310,7 @@ export default {
       if (hasChildren || item.disabled) {
         return
       }
-      this.$emit('on-select', item)
+      this.$emit("on-select", item)
       this.isOpen = false
     },
     clickOutside(event) {
@@ -327,7 +318,7 @@ export default {
         return
       }
       this.toggleButton()
-    }
-  }
+    },
+  },
 }
 </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
@@ -91,6 +94,8 @@ export const numberToString = ({ value, numberPrecision }) => {
       ? 'fr-fr'
       : localStorage.getItem('lang')
     : 'en-US'
+  if(selectedLang=="null"){selectedLang='en-US'}
+  value=parseFloat(value)
   return value.toLocaleString(selectedLang, {
     minimumFractionDigits: numberPrecision,
     maximumFractionDigits: numberPrecision

package/src/main.js

@@ -1,12 +1,10 @@
 import Vue from "vue"
 import App from "./App.vue"
 import VueCompositionAPI from "@vue/composition-api"
-import vClickOutside from 'v-click-outside'
 
 Vue.config.productionTip = false
 
 Vue.use(VueCompositionAPI)
-Vue.use(vClickOutside)
 
 new Vue({
   render: (h) => h(App),

package/src/assets/svgIcons/cross.svg

@@ -1,4 +0,0 @@
-<svg fill="none" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9.87865 8.47868L8.47865 9.87868L0.121287 1.52132L1.52129 0.121318L5.69997 4.3L9.87865 8.47868Z" fill="black"/>
-    <path d="M1.5213 9.87868L0.121302 8.47868L8.47866 0.12132L9.87866 1.52132L1.5213 9.87868Z" fill="black"/>
-</svg>

package/src/assets/svgIcons/transfer.svg

@@ -1,4 +0,0 @@
-<svg fill="none" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg">
-    <path d="M3 9.98993L3.47934e-07 6.01003L10 6.01003V7.98993L3 7.98993L3 9.98993Z" fill="black"/>
-    <path d="M7 0.0100708L10 3.98997H0L1.19209e-07 2.01007L7 2.01007V0.0100708Z" fill="black"/>
-</svg>