From 4d59fcce47f9df0b383f95718d595f3cf84293b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?ay=C5=9Feturmusn?= Date: Thu, 22 Jan 2026 21:17:04 +0300 Subject: [PATCH 1/7] feat(DataTableToolbar): add tag filter story and fix filter content rendering --- .../crud-data/DataTableToolbar.stories.svelte | 677 +++++++++++++++++ .../admin/crud-data/DataTableToolbar.svelte | 697 ++++++++++++++++++ .../core/overlay-navigation/Dropdown.svelte | 2 +- hexawebshare/src/lib/index.ts | 8 + 4 files changed, 1383 insertions(+), 1 deletion(-) create mode 100644 hexawebshare/src/components/admin/crud-data/DataTableToolbar.stories.svelte diff --git a/hexawebshare/src/components/admin/crud-data/DataTableToolbar.stories.svelte b/hexawebshare/src/components/admin/crud-data/DataTableToolbar.stories.svelte new file mode 100644 index 00000000..179dc004 --- /dev/null +++ b/hexawebshare/src/components/admin/crud-data/DataTableToolbar.stories.svelte @@ -0,0 +1,677 @@ + + + + + + + +{#snippet filterContentSnippet()} +
+ +
+ +
+
+
+
+{/snippet} + + +{#snippet tagFilterContentSnippet()} +
+ + + +
+ { + tagFilterSearch = (e.target as HTMLInputElement).value; + }} + ariaLabel="Search tags" + class="w-full" + /> +
+ + + {#if selectedTags.length > 0} +
+ +
+ {#each selectedTags as tag (tag)} + { + selectedTags = selectedTags.filter((t) => t !== tag); + }} + removeLabel="Remove {tag}" + /> + {/each} +
+
+ {/if} + + +
+ +
+
+ {#each availableTags.filter((tag) => + !selectedTags.includes(tag) && + (tagFilterSearch === '' || tag.toLowerCase().includes(tagFilterSearch.toLowerCase())) + ) as tag (tag)} + { + if (!selectedTags.includes(tag)) { + selectedTags = [...selectedTags, tag]; + } + }} + ariaLabel="Select {tag}" + /> + {/each} +
+
+
+ + +
+
+
+{/snippet} + + + + {#snippet children()} +
+
+ +
+
+ {/snippet} + + + + + {#snippet children()} +
+
+ +
+
+ {/snippet} + + + + + {#snippet children()} +
+
+ +
+
+ {/snippet} + + + + + {#snippet children()} +
+
+ +
+
+ {/snippet} + + + + + {#snippet children()} +
+
+ +
+
+ {/snippet} + + + + + {#snippet children()} +
+
+ +
+
+ {/snippet} + + + + + {#snippet children()} +
+
+ +
+
+ {/snippet} + + + + + {#snippet children()} +
+
+ +
+
+ {/snippet} + + + + + {#snippet children()} +
+
+ +
+
+ {/snippet} + + + + + {#snippet children()} +
+
+ +
+
+ {/snippet} + + + + + {#snippet children()} +
+
+ +
+
+ {/snippet} + diff --git a/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte b/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte index 315da078..36fe99ff 100644 --- a/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte +++ b/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte @@ -2,3 +2,700 @@ SPDX-FileCopyrightText: 2025 hexaTune LLC SPDX-License-Identifier: MIT --> + + + + + + + + {/snippet}
-
+
+ + + {#if appliedTags.length > 0} +
+
+ + + + +
+ +
+ {#each appliedTags as tag (tag)} + + {/each} +
+
+ {:else} +
+ +
+ {/if}
+ + + {#if showApplyToast} + 0 ? `Applied ${appliedTags.length} filter${appliedTags.length > 1 ? 's' : ''}` : 'No filters selected'} + variant="success" + position="top-right" + duration={3000} + showIcon={true} + closable={true} + onDismiss={() => { + showApplyToast = false; + }} + /> + {/if} + + {#if showClearToast} + { + showClearToast = false; + }} + /> + {/if}
{/snippet} @@ -581,6 +956,7 @@ SPDX-License-Identifier: MIT loading={true} searchPlaceholder="Search..." showSearch={true} + showFilter={true} searchSize="md" size="md" /> @@ -600,6 +976,7 @@ SPDX-License-Identifier: MIT disabled={true} searchPlaceholder="Search..." showSearch={true} + showFilter={true} searchSize="md" size="md" /> @@ -618,6 +995,7 @@ SPDX-License-Identifier: MIT actions={multipleActions} searchPlaceholder="Search..." showSearch={true} + showFilter={true} searchSize="md" size="md" /> @@ -634,6 +1012,7 @@ SPDX-License-Identifier: MIT diff --git a/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte b/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte index 36fe99ff..0ce28ad4 100644 --- a/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte +++ b/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte @@ -226,6 +226,11 @@ A comprehensive toolbar component for data tables with search, actions, filters, * Custom filter content snippet */ filterContent?: Snippet; + /** + * Empty filter state text (shown when no filter content provided) + * @default 'No filter' + */ + noFilterText?: string; /** * View options (density, column visibility, etc.) */ @@ -300,6 +305,14 @@ A comprehensive toolbar component for data tables with search, actions, filters, * Clear selection handler */ onClearSelection?: () => void; + /** + * Filter apply handler (called when filter is applied) + */ + onFilterApply?: (filters: unknown) => void; + /** + * Filter clear/reset handler (called when filter is cleared) + */ + onFilterClear?: () => void; /** * Additional CSS classes */ @@ -320,6 +333,7 @@ A comprehensive toolbar component for data tables with search, actions, filters, filterLabel = 'Filter', filterOpen = $bindable(false), filterContent, + noFilterText = 'No filter', viewOptions = [], viewValue = $bindable(''), showViewOptions = false, @@ -336,6 +350,8 @@ A comprehensive toolbar component for data tables with search, actions, filters, onsearch, onViewChange, onClearSelection, + onFilterApply, + onFilterClear, class: className = '', ...props }: Props = $props(); @@ -437,7 +453,7 @@ A comprehensive toolbar component for data tables with search, actions, filters, This is a structural container (toolbar wrapper) with no semantic or interactive behavior. No suitable library component exists for generic layout wrappers. --> -