@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1,24 +1,216 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltip = void 0;
+// import {
+//   arrow,
+//   autoUpdate,
+//   computePosition,
+//   offset,
+//   autoPlacement,
+//   detectOverflow,
+//   flip,
+//   shift,
+//   hide,
+// } from '@type-dom/popper';
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const use_delayed_toggle_1 = require("../../../hooks/use-delayed-toggle");
+const use_popper_container_1 = require("../../../hooks/use-popper-container");
+const use_id_1 = require("../../../hooks/use-id");
 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 td_tooltip_const_1 = require("./td-tooltip.const");
 const content_class_1 = require("./content/content.class");
-class TdTooltip extends ui_abstract_1.UI {
+const trigger_class_1 = require("./trigger/trigger.class");
+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()]
+        // console.log('TdTooltip . ');
+        // this.addEmits(tooltipEmits)
+        // 要设置默认值，否则使用 创建 TooltipTrigger/TooltipContent 时，会确认默认值。。
+        this.assignProps(td_tooltip_const_1.tooltipProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b;
+        const props = this.props;
+        console.warn('props.visible is ', props.visible);
+        const emit = this.emit;
+        (0, use_popper_container_1.usePopperContainer)();
+        const id = (0, use_id_1.useId)();
+        const popperRef = (0, signals_1.signal)();
+        const contentRef = (0, signals_1.signal)();
+        const updatePopper = () => {
+            var _a;
+            // console.log('updatePopper . ');
+            const popperComponent = (0, signals_1.unref)(popperRef);
+            if (popperComponent) {
+                // popperComponent.popperInstanceRef?.get()？.update()
+                const popperInstance = (_a = popperComponent.popperInstanceRef) === null || _a === void 0 ? void 0 : _a.get();
+                // console.log('popperInstance is ', popperInstance);
+                popperInstance === null || popperInstance === void 0 ? void 0 : popperInstance.update();
+            }
+        };
+        const open = (0, signals_1.signal)(false);
+        const toggleReason = (0, signals_1.signal)();
+        const { show, hide, hasUpdateHandler } = (0, td_tooltip_const_1.useTooltipModelToggle)({
+            indicator: open,
+            toggleReason,
+        });
+        const { onOpen, onClose } = (0, use_delayed_toggle_1.useDelayedToggle)({
+            showAfter: props.showAfter,
+            hideAfter: props.hideAfter,
+            autoClose: props.autoClose,
+            open: show,
+            close: hide,
+        });
+        const controlled = (0, signals_1.computed)(() => {
+            console.warn('controlled . props.visible is ', props.visible);
+            return (0, utils_1.isBoolean)((0, signals_1.unref)(props.visible)) && !hasUpdateHandler.get(); // todo
+        });
+        (0, framework_1.provide)(td_tooltip_const_1.TOOLTIP_INJECTION_KEY, {
+            controlled,
+            id,
+            open: open, // readonly(open),
+            trigger: (0, signals_1.signal)(props.trigger),
+            onOpen: (event) => {
+                console.log('TdTooltip onOpen . ', event);
+                onOpen(event);
+            },
+            onClose: (event) => {
+                onClose(event);
+            },
+            onToggle: (event) => {
+                if ((0, signals_1.unref)(open)) {
+                    onClose(event);
+                }
+                else {
+                    onOpen(event);
+                }
+            },
+            onShow: () => {
+                emit('show', toggleReason.get());
+            },
+            onHide: () => {
+                emit('hide', toggleReason.get());
+            },
+            onBeforeShow: () => {
+                emit('beforeShow', toggleReason.get());
+            },
+            onBeforeHide: () => {
+                emit('beforeHide', toggleReason.get());
+            },
+            updatePopper,
+        });
+        (0, signals_1.watch)(() => (0, signals_1.unref)(props.disabled), (disabled) => {
+            if (disabled && open.get()) {
+                open.set(false);
+            }
+        });
+        const isFocusInsideContent = (event) => {
+            var _a, _b;
+            return (_b = (_a = contentRef.get()) === null || _a === void 0 ? void 0 : _a.isFocusInsideContent) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+        // onDeactivated(() => open.get() && hide())
+        (0, framework_1.defineExpose)({
+            /**
+             * @description el-popper component instance
+             */
+            popperRef,
+            /**
+             * @description el-tooltip-content component instance
+             */
+            contentRef,
+            /**
+             * @description validate current focus event is trigger inside el-tooltip-content
+             */
+            isFocusInsideContent,
+            /**
+             * @description update el-popper component instance
+             */
+            updatePopper,
+            /**
+             * @description expose onOpen function to mange el-tooltip open state
+             */
+            onOpen,
+            /**
+             * @description expose onOpen function to mange el-tooltip open state
+             */
+            onClose,
+            /**
+             * @description expose hide function
+             */
+            hide,
         });
         this.addChild(new td_popper_class_1.TdPopper({
-            slot: [this.trigger, this.content]
+            refEl: popperRef,
+            attrObj: {
+                role: props.role,
+            },
+            slot: [
+                new trigger_class_1.TdTooltipTrigger({
+                    disabled: props.disabled,
+                    trigger: props.trigger,
+                    triggerKeys: props.triggerKeys,
+                    virtualRef: props.virtualRef,
+                    virtualTriggering: props.virtualTriggering,
+                    slot: (_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default,
+                }),
+                new content_class_1.TdTooltipContent({
+                    refEl: contentRef,
+                    boundariesPadding: props.boundariesPadding,
+                    content: props.content,
+                    effect: props.effect,
+                    enterable: props.enterable,
+                    fallbackPlacements: props.fallbackPlacements,
+                    hideAfter: props.hideAfter,
+                    gpuAcceleration: props.gpuAcceleration,
+                    offset: props.offset,
+                    persistent: props.persistent,
+                    popperClass: props.popperClass,
+                    popperStyle: props.popperStyle,
+                    placement: props.placement,
+                    popperOptions: props.popperOptions,
+                    pure: props.pure,
+                    rawContent: props.rawContent,
+                    referenceEl: props.referenceEl,
+                    triggerTargetEl: props.triggerTargetEl,
+                    showAfter: props.showAfter,
+                    strategy: props.strategy,
+                    teleported: props.teleported,
+                    transition: props.transition,
+                    virtualTriggering: props.virtualTriggering,
+                    appendTo: props.appendTo,
+                    attrObj: {
+                        disabled: props.disabled,
+                        ariaLabel: props.ariaLabel,
+                        zIndex: props.zIndex,
+                    },
+                    slot: () => {
+                        var _a, _b;
+                        return [
+                            new framework_1.Fragment({
+                                slot: (_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : [
+                                    props.rawContent
+                                        ? new framework_1.Span({
+                                            html: props.content,
+                                        })
+                                        : new framework_1.Span({
+                                            slot: props.content,
+                                        }),
+                                ],
+                            }),
+                            new arrow_class_1.TdPopperArrow({
+                                vIf: props.showArrow,
+                                arrowOffset: props.arrowOffset,
+                            }),
+                        ];
+                    },
+                }),
+            ],
         }));
-        this.props = this.useParams(params);
     }
 }
 exports.TdTooltip = TdTooltip;

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

@@ -0,0 +1,121 @@
+import type { TooltipTriggerType } from './trigger/trigger.interface';
+import { InjectionKey, TypeElement } from '@type-dom/framework';
+import { TooltipContext } from './td-tooltip.interface';
+export declare const useTooltipModelToggleProps: import("../../../hooks/use-model-toggle").UseModelTogglePropsRaw<"visible">, useTooltipModelToggleEmits: "update:visible"[], useTooltipModelToggle: ({ indicator, toggleReason, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide, }: import("../../../hooks/use-model-toggle").ModelToggleParams) => {
+    hide: (event?: Event) => void;
+    show: (event?: Event) => void;
+    toggle: () => void;
+    hasUpdateHandler: import("dist/libs/signals/src").Computed<boolean>;
+};
+export declare const tooltipProps: {
+    showArrow: boolean;
+    arrowOffset?: import("dist/libs/signals/src").Signal<number>;
+    nodeName?: string | undefined;
+    name?: string | number;
+    tag?: keyof HTMLElementTagNameMap | "fragment" | "#text" | string;
+    nodeValue?: string | number | undefined;
+    disabled?: import("dist/libs/signals/src").MaybeRef<boolean>;
+    modelValue?: import("dist/libs/utils/src").IPrimitive | object | (import("dist/libs/utils/src").IPrimitive | object)[];
+    vModel?: import("dist/libs/signals/src").Signal | import("dist/libs/signals/src").Computed;
+    vIf?: import("dist/libs/signals/src").MaybeRef<boolean | unknown>;
+    vShow?: import("dist/libs/signals/src").MaybeRef<boolean | unknown>;
+    class?: import("@type-dom/framework").IClass;
+    refEl?: import("dist/libs/signals/src").MaybeRef<TypeElement | undefined>;
+    refDom?: import("dist/libs/signals/src").MaybeRef<Element | DocumentFragment | undefined>;
+    refId?: string | number;
+    attrObj?: import("@type-dom/framework").ITypeAttribute | undefined;
+    styleObj?: import("@type-dom/framework").StyleValue | import("dist/libs/signals/src").MaybeRef<import("dist/libs/css-type/src").IStyle | undefined> | Record<string, string | import("dist/libs/signals/src").Signal<string> | import("dist/libs/signals/src").Computed>;
+    items?: import("@type-dom/framework").TypeProps[];
+    slots?: import("@type-dom/framework").ISlots;
+    slot?: import("@type-dom/framework").ISlotItem;
+    init?: (element: TypeElement) => void;
+    emits?: import("@type-dom/framework").IEmits;
+    events?: Partial<import("@type-dom/framework").IEvents>;
+    template?: string;
+    html?: string;
+    fieldSetting?: import("@type-dom/framework").IOptionSetting;
+    methods?: import("@type-dom/framework").IMethods;
+    defaults?: import("@type-dom/framework").ISettings;
+    ariaLabel?: import("dist/libs/signals/src").MaybeRef<string>;
+    ariaOrientation?: import("dist/libs/signals/src").MaybeRef<"horizontal" | "vertical" | "undefined">;
+    ariaControls?: import("dist/libs/signals/src").MaybeRef<string>;
+    ariaDescribedby?: import("dist/libs/signals/src").MaybeRef<string>;
+    ariaExpanded?: import("dist/libs/signals/src").MaybeRef<string>;
+    ariaHaspopup?: import("dist/libs/signals/src").MaybeRef<string>;
+    to?: import("dist/libs/signals/src").MaybeRef<string | HTMLElement>;
+    parent?: TypeElement;
+    isRoot?: boolean;
+    settings?: import("@type-dom/framework").ISettings;
+    trigger?: TooltipTriggerType | TooltipTriggerType[];
+    triggerKeys?: string[];
+    virtualRef?: import("dist/libs/signals/src").Ref<import("..").Measurable>;
+    virtualTriggering?: boolean;
+    onMouseenter?: (e: Event) => void;
+    onMouseleave?: (e: Event) => void;
+    onClick?: (e: Event) => void;
+    onKeydown?: (e: Event) => void;
+    onFocus?: (e: Event) => void;
+    onBlur?: (e: Event) => void;
+    onContextmenu?: (e: Event) => void;
+    id?: import("dist/libs/signals/src").MaybeRef<string>;
+    open?: import("dist/libs/signals/src").Signal<boolean> | ((event?: Event) => void) | undefined;
+    showAfter?: number;
+    hideAfter?: number;
+    autoClose?: number;
+    appendTo?: string | HTMLElement;
+    content?: string;
+    rawContent?: boolean;
+    persistent?: boolean;
+    visible: import("dist/libs/signals/src").MaybeRef<boolean> | null;
+    transition?: string;
+    teleported?: boolean;
+    contentStyle?: import("dist/libs/css-type/src").IStyle;
+    style?: import("@type-dom/framework").StyleValue;
+    effect?: "dark" | "light" | string;
+    enterable?: boolean;
+    pure?: boolean;
+    focusOnShow?: boolean;
+    trapping?: boolean;
+    popperClass?: string | {
+        [x: string]: boolean;
+    } | ((string | {
+        [x: string]: boolean;
+    } | ((string | {
+        [x: string]: boolean;
+    } | ((string | {
+        [x: string]: boolean;
+    } | ((string | {
+        [x: string]: boolean;
+    } | ((string | {
+        [x: string]: boolean;
+    } | ((string | {
+        [x: string]: boolean;
+    } | ((string | {
+        [x: string]: boolean;
+    } | ((string | {
+        [x: string]: boolean;
+    } | ((string | {
+        [x: string]: boolean;
+    } | ((string | {
+        [x: string]: boolean;
+    } | ((string | {
+        [x: string]: boolean;
+    } | /*elided*/ any) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[];
+    popperStyle?: import("@type-dom/framework").StyleValue;
+    referenceEl?: import("@type-dom/framework").TypeHtml;
+    triggerTargetEl?: import("@type-dom/framework").TypeHtml;
+    stopPopperMouseEvent?: boolean;
+    zIndex?: number;
+    boundariesPadding?: number;
+    fallbackPlacements?: import("dist/libs/popper/src").Placement[];
+    gpuAcceleration?: boolean;
+    offset?: number;
+    placement?: import("dist/libs/popper/src").Placement;
+    popperOptions?: Record<string, any>;
+    strategy?: import("dist/libs/popper/src").Strategy;
+    close?: (event?: Event) => void;
+    "onUpdate:visible": (val: boolean) => void;
+    role?: import("..").RoleTypes;
+};
+export declare const tooltipEmits: string[];
+export declare const TOOLTIP_INJECTION_KEY: InjectionKey<TooltipContext>;

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

@@ -0,0 +1,21 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOOLTIP_INJECTION_KEY = exports.tooltipEmits = exports.tooltipProps = exports.useTooltipModelToggle = exports.useTooltipModelToggleEmits = exports.useTooltipModelToggleProps = 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");
+const use_model_toggle_1 = require("../../../hooks/use-model-toggle");
+_a = (0, use_model_toggle_1.createModelToggleComposable)('visible'), exports.useTooltipModelToggleProps = _a.useModelToggleProps, exports.useTooltipModelToggleEmits = _a.useModelToggleEmits, exports.useTooltipModelToggle = _a.useModelToggle;
+exports.tooltipProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, td_popper_const_1.popperProps), exports.useTooltipModelToggleProps), content_const_1.tooltipContentProps), trigger_const_1.tooltipTriggerProps), arrow_const_1.popperArrowProps), { showArrow: true }); // as TooltipProps;
+exports.tooltipEmits = [
+    ...exports.useTooltipModelToggleEmits,
+    'before-show',
+    'before-hide',
+    'show',
+    'hide',
+    'open',
+    'close',
+];
+exports.TOOLTIP_INJECTION_KEY = Symbol('TdTooltip');

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

@@ -1,10 +1,40 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdTooltip extends IUI {
+import { ISlotItem, ITypeFragment, TypeElement } from '@type-dom/framework';
+import { Computed, Signal } from '@type-dom/signals';
+import { Arrayable } from '@type-dom/utils';
+import { PopperProps } from '../td-popper/td-popper.interface';
+import { TooltipTriggerProps, TooltipTriggerType } from './trigger/trigger.interface';
+import { TooltipContentProps } from './content/content.interface';
+import { PopperArrowProps } from '../td-popper/arrow/arrow.interface';
+export interface ITdTooltip extends ITypeFragment {
     className: 'TdTooltip';
 }
-export interface ITdTooltipConfig extends IUIConfig {
+export interface TooltipProps extends PopperProps, Omit<TooltipTriggerProps, 'open' | 'nodeName'>, Omit<PopperArrowProps, 'nodeName'>, Omit<TooltipContentProps, 'slot' | 'nodeName'> {
+    /**
+     *     default: 5,
+     */
     /**
      * @description whether the tooltip content has an arrow
+     *  default: true,
      */
     showArrow?: boolean;
+    slot?: TypeElement;
+    slots?: {
+        default?: ISlotItem;
+        reference?: ISlotItem;
+        content?: ISlotItem;
+    };
 }
+export type TooltipContext = {
+    controlled: Computed<boolean>;
+    id: Computed<string>;
+    open: Signal<boolean>;
+    trigger?: Signal<Arrayable<TooltipTriggerType | undefined>>;
+    onOpen: (e?: Event) => void;
+    onClose: (e?: Event) => void;
+    onToggle: (e?: Event) => void;
+    onShow: () => void;
+    onHide: () => void;
+    onBeforeShow: () => void;
+    onBeforeHide: () => void;
+    updatePopper?: () => void;
+};

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

@@ -1,7 +1,11 @@
-import { UI } from '../../../../ui/ui.abstract';
-import { ITdTooltipTriggerConfig } from './trigger.interface';
-export declare class TdTooltipTrigger extends UI {
+import { TypeFragment } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+import { OnlyChildExpose } from '../../td-only-child/td-only-child.interface';
+import { ITdTooltipTrigger, TooltipTriggerProps } from './trigger.interface';
+export declare class TdTooltipTrigger extends TypeFragment implements ITdTooltipTrigger {
     className: 'TdTooltipTrigger';
-    props: ITdTooltipTriggerConfig;
-    constructor(params?: ITdTooltipTriggerConfig);
+    props: TooltipTriggerProps;
+    triggerRef?: Signal<OnlyChildExpose | undefined>;
+    constructor(params?: TooltipTriggerProps);
+    setup(): void;
 }

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

@@ -1,12 +1,81 @@
 "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 signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const trigger_class_1 = require("../../td-popper/trigger/trigger.class");
+const utils_2 = require("../utils");
+const td_tooltip_const_1 = require("../td-tooltip.const");
+const trigger_const_1 = require("./trigger.const");
+class TdTooltipTrigger extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params);
+        super();
+        console.log('TdTooltipTrigger, ', params);
         this.className = 'TdTooltipTrigger';
+        this.assignProps(trigger_const_1.tooltipTriggerProps);
         this.props = this.useParams(params);
     }
+    setup() {
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('tooltip');
+        const { controlled, id, open, onOpen, onClose, onToggle } = (0, framework_1.inject)(td_tooltip_const_1.TOOLTIP_INJECTION_KEY, undefined);
+        const triggerRef = (0, signals_1.signal)(undefined);
+        const stopWhenControlledOrDisabled = () => {
+            console.warn('stopWhenControlledOrDisabled');
+            if ((0, signals_1.unref)(controlled) || (0, signals_1.unref)(props.disabled)) {
+                return true;
+            }
+            return false; // add by me
+        };
+        const trigger = props.trigger || [];
+        // console.log('trigger is ', trigger);
+        const onMouseenter = (0, utils_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_2.whenTrigger)(trigger, 'hover', onOpen));
+        // console.log('onMouseenter is ', onMouseenter);
+        const onMouseleave = (0, utils_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_2.whenTrigger)(trigger, 'hover', onClose));
+        const onClick = (0, utils_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_2.whenTrigger)(trigger, 'click', (e) => {
+            // console.warn('onClick click . e is ', e);
+            // distinguish left click
+            if (e.button === 0) {
+                onToggle(e);
+            }
+        }));
+        const onFocus = (0, utils_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_2.whenTrigger)(trigger, 'focus', onOpen));
+        const onBlur = (0, utils_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_2.whenTrigger)(trigger, 'focus', onClose));
+        const onContextmenu = (0, utils_1.composeEventHandlers)(stopWhenControlledOrDisabled, (0, utils_2.whenTrigger)(trigger, 'contextmenu', (e) => {
+            e.preventDefault();
+            onToggle(e);
+        }));
+        const onKeydown = (0, utils_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);
+            }
+        });
+        (0, framework_1.defineExpose)({
+            /**
+             * @description trigger element
+             */
+            triggerRef,
+        });
+        this.addChild(new trigger_class_1.TdPopperTrigger({
+            id: id,
+            virtualRef: this.props.virtualRef,
+            open: open,
+            virtualTriggering: this.props.virtualTriggering,
+            class: ns.e('trigger'),
+            onBlur,
+            onClick,
+            onContextmenu,
+            onFocus,
+            onMouseenter,
+            onMouseleave,
+            onKeydown,
+            slot: props.slot,
+        }));
+    }
 }
 exports.TdTooltipTrigger = TdTooltipTrigger;

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

@@ -0,0 +1,2 @@
+import { TooltipTriggerProps } from './trigger.interface';
+export declare const tooltipTriggerProps: TooltipTriggerProps;

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 aria_1 = require("../../../../constants/aria");
+const trigger_const_1 = require("../../td-popper/trigger/trigger.const");
+exports.tooltipTriggerProps = Object.assign(Object.assign({}, trigger_const_1.popperTriggerProps), { trigger: 'hover', triggerKeys: [aria_1.EVENT_CODE.enter, aria_1.EVENT_CODE.space] });

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

@@ -1,16 +1,22 @@
-import { IUI } from '../../../../ui/ui.interface';
-import { ITdPopperTriggerConfig } from '../../td-popper/trigger/trigger.interface';
-export interface ITdTooltipTrigger extends IUI {
+import { ITypeFragment } from '@type-dom/framework';
+import { PopperTriggerProps } from '../../td-popper/trigger/trigger.interface';
+import { MaybeRef } from '@type-dom/signals';
+export interface ITdTooltipTrigger extends ITypeFragment {
     className: 'TdTooltipTrigger';
 }
 export type TooltipTriggerType = 'hover' | 'focus' | 'click' | 'contextmenu';
-export interface ITdTooltipTriggerConfig extends ITdPopperTriggerConfig {
+export interface TooltipTriggerProps extends PopperTriggerProps {
     /**
      * @description whether Tooltip is disabled
      */
-    disabled?: boolean;
+    disabled?: MaybeRef<boolean>;
     /**
      * @description How should the tooltip be triggered (to show)
      */
-    trigger?: TooltipTriggerType;
+    trigger?: TooltipTriggerType | 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/feedback/td-tooltip/utils.d.ts

@@ -1,4 +1,4 @@
+import { Arrayable } from '@type-dom/utils';
 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

@@ -17,6 +17,7 @@ const whenTrigger = (
 // trigger: Ref<Arrayable<TooltipTriggerType>>,
 trigger, type, handler) => {
     return (e) => {
+        console.log('whenTrigger', trigger, type, e);
         (0, exports.isTriggerType)(trigger, type) && handler(e);
     };
 };

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

@@ -1,4 +1,4 @@
-import { IOptionConfig, TypeDiv, TypeHtml } from '@type-dom/framework';
+import { OptionProps, TypeDiv, TypeHtml } from '@type-dom/framework';
 import { CheckboxOption } from './checkbox-option/checkbox-option.class';
 import { ICheckboxGroup } from './checkbox-group.interface';
 export declare class CheckboxGroup extends TypeDiv implements ICheckboxGroup {
@@ -7,6 +7,6 @@ export declare class CheckboxGroup extends TypeDiv implements ICheckboxGroup {
     childNodes: CheckboxOption[];
     value: (string | number | boolean)[];
     constructor();
-    setOptions(options: IOptionConfig[]): void;
+    setOptions(options: OptionProps[]): void;
     setValue(value: string | number | boolean): void;
 }

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

@@ -16,17 +16,18 @@ class CheckboxGroup extends framework_1.TypeDiv {
         this.value = [];
         const random = Math.random();
         options.forEach((opt) => {
+            var _a;
             const optObj = new checkbox_option_class_1.CheckboxOption();
             optObj.input.attr.addObj({
                 name: 'checkbox' + random,
                 label: opt.label,
                 value: opt.value,
-                checked: opt.checked || false
+                checked: opt.checked || false,
             });
             if (opt.checked) {
                 this.value.push(opt.value);
             }
-            optObj.textNode.setText(opt.label);
+            (_a = optObj.textNode) === null || _a === void 0 ? void 0 : _a.setText(opt.label);
             this.addChild(optObj);
         });
     }
@@ -39,7 +40,7 @@ class CheckboxGroup extends framework_1.TypeDiv {
             this.childNodes.forEach((optObj) => {
                 if (this.value.indexOf(String(optObj.input.attr.get('value'))) !== -1) {
                     optObj.input.attr.setObj({
-                        checked: true
+                        checked: true,
                     });
                 }
                 else {

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

@@ -6,7 +6,6 @@ export declare class CheckboxOption extends TypeSpan implements ICheckboxOption
     input: Input;
     parent?: CheckboxGroup;
     childNodes: [Input, TextNode];
-    textNode: TextNode;
     constructor();
     setup(): void;
 }