nuxt-ui-tools 1.17.0 → 1.18.0

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/checkbox-card/component.vue

@@ -7,6 +7,7 @@ import { formOptionKey } 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";
 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(() => groupChoiceCardItems(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, 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 {
     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

@@ -7,12 +7,19 @@ import type { ChoiceCardMark } from './types.js';
  * semantics. Styled through `ui.tile`, `ui.tileIcon`, `ui.optionIcon`, `ui.check`,
  * `ui.checkIcon`, `ui.switch`, and `ui.switchThumb`; the tile and the switch carry the option
  * value as `data-value` for per-option styling.
+ *
+ * A `compact` card lays itself out as one row inside the grid its label becomes: the icon (or a
+ * smaller tile) beside the title, over a one-line description. Both lines truncate and keep the
+ * full text in their tooltip, and the marks center on the row. The card passes the description
+ * here because the Nuxt UI group would draw it below the icon instead.
  */
 type __VLS_Props = {
     label?: string;
+    description?: string;
     icon?: string;
     value?: string | number | boolean;
     tile: boolean;
+    compact?: boolean;
     mark: ChoiceCardMark;
     selected: boolean;
     ui?: FormControlUi;

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

@@ -3,13 +3,17 @@ import UIcon from "@nuxt/ui/components/Icon.vue";
 import { mergeFormUiClass } from "../../utils/ui";
 defineProps({
   label: { type: String, required: false },
+  description: { type: String, required: false },
   icon: { type: String, required: false },
   value: { type: [String, Number, Boolean], required: false },
   tile: { type: Boolean, required: true },
+  compact: { type: Boolean, required: false },
   mark: { type: String, required: true },
   selected: { type: Boolean, required: true },
   ui: { type: Object, required: false }
 });
+const COMPACT_MARK = "end-2.5 top-1/2 -translate-y-1/2";
+const COMPACT_TILE = "col-start-1 row-span-2 me-2.5 size-7 rounded-md";
 </script>
 
 <template>
@@ -20,6 +24,7 @@ defineProps({
     :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',
+    compact ? COMPACT_TILE : void 0,
     ui?.tile
   )
 "
@@ -27,7 +32,26 @@ defineProps({
   >
     <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">
+  <template v-if="compact">
+    <UIcon
+      v-if="icon && !tile"
+      :name="icon"
+      :class="
+  mergeFormUiClass('col-start-1 row-span-2 me-2.5 size-4 shrink-0 text-muted', ui?.optionIcon)
+"
+      aria-hidden="true"
+    />
+    <span :title="label" class="col-start-2 block truncate" data-choice-title>{{ label }}</span>
+    <span
+      v-if="description"
+      :title="description"
+      class="col-start-2 block truncate text-xs font-normal text-muted"
+      data-choice-description
+    >
+      {{ description }}
+    </span>
+  </template>
+  <span v-else-if="!tile && icon" class="inline-flex items-center gap-2">
     <UIcon
       :name="icon"
       :class="mergeFormUiClass('size-4 shrink-0', ui?.optionIcon)"
@@ -42,6 +66,7 @@ defineProps({
     :class="
   mergeFormUiClass(
     'absolute end-3 top-3 grid size-4 place-items-center rounded-[4px] bg-primary text-inverted',
+    compact ? COMPACT_MARK : void 0,
     ui?.check
   )
 "
@@ -57,6 +82,7 @@ defineProps({
     :class="
   mergeFormUiClass(
     'group/switch absolute end-3 top-3.5 inline-flex h-[18px] w-8 shrink-0 items-center rounded-full bg-accented p-0.5 transition-colors duration-150 data-[state=checked]:bg-primary',
+    compact ? COMPACT_MARK : void 0,
     ui?.switch
   )
 "

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

@@ -7,12 +7,19 @@ import type { ChoiceCardMark } from './types.js';
  * semantics. Styled through `ui.tile`, `ui.tileIcon`, `ui.optionIcon`, `ui.check`,
  * `ui.checkIcon`, `ui.switch`, and `ui.switchThumb`; the tile and the switch carry the option
  * value as `data-value` for per-option styling.
+ *
+ * A `compact` card lays itself out as one row inside the grid its label becomes: the icon (or a
+ * smaller tile) beside the title, over a one-line description. Both lines truncate and keep the
+ * full text in their tooltip, and the marks center on the row. The card passes the description
+ * here because the Nuxt UI group would draw it below the icon instead.
  */
 type __VLS_Props = {
     label?: string;
+    description?: string;
     icon?: string;
     value?: string | number | boolean;
     tile: boolean;
+    compact?: boolean;
     mark: ChoiceCardMark;
     selected: boolean;
     ui?: FormControlUi;

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

@@ -1,3 +1,7 @@
+import type { FormOption, FormOptionValue } from '../../types/options.js';
+import type { FormText } from '../../types/utils.js';
+/** Size of the cards: `compact` packs long option lists into smaller, single-row cards. */
+export type FormChoiceCardDensity = 'default' | 'compact';
 /**
  * Presentation of the radio and checkbox cards.
  *
@@ -6,6 +10,9 @@
  * // 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' }
+ *
+ * // Eight options in four groups, as smaller cards with the icon beside a one-line label.
+ * props: { columns: '1 md:2', density: 'compact', icon: 'tile', indicator: 'corner' }
  * ```
  */
 export interface FormChoiceCardProps {
@@ -25,12 +32,58 @@ export interface FormChoiceCardProps {
     indicator?: 'start' | 'end' | 'hidden' | 'corner' | 'switch';
     /**
      * 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
+     * it (`tile`) that takes the selection color, beside the label in the `compact` density. Style the parts the engine renders with the
      * `ui` slots `tile`, `tileIcon`, `optionIcon`, `check`, `checkIcon`, `switch`, and
      * `switchThumb`, next to the Nuxt UI slots of the group. The tile and the switch carry the
      * option value as `data-value`, so one option can take its own colors.
      */
     icon?: 'inline' | 'tile';
+    /**
+     * Size of the cards. `compact` shrinks the padding and tile, puts the icon beside the label
+     * instead of above it, and keeps the title and the description on one line each, truncated with
+     * an ellipsis (the full description stays in the card's tooltip). Defaults to `default`.
+     */
+    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.
+ */
+export interface FormChoiceCardOption<TValue extends FormOptionValue = FormOptionValue> extends FormOption<TValue> {
+    /** Icon shown with the label, inline or in a tile (see `props.icon`). */
+    icon?: string;
+    /**
+     * Heading this option is listed under. Options sharing a heading are listed together, and the
+     * headings follow the order in which they first appear in the options. Options without one
+     * stay together, without a heading. Read from this property for options written inline in the
+     * schema; options a function, a promise or a query returns need `groupKey`.
+     */
+    group?: FormText;
 }
+/** Authored option item accepted by radio and checkbox cards. */
+export type FormChoiceCardOptionItem<TValue extends FormOptionValue = FormOptionValue> = TValue | FormChoiceCardOption<TValue>;
+/** The card layouts: icon before the label, icon tile above it, or one compact row. */
+export type ChoiceCardLayout = 'inline' | 'stacked' | 'compact';
 /** The mark a card draws itself, in place of the Nuxt UI indicator. */
 export type ChoiceCardMark = 'corner' | 'switch' | 'none';
+/** The Nuxt UI group a card field wraps. */
+export type ChoiceCardKind = 'checkbox' | 'radio';

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

@@ -1,16 +1,20 @@
 import type { FormControlUi } from '../../types/index.js';
-import type { ChoiceCardMark, FormChoiceCardProps } from './types.js';
+import type { ChoiceCardKind, ChoiceCardMark, 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`, `mark`).
+ * selection mark, where option icons go, the density, and the headings of grouped options.
+ * Returns the props and `ui` slots for the Nuxt UI group, and what the card content renders
+ * (`compact`, `tile`, `mark`).
  */
 export declare function useChoiceCard(params: {
+    kind: ChoiceCardKind;
     props: () => FormChoiceCardProps;
     ui: () => FormControlUi | undefined;
 }): {
+    compact: import("vue").ComputedRef<boolean>;
+    groupsClass: import("vue").ComputedRef<string>;
     indicator: import("vue").ComputedRef<"end" | "start" | "hidden" | undefined>;
     mark: import("vue").ComputedRef<ChoiceCardMark>;
     orientation: import("vue").ComputedRef<"horizontal" | "vertical" | undefined>;

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

@@ -2,7 +2,25 @@ 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 const CHOICE_CARD_PROPS = ["columns", "density", "icon", "indicator", "orientation"];
+const LAYOUT_UI = {
+  compact: {
+    gap: "gap-2",
+    item: "items-center p-2.5",
+    label: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center",
+    wrapper: "min-w-0 items-stretch"
+  },
+  inline: { gap: "gap-2.5" },
+  stacked: {
+    gap: "gap-2.5",
+    label: "flex flex-col items-start gap-2.5 font-semibold",
+    wrapper: "flex flex-col items-start gap-1.5"
+  }
+};
+const ICON_UI = {
+  checkbox: void 0,
+  radio: "hidden"
+};
 export function useChoiceCard(params) {
   const columnsValue = useResponsiveValue(() => String(params.props().columns ?? ""));
   const columns = computed(() => {
@@ -13,7 +31,12 @@ export function useChoiceCard(params) {
     const value = params.props().indicator;
     return value === "corner" || value === "switch" ? value : "none";
   });
+  const compact = computed(() => params.props().density === "compact");
   const tile = computed(() => params.props().icon === "tile");
+  const layout = computed(() => {
+    if (compact.value) return "compact";
+    return tile.value ? "stacked" : "inline";
+  });
   const indicator = computed(() => {
     const value = params.props().indicator;
     return value === "corner" || value === "switch" ? "hidden" : value;
@@ -24,36 +47,35 @@ export function useChoiceCard(params) {
   );
   const ui = computed(() => {
     const current = params.ui();
+    const layoutUi = LAYOUT_UI[layout.value];
+    const stacked = layout.value === "stacked";
     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" : ""}`,
+        columns.value ? `grid grid-cols-[repeat(var(--nut-choice-columns),minmax(0,1fr))] ${layoutUi.gap}` : `${layoutUi.gap}${orientation.value === "horizontal" ? " flex-wrap" : ""}`,
         current?.fieldset
       ),
       item: mergeFormUiClass(
-        `border-default ${CARD_SELECTED_RING}`,
+        `border-default ${CARD_SELECTED_RING} ${layoutUi.item ?? ""}`,
         mark.value === "none" ? void 0 : "relative",
         current?.item
       ),
-      // The card label renders the option icon itself (inline or as a tile): Nuxt UI's own copy
-      // would show it twice.
-      icon: mergeFormUiClass("hidden", current?.icon),
-      // 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
-      ),
+      icon: mergeFormUiClass(ICON_UI[params.kind], current?.icon),
+      // The heading of a group of options, set above its cards.
+      legend: mergeFormUiClass("mb-2 text-sm font-medium text-muted", current?.legend),
+      label: mergeFormUiClass(layoutUi.label, 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 items-start gap-1.5" : void 0,
+        layoutUi.wrapper,
         [
           indicator.value === "hidden" ? "ms-0 text-start" : "",
-          mark.value === "corner" && !tile.value ? "pe-7" : "",
-          mark.value === "switch" && !tile.value ? "pe-12" : ""
+          mark.value === "corner" && !stacked ? "pe-7" : "",
+          mark.value === "switch" && !stacked ? "pe-12" : ""
         ].join(" "),
         current?.wrapper
       )
     };
   });
-  return { indicator, mark, orientation, style, tile, ui };
+  const groupsClass = computed(() => mergeFormUiClass("flex flex-col gap-5", params.ui()?.groups));
+  return { compact, groupsClass, indicator, mark, orientation, style, tile, ui };
 }

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

@@ -0,0 +1,27 @@
+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
+ * it, as the control the label points to, and each later group takes `<id>-group-<index>`. The other
+ * attributes (`data-form-field`, `aria-label`) stay on every group, so focus moving from one
+ * group to the next does not leave the field. Attributes without an `id` are returned as they
+ * are: each Nuxt UI group then generates its own.
+ */
+export declare function choiceCardGroupAttrs<TAttrs extends FormObject>(attrs: TAttrs, index: number): TAttrs;

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

@@ -0,0 +1,17 @@
+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;
+  return { ...attrs, id: `${id}-group-${index}` };
+}

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

@@ -133,15 +133,16 @@ const selectedTreeItems = computed(() => {
   return Array.isArray(selected) ? selected : [selected];
 });
 const treeSelectLabel = computed(() => {
+  const empty = placeholder.value ?? "";
   if (!selectedTreeItems.value.length) {
-    return placeholder.value;
+    return empty;
   }
   if (treeMultiple.value) {
     return selectedTreeItems.value.map((item) => item.pathLabel).join(", ");
   }
   const [selected] = selectedTreeItems.value;
   if (!selected) {
-    return placeholder.value;
+    return empty;
   }
   return props.field.type === "tree-select" && fieldProps.value.showPath ? selected.pathLabel : String(selected.label);
 });

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

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