@kengic/vue 0.30.1-beta.82 → 0.30.1-beta.85

package/component/KgForm.Item/KgForm.Item.RadioGroup.tsx

@@ -0,0 +1,91 @@
+import { Col, Radio, Row } from 'ant-design-vue';
+import { type SelectValue } from 'ant-design-vue/es/select';
+import { isEqual } from 'lodash-es';
+import { computed, defineComponent, inject, watch } from 'vue';
+import { IKgVarConfigControlControlProperties, KG, KG_FORM_CONTEXT } from '../../model';
+import { KgUtil } from '../../util';
+import { emit, IKgForm$EventListenerParameter$onChange } from '../KgForm/KgForm.event';
+import { useKgVar } from '../KgVar';
+import { getProps } from './KgForm.Item.model';
+import { useKgFormItemSelect } from './KgForm.Item.Select.service';
+import { useKgFormItem } from './KgForm.Item.service';
+
+// 表单控件:单选框列表
+export default defineComponent({
+    name: 'KgFormItemRadioGroup',
+    props: getProps(),
+    emits: ['update:value', 'kgSubmit'],
+    setup(props) {
+        const formModel = inject(KG.DI.KG_FORM.FORM_MODEL)!;
+        const kgVar = useKgVar();
+
+        const { controlProperties$$ } = useKgFormItem<IKgVarConfigControlControlProperties['RADIO_GROUP']>();
+        const { varConfigPossibility, requestParams, val_clm, datas$$, requestDatas } = useKgFormItemSelect({ props: props });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        /** 表单的值. */
+        const value$$ = computed(() => formModel.value[props.kgVarName!]);
+        //endregion
+
+        //region WATCH
+        //----------------------------------------------------------------------------------------------------
+        watch(
+            requestParams,
+            (value, oldValue) => {
+                if (!isEqual(value, oldValue)) {
+                    requestDatas();
+                }
+            },
+            { immediate: true },
+        );
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        function setValue(value: any) {
+            formModel.value[props.kgVarName!] = value;
+        }
+
+        function onUpdateValue(value: SelectValue) {
+            setValue(value);
+            emit<IKgForm$EventListenerParameter$onChange>({
+                id: kgVar.fid,
+                event: 'onChange',
+                parameter: {
+                    context: props.kgContext ?? KG_FORM_CONTEXT.SUBMIT,
+                    isCopying: kgVar.isCopying.value,
+                    isCreating: kgVar.isCreating.value,
+                    isDeleting: kgVar.isDeleting.value,
+                    isUpdating: kgVar.isUpdating.value,
+                    value: value,
+                    varName: props.kgVarName ?? '',
+                    variableName: props.kgVarName ?? '',
+                },
+            });
+        }
+        //endregion
+
+        return () => (
+            <div class={'kg-form-item--radio-group'}>
+                <Radio.Group
+                    value={value$$.value as any}
+                    onUpdate:value={onUpdateValue}
+                >
+                    <Row gutter={12}>
+                        {datas$$.value.map((data) => (
+                            <Col span={controlProperties$$.value?.span ?? 24}>
+                                <Radio
+                                    kg-value={data[val_clm.value]}
+                                    value={data[val_clm.value]}
+                                >
+                                    {KgUtil.evaluateVarConfigPossibilityLabel(data, varConfigPossibility.value?.lbl_clm ?? '', varConfigPossibility.value?.val_clm ?? '')}
+                                </Radio>
+                            </Col>
+                        ))}
+                    </Row>
+                </Radio.Group>
+            </div>
+        );
+    },
+});

package/component/KgForm.Item/KgForm.Item.Select.service.tsx

@@ -0,0 +1,317 @@
+import { ____ERROR____, KgCoreUtil } from '@kengic/core.core';
+import dayjs from 'dayjs';
+import { isArrayLike, isObjectLike, mapValues } from 'lodash-es';
+import { computed, ComputedRef, inject, ref } from 'vue';
+import { API } from '../../api';
+import { IKgVarConfigControlControlProperties, IKgVarConfigPossibilityProperties, KG, KG__DYNAMIC_PARAM_LIST, KG__VAR_CONFIG_POSSIBILITY__DATA_SOURCE_TYPE, KG__VAR_CONFIG_POSSIBILITY__VALUE_DATA_TYPE, KG_FORM_CONTEXT } from '../../model';
+import { httpClient } from '../../service';
+import { KgUtil } from '../../util';
+import { emit, IKgForm$EventListenerParameter$onSelectBeforeRequest, IKgForm$EventListenerParameter$onSelectBeforeSetDatas } from '../KgForm/KgForm.event';
+import { useKgVar } from '../KgVar';
+import { KgFormItemProps } from './KgForm.Item.model';
+import { useKgFormItem } from './KgForm.Item.service';
+
+//region useKgFormItemSelect
+//----------------------------------------------------------------------------------------------------
+export function useKgFormItemSelect(param: { props: KgFormItemProps }) {
+    const { props } = param ?? {};
+
+    const $dayjs = inject('$dayjs', dayjs);
+    const kgVname = inject(KG.DI.KG_FORM_ITEM.VAR_NAME, '');
+    const formModel$$ = inject(KG.DI.KG_FORM.FORM_MODEL)!;
+
+    const kgVar = useKgVar();
+
+    const varConfigPossibility$$ = computed(() => kgVar.getVarConfigPossibility({ varName: kgVname }));
+    const varConfigPossibilityProps$$ = computed(() => KgCoreUtil.tryParseJSON<IKgVarConfigPossibilityProperties>(varConfigPossibility$$.value?.props));
+    const { controlType, controlProperties$$ } = useKgFormItem<IKgVarConfigControlControlProperties['SELECT']>();
+
+    /** 是否正在查询列表数据. */
+    const isDatasRequesting$$ = ref(false);
+    /** 列表数据. */
+    const datas$$ = ref<Array<Record<string, any>>>([]);
+    /** 作为数据的列. */
+    const val_clm = computed<string>(() => varConfigPossibility$$.value?.val_clm ?? '');
+    /** 作为显示的列. */
+    const lbl_clm = computed<string>(() => varConfigPossibility$$.value?.lbl_clm ?? '');
+
+    /**
+     * 查询参数.
+     * 当前列表可能是一个级联数据(例如:国/省/市), 当国家变更时, 需要将新的国家作为参数, 去重新查询省的下拉列表数据.
+     * 此时省的 cmd_prm 配置就会是类似这种: `{"country":"{countryCode}"}`, 其中的 {countryCode} 表示当前表单中的 countryCode 字段的值.
+     */
+    const requestParams$$ = computed<Record<string, any>>(() => {
+        let params = KgUtil.parseRequestParamsToJSON(varConfigPossibility$$.value?.cmd_prm);
+
+        params = mapValues(params, (value) => {
+            let _value = value;
+
+            // 若参数值使用了 `{}` 包裹, 则表示参数值需要被填充为真正的值
+            if (typeof value === 'string' && value.startsWith('{') && value.endsWith('}') && !KG__DYNAMIC_PARAM_LIST.includes(value)) {
+                // 依赖的字段名(该字段属于当前表单)
+                let dependentKey = value.slice(1, -1);
+                // 依赖的字段名所属对象的其他字段名
+                let otherDependentKey = '';
+
+                // 如果级联配置是这样的: `{"country":"{countryCode.id}"}`,
+                // 表示我不是直接依赖的 countryCode 这个字段的值, 而是它所属对象的 id 字段的值,
+                if (dependentKey.includes('.')) {
+                    const path = dependentKey.split('.');
+                    dependentKey = path[0];
+                    otherDependentKey = path[1];
+                }
+
+                if (otherDependentKey) {
+                    _value = formModel$$.value?.[`${dependentKey}_obj`]?.[otherDependentKey] ?? undefined;
+                } else {
+                    _value = formModel$$.value?.[dependentKey];
+                }
+
+                // 如果动态参数的值为空, 则根据下面的配置分两种情况处理,
+                if (!_value) {
+                    // 通过将动态参数的值设为 undefined, 表示该参数不会作为请求参数, 表示加载所有列表数据,
+                    if (varConfigPossibilityProps$$.value.isEmptyIfParentIsNull === false) {
+                        _value = undefined;
+                    }
+                    // 通过将动态参数的值设为一个特殊的值, 表示该参数始终不会满足后端接口中的查询过滤条件, 表示会返回空列表数据,
+                    else {
+                        _value = '__KG__FORM_ITEM_SELECT__PID__';
+                    }
+                }
+            }
+
+            return _value;
+        });
+
+        return params;
+    });
+
+    /**
+     * 查询列表数据.
+     */
+    async function requestDatas(): Promise<void> {
+        let _datas = ref<Array<Record<string, any>>>([]);
+
+        const dataSourceType = varConfigPossibility$$.value?.data_source_type;
+        const valueKey = varConfigPossibility$$.value?.val_clm ?? '';
+        const labelKey = varConfigPossibility$$.value?.lbl_clm ?? '';
+
+        const response = ref<any>({});
+
+        try {
+            isDatasRequesting$$.value = true;
+
+            const requestParamRecord = KgUtil.parseParams(requestParams$$.value, null, $dayjs);
+
+            const eventResult$onSelectBeforeRequest = await emit<IKgForm$EventListenerParameter$onSelectBeforeRequest>({
+                id: kgVar.fid,
+                event: 'onSelectBeforeRequest',
+                parameter: {
+                    context: props.kgContext ?? KG_FORM_CONTEXT.SUBMIT,
+                    params: requestParamRecord,
+                    response: response,
+                    varName: kgVname,
+                },
+            });
+
+            if (eventResult$onSelectBeforeRequest) {
+                // 列表数据由外部提供, 不需要调用查询接口去获取
+            } else {
+                switch (dataSourceType) {
+                    case KG__VAR_CONFIG_POSSIBILITY__DATA_SOURCE_TYPE.API: {
+                        const requestUrl = varConfigPossibility$$.value?.cmd;
+                        const requestMethod = (varConfigPossibility$$.value?.cmd_method ?? 'GET') as 'GET';
+
+                        // 这三个参数必须配置
+                        if (!requestUrl || !valueKey || !labelKey) {
+                            ____ERROR____(`${kgVar.fid} | KgFormItemSelect.requestDatas() | 下拉列表配置有误.`, {
+                                cmd: requestUrl,
+                                fid: kgVar.fid,
+                                lbl_clm: labelKey,
+                                val_clm: valueKey,
+                                varName: kgVname,
+                            });
+                            return;
+                        }
+
+                        response.value = await httpClient()?.request(
+                            {
+                                url: requestUrl,
+                                method: requestMethod,
+                                params: requestParamRecord,
+                                data: requestParamRecord,
+                            },
+                            {
+                                dayjs: $dayjs,
+                                dynamicQueryOperatorModel: {},
+                            },
+                        );
+
+                        break;
+                    }
+
+                    case KG__VAR_CONFIG_POSSIBILITY__DATA_SOURCE_TYPE.SQL: {
+                        response.value = await API.WMS.VarConfigPossibilityController.ExecuteQuery({ params: { id: varConfigPossibility$$.value?.id ?? '' } });
+                        break;
+                    }
+                }
+            }
+
+            // 数据格式错误
+            if (!isObjectLike(response.value)) {
+                _datas.value = [];
+            } else {
+                switch (true) {
+                    // 如果是列表数据, 直接使用,
+                    case isArrayLike(response.value):
+                        _datas.value = transformDatas(response.value);
+                        break;
+
+                    // 如果是分页数据, 则取分页数据作为列表数据,
+                    case response.value && 'total' in response.value && 'records' in response.value:
+                        _datas.value = transformDatas(response.value!.records);
+                        break;
+                }
+            }
+
+            // 属性对应不上
+            if (_datas.value.length > 0) {
+                const obj = _datas.value[0];
+                if (!(valueKey in obj)) {
+                    ____ERROR____(`${kgVar.fid} | KgFormItemSelect.requestDatas() | 下拉列表配置有误, 数据列在返回的数据中不存在.`, {
+                        fid: kgVar.fid,
+                        lbl_clm: labelKey,
+                        val_clm: valueKey,
+                        varName: kgVname,
+                        所有列: Object.keys(obj),
+                    });
+                }
+            }
+
+            await emit<IKgForm$EventListenerParameter$onSelectBeforeSetDatas>({
+                id: kgVar.fid,
+                event: 'onSelectBeforeSetDatas',
+                parameter: {
+                    context: props.kgContext ?? KG_FORM_CONTEXT.SUBMIT,
+                    datas: _datas,
+                    isCopying: kgVar.isCopying.value,
+                    isCreating: kgVar.isCreating.value,
+                    isDeleting: kgVar.isDeleting.value,
+                    isUpdating: kgVar.isUpdating.value,
+                    varName: kgVname,
+                },
+            });
+
+            datas$$.value = _datas.value.map((i, index) => {
+                // 加上 id 作为循环渲染下拉列表项时的 key, 防止 value 有重复数据导致内存泄漏,
+                return { ...i, id: String(i.id || Date.now() + index) };
+            });
+        } catch (e) {
+            // 下拉列表数据获取失败
+            console.error(e);
+        } finally {
+            isDatasRequesting$$.value = false;
+        }
+    }
+
+    function transformDatas(datas?: Array<Record<string, any>> | null): Array<Record<string, any>> {
+        if (!datas) {
+            return [];
+        }
+
+        const val_clm = varConfigPossibility$$.value?.val_clm ?? '';
+        /** 数据类型. */
+        const val_data_type = varConfigPossibility$$.value?.val_data_type ?? KG__VAR_CONFIG_POSSIBILITY__VALUE_DATA_TYPE.DEFAULT;
+
+        switch (val_data_type) {
+            case KG__VAR_CONFIG_POSSIBILITY__VALUE_DATA_TYPE.STRING:
+                datas.forEach((row) => {
+                    row[val_clm] = String(row[val_clm]);
+                });
+                break;
+
+            case KG__VAR_CONFIG_POSSIBILITY__VALUE_DATA_TYPE.NUMBER:
+                datas.forEach((row) => {
+                    let value = Number(row[val_clm]);
+                    if (Number.isNaN(value)) {
+                        value = row[val_clm];
+                        ____ERROR____(`| 数据有误 | 无法将 ${row[val_clm]} 转换为 ${val_data_type} 类型`, {
+                            frm_id: kgVar.fid,
+                            var_nam: kgVname,
+                            VarConfigPossibility: varConfigPossibility$$.value,
+                        });
+                    }
+
+                    row[val_clm] = value;
+                });
+                break;
+
+            case KG__VAR_CONFIG_POSSIBILITY__VALUE_DATA_TYPE.BOOLEAN: {
+                datas.forEach((row) => {
+                    let value: any;
+
+                    if ('true' === String(row[val_clm]).toLowerCase()) {
+                        value = true;
+                    } else if ('false' === String(row[val_clm]).toLowerCase()) {
+                        value = false;
+                    } else {
+                        value = row[val_clm];
+                        ____ERROR____(`| 数据有误 | 无法将 ${row[val_clm]} 转换为 ${val_data_type} 类型`, {
+                            frm_id: kgVar.fid,
+                            var_nam: kgVname,
+                            VarConfigPossibility: varConfigPossibility$$.value,
+                        });
+                    }
+
+                    row[val_clm] = value;
+                });
+                break;
+            }
+        }
+
+        switch (controlType.value) {
+            case KG.VAR_CONFIG_CONTROL.CONTROL_TYPE.CHECKBOX_GROUP: {
+                const _controlProperties = controlProperties$$ as ComputedRef<IKgVarConfigControlControlProperties['CHECKBOX_GROUP']>;
+                if (_controlProperties.value?.excludeValues) {
+                    return datas.filter((i) => !_controlProperties.value.excludeValues?.includes(i[val_clm]));
+                }
+                break;
+            }
+        }
+
+        return datas;
+    }
+
+    return {
+        /** 列表数据. */
+        datas$$: datas$$,
+
+        /** 是否正在查询列表数据. */
+        isDatasRequesting: isDatasRequesting$$,
+
+        /** 作为显示的列. */
+        lbl_clm: lbl_clm,
+
+        /**
+         * 查询列表数据.
+         */
+        requestDatas: requestDatas,
+
+        /** 查询参数. */
+        requestParams: requestParams$$,
+
+        /**
+         * 处理列表数据.
+         * @param datas 原始列表数据.
+         * @return {} 处理后的列表数据.
+         */
+        transformDatas: transformDatas,
+
+        /** 作为数据的列. */
+        val_clm: val_clm,
+
+        /** VarConfigPossibility 配置. */
+        varConfigPossibility: varConfigPossibility$$,
+    };
+}
+//endregion

package/component/KgForm.Item/KgForm.Item.Select.tsx

@@ -0,0 +1,236 @@
+import { Icon } from '@iconify/vue';
+import { ____DEBUG____ } from '@kengic/core.core';
+import { Select } from 'ant-design-vue';
+import { type SelectValue } from 'ant-design-vue/es/select';
+import { isArray, isEqual, isNil } from 'lodash-es';
+import { computed, defineComponent, inject, toRaw, watch } from 'vue';
+import { useKg } from '../../config';
+import { IKgVarConfigControlControlProperties, KG, KG_FORM_CONTEXT } from '../../model';
+import { KgUtil } from '../../util';
+import { emit, IKgForm$EventListenerParameter$onBlur, IKgForm$EventListenerParameter$onChange, IKgForm$EventListenerParameter$onSelectChange } from '../KgForm/KgForm.event';
+import { useKgVar } from '../KgVar';
+import { getProps } from './KgForm.Item.model';
+import { useKgFormItemSelect } from './KgForm.Item.Select.service';
+import { useKgFormItem } from './KgForm.Item.service';
+
+// 表单控件:下拉列表
+export default defineComponent({
+    emits: ['update:value', 'kgSubmit', 'kgSelectChange'],
+    name: 'KgFormItemSelect',
+    props: getProps(),
+    setup(props, { attrs, emit: _emit }) {
+        const formModel = inject(KG.DI.KG_FORM.FORM_MODEL)!;
+
+        const kg = useKg();
+        const kgVar = useKgVar();
+
+        kgVar.kgForm.store.$onAction(async ({ name, args }) => {
+            switch (name) {
+                case 'Select$requestDatas':
+                    if (args[0] === kgVar.fid && args[1].varName === props.kgVarName) {
+                        requestDatas();
+                    }
+                    break;
+            }
+        });
+
+        const { controlProperties$$ } = useKgFormItem<IKgVarConfigControlControlProperties['SELECT']>();
+        const { varConfigPossibility, val_clm, lbl_clm, isDatasRequesting, datas$$, requestDatas, requestParams } = useKgFormItemSelect({ props: props });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        /** 表单的值. */
+        const value$$ = computed(() => formModel.value[props.kgVarName!]);
+
+        /** 是否允许清空. */
+        const allowClear$$ = computed<boolean>(() => {
+            let allowClear: boolean = true;
+
+            // 传入的组件参数优先级更高
+            if (props.kgAllowClear !== undefined) {
+                allowClear = props.kgAllowClear;
+            } else if (!isNil(controlProperties$$.value?.allowClear)) {
+                allowClear = controlProperties$$.value?.allowClear;
+            }
+
+            return allowClear;
+        });
+
+        //endregion
+
+        //region WATCH
+        //----------------------------------------------------------------------------------------------------
+        watch(
+            requestParams,
+            (value, oldValue) => {
+                if (!isEqual(value, oldValue)) {
+                    requestDatas();
+                }
+            },
+            { immediate: true },
+        );
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        function setValue(value: any) {
+            formModel.value[props.kgVarName!] = value;
+        }
+
+        /** 选中发生变更. */
+        async function onChange(value: SelectValue) {
+            switch (props.kgMode) {
+                // 多选
+                case 'multiple': {
+                    if (Array.isArray(value)) {
+                        const rows = toRaw(datas$$.value.filter((i) => value.includes(i[val_clm.value]))) ?? null;
+                        // TODO LT 移除该事件，使用下面的 'onSelectChange' 事件代替
+                        _emit('kgSelectChange', rows);
+
+                        await emit<IKgForm$EventListenerParameter$onSelectChange>({
+                            event: 'onSelectChange',
+                            id: kgVar.fid,
+                            parameter: {
+                                context: props.kgContext ?? KG_FORM_CONTEXT.SUBMIT,
+                                formModel: props.kgContext === KG_FORM_CONTEXT.SEARCH ? kgVar.kgSearch.formModel : kgVar.kgSubmit.formModel,
+                                isCopying: kgVar.isCopying.value,
+                                isCreating: kgVar.isCreating.value,
+                                isDeleting: kgVar.isDeleting.value,
+                                isMultiple: true,
+                                isUpdating: kgVar.isUpdating.value,
+                                model: props.kgContext === KG_FORM_CONTEXT.SEARCH ? kgVar.kgSearch.formModel : kgVar.kgSubmit.formModel,
+                                rows: rows,
+                                values: value,
+                                varName: props.kgVarName ?? '',
+                            },
+                        });
+
+                        // 将选择的对象记录起来, 级联查询的时候会用到
+                        formModel.value[`${props.kgVarName}_obj`] = rows;
+                    }
+
+                    break;
+                }
+
+                // 单选
+                default: {
+                    const row = toRaw(datas$$.value.find((i) => i[val_clm.value] === value)) ?? null;
+                    // TODO 移除该事件，使用下面的 'onSelectChange' 事件代替
+                    _emit('kgSelectChange', row);
+
+                    await emit<IKgForm$EventListenerParameter$onSelectChange>({
+                        event: 'onSelectChange',
+                        id: kgVar.fid,
+                        parameter: {
+                            context: props.kgContext ?? KG_FORM_CONTEXT.SUBMIT,
+                            formModel: props.kgContext === KG_FORM_CONTEXT.SEARCH ? kgVar.kgSearch.formModel : kgVar.kgSubmit.formModel,
+                            isCopying: kgVar.isCopying.value,
+                            isCreating: kgVar.isCreating.value,
+                            isDeleting: kgVar.isDeleting.value,
+                            isMultiple: false,
+                            isUpdating: kgVar.isUpdating.value,
+                            model: props.kgContext === KG_FORM_CONTEXT.SEARCH ? kgVar.kgSearch.formModel : kgVar.kgSubmit.formModel,
+                            rows: [row],
+                            values: [value],
+                            varName: props.kgVarName ?? '',
+                        },
+                    });
+
+                    // 将选择的对象记录起来, 级联查询的时候会用到
+                    formModel.value[`${props.kgVarName}_obj`] = row;
+
+                    break;
+                }
+            }
+        }
+
+        function onBlur() {
+            emit<IKgForm$EventListenerParameter$onBlur>({
+                id: kgVar.fid,
+                event: 'onBlur',
+                parameter: {
+                    context: props.kgContext ?? KG_FORM_CONTEXT.SUBMIT,
+                    value: value$$.value,
+                    values: (isArray(value$$.value ?? []) ? (value$$.value ?? []) : [value$$.value ?? null]) as Array<any>,
+                    varName: props.kgVarName ?? '',
+                },
+            });
+        }
+
+        function onUpdateValue(value: SelectValue) {
+            ____DEBUG____(`${kgVar.fid} | ${props.kgVarName} | KgFormItemSelect | onUpdateValue()`, { value: value });
+            setValue(value);
+            emit<IKgForm$EventListenerParameter$onChange>({
+                event: 'onChange',
+                id: kgVar.fid,
+                parameter: {
+                    context: props.kgContext ?? KG_FORM_CONTEXT.SUBMIT,
+                    isCopying: kgVar.isCopying.value,
+                    isCreating: kgVar.isCreating.value,
+                    isDeleting: kgVar.isDeleting.value,
+                    isUpdating: kgVar.isUpdating.value,
+                    value: value,
+                    varName: props.kgVarName ?? '',
+                    variableName: props.kgVarName ?? '',
+                },
+            });
+        }
+        //endregion
+
+        return () => (
+            <Select
+                class="kg-form-item--select"
+                kg-value={value$$.value}
+                kg-cmd={varConfigPossibility.value?.cmd}
+                kg-val_clm={val_clm.value}
+                kg-lbl_clm={lbl_clm.value}
+                value={value$$.value as any}
+                onUpdate:value={onUpdateValue}
+                id={attrs.id as any}
+                disabled={props.kgDisabled}
+                allowClear={allowClear$$.value}
+                mode={props.kgMode}
+                maxTagCount={'responsive'}
+                placeholder={props.kgPlaceholder}
+                showArrow={true}
+                showSearch={true}
+                filterOption={(inputValue, option) => {
+                    return (
+                        (option?.value !== null && option?.value !== undefined && String(option.value).toLowerCase().includes(inputValue.toLowerCase())) ||
+                        (option?.label !== null && option?.label !== undefined && String(option.label).toLowerCase().includes(inputValue.toLowerCase()))
+                    );
+                }}
+                dropdownClassName={props.kgMode === 'multiple' ? 'kg-form-item--select--dropdown kg-form-item--select-multi--dropdown' : 'kg-form-item--select--dropdown'}
+                onChange={onChange}
+                onBlur={onBlur}
+            >
+                {{
+                    default: () =>
+                        datas$$.value.map((i: Record<string, any>) => {
+                            const label = KgUtil.evaluateVarConfigPossibilityLabel(i, lbl_clm.value, val_clm.value);
+
+                            return (
+                                <Select.Option
+                                    kg-value={i[val_clm.value]}
+                                    key={i.id}
+                                    title={label}
+                                    value={i[val_clm.value]}
+                                    label={label}
+                                >
+                                    {label}
+                                </Select.Option>
+                            );
+                        }),
+                    notFoundContent: () => {
+                        if (isDatasRequesting.value) {
+                            return <span>{kg.t('kg.loading')}</span>;
+                        }
+
+                        return <span>{kg.t('kg.empty')}</span>;
+                    },
+                    suffixIcon: () => <Icon icon="ant-design:caret-down-outlined" />,
+                }}
+            </Select>
+        );
+    },
+});