@sparqjs/schema-ui-element-plus 0.1.0

package/dist/adapter/field.js

@@ -0,0 +1,704 @@
+import { SCHEMA_COMPONENT_CASCADER, SCHEMA_COMPONENT_CHECKBOX, SCHEMA_COMPONENT_COLOR, SCHEMA_COMPONENT_DATE_PICKER, SCHEMA_COMPONENT_DATE_RANGE_PICKER, SCHEMA_COMPONENT_DATETIME_PICKER, SCHEMA_COMPONENT_FILES, SCHEMA_COMPONENT_ICON, SCHEMA_COMPONENT_ICON_INPUT, SCHEMA_COMPONENT_IMAGE, SCHEMA_COMPONENT_KEY_VALUE, SCHEMA_COMPONENT_MULTI_SELECT, SCHEMA_COMPONENT_NUMBER, SCHEMA_COMPONENT_PASSWORD, SCHEMA_COMPONENT_RADIO, SCHEMA_COMPONENT_RATE, SCHEMA_COMPONENT_RELATION_PICKER, SCHEMA_COMPONENT_RICH_TEXT, SCHEMA_COMPONENT_SELECT, SCHEMA_COMPONENT_SELECT_TREE, SCHEMA_COMPONENT_SLIDER, SCHEMA_COMPONENT_SWITCH, SCHEMA_COMPONENT_TEXT, SCHEMA_COMPONENT_TEXTAREA, SCHEMA_COMPONENT_TIME_PICKER, SCHEMA_COMPONENT_TIME_RANGE_PICKER, SCHEMA_UI_CASCADER, SCHEMA_UI_CHECKBOX, SCHEMA_UI_CHECKBOX_GROUP, SCHEMA_UI_COLOR_PICKER, SCHEMA_UI_DATE_PICKER, SCHEMA_UI_NUMBER, SCHEMA_UI_OPTION, SCHEMA_UI_OPTION_GROUP, SCHEMA_UI_RADIO, SCHEMA_UI_RADIO_GROUP, SCHEMA_UI_RATE, SCHEMA_UI_SELECT, SCHEMA_UI_SLIDER, SCHEMA_UI_SWITCH, SCHEMA_UI_TEXT, SCHEMA_UI_TEXTAREA, SCHEMA_UI_TIME_PICKER, SCHEMA_UI_TREE_SELECT, resolveValidationDateTimeRuleValue, formatRangeValidationEndpoint, resolveRangeValidationParams, resolveValidationIntegerRuleValue, resolveValidationNumberRuleValue, resolveValidationTimeStringRuleValue, } from '@sparqjs/schema-core';
+import { formatDisplayValue } from '@sparqjs/schema-vue';
+import { InfoFilled } from '@element-plus/icons-vue';
+import { ElTooltip } from 'element-plus';
+import { h } from 'vue';
+/**
+ * 渲染详情模式下的单个字段。
+ *
+ * 渲染器提供自定义内容时优先使用 `context.contentNode`。
+ * `context.binding` 作为兜底值来源。
+ */
+export function renderDetailField(context) {
+    return h('div', {
+        ...context.node.raw.props,
+        class: ['sparq-detail-field', context.node.raw.props?.class],
+        'data-sparq-detail-field': context.node.field ?? context.node.id,
+        'data-sparq-element-plus-detail-field': context.node.id,
+    }, [
+        h('span', {
+            class: 'sparq-detail-field__label',
+            'data-slot': 'label',
+        }, renderFieldLabel(context)),
+        h('strong', {
+            class: 'sparq-detail-field__value',
+            'data-slot': 'value',
+        }, context.contentNode ?? formatDisplayValue(context.binding?.value)),
+        context.helpNode,
+    ]);
+}
+/**
+ * 渲染字段节点对应的输入控件。
+ *
+ * `context.node` 提供组件 key、字段 schema 和数据源。
+ * `context.disabled` 和 `context.readonly` 存在时会覆盖字段 schema 标记。
+ */
+export function renderFieldContent(context) {
+    return renderControl(context, {
+        componentKey: context.node.componentKey,
+        field: context.node.field,
+        label: resolveFieldLabel(context.node),
+        fieldSchema: context.node.fieldSchema,
+        props: context.node.props ?? context.node.raw.props,
+        disabled: context.disabled ?? context.node.fieldSchema?.disabled,
+        readonly: context.readonly ?? context.node.fieldSchema?.readonly,
+        placeholder: context.placeholder ?? context.node.placeholder,
+        nodeSlots: context.node.raw.slots,
+        options: context.options,
+        binding: context.binding,
+    });
+}
+/**
+ * 构建搜索项使用的表单绑定对象。
+ */
+export function createSearchItemBinding(context) {
+    return {
+        value: context.form?.values[context.item.field],
+        onChange(value) {
+            context.form?.setValue?.(context.item.field, value);
+        },
+        onBlur() {
+            context.form?.setTouched?.(context.item.field);
+        },
+        errors: context.form?.errors?.[context.item.field] ?? [],
+        loading: context.form?.loading?.[context.item.field] ?? false,
+        options: context.options ?? [],
+        optionLoading: context.form?.optionLoading?.[context.item.field] ?? false,
+        optionError: context.form?.optionErrors?.[context.item.field],
+        loadOptions: context.item.fieldSchema
+            ? (input) => {
+                const optionInput = normalizeOptionsLoadInput(input);
+                return (context.form?.loadOptions?.({
+                    runtime: context.runtime,
+                    field: context.item.fieldSchema,
+                    fieldName: context.item.field,
+                    dataSource: context.item.dataSource,
+                    resource: context.resource,
+                    view: context.state.viewName,
+                    payload: context.payload,
+                    keyword: optionInput.keyword,
+                    values: optionInput.values,
+                    parentValue: optionInput.parentValue,
+                }) ?? Promise.resolve([]));
+            }
+            : undefined,
+    };
+}
+/**
+ * 构建表格筛选项使用的表单绑定对象。
+ *
+ * `context.filter.field` 可能为空，因此返回的回调必须保持空操作安全。
+ */
+export function createTableFilterBinding(context) {
+    const field = context.filter.field;
+    return {
+        value: field ? context.form?.values[field] : undefined,
+        onChange(value) {
+            if (field) {
+                context.form?.setValue?.(field, value);
+            }
+        },
+        onBlur() {
+            if (field) {
+                context.form?.setTouched?.(field);
+            }
+        },
+        errors: field ? (context.form?.errors?.[field] ?? []) : [],
+        loading: field ? (context.form?.loading?.[field] ?? false) : false,
+        options: context.options ?? [],
+        optionLoading: field ? (context.form?.optionLoading?.[field] ?? false) : false,
+        optionError: field ? context.form?.optionErrors?.[field] : undefined,
+        loadOptions: field && context.filter.fieldSchema
+            ? (input) => {
+                const optionInput = normalizeOptionsLoadInput(input);
+                return (context.form?.loadOptions?.({
+                    runtime: context.runtime,
+                    field: context.filter.fieldSchema,
+                    fieldName: field,
+                    dataSource: context.filter.dataSource,
+                    resource: context.resource,
+                    view: context.state.viewName,
+                    payload: context.payload,
+                    keyword: optionInput.keyword,
+                    values: optionInput.values,
+                    parentValue: optionInput.parentValue,
+                }) ?? Promise.resolve([]));
+            }
+            : undefined,
+    };
+}
+/**
+ * 解析字段节点的可见标签。
+ *
+ * `raw.title` 优先于 `fieldSchema.label`，最后回退到字段名。
+ */
+export function resolveFieldLabel(node) {
+    return node.raw.title ?? node.fieldSchema?.label ?? node.field;
+}
+/** 将字段标题与可聚焦的补充提示组合为统一标签内容。 */
+export function renderFieldLabel(context) {
+    const label = resolveFieldLabel(context.node);
+    return renderFieldLabelContent(label, context.tip, context.node.id);
+}
+/** 为 UI adapter 内的自定义字段控件复用标题提示交互。 */
+export function renderFieldLabelContent(label, tip, fieldId) {
+    if (!tip) {
+        return label;
+    }
+    return h('span', { class: 'sparq-field-label' }, [
+        h('span', { class: 'sparq-field-label__text' }, label),
+        h(ElTooltip, {
+            content: tip,
+            placement: 'top',
+            popperClass: 'sparq-field-tip-popper',
+            trigger: ['hover', 'focus'],
+        }, {
+            default: () => h('span', {
+                class: 'sparq-field-label__tip-trigger',
+                role: 'button',
+                tabindex: 0,
+                'aria-label': `${label ?? '字段'}提示`,
+                'data-sparq-field-tip-trigger': fieldId,
+            }, [h(InfoFilled)]),
+        }),
+    ]);
+}
+/**
+ * 根据标准化字段输入渲染一个 Element Plus 控件。
+ *
+ * `input` 携带组件 key、绑定、字段 schema 和可选数据源。
+ */
+export function renderControl(context, input) {
+    const componentKey = input.componentKey ?? SCHEMA_COMPONENT_TEXT;
+    const props = createControlProps(input, componentKey);
+    const options = resolveControlOptions(input);
+    switch (componentKey) {
+        case SCHEMA_COMPONENT_TEXTAREA:
+            return context.ui.render(SCHEMA_UI_TEXTAREA, createTextareaProps(props));
+        case SCHEMA_COMPONENT_PASSWORD:
+            return context.ui.render(SCHEMA_UI_TEXT, {
+                ...props,
+                type: 'password',
+                showPassword: true,
+            }, createTextInputSlots(input.nodeSlots));
+        case SCHEMA_COMPONENT_NUMBER:
+            return context.ui.render(SCHEMA_UI_NUMBER, props);
+        case SCHEMA_COMPONENT_RELATION_PICKER:
+            if (isTreeRelation(input)) {
+                return context.ui.render(SCHEMA_UI_TREE_SELECT, createRelationTreeSelectProps(input, props, options));
+            }
+            return context.ui.render(SCHEMA_UI_SELECT, createRelationSelectProps(input, props), {
+                default: () => renderOptions(context.ui, options),
+            });
+        case SCHEMA_COMPONENT_SELECT:
+            return context.ui.render(SCHEMA_UI_SELECT, createSelectProps(input, props), {
+                default: () => renderOptions(context.ui, options),
+            });
+        case SCHEMA_COMPONENT_SELECT_TREE:
+            return context.ui.render(SCHEMA_UI_TREE_SELECT, {
+                ...props,
+                data: toTreeSelectOptions(options),
+                props: {
+                    label: 'label',
+                    value: 'value',
+                    children: 'children',
+                },
+                renderAfterExpand: false,
+            });
+        case SCHEMA_COMPONENT_CASCADER:
+            return context.ui.render(SCHEMA_UI_CASCADER, {
+                ...props,
+                options: toCascaderOptions(options),
+                props: {
+                    multiple: input.fieldSchema?.multiple,
+                    emitPath: false,
+                    checkStrictly: true,
+                },
+            });
+        case SCHEMA_COMPONENT_MULTI_SELECT:
+            return context.ui.render(SCHEMA_UI_SELECT, {
+                ...createSelectProps(input, props),
+                multiple: true,
+            }, {
+                default: () => renderOptions(context.ui, options),
+            });
+        case SCHEMA_COMPONENT_RADIO:
+            return context.ui.render(SCHEMA_UI_RADIO_GROUP, props, {
+                default: () => renderRadioOptions(context.ui, options),
+            });
+        case SCHEMA_COMPONENT_CHECKBOX:
+            return context.ui.render(SCHEMA_UI_CHECKBOX_GROUP, props, {
+                default: () => renderCheckboxOptions(context.ui, options),
+            });
+        case SCHEMA_COMPONENT_SWITCH:
+            return context.ui.render(SCHEMA_UI_SWITCH, props);
+        case SCHEMA_COMPONENT_RATE:
+            return context.ui.render(SCHEMA_UI_RATE, props);
+        case SCHEMA_COMPONENT_DATETIME_PICKER:
+            return context.ui.render(SCHEMA_UI_DATE_PICKER, withDateTimeControlDefaults(input, props, {
+                type: 'datetime',
+                format: 'YYYY-MM-DD HH:mm:ss',
+                valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            }));
+        case SCHEMA_COMPONENT_DATE_PICKER:
+            return context.ui.render(SCHEMA_UI_DATE_PICKER, withDateTimeControlDefaults(input, props, {
+                type: 'date',
+                format: 'YYYY-MM-DD',
+                valueFormat: 'YYYY-MM-DD',
+            }));
+        case SCHEMA_COMPONENT_DATE_RANGE_PICKER:
+            return context.ui.render(SCHEMA_UI_DATE_PICKER, withDateTimeControlDefaults(input, props, {
+                type: 'daterange',
+                format: 'YYYY-MM-DD',
+                valueFormat: 'YYYY-MM-DD',
+            }));
+        case SCHEMA_COMPONENT_TIME_PICKER:
+            return context.ui.render(SCHEMA_UI_TIME_PICKER, withDateTimeControlDefaults(input, props, {
+                format: 'HH:mm:ss',
+                valueFormat: 'HH:mm:ss',
+            }));
+        case SCHEMA_COMPONENT_TIME_RANGE_PICKER:
+            return context.ui.render(SCHEMA_UI_TIME_PICKER, withDateTimeControlDefaults(input, props, {
+                format: 'HH:mm:ss',
+                valueFormat: 'HH:mm:ss',
+                isRange: true,
+            }));
+        case SCHEMA_COMPONENT_SLIDER:
+            return context.ui.render(SCHEMA_UI_SLIDER, props);
+        case SCHEMA_COMPONENT_COLOR:
+            return context.ui.render(SCHEMA_UI_COLOR_PICKER, props);
+        case SCHEMA_COMPONENT_TEXT:
+            return context.ui.render(SCHEMA_UI_TEXT, props, createTextInputSlots(input.nodeSlots));
+        case SCHEMA_COMPONENT_RICH_TEXT:
+        case SCHEMA_COMPONENT_ICON:
+        case SCHEMA_COMPONENT_ICON_INPUT:
+        case SCHEMA_COMPONENT_KEY_VALUE:
+        case SCHEMA_COMPONENT_IMAGE:
+        case SCHEMA_COMPONENT_FILES:
+            throw new Error(`Element Plus UI adapter has not implemented control "${componentKey}" yet.`);
+        default:
+            throw new Error(`Element Plus UI adapter does not support control "${componentKey}".`);
+    }
+}
+function createSelectProps(input, props) {
+    const options = input.fieldSchema?.options;
+    if (options?.mode !== 'static' || options.value_policy !== 'open') {
+        return props;
+    }
+    return {
+        ...props,
+        filterable: true,
+        allowCreate: true,
+    };
+}
+function createTextInputSlots(slots) {
+    if (!slots) {
+        return undefined;
+    }
+    const renderedSlots = Object.fromEntries(['prefix', 'suffix', 'prepend', 'append']
+        .map((name) => [name, renderStaticSlotContent(slots[name])])
+        .filter(([, content]) => content !== undefined)
+        .map(([name, content]) => [name, () => content]));
+    return Object.keys(renderedSlots).length ? renderedSlots : undefined;
+}
+function renderStaticSlotContent(content) {
+    if (!content) {
+        return undefined;
+    }
+    if (content.type === 'text') {
+        return content.text;
+    }
+    if (content.type === 'icon') {
+        return h('span', { class: 'sparq-input-slot-icon', 'data-sparq-icon': content.icon }, content.icon);
+    }
+    return undefined;
+}
+function createControlProps(input, componentKey) {
+    const validationProps = createValidationControlProps(input, componentKey);
+    return {
+        ...validationProps,
+        ...input.props,
+        ...createEffectiveConstraintProps(componentKey, validationProps, input.props),
+        modelValue: input.binding?.value,
+        'onUpdate:modelValue': input.binding?.onChange,
+        onBlur: input.binding?.onBlur,
+        placeholder: input.placeholder ?? stringProp(input.props?.placeholder),
+        disabled: input.disabled ?? input.props?.disabled,
+        readonly: input.readonly ?? input.props?.readonly,
+        loading: input.binding?.loading,
+        'data-sparq-element-plus-control': input.field ?? componentKey,
+        'data-component': componentKey,
+    };
+}
+function createTextareaProps(props) {
+    if (props.autosize !== true) {
+        return props;
+    }
+    const rows = typeof props.rows === 'number' && props.rows > 0 ? props.rows : undefined;
+    const next = {
+        ...props,
+        autosize: rows ? { minRows: rows } : true,
+    };
+    delete next.rows;
+    return next;
+}
+function createEffectiveConstraintProps(componentKey, validationProps, componentProps) {
+    if (componentKey !== SCHEMA_COMPONENT_NUMBER &&
+        componentKey !== SCHEMA_COMPONENT_RATE &&
+        componentKey !== SCHEMA_COMPONENT_SLIDER) {
+        return {};
+    }
+    return omitUndefined({
+        min: stricterMinimum(validationProps.min, componentProps?.min),
+        max: stricterMaximum(validationProps.max, componentProps?.max),
+    });
+}
+function stricterMinimum(left, right) {
+    const values = [left, right].filter((value) => typeof value === 'number');
+    return values.length ? Math.max(...values) : undefined;
+}
+function stricterMaximum(left, right) {
+    const values = [left, right].filter((value) => typeof value === 'number');
+    return values.length ? Math.min(...values) : undefined;
+}
+function withControlDefaults(props, defaults) {
+    return {
+        ...defaults,
+        ...props,
+    };
+}
+function withDateTimeControlDefaults(input, props, defaults) {
+    const merged = withControlDefaults(props, defaults);
+    if (!input.fieldSchema?.type || input.fieldSchema.type === 'string') {
+        return merged;
+    }
+    return {
+        ...merged,
+        valueFormat: defaults.valueFormat,
+    };
+}
+function createValidationControlProps(input, componentKey) {
+    switch (componentKey) {
+        case SCHEMA_COMPONENT_NUMBER:
+        case SCHEMA_COMPONENT_RATE:
+        case SCHEMA_COMPONENT_SLIDER:
+            return createNumericValidationProps(input);
+        case SCHEMA_COMPONENT_TEXT:
+        case SCHEMA_COMPONENT_TEXTAREA:
+        case SCHEMA_COMPONENT_PASSWORD:
+            return createTextValidationProps(input);
+        case SCHEMA_COMPONENT_DATE_PICKER:
+        case SCHEMA_COMPONENT_DATETIME_PICKER:
+            return createDateValidationProps(input);
+        case SCHEMA_COMPONENT_DATE_RANGE_PICKER:
+            return input.fieldSchema?.type === 'json'
+                ? createDateRangeValidationProps(input)
+                : createDateValidationProps(input);
+        case SCHEMA_COMPONENT_TIME_PICKER:
+            return createTimeValidationProps(input);
+        case SCHEMA_COMPONENT_TIME_RANGE_PICKER:
+            return input.fieldSchema?.type === 'json'
+                ? createTimeRangeValidationProps(input)
+                : createTimeValidationProps(input);
+        default:
+            return {};
+    }
+}
+function createNumericValidationProps(input) {
+    const min = resolveValidationNumberRuleValue(findValidationRule(input, 'min'), input.fieldSchema);
+    const max = resolveValidationNumberRuleValue(findValidationRule(input, 'max'), input.fieldSchema);
+    return omitUndefined({ min, max });
+}
+function createTextValidationProps(input) {
+    const minlength = resolveValidationIntegerRuleValue(findValidationRule(input, 'min_length'));
+    const maxlength = resolveValidationIntegerRuleValue(findValidationRule(input, 'max_length'));
+    return omitUndefined({ minlength, maxlength });
+}
+function createDateValidationProps(input) {
+    const min = resolveValidationDateTimeRuleValue(findValidationRule(input, 'min'), input.fieldSchema);
+    const max = resolveValidationDateTimeRuleValue(findValidationRule(input, 'max'), input.fieldSchema);
+    if (min === undefined && max === undefined) {
+        return {};
+    }
+    return {
+        disabledDate(date) {
+            const value = date.getTime();
+            return (min !== undefined && value < min) || (max !== undefined && value > max);
+        },
+    };
+}
+function createTimeValidationProps(input) {
+    const min = resolveValidationTimeStringRuleValue(findValidationRule(input, 'min'), input.fieldSchema);
+    const max = resolveValidationTimeStringRuleValue(findValidationRule(input, 'max'), input.fieldSchema);
+    if (!min && !max) {
+        return {};
+    }
+    return {
+        selectableRange: `${min ?? '00:00:00'} - ${max ?? '23:59:59'}`,
+    };
+}
+function createDateRangeValidationProps(input) {
+    const rangeRule = findValidationRule(input, 'range');
+    const resolved = resolveRangeValidationParams(rangeRule?.params);
+    if (!resolved.value || resolved.value.spanUnit !== 'day') {
+        return {};
+    }
+    const { min, max } = resolved.value;
+    if (min === undefined && max === undefined) {
+        return {};
+    }
+    return {
+        disabledDate(date) {
+            const value = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+            return (min !== undefined && value < min) || (max !== undefined && value > max);
+        },
+    };
+}
+function createTimeRangeValidationProps(input) {
+    const rangeRule = findValidationRule(input, 'range');
+    const resolved = resolveRangeValidationParams(rangeRule?.params);
+    if (!resolved.value || resolved.value.spanUnit !== 'minute') {
+        return {};
+    }
+    const min = resolved.value.min === undefined ? '00:00:00' : formatRangeValidationEndpoint(resolved.value.min, 'minute');
+    const max = resolved.value.max === undefined ? '23:59:59' : formatRangeValidationEndpoint(resolved.value.max, 'minute');
+    if (resolved.value.min === undefined && resolved.value.max === undefined) {
+        return {};
+    }
+    return {
+        selectableRange: `${min} - ${max}`,
+    };
+}
+function findValidationRule(input, type) {
+    return input.fieldSchema?.validation?.find((rule) => normalizeRuleType(rule.type) === type);
+}
+function normalizeRuleType(type) {
+    return String(type ?? '')
+        .trim()
+        .toLowerCase();
+}
+function stringProp(value) {
+    return typeof value === 'string' ? value : undefined;
+}
+function omitUndefined(input) {
+    return Object.fromEntries(Object.entries(input).filter(([, value]) => value !== undefined));
+}
+function createRelationSelectProps(input, props) {
+    return {
+        ...props,
+        filterable: true,
+        remote: true,
+        clearable: true,
+        multiple: input.fieldSchema?.multiple,
+        reserveKeyword: true,
+        loading: input.binding?.optionLoading ?? props.loading,
+        remoteMethod(keyword) {
+            void input.binding?.loadOptions?.({ keyword }).catch(() => undefined);
+        },
+        onVisibleChange(visible) {
+            if (visible && shouldLoadInitialOptions(input)) {
+                void input.binding
+                    ?.loadOptions?.({
+                    keyword: '',
+                    values: selectedValues(input.binding?.value),
+                })
+                    .catch(() => undefined);
+            }
+        },
+    };
+}
+function createRelationTreeSelectProps(input, props, options) {
+    const loadMode = relationLoadMode(input);
+    const lazy = loadMode === 'tree' && options.length > 0;
+    return {
+        ...props,
+        data: toTreeSelectOptions(options, lazy),
+        filterable: true,
+        clearable: true,
+        multiple: input.fieldSchema?.multiple,
+        loading: input.binding?.optionLoading ?? props.loading,
+        lazy,
+        props: {
+            label: 'label',
+            value: 'value',
+            children: 'children',
+            isLeaf: 'isLeaf',
+        },
+        load(node, resolve) {
+            if (!lazy) {
+                resolve([]);
+                return;
+            }
+            if (!node.level) {
+                resolve(toTreeSelectOptions(options, lazy));
+                return;
+            }
+            const parentValue = node.data?.value;
+            const loading = input.binding?.loadOptions?.({ parentValue }) ?? Promise.resolve([]);
+            void loading.then((items) => {
+                resolve(toTreeSelectOptions(items.map(toElementPlusOption), lazy));
+            });
+        },
+        onVisibleChange(visible) {
+            if (visible && shouldLoadTreeRelationOptions(input, loadMode)) {
+                const loadInput = loadMode === 'tree' ? {} : undefined;
+                void input.binding?.loadOptions?.(loadInput);
+            }
+        },
+    };
+}
+function shouldLoadInitialOptions(input) {
+    if (input.binding?.optionLoading) {
+        return false;
+    }
+    const options = input.options ?? input.binding?.options ?? [];
+    return options.length === 0;
+}
+function shouldLoadTreeRelationOptions(input, loadMode) {
+    if (input.binding?.optionLoading) {
+        return false;
+    }
+    if (loadMode === 'all') {
+        return true;
+    }
+    return shouldLoadInitialOptions(input);
+}
+function isTreeRelation(input) {
+    const reference = input.fieldSchema?.options?.reference;
+    return Boolean(reference?.parent_field || reference?.load_mode === 'tree');
+}
+function relationLoadMode(input) {
+    const reference = input.fieldSchema?.options?.reference;
+    if (reference?.load_mode === 'tree') {
+        return 'tree';
+    }
+    if (reference?.load_mode === 'paged') {
+        return 'paged';
+    }
+    if (reference?.load_mode === 'all' || reference?.parent_field) {
+        return 'all';
+    }
+    return 'paged';
+}
+function selectedValues(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    return Array.isArray(value) ? value : [value];
+}
+function normalizeOptionsLoadInput(input) {
+    if (typeof input === 'string' || input === undefined) {
+        return {
+            keyword: input,
+        };
+    }
+    return input;
+}
+function renderOptions(ui, options) {
+    const entries = [];
+    const groups = new Map();
+    for (const option of options) {
+        if (!option.group) {
+            entries.push(option);
+            continue;
+        }
+        const key = `${typeof option.group.value}:${String(option.group.value)}`;
+        const existing = groups.get(key);
+        if (existing) {
+            existing.options.push(option);
+            continue;
+        }
+        const entry = { group: option.group, options: [option] };
+        groups.set(key, entry);
+        entries.push(entry);
+    }
+    return entries.map((entry) => {
+        if ('options' in entry) {
+            return ui.render(SCHEMA_UI_OPTION_GROUP, { label: entry.group.label }, { default: () => entry.options.map((option) => renderOption(ui, option)) });
+        }
+        return renderOption(ui, entry);
+    });
+}
+function renderOption(ui, option) {
+    return ui.render(SCHEMA_UI_OPTION, {
+        label: option.label,
+        value: option.value,
+        disabled: option.disabled,
+        ...option.props,
+    }, option.description
+        ? {
+            default: () => [
+                h('span', option.label),
+                h('span', {
+                    style: {
+                        marginLeft: '8px',
+                        color: 'var(--el-text-color-secondary)',
+                        fontSize: 'var(--el-font-size-extra-small)',
+                    },
+                }, option.description),
+            ],
+        }
+        : undefined);
+}
+function renderRadioOptions(ui, options) {
+    return options.map((option) => ui.render(SCHEMA_UI_RADIO, {
+        label: option.value,
+        value: option.value,
+        disabled: option.disabled,
+        ...option.props,
+    }, {
+        default: () => option.label,
+    }));
+}
+function renderCheckboxOptions(ui, options) {
+    return options.map((option) => ui.render(SCHEMA_UI_CHECKBOX, {
+        label: option.value,
+        value: option.value,
+        disabled: option.disabled,
+        ...option.props,
+    }, {
+        default: () => option.label,
+    }));
+}
+function toTreeSelectOptions(options, lazy = false) {
+    return options.map((option) => ({
+        value: option.value,
+        label: option.label,
+        disabled: option.disabled,
+        parent_value: option.parent_value,
+        has_children: option.has_children,
+        path_labels: option.path_labels,
+        meta: option.meta,
+        isLeaf: lazy && option.has_children !== undefined ? !option.has_children : undefined,
+        ...option.props,
+        children: option.children ? toTreeSelectOptions(option.children, lazy) : undefined,
+    }));
+}
+function toCascaderOptions(options) {
+    return options.map((option) => ({
+        value: option.value,
+        label: option.label,
+        disabled: option.disabled,
+        ...option.props,
+        children: option.children ? toCascaderOptions(option.children) : undefined,
+    }));
+}
+function resolveControlOptions(input) {
+    return (input.options ?? []).map(toElementPlusOption);
+}
+function toElementPlusOption(option) {
+    return {
+        label: option.label,
+        value: option.value,
+        disabled: option.disabled,
+        description: option.description,
+        group: option.group,
+        children: option.children?.map(toElementPlusOption),
+        parent_value: option.parent_value,
+        has_children: option.has_children,
+        path_labels: option.path_labels,
+        meta: option.meta,
+        props: option.props,
+    };
+}
+//# sourceMappingURL=field.js.map