@type-dom/ui 0.1.1 → 0.1.3

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

@@ -1 +1,110 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdPopconfirm = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_locale_1 = require("../../../hooks/use-locale");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_button_class_1 = require("../../basic/td-button/td-button.class");
+const td_tooltip_class_1 = require("../td-tooltip/td-tooltip.class");
+const td_popconfirm_const_1 = require("./td-popconfirm.const");
+require("./style");
+class TdPopconfirm extends framework_1.TypeFragment {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdPopconfirm';
+        this.addEmits(td_popconfirm_const_1.popconfirmEmits);
+        this.assignProps(td_popconfirm_const_1.popconfirmProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c;
+        const props = this.props;
+        const emit = this.emit;
+        const { t } = (0, use_locale_1.useLocale)();
+        const ns = (0, use_namespace_1.useNamespace)('popconfirm');
+        const tooltipRef = (0, signals_1.signal)();
+        const hidePopper = () => {
+            var _a, _b;
+            (_b = (_a = tooltipRef.get()) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        const style = (0, signals_1.computed)(() => {
+            return {
+                width: (0, utils_1.addUnit)(props.width),
+            };
+        });
+        const confirm = (e) => {
+            emit('confirm', e);
+            hidePopper();
+        };
+        const cancel = (e) => {
+            // console.warn('cancel . ');
+            emit('cancel', e);
+            hidePopper();
+        };
+        const finalConfirmButtonText = (0, signals_1.computed)(() => props.confirmButtonText || t('el.popconfirm.confirmButtonText'));
+        const finalCancelButtonText = (0, signals_1.computed)(() => props.cancelButtonText || t('el.popconfirm.cancelButtonText'));
+        this.addChildren(new td_tooltip_class_1.TdTooltip({
+            refEl: tooltipRef,
+            trigger: 'click',
+            effect: 'light',
+            // v-bind="$attrs"
+            placement: props.placement, // add by me base on attr
+            popperClass: `${ns.namespace.get()}-popover`,
+            popperStyle: style,
+            teleported: props.teleported,
+            fallbackPlacements: ['bottom', 'top', 'right', 'left'],
+            hideAfter: props.hideAfter,
+            persistent: props.persistent,
+            slots: {
+                content: new framework_1.Div({
+                    class: ns.e(),
+                    slot: [
+                        new framework_1.Div({
+                            class: ns.e('main'),
+                            slot: [
+                                new td_icon_class_1.TdIcon({
+                                    vIf: !props.hideIcon && props.icon,
+                                    class: ns.e('icon'),
+                                    slot: new props.icon(),
+                                    styleObj: {
+                                        color: props.iconColor
+                                    }
+                                }),
+                                props.title
+                            ]
+                        }),
+                        new framework_1.Div({
+                            class: ns.e('action'),
+                            slot: (0, utils_1.isFunction)((_a = props.slots) === null || _a === void 0 ? void 0 : _a.actions) ? (_b = props.slots) === null || _b === void 0 ? void 0 : _b.actions(confirm, cancel)
+                                : [
+                                    new td_button_class_1.TdButton({
+                                        size: 'small',
+                                        type: props.cancelButtonType === 'text' ? '' : props.cancelButtonType,
+                                        text: props.cancelButtonType === 'text',
+                                        slot: finalCancelButtonText,
+                                        events: {
+                                            click: cancel
+                                        }
+                                    }),
+                                    new td_button_class_1.TdButton({
+                                        size: 'small',
+                                        type: props.confirmButtonType === 'text' ? '' : props.confirmButtonType,
+                                        text: props.confirmButtonType === 'text',
+                                        slot: finalConfirmButtonText,
+                                        events: {
+                                            click: confirm
+                                        }
+                                    })
+                                ]
+                        })
+                    ]
+                }),
+                default: (_c = props.slots) === null || _c === void 0 ? void 0 : _c.reference,
+            }
+        }));
+    }
+}
+exports.TdPopconfirm = TdPopconfirm;

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

@@ -0,0 +1,12 @@
+import { PopconfirmProps } from './td-popconfirm.interface';
+export declare const popconfirmProps: PopconfirmProps;
+export declare const popconfirmEmits: {
+    /**
+     * @description triggers when click confirm button
+     */
+    confirm: (e: MouseEvent) => boolean;
+    /**
+     * @description triggers when click cancel button
+     */
+    cancel: (e: MouseEvent) => boolean;
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popconfirmEmits = exports.popconfirmProps = void 0;
+const svgs_1 = require("@type-dom/svgs");
+exports.popconfirmProps = {
+    confirmButtonType: 'primary',
+    cancelButtonType: 'text',
+    icon: svgs_1.ElQuestionFilledSvg,
+    iconColor: '#f90',
+    hideIcon: false,
+    hideAfter: 200,
+    teleported: true,
+    width: 150,
+};
+exports.popconfirmEmits = {
+    /**
+     * @description triggers when click confirm button
+     */
+    confirm: (e) => e instanceof MouseEvent,
+    /**
+     * @description triggers when click cancel button
+     */
+    cancel: (e) => e instanceof MouseEvent,
+};

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

@@ -0,0 +1,68 @@
+import { ITypeFragment, TypeFragmentProps, TypeSvgSvg } from '@type-dom/framework';
+import { IButtonType } from '../../basic/td-button/td-button.interface';
+import { Placement } from '@type-dom/popper';
+export interface ITdPopconfirm extends ITypeFragment {
+    className: 'TdPopconfirm';
+}
+export interface PopconfirmProps extends TypeFragmentProps {
+    /**
+     * @description Title
+     */
+    title?: string;
+    /**
+     * @description Confirm button text
+     */
+    confirmButtonText?: string;
+    /**
+     * @description Cancel button text
+     */
+    cancelButtonText?: string;
+    /**
+     * @description Confirm button type
+     *     default: 'primary',
+     */
+    confirmButtonType?: IButtonType;
+    /**
+     * @description Cancel button type
+     *     default: 'text',
+     */
+    cancelButtonType?: IButtonType;
+    /**
+     * @description Icon Component
+     *     default: () => QuestionFilled,
+     */
+    icon?: typeof TypeSvgSvg;
+    /**
+     * @description Icon color
+     *     default: '#f90',
+     */
+    iconColor?: string;
+    /**
+     * @description is hide Icon
+     *     default: false,
+     */
+    hideIcon?: boolean;
+    /**
+     * @description delay of disappear, in millisecond
+     *     default: 200,
+     */
+    hideAfter?: number;
+    /**
+     * @description whether popconfirm is teleported to the body
+     */
+    teleported?: boolean;
+    /**
+     * @description when popconfirm inactive and `persistent` is `false` , popconfirm will be destroyed
+     */
+    persistent?: boolean;
+    /**
+     * @description popconfirm width, min width 150px
+     *     default: 150,
+     */
+    width?: string | number;
+    /**
+     * @description popover placement  tooltip
+     * bottom
+     */
+    placement?: Placement;
+}

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

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

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

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

package/src/components/feedback/td-popover/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/components/popper/style/css");
 require("@element-plus/theme-chalk/el-popover.css");

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

@@ -1,12 +1,11 @@
 import { TypeFragment } from '@type-dom/framework';
 import { Computed } from '@type-dom/signals';
-import { TdPopper } from '../td-popper/td-popper.class';
 import { ITdPopover, PopoverProps } from './td-popover.interface';
 import './style/index';
 export declare class TdPopover extends TypeFragment implements ITdPopover {
     className: 'TdPopover';
     props: PopoverProps;
-    popperRef?: Computed<TdPopper | undefined>;
+    popperRef?: Computed<HTMLElement | undefined>;
     hide?: () => void;
     constructor(params: PopoverProps);
     setup(): void;

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

@@ -17,7 +17,7 @@ class TdPopover extends framework_1.TypeFragment {
         this.props = this.useParams(params);
     }
     setup() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const props = this.props;
         const emit = this.emit;
         const updateEventKeyRaw = `onUpdate:visible`;
@@ -70,11 +70,13 @@ class TdPopover extends framework_1.TypeFragment {
         });
         this.addChild(new td_tooltip_class_1.TdTooltip({
             refEl: tooltipRef,
-            //    v-bind="$attrs"
+            //    v-bind="$attrs"  // virtualTriggering  virtualRef等
+            virtualRef: props.virtualRef,
+            virtualTriggering: props.virtualTriggering,
             trigger: props.trigger,
             placement: props.placement,
             disabled: props.disabled,
-            visible: (_a = props.visible) !== null && _a !== void 0 ? _a : null, // todo undefined don't show popover , why ?
+            visible: props.visible, // todo undefined don't show popover , why ?
             transition: props.transition,
             popperOptions: props.popperOptions,
             content: props.content,
@@ -102,7 +104,7 @@ class TdPopover extends framework_1.TypeFragment {
                 hide: afterLeave,
             },
             slots: {
-                default: (_b = props.slots) === null || _b === void 0 ? void 0 : _b.reference,
+                default: (_a = props.slots) === null || _a === void 0 ? void 0 : _a.reference,
                 content: [
                     props.title
                         ? new framework_1.Div({
@@ -114,7 +116,7 @@ class TdPopover extends framework_1.TypeFragment {
                         })
                         : undefined,
                     new framework_1.Fragment({
-                        slot: (_e = (_c = props.slot) !== null && _c !== void 0 ? _c : (_d = props.slots) === null || _d === void 0 ? void 0 : _d.default) !== null && _e !== void 0 ? _e : props.content,
+                        slot: (_d = (_b = props.slot) !== null && _b !== void 0 ? _b : (_c = props.slots) === null || _c === void 0 ? void 0 : _c.default) !== null && _d !== void 0 ? _d : props.content,
                     }),
                 ],
             },

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

@@ -2,6 +2,8 @@ import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
 import { TooltipTriggerType } from '../td-tooltip/trigger/trigger.interface';
 import { Placement } from '@type-dom/popper';
 import { IStyle } from '@type-dom/css-type';
+import { Ref } from '@type-dom/signals';
+import { Measurable } from '../td-popper/td-popper.interface';
 import { TooltipContentProps } from '../td-tooltip/content/content.interface';
 export interface ITdPopover extends ITypeFragment {
     className: 'TdPopover';
@@ -103,4 +105,6 @@ export interface PopoverProps extends TypeFragmentProps {
      */
     persistent?: boolean;
     'onUpdate:visible'?: (visible: boolean) => void;
+    virtualRef?: Ref<Measurable>;
+    virtualTriggering?: boolean;
 }

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

@@ -14,12 +14,12 @@ class TdPopperArrow extends framework_1.TypeSpan {
         this.props = this.useParams(params);
     }
     setup() {
-        console.log('TdPopperArrow setup . ');
+        // console.log('TdPopperArrow setup . ');
         const props = this.props;
         const ns = (0, use_namespace_1.useNamespace)('popper');
         const { arrowOffset, arrowRef, arrowStyle } = (0, framework_1.inject)(constants_1.POPPER_CONTENT_INJECTION_KEY, undefined);
         (0, signals_1.watch)(() => { var _a; return (_a = props.arrowOffset) === null || _a === void 0 ? void 0 : _a.get(); }, (val) => {
-            console.warn('watch props.arrowOffset is ', val);
+            // console.warn('watch props.arrowOffset is ', val);
             arrowOffset === null || arrowOffset === void 0 ? void 0 : arrowOffset.set(val);
         });
         (0, framework_1.onBeforeUnmount)(() => {

package/src/components/feedback/td-popper/composable/use-content-dom.d.ts

@@ -1,34 +1,35 @@
 import { IStyle } from '@type-dom/css-type';
 import { PopperContentProps } from '../content/content.interface';
+import { StyleValue } from '@type-dom/framework';
 export declare const usePopperContentDOM: (props: PopperContentProps, { styles, role, }: any) => {
     ariaModal: import("@type-dom/signals").Computed<string | undefined>;
     arrowStyle: import("@type-dom/signals").Computed<IStyle<string | 0, string>>;
     contentClass: import("@type-dom/signals").Computed<((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)[]) | undefined)[]>;
-    contentStyle: IStyle<string | 0, string>;
+    contentStyle: import("@type-dom/signals").Computed<StyleValue[]>;
     contentZIndex: import("@type-dom/signals").Signal<number>;
     updateZIndex: () => void;
 };

package/src/components/feedback/td-popper/composable/use-content-dom.js

@@ -19,7 +19,14 @@ styles, role, } //: Pick<UsePopperReturn, 'attributes' | 'styles'> &
         ns.is(props.effect || ''),
         props.popperClass,
     ]);
-    const contentStyle = Object.assign(Object.assign({ zIndex: (0, signals_1.unref)(contentZIndex) }, styles.popper), (props.popperStyle || {}));
+    const contentStyle = (0, signals_1.computed)(() => {
+        // console.warn('props.popperStyle is ', props.popperStyle)
+        return [
+            { zIndex: (0, signals_1.unref)(contentZIndex) },
+            (0, signals_1.unref)(styles).popper,
+            props.popperStyle || {},
+        ];
+    });
     const ariaModal = (0, signals_1.computed)(() => role === 'dialog' ? 'false' : undefined);
     const arrowStyle = (0, signals_1.computed)(() => ((0, signals_1.unref)(styles).arrow || {}));
     const updateZIndex = () => {

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

@@ -7,7 +7,7 @@ export declare const usePopperContent: (props: PopperContentProps) => {
             [key: string]: string | boolean;
         };
     }>;
-    arrowRef: import("@type-dom/signals").Signal<HTMLElement | undefined>;
+    arrowRef: import("@type-dom/signals").Signal<HTMLElement>;
     contentRef: import("@type-dom/signals").Signal<HTMLElement | undefined>;
     instanceRef: Computed<import("@type-dom/popper").Instance | undefined>;
     state: Computed<{
@@ -24,6 +24,11 @@ export declare const usePopperContent: (props: PopperContentProps) => {
         } | undefined;
         placement?: import("@type-dom/popper").Placement | undefined;
         strategy?: import("@type-dom/popper").Strategy;
+        orderedMiddlewares?: {
+            options?: any;
+            name: string;
+            fn: (state: import("@type-dom/popper").MiddlewareState) => import("@type-dom/popper").MiddlewareReturn | Promise<import("@type-dom/popper").MiddlewareReturn>;
+        }[] | undefined;
         scrollParents?: {
             reference: Array<Element | Window | VisualViewport>;
             popper: Array<Element | Window | VisualViewport>;
@@ -39,7 +44,7 @@ export declare const usePopperContent: (props: PopperContentProps) => {
     }>;
     styles: Computed<Record<string, import("dist/libs/css-type/src").IStyle<string | 0, string>>>;
     role: Computed<import("../td-popper.interface").RoleTypes | undefined>;
-    forceUpdate: () => Promise<import("@type-dom/popper").State | undefined> | undefined;
-    update: () => Promise<import("@type-dom/popper").State | undefined> | undefined;
+    forceUpdate: () => Promise<void> | undefined;
+    update: () => Promise<Partial<import("@type-dom/popper").State>> | undefined;
 };
 export type UsePopperContentReturn = ReturnType<typeof usePopperContent>;

package/src/components/feedback/td-popper/composable/use-content.js

@@ -19,16 +19,21 @@ const usePopperContent = (props) => {
     const { popperInstanceRef, contentRef, triggerRef, role } = (0, framework_1.inject)(constants_1.POPPER_INJECTION_KEY, undefined);
     const arrowRef = (0, signals_1.signal)();
     const arrowOffset = (0, signals_1.signal)(5);
-    // const eventListenerModifier = computed(() => {
-    //   return {
-    //     name: 'eventListeners',
-    //     enabled: !!props.visible,
-    //   } // as Modifier<'eventListeners', any>
-    // })
+    const eventListenerMiddleware = (0, signals_1.computed)(() => {
+        return {
+            name: 'eventListeners',
+            // enabled: !!props.visible,
+            fn: (state) => {
+                if ((0, signals_1.toRaw)(props.visible)) {
+                    // update();
+                }
+            },
+        };
+    });
     // middleWare
     const arrowMiddleware = (0, signals_1.computed)(() => {
         var _a;
-        console.log('arrowMiddleware', arrowRef, arrowOffset);
+        // console.log('arrowMiddleware', arrowRef, arrowOffset);
         const arrowEl = (0, signals_1.unref)(arrowRef);
         const offset = (_a = (0, signals_1.unref)(arrowOffset)) !== null && _a !== void 0 ? _a : DEFAULT_ARROW_OFFSET;
         // Seems like the `phase` and `fn` is required by Modifier type
@@ -43,16 +48,18 @@ const usePopperContent = (props) => {
         //   },
         // }
         if (!(0, utils_1.isUndefined)(arrowEl)) {
-            return (0, popper_1.arrow)({ element: arrowEl, padding: offset });
-        }
-        else {
-            return undefined;
+            if (state.get().elements) {
+                state.get().elements.arrow = arrowEl;
+            }
         }
+        return (0, popper_1.arrow)({ element: arrowEl, padding: offset });
     });
     // 这个 options 对应的是 中间件 Middleware, 不包含其它的选项。
     const options = (0, signals_1.computed)(() => {
-        console.warn('useContent options computed . ');
-        return Object.assign({}, (0, utils_2.buildPopperOptions)(props, [
+        // console.warn('useContent options computed . ');
+        return Object.assign({ onFirstUpdate: () => {
+                update();
+            } }, (0, utils_2.buildPopperOptions)(props, [
             (0, signals_1.unref)(arrowMiddleware),
             // unref(eventListenerModifier),
         ]));
@@ -65,6 +72,7 @@ const usePopperContent = (props) => {
             var _a;
             return (_a = (0, signals_1.unref)(computedReference)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         }, () => {
+            // virtual-trigger
             update();
         });
     });

package/src/components/feedback/td-popper/composable/use-focus-trap.d.ts

@@ -1,6 +1,6 @@
 import { PopperContentProps } from '../content/content.interface';
 export declare const usePopperContentFocusTrap: (props: PopperContentProps, emit: (evt: string) => void) => {
-    focusStartRef: import("@type-dom/signals").Signal<HTMLElement | "first" | "container" | undefined>;
+    focusStartRef: import("@type-dom/signals").Signal<HTMLElement | "first" | "container">;
     trapped: import("@type-dom/signals").Signal<boolean>;
     onFocusAfterReleased: (event?: CustomEvent) => void;
     onFocusAfterTrapped: () => void;

package/src/components/feedback/td-popper/composable/use-focus-trap.js

@@ -16,7 +16,7 @@ const usePopperContentFocusTrap = (props, emit) => {
         }
     };
     const onFocusInTrap = (event) => {
-        if (props.visible && !trapped.get()) {
+        if ((0, signals_1.unref)(props.visible) && !trapped.get()) {
             if (event === null || event === void 0 ? void 0 : event.target) {
                 focusStartRef.set(event.target);
             }

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

@@ -8,8 +8,8 @@ export declare class TdPopperContent extends TypeDiv implements ITdPopperContent
     props: PopperContentProps & TypeDivProps;
     popperContentRef: Signal<HTMLElement | undefined>;
     popperInstanceRef?: Computed<Instance | undefined>;
-    updatePopper: (shouldUpdateZIndex?: boolean) => void;
-    contentStyle: IStyle;
+    updatePopper?: (shouldUpdateZIndex?: boolean) => void;
+    contentStyle?: IStyle;
     constructor(params?: PopperContentProps);
     setup(): void;
 }

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

@@ -15,7 +15,7 @@ const content_const_1 = require("./content.const");
 class TdPopperContent extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
-        console.log('TdPopperContent . ');
+        // console.log('TdPopperContent . ');
         this.className = 'TdPopperContent';
         this.attr.addName('td-popper-content');
         this.addEmits(content_const_1.popperContentEmits);
@@ -25,7 +25,7 @@ class TdPopperContent extends framework_1.TypeDiv {
         const props = this.props;
         const emit = this.emit;
         const { focusStartRef, trapped, onFocusAfterReleased, onFocusAfterTrapped, onFocusInTrap, onFocusoutPrevented, onReleaseRequested, } = (0, use_focus_trap_1.usePopperContentFocusTrap)(props, emit);
-        const { attributes, arrowRef, contentRef, state, styles, instanceRef, role, update, } = (0, use_content_1.usePopperContent)(props);
+        const { attributes, arrowRef, contentRef, styles, instanceRef, role, update, } = (0, use_content_1.usePopperContent)(props);
         const { ariaModal, arrowStyle, 
         // contentAttrs,
         contentClass, contentStyle, updateZIndex, } = (0, use_content_dom_1.usePopperContentDOM)(props, {
@@ -33,7 +33,7 @@ class TdPopperContent extends framework_1.TypeDiv {
             attributes,
             role,
         });
-        const formItemContext = this.inject(td_form_const_1.formItemContextKey, undefined);
+        const formItemContext = (0, framework_1.inject)(td_form_const_1.formItemContextKey, undefined);
         const arrowOffset = (0, signals_1.signal)();
         this.provide(constants_1.POPPER_CONTENT_INJECTION_KEY, {
             arrowStyle,
@@ -46,51 +46,12 @@ class TdPopperContent extends framework_1.TypeDiv {
         }
         let triggerTargetAriaStopWatch = undefined;
         const updatePopper = (...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (shouldUpdateZIndex = true) {
-            console.warn('updatePopper . ');
-            if (!instanceRef.get()) {
-                return;
-            }
-            const state = yield update();
-            console.warn('state is ', state);
-            if (!state)
-                return;
-            if (contentRef.get()) {
-                this.attr.setObj({
-                    // maybe flip
-                    dataPopperPlacement: state.placement,
-                });
-                const popperStyle = state === null || state === void 0 ? void 0 : state.styles.popper;
-                if (popperStyle) {
-                    (0, utils_1.setStyle)(contentRef.get(), {
-                        position: state.strategy,
-                        left: popperStyle.left + 'px',
-                        top: popperStyle.top + 'px',
-                    });
-                }
-                const arrowDom = arrowRef.get();
-                if (arrowDom && (state === null || state === void 0 ? void 0 : state.middlewareData.arrow)) {
-                    // const arrowStyle = matchPlacement(state.placement?.split('-')?.shift() as keyof typeof $placements || 'top');
-                    // setStyle(arrowDom, {
-                    //   position: state.strategy,
-                    //   ...arrowStyle
-                    // });
-                    const arrowParams = state.middlewareData.arrow;
-                    if (arrowParams === null || arrowParams === void 0 ? void 0 : arrowParams.x) {
-                        (0, utils_1.setStyle)(arrowDom, {
-                            left: arrowParams.x + 'px',
-                        });
-                    }
-                    if (arrowParams === null || arrowParams === void 0 ? void 0 : arrowParams.y) {
-                        (0, utils_1.setStyle)(arrowDom, {
-                            top: arrowParams.y + 'px',
-                        });
-                    }
-                }
-            }
+            // console.warn('updatePopper . ');
+            update();
             shouldUpdateZIndex && updateZIndex();
         });
         const togglePopperAlive = () => {
-            console.warn('togglePopperAlive . ');
+            // console.warn('togglePopperAlive . ');
             updatePopper(false);
             if ((0, signals_1.unref)(props.visible) && props.focusOnShow) {
                 trapped.set(true);
@@ -100,7 +61,7 @@ class TdPopperContent extends framework_1.TypeDiv {
             }
         };
         (0, framework_1.onMounted)(() => {
-            (0, signals_1.watch)(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => {
+            (0, signals_1.watch)(() => (0, signals_1.unref)(props.triggerTargetEl), (triggerTargetEl, prevTriggerTargetEl) => {
                 triggerTargetAriaStopWatch === null || triggerTargetAriaStopWatch === void 0 ? void 0 : triggerTargetAriaStopWatch();
                 triggerTargetAriaStopWatch = undefined;
                 const el = (0, signals_1.unref)(triggerTargetEl || (contentRef === null || contentRef === void 0 ? void 0 : contentRef.get()));
@@ -151,11 +112,17 @@ class TdPopperContent extends framework_1.TypeDiv {
         });
         this.assignProps({
             refDom: contentRef,
+            // styleObj: contentStyle,
         });
+        // this.addEvents({ // dead loop
+        //   mouseenter: (e) => emit('mouseenter', e),
+        //   mouseleave: (e) => emit('mouseleave', e),
+        // });
         this.attr.addObj({
             tabindex: -1,
             class: contentClass,
         });
+        // console.warn('contentStyle is ', contentStyle.get());
         this.style.addObj(contentStyle);
         this.addChild(new td_focus_trap_class_1.TdFocusTrap({
             trapped: trapped,