nuxt-ui-tools 1.0.0 → 1.1.0

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

@@ -1,17 +1,11 @@
 <script setup>
-import UButton from "@nuxt/ui/components/Button.vue";
-import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed, nextTick, ref, watch } from "vue";
-import { useUiToolsLocale } from "#ui-tools/i18n";
 import { isNumber } from "../../../shared/utils/predicate";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { provideDataListViewport } from "../../composables/use-data-list-viewport";
 import { useTableInternals } from "../../composables/use-table-internals";
-import {
-  mergeDataListUiClass,
-  resolveDataListContentShellClass,
-  resolveDataListControlGeometry
-} from "../../utils";
+import { mergeDataListUiClass, resolveDataListContentShellClass } from "../../utils";
+import DataListErrorState from "./data-list-error-state.vue";
 import DataListGrid from "./data-list-grid.vue";
 import DataListTable from "./data-list-table.vue";
 const props = defineProps({
@@ -24,14 +18,13 @@ const props = defineProps({
 });
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
-const { t } = useUiToolsLocale();
 const viewport = ref(null);
 provideDataListViewport(viewport);
 const rows = computed(() => internals.queryContent.data.value.rows);
 const loading = computed(
-  () => internals.queryContent.status.value.isBooting || internals.queryContent.status.value.isPending && rows.value.length === 0
+  () => internals.queryContent.status.value.isBooting || (internals.queryContent.status.value.isPending || internals.queryContent.status.value.isFetching) && rows.value.length === 0
 );
-const error = computed(() => rows.value.length ? null : internals.queryContent.error.value);
+const error = computed(() => internals.queryContent.error.value);
 const empty = computed(() => !loading.value && !error.value && rows.value.length === 0);
 const hasActiveQuery = computed(
   () => internals.filters.hasActiveSearch.value || internals.filters.hasActiveUiFilters.value
@@ -55,7 +48,6 @@ 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 shellClass = computed(
   () => resolveDataListContentShellClass({
     layout: internals.controls.tableLayout.value,
@@ -106,81 +98,13 @@ watch(
       :name="$slots['initial-loading'] ? 'initial-loading' : 'loading'"
       :layout="internals.controls.tableLayout.value"
     />
-    <slot v-else-if="error" name="error" :error="error" :retry="refresh">
-      <div
-        :class="
-  mergeDataListUiClass(
-    'grid min-h-64 place-items-center px-4 py-10 text-center',
-    rootUi?.error,
-    ui?.error
-  )
-"
-      >
-        <div
-          :class="
-  mergeDataListUiClass(
-    `flex max-w-md items-start text-left ${geometry.toolbarGap}`,
-    rootUi?.errorBody,
-    ui?.errorBody
-  )
-"
-        >
-          <span
-            :class="
-  mergeDataListUiClass(
-    'grid size-9 shrink-0 place-items-center rounded-md bg-error/10 text-error',
-    rootUi?.errorIcon,
-    ui?.errorIcon
-  )
-"
-          >
-            <UIcon name="i-lucide-cloud-alert" class="size-4" />
-          </span>
-          <div
-            :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',
-    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="refresh"
-            >
-              {{ t("table.states.gridError.action") }}
-            </UButton>
-          </div>
-        </div>
-      </div>
+    <slot
+      v-else-if="error && internals.controls.tableLayout.value === 'grid'"
+      name="error"
+      :error="error"
+      :retry="refresh"
+    >
+      <DataListErrorState min-height="16rem" :size="resolvedSize" :ui="ui" @retry="refresh" />
     </slot>
     <slot
       v-else-if="empty && $slots.empty"
@@ -207,6 +131,9 @@ watch(
       >
         <slot v-if="internals.controls.tableLayout.value === 'table'" name="table" :rows="rows">
           <DataListTable :size="resolvedSize" :fill="fit !== 'content'" class="min-h-0 flex-1">
+            <template v-if="$slots.error" #error="scope">
+              <slot name="error" v-bind="scope" />
+            </template>
             <template #empty>
               <slot name="empty-table">
                 <slot

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

@@ -14,32 +14,32 @@ declare var __VLS_1: {}, __VLS_4: "loading" | "initial-loading", __VLS_5: {
 }, __VLS_7: {
     error: {};
     retry: typeof refresh;
-}, __VLS_22: {
+}, __VLS_16: {
     layout: import("../../types/index.js").TableLayout;
     refresh: typeof refresh;
     hasActiveQuery: boolean;
     clearQuery: typeof clearQuery;
-}, __VLS_24: {
+}, __VLS_18: {
     layout: import("../../types/index.js").TableLayout;
     rows: object[];
     loading: boolean;
     empty: boolean;
     error: unknown;
-}, __VLS_32: {
+}, __VLS_26: {
     rows: object[];
-}, __VLS_41: {}, __VLS_43: {
+}, __VLS_35: any, __VLS_38: {}, __VLS_40: {
     layout: string;
     refresh: typeof refresh;
     hasActiveQuery: boolean;
     clearQuery: typeof clearQuery;
-}, __VLS_45: {
+}, __VLS_42: {
     rows: object[];
-}, __VLS_54: {}, __VLS_56: {
+}, __VLS_51: {}, __VLS_53: {
     layout: string;
     refresh: typeof refresh;
     hasActiveQuery: boolean;
     clearQuery: typeof clearQuery;
-}, __VLS_58: {}, __VLS_60: {};
+}, __VLS_55: {}, __VLS_57: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_4>]?: (props: typeof __VLS_5) => any;
 } & {
@@ -47,30 +47,32 @@ type __VLS_Slots = {} & {
 } & {
     error?: (props: typeof __VLS_7) => any;
 } & {
-    empty?: (props: typeof __VLS_22) => any;
+    empty?: (props: typeof __VLS_16) => any;
 } & {
-    content?: (props: typeof __VLS_24) => any;
+    content?: (props: typeof __VLS_18) => any;
 } & {
-    table?: (props: typeof __VLS_32) => any;
+    table?: (props: typeof __VLS_26) => any;
 } & {
-    'empty-table'?: (props: typeof __VLS_41) => any;
+    error?: (props: typeof __VLS_35) => any;
 } & {
-    empty?: (props: typeof __VLS_43) => any;
+    'empty-table'?: (props: typeof __VLS_38) => any;
 } & {
-    grid?: (props: typeof __VLS_45) => any;
+    empty?: (props: typeof __VLS_40) => any;
 } & {
-    'empty-grid'?: (props: typeof __VLS_54) => any;
+    grid?: (props: typeof __VLS_42) => any;
 } & {
-    empty?: (props: typeof __VLS_56) => any;
+    'empty-grid'?: (props: typeof __VLS_51) => any;
 } & {
-    refreshing?: (props: typeof __VLS_58) => any;
+    empty?: (props: typeof __VLS_53) => any;
 } & {
-    after?: (props: typeof __VLS_60) => any;
+    refreshing?: (props: typeof __VLS_55) => any;
+} & {
+    after?: (props: typeof __VLS_57) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     transition: boolean;
-    fit: DataListContentFit;
     surface: DataListContentSurface;
+    fit: DataListContentFit;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -9,10 +9,7 @@ declare var __VLS_1: {}, __VLS_18: {}, __VLS_52: {
     layout: import("../../types/index.js").TableLayout;
 }, __VLS_55: {
     layout: import("../../types/index.js").TableLayout;
-}, __VLS_58: {
-    error: {};
-    retry: () => void;
-}, __VLS_61: {
+}, __VLS_58: any, __VLS_61: {
     layout: string;
     refresh: () => void;
     hasActiveQuery: boolean;

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

@@ -9,10 +9,7 @@ declare var __VLS_1: {}, __VLS_18: {}, __VLS_52: {
     layout: import("../../types/index.js").TableLayout;
 }, __VLS_55: {
     layout: import("../../types/index.js").TableLayout;
-}, __VLS_58: {
-    error: {};
-    retry: () => void;
-}, __VLS_61: {
+}, __VLS_58: any, __VLS_61: {
     layout: string;
     refresh: () => void;
     hasActiveQuery: boolean;

package/dist/runtime/table/components/data-list/data-list-error-state.d.vue.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-error-state.vue

@@ -0,0 +1,91 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+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";
+const props = defineProps({
+  minHeight: { type: String, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["retry"]);
+const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
+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));
+</script>
+
+<template>
+  <div
+    :class="
+  mergeDataListUiClass(
+    'grid place-items-center px-4 py-10 text-center',
+    rootUi?.error,
+    ui?.error
+  )
+"
+    :style="{ minHeight }"
+  >
+    <div
+      :class="
+  mergeDataListUiClass(
+    `flex max-w-md items-start text-left ${geometry.toolbarGap}`,
+    rootUi?.errorBody,
+    ui?.errorBody
+  )
+"
+    >
+      <span
+        :class="
+  mergeDataListUiClass(
+    'grid size-9 shrink-0 place-items-center rounded-md bg-error/10 text-error',
+    rootUi?.errorIcon,
+    ui?.errorIcon
+  )
+"
+      >
+        <UIcon name="i-lucide-cloud-alert" class="size-4" />
+      </span>
+      <div
+        :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',
+    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>
+    </div>
+  </div>
+</template>

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-infinite-loader.d.vue.ts

@@ -22,7 +22,7 @@ declare var __VLS_1: {
         isLoadingMore: boolean;
         loadMoreError: unknown;
         loadedCount: number;
-        mode: "none" | "offset" | "cursor";
+        mode: "cursor" | "none" | "offset";
         pageCount: number;
         pageIndex: number;
         pageSize: number;

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

@@ -22,7 +22,7 @@ declare var __VLS_1: {
         isLoadingMore: boolean;
         loadMoreError: unknown;
         loadedCount: number;
-        mode: "none" | "offset" | "cursor";
+        mode: "cursor" | "none" | "offset";
         pageCount: number;
         pageIndex: number;
         pageSize: number;

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

@@ -17,8 +17,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    mobile: boolean;
     order: TableLayout[];
+    mobile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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-layout-switch.vue.d.ts

@@ -17,8 +17,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    mobile: boolean;
     order: TableLayout[];
+    mobile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -11,7 +11,7 @@ declare var __VLS_1: {
         isLoadingMore: boolean;
         loadMoreError: unknown;
         loadedCount: number;
-        mode: "none" | "offset" | "cursor";
+        mode: "cursor" | "none" | "offset";
         pageCount: number;
         pageIndex: number;
         pageSize: number;

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

@@ -11,7 +11,7 @@ declare var __VLS_1: {
         isLoadingMore: boolean;
         loadMoreError: unknown;
         loadedCount: number;
-        mode: "none" | "offset" | "cursor";
+        mode: "cursor" | "none" | "offset";
         pageCount: number;
         pageIndex: number;
         pageSize: number;

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.d.vue.ts

@@ -10,7 +10,7 @@ declare var __VLS_29: {
     label: string | null;
     sorting: {
         active: boolean;
-        dir: "desc" | "asc" | undefined;
+        dir: "asc" | "desc" | undefined;
         key: string | undefined;
     };
     setSorting: (sorting: {

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/data-list-sort-menu.vue.d.ts

@@ -10,7 +10,7 @@ declare var __VLS_29: {
     label: string | null;
     sorting: {
         active: boolean;
-        dir: "desc" | "asc" | undefined;
+        dir: "asc" | "desc" | undefined;
         key: string | undefined;
     };
     setSorting: (sorting: {

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

@@ -7,10 +7,10 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     selectKey: (key: string) => any;
-    selectDirection: (direction: "desc" | "asc") => any;
+    selectDirection: (direction: "asc" | "desc") => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelectKey?: ((key: string) => any) | undefined;
-    onSelectDirection?: ((direction: "desc" | "asc") => any) | undefined;
+    onSelectDirection?: ((direction: "asc" | "desc") => any) | undefined;
 }>, {
     compact: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -7,10 +7,10 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     selectKey: (key: string) => any;
-    selectDirection: (direction: "desc" | "asc") => any;
+    selectDirection: (direction: "asc" | "desc") => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelectKey?: ((key: string) => any) | undefined;
-    onSelectDirection?: ((direction: "desc" | "asc") => any) | undefined;
+    onSelectDirection?: ((direction: "asc" | "desc") => any) | undefined;
 }>, {
     compact: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;