nuxt-ui-tools 0.1.3 → 1.0.1

package/dist/runtime/table/components/data-list/{DataListDefault.vue → data-list-default.vue}

@@ -2,16 +2,19 @@
 import { computed } from "vue";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
-import { mergeDataListUiClass } from "../../utils";
-import DataListColumnPanel from "./DataListColumnPanel.vue";
-import DataListContent from "./DataListContent.vue";
-import DataListFilterPanel from "./DataListFilterPanel.vue";
-import DataListFilterTags from "./DataListFilterTags.vue";
-import DataListInfiniteLoader from "./DataListInfiniteLoader.vue";
-import DataListLayoutSwitch from "./DataListLayoutSwitch.vue";
-import DataListPagination from "./DataListPagination.vue";
-import DataListRefresh from "./DataListRefresh.vue";
-import DataListSearch from "./DataListSearch.vue";
+import { mergeDataListUiClass, resolveDataListControlGeometry } from "../../utils";
+import DataListActionsDropdown from "./data-list-actions-dropdown.vue";
+import DataListColumnPanel from "./data-list-column-panel.vue";
+import DataListContent from "./data-list-content.vue";
+import DataListFilterPanel from "./data-list-filter-panel.vue";
+import DataListFilterTags from "./data-list-filter-tags.vue";
+import DataListInfiniteLoader from "./data-list-infinite-loader.vue";
+import DataListLayoutSwitch from "./data-list-layout-switch.vue";
+import DataListPagination from "./data-list-pagination.vue";
+import DataListRefresh from "./data-list-refresh.vue";
+import DataListSearch from "./data-list-search.vue";
+import DataListSelectionActions from "./data-list-selection-actions.vue";
+import DataListSortMenu from "./data-list-sort-menu.vue";
 const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -23,14 +26,16 @@ const dataListUi = useDataListUi();
 const titleText = computed(() => props.title ?? humanizeKey(internals.schema.value.tableKey));
 const contentHeight = computed(() => props.height ?? "36rem");
 const rootUi = computed(() => dataListUi.ui.value.default?.ui);
+const geometry = computed(() => resolveDataListControlGeometry(dataListUi.controlSize.value));
+const controls = internals.controls.headerControls;
 function humanizeKey(value) {
-  return value.split(".").at(-1)?.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\b\w/g, (char) => char.toUpperCase()) ?? value;
+  return value.split(".").at(-1)?.replaceAll(/([a-z0-9])([A-Z])/gu, "$1 $2").replaceAll(/[_-]+/gu, " ").replaceAll(/\b\w/gu, (char) => char.toUpperCase()) ?? value;
 }
 </script>
 
 <template>
-  <div :class="mergeDataListUiClass('grid gap-4', rootUi?.root, ui?.root)">
-    <header :class="mergeDataListUiClass('grid gap-3', rootUi?.header, ui?.header)">
+  <div :class="mergeDataListUiClass(`grid ${geometry.panelGap}`, rootUi?.root, ui?.root)">
+    <header :class="mergeDataListUiClass(`grid ${geometry.fieldGap}`, rootUi?.header, ui?.header)">
       <div
         v-if="$slots.title || titleText || description"
         :class="mergeDataListUiClass('grid gap-1', rootUi?.heading, ui?.heading)"
@@ -59,7 +64,7 @@ function humanizeKey(value) {
       <div
         :class="
   mergeDataListUiClass(
-    'flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between',
+    `flex flex-col lg:flex-row lg:items-start lg:justify-between ${geometry.fieldGap}`,
     rootUi?.toolbar,
     ui?.toolbar
   )
@@ -68,34 +73,36 @@ function humanizeKey(value) {
         <div
           :class="
   mergeDataListUiClass(
-    'flex min-w-0 flex-1 flex-wrap items-center gap-2',
+    `flex min-w-0 flex-1 flex-wrap items-center ${geometry.toolbarGap}`,
     rootUi?.primaryActions,
     ui?.primaryActions
   )
 "
         >
           <DataListSearch />
-          <DataListFilterTags show-add show-clear />
-          <slot name="actions" />
+          <DataListFilterTags v-if="controls.filters" show-add show-clear />
+          <DataListActionsDropdown v-if="controls.actions && !$slots.actions" />
+          <slot v-if="controls.actions" name="actions" />
         </div>
         <div
           :class="
   mergeDataListUiClass(
-    'flex shrink-0 self-start items-start justify-end gap-2',
+    `flex shrink-0 self-start items-start justify-end ${geometry.toolbarGap}`,
     rootUi?.secondaryActions,
     ui?.secondaryActions
   )
 "
         >
-          <DataListFilterPanel />
-          <DataListColumnPanel />
-          <DataListRefresh />
-          <DataListLayoutSwitch />
+          <DataListSortMenu v-if="controls.sort" />
+          <DataListFilterPanel v-if="controls.filters" />
+          <DataListColumnPanel v-if="controls.columns" />
+          <DataListRefresh v-if="controls.refresh" />
+          <DataListLayoutSwitch v-if="controls.layout" />
         </div>
       </div>
     </header>
 
-    <DataListContent fit="height" :height="contentHeight">
+    <DataListContent fit="height" surface="contained" :height="contentHeight">
       <template v-if="$slots['initial-loading']" #initial-loading="scope">
         <slot name="initial-loading" v-bind="scope" />
       </template>
@@ -120,6 +127,8 @@ function humanizeKey(value) {
       </template>
     </DataListContent>
 
+    <DataListSelectionActions />
+
     <DataListPagination />
   </div>
 </template>

package/dist/runtime/table/components/data-list/{DataListDefault.vue.d.ts → data-list-default.vue.d.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>;

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/{DataListFilterPanel.d.vue.ts → data-list-filter-panel.d.vue.ts}

@@ -1,13 +1,18 @@
-import type { DataListControlSize, DataListFilterPanelUi } from '../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelCommitMode, DataListFilterPanelMode, DataListFilterPanelProps, DataListFilterPanelUi } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
+    description?: string;
     ui?: DataListFilterPanelUi;
+    props?: DataListFilterPanelProps;
+    mode?: DataListFilterPanelMode;
+    commitMode?: DataListFilterPanelCommitMode;
 };
 declare var __VLS_9: {
     open: () => void;
     close: () => void;
     toggle: () => void;
     openState: boolean;
+    activeCount: number;
     triggerProps: {
         type: "button";
         "aria-expanded": boolean;

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

@@ -0,0 +1,37 @@
+<script setup>
+import { computed } from "vue";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import FilterPanel from "../filters/panel/filter-panel.vue";
+const props = defineProps({
+  size: { type: String, required: false },
+  description: { type: String, required: false },
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false },
+  mode: { type: String, required: false },
+  commitMode: { type: String, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const config = computed(() => dataListUi.ui.value.filterPanel);
+const resolvedSize = computed(() => props.size ?? config.value?.size);
+const resolvedUi = computed(() => ({ ...config.value?.ui, ...props.ui }));
+const resolvedMode = computed(() => props.mode ?? config.value?.mode ?? "drawer");
+const resolvedCommitMode = computed(() => props.commitMode ?? config.value?.commitMode ?? "submit");
+</script>
+
+<template>
+  <FilterPanel
+    v-if="internals.filterPresentation.hasPanelFilters.value"
+    :size="resolvedSize"
+    :description="description"
+    :ui="resolvedUi"
+    :props="props.props"
+    :mode="resolvedMode"
+    :commit-mode="resolvedCommitMode"
+  >
+    <template v-if="$slots.trigger" #trigger="scope">
+      <slot name="trigger" v-bind="scope" />
+    </template>
+  </FilterPanel>
+</template>

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

@@ -1,13 +1,18 @@
-import type { DataListControlSize, DataListFilterPanelUi } from '../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelCommitMode, DataListFilterPanelMode, DataListFilterPanelProps, DataListFilterPanelUi } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
+    description?: string;
     ui?: DataListFilterPanelUi;
+    props?: DataListFilterPanelProps;
+    mode?: DataListFilterPanelMode;
+    commitMode?: DataListFilterPanelCommitMode;
 };
 declare var __VLS_9: {
     open: () => void;
     close: () => void;
     toggle: () => void;
     openState: boolean;
+    activeCount: number;
     triggerProps: {
         type: "button";
         "aria-expanded": boolean;

package/dist/runtime/table/components/data-list/{DataListFilterTags.d.vue.ts → data-list-filter-tags.d.vue.ts}

@@ -2,6 +2,8 @@ import type { DataListControlSize, DataListFilterTagsUi } from '../../types/inde
 type __VLS_Props = {
     showAdd?: boolean;
     showClear?: boolean;
+    /** `sheet` collapses the tags into a bottom sheet on mobile; `tags` keeps inline tags everywhere. */
+    mobile?: 'sheet' | 'tags';
     size?: DataListControlSize;
     ui?: DataListFilterTagsUi;
 };
@@ -9,7 +11,7 @@ declare var __VLS_1: {
     definitions: import("../../types/index.js").TableUiFilterDefinition[];
     activeFilters: import("../../types/index.js").TableQueryStateFilterRule<string, import("../../types/index.js").TableFilterOperator, import("../../types/index.js").TableQueryStateFilterValue>[];
     clear: () => void;
-}, __VLS_10: any, __VLS_13: {
+}, __VLS_15: any, __VLS_18: {
     open: () => void;
     close: () => void;
     toggle: () => void;
@@ -20,19 +22,20 @@ declare var __VLS_1: {
         type: string;
         'aria-expanded': boolean;
     };
-}, __VLS_16: {};
+}, __VLS_21: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    filter?: (props: typeof __VLS_10) => any;
+    filter?: (props: typeof __VLS_15) => any;
 } & {
-    'add-filter-trigger'?: (props: typeof __VLS_13) => any;
+    'add-filter-trigger'?: (props: typeof __VLS_18) => any;
 } & {
-    'clear-filter-label'?: (props: typeof __VLS_16) => any;
+    'clear-filter-label'?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    showAdd: boolean;
+    mobile: "sheet" | "tags";
     showClear: boolean;
+    showAdd: 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/{DataListFilterTags.vue → data-list-filter-tags.vue}

@@ -1,17 +1,21 @@
 <script setup>
 import { computed } from "vue";
+import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
 import { provideDataListUi, useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
 import { mergeDataListUiClass } from "../../utils";
-import FilterTagsBar from "../filters/tags/FilterTagsBar.vue";
+import FilterSheet from "../filters/sheet/filter-sheet.vue";
+import FilterTagsBar from "../filters/tags/filter-tags-bar.vue";
 const props = defineProps({
   showAdd: { type: Boolean, required: false, default: false },
   showClear: { type: Boolean, required: false, default: false },
+  mobile: { type: String, required: false, default: "sheet" },
   size: { type: String, required: false },
   ui: { type: Object, required: false }
 });
 const dataListUi = useDataListUi();
 const internals = useTableInternals();
+const { isMobile } = useDataListBreakpoint();
 provideDataListUi(
   computed(() => ({
     ...dataListUi.ui.value,
@@ -38,7 +42,8 @@ provideDataListUi(
       :active-filters="internals.filters.activeUiFilters.value"
       :clear="internals.filters.clearAllFilters"
     >
-      <FilterTagsBar :show-add="showAdd" :show-clear="showClear">
+      <FilterSheet v-if="isMobile && mobile === 'sheet'" :show-clear="showClear" />
+      <FilterTagsBar v-else :show-add="showAdd" :show-clear="showClear">
         <template v-if="$slots.filter" #filter="scope">
           <slot name="filter" v-bind="scope" />
         </template>

package/dist/runtime/table/components/data-list/{DataListFilterTags.vue.d.ts → data-list-filter-tags.vue.d.ts}

@@ -2,6 +2,8 @@ import type { DataListControlSize, DataListFilterTagsUi } from '../../types/inde
 type __VLS_Props = {
     showAdd?: boolean;
     showClear?: boolean;
+    /** `sheet` collapses the tags into a bottom sheet on mobile; `tags` keeps inline tags everywhere. */
+    mobile?: 'sheet' | 'tags';
     size?: DataListControlSize;
     ui?: DataListFilterTagsUi;
 };
@@ -9,7 +11,7 @@ declare var __VLS_1: {
     definitions: import("../../types/index.js").TableUiFilterDefinition[];
     activeFilters: import("../../types/index.js").TableQueryStateFilterRule<string, import("../../types/index.js").TableFilterOperator, import("../../types/index.js").TableQueryStateFilterValue>[];
     clear: () => void;
-}, __VLS_10: any, __VLS_13: {
+}, __VLS_15: any, __VLS_18: {
     open: () => void;
     close: () => void;
     toggle: () => void;
@@ -20,19 +22,20 @@ declare var __VLS_1: {
         type: string;
         'aria-expanded': boolean;
     };
-}, __VLS_16: {};
+}, __VLS_21: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    filter?: (props: typeof __VLS_10) => any;
+    filter?: (props: typeof __VLS_15) => any;
 } & {
-    'add-filter-trigger'?: (props: typeof __VLS_13) => any;
+    'add-filter-trigger'?: (props: typeof __VLS_18) => any;
 } & {
-    'clear-filter-label'?: (props: typeof __VLS_16) => any;
+    'clear-filter-label'?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    showAdd: boolean;
+    mobile: "sheet" | "tags";
     showClear: boolean;
+    showAdd: 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/{DataListGrid.d.vue.ts → data-list-grid.d.vue.ts}

@@ -1,6 +1,8 @@
-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_10: string, __VLS_11: any;

package/dist/runtime/table/components/data-list/{DataListGrid.vue → data-list-grid.vue}

@@ -1,12 +1,17 @@
 <script setup>
 import { computed } from "vue";
 import { useDataListUi } from "../../composables/use-data-list-ui";
-import GridRenderer from "../grid/GridRenderer.vue";
+import GridRenderer from "../grid/grid-renderer.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 dataListUi = useDataListUi();
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.grid?.size ?? dataListUi.controlSize.value
+);
 const resolvedUi = computed(() => ({
   ...dataListUi.ui.value.grid?.ui,
   ...props.ui
@@ -14,7 +19,7 @@ const resolvedUi = computed(() => ({
 </script>
 
 <template>
-  <GridRenderer :height="height" :ui="resolvedUi">
+  <GridRenderer :height="height" :size="resolvedSize" :fill="fill" :ui="resolvedUi">
     <template v-for="(_, name) in $slots" #[name]="scope">
       <slot :name="name" v-bind="scope ?? {}" />
     </template>

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

@@ -1,6 +1,8 @@
-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_10: string, __VLS_11: any;

package/dist/runtime/table/components/data-list/{DataListInfiniteLoader.d.vue.ts → data-list-infinite-loader.d.vue.ts}

@@ -8,35 +8,35 @@ type __VLS_Props = {
 };
 declare var __VLS_1: {
     loadedCount: number;
-}, __VLS_3: {
+}, __VLS_8: {
     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_12: {
+}, __VLS_17: {
     loadedCount: number;
     totalCount: number | null;
-}, __VLS_14: {
+}, __VLS_19: {
     loadMore: () => 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>;
     state: {
-        mode: "none" | "offset" | "cursor";
-        pageIndex: number;
-        pageSize: number;
-        pageCount: number;
-        loadedCount: number;
-        totalCount: number | null;
         hasNextPage: boolean;
         hasPreviousPage: boolean;
         isLoadingMore: boolean;
         loadMoreError: unknown;
+        loadedCount: number;
+        mode: "none" | "offset" | "cursor";
+        pageCount: number;
+        pageIndex: number;
+        pageSize: number;
+        totalCount: number | null;
     };
 };
 type __VLS_Slots = {} & {
     loading?: (props: typeof __VLS_1) => any;
 } & {
-    error?: (props: typeof __VLS_3) => any;
+    error?: (props: typeof __VLS_8) => any;
 } & {
-    end?: (props: typeof __VLS_12) => any;
+    end?: (props: typeof __VLS_17) => any;
 } & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (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<{}>, {
     auto: boolean;

package/dist/runtime/table/components/data-list/{DataListInfiniteLoader.vue → data-list-infinite-loader.vue}

@@ -1,5 +1,6 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
 import { useIntersectionObserver } from "@vueuse/core";
 import { computed, ref } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
@@ -18,7 +19,7 @@ const internals = useTableInternals();
 const dataListUi = useDataListUi();
 const viewport = useDataListViewport();
 const sentinel = ref(null);
-const state = internals.pagination.state;
+const { state } = internals.pagination;
 const { t } = useUiToolsLocale();
 const rootUi = computed(() => dataListUi.ui.value.infiniteLoader);
 const resolvedUi = computed(() => ({
@@ -34,7 +35,9 @@ function loadMore() {
 useIntersectionObserver(
   sentinel,
   ([entry]) => {
-    if (!props.auto || !entry?.isIntersecting || !state.value.hasNextPage) return;
+    if (!props.auto || !entry?.isIntersecting || !state.value.hasNextPage) {
+      return;
+    }
     loadMore();
   },
   { root: viewport.element, rootMargin: props.rootMargin }
@@ -55,7 +58,16 @@ useIntersectionObserver(
 "
   >
     <slot v-if="state.isLoadingMore" name="loading" :loaded-count="state.loadedCount">
-      <span :class="mergeDataListUiClass('text-sm text-muted', rootUi?.ui?.loading, ui?.loading)">
+      <span
+        :class="
+  mergeDataListUiClass(
+    'inline-flex items-center gap-2 text-sm text-muted',
+    rootUi?.ui?.loading,
+    ui?.loading
+  )
+"
+      >
+        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
         {{ t("table.states.loadingMore") }}
       </span>
     </slot>