@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1 +1,2 @@
+export declare const popperTriggerProps: {};
 export declare const TRIGGER_ELE_EVENTS: readonly ["onMouseenter", "onMouseleave", "onClick", "onKeydown", "onFocus", "onBlur", "onContextmenu"];

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

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRIGGER_ELE_EVENTS = void 0;
+exports.TRIGGER_ELE_EVENTS = exports.popperTriggerProps = void 0;
+exports.popperTriggerProps = {
+/* 没有默认值 */
+};
 exports.TRIGGER_ELE_EVENTS = [
     'onMouseenter',
     'onMouseleave',

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

@@ -1,19 +1,19 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdPopperTrigger extends IUI {
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+import { MaybeRef, Ref, Signal } from '@type-dom/signals';
+import { Measurable } from '../td-popper.interface';
+export interface ITdPopperTrigger extends ITypeFragment {
     className: 'TdPopperTrigger';
 }
-type IEvent = (event: Event) => void;
-export interface ITdPopperTriggerConfig extends IUIConfig {
-    virtualRef?: HTMLElement;
+export interface PopperTriggerProps extends TypeFragmentProps {
+    virtualRef?: Ref<Measurable>;
     virtualTriggering?: boolean;
-    onMouseenter?: IEvent;
-    onMouseleave?: IEvent;
-    onClick?: IEvent;
-    onKeydown?: IEvent;
-    onFocus?: IEvent;
-    onBlur?: IEvent;
-    onContextmenu?: IEvent;
-    id?: string;
-    open?: 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?: MaybeRef<string>;
+    open?: Signal<boolean>;
 }
-export {};

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

@@ -0,0 +1,15 @@
+import { TypeNode } from '@type-dom/framework';
+import { MaybeRef } from '@type-dom/signals';
+import { Middleware } 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 unwrapMeasurableEl: ($el: MaybeRef<Measurable | TypeNode | undefined>) => HTMLElement | undefined;

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

@@ -0,0 +1,85 @@
+"use strict";
+// import { unrefElement } from '@vueuse/core'
+// import { isClient } from '@element-plus/utils'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unwrapMeasurableEl = exports.buildPopperOptions = void 0;
+// import type { ComponentPublicInstance } from 'vue'
+// import type { MaybeRef } from '@vueuse/core'
+// import type { Modifier } from '@popperjs/core'
+// import type { Measurable } from './constants'
+// import type { PopperCoreConfigProps } from './content'
+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 = []) => {
+    var _a;
+    const { placement, strategy, popperOptions } = props;
+    const options = Object.assign(Object.assign({ placement,
+        strategy }, popperOptions), { middleware: [...genMiddleware(props), ...middleware] });
+    deriveExtraMiddleware(options, (_a = popperOptions === null || popperOptions === void 0 ? void 0 : popperOptions.middleware) !== null && _a !== void 0 ? _a : []);
+    console.error('options is ', options);
+    return options;
+};
+exports.buildPopperOptions = buildPopperOptions;
+const unwrapMeasurableEl = ($el) => {
+    if (!utils_1.isClient)
+        return;
+    return (0, framework_1.unrefElement)($el);
+};
+exports.unwrapMeasurableEl = unwrapMeasurableEl;
+// todo api 变了
+//   应该对应新的 middleWare
+function genMiddleware(options) {
+    const { offset: pOffset, gpuAcceleration, fallbackPlacements } = options;
+    return [
+        (0, popper_1.offset)(pOffset !== null && pOffset !== void 0 ? pOffset : 12),
+        // {
+        //   name: 'offset',
+        //   options: {
+        //     offset: [0, offset ?? 12],
+        //   },
+        // },
+        // detectOverflow(state, {
+        //   padding: {
+        //     top: 2,
+        //     bottom: 2,
+        //     left: 5,
+        //     right: 5,
+        //   },
+        // }),
+        // {
+        //   name: 'preventOverflow',
+        //   options: {
+        //   padding: {
+        //     top: 2,
+        //     bottom: 2,
+        //     left: 5,
+        //     right: 5,
+        //   },
+        //   },
+        // },
+        (0, popper_1.flip)({
+            padding: 5,
+            fallbackPlacements,
+        }),
+        // {
+        //   name: 'flip',
+        //   options: {
+        //     padding: 5,
+        //     fallbackPlacements,
+        //   },
+        // },
+        // {
+        //   name: 'computeStyles',
+        //   options: {
+        //     gpuAcceleration,
+        //   },
+        // },
+    ];
+}
+function deriveExtraMiddleware(options, middleware) {
+    if (middleware) {
+        options.middleware = [...options.middleware, ...(middleware !== null && middleware !== void 0 ? middleware : [])];
+    }
+}

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

@@ -1,7 +1,12 @@
-import { UI } from '../../../../ui/ui.abstract';
-import { ITdTooltipContentConfig } from './content.interface';
-export declare class TdTooltipContent extends UI {
+import { TypeFragmentProps, TypeFragment } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+import { TdPopperContent } from '../../td-popper/content/content.class';
+import { ITdTooltipContent, TooltipContentProps } from './content.interface';
+export declare class TdTooltipContent extends TypeFragment implements ITdTooltipContent {
     className: 'TdTooltipContent';
-    props: ITdTooltipContentConfig;
-    constructor(params?: ITdTooltipContentConfig);
+    props: TooltipContentProps & TypeFragmentProps;
+    contentRef?: Signal<TdPopperContent>;
+    isFocusInsideContent?: (event?: FocusEvent) => boolean;
+    constructor(params?: TooltipContentProps & TypeFragmentProps);
+    setup(): void;
 }

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

@@ -1,12 +1,190 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltipContent = void 0;
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-class TdTooltipContent extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_popper_container_1 = require("../../../../hooks/use-popper-container");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const td_teleport_class_1 = require("../../../base/td-teleport/td-teleport.class");
+const utils_2 = require("../../td-focus-trap/utils");
+const content_class_1 = require("../../td-popper/content/content.class");
+const td_tooltip_const_1 = require("../td-tooltip.const");
+const content_const_1 = require("./content.const");
+class TdTooltipContent extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params);
+        super();
+        console.log('TdTooltipContent params: ', params);
         this.className = 'TdTooltipContent';
+        this.assignProps(content_const_1.tooltipContentProps); // TdTooltip中已经预加载了；
         this.props = this.useParams(params);
     }
+    setup() {
+        const props = this.props;
+        const { selector } = (0, use_popper_container_1.usePopperContainerId)();
+        const ns = (0, use_namespace_1.useNamespace)('tooltip');
+        const contentRef = (0, signals_1.signal)();
+        let stopHandle;
+        const { controlled, id, open, trigger, onClose, onOpen, onShow, onHide, onBeforeShow, onBeforeHide, } = (0, framework_1.inject)(td_tooltip_const_1.TOOLTIP_INJECTION_KEY, undefined);
+        const transitionClass = (0, signals_1.computed)(() => {
+            return props.transition || `${ns.namespace.get()}-fade-in-linear`;
+        });
+        const persistentRef = (0, signals_1.computed)(() => {
+            // For testing, we would always want the content to be rendered
+            // to the DOM, so we need to return true here.
+            if (process.env.NODE_ENV === 'test') {
+                return true;
+            }
+            return props.persistent;
+        });
+        (0, framework_1.onBeforeUnmount)(() => {
+            stopHandle === null || stopHandle === void 0 ? void 0 : stopHandle();
+        });
+        const shouldRender = (0, signals_1.computed)(() => {
+            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());
+            return props.appendTo || selector.get();
+        });
+        const contentStyle = (0, signals_1.computed)(() => { var _a; return (_a = props.style) !== null && _a !== void 0 ? _a : {}; });
+        const ariaHidden = (0, signals_1.signal)(true);
+        const onTransitionLeave = () => {
+            onHide();
+            isFocusInsideContent() && (0, utils_2.tryFocus)(document.body);
+            ariaHidden.set(true);
+        };
+        const stopWhenControlled = () => {
+            if ((0, signals_1.unref)(controlled)) {
+                return true;
+            }
+            return undefined;
+        };
+        const onContentEnter = (0, utils_1.composeEventHandlers)(stopWhenControlled, () => {
+            if (props.enterable && (0, signals_1.unref)(trigger) === 'hover') {
+                onOpen();
+            }
+        });
+        const onContentLeave = (0, utils_1.composeEventHandlers)(stopWhenControlled, () => {
+            if ((0, signals_1.unref)(trigger) === 'hover') {
+                onClose();
+            }
+        });
+        const onBeforeEnter = () => {
+            var _a, _b;
+            (_b = (_a = contentRef.get()) === null || _a === void 0 ? void 0 : _a.updatePopper) === null || _b === void 0 ? void 0 : _b.call(_a);
+            onBeforeShow === null || onBeforeShow === void 0 ? void 0 : onBeforeShow();
+        };
+        const onBeforeLeave = () => {
+            onBeforeHide === null || onBeforeHide === void 0 ? void 0 : onBeforeHide();
+        };
+        const onAfterShow = () => {
+            onShow();
+            stopHandle = (0, framework_1.onClickOutside)((0, signals_1.computed)(() => {
+                var _a;
+                return (_a = contentRef.get()) === null || _a === void 0 ? void 0 : _a.popperContentRef;
+            }), () => {
+                if ((0, signals_1.unref)(controlled))
+                    return;
+                const $trigger = (0, signals_1.unref)(trigger);
+                if ($trigger !== 'hover') {
+                    onClose();
+                }
+            });
+        };
+        const onBlur = () => {
+            if (!props.virtualTriggering) {
+                onClose();
+            }
+        };
+        const isFocusInsideContent = (event) => {
+            var _a;
+            const popperContent = (_a = contentRef
+                .get()) === null || _a === void 0 ? void 0 : _a.popperContentRef.get();
+            const activeElement = (event === null || event === void 0 ? void 0 : event.relatedTarget) || document.activeElement;
+            return popperContent === null || popperContent === void 0 ? void 0 : popperContent.contains(activeElement);
+        };
+        (0, signals_1.watch)(() => (0, signals_1.unref)(open), (val) => {
+            if (!val) {
+                stopHandle === null || stopHandle === void 0 ? void 0 : stopHandle();
+            }
+            else {
+                ariaHidden.set(false);
+            }
+        }
+        // {
+        //   flush: 'post',
+        // }
+        );
+        (0, signals_1.watch)(() => 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);
+        });
+        (0, framework_1.defineExpose)({
+            /**
+             * @description el-popper-content component instance
+             */
+            contentRef,
+            /**
+             * @description validate current focus event is trigger inside el-popper-content
+             */
+            isFocusInsideContent,
+        });
+        this.addChild(new td_teleport_class_1.TdTeleport({
+            disabled: !props.teleported,
+            to: appendTo,
+            slot: new framework_1.Transition({
+                name: transitionClass.get(),
+                onAfterLeave: onTransitionLeave,
+                onBeforeEnter: onBeforeEnter,
+                onAfterEnter: onAfterShow,
+                onBeforeLeave: onBeforeLeave,
+                // emits: {
+                //   afterLeave: onTransitionLeave,
+                //   beforeEnter: onBeforeEnter,
+                //   afterEnter: onAfterShow,
+                //   beforeLeave: onBeforeLeave,
+                // },
+                slot: new content_class_1.TdPopperContent({
+                    vIf: shouldRender, // todo 影响 to 的绑定
+                    vShow: shouldShow,
+                    refEl: contentRef,
+                    // v-bind="$attrs"
+                    boundariesPadding: props.boundariesPadding,
+                    fallbackPlacements: props.fallbackPlacements,
+                    gpuAcceleration: props.gpuAcceleration,
+                    offset: props.offset,
+                    placement: props.placement,
+                    popperOptions: props.popperOptions,
+                    strategy: props.strategy,
+                    effect: props.effect,
+                    enterable: props.enterable,
+                    pure: props.pure,
+                    popperClass: props.popperClass,
+                    popperStyle: [props.popperStyle, contentStyle.get()],
+                    referenceEl: props.referenceEl,
+                    triggerTargetEl: props.triggerTargetEl,
+                    visible: shouldShow,
+                    attrObj: {
+                        id: id.get(),
+                        arialLabel: props.ariaLabel,
+                        ariaHidden: ariaHidden,
+                        zIndex: props.zIndex,
+                    },
+                    events: {
+                        mouseenter: onContentEnter,
+                        mouseleave: onContentLeave,
+                        blur: onBlur,
+                        close: onClose,
+                    },
+                    slot: props.slot,
+                }),
+            }),
+        }));
+    }
 }
 exports.TdTooltipContent = TdTooltipContent;

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

@@ -0,0 +1,2 @@
+import { TooltipContentProps } from './content.interface';
+export declare const tooltipContentProps: TooltipContentProps;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tooltipContentProps = void 0;
+const use_delayed_toggle_1 = require("../../../../hooks/use-delayed-toggle");
+const content_const_1 = require("../../td-popper/content/content.const");
+exports.tooltipContentProps = Object.assign(Object.assign(Object.assign({}, use_delayed_toggle_1.useDelayedToggleProps), content_const_1.popperContentProps), { teleported: true });

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

@@ -1,9 +1,27 @@
-import { IUI } from '../../../../ui/ui.interface';
-import { ITdPopperContentConfig } from '../../td-popper/content/content.interface';
-export interface ITdTooltipContent extends IUI {
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+import { MaybeRef } from '@type-dom/signals';
+import { UseDelayedToggleProps } from '../../../../hooks/use-delayed-toggle';
+import { PopperContentProps } from '../../td-popper/content/content.interface';
+export interface ITdTooltipContent extends ITypeFragment {
     className: 'TdTooltipContent';
+    props: TooltipContentProps & TypeFragmentProps;
 }
-export interface ITdTooltipContentConfig extends ITdPopperContentConfig {
+export interface TooltipContentProps extends PopperContentProps, UseDelayedToggleProps {
+    /**
+     * @description delay of appearance, in millisecond
+     *     default: 0,
+     */
+    showAfter?: number;
+    /**
+     * @description delay of disappear, in millisecond
+     *     default: 200,
+     */
+    hideAfter?: number;
+    /**
+     * @description disappear automatically, in millisecond
+     *     default: 0,
+     */
+    autoClose?: number;
     /**
      * @description which element the tooltip CONTENT appends to
      */
@@ -23,10 +41,12 @@ export interface ITdTooltipContentConfig extends ITdPopperContentConfig {
     /**
      * @description same as `aria-label`
      */
-    ariaLabel?: string;
+    ariaLabel?: MaybeRef<string>;
     /**
      * @description visibility of Tooltip
+     *  // default: null,
      */
+    visible?: MaybeRef<boolean> | null;
     /**
      * @description animation name
      */
@@ -38,5 +58,5 @@ export interface ITdTooltipContentConfig extends ITdPopperContentConfig {
     /**
      * @description whether Tooltip is disabled
      */
-    disabled?: boolean;
+    disabled?: MaybeRef<boolean>;
 }

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

@@ -0,0 +1,3 @@
+import '@element-plus/components/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

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

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

@@ -0,0 +1,3 @@
+import '../../../../components/base/style';
+import '../../../../theme-chalk/tooltip.scss';
+import '../../../../components/feedback/td-popper/style';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../theme-chalk/tooltip.scss");
+require("../../../../components/feedback/td-popper/style");

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

@@ -1,9 +1,20 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdTooltip, ITdTooltipConfig } from './td-tooltip.interface';
-export declare class TdTooltip extends UI implements ITdTooltip {
+import { TypeFragment } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+import { TdPopper } from '../td-popper/td-popper.class';
+import { ITdTooltip, TooltipProps } from './td-tooltip.interface';
+import { TdTooltipContent } from './content/content.class';
+export declare class TdTooltip extends TypeFragment implements ITdTooltip {
     className: 'TdTooltip';
-    props: ITdTooltipConfig;
-    private trigger;
-    private content;
-    constructor(params?: ITdTooltipConfig);
+    props: TooltipProps;
+    popperRef?: Signal<TdPopper | undefined>;
+    contentRef?: Signal<TdTooltipContent | undefined>;
+    isFocusInsideContent?: (event?: FocusEvent) => undefined | boolean;
+    onOpen?: (event?: Event | undefined) => void;
+    onClose?: (event?: Event | undefined) => void;
+    hide?: (event?: Event | undefined) => void;
+    onBeforeShow?: () => void;
+    onBeforeHide?: () => void;
+    updatePopper?: () => void;
+    constructor(params?: TooltipProps);
+    setup(): void;
 }