@eturnity/eturnity_reusable_components 7.4.4-EPDM-7260.16 → 7.4.4-EPDM-7260.18

package/src/components/dropdown/index.vue

@@ -1,119 +1,138 @@
 <template>
-    <wrapper ref="dropdown" :openingMode="openingMode">
-        <WrapperButton @click="isOpenByClick=!isOpenByClick">
-            <slot name="trigger"/>
-        </WrapperButton>
-        <WrapperDropdown class="dropdown-content" :class="{openDropdown:isOpenByClick && openingMode=='click'}" :justify="justify" :position="position" :width="width" :backgroundColor="backgroundColor">
-          <DropdownWindow :gap="gap" :backgroundColor="backgroundColor" :width="width">
-            <slot name="dropdown"/>
-          </DropdownWindow>
-        </WrapperDropdown>
-    </wrapper>
-  </template>
-  
-  <script>
-  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-  //  How to use:
-  //<DropdownComponent
-  //    width="300px"
-  //    backgroundColor="red">
+  <wrapper ref="dropdown" :openingMode="openingMode">
+    <WrapperButton @click="isOpenByClick = !isOpenByClick">
+      <slot name="trigger" />
+    </WrapperButton>
+    <WrapperDropdown
+      class="dropdown-content"
+      :class="{ openDropdown: isOpenByClick && openingMode == 'click' }"
+      :justify="justify"
+      :position="position"
+      :width="width"
+      :backgroundColor="backgroundColor"
+    >
+      <DropdownWindow
+        :gap="gap"
+        :backgroundColor="backgroundColor"
+        :width="width"
+      >
+        <slot name="dropdown" />
+      </DropdownWindow>
+    </WrapperDropdown>
+  </wrapper>
+</template>
 
-  // <DropdownComponent/>
-  
-  import styled from 'vue-styled-components'
-  
-  const wrapperAttrs = { width: String, backgroundColor:String,openingMode:String,gap:String,justify:String }
-  const Wrapper = styled('div', wrapperAttrs)`
-    display: inline-block;
-    position: relative;
+<script>
+// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+//  How to use:
+//<DropdownComponent
+//    width="300px"
+//    backgroundColor="red">
 
-    &:hover .dropdown-content {
-        ${props=>props.openingMode=='hover'?"display:block":""}
-    }
-    & .openDropdown{
-        ${props=>props.openingMode=='click'?"display:block !important":""}
-    }
-  `
-  const WrapperDropdown = styled('div', wrapperAttrs)`
-    margin-top: 0;
-    display: none;
-    position: absolute;
-    z-index: 1;
-    ${(props) => props.justify=="right"?"right:0;":""}
-  `
-  const DropdownWindow = styled('div', wrapperAttrs)`
-    width: ${(props) => props.width};
-    background-color: ${(props) => props.theme.colors[props.backgroundColor] || props.backgroundColor};
-    margin-top: ${(props) => props.gap};
-    border-radius: 4px;
-    position: relative;
-    min-width: 160px;
-    box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.302);
-    z-index: 1;
-  `
-  
-  const WrapperButton = styled('div', wrapperAttrs)`
-    display: inline-block;
-  `
-  
-  export default {
-    name: 'DropdownComponent',
-    components: {
-        WrapperDropdown,
-        WrapperButton,
-        Wrapper,
-        DropdownWindow
-    },
-    props: {
-      width: {
-        required: false,
-        default: '300px'
-      },
-      gap: {
-        required: false,
-        default: '10px'
-      },
-      position: {
-        required: false,
-        default: 'bottom'
-      },
-      justify: {
-        required: false,
-        default: 'left'
-      },
-      openingMode: {
-        required: false,
-        default: 'hover'
-      },
-      backgroundColor: {
-        required: false,
-        default: 'white'
-      }
+// <DropdownComponent/>
+
+import styled from 'vue3-styled-components'
+
+const wrapperAttrs = {
+  width: String,
+  backgroundColor: String,
+  openingMode: String,
+  gap: String,
+  justify: String
+}
+const Wrapper = styled('div', wrapperAttrs)`
+  display: inline-block;
+  position: relative;
+
+  &:hover .dropdown-content {
+    ${(props) => (props.openingMode == 'hover' ? 'display:block' : '')}
+  }
+  & .openDropdown {
+    ${(props) =>
+      props.openingMode == 'click' ? 'display:block !important' : ''}
+  }
+`
+const WrapperDropdown = styled('div', wrapperAttrs)`
+  margin-top: 0;
+  display: none;
+  position: absolute;
+  z-index: 1;
+  ${(props) => (props.justify == 'right' ? 'right:0;' : '')}
+`
+const DropdownWindow = styled('div', wrapperAttrs)`
+  width: ${(props) => props.width};
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor] || props.backgroundColor};
+  margin-top: ${(props) => props.gap};
+  border-radius: 4px;
+  position: relative;
+  min-width: 160px;
+  box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.302);
+  z-index: 1;
+`
+
+const WrapperButton = styled('div', wrapperAttrs)`
+  display: inline-block;
+`
+
+export default {
+  name: 'DropdownComponent',
+  components: {
+    WrapperDropdown,
+    WrapperButton,
+    Wrapper,
+    DropdownWindow
+  },
+  props: {
+    width: {
+      required: false,
+      default: '300px'
     },
-    data() {
-      return {
-        isOpenByClick:false
-      }
+    gap: {
+      required: false,
+      default: '10px'
     },
-    methods:{
-        clickOutside(event) {
-            if (this.openingMode!="click") return
-            if (
-                this.$refs.dropdown.$el == event.target ||
-                this.$refs.dropdown.$el.contains(event.target)
-            ) {
-                return
-            } else {
-                this.isOpenByClick=false
-            }
-        },
+    position: {
+      required: false,
+      default: 'bottom'
     },
-    mounted() {
-        document.addEventListener('click', this.clickOutside)
+    justify: {
+      required: false,
+      default: 'left'
     },
-    beforeDestroy() {
-        document.removeEventListener('click', this.clickOutside)
+    openingMode: {
+      required: false,
+      default: 'hover'
     },
+    backgroundColor: {
+      required: false,
+      default: 'white'
+    }
+  },
+  data() {
+    return {
+      isOpenByClick: false
+    }
+  },
+  methods: {
+    clickOutside(event) {
+      if (this.openingMode != 'click') return
+      if (
+        this.$refs.dropdown &&
+        (this.$refs.dropdown.$el == event.target ||
+          this.$refs.dropdown.$el.contains(event.target))
+      ) {
+        return
+      } else {
+        this.isOpenByClick = false
+      }
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.clickOutside)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.clickOutside)
   }
-  </script>
-  
+}
+</script>

package/src/components/errorMessage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <component-wrapper>
-    <text-overlay>
+    <text-overlay :marginTop="marginTop">
       <slot></slot>
     </text-overlay>
   </component-wrapper>
@@ -11,11 +11,11 @@
 //To use:
 // <error-message />
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 
-const TextOverlay = styled.div`
+const TextOverlay = styled('div', { marginTop: String })`
   position: absolute;
-  top: calc(100% + 13px);
+  top: calc(100% + ${(props) => props.marginTop});
   background: ${(props) => props.theme.colors.red};
   padding: 10px;
   width: max-content;
@@ -50,7 +50,12 @@ export default {
     TextOverlay,
     ComponentWrapper
   },
-  props: {},
+  props: {
+    marginTop: {
+      required: false,
+      default: '13px'
+    }
+  },
   methods: {},
   data() {
     return {}

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>
@@ -94,6 +94,7 @@
               :labelDataId="filter.dataId"
               alignItems="vertical"
               :disabled="!filter.choices.length"
+              :minOptionLength="1"
             >
               <template #selector>
                 <option-title> {{ filter.selectedText }} </option-title>
@@ -169,12 +170,20 @@
             >
               <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
               <grid-container>
-                <date-picker-input
+                <VueDatePicker
+                  text-input
                   :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="true"
+                  :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 +191,21 @@
                       field: filter.field
                     })
                   "
-                  @focus="onDatepickerFocus(filter.range)"
-                  @close="onDatepickerBlur()"
-                  format="YYYY-MM-DD"
-                  valueType="format"
-                  :disabled-date="disableFutureDates"
                 />
-                <date-picker-input
+                <VueDatePicker
+                  text-input
                   :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="true"
+                  :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 +213,6 @@
                       field: filter.field
                     })
                   "
-                  @focus="onDatepickerFocus(filter.range)"
-                  @close="onDatepickerBlur()"
-                  format="YYYY-MM-DD"
-                  valueType="format"
-                  :disabled-date="disablePastDates"
                 />
               </grid-container>
             </section-container>
@@ -247,19 +254,19 @@
         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')">
@@ -272,8 +279,7 @@
 </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 +290,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;
@@ -392,52 +393,13 @@ const DropdownCheckboxContainer = styled.div`
   gap: 6px;
   width: 100%;
   padding: 12px 10px;
+  background: ${(props) => props.theme.colors.grey5};
 `
 
 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 +464,6 @@ export default {
     Icon,
     DragContainer,
     InputNumber,
-    DatePickerInput,
     RowLabel,
     SectionContainer,
     GridContainer,
@@ -510,7 +471,8 @@ export default {
     DeleteIcon,
     UpperContainer,
     ResetButton,
-    ResetContainer
+    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 },