@type-dom/ui 0.0.9 → 0.1.0

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

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxProps = void 0;
+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),
+// }

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

@@ -1,10 +1,9 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeHtml } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-import { IJsonData, XProxy } from '@type-dom/framework';
-export interface ITdCheckbox extends IUI {
+export interface ITdCheckbox extends ITypeHtml {
     className: 'TdCheckbox';
 }
-export interface ITdCheckboxConfig extends IUIConfig {
+export interface ITdCheckboxConfig extends ITypeConfig {
     /**
      * @description binding value
      */
@@ -12,7 +11,7 @@ export interface ITdCheckboxConfig extends IUIConfig {
     /**
      * @description label of the Checkbox when used inside a `checkbox-group`
      */
-    label?: string | number | XProxy<IJsonData>;
+    label?: string | number;
     /**
      * @description value of the Checkbox when used inside a `checkbox-group`
      */
@@ -77,3 +76,4 @@ export interface ITdCheckboxConfig extends IUIConfig {
      */
     validateEvent?: boolean;
 }
+export type CheckboxValueType = string | number | boolean;

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

@@ -1,4 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
+import { ITdCheckboxConfig } from './td-checkbox.interface';
 export declare const $checkbox: {
     fontSize: string;
     fontWeight: number;
@@ -42,6 +43,7 @@ export declare const $checkboxBorderedInputHeight: {
 };
 export declare const $checkboxFontSize: {
     large: string;
+    default: string;
     small: string;
 };
 export declare const $checkboxBorderedInputWidth: {
@@ -55,6 +57,13 @@ export declare const $checkboxStyle: IStyle;
 export declare const $checkboxInputStyle: IStyle;
 export declare const $checkboxInnerStyle: IStyle;
 export declare const $checkboxInnerAfterStyle: IStyle;
+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;

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

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$checkboxGroupStyle = exports.$checkboxLabelStyle = exports.$checkboxOriginalStyle = exports.$checkboxInnerAfterStyle = exports.$checkboxInnerStyle = exports.$checkboxInputStyle = exports.$checkboxStyle = exports.$checkboxBorderedInputWidth = exports.$checkboxFontSize = exports.$checkboxBorderedInputHeight = exports.$checkboxHeight = exports.$checkboxBorderedPaddingRight = exports.$checkboxBorderedPaddingLeft = exports.$checkbox = void 0;
+exports.$checkboxGroupStyle = exports.$checkboxLabelStyle = exports.$checkboxOriginalStyle = exports.$checkboxInnerBeforeStyle = exports.$checkboxInnerAfterStyle = exports.$checkboxInnerStyle = exports.$checkboxInputStyle = exports.$checkboxStyle = exports.$checkboxBorderedInputWidth = exports.$checkboxFontSize = exports.$checkboxBorderedInputHeight = exports.$checkboxHeight = exports.$checkboxBorderedPaddingRight = exports.$checkboxBorderedPaddingLeft = exports.$checkbox = void 0;
+exports.useCheckboxStyle = useCheckboxStyle;
+exports.useSize = useSize;
+exports.useBordered = useBordered;
+exports.useDisabled = useDisabled;
+exports.useChecked = useChecked;
+exports.useIndeterminate = useIndeterminate;
 const var_1 = require("../../../styles/var");
 exports.$checkbox = {
     fontSize: '14px',
@@ -57,6 +63,7 @@ exports.$checkboxBorderedInputHeight = {
 };
 exports.$checkboxFontSize = {
     large: '14px',
+    default: '14px',
     small: '12px'
 };
 exports.$checkboxBorderedInputWidth = {
@@ -96,18 +103,18 @@ exports.$checkboxInnerStyle = {
     // border: getCssVar('checkbox-input-border'),
     border: exports.$checkbox.inputBorder,
     // borderRadius: getCssVar('checkbox-border-radius'),
-    borderRadius: var_1.$borderRadius['base'],
+    borderRadius: exports.$checkbox.borderRadius,
     boxSizing: 'border-box',
     // width: getCssVar('checkbox-input-width'),
-    // width: $checkboxInputWidth,
+    width: exports.$checkbox.inputWidth,
     // height: getCssVar('checkbox-input-height'),
-    height: exports.$checkboxHeight['default'],
+    height: exports.$checkbox.inputHeight,
     // background-color: getCssVar('checkbox-bg-color'),
-    backgroundColor: var_1.$bgColor.default,
+    backgroundColor: exports.$checkbox.bgColor,
     // z-index: getCssVar('index-normal'),
     zIndex: var_1.$zIndex.normal,
-    transition: `border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
-      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+    transition: `border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
       outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46)`
 };
 exports.$checkboxInnerAfterStyle = {
@@ -116,19 +123,28 @@ exports.$checkboxInnerAfterStyle = {
     border: '1px solid transparent',
     borderLeft: 0,
     borderTop: 0,
-    // height: '7px',
+    height: '7px',
     left: '4px',
     position: 'absolute',
     top: '1px',
-    // transform: 'rotate(45deg) scaleY(0)',
-    // width: '3px',
+    transform: 'rotate(45deg) scaleY(0)', //  scaleY(1)
+    width: '3px',
     transition: 'transform 0.15s ease-in 0.05s',
     transformOrigin: 'center',
-    transform: 'rotate(45deg) scaleY(1)',
     // border-color: var(--el-checkbox-checked-icon-color),
-    borderColor: exports.$checkbox.checkedIconColor,
-    width: '14px',
-    height: '14px'
+    //   borderColor: $checkbox.checkedIconColor,
+};
+exports.$checkboxInnerBeforeStyle = {
+    // content: '',
+    position: 'absolute',
+    display: 'block',
+    // backgroundColor: getCssVar('checkbox-checked-icon-color'),
+    backgroundColor: exports.$checkbox.checkedIconColor,
+    height: '2px',
+    transform: 'scale(0.5)',
+    left: 0,
+    right: 0,
+    top: '5px',
 };
 exports.$checkboxOriginalStyle = {
     opacity: 0,
@@ -150,3 +166,140 @@ exports.$checkboxGroupStyle = {
     fontSize: 0,
     lineHeight: 0,
 };
+function useCheckboxStyle(params) {
+    useSize(params);
+    useBordered(params);
+    useIndeterminate(params);
+    useDisabled(params);
+    useChecked(params);
+}
+function useSize(params) {
+    const size = params.size || 'default';
+    exports.$checkboxStyle.height = exports.$checkboxHeight[size];
+    exports.$checkboxLabelStyle.fontSize = exports.$checkboxFontSize[size];
+    exports.$checkboxInnerStyle.width = exports.$checkboxFontSize[size];
+    exports.$checkboxInnerStyle.height = exports.$checkboxFontSize[size];
+    if (size === 'small') {
+        exports.$checkboxInnerAfterStyle.width = '2px';
+        exports.$checkboxInnerAfterStyle.height = '6px';
+    }
+    else {
+        exports.$checkboxInnerAfterStyle.width = '3px';
+        exports.$checkboxInnerAfterStyle.height = '7px';
+    }
+}
+function useBordered(params) {
+    const bordered = params.border || false;
+    const checked = params.checked || params.modelValue || false;
+    const disabled = params.disabled || false;
+    if (bordered) {
+        exports.$checkboxStyle.padding = '0 ' + (parseInt(exports.$checkboxBorderedPaddingRight.default) - parseInt(var_1.$borderWidth)) + 'px'
+            + ' 0 ' + (parseInt(exports.$checkboxBorderedPaddingLeft.default) - parseInt(var_1.$borderWidth)) + 'px';
+        exports.$checkboxStyle.borderRadius = var_1.$borderRadius.base;
+        exports.$checkboxStyle.border = var_1.$border;
+        exports.$checkboxStyle.boxSizing = 'border-box';
+        if (checked) {
+            exports.$checkboxStyle.borderColor = var_1.$colorPrimary;
+        }
+        else {
+            exports.$checkboxStyle.border = var_1.$border;
+        }
+        if (disabled) {
+            exports.$checkboxStyle.borderColor = var_1.$borderColor.lighter;
+        }
+        else {
+            exports.$checkboxStyle.border = var_1.$border;
+        }
+    }
+    else {
+        exports.$checkboxStyle.border = undefined;
+    }
+}
+function useDisabled(params) {
+    const disabled = params.disabled || false;
+    const checked = params.checked || false;
+    const indeterminate = params.indeterminate || false;
+    if (disabled) {
+        exports.$checkboxStyle.cursor = 'not-allowed';
+        exports.$checkboxInnerStyle.cursor = 'not-allowed';
+        if (checked) {
+            exports.$checkboxInnerStyle.backgroundColor = exports.$checkbox.disabledCheckedInputFill;
+            exports.$checkboxInnerStyle.borderColor = exports.$checkbox.disabledCheckedInputBorderColor;
+            exports.$checkboxInnerAfterStyle.borderColor = exports.$checkbox.disabledCheckedIconColor;
+        }
+        if (indeterminate) {
+            exports.$checkboxInnerStyle.backgroundColor = exports.$checkbox.disabledCheckedInputFill;
+            exports.$checkboxInnerStyle.borderColor = exports.$checkbox.disabledCheckedInputBorderColor;
+            exports.$checkboxInnerAfterStyle.borderColor = exports.$checkbox.disabledCheckedIconColor;
+        }
+        exports.$checkboxLabelStyle.cursor = 'not-allowed';
+        exports.$checkboxLabelStyle.color = var_1.$disabled.textColor;
+    }
+    else {
+        exports.$checkboxStyle.cursor = 'pointer';
+        exports.$checkboxInnerStyle.cursor = 'pointer';
+        exports.$checkboxLabelStyle.cursor = 'pointer';
+        exports.$checkboxLabelStyle.color = exports.$checkbox.textColor;
+    }
+}
+function useChecked(params) {
+    let checked = params.checked || params.modelValue || false;
+    const indeterminate = params.indeterminate || false;
+    const bordered = params.border || false;
+    if (params.modelValue !== undefined) { // todo checkbox 的值没有选中
+        checked = !!params.modelValue;
+    }
+    if (checked) {
+        exports.$checkboxStyle.color = exports.$checkbox.checkedTextColor;
+        exports.$checkboxInnerStyle.backgroundColor = exports.$checkbox.checkedBgColor;
+        exports.$checkboxInnerStyle.borderColor = exports.$checkbox.checkedInputBorderColor;
+        exports.$checkboxInnerAfterStyle.transform = 'rotate(45deg) scaleY(1)';
+        exports.$checkboxInnerAfterStyle.borderColor = exports.$checkbox.checkedIconColor;
+        exports.$checkboxLabelStyle.color = exports.$checkbox.checkedTextColor;
+        if (indeterminate) {
+            return;
+        }
+        else {
+            exports.$checkboxInnerBeforeStyle.display = 'none';
+        }
+        if (bordered) {
+            exports.$checkboxStyle.borderColor = var_1.$colorPrimary;
+        }
+        else {
+            // $checkboxStyle.border = $border;
+        }
+    }
+    else {
+        exports.$checkboxInnerAfterStyle.transform = 'rotate(45deg) scaleY(0)';
+        exports.$checkboxStyle.color = exports.$checkbox.textColor;
+        if (indeterminate) {
+            return;
+        }
+        else {
+            exports.$checkboxInnerBeforeStyle.display = 'none';
+        }
+        if (bordered) {
+            exports.$checkboxStyle.borderColor = var_1.$borderColor.lighter;
+        }
+        else {
+            exports.$checkboxStyle.border = undefined;
+        }
+        exports.$checkboxInnerStyle.backgroundColor = exports.$checkbox.bgColor;
+        exports.$checkboxInnerStyle.borderColor = var_1.$borderColor.base;
+        // $checkboxInnerAfterStyle.borderColor = $checkbox.iconColor;
+        // $checkboxLabelStyle.color = $checkbox.textColor;
+    }
+}
+function useIndeterminate(params) {
+    const indeterminate = params.indeterminate || false;
+    if (indeterminate) {
+        exports.$checkboxInnerStyle.backgroundColor = exports.$checkbox.checkedBgColor;
+        exports.$checkboxInnerStyle.borderColor = exports.$checkbox.checkedInputBorderColor;
+        exports.$checkboxInnerBeforeStyle.display = 'block';
+        exports.$checkboxInnerAfterStyle.display = 'none';
+    }
+    else {
+        exports.$checkboxInnerBeforeStyle.display = 'none';
+        exports.$checkboxInnerAfterStyle.display = 'block';
+    }
+}

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

@@ -1,14 +1,20 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeLabel } from '@type-dom/framework';
+import { ISize } from '../../../styles';
 import { ITdCheckboxConfig } from '../td-checkbox/td-checkbox.interface';
 import { ITdCheckboxButton } from './td-checkbox-button.interface';
-export declare class TdCheckboxButton extends UI implements ITdCheckboxButton {
+export declare class TdCheckboxButton extends TypeLabel implements ITdCheckboxButton {
     className: 'TdCheckboxButton';
     props: ITdCheckboxConfig;
     private isFocused?;
     private isLimitExceeded?;
     private actualValue?;
     private intermediate?;
-    private hasOwnLabel?;
     constructor(params?: ITdCheckboxConfig);
+    get checkedValue(): boolean | undefined;
     handleChange(ev?: Event): void;
+    setChecked(checked?: number | string | boolean): void;
+    setDisabled(disabled: boolean): void;
+    setSize(size: ISize): void;
+    setFirstStyle(): void;
+    setLastStyle(): void;
 }

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

@@ -2,19 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckboxButton = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const use_checkbox_1 = require("../td-checkbox/composables/use-checkbox");
-const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
+const styles_1 = require("../../../styles");
+const td_button_style_1 = require("../../basic/td-button/td-button.style");
 const td_checkbox_button_style_1 = require("./td-checkbox-button.style");
-class TdCheckboxButton extends ui_abstract_1.UI {
+class TdCheckboxButton extends framework_1.TypeLabel {
     constructor(params = {}) {
-        super(params, 'label'); // label | span
+        super(); // label | span
         this.className = 'TdCheckboxButton';
-        this.attr.addObj({
-            name: 'td-checkbox-button'
-        });
+        // this.useTag('label');
+        (0, td_checkbox_button_style_1.useCheckboxButtonStyle)(params);
+        this.attr.addName('td-checkbox-button');
         this.style.addObj(td_checkbox_button_style_1.$checkboxButtonStyle);
-        const { hasOwnLabel } = (0, use_checkbox_1.useCheckbox)(params);
         const original = new framework_1.Input({
             name: 'original',
             attrObj: {
@@ -23,7 +21,7 @@ class TdCheckboxButton extends ui_abstract_1.UI {
                 value: this.actualValue,
                 intermediate: this.intermediate,
             },
-            styleObj: td_checkbox_style_1.$checkboxOriginalStyle,
+            styleObj: td_checkbox_button_style_1.$checkboxButtonOriginalStyle,
             events: {
                 click: (ev) => {
                     ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
@@ -31,35 +29,125 @@ class TdCheckboxButton extends ui_abstract_1.UI {
                 change: (ev) => {
                     this.handleChange(ev);
                 },
-                focus: evt => {
+                focus: (evt) => {
                     this.isFocused = true;
                 },
-                blur: evt => {
+                blur: (evt) => {
                     this.isFocused = false;
-                }
-            }
+                },
+            },
         });
         this.addChild(original);
-        if (hasOwnLabel) {
-            const labelSpan = new framework_1.Span({
-                name: 'inner',
-                styleObj: td_checkbox_button_style_1.$checkboxButtonInnerStyle,
-            });
-            if (params === null || params === void 0 ? void 0 : params.slot) {
-                labelSpan.slotChild(params.slot);
-            }
-            else if (params === null || params === void 0 ? void 0 : params.label) {
-                labelSpan.addChild(new framework_1.TextNode(params === null || params === void 0 ? void 0 : params.label));
-            }
-            this.addChild(labelSpan);
+        const labelSpan = new framework_1.Span({
+            name: 'inner',
+            styleObj: td_checkbox_button_style_1.$checkboxButtonInnerStyle,
+        });
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            labelSpan.slotChild(params.slot);
+        }
+        else if (params === null || params === void 0 ? void 0 : params.label) {
+            labelSpan.addChild(new framework_1.TextNode(params === null || params === void 0 ? void 0 : params.label));
         }
+        this.addChild(labelSpan);
+        this.addEvents({
+            click: (evt) => {
+                // todo
+                console.log('click . ');
+                if (this.props.disabled) {
+                    return;
+                }
+                // const input = this.down<Input>('name', 'original')!;
+                // const checked = (input.dom.checked = !input.dom.checked);
+                const checked = !this.props.checked;
+                this.setChecked(checked);
+            },
+        });
         this.props = this.useParams(params);
     }
+    get checkedValue() {
+        var _a;
+        return (_a = this.down('name', 'original')) === null || _a === void 0 ? void 0 : _a.dom.checked;
+    }
     handleChange(ev) {
         if (this.isLimitExceeded)
             return;
         const target = ev === null || ev === void 0 ? void 0 : ev.target;
         // emit('change', getLabeledValue(target.checked), e)
     }
+    setChecked(checked) {
+        var _a, _b;
+        //   todo 待实现 选中、不选中
+        console.log('setChecked . checked is ', checked);
+        const inner = this.down('name', 'inner');
+        const input = this.down('name', 'original');
+        input.dom.checked = !!checked;
+        this.props.checked = !!checked;
+        if (checked) {
+            (_a = inner === null || inner === void 0 ? void 0 : inner.style) === null || _a === void 0 ? void 0 : _a.setObj({
+                color: td_checkbox_button_style_1.$checkboxButton.checkedTextColor,
+                backgroundColor: td_checkbox_button_style_1.$checkboxButton.checkedBgColor,
+                borderColor: td_checkbox_button_style_1.$checkboxButton.checkedBorderColor,
+                boxShadow: '-1px 0 0 0 ' + styles_1.$colors.primary['light-7'],
+            });
+        }
+        else {
+            (_b = inner === null || inner === void 0 ? void 0 : inner.style) === null || _b === void 0 ? void 0 : _b.setObj({
+                color: styles_1.$button.textColor,
+                backgroundColor: styles_1.$button.bgColor,
+                borderColor: styles_1.$button.borderColor,
+                boxShadow: undefined,
+            });
+        }
+        if (this.props.disabled) {
+            this.setDisabled(true);
+        }
+    }
+    setDisabled(disabled) {
+        var _a, _b;
+        const label = this.down('name', 'label');
+        const inner = this.down('name', 'inner');
+        this.props.disabled = disabled;
+        if (disabled) {
+            (_a = inner === null || inner === void 0 ? void 0 : inner.style) === null || _a === void 0 ? void 0 : _a.setObj({
+                color: styles_1.$disabled.textColor,
+                cursor: 'not-allowed',
+                backgroundColor: styles_1.$button.disabled.bgColor,
+                borderColor: styles_1.$button.disabled.borderColor,
+                boxShadow: 'none',
+            });
+        }
+        else {
+            (_b = inner === null || inner === void 0 ? void 0 : inner.style) === null || _b === void 0 ? void 0 : _b.setObj({
+                color: styles_1.$button.textColor,
+                cursor: 'pointer',
+                background: styles_1.$button.bgColor,
+                border: styles_1.$border,
+            });
+        }
+    }
+    setSize(size) {
+        const paddingVertical = td_button_style_1.$buttonPaddingVertical[size];
+        const paddingHorizontal = td_button_style_1.$buttonPaddingHorizontal[size];
+        const sizeStyle = (0, td_button_style_1.buttonSize)(paddingVertical, paddingHorizontal, styles_1.$fontSizes[size], 0);
+        const inner = this.down('name', 'inner');
+        inner === null || inner === void 0 ? void 0 : inner.style.setObj(sizeStyle);
+    }
+    // 在CheckboxGroup中位于首位时
+    setFirstStyle() {
+        const inner = this.down('name', 'inner');
+        inner === null || inner === void 0 ? void 0 : inner.style.setObj({
+            borderLeft: styles_1.$border,
+            borderTopLeftRadius: styles_1.$borderRadius.base,
+            borderBottomLeftRadius: styles_1.$borderRadius.base,
+            boxShadow: 'none !important'
+        });
+    }
+    setLastStyle() {
+        const inner = this.down('name', 'inner');
+        inner === null || inner === void 0 ? void 0 : inner.style.setObj({
+            borderTopRightRadius: styles_1.$borderRadius.base,
+            borderBottomRightRadius: styles_1.$borderRadius.base
+        });
+    }
 }
 exports.TdCheckboxButton = TdCheckboxButton;

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

@@ -1,6 +1,4 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdCheckboxButton extends IUI {
+import { ITypeLabel } from '@type-dom/framework';
+export interface ITdCheckboxButton extends ITypeLabel {
     className: 'TdCheckboxButton';
 }
-export interface ITdCheckboxButtonConfig extends IUIConfig {
-}

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

@@ -1,9 +1,16 @@
 import { IStyle } from '@type-dom/css-type';
+import { ITdCheckboxConfig } from '../td-checkbox/td-checkbox.interface';
 export declare const $checkboxButton: {
     checkedBgColor: string;
     checkedTextColor: string;
     checkedBorderColor: string;
 };
 export declare const $checkboxButtonStyle: IStyle;
+export declare let $checkboxButtonInnerStyle: IStyle;
+export declare const $checkboxButtonInnerHoverStyle: IStyle;
 export declare const $checkboxButtonOriginalStyle: IStyle;
-export declare const $checkboxButtonInnerStyle: IStyle;
+export declare function useCheckboxButtonStyle(params: ITdCheckboxConfig): void;
+export declare function useCheckedStyle(params: ITdCheckboxConfig): void;
+export declare function useDisabledStyle(params: ITdCheckboxConfig): void;
+export declare function useFocusStyle(params: ITdCheckboxConfig): void;
+export declare function useSize(params: ITdCheckboxConfig): void;