@eturnity/eturnity_reusable_components 9.34.4 → 9.34.5

package/package.json

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

package/src/components/filter/filterSettings.vue

@@ -1,5 +1,33 @@
 <template>
   <ContainerWrapper @click="$emit('on-container-click')">
+    <PageSizeContainer v-if="pageSizeOptions && pageSizeOptions.length">
+      <SelectComponent
+        align-items="vertical"
+        :data-id="componentName + '_page_size_select'"
+        :data-qa-id="componentName + '_page_size_select'"
+        font-size="13px"
+        :is-searchable="false"
+        :label="$gettext('Shown')"
+        select-height="36px"
+        select-width="100%"
+        @click.stop
+        @input-change="$emit('on-page-size-change', $event)"
+      >
+        <template #selector>
+          <OptionTitle> {{ pageSize }} {{ pageSizeUnit }} </OptionTitle>
+        </template>
+        <template #dropdown>
+          <Option
+            v-for="(item, idx) in pageSizeOptions"
+            :key="idx + '_page_size'"
+            :data-id="`${componentName}_page_size_option_${idx + 1}`"
+            :value="item"
+          >
+            {{ item }} {{ pageSizeUnit }}
+          </Option>
+        </template>
+      </SelectComponent>
+    </PageSizeContainer>
     <UpperContainer v-if="filterViews && filterViews.length">
       <ViewContainer v-if="showActiveFilter" :max-width="activeView.length">
         <SelectComponent
@@ -564,6 +592,13 @@
     padding: 10px 14px;
   `
 
+  /** First row of the panel; separated from the view/filter controls below. */
+  const PageSizeContainer = styled.div`
+    padding: 10px 14px;
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+    max-width: 300px;
+  `
+
   const ResetButton = styled.div`
     display: inline-flex;
     gap: 16px;
@@ -578,6 +613,7 @@
     name: 'FilterSettings',
     components: {
       ContainerWrapper,
+      PageSizeContainer,
       ColumnWrapper,
       ColumnTitle,
       ColumnContainer,
@@ -642,6 +678,28 @@
         type: String,
         required: false,
       },
+      /** Current page size; shown on the selector. */
+      pageSize: {
+        type: [Number, String],
+        required: false,
+        default: null,
+      },
+      /**
+       * Selectable page sizes. Empty (the default) hides the control, so hosts
+       * that do not paginate are unaffected. Include the host's current value —
+       * otherwise the selector shows a size the user cannot pick again.
+       */
+      pageSizeOptions: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      /** Already-translated noun for the counted rows, e.g. "components". */
+      pageSizeUnit: {
+        type: String,
+        required: false,
+        default: '',
+      },
     },
     data() {
       return {

package/src/components/filter/index.vue

@@ -17,6 +17,9 @@
       :filter-data="filterData"
       :filter-views="filterViews"
       :has-active-view="hasActiveView"
+      :page-size="pageSize"
+      :page-size-options="pageSizeOptions"
+      :page-size-unit="pageSizeUnit"
       :settings-translations="settingsTranslations"
       :show-active-filter="showActiveFilter"
       @on-apply-current-view="onApplyCurrentView()"
@@ -24,6 +27,7 @@
       @on-container-click="onContainerClick()"
       @on-drag-change="$emit('on-drag-change', $event)"
       @on-filter-change="onFilterChange($event)"
+      @on-page-size-change="$emit('on-page-size-change', $event)"
       @on-prevent-close="onPreventClose($event)"
       @on-reset-filters="onResetFilters()"
       @on-save-new-view="$emit('on-save-new-view')"
@@ -56,6 +60,24 @@
       dropdownText: {
         required: false,
       },
+      /** Current page size; shown on the selector. */
+      pageSize: {
+        type: [Number, String],
+        required: false,
+        default: null,
+      },
+      /** Selectable page sizes. Empty (the default) hides the control. */
+      pageSizeOptions: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      /** Already-translated noun for the counted rows, e.g. "components". */
+      pageSizeUnit: {
+        type: String,
+        required: false,
+        default: '',
+      },
       filterViews: {
         required: true,
       },