nuxt-ui-tools 0.1.3 → 1.0.0

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

@@ -5,64 +5,114 @@ import UInput from "@nuxt/ui/components/Input.vue";
 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 { useScrollShadow } from "@nuxt/ui/composables/useScrollShadow";
 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 FormCompositeControl from "../../components/renderer/form-composite-control.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import FormOptionMenuFooter from "../../components/utils/form-option-menu-footer.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { useFormUi } from "../../composables/use-form-ui";
 import { formOptionKey } from "../../utils/options";
+import { isBoolean, isNumber, isString } from "../../utils/predicate";
 import { resolveFormText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
-import SelectionCheckbox from "./SelectionCheckbox.vue";
-import SelectionRadio from "./SelectionRadio.vue";
+import SelectionCheckbox from "./selection-checkbox.vue";
+import SelectionRadio from "./selection-radio.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(
+const {
+  fieldProps: hierarchyProps,
+  form,
+  controlProps,
+  controlSize,
+  disabled,
+  handleBlur,
+  interactionOwnerClass,
+  options,
+  placeholder,
+  validationPending
+} = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  {
+    omit: [
+      "multiple",
+      "searchable",
+      "clearable",
+      "childrenKey",
+      "valueKey",
+      "labelKey",
+      "selectionControl",
+      "selectionBehavior",
+      "propagateSelect",
+      "bubbleSelect",
+      "cascade",
+      "showPath",
+      "showChildrenCount",
+      "separator",
+      "leafOnly",
+      "virtualize"
+    ]
+  }
 );
 const formUi = useFormUi();
+const fieldProps = computed(
+  () => hierarchyProps.value
+);
 const isTree = computed(() => props.field.type === "tree");
 const isTreeSelect = computed(() => props.field.type === "tree-select");
 const usesTree = computed(() => isTree.value || isTreeSelect.value);
 const treeMultiple = computed(() => {
-  const field = props.field;
-  if (field.type !== "tree" && field.type !== "tree-select") return field.multiple === true;
-  if (field.selectionControl === "radio") return false;
-  return field.multiple === true;
+  const { field } = props;
+  if (field.type !== "tree" && field.type !== "tree-select") {
+    return fieldProps.value.multiple === true;
+  }
+  if (fieldProps.value.selectionControl === "radio") {
+    return false;
+  }
+  return fieldProps.value.multiple === true;
 });
 const treeSelectionControl = computed(() => {
-  const field = props.field;
-  if (field.type !== "tree" && field.type !== "tree-select") return "none";
-  if (field.selectionControl) return field.selectionControl;
+  const { field } = props;
+  if (field.type !== "tree" && field.type !== "tree-select") {
+    return "none";
+  }
+  if (fieldProps.value.selectionControl) {
+    return fieldProps.value.selectionControl;
+  }
   return treeMultiple.value ? "checkbox" : "radio";
 });
 const treeSelectOpen = ref(false);
 const treeSearch = ref("");
 const expandedKeys = ref([]);
 const separator = computed(
-  () => props.field.type === "cascader" ? props.field.separator ?? " / " : " / "
+  () => props.field.type === "cascader" ? fieldProps.value.separator ?? " / " : " / "
 );
 const flatItems = computed(
   () => flattenOptions(options.items.value)
 );
 const selectableItems = computed(
-  () => props.field.type === "cascader" && props.field.leafOnly ? flatItems.value.filter((item) => item.leaf) : flatItems.value
+  () => props.field.type === "cascader" && fieldProps.value.leafOnly ? flatItems.value.filter((item) => item.leaf) : flatItems.value
 );
 const selectItems = computed(() => [...selectableItems.value]);
 const treeItems = computed(() => toTreeItems(options.items.value));
 const visibleTreeItems = computed(
-  () => filterTreeItems(treeItems.value, treeSearch.value)
+  () => options.remote.value ? treeItems.value : filterTreeItems(treeItems.value, treeSearch.value)
 );
+const loadingKeys = ref([]);
+const treeListRef = ref(null);
+const treeListShadow = useScrollShadow(treeListRef, { size: 16 });
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    if (Array.isArray(value)) return value.filter(isOptionValue);
+    if (Array.isArray(value)) {
+      return value.filter(isOptionValue);
+    }
     return isOptionValue(value) ? value : null;
   },
   set: (value) => form.setValue(props.path, value)
@@ -70,71 +120,134 @@ const model = computed({
 const treeModel = computed(() => {
   const values = Array.isArray(model.value) ? model.value : [model.value];
   const selected = flattenTreeItems(treeItems.value).filter((item) => values.includes(item.value));
-  if (usesTree.value ? treeMultiple.value : props.field.multiple) return selected;
+  if (usesTree.value ? treeMultiple.value : fieldProps.value.multiple) {
+    return selected;
+  }
   return selected[0];
 });
 const selectedTreeItems = computed(() => {
   const selected = treeModel.value;
-  if (!selected) return [];
+  if (!selected) {
+    return [];
+  }
   return Array.isArray(selected) ? selected : [selected];
 });
 const treeSelectLabel = computed(() => {
-  if (!selectedTreeItems.value.length) return placeholder.value;
-  if (treeMultiple.value) return selectedTreeItems.value.map((item) => item.pathLabel).join(", ");
-  const selected = selectedTreeItems.value[0];
-  if (!selected) return placeholder.value;
-  return props.field.type === "tree-select" && props.field.showPath ? selected.pathLabel : String(selected.label);
+  if (!selectedTreeItems.value.length) {
+    return placeholder.value;
+  }
+  if (treeMultiple.value) {
+    return selectedTreeItems.value.map((item) => item.pathLabel).join(", ");
+  }
+  const [selected] = selectedTreeItems.value;
+  if (!selected) {
+    return placeholder.value;
+  }
+  return props.field.type === "tree-select" && fieldProps.value.showPath ? selected.pathLabel : String(selected.label);
 });
 const fieldLabel = computed(() => resolveFormText(props.field.label));
+const ownedControlUi = computed(() => ({
+  ...controlProps.value.ui,
+  content: mergeFormUiClass(controlProps.value.ui?.content, interactionOwnerClass.value)
+}));
 watch(treeSelectOpen, (open) => {
-  if (!open) treeSearch.value = "";
+  if (open) {
+    options.activate();
+    return;
+  }
+  treeSearch.value = "";
 });
 watch(treeSearch, (query) => {
-  if (!query.trim()) return;
+  if (options.remote.value) {
+    options.setSearch(query);
+    return;
+  }
+  if (!query.trim()) {
+    return;
+  }
   expandedKeys.value = flattenTreeItems(visibleTreeItems.value).filter((item) => item.children?.length).map((item) => treeKey(item));
 });
+function isExpandable(item) {
+  return Boolean(item.children?.length) || item.lazy === true;
+}
+function isLoadingItem(item) {
+  return loadingKeys.value.includes(treeKey(item));
+}
+async function toggleNode(item) {
+  const key = treeKey(item);
+  if (expandedKeys.value.includes(key)) {
+    expandedKeys.value = expandedKeys.value.filter((entry) => entry !== key);
+    return;
+  }
+  expandedKeys.value = [...expandedKeys.value, key];
+  if (!item.lazy || item.children?.length || isLoadingItem(item)) {
+    return;
+  }
+  loadingKeys.value = [...loadingKeys.value, key];
+  try {
+    await options.loadChildren({ label: String(item.label), value: item.value });
+  } finally {
+    loadingKeys.value = loadingKeys.value.filter((entry) => entry !== key);
+  }
+}
 function flattenOptions(items, labels = [], depth = 0) {
   return items.flatMap((item) => {
     const path = [...labels, item.label];
     const current = {
       ...item,
-      label: displayLabel(item, depth),
-      pathLabel: path.join(separator.value),
       depth,
-      leaf: !item.children?.length
+      label: displayLabel(item, depth),
+      leaf: !item.children?.length,
+      pathLabel: path.join(separator.value)
     };
     return [current, ...flattenOptions(item.children ?? [], path, depth + 1)];
   });
 }
 function displayLabel(item, depth) {
-  const count = props.field.type === "tree-select" && props.field.showChildrenCount ? ` (${item.children?.length ?? 0})` : "";
-  if (props.field.type === "cascader" || hasShowPath(props.field)) return item.label;
+  const count = props.field.type === "tree-select" && fieldProps.value.showChildrenCount ? ` (${item.children?.length ?? 0})` : "";
+  if (props.field.type === "cascader" || hasShowPath(props.field)) {
+    return item.label;
+  }
   return `${"  ".repeat(depth)}${item.label}${count}`;
 }
 function toTreeItems(items, labels = []) {
-  return items.map((item) => ({
-    ...item,
-    label: treeItemLabel(item),
-    pathLabel: [...labels, item.label].join(separator.value),
-    children: item.children ? toTreeItems(item.children, [...labels, item.label]) : void 0,
-    ...treeSelectionControl.value === "none" ? {} : { onSelect: preventTreeSelection }
-  }));
+  return items.map((item) => {
+    const treeItem = {
+      ...item,
+      children: item.children ? toTreeItems(item.children, [...labels, item.label]) : void 0,
+      label: treeItemLabel(item),
+      lazy: item.lazy,
+      pathLabel: [...labels, item.label].join(separator.value)
+    };
+    if (treeSelectionControl.value !== "none") {
+      treeItem.onSelect = preventTreeSelection;
+    }
+    return treeItem;
+  });
 }
 function preventTreeSelection(event) {
   event.preventDefault();
 }
 function treeItemLabel(item) {
-  if (props.field.type !== "tree-select" || !props.field.showChildrenCount) return item.label;
+  if (props.field.type !== "tree-select" || !fieldProps.value.showChildrenCount) {
+    return item.label;
+  }
   const count = item.children?.length ?? 0;
   return count ? `${item.label} (${count})` : item.label;
 }
 function filterTreeItems(items, query) {
   const normalizedQuery = query.trim().toLocaleLowerCase();
-  if (!normalizedQuery) return [...items];
+  if (!normalizedQuery) {
+    return [...items];
+  }
   return items.flatMap((item) => {
     const children = filterTreeItems(item.children ?? [], query);
-    if (String(item.label).toLocaleLowerCase().includes(normalizedQuery)) return [{ ...item }];
-    if (children.length) return [{ ...item, children }];
+    if (String(item.label).toLocaleLowerCase().includes(normalizedQuery)) {
+      return [{ ...item }];
+    }
+    if (children.length) {
+      return [{ ...item, children }];
+    }
     return [];
   });
 }
@@ -144,20 +257,24 @@ 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);
+    for (const item of value) {
+      selected.set(formOptionKey(item.value), item.value);
+    }
     form.setValue(
       props.path,
       resolveHierarchySelection({
-        next: [...selected.values()],
+        bubble: treeBubbleSelect(props.field) === true,
         items: options.items.value,
-        propagate: treePropagateSelect(props.field) === true,
-        bubble: treeBubbleSelect(props.field) === true
+        next: [...selected.values()],
+        propagate: treePropagateSelect(props.field) === true
       })
     );
     return;
   }
   form.setValue(props.path, value?.value ?? null);
-  if (isTreeSelect.value) treeSelectOpen.value = false;
+  if (isTreeSelect.value) {
+    treeSelectOpen.value = false;
+  }
 }
 function clearTreeSelection() {
   form.setValue(props.path, treeMultiple.value ? [] : null);
@@ -170,48 +287,57 @@ 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);
+  if (selected.has(key)) {
+    selected.delete(key);
+  } else {
+    selected.set(key, item.value);
+  }
   form.setValue(
     props.path,
     resolveHierarchySelection({
-      next: [...selected.values()],
+      bubble: treeBubbleSelect(props.field) === true,
       intent: item.value,
       items: options.items.value,
-      propagate: treePropagateSelect(props.field) === true,
-      bubble: treeBubbleSelect(props.field) === true
+      next: [...selected.values()],
+      propagate: treePropagateSelect(props.field) === true
     })
   );
 }
 function selectRadioTreeItem(item) {
   form.setValue(props.path, item.value);
-  if (isTreeSelect.value) treeSelectOpen.value = false;
+  if (isTreeSelect.value) {
+    treeSelectOpen.value = false;
+  }
 }
 function selectTreeRow(item) {
   if (treeSelectionControl.value === "checkbox") {
     toggleTreeItem(item);
     return;
   }
-  if (treeSelectionControl.value === "radio") selectRadioTreeItem(item);
+  if (treeSelectionControl.value === "radio") {
+    selectRadioTreeItem(item);
+  }
 }
 function hasShowPath(field) {
-  return field.type === "tree-select" && field.showPath === true;
+  return field.type === "tree-select" && fieldProps.value.showPath === true;
 }
 function treePropagateSelect(field) {
-  return field.type === "tree" || field.type === "tree-select" ? field.propagateSelect ?? field.cascade : void 0;
+  return field.type === "tree" || field.type === "tree-select" ? fieldProps.value.propagateSelect ?? fieldProps.value.cascade : void 0;
 }
 function treeBubbleSelect(field) {
-  return field.type === "tree" || field.type === "tree-select" ? field.bubbleSelect ?? field.cascade : void 0;
+  return field.type === "tree" || field.type === "tree-select" ? fieldProps.value.bubbleSelect ?? fieldProps.value.cascade : void 0;
 }
 function treeSelectionBehavior(field) {
-  if (field.type !== "tree" && field.type !== "tree-select") return void 0;
-  return field.selectionBehavior ?? (treeMultiple.value ? "toggle" : "replace");
+  if (field.type !== "tree" && field.type !== "tree-select") {
+    return;
+  }
+  return fieldProps.value.selectionBehavior ?? (treeMultiple.value ? "toggle" : "replace");
 }
 function treeVirtualize(field) {
-  return field.type === "tree" ? field.virtualize : void 0;
+  return field.type === "tree" ? fieldProps.value.virtualize : void 0;
 }
 function isOptionValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || isNumber(value) || isBoolean(value);
 }
 </script>
 
@@ -249,7 +375,7 @@ function isOptionValue(value) {
       >
         <template
           v-if="treeSelectionControl !== 'none'"
-          #item-wrapper="{ item, selected, expanded, indeterminate, handleToggle, ui }"
+          #item-wrapper="{ item, selected, expanded, indeterminate, ui }"
         >
           <div
             :class="ui.link({ selected, disabled: disabled || item.disabled })"
@@ -277,16 +403,22 @@ function isOptionValue(value) {
             />
             <span :class="ui.linkLabel()">{{ item.label }}</span>
             <button
-              v-if="item.children?.length"
+              v-if="isExpandable(item)"
               type="button"
               :aria-label="String(item.label)"
+              :aria-expanded="expanded ? 'true' : 'false'"
+              data-form-tree-toggle
               class="ms-auto inline-flex rounded-sm p-0.5 focus-visible:outline-2 focus-visible:outline-primary"
-              @click.stop="handleToggle"
+              @click.stop="toggleNode(item)"
             >
               <UIcon
-                name="i-lucide-chevron-down"
+                :name="isLoadingItem(item) ? 'i-lucide-loader-circle' : 'i-lucide-chevron-down'"
                 aria-hidden="true"
-                :class="[ui.linkTrailingIcon(), expanded ? 'rotate-180' : '']"
+                :class="[
+  ui.linkTrailingIcon(),
+  isLoadingItem(item) ? 'animate-spin' : '',
+  expanded && !isLoadingItem(item) ? 'rotate-180' : ''
+]"
               />
             </button>
           </div>
@@ -299,6 +431,7 @@ function isOptionValue(value) {
         :ui="{
   content: mergeFormUiClass(
     'w-(--reka-popper-anchor-width) min-w-72 p-0',
+    interactionOwnerClass,
     formUi.ui.value.treeSelect?.ui?.content
   )
 }"
@@ -310,7 +443,7 @@ function isOptionValue(value) {
           variant="outline"
           :size="controlSize"
           :disabled="disabled"
-          :loading="options.loading.value"
+          :loading="validationPending || options.loading.value"
           :trailing-icon="treeSelectOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
           :class="
   mergeFormUiClass(
@@ -330,8 +463,11 @@ function isOptionValue(value) {
         </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">
+          <div
+            :class="mergeFormUiClass('grid min-w-0', formUi.ui.value.treeSelect?.ui?.root)"
+            data-form-tree-scope
+          >
+            <div v-if="fieldProps.searchable !== false" class="border-b border-default p-2">
               <UInput
                 v-model="treeSearch"
                 icon="i-lucide-search"
@@ -343,6 +479,8 @@ function isOptionValue(value) {
             </div>
             <UTree
               v-if="visibleTreeItems.length"
+              ref="treeListRef"
+              :style="treeListShadow.style.value"
               :model-value="treeModel"
               v-model:expanded="expandedKeys"
               :items="visibleTreeItems"
@@ -373,7 +511,7 @@ function isOptionValue(value) {
             >
               <template
                 v-if="treeSelectionControl !== 'none'"
-                #item-wrapper="{ item, selected, expanded, indeterminate, handleToggle, ui }"
+                #item-wrapper="{ item, selected, expanded, indeterminate, ui }"
               >
                 <div
                   :class="ui.link({ selected, disabled: disabled || item.disabled })"
@@ -401,16 +539,24 @@ function isOptionValue(value) {
                   />
                   <span :class="ui.linkLabel()">{{ item.label }}</span>
                   <button
-                    v-if="item.children?.length"
+                    v-if="isExpandable(item)"
                     type="button"
                     :aria-label="String(item.label)"
+                    :aria-expanded="expanded ? 'true' : 'false'"
+                    data-form-tree-toggle
                     class="ms-auto inline-flex rounded-sm p-0.5 focus-visible:outline-2 focus-visible:outline-primary"
-                    @click.stop="handleToggle"
+                    @click.stop="toggleNode(item)"
                   >
                     <UIcon
-                      name="i-lucide-chevron-down"
+                      :name="
+  isLoadingItem(item) ? 'i-lucide-loader-circle' : 'i-lucide-chevron-down'
+"
                       aria-hidden="true"
-                      :class="[ui.linkTrailingIcon(), expanded ? 'rotate-180' : '']"
+                      :class="[
+  ui.linkTrailingIcon(),
+  isLoadingItem(item) ? 'animate-spin' : '',
+  expanded && !isLoadingItem(item) ? 'rotate-180' : ''
+]"
                     />
                   </button>
                 </div>
@@ -425,10 +571,13 @@ function isOptionValue(value) {
   )
 "
             >
-              {{ t("form.fields.hierarchy.empty") }}
+              {{
+                options.pending.value ? t("form.fields.options.loadingMore") : t("form.fields.hierarchy.empty")
+              }}
             </p>
+            <FormOptionMenuFooter :options="options" :disabled="disabled" />
             <div
-              v-if="field.clearable && selectedTreeItems.length"
+              v-if="fieldProps.clearable && selectedTreeItems.length"
               class="flex justify-end border-t border-default p-2"
             >
               <UButton
@@ -452,12 +601,13 @@ function isOptionValue(value) {
         :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"
+        :multiple="fieldProps.multiple"
+        :search-input="fieldProps.searchable ?? true"
+        :clear="fieldProps.clearable === true"
         :placeholder="placeholder"
         :disabled="disabled"
-        :loading="options.loading.value"
+        :loading="validationPending || options.loading.value"
+        :ui="ownedControlUi"
         @blur="handleBlur"
       />
     </FormCompositeControl>

package/dist/runtime/form/fields/hierarchy/{SelectionRadio.vue → selection-radio.vue}

@@ -10,7 +10,7 @@ const props = defineProps({
   controlClass: { type: String, required: false }
 });
 const emit = defineEmits(["select"]);
-const items = computed(() => [{ value: props.value, label: props.label }]);
+const items = computed(() => [{ label: props.label, value: props.value }]);
 provide(formFieldInjectionKey, void 0);
 provide(inputIdInjectionKey, ref(void 0));
 </script>

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

@@ -1,12 +1,14 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
-import type { FieldOptionValue, FallbackNever, NullableValue } from '../../types/field-output-utils.js';
-import type { FormOptionConfig, FormOptionValue, FormOptionsSource } from '../../types/options.js';
+import type { FieldOptionValue, FieldProps, FallbackNever, NullableValue } from '../../types/field-output-utils.js';
+import type { FormAnyOptionConfig, FormOptionValue } from '../../types/options.js';
 import type { FormText } from '../../types/utils.js';
 export type FormHierarchyOption<TValue extends FormOptionValue = FormOptionValue> = {
     label: FormText;
     description?: FormText;
     disabled?: boolean;
     children?: readonly FormHierarchyOption<TValue>[];
+    /** `false` marks a remote node whose children load when it expands. */
+    isLeaf?: boolean;
 } & ({
     value: TValue;
     key?: TValue;
@@ -14,8 +16,7 @@ export type FormHierarchyOption<TValue extends FormOptionValue = FormOptionValue
     key: TValue;
     value?: TValue;
 });
-interface FormHierarchyFieldOptions<TContext, TDeps, TValue extends FormOptionValue, TOption extends FormHierarchyOption<TValue>> {
-    options: FormOptionConfig<TOption, TContext, TDeps, TValue | readonly TValue[] | null> | FormOptionsSource<TOption, TContext, TDeps, TValue | readonly TValue[] | null>;
+export interface FormHierarchyProps {
     multiple?: boolean;
     searchable?: boolean;
     clearable?: boolean;
@@ -23,7 +24,7 @@ interface FormHierarchyFieldOptions<TContext, TDeps, TValue extends FormOptionVa
     valueKey?: string;
     labelKey?: string;
 }
-interface FormTreeSelectionOptions {
+export interface FormTreeSelectionProps {
     /** Visual selection affordance. Defaults to checkbox for multiple trees and radio otherwise. */
     selectionControl?: 'none' | 'radio' | 'checkbox';
     /** Replaces the current selection or toggles individual nodes. */
@@ -35,22 +36,31 @@ interface FormTreeSelectionOptions {
     /** Enables both descendant propagation and parent bubbling. */
     cascade?: boolean;
 }
-export interface FormTreeSelectField<TContext = {}, TDeps = {}, TValue extends FormOptionValue = FormOptionValue, TOption extends FormHierarchyOption<TValue> = FormHierarchyOption<TValue>> extends FormStatefulFieldBase<'tree-select', TValue | readonly TValue[] | null, TContext, TDeps>, FormHierarchyFieldOptions<TContext, TDeps, TValue, TOption>, FormTreeSelectionOptions {
+export interface FormTreeSelectProps extends FormHierarchyProps, FormTreeSelectionProps {
     showPath?: boolean;
     showChildrenCount?: boolean;
 }
-export interface FormCascaderField<TContext = {}, TDeps = {}, TValue extends FormOptionValue = FormOptionValue, TOption extends FormHierarchyOption<TValue> = FormHierarchyOption<TValue>> extends FormStatefulFieldBase<'cascader', TValue | readonly TValue[] | null, TContext, TDeps>, FormHierarchyFieldOptions<TContext, TDeps, TValue, TOption> {
+export interface FormCascaderProps extends FormHierarchyProps {
     separator?: string;
     leafOnly?: boolean;
 }
-export interface FormTreeField<TContext = {}, TDeps = {}, TValue extends FormOptionValue = FormOptionValue, TOption extends FormHierarchyOption<TValue> = FormHierarchyOption<TValue>> extends FormStatefulFieldBase<'tree', TValue | readonly TValue[] | null, TContext, TDeps>, FormHierarchyFieldOptions<TContext, TDeps, TValue, TOption>, FormTreeSelectionOptions {
+export interface FormTreeProps extends FormHierarchyProps, FormTreeSelectionProps {
     virtualize?: boolean;
 }
-type HierarchyFieldValue<TField> = TField extends {
+interface FormHierarchyFieldOptions<TContext, TDeps, TValue extends FormOptionValue, TOption extends FormHierarchyOption<TValue>> {
+    options: FormAnyOptionConfig<TOption, TContext, TDeps, TValue | readonly TValue[] | null>;
+}
+export interface FormTreeSelectField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormHierarchyOption<TValue> = FormHierarchyOption<TValue>> extends FormStatefulFieldBase<'tree-select', TValue | readonly TValue[] | null, TContext, TDeps, FormTreeSelectProps>, FormHierarchyFieldOptions<TContext, TDeps, TValue, TOption> {
+}
+export interface FormCascaderField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormHierarchyOption<TValue> = FormHierarchyOption<TValue>> extends FormStatefulFieldBase<'cascader', TValue | readonly TValue[] | null, TContext, TDeps, FormCascaderProps>, FormHierarchyFieldOptions<TContext, TDeps, TValue, TOption> {
+}
+export interface FormTreeField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormHierarchyOption<TValue> = FormHierarchyOption<TValue>> extends FormStatefulFieldBase<'tree', TValue | readonly TValue[] | null, TContext, TDeps, FormTreeProps>, FormHierarchyFieldOptions<TContext, TDeps, TValue, TOption> {
+}
+type HierarchyFieldValue<TField> = FieldProps<TField> extends {
     multiple: true;
 } ? readonly FieldOptionValue<TField>[] | NullableValue : FieldOptionValue<TField> | NullableValue;
-export type HierarchyFieldOutput<TField> = FallbackNever<HierarchyFieldValue<TField>, TField extends {
+export type HierarchyFieldOutput<TField> = FallbackNever<HierarchyFieldValue<TField>, FieldProps<TField> extends {
     multiple: true;
 } ? readonly FormOptionValue[] | NullableValue : FormOptionValue | NullableValue>;
-export type FormHierarchyField<TContext = {}, TDeps = {}> = FormTreeSelectField<TContext, TDeps> | FormCascaderField<TContext, TDeps> | FormTreeField<TContext, TDeps>;
+export type FormHierarchyField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormTreeSelectField<TContext, TDeps> | FormCascaderField<TContext, TDeps> | FormTreeField<TContext, TDeps>;
 export {};

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

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