nuxt-ui-tools 0.1.0

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

@@ -0,0 +1,60 @@
+import type { DataListDefaultUi } from '../../types/index.js';
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    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: {
+    layout: string;
+    refresh: () => void;
+}, __VLS_54: {}, __VLS_57: {}, __VLS_60: {}, __VLS_70: {
+    loadedCount: number;
+}, __VLS_73: {
+    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: {
+    loadedCount: number;
+    totalCount: number | null;
+};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_13) => any;
+} & {
+    'initial-loading'?: (props: typeof __VLS_42) => any;
+} & {
+    loading?: (props: typeof __VLS_45) => any;
+} & {
+    error?: (props: typeof __VLS_48) => any;
+} & {
+    empty?: (props: typeof __VLS_51) => any;
+} & {
+    'empty-table'?: (props: typeof __VLS_54) => any;
+} & {
+    'empty-grid'?: (props: typeof __VLS_57) => any;
+} & {
+    refreshing?: (props: typeof __VLS_60) => any;
+} & {
+    'loading-more'?: (props: typeof __VLS_70) => any;
+} & {
+    'load-more-error'?: (props: typeof __VLS_73) => any;
+} & {
+    end?: (props: typeof __VLS_76) => 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>;
+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/DataListDefault.vue

@@ -0,0 +1,125 @@
+<script setup>
+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";
+const props = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  height: { type: [String, Number], required: false },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+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);
+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;
+}
+</script>
+
+<template>
+  <div :class="mergeDataListUiClass('grid gap-4', rootUi?.root, ui?.root)">
+    <header :class="mergeDataListUiClass('grid gap-3', rootUi?.header, ui?.header)">
+      <div
+        v-if="$slots.title || titleText || description"
+        :class="mergeDataListUiClass('grid gap-1', rootUi?.heading, ui?.heading)"
+      >
+        <slot name="title">
+          <h2
+            :class="
+  mergeDataListUiClass(
+    'text-lg font-semibold tracking-tight text-highlighted',
+    rootUi?.title,
+    ui?.title
+  )
+"
+          >
+            {{ titleText }}
+          </h2>
+        </slot>
+        <p
+          v-if="description"
+          :class="mergeDataListUiClass('text-sm text-muted', rootUi?.description, ui?.description)"
+        >
+          {{ description }}
+        </p>
+      </div>
+
+      <div
+        :class="
+  mergeDataListUiClass(
+    'flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between',
+    rootUi?.toolbar,
+    ui?.toolbar
+  )
+"
+      >
+        <div
+          :class="
+  mergeDataListUiClass(
+    'flex min-w-0 flex-1 flex-wrap items-center gap-2',
+    rootUi?.primaryActions,
+    ui?.primaryActions
+  )
+"
+        >
+          <DataListSearch />
+          <DataListFilterTags show-add show-clear />
+          <slot name="actions" />
+        </div>
+        <div
+          :class="
+  mergeDataListUiClass(
+    'flex shrink-0 self-start items-start justify-end gap-2',
+    rootUi?.secondaryActions,
+    ui?.secondaryActions
+  )
+"
+        >
+          <DataListFilterPanel />
+          <DataListColumnPanel />
+          <DataListRefresh />
+          <DataListLayoutSwitch />
+        </div>
+      </div>
+    </header>
+
+    <DataListContent fit="height" :height="contentHeight">
+      <template v-if="$slots['initial-loading']" #initial-loading="scope">
+        <slot name="initial-loading" v-bind="scope" />
+      </template>
+      <template v-if="$slots.loading" #loading="scope"
+        ><slot name="loading" v-bind="scope"
+      /></template>
+      <template v-if="$slots.error" #error="scope"><slot name="error" v-bind="scope" /></template>
+      <template v-if="$slots.empty" #empty="scope"><slot name="empty" v-bind="scope" /></template>
+      <template v-if="$slots['empty-table']" #empty-table><slot name="empty-table" /></template>
+      <template v-if="$slots['empty-grid']" #empty-grid><slot name="empty-grid" /></template>
+      <template v-if="$slots.refreshing" #refreshing><slot name="refreshing" /></template>
+      <template #after>
+        <DataListInfiniteLoader>
+          <template v-if="$slots['loading-more']" #loading="scope"
+            ><slot name="loading-more" v-bind="scope"
+          /></template>
+          <template v-if="$slots['load-more-error']" #error="scope"
+            ><slot name="load-more-error" v-bind="scope"
+          /></template>
+          <template v-if="$slots.end" #end="scope"><slot name="end" v-bind="scope" /></template>
+        </DataListInfiniteLoader>
+      </template>
+    </DataListContent>
+
+    <DataListPagination />
+  </div>
+</template>

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

@@ -0,0 +1,60 @@
+import type { DataListDefaultUi } from '../../types/index.js';
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    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: {
+    layout: string;
+    refresh: () => void;
+}, __VLS_54: {}, __VLS_57: {}, __VLS_60: {}, __VLS_70: {
+    loadedCount: number;
+}, __VLS_73: {
+    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: {
+    loadedCount: number;
+    totalCount: number | null;
+};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_13) => any;
+} & {
+    'initial-loading'?: (props: typeof __VLS_42) => any;
+} & {
+    loading?: (props: typeof __VLS_45) => any;
+} & {
+    error?: (props: typeof __VLS_48) => any;
+} & {
+    empty?: (props: typeof __VLS_51) => any;
+} & {
+    'empty-table'?: (props: typeof __VLS_54) => any;
+} & {
+    'empty-grid'?: (props: typeof __VLS_57) => any;
+} & {
+    refreshing?: (props: typeof __VLS_60) => any;
+} & {
+    'loading-more'?: (props: typeof __VLS_70) => any;
+} & {
+    'load-more-error'?: (props: typeof __VLS_73) => any;
+} & {
+    end?: (props: typeof __VLS_76) => 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>;
+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/DataListFilterPanel.d.vue.ts

@@ -0,0 +1,27 @@
+import type { DataListControlSize, DataListFilterPanelUi } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    ui?: DataListFilterPanelUi;
+};
+declare var __VLS_9: {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    openState: boolean;
+    triggerProps: {
+        type: "button";
+        "aria-expanded": boolean;
+    };
+};
+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_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/DataListFilterPanel.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { useTableInternals } from "../../composables/use-table-internals";
+import FilterPanel from "../filters/panel/FilterPanel.vue";
+defineProps({
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+</script>
+
+<template>
+  <FilterPanel v-if="internals.filterPresentation.hasPanelFilters.value" :size="size" :ui="ui">
+    <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

@@ -0,0 +1,27 @@
+import type { DataListControlSize, DataListFilterPanelUi } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    ui?: DataListFilterPanelUi;
+};
+declare var __VLS_9: {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    openState: boolean;
+    triggerProps: {
+        type: "button";
+        "aria-expanded": boolean;
+    };
+};
+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_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/DataListFilterTags.d.vue.ts

@@ -0,0 +1,42 @@
+import type { DataListControlSize, DataListFilterTagsUi } from '../../types/index.js';
+type __VLS_Props = {
+    showAdd?: boolean;
+    showClear?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterTagsUi;
+};
+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: {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    openState: boolean;
+    triggerProps: {
+        type: string;
+        'aria-expanded': boolean;
+    };
+}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    filter?: (props: typeof __VLS_10) => any;
+} & {
+    'add-filter-trigger'?: (props: typeof __VLS_13) => any;
+} & {
+    'clear-filter-label'?: (props: typeof __VLS_16) => 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;
+    showClear: 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,54 @@
+<script setup>
+import { computed } from "vue";
+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";
+const props = defineProps({
+  showAdd: { type: Boolean, required: false, default: false },
+  showClear: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const dataListUi = useDataListUi();
+const internals = useTableInternals();
+provideDataListUi(
+  computed(() => ({
+    ...dataListUi.ui.value,
+    filterTags: {
+      ...dataListUi.ui.value.filterTags,
+      size: props.size ?? dataListUi.ui.value.filterTags?.size,
+      ui: {
+        ...dataListUi.ui.value.filterTags?.ui,
+        ...props.ui
+      }
+    }
+  }))
+);
+</script>
+
+<template>
+  <div
+    :class="
+  mergeDataListUiClass('contents', dataListUi.ui.value.filterTags?.ui?.root, props.ui?.root)
+"
+  >
+    <slot
+      :definitions="internals.filterPresentation.tagDefinitions.value"
+      :active-filters="internals.filters.activeUiFilters.value"
+      :clear="internals.filters.clearAllFilters"
+    >
+      <FilterTagsBar :show-add="showAdd" :show-clear="showClear">
+        <template v-if="$slots.filter" #filter="scope">
+          <slot name="filter" v-bind="scope" />
+        </template>
+        <template v-if="$slots['add-filter-trigger']" #add-filter-trigger="scope">
+          <slot name="add-filter-trigger" v-bind="scope" />
+        </template>
+        <template v-if="$slots['clear-filter-label']" #clear-filter-label>
+          <slot name="clear-filter-label" />
+        </template>
+      </FilterTagsBar>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,42 @@
+import type { DataListControlSize, DataListFilterTagsUi } from '../../types/index.js';
+type __VLS_Props = {
+    showAdd?: boolean;
+    showClear?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterTagsUi;
+};
+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: {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    openState: boolean;
+    triggerProps: {
+        type: string;
+        'aria-expanded': boolean;
+    };
+}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    filter?: (props: typeof __VLS_10) => any;
+} & {
+    'add-filter-trigger'?: (props: typeof __VLS_13) => any;
+} & {
+    'clear-filter-label'?: (props: typeof __VLS_16) => 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;
+    showClear: 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,18 @@
+import type { DataListGridUi } from '../../types/index.js';
+type __VLS_Props = {
+    height?: string;
+    ui?: DataListGridUi;
+};
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => 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>;
+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/DataListGrid.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { computed } from "vue";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import GridRenderer from "../grid/GridRenderer.vue";
+const props = defineProps({
+  height: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const dataListUi = useDataListUi();
+const resolvedUi = computed(() => ({
+  ...dataListUi.ui.value.grid?.ui,
+  ...props.ui
+}));
+</script>
+
+<template>
+  <GridRenderer :height="height" :ui="resolvedUi">
+    <template v-for="(_, name) in $slots" #[name]="scope">
+      <slot :name="name" v-bind="scope ?? {}" />
+    </template>
+  </GridRenderer>
+</template>

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

@@ -0,0 +1,18 @@
+import type { DataListGridUi } from '../../types/index.js';
+type __VLS_Props = {
+    height?: string;
+    ui?: DataListGridUi;
+};
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => 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>;
+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/DataListInfiniteLoader.d.vue.ts

@@ -0,0 +1,52 @@
+import type { DataListControlSize, DataListInfiniteLoaderUi } from '../../types/index.js';
+type __VLS_Props = {
+    auto?: boolean;
+    rootMargin?: string;
+    label?: string;
+    size?: DataListControlSize;
+    ui?: DataListInfiniteLoaderUi;
+};
+declare var __VLS_1: {
+    loadedCount: number;
+}, __VLS_3: {
+    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: {
+    loadedCount: number;
+    totalCount: number | null;
+}, __VLS_14: {
+    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;
+    };
+};
+type __VLS_Slots = {} & {
+    loading?: (props: typeof __VLS_1) => any;
+} & {
+    error?: (props: typeof __VLS_3) => any;
+} & {
+    end?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_14) => 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;
+    rootMargin: 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,94 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { useIntersectionObserver } from "@vueuse/core";
+import { computed, ref } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useDataListViewport } from "../../composables/use-data-list-viewport";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { mergeDataListUiClass } from "../../utils";
+const props = defineProps({
+  auto: { type: Boolean, required: false, default: true },
+  rootMargin: { type: String, required: false, default: "320px 0px" },
+  label: { type: String, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const viewport = useDataListViewport();
+const sentinel = ref(null);
+const state = internals.pagination.state;
+const { t } = useUiToolsLocale();
+const rootUi = computed(() => dataListUi.ui.value.infiniteLoader);
+const resolvedUi = computed(() => ({
+  ...rootUi.value?.ui,
+  ...props.ui
+}));
+const resolvedSize = computed(
+  () => props.size ?? rootUi.value?.size ?? dataListUi.controlSize.value
+);
+function loadMore() {
+  void internals.pagination.loadMore();
+}
+useIntersectionObserver(
+  sentinel,
+  ([entry]) => {
+    if (!props.auto || !entry?.isIntersecting || !state.value.hasNextPage) return;
+    loadMore();
+  },
+  { root: viewport.element, rootMargin: props.rootMargin }
+);
+</script>
+
+<template>
+  <div
+    v-if="internals.pagination.mode.value === 'cursor'"
+    ref="sentinel"
+    data-data-list-infinite-loader
+    :class="
+  mergeDataListUiClass(
+    'flex min-h-12 items-center justify-center py-3',
+    rootUi?.ui?.root,
+    ui?.root
+  )
+"
+  >
+    <slot v-if="state.isLoadingMore" name="loading" :loaded-count="state.loadedCount">
+      <span :class="mergeDataListUiClass('text-sm text-muted', rootUi?.ui?.loading, ui?.loading)">
+        {{ t("table.states.loadingMore") }}
+      </span>
+    </slot>
+    <slot
+      v-else-if="state.loadMoreError"
+      name="error"
+      :error="state.loadMoreError"
+      :retry="internals.pagination.loadMore"
+    >
+      <UButton
+        color="neutral"
+        variant="soft"
+        :size="resolvedSize"
+        :label="t('table.states.gridError.action')"
+        :ui="{ base: resolvedUi.retry }"
+        @click="loadMore"
+      />
+    </slot>
+    <div
+      v-else-if="!state.hasNextPage"
+      :class="mergeDataListUiClass(void 0, rootUi?.ui?.end, ui?.end)"
+    >
+      <slot name="end" :loaded-count="state.loadedCount" :total-count="state.totalCount" />
+    </div>
+    <slot v-else-if="!auto" :load-more="internals.pagination.loadMore" :state="state">
+      <UButton
+        color="neutral"
+        variant="outline"
+        :size="resolvedSize"
+        :label="label ?? t('table.controls.loadMore')"
+        :ui="{ base: resolvedUi.loadMore }"
+        @click="loadMore"
+      />
+    </slot>
+  </div>
+</template>