nuxt-ui-tools 1.0.0 → 1.1.0

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

@@ -0,0 +1,21 @@
+/**
+ * SVG paths of a sparkline: the line, and the area under it closed on the baseline. `null` values
+ * leave gaps (each run of defined values is its own segment). The vertical range spans the data,
+ * so small variations stay visible.
+ */
+export declare function resolveDashboardSparkline(values: readonly (number | null | undefined)[]): {
+    area: string;
+    line: string;
+} | null;
+/**
+ * Mini bars in the sparkline viewBox, one per value, scaled from zero to the largest value (a bar
+ * compares magnitudes, so its baseline stays at zero). `null` values leave an empty slot; the last
+ * bar is flagged, the latest period being the one a KPI reports.
+ */
+export declare function resolveDashboardSparkBars(values: readonly (number | null | undefined)[]): {
+    height: number;
+    last: boolean;
+    width: number;
+    x: number;
+    y: number;
+}[] | null;

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

@@ -0,0 +1,53 @@
+const WIDTH = 100;
+const HEIGHT = 32;
+const INSET = 2;
+export function resolveDashboardSparkline(values) {
+  const finite = values.filter((value) => Number.isFinite(value));
+  if (finite.length === 0) return null;
+  const min = Math.min(...finite);
+  const max = Math.max(...finite);
+  const step = values.length > 1 ? WIDTH / (values.length - 1) : 0;
+  const y = (value) => max === min ? HEIGHT / 2 : INSET + (1 - (value - min) / (max - min)) * (HEIGHT - INSET * 2);
+  const runs = [];
+  let run = [];
+  values.forEach((value, index) => {
+    if (value === null || value === void 0 || !Number.isFinite(value)) {
+      if (run.length) runs.push(run);
+      run = [];
+      return;
+    }
+    run.push([values.length > 1 ? index * step : WIDTH / 2, y(value)]);
+  });
+  if (run.length) runs.push(run);
+  const line = runs.map(toPath).join("");
+  const area = runs.filter((points) => points.length > 1).map((points) => {
+    const first = points[0];
+    const last = points.at(-1);
+    if (!first || !last) return "";
+    return `${toPath(points)}L${last[0].toFixed(2)},${HEIGHT}L${first[0].toFixed(2)},${HEIGHT}Z`;
+  }).join("");
+  return { area, line };
+}
+export function resolveDashboardSparkBars(values) {
+  const finite = values.filter((value) => Number.isFinite(value));
+  if (finite.length === 0) return null;
+  const max = Math.max(0, ...finite);
+  const slot = WIDTH / Math.max(1, values.length);
+  const width = Math.max(1, slot * 0.62);
+  return values.flatMap((value, index) => {
+    if (value === null || value === void 0 || !Number.isFinite(value)) return [];
+    const height = max > 0 ? Math.max(1.5, Math.max(0, value) / max * (HEIGHT - INSET)) : 1.5;
+    return [
+      {
+        height: Number(height.toFixed(2)),
+        last: index === values.length - 1,
+        width: Number(width.toFixed(2)),
+        x: Number((index * slot + (slot - width) / 2).toFixed(2)),
+        y: Number((HEIGHT - height).toFixed(2))
+      }
+    ];
+  });
+}
+function toPath(points) {
+  return points.map(([x, y], index) => `${index ? "L" : "M"}${x.toFixed(2)},${y.toFixed(2)}`).join("");
+}

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

@@ -0,0 +1,28 @@
+import type { 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.
+ */
+export declare function combineDashboardStates(states: readonly DashboardResourceState[]): DashboardResourceState;
+/** 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. */
+export declare const DASHBOARD_VIEW_URL_KEY = "view";
+/** URL segment of the auto-refresh interval. A root param cannot 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.
+ */
+export declare function resolveDashboardScopePrefix(urlPrefix: string | undefined, viewKey?: string): 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

@@ -0,0 +1,32 @@
+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";
+  return "ready";
+}
+export function resolveDashboardUpdatedAt(values) {
+  let oldest;
+  for (const value of values) {
+    if (value !== void 0 && (oldest === void 0 || value < oldest)) oldest = value;
+  }
+  return oldest;
+}
+export async function refreshDashboardSources(sources) {
+  const results = await Promise.allSettled(sources.map((source) => source.refresh()));
+  const errors = results.flatMap((result) => result.status === "rejected" ? [result.reason] : []);
+  if (errors.length > 0) throw new AggregateError(errors, "Dashboard refresh failed");
+}
+export const DASHBOARD_VIEW_URL_KEY = "view";
+export const DASHBOARD_REFRESH_URL_KEY = "refresh";
+export function resolveDashboardRefreshKey(urlPrefix) {
+  return joinDashboardUrlKey(urlPrefix, DASHBOARD_REFRESH_URL_KEY);
+}
+export function joinDashboardUrlKey(...segments) {
+  return segments.filter(Boolean).join(".");
+}
+export function resolveDashboardScopePrefix(urlPrefix, viewKey) {
+  return joinDashboardUrlKey(urlPrefix, viewKey);
+}
+export function resolveDashboardViewKey(urlPrefix) {
+  return joinDashboardUrlKey(urlPrefix, DASHBOARD_VIEW_URL_KEY);
+}

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

@@ -0,0 +1,17 @@
+import type { DashboardTimeValue } from '../types/index.js';
+/** Epoch milliseconds of a time value; `NaN` when it cannot be parsed. */
+export declare function toDashboardTime(value: DashboardTimeValue): number;
+/**
+ * Short relative time: `now`, `3 min ago`, `2 hr ago`, `yesterday`, `4 days ago`, then the date
+ * itself from a week on (with the year when it differs from `now`).
+ */
+export declare function formatDashboardRelativeTime(time: number, now: number, locale: string): string;
+/** Full date and time, for tooltips next to a relative time. */
+export declare function formatDashboardDateTime(time: number, locale: string): string;
+/**
+ * Day heading of a feed group: `Today`, `Yesterday`, then the date. Capitalized, since it starts a
+ * line.
+ */
+export declare function formatDashboardDay(time: number, 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

@@ -0,0 +1,60 @@
+import { isDate, isNumber } from "../../shared/utils/predicate.js";
+const MINUTE = 6e4;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+export function toDashboardTime(value) {
+  if (isNumber(value)) return value;
+  if (isDate(value)) return value.getTime();
+  return Date.parse(value);
+}
+const formatsByLocale = /* @__PURE__ */ new Map();
+function resolveTimeFormats(locale) {
+  const cached = formatsByLocale.get(locale);
+  if (cached) return cached;
+  const formats = {
+    date: new Intl.DateTimeFormat(locale, { day: "numeric", month: "short" }),
+    dateWithYear: new Intl.DateTimeFormat(locale, {
+      day: "numeric",
+      month: "short",
+      year: "numeric"
+    }),
+    full: new Intl.DateTimeFormat(locale, { dateStyle: "long", timeStyle: "short" }),
+    relative: new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" })
+  };
+  formatsByLocale.set(locale, formats);
+  return formats;
+}
+export function formatDashboardRelativeTime(time, now, locale) {
+  if (!Number.isFinite(time)) return "";
+  const formats = resolveTimeFormats(locale);
+  const elapsed = now - time;
+  const distance = Math.abs(elapsed);
+  const sign = elapsed >= 0 ? -1 : 1;
+  if (distance < 45e3) return formats.relative.format(0, "second");
+  if (distance < 45 * MINUTE)
+    return formats.relative.format(sign * Math.round(distance / MINUTE), "minute");
+  if (distance < 22 * HOUR)
+    return formats.relative.format(sign * Math.round(distance / HOUR), "hour");
+  if (distance < 7 * DAY) return formats.relative.format(sign * dayDistance(time, now), "day");
+  const sameYear = new Date(time).getFullYear() === new Date(now).getFullYear();
+  return (sameYear ? formats.date : formats.dateWithYear).format(time);
+}
+export function formatDashboardDateTime(time, locale) {
+  return Number.isFinite(time) ? resolveTimeFormats(locale).full.format(time) : "";
+}
+export function formatDashboardDay(time, now, locale) {
+  if (!Number.isFinite(time)) return "";
+  const formats = resolveTimeFormats(locale);
+  const days = dayDistance(time, now);
+  const sameYear = new Date(time).getFullYear() === new Date(now).getFullYear();
+  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 startOfDashboardDay(time) {
+  const day = new Date(time);
+  day.setHours(0, 0, 0, 0);
+  return day.getTime();
+}
+function dayDistance(time, now) {
+  return Math.round(Math.abs(startOfDashboardDay(now) - startOfDashboardDay(time)) / DAY);
+}

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

@@ -0,0 +1,12 @@
+import type { DashboardSourceLike } from '../types/index.js';
+/**
+ * Records which sources a derived value reads while it evaluates. One tracker is shared by the
+ * whole dashboard; evaluation is synchronous, so a single "current collector" slot is enough.
+ */
+export declare function createDashboardReadTracker(): {
+    record(source: DashboardSourceLike): void;
+    run<TResult>(reads: Set<DashboardSourceLike>, evaluate: () => TResult): TResult;
+};
+export type DashboardReadTracker = ReturnType<typeof createDashboardReadTracker>;
+/** The `data` object handed to `derive`: each property reads a source's data and records the read. */
+export declare function createDashboardTrackedData(sources: ReadonlyMap<string, DashboardSourceLike>, tracker: DashboardReadTracker): object;

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

@@ -0,0 +1,31 @@
+import { markRaw } from "vue";
+export function createDashboardReadTracker() {
+  let current = null;
+  return {
+    record(source) {
+      current?.add(source);
+    },
+    run(reads, evaluate) {
+      const previous = current;
+      current = reads;
+      try {
+        return evaluate();
+      } finally {
+        current = previous;
+      }
+    }
+  };
+}
+export function createDashboardTrackedData(sources, tracker) {
+  const data = {};
+  for (const [key, source] of sources) {
+    Object.defineProperty(data, key, {
+      enumerable: true,
+      get() {
+        tracker.record(source);
+        return source.data;
+      }
+    });
+  }
+  return markRaw(data);
+}

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

@@ -0,0 +1,38 @@
+import type { AppConfig } from 'nuxt/schema';
+import type { DashboardUiConfig } from '../types/index.js';
+/**
+ * Resolves the classes of one block part: library defaults, then each override layer
+ * (app config, then the `ui` prop), merged with tailwind-merge so later layers win.
+ */
+export declare function resolveDashboardClasses<TKey extends string>(defaults: Record<TKey, string>, ...layers: (Partial<Record<NoInfer<TKey>, string>> | undefined)[]): Record<TKey, string>;
+/** Default classes of `UiDashboardTable`, also used by the card's "view as table" action. */
+export declare const DASHBOARD_TABLE_CLASSES: {
+    bar: string;
+    head: string;
+    row: string;
+    table: string;
+    td: string;
+    th: string;
+    wrapper: string;
+};
+/**
+ * A row with a `select` listener: highlighted on hover and keyboard focus of its button. The row box
+ * 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";
+/**
+ * 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.
+ */
+export declare 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";
+/**
+ * Button stretched over a selectable row, and over its highlight. It is the row's only interactive
+ * element, so the row keeps its list semantics and its content stays plain text; controls inside
+ * the row sit above it.
+ */
+export declare 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";
+/** Button stretched over a table row. It stays inside the row: the table may scroll sideways. */
+export declare const DASHBOARD_TABLE_ROW_BUTTON = "absolute inset-0 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset";
+/** Reads `appConfig.nuxtUiTools.dashboard`; apps that do not declare it get no overrides. */
+export declare function resolveAppDashboardUi(config: Pick<AppConfig, 'nuxtUiTools'>): DashboardUiConfig;

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

@@ -0,0 +1,24 @@
+import { twMerge } from "tailwind-merge";
+export function resolveDashboardClasses(defaults, ...layers) {
+  const resolved = { ...defaults };
+  for (const key in defaults) {
+    resolved[key] = twMerge(defaults[key], ...layers.map((layer) => layer?.[key]));
+  }
+  return resolved;
+}
+export const DASHBOARD_TABLE_CLASSES = {
+  bar: "h-1.5 overflow-hidden rounded-full bg-[var(--nut-dash-track)]",
+  head: "sticky top-0 z-[1] bg-default",
+  row: "border-t border-[var(--nut-dash-grid)]",
+  table: "w-full border-collapse text-[13px]",
+  td: "px-2.5 py-2 text-muted first:ps-0 last:pe-0",
+  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_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";
+export function resolveAppDashboardUi(config) {
+  return config.nuxtUiTools?.dashboard ?? {};
+}

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

@@ -0,0 +1,2 @@
+/** Runs `callback` once, when `element` first nears the viewport. Returns a stop function. */
+export declare function observeDashboardVisibility(element: Element, callback: () => void): () => void;

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

@@ -0,0 +1,25 @@
+const callbacks = /* @__PURE__ */ new WeakMap();
+let observer = null;
+function getVisibilityObserver() {
+  observer ??= new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        const callback = callbacks.get(entry.target);
+        unobserveDashboardVisibility(entry.target);
+        callback?.();
+      }
+    },
+    { rootMargin: "200px" }
+  );
+  return observer;
+}
+function unobserveDashboardVisibility(element) {
+  callbacks.delete(element);
+  observer?.unobserve(element);
+}
+export function observeDashboardVisibility(element, callback) {
+  callbacks.set(element, callback);
+  getVisibilityObserver().observe(element);
+  return () => unobserveDashboardVisibility(element);
+}

package/dist/runtime/form/components/root/form.vue

@@ -293,7 +293,7 @@ function getSchemaSyncInput(schema) {
 function getSchemaValidationMode(schema) {
   const controls = getSchemaControls(schema);
   const value = controls ? Object.getOwnPropertyDescriptor(controls, "validate")?.value : void 0;
-  return value === false || value === "required" || value === "rules" ? value : true;
+  return value === false || value === "required" || value === "validators" ? value : true;
 }
 function getSchemaControls(schema) {
   if (!isRecord(schema)) {

package/dist/runtime/form/composables/use-form-validation.d.ts

@@ -3,9 +3,8 @@ import type { FormFieldApiFactory } from './use-form-state.js';
 /**
  * Connects schema-owned field rules to Regle's validation tree.
  *
- * Regle owns validation execution, dirty state, async completion, and error collection. The
- * package-specific callback rules are converted to native Regle rules at the schema boundary,
- * so renderers only consume the resulting field errors.
+ * Regle owns validation execution, dirty state, async completion, and error collection, so
+ * renderers only consume the resulting field errors.
  */
 export declare function useFormValidation(params: {
     schema: () => FormValue;

package/dist/runtime/form/composables/use-form-validation.js

@@ -1,18 +1,11 @@
 import { useRegle } from "@regle/core";
-import { withAsync, withMessage } from "@regle/rules";
+import { withMessage } from "@regle/rules";
 import { computed, nextTick, reactive, ref, unref, watch } from "vue";
 import { calendarSeedFromValue, isDateFamilyRange } from "../fields/date-family/utils.js";
 import { resolveFieldDependencies } from "../utils/dependencies.js";
 import { createFormFieldInstance } from "../utils/field-instance.js";
 import { getPathValue, isRecord, pathSegments } from "../utils/path.js";
-import {
-  isBoolean,
-  isFunction,
-  isNumber,
-  isObject,
-  isString,
-  isUndefined
-} from "../utils/predicate.js";
+import { isBoolean, isFunction, isNumber, isObject, isString } from "../utils/predicate.js";
 import {
   fieldPath,
   getArrayItemFields,
@@ -27,12 +20,11 @@ import {
   resolveRequiredMessage,
   shouldRenderField
 } from "../utils/state.js";
-import { resolveFormBoundaryText } from "../utils/text.js";
+import { resolveFormBoundaryText, resolveFormText } from "../utils/text.js";
 export function useFormValidation(params) {
   const customErrors = ref([]);
   const touchedPaths = ref([]);
   const pendingPaths = ref(/* @__PURE__ */ new Map());
-  const dynamicMessages = ref(/* @__PURE__ */ new Map());
   const validatedMessages = ref(/* @__PURE__ */ new Map());
   const validationRuns = /* @__PURE__ */ new Map();
   const regle = useRegle(
@@ -40,7 +32,6 @@ export function useFormValidation(params) {
     () => buildRegleRules({
       apiFactory: params.apiFactory,
       context: params.context,
-      dynamicMessages,
       getDateMaxMessage: params.getDateMaxMessage,
       getDateMinMessage: params.getDateMinMessage,
       getRequiredMessage: params.getRequiredMessage,
@@ -57,7 +48,6 @@ export function useFormValidation(params) {
     () => buildRegleRules({
       apiFactory: params.apiFactory,
       context: params.context,
-      dynamicMessages,
       getDateMaxMessage: params.getDateMaxMessage,
       getDateMinMessage: params.getDateMinMessage,
       getRequiredMessage: params.getRequiredMessage,
@@ -75,7 +65,6 @@ export function useFormValidation(params) {
     () => buildPrimitiveItemRules({
       apiFactory: params.apiFactory,
       context: params.context,
-      dynamicMessages,
       getDateMaxMessage: params.getDateMaxMessage,
       getDateMinMessage: params.getDateMinMessage,
       getRequiredMessage: params.getRequiredMessage,
@@ -92,7 +81,6 @@ export function useFormValidation(params) {
     () => buildPrimitiveItemRules({
       apiFactory: params.apiFactory,
       context: params.context,
-      dynamicMessages,
       getDateMaxMessage: params.getDateMaxMessage,
       getDateMinMessage: params.getDateMinMessage,
       getRequiredMessage: params.getRequiredMessage,
@@ -164,7 +152,6 @@ export function useFormValidation(params) {
     }
     resetRegleRoots();
     const paths = collectFormFieldsPathsForSchema(params.schema(), params.state);
-    clearDynamicMessages(paths);
     clearValidatedMessages(paths);
     const prepared = prepareReglePaths(
       { items: itemsRegle.r$, main: regle.r$ },
@@ -214,7 +201,6 @@ export function useFormValidation(params) {
     if (params.getValidationMode() === false) {
       return true;
     }
-    clearDynamicMessages(paths);
     clearValidatedMessages(paths);
     const prepared = prepareReglePaths(
       { items: itemsRegle.r$, main: regle.r$ },
@@ -282,7 +268,6 @@ export function useFormValidation(params) {
     if (!path) {
       customErrors.value = [];
       touchedPaths.value = [];
-      dynamicMessages.value = /* @__PURE__ */ new Map();
       validatedMessages.value = /* @__PURE__ */ new Map();
       resetRegleRoots();
       return;
@@ -294,11 +279,6 @@ export function useFormValidation(params) {
     touchedPaths.value = touchedPaths.value.filter(
       (touchedPath) => touchedPath !== key && !touchedPath.startsWith(`${key}.`)
     );
-    dynamicMessages.value = new Map(
-      [...dynamicMessages.value.entries()].filter(
-        ([messageKey]) => !messageKey.startsWith(`${key}:`)
-      )
-    );
     validatedMessages.value = new Map(
       [...validatedMessages.value.entries()].filter(
         ([messagePath]) => messagePath !== key && !messagePath.startsWith(`${key}.`)
@@ -308,17 +288,9 @@ export function useFormValidation(params) {
   function clearValidationState() {
     customErrors.value = [];
     touchedPaths.value = [];
-    dynamicMessages.value = /* @__PURE__ */ new Map();
     validatedMessages.value = /* @__PURE__ */ new Map();
     resetRegleRoots();
   }
-  function clearDynamicMessages(paths) {
-    dynamicMessages.value = new Map(
-      [...dynamicMessages.value.entries()].filter(
-        ([messageKey]) => !paths.some((path) => messageKey.startsWith(`${path}:`))
-      )
-    );
-  }
   function clearValidatedMessages(paths) {
     if (!paths.length) {
       return;
@@ -500,9 +472,7 @@ function isRegleRuleTreeNode(value) {
 }
 function buildLeafRules(params) {
   const output = {};
-  const validation = Object.getOwnPropertyDescriptor(params.field, "validation")?.value;
-  const key = params.path.join(".");
-  if (params.mode !== "rules" && resolveRequired(params.field, params.callbackParams)) {
+  if (params.mode !== "validators" && resolveRequired(params.field, params.callbackParams)) {
     output.required = withMessage(
       (value) => !isEmptyValue(value),
       resolveRequiredMessage(params.field, params.getRequiredMessage?.())
@@ -512,6 +482,7 @@ function buildLeafRules(params) {
     return output;
   }
   applyDateBoundsRules(output, params);
+  applyPasswordRequirementRules(output, params);
   const authoredValidators = "validators" in params.field ? params.field.validators : void 0;
   let validators;
   if (isValidatorMap(authoredValidators)) {
@@ -522,96 +493,37 @@ function buildLeafRules(params) {
   if (validators) {
     for (const name in validators) {
       const rule = validators[name];
-      if (rule) {
+      if (rule && (params.includeAsync || !isAsyncValidator(rule))) {
         output[name] = rule;
       }
     }
   }
-  const authoredRules = isRecord(validation) ? Object.getOwnPropertyDescriptor(validation, "rules")?.value : void 0;
-  if (!Array.isArray(authoredRules)) {
-    return output;
-  }
-  authoredRules.forEach((rule, index) => {
-    if (!isRecord(rule)) {
-      return;
-    }
-    const validate = Object.getOwnPropertyDescriptor(rule, "validate")?.value;
-    if (!isFunction(validate)) {
-      return;
-    }
-    if (!params.includeAsync && isAsyncFunction(validate)) {
-      return;
-    }
-    const ruleName = resolveRuleName(rule, index);
-    const messageKey = `${key}:${ruleName}`;
-    function message() {
-      return params.dynamicMessages.value.get(messageKey) ?? resolveRuleMessage(rule, params.field);
-    }
-    if (isAsyncFunction(validate)) {
-      output[ruleName] = withMessage(
-        withAsync(
-          async () => resolveRuleResult(
-            await validate({ ...params.callbackParams, api: params.callbackParams.api }),
-            messageKey,
-            params.dynamicMessages
-          )
-        ),
-        message
-      );
-    } else {
-      output[ruleName] = withMessage(
-        () => resolveRuleResult(
-          validate({ ...params.callbackParams, api: params.callbackParams.api }),
-          messageKey,
-          params.dynamicMessages
-        ),
-        message
-      );
-    }
-  });
   return output;
 }
-function isValidatorMap(value) {
-  return isObject(value);
-}
-function resolveRuleResult(result, messageKey, dynamicMessages) {
-  if (isString(result)) {
-    setDynamicMessage(dynamicMessages, messageKey, result);
-    return false;
+function applyPasswordRequirementRules(output, params) {
+  if (params.field.type !== "password") {
+    return;
   }
-  clearDynamicMessage(dynamicMessages, messageKey);
-  return result === true || result === null || isUndefined(result);
-}
-function isAsyncFunction(value) {
-  return Object.getPrototypeOf(value)?.constructor?.name === "AsyncFunction";
-}
-function setDynamicMessage(messages, key, value) {
-  const next = new Map(messages.value);
-  next.set(key, value);
-  messages.value = next;
-}
-function clearDynamicMessage(messages, key) {
-  if (!messages.value.has(key)) {
+  const authoredProps = Object.getOwnPropertyDescriptor(params.field, "props")?.value;
+  const resolvedProps = isFunction(authoredProps) ? authoredProps(params.callbackParams) : authoredProps;
+  if (!isObject(resolvedProps) || !Array.isArray(resolvedProps.requirements)) {
     return;
   }
-  const next = new Map(messages.value);
-  next.delete(key);
-  messages.value = next;
+  for (const requirement of resolvedProps.requirements) {
+    output[`requirement:${requirement.key}`] = withMessage(
+      (value) => isEmptyValue(value) || isString(value) && requirement.validate(value),
+      resolveFormText(requirement.label) ?? requirement.key
+    );
+  }
 }
-function resolveRuleName(rule, index) {
-  const name = Object.getOwnPropertyDescriptor(rule, "name")?.value;
-  return isString(name) && name.length ? name : `rule-${index + 1}`;
+function isValidatorMap(value) {
+  return isObject(value);
 }
-function resolveRuleMessage(rule, field) {
-  const message = Object.getOwnPropertyDescriptor(rule, "message")?.value;
-  if (isFunction(message)) {
-    return String(message());
-  }
-  if (isString(message) || isNumber(message)) {
-    return String(message);
+function isAsyncValidator(rule) {
+  if (isObject(rule)) {
+    return rule._async === true;
   }
-  const name = Object.getOwnPropertyDescriptor(rule, "name")?.value;
-  return isString(name) ? `Invalid value for ${name}.` : `Invalid value for ${field.key}.`;
+  return isFunction(rule) && Object.getPrototypeOf(rule)?.constructor?.name === "AsyncFunction";
 }
 function resolveRegleStatusErrors(status) {
   const errors = readReactiveProperty(status, "$errors");

package/dist/runtime/form/composables/use-form.js

@@ -162,7 +162,7 @@ function getSchemaSyncInput(schema) {
 function getSchemaValidationMode(schema) {
   const controls = getSchemaControls(schema);
   const value = controls ? Object.getOwnPropertyDescriptor(controls, "validate")?.value : void 0;
-  return value === false || value === "required" || value === "rules" ? value : true;
+  return value === false || value === "required" || value === "validators" ? value : true;
 }
 function getSchemaControls(schema) {
   if (!isRecord(schema)) {