nuxt-ui-tools 0.1.0

package/dist/runtime/table/components/data-list/DataListInfiniteLoader.vue.d.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/DataListLayoutSwitch.d.vue.ts

@@ -0,0 +1,27 @@
+import type { DataListControlSize, DataListLayoutSwitchUi, TableLayout } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    labels?: boolean;
+    order?: TableLayout[];
+    ui?: DataListLayoutSwitchUi;
+};
+declare function setLayout(layout: TableLayout): void;
+declare var __VLS_1: {
+    layout: "table" | "grid";
+    setLayout: typeof setLayout;
+    available: TableLayout[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    order: TableLayout[];
+}, {}, {}, {}, 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/DataListLayoutSwitch.vue

@@ -0,0 +1,60 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+const props = defineProps({
+  size: { type: String, required: false },
+  labels: { type: Boolean, required: false },
+  order: { type: Array, required: false, default: () => ["table", "grid"] },
+  ui: { type: Object, required: false }
+});
+const resolvedUi = computed(() => ({
+  ...dataListUi.ui.value.layoutSwitch?.ui,
+  ...props.ui
+}));
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.layoutSwitch?.size ?? dataListUi.controlSize.value
+);
+function setLayout(layout) {
+  internals.controls.setTableLayout(layout);
+}
+</script>
+
+<template>
+  <slot
+    :layout="internals.controls.tableLayout.value"
+    :set-layout="setLayout"
+    :available="internals.controls.layoutState.value.available"
+  >
+    <UFieldGroup
+      v-if="internals.controls.gridEnabled.value"
+      :size="resolvedSize"
+      :class="resolvedUi.root"
+    >
+      <UButton
+        v-for="layout in order"
+        :key="layout"
+        color="neutral"
+        :variant="internals.controls.tableLayout.value === layout ? 'subtle' : 'outline'"
+        :size="resolvedSize"
+        :icon="layout === 'table' ? 'i-lucide-table-properties' : 'i-lucide-layout-grid'"
+        :label="labels ? layout === 'table' ? 'Table' : 'Grid' : void 0"
+        :aria-label="layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')"
+        :title="layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')"
+        :ui="{
+  base: resolvedUi.trigger,
+  label: resolvedUi.triggerLabel,
+  leadingIcon: resolvedUi.triggerLeadingIcon,
+  trailingIcon: resolvedUi.triggerTrailingIcon
+}"
+        @click="setLayout(layout)"
+      />
+    </UFieldGroup>
+  </slot>
+</template>

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

@@ -0,0 +1,27 @@
+import type { DataListControlSize, DataListLayoutSwitchUi, TableLayout } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    labels?: boolean;
+    order?: TableLayout[];
+    ui?: DataListLayoutSwitchUi;
+};
+declare function setLayout(layout: TableLayout): void;
+declare var __VLS_1: {
+    layout: "table" | "grid";
+    setLayout: typeof setLayout;
+    available: TableLayout[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    order: TableLayout[];
+}, {}, {}, {}, 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/DataListPagination.d.vue.ts

@@ -0,0 +1,37 @@
+import type { DataListControlSize, DataListPaginationUi } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    ui?: DataListPaginationUi;
+};
+declare var __VLS_1: {
+    state: {
+        mode: "none" | "offset" | "cursor";
+        pageIndex: number;
+        pageSize: number;
+        pageCount: number;
+        loadedCount: number;
+        totalCount: number | null;
+        hasNextPage: boolean;
+        hasPreviousPage: boolean;
+        isLoadingMore: boolean;
+        loadMoreError: unknown;
+    };
+    setPage: (page: number) => void;
+    setPageSize: (nextPageSize: number) => void;
+    next: () => void;
+    previous: () => void;
+}, __VLS_11: string, __VLS_12: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_1) => 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/DataListPagination.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { useTableInternals } from "../../composables/use-table-internals";
+import TableFooter from "../layout/TableFooter.vue";
+defineProps({
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+</script>
+
+<template>
+  <slot
+    v-if="internals.pagination.mode.value === 'offset'"
+    :state="internals.pagination.state.value"
+    :set-page="internals.pagination.setPage"
+    :set-page-size="internals.pagination.setPageSize"
+    :next="internals.pagination.next"
+    :previous="internals.pagination.previous"
+  >
+    <TableFooter :size="size" :ui="ui">
+      <template v-for="(_, name) in $slots" #[name]="scope">
+        <slot v-if="name !== 'default'" :name="name" v-bind="scope ?? {}" />
+      </template>
+    </TableFooter>
+  </slot>
+</template>

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

@@ -0,0 +1,37 @@
+import type { DataListControlSize, DataListPaginationUi } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    ui?: DataListPaginationUi;
+};
+declare var __VLS_1: {
+    state: {
+        mode: "none" | "offset" | "cursor";
+        pageIndex: number;
+        pageSize: number;
+        pageCount: number;
+        loadedCount: number;
+        totalCount: number | null;
+        hasNextPage: boolean;
+        hasPreviousPage: boolean;
+        isLoadingMore: boolean;
+        loadMoreError: unknown;
+    };
+    setPage: (page: number) => void;
+    setPageSize: (nextPageSize: number) => void;
+    next: () => void;
+    previous: () => void;
+}, __VLS_11: string, __VLS_12: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_1) => 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/DataListRefresh.d.vue.ts

@@ -0,0 +1,28 @@
+import type { DataListControlSize, DataListRefreshUi } from '../../types/index.js';
+type __VLS_Props = {
+    label?: string;
+    size?: DataListControlSize;
+    ui?: DataListRefreshUi;
+};
+declare function refresh(): void;
+declare var __VLS_1: {
+    refresh: typeof refresh;
+    loading: boolean;
+    triggerProps: {
+        type: string;
+        disabled: boolean;
+        onClick: typeof refresh;
+    };
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/DataListRefresh.vue

@@ -0,0 +1,49 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+const props = defineProps({
+  label: { type: String, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
+const loading = computed(
+  () => internals.queryContent.status.value.isFetching || internals.queryContent.status.value.isRefreshing || internals.queryContent.status.value.isRevalidating
+);
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.refresh?.size ?? dataListUi.controlSize.value
+);
+const resolvedUi = computed(() => ({
+  ...dataListUi.ui.value.refresh?.ui,
+  ...props.ui
+}));
+function refresh() {
+  void internals.queryContent.refreshData()();
+}
+</script>
+
+<template>
+  <slot
+    :refresh="refresh"
+    :loading="loading"
+    :trigger-props="{ type: 'button', disabled: loading, onClick: refresh }"
+  >
+    <UButton
+      color="neutral"
+      variant="outline"
+      :size="resolvedSize"
+      icon="i-lucide-refresh-cw"
+      :label="label"
+      :loading="loading"
+      :aria-label="t('table.header.refreshData')"
+      :title="t('table.header.refreshData')"
+      :ui="resolvedUi"
+      @click="refresh"
+    />
+  </slot>
+</template>

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

@@ -0,0 +1,28 @@
+import type { DataListControlSize, DataListRefreshUi } from '../../types/index.js';
+type __VLS_Props = {
+    label?: string;
+    size?: DataListControlSize;
+    ui?: DataListRefreshUi;
+};
+declare function refresh(): void;
+declare var __VLS_1: {
+    refresh: typeof refresh;
+    loading: boolean;
+    triggerProps: {
+        type: string;
+        disabled: boolean;
+        onClick: typeof refresh;
+    };
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/DataListResultCount.d.vue.ts

@@ -0,0 +1,21 @@
+import type { DataListResultCountUi } from '../../types/index.js';
+type __VLS_Props = {
+    ui?: DataListResultCountUi;
+};
+declare var __VLS_1: {
+    loadedCount: number;
+    totalCount: number | null;
+    known: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/DataListResultCount.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { mergeDataListUiClass } from "../../utils";
+const props = defineProps({
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { locale, t } = useUiToolsLocale();
+const loadedCount = computed(() => internals.queryContent.data.value.rows.length);
+const totalCount = computed(() => internals.queryContent.data.value.rowCount);
+const formattedCount = computed(
+  () => new Intl.NumberFormat(locale.value.code).format(totalCount.value ?? loadedCount.value)
+);
+const rootUi = computed(() => dataListUi.ui.value.resultCount?.ui);
+</script>
+
+<template>
+  <slot :loaded-count="loadedCount" :total-count="totalCount" :known="totalCount != null">
+    <span :class="mergeDataListUiClass('text-sm text-muted', rootUi?.root, props.ui?.root)">
+      {{
+        totalCount == null ? t("table.states.loaded", { count: formattedCount }) : formattedCount
+      }}
+    </span>
+  </slot>
+</template>

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

@@ -0,0 +1,21 @@
+import type { DataListResultCountUi } from '../../types/index.js';
+type __VLS_Props = {
+    ui?: DataListResultCountUi;
+};
+declare var __VLS_1: {
+    loadedCount: number;
+    totalCount: number | null;
+    known: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/DataListRoot.d.vue.ts

@@ -0,0 +1,31 @@
+import type { ComputedRef } from 'vue';
+import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
+import { type TableInternals } from '../../composables/use-table-internals.js';
+import type { DataListDensity, DataListUiConfig } from '../../types/index.js';
+type DataListTable = {
+    schema: ComputedRef<{
+        tableKey: string;
+    }>;
+    __internals: TableInternals;
+};
+type __VLS_Props = {
+    table: DataListTable;
+    locale?: UiToolsLocale<UiToolsMessages>;
+    density?: DataListDensity;
+    ui?: DataListUiConfig;
+};
+declare var __VLS_1: {
+    tableApi: import("../../types/index.js").TableApi<unknown>;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/DataListRoot.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { useAppConfig } from "nuxt/app";
+import { computed, onBeforeUnmount, onMounted } from "vue";
+import { provideUiToolsLocale, useUiToolsLocaleRef } from "#ui-tools/i18n";
+import { provideDataListUi } from "../../composables/use-data-list-ui";
+import { provideTableInternals } from "../../composables/use-table-internals";
+const props = defineProps({
+  table: { type: Object, required: true },
+  locale: { type: Object, required: false },
+  density: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const appConfig = useAppConfig();
+provideTableInternals(props.table.__internals);
+provideUiToolsLocale(useUiToolsLocaleRef(computed(() => props.locale)));
+provideDataListUi(
+  computed(
+    () => mergeDataListUi(resolveAppDataListUi(appConfig), props.ui, props.density)
+  )
+);
+onMounted(() => props.table.__internals.startup.scheduleStart());
+onBeforeUnmount(() => props.table.__internals.startup.dispose());
+function resolveAppDataListUi(config) {
+  if (!("nuxtUiTools" in config) || !config.nuxtUiTools || typeof config.nuxtUiTools !== "object")
+    return void 0;
+  if (!("dataList" in config.nuxtUiTools)) return void 0;
+  return isDataListUiConfig(config.nuxtUiTools.dataList) ? config.nuxtUiTools.dataList : void 0;
+}
+function isDataListUiConfig(value) {
+  return Boolean(value) && typeof value === "object";
+}
+function mergeDataListUi(appUi, componentUi, density) {
+  return {
+    ...appUi,
+    ...componentUi,
+    density: density ?? componentUi?.density ?? appUi?.density,
+    control: { ...appUi?.control, ...componentUi?.control },
+    default: mergeUiConfig(appUi?.default, componentUi?.default),
+    search: mergeSearchConfig(appUi?.search, componentUi?.search),
+    filterTags: mergePartConfig(appUi?.filterTags, componentUi?.filterTags),
+    addFilter: mergePartConfig(appUi?.addFilter, componentUi?.addFilter),
+    filterPanel: mergePartConfig(appUi?.filterPanel, componentUi?.filterPanel),
+    clearFilters: mergePartConfig(appUi?.clearFilters, componentUi?.clearFilters),
+    resultCount: mergeUiConfig(appUi?.resultCount, componentUi?.resultCount),
+    columnPanel: mergePartConfig(appUi?.columnPanel, componentUi?.columnPanel),
+    sortMenu: mergePartConfig(appUi?.sortMenu, componentUi?.sortMenu),
+    layoutSwitch: mergePartConfig(appUi?.layoutSwitch, componentUi?.layoutSwitch),
+    refresh: mergePartConfig(appUi?.refresh, componentUi?.refresh),
+    content: mergeUiConfig(appUi?.content, componentUi?.content),
+    table: mergeUiConfig(appUi?.table, componentUi?.table),
+    grid: mergeUiConfig(appUi?.grid, componentUi?.grid),
+    pagination: mergePartConfig(appUi?.pagination, componentUi?.pagination),
+    infiniteLoader: mergePartConfig(appUi?.infiniteLoader, componentUi?.infiniteLoader)
+  };
+}
+function mergeUiConfig(appDefaults, componentConfig) {
+  return {
+    ...appDefaults,
+    ...componentConfig,
+    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
+  };
+}
+function mergePartConfig(appDefaults, componentConfig) {
+  return {
+    ...appDefaults,
+    ...componentConfig,
+    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
+  };
+}
+function mergeSearchConfig(appDefaults, componentConfig) {
+  return {
+    ...appDefaults,
+    ...componentConfig,
+    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
+  };
+}
+</script>
+
+<template>
+  <slot :table-api="table.__internals.tableApi" />
+</template>

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

@@ -0,0 +1,31 @@
+import type { ComputedRef } from 'vue';
+import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
+import { type TableInternals } from '../../composables/use-table-internals.js';
+import type { DataListDensity, DataListUiConfig } from '../../types/index.js';
+type DataListTable = {
+    schema: ComputedRef<{
+        tableKey: string;
+    }>;
+    __internals: TableInternals;
+};
+type __VLS_Props = {
+    table: DataListTable;
+    locale?: UiToolsLocale<UiToolsMessages>;
+    density?: DataListDensity;
+    ui?: DataListUiConfig;
+};
+declare var __VLS_1: {
+    tableApi: import("../../types/index.js").TableApi<unknown>;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/DataListSearch.d.vue.ts

@@ -0,0 +1,10 @@
+import type { DataListControlSize, DataListSearchUi } from '../../types/index.js';
+type __VLS_Props = {
+    placeholder?: string;
+    size?: DataListControlSize;
+    width?: string;
+    ui?: DataListSearchUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,36 @@
+<script setup>
+import { computed } from "vue";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import SearchQueryInput from "../utils/SearchQueryInput.vue";
+const props = defineProps({
+  placeholder: { type: String, required: false },
+  size: { type: String, required: false },
+  width: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.search?.size ?? dataListUi.controlSize.value
+);
+const resolvedWidth = computed(() => props.width ?? dataListUi.ui.value.search?.width ?? "21rem");
+const resolvedUi = computed(() => ({
+  ...dataListUi.ui.value.search?.ui,
+  ...props.ui
+}));
+const loading = computed(
+  () => internals.queryContent.status.value.isFetching && !internals.queryContent.status.value.isPending
+);
+</script>
+
+<template>
+  <SearchQueryInput
+    v-model="internals.filters.searchQuery.value"
+    :loading="loading"
+    :placeholder="placeholder ?? internals.filters.searchPlaceholder.value"
+    :size="resolvedSize"
+    :ui="resolvedUi"
+    :style="{ width: resolvedWidth, maxWidth: '100%' }"
+  />
+</template>

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

@@ -0,0 +1,10 @@
+import type { DataListControlSize, DataListSearchUi } from '../../types/index.js';
+type __VLS_Props = {
+    placeholder?: string;
+    size?: DataListControlSize;
+    width?: string;
+    ui?: DataListSearchUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;