nuxt-ui-tools 1.18.0 → 1.19.0

package/dist/runtime/form/composables/use-choice-group-items.d.ts

@@ -0,0 +1,27 @@
+import type { FormControlUi, FormOptionRuntimeState, ResolvedFormOption } from '../types/index.js';
+/**
+ * Items for the Nuxt UI radio and checkbox groups of a field whose options carry more than a
+ * label. The group gets the plain parts of each option only: the leading visual, the suffix and a
+ * custom render are drawn in its label slot (`optionOf` finds the resolved option behind a slot
+ * item), and the description sits under the label, lined up with it. Nothing else of the option
+ * reaches the group, whose own `icon` is the check mark of a checkbox.
+ */
+export declare function useChoiceGroupItems<TValue extends string | ResolvedFormOption['value']>(params: {
+    /** True when a `renderOption` function owns the content of the options. */
+    custom: () => boolean;
+    options: FormOptionRuntimeState;
+    ui: () => FormControlUi | undefined;
+    /** The value the group knows an option by. */
+    valueOf: (option: ResolvedFormOption) => TValue;
+}): {
+    items: import("vue").ComputedRef<{
+        description: string | undefined;
+        disabled: boolean | undefined;
+        label: string;
+        ui: {
+            description: string;
+        } | undefined;
+        value: TValue;
+    }[]>;
+    optionOf: (key: string) => ResolvedFormOption;
+};

package/dist/runtime/form/composables/use-choice-group-items.js

@@ -0,0 +1,24 @@
+import { computed } from "vue";
+import { formOptionKey, resolveOptionDescriptionIndent } from "../utils/options.js";
+import { mergeFormUiClass } from "../utils/ui.js";
+export function useChoiceGroupItems(params) {
+  const optionByKey = computed(
+    () => new Map(params.options.items.value.map((option) => [formOptionKey(option.value), option]))
+  );
+  const items = computed(
+    () => params.options.items.value.map((option) => {
+      const indent = params.custom() ? void 0 : resolveOptionDescriptionIndent(option);
+      return {
+        description: params.custom() ? void 0 : option.description,
+        disabled: option.disabled,
+        label: option.label,
+        ui: indent ? { description: mergeFormUiClass(params.ui()?.description, indent) } : void 0,
+        value: params.valueOf(option)
+      };
+    })
+  );
+  function optionOf(key) {
+    return optionByKey.value.get(key) ?? { label: key, value: key };
+  }
+  return { items, optionOf };
+}

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

@@ -28,17 +28,17 @@ export declare function useFieldControl<TField extends FormField>(field: () => T
     interactionOwnerClass: import("vue").ComputedRef<string>;
     options: {
         activate: () => void;
-        add: (option: FormValue) => import("../utils/options.js").ResolvedFormOption;
+        add: (option: FormValue) => import("../types/index.js").ResolvedFormOption;
         creatable: import("vue").ComputedRef<boolean>;
-        create: (label?: string) => Promise<import("../utils/options.js").ResolvedFormOption | null>;
+        create: (label?: string) => Promise<import("../types/index.js").ResolvedFormOption | null>;
         createLabel: import("vue").ComputedRef<string | undefined>;
         creating: import("vue").ComputedRef<boolean>;
         disableOnLoading: import("vue").ComputedRef<boolean>;
         error: import("vue").ComputedRef<unknown>;
         fetching: import("vue").ComputedRef<boolean>;
         hasMore: import("vue").ComputedRef<boolean>;
-        items: import("vue").ComputedRef<readonly import("../utils/options.js").ResolvedFormOption[]>;
-        loadChildren: (option: import("../utils/options.js").ResolvedFormOption) => Promise<void>;
+        items: import("vue").ComputedRef<readonly import("../types/index.js").ResolvedFormOption[]>;
+        loadChildren: (option: import("../types/index.js").ResolvedFormOption) => Promise<void>;
         loadMore: () => Promise<void>;
         loading: import("vue").ComputedRef<boolean>;
         loadingMore: import("vue").ComputedRef<boolean>;
@@ -51,7 +51,7 @@ export declare function useFieldControl<TField extends FormField>(field: () => T
         retryable: import("vue").ComputedRef<boolean>;
         search: import("vue").ComputedRef<string>;
         selectCreatedOption: import("vue").ComputedRef<boolean>;
-        selectedItems: import("vue").ComputedRef<readonly import("../utils/options.js").ResolvedFormOption[]>;
+        selectedItems: import("vue").ComputedRef<readonly import("../types/index.js").ResolvedFormOption[]>;
         setSearch: (term: string) => void;
     };
     params: import("vue").ComputedRef<import("../types/index.js").FormFieldCallbackParams<{}, import("../types/index.js").FormDependencies, unknown, unknown>>;

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

@@ -30,9 +30,10 @@ export function useFormItemLayout(params) {
     ),
     normalizeFormGridColumnSpanStyle
   );
-  const style = computed(
-    () => span.value ?? normalizeFormGridColumnSpanStyle(String(FORM_LAYOUT_DEFAULTS.fieldSpan))
-  );
+  const style = computed(() => {
+    const spanStyle = span.value ?? normalizeFormGridColumnSpanStyle(String(FORM_LAYOUT_DEFAULTS.fieldSpan));
+    return params.layout()?.newRow ? `${spanStyle}; grid-column-start: 1` : spanStyle;
+  });
   return {
     span,
     style

package/dist/runtime/form/composables/use-option-menu.d.ts

@@ -0,0 +1,20 @@
+import type { FormAutoCompleteField, FormOptionRuntimeState, FormOptionValue, FormSelectField, ResolvedFormOption } from '../types/index.js';
+/**
+ * What the select and the auto-complete share around the options they list in a Nuxt UI menu: the
+ * menu items (grouped when the options carry headings), which option is selected, and the option
+ * the closed control shows with its leading visual and its custom value.
+ */
+export declare function useOptionMenu(params: {
+    field: () => FormSelectField | FormAutoCompleteField;
+    model: () => FormOptionValue | readonly FormOptionValue[] | null | undefined;
+    multiple: () => boolean;
+    options: FormOptionRuntimeState;
+    loadMoreLabel: () => string;
+}): {
+    customValueOption: import("vue").ComputedRef<ResolvedFormOption | undefined>;
+    isSelected: (option: ResolvedFormOption) => boolean;
+    items: import("vue").ComputedRef<import("../utils/options.js").OptionMenuItem[] | import("../utils/options.js").OptionMenuItem[][]>;
+    leadingOption: import("vue").ComputedRef<ResolvedFormOption | undefined>;
+    renderOption: import("vue").ComputedRef<((context: import("../types/index.js").FormOptionRenderContext<import("../types/index.js").FormOptionItem<FormOptionValue>>) => import("vue").VNodeChild) | undefined>;
+    renderValue: import("vue").ComputedRef<((context: import("../types/index.js").FormOptionValueRenderContext<import("../types/index.js").FormOptionItem<FormOptionValue>>) => import("vue").VNodeChild) | undefined>;
+};

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

@@ -0,0 +1,41 @@
+import { computed } from "vue";
+import { formOptionKey, resolveOptionLeading, toMenuItems } from "../utils/options.js";
+export function useOptionMenu(params) {
+  const renderOption = computed(() => params.field().renderOption);
+  const renderValue = computed(() => params.field().renderValue);
+  const items = computed(
+    () => toMenuItems(params.options.items.value, {
+      label: params.loadMoreLabel(),
+      show: params.options.remote.value && (params.options.hasMore.value || params.options.loadingMore.value)
+    })
+  );
+  const selectedKeys = computed(() => {
+    const model = params.model();
+    const values = Array.isArray(model) ? model : [model];
+    return new Set(
+      values.filter((value) => value !== null && value !== void 0).map(formOptionKey)
+    );
+  });
+  const valueOption = computed(
+    () => params.multiple() ? void 0 : params.options.selectedItems.value[0]
+  );
+  const leadingOption = computed(() => {
+    const option = valueOption.value;
+    return option && !renderValue.value && resolveOptionLeading(option) ? option : void 0;
+  });
+  const customValueOption = computed(() => {
+    const option = valueOption.value;
+    return option && (renderValue.value || option.suffix) ? option : void 0;
+  });
+  function isSelected(option) {
+    return selectedKeys.value.has(formOptionKey(option.value));
+  }
+  return {
+    customValueOption,
+    isSelected,
+    items,
+    leadingOption,
+    renderOption,
+    renderValue
+  };
+}

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

@@ -4,9 +4,12 @@ import { computed, ref, watch } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import FormOptionItemLabel from "../../components/utils/form-option-item-label.vue";
+import FormOptionLeading from "../../components/utils/form-option-leading.vue";
 import FormOptionMenuFooter from "../../components/utils/form-option-menu-footer.vue";
+import FormOptionSuffix from "../../components/utils/form-option-suffix.vue";
+import FormOptionValueOverlay from "../../components/utils/form-option-value-overlay.vue";
 import { useFieldControl } from "../../composables/use-field-control";
-import { appendLoadMoreOption } from "../../utils/options";
+import { useOptionMenu } from "../../composables/use-option-menu";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
@@ -30,6 +33,7 @@ const {
   { omit: ["createItem", "clearable"] }
 );
 const searchTerm = ref("");
+const open = ref(false);
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
@@ -43,16 +47,27 @@ const model = computed({
   },
   set: (value) => form.setValue(props.path, value)
 });
-const items = computed(() => [
-  ...appendLoadMoreOption(
-    options.items.value,
-    options.remote.value && (options.hasMore.value || options.loadingMore.value),
-    t("form.fields.options.loadingMore")
-  )
-]);
+const menu = useOptionMenu({
+  field: () => props.field,
+  loadMoreLabel: () => t("form.fields.options.loadingMore"),
+  model: () => model.value,
+  multiple: () => fieldProps.value.multiple === true,
+  options
+});
+const overlayActive = computed(
+  () => menu.customValueOption.value !== void 0 && !open.value && searchTerm.value === ""
+);
 const controlUi = computed(() => ({
   ...controlProps.value.ui,
-  content: mergeFormUiClass(controlProps.value.ui?.content, interactionOwnerClass.value)
+  base: mergeFormUiClass(
+    controlProps.value.ui?.base,
+    overlayActive.value ? "text-transparent" : void 0
+  ),
+  content: mergeFormUiClass(controlProps.value.ui?.content, interactionOwnerClass.value),
+  itemDescription: mergeFormUiClass(
+    menu.renderOption.value ? "hidden" : "text-[12.5px]",
+    controlProps.value.ui?.itemDescription
+  )
 }));
 const createItem = computed(
   () => options.creatable.value && fieldProps.value.createItem ? fieldProps.value.createItem : false
@@ -68,10 +83,9 @@ watch(searchTerm, (term) => {
     options.setSearch(term);
   }
 });
-function handleOpen(open) {
-  if (open) {
-    options.activate();
-  }
+function handleOpen(next) {
+  open.value = next;
+  if (next) options.activate();
 }
 async function handleCreate(label) {
   await options.create(label);
@@ -93,47 +107,74 @@ function isOptionValue(value) {
 
 <template>
   <FormFieldShell :field="field" :path="path">
-    <UInputMenu
-      v-model="model"
-      v-model:search-term="searchTerm"
-      v-bind="controlProps"
-      class="w-full"
-      value-key="value"
-      label-key="label"
-      :items="items"
-      :multiple="fieldProps.multiple"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :loading="
+    <FormOptionValueOverlay
+      :option="menu.customValueOption.value"
+      :render="menu.renderValue.value"
+      :active="overlayActive"
+    >
+      <UInputMenu
+        v-model="model"
+        v-model:search-term="searchTerm"
+        v-bind="controlProps"
+        class="w-full"
+        value-key="value"
+        label-key="label"
+        :items="menu.items.value"
+        :multiple="fieldProps.multiple"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :loading="
   validationPending || options.loading.value || options.fetching.value || options.creating.value
 "
-      :clear="fieldProps.clearable === true"
-      :ignore-filter="options.remote.value"
-      :create-item="createItem"
-      :ui="controlUi"
-      @update:open="handleOpen"
-      @create="handleNativeCreate"
-      @blur="handleBlur"
-    >
-      <template #create-item-label="{ item }">
-        {{
-          options.creating.value ? t("form.fields.options.creating") : t("form.fields.options.createNamed", { label: item })
-        }}
-      </template>
+        :clear="fieldProps.clearable === true"
+        :ignore-filter="options.remote.value"
+        :create-item="createItem"
+        :ui="controlUi"
+        @update:open="handleOpen"
+        @create="handleNativeCreate"
+        @blur="handleBlur"
+      >
+        <template #create-item-label="{ item }">
+          {{
+            options.creating.value ? t("form.fields.options.creating") : t("form.fields.options.createNamed", { label: item })
+          }}
+        </template>
+
+        <template v-if="menu.leadingOption.value" #leading="{ ui }">
+          <FormOptionLeading
+            :option="menu.leadingOption.value"
+            :icon-class="ui.leadingIcon()"
+            :avatar-size="ui.itemLeadingAvatarSize()"
+            chip-class="size-5"
+          />
+        </template>
+
+        <template #item-leading="{ item }">
+          <FormOptionLeading :option="menu.renderOption.value ? void 0 : item" />
+        </template>
+
+        <template #item-label="{ item }">
+          <FormOptionItemLabel
+            :option="item"
+            :selected="menu.isSelected(item)"
+            :render="menu.renderOption.value"
+          />
+        </template>
 
-      <template #item-label="{ item }">
-        <FormOptionItemLabel :item="item" />
-      </template>
+        <template #item-trailing="{ item }">
+          <FormOptionSuffix v-if="!menu.renderOption.value" :option="item" />
+        </template>
 
-      <template #content-bottom>
-        <FormOptionMenuFooter
-          :options="options"
-          :disabled="disabled"
-          :show-create="showExplicitCreate"
-          :create-label="createActionLabel"
-          @create="handleCreateAction"
-        />
-      </template>
-    </UInputMenu>
+        <template #content-bottom>
+          <FormOptionMenuFooter
+            :options="options"
+            :disabled="disabled"
+            :show-create="showExplicitCreate"
+            :create-label="createActionLabel"
+            @create="handleCreateAction"
+          />
+        </template>
+      </UInputMenu>
+    </FormOptionValueOverlay>
   </FormFieldShell>
 </template>

package/dist/runtime/form/fields/auto-complete/config.d.ts

@@ -4,6 +4,7 @@ export declare const autoCompleteFieldKind: {
     };
     readonly options: {
         readonly enabled: true;
+        readonly groups: true;
     };
     readonly state: "stateful";
     readonly transform: true;

package/dist/runtime/form/fields/auto-complete/config.js

@@ -1,7 +1,7 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const autoCompleteFieldKind = defineFormFieldKind({
   layout: { item: true },
-  options: { enabled: true },
+  options: { enabled: true, groups: true },
   state: "stateful",
   transform: true,
   type: "auto-complete",

package/dist/runtime/form/fields/auto-complete/types.d.ts

@@ -1,13 +1,13 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { FieldOptionValue, FieldProps, FallbackNever, NullableValue } from '../../types/field-output-utils.js';
-import type { FormAnyOptionConfig, FormOptionItem, FormOptionValue } from '../../types/options.js';
+import type { FormAnyOptionConfig, FormOptionGrouping, FormOptionItem, FormOptionValue, FormOptionValueRenderers } from '../../types/options.js';
 import type { FormSelectCreateItem } from '../select/types.js';
 export interface FormAutoCompleteProps {
     multiple?: boolean;
     clearable?: boolean;
     createItem?: FormSelectCreateItem;
 }
-export interface FormAutoCompleteField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'auto-complete', TValue | readonly TValue[] | null, TContext, TDeps, FormAutoCompleteProps> {
+export interface FormAutoCompleteField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'auto-complete', TValue | readonly TValue[] | null, TContext, TDeps, FormAutoCompleteProps>, FormOptionGrouping, FormOptionValueRenderers<TOption> {
     options: FormAnyOptionConfig<TOption, TContext, TDeps, TValue | readonly TValue[] | null>;
 }
 type AutoCompleteFieldValue<TField> = FieldProps<TField> extends {

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

@@ -3,11 +3,11 @@ import UCheckboxGroup from "@nuxt/ui/components/CheckboxGroup.vue";
 import { computed } from "vue";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
-import { formOptionKey } from "../../utils/options";
+import { formOptionKey, groupOptions } from "../../utils/options";
 import { isBoolean, isNumber, isString, isUndefined } from "../../utils/predicate";
 import ChoiceCardLabel from "../choice-card/choice-card-label.vue";
 import { CHOICE_CARD_PROPS, useChoiceCard } from "../choice-card/use-choice-card";
-import { choiceCardGroupAttrs, groupChoiceCardItems } from "../choice-card/utils";
+import { choiceCardGroupAttrs } from "../choice-card/utils";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -45,7 +45,7 @@ const items = computed(
     value: formOptionKey(item.value)
   }))
 );
-const groups = computed(() => groupChoiceCardItems(items.value));
+const groups = computed(() => groupOptions(items.value));
 function selectionOf(group) {
   return model.value.filter((key) => group.items.some((item) => item.value === key));
 }

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

@@ -1,8 +1,8 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { FieldOptionValue, NullableValue } from '../../types/field-output-utils.js';
-import type { FormOptionConfig, FormOptionValue, FormOptionsSource } from '../../types/options.js';
-import type { FormChoiceCardGrouping, FormChoiceCardOptionItem, FormChoiceCardProps } from '../choice-card/types.js';
-export interface FormCheckboxCardField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormChoiceCardOptionItem<TValue> = FormChoiceCardOptionItem<TValue>> extends FormStatefulFieldBase<'checkbox-card', readonly TValue[] | null, TContext, TDeps, FormChoiceCardProps>, FormChoiceCardGrouping {
+import type { FormOptionConfig, FormOptionGrouping, FormOptionValue, FormOptionsSource } from '../../types/options.js';
+import type { FormChoiceCardOptionItem, FormChoiceCardProps } from '../choice-card/types.js';
+export interface FormCheckboxCardField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormChoiceCardOptionItem<TValue> = FormChoiceCardOptionItem<TValue>> extends FormStatefulFieldBase<'checkbox-card', readonly TValue[] | null, TContext, TDeps, FormChoiceCardProps>, FormOptionGrouping {
     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

@@ -2,6 +2,8 @@
 import UCheckboxGroup from "@nuxt/ui/components/CheckboxGroup.vue";
 import { computed } from "vue";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import FormOptionChoiceLabel from "../../components/utils/form-option-choice-label.vue";
+import { useChoiceGroupItems } from "../../composables/use-choice-group-items";
 import { useFieldControl } from "../../composables/use-field-control";
 import { formOptionKey } from "../../utils/options";
 import { isBoolean, isNumber, isString, isUndefined } from "../../utils/predicate";
@@ -31,9 +33,13 @@ const model = computed({
     })
   )
 });
-const items = computed(
-  () => options.items.value.map((item) => ({ ...item, value: formOptionKey(item.value) }))
-);
+const renderOption = computed(() => props.field.renderOption);
+const { items, optionOf } = useChoiceGroupItems({
+  custom: () => renderOption.value !== void 0,
+  options,
+  ui: () => controlProps.value.ui,
+  valueOf: (option) => formOptionKey(option.value)
+});
 const groupUi = computed(() => ({
   ...controlProps.value.ui,
   fieldset: mergeFormUiClass(
@@ -65,6 +71,14 @@ function isOptionValue(value) {
       :indicator="fieldProps.indicator"
       :disabled="disabled"
       @blur="handleBlur"
-    />
+    >
+      <template #label="{ item }">
+        <FormOptionChoiceLabel
+          :option="optionOf(item.value)"
+          :selected="model.includes(item.value)"
+          :render="renderOption"
+        />
+      </template>
+    </UCheckboxGroup>
   </FormFieldShell>
 </template>

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

@@ -1,6 +1,6 @@
 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';
+import type { FormOptionConfig, FormOptionItem, FormOptionRenderers, FormOptionValue, FormOptionsSource } from '../../types/options.js';
 export interface FormCheckboxGroupProps {
     /**
      * `list` (the default) lines up bare checkboxes, `card` frames each option on its own, and
@@ -10,7 +10,7 @@ export interface FormCheckboxGroupProps {
     orientation?: 'horizontal' | 'vertical';
     indicator?: 'start' | 'end' | 'hidden';
 }
-export interface FormCheckboxGroupField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'checkbox-group', readonly TValue[] | null, TContext, TDeps, FormCheckboxGroupProps> {
+export interface FormCheckboxGroupField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'checkbox-group', readonly TValue[] | null, TContext, TDeps, FormCheckboxGroupProps>, FormOptionRenderers<TOption> {
     options: FormOptionConfig<TOption, TContext, TDeps, readonly TValue[] | null> | FormOptionsSource<TOption, TContext, TDeps, readonly TValue[] | null>;
 }
 export type CheckboxGroupFieldOutput<TField> = readonly FieldOptionValue<TField>[] | NullableValue;

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

@@ -46,29 +46,10 @@ export interface FormChoiceCardProps {
     density?: FormChoiceCardDensity;
 }
 /**
- * Option grouping of the radio and checkbox cards, declared on the field next to its `options`.
- *
- * @example
- * ```ts
- * // Rows from the API, each with a `section` to list the cards under.
- * { type: 'radio-card', options: () => queryOptions({ queryKey: ['plans'], queryFn: fetchPlans }), groupKey: 'section' }
- * ```
- */
-export interface FormChoiceCardGrouping {
-    /**
-     * Property of the options that holds the heading they are listed under. Options written inline
-     * in the schema group by their `group` without it. The records a function, a promise or a query
-     * returns group only when this names the property, so records that already carry a `group` for
-     * another purpose are never regrouped by surprise. `false` lists every option together, even
-     * inline options that carry a `group`.
-     */
-    groupKey?: string | false;
-}
-/**
- * Option of a radio or checkbox card: the shared option shape plus the icon and the heading the
- * cards can show.
+ * Option of a radio or checkbox card: the shared option shape plus the heading the cards can show.
+ * A card draws its `icon` only, so the avatar, chip and suffix of other option fields are left out.
  */
-export interface FormChoiceCardOption<TValue extends FormOptionValue = FormOptionValue> extends FormOption<TValue> {
+export interface FormChoiceCardOption<TValue extends FormOptionValue = FormOptionValue> extends Omit<FormOption<TValue>, 'avatar' | 'chip' | 'suffix'> {
     /** Icon shown with the label, inline or in a tile (see `props.icon`). */
     icon?: string;
     /**

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

@@ -1,21 +1,4 @@
 import type { FormObject } from '../../types/index.js';
-export interface ChoiceCardGroup<TItem> {
-    /** Stable key of the group: its heading, or an empty string for the options without one. */
-    key: string;
-    /** Heading shown above the cards of the group; none for options that declare no group. */
-    heading?: string;
-    /** The group's options, as the mutable list the Nuxt UI groups take. */
-    items: TItem[];
-}
-/**
- * Lists options under their group headings. Headings follow the order in which they first appear
- * in `items`, and each keeps its options in their authored order. The options without a group form
- * one more group with no heading, placed where its first option appears. Without any group the
- * result is a single headingless group, so an ungrouped list renders as it always did.
- */
-export declare function groupChoiceCardItems<TItem extends {
-    group?: string;
-}>(items: readonly TItem[]): readonly ChoiceCardGroup<TItem>[];
 /**
  * Attributes for the Nuxt UI group at `index` among the groups of one field. Every group carries
  * the control attributes of the field, but an `id` names a single element: the first group keeps

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

@@ -1,15 +1,4 @@
 import { isString } from "../../utils/predicate.js";
-export function groupChoiceCardItems(items) {
-  const groups = /* @__PURE__ */ new Map();
-  for (const item of items) {
-    const key = item.group?.trim() ?? "";
-    const members = groups.get(key);
-    if (members) members.push(item);
-    else groups.set(key, [item]);
-  }
-  if (groups.size === 0) return [{ items: [], key: "" }];
-  return [...groups].map(([key, members]) => ({ heading: key || void 0, items: members, key }));
-}
 export function choiceCardGroupAttrs(attrs, index) {
   const id = attrs.id;
   if (index === 0 || !isString(id)) return attrs;

package/dist/runtime/form/fields/index.d.ts

@@ -86,6 +86,7 @@ export declare const formFieldKinds: readonly [{
     };
     readonly options: {
         readonly enabled: true;
+        readonly groups: true;
     };
     readonly state: "stateful";
     readonly transform: true;
@@ -529,6 +530,7 @@ export declare const formFieldKinds: readonly [{
     };
     readonly options: {
         readonly enabled: true;
+        readonly groups: true;
     };
     readonly state: "stateful";
     readonly transform: true;

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

@@ -2,7 +2,10 @@
 import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
 import { computed } from "vue";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import FormOptionChoiceLabel from "../../components/utils/form-option-choice-label.vue";
+import { useChoiceGroupItems } from "../../composables/use-choice-group-items";
 import { useFieldControl } from "../../composables/use-field-control";
+import { formOptionKey } from "../../utils/options";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
 import { CARD_SELECTED_RING } from "../card-selection";
@@ -24,7 +27,13 @@ const model = computed({
   },
   set: (value) => form.setValue(props.path, value)
 });
-const items = computed(() => [...options.items.value]);
+const renderOption = computed(() => props.field.renderOption);
+const { items, optionOf } = useChoiceGroupItems({
+  custom: () => renderOption.value !== void 0,
+  options,
+  ui: () => controlProps.value.ui,
+  valueOf: (option) => option.value
+});
 const groupUi = computed(() => ({
   ...controlProps.value.ui,
   item: mergeFormUiClass(
@@ -49,6 +58,14 @@ const groupUi = computed(() => ({
       :indicator="fieldProps.indicator"
       :disabled="disabled"
       @blur="handleBlur"
-    />
+    >
+      <template #label="{ item }">
+        <FormOptionChoiceLabel
+          :option="optionOf(formOptionKey(item.value))"
+          :selected="model === item.value"
+          :render="renderOption"
+        />
+      </template>
+    </URadioGroup>
   </FormFieldShell>
 </template>

package/dist/runtime/form/fields/radio/types.d.ts

@@ -1,6 +1,6 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { FieldOptionValue, NullableValue } from '../../types/field-output-utils.js';
-import type { FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
+import type { FormOptionItem, FormOptionRenderers, FormOptionValue, FormOptionsSource } from '../../types/options.js';
 export interface FormRadioProps {
     /**
      * `list` (the default) lines up bare radios, `card` frames each option on its own, and `table`
@@ -11,7 +11,7 @@ export interface FormRadioProps {
     orientation?: 'horizontal' | 'vertical';
     indicator?: 'start' | 'end' | 'hidden';
 }
-export interface FormRadioField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'radio', TValue | null, TContext, TDeps, FormRadioProps> {
+export interface FormRadioField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'radio', TValue | null, TContext, TDeps, FormRadioProps>, FormOptionRenderers<TOption> {
     options: FormOptionsSource<TOption, TContext, TDeps, TValue | null>;
 }
 export type RadioFieldOutput<TField> = FieldOptionValue<TField> | NullableValue;