@eturnity/eturnity_reusable_components 1.2.19-v.5.45.0 → 1.2.20-3d-master.0

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/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,7 @@ export const numberToString = ({ value, numberPrecision }) => {
       ? 'fr-fr'
       : localStorage.getItem('lang')
     : '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>

package/src/components/projectMarker/index.vue

@@ -1,285 +0,0 @@
-<template>
-  <page-container :withDate="!!date">
-    <marker-container
-      v-if="markerData"
-      :backgroundColor="markerData.color"
-      :hasIcon="!!iconName"
-      :isEditionAllowed="editionAllowed"
-      :isActive="activated"
-      :cursor="cursor"
-      @click.native="editionAllowed
-        ? activated = !activated
-        : ''
-      "
-    >
-      <icon
-        v-if="!!iconName"
-        :name="iconName"
-        color="white"
-        size="10px"
-        :cursor="cursor"
-      />
-      <span>{{ markerData.translations[activeLanguage].name }}</span>
-      <dot-wrapper
-        v-if="editionAllowed"
-        class="dotContainer"
-      >
-        <dot-icon />
-        <dot-icon />
-        <dot-icon />
-      </dot-wrapper>
-      <edit-container
-        v-if="activated"
-        v-click-outside="clickOutsideActionHandler"
-      >
-        <edit-item @click.native="deleteModalOpened = !deleteModalOpened">
-          <delete-icon />
-          <div>{{ $gettext('Delete') }}</div>
-        </edit-item>
-        <edit-item @click.native="onEditClick">
-          <icon-container>
-            <icon
-              name="edit_button"
-              size="14px"
-            />
-          </icon-container>
-          <div>{{ $gettext('Edit') }}</div>
-        </edit-item>
-      </edit-container>
-    </marker-container>
-    <date v-if="!!date">
-      {{ date }}
-    </date>
-    <modal
-      :isOpen="deleteModalOpened"
-      @on-close="closeDeleteModal"
-      :preventOutsideClose="true"
-    >
-      <modal-container>
-        <page-title :text="$gettext('delete_confirm_text')" />
-        <page-subtitle :text="$gettext('delete_confirm_subtext')" />
-        <cta-container>
-          <main-button
-            @click.native="onDelete"
-            :text="$gettext('Delete')"
-          />
-          <main-button
-            type="cancel"
-            @click.native="closeDeleteModal"
-            :text="$gettext('Cancel')"
-          />
-        </cta-container>
-      </modal-container>
-    </modal>
-  </page-container>
-</template>
-
-<script>
-// import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
-// To use:
-// <project-marker
-//   :activeLanguage="'en-us'"
-//   :markerData="{"choice":"sold","translations":{"en-us":{"name":"Sold"}}","color":"#000"}"
-//   :isLimitedPartner="false"
-//   :isGroupSupport="false"
-//   :isEditable='false'
-//   :date="'23.07.2022'"
-//   @editHandler="onMarkerEdit($event)"
-//   @deleteHandler="onMarkerDelete($event)"
-// />
-
-import styled from "vue-styled-components"
-import Icon from "../icon"
-import Modal from '../modals/modal'
-import PageTitle from '../pageTitle'
-import DeleteIcon from '../deleteIcon'
-import PageSubtitle from '../pageSubtitle'
-import MainButton from '../buttons/mainButton'
-
-const PageContainerAttrs = {
-  withDate: Boolean
-}
-const PageContainer = styled('div', PageContainerAttrs)`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 12px;
-  line-height: 14px;
-`
-
-const ModalContainer = styled.div`
-  padding: 40px;
-  min-width: 500px;
-`
-
-const CtaContainer = styled.div`
-  display: flex;
-  gap: 20px;
-  margin-top: 30px;
-`
-
-const MarkerAttrs = {
-  backgroundColor: String,
-  hasIcon: Boolean,
-  isEditionAllowed: Boolean,
-  isActive: Boolean,
-  cursor: String
-}
-const MarkerContainer = styled('div', MarkerAttrs)`
-  display: grid;
-  grid-template-columns: ${(props) =>
-  props.hasIcon || props.isEditionAllowed ? 'auto 1fr' : '1fr'};
-  grid-gap: 5px;
-  position: relative;
-  align-items: center;
-  padding: 2px 7px;
-  color: ${(props) => props.theme.colors.white};
-  background-color: ${(props) =>
-  props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border-radius: 4px;
-  white-space: nowrap;
-  cursor: ${(props) => props.isEditionAllowed ? 'pointer' : props.cursor};
-
-  .dotContainer {
-    display: ${(props) => (props.isActive ? 'flex' : 'none')};
-  }
-
-  &:hover {
-    .dotContainer {
-      display: flex;
-    }
-  }
-`
-
-const DotWrapper = styled.div`
-  display: flex;
-  gap: 2px;
-  cursor: pointer;
-`
-
-const DotIcon = styled.div`
-  width: 4px;
-  height: 4px;
-  border-radius: 100%;
-  background-color: ${(props) => props.theme.colors.white};
-`
-
-const EditContainer = styled.div`
-  position: absolute;
-  z-index: 99;
-  top: 22px;
-  display: grid;
-  background-color: ${(props) => props.theme.colors.white};
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  border-radius: 4px;
-  cursor: pointer;
-  overflow: hidden;
-`
-
-const EditItem = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: ${(props) => props.theme.colors.black};
-  font-size: 13px;
-  padding: 4px 18px;
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
-  }
-`
-
-const IconContainer = styled.div`
-  padding: 8px;
-  line-height: 0;
-`
-
-const Date = styled.div``
-
-export default {
-  name: "project-marker",
-  components: {
-    PageContainer,
-    MarkerContainer,
-    DotWrapper,
-    DotIcon,
-    EditContainer,
-    EditItem,
-    DeleteIcon,
-    IconContainer,
-    Icon,
-    Modal,
-    ModalContainer,
-    CtaContainer,
-    PageTitle,
-    PageSubtitle,
-    MainButton,
-    Date
-  },
-  props: {
-    markerData: {
-      required: true
-    },
-    activeLanguage: {
-      required: true
-    },
-    date: {
-      required: false,
-      default: null
-    },
-    isEditable: {
-      required: false,
-      default: false
-    },
-    isGroupSupport: {
-      required: false,
-      default: false
-    },
-    isLimitedPartner: {
-      required: false,
-      default: false
-    },
-    cursor: {
-      required: false,
-      default: 'default'
-    }
-  },
-  data() {
-    return {
-      activated: false,
-      deleteModalOpened: false
-    }
-  },
-  computed: {
-    editionAllowed() {
-      return (this.markerData.can_be_deleted && (!this.isLimitedPartner || this.isGroupSupport)) && this.isEditable
-    },
-    iconName() {
-      if (this.markerData.choice === 'sold') {
-        return 'all_good'
-      } else if (this.markerData.choice === 'lost') {
-        return 'cross'
-      } else if (this.markerData.choice === 'transferred') {
-        return 'transfer'
-      } else {
-        return ''
-      }
-    }
-  },
-  methods: {
-    clickOutsideActionHandler() {
-      this.activated = false
-    },
-    closeDeleteModal() {
-      this.deleteModalOpened = false
-    },
-    onEditClick() {
-      this.$emit("editHandler")
-    },
-    onDelete() {
-      this.closeDeleteModal()
-      this.$emit("deleteHandler")
-    }
-  }
-}
-</script>