@will-ui/vue 1.0.0

package/dist/use/useScaleFromPoint.d.ts

@@ -0,0 +1,57 @@
+export type ScaleFromPoint = {
+    x: number;
+    y: number;
+};
+export type ScaleTriggerKind = 'modal' | 'confirm';
+export type TriggerSnapshot = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    radius: string;
+    background: string;
+};
+export type MorphVars = {
+    '--__enter-transform': string;
+    '--__enter-clip': string;
+    '--__enter-radius': string;
+    '--__enter-bg': string;
+};
+export declare function ensureScaleFromPointTracking(): void;
+/**
+ * 在 Confirm.open / Modal 打开时快照指针 + 对应 data-*-trigger 元素。
+ * - force：强制覆盖冻结点（Confirm / Modal 打开时）
+ * - 非 force：若已有冻结点（Confirm.open 已拍过）则不覆盖
+ */
+export declare function captureScaleFromPoint(e?: {
+    clientX: number;
+    clientY: number;
+} | Event | null, opts?: {
+    force?: boolean;
+}): void;
+export declare function getScaleFromPoint(): ScaleFromPoint;
+/** 相对视口矩形算 transform-origin（勿用 offsetLeft，flex 居中会偏） */
+export declare function originFromElement(el: HTMLElement, point?: ScaleFromPoint): ScaleFromPoint;
+/**
+ * 从点击处 scale，或从 data-modal-trigger / data-confirm-trigger 开窗。
+ * Modal 传 `'modal'`，Confirm（Drawer center）传 `'confirm'`。
+ */
+export default function useScaleFromPoint(kind?: ScaleTriggerKind): {
+    transformOrigin: {
+        x: number;
+        y: number;
+    };
+    morphVars: {
+        '--__enter-transform': string;
+        '--__enter-clip': string;
+        '--__enter-radius': string;
+        '--__enter-bg': string;
+    };
+    morphCss: import('vue').ComputedRef<{}>;
+    fromTrigger: import('vue').ComputedRef<boolean>;
+    measureOrigin: (el: HTMLElement | null | undefined) => ScaleFromPoint;
+    applyOrigin: (el: HTMLElement | null | undefined) => ScaleFromPoint;
+    originCss: () => string;
+    pinTriggerForLeave: (layerZ: number, panelEl?: HTMLElement | null) => void;
+    unpinTrigger: () => void;
+};

package/dist/use/useScaleFromPoint.js

@@ -0,0 +1,325 @@
+import { getWindowSize } from "../util/dom.js";
+import { computed, reactive } from "vue";
+//#region use/useScaleFromPoint.ts
+var TRIGGER_ATTR = {
+	modal: "data-modal-trigger",
+	confirm: "data-confirm-trigger"
+};
+var TRIGGER_KINDS = ["modal", "confirm"];
+var emptyMorph = () => ({
+	"--__enter-transform": "",
+	"--__enter-clip": "",
+	"--__enter-radius": "",
+	"--__enter-bg": ""
+});
+/** 文档级最后指针 */
+var lastPointer = {
+	x: 0,
+	y: 0
+};
+/** open 时冻结的起点，进场测量优先用它，避免挂载期间 mousemove 带偏 */
+var frozenPointer = null;
+var lastTriggers = {
+	modal: null,
+	confirm: null
+};
+var frozenTriggers = {
+	modal: null,
+	confirm: null
+};
+var lastTriggerEls = {
+	modal: null,
+	confirm: null
+};
+var frozenTriggerEls = {
+	modal: null,
+	confirm: null
+};
+var listening = false;
+/**
+* 离场时不要改 trigger 自身的定位（祖先 overflow/transform 会把 fixed 关进滚动容器，
+* 盖不住 body 上的 portal）。原节点只藏着占位；克隆挂 body，压在弹层之上。
+*/
+function elevateTrigger(el, aboveZ) {
+	const rect = el.getBoundingClientRect();
+	const clone = el.cloneNode(true);
+	clone.setAttribute("aria-hidden", "true");
+	clone.removeAttribute("id");
+	clone.querySelectorAll("[id]").forEach((n) => n.removeAttribute("id"));
+	clone.style.position = "fixed";
+	clone.style.left = `${rect.left}px`;
+	clone.style.top = `${rect.top}px`;
+	clone.style.right = "auto";
+	clone.style.bottom = "auto";
+	clone.style.width = `${rect.width}px`;
+	clone.style.height = `${rect.height}px`;
+	clone.style.margin = "0";
+	clone.style.boxSizing = "border-box";
+	clone.style.zIndex = String(Math.max(1, aboveZ));
+	clone.style.pointerEvents = "none";
+	clone.style.visibility = "visible";
+	clone.style.opacity = "1";
+	clone.style.transform = "none";
+	document.body.appendChild(clone);
+	const prevVisibility = el.style.visibility;
+	el.style.visibility = "hidden";
+	return {
+		el,
+		clone,
+		prevVisibility
+	};
+}
+function restoreTrigger(pin) {
+	pin.el.style.visibility = pin.prevVisibility;
+	pin.clone.remove();
+}
+function findTriggerElement(e, attr) {
+	const target = e.target;
+	if (!(target instanceof Element)) return null;
+	const marked = target.closest(`[${attr}]`);
+	if (!marked) return null;
+	const spec = marked.getAttribute(attr);
+	if (spec && spec !== "true") try {
+		const found = document.querySelector(spec);
+		if (found instanceof HTMLElement) return found;
+	} catch {}
+	return marked;
+}
+function snapshotTrigger(el) {
+	const rect = el.getBoundingClientRect();
+	if (rect.width < 1 || rect.height < 1) return null;
+	const cs = getComputedStyle(el);
+	return {
+		left: rect.left,
+		top: rect.top,
+		width: rect.width,
+		height: rect.height,
+		radius: snapshotRadius(rect, cs.borderRadius),
+		background: cs.backgroundColor
+	};
+}
+function snapshotTriggersFromEvent(e) {
+	if (!e) return;
+	for (const kind of TRIGGER_KINDS) {
+		const el = findTriggerElement(e, TRIGGER_ATTR[kind]);
+		lastTriggerEls[kind] = el;
+		lastTriggers[kind] = el ? snapshotTrigger(el) : null;
+	}
+}
+function ensureScaleFromPointTracking() {
+	if (typeof window === "undefined" || listening) return;
+	listening = true;
+	const { inner } = getWindowSize();
+	lastPointer = {
+		x: inner.width / 2,
+		y: inner.height / 2
+	};
+	const onPointer = (e) => {
+		lastPointer = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		if (e.type === "pointerdown" || e.type === "mousedown" || e.type === "click") snapshotTriggersFromEvent(e);
+	};
+	window.addEventListener("pointerdown", onPointer, {
+		capture: true,
+		passive: true
+	});
+	window.addEventListener("mousedown", onPointer, {
+		capture: true,
+		passive: true
+	});
+	window.addEventListener("click", onPointer, {
+		capture: true,
+		passive: true
+	});
+	window.addEventListener("mousemove", onPointer, { passive: true });
+	window.addEventListener("mouseover", onPointer, { passive: true });
+}
+/**
+* 在 Confirm.open / Modal 打开时快照指针 + 对应 data-*-trigger 元素。
+* - force：强制覆盖冻结点（Confirm / Modal 打开时）
+* - 非 force：若已有冻结点（Confirm.open 已拍过）则不覆盖
+*/
+function captureScaleFromPoint(e, opts) {
+	ensureScaleFromPointTracking();
+	const force = opts?.force ?? false;
+	const ev = e === void 0 ? typeof window !== "undefined" ? window.event ?? null : null : e;
+	if (ev && typeof ev.clientX === "number") lastPointer = {
+		x: ev.clientX,
+		y: ev.clientY
+	};
+	if (ev && "target" in ev) snapshotTriggersFromEvent(ev);
+	if (force || !frozenPointer) frozenPointer = { ...lastPointer };
+	for (const kind of TRIGGER_KINDS) if (force || frozenTriggers[kind] === null) {
+		frozenTriggers[kind] = lastTriggers[kind];
+		frozenTriggerEls[kind] = lastTriggerEls[kind];
+	}
+}
+function getScaleFromPoint() {
+	return { ...frozenPointer ?? lastPointer };
+}
+/** 相对视口矩形算 transform-origin（勿用 offsetLeft，flex 居中会偏） */
+function originFromElement(el, point = frozenPointer ?? lastPointer) {
+	const rect = el.getBoundingClientRect();
+	return {
+		x: point.x - rect.left,
+		y: point.y - rect.top
+	};
+}
+function px(n) {
+	return `${Math.round(n * 100) / 100}px`;
+}
+/** % 圆角相对的是面板盒，不能直接进 clip-path，换成触发源尺寸上的 px */
+function snapshotRadius(rect, raw) {
+	const radius = raw.trim();
+	if (!radius) return "0px";
+	if (radius.includes("%")) return px(Math.min(rect.width, rect.height) / 2);
+	return radius;
+}
+/**
+* 不用非等比 scale：宽高比不同会把文字拉变形。
+* 改为平移到触发源中心 + clip-path 开窗，内容始终是终点尺寸。
+*/
+function morphFromSnapshot(el, snap) {
+	const rect = el.getBoundingClientRect();
+	if (rect.width < 1 || rect.height < 1) return null;
+	const dx = snap.left + snap.width / 2 - (rect.left + rect.width / 2);
+	const dy = snap.top + snap.height / 2 - (rect.top + rect.height / 2);
+	const insetX = Math.max(0, (rect.width - snap.width) / 2);
+	const insetY = Math.max(0, (rect.height - snap.height) / 2);
+	return {
+		"--__enter-transform": `translate3d(${px(dx)}, ${px(dy)}, 0)`,
+		"--__enter-clip": `inset(${px(insetY)} ${px(insetX)} ${px(insetY)} ${px(insetX)} round ${snap.radius})`,
+		"--__enter-radius": snap.radius,
+		"--__enter-bg": snap.background
+	};
+}
+ensureScaleFromPointTracking();
+/**
+* 从点击处 scale，或从 data-modal-trigger / data-confirm-trigger 开窗。
+* Modal 传 `'modal'`，Confirm（Drawer center）传 `'confirm'`。
+*/
+function useScaleFromPoint(kind) {
+	ensureScaleFromPointTracking();
+	const transformOrigin = reactive({
+		x: 0,
+		y: 0
+	});
+	const morphVars = reactive(emptyMorph());
+	/** 本次开窗对应的触发 DOM，离场时抬到弹层之上 */
+	let sessionTriggerEl = null;
+	let sessionSnap = null;
+	/** 打开时视口点击点；无 trigger 离场时按面板当前位置重算 origin */
+	let sessionPointer = null;
+	let elevatePin = null;
+	function clearElevate() {
+		if (elevatePin) {
+			restoreTrigger(elevatePin);
+			elevatePin = null;
+		}
+	}
+	function measureOrigin(el) {
+		clearElevate();
+		Object.assign(morphVars, emptyMorph());
+		sessionTriggerEl = null;
+		sessionSnap = null;
+		sessionPointer = null;
+		if (!el) {
+			transformOrigin.x = 0;
+			transformOrigin.y = 0;
+			frozenPointer = null;
+			if (kind) {
+				frozenTriggers[kind] = null;
+				frozenTriggerEls[kind] = null;
+			}
+			return {
+				x: 0,
+				y: 0
+			};
+		}
+		el.offsetWidth;
+		if (!frozenPointer) frozenPointer = { ...lastPointer };
+		sessionPointer = { ...frozenPointer };
+		const o = originFromElement(el);
+		transformOrigin.x = o.x;
+		transformOrigin.y = o.y;
+		const snap = kind ? frozenTriggers[kind] ?? lastTriggers[kind] : null;
+		const morph = snap ? morphFromSnapshot(el, snap) : null;
+		if (morph) {
+			Object.assign(morphVars, morph);
+			transformOrigin.x = el.getBoundingClientRect().width / 2;
+			transformOrigin.y = el.getBoundingClientRect().height / 2;
+			sessionSnap = snap;
+			sessionTriggerEl = kind ? frozenTriggerEls[kind] ?? lastTriggerEls[kind] : null;
+		}
+		frozenPointer = null;
+		if (kind) {
+			frozenTriggers[kind] = null;
+			frozenTriggerEls[kind] = null;
+		}
+		return o;
+	}
+	function originCss() {
+		return `${transformOrigin.x}px ${transformOrigin.y}px`;
+	}
+	const morphCss = computed(() => morphVars["--__enter-transform"] ? { ...morphVars } : {});
+	function applyOrigin(el) {
+		const o = measureOrigin(el);
+		if (el) el.style.transformOrigin = `${o.x}px ${o.y}px`;
+		return o;
+	}
+	/** 离场前按面板当前位置重算：有 trigger 重算 morph；否则重算点击缩放原点 */
+	function refreshForLeave(panelEl) {
+		if (!!(sessionSnap || sessionTriggerEl)) {
+			const snap = sessionTriggerEl && document.contains(sessionTriggerEl) ? snapshotTrigger(sessionTriggerEl) : sessionSnap;
+			if (!snap) return;
+			const morph = morphFromSnapshot(panelEl, snap);
+			if (!morph) return;
+			sessionSnap = snap;
+			Object.assign(morphVars, morph);
+			const rect = panelEl.getBoundingClientRect();
+			transformOrigin.x = rect.width / 2;
+			transformOrigin.y = rect.height / 2;
+			panelEl.style.transformOrigin = `${rect.width / 2}px ${rect.height / 2}px`;
+			Object.keys(morph).forEach((key) => {
+				panelEl.style.setProperty(key, morph[key]);
+			});
+			return;
+		}
+		if (!sessionPointer) return;
+		const rect = panelEl.getBoundingClientRect();
+		transformOrigin.x = sessionPointer.x - rect.left;
+		transformOrigin.y = sessionPointer.y - rect.top;
+		panelEl.style.transformOrigin = `${transformOrigin.x}px ${transformOrigin.y}px`;
+	}
+	/** 离场开始：重算终点 → 有 trigger 时克隆压在弹层之上 */
+	function pinTriggerForLeave(layerZ, panelEl) {
+		if (panelEl) refreshForLeave(panelEl);
+		clearElevate();
+		if (!sessionTriggerEl || !document.contains(sessionTriggerEl)) return;
+		elevatePin = elevateTrigger(sessionTriggerEl, layerZ + 1);
+	}
+	/** 离场结束：还原定位与占位 */
+	function unpinTrigger() {
+		clearElevate();
+		sessionTriggerEl = null;
+		sessionSnap = null;
+		sessionPointer = null;
+	}
+	return {
+		transformOrigin,
+		morphVars,
+		morphCss,
+		fromTrigger: computed(() => !!morphVars["--__enter-transform"]),
+		measureOrigin,
+		applyOrigin,
+		originCss,
+		pinTriggerForLeave,
+		unpinTrigger
+	};
+}
+//#endregion
+export { captureScaleFromPoint, useScaleFromPoint as default, ensureScaleFromPointTracking, getScaleFromPoint, originFromElement };
+
+//# sourceMappingURL=useScaleFromPoint.js.map

package/dist/use/useScaleFromPoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScaleFromPoint.js","names":[],"sources":["../../use/useScaleFromPoint.ts"],"sourcesContent":["import { computed, reactive } from 'vue'\r\nimport { getWindowSize } from '../util'\r\n\r\nexport type ScaleFromPoint = { x: number; y: number }\r\n\r\nexport type ScaleTriggerKind = 'modal' | 'confirm'\r\n\r\nconst TRIGGER_ATTR: Record<ScaleTriggerKind, string> = {\r\n  modal: 'data-modal-trigger',\r\n  confirm: 'data-confirm-trigger',\r\n}\r\nconst TRIGGER_KINDS: ScaleTriggerKind[] = ['modal', 'confirm']\r\n\r\nexport type TriggerSnapshot = {\r\n  left: number\r\n  top: number\r\n  width: number\r\n  height: number\r\n  radius: string\r\n  background: string\r\n}\r\n\r\nexport type MorphVars = {\r\n  '--__enter-transform': string\r\n  '--__enter-clip': string\r\n  '--__enter-radius': string\r\n  '--__enter-bg': string\r\n}\r\n\r\nconst emptyMorph = (): MorphVars => ({\r\n  '--__enter-transform': '',\r\n  '--__enter-clip': '',\r\n  '--__enter-radius': '',\r\n  '--__enter-bg': '',\r\n})\r\n\r\n/** 文档级最后指针 */\r\nlet lastPointer: ScaleFromPoint = { x: 0, y: 0 }\r\n/** open 时冻结的起点，进场测量优先用它，避免挂载期间 mousemove 带偏 */\r\nlet frozenPointer: ScaleFromPoint | null = null\r\nlet lastTriggers: Record<ScaleTriggerKind, TriggerSnapshot | null> = {\r\n  modal: null,\r\n  confirm: null,\r\n}\r\nlet frozenTriggers: Record<ScaleTriggerKind, TriggerSnapshot | null> = {\r\n  modal: null,\r\n  confirm: null,\r\n}\r\nlet lastTriggerEls: Record<ScaleTriggerKind, HTMLElement | null> = {\r\n  modal: null,\r\n  confirm: null,\r\n}\r\nlet frozenTriggerEls: Record<ScaleTriggerKind, HTMLElement | null> = {\r\n  modal: null,\r\n  confirm: null,\r\n}\r\nlet listening = false\r\n\r\ntype TriggerElevate = {\r\n  el: HTMLElement\r\n  clone: HTMLElement\r\n  prevVisibility: string\r\n}\r\n\r\n/**\r\n * 离场时不要改 trigger 自身的定位（祖先 overflow/transform 会把 fixed 关进滚动容器，\r\n * 盖不住 body 上的 portal）。原节点只藏着占位；克隆挂 body，压在弹层之上。\r\n */\r\nfunction elevateTrigger(el: HTMLElement, aboveZ: number): TriggerElevate {\r\n  const rect = el.getBoundingClientRect()\r\n  const clone = el.cloneNode(true) as HTMLElement\r\n  clone.setAttribute('aria-hidden', 'true')\r\n  clone.removeAttribute('id')\r\n  clone.querySelectorAll('[id]').forEach((n) => n.removeAttribute('id'))\r\n  clone.style.position = 'fixed'\r\n  clone.style.left = `${rect.left}px`\r\n  clone.style.top = `${rect.top}px`\r\n  clone.style.right = 'auto'\r\n  clone.style.bottom = 'auto'\r\n  clone.style.width = `${rect.width}px`\r\n  clone.style.height = `${rect.height}px`\r\n  clone.style.margin = '0'\r\n  clone.style.boxSizing = 'border-box'\r\n  clone.style.zIndex = String(Math.max(1, aboveZ))\r\n  clone.style.pointerEvents = 'none'\r\n  clone.style.visibility = 'visible'\r\n  clone.style.opacity = '1'\r\n  clone.style.transform = 'none'\r\n  document.body.appendChild(clone)\r\n  const prevVisibility = el.style.visibility\r\n  el.style.visibility = 'hidden'\r\n  return { el, clone, prevVisibility }\r\n}\r\n\r\nfunction restoreTrigger(pin: TriggerElevate) {\r\n  pin.el.style.visibility = pin.prevVisibility\r\n  pin.clone.remove()\r\n}\r\n\r\nfunction findTriggerElement(e: Event, attr: string): HTMLElement | null {\r\n  const target = e.target\r\n  if (!(target instanceof Element)) return null\r\n  const marked = target.closest(`[${attr}]`) as HTMLElement | null\r\n  if (!marked) return null\r\n  const spec = marked.getAttribute(attr)\r\n  if (spec && spec !== 'true') {\r\n    try {\r\n      const found = document.querySelector(spec)\r\n      if (found instanceof HTMLElement) return found\r\n    } catch {\r\n      /* invalid selector */\r\n    }\r\n  }\r\n  return marked\r\n}\r\n\r\nfunction snapshotTrigger(el: HTMLElement): TriggerSnapshot | null {\r\n  const rect = el.getBoundingClientRect()\r\n  if (rect.width < 1 || rect.height < 1) return null\r\n  const cs = getComputedStyle(el)\r\n  return {\r\n    left: rect.left,\r\n    top: rect.top,\r\n    width: rect.width,\r\n    height: rect.height,\r\n    radius: snapshotRadius(rect, cs.borderRadius),\r\n    background: cs.backgroundColor,\r\n  }\r\n}\r\n\r\nfunction snapshotTriggersFromEvent(e: Event | null | undefined) {\r\n  if (!e) return\r\n  for (const kind of TRIGGER_KINDS) {\r\n    const el = findTriggerElement(e, TRIGGER_ATTR[kind])\r\n    lastTriggerEls[kind] = el\r\n    lastTriggers[kind] = el ? snapshotTrigger(el) : null\r\n  }\r\n}\r\n\r\nexport function ensureScaleFromPointTracking() {\r\n  if (typeof window === 'undefined' || listening) return\r\n  listening = true\r\n  const { inner } = getWindowSize()\r\n  lastPointer = { x: inner.width / 2, y: inner.height / 2 }\r\n  const onPointer = (e: MouseEvent | PointerEvent) => {\r\n    lastPointer = { x: e.clientX, y: e.clientY }\r\n    if (\r\n      e.type === 'pointerdown' ||\r\n      e.type === 'mousedown' ||\r\n      e.type === 'click'\r\n    ) {\r\n      snapshotTriggersFromEvent(e)\r\n    }\r\n  }\r\n  window.addEventListener('pointerdown', onPointer, {\r\n    capture: true,\r\n    passive: true,\r\n  })\r\n  window.addEventListener('mousedown', onPointer, {\r\n    capture: true,\r\n    passive: true,\r\n  })\r\n  window.addEventListener('click', onPointer, { capture: true, passive: true })\r\n  window.addEventListener('mousemove', onPointer, { passive: true })\r\n  window.addEventListener('mouseover', onPointer, { passive: true })\r\n}\r\n\r\n/**\r\n * 在 Confirm.open / Modal 打开时快照指针 + 对应 data-*-trigger 元素。\r\n * - force：强制覆盖冻结点（Confirm / Modal 打开时）\r\n * - 非 force：若已有冻结点（Confirm.open 已拍过）则不覆盖\r\n */\r\nexport function captureScaleFromPoint(\r\n  e?: { clientX: number; clientY: number } | Event | null,\r\n  opts?: { force?: boolean },\r\n) {\r\n  ensureScaleFromPointTracking()\r\n  const force = opts?.force ?? false\r\n  // undefined：同步 open 栈可回退 window.event\r\n  // null：打开已晚于点击（React useEffect），勿用过期 window.event 覆盖 pointerdown 快照\r\n  const ev =\r\n    e === undefined\r\n      ? typeof window !== 'undefined'\r\n        ? ((window as unknown as { event?: Event }).event ?? null)\r\n        : null\r\n      : e\r\n  if (ev && typeof (ev as MouseEvent).clientX === 'number') {\r\n    lastPointer = {\r\n      x: (ev as MouseEvent).clientX,\r\n      y: (ev as MouseEvent).clientY,\r\n    }\r\n  }\r\n  if (ev && 'target' in ev) snapshotTriggersFromEvent(ev as Event)\r\n  if (force || !frozenPointer) {\r\n    frozenPointer = { ...lastPointer }\r\n  }\r\n  for (const kind of TRIGGER_KINDS) {\r\n    if (force || frozenTriggers[kind] === null) {\r\n      frozenTriggers[kind] = lastTriggers[kind]\r\n      frozenTriggerEls[kind] = lastTriggerEls[kind]\r\n    }\r\n  }\r\n}\r\n\r\nexport function getScaleFromPoint(): ScaleFromPoint {\r\n  return { ...(frozenPointer ?? lastPointer) }\r\n}\r\n\r\n/** 相对视口矩形算 transform-origin（勿用 offsetLeft，flex 居中会偏） */\r\nexport function originFromElement(\r\n  el: HTMLElement,\r\n  point: ScaleFromPoint = frozenPointer ?? lastPointer,\r\n): ScaleFromPoint {\r\n  const rect = el.getBoundingClientRect()\r\n  return {\r\n    x: point.x - rect.left,\r\n    y: point.y - rect.top,\r\n  }\r\n}\r\n\r\nfunction px(n: number) {\r\n  return `${Math.round(n * 100) / 100}px`\r\n}\r\n\r\n/** % 圆角相对的是面板盒，不能直接进 clip-path，换成触发源尺寸上的 px */\r\nfunction snapshotRadius(rect: DOMRect, raw: string) {\r\n  const radius = raw.trim()\r\n  if (!radius) return '0px'\r\n  if (radius.includes('%')) {\r\n    return px(Math.min(rect.width, rect.height) / 2)\r\n  }\r\n  return radius\r\n}\r\n\r\n/**\r\n * 不用非等比 scale：宽高比不同会把文字拉变形。\r\n * 改为平移到触发源中心 + clip-path 开窗，内容始终是终点尺寸。\r\n */\r\nfunction morphFromSnapshot(\r\n  el: HTMLElement,\r\n  snap: TriggerSnapshot,\r\n): MorphVars | null {\r\n  const rect = el.getBoundingClientRect()\r\n  if (rect.width < 1 || rect.height < 1) return null\r\n  const dx = snap.left + snap.width / 2 - (rect.left + rect.width / 2)\r\n  const dy = snap.top + snap.height / 2 - (rect.top + rect.height / 2)\r\n  const insetX = Math.max(0, (rect.width - snap.width) / 2)\r\n  const insetY = Math.max(0, (rect.height - snap.height) / 2)\r\n  return {\r\n    '--__enter-transform': `translate3d(${px(dx)}, ${px(dy)}, 0)`,\r\n    '--__enter-clip': `inset(${px(insetY)} ${px(insetX)} ${px(insetY)} ${px(insetX)} round ${snap.radius})`,\r\n    '--__enter-radius': snap.radius,\r\n    '--__enter-bg': snap.background,\r\n  }\r\n}\r\n\r\nensureScaleFromPointTracking()\r\n\r\n/**\r\n * 从点击处 scale，或从 data-modal-trigger / data-confirm-trigger 开窗。\r\n * Modal 传 `'modal'`，Confirm（Drawer center）传 `'confirm'`。\r\n */\r\nexport default function useScaleFromPoint(kind?: ScaleTriggerKind) {\r\n  ensureScaleFromPointTracking()\r\n  const transformOrigin = reactive<ScaleFromPoint>({ x: 0, y: 0 })\r\n  const morphVars = reactive<MorphVars>(emptyMorph())\r\n  /** 本次开窗对应的触发 DOM，离场时抬到弹层之上 */\r\n  let sessionTriggerEl: HTMLElement | null = null\r\n  let sessionSnap: TriggerSnapshot | null = null\r\n  /** 打开时视口点击点；无 trigger 离场时按面板当前位置重算 origin */\r\n  let sessionPointer: ScaleFromPoint | null = null\r\n  let elevatePin: TriggerElevate | null = null\r\n\r\n  function clearElevate() {\r\n    if (elevatePin) {\r\n      restoreTrigger(elevatePin)\r\n      elevatePin = null\r\n    }\r\n  }\r\n\r\n  function measureOrigin(el: HTMLElement | null | undefined): ScaleFromPoint {\r\n    clearElevate()\r\n    Object.assign(morphVars, emptyMorph())\r\n    sessionTriggerEl = null\r\n    sessionSnap = null\r\n    sessionPointer = null\r\n    if (!el) {\r\n      transformOrigin.x = 0\r\n      transformOrigin.y = 0\r\n      frozenPointer = null\r\n      if (kind) {\r\n        frozenTriggers[kind] = null\r\n        frozenTriggerEls[kind] = null\r\n      }\r\n      return { x: 0, y: 0 }\r\n    }\r\n    void el.offsetWidth\r\n    if (!frozenPointer) frozenPointer = { ...lastPointer }\r\n    sessionPointer = { ...frozenPointer }\r\n    const o = originFromElement(el)\r\n    transformOrigin.x = o.x\r\n    transformOrigin.y = o.y\r\n    const snap = kind\r\n      ? (frozenTriggers[kind] ?? lastTriggers[kind])\r\n      : null\r\n    const morph = snap ? morphFromSnapshot(el, snap) : null\r\n    if (morph) {\r\n      Object.assign(morphVars, morph)\r\n      transformOrigin.x = el.getBoundingClientRect().width / 2\r\n      transformOrigin.y = el.getBoundingClientRect().height / 2\r\n      sessionSnap = snap\r\n      sessionTriggerEl = kind\r\n        ? (frozenTriggerEls[kind] ?? lastTriggerEls[kind])\r\n        : null\r\n    }\r\n    frozenPointer = null\r\n    if (kind) {\r\n      frozenTriggers[kind] = null\r\n      frozenTriggerEls[kind] = null\r\n    }\r\n    return o\r\n  }\r\n\r\n  function originCss(): string {\r\n    return `${transformOrigin.x}px ${transformOrigin.y}px`\r\n  }\r\n\r\n  const morphCss = computed(() =>\r\n    morphVars['--__enter-transform'] ? { ...morphVars } : {},\r\n  )\r\n\r\n  function applyOrigin(el: HTMLElement | null | undefined) {\r\n    const o = measureOrigin(el)\r\n    if (el) el.style.transformOrigin = `${o.x}px ${o.y}px`\r\n    return o\r\n  }\r\n\r\n  /** 离场前按面板当前位置重算：有 trigger 重算 morph；否则重算点击缩放原点 */\r\n  function refreshForLeave(panelEl: HTMLElement) {\r\n    const hasTrigger = !!(sessionSnap || sessionTriggerEl)\r\n    if (hasTrigger) {\r\n      const snap =\r\n        sessionTriggerEl && document.contains(sessionTriggerEl)\r\n          ? snapshotTrigger(sessionTriggerEl)\r\n          : sessionSnap\r\n      if (!snap) return\r\n      const morph = morphFromSnapshot(panelEl, snap)\r\n      if (!morph) return\r\n      sessionSnap = snap\r\n      Object.assign(morphVars, morph)\r\n      const rect = panelEl.getBoundingClientRect()\r\n      transformOrigin.x = rect.width / 2\r\n      transformOrigin.y = rect.height / 2\r\n      panelEl.style.transformOrigin = `${rect.width / 2}px ${rect.height / 2}px`\r\n      ;(Object.keys(morph) as (keyof MorphVars)[]).forEach((key) => {\r\n        panelEl.style.setProperty(key, morph[key])\r\n      })\r\n      return\r\n    }\r\n    if (!sessionPointer) return\r\n    const rect = panelEl.getBoundingClientRect()\r\n    transformOrigin.x = sessionPointer.x - rect.left\r\n    transformOrigin.y = sessionPointer.y - rect.top\r\n    panelEl.style.transformOrigin = `${transformOrigin.x}px ${transformOrigin.y}px`\r\n  }\r\n\r\n  /** 离场开始：重算终点 → 有 trigger 时克隆压在弹层之上 */\r\n  function pinTriggerForLeave(layerZ: number, panelEl?: HTMLElement | null) {\r\n    if (panelEl) refreshForLeave(panelEl)\r\n    clearElevate()\r\n    if (!sessionTriggerEl || !document.contains(sessionTriggerEl)) return\r\n    elevatePin = elevateTrigger(sessionTriggerEl, layerZ + 1)\r\n  }\r\n\r\n  /** 离场结束：还原定位与占位 */\r\n  function unpinTrigger() {\r\n    clearElevate()\r\n    sessionTriggerEl = null\r\n    sessionSnap = null\r\n    sessionPointer = null\r\n  }\r\n\r\n  const fromTrigger = computed(() => !!morphVars['--__enter-transform'])\r\n\r\n  return {\r\n    transformOrigin,\r\n    morphVars,\r\n    morphCss,\r\n    fromTrigger,\r\n    measureOrigin,\r\n    applyOrigin,\r\n    originCss,\r\n    pinTriggerForLeave,\r\n    unpinTrigger,\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/use/useScroll.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'vue';
+export default function useScroll(elem?: HTMLElement | Ref<HTMLElement | undefined | null>, scrollCallback?: Function, //滚动时要做一些事
+immediate?: boolean): {
+    scrollTop: Ref<number, number>;
+    scrollLeft: Ref<number, number>;
+    scrollRight: Ref<number, number>;
+    scrollBottom: Ref<number, number>;
+    getScroll: () => void;
+};

package/dist/use/useScroll.js

@@ -0,0 +1,60 @@
+import { getElement, getPageScroll, getWindowSize, isElement, isWindow } from "../util/dom.js";
+import useEvent from "./useEvent.js";
+import { computed, onMounted, ref } from "vue";
+//#region use/useScroll.ts
+function useScroll(elem, scrollCallback, immediate) {
+	const el = computed(() => getElement(elem));
+	const scrollTop = ref(0);
+	const scrollLeft = ref(0);
+	const scrollRight = ref(0);
+	const scrollBottom = ref(0);
+	function get() {
+		const _el = el.value;
+		if (_el) {
+			if (isElement(_el)) {
+				scrollTop.value = _el.scrollTop;
+				scrollLeft.value = _el.scrollLeft;
+				scrollRight.value = _el.scrollWidth - scrollLeft.value - _el.clientWidth;
+				scrollBottom.value = _el.scrollHeight - scrollTop.value - _el.clientHeight;
+			} else if (isWindow(_el)) {
+				const s = getPageScroll();
+				const { inner } = getWindowSize();
+				scrollTop.value = s.y;
+				scrollLeft.value = s.x;
+				scrollBottom.value = document.documentElement.scrollHeight - s.y - inner.height;
+				scrollRight.value = document.documentElement.scrollWidth - s.x - inner.width;
+			}
+		}
+	}
+	function doCallback() {
+		scrollCallback?.({
+			scrollTop: scrollTop.value,
+			scrollBottom: scrollBottom.value,
+			scrollLeft: scrollLeft.value,
+			scrollRight: scrollRight.value
+		});
+	}
+	useEvent(el, "scroll", () => {
+		get();
+		doCallback();
+	});
+	useEvent(window, "resize", () => {
+		get();
+		doCallback();
+	});
+	onMounted(async () => {
+		get();
+		if (immediate) doCallback();
+	});
+	return {
+		scrollTop,
+		scrollLeft,
+		scrollRight,
+		scrollBottom,
+		getScroll: get
+	};
+}
+//#endregion
+export { useScroll as default };
+
+//# sourceMappingURL=useScroll.js.map

package/dist/use/useScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScroll.js","names":[],"sources":["../../use/useScroll.ts"],"sourcesContent":["/*\r\n * @Author: 温永江 wyjdmail@163.com\r\n * @Date: 2025-12-31 16:33:02\r\n * @LastEditors: 温永江 wyjdmail@163.com\r\n * @LastEditTime: 2026-01-28 17:59:22\r\n * @FilePath: \\Dic\\src\\ui\\use\\useScroll.ts\r\n * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE\r\n */\r\nimport type { Ref } from \"vue\"\r\nimport { onMounted, ref, computed, nextTick } from \"vue\"\r\nimport useEvent from \"./useEvent\"\r\nimport {\r\n  getElement,\r\n  getPageScroll,\r\n  getWindowSize,\r\n  isElement,\r\n  isWindow,\r\n} from \"../util\"\r\nexport default function useScroll(\r\n  elem?: HTMLElement | Ref<HTMLElement | undefined | null>,\r\n  scrollCallback?: Function, //滚动时要做一些事\r\n  immediate?: boolean //是否在挂载完之后立即触发scrollCallback\r\n) {\r\n  const el = computed(() => getElement(elem))\r\n  const scrollTop = ref(0)\r\n  const scrollLeft = ref(0)\r\n  const scrollRight = ref(0)\r\n  const scrollBottom = ref(0)\r\n  function get() {\r\n    const _el = el.value\r\n    if (_el) {\r\n      if (isElement(_el)) {\r\n        scrollTop.value = _el.scrollTop\r\n        scrollLeft.value = _el.scrollLeft\r\n        scrollRight.value = _el.scrollWidth - scrollLeft.value - _el.clientWidth\r\n        scrollBottom.value =\r\n          _el.scrollHeight - scrollTop.value - _el.clientHeight\r\n      } else if (isWindow(_el)) {\r\n        const s = getPageScroll()\r\n        const { inner } = getWindowSize()\r\n        scrollTop.value = s.y\r\n        scrollLeft.value = s.x\r\n        scrollBottom.value =\r\n          document.documentElement.scrollHeight - s.y - inner.height\r\n        scrollRight.value =\r\n          document.documentElement.scrollWidth - s.x - inner.width\r\n      }\r\n    }\r\n  }\r\n  function doCallback() {\r\n    scrollCallback?.({\r\n      scrollTop: scrollTop.value,\r\n      scrollBottom: scrollBottom.value,\r\n      scrollLeft: scrollLeft.value,\r\n      scrollRight: scrollRight.value,\r\n    })\r\n  }\r\n\r\n  useEvent(el, \"scroll\", () => {\r\n    get()\r\n    doCallback()\r\n  })\r\n  // useEvent(el, \"resize\", () => {\r\n  //   get()\r\n  //   doCallback()\r\n  // })\r\n  useEvent(window, \"resize\", () => {\r\n    get()\r\n    doCallback()\r\n  })\r\n  //钩子的onMounted要早于页面的onMounted\r\n  //比较好的做法是在页面调用getScroll方法\r\n  onMounted(async () => {\r\n    get()\r\n    if (immediate) {\r\n      doCallback()\r\n    }\r\n  })\r\n  return { scrollTop, scrollLeft, scrollRight, scrollBottom, getScroll: get }\r\n}\r\n"],"mappings":";;;;AAkBA,SAAwB,UACtB,MACA,gBACA,WACA;CACA,MAAM,KAAK,eAAe,WAAW,IAAI,CAAC;CAC1C,MAAM,YAAY,IAAI,CAAC;CACvB,MAAM,aAAa,IAAI,CAAC;CACxB,MAAM,cAAc,IAAI,CAAC;CACzB,MAAM,eAAe,IAAI,CAAC;CAC1B,SAAS,MAAM;EACb,MAAM,MAAM,GAAG;EACf,IAAI,KAAK;GACP,IAAI,UAAU,GAAG,GAAG;IAClB,UAAU,QAAQ,IAAI;IACtB,WAAW,QAAQ,IAAI;IACvB,YAAY,QAAQ,IAAI,cAAc,WAAW,QAAQ,IAAI;IAC7D,aAAa,QACX,IAAI,eAAe,UAAU,QAAQ,IAAI;GAC7C,OAAO,IAAI,SAAS,GAAG,GAAG;IACxB,MAAM,IAAI,cAAc;IACxB,MAAM,EAAE,UAAU,cAAc;IAChC,UAAU,QAAQ,EAAE;IACpB,WAAW,QAAQ,EAAE;IACrB,aAAa,QACX,SAAS,gBAAgB,eAAe,EAAE,IAAI,MAAM;IACtD,YAAY,QACV,SAAS,gBAAgB,cAAc,EAAE,IAAI,MAAM;GACvD;EACF;CACF;CACA,SAAS,aAAa;EACpB,iBAAiB;GACf,WAAW,UAAU;GACrB,cAAc,aAAa;GAC3B,YAAY,WAAW;GACvB,aAAa,YAAY;EAC3B,CAAC;CACH;CAEA,SAAS,IAAI,gBAAgB;EAC3B,IAAI;EACJ,WAAW;CACb,CAAC;CAKD,SAAS,QAAQ,gBAAgB;EAC/B,IAAI;EACJ,WAAW;CACb,CAAC;CAGD,UAAU,YAAY;EACpB,IAAI;EACJ,IAAI,WACF,WAAW;CAEf,CAAC;CACD,OAAO;EAAE;EAAW;EAAY;EAAa;EAAc,WAAW;CAAI;AAC5E"}

package/dist/use/useSearch.d.ts

@@ -0,0 +1,11 @@
+import { Ref, ComputedRef } from 'vue';
+/**
+ * useSearch
+ * @param sourceData 源数据
+ * @param searchText 搜索关键字
+ * @param dontSearch 搜索开关，如果传入true，则不会搜索
+ * @param textField 搜索匹配字段
+ * @param afterSearch 搜索之后触发回调
+ * @returns 返回搜索后的数据
+ */
+export default function useSearch<T extends Record<string, any>>(sourceData: Ref<T[] | undefined | null> | ComputedRef<T[]>, searchText: Ref<string>, dontSearch: Ref<boolean>, textField?: string, afterSearch?: (resultLength: number, isFullData: boolean, isEqual?: boolean, index?: number) => void): Ref<T[], T[]>;

package/dist/use/useSearch.js

@@ -0,0 +1,65 @@
+import { isObject } from "../util/tools.js";
+import { ref, watch } from "vue";
+//#region use/useSearch.ts
+/**
+* useSearch
+* @param sourceData 源数据
+* @param searchText 搜索关键字
+* @param dontSearch 搜索开关，如果传入true，则不会搜索
+* @param textField 搜索匹配字段
+* @param afterSearch 搜索之后触发回调
+* @returns 返回搜索后的数据
+*/
+function useSearch(sourceData, searchText, dontSearch, textField, afterSearch) {
+	const filterData = ref([]);
+	function toSearch(t) {
+		if (dontSearch.value === true) {
+			filterData.value = sourceData.value || [];
+			return;
+		}
+		if (typeof t === "string" && t === "") filterData.value = sourceData.value || [];
+		else {
+			t = t?.trim();
+			let isEqual = false;
+			let i = 0;
+			const len = sourceData.value?.length || 0;
+			while (i < len) {
+				const item = sourceData.value ? sourceData.value[i] : void 0;
+				const itemType = typeof item;
+				let currentRowText;
+				if (itemType === "string" || itemType === "number") currentRowText = item;
+				else if (textField === void 0 || textField === "" || textField === null) console.warn("请传入keyField参数");
+				else if (isObject(item)) currentRowText = item[textField];
+				if (item !== void 0) {
+					if (currentRowText === t) {
+						filterData.value = [item];
+						isEqual = true;
+						break;
+					} else {
+						const ts = (t + "").split(/\s+/g);
+						filterData.value = sourceData.value?.filter((d) => {
+							const txt = d[textField];
+							return ts.every((v) => {
+								return txt.indexOf(v) > -1;
+							});
+						}) || [];
+					}
+				}
+				i++;
+			}
+			afterSearch && afterSearch(filterData.value.length, false, isEqual, i);
+		}
+	}
+	watch([searchText, sourceData], ([t, d]) => {
+		if (d && d.length) toSearch(t);
+		else filterData.value = [];
+	}, {
+		immediate: true,
+		deep: true
+	});
+	return filterData;
+}
+//#endregion
+export { useSearch as default };
+
+//# sourceMappingURL=useSearch.js.map

package/dist/use/useSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearch.js","names":[],"sources":["../../use/useSearch.ts"],"sourcesContent":["import type { Ref, ComputedRef } from 'vue'\r\nimport { ref, watch } from 'vue'\r\nimport { isObject } from '../util'\r\n\r\n/**\r\n * useSearch\r\n * @param sourceData 源数据\r\n * @param searchText 搜索关键字\r\n * @param dontSearch 搜索开关，如果传入true，则不会搜索\r\n * @param textField 搜索匹配字段\r\n * @param afterSearch 搜索之后触发回调\r\n * @returns 返回搜索后的数据\r\n */\r\nexport default function useSearch<T extends Record<string, any>>(\r\n  sourceData: Ref<T[] | undefined | null> | ComputedRef<T[]>,\r\n  searchText: Ref<string>,\r\n  dontSearch: Ref<boolean>,\r\n  textField?: string,\r\n  afterSearch?: (\r\n    resultLength: number,\r\n    isFullData: boolean,\r\n    isEqual?: boolean,\r\n    index?: number,\r\n  ) => void,\r\n) {\r\n  const filterData = ref<T[]>([]) as Ref<T[]>\r\n\r\n  function toSearch(t: string | undefined) {\r\n    if (dontSearch.value === true) {\r\n      // filterData.value = JSON.parse(JSON.stringify(sourceData.value))\r\n      filterData.value = sourceData.value || []\r\n      return\r\n    }\r\n    if (typeof t === undefined || (typeof t === 'string' && t === '')) {\r\n      // filterData.value = JSON.parse(JSON.stringify(sourceData.value))\r\n      filterData.value = sourceData.value || []\r\n      // afterSearch && afterSearch(filterData.value.length, true)\r\n    } else {\r\n      t = t?.trim()\r\n      let isEqual = false\r\n      let i = 0\r\n      const len = sourceData.value?.length || 0\r\n      while (i < len) {\r\n        // const item = unref(sourceData.value[i])\r\n        const item = sourceData.value ? sourceData.value[i] : undefined\r\n        const itemType = typeof item\r\n        let currentRowText: T | any\r\n        if (itemType === 'string' || itemType === 'number') {\r\n          currentRowText = item\r\n        } else {\r\n          if (\r\n            textField === undefined ||\r\n            textField === '' ||\r\n            textField === null\r\n          ) {\r\n            console.warn('请传入keyField参数')\r\n          } else if (isObject(item)) {\r\n            currentRowText = (item as Record<string, any>)[textField]\r\n          }\r\n        }\r\n        if (item !== undefined) {\r\n          if (currentRowText === t) {\r\n            filterData.value = [item]\r\n            isEqual = true\r\n            break\r\n          } else {\r\n            const ts = (t + '').split(/\\s+/g)\r\n            filterData.value =\r\n              sourceData.value?.filter((d: Record<any, any>) => {\r\n                const txt = d[textField!]\r\n                return ts.every((v: string) => {\r\n                  return txt.indexOf(v) > -1\r\n                })\r\n              }) || []\r\n          }\r\n        }\r\n        i++\r\n      }\r\n      afterSearch && afterSearch(filterData.value.length, false, isEqual, i)\r\n    }\r\n  }\r\n  watch(\r\n    [searchText, sourceData],\r\n    ([t, d]) => {\r\n      if (d && d.length) {\r\n        toSearch(t)\r\n      } else {\r\n        filterData.value = []\r\n      }\r\n    },\r\n    { immediate: true, deep: true },\r\n  )\r\n  return filterData\r\n}\r\n"],"mappings":";;;;;;;;;;;;AAaA,SAAwB,UACtB,YACA,YACA,YACA,WACA,aAMA;CACA,MAAM,aAAa,IAAS,CAAC,CAAC;CAE9B,SAAS,SAAS,GAAuB;EACvC,IAAI,WAAW,UAAU,MAAM;GAE7B,WAAW,QAAQ,WAAW,SAAS,CAAC;GACxC;EACF;EACA,IAA+B,OAAO,MAAM,YAAY,MAAM,IAE5D,WAAW,QAAQ,WAAW,SAAS,CAAC;OAEnC;GACL,IAAI,GAAG,KAAK;GACZ,IAAI,UAAU;GACd,IAAI,IAAI;GACR,MAAM,MAAM,WAAW,OAAO,UAAU;GACxC,OAAO,IAAI,KAAK;IAEd,MAAM,OAAO,WAAW,QAAQ,WAAW,MAAM,KAAK,KAAA;IACtD,MAAM,WAAW,OAAO;IACxB,IAAI;IACJ,IAAI,aAAa,YAAY,aAAa,UACxC,iBAAiB;SAEjB,IACE,cAAc,KAAA,KACd,cAAc,MACd,cAAc,MAEd,QAAQ,KAAK,eAAe;SACvB,IAAI,SAAS,IAAI,GACtB,iBAAkB,KAA6B;IAGnD,IAAI,SAAS,KAAA,GAAW;KACtB,IAAI,mBAAmB,GAAG;MACxB,WAAW,QAAQ,CAAC,IAAI;MACxB,UAAU;MACV;KACF,OAAO;MACL,MAAM,MAAM,IAAI,GAAA,CAAI,MAAM,MAAM;MAChC,WAAW,QACT,WAAW,OAAO,QAAQ,MAAwB;OAChD,MAAM,MAAM,EAAE;OACd,OAAO,GAAG,OAAO,MAAc;QAC7B,OAAO,IAAI,QAAQ,CAAC,IAAI;OAC1B,CAAC;MACH,CAAC,KAAK,CAAC;KACX;IACF;IACA;GACF;GACA,eAAe,YAAY,WAAW,MAAM,QAAQ,OAAO,SAAS,CAAC;EACvE;CACF;CACA,MACE,CAAC,YAAY,UAAU,IACtB,CAAC,GAAG,OAAO;EACV,IAAI,KAAK,EAAE,QACT,SAAS,CAAC;OAEV,WAAW,QAAQ,CAAC;CAExB,GACA;EAAE,WAAW;EAAM,MAAM;CAAK,CAChC;CACA,OAAO;AACT"}

package/dist/use/useSlot.d.ts

@@ -0,0 +1,10 @@
+import { VNode, ComputedRef } from 'vue';
+/**
+ *
+ * 插槽内容有以下种类，当调用时，也就是slots.slotname()时
+ * 1. 无，连<template #slotname></template>都没有的情况下，结果是undefined
+ * 2. 有<template #slotname></template>但没有内容，结果是[]
+ * 3. <template #slotname>有内容</template>时，结果是[{...}...]
+ *
+ */
+export default function useSlot(slotContent: ComputedRef, isFirst?: boolean, elementTag?: string, elementAttrs?: Record<string, any>): ComputedRef<VNode | undefined>;

package/dist/use/useSlot.js

@@ -0,0 +1,57 @@
+import { isArray, isComment, isFragment, isText } from "../util/tools.js";
+import { computed, createVNode } from "vue";
+//#region use/useSlot.ts
+/**
+*
+* 插槽内容有以下种类，当调用时，也就是slots.slotname()时
+* 1. 无，连<template #slotname></template>都没有的情况下，结果是undefined
+* 2. 有<template #slotname></template>但没有内容，结果是[]
+* 3. <template #slotname>有内容</template>时，结果是[{...}...]
+*
+*/
+function useSlot(slotContent, isFirst = false, elementTag = "span", elementAttrs = {}) {
+	return computed(() => {
+		let c = slotContent.value;
+		if (hasSlot(c)) {
+			if (isFirst) {
+				if (isFragment(c)) c = c.children;
+				const first = getFirstValidChild(c);
+				if (first !== void 0) {
+					if (isText(first) || isFragment(first)) return createVNode(elementTag, elementAttrs, [first]);
+					return first;
+				}
+			} else return c;
+		}
+	});
+}
+/**
+*
+* @param slotContent VNode[]
+* @returns boolean
+*/
+function hasSlot(slotContent) {
+	const c = slotContent;
+	if (c === void 0 || c && isArray(c) && c.length === 0) return false;
+	return true;
+}
+function getFirstValidChild(slotContent) {
+	if (isArray(slotContent)) {
+		let vnode;
+		let i = 0;
+		const len = slotContent.length;
+		while (i < len) {
+			const c = slotContent[i];
+			if (!isComment(c)) {
+				vnode = c;
+				break;
+			}
+			i++;
+		}
+		return vnode;
+	}
+	return slotContent;
+}
+//#endregion
+export { useSlot as default };
+
+//# sourceMappingURL=useSlot.js.map