nuxt-ui-tools 1.2.0 → 1.4.0

package/dist/runtime/dashboard/utils/format.js

@@ -0,0 +1,66 @@
+const formatsByLocale = /* @__PURE__ */ new Map();
+const numberFormats = /* @__PURE__ */ new Map();
+const monthFormats = /* @__PURE__ */ new Map();
+export function normalizeDashboardSpaces(text) {
+  return text.replaceAll("\u202F", "\xA0");
+}
+export function resolveDashboardNumberFormat(locale, options) {
+  const resolvedOptions = withCurrencyShorthand(options);
+  const key = `${locale}|${JSON.stringify(resolvedOptions)}`;
+  let format = numberFormats.get(key);
+  if (!format) {
+    format = new Intl.NumberFormat(locale, resolvedOptions);
+    numberFormats.set(key, format);
+  }
+  const resolved = format;
+  return (value) => normalizeDashboardSpaces(resolved.format(value));
+}
+function withCurrencyShorthand(options) {
+  if (options.currency === void 0 || options.style !== void 0) return options;
+  const digits = options.minimumFractionDigits === void 0 && options.maximumFractionDigits === void 0 ? { maximumFractionDigits: 0 } : {};
+  return { ...digits, ...options, style: "currency" };
+}
+export function resolveDashboardFormats(locale) {
+  const cached = formatsByLocale.get(locale);
+  if (cached) return cached;
+  const plain = resolveDashboardNumberFormat(locale, { maximumFractionDigits: 1 });
+  const compact = resolveDashboardNumberFormat(locale, {
+    maximumFractionDigits: 1,
+    notation: "compact"
+  });
+  const percent = resolveDashboardNumberFormat(locale, {
+    maximumFractionDigits: 1,
+    style: "percent"
+  });
+  const delta = resolveDashboardNumberFormat(locale, {
+    maximumFractionDigits: 1,
+    signDisplay: "exceptZero",
+    style: "percent"
+  });
+  const formats = {
+    compact,
+    decimal: plain,
+    delta: (value) => delta(value / 100),
+    integer: resolveDashboardNumberFormat(locale, { maximumFractionDigits: 0 }),
+    number: (value) => Math.abs(value) >= 1e4 ? compact(value) : plain(value),
+    percent: (value) => percent(value / 100),
+    ratio: percent,
+    signed: resolveDashboardNumberFormat(locale, {
+      maximumFractionDigits: 1,
+      signDisplay: "exceptZero"
+    })
+  };
+  formatsByLocale.set(locale, formats);
+  return formats;
+}
+export function formatDashboardMonth(locale, value, width = "short") {
+  const key = `${locale}|${width}`;
+  let format = monthFormats.get(key);
+  if (!format) {
+    format = new Intl.DateTimeFormat(locale, { month: width });
+    monthFormats.set(key, format);
+  }
+  const date = typeof value === "number" ? new Date(2e3, value - 1, 1) : value;
+  const text = format.format(date);
+  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+}

package/dist/runtime/dashboard/utils/grid.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Flex item style of one grid cell. Dashboard grids are wrapping flex rows: a cell's basis is the
+ * width its `size` spans over the grid's columns (the same widths a CSS grid would give), so rows
+ * break where the column count says. When `fill` is on, a row that is not full (a block hidden
+ * because its source is disabled, or a short last row) shares the free width between its cells in
+ * proportion to their span, so no gap is left.
+ *
+ * `span` is the resolved column span, `null` for a full-row cell.
+ */
+export declare function resolveDashboardCellStyle(params: {
+    span: number | null;
+    columns: number;
+    gap: string;
+    fill: boolean;
+}): string;
+/** Parses a resolved responsive token (`"8"`) into a positive integer, `null` when unset. */
+export declare function parseDashboardSpan(value: number | string | null | undefined): number | null;

package/dist/runtime/dashboard/utils/grid.js

@@ -0,0 +1,14 @@
+import { isNumber } from "../../shared/utils/predicate.js";
+export function resolveDashboardCellStyle(params) {
+  const columns = Math.max(1, Math.round(params.columns));
+  const span = params.span === null || !Number.isFinite(params.span) ? columns : Math.min(columns, Math.max(1, Math.round(params.span)));
+  if (span >= columns) return "flex: 1 1 100%; min-width: 0";
+  const { gap } = params;
+  const basis = `calc((100% - ${columns - 1} * ${gap}) / ${columns} * ${span} + ${span - 1} * ${gap} - 0.02px)`;
+  return `flex: ${params.fill ? span : 0} 1 ${basis}; min-width: 0`;
+}
+export function parseDashboardSpan(value) {
+  if (value === null || value === void 0 || value === "") return null;
+  const parsed = isNumber(value) ? value : Number.parseInt(value, 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}

package/dist/runtime/dashboard/utils/options.d.ts

@@ -1,5 +1,7 @@
 import type { DashboardOption } from '../types/index.js';
-/** Normalizes a single or multiple param value to its string keys, in value order. */
+/** Normalizes a single or multiple filter value to its string keys, in value order. */
 export declare function resolveDashboardOptionValues(value: unknown): string[];
 /** Unique options by value, keeping the first occurrence. */
 export declare function mergeDashboardOptions(...lists: readonly (readonly DashboardOption[])[]): DashboardOption[];
+/** The label contains the search term, ignoring case and diacritics. */
+export declare function matchesDashboardSearch(label: string, term: string): boolean;

package/dist/runtime/dashboard/utils/options.js

@@ -16,3 +16,9 @@ export function mergeDashboardOptions(...lists) {
   }
   return merged;
 }
+function normalizeDashboardSearch(value) {
+  return value.normalize("NFD").replaceAll(/[̀-ͯ]/gu, "").toLowerCase().trim();
+}
+export function matchesDashboardSearch(label, term) {
+  return normalizeDashboardSearch(label).includes(normalizeDashboardSearch(term));
+}

package/dist/runtime/dashboard/utils/remote.d.ts

@@ -0,0 +1,7 @@
+import type { QueryFunctionContext, QueryKey } from '@tanstack/vue-query';
+import type { DashboardRemoteResult } from '../types/index.js';
+/**
+ * Settles what a remote option source returned: awaits a promise, or runs a query definition's
+ * `queryFn` under the definition's own key (the page is already cached by the caller's query).
+ */
+export declare function runDashboardRemoteResult<TResult>(result: DashboardRemoteResult<TResult>, context: QueryFunctionContext<QueryKey, never>): Promise<TResult>;

package/dist/runtime/dashboard/utils/remote.js

@@ -0,0 +1,14 @@
+export async function runDashboardRemoteResult(result, context) {
+  if (!("queryKey" in result)) return result;
+  if (!result.queryFn) {
+    throw new Error(
+      "[dashboard] Remote option sources returning a query definition need a queryFn."
+    );
+  }
+  return result.queryFn({
+    ...context,
+    direction: "forward",
+    pageParam: null,
+    queryKey: result.queryKey
+  });
+}

package/dist/runtime/dashboard/utils/resource.d.ts

@@ -1,16 +1,25 @@
 import type { ShallowRef } from 'vue';
 import type { useDashboardResource } from '../composables/use-dashboard-resource.js';
 import type { DashboardSourceLike, DashboardStage } from '../types/index.js';
+import type { DashboardReadTracker } from './tracker.js';
 export type DashboardResourceSlot = ShallowRef<ReturnType<typeof useDashboardResource> | null>;
+type DashboardResourceFacade = DashboardSourceLike & {
+    kind: 'query';
+    stage: DashboardStage;
+    active: boolean;
+    filters: object;
+    controls: object;
+};
 /**
  * Public resource object returned by `stage.query(...)`. It exists before its key is known (keys
  * come from the object the `queries` builder returns), so it reads the resource runtime through a
- * slot. Reads before instantiation track the slot, which keeps dependent gates reactive.
+ * slot. Reads before instantiation track the slot, which keeps dependent gates reactive, and every
+ * `data` read is recorded by the tracker, so `requires` and `derive` know what they depend on.
  */
-export declare function createDashboardResourceFacade(stage: DashboardStage, slot: DashboardResourceSlot, defaultValue: unknown): DashboardSourceLike & {
-    kind: 'query';
+export declare function createDashboardResourceFacade(params: {
     stage: DashboardStage;
-    active: boolean;
-    params: object;
-    options: object;
-};
+    slot: DashboardResourceSlot;
+    defaultValue: unknown;
+    tracker: DashboardReadTracker;
+}): DashboardResourceFacade;
+export {};

package/dist/runtime/dashboard/utils/resource.js

@@ -1,7 +1,8 @@
 import { markRaw } from "vue";
 const emptyFacade = markRaw({});
-export function createDashboardResourceFacade(stage, slot, defaultValue) {
-  return markRaw({
+export function createDashboardResourceFacade(params) {
+  const { slot, stage, tracker } = params;
+  const facade = markRaw({
     activate() {
       slot.value?.activate();
     },
@@ -9,20 +10,24 @@ export function createDashboardResourceFacade(stage, slot, defaultValue) {
       return slot.value?.active.value ?? false;
     },
     get data() {
-      return slot.value ? slot.value.data.value : defaultValue;
+      tracker.record(facade);
+      return slot.value ? slot.value.data.value : params.defaultValue;
     },
     get error() {
-      return slot.value?.error.value ?? void 0;
+      return slot.value?.error.value;
+    },
+    get controls() {
+      return slot.value?.filters.controls ?? emptyFacade;
+    },
+    get filters() {
+      return slot.value?.filters.values ?? emptyFacade;
     },
     get id() {
       return slot.value?.id ?? "";
     },
     kind: "query",
-    get options() {
-      return slot.value?.widget.options ?? emptyFacade;
-    },
-    get params() {
-      return slot.value?.widget.values ?? emptyFacade;
+    get fetching() {
+      return slot.value?.fetching.value ?? false;
     },
     refresh: () => slot.value?.refresh() ?? Promise.resolve(),
     get refreshing() {
@@ -36,4 +41,5 @@ export function createDashboardResourceFacade(stage, slot, defaultValue) {
       return slot.value?.updatedAt.value;
     }
   });
+  return facade;
 }

package/dist/runtime/dashboard/utils/schema.d.ts

@@ -1,9 +1,14 @@
-import type { DashboardSchemaLike } from '../types/index.js';
-import type { DashboardRuntimeSchema } from '../types/runtime.js';
+import type { DashboardFilterBuilder, DashboardFilterLike, DashboardSchemaLike } from '../types/index.js';
+import type { DashboardRuntimeFiltersInput, DashboardRuntimeSchema } from '../types/runtime.js';
 /**
  * Erases the schema generics once so the runtime can invoke every builder with the contexts it
- * creates. Views are resolved here (their builder is an identity function at runtime).
+ * creates. Views keep the object they were declared with.
  */
 export declare function resolveDashboardRuntimeSchema(schema: DashboardSchemaLike): DashboardRuntimeSchema;
+/** Runs a scope's `filters` callback with the `f` builder. */
+export declare function resolveDashboardFilters(params: {
+    input: DashboardRuntimeFiltersInput | undefined;
+    builder: DashboardFilterBuilder;
+}): Record<string, DashboardFilterLike>;
 /** Dev guard mirroring the compile-time key checks, for schemas assembled without inference. */
 export declare function assertDashboardMemberKey(key: string, taken: ReadonlySet<string>, scope: string): void;

package/dist/runtime/dashboard/utils/schema.js

@@ -1,9 +1,11 @@
 const reservedKeys = /* @__PURE__ */ new Set([
   "autoRefresh",
-  "options",
-  "params",
+  "controls",
+  "filtered",
+  "filters",
   "refresh",
   "refreshing",
+  "resetFilters",
   "schema",
   "state",
   "updatedAt",
@@ -11,19 +13,22 @@ const reservedKeys = /* @__PURE__ */ new Set([
 ]);
 export function resolveDashboardRuntimeSchema(schema) {
   const input = schema;
-  const views = Object.entries(input.views?.((view) => view) ?? {});
+  const views = Object.entries(input.views ?? {});
   return {
     autoRefresh: input.autoRefresh,
     defaultView: input.defaultView ?? views[0]?.[0],
     derive: input.derive,
+    filters: input.filters,
     key: input.key,
     label: input.label,
-    params: input.params,
     queries: input.queries,
     urlPrefix: input.urlPrefix,
     views
   };
 }
+export function resolveDashboardFilters(params) {
+  return params.input?.(params.builder) ?? {};
+}
 export function assertDashboardMemberKey(key, taken, scope) {
   if (reservedKeys.has(key) || taken.has(key)) {
     throw new Error(`[dashboard] "${key}" in ${scope} is reserved or already used.`);

package/dist/runtime/dashboard/utils/state.d.ts

@@ -1,28 +1,33 @@
-import type { DashboardResourceState } from '../types/index.js';
+import type { DashboardCondition, DashboardResourceState } from '../types/index.js';
 /**
  * Combines the states of several sources the way a dependent value experiences them: any error
  * wins, then any pending source. Idle sources were not requested (gated by `requires`, or a
  * deferred query nobody activated), so they do not hold the value back unless all are idle.
+ * Disabled sources are not part of the dashboard: they are left out, and only when every source is
+ * disabled is the combination disabled too.
  */
 export declare function combineDashboardStates(states: readonly DashboardResourceState[]): DashboardResourceState;
+/** Whether an `enabled` condition holds. No condition always holds. */
+export declare function resolveDashboardCondition(condition: DashboardCondition | undefined): boolean;
 /** Oldest defined timestamp of a set of sources: they are all at least this fresh. */
 export declare function resolveDashboardUpdatedAt(values: readonly (number | undefined)[]): number | undefined;
 /** Refreshes sources in parallel and reports every failure at once. */
 export declare function refreshDashboardSources(sources: readonly {
     refresh: () => Promise<void>;
 }[]): Promise<void>;
-/** URL segment of the current view. A root param cannot use it while the dashboard has views. */
+/** URL segment of the current view. No filter can use it while the dashboard has views. */
 export declare const DASHBOARD_VIEW_URL_KEY = "view";
-/** URL segment of the auto-refresh interval. A root param cannot use it. */
+/** URL segment of the auto-refresh interval. No filter can use it. */
 export declare const DASHBOARD_REFRESH_URL_KEY = "refresh";
 /** URL key of the auto-refresh interval: `refresh`, or `<urlPrefix>.refresh`. */
 export declare function resolveDashboardRefreshKey(urlPrefix: string | undefined): string;
 /** Joins the non-empty segments of a URL key with dots. */
 export declare function joinDashboardUrlKey(...segments: readonly (string | undefined)[]): string;
 /**
- * URL key prefix of one scope, named after what it holds: none for the root (`year`), the view
- * key for a view (`consumption.currency`). `urlPrefix` namespaces both when set.
+ * URL key prefix of a dashboard's filters: none (`year`, `currency`), or `urlPrefix` when two
+ * dashboards share a page. Views add no segment: a filter key names the same state in every scope,
+ * so `year` declared by two views keeps its value across tabs.
  */
-export declare function resolveDashboardScopePrefix(urlPrefix: string | undefined, viewKey?: string): string;
+export declare function resolveDashboardScopePrefix(urlPrefix: string | undefined): string;
 /** URL key of the current view: `view`, or `<urlPrefix>.view`. */
 export declare function resolveDashboardViewKey(urlPrefix: string | undefined): string;

package/dist/runtime/dashboard/utils/state.js

@@ -1,9 +1,14 @@
 export function combineDashboardStates(states) {
-  if (states.includes("error")) return "error";
-  if (states.includes("loading")) return "loading";
-  if (states.length > 0 && states.every((state) => state === "idle")) return "idle";
+  const live = states.filter((state) => state !== "disabled");
+  if (live.length === 0) return states.length > 0 ? "disabled" : "ready";
+  if (live.includes("error")) return "error";
+  if (live.includes("loading")) return "loading";
+  if (live.every((state) => state === "idle")) return "idle";
   return "ready";
 }
+export function resolveDashboardCondition(condition) {
+  return condition === void 0 || condition();
+}
 export function resolveDashboardUpdatedAt(values) {
   let oldest;
   for (const value of values) {
@@ -24,8 +29,8 @@ export function resolveDashboardRefreshKey(urlPrefix) {
 export function joinDashboardUrlKey(...segments) {
   return segments.filter(Boolean).join(".");
 }
-export function resolveDashboardScopePrefix(urlPrefix, viewKey) {
-  return joinDashboardUrlKey(urlPrefix, viewKey);
+export function resolveDashboardScopePrefix(urlPrefix) {
+  return joinDashboardUrlKey(urlPrefix);
 }
 export function resolveDashboardViewKey(urlPrefix) {
   return joinDashboardUrlKey(urlPrefix, DASHBOARD_VIEW_URL_KEY);

package/dist/runtime/dashboard/utils/time.d.ts

@@ -13,5 +13,7 @@ export declare function formatDashboardDateTime(time: number, locale: string): s
  * line.
  */
 export declare function formatDashboardDay(time: number, now: number, locale: string): string;
+/** The date of a page header: `Wednesday, September 23, 2026`. Capitalized, since it starts a line. */
+export declare function formatDashboardToday(now: number, locale: string): string;
 /** Local start of the day of a time, used as a stable group key. */
 export declare function startOfDashboardDay(time: number): number;

package/dist/runtime/dashboard/utils/time.js

@@ -19,7 +19,13 @@ function resolveTimeFormats(locale) {
       year: "numeric"
     }),
     full: new Intl.DateTimeFormat(locale, { dateStyle: "long", timeStyle: "short" }),
-    relative: new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" })
+    relative: new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" }),
+    today: new Intl.DateTimeFormat(locale, {
+      day: "numeric",
+      month: "long",
+      weekday: "long",
+      year: "numeric"
+    })
   };
   formatsByLocale.set(locale, formats);
   return formats;
@@ -50,6 +56,10 @@ export function formatDashboardDay(time, now, locale) {
   const text = days < 2 ? formats.relative.format(-days, "day") : (sameYear ? formats.date : formats.dateWithYear).format(time);
   return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
 }
+export function formatDashboardToday(now, locale) {
+  const text = resolveTimeFormats(locale).today.format(now);
+  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+}
 export function startOfDashboardDay(time) {
   const day = new Date(time);
   day.setHours(0, 0, 0, 0);

package/dist/runtime/dashboard/utils/ui.d.ts

@@ -20,7 +20,7 @@ export declare const DASHBOARD_TABLE_CLASSES: {
  * never moves, so its divider stays aligned with the card content; the highlight is a pseudo-element
  * reaching 8px past both edges, behind the content (`isolate` keeps it inside the row).
  */
-export declare const DASHBOARD_SELECTABLE_ROW = "relative isolate before:pointer-events-none before:absolute before:inset-y-0 before:-inset-x-2 before:-z-10 before:rounded-md before:transition-colors has-[>button:hover]:before:bg-elevated/60 has-[>button:focus-visible]:before:bg-elevated/60";
+export declare const DASHBOARD_SELECTABLE_ROW = "relative isolate before:pointer-events-none before:absolute before:inset-y-0 before:-inset-x-2 before:-z-10 before:rounded-md before:transition-colors has-[>:is(button,a):hover]:before:bg-elevated/60 has-[>:is(button,a):focus-visible]:before:bg-elevated/60";
 /**
  * A row shown as selected (`selected` prop): the same tint as the hover, stronger, and an accent
  * on its start edge, both drawn around the row box.

package/dist/runtime/dashboard/utils/ui.js

@@ -15,7 +15,7 @@ export const DASHBOARD_TABLE_CLASSES = {
   th: "px-2.5 pt-0.5 pb-2 text-xs font-medium whitespace-nowrap text-dimmed first:ps-0 last:pe-0",
   wrapper: "min-w-0 overflow-auto"
 };
-export const DASHBOARD_SELECTABLE_ROW = "relative isolate before:pointer-events-none before:absolute before:inset-y-0 before:-inset-x-2 before:-z-10 before:rounded-md before:transition-colors has-[>button:hover]:before:bg-elevated/60 has-[>button:focus-visible]:before:bg-elevated/60";
+export const DASHBOARD_SELECTABLE_ROW = "relative isolate before:pointer-events-none before:absolute before:inset-y-0 before:-inset-x-2 before:-z-10 before:rounded-md before:transition-colors has-[>:is(button,a):hover]:before:bg-elevated/60 has-[>:is(button,a):focus-visible]:before:bg-elevated/60";
 export const DASHBOARD_SELECTED_ROW = "relative isolate before:pointer-events-none before:absolute before:inset-y-0 before:-inset-x-2 before:-z-10 before:rounded-md before:bg-elevated after:pointer-events-none after:absolute after:inset-y-2 after:-start-2 after:w-0.5 after:rounded-full after:bg-primary";
 export const DASHBOARD_ROW_BUTTON = "absolute inset-y-0 -inset-x-2 cursor-pointer rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset";
 export const DASHBOARD_TABLE_ROW_BUTTON = "absolute inset-0 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset";

package/dist/runtime/form/components/actions/form-actions.vue

@@ -1,11 +1,8 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
 import { computed } from "vue";
-import { getResponsiveValue } from "../../../shared/composables/use-responsive-value";
+import { useFormActionButtons } from "../../composables/use-form-action-buttons";
 import { useFormUi } from "../../composables/use-form-ui";
-import { createPublicFormApi } from "../../utils/api";
-import { invokeFormFunction, isString } from "../../utils/predicate";
-import { resolveFormText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
   runtime: { type: Object, required: true },
@@ -13,117 +10,24 @@ const props = defineProps({
 });
 const formUi = useFormUi();
 const emit = defineEmits(["cancel"]);
-const actionContext = computed(() => ({
-  actionPending: props.runtime.actionPending.value,
-  api: createPublicFormApi(props.runtime),
-  currentStep: props.runtime.currentStepIndex.value,
-  isFirstStep: props.runtime.isFirstStep.value,
-  isLastStep: props.runtime.isLastStep.value,
-  isMultiStep: props.runtime.isStepped.value
-}));
-const visibleActions = computed(
-  () => props.actions.filter((action) => action.condition?.(actionContext.value) ?? true)
-);
+const buttons = useFormActionButtons({
+  actions: () => props.actions,
+  onCancel: () => emit("cancel"),
+  runtime: props.runtime
+});
 const actionsLeft = computed(
-  () => visibleActions.value.filter((action) => resolveActionSlot(action) === "left")
+  () => buttons.visible.value.filter((action) => buttons.slot(action) === "left")
 );
 const actionsRight = computed(
-  () => visibleActions.value.filter((action) => resolveActionSlot(action) !== "left")
+  () => buttons.visible.value.filter((action) => buttons.slot(action) !== "left")
 );
-async function runAction(action) {
-  if (isBuiltInAction(action, "submit")) {
-    return;
-  }
-  if (isBuiltInAction(action, "next")) {
-    await props.runtime.nextStep();
-    return;
-  }
-  if (isBuiltInAction(action, "previous")) {
-    await props.runtime.previousStep();
-    return;
-  }
-  if (isBuiltInAction(action, "reset")) {
-    await props.runtime.reset();
-    return;
-  }
-  if (isBuiltInAction(action, "cancel")) {
-    emit("cancel");
-    return;
-  }
-  if ("action" in action) {
-    await action.action?.(actionContext.value);
-  }
-}
-function resolveActionLabel(action) {
-  return resolveFormText(action.label);
-}
-function resolveActionSlot(action) {
-  const slot = getResponsiveValue(action.slot ?? "right");
-  return slot === "left" ? "left" : "right";
-}
-function resolveActionWidth(action) {
-  const width = getResponsiveValue(action.width ?? "fit");
-  return width === "fill" ? "fill" : "fit";
-}
-function resolveActionLink(action) {
-  if (!("link" in action)) {
-    return;
-  }
-  if (isString(action.link)) {
-    return action.link;
-  }
-  const link = invokeFormFunction(action.link, [actionContext.value]);
-  return isString(link) ? link : void 0;
-}
-function isActionDisabled(action) {
-  const disabled = action.disabled?.(actionContext.value) ?? false;
-  if (disabled) {
-    return true;
-  }
-  if (!props.runtime.actionPending.value) {
-    return false;
-  }
-  return !isActionLoading(action);
-}
-function isActionLoading(action) {
-  if (!isBuiltInActionKey(action.key)) {
-    return false;
-  }
-  const pending = props.runtime.actionPending.value;
-  if (pending === null) {
-    return false;
-  }
-  return action.key === pending;
-}
-function resolveActionColor(action) {
-  if (action.color) {
-    return action.color;
-  }
-  if (action.type === "primary") {
-    return "primary";
-  }
-}
-function resolveActionVariant(action) {
-  if (action.variant) {
-    return action.variant;
-  }
-  if (action.type === "primary") {
-    return "solid";
-  }
-}
 function actionButtonClass(action) {
   return mergeFormUiClass(
-    resolveActionWidth(action) === "fill" ? "flex-1 justify-center" : void 0,
+    buttons.fills(action) ? "flex-1 justify-center" : void 0,
     formUi.ui.value.actions?.ui?.button,
     action.class
   );
 }
-function isBuiltInAction(action, key) {
-  return action.key === key;
-}
-function isBuiltInActionKey(value) {
-  return value === "reset" || value === "cancel" || value === "submit" || value === "previous" || value === "next";
-}
 </script>
 
 <template>
@@ -147,18 +51,9 @@ function isBuiltInActionKey(value) {
       <UButton
         v-for="(action, index) in actionsLeft"
         :key="action.key ?? index"
-        :type="isBuiltInAction(action, 'submit') ? 'submit' : 'button'"
-        :to="resolveActionLink(action)"
-        :label="resolveActionLabel(action)"
-        :icon="action.icon === false ? void 0 : action.icon"
-        :trailing-icon="action.trailingIcon === false ? void 0 : action.trailingIcon"
-        :color="resolveActionColor(action)"
-        :variant="resolveActionVariant(action)"
-        :size="action.size ?? formUi.controlSize.value"
+        v-bind="buttons.button(action)"
         :class="actionButtonClass(action)"
-        :disabled="isActionDisabled(action)"
-        :loading="isActionLoading(action)"
-        @click="runAction(action)"
+        @click="buttons.run(action)"
       />
     </div>
 
@@ -174,18 +69,9 @@ function isBuiltInActionKey(value) {
       <UButton
         v-for="(action, index) in actionsRight"
         :key="action.key ?? index"
-        :type="isBuiltInAction(action, 'submit') ? 'submit' : 'button'"
-        :to="resolveActionLink(action)"
-        :label="resolveActionLabel(action)"
-        :icon="action.icon === false ? void 0 : action.icon"
-        :trailing-icon="action.trailingIcon === false ? void 0 : action.trailingIcon"
-        :color="resolveActionColor(action)"
-        :variant="resolveActionVariant(action)"
-        :size="action.size ?? formUi.controlSize.value"
+        v-bind="buttons.button(action)"
         :class="actionButtonClass(action)"
-        :disabled="isActionDisabled(action)"
-        :loading="isActionLoading(action)"
-        @click="runAction(action)"
+        @click="buttons.run(action)"
       />
     </div>
   </div>

package/dist/runtime/form/components/page/form-page-actions.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/form/components/page/form-page-actions.vue

@@ -0,0 +1,40 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { computed } from "vue";
+import { useFormActionButtons } from "../../composables/use-form-action-buttons";
+import { useFormActions } from "../../composables/use-form-actions";
+import { useFormPageContext } from "../../composables/use-form-page";
+import { useFormUi } from "../../composables/use-form-ui";
+import { mergeFormUiClass } from "../../utils/ui";
+const page = useFormPageContext();
+const formUi = useFormUi();
+const pageUi = computed(() => formUi.ui.value.page?.ui);
+const actions = useFormActions({ runtime: page.root.runtime, slot: () => "right" });
+const buttons = useFormActionButtons({
+  actions: () => actions.value,
+  onCancel: page.cancel,
+  runtime: page.root.runtime
+});
+function buttonClass(action) {
+  return mergeFormUiClass(
+    buttons.fills(action) ? "flex-1 justify-center" : void 0,
+    formUi.ui.value.actions?.ui?.button,
+    action.class
+  );
+}
+</script>
+
+<template>
+  <div
+    :class="mergeFormUiClass('flex shrink-0 flex-wrap items-center gap-2', pageUi?.actions)"
+    data-form-page-actions
+  >
+    <UButton
+      v-for="(action, index) in buttons.visible.value"
+      :key="action.key ?? index"
+      v-bind="buttons.button(action)"
+      :class="buttonClass(action)"
+      @click="buttons.run(action)"
+    />
+  </div>
+</template>

package/dist/runtime/form/components/page/form-page-actions.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;