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

package/src/components/filter/filterSettings.vue

@@ -3,7 +3,7 @@
     <upper-container v-if="filterViews && filterViews.length">
       <view-container :maxWidth="activeView.length">
         <select-component
-          @click.native.stop
+          @click.stop
           selectWidth="100%"
           selectHeight="36px"
           fontSize="13px"
@@ -19,10 +19,10 @@
             <Option
               v-for="(item, idx) in filterViews"
               :key="idx + '_view'"
-              @click.native="$emit('on-view-select', item)"
+              @click="$emit('on-view-select', item)"
               :value="item.name"
               >{{ item.name }}
-              <delete-icon @click.native.stop="$emit('on-view-delete', item)"
+              <delete-icon @click.stop="$emit('on-view-delete', item)"
             /></Option>
           </template>
         </select-component>
@@ -55,28 +55,28 @@
               ghost-class="ghost"
               :setData="modifyDragItem"
               v-model="item.dataOptions"
+              itemKey="choice"
             >
-              <checkbox-wrapper
-                v-for="(column, index) in item.dataOptions"
-                :key="index + 'dataOption'"
-              >
-                <drag-container class="drag-container">
-                  <icon :name="'duplicate-1'" size="12px" />
-                </drag-container>
-                <checkbox
-                  :label="column.text"
-                  :isChecked="column.selected"
-                  @on-event-handler="
-                    onChange({
-                      dataType: item.type,
-                      value: $event,
-                      choice: column.choice
-                    })
-                  "
-                  size="small"
-                  :isDisabled="column.selected && isCheckboxDisabled"
-                />
-              </checkbox-wrapper>
+              <template #item="{ element: column }">
+                <checkbox-wrapper>
+                  <drag-container class="drag-container">
+                    <icon :name="'duplicate-1'" size="12px" />
+                  </drag-container>
+                  <checkbox
+                    :label="column.text"
+                    :isChecked="column.selected"
+                    @on-event-handler="
+                      onChange({
+                        dataType: item.type,
+                        value: $event,
+                        choice: column.choice
+                      })
+                    "
+                    size="small"
+                    :isDisabled="column.selected && isCheckboxDisabled"
+                  />
+                </checkbox-wrapper>
+              </template>
             </draggable>
           </checkbox-container>
         </row-container>
@@ -169,12 +169,19 @@
             >
               <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
               <grid-container>
-                <date-picker-input
+                <VueDatePicker
                   :placeholder="$gettext('Date from')"
-                  :lang="getDatePickerLanguage()"
-                  type="date"
-                  :value="filter.range.start"
-                  @change="
+                  :locale="getDatePickerLanguage()"
+                  :model-value="filter.range.start"
+                  :enable-time-picker="false"
+                  :clearable="false"
+                  :auto-apply="true"
+                  :disabled-dates="disableFutureDates"
+                  format="yyyy-MM-dd"
+                  model-type="format"
+                  @focus="onDatepickerFocus(filter.range)"
+                  @close="onDatepickerBlur()"
+                  @update:model-value="
                     onChange({
                       dataType: item.type,
                       value: $event,
@@ -182,18 +189,20 @@
                       field: filter.field
                     })
                   "
-                  @focus="onDatepickerFocus(filter.range)"
-                  @close="onDatepickerBlur()"
-                  format="YYYY-MM-DD"
-                  valueType="format"
-                  :disabled-date="disableFutureDates"
                 />
-                <date-picker-input
+                <VueDatePicker
                   :placeholder="$gettext('Date to')"
-                  :lang="getDatePickerLanguage()"
-                  type="date"
-                  :value="filter.range.end"
-                  @change="
+                  :locale="getDatePickerLanguage()"
+                  :model-value="filter.range.end"
+                  :enable-time-picker="false"
+                  :clearable="false"
+                  :auto-apply="true"
+                  :disabled-dates="disablePastDates"
+                  format="yyyy-MM-dd"
+                  model-type="format"
+                  @focus="onDatepickerFocus(filter.range)"
+                  @close="onDatepickerBlur()"
+                  @update:model-value="
                     onChange({
                       dataType: item.type,
                       value: $event,
@@ -201,11 +210,6 @@
                       field: filter.field
                     })
                   "
-                  @focus="onDatepickerFocus(filter.range)"
-                  @close="onDatepickerBlur()"
-                  format="YYYY-MM-DD"
-                  valueType="format"
-                  :disabled-date="disablePastDates"
                 />
               </grid-container>
             </section-container>
@@ -247,33 +251,26 @@
         v-if="buttonText.apply_view"
         type="primary"
         :text="buttonText.apply_view"
-        @click.native="$emit('on-apply-current-view')"
+        @click="$emit('on-apply-current-view')"
       />
       <main-button
         type="secondary"
         v-if="buttonText.save_view"
         :text="buttonText.save_view"
-        @click.native="$emit('on-save-new-view')"
+        @click="$emit('on-save-new-view')"
       />
       <main-button
         type="cancel"
         v-if="buttonText.cancel"
         :text="buttonText.cancel"
-        @click.native="$emit('on-cancel-view')"
+        @click="$emit('on-cancel-view')"
       />
-      <reset-container v-if="!filterViews || !filterViews.length">
-        <reset-button @click="$emit('on-reset-filters')">
-          <icon :name="'update'" size="14px" :color="theme.colors.blue" />
-          <div>{{ $gettext('reset_filters') }}</div>
-        </reset-button>
-      </reset-container>
     </button-container>
   </container-wrapper>
 </template>
 
 <script>
-import styled from 'vue-styled-components'
-import DatePicker from 'vue2-datepicker'
+import styled from 'vue3-styled-components'
 import SelectComponent from '../inputs/select'
 import Option from '../inputs/select/option'
 import InputNumber from '../inputs/inputNumber'
@@ -284,12 +281,7 @@ import Icon from '../icon'
 import DeleteIcon from '../deleteIcon'
 import { datePickerLang } from '../../helpers/translateLang'
 import theme from '@/assets/theme.js'
-import 'vue2-datepicker/index.css'
-import 'vue2-datepicker/locale/de'
-import 'vue2-datepicker/locale/en'
-import 'vue2-datepicker/locale/es'
-import 'vue2-datepicker/locale/fr'
-import 'vue2-datepicker/locale/it'
+import VueDatePicker from '@vuepic/vue-datepicker'
 
 const ContainerWrapper = styled.div`
   position: absolute;
@@ -334,16 +326,6 @@ const ButtonContainer = styled.div`
   padding: 15px;
 `
 
-const ResetContainer = styled.div`
-  display: grid;
-  align-content: center;
-  margin-left: auto;
-  div {
-    margin-top: 0;
-    align-self: center;
-  }
-`
-
 const ColumnContainer = styled.div``
 
 const DragContainer = styled.div`
@@ -398,46 +380,6 @@ const RowWrapper = styled.div`
   margin-bottom: 12px;
 `
 
-const DatePickerInput = styled(DatePicker)`
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  border-radius: 4px;
-  padding: 7px 12px 7px 7px;
-  width: 100%;
-  position: relative;
-
-  &.mx-datepicker {
-    width: 100% !important;
-    max-width: 100%;
-    height: 36px;
-    align-self: flex-end;
-  }
-
-  .mx-input-wrapper {
-    position: unset;
-
-    input {
-      border: none;
-      height: auto;
-      padding: 0;
-      font-size: 13px;
-      box-shadow: none;
-      color: #393939;
-      vertical-align: bottom;
-    }
-
-    .mx-input-append {
-      top: 1px;
-    }
-  }
-
-  .mx-input-append {
-    left: 0;
-    top: 5px;
-    height: auto;
-    cursor: pointer;
-  }
-`
-
 const LabelAttrs = {
   marginTop: Boolean
 }
@@ -502,7 +444,6 @@ export default {
     Icon,
     DragContainer,
     InputNumber,
-    DatePickerInput,
     RowLabel,
     SectionContainer,
     GridContainer,
@@ -510,7 +451,7 @@ export default {
     DeleteIcon,
     UpperContainer,
     ResetButton,
-    ResetContainer
+    VueDatePicker
   },
   props: {
     filterData: {

package/src/components/filter/index.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import parentDropdown from './parentDropdown'
 import filterSettings from './filterSettings'
 
@@ -93,9 +93,9 @@ export default {
       }, 100)
     },
     clickOutside(event) {
-      const target = event.target
       if (
-        !this.$refs.dropdown.$el.contains(target) &&
+        this.$refs.dropdown &&
+        !this.$refs.dropdown.$el.contains(event.target) &&
         !this.preventOutsideClick
       ) {
         this.isDropdownOpen = false

package/src/components/filter/parentDropdown.vue

@@ -9,7 +9,7 @@
       </title-text>
       <arrow-wrapper>
         <icon
-          @click.native.stop="$emit('on-toggle')"
+          @click.stop="$emit('on-toggle')"
           :name="isOpen ? 'arrow_up' : 'arrow_down'"
           size="12px"
         />
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import Icon from '../icon'
 
 const PageWrapper = styled.div`

package/src/components/icon/iconCache.js

@@ -0,0 +1,23 @@
+const iconCache = {}
+
+export const fetchIcon = async (fileName) => {
+  if (iconCache[fileName]) {
+    return iconCache[fileName]
+  }
+
+  // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
+  const fetchUrl = new URL(
+    `../../assets/svgIcons/${fileName}.svg`,
+    import.meta.url
+  ).href
+
+  try {
+    const response = await fetch(fetchUrl)
+    const rawFile = await response.text()
+    iconCache[fileName] = rawFile
+
+    return rawFile
+  } catch (error) {
+    console.error(`Failed to load ${fileName}.svg`)
+  }
+}

package/src/components/icon/iconCollection.vue

@@ -16,7 +16,7 @@
 
 <script>
 import icon from './index.vue'
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 
 const Wrapper = styled.div`
   display: block;
@@ -36,7 +36,7 @@ const IconWrapper = styled.div`
   margin: 10px;
 `
 export default {
-  name: 'collection',
+  name: 'collectionComponent',
   components: { icon, IconWrapper, Wrapper },
   props: {
     size: { required: false },

package/src/components/icon/index.vue

@@ -1,19 +1,13 @@
 <template>
-  <Wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
-    <icon-image
-      :disabled="disabled"
-      :size="size"
-      :color="color"
-      :hoveredColor="hoveredColor"
-      v-html="
-        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
-      "
-    ></icon-image>
-    <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
-  </Wrapper>
+  <wrapper>
+    <icon-image>
+      <i v-html="icon.html" />
+    </icon-image>
+    <striked-line v-if="isStriked"></striked-line>
+  </wrapper>
 </template>
 
-<script>
+<script setup>
 // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
 //  How to use:
 //<icon
@@ -25,92 +19,95 @@
 //   isStriked = "true"
 // />
 
-import styled from 'vue-styled-components'
+import { onMounted, reactive, watch } from 'vue'
+import styled from 'vue3-styled-components'
+import { fetchIcon } from './iconCache'
 
-const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
-const Wrapper = styled('div', wrapperAttrs)`
+const props = defineProps({
+  disabled: {
+    required: false,
+    default: false
+  },
+  name: {
+    required: true
+  },
+  color: {
+    required: false
+  },
+  hoveredColor: {
+    required: false
+  },
+  size: {
+    required: false,
+    default: '30px'
+  },
+  cursor: {
+    required: false,
+    default: null
+  },
+  isStriked: {
+    required: false,
+    default: false
+  }
+})
+
+const Wrapper = styled('div')`
   display: flex;
   position: relative;
   align-content: center;
   justify-content: center;
-  width: ${(props) => props.size};
-  height: ${(props) => props.size};
-  min-width: ${(props) => props.size};
-  min-height: ${(props) => props.size};
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
+  width: ${props.size};
+  height: ${props.size};
+  min-width: ${props.size};
+  min-height: ${props.size};
+  cursor: ${props.disabled ? 'not-allowed' : props.cursor};
   line-height: 0;
 `
-const strikedAttrs = { isDisabled: Boolean, color: String, hoveredColor: String }
-const strikedLine = styled('div', strikedAttrs)`
+const strikedAttrs = {
+  isDisabled: Boolean,
+  color: String,
+  hoveredColor: String
+}
+const StrikedLine = styled.div`
   display: flex;
   position: absolute;
-  bottom:0;
-  left:0;
+  bottom: 0;
+  left: 0;
   align-content: center;
   justify-content: center;
   width: 143%;
-  height:8%;
-  background-color: ${(props)=>props.theme.colors[props.color] || props.color};
+  height: 8%;
+  background-color: ${({ theme }) => theme.colors[props.color] || props.color};
   min-height: 0;
   line-height: 0;
   transform-origin: 0% 100%;
   transform: rotate(-45deg);
 `
-const IconImageProps = { color: String, hoveredColor: String, size: String }
-const IconImage = styled('div', IconImageProps)`
+const IconImage = styled.div`
   width: 100%;
   svg {
     width: 100%;
     height: 100%;
   }
   svg path {
-    ${(props) =>
-      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
+    ${({ theme }) =>
+      props.color && `fill: ${theme.colors[props.color] || props.color};`}
   }
   &:hover > svg path {
-    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
+    ${props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
   &:hover + div {
-    background-color: ${(props)=>props.hoveredColor};
+    background-color: ${props.hoveredColor};
   }
 `
 
-export default {
-  name: 'icon',
-  components: {
-    IconImage,
-    Wrapper,
-    strikedLine
-  },
-  props: {
-    disabled: {
-      required: false,
-      default: false
-    },
-    name: {
-      required: true
-    },
-    color: {
-      required: false
-    },
-    hoveredColor: {
-      required: false
-    },
-    size: {
-      required: false,
-      default: '30px'
-    },
-    cursor: {
-      required: false,
-      default: null
-    },
-    isStriked: {
-      required: false,
-      default: false
-    }
-  },
-  data() {
-    return {}
-  }
+const icon = reactive({ html: '' })
+
+const loadSvg = async () => {
+  icon.html = await fetchIcon(props.name.toLowerCase())
 }
+
+onMounted(() => loadSvg())
+
+watch(() => props.name, loadSvg)
 </script>

package/src/components/iconWrapper/index.vue

@@ -42,7 +42,7 @@
 //   size="60px" by default, this is 30px
 // />
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import icon from '../icon'
 const wrapperAttrs = {
   color: String,
@@ -148,9 +148,6 @@ export default {
       required: false,
       default: false
     }
-  },
-  data() {
-    return {}
   }
 }
 </script>

package/src/components/infoCard/index.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import Icon from '../icon'
 
 const InfoContainer = styled.div`
@@ -24,7 +24,6 @@ const TextContainer = styled.div`
   width: 100%;
 `
 
-
 export default {
   name: 'InfoCard',
   components: {
@@ -33,4 +32,4 @@ export default {
     TextContainer
   }
 }
-</script>
+</script>

package/src/components/infoText/index.vue

@@ -30,7 +30,7 @@
 //     alignArrow="right" // which side the arrow should be on
 // />
 import theme from '../../assets/theme.js'
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import icon from '../icon'
 
 const textAttrs = {

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

@@ -3,11 +3,10 @@
     <container
       :checkColor="checkColor"
       :size="size"
-      :hasLabel="label && !!label.length"
+      :hasLabel="hasLabel"
       :backgroundColor="backgroundColor"
       :isChecked="isChecked"
       :isDisabled="isDisabled"
-      :cursorType="cursorType"
     >
       <input-checkbox
         type="checkbox"
@@ -15,10 +14,10 @@
         :data-id="dataId"
         @change="onChangeHandler(!isChecked)"
       />
-      <div>
+      <check-wrapper :hasLabel="hasLabel">
         <span class="checkmark"></span>
-      </div>
-      <label-text v-if="label && !!label.length">{{ label }}</label-text>
+      </check-wrapper>
+      <label-text v-if="hasLabel">{{ label }}</label-text>
     </container>
   </component-wrapper>
 </template>
@@ -34,22 +33,29 @@
 //     size="small"
 //     backgroundColor="red"
 //     :isDisabled="true"
-//     cursorType="default"
 // />
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 
 const ComponentWrapper = styled.div`
   min-height: 18px;
 `
 
+const CheckWrapper = styled('div', { hasLabel: Boolean })`
+  ${(props) =>
+    props.hasLabel &&
+    `
+    display: flex;
+    align-items: center;
+  `}
+`
+
 const containerAttrs = {
   checkColor: String,
   size: String,
   hasLabel: Boolean,
   backgroundColor: String,
   isChecked: Boolean,
-  isDisabled: Boolean,
-  cursorType: String
+  isDisabled: Boolean
 }
 const Container = styled('label', containerAttrs)`
   display: grid;
@@ -58,7 +64,7 @@ const Container = styled('label', containerAttrs)`
   align-content: center;
   color: ${(props) => props.theme.colors.black};
   position: relative;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 16px;
   user-select: none;
 
@@ -83,7 +89,7 @@ const Container = styled('label', containerAttrs)`
           : props.theme.colors.green
         : props.isDisabled
         ? props.theme.colors.lightGray
-        : props.theme.colors.white};
+        : '#fff'};
     border-radius: 4px;
     border: 1px solid
       ${(props) =>
@@ -148,7 +154,8 @@ export default {
     ComponentWrapper,
     Container,
     InputCheckbox,
-    LabelText
+    LabelText,
+    CheckWrapper
   },
   props: {
     label: {
@@ -176,10 +183,11 @@ export default {
     dataId: {
       type: String,
       default: ''
-    },
-    cursorType: {
-      type: String,
-      default: 'pointer'
+    }
+  },
+  computed: {
+    hasLabel() {
+      return !!this.label.length
     }
   },
   methods: {