@eturnity/eturnity_reusable_components 9.13.5 → 9.16.0

package/dist/index.es3.js

@@ -788,6 +788,31 @@ const theme = (() => {
           iconWidth: "14px"
         }
       }
+    },
+    chartGradients: {
+      simple: {
+        from: semanticColors.purple[500],
+        to: semanticColors.purple[400]
+      },
+      stacked: [{
+        from: "#F5EDFF",
+        to: "#DEC5FF"
+      }, {
+        from: "#CAA2FF",
+        to: "#F2E8FF"
+      }, {
+        from: "#B987FC",
+        to: "#904AEF"
+      }, {
+        from: "#8B40F2",
+        to: "#4A1394"
+      }, {
+        from: "#6A05F2",
+        to: "#4905A5"
+      }, {
+        from: "#5402C3",
+        to: "#2B0362"
+      }]
     }
   };
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.13.5",
+  "version": "9.16.0",
   "files": [
     "dist",
     "src"

package/src/assets/theme.js

@@ -790,6 +790,20 @@ const theme = (() => {
         },
       },
     },
+    chartGradients: {
+      simple: {
+        from: semanticColors.purple[500],
+        to: semanticColors.purple[400],
+      },
+      stacked: [
+        { from: '#F5EDFF', to: '#DEC5FF' },
+        { from: '#CAA2FF', to: '#F2E8FF' },
+        { from: '#B987FC', to: '#904AEF' },
+        { from: '#8B40F2', to: '#4A1394' },
+        { from: '#6A05F2', to: '#4905A5' },
+        { from: '#5402C3', to: '#2B0362' },
+      ],
+    },
   }
 })()
 

package/src/components/filter/filterSettings.vue

@@ -1,35 +1,6 @@
 <template>
   <ContainerWrapper @click="$emit('on-container-click')">
     <UpperContainer v-if="filterViews && filterViews.length">
-      <ViewContainer :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'"
@@ -110,10 +81,10 @@
               :is-searchable="filter.choices.length > 7"
               :label="filter.label"
               :label-data-id="filter.dataId"
+              lazy-dropdown-content
               :min-option-length="1"
               select-height="36px"
               select-width="100%"
-              :should-use-teleport="false"
             >
               <template #selector>
                 <OptionTitle> {{ filter.selectedText }} </OptionTitle>
@@ -261,9 +232,11 @@
                   :enable-time-picker="false"
                   format="yyyy-MM-dd"
                   :locale="getDatePickerLanguage()"
+                  menu-class-name="filter-settings-dp-menu"
                   model-type="format"
                   :model-value="filter.range.start"
                   :placeholder="$gettext('Date from')"
+                  teleport="body"
                   text-input
                   @close="onDatepickerBlur()"
                   @focus="onDatepickerFocus(filter.range)"
@@ -289,9 +262,11 @@
                   :enable-time-picker="false"
                   format="yyyy-MM-dd"
                   :locale="getDatePickerLanguage()"
+                  menu-class-name="filter-settings-dp-menu"
                   model-type="format"
                   :model-value="filter.range.end"
                   :placeholder="$gettext('Date to')"
+                  teleport="body"
                   text-input
                   @close="onDatepickerBlur()"
                   @focus="onDatepickerFocus(filter.range)"
@@ -315,9 +290,9 @@
               font-size="13px"
               :is-searchable="filter.choices.length > 7"
               :label="filter.label"
+              lazy-dropdown-content
               select-height="36px"
               select-width="100%"
-              :should-use-teleport="false"
             >
               <template #selector="{ selectedValue }">
                 <OptionTitle>
@@ -560,7 +535,6 @@
     display: inline-flex;
     gap: 16px;
     width: max-content;
-    margin-top: 20px;
     align-self: center;
     font-size: 13px;
     color: ${(props) => props.theme.colors.primary};
@@ -745,7 +719,11 @@
         return type === 'boolean'
       },
       isMultipleSelector(type) {
-        return type === 'multi_select_integer' || type === 'multi_select_string'
+        return (
+          type === 'multi_select_integer' ||
+          type === 'multi_select_string' ||
+          type === 'multiple_choice'
+        )
       },
       isRangeSelector(type) {
         return type === 'integer_range' || type === 'number_range'
@@ -754,8 +732,16 @@
         return type === 'integer_range'
       },
       isDateSelector(type) {
-        return type === 'datetime'
+        return type === 'datetime' || type === 'date_range'
       },
     },
   }
 </script>
+
+<!-- Teleported menu is under body; unscoped. Expert main.scss also sets z-index so linked package builds pick it up. -->
+<style>
+  /* Must exceed app modal stacks (often ~1e7 in eturnity_expert); default dp menu is 99999. */
+  body .dp__menu.filter-settings-dp-menu {
+    z-index: 10000050 !important;
+  }
+</style>

package/src/components/filter/index.vue

@@ -8,7 +8,8 @@
       @on-toggle="onToggleDropdown()"
     />
     <FilterSettings
-      v-if="isDropdownOpen"
+      v-if="filterSettingsInDOM"
+      v-show="isDropdownOpen"
       :active-language="activeLanguage"
       :active-view="activeView"
       :button-text="buttonText"
@@ -82,6 +83,12 @@
         default: null,
         required: false,
       },
+      /** Host store slice (e.g. getCurrentFilterData) so the badge tracks live `filters`. */
+      currentFilterData: {
+        type: Object,
+        default: null,
+        required: false,
+      },
       componentName: {
         type: String,
         required: false,
@@ -92,14 +99,62 @@
         isDropdownOpen: false,
         activeFilter: null,
         preventOutsideClick: false,
+        /** Once true, FilterSettings stays mounted; toggled with v-show for instant reopen. */
+        filterSettingsInDOM: false,
+        _unmounted: false,
+        _idlePrewarmId: null,
+        _prewarmTimerId: null,
       }
     },
     computed: {
+      /** Count applied data filters for the settings-trigger badge (not column visibility). */
       numberOfFiltersApplied() {
-        const filterColumns = this.activeFilterView?.columns?.filter(
-          (column) => column.custom_view_filter !== null
-        )
-        return filterColumns?.length > 0 ? filterColumns.length : 0
+        const view = this.activeFilterView
+        const live = this.currentFilterData
+        const resolvedFilters =
+          live != null && Array.isArray(live.filters)
+            ? live.filters
+            : view && Array.isArray(view.filters)
+              ? view.filters
+              : []
+
+        const countFromFilterList = (filters) => {
+          if (!Array.isArray(filters) || !filters.length) {
+            return 0
+          }
+          const first = filters[0]
+          if (
+            first &&
+            typeof first === 'object' &&
+            'custom_view_filter' in first
+          ) {
+            return filters.filter((f) => f && f.custom_view_filter).length
+          }
+          // Flat rows (library / tariffs): multi-select emits one row per value —
+          // badge = number of filter *fields* narrowed, not row count.
+          if (first && typeof first === 'object' && 'field' in first) {
+            return new Set(filters.map((f) => f.field).filter(Boolean)).size
+          }
+          return filters.length
+        }
+
+        const filtersCount = countFromFilterList(resolvedFilters)
+
+        if (!view) {
+          return filtersCount
+        }
+
+        const cols = view.columns
+        if (Array.isArray(cols) && cols.length && typeof cols[0] === 'string') {
+          return filtersCount
+        }
+        if (Array.isArray(cols)) {
+          const n = cols.filter(
+            (c) => c && typeof c === 'object' && c.custom_view_filter
+          ).length
+          return n > 0 ? n : filtersCount
+        }
+        return filtersCount
       },
     },
     watch: {
@@ -111,13 +166,49 @@
     },
     mounted() {
       document.addEventListener('click', this.clickOutside)
+      // Build the heavy panel during idle so the first click often only toggles v-show.
+      const prewarm = () => {
+        if (this._unmounted || this.filterSettingsInDOM) {
+          return
+        }
+        this.filterSettingsInDOM = true
+      }
+      if (typeof requestIdleCallback !== 'undefined') {
+        this._idlePrewarmId = requestIdleCallback(prewarm, { timeout: 2000 })
+      } else {
+        this._prewarmTimerId = setTimeout(prewarm, 600)
+      }
     },
     beforeUnmount() {
+      this._unmounted = true
+      if (
+        this._idlePrewarmId != null &&
+        typeof cancelIdleCallback !== 'undefined'
+      ) {
+        cancelIdleCallback(this._idlePrewarmId)
+      }
+      if (this._prewarmTimerId != null) {
+        clearTimeout(this._prewarmTimerId)
+      }
       document.removeEventListener('click', this.clickOutside)
     },
     methods: {
+      emitFilterPanelOpen() {
+        this.$nextTick(() => {
+          if (this.isDropdownOpen) {
+            this.$emit('on-filter-panel-open')
+          }
+        })
+      },
       onToggleDropdown() {
+        const opening = !this.isDropdownOpen
         this.isDropdownOpen = !this.isDropdownOpen
+        if (opening) {
+          if (!this.filterSettingsInDOM) {
+            this.filterSettingsInDOM = true
+          }
+          this.emitFilterPanelOpen()
+        }
       },
       onContainerClick() {
         // due to newer versions of Chrome (121), contains() is not always working.

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

@@ -252,7 +252,10 @@
     },
     computed: {
       hasLabel() {
-        return !!this.label && !!this.label.length
+        if (this.label == null || this.label === '') {
+          return false
+        }
+        return String(this.label).length > 0
       },
     },
     methods: {

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

@@ -198,7 +198,12 @@
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
             >
-              <slot name="dropdown"></slot>
+              <!-- When lazy, skip building option/checkbox nodes until the user opens
+                   this select (filter settings can have thousands of options otherwise). -->
+              <slot
+                v-if="!lazyDropdownContent || isDropdownOpen"
+                name="dropdown"
+              ></slot>
             </SelectDropdown>
           </Component>
         </DropdownWrapper>
@@ -726,6 +731,12 @@
         required: false,
         default: true,
       },
+      /** If true, dropdown slot content is only rendered while the menu is open. */
+      lazyDropdownContent: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
     setup() {
       const modalRef = inject('modalRef', null)

package/src/components/pagination/index.vue

@@ -10,7 +10,7 @@
     >
       <ArrowIconContainer>
         <RCIcon
-          :color="getTheme.colors.brightBlue"
+          :color="getTheme.colors.primary"
           name="arrow_left"
           size="12px"
         />
@@ -73,7 +73,7 @@
       <ArrowText>{{ $gettext('forward') }}</ArrowText>
       <ArrowIconContainer>
         <RCIcon
-          :color="getTheme.colors.brightBlue"
+          :color="getTheme.colors.primary"
           name="arrow_right"
           size="12px"
         />
@@ -88,7 +88,7 @@
   import theme from '@/assets/theme.js'
 
   const PaginationWrapper = styled.nav`
-    color: ${(props) => props.theme.colors.brightBlue};
+    color: ${(props) => props.theme.colors.primary};
     font-size: 13px;
     display: flex;
     flex-wrap: wrap;
@@ -103,17 +103,23 @@
     border-radius: 3px;
     white-space: nowrap;
     cursor: pointer;
-    color: ${(props) => props.theme.colors.brightBlue};
+    height: 100%;
+    align-items: center;
+    color: ${(props) => props.theme.colors.primary};
+    &:hover {
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      background-color: ${(props) => props.theme.semanticColors.purple[100]};
+    }
 
     &.active {
-      color: ${(props) => props.theme.colors.white};
-      background-color: ${(props) => props.theme.colors.brightBlue};
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      background-color: ${(props) => props.theme.semanticColors.purple[50]};
       padding: 7px 12px;
       border-radius: 4px;
     }
   `
   const ArrowText = styled.div`
-    color: ${(props) => props.theme.colors.brightBlue};
+    color: ${(props) => props.theme.colors.primary};
   `
   const ArrowIconContainer = styled.div`
     margin: 0 10px;

package/src/components/threeDots/index.vue

@@ -54,7 +54,14 @@
             v-for="(item, index) in options"
             :key="item.value"
             :color-theme="colorTheme"
-            :data-id="item.dataId"
+            :data-id="
+              item.dataId ||
+              'three_dots_option_item_' + rowIndex + '_' + item.value
+            "
+            :data-qa-id="
+              item.dataId ||
+              'three_dots_option_item_' + rowIndex + '_' + item.value
+            "
             :is-disabled="item.disabled"
             tabindex="0"
             :title="item.title"
@@ -359,6 +366,11 @@
         default: '',
         type: String,
       },
+      rowIndex: {
+        required: false,
+        default: 0,
+        type: Number,
+      },
     },
     data() {
       return {