nuxt-ui-tools 1.2.0 → 1.4.0

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

@@ -0,0 +1 @@
+export declare const CARD_SELECTED_RING = "has-data-[state=checked]:ring-4 has-data-[state=checked]:ring-primary/20";

package/dist/runtime/form/fields/card-selection.js

@@ -0,0 +1 @@
+export const CARD_SELECTED_RING = "has-data-[state=checked]:ring-4 has-data-[state=checked]:ring-primary/20";

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

@@ -5,17 +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 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: () => {
@@ -25,21 +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
-  )
-}));
 function isOptionValue(value) {
   return isString(value) || isNumber(value) || isBoolean(value);
 }
@@ -54,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/checkbox-group/component.vue

@@ -6,6 +6,7 @@ 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";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -38,6 +39,10 @@ const groupUi = computed(() => ({
   fieldset: mergeFormUiClass(
     controlProps.value.ui?.fieldset,
     fieldProps.value.orientation === "horizontal" ? "flex-wrap" : void 0
+  ),
+  item: mergeFormUiClass(
+    fieldProps.value.variant === "card" ? CARD_SELECTED_RING : void 0,
+    controlProps.value.ui?.item
   )
 }));
 function isOptionValue(value) {

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;

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

@@ -0,0 +1,31 @@
+/**
+ * Presentation of the radio and checkbox cards.
+ *
+ * @example
+ * ```ts
+ * // A fixed grid of cards, each with its icon in a tile above the label and a check in the
+ * // corner once selected.
+ * props: { columns: '1 md:2 lg:3', icon: 'tile', indicator: 'corner' }
+ * ```
+ */
+export interface FormChoiceCardProps {
+    /**
+     * Lays the cards out in a fixed grid of this many equal columns. Accepts breakpoints:
+     * `3` or `'1 md:2 lg:3'`. Without it, cards flow along `orientation`.
+     */
+    columns?: number | string;
+    /** Direction of the cards when they are not in a `columns` grid. */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Selection mark: the radio or checkbox before the content (`start`, the default), after it
+     * (`end`), none (`hidden`), or a check in the top corner of the selected cards (`corner`).
+     */
+    indicator?: 'start' | 'end' | 'hidden' | 'corner';
+    /**
+     * Where an option's `icon` shows: before its label (`inline`, the default), or in a tile above
+     * it (`tile`) that takes the selection color. Style the parts the engine renders with the
+     * `ui` slots `tile`, `tileIcon`, `optionIcon`, `check`, and `checkIcon`, next to the Nuxt UI
+     * slots of the group.
+     */
+    icon?: 'inline' | 'tile';
+}

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

@@ -0,0 +1,22 @@
+import type { FormControlUi } from '../../types/index.js';
+import type { FormChoiceCardProps } from './types.js';
+/** Props the card fields render themselves, kept away from the Nuxt UI group. */
+export declare const CHOICE_CARD_PROPS: string[];
+/**
+ * Presentation of a radio or checkbox card group: the flowing row or fixed grid of cards, the
+ * selection mark, and where option icons go. Returns the props and `ui` slots for the Nuxt UI
+ * group, and what the card content renders (`tile`, `corner`).
+ */
+export declare function useChoiceCard(params: {
+    props: () => FormChoiceCardProps;
+    ui: () => FormControlUi | undefined;
+}): {
+    corner: import("vue").ComputedRef<boolean>;
+    indicator: import("vue").ComputedRef<"end" | "start" | "hidden" | undefined>;
+    orientation: import("vue").ComputedRef<"horizontal" | "vertical" | undefined>;
+    style: import("vue").ComputedRef<{
+        '--nut-choice-columns': string;
+    } | undefined>;
+    tile: import("vue").ComputedRef<boolean>;
+    ui: import("vue").ComputedRef<FormControlUi>;
+};

package/dist/runtime/form/fields/choice-card/use-choice-card.js

@@ -0,0 +1,52 @@
+import { computed } from "vue";
+import { useResponsiveValue } from "../../../shared/composables/use-responsive-value.js";
+import { mergeFormUiClass } from "../../utils/ui.js";
+import { CARD_SELECTED_RING } from "../card-selection.js";
+export const CHOICE_CARD_PROPS = ["columns", "icon", "indicator", "orientation"];
+export function useChoiceCard(params) {
+  const columnsValue = useResponsiveValue(() => String(params.props().columns ?? ""));
+  const columns = computed(() => {
+    const count = Math.trunc(Number(columnsValue.value));
+    return count > 0 ? count : void 0;
+  });
+  const corner = computed(() => params.props().indicator === "corner");
+  const tile = computed(() => params.props().icon === "tile");
+  const indicator = computed(() => {
+    const value = params.props().indicator;
+    return value === "corner" ? "hidden" : value;
+  });
+  const orientation = computed(() => params.props().orientation);
+  const style = computed(
+    () => columns.value ? { "--nut-choice-columns": String(columns.value) } : void 0
+  );
+  const ui = computed(() => {
+    const current = params.ui();
+    return {
+      ...current,
+      fieldset: mergeFormUiClass(
+        columns.value ? "grid grid-cols-[repeat(var(--nut-choice-columns),minmax(0,1fr))] gap-2.5" : `gap-2.5${orientation.value === "horizontal" ? " flex-wrap" : ""}`,
+        current?.fieldset
+      ),
+      item: mergeFormUiClass(
+        `border-default ${CARD_SELECTED_RING}`,
+        corner.value ? "relative" : void 0,
+        current?.item
+      ),
+      // A tile stacks above the title, and the description below it, with gaps.
+      label: mergeFormUiClass(
+        tile.value ? "flex flex-col items-start gap-2.5 font-semibold" : void 0,
+        current?.label
+      ),
+      // A hidden indicator centers the text: keep it aligned, and clear of an inline corner check.
+      wrapper: mergeFormUiClass(
+        tile.value ? "flex flex-col gap-1.5" : void 0,
+        [
+          indicator.value === "hidden" ? "ms-0 text-start" : "",
+          corner.value && !tile.value ? "pe-7" : ""
+        ].join(" "),
+        current?.wrapper
+      )
+    };
+  });
+  return { corner, indicator, orientation, style, tile, ui };
+}

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

@@ -4,6 +4,8 @@ import { computed } from "vue";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
+import { mergeFormUiClass } from "../../utils/ui";
+import { CARD_SELECTED_RING } from "../card-selection";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -23,6 +25,13 @@ const model = computed({
   set: (value) => form.setValue(props.path, value)
 });
 const items = computed(() => [...options.items.value]);
+const groupUi = computed(() => ({
+  ...controlProps.value.ui,
+  item: mergeFormUiClass(
+    fieldProps.value.variant === "card" ? CARD_SELECTED_RING : void 0,
+    controlProps.value.ui?.item
+  )
+}));
 </script>
 
 <template>
@@ -34,6 +43,7 @@ const items = computed(() => [...options.items.value]);
       label-key="label"
       description-key="description"
       :items="items"
+      :ui="groupUi"
       :variant="fieldProps.variant === 'table' ? 'list' : fieldProps.variant ?? 'list'"
       :orientation="fieldProps.orientation"
       :indicator="fieldProps.indicator"

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

@@ -1,19 +1,21 @@
 <script setup>
-import UIcon from "@nuxt/ui/components/Icon.vue";
 import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
 import { computed } from "vue";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
-import { mergeFormUiClass } from "../../utils/ui";
+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 cards = useChoiceCard({ props: () => fieldProps.value, ui: () => controlProps.value.ui });
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
@@ -25,13 +27,6 @@ const model = computed({
   set: (value) => form.setValue(props.path, value)
 });
 const items = computed(() => [...options.items.value]);
-const groupUi = computed(() => ({
-  ...controlProps.value.ui,
-  fieldset: mergeFormUiClass(
-    controlProps.value.ui?.fieldset,
-    fieldProps.value.orientation === "horizontal" ? "flex-wrap" : void 0
-  )
-}));
 </script>
 
 <template>
@@ -43,16 +38,22 @@ const groupUi = computed(() => ({
       label-key="label"
       variant="card"
       :items="items"
-      :orientation="fieldProps.orientation"
-      :ui="groupUi"
+      :orientation="cards.orientation.value"
+      :indicator="cards.indicator.value"
+      :ui="cards.ui.value"
+      :style="cards.style.value"
       :disabled="disabled"
       @blur="handleBlur"
     >
       <template #label="{ item }">
-        <span class="inline-flex items-center gap-2">
-          <UIcon v-if="item.icon" :name="item.icon" class="size-4 shrink-0" aria-hidden="true" />
-          <span>{{ item.label }}</span>
-        </span>
+        <ChoiceCardLabel
+          :label="item.label"
+          :icon="item.icon"
+          :tile="cards.tile.value"
+          :corner="cards.corner.value"
+          :selected="model === item.value"
+          :ui="cards.ui.value"
+        />
       </template>
     </URadioGroup>
   </FormFieldShell>