nuxt-ui-tools 1.23.0 → 1.25.0

package/dist/runtime/form/fields/upload/upload-item.vue

@@ -2,7 +2,7 @@
 import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import UProgress from "@nuxt/ui/components/Progress.vue";
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
 import { fileExtensionLabel, fileIconName, formatFileSize } from "../../../shared/utils/file";
 const props = defineProps({
@@ -14,6 +14,13 @@ const props = defineProps({
 const emit = defineEmits(["open", "start", "cancel", "retry", "remove", "replace"]);
 const { code, t } = useUiToolsLocale();
 const icon = computed(() => fileIconName(props.item.type));
+const thumbnailFailed = ref(false);
+watch(
+  () => props.item.thumbnail,
+  () => {
+    thumbnailFailed.value = false;
+  }
+);
 const meta = computed(() => {
   if (props.item.description) return props.item.description;
   const extension = fileExtensionLabel({ name: props.item.name, type: props.item.type });
@@ -37,9 +44,10 @@ const status = computed(() => {
     :data-form-upload-item="item.status"
   >
     <img
-      v-if="item.thumbnail"
+      v-if="item.thumbnail && !thumbnailFailed"
       :src="item.thumbnail"
       :alt="item.name"
+      @error="thumbnailFailed = true"
       class="shrink-0 rounded-md border border-default bg-white object-contain p-0.5"
       :class="compact ? 'size-7' : 'size-10'"
     />

package/dist/runtime/form/types/api.d.ts

@@ -59,6 +59,12 @@ export interface FormFieldFormApi {
     reset: () => Promise<void>;
     /** Submits the form through the configured submit lifecycle. */
     submit: () => Promise<boolean>;
+    /**
+     * Closes the form the way its Cancel action does: asks to discard unsaved changes when the
+     * schema asks for it, then cancels (an overlay closes). Does nothing for a form rendered without
+     * a cancel handler.
+     */
+    close: () => Promise<void>;
     /** Advances to the next step on stepped forms. */
     nextStep: () => Promise<boolean>;
     /** Returns to the previous step on stepped forms. */

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

@@ -92,4 +92,6 @@ export interface FormRuntime {
     nextStep: () => Promise<boolean>;
     previousStep: () => Promise<boolean>;
     goToStep: (index: number) => Promise<boolean>;
+    /** Cancels the rendered form, as its Cancel action does. Set by the form root that renders it. */
+    bindCancel: (cancel: (() => Promise<void>) | null) => void;
 }

package/dist/runtime/form/utils/dynamic.d.ts

@@ -0,0 +1,6 @@
+import type { FormDynamic } from '../types/index.js';
+/**
+ * Value of a static-or-callback option: the callback's result for `params`, else the value.
+ * Any function counts as the callback, the same convention as every field callback.
+ */
+export declare function resolveFormDynamic<TValue, TParams>(value: FormDynamic<TValue, TParams>, params: TParams): TValue;

package/dist/runtime/form/utils/dynamic.js

@@ -0,0 +1,7 @@
+import { isFunction } from "../../shared/utils/predicate.js";
+export function resolveFormDynamic(value, params) {
+  return isDynamicCallback(value) ? value(params) : value;
+}
+function isDynamicCallback(value) {
+  return isFunction(value);
+}

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

@@ -97,6 +97,33 @@ export default defineUiToolsLocale({
         retry: "Retry"
       }
     },
+    display: {
+      after: "After",
+      before: "Before",
+      conceal: "Hide",
+      copied: "Copied",
+      copy: "Copy",
+      details: "Details",
+      download: "Download",
+      dueOn: "Due {date}",
+      empty: "Nothing to show",
+      field: "Field",
+      from: "From",
+      hideDetails: "Hide details",
+      loadError: "This content could not be loaded.",
+      open: "Open",
+      overdue: "{duration} overdue",
+      pages: "{count} pages",
+      play: "Play the video",
+      readLess: "Show less",
+      readMore: "Read more",
+      retry: "Retry",
+      reveal: "Show",
+      showDetails: "Show details",
+      showMore: "Show more \xB7 {count}",
+      to: "To",
+      today: "Today"
+    },
     filePreview: {
       close: "Close",
       converted: {
@@ -718,8 +745,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

@@ -97,6 +97,33 @@ export default defineUiToolsLocale({
         retry: "R\xE9essayer"
       }
     },
+    display: {
+      after: "Apr\xE8s",
+      before: "Avant",
+      conceal: "Masquer",
+      copied: "Copi\xE9",
+      copy: "Copier",
+      details: "D\xE9tail",
+      download: "T\xE9l\xE9charger",
+      dueOn: "\xC9ch\xE9ance {date}",
+      empty: "Rien \xE0 afficher",
+      field: "Champ",
+      from: "Du",
+      hideDetails: "Masquer le d\xE9tail",
+      loadError: "Ce contenu n\u2019a pas pu \xEAtre charg\xE9.",
+      open: "Ouvrir",
+      overdue: "En retard de {duration}",
+      pages: "{count} pages",
+      play: "Lire la vid\xE9o",
+      readLess: "R\xE9duire",
+      readMore: "Lire la suite",
+      retry: "R\xE9essayer",
+      reveal: "Afficher",
+      showDetails: "Voir le d\xE9tail",
+      showMore: "Voir plus \xB7 {count}",
+      to: "Au",
+      today: "Aujourd'hui"
+    },
     filePreview: {
       close: "Fermer",
       converted: {
@@ -718,8 +745,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;
@@ -718,6 +723,40 @@ export interface UiToolsDashboardMessages {
         };
     };
 }
+export interface UiToolsDisplayMessages {
+    /** Shown by a block with nothing to list. */
+    empty: string;
+    /** "Show more · {count}" */
+    showMore: string;
+    readMore: string;
+    readLess: string;
+    showDetails: string;
+    hideDetails: string;
+    /** Toggle of a collapsible breakdown. */
+    details: string;
+    copy: string;
+    copied: string;
+    reveal: string;
+    conceal: string;
+    open: string;
+    download: string;
+    play: string;
+    today: string;
+    from: string;
+    to: string;
+    /** "{duration} overdue" */
+    overdue: string;
+    /** "Due {date}" */
+    dueOn: string;
+    /** "{count} pages" */
+    pages: string;
+    /** Shown when a block's props failed to load. */
+    loadError: string;
+    retry: string;
+    field: string;
+    before: string;
+    after: string;
+}
 export interface UiToolsFilePreviewMessages {
     /** Name shown for a file that has none, such as a pasted image. */
     untitled: string;
@@ -826,6 +865,7 @@ export interface UiToolsFilePreviewMessages {
 }
 export interface Messages {
     dashboard: UiToolsDashboardMessages;
+    display: UiToolsDisplayMessages;
     filePreview: UiToolsFilePreviewMessages;
     form: UiToolsFormMessages;
     table: UiToolsTableMessages;

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

@@ -1 +1 @@
-@layer theme, base, components, utilities;@layer base{:root{--nut-form-veil:rgba(31,29,26,.18)}.dark{--nut-form-veil:rgba(0,0,0,.45)}:where(:root){--nut-dash-s1:var(--ui-primary);--nut-dash-s2:var(--ui-color-neutral-400);--nut-dash-s3:var(--ui-secondary);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 20%,var(--ui-bg));--nut-dash-s5:var(--ui-warning);--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 35%,var(--ui-bg));--nut-dash-up:var(--ui-success);--nut-dash-up-mark:var(--nut-dash-up);--nut-dash-down:var(--ui-error);--nut-dash-muted:var(--ui-border-accented);--nut-dash-track:var(--ui-bg-elevated);--nut-dash-grid:var(--ui-border-muted);--nut-dash-axis:var(--ui-text-dimmed);--nut-dash-ref:var(--ui-text-dimmed);--nut-dash-ref-label:var(--ui-text-muted);--nut-dash-ghost:var(--ui-bg-accented);--nut-dash-ghost-shine:color-mix(in oklab,var(--ui-bg) 70%,transparent);--nut-dash-filter-active:color-mix(in oklab,var(--ui-primary) 9%,var(--ui-bg));--nut-dash-filter-active-line:color-mix(in oklab,var(--ui-primary) 35%,var(--ui-border));--nut-dash-filter-ink:var(--nut-dl-accent-ink,var(--ui-primary));--nut-dash-row-hover:var(--ui-bg-elevated)}:where(.dark){--nut-dash-s2:var(--ui-color-neutral-500);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 30%,var(--ui-bg));--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 40%,var(--ui-bg))}@supports (color:oklch(from red l c h)){:where(:root){--nut-dash-s4:oklch(from var(--ui-primary) 0.88 calc(c * 0.45) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.8 calc(c * 0.55) h)}:where(.dark){--nut-dash-s4:oklch(from var(--ui-primary) 0.42 calc(c * 0.6) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.45 calc(c * 0.65) h)}}:where(:root){--nut-fp-veil:rgba(31,29,26,.4);--nut-fp-stage:var(--ui-bg-muted);--nut-fp-document:#525659;--nut-fp-checker-a:#fff;--nut-fp-checker-b:#ebe7e2;--nut-fp-token-key:var(--ui-primary);--nut-fp-token-string:var(--ui-success);--nut-fp-token-number:var(--ui-info);--nut-fp-token-literal:var(--ui-error)}:where(.dark){--nut-fp-veil:rgba(0,0,0,.62);--nut-fp-stage:var(--ui-bg);--nut-fp-checker-a:#e9e4dd;--nut-fp-checker-b:#d8d1c7}}@layer components{.nut-dash-chart{--vis-font-family:inherit;--vis-axis-tick-label-color:var(--nut-dash-axis);--vis-axis-tick-label-font-size:10px;--vis-axis-grid-color:var(--nut-dash-grid);--vis-axis-domain-color:var(--nut-dash-grid);--vis-crosshair-line-stroke-color:var(--ui-border-accented);--vis-crosshair-circle-stroke-color:var(--ui-bg);--vis-tooltip-background-color:var(--ui-bg);--vis-tooltip-border-color:var(--ui-border);--vis-tooltip-text-color:var(--ui-text);--vis-tooltip-padding:8px 10px;--vis-tooltip-border-radius:calc(var(--ui-radius)*1.5);--vis-tooltip-shadow-color:rgb(0 0 0/8%);--vis-plotline-label-font-size:10px}.nut-dash-chart--bars [data-vis-component] rect:hover{opacity:.8}.nut-dash-tip{display:flex;flex-direction:column;font-size:12px;gap:4px;min-width:9rem}.nut-dash-tip-title{color:var(--ui-text-muted);font-weight:500}.nut-dash-tip-row{align-items:center;display:flex;gap:6px}.nut-dash-tip-row i{border-radius:2px;height:8px;width:8px}.nut-dash-tip-row span{color:var(--ui-text-muted);flex:1}.nut-dash-tip-row b{font-variant-numeric:tabular-nums;font-weight:600}.nut-dash-ghost{background:var(--nut-dash-ghost)}.nut-dash-shimmer{overflow:hidden;position:relative}.nut-dash-shimmer:after{animation:nut-dash-shimmer 1.6s ease-in-out infinite;background:linear-gradient(100deg,transparent 25%,var(--nut-dash-ghost-shine) 50%,transparent 75%);content:"";inset:0;pointer-events:none;position:absolute;transform:translateX(-100%);will-change:transform}@keyframes nut-dash-shimmer{to{transform:translateX(100%)}}.nut-dash-enter{animation:nut-dash-enter .28s ease-out}@keyframes nut-dash-enter{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}.nut-dash-progress{animation:nut-dash-progress 1.1s ease-in-out infinite}@keyframes nut-dash-progress{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){.nut-dash-shimmer:after{display:none}.nut-dash-enter{animation:none}.nut-dash-progress{animation-duration:3s}}.nut-fp-checker{background-color:var(--nut-fp-checker-a);background-image:conic-gradient(var(--nut-fp-checker-b) 25%,transparent 0 50%,var(--nut-fp-checker-b) 0 75%,transparent 0);background-size:18px 18px}.nut-fp-code [data-token=key]{color:var(--nut-fp-token-key)}.nut-fp-code [data-token=string]{color:var(--nut-fp-token-string)}.nut-fp-code [data-token=number]{color:var(--nut-fp-token-number)}.nut-fp-code [data-token=literal]{color:var(--nut-fp-token-literal)}[data-file-preview-bottom][data-single]:has([data-file-preview-tools]:empty){display:none}@keyframes nut-fp-progress{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}.nut-fp-progress{animation:nut-fp-progress 1s ease-in-out infinite}@keyframes nut-fp-equalizer{to{transform:scaleY(.45)}}.nut-fp-equalizer{animation:nut-fp-equalizer .9s ease-in-out infinite alternate}@media (prefers-reduced-motion:reduce){.nut-fp-progress{animation-duration:2.4s}.nut-fp-equalizer{animation:none}}.nut-fp-prose{color:var(--ui-text);font-size:.925rem;line-height:1.7}.nut-fp-prose>:first-child{margin-top:0}.nut-fp-prose :where(h1,h2,h3,h4){color:var(--ui-text-highlighted);font-weight:650;letter-spacing:-.01em;line-height:1.25;margin:1.75em 0 .6em}.nut-fp-prose h1{font-size:1.6em}.nut-fp-prose h2{font-size:1.25em}.nut-fp-prose h3{font-size:1.05em}.nut-fp-prose :where(p,ul,ol,pre,table,blockquote){margin:0 0 1em}.nut-fp-prose :where(ul,ol){padding-inline-start:1.4em}.nut-fp-prose ul{list-style:disc}.nut-fp-prose ol{list-style:decimal}.nut-fp-prose a{color:var(--ui-primary);text-decoration:underline;text-underline-offset:2px}.nut-fp-prose :not(pre)>code{background:var(--ui-bg-elevated);border:1px solid var(--ui-border-muted);border-radius:4px;font-size:.86em;padding:.1em .35em}.nut-fp-prose pre{background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:8px;font-size:.85em;overflow-x:auto;padding:.9em 1.1em}.nut-fp-prose table{border-collapse:collapse;display:block;font-size:.9em;overflow-x:auto}.nut-fp-prose :where(th,td){border:1px solid var(--ui-border);padding:.4em .75em;text-align:start}.nut-fp-prose th{background:var(--ui-bg-elevated);font-weight:600}.nut-fp-prose blockquote{border-inline-start:3px solid var(--ui-primary);color:var(--ui-text-toned);padding-inline-start:1em}.nut-fp-prose img{border-radius:6px;max-width:100%}}
+@layer theme, base, components, utilities;@layer base{:root{--nut-form-veil:rgba(31,29,26,.18)}.dark{--nut-form-veil:rgba(0,0,0,.45)}:where(:root){--nut-dash-s1:var(--ui-primary);--nut-dash-s2:var(--ui-color-neutral-400);--nut-dash-s3:var(--ui-secondary);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 20%,var(--ui-bg));--nut-dash-s5:var(--ui-warning);--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 35%,var(--ui-bg));--nut-dash-up:var(--ui-success);--nut-dash-up-mark:var(--nut-dash-up);--nut-dash-down:var(--ui-error);--nut-dash-muted:var(--ui-border-accented);--nut-dash-track:var(--ui-bg-elevated);--nut-dash-grid:var(--ui-border-muted);--nut-dash-axis:var(--ui-text-dimmed);--nut-dash-ref:var(--ui-text-dimmed);--nut-dash-ref-label:var(--ui-text-muted);--nut-dash-ghost:var(--ui-bg-accented);--nut-dash-ghost-shine:color-mix(in oklab,var(--ui-bg) 70%,transparent);--nut-dash-filter-active:color-mix(in oklab,var(--ui-primary) 9%,var(--ui-bg));--nut-dash-filter-active-line:color-mix(in oklab,var(--ui-primary) 35%,var(--ui-border));--nut-dash-filter-ink:var(--nut-dl-accent-ink,var(--ui-primary));--nut-dash-row-hover:var(--ui-bg-elevated)}:where(.dark){--nut-dash-s2:var(--ui-color-neutral-500);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 30%,var(--ui-bg));--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 40%,var(--ui-bg))}@supports (color:oklch(from red l c h)){:where(:root){--nut-dash-s4:oklch(from var(--ui-primary) 0.88 calc(c * 0.45) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.8 calc(c * 0.55) h)}:where(.dark){--nut-dash-s4:oklch(from var(--ui-primary) 0.42 calc(c * 0.6) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.45 calc(c * 0.65) h)}}:where(:root){--nut-fp-veil:rgba(31,29,26,.4);--nut-fp-stage:var(--ui-bg-muted);--nut-fp-document:#525659;--nut-fp-checker-a:#fff;--nut-fp-checker-b:#ebe7e2;--nut-fp-token-key:var(--ui-primary);--nut-fp-token-string:var(--ui-success);--nut-fp-token-number:var(--ui-info);--nut-fp-token-literal:var(--ui-error)}:where(.dark){--nut-fp-veil:rgba(0,0,0,.62);--nut-fp-stage:var(--ui-bg);--nut-fp-checker-a:#e9e4dd;--nut-fp-checker-b:#d8d1c7}:where(:root){--nut-display-radius:calc(var(--ui-radius)*2);--nut-display-track:var(--ui-bg-accented);--nut-display-code-bg:var(--ui-color-neutral-900);--nut-display-code-ink:var(--ui-color-neutral-100);--nut-display-code-muted:var(--ui-color-neutral-400);--nut-display-code-line:var(--ui-color-neutral-800);--nut-display-code-key:var(--ui-color-primary-300);--nut-display-code-string:var(--ui-color-success-300);--nut-display-code-number:var(--ui-color-info-300);--nut-display-code-literal:var(--ui-color-error-300);--nut-display-primary:var(--ui-primary);--nut-display-primary-ink:var(--ui-primary);--nut-display-primary-soft:color-mix(in oklab,var(--ui-primary) 10%,var(--ui-bg));--nut-display-primary-line:color-mix(in oklab,var(--ui-primary) 40%,var(--ui-bg));--nut-display-primary-contrast:var(--ui-text-inverted);--nut-display-secondary:var(--ui-secondary);--nut-display-secondary-ink:var(--ui-secondary);--nut-display-secondary-soft:color-mix(in oklab,var(--ui-secondary) 10%,var(--ui-bg));--nut-display-secondary-line:color-mix(in oklab,var(--ui-secondary) 40%,var(--ui-bg));--nut-display-secondary-contrast:var(--ui-text-inverted);--nut-display-success:var(--ui-success);--nut-display-success-ink:var(--ui-success);--nut-display-success-soft:color-mix(in oklab,var(--ui-success) 10%,var(--ui-bg));--nut-display-success-line:color-mix(in oklab,var(--ui-success) 40%,var(--ui-bg));--nut-display-success-contrast:var(--ui-text-inverted);--nut-display-info:var(--ui-info);--nut-display-info-ink:var(--ui-info);--nut-display-info-soft:color-mix(in oklab,var(--ui-info) 10%,var(--ui-bg));--nut-display-info-line:color-mix(in oklab,var(--ui-info) 40%,var(--ui-bg));--nut-display-info-contrast:var(--ui-text-inverted);--nut-display-warning:var(--ui-warning);--nut-display-warning-ink:var(--ui-warning);--nut-display-warning-soft:color-mix(in oklab,var(--ui-warning) 10%,var(--ui-bg));--nut-display-warning-line:color-mix(in oklab,var(--ui-warning) 40%,var(--ui-bg));--nut-display-warning-contrast:var(--ui-text-inverted);--nut-display-error:var(--ui-error);--nut-display-error-ink:var(--ui-error);--nut-display-error-soft:color-mix(in oklab,var(--ui-error) 10%,var(--ui-bg));--nut-display-error-line:color-mix(in oklab,var(--ui-error) 40%,var(--ui-bg));--nut-display-error-contrast:var(--ui-text-inverted);--nut-display-neutral:var(--ui-bg-inverted);--nut-display-neutral-ink:var(--ui-text-toned);--nut-display-neutral-soft:var(--ui-bg-elevated);--nut-display-neutral-line:var(--ui-border-accented);--nut-display-neutral-contrast:var(--ui-text-inverted)}:where(.dark){--nut-display-code-bg:var(--ui-color-neutral-950);--nut-display-code-line:var(--ui-color-neutral-800)}:where(.nut-display-tone-primary){--nut-tone:var(--nut-display-primary);--nut-tone-ink:var(--nut-display-primary-ink);--nut-tone-soft:var(--nut-display-primary-soft);--nut-tone-line:var(--nut-display-primary-line);--nut-tone-contrast:var(--nut-display-primary-contrast)}:where(.nut-display-tone-secondary){--nut-tone:var(--nut-display-secondary);--nut-tone-ink:var(--nut-display-secondary-ink);--nut-tone-soft:var(--nut-display-secondary-soft);--nut-tone-line:var(--nut-display-secondary-line);--nut-tone-contrast:var(--nut-display-secondary-contrast)}:where(.nut-display-tone-success){--nut-tone:var(--nut-display-success);--nut-tone-ink:var(--nut-display-success-ink);--nut-tone-soft:var(--nut-display-success-soft);--nut-tone-line:var(--nut-display-success-line);--nut-tone-contrast:var(--nut-display-success-contrast)}:where(.nut-display-tone-info){--nut-tone:var(--nut-display-info);--nut-tone-ink:var(--nut-display-info-ink);--nut-tone-soft:var(--nut-display-info-soft);--nut-tone-line:var(--nut-display-info-line);--nut-tone-contrast:var(--nut-display-info-contrast)}:where(.nut-display-tone-warning){--nut-tone:var(--nut-display-warning);--nut-tone-ink:var(--nut-display-warning-ink);--nut-tone-soft:var(--nut-display-warning-soft);--nut-tone-line:var(--nut-display-warning-line);--nut-tone-contrast:var(--nut-display-warning-contrast)}:where(.nut-display-tone-error){--nut-tone:var(--nut-display-error);--nut-tone-ink:var(--nut-display-error-ink);--nut-tone-soft:var(--nut-display-error-soft);--nut-tone-line:var(--nut-display-error-line);--nut-tone-contrast:var(--nut-display-error-contrast)}:where(.nut-display-tone-neutral){--nut-tone:var(--nut-display-neutral);--nut-tone-ink:var(--nut-display-neutral-ink);--nut-tone-soft:var(--nut-display-neutral-soft);--nut-tone-line:var(--nut-display-neutral-line);--nut-tone-contrast:var(--nut-display-neutral-contrast)}}@layer components{.nut-dash-chart{--vis-font-family:inherit;--vis-axis-tick-label-color:var(--nut-dash-axis);--vis-axis-tick-label-font-size:10px;--vis-axis-grid-color:var(--nut-dash-grid);--vis-axis-domain-color:var(--nut-dash-grid);--vis-crosshair-line-stroke-color:var(--ui-border-accented);--vis-crosshair-circle-stroke-color:var(--ui-bg);--vis-tooltip-background-color:var(--ui-bg);--vis-tooltip-border-color:var(--ui-border);--vis-tooltip-text-color:var(--ui-text);--vis-tooltip-padding:8px 10px;--vis-tooltip-border-radius:calc(var(--ui-radius)*1.5);--vis-tooltip-shadow-color:rgb(0 0 0/8%);--vis-plotline-label-font-size:10px}.nut-dash-chart--bars [data-vis-component] rect:hover{opacity:.8}.nut-dash-tip{display:flex;flex-direction:column;font-size:12px;gap:4px;min-width:9rem}.nut-dash-tip-title{color:var(--ui-text-muted);font-weight:500}.nut-dash-tip-row{align-items:center;display:flex;gap:6px}.nut-dash-tip-row i{border-radius:2px;height:8px;width:8px}.nut-dash-tip-row span{color:var(--ui-text-muted);flex:1}.nut-dash-tip-row b{font-variant-numeric:tabular-nums;font-weight:600}.nut-dash-ghost{background:var(--nut-dash-ghost)}.nut-dash-shimmer{overflow:hidden;position:relative}.nut-dash-shimmer:after{animation:nut-dash-shimmer 1.6s ease-in-out infinite;background:linear-gradient(100deg,transparent 25%,var(--nut-dash-ghost-shine) 50%,transparent 75%);content:"";inset:0;pointer-events:none;position:absolute;transform:translateX(-100%);will-change:transform}@keyframes nut-dash-shimmer{to{transform:translateX(100%)}}.nut-dash-enter{animation:nut-dash-enter .28s ease-out}@keyframes nut-dash-enter{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}.nut-dash-progress{animation:nut-dash-progress 1.1s ease-in-out infinite}@keyframes nut-dash-progress{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){.nut-dash-shimmer:after{display:none}.nut-dash-enter{animation:none}.nut-dash-progress{animation-duration:3s}}.nut-fp-checker{background-color:var(--nut-fp-checker-a);background-image:conic-gradient(var(--nut-fp-checker-b) 25%,transparent 0 50%,var(--nut-fp-checker-b) 0 75%,transparent 0);background-size:18px 18px}.nut-fp-code [data-token=key]{color:var(--nut-fp-token-key)}.nut-fp-code [data-token=string]{color:var(--nut-fp-token-string)}.nut-fp-code [data-token=number]{color:var(--nut-fp-token-number)}.nut-fp-code [data-token=literal]{color:var(--nut-fp-token-literal)}[data-file-preview-bottom][data-single]:has([data-file-preview-tools]:empty){display:none}@keyframes nut-fp-progress{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}.nut-fp-progress{animation:nut-fp-progress 1s ease-in-out infinite}@keyframes nut-fp-equalizer{to{transform:scaleY(.45)}}.nut-fp-equalizer{animation:nut-fp-equalizer .9s ease-in-out infinite alternate}@media (prefers-reduced-motion:reduce){.nut-fp-progress{animation-duration:2.4s}.nut-fp-equalizer{animation:none}}.nut-fp-prose{color:var(--ui-text);font-size:.925rem;line-height:1.7}.nut-fp-prose>:first-child{margin-top:0}.nut-fp-prose :where(h1,h2,h3,h4){color:var(--ui-text-highlighted);font-weight:650;letter-spacing:-.01em;line-height:1.25;margin:1.75em 0 .6em}.nut-fp-prose h1{font-size:1.6em}.nut-fp-prose h2{font-size:1.25em}.nut-fp-prose h3{font-size:1.05em}.nut-fp-prose :where(p,ul,ol,pre,table,blockquote){margin:0 0 1em}.nut-fp-prose :where(ul,ol){padding-inline-start:1.4em}.nut-fp-prose ul{list-style:disc}.nut-fp-prose ol{list-style:decimal}.nut-fp-prose a{color:var(--ui-primary);text-decoration:underline;text-underline-offset:2px}.nut-fp-prose :not(pre)>code{background:var(--ui-bg-elevated);border:1px solid var(--ui-border-muted);border-radius:4px;font-size:.86em;padding:.1em .35em}.nut-fp-prose pre{background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:8px;font-size:.85em;overflow-x:auto;padding:.9em 1.1em}.nut-fp-prose table{border-collapse:collapse;display:block;font-size:.9em;overflow-x:auto}.nut-fp-prose :where(th,td){border:1px solid var(--ui-border);padding:.4em .75em;text-align:start}.nut-fp-prose th{background:var(--ui-bg-elevated);font-weight:600}.nut-fp-prose blockquote{border-inline-start:3px solid var(--ui-primary);color:var(--ui-text-toned);padding-inline-start:1em}.nut-fp-prose img{border-radius:6px;max-width:100%}}

package/dist/runtime/shared/utils/file.d.ts

@@ -1,4 +1,4 @@
-export declare function fileIconName(type: string | null | undefined): "i-lucide-file-text" | "i-lucide-file-image" | "i-lucide-file-video" | "i-lucide-file-audio" | "i-lucide-file-spreadsheet" | "i-lucide-file-type" | "i-lucide-file-archive" | "i-lucide-file";
+export declare function fileIconName(type: string | null | undefined): "i-lucide-file" | "i-lucide-file-text" | "i-lucide-file-image" | "i-lucide-file-video" | "i-lucide-file-audio" | "i-lucide-file-spreadsheet" | "i-lucide-file-type" | "i-lucide-file-archive";
 /** Lowercase extension of a file name without the dot, or `null` when it has none. */
 export declare function fileExtension(name: string): string | null;
 export declare function fileExtensionLabel(file: {

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>