nuxt-ui-tools 1.23.0 → 1.25.0

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

@@ -0,0 +1,10 @@
+import type { DataListSelectionActionsProps, DataListSelectionActionsUi } from '../../types/index.js';
+type __VLS_Props = {
+    /** Shows the selection / all-results scope switch at the top of the sheet. */
+    scope: boolean;
+    ui: DataListSelectionActionsUi;
+    controls: DataListSelectionActionsProps;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -11,6 +11,7 @@ import { mergeDataListUiClass, resolveTableRowId } from "../../utils";
 import DataListErrorState from "../data-list/data-list-error-state.vue";
 import ProgressLine from "../layout/progress-line.vue";
 import TableEmptyState from "../table/table-empty-state.vue";
+import OverlayInsetSpacer from "../utils/overlay-inset-spacer.vue";
 import GridCard from "./grid-card.vue";
 import GridSkeleton from "./grid-skeleton.vue";
 const props = defineProps({
@@ -283,6 +284,7 @@ function refreshData() {
           <GridCard :row-index="index" />
         </div>
       </div>
+      <OverlayInsetSpacer />
     </div>
 
     <div

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

@@ -19,6 +19,7 @@ import DataListErrorState from "../data-list/data-list-error-state.vue";
 import ProgressLine from "../layout/progress-line.vue";
 import TableEmptyState from "../table/table-empty-state.vue";
 import TableSelectionControl from "../table/table-selection-control.vue";
+import OverlayInsetSpacer from "../utils/overlay-inset-spacer.vue";
 import SummaryRow from "./summary-row.vue";
 const props = defineProps({
   height: { type: String, required: false },
@@ -265,6 +266,7 @@ watch(
           <span>{{ t("table.controls.loadingMore") }}</span>
         </li>
       </ul>
+      <OverlayInsetSpacer />
     </div>
 
     <ProgressLine

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

@@ -23,6 +23,7 @@ import {
 } from "../../utils/tree";
 import DataListErrorState from "../data-list/data-list-error-state.vue";
 import ProgressLine from "../layout/progress-line.vue";
+import OverlayInsetSpacer from "../utils/overlay-inset-spacer.vue";
 import TableCell from "./table-cell";
 import TableColumnHeader from "./table-column-header.vue";
 import TableEmptyState from "./table-empty-state.vue";
@@ -921,6 +922,7 @@ defineExpose({ resetColumnSizing });
           />
         </slot>
       </div>
+      <OverlayInsetSpacer />
     </div>
     <ProgressLine
       :active="refreshing"

package/dist/runtime/table/components/utils/overlay-inset-spacer.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/utils/overlay-inset-spacer.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { useDataListOverlayInset } from "../../composables/use-data-list-overlay-inset";
+const inset = useDataListOverlayInset();
+</script>
+
+<template>
+  <div
+    v-if="inset?.bottom.value"
+    class="nut-dl-overlay-inset shrink-0"
+    aria-hidden="true"
+    :style="{ height: `${inset.bottom.value}px` }"
+  />
+</template>

package/dist/runtime/table/components/utils/overlay-inset-spacer.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,10 @@
+/**
+ * Shares the height a floating part, such as the mobile selection bar, covers at the bottom of the
+ * list, so the scroll areas can end with as much room and their last row scrolls above it.
+ */
+export declare function provideDataListOverlayInset(): {
+    bottom: import("vue").Ref<number, number>;
+};
+export declare function useDataListOverlayInset(): {
+    bottom: import("vue").Ref<number, number>;
+} | undefined;

package/dist/runtime/table/composables/use-data-list-overlay-inset.js

@@ -0,0 +1,11 @@
+import { createInjectionState } from "@vueuse/core";
+import { ref } from "vue";
+const [provideDataListOverlayInsetState, useInjectedDataListOverlayInset] = createInjectionState(
+  () => ({ bottom: ref(0) })
+);
+export function provideDataListOverlayInset() {
+  return provideDataListOverlayInsetState();
+}
+export function useDataListOverlayInset() {
+  return useInjectedDataListOverlayInset();
+}

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

@@ -1,7 +1,7 @@
 import { computed, ref } from "vue";
 import { isRecord } from "../../shared/utils/path.js";
 import { isFunction } from "../../shared/utils/predicate.js";
-import { resolveTableActionDefinitions } from "../utils/actions.js";
+import { resolveTableActionDefinitions, resolveTableActionLabel } from "../utils/actions.js";
 export function useTableActions(options) {
   const runningKeys = ref([]);
   const tableApi = options.tableApi.value;
@@ -37,12 +37,15 @@ export function useTableActions(options) {
     const disabled = resolveFlag(definition.disabled, actionContext);
     const loading = resolveFlag(definition.loading, actionContext);
     const requiresSelection = "requiresSelection" in definition && definition.requiresSelection;
-    return {
+    const state = {
       disabled: disabled || Boolean(requiresSelection && !actionContext.selectedRows.length),
       loading,
       running: isRunning(definition.key),
       visible: condition
     };
+    const reason = disabled ? resolveReason(definition.disabledReason, actionContext) : void 0;
+    if (reason) state.disabledReason = reason;
+    return state;
   }
   async function execute(definition) {
     const state = resolveState(definition);
@@ -110,6 +113,12 @@ export function useTableActions(options) {
 function resolveCondition(value, context) {
   return isBooleanResolver(value) ? value(context) : value ?? true;
 }
+function resolveReason(value, context) {
+  return resolveTableActionLabel(isReasonResolver(value) ? value(context) : value);
+}
+function isReasonResolver(value) {
+  return isFunction(value);
+}
 function resolveFlag(value, context) {
   return isBooleanResolver(value) ? value(context) : value ?? false;
 }

package/dist/runtime/table/constants/mobile.d.ts

@@ -52,13 +52,6 @@ export declare const DATA_LIST_MOBILE_DEFAULTS: {
             readonly clear: "min-h-11 min-w-11";
         };
     };
-    readonly selectionActions: {
-        readonly ui: {
-            readonly action: "h-11 min-w-11";
-            readonly dismiss: "size-11";
-            readonly overflow: "size-11";
-        };
-    };
     readonly sortMenu: {
         readonly ui: {
             readonly trigger: "min-h-11 min-w-11";

package/dist/runtime/table/constants/mobile.js

@@ -10,7 +10,6 @@ export const DATA_LIST_MOBILE_DEFAULTS = {
   pagination: { ui: { button: TOUCH_TARGET } },
   refresh: { ui: { base: TOUCH_TARGET } },
   search: { ui: { base: "min-h-11", clear: TOUCH_TARGET } },
-  selectionActions: { ui: { action: "h-11 min-w-11", dismiss: "size-11", overflow: "size-11" } },
   sortMenu: { ui: { trigger: TOUCH_TARGET } },
   table: { ui: { emptyAction: TOUCH_TARGET, rowAction: TOUCH_TARGET, selectControl: TOUCH_AREA } },
   viewToggle: { ui: { base: TOUCH_TARGET } }

package/dist/runtime/table/types/actions.d.ts

@@ -17,6 +17,11 @@ export interface TableToolbarAction<TRow extends GenericObject = GenericObject,
     label?: TableTextValue;
     condition?: boolean | ((context: TContext) => boolean);
     disabled?: boolean | ((context: TableActionContext<TRow, TContext, TPageContext>) => boolean);
+    /**
+     * Why the action is disabled. The mobile actions sheet shows it under the label while the action
+     * is disabled, in place of `description`.
+     */
+    disabledReason?: TableTextValue | ((context: TableActionContext<TRow, TContext, TPageContext>) => TableTextValue | undefined);
     loading?: boolean | ((context: TableActionContext<TRow, TContext, TPageContext>) => boolean);
     /**
      * Runs the action. Returning `false` or `{ success: false }` marks the run as failed without
@@ -34,6 +39,8 @@ export interface TableBulkAction<TRow extends GenericObject = GenericObject, TCo
 export interface TableActionState {
     visible: boolean;
     disabled: boolean;
+    /** The resolved `disabledReason` while the action is disabled. */
+    disabledReason?: string;
     loading: boolean;
     running: boolean;
 }

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

@@ -421,6 +421,8 @@ export interface DataListSelectionActionsProps {
     overflow?: DataListButtonProps;
     dismiss?: DataListButtonProps;
     scope?: DataListButtonProps;
+    /** The « Actions » button that opens the actions sheet below `md`. */
+    trigger?: DataListButtonProps;
 }
 /** Component props exposed by the refresh control. */
 export interface DataListRefreshProps {
@@ -499,7 +501,10 @@ export interface DataListTableConfig extends DataListPartConfig<DataListTableUi,
     /** Horizontal padding of the first and last cells, in px; defaults to the cell padding. */
     gutter?: number;
 }
-/** UI slots rendered by the floating selection bar. */
+/**
+ * UI slots rendered by the floating selection bar. Below `md` the bar keeps `root`, `bar`, `count`
+ * and `dismiss`, opens its actions in a sheet from `trigger`, and styles the sheet with `sheet`.
+ */
 export interface DataListSelectionActionsUi {
     root?: DataListUiClass;
     bar?: DataListUiClass;
@@ -509,4 +514,6 @@ export interface DataListSelectionActionsUi {
     action?: DataListUiClass;
     overflow?: DataListUiClass;
     dismiss?: DataListUiClass;
+    trigger?: DataListUiClass;
+    sheet?: DataListUiClass;
 }

package/dist/runtime/table/utils/data-list-ui.d.ts

@@ -122,6 +122,6 @@ export declare function resolveDataListTableDensity(density: DataListDensity): {
 export declare function resolveDataListContentShellClass(options: {
     layout: 'table' | 'grid';
     surface: DataListContentSurface;
-}): "grid gap-5" | "overflow-hidden" | "grid gap-5 overflow-hidden rounded-md border border-default bg-default" | "overflow-hidden rounded-md border border-default bg-default";
+}): "overflow-hidden" | "grid gap-5" | "grid gap-5 overflow-hidden rounded-md border border-default bg-default" | "overflow-hidden rounded-md border border-default bg-default";
 /** Merges application and root DataList defaults without losing nested UI slots. */
 export declare function mergeDataListUiConfig(appUi: DataListUiConfig | undefined, componentUi: DataListUiConfig | undefined, density?: DataListDensity, size?: DataListControlSize): DataListUiConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.23.0",
+  "version": "1.25.0",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",
@@ -23,6 +23,9 @@
       "dashboard": [
         "./dist/runtime/dashboard/index.d.ts"
       ],
+      "display": [
+        "./dist/runtime/display/index.d.ts"
+      ],
       "file-preview": [
         "./dist/runtime/file-preview/index.d.ts"
       ],
@@ -58,6 +61,14 @@
       "types": "./dist/runtime/dashboard/*.d.ts",
       "default": "./dist/runtime/dashboard/*.js"
     },
+    "#ui-tools/display": {
+      "types": "./dist/runtime/display/index.d.ts",
+      "default": "./dist/runtime/display/index.js"
+    },
+    "#ui-tools/display/*": {
+      "types": "./dist/runtime/display/*.d.ts",
+      "default": "./dist/runtime/display/*.js"
+    },
     "#ui-tools/file-preview": {
       "types": "./dist/runtime/file-preview/index.d.ts",
       "default": "./dist/runtime/file-preview/index.js"
@@ -132,6 +143,10 @@
       "types": "./dist/runtime/dashboard/index.d.ts",
       "import": "./dist/runtime/dashboard/index.js"
     },
+    "./display": {
+      "types": "./dist/runtime/display/index.d.ts",
+      "import": "./dist/runtime/display/index.js"
+    },
     "./file-preview": {
       "types": "./dist/runtime/file-preview/index.d.ts",
       "import": "./dist/runtime/file-preview/index.js"