nuxt-ui-tools 1.0.0 → 1.0.1

package/dist/runtime/table/components/filters/shared/filter-popover-shell.d.vue.ts

@@ -4,13 +4,13 @@ type __VLS_Props = {
     contentClass?: string;
     transitioning?: boolean;
 };
-declare var __VLS_1: {}, __VLS_12: {}, __VLS_15: {};
+declare var __VLS_1: {}, __VLS_11: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
     content?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_11) => any;
 } & {
-    content?: (props: typeof __VLS_15) => any;
+    content?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     updateOpen: (value: boolean) => any;

package/dist/runtime/table/components/filters/shared/filter-popover-shell.vue

@@ -20,24 +20,26 @@ function handleFocusOutside(event) {
 </script>
 
 <template>
-  <template v-if="embedded">
-    <slot name="content" />
-  </template>
-  <UPopover
-    v-else
-    :open="open"
-    :content="{
+  <div class="contents">
+    <template v-if="embedded">
+      <slot name="content" />
+    </template>
+    <UPopover
+      v-else
+      :open="open"
+      :content="{
   side: 'bottom',
   align: 'start',
   sideOffset: 8,
   onFocusOutside: handleFocusOutside
 }"
-    :ui="{ content: resolvedContentClass }"
-    @update:open="emit('updateOpen', $event)"
-  >
-    <slot />
-    <template #content>
-      <slot name="content" />
-    </template>
-  </UPopover>
+      :ui="{ content: resolvedContentClass }"
+      @update:open="emit('updateOpen', $event)"
+    >
+      <slot />
+      <template #content>
+        <slot name="content" />
+      </template>
+    </UPopover>
+  </div>
 </template>

package/dist/runtime/table/components/filters/shared/filter-popover-shell.vue.d.ts

@@ -4,13 +4,13 @@ type __VLS_Props = {
     contentClass?: string;
     transitioning?: boolean;
 };
-declare var __VLS_1: {}, __VLS_12: {}, __VLS_15: {};
+declare var __VLS_1: {}, __VLS_11: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
     content?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_11) => any;
 } & {
-    content?: (props: typeof __VLS_15) => any;
+    content?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     updateOpen: (value: boolean) => any;

package/dist/runtime/table/components/filters/shared/filter-searchable-panel.vue

@@ -51,7 +51,10 @@ const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size));
         variant="none"
         :autofocus="autofocus"
         :size="size"
-        :ui="{ root: ui?.search, base: ui?.searchInput }"
+        :ui="{
+  root: ui?.search,
+  base: mergeDataListUiClass('h-8', void 0, ui?.searchInput)
+}"
       />
     </div>
 
@@ -78,7 +81,12 @@ const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size));
 "
       >
         <slot name="empty">
-          {{ emptyLabel }}
+          <div class="grid justify-items-center gap-2">
+            <span class="flex size-8 items-center justify-center rounded-full bg-elevated">
+              <span class="i-lucide-search-x size-4" aria-hidden="true" />
+            </span>
+            <span>{{ emptyLabel }}</span>
+          </div>
         </slot>
       </div>
     </UScrollArea>

package/dist/runtime/table/components/filters/sheet/filter-sheet.vue

@@ -98,14 +98,15 @@ function clearAll() {
   >
     <UButton
       v-bind="triggerProps"
+      :aria-label="t('table.filters.panel.trigger')"
+      :title="t('table.filters.panel.trigger')"
+      :square="!activeCount"
       :ui="{
   base: mergeDataListUiClass('nut-dl-sheet-trigger shrink-0', void 0, ui?.sheetTrigger)
 }"
     >
-      <span class="flex items-center gap-2">
-        <span>{{ t("table.filters.panel.trigger") }}</span>
+      <span v-if="activeCount" class="flex items-center">
         <UBadge
-          v-if="activeCount"
           color="neutral"
           variant="solid"
           size="xs"

package/dist/runtime/table/components/filters/tags/filter-tags-bar.vue

@@ -38,7 +38,7 @@ function getFilterLabel(definition) {
     tag="div"
     :class="
   mergeDataListUiClass(
-    'nut-dl-tags relative flex min-w-0 flex-wrap items-center gap-2',
+    'nut-dl-tags contents',
     void 0,
     dataListUi.ui.value.filterTags?.ui?.root
   )

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/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-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

@@ -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
   };

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

@@ -461,7 +461,9 @@ declare function createTableInternals<TSchema>(options: {
                     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;
@@ -494,7 +496,9 @@ declare function createTableInternals<TSchema>(options: {
                     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;
@@ -1048,7 +1052,9 @@ declare function useProvideTableInternals<TSchema>(options: {
                     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;
@@ -1081,7 +1087,9 @@ declare function useProvideTableInternals<TSchema>(options: {
                     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;
@@ -1632,7 +1640,9 @@ declare function useTableInternals(): {
                     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;
@@ -1665,7 +1675,9 @@ declare function useTableInternals(): {
                     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/types/actions.d.ts

@@ -1,5 +1,5 @@
 import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue';
-import type { TableSourceRequestContext } from './source.js';
+import type { TableRemoteSourceRequest } from './source.js';
 import type { TableApi } from './table-api.js';
 import type { GenericObject, MaybePromise, TableLayout, TableRowRenderParams, TableTextValue } from './utils.js';
 export interface TableActionContext<TRow extends GenericObject = GenericObject, TContext extends GenericObject = GenericObject, TPageContext extends GenericObject = GenericObject> {
@@ -10,7 +10,7 @@ export interface TableActionContext<TRow extends GenericObject = GenericObject,
     matchingCount: number | null;
     context: TContext;
     pageContext: TPageContext;
-    request: TableSourceRequestContext<TRow, TContext>;
+    request: TableRemoteSourceRequest<TRow>;
 }
 export interface TableToolbarAction<TRow extends GenericObject = GenericObject, TContext extends GenericObject = GenericObject, TPageContext extends GenericObject = GenericObject> extends Omit<DropdownMenuItem, 'children' | 'disabled' | 'loading' | 'label' | 'onSelect'> {
     key: string;
@@ -22,6 +22,7 @@ export interface TableToolbarAction<TRow extends GenericObject = GenericObject,
 }
 export interface TableBulkAction<TRow extends GenericObject = GenericObject, TContext extends GenericObject = GenericObject, TPageContext extends GenericObject = GenericObject> extends TableToolbarAction<TRow, TContext, TPageContext> {
     requiresSelection?: boolean;
+    selectionClear?: 'trigger' | 'success' | 'never';
 }
 /** Runtime state exposed for a configured toolbar or bulk action. */
 export interface TableActionState {

package/dist/runtime/table/types/data-list.d.ts

@@ -4,7 +4,15 @@ import type { CheckboxProps } from '@nuxt/ui/components/Checkbox.vue';
 import type { InputProps } from '@nuxt/ui/components/Input.vue';
 import type { PaginationProps } from '@nuxt/ui/components/Pagination.vue';
 import type { SelectProps } from '@nuxt/ui/components/Select.vue';
+import type { ComputedRef } from 'vue';
+import type { TableInternals } from '../composables/use-table-internals.js';
 import type { TableLayout } from './utils.js';
+export interface DataListTable {
+    schema: ComputedRef<{
+        tableKey: string;
+    }>;
+    __internals: TableInternals;
+}
 export type DataListDensity = 'compact' | 'default' | 'comfortable';
 export type DataListControlSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /** Controls whether a granular content part owns its table boundary. */