@type-dom/ui 0.1.0 → 0.1.1

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

@@ -1,305 +1,136 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckbox = void 0;
-const tslib_1 = require("tslib");
 const framework_1 = require("@type-dom/framework");
-const use_checkbox_1 = require("./composables/use-checkbox");
-const td_checkbox_style_1 = require("./td-checkbox.style");
-const styles_1 = require("../../../styles");
-const event_1 = require("../../../constants/event");
 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");
+const td_checkbox_const_1 = require("./td-checkbox.const");
+require("./style/index");
 class TdCheckbox extends framework_1.TypeHtml {
     constructor(params = {}) {
         super(); // label | span
         this.className = 'TdCheckbox';
-        (0, td_checkbox_style_1.useCheckboxStyle)(params);
-        const { hasOwnLabel } = (0, use_checkbox_1.useCheckbox)(params);
-        console.log('hasOwnLabel is ', hasOwnLabel);
-        this.nodeName = !hasOwnLabel ? 'span' : 'label';
-        this.dom = document.createElement(this.nodeName);
         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-before',
-                            styleObj: td_checkbox_style_1.$checkboxInnerBeforeStyle,
-                        }),
-                        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.slotChild(String(params.label || ''));
+                labelSpan.slotChildren(String(props.label || ''));
             }
             this.addChild(labelSpan);
         }
         this.addEvents({
-            click: (evt) => {
-                // todo
-                console.log('click . ');
-                if (this.props.disabled) {
-                    return;
-                }
-                const input = this.down('name', 'original');
-                const checked = input.dom.checked = !input.dom.checked;
-                this.setChecked(checked);
-            }
+            click: onClickRoot,
         });
+        // add by me todo why should add ???
         this.addEmits({
-            [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),
-        });
-        this.props = this.useParams(params);
-    }
-    get checkedValue() {
-        var _a;
-        return (_a = this.down('name', 'original')) === null || _a === void 0 ? void 0 : _a.dom.checked;
-    }
-    mounted() {
-        const input = this.down('name', 'original');
-        if (this.props.modelValue) {
-            input.dom.checked = true;
-            this.props.checked = true;
-        }
-        if (this.props.indeterminate) {
-            this.setIndeterminate(true);
-        }
-    }
-    handleChange(ev) {
-        console.log('handleChange . ');
-        if (this.isLimitExceeded) {
-            return;
-        }
-        const target = ev === null || ev === void 0 ? void 0 : ev.target;
-        target.checked = !target.checked;
-        this.props.checked = target.checked;
-        // this.emit('change', target.checked, ev)
-    }
-    onClickRoot(e) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            console.log('onClickRoot . ');
-            if (this.isLimitExceeded) {
-                return;
-            }
-            if (!this.hasOwnLabel && !this.isDisabled && this.isLabeledByFormItem) {
-                // fix: https://github.com/element-plus/element-plus/issues/9981
-                const eventTargets = e.composedPath();
-                const hasLabel = eventTargets.some((item) => item.tagName === 'LABEL');
-                if (!hasLabel) {
-                    this.model = this.getLabeledValue([false, this.props.falseValue, this.props.falseLabel].includes(this.model));
-                    yield (0, framework_1.nextTick)();
-                    this.emitChangeEvent(this.model, e);
-                }
-            }
-        });
-    }
-    getLabeledValue(value) {
-        var _a, _b, _c, _d;
-        return [true, this.props.trueValue, this.props.trueLabel].includes(value)
-            ? (_b = (_a = this.props.trueValue) !== null && _a !== void 0 ? _a : this.props.trueLabel) !== null && _b !== void 0 ? _b : true
-            : (_d = (_c = this.props.falseValue) !== null && _c !== void 0 ? _c : this.props.falseLabel) !== null && _d !== void 0 ? _d : false;
-    }
-    emitChangeEvent(checked, e) {
-        // this.emit('change', this.getLabeledValue(checked), e)
-    }
-    setChecked(checked) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        //   todo 待实现 选中、不选中
-        console.log('setChecked . checked is ', checked);
-        const label = this.down('name', 'label');
-        const inner = this.down('name', 'inner');
-        const innerAfter = this.down('name', 'inner-after');
-        const innerBefore = this.down('name', 'inner-before');
-        const input = this.down('name', 'original');
-        input.dom.checked = !!checked;
-        this.props.checked = !!checked;
-        // this.props.modelValue = checked; // todo modelValue = checkbox.value
-        if (checked) {
-            (_a = label === null || label === void 0 ? void 0 : label.style) === null || _a === void 0 ? void 0 : _a.setObj({
-                color: td_checkbox_style_1.$checkbox.checkedTextColor,
-            });
-            (_b = inner === null || inner === void 0 ? void 0 : inner.style) === null || _b === void 0 ? void 0 : _b.setObj({
-                borderColor: td_checkbox_style_1.$checkbox.checkedInputBorderColor,
-                background: td_checkbox_style_1.$checkbox.checkedBgColor,
-            });
-            (_c = innerBefore === null || innerBefore === void 0 ? void 0 : innerBefore.style) === null || _c === void 0 ? void 0 : _c.setObj({
-                display: 'none',
-            });
-            (_d = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _d === void 0 ? void 0 : _d.setObj({
-                transform: 'rotate(45deg) scaleY(1)',
-                display: 'block',
-                borderColor: td_checkbox_style_1.$checkbox.checkedIconColor
-            });
-            if (this.props.border) {
-                (_e = this.style) === null || _e === void 0 ? void 0 : _e.setObj({
-                    borderColor: styles_1.$colorPrimary
-                });
-            }
-        }
-        else {
-            (_f = label === null || label === void 0 ? void 0 : label.style) === null || _f === void 0 ? void 0 : _f.setObj({
-                color: td_checkbox_style_1.$checkbox.textColor,
-            });
-            (_g = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _g === void 0 ? void 0 : _g.setObj({
-                transform: 'rotate(45deg) scaleY(0)',
-            });
-            (_h = innerBefore === null || innerBefore === void 0 ? void 0 : innerBefore.style) === null || _h === void 0 ? void 0 : _h.setObj({
-                display: 'none',
-            });
-            (_j = inner === null || inner === void 0 ? void 0 : inner.style) === null || _j === void 0 ? void 0 : _j.setObj({
-                borderColor: styles_1.$borderColor.base,
-                background: td_checkbox_style_1.$checkbox.bgColor,
-            });
-            if (this.props.border) {
-                if (this.props.disabled) {
-                    (_k = this.style) === null || _k === void 0 ? void 0 : _k.setObj({
-                        borderColor: styles_1.$borderColor.lighter
-                    });
+            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 {
-                    (_l = this.style) === null || _l === void 0 ? void 0 : _l.setObj({
-                        border: styles_1.$border
-                    });
+                    model.set(newValue);
                 }
-            }
-        }
-        // if (this.props.indeterminate) {
-        //   this.setIndeterminate(true);
-        // }
-        if (this.props.disabled) {
-            this.setDisabled(true);
-        }
-    }
-    setDisabled(disabled) {
-        var _a, _b, _c, _d, _e, _f;
-        const label = this.down('name', 'label');
-        const inner = this.down('name', 'inner');
-        const innerAfter = this.down('name', 'inner-after');
-        this.props.disabled = disabled;
-        if (disabled) {
-            this.style.addObj({
-                cursor: 'not-allowed',
-                borderColor: styles_1.$borderColor.lighter,
-                // pointerEvents: 'none',
-            });
-            (_a = label === null || label === void 0 ? void 0 : label.style) === null || _a === void 0 ? void 0 : _a.setObj({
-                color: styles_1.$disabled.textColor,
-                cursor: 'not-allowed',
-            });
-            (_b = inner === null || inner === void 0 ? void 0 : inner.style) === null || _b === void 0 ? void 0 : _b.setObj({
-                background: td_checkbox_style_1.$checkbox.disabledInputFill,
-                borderColor: td_checkbox_style_1.$checkbox.disabledBorderColor,
-                cursor: 'not-allowed',
-            });
-            (_c = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _c === void 0 ? void 0 : _c.setObj({
-                cursor: 'not-allowed',
-                borderColor: td_checkbox_style_1.$checkbox.disabledIconColor
-            });
-        }
-        else {
-            this.style.setObj({
-                cursor: 'pointer',
-                borderColor: styles_1.$borderColor.base,
-            });
-            (_d = label === null || label === void 0 ? void 0 : label.style) === null || _d === void 0 ? void 0 : _d.setObj({
-                color: '',
-                cursor: '',
-            });
-            (_e = inner === null || inner === void 0 ? void 0 : inner.style) === null || _e === void 0 ? void 0 : _e.setObj({
-                background: td_checkbox_style_1.$checkbox.bgColor,
-                borderColor: td_checkbox_style_1.$checkbox.inputBorder,
-                cursor: 'pointer',
-            });
-            (_f = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _f === void 0 ? void 0 : _f.setObj({
-                cursor: 'pointer',
-                borderColor: td_checkbox_style_1.$checkbox.checkedIconColor,
-            });
-        }
-    }
-    setIndeterminate(indeterminate) {
-        var _a, _b, _c, _d, _e;
-        this.props.indeterminate = indeterminate;
-        const inner = this.down('name', 'inner');
-        const innerAfter = this.down('name', 'inner-after');
-        const innerBefore = this.down('name', 'inner-before');
-        if (indeterminate) { // todo 部分选中
-            (_a = innerBefore === null || innerBefore === void 0 ? void 0 : innerBefore.style) === null || _a === void 0 ? void 0 : _a.setObj({
-                display: 'block',
-            });
-            (_b = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _b === void 0 ? void 0 : _b.setObj({
-                transform: 'rotate(45deg) scaleY(0)',
-                display: 'none',
-            });
-            (_c = inner === null || inner === void 0 ? void 0 : inner.style) === null || _c === void 0 ? void 0 : _c.setObj({
-                borderColor: td_checkbox_style_1.$checkbox.checkedInputBorderColor,
-                background: td_checkbox_style_1.$checkbox.checkedBgColor,
-            });
-            return;
-        }
-        else {
-            (_d = innerBefore === null || innerBefore === void 0 ? void 0 : innerBefore.style) === null || _d === void 0 ? void 0 : _d.setObj({
-                display: 'none',
-            });
-            (_e = innerAfter === null || innerAfter === void 0 ? void 0 : innerAfter.style) === null || _e === void 0 ? void 0 : _e.setObj({
-                // transform: 'rotate(45deg) scaleY(1)',
-                display: 'block',
-            });
-            // inner?.style?.setObj({
-            //   borderColor: $borderColor.base,
-            //   background: $checkbox.bgColor,
-            // });
-        }
-    }
-    setSize(size) {
-        // todo
+            },
+        });
     }
 }
 exports.TdCheckbox = TdCheckbox;

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

@@ -1,63 +1,14 @@
-export declare const checkboxProps: {
-    /**
-     * @description binding value
-     *     type: [Number, String, Boolean],
-     */
-    /**
-     * @description label of the Checkbox when used inside a `checkbox-group`
-     *     type: [String, Boolean, Number, Object],
-     */
-    /**
-     * @description value of the Checkbox when used inside a `checkbox-group`
-     *     type: [String, Boolean, Number, Object],
-     */
-    /**
-     * @description Set indeterminate state, only responsible for style control
-     */
-    /**
-     * @description whether the Checkbox is disabled
-     */
-    /**
-     * @description if the Checkbox is checked
-     */
-    /**
-     * @description native 'name' attribute
-     *     type: String,
-     */
-    /**
-     * @description value of the Checkbox if it's checked
-     *     type: [String, Number],
-     */
-    /**
-     * @description value of the Checkbox if it's not checked
-     *     type: [String, Number],
-     */
-    /**
-     * @deprecated use `trueValue` instead
-     * @description value of the Checkbox if it's checked
-     *     type: [String, Number],
-     */
-    /**
-     * @deprecated use `falseValue` instead
-     * @description value of the Checkbox if it's not checked
-     *     type: [String, Number],
-     */
-    /**
-     * @description input id
-     *     type: String,
-     */
-    /**
-     * @description whether to add a border around Checkbox
-     */
-    /**
-     * @description size of the Checkbox
-     */
-    /**
-     * @description input tabindex
-     */
-    /**
-     * @description whether to trigger form validation
-     *     type: Boolean,
-     */
-    validateEvent: boolean;
+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

@@ -1,88 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkboxProps = void 0;
+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 = {
-    /**
-     * @description binding value
-     *     type: [Number, String, Boolean],
-     */
-    // modelValue: undefined,
-    /**
-     * @description label of the Checkbox when used inside a `checkbox-group`
-     *     type: [String, Boolean, Number, Object],
-     */
-    // label: undefined,
-    /**
-     * @description value of the Checkbox when used inside a `checkbox-group`
-     *     type: [String, Boolean, Number, Object],
-     */
-    // value: undefined,
-    /**
-     * @description Set indeterminate state, only responsible for style control
-     */
-    // indeterminate: Boolean,
-    /**
-     * @description whether the Checkbox is disabled
-     */
-    // disabled: Boolean,
-    /**
-     * @description if the Checkbox is checked
-     */
-    // checked: Boolean,
-    /**
-     * @description native 'name' attribute
-     *     type: String,
-     */
-    // name: undefined,
-    /**
-     * @description value of the Checkbox if it's checked
-     *     type: [String, Number],
-     */
-    // trueValue: undefined,
-    /**
-     * @description value of the Checkbox if it's not checked
-     *     type: [String, Number],
-     */
-    // falseValue: undefined,
-    /**
-     * @deprecated use `trueValue` instead
-     * @description value of the Checkbox if it's checked
-     *     type: [String, Number],
-     */
-    // trueLabel: undefined,
-    /**
-     * @deprecated use `falseValue` instead
-     * @description value of the Checkbox if it's not checked
-     *     type: [String, Number],
-     */
-    // falseLabel: undefined,
-    /**
-     * @description input id
-     *     type: String,
-     */
-    // id: undefined,
-    /**
-     * @description whether to add a border around Checkbox
-     */
-    // border: Boolean,
-    /**
-     * @description size of the Checkbox
-     */
-    // size: ISize,
-    /**
-     * @description input tabindex
-     */
-    // tabindex: [String, Number],
-    /**
-     * @description whether to trigger form validation
-     *     type: Boolean,
-     */
     validateEvent: true,
-    // ...useAriaProps(['ariaControls']),
 };
-// export const checkboxEmits = {
-//   [UPDATE_MODEL_EVENT]: (val: CheckboxValueType) =>
-//     isString(val) || isNumber(val) || isBoolean(val),
-//   change: (val: CheckboxValueType) =>
-//     isString(val) || isNumber(val) || isBoolean(val),
-// }
+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),
+};

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

@@ -1,9 +1,12 @@
-import { ITypeConfig, ITypeHtml } from '@type-dom/framework';
-import { ISize } from '../../../styles/size';
+import { TypeProps, ITypeHtml } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+import { ComponentSize } from '../../../constants/size';
 export interface ITdCheckbox extends ITypeHtml {
     className: 'TdCheckbox';
+    props: CheckboxProps;
 }
-export interface ITdCheckboxConfig extends ITypeConfig {
+export interface CheckboxProps extends TypeProps {
+    nodeName?: 'span' | 'label';
     /**
      * @description binding value
      */
@@ -19,7 +22,7 @@ export interface ITdCheckboxConfig extends ITypeConfig {
     /**
      * @description Set indeterminate state, only responsible for style control
      */
-    indeterminate?: boolean;
+    indeterminate?: Signal<boolean | undefined>;
     /**
      * @description whether the Checkbox is disabled
      */
@@ -66,7 +69,7 @@ export interface ITdCheckboxConfig extends ITypeConfig {
     /**
      * @description size of the Checkbox
      */
-    size?: ISize;
+    size?: ComponentSize;
     /**
      * @description input tabindex
      */
@@ -76,4 +79,4 @@ export interface ITdCheckboxConfig extends ITypeConfig {
      */
     validateEvent?: boolean;
 }
-export type CheckboxValueType = string | number | boolean;
+export type CheckboxValueType = string | number | boolean | object;

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

@@ -1,5 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
-import { ITdCheckboxConfig } from './td-checkbox.interface';
+import { CheckboxProps } from './td-checkbox.interface';
 export declare const $checkbox: {
     fontSize: string;
     fontWeight: number;
@@ -61,9 +61,9 @@ export declare const $checkboxInnerBeforeStyle: IStyle;
 export declare const $checkboxOriginalStyle: IStyle;
 export declare const $checkboxLabelStyle: IStyle;
 export declare const $checkboxGroupStyle: IStyle;
-export declare function useCheckboxStyle(params: ITdCheckboxConfig): void;
-export declare function useSize(params: ITdCheckboxConfig): void;
-export declare function useBordered(params: ITdCheckboxConfig): void;
-export declare function useDisabled(params: ITdCheckboxConfig): void;
-export declare function useChecked(params: ITdCheckboxConfig): void;
-export declare function useIndeterminate(params: ITdCheckboxConfig): void;
+export declare function useCheckboxStyle(params: CheckboxProps): void;
+export declare function useSize(params: CheckboxProps): void;
+export declare function useBordered(params: CheckboxProps): void;
+export declare function useDisabled(params: CheckboxProps): void;
+export declare function useChecked(params: CheckboxProps): void;
+export declare function useIndeterminate(params: CheckboxProps): void;