@jetlinks-web/components 3.0.0-rc → 3.0.0

package/lib/Search/Item.js

@@ -1,351 +1,218 @@
-function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
-    const op = ops[i];
-    const fn = ops[i + 1];
-    i += 2;
-    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
-        return undefined;
-    }
-    if (op === 'access' || op === 'optionalAccess') {
-        lastAccessLHS = value;
-        value = fn(value);
-    }
-    else if (op === 'call' || op === 'optionalCall') {
-        value = fn((...args) => value.call(lastAccessLHS, ...args));
-        lastAccessLHS = undefined;
-    }
-} return value; }
 /* Analyzed bindings: {
-  "columns": "props",
-  "index": "props",
+  "column": "props",
+  "value": "props",
+  "termType": "props",
+  "type": "props",
   "expand": "props",
-  "termsItem": "props",
-  "componentProps": "props",
   "onlyValue": "props",
-  "reset": "setup-const",
   "labelWidth": "props",
-  "typeOptions": "setup-maybe-ref",
-  "termType": "setup-maybe-ref",
-  "componentType": "setup-maybe-ref",
-  "optionsMapKey": "setup-maybe-ref",
+  "index": "props",
+  "computed": "setup-const",
   "ref": "setup-const",
   "reactive": "setup-const",
-  "nextTick": "setup-const",
   "watch": "setup-const",
-  "computed": "setup-const",
-  "inject": "setup-const",
-  "cloneDeep": "setup-maybe-ref",
-  "debounce": "setup-maybe-ref",
-  "isArray": "setup-maybe-ref",
-  "isFunction": "setup-maybe-ref",
-  "omit": "setup-maybe-ref",
-  "filterTreeSelectNode": "setup-maybe-ref",
-  "filterSelectNode": "setup-maybe-ref",
-  "getTermTypeFn": "setup-maybe-ref",
-  "getTermOptions": "setup-maybe-ref",
-  "getTermTypes": "setup-maybe-ref",
-  "TreeSelect": "setup-maybe-ref",
+  "isRef": "setup-const",
   "Select": "setup-maybe-ref",
-  "Input": "setup-maybe-ref",
-  "InputNumber": "setup-maybe-ref",
-  "DatePicker": "setup-maybe-ref",
-  "TimePicker": "setup-maybe-ref",
-  "InputPassword": "setup-maybe-ref",
-  "RangePicker": "setup-maybe-ref",
-  "TimeRangePicker": "setup-maybe-ref",
-  "FormItem": "setup-maybe-ref",
-  "isPromise": "setup-maybe-ref",
+  "componentProps": "setup-maybe-ref",
+  "componentType": "setup-maybe-ref",
+  "typeOptions": "setup-maybe-ref",
+  "getTermOptions": "setup-maybe-ref",
+  "getItemDefaultValue": "setup-maybe-ref",
   "useLocaleReceiver": "setup-maybe-ref",
-  "contextLocale": "setup-maybe-ref",
+  "useColumnsMap": "setup-maybe-ref",
+  "useDefaultValue": "setup-maybe-ref",
+  "useOptionMap": "setup-maybe-ref",
+  "isArray": "setup-maybe-ref",
+  "isFunction": "setup-maybe-ref",
+  "useSearchStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emit": "setup-const",
   "termsModel": "setup-reactive-const",
-  "isBtw": "setup-ref",
-  "component": "setup-ref",
-  "componentName": "setup-ref",
-  "cProps": "setup-ref",
-  "options": "setup-ref",
+  "contextLocale": "setup-maybe-ref",
+  "optionsMap": "setup-maybe-ref",
+  "columnsMap": "setup-maybe-ref",
+  "columnsValues": "setup-maybe-ref",
+  "targetComponents": "setup-ref",
+  "valueOptions": "setup-ref",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
+  "termTypeOptions": "setup-ref",
   "columnOptions": "setup-ref",
-  "columnOptionMap": "setup-maybe-ref",
-  "termTypeOptions": "setup-reactive-const",
-  "optionLoading": "setup-ref",
-  "getTermType": "setup-const",
-  "getComponent": "setup-const",
-  "removeOptionByKey": "setup-const",
-  "handleItemOptions": "setup-maybe-ref",
-  "initModel": "setup-const",
-  "columnChange": "setup-const",
-  "handleItem": "setup-const",
-  "termTypeChange": "setup-const",
-  "valueChange": "setup-const"
+  "findItemByColumn": "setup-const",
+  "findOptionsByColumn": "setup-const",
+  "handleColumnsOptions": "setup-const",
+  "onTypeChange": "setup-const",
+  "onColumnChange": "setup-const",
+  "onTermTypeChange": "setup-const",
+  "onValueChange": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, createVNode as _createVNode, Fragment as _Fragment, normalizeStyle as _normalizeStyle, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1745819697205"), n = n(), _popScopeId(), n);
-const _hoisted_1 = { class: "JSearch-item" };
-const _hoisted_2 = {
+import { unref as _unref, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock, createVNode as _createVNode, Fragment as _Fragment, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
     key: 0,
     class: "JSearch-item--type"
 };
-const _hoisted_3 = { key: 1 };
-const _hoisted_4 = { class: "JSearch-item--value" };
-import { typeOptions, termType, componentType, optionsMapKey } from './setting';
-import { ref, reactive, nextTick, watch, computed, inject } from 'vue';
-import { cloneDeep, debounce, isArray, isFunction, omit } from 'lodash-es';
-import { filterTreeSelectNode, filterSelectNode, getTermTypeFn, getTermOptions, getTermTypes, } from './util';
-import { TreeSelect, Select, Input, InputNumber, DatePicker, TimePicker, InputPassword, RangePicker, TimeRangePicker, FormItem } from 'ant-design-vue';
-import { isPromise } from '@jetlinks-web/utils';
-import { useLocaleReceiver } from "../LocaleReciver/index";
+const _hoisted_2 = { key: 1 };
+const _hoisted_3 = { class: "JSearch-item--value" };
+import { computed, ref, reactive, watch, isRef } from 'vue';
+import { Select } from 'ant-design-vue';
+import { componentProps, componentType, typeOptions } from "./setting";
+import { getTermOptions, getItemDefaultValue } from "./util";
+import { useLocaleReceiver } from "../LocaleReciver";
+import { useColumnsMap, useDefaultValue, useOptionMap } from "./hooks";
+import { isArray, isFunction } from "lodash-es";
+import useSearchStyle from './style';
 const __sfc_main__ = _defineComponent({
+    ...{
+        name: 'JSearchItem'
+    },
     props: {
-        columns: {
-            type: Array,
-            default: () => [],
-            required: true,
+        column: {
+            type: String,
         },
-        index: {
-            type: Number,
-            default: 1,
+        value: {
+            type: String
+        },
+        termType: {
+            type: String,
+            default: 'like'
+        },
+        type: {
+            type: String,
+            default: 'or'
         },
         expand: {
             type: Boolean,
             default: false,
         },
-        termsItem: {
-            type: Object,
-            default: () => ({}),
-        },
-        componentProps: {
-            type: Object,
-            default: () => ({}),
-        },
         onlyValue: {
             type: Boolean,
-            default: false,
-        },
-        reset: {
-            type: Number,
-            default: 1,
+            default: true,
         },
         labelWidth: {
             type: Number,
             default: 40,
         },
+        index: {
+            type: Number,
+            default: 1
+        }
     },
-    emits: ["change"],
+    emits: ['update:value', 'update:termType', 'update:type', 'update:column'],
     setup(__props, { emit: __emit }) {
-        const [contextLocale] = useLocaleReceiver('Search');
         const props = __props;
         const emit = __emit;
         const termsModel = reactive({
-            type: _optionalChain([props, 'access', _2 => _2.termsItem, 'optionalAccess', _3 => _3.type]) || 'or',
-            value: _optionalChain([props, 'access', _4 => _4.termsItem, 'optionalAccess', _5 => _5.value]) || '',
-            termType: _optionalChain([props, 'access', _6 => _6.termsItem, 'optionalAccess', _7 => _7.termType]) || 'like',
-            column: _optionalChain([props, 'access', _8 => _8.termsItem, 'optionalAccess', _9 => _9.column]) || undefined,
+            type: props.type || 'or',
+            value: props.value || '',
+            termType: props.termType || 'like',
+            column: props.column || undefined,
+        });
+        const [contextLocale] = useLocaleReceiver('Search');
+        const optionsMap = useOptionMap();
+        const columnsMap = useColumnsMap();
+        const columnsValues = useDefaultValue();
+        const targetComponents = ref({});
+        const valueOptions = ref();
+        const prefixCls = computed(() => 'JSearch');
+        const [wrapSSR, hashId] = useSearchStyle(prefixCls);
+        const termTypeOptions = computed(() => {
+            return getTermOptions(targetComponents.value.type, contextLocale.value);
         });
-        const isBtw = computed(() => {
-            return ['in', 'nin'].includes(termsModel.termType);
+        const columnOptions = computed(() => {
+            return Object.values(columnsMap.value).sort((a, b) => a._sort_index - b._sort_index).map(item => ({ label: item.title, value: item.dataIndex }));
         });
-        const component = ref(componentType.input);
-        const componentName = ref();
-        const cProps = ref({});
-        const options = ref([]);
-        const columnOptions = ref([]);
-        const columnOptionMap = inject(optionsMapKey, new Map());
-        const termTypeOptions = reactive({ option: termType(contextLocale.value) });
-        const optionLoading = ref(false);
-        /**
-         * 根据类型切换默termType值
-         * @param type {}
-         * @param column {}
-         * @param options {}
-         * @param defaultTermType {}
-         * @param termFilter {}
-         */
-        const getTermType = (type, column, options, defaultTermType, termFilter) => {
-            termTypeOptions.option = _optionalChain([options, 'optionalAccess', _10 => _10.length])
-                ? getTermTypes(options, contextLocale.value)
-                : getTermOptions(type, column, contextLocale.value);
-            if (_optionalChain([termFilter, 'optionalAccess', _11 => _11.length])) {
-                termTypeOptions.option = termTypeOptions.option.filter((item) => !termFilter.includes(item.value));
-            }
-            return defaultTermType || _optionalChain([options, 'optionalAccess', _12 => _12.length])
-                ? termTypeOptions.option[0].value
-                : getTermTypeFn(type, column);
+        const findItemByColumn = () => {
+            return columnsMap.value[termsModel.column];
+        };
+        const findOptionsByColumn = () => {
+            return optionsMap.value[termsModel.column];
         };
         /**
-         * 根据类型返回组件
-         * @param type
+         * 处理options
+         * @param _options
          */
-        const getComponent = (type) => {
-            switch (type) {
-                case 'select':
-                    component.value = componentType.select;
-                    break;
-                case 'treeSelect':
-                    component.value = componentType.treeSelect;
-                    break;
-                case 'date':
-                    component.value = componentType.date;
-                    break;
-                case 'time':
-                    component.value = componentType.time;
-                    break;
-                case 'number':
-                    component.value = componentType.inputNumber;
-                    break;
-                case 'timeRange':
-                    component.value = componentType.timeRange;
-                    break;
-                case 'rangePicker':
-                    component.value = componentType.rangePicker;
-                    break;
-                case 'component':
-                    component.value = componentType.component;
-                    break;
-                default:
-                    component.value = componentType.input;
-                    break;
+        const handleColumnsOptions = async (_options) => {
+            if (isFunction(_options)) {
+                valueOptions.value = await _options();
+                optionsMap.value[props.column] = [...valueOptions.value];
             }
-        };
-        const removeOptionByKey = (options) => {
-            return options.map((item) => {
-                if (item.children) {
-                    item.children = removeOptionByKey(item.children);
-                }
-                return omit(item, ['key']);
-            });
-        };
-        const handleItemOptions = debounce((option) => {
-            options.value = [];
-            if (isArray(option)) {
-                options.value = option;
+            else if (isArray(_options)) {
+                valueOptions.value = _options;
             }
-            else if (isFunction(option)) {
-                optionLoading.value = true;
-                const fn = option();
-                if (isPromise(fn)) {
-                    (fn)
-                        .then((res) => {
-                        optionLoading.value = false;
-                        options.value = removeOptionByKey(res);
-                    })
-                        .catch((_) => {
-                        optionLoading.value = false;
-                    });
-                }
-                else {
-                    optionLoading.value = false;
-                    options.value = removeOptionByKey(fn || []);
-                }
+            else if (isRef(_options) || (typeof _options === 'object' && 'value' in _options)) {
+                valueOptions.value = _options.value;
             }
-        }, 100);
-        const initModel = () => {
-            termsModel.type = 'or';
-            termsModel.column = undefined;
-            termsModel.value = undefined;
-            termsModel.termType = undefined;
-            termTypeOptions.option = termType(contextLocale.value);
         };
-        const columnChange = (value, isChange, changeValue = true) => {
-            const item = _optionalChain([columnOptionMap, 'access', _13 => _13.value, 'optionalAccess', _14 => _14.get, 'call', _15 => _15(value)]);
-            if (!item) {
-                initModel();
-                return;
-            }
-            cProps.value = item.componentProps;
-            optionLoading.value = false;
-            // 设置value为undefined
-            termsModel.column = value;
-            getComponent(item.type); // 处理Item的组件类型
-            componentName.value = item.components;
-            // 处理options 以及 request
-            if ('options' in item) {
-                handleItemOptions(item.options);
-            }
-            const termsTypeValue = getTermType(item.type, value, item.termOptions, item.defaultTermType, item.termFilter);
-            if (changeValue) {
-                termsModel.value = undefined;
-                termsModel.termType = termsTypeValue;
-            }
-            if (isChange) {
-                valueChange();
-            }
+        const onTypeChange = () => {
+            emit('update:type', termsModel.type);
         };
-        const handleItem = () => {
-            columnOptions.value = [];
-            if (!props.columns.length)
-                return;
-            columnOptions.value = props.columns.map((item) => {
-                // 对columns进行Map处理以及值处理
-                return {
-                    label: item.title,
-                    value: item.column,
-                };
-            });
-            if (!props.onlyValue) {
-                // 获取第一个值
-                const sortColumn = cloneDeep(props.columns);
-                _optionalChain([sortColumn, 'optionalAccess', _16 => _16.sort, 'call', _17 => _17((a, b) => a.sortIndex - b.sortIndex)]);
-                const _index = props.index > sortColumn.length
-                    ? sortColumn.length - 1
-                    : props.index;
-                if (props.index <= sortColumn.length) {
-                    const _itemColumn = sortColumn[_index - 1];
-                    columnChange(_itemColumn.column, false);
-                }
-                else {
-                    columnChange(null, false);
-                }
-            }
-            else {
-                columnChange(_optionalChain([props, 'access', _18 => _18.columns, 'access', _19 => _19[props.index - 1], 'optionalAccess', _20 => _20.column]), false);
-            }
+        const onColumnChange = () => {
+            const record = findItemByColumn();
+            const defaultValue = getItemDefaultValue(record, columnsValues.value);
+            // 处理默认选项
+            termsModel.termType = defaultValue.termType;
+            // 处理默认值
+            termsModel.value = defaultValue.value;
+            emit('update:column', termsModel.column);
+            onTermTypeChange();
+            onValueChange();
         };
-        const termTypeChange = (v) => {
-            const isOldValueMultiple = ['in', 'nin'].includes(_optionalChain([props, 'access', _21 => _21.termsItem, 'optionalAccess', _22 => _22.termType]));
-            const isValueMultiple = ['in', 'nin'].includes(v);
-            if (isOldValueMultiple !== isValueMultiple) {
-                termsModel.value = isValueMultiple ? [] : undefined;
-            }
-            valueChange();
-        };
-        const valueChange = () => {
-            emit('change', {
-                type: props.onlyValue ? 'and' : termsModel.type || 'or',
-                value: termsModel.value,
-                termType: termsModel.termType || 'like',
-                column: termsModel.column,
-            });
+        const onTermTypeChange = () => {
+            emit('update:termType', termsModel.termType);
         };
-        const reset = () => {
-            termsModel.value = undefined;
+        const onValueChange = () => {
+            emit('update:value', termsModel.value);
         };
-        watch(() => props.columns, () => {
-            if (props.columns) {
-                handleItem();
+        watch(() => termsModel.termType, () => {
+            const isBtw = ['in', 'nin'].includes(termsModel.termType);
+            if (targetComponents.value.type === componentType.treeSelect) {
+                targetComponents.value.props = {
+                    ...targetComponents.value.props,
+                    multiple: isBtw
+                };
             }
-        }, { immediate: true, deep: true });
-        watch(() => props.termsItem, (val, oldVal) => {
-            if (_optionalChain([val, 'optionalAccess', _23 => _23.column])) {
-                nextTick(() => {
-                    Object.keys(props.termsItem).forEach((key) => {
-                        termsModel[key] = props.termsItem[key];
-                        if (key === 'column' && _optionalChain([val, 'optionalAccess', _24 => _24.column]) !== _optionalChain([oldVal, 'optionalAccess', _25 => _25.column])) {
-                            columnChange(props.termsItem.column, false, false);
-                        }
-                    });
-                });
+            else if (targetComponents.value.type === componentType.select) {
+                targetComponents.value.props = {
+                    ...targetComponents.value.props,
+                    mode: isBtw ? 'multiple' : 'combobox'
+                };
+            }
+        }, { immediate: true });
+        watch(() => termsModel.column, async () => {
+            // 根据column从map中获取record，再解析search属性
+            const record = findItemByColumn();
+            const options = findOptionsByColumn();
+            targetComponents.value = componentProps(record.search);
+            targetComponents.value.label = record.title;
+            //  处理options
+            if (options) {
+                valueOptions.value = options;
             }
             else {
-                handleItem();
+                await handleColumnsOptions(record.search.options);
             }
-        }, { immediate: true, deep: true });
+        }, { immediate: true });
+        watch(() => [props.value, props.termType, props.column, props.type], () => {
+            termsModel.value = props.value;
+            termsModel.termType = props.termType;
+            termsModel.column = props.column;
+            termsModel.type = props.type;
+        });
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
-                (!__props.onlyValue)
-                    ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(['JSearch-item', _unref(hashId)])
+            }, [
+                (__props.onlyValue)
+                    ? (_openBlock(), _createElementBlock("div", {
+                        key: 0,
+                        class: "JSearch-item--label",
+                        style: _normalizeStyle({ minWidth: `${__props.labelWidth}px` })
+                    }, _toDisplayString(targetComponents.value.label), 5 /* TEXT, STYLE */))
+                    : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
                         (__props.expand)
-                            ? (_openBlock(), _createElementBlock("div", _hoisted_2, [
+                            ? (_openBlock(), _createElementBlock("div", _hoisted_1, [
                                 (__props.index !== 1 && __props.index !== 4)
                                     ? (_openBlock(), _createBlock(_unref(Select), {
                                         key: 0,
@@ -353,9 +220,9 @@ const __sfc_main__ = _defineComponent({
                                         "onUpdate:value": _cache[0] || (_cache[0] = ($event) => ((termsModel.type) = $event)),
                                         options: _unref(typeOptions)(_unref(contextLocale)),
                                         style: { "width": "100%" },
-                                        onChange: valueChange
+                                        onChange: onTypeChange
                                     }, null, 8 /* PROPS */, ["value", "options"]))
-                                    : (_openBlock(), _createElementBlock("span", _hoisted_3, _toDisplayString(__props.index === 1 ? _unref(contextLocale).item.firstGroup : _unref(contextLocale).item.secondGroup), 1 /* TEXT */))
+                                    : (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString(__props.index === 1 ? _unref(contextLocale).item.firstGroup : _unref(contextLocale).item.secondGroup), 1 /* TEXT */))
                             ]))
                             : _createCommentVNode("v-if", true),
                         _createVNode(_unref(Select), {
@@ -364,136 +231,29 @@ const __sfc_main__ = _defineComponent({
                             placeholder: _unref(contextLocale).item.placeholder,
                             class: "JSearch-item--column",
                             options: columnOptions.value,
-                            onChange: columnChange
+                            onChange: onColumnChange
                         }, null, 8 /* PROPS */, ["value", "placeholder", "options"]),
                         _createVNode(_unref(Select), {
                             value: termsModel.termType,
                             "onUpdate:value": _cache[2] || (_cache[2] = ($event) => ((termsModel.termType) = $event)),
                             placeholder: _unref(contextLocale).item.placeholder,
                             class: "JSearch-item--termType",
-                            options: termTypeOptions.option,
-                            onChange: termTypeChange
+                            options: termTypeOptions.value,
+                            onChange: onTermTypeChange
                         }, null, 8 /* PROPS */, ["value", "placeholder", "options"])
-                    ], 64 /* STABLE_FRAGMENT */))
-                    : (_openBlock(), _createElementBlock("div", {
-                        key: 1,
-                        class: "JSearch-item--label",
-                        style: _normalizeStyle({ minWidth: `${__props.labelWidth}px` })
-                    }, _toDisplayString(columnOptions.value.length ? _optionalChain([columnOptions, 'access', _26 => _26.value, 'access', _27 => _27[__props.index - 1], 'optionalAccess', _28 => _28.label]) : ''), 5 /* TEXT, STYLE */)),
-                _createElementVNode("div", _hoisted_4, [
-                    _createVNode(_unref(FormItem), { "no-style": "" }, {
-                        default: _withCtx(() => [
-                            (component.value === _unref(componentType).input)
-                                ? (_openBlock(), _createBlock(_unref(Input), _mergeProps({
-                                    key: 0,
-                                    value: termsModel.value,
-                                    "onUpdate:value": _cache[3] || (_cache[3] = ($event) => ((termsModel.value) = $event)),
-                                    "allow-clear": ""
-                                }, cProps.value, {
-                                    style: { "width": "100%" },
-                                    onChange: valueChange
-                                }), null, 16 /* FULL_PROPS */, ["value"]))
-                                : (component.value === _unref(componentType).select)
-                                    ? (_openBlock(), _createBlock(_unref(Select), _mergeProps({
-                                        key: 1,
-                                        value: termsModel.value,
-                                        "onUpdate:value": _cache[4] || (_cache[4] = ($event) => ((termsModel.value) = $event)),
-                                        "allow-clear": "",
-                                        "show-search": "",
-                                        mode: isBtw.value ? 'multiple' : 'combobox'
-                                    }, cProps.value, {
-                                        style: { "width": "100%", "min-width": "80px" },
-                                        loading: optionLoading.value,
-                                        options: options.value,
-                                        "filter-option": (v, option) => _unref(filterSelectNode)(v, option, 'label'),
-                                        onChange: valueChange
-                                    }), null, 16 /* FULL_PROPS */, ["value", "mode", "loading", "options", "filter-option"]))
-                                    : (component.value === _unref(componentType).inputNumber)
-                                        ? (_openBlock(), _createBlock(_unref(InputNumber), _mergeProps({
-                                            key: 2,
-                                            value: termsModel.value,
-                                            "onUpdate:value": _cache[5] || (_cache[5] = ($event) => ((termsModel.value) = $event)),
-                                            "allow-clear": ""
-                                        }, cProps.value, {
-                                            style: { "width": "100%" },
-                                            onChange: valueChange
-                                        }), null, 16 /* FULL_PROPS */, ["value"]))
-                                        : (component.value === _unref(componentType).password)
-                                            ? (_openBlock(), _createBlock(_unref(InputPassword), _mergeProps({
-                                                key: 3,
-                                                value: termsModel.value,
-                                                "onUpdate:value": _cache[6] || (_cache[6] = ($event) => ((termsModel.value) = $event)),
-                                                "allow-clear": ""
-                                            }, cProps.value, {
-                                                style: { "width": "100%" },
-                                                onChange: valueChange
-                                            }), null, 16 /* FULL_PROPS */, ["value"]))
-                                            : (component.value === _unref(componentType).time)
-                                                ? (_openBlock(), _createBlock(_unref(TimePicker), _mergeProps({
-                                                    key: 4,
-                                                    value: termsModel.value,
-                                                    "onUpdate:value": _cache[7] || (_cache[7] = ($event) => ((termsModel.value) = $event)),
-                                                    "allow-clear": "",
-                                                    "value-format": "HH:mm:ss",
-                                                    style: { "width": "100%" }
-                                                }, cProps.value, { onChange: valueChange }), null, 16 /* FULL_PROPS */, ["value"]))
-                                                : (component.value === _unref(componentType).timeRange)
-                                                    ? (_openBlock(), _createBlock(_unref(TimeRangePicker), _mergeProps({
-                                                        key: 5,
-                                                        value: termsModel.value,
-                                                        "onUpdate:value": _cache[8] || (_cache[8] = ($event) => ((termsModel.value) = $event)),
-                                                        "allow-clear": "",
-                                                        "value-format": "HH:mm:ss",
-                                                        style: { "width": "100%" }
-                                                    }, cProps.value, { onChange: valueChange }), null, 16 /* FULL_PROPS */, ["value"]))
-                                                    : (component.value === _unref(componentType).date)
-                                                        ? (_openBlock(), _createBlock(_unref(DatePicker), _mergeProps({
-                                                            key: 6,
-                                                            value: termsModel.value,
-                                                            "onUpdate:value": _cache[9] || (_cache[9] = ($event) => ((termsModel.value) = $event)),
-                                                            "allow-clear": "",
-                                                            "show-time": "",
-                                                            "value-format": "YYYY-MM-DD HH:mm:ss",
-                                                            style: { "width": "100%" }
-                                                        }, cProps.value, { onChange: valueChange }), null, 16 /* FULL_PROPS */, ["value"]))
-                                                        : (component.value === _unref(componentType).rangePicker)
-                                                            ? (_openBlock(), _createBlock(_unref(RangePicker), _mergeProps({
-                                                                key: 7,
-                                                                value: termsModel.value,
-                                                                "onUpdate:value": _cache[10] || (_cache[10] = ($event) => ((termsModel.value) = $event)),
-                                                                "allow-clear": "",
-                                                                "show-time": "",
-                                                                "value-format": "YYYY-MM-DD HH:mm:ss",
-                                                                style: { "width": "100%" }
-                                                            }, cProps.value, { onChange: valueChange }), null, 16 /* FULL_PROPS */, ["value"]))
-                                                            : (component.value === _unref(componentType).treeSelect)
-                                                                ? (_openBlock(), _createBlock(_unref(TreeSelect), _mergeProps({
-                                                                    key: 8,
-                                                                    value: termsModel.value,
-                                                                    "onUpdate:value": _cache[11] || (_cache[11] = ($event) => ((termsModel.value) = $event)),
-                                                                    "allow-clear": "",
-                                                                    "show-search": "",
-                                                                    style: { "width": "100%" },
-                                                                    height: 350,
-                                                                    "field-names": { label: 'name', value: 'id' },
-                                                                    multiple: isBtw.value,
-                                                                    "filter-tree-node": (v, option) => _unref(filterTreeSelectNode)(v, option)
-                                                                }, cProps.value, {
-                                                                    "tree-data": options.value,
-                                                                    onChange: valueChange
-                                                                }), null, 16 /* FULL_PROPS */, ["value", "multiple", "filter-tree-node", "tree-data"]))
-                                                                : (component.value === _unref(componentType).component && componentName.value)
-                                                                    ? (_openBlock(), _createBlock(_resolveDynamicComponent(componentName.value), _mergeProps({ key: 9 }, cProps.value, {
-                                                                        value: termsModel.value,
-                                                                        "onUpdate:value": _cache[12] || (_cache[12] = ($event) => ((termsModel.value) = $event)),
-                                                                        onChange: valueChange
-                                                                    }), null, 16 /* FULL_PROPS */, ["value"]))
-                                                                    : _createCommentVNode("v-if", true)
-                        ]),
-                        _: 1 /* STABLE */
-                    })
+                    ], 64 /* STABLE_FRAGMENT */)),
+                _createElementVNode("div", _hoisted_3, [
+                    (_openBlock(), _createBlock(_resolveDynamicComponent(targetComponents.value.name), _mergeProps({
+                        "allow-clear": "",
+                        style: { "width": "100%", "min-width": "80px" }
+                    }, targetComponents.value.props, {
+                        options: valueOptions.value,
+                        value: termsModel.value,
+                        "onUpdate:value": _cache[3] || (_cache[3] = ($event) => ((termsModel.value) = $event)),
+                        onChange: onValueChange
+                    }), null, 16 /* FULL_PROPS */, ["options", "value"]))
                 ])
-            ]));
+            ], 2 /* CLASS */));
         };
     }
 });