@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/tooltip/index.d.ts

@@ -1,10 +1,105 @@
 import type { TooltipProps } from './type';
-declare const _default: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (e: MouseEvent) => any;
+declare const _default: import("vue").DefineComponent<TooltipProps, {
+    readonly triggerContent: ({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly content?: string | undefined;
+            readonly visible?: boolean | null | undefined;
+            readonly defaultVisible?: boolean | null | undefined;
+            readonly placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | undefined;
+            readonly offset?: number | undefined;
+            readonly variant?: "dark" | "light" | undefined;
+            readonly arrow?: boolean | undefined;
+            readonly zIndex?: number | undefined;
+            readonly target?: (HTMLElement | import("vue").VNode | null) | undefined;
+            readonly root?: (HTMLElement | string) | undefined;
+            readonly borderRadius?: number | undefined;
+            readonly widthEqual?: boolean | undefined;
+            readonly contentStyle?: import("vue").CSSProperties | undefined;
+            readonly destroyOnHide?: boolean | undefined;
+            readonly onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
+            readonly onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: ((event: "contentMouseenter", e: MouseEvent) => void) & ((event: "contentMouseleave", e: MouseEvent) => void);
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("../popup-content/type.ts").PopupContentProps> & Readonly<{
+            onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
+            onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
+        }>, {
+            updateRenderState: () => void;
+            content: import("vue").ShallowRef<HTMLDivElement | null, HTMLDivElement | null>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            contentMouseenter: (e: MouseEvent) => any;
+            contentMouseleave: (e: MouseEvent) => any;
+        }, string, {
+            variant: "dark" | "light";
+            placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+            root: HTMLElement | string;
+            offset: number;
+            visible: boolean | null;
+            arrow: boolean;
+            widthEqual: boolean;
+            destroyOnHide: boolean;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, ((cleanupFn: () => void) => void)]) => any : (...args: [any, any, ((cleanupFn: () => void) => void)]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        variant: "dark" | "light";
+        placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+        root: HTMLElement | string;
+        offset: number;
+        visible: boolean | null;
+        arrow: boolean;
+        widthEqual: boolean;
+        destroyOnHide: boolean;
+    }> & Omit<Readonly<import("../popup-content/type.ts").PopupContentProps> & Readonly<{
+        onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
+        onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
+    }>, "content" | "updateRenderState" | ("variant" | "placement" | "root" | "offset" | "visible" | "arrow" | "widthEqual" | "destroyOnHide")> & import("vue").ShallowUnwrapRef<{
+        updateRenderState: () => void;
+        content: import("vue").ShallowRef<HTMLDivElement | null, HTMLDivElement | null>;
+    }> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            content?: (props: {}) => any;
+        };
+    }) | undefined;
+    updateRenderState(): void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e: MouseEvent | TouchEvent) => any;
     open: (e: MouseEvent) => any;
     "update:visible": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{
-    onClose?: ((e: MouseEvent) => any) | undefined;
+    onClose?: ((e: MouseEvent | TouchEvent) => any) | undefined;
     onOpen?: ((e: MouseEvent) => any) | undefined;
     "onUpdate:visible"?: ((value: boolean) => any) | undefined;
 }>, {
@@ -14,7 +109,8 @@ declare const _default: import("vue").DefineComponent<TooltipProps, {}, {}, {},
     offset: number;
     visible: boolean | null;
     defaultVisible: boolean | null;
-    arrow: boolean;
     trigger: "hover" | "click";
+    arrow: boolean;
+    destroyOnHide: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/es/tooltip/index.js

@@ -1,228 +1,72 @@
 import './css.js'
-import { defineComponent, computed, ref, shallowRef, watch, onMounted, nextTick, useSlots, createVNode, Fragment } from "vue";
-import { N } from "../aside/index.js";
-import { _ as _sfc_main$2 } from "../popup-content/index.js";
-import { _ as _sfc_main$1 } from "../popup-trigger/index.js";
-import { i as inBrowser } from "../share/util/env.js";
-const BORDER_RADIUS = 16;
-const HOVER_CLOSE_DELAY = 300;
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Tooltip"
-  },
-  __name: "index",
-  props: {
-    content: null,
-    visible: {
-      type: Boolean,
-      default: void 0
-    },
-    defaultVisible: {
-      type: Boolean,
-      default: void 0
-    },
-    placement: {
-      default: "top"
-    },
-    trigger: {
-      default: "hover"
-    },
-    offset: {
-      default: 8
-    },
-    variant: {
-      default: "dark"
-    },
-    arrow: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean
-    },
-    zIndex: null,
-    root: {
-      default: "body"
-    }
-  },
-  emits: ["update:visible", "close", "open"],
-  setup(__props, {
-    emit: __emit
-  }) {
-    const props = __props;
-    const controlledMode = computed(() => {
-      return props.visible !== void 0;
-    });
-    const preDisplay = controlledMode.value ? props.visible : props.defaultVisible;
-    const display = ref(N(preDisplay) ? false : preDisplay);
-    const contentRef = shallowRef();
-    const triggerRef = shallowRef();
-    const emits = __emit;
-    const currentTrigger = shallowRef(null);
-    let closeDelayPromiseReject;
-    async function openHandler(node, e) {
-      if (closeDelayPromiseReject) {
-        closeDelayPromiseReject();
-        closeDelayPromiseReject = void 0;
-      }
-      await openHandlerImpl(node);
-      emits("open", e);
-    }
-    async function openHandlerImpl(node, controlled = false) {
-      if (inBrowser()) {
-        resizeObserver == null ? void 0 : resizeObserver.disconnect();
-        if (node.el instanceof HTMLElement) {
-          currentTrigger.value = node;
-        } else {
-          currentTrigger.value = null;
-        }
-        if (currentTrigger.value && currentTrigger.value.el instanceof HTMLElement) {
-          resizeObserver == null ? void 0 : resizeObserver.observe(currentTrigger.value.el);
-        }
-      }
-      if (controlledMode.value && !controlled) {
-        emits("update:visible", true);
-        await nextTick(() => {
-        });
-        display.value = !!props.visible;
-      } else {
-        display.value = true;
-      }
-    }
-    async function closeHandler(e) {
-      if (props.trigger === "click") {
-        const clickContent = contentRef.value && contentRef.value.content && contentRef.value.content.contains(e.target);
-        if (clickContent || !display.value) {
-          return;
-        }
-      } else {
-        if (closeDelayPromiseReject) {
-          closeDelayPromiseReject();
-          closeDelayPromiseReject = void 0;
-        }
-        const {
-          resolve,
-          reject,
-          promise
-        } = Promise.withResolvers();
-        closeDelayPromiseReject = reject;
-        setTimeout(() => {
-          resolve();
-        }, HOVER_CLOSE_DELAY);
-        try {
-          await promise;
-        } catch {
-          return;
-        }
-      }
-      if (controlledMode.value) {
-        emits("update:visible", false);
-        await nextTick(() => {
-        });
-        display.value = !!props.visible;
-      } else {
-        display.value = false;
-      }
-      emits("close", e);
-    }
-    const contentMouseenterHandler = () => {
-      if (props.trigger === "click") {
-        return;
-      }
-      if (closeDelayPromiseReject) {
-        closeDelayPromiseReject();
-        closeDelayPromiseReject = void 0;
-      }
-    };
-    const contentMouseleaveHandler = (e) => {
-      if (props.trigger === "click") {
-        return;
-      }
-      closeHandler(e);
-    };
-    const preprocessCurrentTrigger = () => {
-      if (!inBrowser()) {
-        return;
-      }
-      if (!currentTrigger.value && triggerRef.value && triggerRef.value.firstVNode) {
-        resizeObserver == null ? void 0 : resizeObserver.disconnect();
-        currentTrigger.value = triggerRef.value.firstVNode;
-        if (currentTrigger.value.el instanceof HTMLElement) {
-          resizeObserver == null ? void 0 : resizeObserver.observe(currentTrigger.value.el);
-        }
-      }
-    };
-    const processVisible = (value) => {
-      if (value) {
-        preprocessCurrentTrigger();
-        if (currentTrigger.value) {
-          openHandlerImpl(currentTrigger.value, true);
-        }
-      } else {
-        display.value = false;
-      }
-    };
-    watch(() => props.visible, () => {
-      processVisible(!!props.visible);
-    });
-    const resizeObserver = inBrowser() ? new ResizeObserver(() => {
-      updateRenderState();
-    }) : null;
-    onMounted(() => {
-      nextTick(() => {
-        if (display.value) {
-          updateRenderState();
-        }
-      });
-    });
-    const updateRenderState = () => {
-      var _a;
-      preprocessCurrentTrigger();
-      if (inBrowser()) {
-        (_a = contentRef.value) == null ? void 0 : _a.updateRenderState();
-      }
-    };
-    const slots = useSlots();
-    const checkCurrentTrigger = (_) => {
-      var _a;
-      if (!inBrowser()) {
-        return false;
-      }
-      return ((_a = currentTrigger.value) == null ? void 0 : _a.el) instanceof HTMLElement;
-    };
-    return () => {
-      var _a;
-      return createVNode(Fragment, null, [createVNode(_sfc_main$1, {
-        "trigger": props.trigger,
-        "disabled": props.disabled,
-        "onClose": closeHandler,
-        "onOpen": openHandler,
-        "ref": (node) => triggerRef.value = node
-      }, {
-        default: () => {
-          var _a2;
-          return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
-        }
-      }), createVNode(_sfc_main$2, {
-        "visible": display.value,
-        "content": props.content,
-        "zIndex": props.zIndex,
-        "variant": props.variant,
-        "placement": props.placement,
-        "arrow": props.arrow,
-        "offset": props.offset,
-        "borderRadius": BORDER_RADIUS,
-        "root": props.root,
-        "target": checkCurrentTrigger((_a = currentTrigger.value) == null ? void 0 : _a.el) ? currentTrigger.value.el : null,
-        "onContentMouseenter": contentMouseenterHandler,
-        "onContentMouseleave": contentMouseleaveHandler,
-        "ref": (node) => contentRef.value = node
-      }, {
-        content: slots.content
-      })]);
-    };
-  }
+import { n as forwardEmits } from "../share/util/reactivity.js";
+import { t as popup_default } from "../popup/index.js";
+import { createVNode, defineComponent, mergeProps, shallowRef, useAttrs, useSlots } from "vue";
+var tooltip_default = /* @__PURE__ */ defineComponent({
+	name: "Tooltip",
+	__name: "index",
+	props: {
+		content: null,
+		visible: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultVisible: {
+			type: Boolean,
+			default: void 0
+		},
+		placement: { default: "top" },
+		trigger: { default: "hover" },
+		offset: { default: 8 },
+		variant: { default: "dark" },
+		arrow: {
+			type: Boolean,
+			default: true
+		},
+		disabled: { type: Boolean },
+		zIndex: null,
+		root: { default: "body" },
+		destroyOnHide: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:visible",
+		"close",
+		"open"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const emits = __emit;
+		const popupRef = shallowRef(null);
+		__expose({
+			get triggerContent() {
+				var _popupRef$value;
+				return (_popupRef$value = popupRef.value) === null || _popupRef$value === void 0 ? void 0 : _popupRef$value.triggerContent;
+			},
+			updateRenderState() {
+				var _popupRef$value2;
+				(_popupRef$value2 = popupRef.value) === null || _popupRef$value2 === void 0 || _popupRef$value2.updateRenderState();
+			}
+		});
+		const slots = useSlots();
+		const forward = forwardEmits(emits, [
+			"open",
+			"close",
+			"update:visible"
+		]);
+		return () => {
+			return createVNode(popup_default, mergeProps({ "ref": popupRef }, {
+				...props,
+				...forward,
+				...attrs
+			}), {
+				default: slots.default,
+				content: slots.content
+			});
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { tooltip_default as t };

package/es/tooltip/type.d.ts

@@ -45,7 +45,7 @@ export type TooltipProps = {
      */
     disabled?: boolean;
     /**
-     * @property {number} [disabled]
+     * @property {number} [zIndex]
      * @version 0.0.2
      */
     zIndex?: number;
@@ -54,6 +54,11 @@ export type TooltipProps = {
      * @version 0.0.2
      */
     root?: HTMLElement | string;
+    /**
+     * @property {boolean} [destroyOnHide=false]
+     * @version 0.0.3
+     */
+    destroyOnHide?: boolean;
 };
 export type TooltipEvents = {
     /**
@@ -67,7 +72,7 @@ export type TooltipEvents = {
      * @param {MouseEvent} e
      * @version 0.0.2
      */
-    close: [e: MouseEvent];
+    close: [e: MouseEvent | TouchEvent];
     /**
      * @event open
      * @param {MouseEvent} e