nuxt-ui-tools 1.10.1 → 1.11.0

package/dist/module.json

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

package/dist/runtime/form/components/renderer/form-field-shell.vue

@@ -14,7 +14,7 @@ import { getSchemaDirtyCheck } from "../../utils/controls";
 import { createFormFieldInstance } from "../../utils/field-instance";
 import { isFunction, isNumber, isString } from "../../utils/predicate";
 import { resolveRequired } from "../../utils/state";
-import { resolveFieldDescription, resolveFormText } from "../../utils/text";
+import { resolveFieldDescription, resolveFieldText, resolveFormText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
   field: { type: null, required: true },
@@ -25,12 +25,13 @@ const form = useFormRuntimeContext();
 const formUi = useFormUi();
 const bare = useFormFieldBare();
 const field = computed(() => createFormFieldInstance(props.field));
+const params = computed(() => form.getFieldCallbackParams(props.path, props.field));
 const label = computed(
   () => field.value.capability.has("label") && "label" in props.field ? resolveFormText(props.field.label) : void 0
 );
 const { t } = useUiToolsLocale();
 const descriptionConfig = computed(
-  () => field.value.capability.has("description") && "description" in props.field ? resolveFieldDescription(props.field.description) : void 0
+  () => field.value.capability.has("description") && "description" in props.field ? resolveFieldDescription(props.field.description, params.value) : void 0
 );
 const description = computed(
   () => descriptionConfig.value?.display === "inline" ? descriptionConfig.value.text : void 0
@@ -59,7 +60,7 @@ const shellStyle = computed(
   () => orientation.value === "horizontal" && labelWidth.value ? { "--nut-form-label-width": labelWidth.value } : void 0
 );
 const hint = computed(
-  () => field.value.capability.has("hint") && "hint" in props.field ? resolveFormText(props.field.hint) : void 0
+  () => field.value.capability.has("hint") && "hint" in props.field ? resolveFieldText(props.field.hint, params.value) : void 0
 );
 const labelExtra = computed(() => {
   if (!field.value.capability.has("hint") || !("labelExtra" in props.field)) {
@@ -78,10 +79,10 @@ const required = computed(() => {
   if (!field.value.capability.has("validation")) {
     return false;
   }
-  return resolveRequired(props.field, form.getFieldCallbackParams(props.path, props.field));
+  return resolveRequired(props.field, params.value);
 });
 const help = computed(
-  () => field.value.capability.has("hint") && "help" in props.field ? resolveFormText(props.field.help) : void 0
+  () => field.value.capability.has("hint") && "help" in props.field ? resolveFieldText(props.field.help, params.value) : void 0
 );
 const shellHelp = computed(() => props.inlineLabel ? void 0 : help.value);
 const dirty = computed(

package/dist/runtime/form/fields/text/component.vue

@@ -27,8 +27,24 @@ const model = computed({
 });
 const maskOptions = computed(() => maskDirectiveOptions(fieldProps.value.mask));
 const vOptionalMaska = (element, binding, vnode, previousVnode) => {
-  if (binding.value !== void 0 && typeof vMaska === "function") {
+  if (typeof vMaska !== "function") {
+    return;
+  }
+  if (binding.value !== void 0) {
     vMaska(element, binding, vnode, previousVnode);
+  } else if (binding.oldValue !== void 0) {
+    vMaska(
+      element,
+      {
+        dir: {},
+        instance: binding.instance,
+        modifiers: {},
+        oldValue: binding.oldValue,
+        value: { mask: null }
+      },
+      vnode,
+      previousVnode
+    );
   }
 };
 const prefix = computed(() => resolveFormText(fieldProps.value.prefix));

package/dist/runtime/form/types/field-base.d.ts

@@ -35,12 +35,12 @@ export interface FormStatefulFieldBase<TType extends FormFieldType, TValue, TCon
     }>;
     /** Label rendered by the field wrapper. */
     label?: FormText;
-    /** Optional supporting copy rendered near the control, or a tooltip/modal variant. */
-    description?: FormText | FormFieldDescription;
-    /** Optional right-side hint rendered by the field wrapper. */
-    hint?: FormText;
-    /** Optional help text rendered under the control. */
-    help?: FormText;
+    /** Optional supporting copy rendered near the control, or a tooltip/modal variant. Callbacks receive `{ ctx, deps, api }`. */
+    description?: FormText | FormFieldDescription | FormFieldCallback<FormText | FormFieldDescription, TContext, TDeps, TValue>;
+    /** Optional right-side hint rendered by the field wrapper. Callbacks receive `{ ctx, deps, api }`. */
+    hint?: FormText | FormFieldCallback<FormText, TContext, TDeps, TValue>;
+    /** Optional help text rendered under the control. Callbacks receive `{ ctx, deps, api }`. */
+    help?: FormText | FormFieldCallback<FormText, TContext, TDeps, TValue>;
     /** Optional rich content rendered beside the label. Takes precedence over `hint`. */
     labelExtra?: FormRenderable;
     /** Placeholder forwarded to controls that support placeholders. Callbacks receive `{ ctx, deps, api }`. */

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

@@ -1,9 +1,11 @@
-import type { FormFieldDescription, FormText, FormValue } from '../types/index.js';
+import type { FormText, FormValue } from '../types/index.js';
 export declare function resolveFormText(text: FormText | undefined): string | undefined;
+/** Resolves field copy that is static, lazy, or computed from the field callback parameters. */
+export declare function resolveFieldText(text: FormValue, params: FormValue): string | undefined;
 export declare function resolveFormBoundaryText(value: FormValue): string | undefined;
 export interface ResolvedFieldDescription {
     text: string;
     display: 'inline' | 'tooltip' | 'modal';
     title?: string;
 }
-export declare function resolveFieldDescription(value: FormText | FormFieldDescription | undefined): ResolvedFieldDescription | undefined;
+export declare function resolveFieldDescription(description: FormValue, params: FormValue): ResolvedFieldDescription | undefined;

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

@@ -9,6 +9,9 @@ export function resolveFormText(text) {
   }
   return text;
 }
+export function resolveFieldText(text, params) {
+  return resolveFormBoundaryText(isFunction(text) ? invokeFormFunction(text, [params]) : text);
+}
 export function resolveFormBoundaryText(value) {
   if (isString(value)) {
     return value;
@@ -21,20 +24,20 @@ export function resolveFormBoundaryText(value) {
     return isString(resolved) || isNumber(resolved) ? String(resolved) : void 0;
   }
 }
-export function resolveFieldDescription(value) {
-  if (value === void 0) {
-    return void 0;
-  }
-  if (isDescriptionConfig(value)) {
-    const text2 = resolveFormText(value.text);
+const DESCRIPTION_DISPLAYS = ["inline", "tooltip", "modal"];
+export function resolveFieldDescription(description, params) {
+  const value = isFunction(description) ? invokeFormFunction(description, [params]) : description;
+  if (isRecord(value) && "text" in value) {
+    const text2 = resolveFormBoundaryText(value.text);
     if (!text2) {
       return void 0;
     }
-    return { display: value.display ?? "inline", text: text2, title: resolveFormText(value.title) };
+    return {
+      display: DESCRIPTION_DISPLAYS.find((display) => display === value.display) ?? "inline",
+      text: text2,
+      title: resolveFormBoundaryText(value.title)
+    };
   }
-  const text = resolveFormText(value);
+  const text = resolveFormBoundaryText(value);
   return text ? { display: "inline", text } : void 0;
 }
-function isDescriptionConfig(value) {
-  return isRecord(value) && "text" in value;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",