@type-dom/ui 0.0.3 → 0.0.5

package/src/components/form/field-select/field-select.class.js

@@ -8,22 +8,22 @@ class FieldSelect extends framework_1.TypeSelect {
     constructor() {
         super();
         this.className = 'FieldSelect';
-        this.addAttrName('td-select');
+        this.ctrl.addAttrName('td-select');
         this.childNodes = [];
     }
     setOptions(options, value) {
         this.clearChildren();
         const firstOpt = new option_class_1.SelectOption();
         firstOpt.textNode.setText('请选择');
-        firstOpt.addAttrObj({
+        firstOpt.ctrl.addAttrObj({
             label: '请选择',
             value: 0
         });
         this.addChild(firstOpt);
-        options.forEach(opt => {
+        options.forEach((opt) => {
             const optObj = new option_class_1.SelectOption();
             optObj.textNode.setText(opt.label);
-            optObj.addAttrObj({
+            optObj.ctrl.addAttrObj({
                 label: opt.label,
                 value: opt.value
             });
@@ -31,19 +31,20 @@ class FieldSelect extends framework_1.TypeSelect {
             // opt.selected && optObj.addAttribute('selected', true);
             this.addChild(optObj);
         });
-        this.childNodes.forEach(optObj => {
-            if (String(optObj.attrObj.value).trim() === String(value).trim()) {
-                optObj.addAttribute('selected', true);
+        this.childNodes.forEach((optObj) => {
+            var _a;
+            if (String((_a = optObj.props.attrObj) === null || _a === void 0 ? void 0 : _a.value).trim() === String(value).trim()) {
+                optObj.ctrl.addAttribute('selected', true);
             }
             else {
-                // optObj.removeAttribute('selected');
+                // optObj.ctrl.removeAttribute('selected');
             }
         });
         // console.error('this.dom.value is ', this.dom.value);
     }
     resetOptions(options, value) {
         this.setOptions(options, value);
-        this.render(); // 需要单独渲染。
+        this.mount(); // 需要单独渲染。
         // console.error('this.dom.value is ', this.dom.value);
     }
     initEvents() {

package/src/components/form/field-select/option/option.class.js

@@ -6,7 +6,7 @@ class SelectOption extends framework_1.TypeOption {
     constructor() {
         super();
         this.className = 'SelectOption';
-        this.attrObj = {
+        this.props.attrObj = {
             name: 'option'
         };
         this.textNode = new framework_1.TextNode('一个选项');

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

@@ -8,6 +8,12 @@ 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 { TdCheckbox } from './td-checkbox/td-checkbox.class';
+export type { ITdCheckboxConfig } 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 { TdRadio } from './td-radio/td-radio.class';
@@ -24,3 +30,7 @@ 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';

package/src/components/form/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdFormItem = exports.TdForm = exports.TdSwitch = exports.TdInput = exports.TdRadioGroup = exports.TdRadioButton = exports.TdRadio = exports.TdInputField = exports.FieldTextarea = exports.FieldSpan = exports.FieldSelect = exports.FieldRadio = exports.FieldInput = exports.CheckboxOption = exports.CheckboxGroup = exports.RadioOption = exports.RadioGroup = void 0;
+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;
 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; } });
@@ -21,6 +21,12 @@ 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_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_radio_class_1 = require("./td-radio/td-radio.class");
@@ -37,3 +43,7 @@ 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; } });

package/src/components/form/radio-group/radio-group.class.d.ts

@@ -3,10 +3,11 @@ import { RadioOption } from './radio-option/radio-option.class';
 import { IRadioGroup, IRadioGroupConfig } from './radio-group.interface';
 export declare class RadioGroup extends TypeDiv implements IRadioGroup {
     className: 'RadioGroup';
+    props: IRadioGroupConfig;
     childNodes: RadioOption[];
     value: string | number | boolean;
-    constructor(config?: IRadioGroupConfig);
-    setConfig(config?: Partial<IRadioGroupConfig>): void;
+    constructor(params?: IRadioGroupConfig);
+    setup(): void;
     setOptions(options: IOptionConfig[]): void;
     setValue(value: string | number | boolean): void;
 }

package/src/components/form/radio-group/radio-group.class.js

@@ -4,18 +4,18 @@ exports.RadioGroup = void 0;
 const framework_1 = require("@type-dom/framework");
 const radio_option_class_1 = require("./radio-option/radio-option.class");
 class RadioGroup extends framework_1.TypeDiv {
-    constructor(config) {
+    constructor(params) {
         super();
         this.className = 'RadioGroup';
-        this.addAttrName('radio-group');
+        this.ctrl.addAttrName('radio-group');
         this.value = '';
         this.childNodes = [];
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
-        super.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.options) {
-            this.setOptions(config.options);
+    setup() {
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.options) {
+            this.setOptions(props.options);
         }
     }
     setOptions(options) {
@@ -23,7 +23,7 @@ class RadioGroup extends framework_1.TypeDiv {
         const random = Math.random();
         options.forEach((opt) => {
             const optObj = new radio_option_class_1.RadioOption({ parent: this });
-            optObj.input.addAttrObj({
+            optObj.input.ctrl.addAttrObj({
                 name: 'radio' + random,
                 label: opt.label,
                 value: opt.value,
@@ -39,14 +39,15 @@ class RadioGroup extends framework_1.TypeDiv {
     setValue(value) {
         this.value = value;
         // console.error('value is ', value);
-        this.childNodes.forEach(opt => {
-            if (String(opt.input.attrObj.value) === String(value)) {
-                opt.input.setAttrObj({
+        this.childNodes.forEach((opt) => {
+            var _a;
+            if (String((_a = opt.input.props.attrObj) === null || _a === void 0 ? void 0 : _a.value) === String(value)) {
+                opt.input.ctrl.setAttrObj({
                     checked: true
                 });
             }
             else {
-                opt.input.removeAttribute('checked');
+                opt.input.ctrl.removeAttribute('checked');
             }
         });
     }

package/src/components/form/radio-group/radio-option/radio-option.class.d.ts

@@ -3,11 +3,12 @@ import { RadioGroup } from '../radio-group.class';
 import { IRadioOption, IRadioOptionConfig } from './radio-option.interface';
 export declare class RadioOption extends TypeSpan implements IRadioOption {
     className: 'RadioOption';
+    props: IRadioOptionConfig;
     input: Input;
     parent?: RadioGroup;
     childNodes: [Input, TextNode];
     textNode: TextNode;
-    constructor(config?: IRadioOptionConfig);
-    setConfig(config?: IRadioOptionConfig): void;
+    constructor(params?: IRadioOptionConfig);
+    setup(config?: IRadioOptionConfig): void;
     initEvents(): void;
 }

package/src/components/form/radio-group/radio-option/radio-option.class.js

@@ -4,14 +4,14 @@ exports.RadioOption = void 0;
 const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 class RadioOption extends framework_1.TypeSpan {
-    constructor(config) {
+    constructor(params) {
         super();
         this.className = 'RadioOption';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             padding: '0 5px'
         });
         this.input = new framework_1.Input({ parent: this });
-        this.input.addAttrObj({
+        this.input.ctrl.addAttrObj({
             type: 'radio'
             // name: optionSetting.name,
             // label: opt.label,
@@ -20,18 +20,17 @@ class RadioOption extends framework_1.TypeSpan {
         });
         this.textNode = new framework_1.TextNode('');
         this.childNodes = [this.input, this.textNode];
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
-        super.setConfig(config);
+    setup(config) {
         if (config === null || config === void 0 ? void 0 : config.name) {
-            this.input.addAttrName(config.name);
+            this.input.ctrl.addAttrName(config.name);
         }
         if (config === null || config === void 0 ? void 0 : config.value) {
-            this.input.addAttrObj({ value: config.value });
+            this.input.ctrl.addAttrObj({ value: config.value });
         }
         if (config === null || config === void 0 ? void 0 : config.checked) {
-            this.input.addAttrObj({ checked: config.checked || false });
+            this.input.ctrl.addAttrObj({ checked: config.checked || false });
         }
     }
     initEvents() {

package/src/components/form/select/select.class.js

@@ -14,7 +14,7 @@ class Select extends framework_1.TypeSelect {
         this.clearChildren();
         optionSetting.options.forEach((opt) => {
             const optionObj = new framework_1.Option({ parent: this });
-            optionObj.setAttrObj({
+            optionObj.ctrl.setAttrObj({
                 // label: opt.label,
                 value: opt.value,
                 selected: opt.selected || false
@@ -32,14 +32,14 @@ class Select extends framework_1.TypeSelect {
             console.log('this.dom click . ');
             console.log('this.dom.value is ', this.dom.value);
             this.value = this.dom.value; // 对应的opt.label.
-            this.childNodes.forEach(opt => {
+            this.childNodes.forEach((opt) => {
                 if (opt.dom.value === this.dom.value) {
-                    opt.setAttrObj({
+                    opt.ctrl.setAttrObj({
                         selected: true
                     });
                 }
                 else {
-                    opt.removeAttribute('selected');
+                    opt.ctrl.removeAttribute('selected');
                 }
             });
         }));

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

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-autocomplete/td-autocomplete.interface.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

package/src/components/form/td-cascader/td-cascader.interface.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,6 @@
+import { ITdCheckboxConfig } from '../td-checkbox.interface';
+export declare const useCheckboxStatus: (props?: ITdCheckboxConfig) => {
+    isFocused: boolean;
+    hasOwnLabel: boolean;
+    actualValue: string | number | boolean | object | undefined;
+};

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCheckboxStatus = void 0;
+const utils_1 = require("@type-dom/utils");
+const useCheckboxStatus = (props) => {
+    // const checkboxGroup = inject(checkboxGroupContextKey, undefined)
+    const isFocused = false;
+    const actualValue = (() => {
+        // 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.label;
+    })();
+    // const isChecked = computed<boolean>(() => {
+    //   const value = model.value
+    //   if (isBoolean(value)) {
+    //     return value
+    //   } else if (isArray(value)) {
+    //     if (isObject(actualValue.value)) {
+    //       return value.map(toRaw).some((o) => isEqual(o, actualValue.value))
+    //     } else {
+    //       return value.map(toRaw).includes(actualValue.value)
+    //     }
+    //   } else if (value !== null && value !== undefined) {
+    //     return value === props.trueValue || value === props.trueLabel
+    //   } else {
+    //     return !!value
+    //   }
+    // })
+    //
+    // const checkboxButtonSize = useFormSize(
+    //   computed(() => checkboxGroup?.size?.value),
+    //   {
+    //     prop: true,
+    //   }
+    // )
+    // const checkboxSize = useFormSize(computed(() => checkboxGroup?.size?.value))
+    //
+    const hasOwnLabel = !!(props === null || props === void 0 ? void 0 : props.slot) || !(0, utils_1.isPropAbsent)(actualValue);
+    return {
+        // checkboxButtonSize,
+        // isChecked,
+        isFocused,
+        // checkboxSize,
+        hasOwnLabel,
+        actualValue,
+    };
+};
+exports.useCheckboxStatus = useCheckboxStatus;
+// export type CheckboxStatus = ReturnType<typeof useCheckboxStatus>

package/src/components/form/td-checkbox/composables/use-checkbox.d.ts

@@ -0,0 +1,6 @@
+import { ITdCheckboxConfig } from '../td-checkbox.interface';
+export declare const useCheckbox: (props?: ITdCheckboxConfig) => {
+    isFocused: boolean;
+    hasOwnLabel: boolean;
+    actualValue: string | number | boolean | object | undefined;
+};

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCheckbox = void 0;
+const use_checkbox_status_1 = require("./use-checkbox-status");
+const useCheckbox = (props) => {
+    // const { formItem: elFormItem } = useFormItem()
+    // const { model, isGroup, isLimitExceeded } = useCheckboxModel(props)
+    const { isFocused, 
+    // isChecked,
+    // checkboxButtonSize,
+    // checkboxSize,
+    hasOwnLabel, actualValue, } = (0, use_checkbox_status_1.useCheckboxStatus)(props);
+    // const { isDisabled } = useCheckboxDisabled({ model, isChecked })
+    // const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
+    //   formItemContext: elFormItem,
+    //   disableIdGeneration: hasOwnLabel,
+    //   disableIdManagement: isGroup,
+    // })
+    // const { handleChange, onClickRoot } = useCheckboxEvent(props, {
+    //   model,
+    //   isLimitExceeded,
+    //   hasOwnLabel,
+    //   isDisabled,
+    //   isLabeledByFormItem,
+    // })
+    //
+    // const setStoreValue = () => {
+    //   function addToStore() {
+    //     if (isArray(model.value) && !model.value.includes(actualValue.value)) {
+    //       model.value.push(actualValue.value)
+    //     } else {
+    //       model.value = props.trueValue ?? props.trueLabel ?? true
+    //     }
+    //   }
+    //   props.checked && addToStore()
+    // }
+    //
+    // setStoreValue()
+    // useDeprecated(
+    //   {
+    //     from: 'label act as value',
+    //     replacement: 'value',
+    //     version: '3.0.0',
+    //     scope: 'el-checkbox',
+    //     ref: 'https://element-plus.org/en-US/component/checkbox.html',
+    //   },
+    //   computed(() => isGroup.value && isPropAbsent(props.value))
+    // )
+    //
+    // useDeprecated(
+    //   {
+    //     from: 'true-label',
+    //     replacement: 'true-value',
+    //     version: '3.0.0',
+    //     scope: 'el-checkbox',
+    //     ref: 'https://element-plus.org/en-US/component/checkbox.html',
+    //   },
+    //   computed(() => !!props.trueLabel)
+    // )
+    // useDeprecated(
+    //   {
+    //     from: 'false-label',
+    //     replacement: 'false-value',
+    //     version: '3.0.0',
+    //     scope: 'el-checkbox',
+    //     ref: 'https://element-plus.org/en-US/component/checkbox.html',
+    //   },
+    //   computed(() => !!props.falseLabel)
+    // )
+    return {
+        // inputId,
+        // isLabeledByFormItem,
+        // isChecked,
+        // isDisabled,
+        isFocused,
+        // checkboxButtonSize,
+        // checkboxSize,
+        hasOwnLabel,
+        // model,
+        actualValue,
+        // handleChange,
+        // onClickRoot,
+    };
+};
+exports.useCheckbox = useCheckbox;

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

@@ -2,6 +2,12 @@ import { UI } from '../../../ui/ui.abstract';
 import { ITdCheckbox, ITdCheckboxConfig } from './td-checkbox.interface';
 export declare class TdCheckbox extends UI implements ITdCheckbox {
     className: 'TdCheckbox';
-    constructor(config?: ITdCheckboxConfig);
-    setConfig(config?: ITdCheckboxConfig): void;
+    props: ITdCheckboxConfig;
+    private isFocused?;
+    private isLimitExceeded?;
+    private actualValue?;
+    private intermediate?;
+    private hasOwnLabel?;
+    constructor(params?: ITdCheckboxConfig);
+    handleChange(ev?: Event): void;
 }

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

@@ -1,104 +1,83 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckbox = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
-const var_1 = require("../../../styles/var");
+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 {
-    constructor(config) {
-        super({ tag: 'label' }); // label | span
+    constructor(params) {
+        const { hasOwnLabel } = (0, use_checkbox_1.useCheckbox)(params);
+        const tag = !hasOwnLabel ? 'span' : 'label';
+        super(params, tag); // label | span
         this.className = 'TdCheckbox';
-        this.addAttrObj({
+        this.ctrl.addAttrObj({
             name: 'td-checkbox'
         });
-        this.addStyleObj({
-            //   color: getCssVar('checkbox-text-color'),
-            color: var_1.$textColor.regular,
-            //   font-weight: getCssVar('checkbox-font-weight'),
-            fontWeight: var_1.$fontWeightPrimary,
-            // font-size: getCssVar('font-size', 'base'),
-            fontSize: var_1.$fontSizes.base,
-            position: 'relative',
-            cursor: framework_1.StyleCursor.pointer,
-            display: 'inline-flex',
-            alignItems: 'center',
-            whiteSpace: 'nowrap',
-            userSelect: 'none',
-            marginRight: '30px',
-            // height: getCssVarWithDefault(
-            //   'checkbox-height',
-            //   map.get($checkbox-height, 'default')
-            // );
-            height: td_checkbox_style_1.$checkboxHeight['default']
-        });
+        this.ctrl.addStyleObj(td_checkbox_style_1.$checkboxStyle);
         const inputSpan = new framework_1.Span({
             attrObj: {
                 name: 'td-checkbox-input-span'
             },
-            styleObj: {
-                whiteSpace: 'nowrap',
-                cursor: framework_1.StyleCursor.pointer,
-                outline: 'none',
-                display: 'inline - flex',
-                position: 'relative'
-            },
+            styleObj: td_checkbox_style_1.$checkboxInputStyle,
             childNodes: [
                 new framework_1.Input({
                     name: 'original',
                     attrObj: {
-                        type: 'checkbox'
+                        type: 'checkbox',
+                        disabled: params === null || params === void 0 ? void 0 : params.disabled, // todo group or form disabled
+                        value: this.actualValue,
+                        intermediate: this.intermediate,
                     },
-                    styleObj: {
-                        opacity: 0,
-                        outline: 'none',
-                        position: 'absolute',
-                        margin: '0',
-                        width: 0,
-                        height: 0,
-                        zIndex: -1
+                    styleObj: td_checkbox_style_1.$checkboxOriginalStyle,
+                    events: {
+                        click: (ev) => {
+                            ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+                        },
+                        change: (ev) => {
+                            this.handleChange(ev);
+                        },
+                        focus: evt => {
+                            this.isFocused = true;
+                        },
+                        blur: evt => {
+                            this.isFocused = false;
+                        }
                     }
                 }),
                 new framework_1.Span({
                     name: 'inner',
-                    styleObj: {
-                        display: 'inline-block',
-                        position: 'relative',
-                        // border: getCssVar('checkbox-input-border'),
-                        // border: $checkboxInputBorder,
-                        // borderRadius: getCssVar('checkbox-border-radius'),
-                        borderRadius: var_1.$borderRadius['base'],
-                        boxSizing: 'border-box',
-                        // width: getCssVar('checkbox-input-width'),
-                        // width: $checkboxInputWidth,
-                        // height: getCssVar('checkbox-input-height'),
-                        height: td_checkbox_style_1.$checkboxHeight['default'],
-                        // background-color: getCssVar('checkbox-bg-color'),
-                        backgroundColor: var_1.$bgColor.default,
-                        // 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);
-                    }
-                })
+                    styleObj: td_checkbox_style_1.$checkboxInnerStyle,
+                    childNodes: [
+                        new framework_1.Span({
+                            name: 'inner-after',
+                            styleObj: td_checkbox_style_1.$checkboxInnerAfterStyle
+                        })
+                    ]
+                }),
             ]
         });
-        const labelSpan = new framework_1.Span({
-            name: 'label',
-            styleObj: {
-                display: 'inline-block',
-                paddingLeft: '8px',
-                lineHeight: 1,
-                // fontSize: getCssVar('checkbox-font-size'),
-                fontSize: var_1.$fontSizes.base
+        this.addChild(inputSpan);
+        if (hasOwnLabel) {
+            const labelSpan = new framework_1.Span({
+                name: 'label',
+                styleObj: td_checkbox_style_1.$checkboxLabelStyle,
+            });
+            if (params === null || params === void 0 ? void 0 : params.slot) {
+                labelSpan.slotChild(params.slot);
             }
-        });
-        this.childNodes = [inputSpan, labelSpan];
-        this.setConfig(config);
+            else {
+                labelSpan.addChild(new framework_1.TextNode(params === null || params === void 0 ? void 0 : params.label));
+            }
+            this.addChild(labelSpan);
+        }
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
-        super.setConfig(config);
+    handleChange(ev) {
+        if (this.isLimitExceeded)
+            return;
+        const target = ev === null || ev === void 0 ? void 0 : ev.target;
+        // emit('change', getLabeledValue(target.checked), e)
     }
 }
 exports.TdCheckbox = TdCheckbox;

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

@@ -1,5 +1,6 @@
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { ISize } from '../../../styles/size';
+import { IJsonData, XProxy } from '@type-dom/framework';
 export interface ITdCheckbox extends IUI {
     className: 'TdCheckbox';
 }
@@ -11,7 +12,7 @@ export interface ITdCheckboxConfig extends IUIConfig {
     /**
      * @description label of the Checkbox when used inside a `checkbox-group`
      */
-    label?: string | boolean | number | object;
+    label?: string | number | XProxy<IJsonData>;
     /**
      * @description value of the Checkbox when used inside a `checkbox-group`
      */