nuxt-ui-tools 1.4.0 → 1.6.0

package/dist/runtime/table/components/data-list/data-list-error-state.vue

@@ -4,11 +4,15 @@ import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useDataListUi } from "../../composables/use-data-list-ui";
-import { mergeDataListUiClass, resolveDataListControlGeometry } from "../../utils";
+import { mergeDataListUiClass } from "../../utils";
 const props = defineProps({
   minHeight: { type: String, required: false },
   size: { type: String, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: Object, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  reference: { type: String, required: false },
+  icon: { type: String, required: false }
 });
 const emit = defineEmits(["retry"]);
 const dataListUi = useDataListUi();
@@ -17,75 +21,95 @@ const rootUi = computed(() => dataListUi.ui.value.content?.ui);
 const resolvedSize = computed(
   () => props.size ?? dataListUi.ui.value.content?.size ?? dataListUi.controlSize.value
 );
-const geometry = computed(() => resolveDataListControlGeometry(resolvedSize.value));
+const resolvedTitle = computed(() => props.title ?? t("table.states.gridError.title"));
+const resolvedDescription = computed(
+  () => props.description ?? t("table.states.gridError.description")
+);
 </script>
 
 <template>
   <div
     :class="
   mergeDataListUiClass(
-    'grid place-items-center px-4 py-10 text-center',
+    'nut-dl-error flex w-full flex-col items-center justify-center px-6 py-12 text-center',
     rootUi?.error,
     ui?.error
   )
 "
     :style="{ minHeight }"
+    role="alert"
   >
     <div
       :class="
   mergeDataListUiClass(
-    `flex max-w-md items-start text-left ${geometry.toolbarGap}`,
-    rootUi?.errorBody,
-    ui?.errorBody
+    'nut-dl-error__art relative mb-4 flex size-14 items-center justify-center',
+    rootUi?.errorIcon,
+    ui?.errorIcon
   )
 "
     >
       <span
+        class="nut-dl-error__ring absolute inset-0 rounded-2xl bg-error/10 ring ring-inset ring-error/15"
+      />
+      <span
+        class="nut-dl-error__ring nut-dl-error__ring--back absolute inset-1.5 -z-10 -rotate-6 rounded-xl bg-error/5"
+      />
+      <UIcon :name="icon ?? 'i-lucide-cloud-alert'" class="relative size-5 text-error" />
+    </div>
+    <div :class="mergeDataListUiClass('min-w-0 max-w-md', rootUi?.errorCopy, ui?.errorCopy)">
+      <div
         :class="
   mergeDataListUiClass(
-    'grid size-9 shrink-0 place-items-center rounded-md bg-error/10 text-error',
-    rootUi?.errorIcon,
-    ui?.errorIcon
+    'nut-dl-error__title text-[14px] font-medium text-highlighted',
+    rootUi?.errorTitle,
+    ui?.errorTitle
   )
 "
       >
-        <UIcon name="i-lucide-cloud-alert" class="size-4" />
-      </span>
-      <div
+        {{ resolvedTitle }}
+      </div>
+      <p
         :class="
-  mergeDataListUiClass(`min-w-0 flex-1 ${geometry.text}`, rootUi?.errorCopy, ui?.errorCopy)
-"
-      >
-        <div
-          :class="
-  mergeDataListUiClass('font-medium text-highlighted', rootUi?.errorTitle, ui?.errorTitle)
-"
-        >
-          {{ t("table.states.gridError.title") }}
-        </div>
-        <p
-          :class="
   mergeDataListUiClass(
-    'mt-0.5 leading-5 text-muted',
+    'nut-dl-error__description mx-auto mt-1 max-w-[40ch] text-[12.5px] leading-relaxed text-muted',
     rootUi?.errorDescription,
     ui?.errorDescription
   )
 "
-        >
-          {{ t("table.states.gridError.description") }}
-        </p>
-        <UButton
-          color="neutral"
-          variant="soft"
-          :size="resolvedSize"
-          icon="i-lucide-refresh-cw"
-          class="mt-3"
-          :ui="{ base: mergeDataListUiClass(rootUi?.retry, ui?.retry) }"
-          @click="emit('retry')"
-        >
-          {{ t("table.states.gridError.action") }}
-        </UButton>
-      </div>
+      >
+        {{ resolvedDescription }}
+      </p>
+      <code
+        v-if="reference"
+        class="nut-dl-error__reference mt-2.5 inline-block rounded-md bg-elevated px-2 py-1 font-mono text-[11.5px] text-muted select-all"
+      >
+        {{ reference }}
+      </code>
+    </div>
+    <div
+      :class="
+  mergeDataListUiClass(
+    'nut-dl-error__actions mt-4 flex items-center gap-2',
+    rootUi?.errorBody,
+    ui?.errorBody
+  )
+"
+    >
+      <UButton
+        color="neutral"
+        variant="outline"
+        :size="resolvedSize"
+        icon="i-lucide-refresh-cw"
+        :ui="{ base: mergeDataListUiClass(rootUi?.retry, ui?.retry) }"
+        @click="emit('retry')"
+      >
+        {{ t("table.states.gridError.action") }}
+      </UButton>
+      <slot name="actions" />
     </div>
   </div>
 </template>
+
+<style>
+.nut-dl-error{animation:nut-dl-error-in .24s cubic-bezier(.2,.9,.3,1) both}@keyframes nut-dl-error-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.nut-dl-error{animation:none}}
+</style>

package/dist/runtime/table/components/data-list/data-list-error-state.vue.d.ts

@@ -3,11 +3,28 @@ type __VLS_Props = {
     minHeight?: string;
     size?: DataListControlSize;
     ui?: DataListContentUi;
+    /** Replaces the localized default title. */
+    title?: string;
+    /** Replaces the localized default description. */
+    description?: string;
+    /** Support reference shown under the description, such as a request identifier. */
+    reference?: string;
+    icon?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: (() => 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;
+    };
+};

package/dist/runtime/table/components/data-list/data-list-filter-tags.d.vue.ts

@@ -2,7 +2,7 @@ import type { DataListControlSize, DataListFilterTagsUi } from '../../types/inde
 type __VLS_Props = {
     showAdd?: boolean;
     showClear?: boolean;
-    /** `sheet` collapses the tags into a bottom sheet on mobile; `tags` keeps inline tags everywhere. */
+    /** `tags` keeps inline tags on mobile (default); `sheet` moves all filters into a bottom sheet. */
     mobile?: 'sheet' | 'tags';
     size?: DataListControlSize;
     ui?: DataListFilterTagsUi;

package/dist/runtime/table/components/data-list/data-list-filter-tags.vue

@@ -9,7 +9,7 @@ import FilterTagsBar from "../filters/tags/filter-tags-bar.vue";
 const props = defineProps({
   showAdd: { type: Boolean, required: false, default: false },
   showClear: { type: Boolean, required: false, default: false },
-  mobile: { type: String, required: false, default: "sheet" },
+  mobile: { type: String, required: false, default: "tags" },
   size: { type: String, required: false },
   ui: { type: Object, required: false }
 });

package/dist/runtime/table/components/data-list/data-list-filter-tags.vue.d.ts

@@ -2,7 +2,7 @@ import type { DataListControlSize, DataListFilterTagsUi } from '../../types/inde
 type __VLS_Props = {
     showAdd?: boolean;
     showClear?: boolean;
-    /** `sheet` collapses the tags into a bottom sheet on mobile; `tags` keeps inline tags everywhere. */
+    /** `tags` keeps inline tags on mobile (default); `sheet` moves all filters into a bottom sheet. */
     mobile?: 'sheet' | 'tags';
     size?: DataListControlSize;
     ui?: DataListFilterTagsUi;

package/dist/runtime/table/components/data-list/sort-menu-panel.vue

@@ -31,7 +31,7 @@ function humanize(value) {
         v-for="key in keys"
         :key="key"
         type="button"
-        class="nut-dl-sort__row flex w-full items-center gap-[10px] rounded-lg text-left transition-colors hover:bg-elevated active:bg-elevated"
+        class="nut-dl-sort__row flex w-full items-center gap-[10px] rounded-lg text-left outline-none transition-colors hover:bg-elevated focus-visible:ring-2 focus-visible:ring-primary/40 active:bg-elevated"
         :class="[
   compact ? 'h-8 px-2.5 text-[13px]' : 'h-[46px] px-[10px] text-[15px]',
   activeKey === key ? 'nut-dl-sort__row--active font-semibold text-highlighted' : 'text-default'
@@ -52,35 +52,43 @@ function humanize(value) {
         />
       </button>
     </div>
-    <div
-      class="nut-dl-sort__caption border-t border-default font-semibold tracking-[0.06em] text-dimmed uppercase"
-      :class="
-  compact ? 'mx-1 mt-1.5 px-1.5 pt-2 pb-1 text-[10.5px]' : 'mt-2 px-5 pt-4 pb-2 text-[11px]'
-"
-    >
-      {{ t("table.filters.sheet.order") }}
+    <div class="w-full min-w-0" :class="compact ? 'mt-1.5 px-1' : 'mt-2'">
+      <div
+        class="nut-dl-sort__caption border-t border-default font-semibold tracking-[0.06em] text-dimmed uppercase"
+        :class="compact ? 'px-1.5 pt-2 pb-1 text-[10.5px]' : 'px-5 pt-4 pb-2 text-[11px]'"
+      >
+        {{ t("table.filters.sheet.order") }}
+      </div>
     </div>
     <div
-      class="nut-dl-sort__dir grid grid-cols-[repeat(2,minmax(0,1fr))] gap-0.5 overflow-hidden rounded-md bg-elevated p-0.5"
-      :class="compact ? 'mx-2.5 mb-2.5' : 'mx-4 mb-5'"
+      class="nut-dl-sort__dir-wrap w-full min-w-0"
+      :class="compact ? 'px-2.5 pb-2.5' : 'px-4 pb-5'"
     >
-      <button
-        v-for="dir in ['asc', 'desc']"
-        :key="dir"
-        type="button"
-        class="flex min-w-0 items-center justify-center gap-1.5 rounded-[5px] px-1 font-medium whitespace-nowrap"
-        :class="[
+      <div
+        class="nut-dl-sort__dir grid w-full min-w-0 grid-cols-[repeat(2,minmax(0,1fr))] gap-0.5 overflow-hidden rounded-md bg-elevated p-0.5"
+        role="radiogroup"
+        :aria-label="t('table.filters.sheet.order')"
+      >
+        <button
+          v-for="dir in ['asc', 'desc']"
+          :key="dir"
+          type="button"
+          role="radio"
+          :aria-checked="activeDirection === dir"
+          class="flex min-w-0 items-center justify-center gap-1.5 overflow-hidden rounded-[5px] px-1 font-medium whitespace-nowrap outline-none transition-colors focus-visible:ring-2 focus-visible:ring-primary/40"
+          :class="[
   compact ? 'h-7 text-[12px]' : 'h-8 text-[12.5px]',
-  activeDirection === dir ? 'nut-dl-sort__dir--active bg-default text-highlighted shadow-[0_0_0_1px_var(--ui-border)]' : 'text-muted'
+  activeDirection === dir ? 'nut-dl-sort__dir--active bg-default text-highlighted shadow-[0_0_0_1px_var(--ui-border)]' : 'text-muted hover:text-default'
 ]"
-        @click="emit('selectDirection', dir)"
-      >
-        <UIcon
-          :name="dir === 'asc' ? 'i-lucide-arrow-up' : 'i-lucide-arrow-down'"
-          class="size-3.5"
-        />
-        {{ dir === "asc" ? "A \u2192 Z" : "Z \u2192 A" }}
-      </button>
+          @click="emit('selectDirection', dir)"
+        >
+          <UIcon
+            :name="dir === 'asc' ? 'i-lucide-arrow-up' : 'i-lucide-arrow-down'"
+            class="size-3.5 shrink-0"
+          />
+          <span class="truncate">{{ dir === "asc" ? "A \u2192 Z" : "Z \u2192 A" }}</span>
+        </button>
+      </div>
     </div>
   </div>
 </template>

package/dist/runtime/table/components/drawers/column-panel.vue

@@ -124,6 +124,15 @@ function toggleColumn(columnId) {
   const isVisible2 = internals.tableColumns.tableState.value.columnVisibility?.[columnId] !== false;
   internals.tableColumns.setVisibility({ columnId, visible: !isVisible2 });
 }
+function toggleRow(event, column) {
+  if (event.target instanceof Element && event.target.closest('button, input, [role="checkbox"]')) {
+    return;
+  }
+  if (isRequired(column)) {
+    return;
+  }
+  toggleColumn(column.id);
+}
 function open() {
   internals.controls.columnsPanelOpen.value = true;
 }
@@ -226,7 +235,7 @@ function toggle() {
         <div
           :class="
   mergeDataListUiClass(
-    'nut-dl-colpanel__list grid max-h-80 gap-px overflow-y-auto px-2 py-1',
+    'nut-dl-colpanel__list grid max-h-80 grid-cols-1 gap-px overflow-y-auto px-2 py-1',
     void 0,
     ui.list
   )
@@ -238,11 +247,12 @@ function toggle() {
               :key="column.id"
               :class="
   mergeDataListUiClass(
-    'nut-dl-colpanel__row group/col flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    'nut-dl-colpanel__row group/col flex h-8 cursor-pointer items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
     void 0,
     ui.row
   )
 "
+              @click="toggleRow($event, column)"
             >
               <UCheckbox
                 v-bind="checkboxProps"
@@ -278,18 +288,19 @@ function toggle() {
               ghost-class="column-panel-row-ghost"
               chosen-class="column-panel-row-chosen"
               drag-class="column-panel-row-dragging"
-              :class="mergeDataListUiClass('grid gap-px', void 0, ui.section)"
+              :class="mergeDataListUiClass('grid grid-cols-1 gap-px', void 0, ui.section)"
             >
               <div
                 v-for="column in draggableColumns"
                 :key="column.id"
                 :class="
   mergeDataListUiClass(
-    'nut-dl-colpanel__row group/col flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    'nut-dl-colpanel__row group/col flex h-8 cursor-pointer items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
     void 0,
     ui.row
   )
 "
+                @click="toggleRow($event, column)"
               >
                 <UCheckbox
                   v-bind="checkboxProps"
@@ -328,11 +339,12 @@ function toggle() {
               :key="column.id"
               :class="
   mergeDataListUiClass(
-    'nut-dl-colpanel__row group/col flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    'nut-dl-colpanel__row group/col flex h-8 cursor-pointer items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
     void 0,
     ui.row
   )
 "
+              @click="toggleRow($event, column)"
             >
               <UCheckbox
                 v-bind="checkboxProps"
@@ -365,11 +377,12 @@ function toggle() {
               :key="column.id"
               :class="
   mergeDataListUiClass(
-    'nut-dl-colpanel__row flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    'nut-dl-colpanel__row flex h-8 cursor-pointer items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
     void 0,
     ui.row
   )
 "
+              @click="toggleRow($event, column)"
             >
               <UCheckbox
                 v-bind="checkboxProps"

package/dist/runtime/table/components/filters/panel/filter-panel.vue

@@ -5,6 +5,7 @@ import USlideover from "@nuxt/ui/components/Slideover.vue";
 import { computed, onMounted, watch } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { isNullish } from "../../../../shared/utils/predicate";
+import { useDataListBreakpoint } from "../../../composables/use-data-list-breakpoint";
 import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useTableInternals } from "../../../composables/use-table-internals";
 import { mergeDataListProps, mergeDataListUiClass } from "../../../utils";
@@ -19,6 +20,7 @@ const props = defineProps({
 });
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
+const { isMobile } = useDataListBreakpoint();
 const { locale, t } = useUiToolsLocale();
 const config = computed(() => dataListUi.ui.value.filterPanel);
 const resolvedUi = computed(() => ({ ...config.value?.ui, ...props.ui }));
@@ -39,6 +41,7 @@ const triggerBind = computed(() => {
   return rest;
 });
 const triggerLabel = computed(() => triggerProps.value.label ?? t("table.filters.panel.trigger"));
+const hasTriggerIcon = computed(() => Boolean(triggerProps.value.icon));
 const countProps = computed(
   () => controlProps.value.count === false ? null : mergeDataListProps(
     { color: "neutral", size: "xs", variant: "solid" },
@@ -212,6 +215,10 @@ onMounted(() => {
       <UButton
         v-bind="triggerBind"
         :aria-expanded="open"
+        :aria-label="triggerLabel"
+        :square="
+  triggerProps.square ?? (isMobile && hasTriggerIcon && (!countProps || activeCount === 0))
+"
         :ui="{
   base: mergeDataListUiClass(
     'nut-dl-fpanel-trigger shrink-0',
@@ -221,11 +228,16 @@ onMounted(() => {
 }"
       >
         <span
+          v-if="!isMobile || !hasTriggerIcon || countProps && activeCount > 0"
           :class="
-  mergeDataListUiClass('flex items-center gap-2', void 0, resolvedUi.triggerContent)
+  mergeDataListUiClass(
+    'nut-dl-fpanel-trigger__content flex items-center gap-2',
+    void 0,
+    resolvedUi.triggerContent
+  )
 "
         >
-          <span>{{ triggerLabel }}</span>
+          <span v-if="!isMobile || !hasTriggerIcon">{{ triggerLabel }}</span>
           <UBadge
             v-if="countProps && activeCount > 0"
             v-bind="countProps"

package/dist/runtime/table/components/filters/shared/dynamic-filter-picker.vue

@@ -203,7 +203,7 @@ function toggle() {
 "
         :ui="{
   base: mergeDataListUiClass(
-    `nut-dl-tag nut-dl-tag--add shrink-0 ${selectedDefinition ? '' : 'border border-dashed border-[var(--ui-border-accented)] text-muted hover:text-default hover:border-[var(--ui-text-dimmed)]'}`,
+    'nut-dl-tag nut-dl-tag--add shrink-0 border border-dashed border-[var(--ui-border-accented)] text-muted hover:text-default hover:border-[var(--ui-text-dimmed)]',
     void 0,
     ui?.trigger
   ),

package/dist/runtime/table/components/filters/shared/filter-editor-header.d.vue.ts

@@ -0,0 +1,16 @@
+import type { DataListFilterEditorUi } from '../../../types/index.js';
+type __VLS_Props = {
+    label: string;
+    active?: boolean;
+    embedded?: boolean;
+    ui?: DataListFilterEditorUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/filters/shared/filter-editor-header.vue

@@ -0,0 +1,46 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { mergeDataListUiClass } from "../../../utils";
+defineProps({
+  label: { type: String, required: true },
+  active: { type: Boolean, required: false },
+  embedded: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["back", "clear"]);
+const { t } = useUiToolsLocale();
+</script>
+
+<template>
+  <div
+    :class="
+  mergeDataListUiClass(
+    'nut-dl-editor__head flex items-center gap-2 border-b border-default py-2 pr-3',
+    embedded ? 'pl-1.5' : 'pl-3',
+    ui?.editorHeader
+  )
+"
+  >
+    <button
+      v-if="embedded"
+      type="button"
+      class="nut-dl-editor__back flex size-6 items-center justify-center rounded-md text-muted outline-none hover:bg-elevated hover:text-default focus-visible:ring-2 focus-visible:ring-primary/40"
+      :aria-label="t('table.filters.sheet.back')"
+      @click="emit('back')"
+    >
+      <UIcon name="i-lucide-arrow-left" class="size-4" />
+    </button>
+    <span class="min-w-0 flex-1 truncate text-[12.5px] font-semibold text-highlighted">
+      {{ label }}
+    </span>
+    <button
+      type="button"
+      class="nut-dl-editor__clear rounded text-[12.5px] font-semibold text-primary outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:opacity-40"
+      :disabled="!active"
+      @click="emit('clear')"
+    >
+      {{ t("table.filters.editor.clear") }}
+    </button>
+  </div>
+</template>

package/dist/runtime/table/components/filters/shared/filter-editor-header.vue.d.ts

@@ -0,0 +1,16 @@
+import type { DataListFilterEditorUi } from '../../../types/index.js';
+type __VLS_Props = {
+    label: string;
+    active?: boolean;
+    embedded?: boolean;
+    ui?: DataListFilterEditorUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/filters/shared/filter-option-multiple-list.d.vue.ts

@@ -36,6 +36,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         index: number;
         sectionKey: string;
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    truncate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/shared/filter-option-multiple-list.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   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, default: true },
   size: { type: String, required: false },
   ui: { type: Object, required: false }
 });
@@ -36,7 +36,7 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
 </script>
 
 <template>
-  <div :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
+  <div :class="mergeDataListUiClass('grid grid-cols-1 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"
@@ -48,11 +48,12 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
         :key="entry.value == null ? entry.label : String(entry.value)"
         :class="
   mergeDataListUiClass(
-    `nut-dl-option flex items-center rounded-md text-left outline-none transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'text-highlighted' : 'text-default'}`,
+    `nut-dl-option flex min-w-0 cursor-pointer items-center rounded-md text-left outline-none transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'text-highlighted' : 'text-default'}`,
     void 0,
     ui?.option
   )
 "
+        @click="emit('select', { event: $event, entry, index, sectionKey: section.key })"
       >
         <UCheckbox
           :model-value="entry.selected ?? false"
@@ -67,7 +68,6 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
         <button
           type="button"
           :class="['flex min-w-0 flex-1 items-center text-left', geometry.toolbarGap]"
-          @click="emit('select', { event: $event, entry, index, sectionKey: section.key })"
         >
           <span
             v-if="entry.color"
@@ -89,11 +89,12 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
           <span
             :class="
   mergeDataListUiClass(
-    `min-w-0 flex-1 ${sizeClasses.optionLabel} ${props.truncate ?? true ? 'truncate' : ''}`,
+    `min-w-0 flex-1 ${sizeClasses.optionLabel} ${props.truncate ? 'truncate' : ''}`,
     void 0,
     ui?.optionLabel
   )
 "
+            :title="entry.label"
           >
             {{ entry.label }}
           </span>

package/dist/runtime/table/components/filters/shared/filter-option-multiple-list.vue.d.ts

@@ -36,6 +36,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         index: number;
         sectionKey: string;
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    truncate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/shared/filter-option-picker-content.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useMediaQuery } from "@vueuse/core";
 import { isNullish } from "../../../../shared/utils/predicate";
 import FilterOptionListEnd from "./filter-option-list-end.vue";
 import FilterOptionLoadingList from "./filter-option-loading-list.vue";
@@ -13,6 +14,7 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const searchQuery = defineModel("searchQuery", { type: String, ...{ default: "" } });
+const finePointer = useMediaQuery("(pointer: fine)");
 const flatRadioValue = defineModel("flatRadioValue", { type: null, ...{ default: void 0 } });
 const treeRadioValue = defineModel("treeRadioValue", { type: null, ...{ default: void 0 } });
 const emit = defineEmits(["selectEntry", "toggleTreeEntry", "toggleExpanded"]);
@@ -33,10 +35,11 @@ function handleSelect(options) {
   <FilterSearchablePanel
     v-model:search-query="searchQuery"
     :searchable="props.state.filterUi.value.searchable"
+    :autofocus="props.state.filterUi.value.searchable && finePointer"
     :search-placeholder="props.state.filterUi.value.labels.searchPlaceholder"
     :search-loading="props.state.optionSource.isStaleLoading.value"
     :show-empty="
-  !props.state.optionSource.isLoading.value && !props.state.displayEntries.value.length && !props.state.visibleTreeEntries.value.length
+  !props.state.optionSource.isLoading.value && (props.state.filterUi.value.presentation === 'tree' ? !props.state.visibleTreeEntries.value.length : !props.state.displayEntries.value.length)
 "
     :empty-label="props.state.filterUi.value.labels.empty"
     :size="props.size"