@type-dom/ui 0.1.1 → 0.1.3

package/src/components/form/td-input-number/td-input-number.class.js

@@ -1 +1,391 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdInputNumber = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const svgs_1 = require("@type-dom/svgs");
+const event_1 = require("../../../constants/event");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_locale_1 = require("../../../hooks/use-locale");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_input_class_1 = require("../td-input/td-input.class");
+const use_form_common_props_1 = require("../td-form/hooks/use-form-common-props");
+const use_form_item_1 = require("../td-form/hooks/use-form-item");
+const td_input_number_const_1 = require("./td-input-number.const");
+require("./style/index");
+class TdInputNumber extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdInputNumber';
+        this.attr.addName('td-input-number');
+        this.addEmits(td_input_number_const_1.inputNumberEmits);
+        this.assignProps(td_input_number_const_1.inputNumberProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d, _e, _f;
+        const props = this.props;
+        const emit = this.emit;
+        const { t } = (0, use_locale_1.useLocale)();
+        const ns = (0, use_namespace_1.useNamespace)('input-number');
+        const input = (0, signals_1.signal)();
+        const data = {
+            curValue: props.vModel,
+            userInput: (0, signals_1.signal)(null),
+        };
+        const { formItem } = (0, use_form_item_1.useFormItem)();
+        const minDisabled = (0, signals_1.computed)(() => { var _a, _b; return (0, utils_1.isNumber)((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get()) && ((_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get()) <= props.min; });
+        const maxDisabled = (0, signals_1.computed)(() => { var _a, _b; return (0, utils_1.isNumber)((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get()) && ((_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get()) >= props.max; });
+        const numPrecision = (0, signals_1.computed)(() => {
+            var _a;
+            const stepPrecision = getPrecision(props.step);
+            if (!(0, utils_1.isUndefined)(props.precision)) {
+                if (stepPrecision > props.precision) {
+                    (0, utils_1.debugWarn)('InputNumber', 'precision should not be less than the decimal places of step');
+                }
+                return props.precision;
+            }
+            else {
+                return Math.max(getPrecision((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get()), stepPrecision);
+            }
+        });
+        const controlsAtRight = (0, signals_1.computed)(() => {
+            return props.controls && props.controlsPosition === 'right';
+        });
+        const inputNumberSize = (0, use_form_common_props_1.useFormSize)();
+        const inputNumberDisabled = (0, use_form_common_props_1.useFormDisabled)();
+        const displayValue = (0, signals_1.computed)(() => {
+            var _a;
+            // console.warn('displayValue  . ');
+            if (data.userInput.get() !== null) {
+                return data.userInput.get();
+            }
+            let currentValue = (_a = data.curValue) === null || _a === void 0 ? void 0 : _a.get();
+            if ((0, utils_1.isNil)(currentValue))
+                return '';
+            if ((0, utils_1.isNumber)(currentValue)) {
+                if (Number.isNaN(currentValue))
+                    return '';
+                if (!(0, utils_1.isUndefined)(props.precision)) {
+                    currentValue = currentValue.toFixed(props.precision);
+                }
+            }
+            return currentValue;
+        });
+        const toPrecision = (num, pre) => {
+            if ((0, utils_1.isUndefined)(pre))
+                pre = numPrecision.get();
+            if (pre === 0)
+                return Math.round(num);
+            let snum = String(num);
+            const pointPos = snum.indexOf('.');
+            if (pointPos === -1)
+                return num;
+            const nums = snum.replace('.', '').split('');
+            const datum = nums[pointPos + pre];
+            if (!datum)
+                return num;
+            const length = snum.length;
+            if (snum.charAt(length - 1) === '5') {
+                snum = `${snum.slice(0, Math.max(0, length - 1))}6`;
+            }
+            return Number.parseFloat(Number(snum).toFixed(pre));
+        };
+        const getPrecision = (value) => {
+            if ((0, utils_1.isNil)(value))
+                return 0;
+            const valueString = value.toString();
+            const dotPosition = valueString.indexOf('.');
+            let precision = 0;
+            if (dotPosition !== -1) {
+                precision = valueString.length - dotPosition - 1;
+            }
+            return precision;
+        };
+        const ensurePrecision = (val, coefficient = 1) => {
+            var _a;
+            if (!(0, utils_1.isNumber)(val))
+                return (_a = data.curValue) === null || _a === void 0 ? void 0 : _a.get();
+            // Solve the accuracy problem of JS decimal calculation by converting the value to integer.
+            return toPrecision(val + props.step * coefficient);
+        };
+        const increase = () => {
+            var _a;
+            // console.warn('increase  . ');
+            if (props.readonly || inputNumberDisabled.get() || maxDisabled.get())
+                return;
+            const value = Number(displayValue.get()) || 0;
+            const newVal = ensurePrecision(value);
+            setCurrentValue(newVal);
+            emit(event_1.INPUT_EVENT, (_a = data.curValue) === null || _a === void 0 ? void 0 : _a.get());
+            setCurrentValueToModelValue();
+        };
+        const decrease = () => {
+            var _a;
+            // console.warn('decrease  . ');
+            if (props.readonly || inputNumberDisabled.get() || minDisabled.get())
+                return;
+            const value = Number(displayValue.get()) || 0;
+            const newVal = ensurePrecision(value, -1);
+            setCurrentValue(newVal);
+            emit(event_1.INPUT_EVENT, (_a = data.curValue) === null || _a === void 0 ? void 0 : _a.get());
+            setCurrentValueToModelValue();
+        };
+        const verifyValue = (value, update) => {
+            const { max, min, step, precision, stepStrictly, valueOnClear } = props;
+            if (max < min) {
+                (0, utils_1.throwError)('InputNumber', 'min should not be greater than max.');
+            }
+            let newVal = Number(value);
+            if ((0, utils_1.isNil)(value) || Number.isNaN(newVal)) {
+                return null;
+            }
+            if (value === '') {
+                if (valueOnClear === null) {
+                    return null;
+                }
+                newVal = (0, utils_1.isString)(valueOnClear) ? { min, max }[valueOnClear] : valueOnClear;
+            }
+            if (stepStrictly) {
+                newVal = toPrecision(Math.round(newVal / step) * step, precision);
+                if (newVal !== value) {
+                    update && emit(event_1.UPDATE_MODEL_EVENT, newVal);
+                }
+            }
+            if (!(0, utils_1.isUndefined)(precision)) {
+                newVal = toPrecision(newVal, precision);
+            }
+            if (newVal > max || newVal < min) {
+                newVal = newVal > max ? max : min;
+                update && emit(event_1.UPDATE_MODEL_EVENT, newVal);
+            }
+            return newVal;
+        };
+        const setCurrentValue = (value, emitChange = true) => {
+            var _a, _b, _c;
+            // console.warn('setCurrentValue  . ');
+            // console.warn('setCurrentValue value is ', value);
+            const oldVal = (_a = data.curValue) === null || _a === void 0 ? void 0 : _a.get();
+            const newVal = verifyValue(value);
+            if (!emitChange) {
+                emit(event_1.UPDATE_MODEL_EVENT, newVal);
+                return;
+            }
+            if (oldVal === newVal && value)
+                return;
+            data.userInput.set(null);
+            emit(event_1.UPDATE_MODEL_EVENT, newVal);
+            if (oldVal !== newVal) {
+                // console.warn('newVal is ', newVal);
+                emit(event_1.CHANGE_EVENT, newVal, oldVal);
+            }
+            if (props.validateEvent) {
+                (_b = formItem === null || formItem === void 0 ? void 0 : formItem.validate) === null || _b === void 0 ? void 0 : _b.call(formItem, 'change').catch((err) => (0, utils_1.debugWarn)(err));
+            }
+            // console.warn('newVal is ', newVal);
+            (_c = data.curValue) === null || _c === void 0 ? void 0 : _c.set(newVal);
+        };
+        const handleInput = (value) => {
+            // todo 会触发两次，一次是数值，一次是event，第二次导致错误
+            // console.error('handleInput  . value is ', value);
+            if (!(0, utils_1.isNumber)(value))
+                return; // add by me
+            data.userInput.set(value);
+            const newVal = value === '' ? null : Number(value);
+            emit(event_1.INPUT_EVENT, newVal);
+            setCurrentValue(newVal, false);
+        };
+        const handleInputChange = (value) => {
+            // console.warn('handleInputChange  . value is ', value)
+            const newVal = value !== '' ? Number(value) : '';
+            if (((0, utils_1.isNumber)(newVal) && !Number.isNaN(newVal)) || value === '') {
+                setCurrentValue(newVal);
+            }
+            setCurrentValueToModelValue();
+            data.userInput.set(newVal);
+        };
+        const focus = () => {
+            var _a, _b;
+            (_b = (_a = input.get()) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        const blur = () => {
+            var _a, _b;
+            (_b = (_a = input.get()) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        const handleFocus = (event) => {
+            emit('focus', event);
+        };
+        const handleBlur = (event) => {
+            var _a, _b, _c;
+            data.userInput.set(null);
+            // This is a Firefox-specific problem. When non-numeric content is entered into a numeric input box,
+            // the content displayed on the page is not cleared after the value is cleared. #18533
+            // https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
+            if ((0, utils_1.isFirefox)() && ((_a = data.curValue) === null || _a === void 0 ? void 0 : _a.get()) === null && ((_b = input.get()) === null || _b === void 0 ? void 0 : _b.input)) {
+                input.get().input.get().value = ''; // todo
+                // input.value.input.value = ''
+            }
+            emit('blur', event);
+            if (props.validateEvent) {
+                (_c = formItem === null || formItem === void 0 ? void 0 : formItem.validate) === null || _c === void 0 ? void 0 : _c.call(formItem, 'blur').catch((err) => (0, utils_1.debugWarn)(err));
+            }
+        };
+        const setCurrentValueToModelValue = () => {
+            var _a, _b, _c, _d;
+            if (((_a = data.curValue) === null || _a === void 0 ? void 0 : _a.get()) !== ((_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get())) {
+                // console.warn('props.vModel?.get() is ', props.vModel?.get())
+                (_c = data.curValue) === null || _c === void 0 ? void 0 : _c.set((_d = props.vModel) === null || _d === void 0 ? void 0 : _d.get());
+            }
+        };
+        const handleWheel = (e) => {
+            if (document.activeElement === e.target)
+                e.preventDefault();
+        };
+        (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, (value, oldValue) => {
+            var _a;
+            const newValue = verifyValue(value, true);
+            // console.warn('newValue is ', newValue);
+            if (data.userInput.get() === null && newValue !== oldValue) {
+                (_a = data.curValue) === null || _a === void 0 ? void 0 : _a.set(newValue);
+            }
+        }, { immediate: true });
+        (0, framework_1.onMounted)(() => {
+            var _a, _b, _c, _d, _e;
+            const { min, max, vModel: modelValue } = props;
+            const innerInput = (_b = (_a = input.get()) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.get();
+            innerInput.setAttribute('role', 'spinbutton');
+            if (Number.isFinite(max)) {
+                innerInput.setAttribute('aria-valuemax', String(max));
+            }
+            else {
+                innerInput.removeAttribute('aria-valuemax');
+            }
+            if (Number.isFinite(min)) {
+                innerInput.setAttribute('aria-valuemin', String(min));
+            }
+            else {
+                innerInput.removeAttribute('aria-valuemin');
+            }
+            innerInput.setAttribute('aria-valuenow', ((_c = data.curValue) === null || _c === void 0 ? void 0 : _c.get()) || ((_d = data.curValue) === null || _d === void 0 ? void 0 : _d.get()) === 0
+                ? String((_e = data.curValue) === null || _e === void 0 ? void 0 : _e.get())
+                : '');
+            innerInput.setAttribute('aria-disabled', String(inputNumberDisabled.get()));
+            if (!(0, utils_1.isNumber)(modelValue === null || modelValue === void 0 ? void 0 : modelValue.get()) && (modelValue === null || modelValue === void 0 ? void 0 : modelValue.get()) != null) {
+                let val = Number(modelValue.get());
+                if (Number.isNaN(val)) {
+                    val = null;
+                }
+                // console.warn('val is ', val);
+                emit(event_1.UPDATE_MODEL_EVENT, val);
+            }
+            innerInput.addEventListener('wheel', handleWheel, { passive: false });
+        });
+        (0, framework_1.onUpdated)(() => {
+            var _a, _b, _c, _d;
+            const innerInput = (_b = (_a = input.get()) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.get();
+            innerInput === null || innerInput === void 0 ? void 0 : innerInput.setAttribute('aria-valuenow', `${(_d = (_c = data.curValue) === null || _c === void 0 ? void 0 : _c.get()) !== null && _d !== void 0 ? _d : ''}`);
+        });
+        (0, framework_1.defineExpose)({
+            /** @description get focus the input component */
+            focus,
+            /** @description remove focus the input component */
+            blur,
+        });
+        this.attr.addClass([
+            ns.b(),
+            ns.m(inputNumberSize.get()),
+            ns.is('disabled', inputNumberDisabled.get()),
+            ns.is('without-controls', !props.controls),
+            ns.is('controls-right', controlsAtRight.get()),
+        ]);
+        this.addEvents({
+            dragstart: (evt) => evt === null || evt === void 0 ? void 0 : evt.preventDefault(),
+        });
+        this.slotChildren([
+            new framework_1.Span({
+                vIf: props.controls,
+                // v-repeat-click="decrease"
+                class: (0, signals_1.computed)(() => [ns.e('decrease'), ns.is('disabled', minDisabled.get())]),
+                attrObj: {
+                    role: 'button',
+                    ariaLabel: t('el.inputNumber.decrease'),
+                },
+                events: {
+                    keydown: (evt) => {
+                        if ((evt === null || evt === void 0 ? void 0 : evt.code) === 'Enter') {
+                            decrease();
+                        }
+                    },
+                    click: decrease,
+                },
+                slot: (_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.decreaseIcon) !== null && _b !== void 0 ? _b : new td_icon_class_1.TdIcon({
+                    slot: controlsAtRight.get()
+                        ? new svgs_1.ElArrowDownSvg()
+                        : new svgs_1.ElMinusSvg(),
+                }),
+            }),
+            new framework_1.Span({
+                vIf: props.controls,
+                // v-repeat-click="increase"
+                class: (0, signals_1.computed)(() => [ns.e('increase'), ns.is('disabled', maxDisabled.get())]),
+                attrObj: {
+                    role: 'button',
+                    ariaLabel: t('el.inputNumber.increase'),
+                },
+                events: {
+                    keydown: (evt) => {
+                        if ((evt === null || evt === void 0 ? void 0 : evt.code) === 'Enter') {
+                            increase();
+                        }
+                    },
+                    click: increase,
+                },
+                slot: (_d = (_c = props.slots) === null || _c === void 0 ? void 0 : _c.increaseIcon) !== null && _d !== void 0 ? _d : new td_icon_class_1.TdIcon({
+                    slot: controlsAtRight.get() ? new svgs_1.ElArrowUpSvg() : new svgs_1.ElPlusSvg(),
+                }),
+            }),
+            new td_input_class_1.TdInput({
+                refEl: input,
+                size: inputNumberSize.get(),
+                name: props.name,
+                // modelValue: displayValue.get(),
+                vModel: displayValue,
+                placeholder: props.placeholder,
+                readonly: props.readonly,
+                disabled: inputNumberDisabled,
+                type: 'number',
+                validateEvent: false,
+                attrObj: {
+                    id: props.id,
+                    step: props.step,
+                    max: props.max,
+                    min: props.min,
+                    ariaLabel: props.ariaLabel,
+                },
+                emits: {
+                    keydown: (evt) => {
+                        // console.warn('evt?.key is ', evt?.key)
+                        if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Up') {
+                            increase();
+                            evt.preventDefault();
+                        }
+                        if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Down') {
+                            decrease();
+                            evt.preventDefault();
+                        }
+                    },
+                    blur: handleBlur,
+                    focus: handleFocus,
+                    input: handleInput,
+                    change: handleInputChange
+                },
+                slots: {
+                    prefix: (_e = props.slots) === null || _e === void 0 ? void 0 : _e.prefix,
+                    suffix: (_f = props.slots) === null || _f === void 0 ? void 0 : _f.suffix,
+                }
+            }),
+        ]);
+    }
+}
+exports.TdInputNumber = TdInputNumber;

package/src/components/form/td-input-number/td-input-number.const.d.ts

@@ -0,0 +1,9 @@
+import { InputNumberProps } from './td-input-number.interface';
+export declare const inputNumberProps: InputNumberProps;
+export declare const inputNumberEmits: {
+    change: (cur: number | undefined, prev: number | undefined) => boolean;
+    blur: (e: FocusEvent) => boolean;
+    focus: (e: FocusEvent) => boolean;
+    input: (val: number | null | undefined) => boolean;
+    "update:modelValue": (val: number | undefined) => boolean;
+};

package/src/components/form/td-input-number/td-input-number.const.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputNumberEmits = exports.inputNumberProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+exports.inputNumberProps = {
+    step: 1,
+    max: Number.POSITIVE_INFINITY,
+    min: Number.NEGATIVE_INFINITY,
+    controls: true,
+    controlsPosition: '',
+    valueOnClear: null,
+    validateEvent: true,
+    // ...useAriaProps(['ariaLabel']),
+};
+exports.inputNumberEmits = {
+    [event_1.CHANGE_EVENT]: (cur, prev) => prev !== cur,
+    blur: (e) => e instanceof FocusEvent,
+    focus: (e) => e instanceof FocusEvent,
+    [event_1.INPUT_EVENT]: (val) => (0, utils_1.isNumber)(val) || (0, utils_1.isNil)(val),
+    [event_1.UPDATE_MODEL_EVENT]: (val) => (0, utils_1.isNumber)(val) || (0, utils_1.isNil)(val),
+};

package/src/components/form/td-input-number/td-input-number.interface.d.ts

@@ -0,0 +1,73 @@
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+import { ComponentSize } from '../../../constants/size';
+import { Signal } from '@type-dom/signals';
+export interface ITdInputNumber extends ITypeDiv {
+    className: 'TdInputNumber';
+}
+export interface InputNumberProps extends TypeDivProps {
+    /**
+     * @description same as `id` in native input
+     */
+    id?: string;
+    /**
+     * @description incremental step
+     */
+    step?: number;
+    /**
+     * @description whether input value can only be multiple of step
+     */
+    stepStrictly?: boolean;
+    /**
+     * @description the maximum allowed value
+     */
+    max?: number;
+    /**
+     * @description the minimum allowed value
+     */
+    min?: number;
+    /**
+     * @description binding value
+     */
+    modelValue?: number;
+    vModel?: Signal<number>;
+    /**
+     * @description same as `readonly` in native input
+     */
+    readonly?: boolean;
+    /**
+     * @description whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description size of the component
+     */
+    size?: ComponentSize;
+    /**
+     * @description whether to enable the control buttons
+     */
+    controls?: boolean;
+    /**
+     * @description position of the control buttons
+     */
+    controlsPosition?: string;
+    /**
+     * @description value should be set when input box is cleared
+     */
+    valueOnClear?: string | number | null;
+    /**
+     * @description same as `name` in native input
+     */
+    name?: string;
+    /**
+     * @description same as `placeholder` in native input
+     */
+    placeholder?: string;
+    /**
+     * @description precision of input value
+     */
+    precision?: number;
+    /**
+     * @description whether to trigger form validation
+     */
+    validateEvent?: boolean;
+}

package/src/components/form/td-input-number/td-input-number.interface.js

@@ -1 +1,2 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/form/td-option/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.css';

package/src/components/form/td-option/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.css");

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

@@ -1,11 +1,20 @@
 import { TypeLI } from '@type-dom/framework';
-import { Signal } from '@type-dom/signals';
-import { ITdOption, TdOptionProps } from './td-option.interface';
+import { Computed, Signal } from '@type-dom/signals';
+import { SelectContext } from '../td-select/td-select.interface';
+import { ITdOption, OptionStates, TdOptionProps } from './td-option.interface';
 import './style/index';
 export declare class TdOption extends TypeLI implements ITdOption {
     className: 'TdOption';
     props: TdOptionProps;
-    visible?: Signal<boolean>;
+    value?: string;
+    currentLabel?: Computed<string | number | boolean | undefined>;
+    isDisabled?: Computed<boolean>;
+    select?: SelectContext;
+    updateOption?: (query: string) => void;
+    visible?: Signal<boolean | undefined>;
+    hover?: Signal<boolean>;
+    selectOptionClick?: () => void;
+    states?: OptionStates;
     constructor(params?: TdOptionProps);
     setup(): void;
 }

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

@@ -15,10 +15,11 @@ class TdOption extends framework_1.TypeLI {
             name: 'td-option',
             role: 'option',
         });
+        this.value = '';
         this.props = this.useParams(params);
     }
     setup() {
-        var _a;
+        var _a, _b, _c;
         const props = this.props;
         const ns = (0, use_namespace_1.useNamespace)('select');
         const id = (0, use_id_1.useId)();
@@ -36,28 +37,39 @@ class TdOption extends framework_1.TypeLI {
         };
         const { currentLabel, itemSelected, isDisabled, select, hoverItem, updateOption, } = (0, useOption_1.useOption)(props, states);
         const { visible, hover } = (0, signals_1.toSignals)(states);
-        // todo
-        // const vm = getCurrentInstance().proxy as unknown as SelectOptionProxy
-        // select.onOptionCreate(vm);
+        // todo  vm is this
+        const vm = (0, framework_1.getCurrentInstance)(); //.proxy as unknown as SelectOptionProxy
+        // console.warn('td-option then onOptionCreate vm ', vm);
+        select.onOptionCreate(this);
         (0, framework_1.onBeforeUnmount)(() => {
-            // const key = vm.value
-            // const { selected: selectedOptions } = select.states
-            // const doesSelected = selectedOptions.some((item) => {
-            //   return item.value === vm.value
-            // })
-            // // if option is not selected, remove it from cache
-            // nextTick(() => {
-            //   if (select.states.cachedOptions.get(key) === vm && !doesSelected) {
-            //     select.states.cachedOptions.delete(key)
-            //   }
-            // })
-            // select.onOptionDestroy(key, vm)
+            const key = (0, signals_1.unref)(props.value);
+            const { selected: selectedOptions } = select.states;
+            const doesSelected = selectedOptions.some((item) => {
+                return item.value === (0, signals_1.unref)(props.value);
+            });
+            // if option is not selected, remove it from cache
+            (0, framework_1.nextTick)(() => {
+                if (select.states.cachedOptions.get(key) === this && !doesSelected) {
+                    select.states.cachedOptions.delete(key);
+                }
+            });
+            select.onOptionDestroy(key, this);
         });
         function selectOptionClick() {
             if (!isDisabled.get()) {
-                // select.handleOptionSelect(vm)
+                select.handleOptionSelect(vm);
             }
         }
+        (0, framework_1.defineExpose)({
+            visible,
+            hover,
+            states,
+            isDisabled,
+            select,
+            hoverItem,
+            updateOption,
+            selectOptionClick,
+        });
         this.assignProps({
             vShow: visible,
         });
@@ -71,22 +83,14 @@ class TdOption extends framework_1.TypeLI {
         this.addEvents({
             mousemove: hoverItem,
             click: (evt) => {
-                selectOptionClick(), evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                console.warn('td-option click . ');
+                selectOptionClick();
+                evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
             },
         });
-        this.slotChildren(props.slot ||
-            ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default) ||
-            new framework_1.Span({
-                slot: currentLabel,
-            }));
-        (0, framework_1.defineExpose)({
-            visible,
-            hover,
-            selectOptionClick,
-            states,
-            isDisabled,
-            select,
-        });
+        this.slotChildren((_c = (_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default) !== null && _c !== void 0 ? _c : new framework_1.Span({
+            slot: currentLabel,
+        }));
     }
 }
 exports.TdOption = TdOption;

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

@@ -0,0 +1 @@
+export declare const COMPONENT_NAME = "TdOption";

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

@@ -1,7 +1,10 @@
 "use strict";
 // import { ITdOption } from './td-option.interface';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COMPONENT_NAME = void 0;
 // export const   tdOptionProps: ITdOption = {
 //   /**
 //    * @description value of option
 //    */
 // }
+exports.COMPONENT_NAME = 'TdOption';

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

@@ -1,4 +1,5 @@
 import { ITypeLI, TypeLIProps } from '@type-dom/framework';
+import { Computed } from '@type-dom/signals';
 export interface ITdOption extends ITypeLI {
     className: 'TdOption';
 }
@@ -18,3 +19,15 @@ export interface TdOptionProps extends TypeLIProps {
      */
     disabled?: boolean;
 }
+export interface OptionStates {
+    index: number;
+    groupDisabled?: boolean;
+    visible?: boolean;
+    hover: boolean;
+}
+export type OptionValue = TdOptionProps['value'];
+export type OptionBasic = {
+    value: OptionValue;
+    currentLabel?: Computed<string | number | boolean | undefined>;
+    isDisabled?: Computed<boolean>;
+};