@pixelium/web-vue 0.0.2-fix → 0.0.3-alpha

package/es/popup/index.js

@@ -0,0 +1,203 @@
+import './css.js'
+import { F as m, L as qe, _ as E } from "../vendor.js";
+import { r as GET_ELEMENT_RENDERED } from "../share/const/index.js";
+import { t as inBrowser } from "../share/util/env.js";
+import { n as calcPixelSize } from "../share/util/plot.js";
+import { n as logWarn } from "../share/util/console.js";
+import { t as popup_content_default } from "../popup-content/index.js";
+import { r as checkMouseInsideElementFromEvent } from "../share/util/dom.js";
+import { t as popup_trigger_default } from "../popup-trigger/index.js";
+import { t as useCancelableDelay } from "../share/hook/use-cancelable-delay.js";
+import { Fragment, computed, createVNode, defineComponent, nextTick, onMounted, ref, shallowRef, useSlots, watch } from "vue";
+var popup_default = /* @__PURE__ */ defineComponent({
+	name: "Popup",
+	__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: "light" },
+		arrow: {
+			type: Boolean,
+			default: true
+		},
+		disabled: { type: Boolean },
+		zIndex: null,
+		root: { default: "body" },
+		widthEqual: {
+			type: Boolean,
+			default: false
+		},
+		contentStyle: null,
+		destroyOnHide: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:visible",
+		"close",
+		"open"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const controlledMode = computed(() => {
+			return props.visible !== void 0;
+		});
+		const preDisplay = controlledMode.value ? props.visible : props.defaultVisible;
+		const display = ref(E(preDisplay) ? false : preDisplay);
+		const contentRef = shallowRef();
+		const triggerRef = shallowRef();
+		const emits = __emit;
+		const currentTrigger = shallowRef(null);
+		const [wait, cancel] = useCancelableDelay();
+		const getElFromVNode = (node) => {
+			if (inBrowser()) {
+				let triggerEl = null;
+				if (node.el instanceof HTMLElement || node.el instanceof SVGElement) triggerEl = node.el;
+				else {
+					var _node$component;
+					const getElFunc = (_node$component = node.component) === null || _node$component === void 0 || (_node$component = _node$component.exposed) === null || _node$component === void 0 ? void 0 : _node$component[GET_ELEMENT_RENDERED];
+					if (m(getElFunc)) {
+						const el = getElFunc();
+						if (el instanceof HTMLElement || el instanceof SVGElement) triggerEl = el;
+					}
+					if (triggerEl === null) logWarn(`Please ensure that the root node of the default slot passed to Tooltip, Popover, and similar components can be rendered as a DOM element, or expose a getElementRender function on the component to retrieve the DOM element for balloon attachment.`);
+				}
+				return triggerEl;
+			} else return null;
+		};
+		async function openHandler(node, e) {
+			cancel();
+			currentTrigger.value = getElFromVNode(node);
+			await openHandlerImpl(currentTrigger.value);
+			emits("open", e);
+		}
+		async function openHandlerImpl(node, controlled = false) {
+			if (node) resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(node);
+			if (controlledMode.value && !controlled) {
+				emits("update:visible", true);
+				await nextTick(() => {});
+				display.value = !!props.visible;
+			} else display.value = true;
+		}
+		async function closeHandler(e) {
+			if (e.type === "mouseup" || e.type === "touchend") {
+				const contentEl = contentRef.value && contentRef.value.content;
+				if (contentEl && checkMouseInsideElementFromEvent(contentEl, e)) return;
+			}
+			if (props.trigger === "click") {
+				if (contentRef.value && contentRef.value.content && contentRef.value.content.contains(e.target) || !display.value) return;
+			} else if (!await wait()) 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;
+			cancel();
+		};
+		const dragging = ref(false);
+		const contentMouseleaveHandler = (e) => {
+			if (props.trigger === "click") return;
+			if (dragging.value) return;
+			closeHandler(e);
+		};
+		const preprocessCurrentTrigger = () => {
+			if (!inBrowser()) return;
+			if (!currentTrigger.value && triggerRef.value && triggerRef.value.firstVNode) {
+				resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
+				currentTrigger.value = getElFromVNode(triggerRef.value.firstVNode);
+				if (currentTrigger.value instanceof HTMLElement) resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(currentTrigger.value);
+			}
+		};
+		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 = () => {
+			preprocessCurrentTrigger();
+			if (inBrowser()) {
+				var _contentRef$value;
+				(_contentRef$value = contentRef.value) === null || _contentRef$value === void 0 || _contentRef$value.updateRenderState();
+			}
+		};
+		__expose({
+			triggerContent: contentRef,
+			updateRenderState
+		});
+		const slots = useSlots();
+		const checkCurrentTrigger = (_) => {
+			if (!inBrowser()) return false;
+			return currentTrigger.value instanceof HTMLElement;
+		};
+		const dragHandler = qe(() => {
+			updateRenderState();
+		}, 20);
+		const dragStartHandler = () => {
+			dragging.value = true;
+		};
+		const dragEndHandler = () => {
+			dragging.value = false;
+		};
+		return () => {
+			const pixelSize = calcPixelSize();
+			return createVNode(Fragment, null, [createVNode(popup_trigger_default, {
+				"trigger": props.trigger,
+				"disabled": props.disabled,
+				"onClose": closeHandler,
+				"onOpen": openHandler,
+				"onDrag": dragHandler,
+				"onDragStart": dragStartHandler,
+				"onDragEnd": dragEndHandler,
+				"ref": (node) => triggerRef.value = node
+			}, { default: () => {
+				var _slots$default;
+				return [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
+			} }), createVNode(popup_content_default, {
+				"visible": display.value,
+				"content": props.content,
+				"zIndex": props.zIndex,
+				"variant": props.variant,
+				"placement": props.placement,
+				"arrow": props.arrow,
+				"offset": props.offset,
+				"borderRadius": pixelSize * 4,
+				"root": props.root,
+				"widthEqual": props.widthEqual,
+				"target": checkCurrentTrigger(currentTrigger.value) ? currentTrigger.value : null,
+				"onContentMouseenter": contentMouseenterHandler,
+				"onContentMouseleave": contentMouseleaveHandler,
+				"contentStyle": props.contentStyle,
+				"destroyOnHide": props.destroyOnHide,
+				"ref": (node) => contentRef.value = node
+			}, { content: slots.content })]);
+		};
+	}
+});
+export { popup_default as t };

package/es/popup/type.d.ts

@@ -0,0 +1,105 @@
+import type { CSSProperties } from 'vue';
+export type PopupProps = {
+    /**
+     * @property {string} [content]
+     * @version 0.0.2
+     */
+    content?: string;
+    /**
+     * @property {boolean | null} [visible]
+     * @version 0.0.2
+     */
+    visible?: boolean | null;
+    /**
+     * @property {boolean | null} [defaultVisible]
+     * @version 0.0.2
+     */
+    defaultVisible?: boolean | null;
+    /**
+     * @property {'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'} [placement='top']
+     * @version 0.0.2
+     */
+    placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+    /**
+     * @property {'hover' | 'click'} [trigger='hover']
+     * @version 0.0.2
+     */
+    trigger?: 'hover' | 'click';
+    /**
+     * @property {number} [offset=8]
+     * @version 0.0.2
+     */
+    offset?: number;
+    /**
+     * @property {'dark' | 'light'} [variant='light']
+     * @version 0.0.2
+     */
+    variant?: 'dark' | 'light';
+    /**
+     * @property {boolean} [arrow=true]
+     * @version 0.0.2
+     */
+    arrow?: boolean;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.2
+     */
+    disabled?: boolean;
+    /**
+     * @property {number} [zIndex]
+     * @version 0.0.2
+     */
+    zIndex?: number;
+    /**
+     * @property { HTMLElement | string} [root='body']
+     * @version 0.0.2
+     */
+    root?: HTMLElement | string;
+    /**
+     * @property {boolean} [widthEqual=false]
+     * @version 0.0.2
+     */
+    widthEqual?: boolean;
+    /**
+     * @property {CSSProperties} [contentStyle]
+     * @version 0.0.2
+     */
+    contentStyle?: CSSProperties;
+    /**
+     * @property {boolean} [destroyOnHide=false]
+     * @version 0.0.3
+     */
+    destroyOnHide?: boolean;
+};
+export type PopupEvents = {
+    /**
+     * @event update:visible
+     * @param {boolean} value
+     * @version 0.0.2
+     */
+    'update:visible': [value: boolean];
+    /**
+     * @event close
+     * @param {MouseEvent} e
+     * @version 0.0.2
+     */
+    close: [e: MouseEvent | TouchEvent];
+    /**
+     * @event open
+     * @param {MouseEvent} e
+     * @version 0.0.2
+     */
+    open: [e: MouseEvent];
+};
+export type PopupSlots = {
+    /**
+     * @slot default
+     * @version 0.0.0-beta
+     */
+    default: {};
+    /**
+     * @slot content
+     * @version 0.0.0-beta
+     */
+    content: {};
+};

package/es/popup-content/draw.d.ts

@@ -1,6 +1,6 @@
 import type { RgbaColor } from '../share/type';
 import type { PopupContentProps } from './type';
-export declare function getBorderColor(variant: PopupContentProps['variant']): RgbaColor;
-export declare function getBackgroundColor(variant: PopupContentProps['variant']): RgbaColor;
+export declare function getBorderColor(variant: PopupContentProps['variant']): RgbaColor | null;
+export declare function getBackgroundColor(variant: PopupContentProps['variant']): RgbaColor | null;
 export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number, offsetX: number, offsetY: number, offsetTop: number, offsetLeft: number) => void;
 export declare const drawArrow: (ctx: CanvasRenderingContext2D, width: number, height: number, borderColor: RgbaColor, backgroundColor: RgbaColor, pixelSize: number, placement: "top" | "left" | "right" | "bottom", popupSide: "start" | "end" | "middle", arrowXOffset: number, arrowYOffset: number) => void;

package/es/popup-content/draw.js

@@ -1,151 +1,106 @@
-import { g as getGlobalThemeColor, r as rgbaColor2string } from "../share/util/color.js";
-import { d as drawCircle } from "../share/util/plot.js";
+import { a as drawCircle } from "../share/util/plot.js";
+import { a as rgbaColor2string, n as getGlobalThemeColor } from "../share/util/color.js";
 function getBorderColor(variant) {
-  return variant === "light" ? getGlobalThemeColor("neutral", 10) : getGlobalThemeColor("neutral", 9);
+	return variant === "light" ? getGlobalThemeColor("neutral", 10) : getGlobalThemeColor("neutral", 9);
 }
 function getBackgroundColor(variant) {
-  return variant === "light" ? getGlobalThemeColor("neutral", 1) : getGlobalThemeColor("neutral", 10);
+	return variant === "light" ? getGlobalThemeColor("neutral", 1) : getGlobalThemeColor("neutral", 10);
 }
 const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, offsetX, offsetY, offsetTop, offsetLeft) => {
-  ctx.fillStyle = rgbaColor2string(borderColor);
-  for (let i = 0; i < 4; i++) {
-    if (borderRadius[i] > pixelSize) {
-      drawCircle(
-        ctx,
-        center[i][0] + offsetLeft,
-        center[i][1] + offsetTop,
-        borderRadius[i],
-        rad[i][0],
-        rad[i][1],
-        pixelSize
-      );
-    }
-  }
-  if (center[1][0] + pixelSize > center[0][0]) {
-    ctx.fillRect(
-      center[0][0] + offsetLeft,
-      offsetTop,
-      center[1][0] - center[0][0] + pixelSize,
-      pixelSize
-    );
-  }
-  if (center[2][1] + pixelSize > center[1][1]) {
-    ctx.fillRect(
-      width - offsetX - pixelSize + offsetLeft,
-      center[1][1] + offsetTop,
-      pixelSize,
-      center[2][1] - center[1][1] + pixelSize
-    );
-  }
-  if (center[3][0] < center[2][0] + pixelSize) {
-    ctx.fillRect(
-      center[3][0] + offsetLeft,
-      height - offsetY - pixelSize + offsetTop,
-      center[2][0] - center[3][0] + pixelSize,
-      pixelSize
-    );
-  }
-  if (center[3][1] + pixelSize > center[0][1]) {
-    ctx.fillRect(
-      offsetLeft,
-      center[0][1] + offsetTop,
-      pixelSize,
-      center[3][1] - center[0][1] + pixelSize
-    );
-  }
+	ctx.fillStyle = rgbaColor2string(borderColor);
+	for (let i = 0; i < 4; i++) if (borderRadius[i] > pixelSize) drawCircle(ctx, center[i][0] + offsetLeft, center[i][1] + offsetTop, borderRadius[i], rad[i][0], rad[i][1], pixelSize);
+	if (center[1][0] + pixelSize > center[0][0]) ctx.fillRect(center[0][0] + offsetLeft, offsetTop, center[1][0] - center[0][0] + pixelSize, pixelSize);
+	if (center[2][1] + pixelSize > center[1][1]) ctx.fillRect(width - offsetX - pixelSize + offsetLeft, center[1][1] + offsetTop, pixelSize, center[2][1] - center[1][1] + pixelSize);
+	if (center[3][0] < center[2][0] + pixelSize) ctx.fillRect(center[3][0] + offsetLeft, height - offsetY - pixelSize + offsetTop, center[2][0] - center[3][0] + pixelSize, pixelSize);
+	if (center[3][1] + pixelSize > center[0][1]) ctx.fillRect(offsetLeft, center[0][1] + offsetTop, pixelSize, center[3][1] - center[0][1] + pixelSize);
 };
 const drawArrow = (ctx, width, height, borderColor, backgroundColor, pixelSize, placement, popupSide, arrowXOffset, arrowYOffset) => {
-  switch (placement) {
-    case "right": {
-      const y = arrowYOffset - pixelSize / 2;
-      const vertex = [
-        0,
-        popupSide === "start" ? Math.floor(y) : popupSide === "end" ? Math.ceil(y) : Math.round(y)
-      ];
-      for (let i = 0; i < 4; i++) {
-        const factor = i > 1 ? i - 1 : i;
-        ctx.fillStyle = rgbaColor2string(borderColor);
-        const top = Math.max(0, vertex[1] - factor * pixelSize);
-        const bottom = Math.min(height, vertex[1] + factor * pixelSize);
-        const x = vertex[0] + i * pixelSize;
-        ctx.fillRect(x, top, pixelSize, pixelSize);
-        ctx.fillRect(x, bottom, pixelSize, pixelSize);
-        ctx.fillStyle = rgbaColor2string(backgroundColor);
-        if (bottom - top - pixelSize > 0) {
-          ctx.fillRect(x, top + pixelSize, pixelSize, bottom - top - pixelSize);
-        }
-      }
-      break;
-    }
-    case "left": {
-      const y = arrowYOffset - pixelSize / 2;
-      const vertex = [
-        Math.round(width - pixelSize),
-        popupSide === "start" ? Math.floor(y) : popupSide === "end" ? Math.ceil(y) : Math.round(y)
-      ];
-      for (let i = 0; i < 4; i++) {
-        const factor = i > 1 ? i - 1 : i;
-        ctx.fillStyle = rgbaColor2string(borderColor);
-        const top = Math.max(0, vertex[1] - factor * pixelSize);
-        const bottom = Math.min(height - pixelSize, vertex[1] + factor * pixelSize);
-        const x = vertex[0] - i * pixelSize;
-        ctx.fillRect(x, top, pixelSize, pixelSize);
-        ctx.fillRect(x, bottom, pixelSize, pixelSize);
-        ctx.fillStyle = rgbaColor2string(backgroundColor);
-        if (bottom - top - pixelSize > 0) {
-          ctx.fillRect(x, top + pixelSize, pixelSize, bottom - top - pixelSize);
-        }
-      }
-      break;
-    }
-    case "bottom": {
-      const x = arrowXOffset - pixelSize / 2;
-      const vertex = [
-        popupSide === "start" ? Math.floor(x) : popupSide === "end" ? Math.ceil(x) : Math.round(x),
-        0
-      ];
-      for (let i = 0; i < 4; i++) {
-        const factor = i > 1 ? i - 1 : i;
-        ctx.fillStyle = rgbaColor2string(borderColor);
-        const left = Math.max(0, vertex[0] - factor * pixelSize);
-        const right = Math.min(vertex[0] + factor * pixelSize, width - pixelSize);
-        const y = vertex[1] + i * pixelSize;
-        ctx.fillRect(left, y, pixelSize, pixelSize);
-        ctx.fillRect(right, y, pixelSize, pixelSize);
-        ctx.fillStyle = rgbaColor2string(backgroundColor);
-        if (right - left - pixelSize > 0) {
-          ctx.fillRect(left + pixelSize, y, right - left - pixelSize, pixelSize);
-        }
-      }
-      break;
-    }
-    case "top":
-    default: {
-      const x = arrowXOffset - pixelSize / 2;
-      const vertex = [
-        popupSide === "start" ? Math.floor(x) : popupSide === "end" ? Math.ceil(x) : Math.round(x),
-        Math.round(height - pixelSize)
-      ];
-      for (let i = 0; i < 4; i++) {
-        const factor = i > 1 ? i - 1 : i;
-        ctx.fillStyle = rgbaColor2string(borderColor);
-        const left = Math.max(0, vertex[0] - factor * pixelSize);
-        const right = Math.min(vertex[0] + factor * pixelSize, width - pixelSize);
-        const y = vertex[1] - i * pixelSize;
-        ctx.fillRect(left, y, pixelSize, pixelSize);
-        ctx.fillRect(right, y, pixelSize, pixelSize);
-        ctx.fillStyle = rgbaColor2string(backgroundColor);
-        if (right - left - pixelSize > 0) {
-          ctx.fillRect(left + pixelSize, y, right - left - pixelSize, pixelSize);
-        }
-      }
-      break;
-    }
-  }
-};
-export {
-  getBackgroundColor as a,
-  drawArrow as b,
-  drawBorder as d,
-  getBorderColor as g
+	const factors = [
+		0,
+		1,
+		1
+	];
+	const borderColorStr = rgbaColor2string(borderColor);
+	const bgColorStr = rgbaColor2string(backgroundColor);
+	const adjust = (coord) => popupSide === "start" ? Math.floor(coord) : popupSide === "end" ? Math.ceil(coord) : Math.round(coord);
+	switch (placement) {
+		case "right": {
+			const vertexY = adjust(arrowYOffset - pixelSize / 2);
+			const startX = 0;
+			for (let i = 0; i < 3; i++) {
+				const spread = factors[i] * pixelSize;
+				const top = Math.max(0, vertexY - spread);
+				const bottom = Math.min(height, vertexY + spread);
+				const x = startX + i * pixelSize;
+				ctx.fillStyle = i == 2 ? bgColorStr : borderColorStr;
+				ctx.fillRect(x, top, pixelSize, pixelSize);
+				ctx.fillRect(x, bottom, pixelSize, pixelSize);
+				const bgHeight = bottom - top - pixelSize;
+				if (bgHeight > 0) {
+					ctx.fillStyle = bgColorStr;
+					ctx.fillRect(x, top + pixelSize, pixelSize, bgHeight);
+				}
+			}
+			break;
+		}
+		case "left": {
+			const vertexY = adjust(arrowYOffset - pixelSize / 2);
+			const startX = Math.round(width - pixelSize);
+			for (let i = 0; i < 3; i++) {
+				const spread = factors[i] * pixelSize;
+				const top = Math.max(0, vertexY - spread);
+				const bottom = Math.min(height - pixelSize, vertexY + spread);
+				const x = startX - i * pixelSize;
+				ctx.fillStyle = i == 2 ? bgColorStr : borderColorStr;
+				ctx.fillRect(x, top, pixelSize, pixelSize);
+				ctx.fillRect(x, bottom, pixelSize, pixelSize);
+				const bgHeight = bottom - top - pixelSize;
+				if (bgHeight > 0) {
+					ctx.fillStyle = bgColorStr;
+					ctx.fillRect(x, top + pixelSize, pixelSize, bgHeight);
+				}
+			}
+			break;
+		}
+		case "bottom": {
+			const vertexX = adjust(arrowXOffset - pixelSize / 2);
+			const startY = 0;
+			for (let i = 0; i < 3; i++) {
+				const spread = factors[i] * pixelSize;
+				const left = Math.max(0, vertexX - spread);
+				const right = Math.min(vertexX + spread, width - pixelSize);
+				const y = startY + i * pixelSize;
+				ctx.fillStyle = i == 2 ? bgColorStr : borderColorStr;
+				ctx.fillRect(left, y, pixelSize, pixelSize);
+				ctx.fillRect(right, y, pixelSize, pixelSize);
+				const bgWidth = right - left - pixelSize;
+				if (bgWidth > 0) {
+					ctx.fillStyle = bgColorStr;
+					ctx.fillRect(left + pixelSize, y, bgWidth, pixelSize);
+				}
+			}
+			break;
+		}
+		case "top":
+		default: {
+			const vertexX = adjust(arrowXOffset - pixelSize / 2);
+			const startY = Math.round(height - pixelSize);
+			for (let i = 0; i < 3; i++) {
+				const spread = factors[i] * pixelSize;
+				const left = Math.max(0, vertexX - spread);
+				const right = Math.min(vertexX + spread, width - pixelSize);
+				const y = startY - i * pixelSize;
+				ctx.fillStyle = i == 2 ? bgColorStr : borderColorStr;
+				ctx.fillRect(left, y, pixelSize, pixelSize);
+				ctx.fillRect(right, y, pixelSize, pixelSize);
+				const bgWidth = right - left - pixelSize;
+				if (bgWidth > 0) {
+					ctx.fillStyle = bgColorStr;
+					ctx.fillRect(left + pixelSize, y, bgWidth, pixelSize);
+				}
+			}
+			break;
+		}
+	}
 };
+export { getBorderColor as i, drawBorder as n, getBackgroundColor as r, drawArrow as t };

package/es/popup-content/index.css

@@ -1,18 +1,18 @@
 .px-popup-content {
-  padding: var(--px-interval-1) var(--px-interval-2);
-  display: inline-block;
   --text-color: var(--px-neutral-10);
-  --min-size: var(--px-interval-9);
-  color: var(--text-color);
+  padding: 4px 8px;
+  display: inline-block;
   border-color: transparent;
   border-width: var(--px-bit);
   border-style: solid;
   background-color: transparent;
   box-sizing: border-box;
   position: absolute;
+  color: var(--text-color);
   white-space: pre-line;
-  min-height: var(--min-size);
-  min-width: var(--min-size);
+  min-height: calc(28px + 2 * var(--px-bit));
+  min-width: 36px;
+  width: max-content;
   transition: transform 0.25s, opacity 0.25s;
 }
 .px-popup-content-fade__top-enter-to,
@@ -59,29 +59,29 @@
   --text-color: var(--px-neutral-1);
 }
 .px-popup-content__top.px-popup-content__arrow {
-  min-height: calc(var(--px-bit) * 3 + var(--min-size));
-  padding-bottom: calc(var(--px-interval-1) + var(--px-bit) * 3);
+  min-height: calc(var(--px-bit) * 12);
+  padding-bottom: calc(4px + var(--px-bit) * 2);
 }
 .px-popup-content__top.px-popup-content__arrow .px-popup-content-arrow {
   bottom: calc(-1 * var(--px-bit));
 }
 .px-popup-content__bottom.px-popup-content__arrow {
   min-height: calc(var(--px-bit) * 12);
-  padding-top: calc(var(--px-interval-1) + var(--px-bit) * 3);
+  padding-top: calc(4px + var(--px-bit) * 2);
 }
 .px-popup-content__bottom.px-popup-content__arrow .px-popup-content-arrow {
   top: calc(-1 * var(--px-bit));
 }
 .px-popup-content__left.px-popup-content__arrow {
   min-width: calc(var(--px-bit) * 12);
-  padding-right: calc(var(--px-interval-2) + var(--px-bit) * 3);
+  padding-right: calc(8px + var(--px-bit) * 2);
 }
 .px-popup-content__left.px-popup-content__arrow .px-popup-content-arrow {
   right: calc(-1 * var(--px-bit));
 }
 .px-popup-content__right.px-popup-content__arrow {
   min-width: calc(var(--px-bit) * 12);
-  padding-left: calc(var(--px-interval-2) + var(--px-bit) * 3);
+  padding-left: calc(8px + var(--px-bit) * 2);
 }
 .px-popup-content__right.px-popup-content__arrow .px-popup-content-arrow {
   left: calc(-1 * var(--px-bit));

package/es/popup-content/index.d.ts

@@ -20,6 +20,7 @@ declare const __VLS_component: import("vue").DefineComponent<PopupContentProps,
     visible: boolean | null;
     arrow: boolean;
     widthEqual: boolean;
+    destroyOnHide: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;