nuxt-ui-tools 0.1.0 → 0.1.2

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

@@ -0,0 +1,24 @@
+<script setup>
+import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
+import { formFieldInjectionKey, inputIdInjectionKey } from "@nuxt/ui/composables/useFormField";
+import { provide, ref } from "vue";
+defineProps({
+  modelValue: { type: [Boolean, String], required: true },
+  label: { type: String, required: true },
+  disabled: { type: Boolean, required: false },
+  controlClass: { type: String, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+provide(formFieldInjectionKey, void 0);
+provide(inputIdInjectionKey, ref(void 0));
+</script>
+
+<template>
+  <UCheckbox
+    :model-value="modelValue"
+    :aria-label="label"
+    :disabled="disabled"
+    :ui="{ root: controlClass }"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>

package/dist/runtime/form/fields/hierarchy/SelectionCheckbox.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    modelValue: boolean | 'indeterminate';
+    label: string;
+    disabled?: boolean;
+    controlClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/hierarchy/SelectionRadio.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    value: string;
+    label: string;
+    selected: boolean;
+    disabled?: boolean;
+    controlClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,27 @@
+<script setup>
+import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
+import { formFieldInjectionKey, inputIdInjectionKey } from "@nuxt/ui/composables/useFormField";
+import { computed, provide, ref } from "vue";
+const props = defineProps({
+  value: { type: String, required: true },
+  label: { type: String, required: true },
+  selected: { type: Boolean, required: true },
+  disabled: { type: Boolean, required: false },
+  controlClass: { type: String, required: false }
+});
+const emit = defineEmits(["select"]);
+const items = computed(() => [{ value: props.value, label: props.label }]);
+provide(formFieldInjectionKey, void 0);
+provide(inputIdInjectionKey, ref(void 0));
+</script>
+
+<template>
+  <URadioGroup
+    :model-value="selected ? value : void 0"
+    :items="items"
+    :aria-label="label"
+    :disabled="disabled"
+    :ui="{ root: controlClass, label: 'sr-only' }"
+    @update:model-value="emit('select')"
+  />
+</template>

package/dist/runtime/form/fields/hierarchy/SelectionRadio.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    value: string;
+    label: string;
+    selected: boolean;
+    disabled?: boolean;
+    controlClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -6,14 +6,22 @@ import UPopover from "@nuxt/ui/components/Popover.vue";
 import USelectMenu from "@nuxt/ui/components/SelectMenu.vue";
 import UTree from "@nuxt/ui/components/Tree.vue";
 import { computed, ref, watch } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import FormCompositeControl from "../../components/renderer/FormCompositeControl.vue";
 import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { useFormUi } from "../../composables/use-form-ui";
+import { formOptionKey } from "../../utils/options";
+import { resolveFormText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
+import SelectionCheckbox from "./SelectionCheckbox.vue";
+import SelectionRadio from "./SelectionRadio.vue";
+import { resolveHierarchySelection } from "./utils";
 const props = defineProps({
   field: { type: null, required: true },
   path: { type: Array, required: true }
 });
+const { t } = useUiToolsLocale();
 const { form, controlProps, controlSize, disabled, handleBlur, options, placeholder } = useFieldControl(
   () => props.field,
   () => props.path
@@ -36,6 +44,7 @@ const treeSelectionControl = computed(() => {
 });
 const treeSelectOpen = ref(false);
 const treeSearch = ref("");
+const expandedKeys = ref([]);
 const separator = computed(
   () => props.field.type === "cascader" ? props.field.separator ?? " / " : " / "
 );
@@ -76,9 +85,14 @@ const treeSelectLabel = computed(() => {
   if (!selected) return placeholder.value;
   return props.field.type === "tree-select" && props.field.showPath ? selected.pathLabel : String(selected.label);
 });
+const fieldLabel = computed(() => resolveFormText(props.field.label));
 watch(treeSelectOpen, (open) => {
   if (!open) treeSearch.value = "";
 });
+watch(treeSearch, (query) => {
+  if (!query.trim()) return;
+  expandedKeys.value = flattenTreeItems(visibleTreeItems.value).filter((item) => item.children?.length).map((item) => treeKey(item));
+});
 function flattenOptions(items, labels = [], depth = 0) {
   return items.flatMap((item) => {
     const path = [...labels, item.label];
@@ -102,9 +116,13 @@ function toTreeItems(items, labels = []) {
     ...item,
     label: treeItemLabel(item),
     pathLabel: [...labels, item.label].join(separator.value),
-    children: item.children ? toTreeItems(item.children, [...labels, item.label]) : void 0
+    children: item.children ? toTreeItems(item.children, [...labels, item.label]) : void 0,
+    ...treeSelectionControl.value === "none" ? {} : { onSelect: preventTreeSelection }
   }));
 }
+function preventTreeSelection(event) {
+  event.preventDefault();
+}
 function treeItemLabel(item) {
   if (props.field.type !== "tree-select" || !props.field.showChildrenCount) return item.label;
   const count = item.children?.length ?? 0;
@@ -125,9 +143,16 @@ function flattenTreeItems(items) {
 }
 function updateTreeModel(value) {
   if (Array.isArray(value)) {
+    const selected = /* @__PURE__ */ new Map();
+    for (const item of value) selected.set(formOptionKey(item.value), item.value);
     form.setValue(
       props.path,
-      value.map((item) => item.value)
+      resolveHierarchySelection({
+        next: [...selected.values()],
+        items: options.items.value,
+        propagate: treePropagateSelect(props.field) === true,
+        bubble: treeBubbleSelect(props.field) === true
+      })
     );
     return;
   }
@@ -139,7 +164,35 @@ function clearTreeSelection() {
   treeSelectOpen.value = false;
 }
 function treeKey(item) {
-  return String(item.value);
+  return formOptionKey(item.value);
+}
+function toggleTreeItem(item) {
+  const current = Array.isArray(model.value) ? model.value : [];
+  const selected = new Map(current.map((value) => [formOptionKey(value), value]));
+  const key = formOptionKey(item.value);
+  if (selected.has(key)) selected.delete(key);
+  else selected.set(key, item.value);
+  form.setValue(
+    props.path,
+    resolveHierarchySelection({
+      next: [...selected.values()],
+      intent: item.value,
+      items: options.items.value,
+      propagate: treePropagateSelect(props.field) === true,
+      bubble: treeBubbleSelect(props.field) === true
+    })
+  );
+}
+function selectRadioTreeItem(item) {
+  form.setValue(props.path, item.value);
+  if (isTreeSelect.value) treeSelectOpen.value = false;
+}
+function selectTreeRow(item) {
+  if (treeSelectionControl.value === "checkbox") {
+    toggleTreeItem(item);
+    return;
+  }
+  if (treeSelectionControl.value === "radio") selectRadioTreeItem(item);
 }
 function hasShowPath(field) {
   return field.type === "tree-select" && field.showPath === true;
@@ -154,12 +207,6 @@ function treeSelectionBehavior(field) {
   if (field.type !== "tree" && field.type !== "tree-select") return void 0;
   return field.selectionBehavior ?? (treeMultiple.value ? "toggle" : "replace");
 }
-function treeSelectionIcon(selected, indeterminate) {
-  if (treeSelectionControl.value === "radio")
-    return selected ? "i-lucide-circle-dot" : "i-lucide-circle";
-  if (indeterminate) return "i-lucide-square-minus";
-  return selected ? "i-lucide-square-check-big" : "i-lucide-square";
-}
 function treeVirtualize(field) {
   return field.type === "tree" ? field.virtualize : void 0;
 }
@@ -170,21 +217,24 @@ function isOptionValue(value) {
 
 <template>
   <FormFieldShell :field="field" :path="path">
-    <UTree
-      v-if="isTree"
-      v-bind="controlProps"
-      :model-value="treeModel"
-      :items="treeItems"
-      :get-key="treeKey"
-      :multiple="treeMultiple"
-      :selection-behavior="treeSelectionBehavior(field)"
-      :propagate-select="treePropagateSelect(field)"
-      :bubble-select="treeBubbleSelect(field)"
-      :virtualize="treeVirtualize(field)"
-      :disabled="disabled"
-      :size="controlSize"
-      :class="mergeFormUiClass('w-full py-1', formUi.ui.value.tree?.ui?.root)"
-      :ui="{
+    <FormCompositeControl v-slot="{ attrs }">
+      <UTree
+        v-if="isTree"
+        v-bind="{ ...controlProps, ...attrs }"
+        :aria-label="fieldLabel"
+        :model-value="treeModel"
+        v-model:expanded="expandedKeys"
+        :items="treeItems"
+        :get-key="treeKey"
+        :multiple="treeMultiple"
+        :selection-behavior="treeSelectionBehavior(field)"
+        :propagate-select="treePropagateSelect(field)"
+        :bubble-select="treeBubbleSelect(field)"
+        :virtualize="treeVirtualize(field)"
+        :disabled="disabled"
+        :size="controlSize"
+        :class="mergeFormUiClass('w-full py-1', formUi.ui.value.tree?.ui?.root)"
+        :ui="{
   item: formUi.ui.value.tree?.ui?.item,
   itemWithChildren: formUi.ui.value.tree?.ui?.itemWithChildren,
   listWithChildren: formUi.ui.value.tree?.ui?.listWithChildren,
@@ -194,86 +244,122 @@ function isOptionValue(value) {
   linkTrailing: formUi.ui.value.tree?.ui?.linkTrailing,
   linkTrailingIcon: formUi.ui.value.tree?.ui?.linkTrailingIcon
 }"
-      @update:model-value="updateTreeModel"
-      @blur="handleBlur"
-    >
-      <template v-if="treeSelectionControl !== 'none'" #item-leading="{ selected, indeterminate }">
-        <UIcon
-          :name="treeSelectionIcon(selected, indeterminate)"
-          aria-hidden="true"
-          :class="
-  mergeFormUiClass(
-    'size-4 shrink-0 transition-colors',
-    selected || indeterminate ? 'text-primary' : 'text-muted',
-    formUi.ui.value.tree?.ui?.selectionControl
-  )
-"
-        />
-      </template>
-    </UTree>
-    <UPopover
-      v-else-if="isTreeSelect"
-      v-model:open="treeSelectOpen"
-      :content="{ align: 'start', sideOffset: 6 }"
-      :ui="{
+        @update:model-value="updateTreeModel"
+        @blur="handleBlur"
+      >
+        <template
+          v-if="treeSelectionControl !== 'none'"
+          #item-wrapper="{ item, selected, expanded, indeterminate, handleToggle, ui }"
+        >
+          <div
+            :class="ui.link({ selected, disabled: disabled || item.disabled })"
+            :data-selected="selected ? '' : void 0"
+            @click="selectTreeRow(item)"
+          >
+            <SelectionCheckbox
+              v-if="treeSelectionControl === 'checkbox'"
+              :model-value="indeterminate ? 'indeterminate' : selected"
+              :label="String(item.label)"
+              :disabled="disabled || item.disabled"
+              :control-class="formUi.ui.value.tree?.ui?.selectionControl"
+              @click.stop
+              @update:model-value="toggleTreeItem(item)"
+            />
+            <SelectionRadio
+              v-else
+              :value="treeKey(item)"
+              :label="String(item.label)"
+              :selected="selected"
+              :disabled="disabled || item.disabled"
+              :control-class="formUi.ui.value.tree?.ui?.selectionControl"
+              @click.stop
+              @select="selectRadioTreeItem(item)"
+            />
+            <span :class="ui.linkLabel()">{{ item.label }}</span>
+            <button
+              v-if="item.children?.length"
+              type="button"
+              :aria-label="String(item.label)"
+              class="ms-auto inline-flex rounded-sm p-0.5 focus-visible:outline-2 focus-visible:outline-primary"
+              @click.stop="handleToggle"
+            >
+              <UIcon
+                name="i-lucide-chevron-down"
+                aria-hidden="true"
+                :class="[ui.linkTrailingIcon(), expanded ? 'rotate-180' : '']"
+              />
+            </button>
+          </div>
+        </template>
+      </UTree>
+      <UPopover
+        v-else-if="isTreeSelect"
+        v-model:open="treeSelectOpen"
+        :content="{ align: 'start', sideOffset: 6 }"
+        :ui="{
   content: mergeFormUiClass(
     'w-(--reka-popper-anchor-width) min-w-72 p-0',
     formUi.ui.value.treeSelect?.ui?.content
   )
 }"
-    >
-      <UButton
-        type="button"
-        color="neutral"
-        variant="outline"
-        :size="controlSize"
-        :disabled="disabled"
-        :loading="options.loading.value"
-        :trailing-icon="treeSelectOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
-        :class="
+      >
+        <UButton
+          v-bind="attrs"
+          type="button"
+          color="neutral"
+          variant="outline"
+          :size="controlSize"
+          :disabled="disabled"
+          :loading="options.loading.value"
+          :trailing-icon="treeSelectOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+          :class="
   mergeFormUiClass(
     'w-full justify-between font-normal',
     formUi.ui.value.treeSelect?.ui?.trigger
   )
 "
-        :ui="{
+          :ui="{
   label: mergeFormUiClass(
     'min-w-0 flex-1 truncate text-left',
     formUi.ui.value.treeSelect?.ui?.triggerLabel
   )
 }"
-        @blur="handleBlur"
-      >
-        {{ treeSelectLabel }}
-      </UButton>
+          @blur="handleBlur"
+        >
+          {{ treeSelectLabel }}
+        </UButton>
 
-      <template #content>
-        <div :class="mergeFormUiClass('grid min-w-0', formUi.ui.value.treeSelect?.ui?.root)">
-          <div v-if="field.searchable !== false" class="border-b border-default p-2">
-            <UInput
-              v-model="treeSearch"
-              icon="i-lucide-search"
+        <template #content>
+          <div :class="mergeFormUiClass('grid min-w-0', formUi.ui.value.treeSelect?.ui?.root)">
+            <div v-if="field.searchable !== false" class="border-b border-default p-2">
+              <UInput
+                v-model="treeSearch"
+                icon="i-lucide-search"
+                :size="controlSize"
+                :placeholder="t('form.fields.hierarchy.search')"
+                :class="mergeFormUiClass('w-full', formUi.ui.value.treeSelect?.ui?.search)"
+                autofocus
+              />
+            </div>
+            <UTree
+              v-if="visibleTreeItems.length"
+              :model-value="treeModel"
+              v-model:expanded="expandedKeys"
+              :items="visibleTreeItems"
+              :get-key="treeKey"
+              :multiple="treeMultiple"
+              :selection-behavior="treeSelectionBehavior(field)"
+              :propagate-select="treeSearch ? false : treePropagateSelect(field)"
+              :bubble-select="treeSearch ? false : treeBubbleSelect(field)"
+              :disabled="disabled"
               :size="controlSize"
-              placeholder="Search"
-              :class="mergeFormUiClass('w-full', formUi.ui.value.treeSelect?.ui?.search)"
-              autofocus
-            />
-          </div>
-          <UTree
-            v-if="visibleTreeItems.length"
-            :model-value="treeModel"
-            :items="visibleTreeItems"
-            :get-key="treeKey"
-            :multiple="treeMultiple"
-            :selection-behavior="treeSelectionBehavior(field)"
-            :propagate-select="treePropagateSelect(field)"
-            :bubble-select="treeBubbleSelect(field)"
-            :disabled="disabled"
-            :size="controlSize"
-            :class="
-  mergeFormUiClass('max-h-72 overflow-y-auto p-2', formUi.ui.value.treeSelect?.ui?.tree)
+              :class="
+  mergeFormUiClass(
+    'max-h-72 overflow-y-auto p-2',
+    formUi.ui.value.treeSelect?.ui?.tree
+  )
 "
-            :ui="{
+              :ui="{
   item: formUi.ui.value.tree?.ui?.item,
   itemWithChildren: formUi.ui.value.tree?.ui?.itemWithChildren,
   listWithChildren: formUi.ui.value.tree?.ui?.listWithChildren,
@@ -283,68 +369,97 @@ function isOptionValue(value) {
   linkTrailing: formUi.ui.value.tree?.ui?.linkTrailing,
   linkTrailingIcon: formUi.ui.value.tree?.ui?.linkTrailingIcon
 }"
-            @update:model-value="updateTreeModel"
-          >
-            <template
-              v-if="treeSelectionControl !== 'none'"
-              #item-leading="{ selected, indeterminate }"
+              @update:model-value="updateTreeModel"
             >
-              <UIcon
-                :name="treeSelectionIcon(selected, indeterminate)"
-                aria-hidden="true"
-                :class="
-  mergeFormUiClass(
-    'size-4 shrink-0 transition-colors',
-    selected || indeterminate ? 'text-primary' : 'text-muted',
-    formUi.ui.value.tree?.ui?.selectionControl
-  )
-"
-              />
-            </template>
-          </UTree>
-          <p
-            v-else
-            :class="
+              <template
+                v-if="treeSelectionControl !== 'none'"
+                #item-wrapper="{ item, selected, expanded, indeterminate, handleToggle, ui }"
+              >
+                <div
+                  :class="ui.link({ selected, disabled: disabled || item.disabled })"
+                  :data-selected="selected ? '' : void 0"
+                  @click="selectTreeRow(item)"
+                >
+                  <SelectionCheckbox
+                    v-if="treeSelectionControl === 'checkbox'"
+                    :model-value="indeterminate ? 'indeterminate' : selected"
+                    :label="String(item.label)"
+                    :disabled="disabled || item.disabled"
+                    :control-class="formUi.ui.value.tree?.ui?.selectionControl"
+                    @click.stop
+                    @update:model-value="toggleTreeItem(item)"
+                  />
+                  <SelectionRadio
+                    v-else
+                    :value="treeKey(item)"
+                    :label="String(item.label)"
+                    :selected="selected"
+                    :disabled="disabled || item.disabled"
+                    :control-class="formUi.ui.value.tree?.ui?.selectionControl"
+                    @click.stop
+                    @select="selectRadioTreeItem(item)"
+                  />
+                  <span :class="ui.linkLabel()">{{ item.label }}</span>
+                  <button
+                    v-if="item.children?.length"
+                    type="button"
+                    :aria-label="String(item.label)"
+                    class="ms-auto inline-flex rounded-sm p-0.5 focus-visible:outline-2 focus-visible:outline-primary"
+                    @click.stop="handleToggle"
+                  >
+                    <UIcon
+                      name="i-lucide-chevron-down"
+                      aria-hidden="true"
+                      :class="[ui.linkTrailingIcon(), expanded ? 'rotate-180' : '']"
+                    />
+                  </button>
+                </div>
+              </template>
+            </UTree>
+            <p
+              v-else
+              :class="
   mergeFormUiClass(
     'px-3 py-8 text-center text-sm text-muted',
     formUi.ui.value.treeSelect?.ui?.empty
   )
 "
-          >
-            No matching options
-          </p>
-          <div
-            v-if="field.clearable && selectedTreeItems.length"
-            class="flex justify-end border-t border-default p-2"
-          >
-            <UButton
-              type="button"
-              color="neutral"
-              variant="ghost"
-              size="xs"
-              icon="i-lucide-x"
-              label="Clear selection"
-              @click="clearTreeSelection"
-            />
+            >
+              {{ t("form.fields.hierarchy.empty") }}
+            </p>
+            <div
+              v-if="field.clearable && selectedTreeItems.length"
+              class="flex justify-end border-t border-default p-2"
+            >
+              <UButton
+                type="button"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-x"
+                :label="t('form.fields.hierarchy.clear')"
+                @click="clearTreeSelection"
+              />
+            </div>
           </div>
-        </div>
-      </template>
-    </UPopover>
-    <USelectMenu
-      v-else
-      v-model="model"
-      v-bind="controlProps"
-      class="w-full"
-      :items="selectItems"
-      value-key="value"
-      :label-key="field.type === 'cascader' || hasShowPath(field) ? 'pathLabel' : 'label'"
-      :multiple="field.multiple"
-      :search-input="field.searchable ?? true"
-      :clear="field.clearable === true"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :loading="options.loading.value"
-      @blur="handleBlur"
-    />
+        </template>
+      </UPopover>
+      <USelectMenu
+        v-else
+        v-model="model"
+        v-bind="controlProps"
+        class="w-full"
+        :items="selectItems"
+        value-key="value"
+        :label-key="field.type === 'cascader' || hasShowPath(field) ? 'pathLabel' : 'label'"
+        :multiple="field.multiple"
+        :search-input="field.searchable ?? true"
+        :clear="field.clearable === true"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :loading="options.loading.value"
+        @blur="handleBlur"
+      />
+    </FormCompositeControl>
   </FormFieldShell>
 </template>

package/dist/runtime/form/fields/hierarchy/utils.d.ts

@@ -0,0 +1,9 @@
+import type { FormOptionValue } from '../../types/index.js';
+import { type ResolvedFormOption } from '../../utils/options.js';
+export declare function resolveHierarchySelection(params: {
+    next: readonly FormOptionValue[];
+    intent?: FormOptionValue;
+    items: readonly ResolvedFormOption[];
+    propagate: boolean;
+    bubble: boolean;
+}): FormOptionValue[];

package/dist/runtime/form/fields/hierarchy/utils.js

@@ -0,0 +1,32 @@
+import { formOptionKey } from "../../utils/options.js";
+export function resolveHierarchySelection(params) {
+  const values = /* @__PURE__ */ new Map();
+  for (const value of params.next) values.set(formOptionKey(value), value);
+  const intent = params.intent ? findOption(params.items, params.intent) : void 0;
+  if (params.propagate && intent) {
+    const selecting = values.has(formOptionKey(intent.value));
+    for (const descendant of flattenOptions(intent.children ?? [])) {
+      const key = formOptionKey(descendant.value);
+      if (selecting) values.set(key, descendant.value);
+      else values.delete(key);
+    }
+  }
+  if (params.bubble)
+    for (const item of [...flattenOptions(params.items)].reverse()) {
+      if (!item.children?.length) continue;
+      const key = formOptionKey(item.value);
+      const allChildrenSelected = item.children.every(
+        (child) => values.has(formOptionKey(child.value))
+      );
+      if (allChildrenSelected) values.set(key, item.value);
+      else values.delete(key);
+    }
+  return [...values.values()];
+}
+function findOption(items, value) {
+  const key = formOptionKey(value);
+  return flattenOptions(items).find((item) => formOptionKey(item.value) === key);
+}
+function flattenOptions(items) {
+  return items.flatMap((item) => [item, ...flattenOptions(item.children ?? [])]);
+}