nuxt-ui-tools 0.1.3 → 1.0.0

package/dist/runtime/table/components/filters/tags/{TextFilterTag.vue → text-filter-tag.vue}

@@ -2,14 +2,20 @@
 import UButton from "@nuxt/ui/components/Button.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
 import { computed, ref } from "vue";
+import { isNullish } from "../../../../shared/utils/predicate";
 import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useFilterTagSession } from "../../../composables/use-filter-tag-session";
 import { useTableInternals } from "../../../composables/use-table-internals";
-import { mergeDataListUiClass, resolveFilterTriggerIcon, resolveTextFilterUi } from "../../../utils";
-import FilterMatchModePanel from "../shared/FilterMatchModePanel.vue";
-import FilterPopoverShell from "../shared/FilterPopoverShell.vue";
-import FilterStageTransition from "../shared/FilterStageTransition.vue";
-import TableFilterTrigger from "../shared/FilterTriggerTag.vue";
+import {
+  mergeDataListUiClass,
+  resolveFilterEditorSizeClasses,
+  resolveFilterTriggerIcon,
+  resolveTextFilterUi
+} from "../../../utils";
+import FilterMatchModePanel from "../shared/filter-match-mode-panel.vue";
+import FilterPopoverShell from "../shared/filter-popover-shell.vue";
+import FilterStageTransition from "../shared/filter-stage-transition.vue";
+import TableFilterTrigger from "../shared/filter-trigger-tag.vue";
 const props = defineProps({
   definition: { type: Object, required: true },
   dynamic: { type: Boolean, required: false },
@@ -22,6 +28,7 @@ const internals = useTableInternals();
 const dataListUi = useDataListUi();
 const dataListFilterUi = computed(() => dataListUi.ui.value.filterTags?.ui);
 const size = computed(() => dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
 const pendingOperator = ref(props.initialOperator);
 const localValue = ref("");
 const stage = ref("editor");
@@ -53,19 +60,19 @@ function initLocalState() {
   const value = internals.filters.getFilterState({
     key: props.definition.key
   })?.value;
-  localValue.value = value == null ? "" : String(value);
+  localValue.value = isNullish(value) ? "" : String(value);
 }
 const session = useFilterTagSession({
-  session: props.session,
   dynamic: props.dynamic,
   embedded: props.embedded,
-  hasCommittedState: () => internals.filters.getActiveFilterState({ key: props.definition.key }) != null,
-  onOpen: initLocalState,
+  hasCommittedState: () => !isNullish(internals.filters.getActiveFilterState({ key: props.definition.key })),
   onClose: () => {
     pendingOperator.value = void 0;
   },
+  onDismiss: () => emit("dismiss"),
+  onOpen: initLocalState,
   onSessionClosed: () => emit("sessionClosed"),
-  onDismiss: () => emit("dismiss")
+  session: props.session
 });
 function handleActivate(op) {
   pendingOperator.value = op;
@@ -84,8 +91,8 @@ function applyFilter() {
   pendingOperator.value = void 0;
   internals.filters.setScalarFilterValue({
     key: props.definition.key,
-    value: localValue.value.trim() || void 0,
-    operator: op
+    operator: op,
+    value: localValue.value.trim() || void 0
   });
   session.close();
 }
@@ -101,12 +108,12 @@ function handleOperatorChange(op) {
   stage.value = "editor";
 }
 function handleValueUpdate(value) {
-  localValue.value = value == null ? "" : String(value);
+  localValue.value = isNullish(value) ? "" : String(value);
   if (filterUi.value.commitMode === "auto") {
     internals.filters.setScalarFilterValue({
       key: props.definition.key,
-      value: localValue.value.trim() || void 0,
-      operator: pendingOperator.value
+      operator: pendingOperator.value,
+      value: localValue.value.trim() || void 0
     });
   }
 }
@@ -118,7 +125,11 @@ function handleValueUpdate(value) {
     :embedded="embedded"
     :transitioning="stageTransitioning"
     :content-class="
-  mergeDataListUiClass('w-fit overflow-hidden p-0', void 0, dataListFilterUi?.popoverContent)
+  mergeDataListUiClass(
+    `${sizeClasses.editor} overflow-hidden p-0`,
+    void 0,
+    dataListFilterUi?.popoverContent
+  )
 "
     @update-open="session.handleOpenChange"
   >
@@ -140,6 +151,7 @@ function handleValueUpdate(value) {
         :operator-label="operatorLabel"
         :operator-items="operatorItems"
         :preview-summary="preview.summary"
+        :dynamic="dynamic"
         :active="preview.active"
         @activate="handleActivate"
         @request-match-mode="handleRequestMatchMode"
@@ -165,7 +177,7 @@ function handleValueUpdate(value) {
           v-else
           :class="
   mergeDataListUiClass(
-    'w-fit max-w-[calc(100vw-1rem)] bg-default',
+    `${sizeClasses.editor} w-full min-w-0 max-w-full bg-default`,
     void 0,
     dataListFilterUi?.editor
   )
@@ -174,7 +186,7 @@ function handleValueUpdate(value) {
           <div
             :class="
   mergeDataListUiClass(
-    'border-b border-default p-2',
+    `border-b border-default ${sizeClasses.searchHeader}`,
     void 0,
     dataListFilterUi?.inputs
   )
@@ -190,7 +202,7 @@ function handleValueUpdate(value) {
               :highlight="filterUi.input.highlight"
               :fixed="filterUi.input.fixed"
               :size="size"
-              class="w-[min(13rem,calc(100vw-3rem))] max-w-full"
+              class="w-full min-w-0 max-w-full"
               :ui="{
   root: dataListFilterUi?.search,
   base: dataListFilterUi?.searchInput
@@ -204,7 +216,7 @@ function handleValueUpdate(value) {
             v-if="filterUi.commitMode === 'manual'"
             :class="
   mergeDataListUiClass(
-    'flex items-center justify-between border-t border-default p-2',
+    `flex items-center justify-between border-t border-default ${sizeClasses.footer}`,
     void 0,
     dataListFilterUi?.footer
   )

package/dist/runtime/table/components/filters/tags/{TextFilterTag.vue.d.ts → text-filter-tag.vue.d.ts}

@@ -7,7 +7,14 @@ type __VLS_Props = {
     initialOperator?: TableFilterOperator;
 };
 declare var __VLS_10: {
-    preview: import("../../../utils/index.js").FilterPreviewResult;
+    preview: {
+        active: boolean;
+        dirty: boolean;
+        count: number;
+        tags: string[];
+        entries: import("../../../utils/filters/preview/types.js").FilterPreviewEntry[];
+        summary: string;
+    };
     active: boolean;
     open: boolean;
     triggerProps: {

package/dist/runtime/table/components/grid/{GridCard.vue → grid-card.vue}

@@ -2,7 +2,7 @@
 import { computed, defineComponent } from "vue";
 import { useGridRow, useProvideGridRow } from "../../composables/use-grid-row";
 import { useTableInternals } from "../../composables/use-table-internals";
-import TableRowScopeProvider from "../actions/TableRowScopeProvider.vue";
+import TableRowScopeProvider from "../actions/table-row-scope-provider.vue";
 const props = defineProps({
   rowIndex: { type: Number, required: false }
 });
@@ -13,12 +13,12 @@ const rowData = computed(() => internals.grid.rows.value[localRowIndex.value]);
 useProvideGridRow(localRowIndex.value);
 const rowParams = computed(
   () => createGridRenderParams({
-    row: rowData.value ?? {},
-    index: localRowIndex.value,
     context: toPlainRecord(internals.queryContent.contextData.value),
+    index: localRowIndex.value,
+    layout: "grid",
     pageContext: toPlainRecord(internals.queryContent.pageContextData.value),
-    tableApi: internals.tableApi,
-    layout: "grid"
+    row: rowData.value ?? {},
+    tableApi: internals.tableApi
   })
 );
 const RenderGridCard = defineComponent({

package/dist/runtime/table/components/grid/{GridRenderer.d.vue.ts → grid-renderer.d.vue.ts}

@@ -1,13 +1,13 @@
-import type { DataListGridUi } from '../../types/index.js';
+import type { DataListControlSize, DataListGridUi } from '../../types/index.js';
 type __VLS_Props = {
     height?: string;
+    size?: DataListControlSize;
+    fill?: boolean;
     ui?: DataListGridUi;
 };
-declare var __VLS_36: {}, __VLS_102: {};
+declare var __VLS_19: {};
 type __VLS_Slots = {} & {
-    empty?: (props: typeof __VLS_36) => any;
-} & {
-    empty?: (props: typeof __VLS_102) => any;
+    empty?: (props: typeof __VLS_19) => 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/grid/grid-renderer.vue

@@ -0,0 +1,386 @@
+<script setup>
+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 { 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 TableEmptyState from "../table/table-empty-state.vue";
+import GridCard from "./grid-card.vue";
+import GridSkeleton from "./grid-skeleton.vue";
+const props = defineProps({
+  height: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.grid?.size ?? dataListUi.controlSize.value
+);
+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))`
+);
+const gridColumn = computed(
+  () => `span ${internals.grid.itemColumnSpan.value} / span ${internals.grid.itemColumnSpan.value}`
+);
+const showInitialLoading = computed(
+  () => status.value.isBooting || status.value.isPending && tableRows.value.length === 0
+);
+const showRefreshing = computed(
+  () => tableRows.value.length > 0 && (status.value.isFetching || status.value.isRefreshing || status.value.isRevalidating)
+);
+const showError = computed(
+  () => Boolean(internals.queryContent.error.value) && tableRows.value.length === 0
+);
+const showEmpty = computed(
+  () => !showInitialLoading.value && !showError.value && tableRows.value.length === 0
+);
+const skeletonRows = computed(
+  () => Array.from({ length: GRID_DEFAULTS.skeletonRows }, (_, index) => index)
+);
+const rowVirtualizer = useVirtualizer(
+  computed(() => ({
+    count: isContained.value ? rowChunks.value.length : 0,
+    estimateSize: () => GRID_DEFAULTS.estimatedRowHeight,
+    gap: gap.value,
+    getItemKey: (index) => getVirtualRowKey(index),
+    getScrollElement: () => viewportRef.value ?? null,
+    measureElement: (element) => element.getBoundingClientRect().height,
+    overscan: GRID_DEFAULTS.overscan
+  }))
+);
+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) => {
+    if (layout === "grid") {
+      scrollToTop();
+    }
+  }
+);
+function getVirtualRowKey(index) {
+  const chunk = rowChunks.value[index];
+  const firstRow = chunk?.rows[0];
+  return firstRow ? `grid-row:${resolveTableRowId({ index: chunk.start, row: firstRow, rowKey: internals.schema.value.rowKey })}` : `grid-row:${index}`;
+}
+function rowId(row, index) {
+  return resolveTableRowId({ index, row, rowKey: internals.schema.value.rowKey });
+}
+function scrollToTop() {
+  viewportRef.value?.scrollTo({ behavior: "auto", left: 0, top: 0 });
+}
+function measureVirtualRow(element) {
+  const resolved = element instanceof Element ? element : element?.$el;
+  if (!(resolved instanceof HTMLElement)) {
+    return;
+  }
+  if (resolved.isConnected) {
+    rowVirtualizer.value.measureElement(resolved);
+  } else {
+    nextTick().then(() => {
+      if (resolved.isConnected) {
+        rowVirtualizer.value.measureElement(resolved);
+      }
+    });
+  }
+}
+const cursorMode = computed(() => internals.pagination.mode.value === "cursor");
+const loadingMore = computed(
+  () => cursorMode.value && internals.pagination.state.value.isLoadingMore
+);
+const hasNextPage = computed(() => cursorMode.value && internals.pagination.state.value.hasNextPage);
+watch(
+  () => [
+    virtualRows.value.at(-1)?.index ?? -1,
+    rowChunks.value.length,
+    hasNextPage.value,
+    loadingMore.value
+  ],
+  ([lastIndex, count, more, loading]) => {
+    if (!isContained.value || !more || loading || !count) {
+      return;
+    }
+    if (lastIndex >= count - 2) {
+      void internals.pagination.loadMore();
+    }
+  }
+);
+function onScrollLoadMore() {
+  if (!hasNextPage.value || loadingMore.value || isContained.value) {
+    return;
+  }
+  const element = viewportRef.value;
+  if (!element) {
+    return;
+  }
+  if (element.scrollHeight - element.scrollTop - element.clientHeight < 400) {
+    void internals.pagination.loadMore();
+  }
+}
+function refreshData() {
+  void internals.queryContent.refreshData();
+}
+</script>
+
+<template>
+  <div
+    :class="
+  mergeDataListUiClass(
+    `nut-dl-grid relative ${fill ? 'flex h-full min-h-0 flex-col' : ''}`,
+    void 0,
+    ui?.root
+  )
+"
+    :style="{ '--nut-dl-grid-gap': `${gap}px`, height: !fill && height ? height : void 0 }"
+    :data-loading="showInitialLoading"
+    :data-animated="animationsReady"
+  >
+    <div
+      ref="viewportRef"
+      :class="
+  mergeDataListUiClass(
+    `nut-dl-grid__viewport relative ${fill || height ? 'min-h-0 flex-1 overflow-auto' : ''}`,
+    void 0,
+    ui?.viewport
+  )
+"
+      @scroll.passive="onScrollLoadMore"
+    >
+      <div
+        v-if="showInitialLoading"
+        :class="mergeDataListUiClass('nut-dl-grid__flow grid', void 0, ui?.loading)"
+        :style="{ gridTemplateColumns, gap: `${gap}px` }"
+      >
+        <div
+          v-for="row in skeletonRows"
+          :key="row"
+          :style="{ gridColumn, '--nut-dl-i': row }"
+          class="nut-dl-grid__skeleton"
+        >
+          <GridSkeleton />
+        </div>
+      </div>
+
+      <div
+        v-else-if="showError"
+        :class="
+  mergeDataListUiClass(
+    'nut-dl-grid__state flex items-center justify-center px-4 py-10',
+    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"
+            :size="resolvedSize"
+            icon="i-lucide-refresh-cw"
+            :ui="{ base: ui?.retry }"
+            @click="refreshData"
+          >
+            {{ t("table.states.gridError.action") }}
+          </UButton>
+        </div>
+      </div>
+
+      <div
+        v-else-if="showEmpty"
+        :class="
+  mergeDataListUiClass(
+    'nut-dl-grid__state flex h-full items-center justify-center',
+    void 0,
+    ui?.empty
+  )
+"
+      >
+        <slot name="empty">
+          <TableEmptyState min-height="24rem" :size="resolvedSize" />
+        </slot>
+      </div>
+
+      <div
+        v-else-if="isContained"
+        :class="mergeDataListUiClass('nut-dl-grid__canvas relative w-full', void 0, ui?.canvas)"
+        :style="{ height: `${totalSize}px` }"
+        :data-loading-more="loadingMore"
+      >
+        <div
+          v-for="virtualRow in virtualRows"
+          :key="String(virtualRow.key)"
+          :ref="measureVirtualRow"
+          :class="
+  mergeDataListUiClass(
+    'nut-dl-grid__row absolute inset-x-0 top-0 grid',
+    void 0,
+    ui?.row
+  )
+"
+          :style="{
+  transform: `translateY(${virtualRow.start}px)`,
+  gridTemplateColumns,
+  gap: `${gap}px`
+}"
+          :data-index="virtualRow.index"
+        >
+          <div
+            v-for="(row, offset) in rowChunks[virtualRow.index]?.rows ?? []"
+            :key="rowId(row, (rowChunks[virtualRow.index]?.start ?? 0) + offset)"
+            :class="mergeDataListUiClass('nut-dl-grid__item min-w-0', void 0, ui?.item)"
+            :style="{ gridColumn }"
+            :data-row-id="rowId(row, (rowChunks[virtualRow.index]?.start ?? 0) + offset)"
+          >
+            <GridCard :row-index="(rowChunks[virtualRow.index]?.start ?? 0) + offset" />
+          </div>
+        </div>
+      </div>
+
+      <TransitionGroup
+        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"
+          :key="rowId(row, index)"
+          :class="mergeDataListUiClass('nut-dl-grid__item min-w-0', void 0, ui?.item)"
+          :style="{ gridColumn }"
+        >
+          <GridCard :row-index="index" />
+        </div>
+      </TransitionGroup>
+    </div>
+
+    <div
+      v-if="loadingMore"
+      class="nut-dl-grid__more flex items-center justify-center gap-2.5 py-3 text-[12.5px] text-muted"
+      aria-hidden="true"
+    >
+      <span
+        class="nut-dl-spinner size-3.5 rounded-full border-2 border-accented border-t-primary"
+      />
+      <span>{{ t("table.controls.loadingMore") }}</span>
+    </div>
+
+    <Transition name="nut-dl-grid-progress">
+      <div
+        v-if="showRefreshing"
+        :class="
+  mergeDataListUiClass(
+    'nut-dl-grid__progress pointer-events-none absolute inset-x-0 top-0 z-10 h-0.5 overflow-hidden',
+    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>
+  </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}}
+</style>

package/dist/runtime/table/components/grid/{GridRenderer.vue.d.ts → grid-renderer.vue.d.ts}

@@ -1,13 +1,13 @@
-import type { DataListGridUi } from '../../types/index.js';
+import type { DataListControlSize, DataListGridUi } from '../../types/index.js';
 type __VLS_Props = {
     height?: string;
+    size?: DataListControlSize;
+    fill?: boolean;
     ui?: DataListGridUi;
 };
-declare var __VLS_36: {}, __VLS_102: {};
+declare var __VLS_19: {};
 type __VLS_Slots = {} & {
-    empty?: (props: typeof __VLS_36) => any;
-} & {
-    empty?: (props: typeof __VLS_102) => any;
+    empty?: (props: typeof __VLS_19) => 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/grid/grid-skeleton.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { defineComponent } from "vue";
+import { useTableInternals } from "../../composables/use-table-internals";
+const internals = useTableInternals();
+const RenderGridSkeleton = defineComponent({
+  name: "RenderGridSkeleton",
+  setup() {
+    return () => internals.schema.value.grid?.renderSkeleton?.({ layout: "grid" }) ?? null;
+  }
+});
+</script>
+
+<template>
+  <RenderGridSkeleton v-if="internals.schema.value.grid?.renderSkeleton" />
+
+  <div
+    v-else
+    class="nut-dl-gskel flex flex-col gap-2.5 rounded-[10px] border border-default bg-default px-4 py-3.5"
+    aria-hidden="true"
+  >
+    <div class="flex items-center gap-2.5">
+      <span class="nut-dl-skeleton size-7 shrink-0 rounded-md" />
+      <span class="grid flex-1 gap-1.5">
+        <span class="nut-dl-skeleton block h-3 w-1/2 rounded" />
+        <span class="nut-dl-skeleton block h-2.5 w-1/3 rounded" />
+      </span>
+    </div>
+    <div class="grid grid-cols-2 gap-x-3 gap-y-2 pt-1">
+      <span v-for="n in 4" :key="n" class="grid gap-1.5">
+        <span class="nut-dl-skeleton block h-2.5 w-1/3 rounded" />
+        <span class="nut-dl-skeleton block h-3 w-3/4 rounded" />
+      </span>
+    </div>
+    <div class="mt-1 flex items-center gap-2 border-t border-muted pt-2.5">
+      <span class="nut-dl-skeleton block h-3 w-16 rounded" />
+      <span class="nut-dl-skeleton block h-3 w-20 rounded" />
+      <span class="nut-dl-skeleton ml-auto block h-5 w-12 rounded-full" />
+    </div>
+  </div>
+</template>