@eturnity/eturnity_reusable_components 9.16.0 → 9.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.16.0",
+  "version": "9.19.0",
   "files": [
     "dist",
     "src"
@@ -30,6 +30,7 @@
     "@vueform/slider": "2.1.10",
     "@vuepic/vue-datepicker": "6.1.0",
     "click-outside-vue3": "4.0.1",
+    "date-fns": "^4.1.0",
     "storybook": "8.2.9",
     "vite-plugin-require": "1.1.14",
     "vue": "3.3.4",

package/src/components/filter/filterSettings.vue

@@ -1,6 +1,35 @@
 <template>
   <ContainerWrapper @click="$emit('on-container-click')">
     <UpperContainer v-if="filterViews && filterViews.length">
+      <ViewContainer v-if="showActiveFilter" :max-width="activeView.length">
+        <SelectComponent
+          align-items="vertical"
+          :data-id="componentName + '_filter_view_select'"
+          :data-qa-id="componentName + '_filter_view_select'"
+          font-size="13px"
+          :label="$gettext('active_filter')"
+          select-height="36px"
+          select-width="100%"
+          @click.stop
+        >
+          <template #selector>
+            <OptionTitle>
+              {{ activeView }}
+            </OptionTitle>
+          </template>
+          <template #dropdown>
+            <Option
+              v-for="(item, idx) in filterViews"
+              :key="idx + '_view'"
+              :value="item.name"
+              @click="$emit('on-view-select', item)"
+            >
+              {{ item.name }}
+              <DeleteIcon @click.stop="$emit('on-view-delete', item)" />
+            </Option>
+          </template>
+        </SelectComponent>
+      </ViewContainer>
       <ResetButton
         :data-id="componentName + '_reset_filters_button'"
         :data-qa-id="componentName + '_reset_filters_button'"
@@ -76,15 +105,16 @@
               align-items="vertical"
               :data-id="componentName + '_' + filter.field + '_select'"
               :data-qa-id="componentName + '_' + filter.field + '_select'"
+              :defer-dropdown-slot-content="true"
               :disabled="!filter.choices.length"
               font-size="13px"
-              :is-searchable="filter.choices.length > 7"
+              :is-searchable="filter.choices.length > 5"
               :label="filter.label"
               :label-data-id="filter.dataId"
-              lazy-dropdown-content
               :min-option-length="1"
               select-height="36px"
               select-width="100%"
+              :should-use-teleport="true"
             >
               <template #selector>
                 <OptionTitle> {{ filter.selectedText }} </OptionTitle>
@@ -236,7 +266,7 @@
                   model-type="format"
                   :model-value="filter.range.start"
                   :placeholder="$gettext('Date from')"
-                  teleport="body"
+                  :teleport="true"
                   text-input
                   @close="onDatepickerBlur()"
                   @focus="onDatepickerFocus(filter.range)"
@@ -266,7 +296,7 @@
                   model-type="format"
                   :model-value="filter.range.end"
                   :placeholder="$gettext('Date to')"
-                  teleport="body"
+                  :teleport="true"
                   text-input
                   @close="onDatepickerBlur()"
                   @focus="onDatepickerFocus(filter.range)"
@@ -286,13 +316,14 @@
               align-items="vertical"
               :data-id="componentName + '_' + filter.field + '_select'"
               :data-qa-id="componentName + '_' + filter.field + '_select'"
+              :defer-dropdown-slot-content="true"
               :disabled="!filter.choices.length"
               font-size="13px"
-              :is-searchable="filter.choices.length > 7"
+              :is-searchable="filter.choices.length > 5"
               :label="filter.label"
-              lazy-dropdown-content
               select-height="36px"
               select-width="100%"
+              :should-use-teleport="true"
             >
               <template #selector="{ selectedValue }">
                 <OptionTitle>
@@ -574,6 +605,10 @@
       VueDatePicker,
     },
     props: {
+      showActiveFilter: {
+        required: false,
+        default: true,
+      },
       filterData: {
         required: true,
       },
@@ -726,7 +761,11 @@
         )
       },
       isRangeSelector(type) {
-        return type === 'integer_range' || type === 'number_range'
+        return (
+          type === 'integer_range' ||
+          type === 'number_range' ||
+          type === 'float_range'
+        )
       },
       isIntegerRange(type) {
         return type === 'integer_range'

package/src/components/filter/index.vue

@@ -18,6 +18,7 @@
       :filter-views="filterViews"
       :has-active-view="hasActiveView"
       :settings-translations="settingsTranslations"
+      :show-active-filter="showActiveFilter"
       @on-apply-current-view="onApplyCurrentView()"
       @on-cancel-view="onCancelSettings()"
       @on-container-click="onContainerClick()"
@@ -83,6 +84,11 @@
         default: null,
         required: false,
       },
+      showActiveFilter: {
+        required: false,
+        default: true,
+        type: Boolean,
+      },
       /** Host store slice (e.g. getCurrentFilterData) so the badge tracks live `filters`. */
       currentFilterData: {
         type: Object,
@@ -92,6 +98,7 @@
       componentName: {
         type: String,
         required: false,
+        default: null,
       },
     },
     data() {

package/src/components/icon/Icon.vue

@@ -224,10 +224,16 @@
       `
      &:hover svg path:not(.fix, .isStrokePath) {
       ${`${props.fillType}: ${
-        props.theme.colors[props.hoveredColor] || props.color
+        props.theme.colors[props.hoveredColor] ||
+        props.hoveredColor ||
+        props.color
       };`}
      &:hover svg isStrokePath:not(.fix) {
-      ${`stroke: ${props.theme.colors[props.hoveredColor] || props.color};`}
+      ${`stroke: ${
+        props.theme.colors[props.hoveredColor] ||
+        props.hoveredColor ||
+        props.color
+      };`}
     }
     &:hover + div {
       background-color: ${props.hoveredColor};

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

@@ -252,10 +252,15 @@
     },
     computed: {
       hasLabel() {
-        if (this.label == null || this.label === '') {
+        const label = this.label
+        if (label === null || label === undefined || label === '') {
           return false
         }
-        return String(this.label).length > 0
+        if (typeof label === 'string') {
+          return label.length > 0
+        }
+        // numbers and other primitives: .length is undefined on numbers (e.g. year 2023)
+        return true
       },
     },
     methods: {

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

@@ -198,10 +198,10 @@
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
             >
-              <!-- When lazy, skip building option/checkbox nodes until the user opens
-                   this select (filter settings can have thousands of options otherwise). -->
+              <!-- When deferDropdownSlotContent is true, slot VNodes are not created until the
+                   dropdown opens — avoids mounting huge option lists (e.g. library filters). -->
               <slot
-                v-if="!lazyDropdownContent || isDropdownOpen"
+                v-if="!deferDropdownSlotContent || isSelectDropdownShown"
                 name="dropdown"
               ></slot>
             </SelectDropdown>
@@ -732,7 +732,7 @@
         default: true,
       },
       /** If true, dropdown slot content is only rendered while the menu is open. */
-      lazyDropdownContent: {
+      deferDropdownSlotContent: {
         type: Boolean,
         required: false,
         default: false,
@@ -765,6 +765,7 @@
         selectTopPosition: 0,
         selectAndDropdownDistance: 0,
         animationFrameId: null,
+        optionLengthCount: 0,
       }
     },
     computed: {
@@ -772,15 +773,7 @@
         return this.errorMessage && this.errorMessage.length > 0
       },
       optionLength() {
-        if (this.isDropdownOpen) {
-          return this.$refs.dropdown.$el.childElementCount > 1
-            ? this.$refs.dropdown.$el.childElementCount
-            : this.$refs.dropdown.$el.children[0]
-            ? this.$refs.dropdown.$el.children[0].childElementCount
-            : 0
-        }
-
-        return 0
+        return this.optionLengthCount
       },
       isSearchBarVisible() {
         return (
@@ -841,9 +834,13 @@
           }, 10)
           await this.$nextTick()
           this.handleSetDropdownOffet()
+          this.refreshOptionLength()
           if (!this.isFixedDropdownPosition) this.calculateSelectTopPosition()
+          // Deferred dropdown slot content mounts after initial open in some hosts.
+          this.$nextTick(() => this.refreshOptionLength())
         } else {
           this.dropdownPosition.left = null
+          this.optionLengthCount = 0
           if (this.animationFrameId) {
             cancelAnimationFrame(this.animationFrameId)
             this.animationFrameId = null
@@ -865,6 +862,7 @@
         // Need to wait for 1ms to make sure the dropdown menu is shown in the DOM
         // before getting the distance between the select and the dropdown menu
         setTimeout(() => {
+          this.refreshOptionLength()
           this.getDistanceBetweenSelectAndDropdownMenu()
         }, 100)
       },
@@ -967,6 +965,21 @@
           el.style.display = 'inherit'
         })
       },
+      refreshOptionLength() {
+        const dropdownRef = this.$refs.dropdown
+        if (!dropdownRef || !dropdownRef.$el) {
+          this.optionLengthCount = 0
+          return
+        }
+        const dropdownEl = dropdownRef.$el
+        if (dropdownEl.childElementCount > 1) {
+          this.optionLengthCount = dropdownEl.childElementCount
+          return
+        }
+        this.optionLengthCount = dropdownEl.children[0]
+          ? dropdownEl.children[0].childElementCount
+          : 0
+      },
       clickOutside(event) {
         const dropdownRef = this.$refs.dropdown
         if (!this.isClickOutsideActive) return