nuxt-ui-tools 1.5.0 → 1.6.0

package/dist/runtime/table/components/grid/grid-renderer.vue

@@ -2,12 +2,14 @@
 import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import { useVirtualizer } from "@tanstack/vue-virtual";
-import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
+import { computed, nextTick, useTemplateRef, watch } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
 import { GRID_DEFAULTS } from "../../constants/grid";
 import { mergeDataListUiClass, resolveTableRowId } from "../../utils";
+import DataListErrorState from "../data-list/data-list-error-state.vue";
+import ProgressLine from "../layout/progress-line.vue";
 import TableEmptyState from "../table/table-empty-state.vue";
 import GridCard from "./grid-card.vue";
 import GridSkeleton from "./grid-skeleton.vue";
@@ -25,49 +27,9 @@ const resolvedSize = computed(
 );
 const gap = computed(() => dataListUi.ui.value.grid?.gap ?? 16);
 const viewportRef = useTemplateRef("viewportRef");
-const animationsReady = ref(false);
 const isContained = computed(() => internals.grid.mode.value === "contained");
 const rowChunks = computed(() => internals.grid.rowChunks.value);
 const tableRows = computed(() => internals.grid.rows.value);
-const flipPositions = /* @__PURE__ */ new Map();
-watch(
-  tableRows,
-  () => {
-    flipPositions.clear();
-    if (!isContained.value) {
-      return;
-    }
-    const items = viewportRef.value?.querySelectorAll(".nut-dl-grid__item[data-row-id]") ?? [];
-    for (const item of items) {
-      const rect = item.getBoundingClientRect();
-      flipPositions.set(item.dataset.rowId ?? "", { left: rect.left, top: rect.top });
-    }
-  },
-  { flush: "pre" }
-);
-watch(tableRows, () => nextTick().then(flipCards), { flush: "post" });
-function flipCards() {
-  if (!flipPositions.size) {
-    return;
-  }
-  const items = viewportRef.value?.querySelectorAll(".nut-dl-grid__item[data-row-id]") ?? [];
-  for (const item of items) {
-    const previous = flipPositions.get(item.dataset.rowId ?? "");
-    if (!previous) {
-      continue;
-    }
-    const rect = item.getBoundingClientRect();
-    const dx = previous.left - rect.left;
-    const dy = previous.top - rect.top;
-    if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
-      item.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], {
-        duration: 240,
-        easing: "cubic-bezier(0.2, 0.9, 0.3, 1)"
-      });
-    }
-  }
-  flipPositions.clear();
-}
 const status = computed(() => internals.queryContent.status.value);
 const gridTemplateColumns = computed(
   () => `repeat(${internals.grid.columnCount.value}, minmax(0, 1fr))`
@@ -81,6 +43,7 @@ const showInitialLoading = computed(
 const showRefreshing = computed(
   () => !internals.queryContent.error.value && tableRows.value.length > 0 && (status.value.isFetching || status.value.isRefreshing || status.value.isRevalidating)
 );
+const replacing = computed(() => tableRows.value.length > 0 && status.value.isReplacing);
 const showError = computed(() => Boolean(internals.queryContent.error.value));
 const showEmpty = computed(
   () => !showInitialLoading.value && !showError.value && tableRows.value.length === 0
@@ -101,15 +64,6 @@ const rowVirtualizer = useVirtualizer(
 );
 const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems());
 const totalSize = computed(() => rowVirtualizer.value.getTotalSize());
-onMounted(() => {
-  nextTick().then(() => {
-    animationsReady.value = true;
-  });
-});
-watch(
-  () => internals.pagination.currentPage.value,
-  () => scrollToTop()
-);
 watch(
   () => internals.controls.tableLayout.value,
   (layout) => {
@@ -149,6 +103,29 @@ const loadingMore = computed(
   () => cursorMode.value && internals.pagination.state.value.isLoadingMore
 );
 const hasNextPage = computed(() => cursorMode.value && internals.pagination.state.value.hasNextPage);
+let scrollResetPending = false;
+watch(
+  () => [
+    internals.pagination.currentPage.value,
+    internals.pagination.pageSize.value,
+    JSON.stringify(internals.tableColumns.sortingState.value),
+    JSON.stringify(internals.queryState.filters.value),
+    internals.filters.searchQuery.value
+  ],
+  () => {
+    if (!cursorMode.value) scrollResetPending = true;
+  }
+);
+function resetScroll() {
+  if (!scrollResetPending) return;
+  scrollResetPending = false;
+  scrollToTop();
+}
+watch(tableRows, resetScroll);
+watch(
+  () => status.value.isFetching,
+  (fetching) => !fetching && resetScroll()
+);
 watch(
   () => [
     virtualRows.value.at(-1)?.index ?? -1,
@@ -193,7 +170,7 @@ function refreshData() {
 "
     :style="{ '--nut-dl-grid-gap': `${gap}px`, height: !fill && height ? height : void 0 }"
     :data-loading="showInitialLoading"
-    :data-animated="animationsReady"
+    :data-replacing="replacing"
   >
     <div
       ref="viewportRef"
@@ -225,48 +202,20 @@ function refreshData() {
         v-else-if="showError"
         :class="
   mergeDataListUiClass(
-    'nut-dl-grid__state flex items-center justify-center px-4 py-10',
+    'nut-dl-grid__state flex h-full flex-col items-stretch justify-center',
     void 0,
     ui?.error
   )
 "
       >
-        <div
-          :class="
-  mergeDataListUiClass(
-    'grid max-w-md justify-items-center gap-3 rounded-lg border border-default bg-default px-6 py-8 text-center',
-    void 0,
-    ui?.errorCard
-  )
-"
-        >
-          <UIcon
-            name="i-lucide-cloud-alert"
-            :class="mergeDataListUiClass('size-5 text-error', void 0, ui?.errorIcon)"
-          />
-          <div :class="mergeDataListUiClass('grid gap-1', void 0, ui?.errorCopy)">
-            <div
-              :class="
-  mergeDataListUiClass('font-medium text-highlighted', void 0, ui?.errorTitle)
-"
-            >
-              {{ t("table.states.gridError.title") }}
-            </div>
-            <p :class="mergeDataListUiClass('text-sm text-muted', void 0, ui?.errorDescription)">
-              {{ t("table.states.gridError.description") }}
-            </p>
-          </div>
-          <UButton
-            color="neutral"
-            variant="outline"
+        <slot name="error" :error="internals.queryContent.error.value" :retry="refreshData">
+          <DataListErrorState
+            :min-height="fill ? void 0 : '16rem'"
             :size="resolvedSize"
-            icon="i-lucide-refresh-cw"
-            :ui="{ base: ui?.retry }"
-            @click="refreshData"
-          >
-            {{ t("table.states.gridError.action") }}
-          </UButton>
-        </div>
+            class="flex-1"
+            @retry="refreshData"
+          />
+        </slot>
       </div>
 
       <div
@@ -280,7 +229,7 @@ function refreshData() {
 "
       >
         <slot name="empty">
-          <TableEmptyState min-height="24rem" :size="resolvedSize" />
+          <TableEmptyState :min-height="fill ? void 0 : '24rem'" :size="resolvedSize" />
         </slot>
       </div>
 
@@ -320,16 +269,10 @@ function refreshData() {
         </div>
       </div>
 
-      <TransitionGroup
+      <div
         v-else
-        tag="div"
         :class="mergeDataListUiClass('nut-dl-grid__flow grid', void 0, ui?.flow)"
         :style="{ gridTemplateColumns, gap: `${gap}px` }"
-        move-class="nut-dl-grid__item--moving"
-        enter-active-class="nut-dl-grid__item--entering"
-        enter-from-class="nut-dl-grid__item--from"
-        leave-active-class="nut-dl-grid__item--leaving"
-        leave-to-class="nut-dl-grid__item--from"
       >
         <div
           v-for="(row, index) in tableRows"
@@ -339,7 +282,7 @@ function refreshData() {
         >
           <GridCard :row-index="index" />
         </div>
-      </TransitionGroup>
+      </div>
     </div>
 
     <div
@@ -353,32 +296,21 @@ function refreshData() {
       <span>{{ t("table.controls.loadingMore") }}</span>
     </div>
 
-    <Transition name="nut-dl-grid-progress">
-      <div
-        v-if="showRefreshing"
-        :class="
+    <ProgressLine
+      :active="showRefreshing"
+      :restart-key="internals.queryContent.refreshes.value"
+      :class="
   mergeDataListUiClass(
-    'nut-dl-grid__progress pointer-events-none absolute inset-x-0 top-0 z-10 h-0.5 overflow-hidden',
+    'nut-dl-grid__progress absolute inset-x-0 top-0 z-10',
     void 0,
     ui?.refreshing
   )
 "
-        aria-hidden="true"
-      >
-        <span
-          :class="
-  mergeDataListUiClass(
-    'nut-dl-grid__progress-bar block h-full w-full',
-    void 0,
-    ui?.refreshingLine
-  )
-"
-        />
-      </div>
-    </Transition>
+      :bar-class="mergeDataListUiClass('nut-dl-grid__progress-bar', void 0, ui?.refreshingLine)"
+    />
   </div>
 </template>
 
 <style>
-.nut-dl-grid__skeleton{animation:nut-dl-grid-in .2s ease both;animation-delay:calc(var(--nut-dl-i, 0)*30ms)}.nut-dl-grid__viewport{overflow-anchor:none;scrollbar-width:thin}.nut-dl-grid[data-animated=true] .nut-dl-grid__item{animation:nut-dl-grid-in .22s cubic-bezier(.2,.9,.3,1) both}.nut-dl-grid__item--moving{transition:transform .24s cubic-bezier(.2,.9,.3,1)}.nut-dl-grid__item--entering{transition:opacity .18s ease,transform .24s cubic-bezier(.2,.9,.3,1)}.nut-dl-grid__item--leaving{position:absolute;transition:opacity .14s ease,transform .14s ease}.nut-dl-grid__item--from{opacity:0;transform:translateY(6px)}@keyframes nut-dl-grid-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.nut-dl-grid__progress-bar{animation:nut-dl-grid-progress 1s ease-in-out infinite;background:linear-gradient(90deg,transparent,var(--ui-primary),transparent);background-size:40% 100%}@keyframes nut-dl-grid-progress{0%{background-position:-40% 0}to{background-position:140% 0}}.nut-dl-grid-progress-enter-active,.nut-dl-grid-progress-leave-active{transition:opacity .16s ease}.nut-dl-grid-progress-enter-from,.nut-dl-grid-progress-leave-to{opacity:0}@media (prefers-reduced-motion:reduce){.nut-dl-grid[data-animated=true] .nut-dl-grid__item,.nut-dl-grid__progress-bar{animation:none}.nut-dl-grid__item--entering,.nut-dl-grid__item--leaving,.nut-dl-grid__item--moving{transition:none}}
+.nut-dl-grid__skeleton{animation:nut-dl-grid-in .18s ease .12s both}.nut-dl-grid__viewport{overflow-anchor:none;scrollbar-width:thin}.nut-dl-grid__canvas,.nut-dl-grid__flow{transition:opacity .16s ease-out}.nut-dl-grid[data-replacing=true] .nut-dl-grid__canvas,.nut-dl-grid[data-replacing=true] .nut-dl-grid__flow{opacity:.55;transition:opacity .2s ease-in .18s}@keyframes nut-dl-grid-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.nut-dl-grid__skeleton{animation:none}.nut-dl-grid__canvas,.nut-dl-grid__flow{transition:none}}
 </style>

package/dist/runtime/table/components/grid/grid-renderer.vue.d.ts

@@ -5,9 +5,15 @@ type __VLS_Props = {
     fill?: boolean;
     ui?: DataListGridUi;
 };
-declare var __VLS_19: {};
+declare function refreshData(): void;
+declare var __VLS_6: {
+    error: unknown;
+    retry: typeof refreshData;
+}, __VLS_15: {};
 type __VLS_Slots = {} & {
-    empty?: (props: typeof __VLS_19) => any;
+    error?: (props: typeof __VLS_6) => any;
+} & {
+    empty?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/table/components/layout/progress-line.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    active: boolean;
+    /** Changes on every refresh request, so the sweep restarts even while a request is running. */
+    restartKey?: number;
+    barClass?: string;
+};
+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;
+export default _default;

package/dist/runtime/table/components/layout/progress-line.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { onBeforeUnmount, ref, watch } from "vue";
+const MIN_VISIBLE_MS = 600;
+const props = defineProps({
+  active: { type: Boolean, required: true },
+  restartKey: { type: Number, required: false },
+  barClass: { type: String, required: false }
+});
+const visible = ref(props.active);
+const sweep = ref(0);
+let shownAt = Date.now();
+let hideTimer;
+watch([() => props.active, () => props.restartKey], ([active, key], [wasActive, previousKey]) => {
+  clearTimeout(hideTimer);
+  if (active) {
+    if (!wasActive || key !== previousKey) {
+      sweep.value += 1;
+      shownAt = Date.now();
+    }
+    visible.value = true;
+    return;
+  }
+  hideTimer = setTimeout(
+    () => visible.value = false,
+    Math.max(0, MIN_VISIBLE_MS - (Date.now() - shownAt))
+  );
+});
+onBeforeUnmount(() => clearTimeout(hideTimer));
+</script>
+
+<template>
+  <div
+    class="nut-dl-progress pointer-events-none h-0.5 overflow-hidden"
+    :data-active="visible"
+    aria-hidden="true"
+  >
+    <span :key="sweep" class="nut-dl-progress__bar block h-full" :class="barClass" />
+  </div>
+</template>
+
+<style>
+.nut-dl-progress{opacity:0;transition:opacity .24s ease-out}.nut-dl-progress[data-active=true]{opacity:1;transition-duration:.12s}.nut-dl-progress__bar{animation:nut-dl-progress-slide .8s cubic-bezier(.65,0,.35,1) infinite paused;background:var(--nut-dl-progress-color,var(--ui-primary));border-radius:999px;width:34%}.nut-dl-progress[data-active=true] .nut-dl-progress__bar{animation-play-state:running}@keyframes nut-dl-progress-slide{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){.nut-dl-progress__bar{animation:none;width:100%}}
+</style>

package/dist/runtime/table/components/layout/progress-line.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    active: boolean;
+    /** Changes on every refresh request, so the sweep restarts even while a request is running. */
+    restartKey?: number;
+    barClass?: string;
+};
+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;
+export default _default;

package/dist/runtime/table/components/table/table-empty-state.d.vue.ts

@@ -1,6 +1,6 @@
 import type { DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
-    minHeight: string;
+    minHeight?: string;
     size?: DataListControlSize;
 };
 declare var __VLS_6: {};

package/dist/runtime/table/components/table/table-empty-state.vue

@@ -7,7 +7,7 @@ import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
 import { mergeDataListUiClass } from "../../utils";
 const props = defineProps({
-  minHeight: { type: String, required: true },
+  minHeight: { type: String, required: false },
   size: { type: String, required: false }
 });
 const { t } = useUiToolsLocale();

package/dist/runtime/table/components/table/table-empty-state.vue.d.ts

@@ -1,6 +1,6 @@
 import type { DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
-    minHeight: string;
+    minHeight?: string;
     size?: DataListControlSize;
 };
 declare var __VLS_6: {};

package/dist/runtime/table/components/table/table-layout.d.ts

@@ -0,0 +1,57 @@
+import type { HTMLAttributes, StyleValue } from 'vue';
+import type { DataListColumnMeta } from '../../utils/columns/types.js';
+/** One position in the rendered column window: a column, a spacer for virtualized columns, or the filler. */
+export type TableColumnSlot = {
+    kind: 'column';
+    columnId: string;
+    key: string;
+} | {
+    kind: 'spacer';
+    colSpan: number;
+    key: string;
+} | {
+    kind: 'fill';
+    key: string;
+};
+/** Cell classes, styles and renderer of one column, computed once per layout change for every row. */
+export declare function columnCellLayout(params: {
+    meta?: DataListColumnMeta;
+    pinned: false | 'start' | 'end';
+    lastStart: boolean;
+    firstEnd: boolean;
+    offset: StyleValue;
+    tdClass: HTMLAttributes['class'];
+}): {
+    class: import("vue").ClassValue[];
+    innerClass: string;
+    render: ((params: {
+        row: import("../../types/index.js").GenericObject;
+        index: number;
+    }) => import("vue").VNodeChild) | undefined;
+    style: StyleValue[];
+};
+/** The column window with each column's cell layout attached, shared by every rendered row. */
+export declare function tableRowCells(params: {
+    slots: TableColumnSlot[];
+    layouts: Map<string, ReturnType<typeof columnCellLayout>>;
+}): ({
+    kind: "spacer";
+    colSpan: number;
+    key: string;
+} | {
+    kind: "fill";
+    key: string;
+} | {
+    layout: {
+        class: import("vue").ClassValue[];
+        innerClass: string;
+        render: ((params: {
+            row: import("../../types/index.js").GenericObject;
+            index: number;
+        }) => import("vue").VNodeChild) | undefined;
+        style: StyleValue[];
+    } | undefined;
+    kind: "column";
+    columnId: string;
+    key: string;
+})[];

package/dist/runtime/table/components/table/table-layout.js

@@ -0,0 +1,23 @@
+export function columnCellLayout(params) {
+  const { meta } = params;
+  return {
+    class: [
+      params.pinned === "start" ? "nut-dl-pin nut-dl-pin--start z-[2]" : "",
+      params.pinned === "end" ? "nut-dl-pin nut-dl-pin--end z-[2]" : "",
+      params.lastStart ? "nut-dl-pin--last-start" : "",
+      params.firstEnd ? "nut-dl-pin--first-end" : "",
+      meta?.align === "right" ? "text-right" : meta?.align === "center" ? "text-center" : "",
+      meta?.internal ? `nut-dl-td--${meta.internal}` : "",
+      meta?.ellipsis ? "nut-dl-td--ellipsis" : "",
+      params.tdClass
+    ],
+    innerClass: meta?.align === "right" ? "justify-end" : meta?.align === "center" ? "justify-center" : "",
+    render: meta?.render,
+    style: [params.offset, meta?.lines ? { "--nut-dl-lines": meta.lines } : void 0]
+  };
+}
+export function tableRowCells(params) {
+  return params.slots.map(
+    (slot) => slot.kind === "column" ? { ...slot, layout: params.layouts.get(slot.columnId) } : slot
+  );
+}

package/dist/runtime/table/components/table/table-renderer.d.vue.ts

@@ -1,4 +1,5 @@
 import type { DataListControlSize, DataListTableUi } from '../../types/index.js';
+import type { TableColumnSlot } from './table-layout.js';
 type __VLS_Props = {
     gutter?: number;
     height?: string;
@@ -7,17 +8,8 @@ type __VLS_Props = {
     ui?: DataListTableUi;
 };
 declare function refresh(): void;
-type ColumnSlot = {
-    kind: 'column';
-    columnId: string;
-    key: string;
-} | {
-    kind: 'spacer';
-    colSpan: number;
-    key: string;
-};
-declare var __VLS_34: {
-    columnSlots: ColumnSlot[];
+declare var __VLS_28: {
+    columnSlots: TableColumnSlot[];
     leafColumns: import("@tanstack/table-core").Column<{
         columnPinningFeature: import("@tanstack/table-core").TableFeature;
         columnResizingFeature: import("@tanstack/table-core").TableFeature;
@@ -26,16 +18,16 @@ declare var __VLS_34: {
         coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
         columnMeta: import("../../utils/index.js").DataListColumnMeta;
     }, object, unknown>[];
-}, __VLS_36: {
+}, __VLS_30: {
     error: {};
     retry: typeof refresh;
-}, __VLS_45: {};
+}, __VLS_39: {};
 type __VLS_Slots = {} & {
-    footer?: (props: typeof __VLS_34) => any;
+    footer?: (props: typeof __VLS_28) => any;
 } & {
-    error?: (props: typeof __VLS_36) => any;
+    error?: (props: typeof __VLS_30) => any;
 } & {
-    empty?: (props: typeof __VLS_45) => any;
+    empty?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     resetColumnSizing: () => void;