@type-dom/ui 0.0.10 → 0.1.0

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,14 +103,14 @@ 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),
@@ -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;

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

@@ -1,28 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$checkboxButtonInnerStyle = exports.$checkboxButtonOriginalStyle = exports.$checkboxButtonStyle = exports.$checkboxButton = void 0;
+exports.$checkboxButtonOriginalStyle = exports.$checkboxButtonInnerHoverStyle = exports.$checkboxButtonInnerStyle = exports.$checkboxButtonStyle = exports.$checkboxButton = void 0;
+exports.useCheckboxButtonStyle = useCheckboxButtonStyle;
+exports.useCheckedStyle = useCheckedStyle;
+exports.useDisabledStyle = useDisabledStyle;
+exports.useFocusStyle = useFocusStyle;
+exports.useSize = useSize;
 const var_1 = require("../../../styles/var");
 const transition_1 = require("../../../styles/transition");
 const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
+const td_button_style_1 = require("../../basic/td-button/td-button.style");
 exports.$checkboxButton = {
     // 'checked-bg-color': getCssVar('color-primary'),
-    checkedBgColor: var_1.$colors.primary.base,
+    checkedBgColor: var_1.$colorPrimary,
     // 'checked-text-color': getCssVar('color-white'),
-    checkedTextColor: var_1.$colors.white,
+    checkedTextColor: var_1.$colorWhite,
     // 'checked-border-color': getCssVar('color-primary'),
-    checkedBorderColor: var_1.$colors.primary.base,
+    checkedBorderColor: var_1.$colorPrimary,
 };
 exports.$checkboxButtonStyle = {
     position: 'relative',
     display: 'inline-block',
 };
-exports.$checkboxButtonOriginalStyle = {
-    opacity: 0,
-    outline: 'none',
-    position: 'absolute',
-    margin: 0,
-    zIndex: -1,
-};
 exports.$checkboxButtonInnerStyle = {
     display: 'inline-block',
     lineHeight: 1,
@@ -37,13 +36,14 @@ exports.$checkboxButtonInnerStyle = {
     // ),
     background: var_1.$button.bgColor,
     // border: getCssVar('border'),
+    border: var_1.$border,
     borderLeftColor: 'transparent',
     // color: var
     //   #{getCssVarName('button-text-color')},
     //   map.get($button, 'text-color',
     // ),
     color: var_1.$button.textColor,
-    // -webkit-appearance: 'none',
+    '-webkit-appearance': 'none',
     textAlign: 'center',
     boxSizing: 'border-box',
     outline: 'none',
@@ -53,3 +53,80 @@ exports.$checkboxButtonInnerStyle = {
     transition: transition_1.$transition.all,
     userSelect: 'none',
 };
+exports.$checkboxButtonInnerHoverStyle = {
+    color: var_1.$colorPrimary,
+};
+exports.$checkboxButtonOriginalStyle = {
+    opacity: 0,
+    outline: 'none',
+    position: 'absolute',
+    margin: 0,
+    zIndex: -1,
+};
+function useCheckboxButtonStyle(params) {
+    useCheckedStyle(params);
+    useDisabledStyle(params);
+    useSize(params);
+    // const paddingVertical = parseInt($buttonPaddingVertical.default) - parseInt($buttonBorderWidth) + 'px';
+    // const paddingHorizontal = parseInt($buttonPaddingHorizontal.default) - parseInt($buttonBorderWidth) + 'px';
+    // const fontSize = $fontSizes.default;
+    // $checkboxButtonInnerStyle = Object.assign($checkboxButtonInnerStyle, buttonSize(paddingVertical, paddingHorizontal, fontSize, 0))
+}
+function useCheckedStyle(params) {
+    const checked = params.checked;
+    if (checked) {
+        exports.$checkboxButtonInnerStyle.color = exports.$checkboxButton.checkedTextColor;
+        exports.$checkboxButtonInnerStyle.backgroundColor = exports.$checkboxButton.checkedBgColor;
+        exports.$checkboxButtonInnerStyle.borderColor = exports.$checkboxButton.checkedBorderColor;
+        exports.$checkboxButtonInnerStyle.boxShadow = '-1px 0 0 0 ' + var_1.$colors.primary['light-7'];
+        //   todo 如果是第一个子节点 则添加 border-left-color: getCssVar('checkbox-button-checked-border-color');
+        //   $checkboxButtonInnerStyle.borderLeftColor = $checkboxButton.checkedBorderColor;
+    }
+    else {
+        exports.$checkboxButtonInnerStyle.color = var_1.$button.textColor;
+        exports.$checkboxButtonInnerStyle.backgroundColor = var_1.$button.bgColor;
+        exports.$checkboxButtonInnerStyle.borderColor = var_1.$button.borderColor;
+        exports.$checkboxButtonInnerStyle.boxShadow = undefined;
+    }
+}
+function useDisabledStyle(params) {
+    const disabled = params.disabled;
+    if (disabled) {
+        exports.$checkboxButtonInnerStyle.color = var_1.$disabled.textColor;
+        exports.$checkboxButtonInnerStyle.cursor = 'not-allowed';
+        exports.$checkboxButtonInnerStyle.backgroundImage = 'none';
+        exports.$checkboxButtonInnerStyle.backgroundColor = var_1.$button.disabled.bgColor;
+        exports.$checkboxButtonInnerStyle.borderColor = var_1.$button.disabled.borderColor;
+        exports.$checkboxButtonInnerStyle.boxShadow = 'none';
+    }
+    else {
+        exports.$checkboxButtonInnerStyle.color = var_1.$button.textColor;
+        exports.$checkboxButtonInnerStyle.cursor = 'pointer';
+        exports.$checkboxButtonInnerStyle.backgroundImage = undefined;
+        exports.$checkboxButtonInnerStyle.background = var_1.$button.bgColor;
+        exports.$checkboxButtonInnerStyle.border = var_1.$border;
+        exports.$checkboxButtonInnerStyle.boxShadow = undefined;
+    }
+}
+function useFocusStyle(params) {
+    const focus = false;
+    if (focus) {
+        exports.$checkboxButtonInnerStyle.borderColor = exports.$checkboxButton.checkedBorderColor;
+    }
+    else {
+        exports.$checkboxButtonInnerStyle.boxShadow = undefined;
+    }
+}
+function useSize(params) {
+    const size = params.size || 'default';
+    //         @include button-size(
+    //           map.get($button-padding-vertical, $size) - $button-border-width,
+    //           map.get($button-padding-horizontal, $size) - $button-border-width,
+    //           map.get($button-font-size, $size),
+    //           0
+    //         );
+    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, var_1.$fontSizes[size], 0);
+    exports.$checkboxButtonInnerStyle = Object.assign(exports.$checkboxButtonInnerStyle, sizeStyle);
+}

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

@@ -1,7 +1,15 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdCheckboxGroup, ITdCheckboxGroupConfig } from './td-checkbox-group.interface';
-export declare class TdCheckboxGroup extends UI implements ITdCheckboxGroup {
+import { TypeHtml } from '@type-dom/framework';
+import { TdCheckbox } from '../td-checkbox/td-checkbox.class';
+import { TdCheckboxButton } from '../td-checkbox-button/td-checkbox-button.class';
+import { CheckboxGroupValueType, ITdCheckboxGroup, ITdCheckboxGroupConfig } from './td-checkbox-group.interface';
+export declare class TdCheckboxGroup extends TypeHtml implements ITdCheckboxGroup {
     className: 'TdCheckboxGroup';
+    nodeName: string;
+    dom: HTMLElement;
     props: ITdCheckboxGroupConfig;
+    childNodes: (TdCheckbox | TdCheckboxButton)[];
     constructor(params?: ITdCheckboxGroupConfig);
+    setup(): void;
+    changeEvent: (value: CheckboxGroupValueType) => Promise<void>;
+    setMinMax(checkbox: TdCheckbox | TdCheckboxButton): void;
 }