@type-dom/ui 0.0.10 → 0.1.1

package/src/components/form/td-checkbox/composables/use-checkbox-model.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCheckboxModel = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../../constants/event");
+const td_checkbox_const_1 = require("../td-checkbox.const");
+const useCheckboxModel = (props) => {
+    const selfModel = (0, signals_1.signal)(false);
+    const { emit } = (0, framework_1.getCurrentInstance)();
+    const checkboxGroup = (0, framework_1.inject)(td_checkbox_const_1.checkboxGroupContextKey, undefined);
+    console.log('inject checkGroup is ', checkboxGroup);
+    const isGroup = (0, signals_1.computed)(() => (0, utils_1.isUndefined)(checkboxGroup) === false);
+    const isLimitExceeded = (0, signals_1.signal)(false);
+    const model = (0, signals_1.computed)({
+        get() {
+            var _a, _b, _c;
+            console.log('get model value isGroup is  ', isGroup.get());
+            return isGroup.get()
+                ? (_a = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.modelValue) === null || _a === void 0 ? void 0 : _a.get()
+                : // 这里的computed监听props.modelValue，与vuejs中的监听props.modelValue是不同的，
+                    // 因为vuejs中的监听props.modelValue，当props.modelValue变化时就会促发。
+                    // 而这里的computed监听，只有Signal类型的get/set才会触发
+                    //   所以这里还是用 vModel.get的方式。
+                    (_c = (_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get()) !== null && _c !== void 0 ? _c : selfModel.get(); // : props.modelValue ?? selfModel.get();
+        },
+        set(val) {
+            var _a, _b;
+            console.log('set model value is ', val);
+            if (isGroup.get() && (0, utils_1.isArray)(val)) {
+                isLimitExceeded.set(((_a = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.max) === null || _a === void 0 ? void 0 : _a.get()) !== undefined &&
+                    val.length > checkboxGroup.max.get() &&
+                    val.length > model.get().length);
+                isLimitExceeded.get() === false && ((_b = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.changeEvent) === null || _b === void 0 ? void 0 : _b.call(checkboxGroup, val));
+            }
+            else {
+                emit(event_1.UPDATE_MODEL_EVENT, val);
+                selfModel.set(val);
+            }
+        },
+    });
+    return {
+        model,
+        isGroup,
+        isLimitExceeded,
+    };
+};
+exports.useCheckboxModel = useCheckboxModel;

package/src/components/form/td-checkbox/composables/use-checkbox-status.d.ts

@@ -1,6 +1,12 @@
-import { ITdCheckboxConfig } from '../td-checkbox.interface';
-export declare const useCheckboxStatus: (props?: ITdCheckboxConfig) => {
-    isFocused: boolean;
-    hasOwnLabel: boolean;
-    actualValue: string | number | boolean | object | undefined;
+import { ISlots } from '@type-dom/framework';
+import { CheckboxProps } from '../td-checkbox.interface';
+import { CheckboxModel } from './use-checkbox-model';
+export declare const useCheckboxStatus: (props: CheckboxProps, slots: ISlots, { model }: Pick<CheckboxModel, "model">) => {
+    checkboxButtonSize: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
+    isChecked: import("@type-dom/signals").Computed<boolean>;
+    isFocused: import("@type-dom/signals").Signal<boolean>;
+    checkboxSize: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
+    hasOwnLabel: import("@type-dom/signals").Computed<boolean>;
+    actualValue: import("@type-dom/signals").Computed<string | number | boolean | object | undefined>;
 };
+export type CheckboxStatus = ReturnType<typeof useCheckboxStatus>;

package/src/components/form/td-checkbox/composables/use-checkbox-status.js

@@ -2,51 +2,57 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCheckboxStatus = void 0;
 const utils_1 = require("@type-dom/utils");
-const useCheckboxStatus = (props) => {
-    // const checkboxGroup = inject(checkboxGroupContextKey, undefined)
-    const isFocused = false;
-    const actualValue = (() => {
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const use_form_common_props_1 = require("../../td-form/hooks/use-form-common-props");
+const td_checkbox_const_1 = require("../td-checkbox.const");
+const useCheckboxStatus = (props, slots, { model }) => {
+    const checkboxGroup = (0, framework_1.inject)(td_checkbox_const_1.checkboxGroupContextKey, undefined);
+    const isFocused = (0, signals_1.signal)(false);
+    const actualValue = (0, signals_1.computed)(() => {
         // In version 2.x, if there's no props.value, props.label will act as props.value
         // In version 3.x, remove this computed value, use props.value instead.
-        if (!(0, utils_1.isPropAbsent)(props === null || props === void 0 ? void 0 : props.value)) {
+        if (!(0, utils_1.isPropAbsent)(props.value)) {
             return props.value;
         }
-        return props === null || props === void 0 ? void 0 : props.label;
-    })();
-    // const isChecked = computed<boolean>(() => {
-    //   const value = model.value
-    //   if (isBoolean(value)) {
-    //     return value
-    //   } else if (isArray(value)) {
-    //     if (isObject(actualValue.value)) {
-    //       return value.map(toRaw).some((o) => isEqual(o, actualValue.value))
-    //     } else {
-    //       return value.map(toRaw).includes(actualValue.value)
-    //     }
-    //   } else if (value !== null && value !== undefined) {
-    //     return value === props.trueValue || value === props.trueLabel
-    //   } else {
-    //     return !!value
-    //   }
-    // })
-    //
-    // const checkboxButtonSize = useFormSize(
-    //   computed(() => checkboxGroup?.size?.value),
-    //   {
-    //     prop: true,
-    //   }
-    // )
-    // const checkboxSize = useFormSize(computed(() => checkboxGroup?.size?.value))
-    //
-    const hasOwnLabel = !!(props === null || props === void 0 ? void 0 : props.slot) || !(0, utils_1.isPropAbsent)(actualValue);
+        return props.label;
+    });
+    const isChecked = (0, signals_1.computed)(() => {
+        const value = model.get();
+        if ((0, utils_1.isBoolean)(value)) {
+            return value;
+        }
+        else if ((0, utils_1.isArray)(value)) {
+            console.warn('isChecked is array . ');
+            if ((0, utils_1.isObject)(actualValue.get())) {
+                return value.map(signals_1.toRaw).some((o) => (0, utils_1.isEqual)(o, actualValue.get()));
+            }
+            else {
+                console.warn('computed value is ', value, ' toRaw is ', signals_1.toRaw);
+                return value.map(signals_1.toRaw).includes(actualValue.get());
+            }
+        }
+        else if (value !== null && value !== undefined) {
+            return value === (props === null || props === void 0 ? void 0 : props.trueValue) || value === (props === null || props === void 0 ? void 0 : props.trueLabel);
+        }
+        else {
+            return !!value;
+        }
+    });
+    const checkboxButtonSize = (0, use_form_common_props_1.useFormSize)(checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.size, {
+        prop: true,
+    });
+    const checkboxSize = (0, use_form_common_props_1.useFormSize)(checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.size);
+    const hasOwnLabel = (0, signals_1.computed)(() => {
+        return !!slots.default || !(0, utils_1.isPropAbsent)(actualValue.get());
+    });
     return {
-        // checkboxButtonSize,
-        // isChecked,
+        checkboxButtonSize,
+        isChecked,
         isFocused,
-        // checkboxSize,
+        checkboxSize,
         hasOwnLabel,
         actualValue,
     };
 };
 exports.useCheckboxStatus = useCheckboxStatus;
-// export type CheckboxStatus = ReturnType<typeof useCheckboxStatus>

package/src/components/form/td-checkbox/composables/use-checkbox.d.ts

@@ -1,6 +1,16 @@
-import { ITdCheckboxConfig } from '../td-checkbox.interface';
-export declare const useCheckbox: (props?: ITdCheckboxConfig) => {
-    isFocused: boolean;
-    hasOwnLabel: boolean;
-    actualValue: string | number | boolean | object | undefined;
+import { ISlots } from '@type-dom/framework';
+import { CheckboxProps } from '../td-checkbox.interface';
+export declare const useCheckbox: (props: CheckboxProps, slots?: ISlots) => {
+    inputId: import("@type-dom/signals").Signal<string | undefined>;
+    isLabeledByFormItem: import("@type-dom/signals").Computed<boolean>;
+    isChecked: import("@type-dom/signals").Computed<boolean>;
+    isDisabled: import("@type-dom/signals").Computed<boolean>;
+    isFocused: import("@type-dom/signals").Signal<boolean>;
+    checkboxButtonSize: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
+    checkboxSize: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
+    hasOwnLabel: import("@type-dom/signals").Computed<boolean>;
+    model: import("@type-dom/signals").Computed<unknown>;
+    actualValue: import("@type-dom/signals").Computed<string | number | boolean | object | undefined>;
+    handleChange: (e?: Event) => void;
+    onClickRoot: (e?: MouseEvent) => Promise<void>;
 };

package/src/components/form/td-checkbox/composables/use-checkbox.js

@@ -1,85 +1,80 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCheckbox = void 0;
+const utils_1 = require("@type-dom/utils");
+const use_form_item_1 = require("../../td-form/hooks/use-form-item");
 const use_checkbox_status_1 = require("./use-checkbox-status");
-const useCheckbox = (props) => {
-    // const { formItem: elFormItem } = useFormItem()
-    // const { model, isGroup, isLimitExceeded } = useCheckboxModel(props)
-    const { isFocused, 
-    // isChecked,
-    // checkboxButtonSize,
-    // checkboxSize,
-    hasOwnLabel, actualValue, } = (0, use_checkbox_status_1.useCheckboxStatus)(props);
-    // const { isDisabled } = useCheckboxDisabled({ model, isChecked })
-    // const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
-    //   formItemContext: elFormItem,
-    //   disableIdGeneration: hasOwnLabel,
-    //   disableIdManagement: isGroup,
-    // })
-    // const { handleChange, onClickRoot } = useCheckboxEvent(props, {
-    //   model,
-    //   isLimitExceeded,
-    //   hasOwnLabel,
-    //   isDisabled,
-    //   isLabeledByFormItem,
-    // })
-    //
-    // const setStoreValue = () => {
-    //   function addToStore() {
-    //     if (isArray(model.value) && !model.value.includes(actualValue.value)) {
-    //       model.value.push(actualValue.value)
-    //     } else {
-    //       model.value = props.trueValue ?? props.trueLabel ?? true
-    //     }
-    //   }
-    //   props.checked && addToStore()
-    // }
-    //
-    // setStoreValue()
-    // useDeprecated(
-    //   {
-    //     from: 'label act as value',
-    //     replacement: 'value',
-    //     version: '3.0.0',
-    //     scope: 'el-checkbox',
-    //     ref: 'https://element-plus.org/en-US/component/checkbox.html',
-    //   },
-    //   computed(() => isGroup.value && isPropAbsent(props.value))
-    // )
-    //
-    // useDeprecated(
-    //   {
-    //     from: 'true-label',
-    //     replacement: 'true-value',
-    //     version: '3.0.0',
-    //     scope: 'el-checkbox',
-    //     ref: 'https://element-plus.org/en-US/component/checkbox.html',
-    //   },
-    //   computed(() => !!props.trueLabel)
-    // )
-    // useDeprecated(
-    //   {
-    //     from: 'false-label',
-    //     replacement: 'false-value',
-    //     version: '3.0.0',
-    //     scope: 'el-checkbox',
-    //     ref: 'https://element-plus.org/en-US/component/checkbox.html',
-    //   },
-    //   computed(() => !!props.falseLabel)
-    // )
+const use_checkbox_model_1 = require("./use-checkbox-model");
+const use_checkbox_disabled_1 = require("./use-checkbox-disabled");
+const use_checkbox_event_1 = require("./use-checkbox-event");
+const use_deprecated_1 = require("../../../../hooks/use-deprecated");
+const signals_1 = require("@type-dom/signals");
+const useCheckbox = (props, slots = {}) => {
+    const { formItem: elFormItem } = (0, use_form_item_1.useFormItem)();
+    const { model, isGroup, isLimitExceeded } = (0, use_checkbox_model_1.useCheckboxModel)(props);
+    console.log('isGroup is ', isGroup.get(), ' isLimitExceeded is ', isLimitExceeded.get());
+    const { isFocused, isChecked, checkboxButtonSize, checkboxSize, hasOwnLabel, actualValue, } = (0, use_checkbox_status_1.useCheckboxStatus)(props, slots, { model });
+    const { isDisabled } = (0, use_checkbox_disabled_1.useCheckboxDisabled)({ model, isChecked });
+    const { inputId, isLabeledByFormItem } = (0, use_form_item_1.useFormItemInputId)(props, {
+        formItemContext: elFormItem,
+        disableIdGeneration: hasOwnLabel,
+        disableIdManagement: isGroup,
+    });
+    const { handleChange, onClickRoot } = (0, use_checkbox_event_1.useCheckboxEvent)(props, {
+        model,
+        isLimitExceeded,
+        hasOwnLabel,
+        isDisabled,
+        isLabeledByFormItem,
+    });
+    const setStoreValue = () => {
+        function addToStore() {
+            var _a, _b;
+            if ((0, utils_1.isArray)(model.get()) &&
+                !model.get().includes(actualValue.get())) {
+                model.get().push(actualValue.get());
+            }
+            else {
+                model.set((_b = (_a = props.trueValue) !== null && _a !== void 0 ? _a : props.trueLabel) !== null && _b !== void 0 ? _b : true);
+            }
+        }
+        props.checked && addToStore();
+    };
+    setStoreValue();
+    (0, use_deprecated_1.useDeprecated)({
+        from: 'label act as value',
+        replacement: 'value',
+        version: '3.0.0',
+        scope: 'el-checkbox',
+        ref: 'https://element-plus.org/en-US/component/checkbox.html',
+    }, (0, signals_1.computed)(() => isGroup.get() && (0, utils_1.isPropAbsent)(props.value)));
+    (0, use_deprecated_1.useDeprecated)({
+        from: 'true-label',
+        replacement: 'true-value',
+        version: '3.0.0',
+        scope: 'el-checkbox',
+        ref: 'https://element-plus.org/en-US/component/checkbox.html',
+    }, (0, signals_1.computed)(() => !!props.trueLabel));
+    (0, use_deprecated_1.useDeprecated)({
+        from: 'false-label',
+        replacement: 'false-value',
+        version: '3.0.0',
+        scope: 'el-checkbox',
+        ref: 'https://element-plus.org/en-US/component/checkbox.html',
+    }, (0, signals_1.computed)(() => !!props.falseLabel));
     return {
-        // inputId,
-        // isLabeledByFormItem,
-        // isChecked,
-        // isDisabled,
+        inputId,
+        isLabeledByFormItem,
+        isChecked,
+        isDisabled,
         isFocused,
-        // checkboxButtonSize,
-        // checkboxSize,
+        checkboxButtonSize,
+        checkboxSize,
         hasOwnLabel,
-        // model,
+        model,
         actualValue,
-        // handleChange,
-        // onClickRoot,
+        handleChange,
+        onClickRoot,
     };
 };
 exports.useCheckbox = useCheckbox;

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

@@ -0,0 +1,2 @@
+import '../../../base/style/css';
+import '../../../../theme-chalk/el-checkbox.css';

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

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

package/src/components/form/td-checkbox/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../base/style';
+import '../../../../theme-chalk/checkbox.scss';

package/src/components/form/td-checkbox/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style");
+require("../../../../theme-chalk/checkbox.scss");

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

@@ -1,13 +1,10 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdCheckbox, ITdCheckboxConfig } from './td-checkbox.interface';
-export declare class TdCheckbox extends UI implements ITdCheckbox {
+import { TypeHtml } from '@type-dom/framework';
+import { ITdCheckbox, CheckboxProps } from './td-checkbox.interface';
+import './style/index';
+export declare class TdCheckbox extends TypeHtml implements ITdCheckbox {
     className: 'TdCheckbox';
-    props: ITdCheckboxConfig;
-    private isFocused?;
-    private isLimitExceeded?;
-    private actualValue?;
-    private intermediate?;
-    private hasOwnLabel?;
-    constructor(params?: ITdCheckboxConfig);
-    handleChange(ev?: Event): void;
+    dom?: HTMLElement;
+    props: CheckboxProps;
+    constructor(params?: CheckboxProps);
+    setup(): void;
 }

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

@@ -2,82 +2,135 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckbox = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const td_checkbox_style_1 = require("./td-checkbox.style");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
 const use_checkbox_1 = require("./composables/use-checkbox");
-class TdCheckbox extends ui_abstract_1.UI {
+const td_checkbox_const_1 = require("./td-checkbox.const");
+require("./style/index");
+class TdCheckbox extends framework_1.TypeHtml {
     constructor(params = {}) {
-        const { hasOwnLabel } = (0, use_checkbox_1.useCheckbox)(params);
-        const tag = !hasOwnLabel ? 'span' : 'label';
-        super(params, tag); // label | span
+        super(); // label | span
         this.className = 'TdCheckbox';
         this.attr.addObj({
-            name: 'td-checkbox'
+            name: 'td-checkbox',
         });
-        this.style.addObj(td_checkbox_style_1.$checkboxStyle);
-        const inputSpan = new framework_1.Span({
-            attrObj: {
-                name: 'td-checkbox-input-span'
-            },
-            styleObj: td_checkbox_style_1.$checkboxInputStyle,
-            childNodes: [
+        this.assignProps(td_checkbox_const_1.checkboxProps);
+        this.addEmits(td_checkbox_const_1.checkboxEmits);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a;
+        console.warn('TdCheckbox setup');
+        const props = this.props;
+        const slots = (0, framework_1.useSlots)();
+        const { inputId, isLabeledByFormItem, isChecked, isDisabled, isFocused, checkboxSize, hasOwnLabel, model, actualValue, handleChange, onClickRoot, } = (0, use_checkbox_1.useCheckbox)(props, slots);
+        // console.log('hasOwnLabel is ', hasOwnLabel);
+        this.assignProps({
+            nodeName: !hasOwnLabel && isLabeledByFormItem ? 'span' : 'label',
+        });
+        const ns = (0, use_namespace_1.useNamespace)('checkbox');
+        console.warn('isChecked is ', isChecked);
+        const compKls = (0, signals_1.computed)(() => [
+            ns.b(),
+            ns.m(checkboxSize.get()),
+            ns.is('disabled', isDisabled.get()),
+            ns.is('checked', isChecked.get()),
+            ns.is('bordered', props.border),
+        ]);
+        // console.warn('compKls is ', compKls);
+        this.attr.addClass(compKls);
+        // watch(compKls, (newValue, oldValue) => {
+        //   console.warn('checkbox watch compKls', newValue);
+        // });
+        const spanKls = (0, signals_1.computed)(() => {
+            var _a;
+            return [
+                ns.e('input'),
+                ns.is('disabled', isDisabled.get()),
+                ns.is('checked', isChecked.get()),
+                ns.is('indeterminate', (_a = props.indeterminate) === null || _a === void 0 ? void 0 : _a.get()),
+                ns.is('focus', isFocused.get()),
+            ];
+        });
+        // console.warn('spanKls is ', spanKls);
+        this.addChild(new framework_1.Span({
+            name: 'td-checkbox-input-span',
+            class: spanKls,
+            slot: [
                 new framework_1.Input({
                     name: 'original',
+                    vModel: model,
+                    disabled: isDisabled,
+                    class: ns.e('original'),
                     attrObj: {
+                        id: inputId.get(),
                         type: 'checkbox',
-                        disabled: params === null || params === void 0 ? void 0 : params.disabled, // todo group or form disabled
-                        value: this.actualValue,
-                        intermediate: this.intermediate,
+                        value: actualValue.get(),
+                        checked: isChecked.get(),
+                        intermediate: (_a = props.indeterminate) === null || _a === void 0 ? void 0 : _a.get(),
                     },
-                    styleObj: td_checkbox_style_1.$checkboxOriginalStyle,
                     events: {
                         click: (ev) => {
+                            console.warn('td-checkbox input click . ');
                             ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
                         },
                         change: (ev) => {
-                            this.handleChange(ev);
+                            console.warn('td-checkbox input change . ');
+                            handleChange(ev);
+                            ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
                         },
-                        focus: evt => {
-                            this.isFocused = true;
+                        focus: (evt) => {
+                            isFocused.set(true);
                         },
-                        blur: evt => {
-                            this.isFocused = false;
-                        }
-                    }
+                        blur: (evt) => {
+                            isFocused.set(false);
+                        },
+                    },
                 }),
                 new framework_1.Span({
                     name: 'inner',
-                    styleObj: td_checkbox_style_1.$checkboxInnerStyle,
-                    childNodes: [
-                        new framework_1.Span({
-                            name: 'inner-after',
-                            styleObj: td_checkbox_style_1.$checkboxInnerAfterStyle
-                        })
-                    ]
+                    attrObj: {
+                        class: ns.e('inner'),
+                    },
                 }),
-            ]
-        });
-        this.addChild(inputSpan);
+            ],
+        }));
         if (hasOwnLabel) {
             const labelSpan = new framework_1.Span({
                 name: 'label',
-                styleObj: td_checkbox_style_1.$checkboxLabelStyle,
+                attrObj: {
+                    class: ns.e('label'),
+                },
+                // styleObj: deepClone($checkboxLabelStyle),
             });
-            if (params === null || params === void 0 ? void 0 : params.slot) {
-                labelSpan.slotChild(params.slot);
+            if (props === null || props === void 0 ? void 0 : props.slot) {
+                labelSpan.slotChildren(props.slot);
             }
             else {
-                labelSpan.addChild(new framework_1.TextNode(params === null || params === void 0 ? void 0 : params.label));
+                labelSpan.slotChildren(String(props.label || ''));
             }
             this.addChild(labelSpan);
         }
-        this.props = this.useParams(params);
-    }
-    handleChange(ev) {
-        if (this.isLimitExceeded)
-            return;
-        const target = ev === null || ev === void 0 ? void 0 : ev.target;
-        // emit('change', getLabeledValue(target.checked), e)
+        this.addEvents({
+            click: onClickRoot,
+        });
+        // add by me todo why should add ???
+        this.addEmits({
+            change: (newValue) => {
+                console.warn('change emit , newValue is ', newValue);
+                const selected = model.get();
+                // todo 数组 还是 值
+                if ((0, utils_1.isArray)(selected)) {
+                    model.set(selected.includes(actualValue.get())
+                        ? selected.filter((item) => item !== actualValue.get())
+                        : [...selected, actualValue.get()]);
+                }
+                else {
+                    model.set(newValue);
+                }
+            },
+        });
     }
 }
 exports.TdCheckbox = TdCheckbox;

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

@@ -0,0 +1,14 @@
+import { InjectionKey } from '@type-dom/framework';
+import { ToRefs } from '@type-dom/signals';
+import type { ITdCheckboxGroupConfig } from '../td-checkbox-group/td-checkbox-group.interface';
+import { CheckboxValueType, CheckboxProps } from './td-checkbox.interface';
+export type CheckboxGroupContext = {
+    modelValue?: any;
+    changeEvent?: (...args: any) => any;
+} & ToRefs<Pick<ITdCheckboxGroupConfig, 'size' | 'min' | 'max' | 'disabled' | 'validateEvent' | 'fill' | 'textColor'>>;
+export declare const checkboxGroupContextKey: InjectionKey<CheckboxGroupContext>;
+export declare const checkboxProps: CheckboxProps;
+export declare const checkboxEmits: {
+    "update:modelValue": (val: CheckboxValueType) => val is string | number | boolean;
+    change: (val: CheckboxValueType) => val is string | number | boolean;
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxEmits = exports.checkboxProps = exports.checkboxGroupContextKey = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+exports.checkboxGroupContextKey = Symbol('checkboxGroupContextKey');
+exports.checkboxProps = {
+    validateEvent: true,
+};
+exports.checkboxEmits = {
+    [event_1.UPDATE_MODEL_EVENT]: (val) => (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val) || (0, utils_1.isBoolean)(val),
+    change: (val) => (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val) || (0, utils_1.isBoolean)(val),
+};