nuxt-ui-tools 0.1.3 → 1.0.1

package/dist/runtime/table/components/{filters/panel/FilterPanel.vue.d.ts → data-list/data-list-actions-dropdown.vue.d.ts}

@@ -1,21 +1,22 @@
-import type { DataListControlSize, DataListFilterPanelUi } from '../../../types/index.js';
+import type { VNodeChild } from 'vue';
+import type { DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
-    ui?: DataListFilterPanelUi;
+    label?: string;
+    icon?: string;
 };
 type __VLS_Slots = {
     trigger?: (props: {
-        open: () => void;
-        close: () => void;
-        toggle: () => void;
-        openState: boolean;
         triggerProps: {
             type: 'button';
             'aria-expanded': boolean;
         };
-    }) => unknown;
+    }) => VNodeChild;
 };
-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_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    icon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,15 @@
+import type { GenericObject, RenderableType, TableActionSlotProps, TableRuntimeRecord } from '../../types/index.js';
+type TableActionSlot = TableActionSlotProps<GenericObject, TableRuntimeRecord, TableRuntimeRecord>;
+type __VLS_Slots = {
+    default?: (props: TableActionSlot) => RenderableType;
+    action?: (props: TableActionSlot) => RenderableType;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/table/components/data-list/data-list-actions-toolbar.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from "vue";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { resolveDataListControlGeometry } from "../../utils";
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const geometry = computed(() => resolveDataListControlGeometry(dataListUi.controlSize.value));
+defineSlots();
+</script>
+
+<template>
+  <div
+    v-if="internals.actions.toolbarActions.value.length"
+    :class="['flex items-center', geometry.toolbarGap]"
+  >
+    <template v-for="action in internals.actions.toolbarActions.value" :key="action.definition.key">
+      <slot name="action" v-bind="action">
+        <slot v-bind="action" />
+      </slot>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,15 @@
+import type { GenericObject, RenderableType, TableActionSlotProps, TableRuntimeRecord } from '../../types/index.js';
+type TableActionSlot = TableActionSlotProps<GenericObject, TableRuntimeRecord, TableRuntimeRecord>;
+type __VLS_Slots = {
+    default?: (props: TableActionSlot) => RenderableType;
+    action?: (props: TableActionSlot) => RenderableType;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/table/components/data-list/{DataListAddFilter.vue → data-list-add-filter.vue}

@@ -3,7 +3,7 @@ import { computed } from "vue";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
 import { getFilterLabelText } from "../../utils";
-import DynamicFilterPicker from "../filters/shared/DynamicFilterPicker.vue";
+import DynamicFilterPicker from "../filters/shared/dynamic-filter-picker.vue";
 const internals = useTableInternals();
 const props = defineProps({
   size: { type: String, required: false },

package/dist/runtime/table/components/data-list/{DataListColumnPanel.d.vue.ts → data-list-column-panel.d.vue.ts}

@@ -1,7 +1,9 @@
-import type { DataListColumnPanelUi, DataListControlSize } from '../../types/index.js';
+import type { DataListColumnPanelProps, DataListColumnPanelUi, DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
+    mobile?: boolean;
     ui?: DataListColumnPanelUi;
+    props?: DataListColumnPanelProps;
 };
 declare var __VLS_9: {
     open: () => void;
@@ -16,7 +18,9 @@ declare var __VLS_9: {
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_9) => 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_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    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;
 export default _default;

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

@@ -0,0 +1,26 @@
+<script setup>
+import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
+import { useTableInternals } from "../../composables/use-table-internals";
+import ColumnPanel from "../drawers/column-panel.vue";
+defineProps({
+  size: { type: String, required: false },
+  mobile: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const { isMobile } = useDataListBreakpoint();
+</script>
+
+<template>
+  <ColumnPanel
+    v-if="internals.controls.tableLayout.value === 'table' && (mobile || !isMobile)"
+    :size="size"
+    :ui="ui"
+    :props="props"
+  >
+    <template v-if="$slots.trigger" #trigger="scope">
+      <slot name="trigger" v-bind="scope" />
+    </template>
+  </ColumnPanel>
+</template>

package/dist/runtime/table/components/data-list/{DataListColumnPanel.vue.d.ts → data-list-column-panel.vue.d.ts}

@@ -1,7 +1,9 @@
-import type { DataListColumnPanelUi, DataListControlSize } from '../../types/index.js';
+import type { DataListColumnPanelProps, DataListColumnPanelUi, DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
+    mobile?: boolean;
     ui?: DataListColumnPanelUi;
+    props?: DataListColumnPanelProps;
 };
 declare var __VLS_9: {
     open: () => void;
@@ -16,7 +18,9 @@ declare var __VLS_9: {
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_9) => 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_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    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;
 export default _default;

package/dist/runtime/table/components/data-list/{DataListContent.d.vue.ts → data-list-content.d.vue.ts}

@@ -1,43 +1,45 @@
-import type { DataListContentFit, DataListContentUi } from '../../types/index.js';
+import type { DataListContentFit, DataListContentSurface, DataListContentUi, DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
     fit?: DataListContentFit;
     height?: string | number;
+    surface?: DataListContentSurface;
     transition?: boolean;
+    size?: DataListControlSize;
     ui?: DataListContentUi;
 };
 declare function refresh(): void;
 declare function clearQuery(): void;
 declare var __VLS_1: {}, __VLS_4: "loading" | "initial-loading", __VLS_5: {
-    layout: "table" | "grid";
+    layout: import("../../types/index.js").TableLayout;
 }, __VLS_7: {
     error: {};
     retry: typeof refresh;
-}, __VLS_22: {
-    layout: "table" | "grid";
+}, __VLS_16: {
+    layout: import("../../types/index.js").TableLayout;
     refresh: typeof refresh;
     hasActiveQuery: boolean;
     clearQuery: typeof clearQuery;
-}, __VLS_24: {
-    layout: "table" | "grid";
+}, __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;
 } & {
@@ -45,29 +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;
 }, {}, {}, {}, 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/{DataListContent.vue → data-list-content.vue}

@@ -1,30 +1,30 @@
 <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 } from "../../utils";
-import DataListGrid from "./DataListGrid.vue";
-import DataListTable from "./DataListTable.vue";
+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({
   fit: { type: String, required: false, default: "content" },
   height: { type: [String, Number], required: false },
+  surface: { type: String, required: false, default: "plain" },
   transition: { type: Boolean, required: false, default: true },
+  size: { type: String, required: false },
   ui: { type: Object, required: false }
 });
 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
@@ -33,16 +33,26 @@ const refreshing = computed(
   () => rows.value.length > 0 && (internals.queryContent.status.value.isRefreshing || internals.queryContent.status.value.isRevalidating)
 );
 const normalizedHeight = computed(
-  () => typeof props.height === "number" ? `${props.height}px` : props.height
+  () => isNumber(props.height) ? `${props.height}px` : props.height
 );
 const viewportStyle = computed(() => {
-  if (props.fit === "fill") return { minHeight: 0 };
-  if (props.fit === "height" && normalizedHeight.value) return { height: normalizedHeight.value };
+  if (props.fit === "fill") {
+    return { minHeight: 0 };
+  }
+  if (props.fit === "height" && normalizedHeight.value) {
+    return { height: normalizedHeight.value };
+  }
   return void 0;
 });
 const rootUi = computed(() => dataListUi.ui.value.content?.ui);
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.content?.size ?? dataListUi.controlSize.value
+);
 const shellClass = computed(
-  () => internals.controls.tableLayout.value === "grid" ? "grid gap-5" : "overflow-hidden rounded-md border border-default bg-default"
+  () => resolveDataListContentShellClass({
+    layout: internals.controls.tableLayout.value,
+    surface: props.surface
+  })
 );
 function refresh() {
   void internals.queryContent.refreshData()();
@@ -54,14 +64,16 @@ function clearQuery() {
 watch(
   () => internals.controls.tableLayout.value,
   () => {
-    nextTick(() => viewport.value?.scrollTo({ top: 0, left: 0 }));
+    nextTick().then(() => viewport.value?.scrollTo({ left: 0, top: 0 }));
   }
 );
 watch(
   () => internals.pagination.currentPage.value,
   () => {
-    if (internals.pagination.mode.value !== "offset") return;
-    nextTick(() => viewport.value?.scrollTo({ top: 0, left: 0 }));
+    if (internals.pagination.mode.value !== "offset") {
+      return;
+    }
+    nextTick().then(() => viewport.value?.scrollTo({ left: 0, top: 0 }));
   }
 );
 </script>
@@ -72,7 +84,7 @@ watch(
     data-data-list-viewport
     :class="
   mergeDataListUiClass(
-    `relative min-h-0 ${shellClass} ${fit === 'content' ? '' : 'overflow-auto'}`,
+    `relative min-h-0 ${shellClass} ${fit === 'content' ? '' : 'flex flex-col overflow-hidden'}`,
     rootUi?.root,
     ui?.root
   )
@@ -86,73 +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 gap-3 text-left',
-    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', 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 text-sm leading-5 text-muted',
-    rootUi?.errorDescription,
-    ui?.errorDescription
-  )
-"
-            >
-              {{ t("table.states.gridError.description") }}
-            </p>
-            <UButton
-              color="neutral"
-              variant="soft"
-              size="sm"
-              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"
@@ -178,7 +130,10 @@ watch(
         mode="out-in"
       >
         <slot v-if="internals.controls.tableLayout.value === 'table'" name="table" :rows="rows">
-          <DataListTable>
+          <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
@@ -193,7 +148,7 @@ watch(
           </DataListTable>
         </slot>
         <slot v-else name="grid" :rows="rows">
-          <DataListGrid>
+          <DataListGrid :size="resolvedSize" :fill="fit !== 'content'" class="min-h-0 flex-1">
             <template #empty>
               <slot name="empty-grid">
                 <slot

package/dist/runtime/table/components/data-list/{DataListContent.vue.d.ts → data-list-content.vue.d.ts}

@@ -1,43 +1,45 @@
-import type { DataListContentFit, DataListContentUi } from '../../types/index.js';
+import type { DataListContentFit, DataListContentSurface, DataListContentUi, DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
     fit?: DataListContentFit;
     height?: string | number;
+    surface?: DataListContentSurface;
     transition?: boolean;
+    size?: DataListControlSize;
     ui?: DataListContentUi;
 };
 declare function refresh(): void;
 declare function clearQuery(): void;
 declare var __VLS_1: {}, __VLS_4: "loading" | "initial-loading", __VLS_5: {
-    layout: "table" | "grid";
+    layout: import("../../types/index.js").TableLayout;
 }, __VLS_7: {
     error: {};
     retry: typeof refresh;
-}, __VLS_22: {
-    layout: "table" | "grid";
+}, __VLS_16: {
+    layout: import("../../types/index.js").TableLayout;
     refresh: typeof refresh;
     hasActiveQuery: boolean;
     clearQuery: typeof clearQuery;
-}, __VLS_24: {
-    layout: "table" | "grid";
+}, __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;
 } & {
@@ -45,29 +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;
 }, {}, {}, {}, 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/{DataListDefault.d.vue.ts → data-list-default.d.vue.ts}

@@ -5,51 +5,48 @@ type __VLS_Props = {
     height?: string | number;
     ui?: DataListDefaultUi;
 };
-declare var __VLS_1: {}, __VLS_13: {}, __VLS_42: {
-    layout: "table" | "grid";
-}, __VLS_45: {
-    layout: "table" | "grid";
-}, __VLS_48: {
-    error: {};
-    retry: () => void;
-}, __VLS_51: {
+declare var __VLS_1: {}, __VLS_18: {}, __VLS_52: {
+    layout: import("../../types/index.js").TableLayout;
+}, __VLS_55: {
+    layout: import("../../types/index.js").TableLayout;
+}, __VLS_58: any, __VLS_61: {
     layout: string;
     refresh: () => void;
     hasActiveQuery: boolean;
     clearQuery: () => void;
-}, __VLS_54: {}, __VLS_57: {}, __VLS_60: {}, __VLS_70: {
+}, __VLS_64: {}, __VLS_67: {}, __VLS_70: {}, __VLS_80: {
     loadedCount: number;
-}, __VLS_73: {
+}, __VLS_83: {
     error: {};
     retry: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
-}, __VLS_76: {
+}, __VLS_86: {
     loadedCount: number;
     totalCount: number | null;
 };
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_1) => any;
 } & {
-    actions?: (props: typeof __VLS_13) => any;
+    actions?: (props: typeof __VLS_18) => any;
 } & {
-    'initial-loading'?: (props: typeof __VLS_42) => any;
+    'initial-loading'?: (props: typeof __VLS_52) => any;
 } & {
-    loading?: (props: typeof __VLS_45) => any;
+    loading?: (props: typeof __VLS_55) => any;
 } & {
-    error?: (props: typeof __VLS_48) => any;
+    error?: (props: typeof __VLS_58) => any;
 } & {
-    empty?: (props: typeof __VLS_51) => any;
+    empty?: (props: typeof __VLS_61) => any;
 } & {
-    'empty-table'?: (props: typeof __VLS_54) => any;
+    'empty-table'?: (props: typeof __VLS_64) => any;
 } & {
-    'empty-grid'?: (props: typeof __VLS_57) => any;
+    'empty-grid'?: (props: typeof __VLS_67) => any;
 } & {
-    refreshing?: (props: typeof __VLS_60) => any;
+    refreshing?: (props: typeof __VLS_70) => any;
 } & {
-    'loading-more'?: (props: typeof __VLS_70) => any;
+    'loading-more'?: (props: typeof __VLS_80) => any;
 } & {
-    'load-more-error'?: (props: typeof __VLS_73) => any;
+    'load-more-error'?: (props: typeof __VLS_83) => any;
 } & {
-    end?: (props: typeof __VLS_76) => any;
+    end?: (props: typeof __VLS_86) => 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>;