nuxt-ui-tools 0.1.0 → 0.1.1

package/dist/runtime/table/composables/use-filter-tag-session.js

@@ -1,8 +1,7 @@
-import { ref, watch } from "vue";
+import { ref } from "vue";
 export function useFilterTagSession(options) {
   const isOpen = options.isOpen ?? ref(false);
-  const lastActivationToken = ref(null);
-  let dismissLocked = false;
+  if (options.embedded) isOpen.value = true;
   function runCloseEffects() {
     options.onClose();
     if (options.session) {
@@ -11,22 +10,15 @@ export function useFilterTagSession(options) {
     }
     if (options.dynamic && !options.hasCommittedState()) options.onDismiss();
   }
-  function openWithLock() {
-    dismissLocked = true;
-    setTimeout(() => {
-      isOpen.value = true;
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          dismissLocked = false;
-        });
-      });
-    });
+  function open() {
+    if (isOpen.value) return;
+    isOpen.value = true;
+    options.onOpen();
   }
-  function handleOpenChange(open) {
-    if (!open && dismissLocked) return;
-    if (!open && !isOpen.value) return;
-    isOpen.value = open;
-    if (open) {
+  function handleOpenChange(nextOpen) {
+    if (!nextOpen && !isOpen.value) return;
+    isOpen.value = nextOpen;
+    if (nextOpen) {
       options.onOpen();
       return;
     }
@@ -37,22 +29,10 @@ export function useFilterTagSession(options) {
     isOpen.value = false;
     runCloseEffects();
   }
-  if (options.activationToken) {
-    queueMicrotask(() => {
-      watch(
-        options.activationToken,
-        (value) => {
-          if (value == null || value === lastActivationToken.value) return;
-          lastActivationToken.value = value;
-          options.onActivated();
-        },
-        { immediate: true }
-      );
-    });
-  }
+  if (options.embedded) queueMicrotask(options.onOpen);
   return {
     isOpen,
-    openWithLock,
+    open,
     handleOpenChange,
     close
   };

package/dist/runtime/table/composables/use-query-state.d.ts

@@ -1,5 +1,5 @@
 import { type ComputedRef } from 'vue';
-import type { TableFilterOperator, TableLayout, TableQueryStateFilterRule, TableQueryStateFilterValue, TableSchemaView } from '../types/index.js';
+import type { TableLayout, TableQueryStateFilterRule, TableSchemaView } from '../types/index.js';
 export interface UseQueryStateParams {
     schema: ComputedRef<TableSchemaView>;
     activeLayout: ComputedRef<TableLayout>;
@@ -40,9 +40,9 @@ export declare function useQueryState(params: UseQueryStateParams): {
     } | null>;
     filters: import("vue").WritableComputedRef<{
         search: string;
-        ui: TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue>[];
+        ui: TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[];
     }, {
         search: string;
-        ui: TableQueryStateFilterRule<string, TableFilterOperator, TableQueryStateFilterValue>[];
+        ui: TableQueryStateFilterRule<string, import("../types/index.js").TableFilterOperator, import("../types/index.js").TableQueryStateFilterValue>[];
     }>;
 };

package/dist/runtime/table/composables/use-query-state.js

@@ -12,8 +12,11 @@ import {
   getDefaultSort,
   getPaginationMode,
   normalizeFilterDefinition,
+  parseTableFilterQueryState,
+  resolveTableFilterDefaultRules,
   resolveFilterDefaultOperator,
-  resolveFilterSupportedOperators
+  resolveFilterSupportedOperators,
+  serializeTableFilterQueryState
 } from "../utils/index.js";
 export function useQueryState(params) {
   const defaultPageSize = getDefaultPageSize({
@@ -90,7 +93,7 @@ export function useQueryState(params) {
       ui: dynamicQueryState({
         urlPrefix: "ui",
         definitions: () => params.schema.value.filters?.ui ?? [],
-        defaultValue: [],
+        defaultValue: resolveTableFilterDefaultRules(params.schema.value.filters?.ui ?? []),
         resolve(filter) {
           const definition = normalizeFilterDefinition(filter);
           const operators = resolveFilterSupportedOperators(definition);
@@ -102,38 +105,10 @@ export function useQueryState(params) {
           }));
         },
         parse(entries, definitions) {
-          const rules = [];
-          for (const filter of definitions) {
-            const definition = normalizeFilterDefinition(filter);
-            const operators = resolveFilterSupportedOperators(definition);
-            const defaultOp = resolveFilterDefaultOperator(definition);
-            for (const op of operators) {
-              const urlKey = op === defaultOp ? definition.key : `${definition.key}~${op}`;
-              const value = entries.get(urlKey);
-              if (value != null) {
-                rules.push({
-                  key: definition.key,
-                  operator: op,
-                  value
-                });
-                break;
-              }
-            }
-          }
-          return rules;
+          return parseTableFilterQueryState({ entries, definitions });
         },
         serialize(rules, definitions) {
-          const result = /* @__PURE__ */ new Map();
-          for (const rule of rules) {
-            const filter = definitions.find((f) => f.key === rule.key);
-            if (!filter) continue;
-            const definition = normalizeFilterDefinition(filter);
-            const operator = rule.operator ?? resolveFilterDefaultOperator(definition);
-            const defaultOp = resolveFilterDefaultOperator(definition);
-            const urlKey = operator === defaultOp ? definition.key : `${definition.key}~${operator}`;
-            result.set(urlKey, rule.value);
-          }
-          return result;
+          return serializeTableFilterQueryState({ rules, definitions });
         }
       })
     },

package/dist/runtime/table/composables/use-table-api.js

@@ -1,5 +1,5 @@
 import { computed } from "vue";
-import { getDefaultSort, mapPublicQueryState } from "../utils/index.js";
+import { getDefaultSort, mapPublicQueryState, resolveTableFilterDefaultRules } from "../utils/index.js";
 export function useTableApi(params) {
   const state = {
     layout: params.layout.activeLayout,
@@ -84,7 +84,7 @@ export function useTableApi(params) {
       params.columns.setSorting(defaultSort);
       params.state.queryState.filters.value = {
         search: "",
-        ui: []
+        ui: resolveTableFilterDefaultRules(params.runtimeSchema.value.filters?.ui ?? [])
       };
     },
     all() {

package/dist/runtime/table/composables/use-table-columns.d.ts

@@ -180,17 +180,7 @@ export declare function useTableColumns(params: UseTableColumnsParams): {
     }) => "right" | "left" | null;
     getMenuItems: (options: {
         columnId: string;
-    }) => ({
-        label: string;
-        icon: string;
-        color: string;
-        onSelect: () => void;
-    } | {
-        label: string;
-        icon: string;
-        onSelect: () => void;
-        color?: undefined;
-    })[][];
+    }) => import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[][];
     sortingState: import("vue").ComputedRef<{
         key: string | undefined;
         dir: "desc" | "asc" | undefined;

package/dist/runtime/table/composables/use-table-filter-presentation.d.ts

@@ -23,9 +23,6 @@ export declare function useTableFilterPresentation(options: UseTableFilterPresen
     releaseDynamicSession: (input: {
         key: string;
     }) => void;
-    getDynamicActivationToken: (input: {
-        key: string;
-    }) => number;
     openPanel: () => void;
     closePanel: () => void;
     resetPanelDraft: () => void;

package/dist/runtime/table/composables/use-table-filter-presentation.js

@@ -2,7 +2,6 @@ import { computed, ref } from "vue";
 import { resolveFilterDisplayLocation, resolveFilterDisplayOrder } from "../utils/index.js";
 export function useTableFilterPresentation(options) {
   const dynamicSessionKey = ref(null);
-  const dynamicActivationToken = ref({});
   const panelOpen = ref(false);
   const panelDraftFilters = ref([]);
   const definitions = computed(
@@ -76,10 +75,6 @@ export function useTableFilterPresentation(options) {
   });
   function activateDynamicFilter(input) {
     dynamicSessionKey.value = input.key;
-    dynamicActivationToken.value = {
-      ...dynamicActivationToken.value,
-      [input.key]: (dynamicActivationToken.value[input.key] ?? 0) + 1
-    };
   }
   function releaseDynamicSession(input) {
     if (dynamicSessionKey.value !== input.key) return;
@@ -167,9 +162,6 @@ export function useTableFilterPresentation(options) {
   function clearPanelFilter(input) {
     panelDraftFilters.value = panelDraftFilters.value.filter((rule) => rule.key !== input.key);
   }
-  function getDynamicActivationToken(input) {
-    return dynamicActivationToken.value[input.key] ?? 0;
-  }
   function isPanelKey(key) {
     return panelDefinitions.value.some((definition) => definition.key === key);
   }
@@ -192,7 +184,6 @@ export function useTableFilterPresentation(options) {
     panelOpen,
     activateDynamicFilter,
     releaseDynamicSession,
-    getDynamicActivationToken,
     openPanel,
     closePanel,
     resetPanelDraft,

package/dist/runtime/table/composables/use-table-filters.js

@@ -1,14 +1,17 @@
 import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
 import {
   buildFilterPreview,
   createFilterValueForOperator,
   flattenFilterOptionEntries,
   getFilterLabelText,
-  getFilterOperatorLabel,
+  mergeTableFilterDefaultRules,
+  resolveTableFilterDefaultRules,
   resolveFilterOptionEntries
 } from "../utils/index.js";
 import { useTableSearch } from "./use-table-search.js";
 export function useTableFilters(params) {
+  const { t } = useUiToolsLocale();
   const search = useTableSearch({
     schema: params.schema,
     queryState: params.state.queryState
@@ -19,6 +22,9 @@ export function useTableFilters(params) {
   const activeUiFilters = computed(
     () => params.state.queryState.filters.value.ui ?? []
   );
+  const defaultUiFilters = computed(
+    () => resolveTableFilterDefaultRules(definitions.value)
+  );
   const hasActiveUiFilters = computed(() => activeUiFilters.value.length > 0);
   function getDefinition(input) {
     return definitions.value.find(
@@ -79,9 +85,7 @@ export function useTableFilters(params) {
   function getFilterOperatorOptions(input) {
     return getFilterOperators(input.key).map((operator) => ({
       value: operator,
-      label: getFilterOperatorLabel({
-        operator
-      })
+      label: t(`table.filters.operators.${operator}`)
     }));
   }
   function setFilterOperator(input) {
@@ -175,24 +179,31 @@ export function useTableFilters(params) {
     });
   }
   function removeFilter(key) {
+    const defaultRule = defaultUiFilters.value.find((filter) => filter.key === key);
     params.state.queryState.resetPagination();
     params.state.queryState.filters.value = {
       ...params.state.queryState.filters.value,
-      ui: params.state.queryState.filters.value.ui.filter((filter) => filter.key !== key)
+      ui: [
+        ...params.state.queryState.filters.value.ui.filter((filter) => filter.key !== key),
+        ...defaultRule ? [defaultRule] : []
+      ]
     };
   }
   function clearAllFilters() {
     params.state.queryState.resetPagination();
     params.state.queryState.filters.value = {
       ...params.state.queryState.filters.value,
-      ui: []
+      ui: defaultUiFilters.value
     };
   }
   function replaceFilters(input) {
     params.state.queryState.resetPagination();
     params.state.queryState.filters.value = {
       ...params.state.queryState.filters.value,
-      ui: [...input.rules]
+      ui: mergeTableFilterDefaultRules({
+        rules: input.rules,
+        definitions: definitions.value
+      })
     };
   }
   return {

package/dist/runtime/table/composables/use-table-internals.d.ts

@@ -190,9 +190,6 @@ declare function createTableInternals<TSchema>(options: {
         releaseDynamicSession: (input: {
             key: string;
         }) => void;
-        getDynamicActivationToken: (input: {
-            key: string;
-        }) => number;
         openPanel: () => void;
         closePanel: () => void;
         resetPanelDraft: () => void;
@@ -432,17 +429,7 @@ declare function createTableInternals<TSchema>(options: {
         }) => "right" | "left" | null;
         getMenuItems: (options: {
             columnId: string;
-        }) => ({
-            label: string;
-            icon: string;
-            color: string;
-            onSelect: () => void;
-        } | {
-            label: string;
-            icon: string;
-            onSelect: () => void;
-            color?: undefined;
-        })[][];
+        }) => import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[][];
         sortingState: import("vue").ComputedRef<{
             key: string | undefined;
             dir: "desc" | "asc" | undefined;
@@ -682,9 +669,6 @@ declare function useProvideTableInternals<TSchema>(options: {
         releaseDynamicSession: (input: {
             key: string;
         }) => void;
-        getDynamicActivationToken: (input: {
-            key: string;
-        }) => number;
         openPanel: () => void;
         closePanel: () => void;
         resetPanelDraft: () => void;
@@ -924,17 +908,7 @@ declare function useProvideTableInternals<TSchema>(options: {
         }) => "right" | "left" | null;
         getMenuItems: (options: {
             columnId: string;
-        }) => ({
-            label: string;
-            icon: string;
-            color: string;
-            onSelect: () => void;
-        } | {
-            label: string;
-            icon: string;
-            onSelect: () => void;
-            color?: undefined;
-        })[][];
+        }) => import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[][];
         sortingState: import("vue").ComputedRef<{
             key: string | undefined;
             dir: "desc" | "asc" | undefined;
@@ -1171,9 +1145,6 @@ declare function useTableInternals(): {
         releaseDynamicSession: (input: {
             key: string;
         }) => void;
-        getDynamicActivationToken: (input: {
-            key: string;
-        }) => number;
         openPanel: () => void;
         closePanel: () => void;
         resetPanelDraft: () => void;
@@ -1413,17 +1384,7 @@ declare function useTableInternals(): {
         }) => "right" | "left" | null;
         getMenuItems: (options: {
             columnId: string;
-        }) => ({
-            label: string;
-            icon: string;
-            color: string;
-            onSelect: () => void;
-        } | {
-            label: string;
-            icon: string;
-            onSelect: () => void;
-            color?: undefined;
-        })[][];
+        }) => import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[][];
         sortingState: import("vue").ComputedRef<{
             key: string | undefined;
             dir: "desc" | "asc" | undefined;

package/dist/runtime/table/types/actions.d.ts

@@ -1,4 +1,4 @@
-import type { DropdownMenuItem } from '@nuxt/ui';
+import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue';
 import type { TableSourceRequestContext } from './source.js';
 import type { GenericObject, MaybePromise, TableLayout, TableRowRenderParams, TableTextValue } from './utils.js';
 export interface TableActionContext<TRow extends GenericObject = GenericObject, TContext extends GenericObject = GenericObject, TPageContext extends GenericObject = GenericObject> {

package/dist/runtime/table/types/data-list.d.ts

@@ -26,8 +26,40 @@ export interface DataListSearchUi {
     trailing?: DataListUiClass;
     trailingIcon?: DataListUiClass;
 }
-/** UI slots rendered by filter tags and their adjacent actions. */
-export interface DataListFilterTagsUi {
+/** Shared UI slots rendered by a progressive filter editor popover. */
+export interface DataListFilterEditorUi {
+    popoverContent?: DataListUiClass;
+    operatorContent?: DataListUiClass;
+    operatorItem?: DataListUiClass;
+    operatorLabel?: DataListUiClass;
+    operatorTrigger?: DataListUiClass;
+    editor?: DataListUiClass;
+    searchHeader?: DataListUiClass;
+    search?: DataListUiClass;
+    searchInput?: DataListUiClass;
+    scrollArea?: DataListUiClass;
+    scrollViewport?: DataListUiClass;
+    list?: DataListUiClass;
+    listDivider?: DataListUiClass;
+    option?: DataListUiClass;
+    optionCheckbox?: DataListUiClass;
+    optionExpander?: DataListUiClass;
+    optionSpacer?: DataListUiClass;
+    optionIcon?: DataListUiClass;
+    optionLabel?: DataListUiClass;
+    optionCount?: DataListUiClass;
+    empty?: DataListUiClass;
+    footer?: DataListUiClass;
+    clear?: DataListUiClass;
+    apply?: DataListUiClass;
+    inputs?: DataListUiClass;
+    presets?: DataListUiClass;
+    preset?: DataListUiClass;
+    calendar?: DataListUiClass;
+    slider?: DataListUiClass;
+}
+/** UI slots rendered by filter tags, their editors, and adjacent actions. */
+export interface DataListFilterTagsUi extends DataListFilterEditorUi {
     root?: DataListUiClass;
     trigger?: DataListUiClass;
     label?: DataListUiClass;
@@ -36,14 +68,10 @@ export interface DataListFilterTagsUi {
     addTrigger?: DataListUiClass;
     clearTrigger?: DataListUiClass;
 }
-/** UI slots rendered by the add-filter picker. */
-export interface DataListAddFilterUi {
+/** UI slots rendered by the progressive add-filter picker. */
+export interface DataListAddFilterUi extends DataListFilterEditorUi {
     trigger?: DataListUiClass;
-    popoverContent?: DataListUiClass;
     panel?: DataListUiClass;
-    option?: DataListUiClass;
-    optionIcon?: DataListUiClass;
-    optionLabel?: DataListUiClass;
     optionTrailingIcon?: DataListUiClass;
 }
 /** UI slots rendered by the filter slideover. */
@@ -130,11 +158,15 @@ export interface DataListContentUi {
     root?: DataListUiClass;
     error?: DataListUiClass;
     errorBody?: DataListUiClass;
+    errorIcon?: DataListUiClass;
+    errorCopy?: DataListUiClass;
     errorTitle?: DataListUiClass;
+    errorDescription?: DataListUiClass;
     retry?: DataListUiClass;
 }
 /** UI slots rendered by the table mode. Nuxt UI table slots are forwarded unchanged. */
 export interface DataListTableUi {
+    wrapper?: DataListUiClass;
     root?: DataListUiClass;
     base?: DataListUiClass;
     caption?: DataListUiClass;
@@ -157,6 +189,7 @@ export interface DataListGridUi {
     canvas?: DataListUiClass;
     row?: DataListUiClass;
     item?: DataListUiClass;
+    flowRoot?: DataListUiClass;
     flow?: DataListUiClass;
     loading?: DataListUiClass;
     error?: DataListUiClass;

package/dist/runtime/table/types/filters.d.ts

@@ -17,6 +17,10 @@ export type TableFilterPreviewMode = 'auto' | 'summary' | 'tags';
 export type TableFilterDisplayLocation = 'tag' | 'panel' | 'tag-dynamic';
 export type TableFilterDisplayLocationValue = TableFilterDisplayLocation | string;
 export interface TableFilterBehaviorCommon<TOperator extends TableFilterOperator = TableFilterOperator> {
+    /**
+     * Effective filter value when the URL has no override for this definition.
+     * The default stays active but is omitted from the URL; clearing the filter restores it.
+     */
     defaultValue?: TableQueryStateFilterValue;
     operators?: TOperator[];
     defaultOperator?: TOperator;

package/dist/runtime/table/utils/actions.d.ts

@@ -1,4 +1,4 @@
-import type { DropdownMenuItem } from '@nuxt/ui';
+import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue';
 import type { TableInjectedRowActionScope } from '../composables/use-table-row-actions.js';
 import type { GenericObject, TableRowAction, TableSchemaView } from '../types/index.js';
 type RowActionSchemaSource = {

package/dist/runtime/table/utils/columns/menu.d.ts

@@ -1,3 +1,4 @@
+import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue';
 import type { TableSchemaView } from '../../types/index.js';
 export declare function createColumnMenuItems(options: {
     columnId: string;
@@ -24,17 +25,7 @@ export declare function createColumnMenuItems(options: {
         key: string;
         dir: 'asc' | 'desc';
     } | null) => void;
-}): ({
-    label: string;
-    icon: string;
-    color: string;
-    onSelect: () => void;
-} | {
-    label: string;
-    icon: string;
-    onSelect: () => void;
-    color?: undefined;
-})[][];
+}): DropdownMenuItem[][];
 export declare function getColumnHeaderIcon(options: {
     columnId: string;
     getSortState: (options: {

package/dist/runtime/table/utils/columns/render.d.ts

@@ -1,14 +1,8 @@
 /** @jsxImportSource vue */
+import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue';
 import type { VNodeChild } from 'vue';
 import type { GenericObject } from '../../types/index.js';
 import { type SchemaTableColumn, type TableColumnRenderParams, type TableRuntimeColumn, type UseTableColumnsParams } from './types.js';
-type ColumnMenuItem = {
-    label?: string;
-    icon?: string;
-    color?: string;
-    class?: string;
-    onSelect?: () => void;
-};
 export declare function createSelectionColumn(options: {
     params: UseTableColumnsParams;
 }): {
@@ -48,7 +42,7 @@ export declare function createDataColumns(options: {
     visibleOrderedColumns: TableRuntimeColumn[];
     getMenuItems: (options: {
         columnId: string;
-    }) => ColumnMenuItem[][];
+    }) => DropdownMenuItem[][];
     getPinnedState: (options: {
         columnId: string;
     }) => 'left' | 'right' | null;
@@ -155,4 +149,3 @@ export declare function getColumnCellClass(options: {
 export declare function normalizeColumnSize(options: {
     size?: number | string;
 }): number | undefined;
-export {};

package/dist/runtime/table/utils/columns/render.js

@@ -34,8 +34,7 @@ export function createSelectionColumn(options) {
           UCheckbox,
           {
             modelValue: options.params.selection.allSelected.value ? true : options.params.selection.partiallySelected.value ? "indeterminate" : false,
-            color: "neutral",
-            ui: { base: "!rounded-md", indicator: "!rounded-none" }
+            color: "neutral"
           }
         )
       }
@@ -59,8 +58,7 @@ export function createSelectionColumn(options) {
           UCheckbox,
           {
             modelValue: options.params.selection.isRowSelected({ rowId: String(row.id) }),
-            color: "neutral",
-            ui: { base: "!rounded-md", indicator: "!rounded-none" }
+            color: "neutral"
           }
         )
       }
@@ -114,6 +112,7 @@ export function createDataColumns(options) {
         /* @__PURE__ */ jsx(
           UDropdownMenu,
           {
+            size: "sm",
             items: options.getMenuItems({ columnId: runtimeColumn.id }),
             content: { align: "start", side: "bottom", sideOffset: 10 },
             modal: false,
@@ -324,6 +323,7 @@ function createRowActionsColumn(options) {
       return /* @__PURE__ */ jsx(TableRowScopeProvider, { scope, children: /* @__PURE__ */ jsx("div", { class: "flex justify-end", children: /* @__PURE__ */ jsx(
         RowActions,
         {
+          size: "sm",
           content: { align: "end", side: "bottom", sideOffset: 8 },
           modal: false,
           portal: true,

package/dist/runtime/table/utils/data-list-ui.d.ts

@@ -1,3 +1,5 @@
-import type { DataListUiClass } from '../types/index.js';
+import type { DataListDensity, DataListUiClass, DataListUiConfig } from '../types/index.js';
 /** Merges DataList slot classes with the same conflict resolution used by Nuxt UI. */
 export declare function mergeDataListUiClass(defaults?: DataListUiClass, root?: DataListUiClass, local?: DataListUiClass): string;
+/** Merges application and root DataList defaults without losing nested UI slots. */
+export declare function mergeDataListUiConfig(appUi: DataListUiConfig | undefined, componentUi: DataListUiConfig | undefined, density: DataListDensity | undefined): DataListUiConfig;

package/dist/runtime/table/utils/data-list-ui.js

@@ -2,3 +2,48 @@ import { twMerge } from "tailwind-merge";
 export function mergeDataListUiClass(defaults, root, local) {
   return twMerge(defaults, root, local);
 }
+export function mergeDataListUiConfig(appUi, componentUi, density) {
+  return {
+    ...appUi,
+    ...componentUi,
+    density: density ?? componentUi?.density ?? appUi?.density,
+    control: { ...appUi?.control, ...componentUi?.control },
+    default: mergeUiConfig(appUi?.default, componentUi?.default),
+    search: mergeSearchConfig(appUi?.search, componentUi?.search),
+    filterTags: mergePartConfig(appUi?.filterTags, componentUi?.filterTags),
+    addFilter: mergePartConfig(appUi?.addFilter, componentUi?.addFilter),
+    filterPanel: mergePartConfig(appUi?.filterPanel, componentUi?.filterPanel),
+    clearFilters: mergePartConfig(appUi?.clearFilters, componentUi?.clearFilters),
+    resultCount: mergeUiConfig(appUi?.resultCount, componentUi?.resultCount),
+    columnPanel: mergePartConfig(appUi?.columnPanel, componentUi?.columnPanel),
+    sortMenu: mergePartConfig(appUi?.sortMenu, componentUi?.sortMenu),
+    layoutSwitch: mergePartConfig(appUi?.layoutSwitch, componentUi?.layoutSwitch),
+    refresh: mergePartConfig(appUi?.refresh, componentUi?.refresh),
+    content: mergeUiConfig(appUi?.content, componentUi?.content),
+    table: mergeUiConfig(appUi?.table, componentUi?.table),
+    grid: mergeUiConfig(appUi?.grid, componentUi?.grid),
+    pagination: mergePartConfig(appUi?.pagination, componentUi?.pagination),
+    infiniteLoader: mergePartConfig(appUi?.infiniteLoader, componentUi?.infiniteLoader)
+  };
+}
+function mergeUiConfig(appDefaults, componentConfig) {
+  return {
+    ...appDefaults,
+    ...componentConfig,
+    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
+  };
+}
+function mergePartConfig(appDefaults, componentConfig) {
+  return {
+    ...appDefaults,
+    ...componentConfig,
+    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
+  };
+}
+function mergeSearchConfig(appDefaults, componentConfig) {
+  return {
+    ...appDefaults,
+    ...componentConfig,
+    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
+  };
+}

package/dist/runtime/table/utils/filters/editor-size.d.ts

@@ -0,0 +1,11 @@
+import type { DataListControlSize } from '../../types/index.js';
+export declare function resolveFilterEditorSizeClasses(size: DataListControlSize | undefined): {
+    editor: string;
+    searchHeader: string;
+    scrollArea: string;
+    option: string;
+    optionIcon: string;
+    optionLabel: string;
+    footer: string;
+    empty: string;
+};