@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1,10 +1,12 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { ISize } from '../../../styles/size';
-import { IJsonData, XProxy } from '@type-dom/framework';
-export interface ITdCheckbox extends IUI {
+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 IUIConfig {
+export interface CheckboxProps extends TypeProps {
+    nodeName?: 'span' | 'label';
     /**
      * @description binding value
      */
@@ -12,7 +14,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`
      */
@@ -20,7 +22,7 @@ export interface ITdCheckboxConfig extends IUIConfig {
     /**
      * @description Set indeterminate state, only responsible for style control
      */
-    indeterminate?: boolean;
+    indeterminate?: Signal<boolean | undefined>;
     /**
      * @description whether the Checkbox is disabled
      */
@@ -67,7 +69,7 @@ export interface ITdCheckboxConfig extends IUIConfig {
     /**
      * @description size of the Checkbox
      */
-    size?: ISize;
+    size?: ComponentSize;
     /**
      * @description input tabindex
      */
@@ -77,3 +79,4 @@ export interface ITdCheckboxConfig extends IUIConfig {
      */
     validateEvent?: boolean;
 }
+export type CheckboxValueType = string | number | boolean | object;

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

@@ -1,4 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
+import { CheckboxProps } 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: 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;

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',
@@ -40,24 +46,25 @@ exports.$checkbox = {
     inputBorderColorHover: var_1.$colorPrimary,
 };
 exports.$checkboxBorderedPaddingLeft = {
-    'large': '12px',
-    'default': '10px',
-    'small': '8px',
+    large: '12px',
+    default: '10px',
+    small: '8px',
 };
 exports.$checkboxBorderedPaddingRight = {
-    'large': '20px',
-    'default': '16px',
-    'small': '12px',
+    large: '20px',
+    default: '16px',
+    small: '12px',
 };
 exports.$checkboxHeight = var_1.$commonComponentSize;
 exports.$checkboxBorderedInputHeight = {
     large: '14px',
     default: '12px',
-    small: '12px'
+    small: '12px',
 };
 exports.$checkboxFontSize = {
     large: '14px',
-    small: '12px'
+    default: '14px',
+    small: '12px',
 };
 exports.$checkboxBorderedInputWidth = {
     $checkboxBorderedInputHeight: exports.$checkboxBorderedInputHeight,
@@ -96,19 +103,17 @@ 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),
-      outline 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 = {
     boxSizing: 'content-box',
@@ -116,19 +121,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 +164,150 @@ 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/style/css.d.ts

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

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

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

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

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

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

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

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

@@ -1,14 +1,10 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdCheckboxConfig } from '../td-checkbox/td-checkbox.interface';
+import { TypeLabelProps, TypeLabel } from '@type-dom/framework';
+import { CheckboxProps } from '../td-checkbox/td-checkbox.interface';
 import { ITdCheckboxButton } from './td-checkbox-button.interface';
-export declare class TdCheckboxButton extends UI implements ITdCheckboxButton {
+import './style/index';
+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);
-    handleChange(ev?: Event): void;
+    props: CheckboxProps & TypeLabelProps;
+    constructor(params?: CheckboxProps);
+    setup(): void;
 }

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

@@ -1,65 +1,135 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckboxButton = void 0;
+const signals_1 = require("@type-dom/signals");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_checkbox_const_1 = require("../td-checkbox/td-checkbox.const");
 const use_checkbox_1 = require("../td-checkbox/composables/use-checkbox");
-const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
-const td_checkbox_button_style_1 = require("./td-checkbox-button.style");
-class TdCheckboxButton extends ui_abstract_1.UI {
+require("./style/index");
+const utils_1 = require("@type-dom/utils");
+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'
+            name: '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: {
-                type: 'checkbox',
-                disabled: params === null || params === void 0 ? void 0 : params.disabled, // todo group or form disabled
-                value: this.actualValue,
-                intermediate: this.intermediate,
-            },
-            styleObj: td_checkbox_style_1.$checkboxOriginalStyle,
-            events: {
-                click: (ev) => {
-                    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+        this.assignProps(td_checkbox_const_1.checkboxProps);
+        this.addEmits(td_checkbox_const_1.checkboxEmits);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d;
+        const props = this.props;
+        const slots = (0, framework_1.useSlots)();
+        const { isFocused, isChecked, isDisabled, checkboxButtonSize, model, actualValue, handleChange, } = (0, use_checkbox_1.useCheckbox)(props, slots);
+        const checkboxGroup = this.inject(td_checkbox_const_1.checkboxGroupContextKey, undefined);
+        const ns = (0, use_namespace_1.useNamespace)('checkbox');
+        const activeStyle = (0, signals_1.computed)(() => {
+            var _a, _b, _c, _d;
+            const fillValue = (_b = (_a = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.fill) === null || _a === void 0 ? void 0 : _a.get()) !== null && _b !== void 0 ? _b : '';
+            return {
+                backgroundColor: fillValue,
+                borderColor: fillValue,
+                color: (_d = (_c = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.textColor) === null || _c === void 0 ? void 0 : _c.get()) !== null && _d !== void 0 ? _d : '',
+                boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : undefined,
+            };
+        });
+        const labelKls = (0, signals_1.computed)(() => {
+            return [
+                ns.b('button'),
+                ns.bm('button', checkboxButtonSize.get()),
+                ns.is('disabled', isDisabled.get()),
+                ns.is('checked', isChecked.get()),
+                ns.is('focus', isFocused.get()),
+            ];
+        });
+        this.attr.addClass(labelKls);
+        if (props.trueValue ||
+            props.falseValue ||
+            props.trueLabel ||
+            props.falseLabel) {
+            this.addChild(new framework_1.Input({
+                vModel: model,
+                class: ns.be('button', 'original'),
+                name: props.name,
+                disabled: isDisabled,
+                trueValue: (_b = (_a = props.trueValue) !== null && _a !== void 0 ? _a : this.props.trueValue) !== null && _b !== void 0 ? _b : true,
+                falseValue: (_d = (_c = props.falseValue) !== null && _c !== void 0 ? _c : this.props.falseValue) !== null && _d !== void 0 ? _d : false,
+                attrObj: {
+                    type: 'checkbox',
+                    tabindex: props.tabindex,
+                },
+                events: {
+                    change: (ev) => {
+                        handleChange(ev);
+                        ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+                    },
+                    focus: () => {
+                        isFocused.set(true);
+                    },
+                    blur: () => {
+                        isFocused.set(false);
+                    },
+                    click: (evt) => {
+                        evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                    },
                 },
-                change: (ev) => {
-                    this.handleChange(ev);
+            }));
+        }
+        else {
+            this.addChild(new framework_1.Input({
+                vModel: model,
+                class: ns.be('button', 'original'),
+                name: props.name,
+                disabled: isDisabled,
+                value: actualValue,
+                attrObj: {
+                    type: 'checkbox',
+                    // checked: isChecked.get(),
+                    tabindex: props.tabindex,
                 },
-                focus: evt => {
-                    this.isFocused = true;
+                events: {
+                    change: (evt) => {
+                        handleChange(evt);
+                        evt === null || evt === void 0 ? void 0 : evt.stopPropagation(); // 必须加这个，否则会再触发一次上层的 change todo ????
+                    },
+                    focus: () => {
+                        isFocused.set(true);
+                    },
+                    blur: () => {
+                        isFocused.set(false);
+                    },
+                    click: (evt) => {
+                        evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                    },
                 },
-                blur: evt => {
-                    this.isFocused = false;
+            }));
+        }
+        if (props.slot || (slots === null || slots === void 0 ? void 0 : slots.default) || props.label) {
+            this.addChild(new framework_1.Span({
+                class: ns.be('button', 'inner'),
+                styleObj: isChecked ? activeStyle : undefined,
+                slot: this.props.slot || (slots === null || slots === void 0 ? void 0 : slots.default) || props.label,
+            }));
+        }
+        // add by me
+        this.addEmits({
+            change: (newValue) => {
+                console.warn('change emit , newValue is ', newValue);
+                const selected = model.get();
+                // todo 数组 还时 值
+                if ((0, utils_1.isArray)(selected)) {
+                    model === null || model === void 0 ? void 0 : model.set(selected.includes(actualValue.get())
+                        ? selected.filter((item) => item !== actualValue.get())
+                        : [...selected, actualValue.get()]);
                 }
-            }
+                else {
+                    model.set(newValue);
+                }
+            },
         });
-        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);
-        }
-        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)
     }
 }
 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 { CheckboxProps } 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: CheckboxProps): void;
+export declare function useCheckedStyle(params: CheckboxProps): void;
+export declare function useDisabledStyle(params: CheckboxProps): void;
+export declare function useFocusStyle(params: CheckboxProps): void;
+export declare function useSize(params: CheckboxProps): void;