nuxt-ui-tools 1.17.1 → 1.19.0

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

@@ -2,7 +2,8 @@ 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.
+ * section in view, the navigation summary, whether the navigation shows, the surface the
+ * sections are drawn with, and the actions a part can take on a section.
  */
 export declare function useFormPage(params: {
     root: ReturnType<typeof useFormRoot>;
@@ -19,6 +20,7 @@ export declare function useFormPage(params: {
     }[]>;
     modified: import("vue").ComputedRef<number>;
     navigationTitle: import("vue").ComputedRef<string | undefined>;
+    navigationVisible: import("vue").ComputedRef<boolean>;
     register: (key: string, element: HTMLElement) => () => void;
     remaining: import("vue").ComputedRef<number>;
     resetSection: (key: string) => Promise<void>;
@@ -42,6 +44,8 @@ export declare function useFormPage(params: {
     scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
     sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
     stickyOffset: import("vue").Ref<number, number>;
+    surface: import("vue").ComputedRef<import("../types/index.js").FormPageSurface>;
+    surfaceClasses: import("vue").ComputedRef<import("../utils/page-surface.js").FormPageSurfaceClasses>;
 };
 export declare function provideFormPage(page: ReturnType<typeof useFormPage>): {
     active: import("vue").Ref<string | undefined, string | undefined>;
@@ -53,6 +57,7 @@ export declare function provideFormPage(page: ReturnType<typeof useFormPage>): {
     }[]>;
     modified: import("vue").ComputedRef<number>;
     navigationTitle: import("vue").ComputedRef<string | undefined>;
+    navigationVisible: import("vue").ComputedRef<boolean>;
     register: (key: string, element: HTMLElement) => () => void;
     remaining: import("vue").ComputedRef<number>;
     resetSection: (key: string) => Promise<void>;
@@ -76,6 +81,8 @@ export declare function provideFormPage(page: ReturnType<typeof useFormPage>): {
     scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
     sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
     stickyOffset: import("vue").Ref<number, number>;
+    surface: import("vue").ComputedRef<import("../types/index.js").FormPageSurface>;
+    surfaceClasses: import("vue").ComputedRef<import("../utils/page-surface.js").FormPageSurfaceClasses>;
 };
 /** The page a part renders in. Parts only work inside `FormPage`. */
 export declare function useFormPageContext(): {
@@ -88,6 +95,7 @@ export declare function useFormPageContext(): {
     }[]>;
     modified: import("vue").ComputedRef<number>;
     navigationTitle: import("vue").ComputedRef<string | undefined>;
+    navigationVisible: import("vue").ComputedRef<boolean>;
     register: (key: string, element: HTMLElement) => () => void;
     remaining: import("vue").ComputedRef<number>;
     resetSection: (key: string) => Promise<void>;
@@ -111,4 +119,6 @@ export declare function useFormPageContext(): {
     scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
     sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
     stickyOffset: import("vue").Ref<number, number>;
+    surface: import("vue").ComputedRef<import("../types/index.js").FormPageSurface>;
+    surfaceClasses: import("vue").ComputedRef<import("../utils/page-surface.js").FormPageSurfaceClasses>;
 };

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

@@ -1,11 +1,14 @@
 import { computed, inject, provide, ref } from "vue";
 import { getSchemaDirtyCheck } from "../utils/controls.js";
 import {
+  getFormPageNavigationMinSections,
   getFormPageNavigationTitle,
   getFormPageSections,
+  isFormPageSectionBlocking,
   isFormPageSectionVisible,
   resolveFormPageSectionState
 } from "../utils/page.js";
+import { getFormPageSurfaceClasses, resolveFormPageSurface } from "../utils/page-surface.js";
 import { cloneFormValue } from "../utils/path.js";
 import { useFormPageScroll } from "./use-form-page-scroll.js";
 export function useFormPage(params) {
@@ -36,11 +39,11 @@ export function useFormPage(params) {
   );
   const dirtyCheck = computed(() => getSchemaDirtyCheck(root.schema.value));
   const navigationTitle = computed(() => getFormPageNavigationTitle(root.schema.value));
-  const remaining = computed(
-    () => sections.value.filter(
-      (section) => section.optional ? section.missing > 0 || section.status === "invalid" : section.status !== "complete"
-    ).length
-  );
+  const navigationMinSections = computed(() => getFormPageNavigationMinSections(root.schema.value));
+  const navigationVisible = computed(() => sections.value.length >= navigationMinSections.value);
+  const surface = computed(() => resolveFormPageSurface(root.formUi.ui.value.page?.surface));
+  const surfaceClasses = computed(() => getFormPageSurfaceClasses(surface.value));
+  const remaining = computed(() => sections.value.filter(isFormPageSectionBlocking).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 });
@@ -62,13 +65,16 @@ export function useFormPage(params) {
     items,
     modified,
     navigationTitle,
+    navigationVisible,
     register: scroll.register,
     remaining,
     resetSection,
     root,
     scrollTo: scroll.scrollTo,
     sections,
-    stickyOffset
+    stickyOffset,
+    surface,
+    surfaceClasses
   };
 }
 const formPageKey = Symbol("nuxt-ui-tools-form-page");

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

@@ -221,7 +221,7 @@ export function useFormRuntime(params) {
       active: currentStepIndex.value === index,
       index,
       key: step.key ?? String(index + 1),
-      label: isFunction(step.title) ? String(step.title()) : String(step.title ?? step.key ?? `Step ${index + 1}`),
+      label: isFunction(step.title) ? String(step.title()) : String(step.title ?? step.key ?? t("form.steps.fallback", { number: index + 1 })),
       root: step.root
     }))
   );

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/array-primitive/types.d.ts

@@ -5,7 +5,7 @@ import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { ResolveFormFieldValue } from '../../types/field-output.js';
 import type { FormObject, FormRenderable, FormText } from '../../types/utils.js';
 type ContainerFieldType = 'array-list' | 'array-table' | 'array-tabs' | 'array-variant' | 'array-collapse' | 'array-primitive' | 'object' | 'group' | 'input-group' | 'card' | 'column' | 'matrix' | 'info' | 'divider' | 'section' | 'button' | 'hidden';
-type ItemFieldChrome = 'key' | 'label' | 'description' | 'hint' | 'help' | 'labelExtra' | 'layout';
+type ItemFieldChrome = 'key' | 'label' | 'description' | 'hint' | 'help' | 'disabledReason' | 'labelExtra' | 'layout';
 type DistributiveOmit<TValue, TKey extends PropertyKey> = TValue extends unknown ? Omit<TValue, TKey> : never;
 export type FormArrayPrimitiveItemField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = DistributiveOmit<Exclude<FormField<TContext, TDeps>, {
     type: ContainerFieldType;

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,10 +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 } from "../choice-card/utils";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -16,7 +17,11 @@ const { fieldProps, form, controlProps, disabled, handleBlur, options } = useFie
   () => props.path,
   { omit: CHOICE_CARD_PROPS }
 );
-const cards = useChoiceCard({ props: () => fieldProps.value, ui: () => controlProps.value.ui });
+const cards = useChoiceCard({
+  kind: "checkbox",
+  props: () => fieldProps.value,
+  ui: () => controlProps.value.ui
+});
 const optionByKey = computed(
   () => new Map(options.items.value.map((item) => [formOptionKey(item.value), item]))
 );
@@ -36,9 +41,20 @@ const model = computed({
 const items = computed(
   () => options.items.value.map(({ icon: _icon, ...item }) => ({
     ...item,
+    description: cards.compact.value ? void 0 : item.description,
     value: formOptionKey(item.value)
   }))
 );
+const groups = computed(() => groupOptions(items.value));
+function selectionOf(group) {
+  return model.value.filter((key) => group.items.some((item) => item.value === key));
+}
+function update(group, keys) {
+  const kept = model.value.filter(
+    (key) => keys.includes(key) || !group.items.some((item) => item.value === key)
+  );
+  model.value = [...kept, ...keys.filter((key) => !kept.includes(key))];
+}
 function isOptionValue(value) {
   return isString(value) || isNumber(value) || isBoolean(value);
 }
@@ -46,32 +62,42 @@ function isOptionValue(value) {
 
 <template>
   <FormFieldShell :field="field" :path="path">
-    <UCheckboxGroup
-      v-model="model"
-      v-bind="controlProps"
-      :items="items"
-      value-key="value"
-      label-key="label"
-      description-key="description"
-      variant="card"
-      :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"
-          :value="optionByKey.get(item.value)?.value"
-          :tile="cards.tile.value"
-          :mark="cards.mark.value"
-          :selected="model.includes(item.value)"
-          :ui="cards.ui.value"
-        />
-      </template>
-    </UCheckboxGroup>
+    <div :class="cards.groupsClass.value">
+      <UCheckboxGroup
+        v-for="(group, index) in groups"
+        :key="group.key"
+        :model-value="selectionOf(group)"
+        v-bind="choiceCardGroupAttrs(controlProps, index)"
+        :items="group.items"
+        value-key="value"
+        label-key="label"
+        description-key="description"
+        variant="card"
+        :legend="group.heading"
+        :orientation="cards.orientation.value"
+        :indicator="cards.indicator.value"
+        :ui="cards.ui.value"
+        :style="cards.style.value"
+        :disabled="disabled"
+        @update:model-value="update(group, $event)"
+        @blur="handleBlur"
+      >
+        <template #label="{ item }">
+          <ChoiceCardLabel
+            :label="optionByKey.get(item.value)?.label ?? item.label"
+            :description="
+  cards.compact.value ? optionByKey.get(item.value)?.description : void 0
+"
+            :icon="optionByKey.get(item.value)?.icon"
+            :value="optionByKey.get(item.value)?.value"
+            :tile="cards.tile.value"
+            :compact="cards.compact.value"
+            :mark="cards.mark.value"
+            :selected="model.includes(item.value)"
+            :ui="cards.ui.value"
+          />
+        </template>
+      </UCheckboxGroup>
+    </div>
   </FormFieldShell>
 </template>

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

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

package/dist/runtime/form/fields/checkbox-card/config.js

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

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, FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
-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> {
+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;