@type-dom/ui 0.0.4 → 0.0.5

package/src/components/feedback/td-notification/td-notification.style.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useType = exports.useStyle = exports.$notificationCloseBtnStyle = exports.$notificationIconStyle = exports.$notificationContentStyle = exports.$notificationTitleStyle = exports.$notificationGroupStyle = exports.$notificationStyle = exports.$notification = exports.$messageCloseSize = void 0;
+const var_1 = require("../../../styles/var");
+const td_message_style_1 = require("../td-message/td-message.style");
+exports.$messageCloseSize = td_message_style_1.$message.closeSize;
+exports.$notification = {
+    width: '330px',
+    padding: '14px 26px 14px 13px',
+    radius: '8px',
+    // shadow: getCssVar(box-shadow-light),
+    shadow: var_1.$boxShadow.light,
+    // border-color: getCssVar(border-color-lighter),
+    borderColor: var_1.$borderColor.lighter,
+    iconSize: '24px',
+    //   close-font-size: var(
+    //     #{getCssVarName(message-close-size)},
+    //     map.get($message, close-size)
+    // ),
+    closeFontSize: exports.$messageCloseSize,
+    groupMarginLeft: '13px',
+    groupMarginRight: '8px',
+    // content-font-size: getCssVar(font-size-base),
+    contentFontSize: var_1.$fontSizes.base,
+    // content-color: getCssVar(text-color-regular),
+    contentColor: var_1.$textColor.regular,
+    titleFontSize: '16px',
+    // title-color: getCssVar(text-color-primary),
+    titleColor: var_1.$textColor.regular,
+    // close-color: getCssVar(text-color-secondary),
+    closeColor: var_1.$textColor.secondary,
+    // close-hover-color: getCssVar(text-color-regular),
+    closeHoverColor: var_1.$textColor.regular,
+};
+exports.$notificationStyle = {
+    display: 'flex',
+    // width: getCssVar('notification-width'),
+    width: exports.$notification.width,
+    // padding: getCssVar('notification-padding'),
+    padding: exports.$notification.padding,
+    // border-radius: getCssVar('notification-radius'),
+    borderRadius: exports.$notification.radius,
+    boxSizing: 'border-box',
+    // border: 1px solid getCssVar('notification-border-color'),
+    border: `1px solid ${exports.$notification.borderColor}`,
+    position: 'fixed',
+    // background-color: getCssVar('bg-color', 'overlay'),
+    backgroundColor: var_1.$bgColor.overlay,
+    // box-shadow: getCssVar('notification-shadow'),
+    boxShadow: exports.$notification.shadow,
+    // transition: opacity getCssVar('transition-duration'),
+    transition: 'opacity ' +
+        var_1.$transitionDuration +
+        ', ' +
+        //   transform getCssVar('transition-duration'),
+        'transform ' +
+        var_1.$transitionDuration +
+        ', ' +
+        //   top getCssVar('transition-duration'),
+        'top ' +
+        var_1.$transitionDuration +
+        ', ' +
+        //   left getCssVar('transition-duration'),
+        'left ' +
+        var_1.$transitionDuration +
+        ', ' +
+        //   right getCssVar('transition-duration'), top 0.4s,
+        'right ' +
+        var_1.$transitionDuration +
+        ', ' +
+        //   bottom getCssVar('transition-duration'),
+        'bottom ' +
+        var_1.$transitionDuration +
+        ', ',
+    overflowWrap: 'break-word',
+    overflow: 'hidden',
+    zIndex: 9999,
+};
+exports.$notificationGroupStyle = {
+    //   margin-left: getCssVar('notification-group-margin-left');
+    marginLeft: exports.$notification.groupMarginLeft,
+    // margin-right: getCssVar('notification-group-margin-right');
+    marginRight: exports.$notification.groupMarginRight,
+};
+exports.$notificationTitleStyle = {
+    fontWeight: 'bold',
+    // font-size: getCssVar('notification-title-font-size'),
+    fontSize: exports.$notification.titleFontSize,
+    // line-height: getCssVar('notification-icon-size'),
+    lineHeight: exports.$notification.iconSize,
+    // color: getCssVar('notification-title-color'),
+    color: exports.$notification.titleColor,
+    margin: 0,
+};
+exports.$notificationContentStyle = {
+    // font-size: getCssVar('notification-content-font-size'),
+    fontSize: exports.$notification.contentFontSize,
+    lineHeight: '24px',
+    margin: '6px 0 0',
+    // color: getCssVar('notification-content-color'),
+    color: exports.$notification.contentColor,
+};
+exports.$notificationIconStyle = {
+    // height: getCssVar('notification-icon-size'),
+    height: exports.$notification.iconSize,
+    // width: getCssVar('notification-icon-size'),
+    width: exports.$notification.iconSize,
+    // font-size: getCssVar('notification-icon-size'),
+    fontSize: exports.$notification.iconSize,
+};
+exports.$notificationCloseBtnStyle = {
+    position: 'absolute',
+    top: '18px',
+    right: '15px',
+    cursor: 'pointer',
+    // color: getCssVar('notification-close-color'),
+    color: exports.$notification.closeColor,
+    // font-size: getCssVar('notification-close-font-size'),
+    fontSize: exports.$notification.closeFontSize,
+};
+function useStyle(config) {
+    useType(config);
+}
+exports.useStyle = useStyle;
+function useType(config) {
+    // @each $type in (success, info, warning, error) {
+    //   & .#{$namespace}-notification--#{$type} {
+    //     @include css-var-from-global(
+    //         ('notification', 'icon-color'),
+    //         ('color', $type)
+    //       );
+    //       color: getCssVar('notification-icon-color');
+    //     }
+    //   }
+    const $notificationIconColor = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'info'].base;
+    exports.$notificationStyle.color = $notificationIconColor;
+}
+exports.useType = useType;

package/src/components/feedback/td-overlay/td-overlay.class.d.ts

@@ -0,0 +1,10 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdOverlay, ITdOverlayConfig } from './td-overlay.interface';
+import { TypeElement } from '@type-dom/framework';
+export declare let overlayZIndex: number;
+export declare class TdOverlay extends UI implements ITdOverlay {
+    className: 'TdOverlay';
+    props: ITdOverlayConfig;
+    constructor(params?: ITdOverlayConfig);
+    addSlot(slot: TypeElement): void;
+}

package/src/components/feedback/td-overlay/td-overlay.class.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdOverlay = exports.overlayZIndex = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_overlay_style_1 = require("./td-overlay.style");
+exports.overlayZIndex = 2000;
+class TdOverlay extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params);
+        exports.overlayZIndex = exports.overlayZIndex + 1;
+        this.className = 'TdOverlay';
+        this.ctrl.addStyleObj(td_overlay_style_1.$tdOverlayStyle);
+        if (params === null || params === void 0 ? void 0 : params.mask) {
+            this.ctrl.addStyleObj({
+                zIndex: (params === null || params === void 0 ? void 0 : params.zIndex) || exports.overlayZIndex,
+            });
+        }
+        else {
+            this.ctrl.addStyleObj({
+                zIndex: (params === null || params === void 0 ? void 0 : params.zIndex) || exports.overlayZIndex,
+                position: 'fixed',
+                top: '0px',
+                right: '0px',
+                bottom: '0px',
+                left: '0px',
+            });
+        }
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
+    }
+    addSlot(slot) {
+        this.getSlotNode('default').resetSlot(slot);
+    }
+}
+exports.TdOverlay = TdOverlay;

package/src/components/feedback/td-overlay/td-overlay.interface.d.ts

@@ -0,0 +1,13 @@
+import { Property } from '@type-dom/css-type';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdOverlay extends IUI {
+    className: 'TdOverlay';
+}
+export interface ITdOverlayConfig extends IUIConfig {
+    mask?: boolean;
+    customMaskEvent?: boolean;
+    zIndex?: Property.ZIndex;
+    emits?: {
+        click: (event: MouseEvent) => void;
+    };
+}

package/src/components/feedback/td-overlay/td-overlay.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/feedback/td-overlay/td-overlay.style.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $tdOverlayStyle: IStyle;

package/src/components/feedback/td-overlay/td-overlay.style.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$tdOverlayStyle = void 0;
+const var_1 = require("../../../styles/var");
+exports.$tdOverlayStyle = {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 2000,
+    height: '100%',
+    // backgroundColor: getCssVar('overlay-color', 'lighter'),
+    backgroundColor: var_1.$overlayColor.default,
+    overflow: 'auto',
+};

package/src/components/feedback/td-popconfirm/td-popconfirm.class.js

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

package/src/components/feedback/td-popconfirm/td-popconfirm.interface.js

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

package/src/components/feedback/td-popover/td-popover.class.js

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

package/src/components/feedback/td-popover/td-popover.interface.js

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

package/src/components/feedback/td-popper/arrow/arrow.class.d.ts

@@ -2,5 +2,6 @@ import { UI } from '../../../../ui/ui.abstract';
 import { ITdPopperArrow, ITdPopperArrowConfig } from './arrow.interface';
 export declare class TdPopperArrow extends UI implements ITdPopperArrow {
     className: 'TdPopperArrow';
-    constructor(config?: ITdPopperArrowConfig);
+    props: ITdPopperArrowConfig;
+    constructor(params?: ITdPopperArrowConfig);
 }

package/src/components/feedback/td-popper/arrow/arrow.class.js

@@ -4,11 +4,11 @@ exports.TdPopperArrow = void 0;
 const var_1 = require("../../../../styles/var");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdPopperArrow extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: 'span' });
+    constructor(params) {
+        super(params, 'span');
         this.className = 'TdPopperArrow';
-        this.addAttrName('td-popper-arrow');
-        this.addStyleObj({
+        this.ctrl.addAttrName('td-popper-arrow');
+        this.ctrl.addStyleObj({
             position: 'absolute',
             width: '10px',
             height: '10px',
@@ -23,10 +23,10 @@ class TdPopperArrow extends ui_abstract_1.UI {
             transform: 'rotate(45deg)',
             // background: getCssVar('text-color', 'primary'),
             backgroundColor: var_1.$textColor.primary,
-            boxSizing: 'border-box',
+            boxSizing: 'border-box'
             // }
         });
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
 }
 exports.TdPopperArrow = TdPopperArrow;

package/src/components/feedback/td-popper/content/content.class.d.ts

@@ -2,6 +2,7 @@ import { UI } from '../../../../ui/ui.abstract';
 import { ITdPopperContent, ITdPopperContentConfig } from './content.interface';
 export declare class TdPopperContent extends UI implements ITdPopperContent {
     className: 'TdPopperContent';
+    props: ITdPopperContentConfig;
     private focusTrap;
-    constructor(config?: ITdPopperContentConfig);
+    constructor(params?: ITdPopperContentConfig);
 }

package/src/components/feedback/td-popper/content/content.class.js

@@ -4,14 +4,14 @@ exports.TdPopperContent = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const td_focus_trap_class_1 = require("../../td-focus-trap/td-focus-trap.class");
 class TdPopperContent extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdPopperContent';
-        this.addAttrName('td-popper-content');
-        this.addAttrObj({
-            tabindex: -1,
+        this.ctrl.addAttrName('td-popper-content');
+        this.ctrl.addAttrObj({
+            tabindex: -1
         });
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
         // padding: '10px',
         // backgroundColor: $bgColors.default,
         // borderRadius: $borderRadius.base,
@@ -19,7 +19,7 @@ class TdPopperContent extends ui_abstract_1.UI {
         });
         this.focusTrap = new td_focus_trap_class_1.TdFocusTrap();
         this.addChild(this.focusTrap);
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
 }
 exports.TdPopperContent = TdPopperContent;

package/src/components/feedback/td-popper/td-popper.class.d.ts

@@ -1,6 +1,7 @@
 import { UI } from '../../../ui/ui.abstract';
 import { ITdPopper, ITdPopperConfig } from './td-popper.interface';
-export declare class TdPopper extends UI implements ITdPopper {
+export declare class TdPopper extends UI<undefined> implements ITdPopper {
     className: 'TdPopper';
-    constructor(config?: ITdPopperConfig);
+    props: ITdPopperConfig;
+    constructor(params?: ITdPopperConfig);
 }

package/src/components/feedback/td-popper/td-popper.class.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopper = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 class TdPopper extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params, 'fragment');
         this.className = 'TdPopper';
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
 }
 exports.TdPopper = TdPopper;

package/src/components/feedback/td-popper/td-popper.interface.d.ts

@@ -2,11 +2,10 @@ import { IUI, IUIConfig } from '../../../ui/ui.interface';
 export interface ITdPopper extends IUI {
     className: 'TdPopper';
 }
+export type IRoleTypes = 'dialog' | 'grid' | 'group' | 'listbox' | 'menu' | 'navigation' | 'tooltip' | 'tree';
 export interface ITdPopperConfig extends IUIConfig {
     /**
-     *
      *     default: 'tooltip',
      */
-    role?: 'dialog' | 'grid' | 'group' | 'listbox' | 'menu' | 'navigation' | 'tooltip' | 'tree';
+    role?: IRoleTypes;
 }
-export declare const roleTypes: readonly ["dialog", "grid", "group", "listbox", "menu", "navigation", "tooltip", "tree"];

package/src/components/feedback/td-popper/td-popper.interface.js

@@ -1,13 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.roleTypes = void 0;
-exports.roleTypes = [
-    'dialog',
-    'grid',
-    'group',
-    'listbox',
-    'menu',
-    'navigation',
-    'tooltip',
-    'tree',
-];

package/src/components/feedback/td-popper/trigger/trigger.class.d.ts

@@ -2,5 +2,6 @@ import { UI } from '../../../../ui/ui.abstract';
 import { ITdPopperTrigger, ITdPopperTriggerConfig } from './trigger.interface';
 export declare class TdPopperTrigger extends UI implements ITdPopperTrigger {
     className: 'TdPopperTrigger';
-    constructor(config?: ITdPopperTriggerConfig);
+    props: ITdPopperTriggerConfig;
+    constructor(params?: ITdPopperTriggerConfig);
 }

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

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperTrigger = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdPopperTrigger extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdPopperTrigger';
+        this.props = this.setParams(params);
     }
 }
 exports.TdPopperTrigger = TdPopperTrigger;

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

@@ -2,7 +2,17 @@ import { IUI, IUIConfig } from '../../../../ui/ui.interface';
 export interface ITdPopperTrigger extends IUI {
     className: 'TdPopperTrigger';
 }
+type IEvent = (event: Event) => void;
 export interface ITdPopperTriggerConfig extends IUIConfig {
+    virtualTriggering?: boolean;
+    onMouseenter?: IEvent;
+    onMouseleave?: IEvent;
+    onClick?: IEvent;
+    onKeydown?: IEvent;
+    onFocus?: IEvent;
+    onBlur?: IEvent;
+    onContextmenu?: IEvent;
     id?: string;
     open?: boolean;
 }
+export {};

package/src/components/feedback/td-tooltip/content/content.class.d.ts

@@ -2,5 +2,6 @@ import { UI } from '../../../../ui/ui.abstract';
 import { ITdTooltipContentConfig } from './content.interface';
 export declare class TdTooltipContent extends UI {
     className: 'TdTooltipContent';
-    constructor(config?: ITdTooltipContentConfig);
+    props: ITdTooltipContentConfig;
+    constructor(params?: ITdTooltipContentConfig);
 }

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

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltipContent = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdTooltipContent extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdTooltipContent';
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
 }
 exports.TdTooltipContent = TdTooltipContent;

package/src/components/feedback/td-tooltip/td-tooltip.class.d.ts

@@ -2,7 +2,8 @@ import { UI } from '../../../ui/ui.abstract';
 import { ITdTooltip, ITdTooltipConfig } from './td-tooltip.interface';
 export declare class TdTooltip extends UI implements ITdTooltip {
     className: 'TdTooltip';
+    props: ITdTooltipConfig;
     private trigger;
     private content;
-    constructor(config?: ITdTooltipConfig);
+    constructor(params?: ITdTooltipConfig);
 }

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

@@ -1,30 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltip = void 0;
+const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_popper_class_1 = require("../td-popper/td-popper.class");
+const arrow_class_1 = require("../td-popper/arrow/arrow.class");
 const trigger_class_1 = require("./trigger/trigger.class");
 const content_class_1 = require("./content/content.class");
-const framework_1 = require("@type-dom/framework");
-const arrow_class_1 = require("../td-popper/arrow/arrow.class");
 class TdTooltip extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdTooltip';
         this.trigger = new trigger_class_1.TdTooltipTrigger();
         this.content = new content_class_1.TdTooltipContent({
-            childNodes: [
-                new framework_1.Span(),
-                new arrow_class_1.TdPopperArrow()
-            ]
+            slot: [new framework_1.Span(), new arrow_class_1.TdPopperArrow()]
         });
         this.addChild(new td_popper_class_1.TdPopper({
-            childNodes: [
-                this.trigger,
-                this.content
-            ]
+            slot: [this.trigger, this.content]
         }));
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
 }
 exports.TdTooltip = TdTooltip;

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

@@ -2,5 +2,6 @@ import { UI } from '../../../../ui/ui.abstract';
 import { ITdTooltipTriggerConfig } from './trigger.interface';
 export declare class TdTooltipTrigger extends UI {
     className: 'TdTooltipTrigger';
-    constructor(config?: ITdTooltipTriggerConfig);
+    props: ITdTooltipTriggerConfig;
+    constructor(params?: ITdTooltipTriggerConfig);
 }

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

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltipTrigger = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdTooltipTrigger extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdTooltipTrigger';
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
 }
 exports.TdTooltipTrigger = TdTooltipTrigger;

package/src/components/feedback/td-tooltip/utils.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipTriggerType } from './trigger/trigger.interface';
+export type Arrayable<T> = T | T[];
+export declare const isTriggerType: (trigger: Arrayable<TooltipTriggerType>, type: TooltipTriggerType) => boolean;
+export declare const whenTrigger: (trigger: Arrayable<TooltipTriggerType>, type: TooltipTriggerType, handler: (e: Event) => void) => (e: Event) => void;

package/src/components/feedback/td-tooltip/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.whenTrigger = exports.isTriggerType = void 0;
+// import { unref } from 'vue'
+// import { isArray } from '@element-plus/utils'
+// import type { Arrayable } from '@element-plus/utils'
+// import type { Ref } from 'vue'
+const utils_1 = require("@type-dom/utils");
+const isTriggerType = (trigger, type) => {
+    if ((0, utils_1.isArray)(trigger)) {
+        return trigger.includes(type);
+    }
+    return trigger === type;
+};
+exports.isTriggerType = isTriggerType;
+const whenTrigger = (
+// trigger: Ref<Arrayable<TooltipTriggerType>>,
+trigger, type, handler) => {
+    return (e) => {
+        (0, exports.isTriggerType)(trigger, type) && handler(e);
+    };
+};
+exports.whenTrigger = whenTrigger;

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

@@ -7,7 +7,7 @@ class CheckboxGroup extends framework_1.TypeDiv {
     constructor() {
         super();
         this.className = 'CheckboxGroup';
-        this.addAttrName('checkbox-group');
+        this.ctrl.addAttrName('checkbox-group');
         this.childNodes = [];
         this.value = [];
     }
@@ -17,7 +17,7 @@ class CheckboxGroup extends framework_1.TypeDiv {
         const random = Math.random();
         options.forEach((opt) => {
             const optObj = new checkbox_option_class_1.CheckboxOption();
-            optObj.input.addAttrObj({
+            optObj.input.ctrl.addAttrObj({
                 name: 'checkbox' + random,
                 label: opt.label,
                 value: opt.value,
@@ -36,21 +36,22 @@ class CheckboxGroup extends framework_1.TypeDiv {
         if (value.trim()) {
             // console.error('value is ', value);
             this.value = value.split(',');
-            this.childNodes.forEach(optObj => {
-                if (this.value.indexOf(String(optObj.input.attrObj.value)) !== -1) {
-                    optObj.input.setAttrObj({
+            this.childNodes.forEach((optObj) => {
+                var _a;
+                if (this.value.indexOf(String((_a = optObj.input.props.attrObj) === null || _a === void 0 ? void 0 : _a.value)) !== -1) {
+                    optObj.input.ctrl.setAttrObj({
                         checked: true
                     });
                 }
                 else {
-                    optObj.input.removeAttribute('checked');
+                    optObj.input.ctrl.removeAttribute('checked');
                 }
             });
         }
         else {
             // console.error('value is ', value);
-            this.childNodes.forEach(optObj => {
-                optObj.input.removeAttribute('checked');
+            this.childNodes.forEach((optObj) => {
+                optObj.input.ctrl.removeAttribute('checked');
             });
         }
     }

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

@@ -8,7 +8,7 @@ class CheckboxOption extends framework_1.TypeSpan {
         super();
         this.className = 'CheckboxOption';
         this.input = new framework_1.Input({ parent: this });
-        this.input.addAttrObj({
+        this.input.ctrl.addAttrObj({
             type: 'checkbox'
             // name: optionSetting.name,
             // label: opt.label,
@@ -27,13 +27,13 @@ class CheckboxOption extends framework_1.TypeSpan {
             if (this.input.dom.checked) {
                 if (flag === -1) {
                     (_b = this.parent) === null || _b === void 0 ? void 0 : _b.value.push(this.input.dom.value);
-                    this.input.setAttrObj({
+                    this.input.ctrl.setAttrObj({
                         checked: true
                     });
                 }
             }
             else {
-                this.input.removeAttribute('checked');
+                this.input.ctrl.removeAttribute('checked');
                 if (flag && flag !== -1) {
                     (_c = this.parent) === null || _c === void 0 ? void 0 : _c.value.splice(flag, 1);
                 }