nuxt-ui-tools 1.0.0 → 1.1.0

package/dist/runtime/table/components/grid/grid-renderer.vue

@@ -79,11 +79,9 @@ const showInitialLoading = computed(
   () => status.value.isBooting || status.value.isPending && tableRows.value.length === 0
 );
 const showRefreshing = computed(
-  () => tableRows.value.length > 0 && (status.value.isFetching || status.value.isRefreshing || status.value.isRevalidating)
-);
-const showError = computed(
-  () => Boolean(internals.queryContent.error.value) && tableRows.value.length === 0
+  () => !internals.queryContent.error.value && tableRows.value.length > 0 && (status.value.isFetching || status.value.isRefreshing || status.value.isRevalidating)
 );
+const showError = computed(() => Boolean(internals.queryContent.error.value));
 const showEmpty = computed(
   () => !showInitialLoading.value && !showError.value && tableRows.value.length === 0
 );

package/dist/runtime/table/components/layout/table-footer.d.vue.ts

@@ -24,7 +24,7 @@ declare var __VLS_1: {
         isLoadingMore: boolean;
         loadMoreError: unknown;
         loadedCount: number;
-        mode: "none" | "offset" | "cursor";
+        mode: "cursor" | "none" | "offset";
         pageCount: number;
         pageIndex: number;
         pageSize: number;

package/dist/runtime/table/components/layout/table-footer.vue.d.ts

@@ -24,7 +24,7 @@ declare var __VLS_1: {
         isLoadingMore: boolean;
         loadMoreError: unknown;
         loadedCount: number;
-        mode: "none" | "offset" | "cursor";
+        mode: "cursor" | "none" | "offset";
         pageCount: number;
         pageIndex: number;
         pageSize: number;

package/dist/runtime/table/components/table/table-cell-ellipsis.d.ts

@@ -26,8 +26,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
     };
 }>> & Readonly<{}>, {
-    title: string;
     disabled: boolean;
+    title: string;
     wrapperClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/table/components/table/table-renderer.d.vue.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     fill?: boolean;
     ui?: DataListTableUi;
 };
+declare function refresh(): void;
 type ColumnSlot = {
     kind: 'column';
     columnId: string;
@@ -25,11 +26,16 @@ declare var __VLS_34: {
         coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
         columnMeta: import("../../utils/index.js").DataListColumnMeta;
     }, object, unknown>[];
-}, __VLS_36: {};
+}, __VLS_36: {
+    error: {};
+    retry: typeof refresh;
+}, __VLS_45: {};
 type __VLS_Slots = {} & {
     footer?: (props: typeof __VLS_34) => any;
 } & {
-    empty?: (props: typeof __VLS_36) => any;
+    error?: (props: typeof __VLS_36) => any;
+} & {
+    empty?: (props: typeof __VLS_45) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     resetColumnSizing: () => void;

package/dist/runtime/table/components/table/table-renderer.vue

@@ -23,6 +23,7 @@ import {
   SELECT_COLUMN_ID,
   SELECT_COLUMN_WIDTH
 } from "../../utils/columns/types";
+import DataListErrorState from "../data-list/data-list-error-state.vue";
 import TableCell from "./table-cell";
 import TableColumnHeader from "./table-column-header.vue";
 import TableEmptyState from "./table-empty-state.vue";
@@ -58,12 +59,16 @@ const { status } = internals.queryContent;
 const rowsMounted = ref(false);
 let rowMountFrame = 0;
 const isFirstLoad = computed(
-  () => status.value.isBooting || status.value.isPending && rows.value.length === 0 || !rowsMounted.value && rows.value.length > 0
+  () => status.value.isBooting || (status.value.isPending || status.value.isFetching) && rows.value.length === 0 || !rowsMounted.value && rows.value.length > 0
 );
 const refreshing = computed(
-  () => rows.value.length > 0 && (status.value.isFetching || status.value.isRefreshing)
+  () => rows.value.length > 0 && (status.value.isFetching || status.value.isRefreshing || status.value.isRevalidating)
 );
-const empty = computed(() => !isFirstLoad.value && rows.value.length === 0);
+const error = computed(() => rows.value.length === 0 ? internals.queryContent.error.value : null);
+const empty = computed(() => !isFirstLoad.value && !error.value && rows.value.length === 0);
+function refresh() {
+  void internals.queryContent.refreshData()();
+}
 const resolvedSize = computed(
   () => props.size ?? dataListUi.ui.value.table?.size ?? dataListUi.controlSize.value
 );
@@ -616,7 +621,7 @@ defineExpose({ resetColumnSizing });
               </th>
             </template>
           </tr>
-          <tr v-if="refreshing" class="nut-dl-progress" aria-hidden="true">
+          <tr class="nut-dl-progress" :data-active="refreshing" aria-hidden="true">
             <th
               :colspan="leafColumns.length"
               class="sticky top-[var(--nut-dl-head-h)] z-[3] h-0 p-0"
@@ -824,7 +829,20 @@ defineExpose({ resetColumnSizing });
         </tfoot>
       </table>
 
-      <div v-if="empty" class="nut-dl-table__empty sticky left-0 w-full">
+      <div
+        v-if="error"
+        class="nut-dl-table__error sticky left-0 w-full"
+        :style="{ height: fill ? 'calc(100% - var(--nut-dl-head-h))' : void 0 }"
+      >
+        <slot name="error" :error="error" :retry="refresh">
+          <DataListErrorState
+            :min-height="fill ? '100%' : '16rem'"
+            :size="resolvedSize"
+            @retry="refresh"
+          />
+        </slot>
+      </div>
+      <div v-else-if="empty" class="nut-dl-table__empty sticky left-0 w-full">
         <slot name="empty">
           <TableEmptyState
             :min-height="fill ? 'calc(100% - var(--nut-dl-head-h))' : '16rem'"
@@ -840,5 +858,5 @@ defineExpose({ resetColumnSizing });
 <style>
 .nut-dl-table{--nut-dl-surface:var(--nut-dl-table-surface,var(--ui-bg-elevated));--nut-dl-line:var(--nut-dl-table-line,var(--ui-border));--nut-dl-line-soft:var(--nut-dl-table-line-soft,var(--ui-border-muted));--nut-dl-head-bg:var(--nut-dl-table-head-bg,var(--ui-bg-muted));--nut-dl-head-fg:var(--nut-dl-table-head-fg,var(--ui-text-muted));--nut-dl-head-font:var(--nut-dl-table-head-font,11px);--nut-dl-head-weight:var(--nut-dl-table-head-weight,600);--nut-dl-head-tracking:var(--nut-dl-table-head-tracking,0.04em);--nut-dl-head-transform:var(--nut-dl-table-head-transform,none);--nut-dl-row-hover:var(--nut-dl-table-row-hover,var(--ui-bg-muted));--nut-dl-row-selected:var(
     --nut-dl-table-row-selected,color-mix(in srgb,var(--ui-primary) 10%,var(--nut-dl-surface))
-  );--nut-dl-accent:var(--ui-primary);--nut-dl-cell-fg:var(--nut-dl-table-cell-fg,var(--ui-text-toned));--nut-dl-pin-line:var(--nut-dl-table-pin-line,var(--nut-dl-line))}.nut-dl-table__scroll{overflow-anchor:none;scrollbar-width:none}.nut-dl-table__scroll::-webkit-scrollbar{display:none}.nut-dl-th{color:var(--nut-dl-head-fg);font-size:var(--nut-dl-head-font);font-weight:var(--nut-dl-head-weight);letter-spacing:var(--nut-dl-head-tracking);text-transform:var(--nut-dl-head-transform);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.nut-dl-table__spacer,.nut-dl-th{border-bottom:1px solid var(--nut-dl-line)}.nut-dl-table__spacer,.nut-dl-tf,.nut-dl-th{background:var(--nut-dl-head-bg);border-top:1px solid var(--nut-dl-line)}.nut-dl-tf{color:var(--ui-text-highlighted);font-weight:var(--nut-dl-table-foot-weight,500);white-space:nowrap}tfoot .nut-dl-table__spacer{border-bottom:0;border-top:1px solid var(--nut-dl-line)}.nut-dl-spinner{animation:nut-dl-spin .8s linear infinite}@keyframes nut-dl-spin{to{transform:rotate(1turn)}}tbody .nut-dl-table__spacer{background:var(--nut-dl-surface);border-bottom:1px solid var(--nut-dl-line-soft)}.nut-dl-th__btn--open{background:color-mix(in srgb,var(--nut-dl-head-fg) 8%,transparent)}.nut-dl-rz:after{background:var(--ui-border-accented);bottom:10px;content:"";opacity:0;position:absolute;right:0;top:10px;transition:opacity .12s;width:1px}.nut-dl-rz:hover:after,.nut-dl-th:hover .nut-dl-rz:after{opacity:1}.nut-dl-rz--active:after,.nut-dl-rz:hover:after{background:var(--nut-dl-accent);bottom:6px;left:2.5px;opacity:1;top:6px;width:2px}.nut-dl-row{background:var(--nut-dl-surface);transition:background-color .1s}.nut-dl-row:hover{background:var(--nut-dl-row-hover)}.nut-dl-row--selected,.nut-dl-row--selected:hover{background:var(--nut-dl-row-selected)}.nut-dl-td,.nut-dl-th__btn,.nut-dl-th__static{padding-left:var(--nut-dl-cell-l,var(--nut-dl-cell-x));padding-right:var(--nut-dl-cell-r,var(--nut-dl-cell-x))}.nut-dl-row>.nut-dl-td:first-child,.nut-dl-table__head-row>.nut-dl-th:first-child{--nut-dl-cell-l:var(--nut-dl-gutter)}.nut-dl-row>.nut-dl-td:last-child,.nut-dl-table__head-row>.nut-dl-th:last-child{--nut-dl-cell-r:var(--nut-dl-gutter)}.nut-dl-row>.nut-dl-td--actions:last-child,.nut-dl-table__head-row>.nut-dl-th--actions:last-child,.nut-dl-td--actions{--nut-dl-cell-l:var(--nut-dl-cell-x);--nut-dl-cell-r:var(--nut-dl-cell-x)}.nut-dl-td--actions .nut-dl-td__inner{justify-content:flex-end}.nut-dl-td{background:inherit;border-bottom:1px solid var(--nut-dl-line-soft);box-sizing:border-box;color:var(--nut-dl-cell-fg);overflow:hidden;overflow-wrap:anywhere;padding-block:var(--nut-dl-cell-y,6px);white-space:normal}.nut-dl-td__inner{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--nut-dl-lines,3);line-clamp:var(--nut-dl-lines,3);max-height:calc(var(--nut-dl-lines, 3)*1.5em);overflow:hidden}.nut-dl-td--ellipsis{--nut-dl-lines:1;white-space:nowrap}.nut-dl-td--ellipsis .nut-dl-td__inner{display:block;text-overflow:ellipsis}.nut-dl-td--actions .nut-dl-td__inner,.nut-dl-td--selection .nut-dl-td__inner{align-items:center;display:flex}.nut-dl-td--actions,.nut-dl-td--selection{white-space:nowrap}.nut-dl-td--actions .nut-dl-td__inner>*{opacity:.55;transition:opacity .12s}.nut-dl-row:hover .nut-dl-td--actions .nut-dl-td__inner>*{opacity:1}.nut-dl-pin{position:sticky}.nut-dl-pin--first-end:before,.nut-dl-pin--last-start:after{background:var(--nut-dl-line);bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:1px}.nut-dl-pin--last-start:after{right:0}.nut-dl-pin--first-end:before{left:0}.nut-dl-pin--first-end:before,.nut-dl-pin--last-start:after{background:var(--nut-dl-pin-line)}.nut-dl-td--actions.nut-dl-pin--first-end:before,.nut-dl-th--actions.nut-dl-pin--first-end:before{display:none}.nut-dl-progress th{overflow:hidden}.nut-dl-progress th span{animation:nut-dl-progress 1s ease-in-out infinite;background:linear-gradient(90deg,transparent,var(--nut-dl-accent),transparent);background-size:40% 100%;height:2px;left:0;position:absolute;right:0}@keyframes nut-dl-progress{0%{background-position:-40% 0}to{background-position:140% 0}}.nut-dl-skeleton{animation:nut-dl-shimmer 1.6s ease-in-out infinite;animation-delay:calc(var(--nut-dl-i, 0)*-90ms);background:linear-gradient(90deg,var(--ui-bg-accented) 0,var(--ui-bg-muted) 45%,var(--ui-bg-accented) 100%);background-size:200% 100%}.nut-dl-row--skeleton{animation:nut-dl-fade-in .2s ease both;animation-delay:calc(var(--nut-dl-i, 0)*18ms)}@keyframes nut-dl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes nut-dl-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.nut-dl-table[data-virtualized=true] .nut-dl-row[style*="--nut-dl-i"]{animation:nut-dl-row-in .22s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--nut-dl-i)*10ms)}@keyframes nut-dl-row-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.nut-dl-row--moving{transition:transform .24s cubic-bezier(.2,.9,.3,1)}.nut-dl-row--settling{transition:opacity .18s ease,transform .24s cubic-bezier(.2,.9,.3,1)}.nut-dl-row--from{opacity:0;transform:translateY(4px)}@media (prefers-reduced-motion:reduce){.nut-dl-row,.nut-dl-row--moving,.nut-dl-row--settling{transition:none}.nut-dl-progress th span,.nut-dl-skeleton,.nut-dl-table[data-virtualized=true] .nut-dl-row[style*="--nut-dl-i"]{animation:none}}
+  );--nut-dl-accent:var(--ui-primary);--nut-dl-cell-fg:var(--nut-dl-table-cell-fg,var(--ui-text-toned));--nut-dl-pin-line:var(--nut-dl-table-pin-line,var(--nut-dl-line))}.nut-dl-table__scroll{overflow-anchor:none;scrollbar-width:none}.nut-dl-table__scroll::-webkit-scrollbar{display:none}.nut-dl-th{color:var(--nut-dl-head-fg);font-size:var(--nut-dl-head-font);font-weight:var(--nut-dl-head-weight);letter-spacing:var(--nut-dl-head-tracking);text-transform:var(--nut-dl-head-transform);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.nut-dl-table__spacer,.nut-dl-th{border-bottom:1px solid var(--nut-dl-line)}.nut-dl-table__spacer,.nut-dl-tf,.nut-dl-th{background:var(--nut-dl-head-bg);border-top:1px solid var(--nut-dl-line)}.nut-dl-tf{color:var(--ui-text-highlighted);font-weight:var(--nut-dl-table-foot-weight,500);white-space:nowrap}tfoot .nut-dl-table__spacer{border-bottom:0;border-top:1px solid var(--nut-dl-line)}.nut-dl-spinner{animation:nut-dl-spin .8s linear infinite}@keyframes nut-dl-spin{to{transform:rotate(1turn)}}tbody .nut-dl-table__spacer{background:var(--nut-dl-surface);border-bottom:1px solid var(--nut-dl-line-soft)}.nut-dl-th__btn--open{background:color-mix(in srgb,var(--nut-dl-head-fg) 8%,transparent)}.nut-dl-rz:after{background:var(--ui-border-accented);bottom:10px;content:"";opacity:0;position:absolute;right:0;top:10px;transition:opacity .12s;width:1px}.nut-dl-rz:hover:after,.nut-dl-th:hover .nut-dl-rz:after{opacity:1}.nut-dl-rz--active:after,.nut-dl-rz:hover:after{background:var(--nut-dl-accent);bottom:6px;left:2.5px;opacity:1;top:6px;width:2px}.nut-dl-row{background:var(--nut-dl-surface);transition:background-color .1s}.nut-dl-row:hover{background:var(--nut-dl-row-hover)}.nut-dl-row--selected,.nut-dl-row--selected:hover{background:var(--nut-dl-row-selected)}.nut-dl-td,.nut-dl-th__btn,.nut-dl-th__static{padding-left:var(--nut-dl-cell-l,var(--nut-dl-cell-x));padding-right:var(--nut-dl-cell-r,var(--nut-dl-cell-x))}.nut-dl-row>.nut-dl-td:first-child,.nut-dl-table__head-row>.nut-dl-th:first-child{--nut-dl-cell-l:var(--nut-dl-gutter)}.nut-dl-row>.nut-dl-td:last-child,.nut-dl-table__head-row>.nut-dl-th:last-child{--nut-dl-cell-r:var(--nut-dl-gutter)}.nut-dl-row>.nut-dl-td--actions:last-child,.nut-dl-table__head-row>.nut-dl-th--actions:last-child,.nut-dl-td--actions{--nut-dl-cell-l:var(--nut-dl-cell-x);--nut-dl-cell-r:var(--nut-dl-cell-x)}.nut-dl-td--actions .nut-dl-td__inner{justify-content:flex-end}.nut-dl-td{background:inherit;border-bottom:1px solid var(--nut-dl-line-soft);box-sizing:border-box;color:var(--nut-dl-cell-fg);overflow:hidden;overflow-wrap:anywhere;padding-block:var(--nut-dl-cell-y,6px);white-space:normal}.nut-dl-td__inner{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--nut-dl-lines,3);line-clamp:var(--nut-dl-lines,3);max-height:calc(var(--nut-dl-lines, 3)*1.5em);overflow:hidden}.nut-dl-td--ellipsis{--nut-dl-lines:1;white-space:nowrap}.nut-dl-td--ellipsis .nut-dl-td__inner{display:block;text-overflow:ellipsis}.nut-dl-td--actions .nut-dl-td__inner,.nut-dl-td--selection .nut-dl-td__inner{align-items:center;display:flex}.nut-dl-td--actions,.nut-dl-td--selection{white-space:nowrap}.nut-dl-td--actions .nut-dl-td__inner>*{opacity:.55;transition:opacity .12s}.nut-dl-row:hover .nut-dl-td--actions .nut-dl-td__inner>*{opacity:1}.nut-dl-pin{position:sticky}.nut-dl-pin--first-end:before,.nut-dl-pin--last-start:after{background:var(--nut-dl-line);bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:1px}.nut-dl-pin--last-start:after{right:0}.nut-dl-pin--first-end:before{left:0}.nut-dl-pin--first-end:before,.nut-dl-pin--last-start:after{background:var(--nut-dl-pin-line)}.nut-dl-td--actions.nut-dl-pin--first-end:before,.nut-dl-th--actions.nut-dl-pin--first-end:before{display:none}.nut-dl-progress th{overflow:hidden}.nut-dl-progress th span{animation:nut-dl-progress 1s ease-in-out infinite paused;background:linear-gradient(90deg,transparent,var(--nut-dl-accent),transparent);background-size:40% 100%;height:2px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .12s ease-out}.nut-dl-progress[data-active=true] th span{animation-play-state:running;opacity:1}@keyframes nut-dl-progress{0%{background-position:-40% 0}to{background-position:140% 0}}.nut-dl-skeleton{animation:nut-dl-shimmer 1.6s ease-in-out infinite;animation-delay:calc(var(--nut-dl-i, 0)*-90ms);background:linear-gradient(90deg,var(--ui-bg-accented) 0,var(--ui-bg-muted) 45%,var(--ui-bg-accented) 100%);background-size:200% 100%}.nut-dl-row--skeleton{animation:nut-dl-fade-in .2s ease both;animation-delay:calc(var(--nut-dl-i, 0)*18ms)}@keyframes nut-dl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes nut-dl-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.nut-dl-table[data-virtualized=true] .nut-dl-row[style*="--nut-dl-i"]{animation:nut-dl-row-in .22s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--nut-dl-i)*10ms)}@keyframes nut-dl-row-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.nut-dl-row--moving{transition:transform .24s cubic-bezier(.2,.9,.3,1)}.nut-dl-row--settling{transition:opacity .18s ease,transform .24s cubic-bezier(.2,.9,.3,1)}.nut-dl-row--from{opacity:0;transform:translateY(4px)}@media (prefers-reduced-motion:reduce){.nut-dl-row,.nut-dl-row--moving,.nut-dl-row--settling{transition:none}.nut-dl-progress th span,.nut-dl-skeleton,.nut-dl-table[data-virtualized=true] .nut-dl-row[style*="--nut-dl-i"]{animation:none}}
 </style>

package/dist/runtime/table/components/table/table-renderer.vue.d.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     fill?: boolean;
     ui?: DataListTableUi;
 };
+declare function refresh(): void;
 type ColumnSlot = {
     kind: 'column';
     columnId: string;
@@ -25,11 +26,16 @@ declare var __VLS_34: {
         coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
         columnMeta: import("../../utils/index.js").DataListColumnMeta;
     }, object, unknown>[];
-}, __VLS_36: {};
+}, __VLS_36: {
+    error: {};
+    retry: typeof refresh;
+}, __VLS_45: {};
 type __VLS_Slots = {} & {
     footer?: (props: typeof __VLS_34) => any;
 } & {
-    empty?: (props: typeof __VLS_36) => any;
+    error?: (props: typeof __VLS_36) => any;
+} & {
+    empty?: (props: typeof __VLS_45) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     resetColumnSizing: () => void;

package/dist/runtime/table/composables/use-option-filter-editor-state.d.ts

@@ -49,6 +49,7 @@ export declare function useOptionFilterEditorState(options: UseOptionFilterEdito
         isStaleLoading: ComputedRef<boolean>;
         refresh: () => Promise<[import("@tanstack/vue-query").QueryObserverResult<TableFilterOptionEntry[] | import("../types/index.js").TableFilterOptionQueryResult, Error>, import("@tanstack/vue-query").QueryObserverResult<import("../types/index.js").TableFacetExecutionResult<string, unknown>, Error>]>;
         searchExpandedIds: ComputedRef<string[]>;
+        showCounts: ComputedRef<boolean>;
         sourceEntries: ComputedRef<(TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue> & {
             value: string | number | boolean;
         })[]>;

package/dist/runtime/table/composables/use-option-filter-editor-state.js

@@ -111,7 +111,7 @@ export function useOptionFilterEditorState(options) {
   const flatRadioItems = computed(
     () => displayEntries.value.map((entry) => ({
       color: entry.color,
-      count: filterUi.value.row.showCounts ? entry.count : void 0,
+      count: optionSource.showCounts.value ? entry.count ?? 0 : void 0,
       icon: entry.icon,
       label: entry.label,
       truncate: filterUi.value.row.truncate,
@@ -134,7 +134,7 @@ export function useOptionFilterEditorState(options) {
   const treeRadioItems = computed(
     () => visibleTreeEntries.value.map((entry) => ({
       color: entry.color,
-      count: filterUi.value.row.showCounts ? entry.count : void 0,
+      count: optionSource.showCounts.value ? entry.count ?? 0 : void 0,
       depth: entry.depth,
       disabled: !entry.selectable,
       expandable: entry.expandable,

package/dist/runtime/table/composables/use-query-state.d.ts

@@ -19,7 +19,7 @@ export declare function useQueryState(params: UseQueryStateParams): {
         readonly pageSize?: undefined;
         readonly pageIndex?: undefined;
     } | {
-        readonly count: "exact" | "none";
+        readonly count: "none" | "exact";
         readonly cursor: null;
         readonly mode: "cursor";
         readonly pageSize: number;
@@ -31,7 +31,7 @@ export declare function useQueryState(params: UseQueryStateParams): {
         readonly pageSize: number;
         readonly cursor?: undefined;
     }>;
-    paginationMode: "none" | "offset" | "cursor";
+    paginationMode: "cursor" | "none" | "offset";
     paginationRevision: import("vue").Ref<number, number>;
     resetPagination: () => void;
     setOffsetPagination: (value: {
@@ -39,7 +39,7 @@ export declare function useQueryState(params: UseQueryStateParams): {
         pageSize: number;
     }) => void;
     sorting: import("vue").WritableComputedRef<{
-        dir: "desc" | "asc";
+        dir: "asc" | "desc";
         key: string;
     } | null, {
         key: string;

package/dist/runtime/table/composables/use-table-actions.js

@@ -23,10 +23,7 @@ export function useTableActions(options) {
     context: toPlainRecord(options.queryContent.contextData.value),
     matchingCount: options.queryContent.data.value.rowCount ?? null,
     pageContext: toPlainRecord(options.queryContent.pageContextData.value),
-    request: {
-      ...options.queryContent.requestContext.value,
-      context: toPlainRecord(options.queryContent.requestContext.value.context)
-    },
+    request: options.queryContent.sourceRequest.value,
     scope: options.selection.bulkScope.value,
     selectedRows: options.selection.selectedRows.value
   }));
@@ -54,9 +51,17 @@ export function useTableActions(options) {
     if (!definition.action) {
       return;
     }
+    const actionContext = context.value;
     runningKeys.value = [...runningKeys.value, definition.key];
+    const selectionClear = "selectionClear" in definition ? definition.selectionClear ?? "never" : "never";
+    if (selectionClear === "trigger") {
+      selectionApi.clear();
+    }
     try {
-      await definition.action(context.value);
+      await definition.action(actionContext);
+      if (selectionClear === "success") {
+        selectionApi.clear();
+      }
     } finally {
       runningKeys.value = runningKeys.value.filter((key) => key !== definition.key);
     }

package/dist/runtime/table/composables/use-table-api.js

@@ -43,7 +43,10 @@ export function useTableApi(params) {
     }
   };
   const layoutApi = {
-    set: params.controls.setTableLayout,
+    set(layout) {
+      params.controls.setTableLayout(layout);
+      params.columns.setSorting(getDefaultSort({ layout, schema: params.runtimeSchema.value }));
+    },
     state: params.controls.layoutState
   };
   const filters = {

package/dist/runtime/table/composables/use-table-columns.d.ts

@@ -7,10 +7,10 @@ export declare function useTableColumns(params: UseTableColumnsParams): {
     }) => import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[][];
     getPinnedState: (options: {
         columnId: string;
-    }) => "right" | "left" | null;
+    }) => "left" | "right" | null;
     getSortState: (options: {
         columnId: string;
-    }) => "desc" | "asc" | null;
+    }) => "asc" | "desc" | null;
     orderedColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
     reset: () => void;
     runtimeColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
@@ -34,7 +34,7 @@ export declare function useTableColumns(params: UseTableColumnsParams): {
     sortKeys: import("vue").ComputedRef<string[]>;
     sortingState: import("vue").ComputedRef<{
         active: boolean;
-        dir: "desc" | "asc" | undefined;
+        dir: "asc" | "desc" | undefined;
         key: string | undefined;
     }>;
     tableColumns: import("vue").ComputedRef<({
@@ -74,7 +74,9 @@ export declare function useTableColumns(params: UseTableColumnsParams): {
                 original: import("../types/index.js").GenericObject;
                 index: number;
             };
-        }) => import("vue/jsx-runtime").JSX.Element;
+        }) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>;
         enableHiding: boolean;
         enablePinning: boolean;
         enableResizing: boolean;
@@ -107,7 +109,9 @@ export declare function useTableColumns(params: UseTableColumnsParams): {
                 original: import("../types/index.js").GenericObject;
                 index: number;
             };
-        }) => import("vue/jsx-runtime").JSX.Element;
+        }) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>;
         enableHiding: boolean;
         enablePinning: boolean;
         enableResizing: boolean;

package/dist/runtime/table/composables/use-table-data.d.ts

@@ -1,6 +1,6 @@
 import { useInfiniteQuery, useQueries, useQuery } from '@tanstack/vue-query';
 import type { ComputedRef } from 'vue';
-import type { GenericObject, TableExternalState, TableFacetExecutionResult, TableSchemaView, TableSourceRequestContext, TableRefreshResult, TableRuntimeRecord } from '../types/index.js';
+import type { GenericObject, TableExternalState, TableFacetExecutionResult, TableRemoteSourceRequest, TableSchemaView, TableSourceRequestContext, TableRefreshResult, TableRuntimeRecord } from '../types/index.js';
 import type { UseTableStartupReturn } from './use-table-startup.js';
 import type { useTableState } from './use-table-state.js';
 export interface UseTableDataParams {
@@ -19,6 +19,7 @@ export interface UseTableDataReturn {
         context: TableRuntimeRecord;
     }>;
     requestContext: ComputedRef<TableSourceRequestContext>;
+    sourceRequest: ComputedRef<TableRemoteSourceRequest>;
     searchParams: ComputedRef<TableSourceRequestContext>;
     query: ReturnType<typeof useQuery>;
     infiniteQuery: ReturnType<typeof useInfiniteQuery>;

package/dist/runtime/table/composables/use-table-data.js

@@ -11,7 +11,8 @@ import {
   isTableCursorPageResult,
   paginateClientRows,
   resolveTableRowId,
-  sortClientRows
+  sortClientRows,
+  toTableRemoteSourceRequest
 } from "../utils/index.js";
 export function useTableData(params) {
   const contextItems = computed(
@@ -79,6 +80,7 @@ export function useTableData(params) {
     search: requestSearch.value,
     sorting: requestSorting.value
   }));
+  const sourceRequest = computed(() => toTableRemoteSourceRequest(requestContext.value));
   const searchParams = requestContext;
   const dataStaleTime = computed(() => QUERY_DEFAULTS.staleTime.data);
   const isCursorPagination = computed(() => requestPagination.value.mode === "cursor");
@@ -87,6 +89,7 @@ export function useTableData(params) {
       const definition = resolveSourceDefinition({
         context: contextData.value,
         request: requestContext.value,
+        sourceRequest: sourceRequest.value,
         source: params.schema.value.source
       });
       if (isCursorPagination.value) {
@@ -108,6 +111,7 @@ export function useTableData(params) {
         createCursorQueryDefinition({
           context: contextData.value,
           request: requestContext.value,
+          sourceRequest: sourceRequest.value,
           revision: params.state.queryState.paginationRevision.value,
           source: params.schema.value.source
         }),
@@ -351,6 +355,9 @@ export function useTableData(params) {
   watch(
     () => query.data.value,
     (nextQueryData) => {
+      if (nextQueryData === void 0 && query.isError.value) {
+        return;
+      }
       const normalized = normalizeExternalState(nextQueryData);
       if (sameExternalState(rawDataState.value, normalized)) {
         return;
@@ -448,6 +455,7 @@ export function useTableData(params) {
     refreshData,
     refreshPageContext,
     requestContext,
+    sourceRequest,
     searchParams,
     selectableRows,
     status,
@@ -558,7 +566,7 @@ function isRemoteFacetQuery(value) {
   return isFunction(value);
 }
 function resolveSourceDefinition(options) {
-  return options.source.query({ ...options.request, context: options.context });
+  return options.source.mode === "remote" ? options.source.query(options.sourceRequest, options.context) : options.source.query({ ...options.request, context: options.context });
 }
 function createCursorQueryDefinition(options) {
   const firstPageDefinition = resolveSourceDefinition(options);
@@ -583,6 +591,15 @@ function createCursorQueryDefinition(options) {
             mode: "cursor",
             pageSize: pagination.pageSize
           }
+        },
+        sourceRequest: {
+          ...options.sourceRequest,
+          pagination: {
+            count: pagination.count,
+            cursor: queryContext.pageParam,
+            mode: "cursor",
+            pageSize: pagination.pageSize
+          }
         }
       });
       if (!definition.queryFn) {

package/dist/runtime/table/composables/use-table-filter-options.d.ts

@@ -24,6 +24,7 @@ export declare function useTableFilterOptions(options: UseTableFilterOptionsPara
     isStaleLoading: ComputedRef<boolean>;
     refresh: () => Promise<[import("@tanstack/vue-query").QueryObserverResult<TableFilterOptionEntry[] | TableFilterOptionQueryResult, Error>, import("@tanstack/vue-query").QueryObserverResult<TableFacetExecutionResult<string, unknown>, Error>]>;
     searchExpandedIds: ComputedRef<string[]>;
+    showCounts: ComputedRef<boolean>;
     sourceEntries: ComputedRef<(TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue> & {
         value: string | number | boolean;
     })[]>;

package/dist/runtime/table/composables/use-table-filter-options.js

@@ -184,7 +184,7 @@ export function useTableFilterOptions(options) {
     () => resolveFilterOptionEntries({
       definition: options.definition,
       deriveCounts: false,
-      facetCounts: shouldResolveCounts.value ? resolvedFacetCounts.value : [],
+      facetCounts: resolvedFacetCounts.value,
       missingCountFallback: shouldResolveCounts.value && usesFacetCounts.value ? 0 : void 0,
       options: hasRemoteOptionQuery.value ? remoteEntries.value : staticEntries.value,
       rows: [],
@@ -253,6 +253,7 @@ export function useTableFilterOptions(options) {
     isStaleLoading,
     refresh: () => Promise.all([optionQuery.refetch(), perFilterFacetQuery.refetch()]),
     searchExpandedIds: computed(() => filteredTreeState.value.expandedIds),
+    showCounts: computed(() => shouldDeriveCounts.value && usesFacetCounts.value),
     sourceEntries: selectableSourceEntries,
     sourceTreeEntries: resolvedSourceTreeEntries
   };