nuxt-ui-tools 0.1.3 → 1.0.1

package/dist/runtime/table/components/data-list/{DataListInfiniteLoader.vue.d.ts → data-list-infinite-loader.vue.d.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/{DataListLayoutSwitch.d.vue.ts → data-list-layout-switch.d.vue.ts}

@@ -1,13 +1,15 @@
-import type { DataListControlSize, DataListLayoutSwitchUi, TableLayout } from '../../types/index.js';
+import type { DataListControlSize, DataListLayoutSwitchProps, DataListLayoutSwitchUi, TableLayout } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
     labels?: boolean;
     order?: TableLayout[];
+    mobile?: boolean;
     ui?: DataListLayoutSwitchUi;
+    props?: DataListLayoutSwitchProps;
 };
 declare function setLayout(layout: TableLayout): void;
 declare var __VLS_1: {
-    layout: "table" | "grid";
+    layout: TableLayout;
     setLayout: typeof setLayout;
     available: TableLayout[];
 };
@@ -15,6 +17,7 @@ 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<{}>, {
+    mobile: boolean;
     order: TableLayout[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/table/components/data-list/{DataListLayoutSwitch.vue → data-list-layout-switch.vue}

@@ -4,13 +4,17 @@ import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
 import UTooltip from "@nuxt/ui/components/Tooltip.vue";
 import { computed } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
+import { mergeDataListProps, mergeDataListUiClass } from "../../utils";
 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 }
+  mobile: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
 });
 const resolvedUi = computed(() => ({
   ...dataListUi.ui.value.layoutSwitch?.ui,
@@ -18,12 +22,27 @@ const resolvedUi = computed(() => ({
 }));
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
+const { isMobile } = useDataListBreakpoint();
 const { t } = useUiToolsLocale();
 const resolvedSize = computed(
   () => props.size ?? dataListUi.ui.value.layoutSwitch?.size ?? dataListUi.controlSize.value
 );
+const controlProps = computed(
+  () => mergeDataListProps(dataListUi.ui.value.layoutSwitch?.props, props.props)
+);
+function buttonProps(active) {
+  const base = mergeDataListProps(
+    { color: "neutral", size: resolvedSize.value, variant: "ghost" },
+    controlProps.value.trigger
+  );
+  return active ? mergeDataListProps(
+    base,
+    { variant: "soft" },
+    controlProps.value.activeTrigger
+  ) : base;
+}
 function setLayout(layout) {
-  internals.controls.setTableLayout(layout);
+  internals.tableApi.layout.set(layout);
 }
 </script>
 
@@ -34,9 +53,11 @@ function setLayout(layout) {
     :available="internals.controls.layoutState.value.available"
   >
     <UFieldGroup
-      v-if="internals.controls.gridEnabled.value"
+      v-if="
+  internals.controls.gridEnabled.value && internals.controls.tableEnabled.value && (mobile || !isMobile)
+"
       :size="resolvedSize"
-      :class="resolvedUi.root"
+      :class="mergeDataListUiClass('nut-dl-layout', void 0, resolvedUi.root)"
     >
       <UTooltip
         v-for="layout in order"
@@ -44,18 +65,19 @@ function setLayout(layout) {
         :text="layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')"
       >
         <UButton
-          color="neutral"
-          :variant="internals.controls.tableLayout.value === layout ? 'subtle' : 'outline'"
-          :size="resolvedSize"
-          :icon="layout === 'table' ? 'i-lucide-table-properties' : 'i-lucide-layout-grid'"
+          v-bind="buttonProps(internals.controls.tableLayout.value === layout)"
+          :data-active="internals.controls.tableLayout.value === layout"
+          :icon="
+  controlProps.icons?.[layout] ?? (layout === 'table' ? 'i-lucide-menu' : 'i-lucide-box')
+"
           :label="labels ? layout === 'table' ? 'Table' : 'Grid' : void 0"
           :aria-label="
   layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')
 "
           :ui="{
-  base: resolvedUi.trigger,
+  base: mergeDataListUiClass('nut-dl-layout__btn', void 0, resolvedUi.trigger),
   label: resolvedUi.triggerLabel,
-  leadingIcon: resolvedUi.triggerLeadingIcon,
+  leadingIcon: mergeDataListUiClass('size-3.5', void 0, resolvedUi.triggerLeadingIcon),
   trailingIcon: resolvedUi.triggerTrailingIcon
 }"
           @click="setLayout(layout)"

package/dist/runtime/table/components/data-list/{DataListLayoutSwitch.vue.d.ts → data-list-layout-switch.vue.d.ts}

@@ -1,13 +1,15 @@
-import type { DataListControlSize, DataListLayoutSwitchUi, TableLayout } from '../../types/index.js';
+import type { DataListControlSize, DataListLayoutSwitchProps, DataListLayoutSwitchUi, TableLayout } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
     labels?: boolean;
     order?: TableLayout[];
+    mobile?: boolean;
     ui?: DataListLayoutSwitchUi;
+    props?: DataListLayoutSwitchProps;
 };
 declare function setLayout(layout: TableLayout): void;
 declare var __VLS_1: {
-    layout: "table" | "grid";
+    layout: TableLayout;
     setLayout: typeof setLayout;
     available: TableLayout[];
 };
@@ -15,6 +17,7 @@ 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<{}>, {
+    mobile: boolean;
     order: TableLayout[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,20 +1,21 @@
-import type { DataListControlSize, DataListPaginationUi } from '../../types/index.js';
+import type { DataListControlSize, DataListPaginationProps, DataListPaginationUi } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
     ui?: DataListPaginationUi;
+    props?: DataListPaginationProps;
 };
 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;
+        loadedCount: number;
+        mode: "none" | "offset" | "cursor";
+        pageCount: number;
+        pageIndex: number;
+        pageSize: number;
+        totalCount: number | null;
     };
     setPage: (page: number) => void;
     setPageSize: (nextPageSize: number) => void;

package/dist/runtime/table/components/data-list/{DataListPagination.vue → data-list-pagination.vue}

@@ -1,9 +1,10 @@
 <script setup>
 import { useTableInternals } from "../../composables/use-table-internals";
-import TableFooter from "../layout/TableFooter.vue";
+import TableFooter from "../layout/table-footer.vue";
 defineProps({
   size: { type: String, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
 });
 const internals = useTableInternals();
 </script>
@@ -17,7 +18,7 @@ const internals = useTableInternals();
     :next="internals.pagination.next"
     :previous="internals.pagination.previous"
   >
-    <TableFooter :size="size" :ui="ui">
+    <TableFooter :size="size" :ui="ui" :props="props">
       <template v-for="(_, name) in $slots" #[name]="scope">
         <slot v-if="name !== 'default'" :name="name" v-bind="scope ?? {}" />
       </template>

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

@@ -1,20 +1,21 @@
-import type { DataListControlSize, DataListPaginationUi } from '../../types/index.js';
+import type { DataListControlSize, DataListPaginationProps, DataListPaginationUi } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
     ui?: DataListPaginationUi;
+    props?: DataListPaginationProps;
 };
 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;
+        loadedCount: number;
+        mode: "none" | "offset" | "cursor";
+        pageCount: number;
+        pageIndex: number;
+        pageSize: number;
+        totalCount: number | null;
     };
     setPage: (page: number) => void;
     setPageSize: (nextPageSize: number) => void;

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

@@ -1,8 +1,9 @@
-import type { DataListControlSize, DataListRefreshUi } from '../../types/index.js';
+import type { DataListControlSize, DataListRefreshProps, DataListRefreshUi } from '../../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: DataListControlSize;
     ui?: DataListRefreshUi;
+    props?: DataListRefreshProps;
 };
 declare function refresh(): void;
 declare var __VLS_1: {

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

@@ -0,0 +1,106 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { usePreferredReducedMotion } from "@vueuse/core";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { mergeDataListProps, mergeDataListUiClass } from "../../utils";
+const props = defineProps({
+  label: { type: String, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
+const preferredMotion = usePreferredReducedMotion();
+const loading = computed(
+  () => internals.queryContent.status.value.isFetching || internals.queryContent.status.value.isRefreshing || internals.queryContent.status.value.isRevalidating
+);
+const completingSpin = ref(false);
+const spinning = computed(() => loading.value || completingSpin.value);
+let completionFallback;
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.refresh?.size ?? dataListUi.controlSize.value
+);
+const resolvedUi = computed(() => ({
+  ...dataListUi.ui.value.refresh?.ui,
+  ...props.ui
+}));
+const buttonProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", icon: "i-lucide-refresh-cw", size: resolvedSize.value, variant: "outline" },
+    dataListUi.ui.value.refresh?.props?.button,
+    props.props?.button
+  )
+);
+function refresh() {
+  void internals.queryContent.refreshData()();
+}
+function finishSpin() {
+  completingSpin.value = false;
+  clearTimeout(completionFallback);
+  completionFallback = void 0;
+}
+function onSpinIteration(event) {
+  if (event.animationName === "nut-dl-refresh-spin" && !loading.value) {
+    finishSpin();
+  }
+}
+watch(
+  loading,
+  (next, previous) => {
+    if (next) {
+      finishSpin();
+      return;
+    }
+    if (!previous || preferredMotion.value === "reduce") {
+      return;
+    }
+    completingSpin.value = true;
+    completionFallback = setTimeout(finishSpin, 750);
+  },
+  { flush: "sync" }
+);
+watch(preferredMotion, (motion) => {
+  if (motion === "reduce") {
+    finishSpin();
+  }
+});
+onBeforeUnmount(() => clearTimeout(completionFallback));
+</script>
+
+<template>
+  <slot
+    :refresh="refresh"
+    :loading="loading"
+    :trigger-props="{ type: 'button', disabled: loading, onClick: refresh }"
+  >
+    <UButton
+      v-bind="buttonProps"
+      :label="label"
+      :square="!label"
+      :aria-label="t('table.header.refreshData')"
+      :title="t('table.header.refreshData')"
+      :aria-busy="loading"
+      :data-refreshing="spinning"
+      :ui="{
+  ...resolvedUi,
+  base: mergeDataListUiClass('nut-dl-refresh', void 0, resolvedUi.base),
+  leadingIcon: mergeDataListUiClass(
+    spinning ? 'nut-dl-refresh__icon--spinning' : 'nut-dl-refresh__icon',
+    void 0,
+    resolvedUi.leadingIcon
+  )
+}"
+      @animationiteration="onSpinIteration"
+      @click="refresh"
+    />
+  </slot>
+</template>
+
+<style>
+.nut-dl-refresh__icon--spinning{animation:nut-dl-refresh-spin .7s linear infinite}@keyframes nut-dl-refresh-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.nut-dl-refresh__icon--spinning{animation:none}}
+</style>

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

@@ -1,8 +1,9 @@
-import type { DataListControlSize, DataListRefreshUi } from '../../types/index.js';
+import type { DataListControlSize, DataListRefreshProps, DataListRefreshUi } from '../../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: DataListControlSize;
     ui?: DataListRefreshUi;
+    props?: DataListRefreshProps;
 };
 declare function refresh(): void;
 declare var __VLS_1: {

package/dist/runtime/table/components/data-list/{DataListResultCount.d.vue.ts → data-list-result-count.d.vue.ts}

@@ -1,5 +1,6 @@
-import type { DataListResultCountUi } from '../../types/index.js';
+import type { DataListControlSize, DataListResultCountUi } from '../../types/index.js';
 type __VLS_Props = {
+    size?: DataListControlSize;
     ui?: DataListResultCountUi;
 };
 declare var __VLS_1: {

package/dist/runtime/table/components/data-list/{DataListResultCount.vue → data-list-result-count.vue}

@@ -3,8 +3,9 @@ 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";
+import { mergeDataListUiClass, resolveDataListControlGeometry } from "../../utils";
 const props = defineProps({
+  size: { type: String, required: false },
   ui: { type: Object, required: false }
 });
 const internals = useTableInternals();
@@ -16,11 +17,17 @@ const formattedCount = computed(
   () => new Intl.NumberFormat(locale.value.code).format(totalCount.value ?? loadedCount.value)
 );
 const rootUi = computed(() => dataListUi.ui.value.resultCount?.ui);
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.resultCount?.size ?? dataListUi.controlSize.value
+);
+const geometry = computed(() => resolveDataListControlGeometry(resolvedSize.value));
 </script>
 
 <template>
   <slot :loaded-count="loadedCount" :total-count="totalCount" :known="totalCount != null">
-    <span :class="mergeDataListUiClass('text-sm text-muted', rootUi?.root, props.ui?.root)">
+    <span
+      :class="mergeDataListUiClass(`${geometry.text} text-muted`, rootUi?.root, props.ui?.root)"
+    >
       {{
         totalCount == null ? t("table.states.loaded", { count: formattedCount }) : formattedCount
       }}

package/dist/runtime/table/components/data-list/{DataListResultCount.vue.d.ts → data-list-result-count.vue.d.ts}

@@ -1,5 +1,6 @@
-import type { DataListResultCountUi } from '../../types/index.js';
+import type { DataListControlSize, DataListResultCountUi } from '../../types/index.js';
 type __VLS_Props = {
+    size?: DataListControlSize;
     ui?: DataListResultCountUi;
 };
 declare var __VLS_1: {

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

@@ -1,17 +1,10 @@
-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;
-};
+import type { DataListControlSize, DataListDensity, DataListTable, DataListUiConfig } from '../../types/index.js';
 type __VLS_Props = {
     table: DataListTable;
     locale?: UiToolsLocale<UiToolsMessages>;
     density?: DataListDensity;
+    size?: DataListControlSize;
     ui?: DataListUiConfig;
 };
 declare var __VLS_1: {

package/dist/runtime/table/components/data-list/{DataListRoot.vue → data-list-root.vue}

@@ -2,6 +2,8 @@
 import { useAppConfig } from "nuxt/app";
 import { computed, onBeforeUnmount, onMounted } from "vue";
 import { provideUiToolsLocale, useUiToolsLocaleRef } from "#ui-tools/i18n";
+import { isObject } from "../../../shared/utils/predicate";
+import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
 import { provideDataListUi } from "../../composables/use-data-list-ui";
 import { provideTableInternals } from "../../composables/use-table-internals";
 import { mergeDataListUiConfig } from "../../utils";
@@ -9,26 +11,45 @@ const props = defineProps({
   table: { type: Object, required: true },
   locale: { type: Object, required: false },
   density: { type: String, required: false },
+  size: { type: String, required: false },
   ui: { type: Object, required: false }
 });
 const appConfig = useAppConfig();
-provideTableInternals(props.table.__internals);
+provideTableInternals(props.table["__internals"]);
 provideUiToolsLocale(useUiToolsLocaleRef(computed(() => props.locale)));
+const { isMobile } = useDataListBreakpoint();
 provideDataListUi(
-  computed(
-    () => mergeDataListUiConfig(resolveAppDataListUi(appConfig), props.ui, props.density)
-  )
+  computed(() => {
+    const merged = mergeDataListUiConfig(
+      resolveAppDataListUi(appConfig),
+      props.ui,
+      props.density,
+      props.size
+    );
+    if (!isMobile.value || !merged.mobile) {
+      return merged;
+    }
+    return mergeDataListUiConfig(
+      merged,
+      merged.mobile,
+      merged.mobile.density,
+      merged.mobile.control?.size
+    );
+  })
 );
-onMounted(() => props.table.__internals.startup.scheduleStart());
-onBeforeUnmount(() => props.table.__internals.startup.dispose());
+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")
+  if (!config.nuxtUiTools || !isObject(config.nuxtUiTools)) {
     return void 0;
-  if (!("dataList" in config.nuxtUiTools)) 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";
+  return isObject(value);
 }
 </script>
 

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

@@ -1,17 +1,10 @@
-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;
-};
+import type { DataListControlSize, DataListDensity, DataListTable, DataListUiConfig } from '../../types/index.js';
 type __VLS_Props = {
     table: DataListTable;
     locale?: UiToolsLocale<UiToolsMessages>;
     density?: DataListDensity;
+    size?: DataListControlSize;
     ui?: DataListUiConfig;
 };
 declare var __VLS_1: {

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

@@ -1,9 +1,10 @@
-import type { DataListControlSize, DataListSearchUi } from '../../types/index.js';
+import type { DataListControlSize, DataListSearchProps, DataListSearchUi } from '../../types/index.js';
 type __VLS_Props = {
     placeholder?: string;
     size?: DataListControlSize;
     width?: string;
     ui?: DataListSearchUi;
+    props?: DataListSearchProps;
 };
 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;

package/dist/runtime/table/components/data-list/{DataListSearch.vue → data-list-search.vue}

@@ -2,12 +2,14 @@
 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";
+import { mergeDataListProps } from "../../utils";
+import SearchQueryInput from "../utils/search-query-input.vue";
 const props = defineProps({
   placeholder: { type: String, required: false },
   size: { type: String, required: false },
   width: { type: String, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
 });
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
@@ -19,6 +21,9 @@ const resolvedUi = computed(() => ({
   ...dataListUi.ui.value.search?.ui,
   ...props.ui
 }));
+const resolvedProps = computed(
+  () => mergeDataListProps(dataListUi.ui.value.search?.props, props.props)
+);
 const loading = computed(
   () => internals.queryContent.status.value.isFetching && !internals.queryContent.status.value.isPending
 );
@@ -31,6 +36,7 @@ const loading = computed(
     :placeholder="placeholder ?? internals.filters.searchPlaceholder.value"
     :size="resolvedSize"
     :ui="resolvedUi"
+    :input-props="resolvedProps.input"
     :style="{ width: resolvedWidth, maxWidth: '100%' }"
   />
 </template>

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

@@ -1,9 +1,10 @@
-import type { DataListControlSize, DataListSearchUi } from '../../types/index.js';
+import type { DataListControlSize, DataListSearchProps, DataListSearchUi } from '../../types/index.js';
 type __VLS_Props = {
     placeholder?: string;
     size?: DataListControlSize;
     width?: string;
     ui?: DataListSearchUi;
+    props?: DataListSearchProps;
 };
 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;

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

@@ -0,0 +1,36 @@
+import type { TableActionController } from '../../composables/use-table-actions.js';
+import type { DataListControlSize, DataListSelectionActionsProps, DataListSelectionActionsUi, GenericObject, TableActionSlotProps, TableApi, TableRuntimeRecord } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    /** `absolute` docks the bar inside the nearest positioned ancestor; `fixed` pins it to the viewport. */
+    position?: 'absolute' | 'fixed';
+    /** Number of actions rendered inline before the overflow menu. */
+    maxVisible?: number;
+    /** Shows the selection / all-results scope switch when the schema allows an `all` scope. */
+    scope?: boolean;
+    ui?: DataListSelectionActionsUi;
+    props?: DataListSelectionActionsProps;
+};
+type TableActionSlot = TableActionSlotProps<GenericObject, TableRuntimeRecord, TableRuntimeRecord>;
+type __VLS_Slots = {
+    default?: (props: {
+        actions: TableActionController[];
+        selectedCount: number;
+        selection: TableApi['selection'];
+        clearSelection: () => void;
+    }) => import('vue').VNodeChild;
+    action?: (props: TableActionSlot) => import('vue').VNodeChild;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    scope: boolean;
+    position: "absolute" | "fixed";
+    maxVisible: number;
+}, {}, {}, {}, 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;
+    };
+};