nuxt-ui-tools 1.22.2 → 1.24.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.22.2",
+  "version": "1.24.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/i18n/locales/en.js

@@ -718,8 +718,13 @@ export default defineUiToolsLocale({
         selectRowAt: "Select row {position}"
       },
       selectionBar: {
+        actions: "Actions",
+        actionsTitle: "Actions on the selection",
         allResults: "All results",
         clear: "Clear selection",
+        countAll: "All {count} results",
+        countSelectedOne: "{count} selected",
+        countSelectedOther: "{count} selected",
         more: "More actions",
         selection: "Selection"
       },

package/dist/runtime/i18n/locales/fr.js

@@ -718,8 +718,13 @@ export default defineUiToolsLocale({
         selectRowAt: "S\xE9lectionner la ligne {position}"
       },
       selectionBar: {
+        actions: "Actions",
+        actionsTitle: "Actions sur la s\xE9lection",
         allResults: "Tous les r\xE9sultats",
         clear: "Effacer la s\xE9lection",
+        countAll: "Tous les {count} r\xE9sultats",
+        countSelectedOne: "{count} s\xE9lectionn\xE9",
+        countSelectedOther: "{count} s\xE9lectionn\xE9s",
         more: "Plus d\u2019actions",
         selection: "S\xE9lection"
       },

package/dist/runtime/i18n/types.d.ts

@@ -60,6 +60,11 @@ export interface UiToolsTableMessages {
         allResults: string;
         more: string;
         clear: string;
+        actions: string;
+        actionsTitle: string;
+        countSelectedOne: string;
+        countSelectedOther: string;
+        countAll: string;
     };
     summaries: {
         total: string;

package/dist/runtime/shared/styles/scrollbars.css

@@ -1 +1 @@
-@layer theme, base, components, utilities;@layer base{:root{--nut-scrollbar-size:11px;--nut-scrollbar-gap:3px;--nut-scrollbar-thumb:color-mix(in srgb,var(--ui-text,#1f1d1a) 18%,transparent);--nut-scrollbar-thumb-hover:color-mix(in srgb,var(--ui-text,#1f1d1a) 32%,transparent);--nut-scrollbar-thumb-active:color-mix(in srgb,var(--ui-text,#1f1d1a) 44%,transparent)}@supports (scrollbar-width:thin){*{scrollbar-color:transparent transparent;scrollbar-width:thin;transition:scrollbar-color .2s ease}:hover{scrollbar-color:var(--nut-scrollbar-thumb) transparent}}@supports not (scrollbar-width:thin){::-webkit-scrollbar{background:transparent;height:var(--nut-scrollbar-size);width:var(--nut-scrollbar-size)}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:transparent;border:var(--nut-scrollbar-gap) solid transparent;border-radius:999px}:hover::-webkit-scrollbar-thumb{background-color:var(--nut-scrollbar-thumb)}::-webkit-scrollbar-thumb:hover{background-color:var(--nut-scrollbar-thumb-hover)}::-webkit-scrollbar-thumb:active{background-color:var(--nut-scrollbar-thumb-active)}}}
+@layer theme, base, components, utilities;@layer base{:root{--nut-scrollbar-size:11px;--nut-scrollbar-gap:3px;--nut-table-scrollbar-size:5px;--nut-table-scrollbar-idle-opacity:0;--nut-table-scrollbar-idle-pointer-events:none;--nut-scrollbar-thumb:color-mix(in srgb,var(--ui-text,#1f1d1a) 18%,transparent);--nut-scrollbar-thumb-hover:color-mix(in srgb,var(--ui-text,#1f1d1a) 32%,transparent);--nut-scrollbar-thumb-active:color-mix(in srgb,var(--ui-text,#1f1d1a) 44%,transparent)}@supports (scrollbar-width:thin){*{scrollbar-color:transparent transparent;scrollbar-width:thin;transition:scrollbar-color .2s ease}:hover{scrollbar-color:var(--nut-scrollbar-thumb) transparent}}@supports not (scrollbar-width:thin){::-webkit-scrollbar{background:transparent;height:var(--nut-scrollbar-size);width:var(--nut-scrollbar-size)}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:transparent;border:var(--nut-scrollbar-gap) solid transparent;border-radius:999px}:hover::-webkit-scrollbar-thumb{background-color:var(--nut-scrollbar-thumb)}::-webkit-scrollbar-thumb:hover{background-color:var(--nut-scrollbar-thumb-hover)}::-webkit-scrollbar-thumb:active{background-color:var(--nut-scrollbar-thumb-active)}}}

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

@@ -4,6 +4,7 @@ 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 { provideDataListOverlayInset } from "../../composables/use-data-list-overlay-inset";
 import { provideDataListUi } from "../../composables/use-data-list-ui";
 import { provideTableInternals } from "../../composables/use-table-internals";
 import { mergeDataListUiConfig } from "../../utils";
@@ -18,6 +19,7 @@ const props = defineProps({
 const appConfig = useAppConfig();
 provideTableInternals(props.table["__internals"]);
 provideUiToolsLocale(useUiToolsLocaleRef(computed(() => props.locale)));
+provideDataListOverlayInset();
 const { isMobile } = useDataListBreakpoint();
 provideDataListUi(
   computed(() => {

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

@@ -4,7 +4,7 @@ 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. */
+    /** Number of actions the desktop bar renders inline before the overflow menu. Below `md` every action opens from a sheet. */
     maxVisible?: number;
     /** Shows the selection / all-results scope switch when the schema allows an `all` scope. */
     scope?: boolean;

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

@@ -1,15 +1,17 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
 import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
-import { useResizeObserver } from "@vueuse/core";
-import { computed, nextTick, ref, useTemplateRef, watch } from "vue";
+import { useElementSize, useResizeObserver } from "@vueuse/core";
+import { computed, nextTick, onBeforeUnmount, ref, useTemplateRef, watch, watchEffect } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { isString, isNullish } from "../../../shared/utils/predicate";
 import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
+import { useDataListOverlayInset } from "../../composables/use-data-list-overlay-inset";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
 import { mergeDataListProps, mergeDataListUiClass } from "../../utils";
 import { resolveTableActionLabel } from "../../utils/actions";
+import DataListSelectionSheet from "./data-list-selection-sheet.vue";
 const props = defineProps({
   size: { type: String, required: false },
   position: { type: String, required: false, default: "absolute" },
@@ -59,7 +61,12 @@ const scopeEnabled = computed(
   () => props.scope && internals.schema.value.selection?.scope !== "page" && !isNullish(matchingCount.value) && matchingCount.value > 0
 );
 const bulkScope = computed(() => internals.selection.bulkScope.value);
-const maxVisible = computed(() => props.maxVisible ?? (isMobile.value ? 1 : 3));
+const maxVisible = computed(() => props.maxVisible ?? 3);
+const placement = computed(() => {
+  if (props.position === "fixed")
+    return isMobile.value ? "fixed inset-x-0 bottom-[calc(12px+env(safe-area-inset-bottom))]" : "fixed inset-x-0 bottom-4";
+  return isMobile.value ? "absolute inset-x-0 bottom-3" : "absolute inset-x-0 bottom-[22px]";
+});
 const fitted = ref(Number.POSITIVE_INFINITY);
 const visibleCount = computed(() => Math.min(maxVisible.value, fitted.value));
 const visibleActions = computed(() => actions.value.slice(0, visibleCount.value));
@@ -99,6 +106,7 @@ async function fit() {
 watch(
   () => [
     selectedCount.value > 0,
+    isMobile.value,
     maxVisible.value,
     actions.value.map((action) => resolveTableActionLabel(action.definition.label)).join("\n")
   ],
@@ -106,6 +114,15 @@ watch(
   { flush: "post" }
 );
 useResizeObserver(rootElement, () => void fit());
+const overlayInset = useDataListOverlayInset();
+const { height: rootHeight } = useElementSize(rootElement);
+watchEffect(() => {
+  if (overlayInset)
+    overlayInset.bottom.value = isMobile.value && rootHeight.value ? rootHeight.value + 24 : 0;
+});
+onBeforeUnmount(() => {
+  if (overlayInset) overlayInset.bottom.value = 0;
+});
 </script>
 
 <template>
@@ -115,20 +132,30 @@ useResizeObserver(rootElement, () => void fit());
       ref="rootElement"
       :class="
   mergeDataListUiClass(
-    `nut-dl-selbar pointer-events-none z-40 flex justify-center px-4 ${position === 'fixed' ? 'fixed inset-x-0 bottom-4' : 'absolute inset-x-0 bottom-[22px]'}`,
+    `nut-dl-selbar pointer-events-none z-40 flex justify-center px-4 ${placement}`,
     void 0,
     ui.root
   )
 "
     >
-      <div class="pointer-events-auto flex max-w-full justify-center">
+      <div
+        class="pointer-events-auto flex max-w-full justify-center"
+        :class="{ 'w-full': isMobile }"
+      >
         <slot
           :actions="actions"
           :selected-count="selectedCount"
           :selection="selection"
           :clear-selection="clearSelection"
         >
+          <DataListSelectionSheet
+            v-if="isMobile"
+            :scope="scopeEnabled"
+            :ui="ui"
+            :controls="controlProps"
+          />
           <div
+            v-else
             :class="
   mergeDataListUiClass(
     'nut-dl-selbar__bar flex h-11 max-w-[min(840px,100%)] items-center gap-2.5 rounded-[10px] bg-inverted px-1.5 text-[13px] text-inverted shadow-[0_20px_50px_-18px_rgb(31_29_26/0.6)]',

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

@@ -4,7 +4,7 @@ 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. */
+    /** Number of actions the desktop bar renders inline before the overflow menu. Below `md` every action opens from a sheet. */
     maxVisible?: number;
     /** Shows the selection / all-results scope switch when the schema allows an `all` scope. */
     scope?: boolean;

package/dist/runtime/table/components/data-list/data-list-selection-sheet.d.vue.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/data-list/data-list-selection-sheet.vue

@@ -0,0 +1,238 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UDrawer from "@nuxt/ui/components/Drawer.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, nextTick, ref, useId, useTemplateRef, watch } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isString } from "../../../shared/utils/predicate";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { mergeDataListProps, mergeDataListUiClass } from "../../utils";
+import { resolveTableActionLabel } from "../../utils/actions";
+const props = defineProps({
+  scope: { type: Boolean, required: true },
+  ui: { type: Object, required: true },
+  controls: { type: Object, required: true }
+});
+const internals = useTableInternals();
+const { locale, t } = useUiToolsLocale();
+const id = useId();
+const open = ref(false);
+const sheetBody = useTemplateRef("sheetBody");
+const selectedCount = computed(() => internals.selection.selectedCount.value);
+const matchingCount = computed(() => internals.pagination.rowCount.value ?? 0);
+const bulkScope = computed(() => internals.selection.bulkScope.value);
+const targetsAll = computed(() => props.scope && bulkScope.value === "all");
+const count = computed(() => {
+  const template = targetsAll.value ? t("table.selectionBar.countAll") : selectedCount.value === 1 ? t("table.selectionBar.countSelectedOne") : t("table.selectionBar.countSelectedOther");
+  const [before = "", after = ""] = template.split("{count}");
+  const value = formatCount(targetsAll.value ? matchingCount.value : selectedCount.value);
+  return { after, before, text: `${before}${value}${after}`, value };
+});
+const scopeOptions = computed(() => [
+  {
+    count: selectedCount.value,
+    label: t("table.selectionBar.selection"),
+    value: "selection"
+  },
+  { count: matchingCount.value, label: t("table.selectionBar.allResults"), value: "all" }
+]);
+const rows = computed(() => internals.actions.bulkActions.value.map(toRow));
+const groups = computed(
+  () => [
+    rows.value.filter((row) => !row.destructive),
+    rows.value.filter((row) => row.destructive)
+  ].filter((group) => group.length)
+);
+const busy = computed(() => rows.value.some((row) => row.pending));
+const triggerProps = computed(
+  () => mergeDataListProps(
+    {
+      color: "primary",
+      label: t("table.selectionBar.actions"),
+      size: "lg",
+      trailingIcon: "i-lucide-chevron-up",
+      variant: "solid"
+    },
+    props.controls.trigger
+  )
+);
+const dismissProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", icon: "i-lucide-x", size: "lg", square: true, variant: "ghost" },
+    props.controls.dismiss
+  )
+);
+function formatCount(value) {
+  return new Intl.NumberFormat(locale.value.code).format(value);
+}
+function toRow(action) {
+  const pending = action.running || action.state.loading;
+  const icon = isString(action.definition.icon) ? action.definition.icon : void 0;
+  return {
+    action,
+    destructive: action.definition.color === "error",
+    detail: action.state.disabled && action.state.disabledReason || action.definition.description,
+    detailId: `${id}-${action.definition.key}`,
+    icon: pending ? "i-lucide-loader-circle" : icon,
+    label: resolveTableActionLabel(action.definition.label) ?? action.definition.key,
+    pending,
+    unavailable: action.state.disabled || pending
+  };
+}
+watch(open, async (value) => {
+  if (!value) return;
+  await nextTick();
+  sheetBody.value?.querySelector(
+    '[role="radio"][aria-checked="true"], .nut-dl-selsheet__action:not([aria-disabled])'
+  )?.focus({ preventScroll: true });
+});
+function run(row) {
+  if (row.unavailable) return;
+  open.value = false;
+  void row.action.execute();
+}
+</script>
+
+<template>
+  <div
+    :class="
+  mergeDataListUiClass(
+    'nut-dl-selbar__bar nut-dl-selbar__bar--compact flex h-[60px] w-full items-center gap-1 rounded-[calc(var(--ui-radius)*2+0.5rem)] bg-inverted p-2 text-inverted shadow-[0_20px_50px_-18px_rgb(31_29_26/0.6)]',
+    void 0,
+    ui.bar
+  )
+"
+    role="region"
+    :aria-label="t('table.selectionBar.selection')"
+  >
+    <UButton
+      v-bind="dismissProps"
+      :aria-label="t('table.selectionBar.clear')"
+      :title="t('table.selectionBar.clear')"
+      :ui="{
+  base: mergeDataListUiClass(
+    'nut-dl-selbar__dismiss size-11 shrink-0 justify-center text-inverted/80 hover:bg-white/12 hover:text-inverted focus-visible:outline-2 focus-visible:outline-[var(--ui-text-inverted)] active:bg-white/16 active:text-inverted',
+    void 0,
+    ui.dismiss
+  )
+}"
+      @click="internals.selection.clearSelection()"
+    />
+
+    <span
+      :class="
+  mergeDataListUiClass(
+    'nut-dl-selbar__count min-w-0 flex-1 text-[15px] leading-tight font-semibold',
+    void 0,
+    ui.count
+  )
+"
+      role="status"
+    >
+      {{ count.before }}<span class="text-primary tabular-nums">{{ count.value }}</span
+      >{{ count.after }}
+    </span>
+
+    <UDrawer
+      v-model:open="open"
+      direction="bottom"
+      :handle="true"
+      :title="t('table.selectionBar.actionsTitle')"
+      :ui="{
+  header: 'sr-only',
+  content: mergeDataListUiClass(
+    'nut-dl-sheet nut-dl-selsheet max-h-[85vh] rounded-t-[16px]',
+    void 0,
+    ui.sheet
+  ),
+  container: 'gap-0 p-0',
+  body: 'min-h-0 overflow-y-auto p-0 pb-[max(12px,env(safe-area-inset-bottom))]'
+}"
+    >
+      <UButton
+        v-bind="triggerProps"
+        :aria-label="t('table.selectionBar.actionsTitle')"
+        :loading="busy"
+        :ui="{
+  base: mergeDataListUiClass(
+    'nut-dl-selbar__trigger h-11 shrink-0 rounded-lg px-4 text-[15px] font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-text-inverted)]',
+    void 0,
+    ui.trigger
+  ),
+  trailingIcon: 'size-4'
+}"
+      />
+
+      <template #body>
+        <div ref="sheetBody">
+          <div
+            v-if="scope"
+            class="nut-dl-selsheet__scope mx-[10px] mt-2 mb-1 grid grid-cols-[repeat(2,minmax(0,1fr))] gap-0.5 rounded-md bg-elevated p-0.5"
+            role="radiogroup"
+            :aria-label="t('table.selectionBar.selection')"
+          >
+            <button
+              v-for="option in scopeOptions"
+              :key="option.value"
+              type="button"
+              role="radio"
+              class="nut-dl-selsheet__scope-btn flex min-h-11 min-w-0 flex-wrap items-center justify-center gap-x-1.5 rounded-[5px] px-1 py-1 text-center text-[13px] leading-tight font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-primary/40"
+              :class="
+  bulkScope === option.value ? 'bg-default text-highlighted shadow-[0_0_0_1px_var(--ui-border)]' : 'text-muted hover:text-default'
+"
+              :aria-checked="bulkScope === option.value"
+              @click="internals.selection.setBulkScope(option.value)"
+            >
+              <span>{{ option.label }}</span>
+              <b class="font-semibold text-primary tabular-nums">{{ formatCount(option.count) }}</b>
+            </button>
+          </div>
+          <div
+            v-else
+            class="nut-dl-sheet__title px-5 pt-3 pb-1.5 text-[13px] font-semibold text-muted"
+          >
+            {{ count.text }}
+          </div>
+
+          <div class="px-[10px] pt-1">
+            <template v-for="(group, groupIndex) in groups" :key="groupIndex">
+              <div v-if="groupIndex" class="my-1 border-t border-default" />
+              <button
+                v-for="row in group"
+                :key="row.action.definition.key"
+                type="button"
+                class="nut-dl-sheet__row nut-dl-selsheet__action flex min-h-[46px] w-full items-center gap-[10px] rounded-lg px-[10px] py-2 text-left text-[15px] outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset"
+                :class="
+  row.unavailable ? 'cursor-not-allowed text-dimmed' : row.destructive ? 'text-error active:bg-error/10' : 'text-highlighted active:bg-elevated'
+"
+                :aria-disabled="row.unavailable || void 0"
+                :aria-describedby="row.detail ? row.detailId : void 0"
+                @click="run(row)"
+              >
+                <UIcon
+                  v-if="row.icon"
+                  :name="row.icon"
+                  class="size-4 shrink-0"
+                  :class="[
+  row.pending ? 'animate-spin motion-reduce:animate-none' : '',
+  row.destructive && !row.unavailable ? 'text-error' : 'text-muted'
+]"
+                />
+                <span class="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <span class="nut-dl-selsheet__label">{{ row.label }}</span>
+                  <span
+                    v-if="row.detail"
+                    :id="row.detailId"
+                    class="nut-dl-selsheet__detail text-[12.5px] leading-snug text-muted"
+                  >
+                    {{ row.detail }}
+                  </span>
+                </span>
+              </button>
+            </template>
+          </div>
+        </div>
+      </template>
+    </UDrawer>
+  </div>
+</template>

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-overlay-scrollbars.vue

@@ -149,8 +149,8 @@ defineExpose({ measure: schedule });
 <template>
   <div
     v-if="hasVertical"
-    class="nut-dl-sb pointer-events-none absolute top-1 right-[3px] bottom-2 z-[6] w-[5px] opacity-0 transition-opacity duration-200 ease-out motion-reduce:transition-none"
-    :class="{ 'pointer-events-auto opacity-100': visible }"
+    class="nut-dl-sb [pointer-events:var(--nut-table-scrollbar-idle-pointer-events)] absolute top-1 right-[3px] bottom-2 z-[6] w-(--nut-table-scrollbar-size) opacity-(--nut-table-scrollbar-idle-opacity) transition-opacity duration-200 ease-out motion-reduce:transition-none"
+    :class="{ 'pointer-events-auto! opacity-100': visible }"
   >
     <span
       class="absolute top-0 left-0 w-full rounded-full bg-(--nut-scrollbar-thumb) transition-colors duration-150 will-change-transform hover:bg-(--nut-scrollbar-thumb-hover)"
@@ -164,8 +164,8 @@ defineExpose({ measure: schedule });
   </div>
   <div
     v-if="hasHorizontal"
-    class="nut-dl-sb pointer-events-none absolute right-2 bottom-[3px] left-1 z-[6] h-[5px] opacity-0 transition-opacity duration-200 ease-out motion-reduce:transition-none"
-    :class="{ 'pointer-events-auto opacity-100': visible }"
+    class="nut-dl-sb [pointer-events:var(--nut-table-scrollbar-idle-pointer-events)] absolute right-2 bottom-[3px] left-1 z-[6] h-(--nut-table-scrollbar-size) opacity-(--nut-table-scrollbar-idle-opacity) transition-opacity duration-200 ease-out motion-reduce:transition-none"
+    :class="{ 'pointer-events-auto! opacity-100': visible }"
   >
     <span
       class="absolute top-0 left-0 h-full rounded-full bg-(--nut-scrollbar-thumb) transition-colors duration-150 will-change-transform hover:bg-(--nut-scrollbar-thumb-hover)"

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.22.2",
+  "version": "1.24.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",