@type-dom/ui 0.1.1 → 0.1.2

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

@@ -1,12 +1,12 @@
 import { IStyle } from '@type-dom/css-type';
 import { Placement, Strategy } from '@type-dom/popper';
-import { TypeProps, ITypeDiv, TypeHtml, StyleValue, ISlotRaw } from '@type-dom/framework';
+import { TypeProps, ITypeDiv, StyleValue } from '@type-dom/framework';
 import { MaybeRef } from '@type-dom/signals';
 import { popperContentEmits } from './content.const';
 export interface ITdPopperContent extends ITypeDiv {
     className: 'TdPopperContent';
 }
-type ClassObjectType = Record<string, boolean>;
+type ClassObjectType = Record<string, boolean | unknown>;
 type ClassType = string | ClassObjectType | (ClassType | undefined)[];
 export interface PopperCoreConfigProps extends TypeProps {
     boundariesPadding?: number;
@@ -41,13 +41,12 @@ export interface PopperContentProps extends PopperCoreConfigProps {
     trapping?: boolean;
     popperClass?: ClassType;
     popperStyle?: StyleValue;
-    referenceEl?: TypeHtml;
-    triggerTargetEl?: TypeHtml;
+    referenceEl?: HTMLElement;
+    triggerTargetEl?: HTMLElement;
     stopPopperMouseEvent?: boolean;
-    ariaLabel?: MaybeRef<string>;
     virtualTriggering?: boolean;
     zIndex?: number;
-    slot?: (arg?: any) => ISlotRaw | ISlotRaw[];
+    ariaLabel?: MaybeRef<string>;
 }
 export type PopperContentEmits = typeof popperContentEmits;
 export {};

package/src/components/feedback/td-popper/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-popper.css';

package/src/components/feedback/td-popper/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-popper.css");

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

@@ -1,6 +1,7 @@
 import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
 import { Computed, Signal } from '@type-dom/signals';
 import { IStyle } from '@type-dom/css-type';
+import { Instance } from '@type-dom/popper';
 export interface ITdPopper extends ITypeFragment {
     className: 'TdPopper';
 }
@@ -24,7 +25,7 @@ export type Measurable = {
 export type TdPopperInjectionContext = {
     triggerRef: Signal<Measurable | undefined>;
     contentRef: Signal<HTMLElement | undefined>;
-    popperInstanceRef: Signal;
+    popperInstanceRef: Signal<Instance | undefined>;
     referenceRef: Signal<Measurable | undefined>;
     role: Computed<RoleTypes | undefined>;
 };

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

@@ -11,15 +11,16 @@ const trigger_const_1 = require("./trigger.const");
 class TdPopperTrigger extends framework_1.TypeFragment {
     constructor(params = {}) {
         super();
-        console.log('td-popper-trigger , params is ', params);
+        // console.log('td-popper-trigger , params.virtualRef is ', params.virtualRef);
         this.className = 'TdPopperTrigger';
         this.assignProps(trigger_const_1.popperTriggerProps);
         this.props = this.useParams(params);
     }
     setup() {
+        var _a, _b;
         const props = this.props;
         const { role, triggerRef } = (0, framework_1.inject)(constants_1.POPPER_INJECTION_KEY, undefined);
-        console.log('role is ', role, ' , triggerRef is ', triggerRef);
+        // console.log('role is ', role, ' , triggerRef is ', triggerRef);
         // 与 only-child组件配合使用的方法，绑定相关的方法；
         (0, use_forward_ref_1.useForwardRef)(triggerRef);
         const ariaControls = (0, signals_1.computed)(() => {
@@ -53,7 +54,8 @@ class TdPopperTrigger extends framework_1.TypeFragment {
             'onContextmenu',
         ];
         (0, framework_1.onMounted)(() => {
-            (0, signals_1.watch)(() => (0, signals_1.unref)(props.virtualRef), (virtualEl) => {
+            (0, signals_1.watch)(() => (0, signals_1.unref)(props.virtualRef), (virtualEl, prevEl) => {
+                // console.warn('virtualEl, prevEl is ', virtualEl, prevEl);
                 if (virtualEl) {
                     triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.set((0, framework_1.unrefElement)(virtualEl));
                 }
@@ -61,10 +63,13 @@ class TdPopperTrigger extends framework_1.TypeFragment {
                 immediate: true,
             });
             (0, signals_1.watch)(triggerRef, (el, prevEl) => {
+                // console.warn('triggerRef , prevEl is ', el, prevEl);
                 virtualTriggerAriaStopWatch === null || virtualTriggerAriaStopWatch === void 0 ? void 0 : virtualTriggerAriaStopWatch();
                 virtualTriggerAriaStopWatch = undefined;
                 if ((0, utils_1.isElement)(el)) {
-                    console.log('then bind listeners to trigger html element from this element props .');
+                    // console.log(
+                    //   'then bind listeners to trigger html element from this element props .'
+                    // );
                     TRIGGER_ELE_EVENTS.forEach((eventName) => {
                         var _a;
                         const handler = props[eventName];
@@ -127,7 +132,7 @@ class TdPopperTrigger extends framework_1.TypeFragment {
             triggerRef,
         });
         this.addChild(new td_only_child_class_1.TdOnlyChild({
-            vIf: !this.props.virtualTriggering,
+            vIf: !props.virtualTriggering,
             // v-bind: $attrs
             attrObj: {
                 ariaControls: ariaControls,
@@ -135,7 +140,7 @@ class TdPopperTrigger extends framework_1.TypeFragment {
                 ariaExpanded: ariaExpanded,
                 ariaHaspopup: ariaHaspopup,
             },
-            slot: props.slot,
+            slot: (_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default,
         }));
     }
 }

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

@@ -1,15 +1,7 @@
 import { TypeNode } from '@type-dom/framework';
 import { MaybeRef } from '@type-dom/signals';
-import { Middleware } from '@type-dom/popper';
+import { Middleware, PopperOptions } from '@type-dom/popper';
 import { PopperCoreConfigProps } from './content/content.interface';
 import { Measurable } from './td-popper.interface';
-export declare const buildPopperOptions: (props: PopperCoreConfigProps, middleware?: (Middleware | undefined)[]) => {
-    middleware: ({
-        options?: any;
-        name: string;
-        fn: (state: import("@type-dom/popper").MiddlewareState) => import("@type-dom/popper").MiddlewareReturn | Promise<import("@type-dom/popper").MiddlewareReturn>;
-    } | undefined)[];
-    placement: import("@type-dom/popper").Placement | undefined;
-    strategy: import("@type-dom/popper").Strategy | undefined;
-};
+export declare const buildPopperOptions: (props: PopperCoreConfigProps, middlewares?: Middleware[]) => PopperOptions;
 export declare const unwrapMeasurableEl: ($el: MaybeRef<Measurable | TypeNode | undefined>) => HTMLElement | undefined;

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

@@ -12,13 +12,13 @@ const framework_1 = require("@type-dom/framework");
 // todo floatingui 的 api 变了
 const popper_1 = require("@type-dom/popper");
 const utils_1 = require("@type-dom/utils");
-const buildPopperOptions = (props, middleware = []) => {
+const buildPopperOptions = (props, middlewares = []) => {
     var _a;
     const { placement, strategy, popperOptions } = props;
     const options = Object.assign(Object.assign({ placement,
-        strategy }, popperOptions), { middleware: [...genMiddleware(props), ...middleware] });
+        strategy }, popperOptions), { middleware: [...genMiddleware(props), ...middlewares] });
     deriveExtraMiddleware(options, (_a = popperOptions === null || popperOptions === void 0 ? void 0 : popperOptions.middleware) !== null && _a !== void 0 ? _a : []);
-    console.error('options is ', options);
+    // console.error('options is ', options);
     return options;
 };
 exports.buildPopperOptions = buildPopperOptions;
@@ -31,9 +31,10 @@ exports.unwrapMeasurableEl = unwrapMeasurableEl;
 // todo api 变了
 //   应该对应新的 middleWare
 function genMiddleware(options) {
-    const { offset: pOffset, gpuAcceleration, fallbackPlacements } = options;
+    var _a;
+    const { gpuAcceleration, fallbackPlacements } = options;
     return [
-        (0, popper_1.offset)(pOffset !== null && pOffset !== void 0 ? pOffset : 12),
+        (0, popper_1.offset)((_a = options.offset) !== null && _a !== void 0 ? _a : 12),
         // {
         //   name: 'offset',
         //   options: {

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

@@ -14,12 +14,13 @@ const content_const_1 = require("./content.const");
 class TdTooltipContent extends framework_1.TypeFragment {
     constructor(params = {}) {
         super();
-        console.log('TdTooltipContent params: ', params);
+        // console.log('TdTooltipContent params: ', params);
         this.className = 'TdTooltipContent';
         this.assignProps(content_const_1.tooltipContentProps); // TdTooltip中已经预加载了；
         this.props = this.useParams(params);
     }
     setup() {
+        var _a, _b;
         const props = this.props;
         const { selector } = (0, use_popper_container_1.usePopperContainerId)();
         const ns = (0, use_namespace_1.useNamespace)('tooltip');
@@ -41,14 +42,19 @@ class TdTooltipContent extends framework_1.TypeFragment {
             stopHandle === null || stopHandle === void 0 ? void 0 : stopHandle();
         });
         const shouldRender = (0, signals_1.computed)(() => {
-            console.log('shouldRender persistentRef is ', persistentRef, ' open is ', open);
+            // console.log(
+            //   'shouldRender persistentRef is ',
+            //   persistentRef,
+            //   ' open is ',
+            //   open
+            // );
             return (0, signals_1.unref)(persistentRef) ? true : (0, signals_1.unref)(open);
         });
         const shouldShow = (0, signals_1.computed)(() => {
             return (0, signals_1.unref)(props.disabled) ? false : (0, signals_1.unref)(open);
         });
         const appendTo = (0, signals_1.computed)(() => {
-            console.warn('appendTo is ', props.appendTo, selector.get());
+            // console.warn('appendTo is ', props.appendTo, selector.get());
             return props.appendTo || selector.get();
         });
         const contentStyle = (0, signals_1.computed)(() => { var _a; return (_a = props.style) !== null && _a !== void 0 ? _a : {}; });
@@ -62,7 +68,7 @@ class TdTooltipContent extends framework_1.TypeFragment {
             if ((0, signals_1.unref)(controlled)) {
                 return true;
             }
-            return undefined;
+            return;
         };
         const onContentEnter = (0, utils_1.composeEventHandlers)(stopWhenControlled, () => {
             if (props.enterable && (0, signals_1.unref)(trigger) === 'hover') {
@@ -86,7 +92,7 @@ class TdTooltipContent extends framework_1.TypeFragment {
             onShow();
             stopHandle = (0, framework_1.onClickOutside)((0, signals_1.computed)(() => {
                 var _a;
-                return (_a = contentRef.get()) === null || _a === void 0 ? void 0 : _a.popperContentRef;
+                return (_a = contentRef.get()) === null || _a === void 0 ? void 0 : _a.popperContentRef.get();
             }), () => {
                 if ((0, signals_1.unref)(controlled))
                     return;
@@ -120,7 +126,7 @@ class TdTooltipContent extends framework_1.TypeFragment {
         //   flush: 'post',
         // }
         );
-        (0, signals_1.watch)(() => props.content, () => {
+        (0, signals_1.watch)(() => (0, signals_1.unref)(props.content), () => {
             var _a, _b;
             (_b = (_a = contentRef.get()) === null || _a === void 0 ? void 0 : _a.updatePopper) === null || _b === void 0 ? void 0 : _b.call(_a);
         });
@@ -165,12 +171,12 @@ class TdTooltipContent extends framework_1.TypeFragment {
                     enterable: props.enterable,
                     pure: props.pure,
                     popperClass: props.popperClass,
-                    popperStyle: [props.popperStyle, contentStyle.get()],
+                    popperStyle: [(0, signals_1.unref)(props.popperStyle), contentStyle.get()],
                     referenceEl: props.referenceEl,
                     triggerTargetEl: props.triggerTargetEl,
                     visible: shouldShow,
                     attrObj: {
-                        id: id.get(),
+                        id: id,
                         arialLabel: props.ariaLabel,
                         ariaHidden: ariaHidden,
                         zIndex: props.zIndex,
@@ -181,7 +187,7 @@ class TdTooltipContent extends framework_1.TypeFragment {
                         blur: onBlur,
                         close: onClose,
                     },
-                    slot: props.slot,
+                    slot: (_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default,
                 }),
             }),
         }));

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

@@ -29,7 +29,7 @@ export interface TooltipContentProps extends PopperContentProps, UseDelayedToggl
     /**
      * @description display content, can be overridden by `slot#content`
      */
-    content?: string;
+    content?: MaybeRef<string>;
     /**
      * @description whether `content` is treated as HTML string
      */
@@ -58,5 +58,5 @@ export interface TooltipContentProps extends PopperContentProps, UseDelayedToggl
     /**
      * @description whether Tooltip is disabled
      */
-    disabled?: MaybeRef<boolean>;
+    disabled?: MaybeRef<boolean | undefined>;
 }

package/src/components/feedback/td-tooltip/style/css.d.ts

@@ -1,3 +1,3 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-tooltip.css';
 import '@element-plus/components/popper/style/css';

package/src/components/feedback/td-tooltip/style/css.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-tooltip.css");
 require("@element-plus/components/popper/style/css");

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

@@ -28,29 +28,26 @@ class TdTooltip extends framework_1.TypeFragment {
         super();
         this.className = 'TdTooltip';
         // console.log('TdTooltip . ');
-        // this.addEmits(tooltipEmits)
+        // this.addEmits(tooltipEmits);
         // 要设置默认值，否则使用 创建 TooltipTrigger/TooltipContent 时，会确认默认值。。
         this.assignProps(td_tooltip_const_1.tooltipProps);
         this.props = this.useParams(params);
     }
     setup() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         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;
+            var _a, _b;
             // 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();
+                (_b = (_a = popperComponent.popperInstanceRef) === null || _a === void 0 ? void 0 : _a.get()) === null || _b === void 0 ? void 0 : _b.update();
             }
         };
         const open = (0, signals_1.signal)(false);
@@ -67,8 +64,11 @@ class TdTooltip extends framework_1.TypeFragment {
             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
+            // console.warn('controlled . isBoolean(unref(props.visible)) is ', isBoolean(unref(props.visible)));
+            // console.warn('props.visible is ', props.visible);
+            // console.warn('toRaw(props.visible) is ', toRaw(props.visible));
+            // console.warn('!hasUpdateHandler.get() is ', !hasUpdateHandler.get());
+            return (0, utils_1.isBoolean)((0, signals_1.toRaw)(props.visible)) && !hasUpdateHandler.get(); // todo
         });
         (0, framework_1.provide)(td_tooltip_const_1.TOOLTIP_INJECTION_KEY, {
             controlled,
@@ -76,7 +76,7 @@ class TdTooltip extends framework_1.TypeFragment {
             open: open, // readonly(open),
             trigger: (0, signals_1.signal)(props.trigger),
             onOpen: (event) => {
-                console.log('TdTooltip onOpen . ', event);
+                // console.log('TdTooltip onOpen . ', event);
                 onOpen(event);
             },
             onClose: (event) => {
@@ -184,30 +184,27 @@ class TdTooltip extends framework_1.TypeFragment {
                     virtualTriggering: props.virtualTriggering,
                     appendTo: props.appendTo,
                     attrObj: {
-                        disabled: props.disabled,
                         ariaLabel: props.ariaLabel,
+                        disabled: props.disabled,
                         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,
-                            }),
-                        ];
-                    },
+                    slot: [
+                        new framework_1.Fragment({
+                            slot: (_d = (_c = props.slots) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : [
+                                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,
+                        }),
+                    ],
                 }),
             ],
         }));

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

@@ -1,5 +1,4 @@
-import type { TooltipTriggerType } from './trigger/trigger.interface';
-import { InjectionKey, TypeElement } from '@type-dom/framework';
+import { InjectionKey } 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;
@@ -12,27 +11,27 @@ export declare const tooltipProps: {
     arrowOffset?: import("dist/libs/signals/src").Signal<number>;
     nodeName?: string | undefined;
     name?: string | number;
-    tag?: keyof HTMLElementTagNameMap | "fragment" | "#text" | string;
+    tag?: keyof HTMLElementTagNameMap | import("dist/libs/framework/src/core/enums").NodeName.FRAGMENT | import("dist/libs/framework/src/core/enums").NodeName.TEXT | string;
     nodeValue?: string | number | undefined;
-    disabled?: import("dist/libs/signals/src").MaybeRef<boolean>;
+    disabled?: import("dist/libs/signals/src").MaybeRef<boolean | undefined>;
     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;
+    vModel?: import("dist/libs/signals/src").Ref<import("dist/libs/utils/src").IPrimitive | object | (import("dist/libs/utils/src").IPrimitive | object)[]>;
     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>;
+    class?: import("@type-dom/framework").ClassValue;
+    refEl?: import("dist/libs/signals/src").MaybeRef<import("@type-dom/framework").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>;
+    styleObj?: import("@type-dom/framework").StyleValue;
     items?: import("@type-dom/framework").TypeProps[];
     slots?: import("@type-dom/framework").ISlots;
     slot?: import("@type-dom/framework").ISlotItem;
-    init?: (element: TypeElement) => void;
+    init?: (element: import("@type-dom/framework").TypeElement) => void;
     emits?: import("@type-dom/framework").IEmits;
     events?: Partial<import("@type-dom/framework").IEvents>;
     template?: string;
-    html?: string;
+    html?: import("dist/libs/signals/src").MaybeRef<string>;
     fieldSetting?: import("@type-dom/framework").IOptionSetting;
     methods?: import("@type-dom/framework").IMethods;
     defaults?: import("@type-dom/framework").ISettings;
@@ -43,10 +42,10 @@ export declare const tooltipProps: {
     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;
+    parent?: import("@type-dom/framework").TypeElement;
     isRoot?: boolean;
     settings?: import("@type-dom/framework").ISettings;
-    trigger?: TooltipTriggerType | TooltipTriggerType[];
+    trigger?: import("./trigger/trigger.interface").TooltipTriggerType | import("./trigger/trigger.interface").TooltipTriggerType[];
     triggerKeys?: string[];
     virtualRef?: import("dist/libs/signals/src").Ref<import("..").Measurable>;
     virtualTriggering?: boolean;
@@ -63,7 +62,7 @@ export declare const tooltipProps: {
     hideAfter?: number;
     autoClose?: number;
     appendTo?: string | HTMLElement;
-    content?: string;
+    content?: import("dist/libs/signals/src").MaybeRef<string>;
     rawContent?: boolean;
     persistent?: boolean;
     visible: import("dist/libs/signals/src").MaybeRef<boolean> | null;
@@ -77,33 +76,33 @@ export declare const tooltipProps: {
     focusOnShow?: boolean;
     trapping?: boolean;
     popperClass?: string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | ((string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | ((string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | ((string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | ((string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | ((string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | ((string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | ((string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | ((string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | ((string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | ((string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | ((string | {
-        [x: string]: boolean;
+        [x: string]: unknown;
     } | /*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;
+    referenceEl?: HTMLElement;
+    triggerTargetEl?: HTMLElement;
     stopPopperMouseEvent?: boolean;
     zIndex?: number;
     boundariesPadding?: number;

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

@@ -2,11 +2,11 @@
 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 use_model_toggle_1 = require("../../../hooks/use-model-toggle");
 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 = [

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

@@ -12,7 +12,7 @@ const trigger_const_1 = require("./trigger.const");
 class TdTooltipTrigger extends framework_1.TypeFragment {
     constructor(params = {}) {
         super();
-        console.log('TdTooltipTrigger, ', params);
+        // console.log('TdTooltipTrigger, ', params.virtualRef);
         this.className = 'TdTooltipTrigger';
         this.assignProps(trigger_const_1.tooltipTriggerProps);
         this.props = this.useParams(params);
@@ -23,13 +23,14 @@ class TdTooltipTrigger extends framework_1.TypeFragment {
         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');
+            // console.warn('stopWhenControlledOrDisabled');
+            // console.log('unref(controlled) is ', unref(controlled));
             if ((0, signals_1.unref)(controlled) || (0, signals_1.unref)(props.disabled)) {
                 return true;
             }
-            return false; // add by me
+            return;
         };
-        const trigger = props.trigger || [];
+        const trigger = (0, signals_1.signal)(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);
@@ -44,14 +45,16 @@ class TdTooltipTrigger extends framework_1.TypeFragment {
         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();
+            e === null || e === void 0 ? void 0 : e.preventDefault();
             onToggle(e);
         }));
         const onKeydown = (0, utils_1.composeEventHandlers)(stopWhenControlledOrDisabled, (e) => {
             var _a;
+            if (!e)
+                return;
             const { code } = e;
             if ((_a = this.props.triggerKeys) === null || _a === void 0 ? void 0 : _a.includes(code)) {
-                e.preventDefault();
+                e === null || e === void 0 ? void 0 : e.preventDefault();
                 onToggle(e);
             }
         });
@@ -63,9 +66,9 @@ class TdTooltipTrigger extends framework_1.TypeFragment {
         });
         this.addChild(new trigger_class_1.TdPopperTrigger({
             id: id,
-            virtualRef: this.props.virtualRef,
+            virtualRef: props.virtualRef,
             open: open,
-            virtualTriggering: this.props.virtualTriggering,
+            virtualTriggering: props.virtualTriggering,
             class: ns.e('trigger'),
             onBlur,
             onClick,

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

@@ -9,7 +9,7 @@ export interface TooltipTriggerProps extends PopperTriggerProps {
     /**
      * @description whether Tooltip is disabled
      */
-    disabled?: MaybeRef<boolean>;
+    disabled?: MaybeRef<boolean | undefined>;
     /**
      * @description How should the tooltip be triggered (to show)
      */

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

@@ -1,4 +1,5 @@
 import { Arrayable } from '@type-dom/utils';
 import type { TooltipTriggerType } from './trigger/trigger.interface';
+import { Ref } from '@type-dom/signals';
 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;
+export declare const whenTrigger: (trigger: Ref<Arrayable<TooltipTriggerType>>, type: TooltipTriggerType, handler: (e?: Event) => void) => (e?: Event) => void;

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

@@ -6,6 +6,7 @@ exports.whenTrigger = exports.isTriggerType = void 0;
 // import type { Arrayable } from '@element-plus/utils'
 // import type { Ref } from 'vue'
 const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
 const isTriggerType = (trigger, type) => {
     if ((0, utils_1.isArray)(trigger)) {
         return trigger.includes(type);
@@ -13,12 +14,12 @@ const isTriggerType = (trigger, type) => {
     return trigger === type;
 };
 exports.isTriggerType = isTriggerType;
-const whenTrigger = (
-// trigger: Ref<Arrayable<TooltipTriggerType>>,
-trigger, type, handler) => {
+const whenTrigger = (trigger, 
+// trigger: Arrayable<TooltipTriggerType>,
+type, handler) => {
     return (e) => {
-        console.log('whenTrigger', trigger, type, e);
-        (0, exports.isTriggerType)(trigger, type) && handler(e);
+        // console.log('whenTrigger', trigger, type, e);
+        (0, exports.isTriggerType)((0, signals_1.unref)(trigger), type) && handler(e);
     };
 };
 exports.whenTrigger = whenTrigger;