@type-dom/ui 0.0.9 → 0.1.0

package/src/components/feedback/td-tooltip/trigger/trigger.class.js

@@ -1,12 +1,65 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltipTrigger = void 0;
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-class TdTooltipTrigger extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+const event_1 = require("../../../../utils/dom/event");
+const trigger_class_1 = require("../../td-popper/trigger/trigger.class");
+const utils_1 = require("../utils");
+const td_tooltip_const_1 = require("../td-tooltip.const");
+class TdTooltipTrigger extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdTooltipTrigger';
+        this.attr.addName('td-tooltip-trigger');
         this.props = this.useParams(params);
     }
+    setup() {
+        const { controlled, id, open, onOpen, onClose, onToggle } = this.inject(td_tooltip_const_1.TOOLTIP_INJECTION_KEY, undefined);
+        const stopWhenControlledOrDisabled = () => {
+            if (controlled || this.props.disabled) {
+                return true;
+            }
+            return undefined; // add by me
+        };
+        const trigger = this.props.trigger;
+        const onMouseenter = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'hover', onOpen));
+        const onMouseleave = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'hover', onClose));
+        const onClick = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'click', (e) => {
+            // distinguish left click
+            if (e.button === 0) {
+                // onToggle(e);
+            }
+        }));
+        const onFocus = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'focus', onOpen));
+        const onBlur = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'focus', onClose));
+        const onContextMenu = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'contextmenu', (e) => {
+            e.preventDefault();
+            // onToggle(e);
+        }));
+        const onKeydown = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (e) => {
+            var _a;
+            const { code } = e;
+            if ((_a = this.props.triggerKeys) === null || _a === void 0 ? void 0 : _a.includes(code)) {
+                e.preventDefault();
+                // onToggle(e);
+            }
+        });
+        const popperTrigger = new trigger_class_1.TdPopperTrigger({
+            id,
+            virtualRef: this.props.virtualRef,
+            open,
+            virtualTriggering: this.props.virtualTriggering,
+            // class="ns.e('trigger')",
+            events: {
+                blur: onBlur,
+                click: onClick,
+                contextmenu: onContextMenu,
+                focus: onFocus,
+                mouseenter: onMouseenter,
+                mouseleave: onMouseleave,
+                keydown: onKeydown,
+            },
+        });
+    }
 }
 exports.TdTooltipTrigger = TdTooltipTrigger;

package/src/components/feedback/td-tooltip/trigger/trigger.const.d.ts

@@ -0,0 +1,4 @@
+export declare const tooltipTriggerProps: {
+    trigger: string;
+    triggerKeys: string[];
+};

package/src/components/feedback/td-tooltip/trigger/trigger.const.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tooltipTriggerProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const trigger_const_1 = require("../../td-popper/trigger/trigger.const");
+exports.tooltipTriggerProps = Object.assign(Object.assign({}, trigger_const_1.popperTriggerProps), { trigger: 'hover', triggerKeys: [utils_1.EVENT_CODE.enter, utils_1.EVENT_CODE.space] });

package/src/components/feedback/td-tooltip/trigger/trigger.interface.d.ts

@@ -1,6 +1,6 @@
-import { IUI } from '../../../../ui/ui.interface';
+import { ITypeDiv } from '@type-dom/framework';
 import { ITdPopperTriggerConfig } from '../../td-popper/trigger/trigger.interface';
-export interface ITdTooltipTrigger extends IUI {
+export interface ITdTooltipTrigger extends ITypeDiv {
     className: 'TdTooltipTrigger';
 }
 export type TooltipTriggerType = 'hover' | 'focus' | 'click' | 'contextmenu';
@@ -13,4 +13,9 @@ export interface ITdTooltipTriggerConfig extends ITdPopperTriggerConfig {
      * @description How should the tooltip be triggered (to show)
      */
     trigger?: TooltipTriggerType;
+    /**
+     * @description When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard
+     *     default: () => [EVENT_CODE.enter, EVENT_CODE.space],
+     */
+    triggerKeys?: string[];
 }

package/src/components/form/index.d.ts

@@ -1,5 +1,3 @@
-export { RadioGroup } from './radio-group/radio-group.class';
-export { RadioOption } from './radio-group/radio-option/radio-option.class';
 export { CheckboxGroup } from './checkbox-group/checkbox-group.class';
 export { CheckboxOption } from './checkbox-group/checkbox-option/checkbox-option.class';
 export { FieldInput } from './field-item/input/field-input.abstract';
@@ -8,29 +6,32 @@ export { FieldSelect } from './field-item/select/field-select.abstract';
 export { FieldSpan } from './field-item/span/field-span.abstract';
 export { FieldTextarea } from './field-item/textarea/field-textarea.abstract';
 export * from './field-item/field-item.interface';
+export { TdInputField } from './td-input/td-input-field.class';
+export type { ITdInputFieldConfig } from './td-input/td-input-field.interface';
+export { RadioGroup } from './radio-group/radio-group.class';
+export { RadioOption } from './radio-group/radio-option/radio-option.class';
 export { TdCheckbox } from './td-checkbox/td-checkbox.class';
-export type { ITdCheckboxConfig } from './td-checkbox/td-checkbox.interface';
+export type * from './td-checkbox/td-checkbox.interface';
 export { TdCheckboxGroup } from './td-checkbox-group/td-checkbox-group.class';
 export type { ITdCheckboxGroupConfig } from './td-checkbox-group/td-checkbox-group.interface';
 export { TdCheckboxButton } from './td-checkbox-button/td-checkbox-button.class';
-export type { ITdCheckboxButtonConfig } from './td-checkbox-button/td-checkbox-button.interface';
-export { TdInputField } from './td-input/td-input-field.class';
-export type { ITdInputFieldConfig } from './td-input/td-input-field.interface';
+export { TdForm } from './td-form/td-form.class';
+export type { ITdForm } from './td-form/td-form.interface';
+export { TdFormItem } from './td-form-item/td-form-item.class';
+export type { ITdFormItem, ILabelPosition } from './td-form-item/td-form-item.interface';
+export { TdInput } from './td-input/td-input.class';
+export type { ITdInputConfig } from './td-input/td-input.interface';
+export { TdOption } from './td-option/td-option.class';
+export type { ITdOptionConfig } from './td-option/td-option.interface';
+export { TdOptionGroup } from './td-option-group/td-option-group.class';
+export type { ITdOptionGroupConfig } from './td-option-group/td-option-group.interface';
 export { TdRadio } from './td-radio/td-radio.class';
 export type { ITdRadioConfig } from './td-radio/td-radio.interface';
 export { TdRadioButton } from './td-radio-button/td-radio-button.class';
 export type { ITdRadioButtonConfig } from './td-radio-button/td-radio-button.interface';
 export { TdRadioGroup } from './td-radio-group/td-radio-group.class';
 export type { ITdRadioGroupConfig } from './td-radio-group/td-radio-group.interface';
-export { TdInput } from './td-input/td-input.class';
-export type { ITdInputConfig } from './td-input/td-input.interface';
-export { TdSwitch } from './td-switch/td-switch.class';
-export type { ITdSwitchConfig } from './td-switch/td-switch.interface';
-export { TdForm } from './td-form/td-form.class';
-export type { ITdForm } from './td-form/td-form.interface';
-export { TdFormItem } from './td-form-item/td-form-item.class';
-export type { ITdFormItem, ILabelPosition } from './td-form-item/td-form-item.interface';
 export { TdSelect } from './td-select/td-select.class';
 export type { ITdSelectConfig } from './td-select/td-select.interface';
-export { TdOption } from './td-option/td-option.class';
-export type { ITdOptionConfig } from './td-option/td-option.interface';
+export { TdSwitch } from './td-switch/td-switch.class';
+export type { ITdSwitchConfig } from './td-switch/td-switch.interface';

package/src/components/form/index.js

@@ -1,11 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdOption = exports.TdSelect = exports.TdFormItem = exports.TdForm = exports.TdSwitch = exports.TdInput = exports.TdRadioGroup = exports.TdRadioButton = exports.TdRadio = exports.TdInputField = exports.TdCheckboxButton = exports.TdCheckboxGroup = exports.TdCheckbox = exports.FieldTextarea = exports.FieldSpan = exports.FieldSelect = exports.FieldRadio = exports.FieldInput = exports.CheckboxOption = exports.CheckboxGroup = exports.RadioOption = exports.RadioGroup = void 0;
+exports.TdSwitch = exports.TdSelect = exports.TdRadioGroup = exports.TdRadioButton = exports.TdRadio = exports.TdOptionGroup = exports.TdOption = exports.TdInput = exports.TdFormItem = exports.TdForm = exports.TdCheckboxButton = exports.TdCheckboxGroup = exports.TdCheckbox = exports.RadioOption = exports.RadioGroup = exports.TdInputField = exports.FieldTextarea = exports.FieldSpan = exports.FieldSelect = exports.FieldRadio = exports.FieldInput = exports.CheckboxOption = exports.CheckboxGroup = void 0;
 const tslib_1 = require("tslib");
-var radio_group_class_1 = require("./radio-group/radio-group.class");
-Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radio_group_class_1.RadioGroup; } });
-var radio_option_class_1 = require("./radio-group/radio-option/radio-option.class");
-Object.defineProperty(exports, "RadioOption", { enumerable: true, get: function () { return radio_option_class_1.RadioOption; } });
 var checkbox_group_class_1 = require("./checkbox-group/checkbox-group.class");
 Object.defineProperty(exports, "CheckboxGroup", { enumerable: true, get: function () { return checkbox_group_class_1.CheckboxGroup; } });
 var checkbox_option_class_1 = require("./checkbox-group/checkbox-option/checkbox-option.class");
@@ -21,29 +17,35 @@ Object.defineProperty(exports, "FieldSpan", { enumerable: true, get: function ()
 var field_textarea_abstract_1 = require("./field-item/textarea/field-textarea.abstract");
 Object.defineProperty(exports, "FieldTextarea", { enumerable: true, get: function () { return field_textarea_abstract_1.FieldTextarea; } });
 tslib_1.__exportStar(require("./field-item/field-item.interface"), exports);
+var td_input_field_class_1 = require("./td-input/td-input-field.class");
+Object.defineProperty(exports, "TdInputField", { enumerable: true, get: function () { return td_input_field_class_1.TdInputField; } });
+var radio_group_class_1 = require("./radio-group/radio-group.class");
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radio_group_class_1.RadioGroup; } });
+var radio_option_class_1 = require("./radio-group/radio-option/radio-option.class");
+Object.defineProperty(exports, "RadioOption", { enumerable: true, get: function () { return radio_option_class_1.RadioOption; } });
 var td_checkbox_class_1 = require("./td-checkbox/td-checkbox.class");
 Object.defineProperty(exports, "TdCheckbox", { enumerable: true, get: function () { return td_checkbox_class_1.TdCheckbox; } });
 var td_checkbox_group_class_1 = require("./td-checkbox-group/td-checkbox-group.class");
 Object.defineProperty(exports, "TdCheckboxGroup", { enumerable: true, get: function () { return td_checkbox_group_class_1.TdCheckboxGroup; } });
 var td_checkbox_button_class_1 = require("./td-checkbox-button/td-checkbox-button.class");
 Object.defineProperty(exports, "TdCheckboxButton", { enumerable: true, get: function () { return td_checkbox_button_class_1.TdCheckboxButton; } });
-var td_input_field_class_1 = require("./td-input/td-input-field.class");
-Object.defineProperty(exports, "TdInputField", { enumerable: true, get: function () { return td_input_field_class_1.TdInputField; } });
+var td_form_class_1 = require("./td-form/td-form.class");
+Object.defineProperty(exports, "TdForm", { enumerable: true, get: function () { return td_form_class_1.TdForm; } });
+var td_form_item_class_1 = require("./td-form-item/td-form-item.class");
+Object.defineProperty(exports, "TdFormItem", { enumerable: true, get: function () { return td_form_item_class_1.TdFormItem; } });
+var td_input_class_1 = require("./td-input/td-input.class");
+Object.defineProperty(exports, "TdInput", { enumerable: true, get: function () { return td_input_class_1.TdInput; } });
+var td_option_class_1 = require("./td-option/td-option.class");
+Object.defineProperty(exports, "TdOption", { enumerable: true, get: function () { return td_option_class_1.TdOption; } });
+var td_option_group_class_1 = require("./td-option-group/td-option-group.class");
+Object.defineProperty(exports, "TdOptionGroup", { enumerable: true, get: function () { return td_option_group_class_1.TdOptionGroup; } });
 var td_radio_class_1 = require("./td-radio/td-radio.class");
 Object.defineProperty(exports, "TdRadio", { enumerable: true, get: function () { return td_radio_class_1.TdRadio; } });
 var td_radio_button_class_1 = require("./td-radio-button/td-radio-button.class");
 Object.defineProperty(exports, "TdRadioButton", { enumerable: true, get: function () { return td_radio_button_class_1.TdRadioButton; } });
 var td_radio_group_class_1 = require("./td-radio-group/td-radio-group.class");
 Object.defineProperty(exports, "TdRadioGroup", { enumerable: true, get: function () { return td_radio_group_class_1.TdRadioGroup; } });
-var td_input_class_1 = require("./td-input/td-input.class");
-Object.defineProperty(exports, "TdInput", { enumerable: true, get: function () { return td_input_class_1.TdInput; } });
-var td_switch_class_1 = require("./td-switch/td-switch.class");
-Object.defineProperty(exports, "TdSwitch", { enumerable: true, get: function () { return td_switch_class_1.TdSwitch; } });
-var td_form_class_1 = require("./td-form/td-form.class");
-Object.defineProperty(exports, "TdForm", { enumerable: true, get: function () { return td_form_class_1.TdForm; } });
-var td_form_item_class_1 = require("./td-form-item/td-form-item.class");
-Object.defineProperty(exports, "TdFormItem", { enumerable: true, get: function () { return td_form_item_class_1.TdFormItem; } });
 var td_select_class_1 = require("./td-select/td-select.class");
 Object.defineProperty(exports, "TdSelect", { enumerable: true, get: function () { return td_select_class_1.TdSelect; } });
-var td_option_class_1 = require("./td-option/td-option.class");
-Object.defineProperty(exports, "TdOption", { enumerable: true, get: function () { return td_option_class_1.TdOption; } });
+var td_switch_class_1 = require("./td-switch/td-switch.class");
+Object.defineProperty(exports, "TdSwitch", { enumerable: true, get: function () { return td_switch_class_1.TdSwitch; } });

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

@@ -9,7 +9,7 @@ const useCheckboxStatus = (props) => {
         // 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)) {
-            return props.value;
+            return props === null || props === void 0 ? void 0 : props.value;
         }
         return props === null || props === void 0 ? void 0 : props.label;
     })();

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

@@ -10,7 +10,7 @@ const useCheckbox = (props) => {
     // checkboxButtonSize,
     // checkboxSize,
     hasOwnLabel, actualValue, } = (0, use_checkbox_status_1.useCheckboxStatus)(props);
-    // const { isDisabled } = useCheckboxDisabled({ model, isChecked })
+    // const { isDisabled } = useCheckboxDisabled({ model, isChecked });
     // const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
     //   formItemContext: elFormItem,
     //   disableIdGeneration: hasOwnLabel,

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

@@ -1,13 +1,28 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeHtml } from '@type-dom/framework';
 import { ITdCheckbox, ITdCheckboxConfig } from './td-checkbox.interface';
-export declare class TdCheckbox extends UI implements ITdCheckbox {
+import { ISize } from '../../../styles';
+export declare class TdCheckbox extends TypeHtml implements ITdCheckbox {
     className: 'TdCheckbox';
+    nodeName: string;
+    dom: HTMLElement;
     props: ITdCheckboxConfig;
     private isFocused?;
     private isLimitExceeded?;
     private actualValue?;
     private intermediate?;
     private hasOwnLabel?;
+    private isDisabled?;
+    private isLabeledByFormItem?;
+    private model?;
     constructor(params?: ITdCheckboxConfig);
-    handleChange(ev?: Event): void;
+    get checkedValue(): boolean | undefined;
+    mounted(): void;
+    handleChange(ev?: InputEvent): void;
+    onClickRoot(e: MouseEvent): Promise<void>;
+    getLabeledValue(value: string | number | boolean): string | number | boolean;
+    emitChangeEvent(checked: string | number | boolean, e: InputEvent | MouseEvent): void;
+    setChecked(checked?: number | string | boolean): void;
+    setDisabled(disabled: boolean): void;
+    setIndeterminate(indeterminate: boolean): void;
+    setSize(size: ISize): void;
 }

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

@@ -1,16 +1,22 @@
 "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 ui_abstract_1 = require("../../../ui/ui.abstract");
-const td_checkbox_style_1 = require("./td-checkbox.style");
 const use_checkbox_1 = require("./composables/use-checkbox");
-class TdCheckbox extends ui_abstract_1.UI {
+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");
+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';
+        (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'
         });
@@ -49,6 +55,10 @@ class TdCheckbox extends ui_abstract_1.UI {
                     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
@@ -67,17 +77,229 @@ class TdCheckbox extends ui_abstract_1.UI {
                 labelSpan.slotChild(params.slot);
             }
             else {
-                labelSpan.addChild(new framework_1.TextNode(params === null || params === void 0 ? void 0 : params.label));
+                labelSpan.slotChild(String(params.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);
+            }
+        });
+        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) {
-        if (this.isLimitExceeded)
+        console.log('handleChange . ');
+        if (this.isLimitExceeded) {
             return;
+        }
         const target = ev === null || ev === void 0 ? void 0 : ev.target;
-        // emit('change', getLabeledValue(target.checked), e)
+        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
+                    });
+                }
+                else {
+                    (_l = this.style) === null || _l === void 0 ? void 0 : _l.setObj({
+                        border: styles_1.$border
+                    });
+                }
+            }
+        }
+        // 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

@@ -0,0 +1,63 @@
+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;
+};