@destyler/popper 0.0.6 → 0.0.7-beta.9

package/dist/index.d.ts

@@ -1,5 +1,173 @@
-export { PopperAnchor, PopperAnchorProps, PopperArrow, PopperArrowProps, PopperContent, PopperContentProps, PopperRoot, popperAnchorProps, popperArrowProps, popperContentProps } from './component.js';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
-import '@floating-ui/vue';
+import { AutoUpdateOptions, Boundary, ComputePositionReturn, Placement, Placement as Placement$1, VirtualElement } from "@floating-ui/dom";
+
+//#region src/types.d.ts
+type MaybeRectElement = HTMLElement | VirtualElement | null;
+type MaybeElement = HTMLElement | null;
+type MaybeFn<T> = T | (() => T);
+type PlacementSide = 'top' | 'right' | 'bottom' | 'left';
+type PlacementAlign = 'start' | 'center' | 'end';
+interface AnchorRect {
+  x?: number | undefined;
+  y?: number | undefined;
+  width?: number | undefined;
+  height?: number | undefined;
+}
+interface PositioningOptions {
+  /**
+   * Whether the popover should be hidden when the reference element is detached
+   */
+  hideWhenDetached?: boolean | undefined;
+  /**
+   * The strategy to use for positioning
+   */
+  strategy?: 'absolute' | 'fixed' | undefined;
+  /**
+   * The initial placement of the floating element
+   */
+  placement?: Placement | undefined;
+  /**
+   * The offset of the floating element
+   */
+  offset?: {
+    mainAxis?: number;
+    crossAxis?: number;
+  } | undefined;
+  /**
+   * The main axis offset or gap between the reference and floating elements
+   */
+  gutter?: number | undefined;
+  /**
+   * The secondary axis offset or gap between the reference and floating elements
+   */
+  shift?: number | undefined;
+  /**
+   * The virtual padding around the viewport edges to check for overflow
+   */
+  overflowPadding?: number | undefined;
+  /**
+   * The minimum padding between the arrow and the floating element's corner.
+   * @default 4
+   */
+  arrowPadding?: number | undefined;
+  /**
+   * Whether to flip the placement
+   */
+  flip?: boolean | Placement[] | undefined;
+  /**
+   * Whether the popover should slide when it overflows.
+   */
+  slide?: boolean | undefined;
+  /**
+   * Whether the floating element can overlap the reference element
+   * @default false
+   */
+  overlap?: boolean | undefined;
+  /**
+   * Whether to make the floating element same width as the reference element
+   */
+  sameWidth?: boolean | undefined;
+  /**
+   * Whether the popover should fit the viewport.
+   */
+  fitViewport?: boolean | undefined;
+  /**
+   * The overflow boundary of the reference element
+   */
+  boundary?: (() => Boundary) | undefined;
+  /**
+   * Options to activate auto-update listeners
+   */
+  listeners?: boolean | AutoUpdateOptions | undefined;
+  /**
+   * Function called when the placement is computed
+   */
+  onComplete?: ((data: ComputePositionReturn) => void) | undefined;
+  /**
+   * Function called when the floating element is positioned or not
+   */
+  onPositioned?: ((data: {
+    placed: boolean;
+  }) => void) | undefined;
+  /**
+   *  Function that returns the anchor rect
+   */
+  getAnchorRect?: ((element: HTMLElement | VirtualElement | null) => AnchorRect | null) | undefined;
+  /**
+   * A callback that will be called when the popover needs to calculate its
+   * position.
+   */
+  updatePosition?: ((data: {
+    updatePosition: () => Promise<void>;
+  }) => void | Promise<void>) | undefined;
+}
+//#endregion
+//#region src/get-placement.d.ts
+declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floatingOrFn: MaybeFn<MaybeElement>, opts?: PositioningOptions & {
+  defer?: boolean;
+}): () => void;
+//#endregion
+//#region src/middleware.d.ts
+declare const cssVars: {
+  arrowSize: {
+    variable: string;
+    reference: string;
+  };
+  arrowSizeHalf: {
+    variable: string;
+    reference: string;
+  };
+  arrowBg: {
+    variable: string;
+    reference: string;
+  };
+  transformOrigin: {
+    variable: string;
+    reference: string;
+  };
+  arrowOffset: {
+    variable: string;
+    reference: string;
+  };
+};
+//#endregion
+//#region src/get-styles.d.ts
+interface GetPlacementStylesOptions {
+  placement?: Placement$1 | undefined;
+}
+declare function getPlacementStyles(options?: Pick<PositioningOptions, 'placement' | 'sameWidth' | 'fitViewport' | 'strategy'>): {
+  arrow: {
+    readonly [cssVars.arrowSizeHalf.variable]: `calc(${string} / 2)`;
+    readonly [cssVars.arrowOffset.variable]: `calc(${string} * -1)`;
+    readonly position: "absolute";
+    readonly width: string;
+    readonly height: string;
+  };
+  arrowTip: {
+    readonly transform: any;
+    readonly background: string;
+    readonly top: "0";
+    readonly left: "0";
+    readonly width: "100%";
+    readonly height: "100%";
+    readonly position: "absolute";
+    readonly zIndex: "inherit";
+  };
+  floating: {
+    readonly position: "absolute" | "fixed";
+    readonly isolation: "isolate";
+    readonly minWidth: "max-content" | undefined;
+    readonly width: "var(--reference-width)" | undefined;
+    readonly maxWidth: "var(--available-width)" | undefined;
+    readonly maxHeight: "var(--available-height)" | undefined;
+    readonly top: "0px";
+    readonly left: "0px";
+    readonly transform: "translate3d(var(--x), var(--y), 0)" | "translate3d(0, -100vh, 0)";
+    readonly zIndex: "var(--z-index)";
+  };
+};
+//#endregion
+//#region src/placement.d.ts
+declare function isValidPlacement(v: string): v is Placement$1;
+declare function getPlacementSide(placement: Placement$1): PlacementSide;
+//#endregion
+export { type AnchorRect, type AutoUpdateOptions, type Boundary, type ComputePositionReturn, type GetPlacementStylesOptions, type Placement, type PlacementAlign, type PlacementSide, type PositioningOptions, getPlacement, getPlacementSide, getPlacementStyles, isValidPlacement };

package/dist/index.js

@@ -0,0 +1,333 @@
+import { getComputedStyle, getWindow, isHTMLElement, raf } from "@destyler/dom";
+import { compact, isNull, noop, runIfFn } from "@destyler/utils";
+import { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from "@floating-ui/dom";
+
+//#region src/get-anchor.ts
+function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
+	if (typeof DOMRect === "function") return new DOMRect(x, y, width, height);
+	const rect = {
+		x,
+		y,
+		width,
+		height,
+		top: y,
+		right: x + width,
+		bottom: y + height,
+		left: x
+	};
+	return {
+		...rect,
+		toJSON: () => rect
+	};
+}
+function getDOMRect(anchorRect) {
+	if (!anchorRect) return createDOMRect();
+	const { x, y, width, height } = anchorRect;
+	return createDOMRect(x, y, width, height);
+}
+function getAnchorElement(anchorElement, getAnchorRect) {
+	return {
+		contextElement: isHTMLElement(anchorElement) ? anchorElement : void 0,
+		getBoundingClientRect: () => {
+			const anchor = anchorElement;
+			const anchorRect = getAnchorRect?.(anchor);
+			if (anchorRect || !anchor) return getDOMRect(anchorRect);
+			return anchor.getBoundingClientRect();
+		}
+	};
+}
+
+//#endregion
+//#region src/middleware.ts
+const toVar = (value) => ({
+	variable: value,
+	reference: `var(${value})`
+});
+const cssVars = {
+	arrowSize: toVar("--arrow-size"),
+	arrowSizeHalf: toVar("--arrow-size-half"),
+	arrowBg: toVar("--arrow-background"),
+	transformOrigin: toVar("--transform-origin"),
+	arrowOffset: toVar("--arrow-offset")
+};
+function getTransformOrigin(arrow$1) {
+	return {
+		"top": "bottom center",
+		"top-start": arrow$1 ? `${arrow$1.x}px bottom` : "left bottom",
+		"top-end": arrow$1 ? `${arrow$1.x}px bottom` : "right bottom",
+		"bottom": "top center",
+		"bottom-start": arrow$1 ? `${arrow$1.x}px top` : "top left",
+		"bottom-end": arrow$1 ? `${arrow$1.x}px top` : "top right",
+		"left": "right center",
+		"left-start": arrow$1 ? `right ${arrow$1.y}px` : "right top",
+		"left-end": arrow$1 ? `right ${arrow$1.y}px` : "right bottom",
+		"right": "left center",
+		"right-start": arrow$1 ? `left ${arrow$1.y}px` : "left top",
+		"right-end": arrow$1 ? `left ${arrow$1.y}px` : "left bottom"
+	};
+}
+const transformOriginMiddleware = {
+	name: "transformOrigin",
+	fn({ placement, elements, middlewareData }) {
+		const { arrow: arrow$1 } = middlewareData;
+		const transformOrigin = getTransformOrigin(arrow$1)[placement];
+		const { floating } = elements;
+		floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin);
+		return { data: { transformOrigin } };
+	}
+};
+const rectMiddleware = {
+	name: "rects",
+	fn({ rects }) {
+		return { data: rects };
+	}
+};
+function shiftArrowMiddleware(arrowEl) {
+	if (!arrowEl) return;
+	return {
+		name: "shiftArrow",
+		fn({ placement, middlewareData }) {
+			if (!middlewareData.arrow) return {};
+			const { x, y } = middlewareData.arrow;
+			const dir = placement.split("-")[0];
+			Object.assign(arrowEl.style, {
+				left: x != null ? `${x}px` : "",
+				top: y != null ? `${y}px` : "",
+				[dir]: `calc(100% + ${cssVars.arrowOffset.reference})`
+			});
+			return {};
+		}
+	};
+}
+
+//#endregion
+//#region src/placement.ts
+function isValidPlacement(v) {
+	return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v);
+}
+function getPlacementDetails(placement) {
+	const [side, align] = placement.split("-");
+	return {
+		side,
+		align,
+		hasAlign: align != null
+	};
+}
+function getPlacementSide(placement) {
+	return placement.split("-")[0];
+}
+
+//#endregion
+//#region src/get-placement.ts
+const defaultOptions = {
+	strategy: "absolute",
+	placement: "bottom",
+	listeners: true,
+	gutter: 8,
+	flip: true,
+	slide: true,
+	overlap: false,
+	sameWidth: false,
+	fitViewport: false,
+	overflowPadding: 8,
+	arrowPadding: 4
+};
+function roundByDpr(win, value) {
+	const dpr = win.devicePixelRatio || 1;
+	return Math.round(value * dpr) / dpr;
+}
+function getBoundaryMiddleware(opts) {
+	return runIfFn(opts.boundary);
+}
+function getArrowMiddleware(arrowElement, opts) {
+	if (!arrowElement) return;
+	return arrow({
+		element: arrowElement,
+		padding: opts.arrowPadding
+	});
+}
+function getOffsetMiddleware(arrowElement, opts) {
+	if (isNull(opts.offset ?? opts.gutter)) return;
+	return offset(({ placement }) => {
+		const arrowOffset = (arrowElement?.clientHeight || 0) / 2;
+		const gutter = opts.offset?.mainAxis ?? opts.gutter;
+		const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
+		const { hasAlign } = getPlacementDetails(placement);
+		const shift$1 = !hasAlign ? opts.shift : void 0;
+		const crossAxis = opts.offset?.crossAxis ?? shift$1;
+		return compact({
+			crossAxis,
+			mainAxis,
+			alignmentAxis: opts.shift
+		});
+	});
+}
+function getFlipMiddleware(opts) {
+	if (!opts.flip) return;
+	return flip({
+		boundary: getBoundaryMiddleware(opts),
+		padding: opts.overflowPadding,
+		fallbackPlacements: opts.flip === true ? void 0 : opts.flip
+	});
+}
+function getShiftMiddleware(opts) {
+	if (!opts.slide && !opts.overlap) return;
+	return shift({
+		boundary: getBoundaryMiddleware(opts),
+		mainAxis: opts.slide,
+		crossAxis: opts.overlap,
+		padding: opts.overflowPadding,
+		limiter: limitShift()
+	});
+}
+function getSizeMiddleware(opts) {
+	return size({
+		padding: opts.overflowPadding,
+		apply({ elements, rects, availableHeight, availableWidth }) {
+			const floating = elements.floating;
+			const referenceWidth = Math.round(rects.reference.width);
+			availableWidth = Math.floor(availableWidth);
+			availableHeight = Math.floor(availableHeight);
+			floating.style.setProperty("--reference-width", `${referenceWidth}px`);
+			floating.style.setProperty("--available-width", `${availableWidth}px`);
+			floating.style.setProperty("--available-height", `${availableHeight}px`);
+		}
+	});
+}
+function hideWhenDetachedMiddleware(opts) {
+	if (!opts.hideWhenDetached) return;
+	return hide({
+		strategy: "referenceHidden",
+		boundary: opts.boundary?.() ?? "clippingAncestors"
+	});
+}
+function getAutoUpdateOptions(opts) {
+	if (!opts) return {};
+	if (opts === true) return {
+		ancestorResize: true,
+		ancestorScroll: true,
+		elementResize: true,
+		layoutShift: true
+	};
+	return opts;
+}
+function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
+	const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect);
+	if (!floating || !reference) return;
+	const options = Object.assign({}, defaultOptions, opts);
+	const arrowEl = floating.querySelector("[data-part=arrow]");
+	const middleware = [
+		getOffsetMiddleware(arrowEl, options),
+		getFlipMiddleware(options),
+		getShiftMiddleware(options),
+		getArrowMiddleware(arrowEl, options),
+		shiftArrowMiddleware(arrowEl),
+		transformOriginMiddleware,
+		getSizeMiddleware(options),
+		hideWhenDetachedMiddleware(options),
+		rectMiddleware
+	];
+	const { placement, strategy, onComplete, onPositioned } = options;
+	const updatePosition = async () => {
+		if (!reference || !floating) return;
+		const pos = await computePosition(reference, floating, {
+			placement,
+			middleware,
+			strategy
+		});
+		onComplete?.(pos);
+		onPositioned?.({ placed: true });
+		const win = getWindow(floating);
+		const x = roundByDpr(win, pos.x);
+		const y = roundByDpr(win, pos.y);
+		floating.style.setProperty("--x", `${x}px`);
+		floating.style.setProperty("--y", `${y}px`);
+		if (options.hideWhenDetached) {
+			const isHidden = pos.middlewareData.hide?.referenceHidden;
+			if (isHidden) {
+				floating.style.setProperty("visibility", "hidden");
+				floating.style.setProperty("pointer-events", "none");
+			} else {
+				floating.style.removeProperty("visibility");
+				floating.style.removeProperty("pointer-events");
+			}
+		}
+		const contentEl = floating.firstElementChild;
+		if (contentEl) {
+			const styles = getComputedStyle(contentEl);
+			floating.style.setProperty("--z-index", styles.zIndex);
+		}
+	};
+	const update = async () => {
+		if (opts.updatePosition) {
+			await opts.updatePosition({ updatePosition });
+			onPositioned?.({ placed: true });
+		} else await updatePosition();
+	};
+	const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
+	const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop;
+	update();
+	return () => {
+		cancelAutoUpdate?.();
+		onPositioned?.({ placed: false });
+	};
+}
+function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
+	const { defer,...options } = opts;
+	const func = defer ? raf : (v) => v();
+	const cleanups = [];
+	cleanups.push(func(() => {
+		const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn;
+		const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn;
+		cleanups.push(getPlacementImpl(reference, floating, options));
+	}));
+	return () => {
+		cleanups.forEach((fn) => fn?.());
+	};
+}
+
+//#endregion
+//#region src/get-styles.ts
+const ARROW_FLOATING_STYLE = {
+	bottom: "rotate(45deg)",
+	left: "rotate(135deg)",
+	top: "rotate(225deg)",
+	right: "rotate(315deg)"
+};
+function getPlacementStyles(options = {}) {
+	const { placement, sameWidth, fitViewport, strategy = "absolute" } = options;
+	return {
+		arrow: {
+			position: "absolute",
+			width: cssVars.arrowSize.reference,
+			height: cssVars.arrowSize.reference,
+			[cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
+			[cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`
+		},
+		arrowTip: {
+			transform: placement ? ARROW_FLOATING_STYLE[placement.split("-")[0]] : void 0,
+			background: cssVars.arrowBg.reference,
+			top: "0",
+			left: "0",
+			width: "100%",
+			height: "100%",
+			position: "absolute",
+			zIndex: "inherit"
+		},
+		floating: {
+			position: strategy,
+			isolation: "isolate",
+			minWidth: sameWidth ? void 0 : "max-content",
+			width: sameWidth ? "var(--reference-width)" : void 0,
+			maxWidth: fitViewport ? "var(--available-width)" : void 0,
+			maxHeight: fitViewport ? "var(--available-height)" : void 0,
+			top: "0px",
+			left: "0px",
+			transform: placement ? "translate3d(var(--x), var(--y), 0)" : "translate3d(0, -100vh, 0)",
+			zIndex: "var(--z-index)"
+		}
+	};
+}
+
+//#endregion
+export { getPlacement, getPlacementSide, getPlacementStyles, isValidPlacement };

package/package.json

@@ -1,45 +1,29 @@
 {
   "name": "@destyler/popper",
   "type": "module",
-  "version": "0.0.6",
-  "description": "popper is a component that allows you to create popups, tooltips, and dropdowns.",
+  "version": "0.0.7-beta.9",
+  "description": "Dynamic positioning logic for UI machines",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.mts",
-      "default": "./dist/index.mjs"
-    },
-    "./resolver": {
-      "types": "./dist/resolver.d.mts",
-      "default": "./dist/resolver.mjs"
-    },
-    "./component": {
-      "types": "./dist/component.d.mts",
-      "default": "./dist/component.mjs"
-    },
-    "./*": "./*"
+    ".": "./dist/index.js"
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "*.d.ts",
     "dist"
   ],
-  "peerDependencies": {
-    "vue": ">=3.4.21"
-  },
   "dependencies": {
-    "@floating-ui/vue": "^1.0.6",
-    "@destyler/arrow": "0.0.6",
-    "@destyler/composition": "0.0.6",
-    "@destyler/shared": "0.0.6",
-    "@destyler/primitive": "0.0.6"
+    "@floating-ui/dom": "1.7.1",
+    "@destyler/dom": "0.0.7-beta.9",
+    "@destyler/utils": "0.0.7-beta.9"
   },
   "scripts": {
     "clear": "rimraf ./dist",
-    "build": "pnpm run clear && unbuild",
-    "stub": "unbuild --stub"
+    "clear:node_modules": "rimraf ./node_modules",
+    "build": "pnpm run clear && tsdown",
+    "watch": "tsdown --watch"
   }
 }

package/README.md

@@ -1,7 +0,0 @@
-# @destyler/popper
-
-[![NPM version](https://img.shields.io/npm/v/@destyler/popper?color=a1b858&popper=)](https://www.npmjs.com/package/@destyler/popper)
-
-> popper is a component that allows you to create popups, tooltips, and dropdowns.
-
-[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)