@eturnity/eturnity_reusable_components 9.34.7 → 9.37.0-ATE-95.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.34.7",
+  "version": "9.37.0-ATE-95.0",
   "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,12 @@
     padding: 10px 14px;
   `
 
+  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 +612,7 @@
     name: 'FilterSettings',
     components: {
       ContainerWrapper,
+      PageSizeContainer,
       ColumnWrapper,
       ColumnTitle,
       ColumnContainer,
@@ -642,6 +677,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,
       },

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

@@ -14,15 +14,7 @@
     :data-value="domDataValue"
     :disabled-bg-color="disabledBgColor"
     :disabled-text-color="disabledTextColor"
-    :hovered-bg-color="
-      colorMode == 'dark'
-        ? theme.semanticColors.teal[800]
-        : colorMode == 'transparent'
-        ? 'grey6'
-        : hoveredBgColor
-        ? hoveredBgColor
-        : 'grey5'
-    "
+    :hovered-bg-color="hoveredBackgroundColor"
     :is-disabled="isDisabled"
     :min-width="minWidth"
     :padding="padding"
@@ -172,6 +164,11 @@
       }
     },
     computed: {
+      hoveredBackgroundColor() {
+        if (this.colorMode == 'dark') return theme.semanticColors.teal[800]
+        if (this.colorMode == 'transparent') return 'grey6'
+        return this.hoveredBgColor || theme.semanticColors.grey[300]
+      },
       /** Vue omits `data-value` when bound to null, so the parent select cannot find this row for search filtering. */
       domDataValue() {
         const v = this.value

package/src/components/inputs/select/option/option.spec.js

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Option from '@/components/inputs/select/option'
+import theme from '@/assets/theme'
+
+describe('RCoption', () => {
+  const mountOption = (props = {}) =>
+    mount(Option, {
+      props: { value: 'a', ...props },
+      slots: { default: 'Option A' },
+    })
+
+  it('hovers on grey 300 by default', () => {
+    expect(mountOption().vm.hoveredBackgroundColor).toBe(
+      theme.semanticColors.grey[300]
+    )
+  })
+
+  it('lets an explicit hoveredBgColor win over the default', () => {
+    expect(
+      mountOption({ hoveredBgColor: 'grey4' }).vm.hoveredBackgroundColor
+    ).toBe('grey4')
+  })
+
+  it('keeps its own hover colours in dark and transparent colour modes', () => {
+    expect(mountOption({ colorMode: 'dark' }).vm.hoveredBackgroundColor).toBe(
+      theme.semanticColors.teal[800]
+    )
+    expect(
+      mountOption({ colorMode: 'transparent' }).vm.hoveredBackgroundColor
+    ).toBe('grey6')
+  })
+})

package/src/components/tableDropdown/index.vue

@@ -365,7 +365,7 @@
     }
 
     &:hover {
-      background-color: ${(props) => props.theme.colors.grey5};
+      background-color: ${(props) => props.theme.semanticColors.grey[300]};
     }
   `
 
@@ -420,7 +420,7 @@
     height: 37px;
 
     &:hover {
-      background-color: ${(props) => props.theme.colors.grey5};
+      background-color: ${(props) => props.theme.semanticColors.grey[300]};
     }
   `
 

package/src/components/tables/mainTable/index.vue

@@ -143,11 +143,13 @@
           .arrow-container,
           .input-placeholder,
           .table-dropdown-item {
-            background-color: ${(props) => props.theme.colors.grey5};
+            background-color: ${(props) =>
+              props.theme.semanticColors.grey[300]};
           }
 
           input {
-            background-color: ${(props) => props.theme.colors.grey5};
+            background-color: ${(props) =>
+              props.theme.semanticColors.grey[300]};
           }
         }
 
@@ -337,7 +339,7 @@
       &:hover {
         input:disabled {
           background-color: ${(props) =>
-            props.theme.colors.grey5 + '!important'};
+            props.theme.semanticColors.grey[300] + '!important'};
         }
 
         .drag-icon {
@@ -345,7 +347,7 @@
         }
 
         .drag-wrapper {
-          background-color: ${(props) => props.theme.colors.grey5};
+          background-color: ${(props) => props.theme.semanticColors.grey[300]};
         }
 
         .arrow-dropdown {
@@ -416,7 +418,7 @@
       height: unset;
 
       &:focus {
-        background: ${(props) => props.theme.colors.grey5};
+        background: ${(props) => props.theme.semanticColors.grey[300]};
       }
     }
 

package/src/components/threeDots/index.vue

@@ -254,12 +254,12 @@
       background-color: ${(props) =>
         props.colorTheme == 'dark'
           ? theme.semanticColors.teal[700]
-          : '#ebeef4'};
+          : theme.semanticColors.grey[300]};
     }
 
     &:focus-visible {
       outline: none;
-      background-color: #ebeef4;
+      background-color: ${theme.semanticColors.grey[300]};
     }
   `
   const OptionChild = styled('div', { colorTheme: String })`
@@ -272,12 +272,12 @@
       background-color: ${(props) =>
         props.colorTheme == 'dark'
           ? theme.semanticColors.teal[600]
-          : '#ebeef4'};
+          : theme.semanticColors.grey[300]};
     }
 
     &:focus-visible {
       outline: none;
-      background-color: #ebeef4;
+      background-color: ${theme.semanticColors.grey[300]};
     }
   `
 
@@ -358,7 +358,7 @@
       },
       hoveredBackgroundColor: {
         type: String,
-        default: theme.colors.grey5,
+        default: theme.semanticColors.grey[300],
       },
       dataId: {
         required: false,