nuxt-ui-tools 1.10.0 → 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.0",
+  "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/composables/use-field-control.d.ts

@@ -30,7 +30,7 @@ export declare function useFieldControl<TField extends FormField>(field: () => T
         activate: () => void;
         add: (option: FormValue) => import("../utils/options.js").ResolvedFormOption;
         creatable: import("vue").ComputedRef<boolean>;
-        create: (label: string) => Promise<import("../utils/options.js").ResolvedFormOption | null>;
+        create: (label?: string) => Promise<import("../utils/options.js").ResolvedFormOption | null>;
         createLabel: import("vue").ComputedRef<string | undefined>;
         creating: import("vue").ComputedRef<boolean>;
         disableOnLoading: import("vue").ComputedRef<boolean>;

package/dist/runtime/form/composables/use-field-options.d.ts

@@ -12,7 +12,7 @@ export declare function useFieldOptions(params: {
     activate: () => void;
     add: (option: FormValue) => ResolvedFormOption;
     creatable: ComputedRef<boolean>;
-    create: (label: string) => Promise<ResolvedFormOption | null>;
+    create: (label?: string) => Promise<ResolvedFormOption | null>;
     createLabel: ComputedRef<string | undefined>;
     creating: ComputedRef<boolean>;
     disableOnLoading: ComputedRef<boolean>;

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

@@ -46,7 +46,10 @@ export function useFieldOptions(params) {
     }
     return resolveTrackedOptionSource(params.field(), params.callbackParams.value);
   });
-  const resolvedSource = computed(() => trackedOptionSource.value.source);
+  const resolvedSource = computed(() => {
+    const { source } = trackedOptionSource.value;
+    return isRuntimeQueryOptions(source) && isDisabledQueryOptions(source) ? [] : source;
+  });
   const contextResources = computed(() => {
     const { ctx } = params.callbackParams.value;
     if (!isRecord(ctx)) {
@@ -260,8 +263,8 @@ export function useFieldOptions(params) {
     return normalized;
   }
   async function create(label) {
-    const normalizedLabel = label.trim();
-    if (!normalizedLabel || creating.value) {
+    const normalizedLabel = label?.trim() ?? "";
+    if (!isUndefined(label) && !normalizedLabel || creating.value) {
       return null;
     }
     const createOption = optionConfig.value?.create;
@@ -435,6 +438,9 @@ function trackContextAccess(ctx, contextKeys) {
     }
   });
 }
+function isDisabledQueryOptions(source) {
+  return Object.getOwnPropertyDescriptor(source, "enabled")?.value === false;
+}
 function isRuntimeQueryOptions(value) {
   if (!isRecord(value)) {
     return false;

package/dist/runtime/form/fields/auto-complete/component.vue

@@ -77,7 +77,7 @@ async function handleCreate(label) {
   await options.create(label);
 }
 async function handleCreateAction() {
-  await handleCreate(searchTerm.value);
+  await options.create(searchTerm.value.trim() || void 0);
 }
 async function handleNativeCreate(label) {
   const normalizedLabel = label.trim();

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

@@ -85,7 +85,7 @@ async function handleCreate(label) {
   await options.create(label);
 }
 async function handleCreateAction() {
-  await handleCreate(searchTerm.value);
+  await options.create(searchTerm.value.trim() || void 0);
 }
 async function handleNativeCreate(label) {
   const normalizedLabel = label.trim();

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/api.d.ts

@@ -86,8 +86,11 @@ export interface FormFieldOptionsApi<TOption = FormValue> {
     error: () => FormValue | null;
     /** Refreshes the option source when it is async or query-backed. */
     refresh: () => Promise<void>;
-    /** Creates a new option when the field configured an option creation handler. */
-    create: (label: string) => Promise<TOption | null>;
+    /**
+     * Creates a new option when the field configured an option creation handler. A blank typed label
+     * creates nothing; calling it without a label runs the handler with an empty one.
+     */
+    create: (label?: string) => Promise<TOption | null>;
     /** Returns hydrated options for the current selection, including values outside loaded pages. */
     selected: () => readonly TOption[];
     /** True when the field loads options remotely. */

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/types/options-runtime.d.ts

@@ -49,5 +49,6 @@ export interface FormOptionRuntimeState {
     /** Loads the direct children of a remote tree option. */
     loadChildren: (option: ResolvedFormOption) => Promise<void>;
     add: (option: FormValue) => void;
-    create: (label: string) => Promise<ResolvedFormOption | null>;
+    /** Creates an option; a blank typed label creates nothing, and no label runs the handler with an empty one. */
+    create: (label?: string) => Promise<ResolvedFormOption | null>;
 }

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

@@ -33,7 +33,10 @@ export type FormOptionsSource<TOption, TContext = NonNullable<unknown>, TDeps =
  * Option creation hook for fields that can create a missing option from user input.
  */
 export interface FormCreateOptionParams<TContext = NonNullable<unknown>, TDeps = FormDependencies, TValue = FormValue, TOption = FormValue> extends FormFieldCallbackParams<TContext, TDeps, TValue, TOption> {
-    /** User-entered label that should be converted into a concrete option. */
+    /**
+     * User-entered label that should be converted into a concrete option. Empty when the explicit
+     * create action runs without a search term, such as a creator that opens its own form.
+     */
     label: string;
 }
 export interface FormCreateOption<TOption, TContext = NonNullable<unknown>, TDeps = FormDependencies, TValue = FormValue> {

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.0",
+  "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",