@type-dom/ui 0.0.10 → 0.1.0

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

@@ -2,23 +2,98 @@
 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");
-class TdTooltip extends ui_abstract_1.UI {
+const td_tooltip_const_1 = require("./td-tooltip.const");
+const utils_1 = require("@type-dom/utils");
+class TdTooltip extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdTooltip';
-        this.trigger = new trigger_class_1.TdTooltipTrigger();
-        this.content = new content_class_1.TdTooltipContent({
-            slot: [new framework_1.Span(), new arrow_class_1.TdPopperArrow()]
+        const triggerParams = {
+            disabled: params.disabled,
+            trigger: params.trigger,
+            triggerKeys: params.triggerKeys,
+            virtualRef: params.virtualRef,
+            virtualTriggering: params.virtualTriggering,
+            slot: params.slot
+        }; // as ITdTooltipTriggerConfig;
+        this.trigger = new trigger_class_1.TdTooltipTrigger(triggerParams);
+        const contentParams = {
+            ariaLabel: params.ariaLabel,
+            boundariesPadding: params.boundariesPadding,
+            content: params.content,
+            disabled: params.disabled,
+            effect: params.effect,
+            enterable: params.enterable,
+            fallbackPlacements: params.fallbackPlacements,
+            hideAfter: params.hideAfter,
+            gpuAcceleration: params.gpuAcceleration,
+            offset: params.offset,
+            persistent: params.persistent,
+            popperStyle: params.popperStyle,
+            placement: params.placement,
+            popperOptions: params.popperOptions,
+            pure: params.pure,
+            rawContent: params.rawContent,
+            referenceEl: params.referenceEl,
+            triggerTargetEl: params.triggerTargetEl,
+            showAfter: params.showAfter,
+            strategy: params.strategy,
+            teleported: params.teleported,
+            transition: params.transition,
+            virtualTriggering: params.virtualTriggering,
+            zIndex: params.zIndex,
+            appendTo: params.appendTo,
+        };
+        this.popperContent = new content_class_1.TdTooltipContent(Object.assign(Object.assign({}, contentParams), { slot: [new framework_1.Span(), new arrow_class_1.TdPopperArrow()] }));
+        this.content = new td_popper_class_1.TdPopper({
+            slot: [this.trigger, this.popperContent]
         });
-        this.addChild(new td_popper_class_1.TdPopper({
-            slot: [this.trigger, this.content]
-        }));
+        this.addChild(this.content);
+        this.assignProps(td_tooltip_const_1.tooltipProps);
         this.props = this.useParams(params);
+        // const controlled = computed(
+        //   () => isBoolean(props.visible) && !hasUpdateHandler.value
+        // )
+        const controlled = () => (0, utils_1.isBoolean)(this.props.visible);
+        const open = false;
+        const toggleReason = null;
+        this.provide(td_tooltip_const_1.TOOLTIP_INJECTION_KEY, {
+            controlled,
+            // id,
+            open: open,
+            trigger: this.props.trigger,
+            onOpen: (event) => {
+                // onOpen(event)
+            },
+            onClose: (event) => {
+                // onClose(event)
+            },
+            onToggle: (event) => {
+                if (open) {
+                    // onClose(event)
+                }
+                else {
+                    // onOpen(event)
+                }
+            },
+            onShow: () => {
+                this.emit('show', toggleReason);
+            },
+            onHide: () => {
+                this.emit('hide', toggleReason);
+            },
+            onBeforeShow: () => {
+                this.emit('before-show', toggleReason);
+            },
+            onBeforeHide: () => {
+                this.emit('before-hide', toggleReason);
+            },
+            // updatePopper,
+        });
     }
 }
 exports.TdTooltip = TdTooltip;

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

@@ -0,0 +1,77 @@
+import type { TooltipTriggerType } from './trigger/trigger.interface';
+import { InjectionKey } from '@type-dom/framework';
+export type ElTooltipInjectionContext = {
+    controlled: boolean;
+    id: string;
+    open: boolean;
+    trigger: Array<TooltipTriggerType>;
+    onOpen: (e?: Event) => void;
+    onClose: (e?: Event) => void;
+    onToggle: (e?: Event) => void;
+    onShow: () => void;
+    onHide: () => void;
+    onBeforeShow: () => void;
+    onBeforeHide: () => void;
+    updatePopper: () => void;
+};
+export declare const tooltipProps: {
+    showArrow: boolean;
+    arrowOffset: number;
+    trigger: string;
+    triggerKeys: string[];
+    teleported: boolean;
+    id?: string;
+    contentStyle?: import("dist/libs/css-type/src").IStyle;
+    effect?: string;
+    visible?: boolean;
+    enterable?: boolean;
+    pure?: boolean;
+    focusOnShow?: boolean;
+    trapping?: boolean;
+    popperStyle?: import("dist/libs/css-type/src").IStyle;
+    referenceEl?: HTMLElement;
+    triggerTargetEl?: HTMLElement;
+    stopPopperMouseEvent?: boolean;
+    ariaLabel?: string;
+    virtualTriggering?: boolean;
+    zIndex?: number;
+    boundariesPadding?: number;
+    fallbackPlacements?: import("../td-popper/content/content.interface").Placement[];
+    gpuAcceleration?: boolean;
+    offset?: number;
+    placement?: string;
+    popperOptions?: Record<string, any>;
+    strategy?: string;
+    name?: string | number;
+    tag?: "fragment" | string;
+    ref?: import("@type-dom/framework").XProxy<import("@type-dom/framework").IJsonData> | import("@type-dom/framework").Ref<any>;
+    refId?: string | number;
+    text?: boolean | string | number | import("@type-dom/framework").XProxy<import("@type-dom/framework").IJsonData>;
+    attrObj?: import("@type-dom/framework").ITypeAttribute | undefined;
+    styleObj?: import("dist/libs/css-type/src").IStyle | undefined;
+    childNodes?: import("@type-dom/framework").TypeNode[] | undefined;
+    items?: import("@type-dom/framework").ITypeConfig[];
+    slots?: import("@type-dom/framework").IConfigSlots;
+    slot?: import("@type-dom/framework").IConfigSlot;
+    html?: string;
+    init?: (element: import("@type-dom/framework").TypeElement) => void;
+    emits?: import("@type-dom/framework").IEmits;
+    events?: Partial<import("@type-dom/framework").IEvents>;
+    template?: string;
+    fieldSetting?: import("@type-dom/framework").IOptionSetting;
+    className?: string;
+    nodeName?: "fragment" | string | undefined;
+    nodeValue?: string | number | undefined;
+    to?: HTMLElement;
+    parent?: import("@type-dom/framework").TypeElement | import("@type-dom/framework").SlotNode;
+    context?: import("@type-dom/framework").TypeNode;
+    isRoot?: boolean;
+    methods?: import("@type-dom/framework").IMethods;
+    settings?: import("@type-dom/framework").ISettings;
+    defaults?: import("@type-dom/framework").ISettings;
+    showAfter: number;
+    hideAfter: number;
+    autoClose: number;
+    role?: import("../td-popper/td-popper.interface").IRoleTypes;
+};
+export declare const TOOLTIP_INJECTION_KEY: InjectionKey<ElTooltipInjectionContext>;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOOLTIP_INJECTION_KEY = exports.tooltipProps = void 0;
+const td_popper_const_1 = require("../td-popper/td-popper.const");
+const content_const_1 = require("./content/content.const");
+const trigger_const_1 = require("./trigger/trigger.const");
+const arrow_const_1 = require("../td-popper/arrow/arrow.const");
+exports.tooltipProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, td_popper_const_1.popperProps), content_const_1.tooltipContentProps), trigger_const_1.tooltipTriggerProps), arrow_const_1.popperArrowProps), { showArrow: true });
+exports.TOOLTIP_INJECTION_KEY = Symbol('elTooltip');

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

@@ -1,8 +1,11 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdTooltip extends IUI {
+import { ITypeElement } from '@type-dom/framework';
+import { ITdPopperConfig } from '../td-popper/td-popper.interface';
+import { ITdTooltipTriggerConfig } from './trigger/trigger.interface';
+import { ITdTooltipContentConfig } from './content/content.interface';
+export interface ITdTooltip extends ITypeElement {
     className: 'TdTooltip';
 }
-export interface ITdTooltipConfig extends IUIConfig {
+export interface ITdTooltipConfig extends ITdPopperConfig, ITdTooltipTriggerConfig, ITdTooltipContentConfig {
     /**
      * @description whether the tooltip content has an arrow
      */

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

@@ -1,7 +1,8 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdTooltipTriggerConfig } from './trigger.interface';
-export declare class TdTooltipTrigger extends UI {
+export declare class TdTooltipTrigger extends TypeDiv {
     className: 'TdTooltipTrigger';
     props: ITdTooltipTriggerConfig;
     constructor(params?: ITdTooltipTriggerConfig);
+    setup(): void;
 }

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

@@ -1,12 +1,65 @@
 "use strict";
 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 {
+const framework_1 = require("@type-dom/framework");
+const event_1 = require("../../../../utils/dom/event");
+const trigger_class_1 = require("../../td-popper/trigger/trigger.class");
+const utils_1 = require("../utils");
+const td_tooltip_const_1 = require("../td-tooltip.const");
+class TdTooltipTrigger extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdTooltipTrigger';
+        this.attr.addName('td-tooltip-trigger');
         this.props = this.useParams(params);
     }
+    setup() {
+        const { controlled, id, open, onOpen, onClose, onToggle } = this.inject(td_tooltip_const_1.TOOLTIP_INJECTION_KEY, undefined);
+        const stopWhenControlledOrDisabled = () => {
+            if (controlled || this.props.disabled) {
+                return true;
+            }
+            return undefined; // add by me
+        };
+        const trigger = this.props.trigger;
+        const onMouseenter = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'hover', onOpen));
+        const onMouseleave = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'hover', onClose));
+        const onClick = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'click', (e) => {
+            // distinguish left click
+            if (e.button === 0) {
+                // onToggle(e);
+            }
+        }));
+        const onFocus = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'focus', onOpen));
+        const onBlur = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'focus', onClose));
+        const onContextMenu = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_1.whenTrigger)(trigger, 'contextmenu', (e) => {
+            e.preventDefault();
+            // onToggle(e);
+        }));
+        const onKeydown = (0, event_1.composeEventHandlers)(stopWhenControlledOrDisabled, (e) => {
+            var _a;
+            const { code } = e;
+            if ((_a = this.props.triggerKeys) === null || _a === void 0 ? void 0 : _a.includes(code)) {
+                e.preventDefault();
+                // onToggle(e);
+            }
+        });
+        const popperTrigger = new trigger_class_1.TdPopperTrigger({
+            id,
+            virtualRef: this.props.virtualRef,
+            open,
+            virtualTriggering: this.props.virtualTriggering,
+            // class="ns.e('trigger')",
+            events: {
+                blur: onBlur,
+                click: onClick,
+                contextmenu: onContextMenu,
+                focus: onFocus,
+                mouseenter: onMouseenter,
+                mouseleave: onMouseleave,
+                keydown: onKeydown,
+            },
+        });
+    }
 }
 exports.TdTooltipTrigger = TdTooltipTrigger;

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

@@ -0,0 +1,4 @@
+export declare const tooltipTriggerProps: {
+    trigger: string;
+    triggerKeys: string[];
+};

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tooltipTriggerProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const trigger_const_1 = require("../../td-popper/trigger/trigger.const");
+exports.tooltipTriggerProps = Object.assign(Object.assign({}, trigger_const_1.popperTriggerProps), { trigger: 'hover', triggerKeys: [utils_1.EVENT_CODE.enter, utils_1.EVENT_CODE.space] });

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

@@ -1,6 +1,6 @@
-import { IUI } from '../../../../ui/ui.interface';
+import { ITypeDiv } from '@type-dom/framework';
 import { ITdPopperTriggerConfig } from '../../td-popper/trigger/trigger.interface';
-export interface ITdTooltipTrigger extends IUI {
+export interface ITdTooltipTrigger extends ITypeDiv {
     className: 'TdTooltipTrigger';
 }
 export type TooltipTriggerType = 'hover' | 'focus' | 'click' | 'contextmenu';
@@ -13,4 +13,9 @@ export interface ITdTooltipTriggerConfig extends ITdPopperTriggerConfig {
      * @description How should the tooltip be triggered (to show)
      */
     trigger?: TooltipTriggerType;
+    /**
+     * @description When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard
+     *     default: () => [EVENT_CODE.enter, EVENT_CODE.space],
+     */
+    triggerKeys?: string[];
 }

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

@@ -1,5 +1,3 @@
-export { RadioGroup } from './radio-group/radio-group.class';
-export { RadioOption } from './radio-group/radio-option/radio-option.class';
 export { CheckboxGroup } from './checkbox-group/checkbox-group.class';
 export { CheckboxOption } from './checkbox-group/checkbox-option/checkbox-option.class';
 export { FieldInput } from './field-item/input/field-input.abstract';
@@ -8,29 +6,32 @@ 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 { TdInputField } from './td-input/td-input-field.class';
+export type { ITdInputFieldConfig } from './td-input/td-input-field.interface';
+export { RadioGroup } from './radio-group/radio-group.class';
+export { RadioOption } from './radio-group/radio-option/radio-option.class';
 export { TdCheckbox } from './td-checkbox/td-checkbox.class';
-export type { ITdCheckboxConfig } from './td-checkbox/td-checkbox.interface';
+export type * 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 { 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 { TdInput } from './td-input/td-input.class';
+export type { ITdInputConfig } from './td-input/td-input.interface';
+export { TdOption } from './td-option/td-option.class';
+export type { ITdOptionConfig } from './td-option/td-option.interface';
+export { TdOptionGroup } from './td-option-group/td-option-group.class';
+export type { ITdOptionGroupConfig } from './td-option-group/td-option-group.interface';
 export { TdRadio } from './td-radio/td-radio.class';
 export type { ITdRadioConfig } from './td-radio/td-radio.interface';
 export { TdRadioButton } from './td-radio-button/td-radio-button.class';
 export type { ITdRadioButtonConfig } from './td-radio-button/td-radio-button.interface';
 export { TdRadioGroup } from './td-radio-group/td-radio-group.class';
 export type { ITdRadioGroupConfig } from './td-radio-group/td-radio-group.interface';
-export { TdInput } from './td-input/td-input.class';
-export type { ITdInputConfig } from './td-input/td-input.interface';
-export { TdSwitch } from './td-switch/td-switch.class';
-export type { ITdSwitchConfig } from './td-switch/td-switch.interface';
-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';
+export { TdSwitch } from './td-switch/td-switch.class';
+export type { ITdSwitchConfig } from './td-switch/td-switch.interface';

package/src/components/form/index.js

@@ -1,11 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.TdSwitch = exports.TdSelect = exports.TdRadioGroup = exports.TdRadioButton = exports.TdRadio = exports.TdOptionGroup = exports.TdOption = exports.TdInput = exports.TdFormItem = exports.TdForm = exports.TdCheckboxButton = exports.TdCheckboxGroup = exports.TdCheckbox = exports.RadioOption = exports.RadioGroup = exports.TdInputField = exports.FieldTextarea = exports.FieldSpan = exports.FieldSelect = exports.FieldRadio = exports.FieldInput = exports.CheckboxOption = exports.CheckboxGroup = 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; } });
-var radio_option_class_1 = require("./radio-group/radio-option/radio-option.class");
-Object.defineProperty(exports, "RadioOption", { enumerable: true, get: function () { return radio_option_class_1.RadioOption; } });
 var checkbox_group_class_1 = require("./checkbox-group/checkbox-group.class");
 Object.defineProperty(exports, "CheckboxGroup", { enumerable: true, get: function () { return checkbox_group_class_1.CheckboxGroup; } });
 var checkbox_option_class_1 = require("./checkbox-group/checkbox-option/checkbox-option.class");
@@ -21,29 +17,35 @@ 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_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 radio_group_class_1 = require("./radio-group/radio-group.class");
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radio_group_class_1.RadioGroup; } });
+var radio_option_class_1 = require("./radio-group/radio-option/radio-option.class");
+Object.defineProperty(exports, "RadioOption", { enumerable: true, get: function () { return radio_option_class_1.RadioOption; } });
 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_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_input_class_1 = require("./td-input/td-input.class");
+Object.defineProperty(exports, "TdInput", { enumerable: true, get: function () { return td_input_class_1.TdInput; } });
+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; } });
+var td_option_group_class_1 = require("./td-option-group/td-option-group.class");
+Object.defineProperty(exports, "TdOptionGroup", { enumerable: true, get: function () { return td_option_group_class_1.TdOptionGroup; } });
 var td_radio_class_1 = require("./td-radio/td-radio.class");
 Object.defineProperty(exports, "TdRadio", { enumerable: true, get: function () { return td_radio_class_1.TdRadio; } });
 var td_radio_button_class_1 = require("./td-radio-button/td-radio-button.class");
 Object.defineProperty(exports, "TdRadioButton", { enumerable: true, get: function () { return td_radio_button_class_1.TdRadioButton; } });
 var td_radio_group_class_1 = require("./td-radio-group/td-radio-group.class");
 Object.defineProperty(exports, "TdRadioGroup", { enumerable: true, get: function () { return td_radio_group_class_1.TdRadioGroup; } });
-var td_input_class_1 = require("./td-input/td-input.class");
-Object.defineProperty(exports, "TdInput", { enumerable: true, get: function () { return td_input_class_1.TdInput; } });
-var td_switch_class_1 = require("./td-switch/td-switch.class");
-Object.defineProperty(exports, "TdSwitch", { enumerable: true, get: function () { return td_switch_class_1.TdSwitch; } });
-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; } });
+var td_switch_class_1 = require("./td-switch/td-switch.class");
+Object.defineProperty(exports, "TdSwitch", { enumerable: true, get: function () { return td_switch_class_1.TdSwitch; } });

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

@@ -9,7 +9,7 @@ const useCheckboxStatus = (props) => {
         // 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.value;
         }
         return props === null || props === void 0 ? void 0 : props.label;
     })();

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

@@ -10,7 +10,7 @@ const useCheckbox = (props) => {
     // checkboxButtonSize,
     // checkboxSize,
     hasOwnLabel, actualValue, } = (0, use_checkbox_status_1.useCheckboxStatus)(props);
-    // const { isDisabled } = useCheckboxDisabled({ model, isChecked })
+    // const { isDisabled } = useCheckboxDisabled({ model, isChecked });
     // const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
     //   formItemContext: elFormItem,
     //   disableIdGeneration: hasOwnLabel,

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

@@ -1,13 +1,28 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeHtml } from '@type-dom/framework';
 import { ITdCheckbox, ITdCheckboxConfig } from './td-checkbox.interface';
-export declare class TdCheckbox extends UI implements ITdCheckbox {
+import { ISize } from '../../../styles';
+export declare class TdCheckbox extends TypeHtml implements ITdCheckbox {
     className: 'TdCheckbox';
+    nodeName: string;
+    dom: HTMLElement;
     props: ITdCheckboxConfig;
     private isFocused?;
     private isLimitExceeded?;
     private actualValue?;
     private intermediate?;
     private hasOwnLabel?;
+    private isDisabled?;
+    private isLabeledByFormItem?;
+    private model?;
     constructor(params?: ITdCheckboxConfig);
-    handleChange(ev?: Event): void;
+    get checkedValue(): boolean | undefined;
+    mounted(): void;
+    handleChange(ev?: InputEvent): void;
+    onClickRoot(e: MouseEvent): Promise<void>;
+    getLabeledValue(value: string | number | boolean): string | number | boolean;
+    emitChangeEvent(checked: string | number | boolean, e: InputEvent | MouseEvent): void;
+    setChecked(checked?: number | string | boolean): void;
+    setDisabled(disabled: boolean): void;
+    setIndeterminate(indeterminate: boolean): void;
+    setSize(size: ISize): void;
 }