nuxt-ui-tools 1.3.0 → 1.4.0

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

@@ -0,0 +1,114 @@
+import type { FormPageSectionState } from '../types/index.js';
+import type { useFormRoot } from './use-form-root.js';
+/**
+ * State shared by a form page and its parts: the visible sections and where each stands, the
+ * section in view, the navigation summary, and the actions a part can take on a section.
+ */
+export declare function useFormPage(params: {
+    root: ReturnType<typeof useFormRoot>;
+    /** The page element, where the lookup of the scroll container starts. */
+    element: () => HTMLElement | null;
+    hash: () => boolean;
+}): {
+    active: import("vue").Ref<string | undefined, string | undefined>;
+    cancel: () => void;
+    dirtyCheck: import("vue").ComputedRef<boolean>;
+    items: import("vue").ComputedRef<{
+        entry: import("../types/index.js").FormPageSectionEntry;
+        section: FormPageSectionState;
+    }[]>;
+    modified: import("vue").ComputedRef<number>;
+    navigationTitle: import("vue").ComputedRef<string | undefined>;
+    register: (key: string, element: HTMLElement) => () => void;
+    remaining: import("vue").ComputedRef<number>;
+    resetSection: (key: string) => Promise<void>;
+    root: {
+        cancel: () => void;
+        contextError: import("vue").ComputedRef<string | undefined>;
+        contextLoading: import("vue").ComputedRef<boolean>;
+        contextPending: import("vue").ComputedRef<boolean>;
+        formUi: {
+            controlSize: import("vue").ComputedRef<import("../types/index.js").FormControlSize>;
+            density: import("vue").ComputedRef<import("../types/index.js").FormDensity>;
+            ui: import("vue").ComputedRef<import("../types/index.js").FormUiConfig>;
+        };
+        input: import("vue").ComputedRef<import("../../shared/index.js").GenericObject | undefined>;
+        refreshContext: () => Promise<void>;
+        runtime: import("../types/index.js").FormRuntime;
+        schema: import("vue").ComputedRef<{}>;
+        submit: () => Promise<void>;
+        validationMode: import("vue").ComputedRef<import("../types/index.js").FormValidationMode>;
+    };
+    scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
+    sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
+    stickyOffset: import("vue").Ref<number, number>;
+};
+export declare function provideFormPage(page: ReturnType<typeof useFormPage>): {
+    active: import("vue").Ref<string | undefined, string | undefined>;
+    cancel: () => void;
+    dirtyCheck: import("vue").ComputedRef<boolean>;
+    items: import("vue").ComputedRef<{
+        entry: import("../types/index.js").FormPageSectionEntry;
+        section: FormPageSectionState;
+    }[]>;
+    modified: import("vue").ComputedRef<number>;
+    navigationTitle: import("vue").ComputedRef<string | undefined>;
+    register: (key: string, element: HTMLElement) => () => void;
+    remaining: import("vue").ComputedRef<number>;
+    resetSection: (key: string) => Promise<void>;
+    root: {
+        cancel: () => void;
+        contextError: import("vue").ComputedRef<string | undefined>;
+        contextLoading: import("vue").ComputedRef<boolean>;
+        contextPending: import("vue").ComputedRef<boolean>;
+        formUi: {
+            controlSize: import("vue").ComputedRef<import("../types/index.js").FormControlSize>;
+            density: import("vue").ComputedRef<import("../types/index.js").FormDensity>;
+            ui: import("vue").ComputedRef<import("../types/index.js").FormUiConfig>;
+        };
+        input: import("vue").ComputedRef<import("../../shared/index.js").GenericObject | undefined>;
+        refreshContext: () => Promise<void>;
+        runtime: import("../types/index.js").FormRuntime;
+        schema: import("vue").ComputedRef<{}>;
+        submit: () => Promise<void>;
+        validationMode: import("vue").ComputedRef<import("../types/index.js").FormValidationMode>;
+    };
+    scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
+    sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
+    stickyOffset: import("vue").Ref<number, number>;
+};
+/** The page a part renders in. Parts only work inside `FormPage`. */
+export declare function useFormPageContext(): {
+    active: import("vue").Ref<string | undefined, string | undefined>;
+    cancel: () => void;
+    dirtyCheck: import("vue").ComputedRef<boolean>;
+    items: import("vue").ComputedRef<{
+        entry: import("../types/index.js").FormPageSectionEntry;
+        section: FormPageSectionState;
+    }[]>;
+    modified: import("vue").ComputedRef<number>;
+    navigationTitle: import("vue").ComputedRef<string | undefined>;
+    register: (key: string, element: HTMLElement) => () => void;
+    remaining: import("vue").ComputedRef<number>;
+    resetSection: (key: string) => Promise<void>;
+    root: {
+        cancel: () => void;
+        contextError: import("vue").ComputedRef<string | undefined>;
+        contextLoading: import("vue").ComputedRef<boolean>;
+        contextPending: import("vue").ComputedRef<boolean>;
+        formUi: {
+            controlSize: import("vue").ComputedRef<import("../types/index.js").FormControlSize>;
+            density: import("vue").ComputedRef<import("../types/index.js").FormDensity>;
+            ui: import("vue").ComputedRef<import("../types/index.js").FormUiConfig>;
+        };
+        input: import("vue").ComputedRef<import("../../shared/index.js").GenericObject | undefined>;
+        refreshContext: () => Promise<void>;
+        runtime: import("../types/index.js").FormRuntime;
+        schema: import("vue").ComputedRef<{}>;
+        submit: () => Promise<void>;
+        validationMode: import("vue").ComputedRef<import("../types/index.js").FormValidationMode>;
+    };
+    scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
+    sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
+    stickyOffset: import("vue").Ref<number, number>;
+};

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

@@ -0,0 +1,83 @@
+import { computed, inject, provide, ref } from "vue";
+import { getSchemaDirtyCheck } from "../utils/controls.js";
+import {
+  getFormPageNavigationTitle,
+  getFormPageSections,
+  isFormPageSectionVisible,
+  resolveFormPageSectionState
+} from "../utils/page.js";
+import { cloneFormValue } from "../utils/path.js";
+import { useFormPageScroll } from "./use-form-page-scroll.js";
+export function useFormPage(params) {
+  const { root } = params;
+  const { runtime } = root;
+  const entries = computed(
+    () => getFormPageSections(root.schema.value).filter(
+      (entry) => isFormPageSectionVisible(entry, runtime)
+    )
+  );
+  const requiredEnforced = computed(
+    () => root.validationMode.value === true || root.validationMode.value === "required"
+  );
+  const items = computed(
+    () => entries.value.map((entry, index) => ({
+      entry,
+      section: resolveFormPageSectionState({
+        entry,
+        index,
+        input: root.input.value,
+        requiredEnforced: requiredEnforced.value,
+        runtime
+      })
+    }))
+  );
+  const sections = computed(
+    () => items.value.map((item) => item.section)
+  );
+  const dirtyCheck = computed(() => getSchemaDirtyCheck(root.schema.value));
+  const navigationTitle = computed(() => getFormPageNavigationTitle(root.schema.value));
+  const remaining = computed(
+    () => sections.value.filter((section) => !section.optional && section.status !== "complete").length
+  );
+  const modified = computed(() => sections.value.filter((section) => section.dirty).length);
+  const stickyOffset = ref(0);
+  const scroll = useFormPageScroll({ hash: params.hash, root: params.element, sections });
+  async function resetSection(key) {
+    const section = sections.value.find((candidate) => candidate.key === key);
+    if (!section) {
+      return;
+    }
+    for (const path of section.dirtyPaths) {
+      runtime.setValue(path, cloneFormValue(runtime.getInitialValue(path)));
+      runtime.clearError(path);
+    }
+    await runtime.settleEffects();
+  }
+  return {
+    active: scroll.active,
+    cancel: root.cancel,
+    dirtyCheck,
+    items,
+    modified,
+    navigationTitle,
+    register: scroll.register,
+    remaining,
+    resetSection,
+    root,
+    scrollTo: scroll.scrollTo,
+    sections,
+    stickyOffset
+  };
+}
+const formPageKey = Symbol("nuxt-ui-tools-form-page");
+export function provideFormPage(page) {
+  provide(formPageKey, page);
+  return page;
+}
+export function useFormPageContext() {
+  const page = inject(formPageKey, null);
+  if (!page) {
+    throw new Error("Form page parts must be rendered inside <FormPage>.");
+  }
+  return page;
+}

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

@@ -0,0 +1,34 @@
+import type { FormObject, FormRendererController, FormSubmitHandlerResult, FormUiConfig, FormValidationMode, FormValue } from '../types/index.js';
+export interface UseFormRootParams {
+    /** Controller from `useForm`. Its schema, input, and policies win over the direct ones. */
+    form: () => FormRendererController | undefined;
+    schema: () => FormValue;
+    input: () => FormObject | undefined;
+    syncInput: () => boolean | readonly string[] | undefined;
+    validate: () => FormValidationMode | undefined;
+    ui: () => FormUiConfig | undefined;
+    onSubmitted: (value: FormObject, result: FormSubmitHandlerResult<FormValue>) => void;
+    onCancelled: (value: FormObject) => void;
+}
+/**
+ * Root of a rendered form. It creates the runtime and binds it to the controller, provides the
+ * runtime and the presentation config to the fields, guards navigation away from a dirty form,
+ * and owns submit and cancel. `<NutForm>` and `FormPage` both render from it.
+ */
+export declare function useFormRoot(params: UseFormRootParams): {
+    cancel: () => void;
+    contextError: import("vue").ComputedRef<string | undefined>;
+    contextLoading: import("vue").ComputedRef<boolean>;
+    contextPending: import("vue").ComputedRef<boolean>;
+    formUi: {
+        controlSize: import("vue").ComputedRef<import("../types/index.js").FormControlSize>;
+        density: import("vue").ComputedRef<import("../types/index.js").FormDensity>;
+        ui: import("vue").ComputedRef<FormUiConfig>;
+    };
+    input: import("vue").ComputedRef<import("../../shared/index.js").GenericObject | undefined>;
+    refreshContext: () => Promise<void>;
+    runtime: import("../types/index.js").FormRuntime;
+    schema: import("vue").ComputedRef<{}>;
+    submit: () => Promise<void>;
+    validationMode: import("vue").ComputedRef<FormValidationMode>;
+};

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

@@ -0,0 +1,171 @@
+import { useAppConfig } from "nuxt/app";
+import { computed, nextTick, onBeforeUnmount, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useUiToolsLocale } from "../../i18n/use-locale.js";
+import {
+  getSchemaAutoFocus,
+  getSchemaDirtyNavigation,
+  getSchemaSyncInput,
+  getSchemaUi,
+  getSchemaValidationMode
+} from "../utils/controls.js";
+import { isRecord } from "../utils/path.js";
+import { isString, isUndefined, stringArray } from "../utils/predicate.js";
+import { collectFormFieldsPaths } from "../utils/state.js";
+import { resolveFormText } from "../utils/text.js";
+import { mergeFormUi, resolveAppFormUi } from "../utils/ui.js";
+import { provideFormRuntime, useFormRuntime } from "./use-form-runtime.js";
+import { provideFormUi } from "./use-form-ui.js";
+const DEFAULT_DIRTY_NAVIGATION_MESSAGE = "You have unsaved changes. Close this form?";
+export function useFormRoot(params) {
+  const router = useRouter();
+  const { t } = useUiToolsLocale();
+  const appConfig = useAppConfig();
+  const schema = computed(() => params.form()?.schema.value ?? params.schema() ?? {});
+  const formUi = provideFormUi(
+    computed(
+      () => mergeFormUi(resolveAppFormUi(appConfig), getSchemaUi(schema.value), params.ui())
+    )
+  );
+  const input = computed(() => params.form()?.input.value ?? params.input());
+  const syncInput = computed(
+    () => params.form()?.syncInput.value ?? params.syncInput() ?? getSchemaSyncInput(schema.value)
+  );
+  const validationMode = computed(
+    () => params.form()?.validationMode.value ?? params.validate() ?? getSchemaValidationMode(schema.value)
+  );
+  const runtime = useFormRuntime({ input, schema, syncInput, validationMode });
+  provideFormRuntime(runtime);
+  watch(
+    params.form,
+    (controller, previousController) => {
+      previousController?.unbind(runtime);
+      controller?.bind(runtime);
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => params.form()?.unbind(runtime));
+  onMounted(async () => {
+    await nextTick();
+    const target = getSchemaAutoFocus(schema.value);
+    if (isString(target)) {
+      await runtime.focusField(target);
+      return;
+    }
+    if (target === true) {
+      await focusFirstField();
+    }
+  });
+  if (import.meta.client) {
+    let handleBeforeUnload = function(event) {
+      if (!shouldConfirmDirtyNavigation()) {
+        return;
+      }
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    onBeforeUnmount(() => window.removeEventListener("beforeunload", handleBeforeUnload));
+  }
+  const removeRouteGuard = router.beforeEach((to, from) => {
+    if (runtime.actionPending.value === "submit" || isSameDocument(to, from)) {
+      return true;
+    }
+    if (!shouldConfirmDirtyNavigation()) {
+      return true;
+    }
+    return window.confirm(getDirtyNavigationMessage());
+  });
+  onBeforeUnmount(removeRouteGuard);
+  const contextPending = computed(
+    () => Object.values(runtime.context).some(
+      (resource) => "pending" in resource && resource.pending && isUndefined(resource.value)
+    )
+  );
+  const contextLoading = computed(
+    () => Object.values(runtime.context).some((resource) => "loading" in resource && resource.loading)
+  );
+  const contextError = computed(() => {
+    for (const resource of Object.values(runtime.context)) {
+      if (!("error" in resource) || !resource.error) {
+        continue;
+      }
+      if (resource.error instanceof Error) {
+        return resource.error.message;
+      }
+      if (isString(resource.error)) {
+        return resource.error;
+      }
+      return t("form.states.contextError.description");
+    }
+    return void 0;
+  });
+  async function refreshContext() {
+    await Promise.all(
+      Object.values(runtime.context).flatMap(
+        (resource) => "refresh" in resource ? [resource.refresh()] : []
+      )
+    );
+  }
+  async function submit() {
+    const controller = params.form();
+    const result = controller ? await controller.submitHandler() : await runtime.submitHandler();
+    if (result.success) {
+      params.onSubmitted(runtime.output.value, result);
+    }
+  }
+  function cancel() {
+    if (shouldConfirmDirtyNavigation() && !window.confirm(getDirtyNavigationMessage())) {
+      return;
+    }
+    params.onCancelled(runtime.output.value);
+  }
+  function shouldConfirmDirtyNavigation() {
+    if (!runtime.isDirty.value) {
+      return false;
+    }
+    const config = getSchemaDirtyNavigation(schema.value);
+    if (!config) {
+      return false;
+    }
+    if (!isRecord(config)) {
+      return config === true;
+    }
+    const ignored = stringArray(config.ignorePaths);
+    return runtime.dirtyPaths.value.some(
+      (path) => !ignored.some((ignoredPath) => path === ignoredPath || path.startsWith(`${ignoredPath}.`))
+    );
+  }
+  function getDirtyNavigationMessage() {
+    const config = getSchemaDirtyNavigation(schema.value);
+    if (!isRecord(config)) {
+      return DEFAULT_DIRTY_NAVIGATION_MESSAGE;
+    }
+    const message = Object.getOwnPropertyDescriptor(config, "message")?.value;
+    return resolveFormText(message) ?? DEFAULT_DIRTY_NAVIGATION_MESSAGE;
+  }
+  async function focusFirstField() {
+    const parentPath = runtime.currentStepRoot.value ? [runtime.currentStepRoot.value] : [];
+    for (const path of collectFormFieldsPaths(runtime.currentFields.value, parentPath)) {
+      if (await runtime.focusField(path)) {
+        return;
+      }
+    }
+  }
+  return {
+    cancel,
+    contextError,
+    contextLoading,
+    contextPending,
+    formUi,
+    input,
+    refreshContext,
+    runtime,
+    schema,
+    submit,
+    validationMode
+  };
+}
+function isSameDocument(to, from) {
+  return to.fullPath.split("#")[0] === from.fullPath.split("#")[0];
+}

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

@@ -137,7 +137,7 @@ export function useFormRuntime(params) {
     }
     return valid;
   }
-  const submit = useFormSubmission({
+  const submission = useFormSubmission({
     beforeNext: () => isStepped.value ? runBeforeNext() : Promise.resolve(true),
     focusFirstInvalid: focus.focusFirstInvalid,
     getApi: () => createPublicFormApi(runtime),
@@ -146,6 +146,13 @@ export function useFormRuntime(params) {
     getSchema: () => params.schema.value,
     validate
   });
+  async function submitHandler(externalSubmitHandler) {
+    const result = await submission.submitHandler(externalSubmitHandler);
+    if (result.success) {
+      state.rebaseline();
+    }
+    return result;
+  }
   let hasInitializedInput = !isUndefined(params.input?.value);
   state.initialize(params.input?.value);
   let pendingInput;
@@ -221,7 +228,9 @@ export function useFormRuntime(params) {
   const isLastStep = computed(() => currentStepIndex.value >= steps.value.length - 1);
   const canGoPrevious = computed(() => isStepped.value && !isFirstStep.value);
   const canGoNext = computed(() => isStepped.value && !isLastStep.value);
-  const actionPending = computed(() => navigationActionPending.value ?? submit.actionPending.value);
+  const actionPending = computed(
+    () => navigationActionPending.value ?? submission.actionPending.value
+  );
   async function runBeforeNext() {
     const handler = getSchemaLifecycleHandler(params.schema.value, "onBeforeNext");
     if (!handler) {
@@ -433,10 +442,10 @@ export function useFormRuntime(params) {
     state: state.state,
     steps,
     submit: async () => {
-      const result = await submit.submitHandler();
+      const result = await submitHandler();
       return result.success;
     },
-    submitHandler: submit.submitHandler,
+    submitHandler,
     trackEffect: effects.track,
     validate,
     validateCurrentStep

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

@@ -1,6 +1,6 @@
 import { computed, shallowRef, toValue } from "vue";
-import { isRecord } from "../utils/path.js";
-import { isBoolean, isUndefined, stringArray } from "../utils/predicate.js";
+import { getSchemaSyncInput, getSchemaValidationMode } from "../utils/controls.js";
+import { isUndefined } from "../utils/predicate.js";
 export function useForm(params) {
   const runtime = shallowRef(null);
   const schema = computed(() => toValue(params.schema));
@@ -151,23 +151,3 @@ export function useForm(params) {
     validationMode
   };
 }
-function getSchemaSyncInput(schema) {
-  const controls = getSchemaControls(schema);
-  const value = controls ? Object.getOwnPropertyDescriptor(controls, "syncInput")?.value : void 0;
-  if (isBoolean(value)) {
-    return value;
-  }
-  return stringArray(value);
-}
-function getSchemaValidationMode(schema) {
-  const controls = getSchemaControls(schema);
-  const value = controls ? Object.getOwnPropertyDescriptor(controls, "validate")?.value : void 0;
-  return value === false || value === "required" || value === "validators" ? value : true;
-}
-function getSchemaControls(schema) {
-  if (!isRecord(schema)) {
-    return;
-  }
-  const controls = Object.getOwnPropertyDescriptor(schema, "controls")?.value;
-  return isRecord(controls) ? controls : void 0;
-}

package/dist/runtime/form/fields/checkbox-card/component.vue

@@ -5,18 +5,20 @@ import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { formOptionKey } from "../../utils/options";
 import { isBoolean, isNumber, isString, isUndefined } from "../../utils/predicate";
-import { mergeFormUiClass } from "../../utils/ui";
-import { CARD_SELECTED_RING } from "../card-selection";
+import ChoiceCardLabel from "../choice-card/choice-card-label.vue";
+import { CHOICE_CARD_PROPS, useChoiceCard } from "../choice-card/use-choice-card";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
 const { fieldProps, form, controlProps, disabled, handleBlur, options } = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  { omit: CHOICE_CARD_PROPS }
 );
-const valueByKey = computed(
-  () => new Map(options.items.value.map((item) => [formOptionKey(item.value), item.value]))
+const cards = useChoiceCard({ props: () => fieldProps.value, ui: () => controlProps.value.ui });
+const optionByKey = computed(
+  () => new Map(options.items.value.map((item) => [formOptionKey(item.value), item]))
 );
 const model = computed({
   get: () => {
@@ -26,22 +28,17 @@ const model = computed({
   set: (value) => form.setValue(
     props.path,
     value.flatMap((key) => {
-      const optionValue = valueByKey.value.get(key);
+      const optionValue = optionByKey.value.get(key)?.value;
       return isUndefined(optionValue) ? [] : [optionValue];
     })
   )
 });
 const items = computed(
-  () => options.items.value.map((item) => ({ ...item, value: formOptionKey(item.value) }))
+  () => options.items.value.map(({ icon: _icon, ...item }) => ({
+    ...item,
+    value: formOptionKey(item.value)
+  }))
 );
-const groupUi = computed(() => ({
-  ...controlProps.value.ui,
-  fieldset: mergeFormUiClass(
-    controlProps.value.ui?.fieldset,
-    fieldProps.value.orientation === "horizontal" ? "flex-wrap" : void 0
-  ),
-  item: mergeFormUiClass(CARD_SELECTED_RING, controlProps.value.ui?.item)
-}));
 function isOptionValue(value) {
   return isString(value) || isNumber(value) || isBoolean(value);
 }
@@ -56,12 +53,24 @@ function isOptionValue(value) {
       value-key="value"
       label-key="label"
       description-key="description"
-      :orientation="fieldProps.orientation"
-      :ui="groupUi"
       variant="card"
-      :indicator="fieldProps.indicator"
+      :orientation="cards.orientation.value"
+      :indicator="cards.indicator.value"
+      :ui="cards.ui.value"
+      :style="cards.style.value"
       :disabled="disabled"
       @blur="handleBlur"
-    />
+    >
+      <template #label="{ item }">
+        <ChoiceCardLabel
+          :label="optionByKey.get(item.value)?.label ?? item.label"
+          :icon="optionByKey.get(item.value)?.icon"
+          :tile="cards.tile.value"
+          :corner="cards.corner.value"
+          :selected="model.includes(item.value)"
+          :ui="cards.ui.value"
+        />
+      </template>
+    </UCheckboxGroup>
   </FormFieldShell>
 </template>

package/dist/runtime/form/fields/checkbox-card/types.d.ts

@@ -1,11 +1,8 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { FieldOptionValue, NullableValue } from '../../types/field-output-utils.js';
 import type { FormOptionConfig, FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
-export interface FormCheckboxCardProps {
-    orientation?: 'horizontal' | 'vertical';
-    indicator?: 'start' | 'end' | 'hidden';
-}
-export interface FormCheckboxCardField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'checkbox-card', readonly TValue[] | null, TContext, TDeps, FormCheckboxCardProps> {
+import type { FormChoiceCardProps } from '../choice-card/types.js';
+export interface FormCheckboxCardField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'checkbox-card', readonly TValue[] | null, TContext, TDeps, FormChoiceCardProps> {
     options: FormOptionConfig<TOption, TContext, TDeps, readonly TValue[] | null> | FormOptionsSource<TOption, TContext, TDeps, readonly TValue[] | null>;
 }
 export type CheckboxCardFieldOutput<TField> = readonly FieldOptionValue<TField>[] | NullableValue;

package/dist/runtime/form/fields/choice-card/choice-card-label.d.vue.ts

@@ -0,0 +1,17 @@
+import type { FormControlUi } from '../../types/index.js';
+/**
+ * Content of a card's label: the option icon, inline or in a tile above the label, and the check
+ * a selected card shows in its corner. Styled through `ui.tile`, `ui.tileIcon`, `ui.optionIcon`,
+ * `ui.check`, and `ui.checkIcon`.
+ */
+type __VLS_Props = {
+    label?: string;
+    icon?: string;
+    tile: boolean;
+    corner: boolean;
+    selected: boolean;
+    ui?: FormControlUi;
+};
+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/form/fields/choice-card/choice-card-label.vue

@@ -0,0 +1,50 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { mergeFormUiClass } from "../../utils/ui";
+defineProps({
+  label: { type: String, required: false },
+  icon: { type: String, required: false },
+  tile: { type: Boolean, required: true },
+  corner: { type: Boolean, required: true },
+  selected: { type: Boolean, required: true },
+  ui: { type: Object, required: false }
+});
+</script>
+
+<template>
+  <span
+    v-if="tile && icon"
+    :data-selected="selected || void 0"
+    :class="
+  mergeFormUiClass(
+    'grid size-8 place-items-center rounded-lg bg-elevated text-muted transition-colors data-[selected]:bg-primary/10 data-[selected]:text-primary',
+    ui?.tile
+  )
+"
+    data-choice-tile
+  >
+    <UIcon :name="icon" :class="mergeFormUiClass('size-4', ui?.tileIcon)" aria-hidden="true" />
+  </span>
+  <span v-if="!tile && icon" class="inline-flex items-center gap-2">
+    <UIcon
+      :name="icon"
+      :class="mergeFormUiClass('size-4 shrink-0', ui?.optionIcon)"
+      aria-hidden="true"
+    />
+    <span>{{ label }}</span>
+  </span>
+  <span v-else class="block">{{ label }}</span>
+  <span
+    v-if="corner && selected"
+    aria-hidden="true"
+    :class="
+  mergeFormUiClass(
+    'absolute end-3 top-3 grid size-4 place-items-center rounded-[4px] bg-primary text-inverted',
+    ui?.check
+  )
+"
+    data-choice-check
+  >
+    <UIcon name="i-lucide-check" :class="mergeFormUiClass('size-2.5', ui?.checkIcon)" />
+  </span>
+</template>

package/dist/runtime/form/fields/choice-card/choice-card-label.vue.d.ts

@@ -0,0 +1,17 @@
+import type { FormControlUi } from '../../types/index.js';
+/**
+ * Content of a card's label: the option icon, inline or in a tile above the label, and the check
+ * a selected card shows in its corner. Styled through `ui.tile`, `ui.tileIcon`, `ui.optionIcon`,
+ * `ui.check`, and `ui.checkIcon`.
+ */
+type __VLS_Props = {
+    label?: string;
+    icon?: string;
+    tile: boolean;
+    corner: boolean;
+    selected: boolean;
+    ui?: FormControlUi;
+};
+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;