@type-dom/ui 0.1.1 → 0.1.3

package/src/components/form/td-option/useOption.d.ts

@@ -1,9 +1,10 @@
-export declare function useOption(props: any, states: any): {
-    select: import("..").SelectContext | undefined;
-    currentLabel: import("@type-dom/signals").Computed<any>;
-    currentValue: import("@type-dom/signals").Computed<any>;
+import { OptionStates, TdOptionProps } from './td-option.interface';
+export declare function useOption(props: TdOptionProps, states: OptionStates): {
+    select: import("..").SelectContext;
+    currentLabel: import("@type-dom/signals").Computed<string | number | boolean | undefined>;
+    currentValue: import("@type-dom/signals").Computed<string | number | true | object>;
     itemSelected: import("@type-dom/signals").Computed<boolean>;
-    isDisabled: import("@type-dom/signals").Computed<any>;
+    isDisabled: import("@type-dom/signals").Computed<boolean>;
     hoverItem: () => void;
     updateOption: (query: string) => void;
 };

package/src/components/form/td-option/useOption.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOption = useOption;
-// @ts-nocheck
 // import { computed, getCurrentInstance, inject, toRaw, watch } from 'vue'
 const signals_1 = require("@type-dom/signals");
 const lodash_1 = require("lodash");
@@ -14,28 +13,29 @@ function useOption(props, states) {
     const selectGroup = (0, framework_1.inject)(token_1.selectGroupKey, { disabled: false });
     // computed
     const itemSelected = (0, signals_1.computed)(() => {
-        return contains((0, utils_1.ensureArray)(select.props.modelValue), props.value);
+        return contains((0, utils_1.ensureArray)((0, signals_1.unref)(select.props.modelValue)), props.value);
     });
     const limitReached = (0, signals_1.computed)(() => {
         var _a;
-        if (select.props.multiple) {
-            const modelValue = (0, utils_1.ensureArray)((_a = select.props.modelValue) !== null && _a !== void 0 ? _a : []);
-            return (!itemSelected.value &&
-                modelValue.length >= select.props.multipleLimit &&
-                select.props.multipleLimit > 0);
+        if ((0, signals_1.unref)(select.props.multiple)) {
+            const modelValue = (0, utils_1.ensureArray)((_a = (0, signals_1.unref)(select.props.modelValue)) !== null && _a !== void 0 ? _a : []);
+            return (!itemSelected.get() &&
+                modelValue.length >= (0, signals_1.unref)(select.props.multipleLimit) &&
+                (0, signals_1.unref)(select.props.multipleLimit) > 0);
         }
         else {
             return false;
         }
     });
     const currentLabel = (0, signals_1.computed)(() => {
+        console.warn('currentLabel computed . ');
         return props.label || ((0, utils_1.isObject)(props.value) ? '' : props.value);
     });
     const currentValue = (0, signals_1.computed)(() => {
         return props.value || props.label || '';
     });
     const isDisabled = (0, signals_1.computed)(() => {
-        return props.disabled || states.groupDisabled || limitReached.value;
+        return props.disabled || states.groupDisabled || limitReached.get();
     });
     const instance = (0, framework_1.getCurrentInstance)();
     const contains = (arr = [], target) => {
@@ -43,7 +43,7 @@ function useOption(props, states) {
             return arr && arr.includes(target);
         }
         else {
-            const valueKey = select.props.valueKey;
+            const valueKey = (0, signals_1.unref)(select.props.valueKey);
             return (arr &&
                 arr.some((item) => {
                     return (0, signals_1.toRaw)((0, lodash_1.get)(item, valueKey)) === (0, lodash_1.get)(target, valueKey);
@@ -51,38 +51,43 @@ function useOption(props, states) {
         }
     };
     const hoverItem = () => {
+        var _a;
+        // console.warn('hoverItem . ');
         if (!props.disabled && !selectGroup.disabled) {
-            select.states.hoveringIndex = select.optionsArray.indexOf(instance);
+            select.states.hoveringIndex = (_a = select.optionsArray) === null || _a === void 0 ? void 0 : _a.indexOf(instance);
         }
     };
     const updateOption = (query) => {
         const regexp = new RegExp((0, utils_1.escapeStringRegexp)(query), 'i');
-        states.visible = regexp.test(currentLabel.value) || props.created;
+        states.visible = regexp.test(currentLabel.get()) || props.created;
     };
     (0, signals_1.watch)(() => currentLabel.get(), () => {
-        if (!props.created && !select.props.remote)
+        console.warn('watch currentLabel ');
+        if (!props.created && !(0, signals_1.unref)(select.props.remote))
             select.setSelected();
     });
-    (0, signals_1.watch)(() => props.value, (val, oldVal) => {
+    (0, signals_1.watch)(() => (0, signals_1.unref)(props.value), (val, oldVal) => {
         if (!select)
             return;
-        const { remote, valueKey } = select === null || select === void 0 ? void 0 : select.props;
-        if (val !== oldVal) {
+        const { remote, valueKey } = select.props;
+        const shouldUpdate = remote ? val !== oldVal : !(0, lodash_1.isEqual)(val, oldVal);
+        if (shouldUpdate) {
             select.onOptionDestroy(oldVal, instance);
+            // console.warn('useOption then onOptionCreate instance ', instance);
             select.onOptionCreate(instance);
         }
-        if (!props.created && !remote) {
-            if (valueKey &&
+        if (!props.created && !(0, signals_1.unref)(remote)) {
+            if ((0, signals_1.unref)(valueKey) &&
                 (0, utils_1.isObject)(val) &&
                 (0, utils_1.isObject)(oldVal) &&
-                val[valueKey] === oldVal[valueKey]) {
+                val[(0, signals_1.unref)(valueKey)] === oldVal[(0, signals_1.unref)(valueKey)]) {
                 return;
             }
             select.setSelected();
         }
     });
-    (0, signals_1.watch)(() => selectGroup.disabled, () => {
-        states.groupDisabled = selectGroup.disabled;
+    (0, signals_1.watch)(() => (0, signals_1.unref)(selectGroup.disabled), () => {
+        states.groupDisabled = (0, signals_1.unref)(selectGroup.disabled);
     }, { immediate: true });
     return {
         select,

package/src/components/form/td-option-group/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-option-group.css';

package/src/components/form/td-option-group/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-option-group.css");

package/src/components/form/td-option-group/td-option-group.class.js

@@ -4,8 +4,8 @@ exports.TdOptionGroup = void 0;
 const framework_1 = require("@type-dom/framework");
 const utils_1 = require("@type-dom/utils");
 const signals_1 = require("@type-dom/signals");
-const token_1 = require("../td-select/token");
 const use_namespace_1 = require("../../../hooks/use-namespace");
+const token_1 = require("../td-select/token");
 class TdOptionGroup extends framework_1.TypeUL {
     constructor(params = {}) {
         super();
@@ -18,7 +18,7 @@ class TdOptionGroup extends framework_1.TypeUL {
     setup() {
         const props = this.props;
         const ns = (0, use_namespace_1.useNamespace)('select');
-        const groupRef = (0, signals_1.signal)(null);
+        const groupRef = (0, signals_1.signal)(undefined);
         const instance = (0, framework_1.getCurrentInstance)();
         const children = (0, signals_1.signal)([]);
         (0, framework_1.provide)(token_1.selectGroupKey, props);

package/src/components/form/td-radio/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-radio.css';

package/src/components/form/td-radio/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-radio.css");

package/src/components/form/td-radio/td-radio.class.js

@@ -4,6 +4,7 @@ exports.TdRadio = void 0;
 const framework_1 = require("@type-dom/framework");
 const signals_1 = require("@type-dom/signals");
 const use_namespace_1 = require("../../../hooks/use-namespace");
+const event_1 = require("../../../constants/event");
 const td_radio_const_1 = require("./td-radio.const");
 const use_radio_1 = require("./use-radio");
 require("./style/index");
@@ -24,10 +25,10 @@ class TdRadio extends framework_1.TypeLabel {
         const ns = (0, use_namespace_1.useNamespace)('radio');
         const { radioRef, radioGroup, focus, size, disabled, modelValue, actualValue, } = (0, use_radio_1.useRadio)(props, emit);
         function handleChange() {
-            console.warn('handleChange . modelValue.get() is ', modelValue.get());
+            // console.warn('handleChange . modelValue.get() is ', modelValue.get());
             modelValue.set(actualValue.get()); // add by me todo refine  value绑定的问题
             // todo 值没有变
-            (0, framework_1.nextTick)(() => emit('change', modelValue.get()));
+            (0, framework_1.nextTick)(() => emit(event_1.CHANGE_EVENT, modelValue.get()));
         }
         this.attr.addClass((0, signals_1.computed)(() => [
             ns.b(),
@@ -59,7 +60,7 @@ class TdRadio extends framework_1.TypeLabel {
                         focus: () => focus.set(true),
                         blur: () => focus.set(false),
                         change: (ev) => {
-                            console.warn('td-radio input change . ');
+                            // console.warn('td-radio input change . ');
                             handleChange();
                             ev === null || ev === void 0 ? void 0 : ev.stopPropagation(); // todo must add stopPropagation
                         },

package/src/components/form/td-radio/use-radio.d.ts

@@ -1,14 +1,14 @@
-import { AnyFn } from '@type-dom/framework';
+import { AnyFn } from '@type-dom/utils';
 import { RadioButtonProps } from '../td-radio-button/td-radio-button.interface';
 import { RadioProps } from './td-radio.interface';
 export declare const useRadio: (props: RadioProps | RadioButtonProps, emit?: AnyFn) => {
-    radioRef: import("@type-dom/signals").Signal<HTMLInputElement | undefined>;
+    radioRef: import("@type-dom/signals").Signal<HTMLInputElement>;
     isGroup: import("@type-dom/signals").Computed<boolean>;
     radioGroup: import("./constants").RadioGroupContext;
     focus: import("@type-dom/signals").Signal<boolean>;
     size: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
     disabled: import("@type-dom/signals").Computed<boolean>;
     tabIndex: import("@type-dom/signals").Computed<0 | -1>;
-    modelValue: import("@type-dom/signals").Computed<any>;
+    modelValue: import("@type-dom/signals").Computed<object | import("@type-dom/utils").IPrimitive>;
     actualValue: import("@type-dom/signals").Computed<string | number | boolean | undefined>;
 };

package/src/components/form/td-radio/use-radio.js

@@ -20,22 +20,19 @@ const useRadio = (props, emit) => {
         }
         return props.label;
     });
-    const modelValue = (0, signals_1.computed)({
-        get() {
-            var _a, _b;
-            console.error('get model value isGroup is  ', isGroup.get());
-            return isGroup.get() ? (_a = radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.vModel) === null || _a === void 0 ? void 0 : _a.get() : (_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get();
-        },
-        set(val) {
-            console.error('set model value is ', val);
-            if (isGroup.get()) {
-                radioGroup.changeEvent(val);
-            }
-            else {
-                emit && emit(event_1.UPDATE_MODEL_EVENT, val);
-            }
-            radioRef.get().checked = modelValue.get() === actualValue.get();
-        },
+    const modelValue = (0, signals_1.computed)(() => {
+        var _a, _b;
+        // console.error('get model value isGroup is  ', isGroup.get());
+        return isGroup.get() ? (_a = radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.vModel) === null || _a === void 0 ? void 0 : _a.get() : (_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get();
+    }, (val) => {
+        // console.error('set model value is ', val);
+        if (isGroup.get()) {
+            radioGroup.changeEvent(val);
+        }
+        else {
+            emit && emit(event_1.UPDATE_MODEL_EVENT, val);
+        }
+        radioRef.get().checked = modelValue.get() === actualValue.get();
     });
     const size = (0, use_form_common_props_1.useFormSize)((0, signals_1.computed)(() => radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.size));
     const disabled = (0, use_form_common_props_1.useFormDisabled)((0, signals_1.computed)(() => radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.disabled));

package/src/components/form/td-radio-button/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-radio-button.css';

package/src/components/form/td-radio-button/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-radio-button.css");

package/src/components/form/td-radio-button/td-radio-button.class.js

@@ -62,7 +62,7 @@ class TdRadioButton extends framework_1.TypeLabel {
         }));
         // add by me
         function handleChange() {
-            console.warn('handleChange . modelValue.get() is ', modelValue.get());
+            // console.warn('handleChange . modelValue.get() is ', modelValue.get());
             modelValue.set(actualValue.get()); // add by me todo refine  value绑定的问题
             // todo 值没有变
             (0, framework_1.nextTick)(() => emit('change', modelValue.get()));

package/src/components/form/td-radio-group/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-radio-group.css';

package/src/components/form/td-radio-group/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-radio-group.css");

package/src/components/form/td-radio-group/td-radio-group.class.js

@@ -18,9 +18,9 @@ class TdRadioGroup extends framework_1.TypeDiv {
         this.attr.addObj({
             name: 'td-radio-group',
         });
+        this.addEmits(td_radio_group_const_1.radioGroupEmits);
         this.assignProps(td_radio_group_const_1.radioGroupProps);
         this.props = this.useParams(params);
-        this.addEmits(td_radio_group_const_1.radioGroupEmits);
     }
     setup() {
         var _a;
@@ -28,6 +28,7 @@ class TdRadioGroup extends framework_1.TypeDiv {
         const emit = this.emit;
         const ns = (0, use_namespace_1.useNamespace)('radio');
         const radioId = (0, use_id_1.useId)();
+        // console.warn('radioId is ', radioId);
         const radioGroupRef = (0, signals_1.signal)();
         const { formItem } = (0, use_form_item_1.useFormItem)();
         const { inputId: groupId, isLabeledByFormItem } = (0, use_form_item_1.useFormItemInputId)(props, {
@@ -35,12 +36,11 @@ class TdRadioGroup extends framework_1.TypeDiv {
         });
         const changeEvent = (value) => {
             emit(event_1.UPDATE_MODEL_EVENT, value);
-            (0, framework_1.nextTick)(() => emit('change', value));
+            (0, framework_1.nextTick)(() => emit(event_1.CHANGE_EVENT, value));
         };
         (0, framework_1.onMounted)(() => {
             var _a;
-            const radios = (_a = radioGroupRef
-                .get()) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[type=radio]');
+            const radios = (_a = radioGroupRef.get()) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[type=radio]');
             const firstLabel = radios === null || radios === void 0 ? void 0 : radios[0];
             if (radios &&
                 !Array.from(radios).some((radio) => radio.checked) &&
@@ -58,10 +58,10 @@ class TdRadioGroup extends framework_1.TypeDiv {
             }
         });
         this.assignProps({
-            id: groupId,
             refDom: radioGroupRef,
         });
         this.attr.addObj({
+            id: groupId,
             class: ns.b('group'),
             role: 'radiogroup',
             ariaLabel: !isLabeledByFormItem.get()

package/src/components/form/td-rate/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-rate.css';

package/src/components/form/td-rate/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-rate.css");

package/src/components/form/td-rate/td-rate.class.js

@@ -61,13 +61,12 @@ class TdRate extends framework_1.TypeDiv {
             });
         });
         const text = (0, signals_1.computed)(() => {
-            var _a, _b;
             let result = '';
             if (props.showScore) {
-                result = (_a = props.scoreTemplate) === null || _a === void 0 ? void 0 : _a.replace(/\{\s*value\s*\}/, rateDisabled.get() ? `${props.modelValue}` : `${currentValue.get()}`);
+                result = props.scoreTemplate.replace(/\{\s*value\s*\}/, rateDisabled.get() ? `${props.modelValue}` : `${currentValue.get()}`);
             }
             else if (props.showText) {
-                result = (_b = props.texts) === null || _b === void 0 ? void 0 : _b[Math.ceil(currentValue.get()) - 1];
+                result = props.texts[Math.ceil(currentValue.get()) - 1];
             }
             return result;
         });
@@ -83,7 +82,7 @@ class TdRate extends framework_1.TypeDiv {
                 : colors;
         });
         const activeColor = (0, signals_1.computed)(() => {
-            console.warn('colorMap is ', colorMap);
+            // console.warn('colorMap is ', colorMap);
             const color = getValueFromMap(currentValue.get(), colorMap.get());
             // {value: '', excluded: true} returned
             return (0, utils_1.isObject)(color) ? '' : color;
@@ -102,8 +101,8 @@ class TdRate extends framework_1.TypeDiv {
             };
         });
         const componentMap = (0, signals_1.computed)(() => {
-            console.warn('componentMap is ');
-            let icons = (0, utils_1.isArray)(props.icons) ? [...props.icons] : Object.assign({}, props.icons);
+            // console.warn('componentMap is ');
+            const icons = (0, utils_1.isArray)(props.icons) ? [...props.icons] : Object.assign({}, props.icons);
             // icons = markRaw(icons) as
             //   | Array<string | typeof TypeSvgSvg>
             //   | Record<number, string | typeof TypeSvgSvg>
@@ -119,7 +118,7 @@ class TdRate extends framework_1.TypeDiv {
                 : icons;
         });
         const decimalIconComponent = (0, signals_1.computed)(() => {
-            console.warn('decimalIconComponent is ', componentMap);
+            // console.warn('decimalIconComponent is ', componentMap);
             return getValueFromMap(props.modelValue, componentMap.get());
         });
         const voidComponent = (0, signals_1.computed)(() => rateDisabled.get()
@@ -154,7 +153,7 @@ class TdRate extends framework_1.TypeDiv {
             }
             emit(event_1.UPDATE_MODEL_EVENT, value);
             if (props.modelValue !== value) {
-                emit('change', value);
+                emit(event_1.CHANGE_EVENT, value);
             }
         }
         function selectValue(value) {
@@ -197,7 +196,7 @@ class TdRate extends framework_1.TypeDiv {
             _currentValue = _currentValue < 0 ? 0 : _currentValue;
             _currentValue = _currentValue > props.max ? props.max : _currentValue;
             emit(event_1.UPDATE_MODEL_EVENT, _currentValue);
-            emit('change', _currentValue);
+            emit(event_1.CHANGE_EVENT, _currentValue);
             return _currentValue;
         }
         function setCurrentValue(value, event) {
@@ -231,7 +230,7 @@ class TdRate extends framework_1.TypeDiv {
             currentValue.set(props.modelValue);
             hoverIndex.set(-1);
         }
-        (0, signals_1.watch)(props.vModel, (val) => {
+        (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, (val) => {
             currentValue.set(val);
             pointerAtLeftHalf.set(props.modelValue !== Math.floor(props.modelValue));
         });

package/src/components/form/td-rate/td-rate.interface.d.ts

@@ -1,6 +1,6 @@
 import { ITypeDiv, TypeDivProps, TypeSvgSvg } from '@type-dom/framework';
 import { ComponentSize } from '../../../constants/size';
-import { MaybeRef } from '@type-dom/signals';
+import { MaybeRef, Ref } from '@type-dom/signals';
 export interface ITdRate extends ITypeDiv {
     className: 'TdRate';
 }
@@ -10,6 +10,7 @@ export interface RateProps extends TypeDivProps {
      *     default: 0,
      */
     modelValue?: number;
+    vModel?: Ref<number>;
     /**
      * @description native `id` attribute
      */

package/src/components/form/td-select/style/css.d.ts

@@ -1,7 +1,7 @@
-import '@element-plus/components/base/style/css';
-import '@element-plus/components/tag/style/css';
-import '@element-plus/components/option/style/css';
-import '@element-plus/components/option-group/style/css';
-import '@element-plus/components/scrollbar/style/css';
-import '@element-plus/components/popper/style/css';
-import '@element-plus/theme-chalk/el-select.css';
+import '../../../base/style/css';
+import '../../../data/td-tag/style/css';
+import '../../../form/td-option/style/css';
+import '../../../form/td-option-group/style/css';
+import '../../../basic/td-scrollbar/style/css';
+import '../../../feedback/td-popper/style/css';
+import '@type-dom/theme-chalk/el-select.css';

package/src/components/form/td-select/style/css.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
-require("@element-plus/components/tag/style/css");
-require("@element-plus/components/option/style/css");
-require("@element-plus/components/option-group/style/css");
-require("@element-plus/components/scrollbar/style/css");
-require("@element-plus/components/popper/style/css");
-require("@element-plus/theme-chalk/el-select.css");
+require("../../../base/style/css");
+require("../../../data/td-tag/style/css");
+require("../../../form/td-option/style/css");
+require("../../../form/td-option-group/style/css");
+require("../../../basic/td-scrollbar/style/css");
+require("../../../feedback/td-popper/style/css");
+require("@type-dom/theme-chalk/el-select.css");

package/src/components/form/td-select/td-options/td-options.class.d.ts

@@ -0,0 +1,6 @@
+import { TypeFragment, TypeProps } from '@type-dom/framework';
+export declare class TdOptions extends TypeFragment {
+    className: 'TdOptions';
+    constructor(params: TypeProps);
+    setup(): void;
+}

package/src/components/form/td-select/td-options/td-options.class.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdOptions = void 0;
+const framework_1 = require("@type-dom/framework");
+const lodash_1 = require("lodash");
+const utils_1 = require("@type-dom/utils");
+const token_1 = require("../token");
+class TdOptions extends framework_1.TypeFragment {
+    constructor(params) {
+        super();
+        this.className = 'TdOptions';
+        this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c;
+        const props = this.props;
+        const select = (0, framework_1.inject)(token_1.selectKey);
+        let cachedValueList = [];
+        this.slotChildren((_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.default) !== null && _b !== void 0 ? _b : props.slot);
+        const children = this.children;
+        const valueList = [];
+        function filterOptions(children) {
+            if (!(0, utils_1.isArray)(children))
+                return;
+            children.forEach((item) => {
+                const name = item.className;
+                if (name === 'TdOptionGroup') {
+                    filterOptions(item.children);
+                }
+                else if (name === 'TdOption') {
+                    valueList.push(item.props);
+                }
+                else if ((0, utils_1.isArray)(item.children)) {
+                    filterOptions(item.children);
+                }
+            });
+        }
+        if (children.length) {
+            filterOptions((_c = children[0]) === null || _c === void 0 ? void 0 : _c.children);
+        }
+        if (!(0, lodash_1.isEqual)(valueList, cachedValueList)) {
+            cachedValueList = valueList;
+            if (select) {
+                select.states.optionValues = valueList;
+            }
+        }
+    }
+}
+exports.TdOptions = TdOptions;

package/src/components/form/td-select/td-select-dropdown/td-select-dropdown.class.js

@@ -13,14 +13,14 @@ class TdSelectDropDown extends framework_1.TypeDiv {
     }
     setup() {
         var _a, _b, _c, _d, _e, _f;
-        console.log('TdSelectDropDown setup');
+        // console.log('TdSelectDropDown setup');
         const props = this.props;
         const select = (0, framework_1.inject)(token_1.selectKey);
         const ns = (0, use_namespace_1.useNamespace)('select');
         // computed
-        const popperClass = (0, signals_1.computed)(() => select.props.popperClass);
-        const isMultiple = (0, signals_1.computed)(() => select.props.multiple);
-        const isFitInputWidth = (0, signals_1.computed)(() => select.props.fitInputWidth);
+        const popperClass = (0, signals_1.computed)(() => (0, signals_1.unref)(select.props.popperClass));
+        const isMultiple = (0, signals_1.computed)(() => (0, signals_1.unref)(select.props.multiple));
+        const isFitInputWidth = (0, signals_1.computed)(() => (0, signals_1.unref)(select.props.fitInputWidth));
         const minWidth = (0, signals_1.signal)('');
         function updateMinWidth() {
             var _a, _b;

package/src/components/form/td-select/td-select.class.d.ts

@@ -4,6 +4,7 @@ import './style';
 export declare class TdSelect extends TypeDiv implements ITdSelect {
     className: 'TdSelect';
     props: TdSelectProps;
+    private selectedLabel?;
     constructor(params?: TdSelectProps);
     setup(): void;
 }