@eturnity/eturnity_reusable_components 7.12.7-EPDM-10299.0 → 7.12.7-EPDM-7951.0

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

@@ -21,8 +21,8 @@
 //     :minValue="10" //default is 0 if not specified
 //     :maxValue="500" //default is 100 if not specified
 // />
-import Slider from "@vueform/slider/dist/slider.vue2.js"
-import styled from "vue-styled-components"
+import Slider from '@vueform/slider'
+import styled from 'vue3-styled-components'
 
 const Container = styled.div`
   margin: 16px 0 16px 21px;
@@ -81,45 +81,45 @@ const NumberText = styled.div`
 `
 
 export default {
-  name: "slider",
+  name: 'slider',
   components: {
     Slider,
     Container,
-    NumberText,
+    NumberText
   },
   props: {
     value: {
       required: false,
-      default: 0,
+      default: 0
     },
     unit: {
       required: false,
-      default: "",
+      default: ''
     },
     minValue: {
       required: false,
-      default: 0,
+      default: 0
     },
     maxValue: {
       required: false,
-      default: 100,
-    },
+      default: 100
+    }
   },
   methods: {
     onChange(value) {
-      this.$emit("change", value)
-    },
+      this.$emit('change', value)
+    }
   },
   mounted() {
     // This is to add the 3 white lines to the slider button
-    let slider = document.querySelector(".slider-touch-area")
-    let span1 = document.createElement("span")
-    let span2 = document.createElement("span")
-    let span3 = document.createElement("span")
+    let slider = document.querySelector('.slider-touch-area')
+    let span1 = document.createElement('span')
+    let span2 = document.createElement('span')
+    let span3 = document.createElement('span')
     slider.appendChild(span1)
     slider.appendChild(span2)
     slider.appendChild(span3)
-  },
+  }
 }
 </script>
 

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

@@ -45,7 +45,7 @@
       >
         <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
         <info-text
-          @click.native.stop
+          @click.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
         />
@@ -70,7 +70,7 @@
 //   :disabled="false"
 // />
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'
 import theme from '../../../assets/theme'
 const Container = styled.div``

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

@@ -51,7 +51,7 @@
 //     :isDisabled="true"
 // .   fontSize="13px"
 // />
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'
 import ErrorMessage from '../../errorMessage'
 

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

@@ -44,7 +44,7 @@
       >
         <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
         <info-text
-          @click.native.stop
+          @click.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
         />
@@ -70,7 +70,7 @@
 //   data-id="test_data_id"
 // />
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'
 
 const Container = styled.div`

package/src/components/label/index.vue

@@ -1,29 +1,25 @@
 <template>
-      <label-wrapper
-        :labelAlign="labelAlign">
-        <input-label
-          :labelFontColor="labelFontColor"
-          :fontSize="fontSize"
-          >
-          <slot></slot>
-          <optionalLabel v-if="labelOptional"
-            >({{ $gettext('Optional') }})</optionalLabel
-          ></input-label
-        >
-        <info-text
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-          :size="fontSize ? fontSize : '16px'"
-          :alignArrow="infoTextAlign"
-        />
-      </label-wrapper>
+  <label-wrapper :labelAlign="labelAlign">
+    <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">
+      <slot></slot>
+      <optionalLabel v-if="labelOptional"
+        >({{ $gettext('Optional') }})</optionalLabel
+      ></input-label
+    >
+    <info-text
+      v-if="infoTextMessage"
+      :text="infoTextMessage"
+      borderColor="#ccc"
+      :size="fontSize ? fontSize : '16px'"
+      :alignArrow="infoTextAlign"
+    />
+  </label-wrapper>
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../infoText'
 
-
 const labelAttrs = { fontSize: String, labelFontColor: String }
 const InputLabel = styled('div', labelAttrs)`
   color: ${(props) =>
@@ -40,15 +36,15 @@ const optionalLabel = styled.span`
   font-weight: 300;
 `
 
-const LabelWrapper = styled('div',{labelAlign:String})`
-  ${props=>props.labelAlign=='horizontal'?
-    'display: inline-grid;':
-    'display: grid;'
-  }
-  ${props=>props.labelAlign=='horizontal'?
-    'margin-right: 10px;':
-    'margin-bottom: 8px;'
-  }
+const LabelWrapper = styled('div', { labelAlign: String })`
+  ${(props) =>
+    props.labelAlign == 'horizontal'
+      ? 'display: inline-grid;'
+      : 'display: grid;'}
+  ${(props) =>
+    props.labelAlign == 'horizontal'
+      ? 'margin-right: 10px;'
+      : 'margin-bottom: 8px;'}
   vertical-align: center;
   grid-template-columns: auto auto;
   grid-gap: 12px;
@@ -97,7 +93,7 @@ export default {
     labelAlign: {
       required: false,
       default: 'vertical'
-    },
-  },
+    }
+  }
 }
 </script>

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

@@ -10,11 +10,7 @@
       <content-container :visible="!isLoading">
         <slot />
       </content-container>
-      <close-button
-        v-if="!hideClose"
-        @click.native="onCloseModal()"
-        class="close"
-      />
+      <close-button v-if="!hideClose" @click="onCloseModal()" class="close" />
     </modal-container>
   </page-wrapper>
 </template>
@@ -30,7 +26,7 @@
 //   <div>Data....</div>
 // </modal>
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
 

package/src/components/navigationTabs/index.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../infoText'
 const TabAttr = {
   active: Boolean,
@@ -31,12 +31,12 @@ const TabAttr = {
 }
 
 const bottomLine = styled('div')`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 1px;
-    width: 100%;
-    background-color: #b2b9c5;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  background-color: ${(props) => props.theme.colors.grey3};
 `
 const roofTabWrap = styled('div')`
   display: flex;
@@ -48,17 +48,22 @@ const roofTabWrap = styled('div')`
 const Uppercase = styled('span')`
   text-transform: uppercase;
 `
-const Option = styled('div',TabAttr)`
-    font-size: 13px;
-    font-weight: 700;
-    display:flex;
-    justify-content: center;
-    flex-direction: row;
-    gap: 10px;
-    color: ${props=>props.textColor ?
-        props.theme.colors[props.textColor] ? props.theme.colors[props.textColor] : props.textColor :
-        props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
-  `
+const Option = styled('div', TabAttr)`
+  font-size: 13px;
+  font-weight: 700;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  gap: 10px;
+  color: ${(props) =>
+    props.textColor
+      ? props.theme.colors[props.textColor]
+        ? props.theme.colors[props.textColor]
+        : props.textColor
+      : props.isDisabled
+      ? props.theme.colors.grey2
+      : props.theme.colors.black};
+`
 const Tab = styled('div', TabAttr)`
   padding: 16px 10px;
   margin-right: 5px;
@@ -67,7 +72,8 @@ const Tab = styled('div', TabAttr)`
   z-index: 10;
   border-bottom: 2px solid
     ${(props) => (props.active ? props.theme.colors.primary : 'transparent')};
-  background-color: ${(props) => (props.isDisabled ? props.theme.colors.grey5 : 'transparent')};
+  background-color: ${(props) =>
+    props.isDisabled ? props.theme.colors.grey5 : 'transparent'};
   transition: 0.2s ease;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   min-width: 140px;
@@ -76,7 +82,8 @@ const Tab = styled('div', TabAttr)`
   justify-content: space-between;
   min-height: 55px;
   &:hover {
-    border-color: ${(props) => props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.primary};
+    border-color: ${(props) =>
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.primary};
   }
 `
 

package/src/components/pageSubtitle/index.vue

@@ -18,7 +18,7 @@
 //   color="red"
 //   infoText="My info text"
 // />
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 import InfoText from "../infoText"
 
 const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }

package/src/components/pageTitle/index.vue

@@ -18,7 +18,7 @@
 //   text="My Page Title"
 //   color="red"
 // />
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 import InfoText from "../infoText"
 
 const wrapAttrs = { hasInfoText: Boolean }
@@ -40,7 +40,7 @@ const TitleText = styled('span', titleAttrs)`
 `
 
 export default {
-  name: "page-title",
+  name: 'page-title',
   components: {
     TitleText,
     TitleWrap,
@@ -48,10 +48,10 @@ export default {
   },
   props: {
     text: {
-      required: true,
+      required: true
     },
     color: {
-      required: false,
+      required: false
     },
     fontSize: {
       required: false,

package/src/components/pagination/index.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import icon from '../icon'
 import theme from '@/assets/theme.js'
 

package/src/components/progressBar/index.vue

@@ -31,7 +31,7 @@
 //   stepNumber="4"
 //   :labelText="translate('step')"
 // />
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 
 const Container = styled.div`
   display: grid;

package/src/components/projectMarker/index.vue

@@ -9,7 +9,7 @@
       :isEditionAllowed="editionAllowed"
       :isActive="activated"
       :cursor="cursor"
-      @click.native="editionAllowed ? (activated = !activated) : ''"
+      @click="editionAllowed ? (activated = !activated) : ''"
     >
       <icon
         v-if="!!iconName"
@@ -28,11 +28,11 @@
         v-if="activated"
         v-click-outside="clickOutsideActionHandler"
       >
-        <edit-item @click.native="deleteModalOpened = !deleteModalOpened">
+        <edit-item @click="deleteModalOpened = !deleteModalOpened">
           <delete-icon />
           <div>{{ $gettext('Delete') }}</div>
         </edit-item>
-        <edit-item @click.native="onEditClick">
+        <edit-item @click="onEditClick">
           <icon-container>
             <icon name="edit_button" size="14px" />
           </icon-container>
@@ -52,10 +52,10 @@
         <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 @click="onDelete" :text="$gettext('Delete')" />
           <main-button
             type="cancel"
-            @click.native="closeDeleteModal"
+            @click="closeDeleteModal"
             :text="$gettext('Cancel')"
           />
         </cta-container>
@@ -78,7 +78,8 @@
 //   @deleteHandler="onMarkerDelete($event)"
 // />
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
+import vClickOutside from 'click-outside-vue3'
 import Icon from '../icon'
 import Modal from '../modals/modal'
 import PageTitle from '../pageTitle'
@@ -129,7 +130,6 @@ const MarkerContainer = styled('div', MarkerAttrs)`
       props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
   border-radius: ${(props) =>
     props.hasBorderRadius ? (props.withDate ? '4px 0 0 4px' : '4px') : '0'};
-
   white-space: nowrap;
   cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
 
@@ -196,6 +196,9 @@ const Date = styled.div`
 
 export default {
   name: 'project-marker',
+  directives: {
+    clickOutside: vClickOutside.directive
+  },
   components: {
     PageContainer,
     MarkerContainer,

package/src/components/sideMenu/index.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import Icon from '../icon'
 import Spinner from '../spinner'
 

package/src/components/spinner/index.vue

@@ -1,24 +1,19 @@
 <template>
   <spinner-container v-if="fullWidth">
     <container>
-      <spinner-wrapper
-        :size="size"
-        :src="require('../../assets/icons/black_spinner.svg')"
-      />
+      <spinner-wrapper :size="size" />
     </container>
   </spinner-container>
   <container v-else :limitedToModal="limitedToModal">
-    <spinner-wrapper
-      :size="size"
-      :src="require('../../assets/icons/black_spinner.svg')"
-    />
+    <spinner-wrapper :size="size" />
   </container>
 </template>
 
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
+import SpinnerSvg from '../../assets/icons/black_spinner.svg?component'
 
 const SpinnerContainer = styled.div`
   position: fixed;
@@ -43,7 +38,7 @@ const Container = styled('div', containerAttrs)`
 `
 
 const spinnerAttrs = { size: String }
-const SpinnerWrapper = styled('img', spinnerAttrs)`
+const SpinnerWrapper = styled(SpinnerSvg, spinnerAttrs)`
   width: ${(props) => (props.size ? props.size : '60px')};
 `
 
@@ -69,4 +64,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/tableDropdown/index.vue

@@ -53,7 +53,7 @@
           </no-template>
           <input-container
             v-if="item.type === 'input'"
-            @click.native.stop="onInputClick()"
+            @click.stop="onInputClick()"
           >
             <text-container
               v-if="customInputDisabled"
@@ -93,16 +93,11 @@
             triggerType="hover"
           ></et-popover>
           <arrow-down
-            @click.native.stop="toggleOpen"
+            @click.stop="toggleOpen"
             v-if="!isOpen"
             class="arrow-dropdown"
-            :src="require('../../assets/icons/collapse_arrow_icon.svg')"
-          />
-          <arrow-up
-            @click.native.stop="toggleOpen"
-            v-else
-            :src="require('../../assets/icons/collapse_arrow_icon.svg')"
           />
+          <arrow-up @click.stop="toggleOpen" v-else />
         </arrow-wrapper>
         <options-container v-if="isOpen" ref="optionsContainer">
           <options-wrapper @click.prevent.stop>
@@ -127,20 +122,18 @@
               :key="index"
               @click="onItemClick(item)"
               :tabindex="0"
-              @keyup.enter.native="onItemClick(item)"
+              @keyup.enter="onItemClick(item)"
             >
-              <template v-for="(option, idx) in optionsDisplay">
-                <span v-if="option !== 'template'" :key="idx">
+              <template v-for="(option, idx) in optionsDisplay" :key="idx">
+                <span v-if="option !== 'template'">
                   {{ !!item[option] ? item[option] : '-' }}
                 </span>
                 <template-button
-                  :key="idx"
                   @click.stop="onTemplateClick(item)"
                   v-else-if="option === 'template' && item.has_template"
                   >{{ $gettext('Use template...') }}</template-button
                 >
                 <no-template
-                  :key="idx"
                   v-else-if="option === 'template' && !item.has_template"
                 >
                   {{ $gettext('No main component template') }}
@@ -183,10 +176,12 @@
 //   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
 //   :disabled="true"
 // />
-import styled from 'vue-styled-components'
-import Spinner from '@eturnity/eturnity_reusable_components/src/components/spinner'
-import SearchInput from '@eturnity/eturnity_reusable_components/src/components/inputs/searchInput'
-import InputText from '@eturnity/eturnity_reusable_components/src/components/inputs/inputText'
+import styled from 'vue3-styled-components'
+import Spinner from '../spinner'
+import SearchInput from '../inputs/searchInput'
+import InputText from '../inputs/inputText'
+import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
+import SubpositionMarkerIcon from '../../assets/icons/subposition_marker.svg'
 
 const rowAttrs = { disabled: Boolean, isOpen: Boolean }
 const DropdownRow = styled('div', rowAttrs)`
@@ -237,9 +232,8 @@ const ComponentContainer = styled('div', containerAttrs)`
   padding: 5px 4px;
 `
 
-const ArrowDown = styled.img`
+const ArrowDown = styled(CollapseArrowIcon)`
   width: 8px;
-  transform: rotate(0deg);
   transition: transform 150ms ease;
 `
 
@@ -403,9 +397,7 @@ const TextContainer = styled.div`
   align-items: center;
 `
 
-const NestedIcon = styled.div`
-  background-image: ${() =>
-    `url(${require('../../assets/icons/subposition_marker.svg')})`};
+const NestedIcon = styled(SubpositionMarkerIcon)`
   height: 10px;
   width: 6px;
 `
@@ -604,7 +596,7 @@ export default {
           }
         })
       })
-      if (this.dynamicGridWidth.length === this.optionsDisplay.length) {
+      if (Array.isArray(this.dynamicGridWidth)) {
         this.dynamicGridWidth = this.dynamicGridWidth.join(' ')
       }
     }
@@ -627,9 +619,12 @@ export default {
         })
       }
     },
-    optionItems(val) {
-      if (val && val.length) {
-        this.setDropdownWidth(val)
+    optionItems: {
+      immediate: true,
+      handler(val) {
+        if (val && val.length) {
+          this.setDropdownWidth(val)
+        }
       }
     }
   }

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

@@ -161,7 +161,7 @@
 
 <script>
 import draggable from "vuedraggable"
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 import MainTable from "@/components/reusable-components/tables/MainTable"
 import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
 import DeleteIcon from "@/components/reusable-components/DeleteIcon"

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

@@ -29,8 +29,12 @@
 <script>
 // ToDo: add this to storybook
 // import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import Spinner from '../../spinner'
+import dragIconSvg from '../../../assets/icons/drag_icon.svg?url'
+import subpositionIconSvg from '../../../assets/icons/subposition_icon.svg?url'
+import arrowDownSvg from '../../../assets/icons/arrow_down.svg?url'
+import arrowUpRedSvg from '../../../assets/icons/arrow_up_red.svg?url'
 
 const pageContainerProps = {
   tableHeight: String,
@@ -122,6 +126,7 @@ const TableContainer = styled('table', containerAttrs)`
         background-color: ${(props) => props.theme.colors.white};
         cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
 
+        .select-button,
         .arrow-container,
         .input-placeholder,
         .table-dropdown-item {
@@ -322,8 +327,7 @@ const TableContainer = styled('table', containerAttrs)`
       height: 16px;
       cursor: grab;
       background-position: center;
-      background-image: ${() =>
-        `url(${require('../../../assets/icons/drag_icon.svg')})`};
+      background-image: ${() => `url(${dragIconSvg})`};
 
       &:active {
         cursor: grabbing;
@@ -335,8 +339,7 @@ const TableContainer = styled('table', containerAttrs)`
       height: 11px;
       background: no-repeat;
       margin-left: 10px;
-      background-image: ${() =>
-        `url(${require('../../../assets/icons/subposition_icon.svg')})`};
+      background-image: ${() => `url(${subpositionIconSvg})`};
     }
 
     .arrow-down {
@@ -344,8 +347,7 @@ const TableContainer = styled('table', containerAttrs)`
       height: 11px;
       background: no-repeat;
       background-position: center;
-      background-image: ${() =>
-        `url(${require('../../../assets/icons/arrow_down.svg')})`};
+      background-image: ${() => `url(${arrowDownSvg})`};
     }
 
     .arrow-up {
@@ -353,8 +355,7 @@ const TableContainer = styled('table', containerAttrs)`
       height: 11px;
       background: no-repeat;
       background-position: center;
-      background-image: ${() =>
-        `url(${require('../../../assets/icons/arrow_up_red.svg')})`};
+      background-image: ${() => `url(${arrowUpRedSvg})`};
     }
   }