diff --git a/.changeset/dry-canyons-ring.md b/.changeset/dry-canyons-ring.md new file mode 100644 index 0000000000..0dbb3e491b --- /dev/null +++ b/.changeset/dry-canyons-ring.md @@ -0,0 +1,5 @@ +--- +"sit-onyx": minor +--- + +feat(OnyxDataGrid) implemented a column search inside the hideColumns feature. diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-chrome-linux.png index 71421f601a..9bcff6251b 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-chrome-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-chrome-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-firefox-linux.png index 9e3ac85567..e70cf5a5d8 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-webkit-linux.png index 4bc861eee1..5a553073cd 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-chrome-linux.png index d468409f9f..ed30cf4067 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-chrome-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-chrome-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-firefox-linux.png index 79fa39d8e2..24d24202b4 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-webkit-linux.png index 395f57c8f8..9ff3a43428 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-chrome-linux.png index b8df8bfa07..ee492026a7 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-chrome-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-chrome-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-firefox-linux.png index 9871845c8f..0864199144 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-webkit-linux.png index 5cfde9b1a3..9d1cc89408 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-chrome-linux.png index b3d2189e7c..b12ed60c71 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-chrome-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-chrome-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-firefox-linux.png index d121ab53b0..628fd651e0 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-webkit-linux.png index 84dafb5f2f..fe447724e0 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-chrome-linux.png index 4d2cf37cd8..868ba77cc4 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-chrome-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-chrome-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-firefox-linux.png index 0adab36ecd..34cc1d89d7 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-webkit-linux.png index 80c4056418..f3e90f74e2 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-chrome-linux.png new file mode 100644 index 0000000000..6354c2f2d4 Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-chrome-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-firefox-linux.png new file mode 100644 index 0000000000..00e4781442 Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-webkit-linux.png new file mode 100644 index 0000000000..e6d5fb847b Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-webkit-linux.png differ diff --git a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/TestCase.ct.vue b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/TestCase.ct.vue index d51805df89..53f41183db 100644 --- a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/TestCase.ct.vue +++ b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/TestCase.ct.vue @@ -38,5 +38,11 @@ const features = computed(() => [withHideColumns.value]); + + diff --git a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ct.tsx b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ct.tsx index a139189494..b8feaa03b1 100644 --- a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ct.tsx @@ -70,6 +70,49 @@ test("should hide and show columns", async ({ mount }) => { }); }); +test("should filter hidden columns via search", async ({ mount }) => { + const state = ref<(keyof Entry)[]>([]); + // ARRANGE + const component = await mount( + (state.value = newState)} allHidable />, + ); + const revealButton = component.getByRole("button", { name: "Show hidden columns" }); + const menuItem = component.getByRole("menuitem", { name: "Hide column" }); + const openMoreActions = async (name: string) => + component + .getByRole("columnheader", { name: `${name} Toggle column actions`, exact: true }) + .getByLabel("Toggle column actions") + .click(); + + await openMoreActions("a"); + await component.getByRole("menuitem", { name: "Hide column" }).click(); + await openMoreActions("c"); + await menuItem.click(); + + await revealButton.click(); + + const searchInput = component.getByRole("textbox", { name: "Filter the list items" }); + + await test.step("Filter the list", async () => { + await searchInput.fill("a"); + + await expect(component.getByRole("menuitem", { name: "a", exact: true })).toBeVisible(); + await expect(component.getByRole("menuitem", { name: "c", exact: true })).toBeHidden(); + await expect(component).toHaveScreenshot("data-grid-hide-columns-search-filtered.png"); + }); + + await test.step("Clear search via clear button", async () => { + await component.getByRole("button", { name: "Clear" }).click(); + await expect(searchInput).toHaveValue(""); + await expect(component.getByRole("menuitem", { name: "c", exact: true })).toBeVisible(); + }); + + await test.step("Search with no results", async () => { + await searchInput.fill("non-existent-column"); + await expect(component.getByRole("menuitem")).toHaveCount(0); + }); +}); + test("last Column should not be hidable", async ({ mount }) => { const state = ref<(keyof Entry)[]>([]); diff --git a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ts b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ts index 60fc9da3f1..4bf17c7912 100644 --- a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ts +++ b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ts @@ -1,7 +1,9 @@ import { iconCircleInformation, iconEyeDisabled, iconPlusSmall } from "@sit-onyx/icons"; import { computed, h, ref, toRef, type AriaAttributes, type Ref } from "vue"; import type { ComponentSlots } from "vue-component-type-helpers"; +import { normalizedIncludes } from "../../../../utils/strings.js"; import OnyxIcon from "../../../OnyxIcon/OnyxIcon.vue"; +import OnyxMiniSearch from "../../../OnyxMiniSearch/OnyxMiniSearch.vue"; import OnyxFlyoutMenu from "../../../OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue"; import OnyxMenuItem from "../../../OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue"; import OnyxSystemButton from "../../../OnyxSystemButton/OnyxSystemButton.vue"; @@ -32,6 +34,8 @@ export const useHideColumns = ( columnConfig.value.filter((c) => hiddenColumnKeys.value.has(c.key)), ); + const searchTerm = ref(""); + const flyoutMenu = () => h( OnyxFlyoutMenu, @@ -50,17 +54,30 @@ export const useHideColumns = ( ...trigger, }), options: () => { - return Array.from(hiddenColumns.value) - .sort((a, b) => Intl.Collator(i18n.locale.value).compare(a.label, b.label)) - .map(({ key, label }) => - h( - OnyxMenuItem, - { - onClick: () => hiddenColumnKeys.value.delete(key), - }, - () => label, + return [ + h(OnyxMiniSearch, { + label: i18n.t.value("select.searchInputLabel"), + modelValue: searchTerm.value, + "onUpdate:modelValue": (value: string) => (searchTerm.value = value), + onClear: () => (searchTerm.value = ""), + autofocus: true, + }), + Array.from(hiddenColumns.value) + .filter(({ label }) => { + if (!searchTerm.value) return true; + return normalizedIncludes(label, searchTerm.value); + }) + .sort((a, b) => Intl.Collator(i18n.locale.value).compare(a.label, b.label)) + .map(({ key, label }) => + h( + OnyxMenuItem, + { + onClick: () => hiddenColumnKeys.value.delete(key), + }, + () => label, + ), ), - ); + ]; }, } satisfies ComponentSlots, ); diff --git a/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue b/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue index 410a257db2..6ca3941567 100644 --- a/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue +++ b/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue @@ -55,6 +55,7 @@ defineExpose({ :class="['onyx-component', 'onyx-mini-search', densityClass]" v-bind="rootAttrs" :style="{ '--onyx-placeholder-character-count': placeholder.length }" + @click.stop >