nuxt-ui-tools 0.1.0 → 0.1.1

package/dist/runtime/table/components/filters/shared/FilterMatchModePanel.vue

@@ -0,0 +1,47 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
+const props = defineProps({
+  items: { type: Array, required: true },
+  selected: { type: String, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["select"]);
+const sizeClasses = resolveFilterEditorSizeClasses(props.size);
+</script>
+
+<template>
+  <div :class="mergeDataListUiClass(sizeClasses.scrollArea, void 0, ui?.list)">
+    <button
+      v-for="item in items"
+      :key="item.value"
+      type="button"
+      :class="
+  mergeDataListUiClass(
+    `flex w-full items-center rounded-md text-left transition-colors hover:bg-elevated/70 ${sizeClasses.option}`,
+    void 0,
+    ui?.operatorItem
+  )
+"
+      @click="emit('select', item.value)"
+    >
+      <span
+        :class="
+  mergeDataListUiClass(
+    `min-w-0 flex-1 truncate text-default ${sizeClasses.optionLabel}`,
+    void 0,
+    ui?.operatorLabel
+  )
+"
+      >
+        {{ item.label }}
+      </span>
+      <UIcon
+        v-if="item.value === selected"
+        name="i-lucide-check"
+        :class="`${sizeClasses.optionIcon} shrink-0 text-muted`"
+      />
+    </button>
+  </div>
+</template>

package/dist/runtime/table/components/filters/shared/FilterMatchModePanel.vue.d.ts

@@ -0,0 +1,17 @@
+import type { DataListControlSize, DataListFilterEditorUi, TableFilterOperator } from '../../../types/index.js';
+type __VLS_Props = {
+    items: Array<{
+        label: string;
+        value: TableFilterOperator;
+    }>;
+    selected?: TableFilterOperator;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: TableFilterOperator) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((value: TableFilterOperator) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/filters/shared/FilterOptionMultipleList.d.vue.ts

@@ -1,4 +1,4 @@
-import type { TableResolvedFilterOptionEntry } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterEditorUi, TableResolvedFilterOptionEntry } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
     entries: Array<TableResolvedFilterOptionEntry & {
@@ -13,6 +13,8 @@ type __VLS_Props = {
     countLoading: boolean;
     selectedIcon?: string;
     truncate?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (options: {

package/dist/runtime/table/components/filters/shared/FilterOptionMultipleList.vue

@@ -1,21 +1,28 @@
 <script setup>
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass } from "../../../utils";
 import FilterOptionRow from "./FilterOptionRow.vue";
 const props = defineProps({
   sections: { type: Array, required: true },
   showCounts: { type: Boolean, required: true },
   countLoading: { type: Boolean, required: true },
   selectedIcon: { type: String, required: false },
-  truncate: { type: Boolean, required: false }
+  truncate: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
 const emit = defineEmits(["select"]);
+const dataListUi = useDataListUi();
+const ui = computed(() => props.ui ?? dataListUi.ui.value.filterTags?.ui);
 </script>
 
 <template>
-  <div class="grid gap-0.5">
+  <div :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
     <template v-for="section in props.sections" :key="section.key">
       <div
         v-if="section.dividerBefore && section.entries.length"
-        class="my-1 border-t border-default"
+        :class="mergeDataListUiClass('my-1 border-t border-default', void 0, ui?.listDivider)"
       />
 
       <button
@@ -33,6 +40,8 @@ const emit = defineEmits(["select"]);
           :leading-icon="entry.icon"
           :selected-icon="props.selectedIcon"
           :truncate="props.truncate"
+          :size="props.size"
+          :ui="props.ui"
         />
       </button>
     </template>

package/dist/runtime/table/components/filters/shared/FilterOptionMultipleList.vue.d.ts

@@ -1,4 +1,4 @@
-import type { TableResolvedFilterOptionEntry } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterEditorUi, TableResolvedFilterOptionEntry } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
     entries: Array<TableResolvedFilterOptionEntry & {
@@ -13,6 +13,8 @@ type __VLS_Props = {
     countLoading: boolean;
     selectedIcon?: string;
     truncate?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (options: {

package/dist/runtime/table/components/filters/shared/FilterOptionPickerContent.d.vue.ts

@@ -1,4 +1,5 @@
 import type { useOptionFilterEditorState } from '../../../composables/use-option-filter-editor-state.js';
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
     entries: Array<ReturnType<typeof useOptionFilterEditorState>['displayEntries']['value'][number]>;
@@ -7,6 +8,8 @@ interface FilterOptionMultipleListSection {
 type __VLS_Props = {
     state: ReturnType<typeof useOptionFilterEditorState>;
     sections?: FilterOptionMultipleListSection[];
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     'searchQuery'?: string;

package/dist/runtime/table/components/filters/shared/FilterOptionPickerContent.vue

@@ -6,7 +6,9 @@ import FilterOptionTreeContent from "./FilterOptionTreeContent.vue";
 import FilterSearchablePanel from "./FilterSearchablePanel.vue";
 const props = defineProps({
   state: { type: null, required: true },
-  sections: { type: Array, required: false }
+  sections: { type: Array, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
 const searchQuery = defineModel("searchQuery", { type: String, ...{
   default: ""
@@ -39,6 +41,8 @@ function handleSelect(options) {
   !props.state.optionSource.isLoading.value && !props.state.displayEntries.value.length && !props.state.visibleTreeEntries.value.length
 "
     :empty-label="props.state.filterUi.value.labels.empty"
+    :size="props.size"
+    :ui="props.ui"
   >
     <template v-if="props.state.filterUi.value.presentation === 'tree'">
       <template v-if="props.state.optionSource.isLoading.value">
@@ -61,6 +65,8 @@ function handleSelect(options) {
   props.state.filterUi.value.row.showCounts && props.state.optionSource.isCountLoading.value
 "
         :selected-icon="props.state.filterUi.value.row.selectedIcon"
+        :size="props.size"
+        :ui="props.ui"
         @toggle-entry="emit('toggleTreeEntry', $event)"
         @toggle-expanded="emit('toggleExpanded', $event)"
       />
@@ -86,6 +92,8 @@ function handleSelect(options) {
         :count-loading="props.state.optionSource.isCountLoading.value"
         :selected-icon="props.state.filterUi.value.row.selectedIcon"
         :truncate="props.state.filterUi.value.row.truncate"
+        :size="props.size"
+        :ui="props.ui"
         @select="handleSelect($event)"
       />
     </template>
@@ -108,6 +116,8 @@ function handleSelect(options) {
         :count-loading="
   props.state.filterUi.value.row.showCounts && props.state.optionSource.isCountLoading.value
 "
+        :size="props.size"
+        :ui="props.ui"
       />
     </template>
   </FilterSearchablePanel>

package/dist/runtime/table/components/filters/shared/FilterOptionPickerContent.vue.d.ts

@@ -1,4 +1,5 @@
 import type { useOptionFilterEditorState } from '../../../composables/use-option-filter-editor-state.js';
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 interface FilterOptionMultipleListSection {
     key: string;
     entries: Array<ReturnType<typeof useOptionFilterEditorState>['displayEntries']['value'][number]>;
@@ -7,6 +8,8 @@ interface FilterOptionMultipleListSection {
 type __VLS_Props = {
     state: ReturnType<typeof useOptionFilterEditorState>;
     sections?: FilterOptionMultipleListSection[];
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     'searchQuery'?: string;

package/dist/runtime/table/components/filters/shared/FilterOptionRow.d.vue.ts

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
     label: string;
     count?: number;
@@ -6,6 +7,8 @@ type __VLS_Props = {
     leadingIcon?: string;
     selectedIcon?: string;
     truncate?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/table/components/filters/shared/FilterOptionRow.vue

@@ -2,35 +2,74 @@
 import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import USkeleton from "@nuxt/ui/components/Skeleton.vue";
-defineProps({
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
+const props = defineProps({
   label: { type: String, required: true },
   count: { type: Number, required: false },
   countLoading: { type: Boolean, required: false },
   selected: { type: Boolean, required: true },
   leadingIcon: { type: String, required: false },
   selectedIcon: { type: String, required: false },
-  truncate: { type: Boolean, required: false }
+  truncate: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
+const dataListUi = useDataListUi();
+const size = computed(
+  () => props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
+);
+const ui = computed(() => props.ui ?? dataListUi.ui.value.filterTags?.ui);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
 </script>
 
 <template>
   <div
-    class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-elevated"
-    :class="selected ? 'bg-elevated text-highlighted' : 'text-default'"
+    :class="
+  mergeDataListUiClass(
+    `flex w-full items-center rounded-md text-left transition-colors hover:bg-elevated ${sizeClasses.option} ${selected ? 'bg-elevated text-highlighted' : 'text-default'}`,
+    void 0,
+    ui?.option
+  )
+"
   >
     <UCheckbox
       :model-value="selected"
       color="neutral"
-      size="md"
+      :size="size"
       tabindex="-1"
       :icon="selectedIcon"
-      :ui="{ base: '!rounded-md', indicator: '!rounded-none' }"
+      :ui="{ base: ui?.optionCheckbox }"
     />
 
-    <UIcon v-if="leadingIcon" :name="leadingIcon" class="size-4 shrink-0 text-muted" />
+    <UIcon
+      v-if="leadingIcon"
+      :name="leadingIcon"
+      :class="
+  mergeDataListUiClass(
+    `${sizeClasses.optionIcon} shrink-0 text-muted`,
+    void 0,
+    ui?.optionIcon
+  )
+"
+    />
 
-    <span class="min-w-0 flex-1" :class="truncate ?? true ? 'truncate' : ''">{{ label }}</span>
+    <span
+      :class="
+  mergeDataListUiClass(
+    `min-w-0 flex-1 ${sizeClasses.optionLabel} ${truncate ?? true ? 'truncate' : ''}`,
+    void 0,
+    ui?.optionLabel
+  )
+"
+      >{{ label }}</span
+    >
     <USkeleton v-if="countLoading" class="ml-3 h-3.5 w-6 shrink-0" />
-    <span v-else-if="count != null" class="ml-3 shrink-0 text-muted">{{ count }}</span>
+    <span
+      v-else-if="count != null"
+      :class="mergeDataListUiClass('ml-3 shrink-0 text-muted', void 0, ui?.optionCount)"
+      >{{ count }}</span
+    >
   </div>
 </template>

package/dist/runtime/table/components/filters/shared/FilterOptionRow.vue.d.ts

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
     label: string;
     count?: number;
@@ -6,6 +7,8 @@ type __VLS_Props = {
     leadingIcon?: string;
     selectedIcon?: string;
     truncate?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/table/components/filters/shared/FilterOptionSingleList.d.vue.ts

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
     items: Array<{
         label: string;
@@ -7,6 +8,8 @@ type __VLS_Props = {
         truncate?: boolean;
     }>;
     countLoading: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;

package/dist/runtime/table/components/filters/shared/FilterOptionSingleList.vue

@@ -2,10 +2,21 @@
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
 import USkeleton from "@nuxt/ui/components/Skeleton.vue";
-defineProps({
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
+const props = defineProps({
   items: { type: Array, required: true },
-  countLoading: { type: Boolean, required: true }
+  countLoading: { type: Boolean, required: true },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
+const dataListUi = useDataListUi();
+const size = computed(
+  () => props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
+);
+const ui = computed(() => props.ui ?? dataListUi.ui.value.filterTags?.ui);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
 const modelValue = defineModel({ type: null, ...{
   default: void 0
 } });
@@ -18,22 +29,37 @@ const modelValue = defineModel({ type: null, ...{
     :items="items"
     color="neutral"
     variant="list"
+    :size="size"
     :ui="{
   root: 'w-full',
-  fieldset: 'grid gap-0.5',
-  item: 'flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated',
-  container: 'self-center pl-3',
+  fieldset: mergeDataListUiClass('grid gap-0.5', void 0, ui?.list),
+  item: mergeDataListUiClass(
+    `flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
+    void 0,
+    ui?.option
+  ),
+  container: 'self-center',
   base: 'cursor-pointer',
-  wrapper: 'min-w-0 flex-1 py-2 pr-3',
-  label: 'w-full cursor-pointer text-sm text-default'
+  wrapper: 'min-w-0 flex-1',
+  label: mergeDataListUiClass(
+    `w-full cursor-pointer text-default ${sizeClasses.optionLabel}`,
+    void 0,
+    ui?.optionLabel
+  )
 }"
   >
     <template #label="{ item }">
-      <div class="flex min-w-0 items-center gap-3">
+      <div class="flex min-w-0 items-center gap-2">
         <UIcon
           v-if="typeof item.icon === 'string'"
           :name="item.icon"
-          class="size-4 shrink-0 text-muted"
+          :class="
+  mergeDataListUiClass(
+    `${sizeClasses.optionIcon} shrink-0 text-muted`,
+    void 0,
+    ui?.optionIcon
+  )
+"
         />
 
         <span class="min-w-0 flex-1" :class="item.truncate ? 'truncate' : ''">

package/dist/runtime/table/components/filters/shared/FilterOptionSingleList.vue.d.ts

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type __VLS_Props = {
     items: Array<{
         label: string;
@@ -7,6 +8,8 @@ type __VLS_Props = {
         truncate?: boolean;
     }>;
     countLoading: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;

package/dist/runtime/table/components/filters/shared/FilterOptionTreeContent.d.vue.ts

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type TreeEntry = {
     id: string;
     label: string;
@@ -31,6 +32,8 @@ type __VLS_Props = {
     multiple: boolean;
     countLoading: boolean;
     selectedIcon?: string;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;

package/dist/runtime/table/components/filters/shared/FilterOptionTreeContent.vue

@@ -3,14 +3,25 @@ import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
 import USkeleton from "@nuxt/ui/components/Skeleton.vue";
-defineProps({
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
+const props = defineProps({
   entries: { type: Array, required: true },
   items: { type: Array, required: true },
   multiple: { type: Boolean, required: true },
   countLoading: { type: Boolean, required: true },
-  selectedIcon: { type: String, required: false }
+  selectedIcon: { type: String, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
 });
 const emit = defineEmits(["toggleEntry", "toggleExpanded"]);
+const dataListUi = useDataListUi();
+const size = computed(
+  () => props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
+);
+const ui = computed(() => props.ui ?? dataListUi.ui.value.filterTags?.ui);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
 const modelValue = defineModel({ type: null, ...{
   default: void 0
 } });
@@ -22,7 +33,7 @@ function getTreeIndentStyle(depth) {
 </script>
 
 <template>
-  <div v-if="multiple" class="grid gap-0.5">
+  <div v-if="multiple" :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
     <button
       v-for="entry in entries"
       :key="entry.id"
@@ -31,44 +42,81 @@ function getTreeIndentStyle(depth) {
       @click="emit('toggleEntry', entry.id)"
     >
       <div
-        class="flex items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-elevated"
-        :class="entry.selected ? 'bg-elevated text-highlighted' : 'text-default'"
+        :class="
+  mergeDataListUiClass(
+    `flex items-center rounded-md text-left transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'bg-elevated text-highlighted' : 'text-default'}`,
+    void 0,
+    ui?.option
+  )
+"
       >
         <div
-          class="flex min-w-0 flex-1 items-center gap-3"
+          class="flex min-w-0 flex-1 items-center gap-2"
           :style="getTreeIndentStyle(entry.depth)"
         >
           <button
             v-if="entry.expandable"
             type="button"
-            class="flex size-4 shrink-0 items-center justify-center text-muted transition-transform"
-            :class="entry.expanded ? 'rotate-90' : ''"
+            :class="
+  mergeDataListUiClass(
+    `flex size-4 shrink-0 items-center justify-center text-muted transition-transform ${entry.expanded ? 'rotate-90' : ''}`,
+    void 0,
+    ui?.optionExpander
+  )
+"
             @click.stop="emit('toggleExpanded', entry.id)"
           >
             <UIcon name="i-lucide-chevron-right" class="size-4" />
           </button>
-          <span v-else class="size-4 shrink-0" />
+          <span
+            v-else
+            :class="mergeDataListUiClass('size-4 shrink-0', void 0, ui?.optionSpacer)"
+          />
 
           <UCheckbox
             v-if="entry.selectable || entry.branchSelectable"
             :model-value="entry.indeterminate ? 'indeterminate' : entry.selected"
             color="neutral"
-            size="md"
+            :size="size"
             tabindex="-1"
             :icon="selectedIcon"
-            :ui="{ base: '!rounded-md', indicator: '!rounded-none' }"
+            :ui="{ base: ui?.optionCheckbox }"
+          />
+          <span
+            v-else
+            :class="mergeDataListUiClass('size-5 shrink-0', void 0, ui?.optionSpacer)"
           />
-          <span v-else class="size-5 shrink-0" />
 
-          <UIcon v-if="entry.icon" :name="entry.icon" class="size-4 shrink-0 text-muted" />
+          <UIcon
+            v-if="entry.icon"
+            :name="entry.icon"
+            :class="
+  mergeDataListUiClass(
+    `${sizeClasses.optionIcon} shrink-0 text-muted`,
+    void 0,
+    ui?.optionIcon
+  )
+"
+          />
 
-          <span class="min-w-0 flex-1" :class="entry.truncate ? 'truncate' : ''">
+          <span
+            :class="
+  mergeDataListUiClass(
+    `min-w-0 flex-1 ${sizeClasses.optionLabel} ${entry.truncate ? 'truncate' : ''}`,
+    void 0,
+    ui?.optionLabel
+  )
+"
+          >
             {{ entry.label }}
           </span>
         </div>
 
         <USkeleton v-if="countLoading" class="ml-3 h-3.5 w-6 shrink-0" />
-        <span v-else-if="entry.count != null" class="ml-3 shrink-0 text-muted">
+        <span
+          v-else-if="entry.count != null"
+          :class="mergeDataListUiClass('ml-3 shrink-0 text-muted', void 0, ui?.optionCount)"
+        >
           {{ entry.count }}
         </span>
       </div>
@@ -81,14 +129,23 @@ function getTreeIndentStyle(depth) {
     :items="items"
     color="neutral"
     variant="list"
+    :size="size"
     :ui="{
   root: 'w-full',
-  fieldset: 'grid gap-0.5',
-  item: 'flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated',
-  container: 'self-center pl-3',
+  fieldset: mergeDataListUiClass('grid gap-0.5', void 0, ui?.list),
+  item: mergeDataListUiClass(
+    `flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
+    void 0,
+    ui?.option
+  ),
+  container: 'self-center',
   base: 'cursor-pointer',
-  wrapper: 'min-w-0 flex-1 py-2 pr-3',
-  label: 'w-full cursor-pointer text-sm text-default'
+  wrapper: 'min-w-0 flex-1',
+  label: mergeDataListUiClass(
+    `w-full cursor-pointer text-default ${sizeClasses.optionLabel}`,
+    void 0,
+    ui?.optionLabel
+  )
 }"
   >
     <template #label="{ item }">

package/dist/runtime/table/components/filters/shared/FilterOptionTreeContent.vue.d.ts

@@ -1,3 +1,4 @@
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
 type TreeEntry = {
     id: string;
     label: string;
@@ -31,6 +32,8 @@ type __VLS_Props = {
     multiple: boolean;
     countLoading: boolean;
     selectedIcon?: string;
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;

package/dist/runtime/table/components/filters/shared/FilterPopoverShell.d.vue.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    open: boolean;
+    embedded?: boolean;
+    contentClass?: string;
+    transitioning?: boolean;
+};
+declare var __VLS_1: {}, __VLS_12: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+} & {
+    content?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updateOpen: (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdateOpen?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};