nuxt-ui-tools 1.0.0 → 1.0.1

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

@@ -0,0 +1,13 @@
+import type { DataListContentUi, DataListControlSize } from '../../types/index.js';
+type __VLS_Props = {
+    minHeight?: string;
+    size?: DataListControlSize;
+    ui?: DataListContentUi;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/data-list/data-list-layout-switch.vue

@@ -42,7 +42,7 @@ function buttonProps(active) {
   ) : base;
 }
 function setLayout(layout) {
-  internals.controls.setTableLayout(layout);
+  internals.tableApi.layout.set(layout);
 }
 </script>
 

package/dist/runtime/table/components/data-list/data-list-refresh.vue

@@ -1,6 +1,7 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
-import { computed } from "vue";
+import { usePreferredReducedMotion } from "@vueuse/core";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
@@ -14,9 +15,13 @@ const props = defineProps({
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
 const { t } = useUiToolsLocale();
+const preferredMotion = usePreferredReducedMotion();
 const loading = computed(
   () => internals.queryContent.status.value.isFetching || internals.queryContent.status.value.isRefreshing || internals.queryContent.status.value.isRevalidating
 );
+const completingSpin = ref(false);
+const spinning = computed(() => loading.value || completingSpin.value);
+let completionFallback;
 const resolvedSize = computed(
   () => props.size ?? dataListUi.ui.value.refresh?.size ?? dataListUi.controlSize.value
 );
@@ -34,6 +39,37 @@ const buttonProps = computed(
 function refresh() {
   void internals.queryContent.refreshData()();
 }
+function finishSpin() {
+  completingSpin.value = false;
+  clearTimeout(completionFallback);
+  completionFallback = void 0;
+}
+function onSpinIteration(event) {
+  if (event.animationName === "nut-dl-refresh-spin" && !loading.value) {
+    finishSpin();
+  }
+}
+watch(
+  loading,
+  (next, previous) => {
+    if (next) {
+      finishSpin();
+      return;
+    }
+    if (!previous || preferredMotion.value === "reduce") {
+      return;
+    }
+    completingSpin.value = true;
+    completionFallback = setTimeout(finishSpin, 750);
+  },
+  { flush: "sync" }
+);
+watch(preferredMotion, (motion) => {
+  if (motion === "reduce") {
+    finishSpin();
+  }
+});
+onBeforeUnmount(() => clearTimeout(completionFallback));
 </script>
 
 <template>
@@ -48,21 +84,23 @@ function refresh() {
       :square="!label"
       :aria-label="t('table.header.refreshData')"
       :title="t('table.header.refreshData')"
-      :data-refreshing="loading"
+      :aria-busy="loading"
+      :data-refreshing="spinning"
       :ui="{
   ...resolvedUi,
   base: mergeDataListUiClass('nut-dl-refresh', void 0, resolvedUi.base),
   leadingIcon: mergeDataListUiClass(
-    loading ? 'nut-dl-refresh__icon--spinning' : 'nut-dl-refresh__icon',
+    spinning ? 'nut-dl-refresh__icon--spinning' : 'nut-dl-refresh__icon',
     void 0,
     resolvedUi.leadingIcon
   )
 }"
+      @animationiteration="onSpinIteration"
       @click="refresh"
     />
   </slot>
 </template>
 
 <style>
-.nut-dl-refresh__icon--spinning{animation:nut-dl-refresh-spin .7s linear infinite}@keyframes nut-dl-refresh-spin{to{transform:rotate(1turn)}}
+.nut-dl-refresh__icon--spinning{animation:nut-dl-refresh-spin .7s linear infinite}@keyframes nut-dl-refresh-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.nut-dl-refresh__icon--spinning{animation:none}}
 </style>

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

@@ -1,13 +1,5 @@
-import type { ComputedRef } from 'vue';
 import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
-import type { TableInternals } from '../../composables/use-table-internals.js';
-import type { DataListControlSize, DataListDensity, DataListUiConfig } from '../../types/index.js';
-interface DataListTable {
-    schema: ComputedRef<{
-        tableKey: string;
-    }>;
-    __internals: TableInternals;
-}
+import type { DataListControlSize, DataListDensity, DataListTable, DataListUiConfig } from '../../types/index.js';
 type __VLS_Props = {
     table: DataListTable;
     locale?: UiToolsLocale<UiToolsMessages>;

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

@@ -1,13 +1,5 @@
-import type { ComputedRef } from 'vue';
 import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
-import type { TableInternals } from '../../composables/use-table-internals.js';
-import type { DataListControlSize, DataListDensity, DataListUiConfig } from '../../types/index.js';
-interface DataListTable {
-    schema: ComputedRef<{
-        tableKey: string;
-    }>;
-    __internals: TableInternals;
-}
+import type { DataListControlSize, DataListDensity, DataListTable, DataListUiConfig } from '../../types/index.js';
 type __VLS_Props = {
     table: DataListTable;
     locale?: UiToolsLocale<UiToolsMessages>;

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

@@ -154,15 +154,21 @@ function humanize(value) {
         v-bind="triggerControlProps"
         icon="i-lucide-arrow-down-up"
         :ui="{
-  base: mergeDataListUiClass('nut-dl-sortbtn', void 0, resolvedUi.trigger),
-  label: resolvedUi.triggerLabel,
+  base: mergeDataListUiClass(
+    'nut-dl-sortbtn min-w-0 max-w-full',
+    void 0,
+    resolvedUi.trigger
+  ),
+  label: mergeDataListUiClass('min-w-0', void 0, resolvedUi.triggerLabel),
   leadingIcon: resolvedUi.triggerLeadingIcon,
   trailingIcon: resolvedUi.triggerTrailingIcon
 }"
       >
-        <span class="nut-dl-sortbtn__label flex items-center gap-1.5">
-          <span>{{ label ?? t("table.controls.sort") }}</span>
-          <span v-if="activeLabel" class="font-semibold text-highlighted">{{ activeLabel }}</span>
+        <span class="nut-dl-sortbtn__label flex min-w-0 items-center gap-1.5">
+          <span class="shrink-0">{{ label ?? t("table.controls.sort") }}</span>
+          <span v-if="activeLabel" class="min-w-0 truncate font-semibold text-highlighted">{{
+            activeLabel
+          }}</span>
           <UIcon
             v-if="activeLabel"
             :name="activeDirection === 'asc' ? 'i-lucide-arrow-up' : 'i-lucide-arrow-down'"

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

@@ -1,13 +1,5 @@
-import type { ComputedRef } from 'vue';
 import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
-import type { TableInternals } from '../composables/use-table-internals.js';
-import type { DataListControlSize, DataListDensity, DataListUiConfig } from '../types/index.js';
-interface DataListTable {
-    schema: ComputedRef<{
-        tableKey: string;
-    }>;
-    __internals: TableInternals;
-}
+import type { DataListControlSize, DataListDensity, DataListTable, DataListUiConfig } from '../types/index.js';
 type __VLS_Props = {
     table: DataListTable;
     title?: string;
@@ -27,10 +19,7 @@ declare var __VLS_15: {}, __VLS_18: {}, __VLS_21: {
     layout: import("../types/index.js").TableLayout;
 }, __VLS_33: {
     layout: import("../types/index.js").TableLayout;
-}, __VLS_36: {
-    error: {};
-    retry: () => void;
-}, __VLS_39: {
+}, __VLS_36: any, __VLS_39: {
     loadedCount: number;
 }, __VLS_42: {
     error: {};

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

@@ -1,13 +1,5 @@
-import type { ComputedRef } from 'vue';
 import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
-import type { TableInternals } from '../composables/use-table-internals.js';
-import type { DataListControlSize, DataListDensity, DataListUiConfig } from '../types/index.js';
-interface DataListTable {
-    schema: ComputedRef<{
-        tableKey: string;
-    }>;
-    __internals: TableInternals;
-}
+import type { DataListControlSize, DataListDensity, DataListTable, DataListUiConfig } from '../types/index.js';
 type __VLS_Props = {
     table: DataListTable;
     title?: string;
@@ -27,10 +19,7 @@ declare var __VLS_15: {}, __VLS_18: {}, __VLS_21: {
     layout: import("../types/index.js").TableLayout;
 }, __VLS_33: {
     layout: import("../types/index.js").TableLayout;
-}, __VLS_36: {
-    error: {};
-    retry: () => void;
-}, __VLS_39: {
+}, __VLS_36: any, __VLS_39: {
     loadedCount: number;
 }, __VLS_42: {
     error: {};

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

@@ -9,6 +9,7 @@ import { computed } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { isNumber } 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 {
@@ -24,6 +25,7 @@ const props = defineProps({
 });
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
+const { isMobile } = useDataListBreakpoint();
 const { t } = useUiToolsLocale();
 const ui = computed(() => ({
   ...dataListUi.ui.value.columnPanel?.ui,
@@ -41,15 +43,16 @@ const triggerProps = computed(
     {
       color: "neutral",
       icon: "i-lucide-layers",
-      label: t("table.controls.view"),
+      label: isMobile.value ? void 0 : t("table.controls.view"),
       size: resolvedSize.value,
+      square: isMobile.value,
       variant: "outline"
     },
     controlProps.value.trigger
   )
 );
 const countProps = computed(
-  () => controlProps.value.count === false ? null : controlProps.value.count ? mergeDataListProps(
+  () => isMobile.value || controlProps.value.count === false ? null : controlProps.value.count ? mergeDataListProps(
     { color: "neutral", size: resolvedSize.value, variant: "subtle" },
     controlProps.value.count
   ) : null
@@ -159,6 +162,8 @@ function toggle() {
     >
       <UButton
         v-bind="triggerProps"
+        :aria-label="t('table.controls.view')"
+        :title="t('table.controls.view')"
         :ui="{ base: mergeDataListUiClass('nut-dl-colbtn', void 0, ui.trigger) }"
       >
         <template v-if="countProps" #trailing>

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

@@ -63,11 +63,8 @@ const CHIP_ACTIVE = "nut-dl-chip--active border-primary/25 bg-primary/10 text-[v
         class="nut-dl-skeleton inline-block h-2.5 w-4 rounded"
         aria-hidden="true"
       />
-      <small
-        v-else-if="showCounts && entry.count != null"
-        class="nut-dl-chip__count text-[11px] text-dimmed tabular-nums"
-      >
-        {{ entry.count }}
+      <small v-else-if="showCounts" class="nut-dl-chip__count text-[11px] text-dimmed tabular-nums">
+        {{ entry.count ?? 0 }}
       </small>
     </button>
   </div>

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

@@ -141,7 +141,7 @@ function isPrimitiveValue(value) {
       :entries="chipEntries"
       :loading="state.optionSource.isLoading.value"
       :count-loading="state.optionSource.isCountLoading.value"
-      :show-counts="state.filterUi.value.row.showCounts"
+      :show-counts="state.optionSource.showCounts.value"
       :ui="ui"
       @toggle="state.toggleValue"
     />

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

@@ -9,7 +9,7 @@ type __VLS_Props = {
 declare function open(): void;
 declare function close(): void;
 declare function toggle(): void;
-declare var __VLS_10: {
+declare var __VLS_9: {
     open: typeof open;
     close: typeof close;
     toggle: typeof toggle;
@@ -22,7 +22,7 @@ declare var __VLS_10: {
     };
 };
 type __VLS_Slots = {} & {
-    trigger?: (props: typeof __VLS_10) => any;
+    trigger?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string) => any;

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

@@ -156,16 +156,17 @@ function toggle() {
 </script>
 
 <template>
-  <UPopover
-    :open="isOpen"
-    mode="click"
-    :content="{
+  <div class="contents">
+    <UPopover
+      :open="isOpen"
+      mode="click"
+      :content="{
   side: 'bottom',
   align: 'start',
   sideOffset: 8,
   onFocusOutside: handleFocusOutside
 }"
-    :ui="{
+      :ui="{
   content: resolveDataListPopoverContentClass(
     'fit',
     mergeDataListUiClass(
@@ -175,32 +176,32 @@ function toggle() {
     )
   )
 }"
-    @update:open="handleOpenChange"
-  >
-    <slot
-      v-if="$slots.trigger"
-      name="trigger"
-      :open="open"
-      :close="close"
-      :toggle="toggle"
-      :open-state="isOpen"
-      :stage="stage"
-      :definition="selectedDefinition"
-      :trigger-props="{
+      @update:open="handleOpenChange"
+    >
+      <slot
+        v-if="$slots.trigger"
+        name="trigger"
+        :open="open"
+        :close="close"
+        :toggle="toggle"
+        :open-state="isOpen"
+        :stage="stage"
+        :definition="selectedDefinition"
+        :trigger-props="{
   type: 'button',
   'aria-expanded': isOpen
 }"
-    />
-    <UButton
-      v-else
-      v-bind="triggerProps"
-      :icon="
+      />
+      <UButton
+        v-else
+        v-bind="triggerProps"
+        :icon="
   selectedDefinition ? dataListUi.ui.value.filterTags?.props?.icon === false ? void 0 : resolveFilterTriggerIcon(selectedDefinition) : 'i-lucide-plus'
 "
-      :label="
+        :label="
   selectedDefinition ? getLabel(selectedDefinition) : triggerProps.label ?? t('table.controls.addFilter')
 "
-      :ui="{
+        :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)]'}`,
     void 0,
@@ -208,118 +209,119 @@ function toggle() {
   ),
   leadingIcon: 'size-[13px]'
 }"
-    />
+      />
 
-    <template #content>
-      <FilterStageTransition
-        :stage-key="`${stage}:${selectedKey ?? ''}:${pendingOperator ?? ''}`"
-        :direction="stageDirection"
-        @settled="stageTransitioning = false"
-      >
-        <div
-          v-if="stage === 'picker'"
-          :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
+      <template #content>
+        <FilterStageTransition
+          :stage-key="`${stage}:${selectedKey ?? ''}:${pendingOperator ?? ''}`"
+          :direction="stageDirection"
+          @settled="stageTransitioning = false"
         >
           <div
-            v-if="pickerProps?.title !== false"
-            :class="
+            v-if="stage === 'picker'"
+            :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
+          >
+            <div
+              v-if="pickerProps?.title !== false"
+              :class="
   mergeDataListUiClass(
     'nut-dl-picker__title px-2.5 pt-2 pb-0.5 text-[11.5px] font-semibold text-muted',
     void 0,
     ui?.title
   )
 "
-          >
-            {{ t("table.controls.addFilter") }}
-          </div>
-          <FilterSearchablePanel
-            v-model:search-query="searchQuery"
-            :searchable="searchable"
-            :autofocus="searchable"
-            :search-placeholder="t('table.controls.searchFilters')"
-            :show-empty="!filteredDefinitions.length"
-            :empty-label="t('table.controls.noMatchingFilters')"
-            max-height-class="max-h-72"
-            :size="size"
-            :ui="ui"
-          >
-            <button
-              v-for="definition in filteredDefinitions"
-              :key="definition.key"
-              type="button"
-              :class="
+            >
+              {{ t("table.controls.addFilter") }}
+            </div>
+            <FilterSearchablePanel
+              v-model:search-query="searchQuery"
+              :searchable="searchable"
+              :autofocus="searchable"
+              :search-placeholder="t('table.controls.searchFilters')"
+              :show-empty="!filteredDefinitions.length"
+              :empty-label="t('table.controls.noMatchingFilters')"
+              max-height-class="max-h-72"
+              :size="size"
+              :ui="ui"
+            >
+              <button
+                v-for="definition in filteredDefinitions"
+                :key="definition.key"
+                type="button"
+                :class="
   mergeDataListUiClass(
     `flex min-w-0 items-center rounded-md text-left outline-none transition-colors hover:bg-elevated/70 focus-visible:ring-2 focus-visible:ring-primary/40 ${sizeClasses.option}`,
     void 0,
     ui?.option
   )
 "
-              @click="handleSelect(definition.key)"
-            >
-              <UIcon
-                :name="
+                @click="handleSelect(definition.key)"
+              >
+                <UIcon
+                  :name="
   pickerProps?.icon === 'kind' ? resolveFilterTriggerIcon(definition) : 'i-lucide-plus'
 "
-                :class="
+                  :class="
   mergeDataListUiClass(
     `${sizeClasses.optionIcon} shrink-0 text-muted`,
     void 0,
     ui?.optionIcon
   )
 "
-              />
-              <span
-                :class="
+                />
+                <span
+                  :class="
   mergeDataListUiClass(
     `min-w-0 flex-1 truncate text-default ${sizeClasses.optionLabel}`,
     void 0,
     ui?.optionLabel
   )
 "
-              >
-                {{ getLabel(definition) }}
-              </span>
-              <span
-                :class="
+                >
+                  {{ getLabel(definition) }}
+                </span>
+                <span
+                  :class="
   mergeDataListUiClass(
     'inline-flex shrink-0 items-center text-dimmed',
     void 0,
     ui?.optionTrailingIcon
   )
 "
-              >
-                <UIcon name="i-lucide-chevron-right" :class="geometry.icon" />
-              </span>
-            </button>
-          </FilterSearchablePanel>
-        </div>
+                >
+                  <UIcon name="i-lucide-chevron-right" :class="geometry.icon" />
+                </span>
+              </button>
+            </FilterSearchablePanel>
+          </div>
 
-        <div
-          v-else-if="stage === 'match-mode'"
-          :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
-        >
-          <FilterMatchModePanel
-            :items="operatorItems"
-            :selected="pendingOperator"
-            :size="size"
-            :ui="ui"
-            @select="openEditor"
-          />
-        </div>
+          <div
+            v-else-if="stage === 'match-mode'"
+            :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
+          >
+            <FilterMatchModePanel
+              :items="operatorItems"
+              :selected="pendingOperator"
+              :size="size"
+              :ui="ui"
+              @select="openEditor"
+            />
+          </div>
 
-        <component
-          :is="resolveFilterTagComponent(sessionDefinition)"
-          v-else-if="stage === 'editor' && sessionDefinition"
-          :definition="sessionDefinition"
-          dynamic
-          session
-          embedded
-          :initial-operator="pendingOperator"
-          @dismiss="handleSessionClosed"
-          @session-closed="handleSessionClosed"
-          @back="goBack"
-        />
-      </FilterStageTransition>
-    </template>
-  </UPopover>
+          <component
+            :is="resolveFilterTagComponent(sessionDefinition)"
+            v-else-if="stage === 'editor' && sessionDefinition"
+            :definition="sessionDefinition"
+            dynamic
+            session
+            embedded
+            :initial-operator="pendingOperator"
+            @dismiss="handleSessionClosed"
+            @session-closed="handleSessionClosed"
+            @back="goBack"
+          />
+        </FilterStageTransition>
+      </template>
+    </UPopover>
+  </div>
 </template>

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

@@ -9,7 +9,7 @@ type __VLS_Props = {
 declare function open(): void;
 declare function close(): void;
 declare function toggle(): void;
-declare var __VLS_10: {
+declare var __VLS_9: {
     open: typeof open;
     close: typeof close;
     toggle: typeof toggle;
@@ -22,7 +22,7 @@ declare var __VLS_10: {
     };
 };
 type __VLS_Slots = {} & {
-    trigger?: (props: typeof __VLS_10) => any;
+    trigger?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string) => any;

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

@@ -104,10 +104,10 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
           :class="[sizeClasses.skeletonCount, 'shrink-0 rounded-full']"
         />
         <span
-          v-else-if="props.showCounts && entry.count != null"
+          v-else-if="props.showCounts"
           :class="mergeDataListUiClass('shrink-0 text-muted', void 0, ui?.optionCount)"
         >
-          {{ entry.count }}
+          {{ entry.count ?? 0 }}
         </span>
       </div>
     </template>

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

@@ -55,7 +55,7 @@ function handleSelect(options) {
         :items="props.state.treeRadioItems.value"
         :multiple="props.state.filterUi.value.selection.mode === 'multiple'"
         :count-loading="
-  props.state.filterUi.value.row.showCounts && props.state.optionSource.isCountLoading.value
+  props.state.optionSource.showCounts.value && props.state.optionSource.isCountLoading.value
 "
         :selected-icon="props.state.filterUi.value.row.selectedIcon"
         :size="props.size"
@@ -77,7 +77,7 @@ function handleSelect(options) {
         :sections="
   props.sections ?? [{ key: 'default', entries: props.state.displayEntries.value }]
 "
-        :show-counts="props.state.filterUi.value.row.showCounts"
+        :show-counts="props.state.optionSource.showCounts.value"
         :count-loading="props.state.optionSource.isCountLoading.value"
         :selected-icon="props.state.filterUi.value.row.selectedIcon"
         :truncate="props.state.filterUi.value.row.truncate"
@@ -99,7 +99,7 @@ function handleSelect(options) {
         v-model="flatRadioValue"
         :items="props.state.flatRadioItems.value"
         :count-loading="
-  props.state.filterUi.value.row.showCounts && props.state.optionSource.isCountLoading.value
+  props.state.optionSource.showCounts.value && props.state.optionSource.isCountLoading.value
 "
         :size="props.size"
         :ui="props.ui"

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

@@ -67,7 +67,7 @@ const modelValue = defineModel({ type: null, ...{
 "
         />
 
-        <span class="min-w-0 flex-1" :class="item.truncate ? 'truncate' : ''">
+        <span class="min-w-0 flex-1 truncate">
           {{ item.label }}
         </span>
         <USkeleton