@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.2.0

package/dist/utils/dom/caret.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"caret.js","names":[],"sources":["../../../src/utils/dom/caret.ts"],"sourcesContent":["/**\n * 文本框里某个字符位置在视口中的坐标：@ 提及、斜杠命令这类跟着光标弹出的列表用它定位。\n *\n *   const anchor = caretAnchor(textarea, () => textarea.selectionStart);\n *   anchorFloating(anchor, panel, { placement: 'bottom-start' });\n *\n * 做法同 textarea-caret-position（component/textarea-caret）：在页面外放一个镜像 div，复制影响排版的样式，\n * 写入位置之前的文字和一个标记 span，量标记的位置，再减去文本框的滚动。input 不换行，textarea 按 pre-wrap 换行。\n */\nimport type { VirtualElement } from '@floating-ui/dom';\n\n/** 影响文字排版的样式：镜像 div 照抄 */\nconst MIRRORED = [\n  'direction',\n  'boxSizing',\n  'width',\n  'height',\n  'overflowX',\n  'overflowY',\n  'borderTopWidth',\n  'borderRightWidth',\n  'borderBottomWidth',\n  'borderLeftWidth',\n  'borderStyle',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'fontStyle',\n  'fontVariant',\n  'fontWeight',\n  'fontStretch',\n  'fontSize',\n  'fontSizeAdjust',\n  'lineHeight',\n  'fontFamily',\n  'fontFeatureSettings',\n  'textAlign',\n  'textTransform',\n  'textIndent',\n  'textDecoration',\n  'letterSpacing',\n  'wordSpacing',\n  'tabSize',\n] as const;\n\n/** 文本框里第 index 个字符之前（光标在那里时）的位置：视口坐标，宽 0、高一行 */\nexport function caretRect(element: HTMLTextAreaElement | HTMLInputElement, index: number): DOMRect {\n  const style = getComputedStyle(element);\n  const mirror = document.createElement('div');\n  for (const property of MIRRORED) mirror.style[property] = style[property];\n  Object.assign(mirror.style, {\n    position: 'absolute',\n    visibility: 'hidden',\n    top: '0',\n    left: '-9999px',\n    overflow: 'hidden',\n    whiteSpace: element instanceof HTMLTextAreaElement ? 'pre-wrap' : 'pre',\n    overflowWrap: 'break-word',\n  });\n  mirror.textContent = element.value.slice(0, index);\n  const marker = document.createElement('span');\n  // 标记里放后面的文字（至少一个字符）：行末的光标按下一个字的位置换行\n  marker.textContent = element.value.slice(index) || '.';\n  mirror.append(marker);\n  document.body.append(mirror);\n  const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.2;\n  const top = marker.offsetTop + parseFloat(style.borderTopWidth) - element.scrollTop;\n  const left = marker.offsetLeft + parseFloat(style.borderLeftWidth) - element.scrollLeft;\n  mirror.remove();\n  const box = element.getBoundingClientRect();\n  return new DOMRect(box.left + left, box.top + top, 0, lineHeight);\n}\n\n/** 跟着光标的锚点（给 anchorFloating / useAnchoredPopover）：每次定位时按 index() 重新测量，文本框滚动时跟着更新 */\nexport function caretAnchor(\n  element: HTMLTextAreaElement | HTMLInputElement,\n  index: () => number,\n): VirtualElement {\n  return { getBoundingClientRect: () => caretRect(element, index()), contextElement: element };\n}\n"],"mappings":";;AAYA,IAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AAGA,SAAgB,UAAU,SAAiD,OAAwB;CACjG,MAAM,QAAQ,iBAAiB,OAAO;CACtC,MAAM,SAAS,SAAS,cAAc,KAAK;CAC3C,KAAK,MAAM,YAAY,UAAU,OAAO,MAAM,YAAY,MAAM;CAChE,OAAO,OAAO,OAAO,OAAO;EAC1B,UAAU;EACV,YAAY;EACZ,KAAK;EACL,MAAM;EACN,UAAU;EACV,YAAY,mBAAmB,sBAAsB,aAAa;EAClE,cAAc;CAChB,CAAC;CACD,OAAO,cAAc,QAAQ,MAAM,MAAM,GAAG,KAAK;CACjD,MAAM,SAAS,SAAS,cAAc,MAAM;CAE5C,OAAO,cAAc,QAAQ,MAAM,MAAM,KAAK,KAAK;CACnD,OAAO,OAAO,MAAM;CACpB,SAAS,KAAK,OAAO,MAAM;CAC3B,MAAM,aAAa,WAAW,MAAM,UAAU,KAAK,WAAW,MAAM,QAAQ,IAAI;CAChF,MAAM,MAAM,OAAO,YAAY,WAAW,MAAM,cAAc,IAAI,QAAQ;CAC1E,MAAM,OAAO,OAAO,aAAa,WAAW,MAAM,eAAe,IAAI,QAAQ;CAC7E,OAAO,OAAO;CACd,MAAM,MAAM,QAAQ,sBAAsB;CAC1C,OAAO,IAAI,QAAQ,IAAI,OAAO,MAAM,IAAI,MAAM,KAAK,GAAG,UAAU;AAClE;;AAGA,SAAgB,YACd,SACA,OACgB;CAChB,OAAO;EAAE,6BAA6B,UAAU,SAAS,MAAM,CAAC;EAAG,gBAAgB;CAAQ;AAC7F"}

package/dist/utils/dom/clipboard.d.ts

@@ -0,0 +1,16 @@
+/** useClipboard 的选项 */
+export interface ClipboardOptions {
+    /** copied 保持多久（毫秒）后复原，默认 2000 */
+    timeout?: number;
+}
+/** useClipboard 的返回值 */
+export interface ClipboardState {
+    /** 刚复制成功，timeout 后复原 */
+    readonly copied: boolean;
+    /** 上一次复制失败的原因（不安全的上下文、用户拒绝了权限）；成功后清空 */
+    readonly error: unknown;
+    /** 复制文字，返回是否成功 */
+    copy(text: string): Promise<boolean>;
+}
+/** 复制与复制状态（在 setup 里调用） */
+export declare function useClipboard({ timeout }?: ClipboardOptions): ClipboardState;

package/dist/utils/dom/clipboard.js

@@ -0,0 +1,66 @@
+import { onScopeDispose, shallowRef } from "vue";
+//#region src/utils/dom/clipboard.ts
+/**
+* 复制到剪贴板，带“刚复制过”的状态（按钮显示对勾、读屏播报“已复制”），过一会儿自动复原。
+*
+*   const clipboard = useClipboard();
+*   <IconButton icon={clipboard.copied ? Check : Copy} onClick={() => void clipboard.copy(code)} />
+*/
+/** 复制与复制状态（在 setup 里调用） */
+function useClipboard({ timeout = 2e3 } = {}) {
+	const copied = shallowRef(false);
+	const error = shallowRef(void 0);
+	let timer;
+	onScopeDispose(() => clearTimeout(timer));
+	return {
+		get copied() {
+			return copied.value;
+		},
+		get error() {
+			return error.value;
+		},
+		async copy(text) {
+			clearTimeout(timer);
+			try {
+				await writeText(text);
+			} catch (reason) {
+				copied.value = false;
+				error.value = reason;
+				return false;
+			}
+			error.value = void 0;
+			copied.value = true;
+			timer = setTimeout(() => copied.value = false, timeout);
+			return true;
+		}
+	};
+}
+/**
+* 写入剪贴板。Clipboard API 只在安全上下文（https、localhost）里有：内网常见的 http 部署没有它，
+* 这时退回 execCommand('copy')（已废弃，但各浏览器仍支持；同 VueUse useClipboard 的 legacy）
+*/
+async function writeText(text) {
+	if (navigator.clipboard) return navigator.clipboard.writeText(text);
+	if (!copyBySelection(text)) throw new Error("浏览器不允许复制：不是安全上下文，execCommand 也失败了");
+}
+/** 选中一个看不见的 textarea 再执行复制；之后焦点还给原来的元素（复制按钮） */
+function copyBySelection(text) {
+	const active = document.activeElement;
+	const textarea = document.createElement("textarea");
+	textarea.value = text;
+	textarea.readOnly = true;
+	textarea.style.cssText = "position:fixed;inset-block-start:0;opacity:0;pointer-events:none";
+	(active?.closest("dialog, [popover]") ?? document.body).append(textarea);
+	textarea.focus({ preventScroll: true });
+	textarea.select();
+	try {
+		return document.execCommand("copy");
+	} finally {
+		textarea.remove();
+		active?.focus({ preventScroll: true });
+	}
+}
+//#endregion
+export { useClipboard };
+
+//# sourceMappingURL=clipboard.js.map

package/dist/utils/dom/clipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.js","names":[],"sources":["../../../src/utils/dom/clipboard.ts"],"sourcesContent":["/**\n * 复制到剪贴板，带“刚复制过”的状态（按钮显示对勾、读屏播报“已复制”），过一会儿自动复原。\n *\n *   const clipboard = useClipboard();\n *   <IconButton icon={clipboard.copied ? Check : Copy} onClick={() => void clipboard.copy(code)} />\n */\nimport { onScopeDispose, shallowRef } from 'vue';\n\n/** useClipboard 的选项 */\nexport interface ClipboardOptions {\n  /** copied 保持多久（毫秒）后复原，默认 2000 */\n  timeout?: number;\n}\n\n/** useClipboard 的返回值 */\nexport interface ClipboardState {\n  /** 刚复制成功，timeout 后复原 */\n  readonly copied: boolean;\n  /** 上一次复制失败的原因（不安全的上下文、用户拒绝了权限）；成功后清空 */\n  readonly error: unknown;\n  /** 复制文字，返回是否成功 */\n  copy(text: string): Promise<boolean>;\n}\n\n/** 复制与复制状态（在 setup 里调用） */\nexport function useClipboard({ timeout = 2000 }: ClipboardOptions = {}): ClipboardState {\n  const copied = shallowRef(false);\n  const error = shallowRef<unknown>(undefined);\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  onScopeDispose(() => clearTimeout(timer));\n\n  return {\n    get copied() {\n      return copied.value;\n    },\n    get error() {\n      return error.value;\n    },\n    async copy(text) {\n      clearTimeout(timer);\n      try {\n        await writeText(text);\n      } catch (reason) {\n        copied.value = false;\n        error.value = reason;\n        return false;\n      }\n      error.value = undefined;\n      copied.value = true;\n      timer = setTimeout(() => (copied.value = false), timeout);\n      return true;\n    },\n  };\n}\n\n/**\n * 写入剪贴板。Clipboard API 只在安全上下文（https、localhost）里有：内网常见的 http 部署没有它，\n * 这时退回 execCommand('copy')（已废弃，但各浏览器仍支持；同 VueUse useClipboard 的 legacy）\n */\nasync function writeText(text: string) {\n  if (navigator.clipboard) return navigator.clipboard.writeText(text);\n  if (!copyBySelection(text))\n    throw new Error('浏览器不允许复制：不是安全上下文，execCommand 也失败了');\n}\n\n/** 选中一个看不见的 textarea 再执行复制；之后焦点还给原来的元素（复制按钮） */\nfunction copyBySelection(text: string): boolean {\n  const active = document.activeElement as HTMLElement | null;\n  const textarea = document.createElement('textarea');\n  textarea.value = text;\n  textarea.readOnly = true;\n  textarea.style.cssText = 'position:fixed;inset-block-start:0;opacity:0;pointer-events:none';\n  // 模态对话框打开时页面其余部分是 inert 的，放在 body 上选不中：放进焦点所在的对话框、弹层里\n  (active?.closest('dialog, [popover]') ?? document.body).append(textarea);\n  // select() 不一定把焦点移过去（MDN），先聚焦，复制的才是它的选区\n  textarea.focus({ preventScroll: true });\n  textarea.select();\n  try {\n    return document.execCommand('copy');\n  } finally {\n    textarea.remove();\n    active?.focus({ preventScroll: true });\n  }\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAgB,aAAa,EAAE,UAAU,QAA2B,CAAC,GAAmB;CACtF,MAAM,SAAS,WAAW,KAAK;CAC/B,MAAM,QAAQ,WAAoB,KAAA,CAAS;CAC3C,IAAI;CACJ,qBAAqB,aAAa,KAAK,CAAC;CAExC,OAAO;EACL,IAAI,SAAS;GACX,OAAO,OAAO;EAChB;EACA,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,MAAM,KAAK,MAAM;GACf,aAAa,KAAK;GAClB,IAAI;IACF,MAAM,UAAU,IAAI;GACtB,SAAS,QAAQ;IACf,OAAO,QAAQ;IACf,MAAM,QAAQ;IACd,OAAO;GACT;GACA,MAAM,QAAQ,KAAA;GACd,OAAO,QAAQ;GACf,QAAQ,iBAAkB,OAAO,QAAQ,OAAQ,OAAO;GACxD,OAAO;EACT;CACF;AACF;;;;;AAMA,eAAe,UAAU,MAAc;CACrC,IAAI,UAAU,WAAW,OAAO,UAAU,UAAU,UAAU,IAAI;CAClE,IAAI,CAAC,gBAAgB,IAAI,GACvB,MAAM,IAAI,MAAM,mCAAmC;AACvD;;AAGA,SAAS,gBAAgB,MAAuB;CAC9C,MAAM,SAAS,SAAS;CACxB,MAAM,WAAW,SAAS,cAAc,UAAU;CAClD,SAAS,QAAQ;CACjB,SAAS,WAAW;CACpB,SAAS,MAAM,UAAU;CAEzB,CAAC,QAAQ,QAAQ,mBAAmB,KAAK,SAAS,KAAA,CAAM,OAAO,QAAQ;CAEvE,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;CACtC,SAAS,OAAO;CAChB,IAAI;EACF,OAAO,SAAS,YAAY,MAAM;CACpC,UAAU;EACR,SAAS,OAAO;EAChB,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;CACvC;AACF"}

package/dist/utils/dom/direction.d.ts

@@ -0,0 +1,12 @@
+/** 排版方向：从右到左时方向键、拖动、滚动位置要换边 */
+/** 元素是否处在从右到左排版里（按计算后的 direction，跟随 dir 属性与 CSS） */
+export declare function isRtl(element: Element): boolean;
+/** 行内方向的左右键 */
+export interface InlineArrows {
+    /** 朝行尾：从左到右时是 →，从右到左时是 ← */
+    readonly forward: 'ArrowRight' | 'ArrowLeft';
+    /** 朝行首：从左到右时是 ←，从右到左时是 → */
+    readonly backward: 'ArrowRight' | 'ArrowLeft';
+}
+/** 按排版方向取行内的前进、后退键：`const { forward, backward } = inlineArrows(isRtl(root))` */
+export declare const inlineArrows: (rtl: boolean) => InlineArrows;

package/dist/utils/dom/direction.js

@@ -0,0 +1,20 @@
+//#region src/utils/dom/direction.ts
+/** 排版方向：从右到左时方向键、拖动、滚动位置要换边 */
+/** 元素是否处在从右到左排版里（按计算后的 direction，跟随 dir 属性与 CSS） */
+function isRtl(element) {
+	return getComputedStyle(element).direction === "rtl";
+}
+var LTR_ARROWS = {
+	forward: "ArrowRight",
+	backward: "ArrowLeft"
+};
+var RTL_ARROWS = {
+	forward: "ArrowLeft",
+	backward: "ArrowRight"
+};
+/** 按排版方向取行内的前进、后退键：`const { forward, backward } = inlineArrows(isRtl(root))` */
+var inlineArrows = (rtl) => rtl ? RTL_ARROWS : LTR_ARROWS;
+//#endregion
+export { inlineArrows, isRtl };
+
+//# sourceMappingURL=direction.js.map

package/dist/utils/dom/direction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"direction.js","names":[],"sources":["../../../src/utils/dom/direction.ts"],"sourcesContent":["/** 排版方向：从右到左时方向键、拖动、滚动位置要换边 */\n\n/** 元素是否处在从右到左排版里（按计算后的 direction，跟随 dir 属性与 CSS） */\nexport function isRtl(element: Element): boolean {\n  return getComputedStyle(element).direction === 'rtl';\n}\n\n/** 行内方向的左右键 */\nexport interface InlineArrows {\n  /** 朝行尾：从左到右时是 →，从右到左时是 ← */\n  readonly forward: 'ArrowRight' | 'ArrowLeft';\n  /** 朝行首：从左到右时是 ←，从右到左时是 → */\n  readonly backward: 'ArrowRight' | 'ArrowLeft';\n}\n\nconst LTR_ARROWS: InlineArrows = { forward: 'ArrowRight', backward: 'ArrowLeft' };\nconst RTL_ARROWS: InlineArrows = { forward: 'ArrowLeft', backward: 'ArrowRight' };\n\n/** 按排版方向取行内的前进、后退键：`const { forward, backward } = inlineArrows(isRtl(root))` */\nexport const inlineArrows = (rtl: boolean): InlineArrows => (rtl ? RTL_ARROWS : LTR_ARROWS);\n"],"mappings":";;;AAGA,SAAgB,MAAM,SAA2B;CAC/C,OAAO,iBAAiB,OAAO,CAAC,CAAC,cAAc;AACjD;AAUA,IAAM,aAA2B;CAAE,SAAS;CAAc,UAAU;AAAY;AAChF,IAAM,aAA2B;CAAE,SAAS;CAAa,UAAU;AAAa;;AAGhF,IAAa,gBAAgB,QAAgC,MAAM,aAAa"}

package/dist/utils/dom/download.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 浏览器里存文件、挑文件：导出代码、CSV、SVG；导入一份 JSON、一张表。
+ * 内容原样写入：给 Excel 打开的 CSV 要由调用方在开头加 BOM（`'\uFEFF' + csv`），中文才不乱码。
+ *
+ *   downloadFile('theme.ts', code, 'text/typescript');
+ *   const file = await pickFile('.json');
+ *   if (file) importFrom(await file.text());
+ */
+export declare function downloadFile(name: string, content: BlobPart, type: string): void;
+/**
+ * 弹出系统的选文件对话框，挑一个文件；取消时为 null。要在用户的点击里调（浏览器只在用户操作时允许弹）。
+ * accept 同 input 的 accept（`.json`、`image/*`）。
+ */
+export declare function pickFile(accept?: string): Promise<File | null>;

package/dist/utils/dom/download.js

@@ -0,0 +1,36 @@
+//#region src/utils/dom/download.ts
+/**
+* 浏览器里存文件、挑文件：导出代码、CSV、SVG；导入一份 JSON、一张表。
+* 内容原样写入：给 Excel 打开的 CSV 要由调用方在开头加 BOM（`'\uFEFF' + csv`），中文才不乱码。
+*
+*   downloadFile('theme.ts', code, 'text/typescript');
+*   const file = await pickFile('.json');
+*   if (file) importFrom(await file.text());
+*/
+function downloadFile(name, content, type) {
+	const url = URL.createObjectURL(new Blob([content], { type }));
+	Object.assign(document.createElement("a"), {
+		href: url,
+		download: name
+	}).click();
+	setTimeout(() => URL.revokeObjectURL(url), 4e4);
+}
+/**
+* 弹出系统的选文件对话框，挑一个文件；取消时为 null。要在用户的点击里调（浏览器只在用户操作时允许弹）。
+* accept 同 input 的 accept（`.json`、`image/*`）。
+*/
+function pickFile(accept) {
+	return new Promise((resolve) => {
+		const input = Object.assign(document.createElement("input"), {
+			type: "file",
+			...accept ? { accept } : {}
+		});
+		input.addEventListener("change", () => resolve(input.files?.[0] ?? null), { once: true });
+		input.addEventListener("cancel", () => resolve(null), { once: true });
+		input.click();
+	});
+}
+//#endregion
+export { downloadFile, pickFile };
+
+//# sourceMappingURL=download.js.map

package/dist/utils/dom/download.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"download.js","names":[],"sources":["../../../src/utils/dom/download.ts"],"sourcesContent":["/**\n * 浏览器里存文件、挑文件：导出代码、CSV、SVG；导入一份 JSON、一张表。\n * 内容原样写入：给 Excel 打开的 CSV 要由调用方在开头加 BOM（`'\\uFEFF' + csv`），中文才不乱码。\n *\n *   downloadFile('theme.ts', code, 'text/typescript');\n *   const file = await pickFile('.json');\n *   if (file) importFrom(await file.text());\n */\nexport function downloadFile(name: string, content: BlobPart, type: string): void {\n  const url = URL.createObjectURL(new Blob([content], { type }));\n  const link = Object.assign(document.createElement('a'), { href: url, download: name });\n  link.click();\n  // 点击后浏览器才开始读这个地址：Safari、Firefox 里立即回收会让下载失败，过一会儿再回收（同 FileSaver.js）\n  setTimeout(() => URL.revokeObjectURL(url), 40_000);\n}\n\n/**\n * 弹出系统的选文件对话框，挑一个文件；取消时为 null。要在用户的点击里调（浏览器只在用户操作时允许弹）。\n * accept 同 input 的 accept（`.json`、`image/*`）。\n */\nexport function pickFile(accept?: string): Promise<File | null> {\n  return new Promise((resolve) => {\n    const input = Object.assign(document.createElement('input'), {\n      type: 'file',\n      ...(accept ? { accept } : {}),\n    });\n    input.addEventListener('change', () => resolve(input.files?.[0] ?? null), { once: true });\n    input.addEventListener('cancel', () => resolve(null), { once: true });\n    input.click();\n  });\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,aAAa,MAAc,SAAmB,MAAoB;CAChF,MAAM,MAAM,IAAI,gBAAgB,IAAI,KAAK,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,CAAC;CAE7D,OADoB,OAAO,SAAS,cAAc,GAAG,GAAG;EAAE,MAAM;EAAK,UAAU;CAAK,CACpF,CAAA,CAAK,MAAM;CAEX,iBAAiB,IAAI,gBAAgB,GAAG,GAAG,GAAM;AACnD;;;;;AAMA,SAAgB,SAAS,QAAuC;CAC9D,OAAO,IAAI,SAAS,YAAY;EAC9B,MAAM,QAAQ,OAAO,OAAO,SAAS,cAAc,OAAO,GAAG;GAC3D,MAAM;GACN,GAAI,SAAS,EAAE,OAAO,IAAI,CAAC;EAC7B,CAAC;EACD,MAAM,iBAAiB,gBAAgB,QAAQ,MAAM,QAAQ,MAAM,IAAI,GAAG,EAAE,MAAM,KAAK,CAAC;EACxF,MAAM,iBAAiB,gBAAgB,QAAQ,IAAI,GAAG,EAAE,MAAM,KAAK,CAAC;EACpE,MAAM,MAAM;CACd,CAAC;AACH"}

package/dist/utils/dom/element.d.ts

@@ -0,0 +1,3 @@
+/** 模板 ref 的取值换成 DOM 元素 */
+/** ref 落在组件上拿到的是组件实例，取它的根元素；本来就是元素时原样返回 */
+export declare function toElement(value: unknown): HTMLElement | null;

package/dist/utils/dom/element.js

@@ -0,0 +1,12 @@
+//#region src/utils/dom/element.ts
+/** 模板 ref 的取值换成 DOM 元素 */
+/** ref 落在组件上拿到的是组件实例，取它的根元素；本来就是元素时原样返回 */
+function toElement(value) {
+	if (value instanceof HTMLElement) return value;
+	const root = value?.$el;
+	return root instanceof HTMLElement ? root : null;
+}
+//#endregion
+export { toElement };
+
+//# sourceMappingURL=element.js.map

package/dist/utils/dom/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":[],"sources":["../../../src/utils/dom/element.ts"],"sourcesContent":["/** 模板 ref 的取值换成 DOM 元素 */\n\n/** ref 落在组件上拿到的是组件实例，取它的根元素；本来就是元素时原样返回 */\nexport function toElement(value: unknown): HTMLElement | null {\n  if (value instanceof HTMLElement) return value;\n  const root = (value as { $el?: unknown } | null)?.$el;\n  return root instanceof HTMLElement ? root : null;\n}\n"],"mappings":";;;AAGA,SAAgB,UAAU,OAAoC;CAC5D,IAAI,iBAAiB,aAAa,OAAO;CACzC,MAAM,OAAQ,OAAoC;CAClD,OAAO,gBAAgB,cAAc,OAAO;AAC9C"}

package/dist/utils/dom/event-listener.d.ts

@@ -0,0 +1,8 @@
+/** 监听的目标：window、document、元素，或返回它们的 getter（返回 null、undefined 时不监听） */
+export type ListenerTarget = EventTarget | (() => EventTarget | null | undefined);
+/** 监听 window 的事件（见文件开头） */
+export declare function useEventListener<K extends keyof WindowEventMap>(target: Window | (() => Window | null | undefined), type: K, listener: (event: WindowEventMap[K]) => void, options?: AddEventListenerOptions): () => void;
+/** 监听 document 的事件 */
+export declare function useEventListener<K extends keyof DocumentEventMap>(target: Document | (() => Document | null | undefined), type: K, listener: (event: DocumentEventMap[K]) => void, options?: AddEventListenerOptions): () => void;
+/** 监听元素（或 getter 给出的目标）的事件 */
+export declare function useEventListener<K extends keyof HTMLElementEventMap>(target: ListenerTarget, type: K, listener: (event: HTMLElementEventMap[K]) => void, options?: AddEventListenerOptions): () => void;

package/dist/utils/dom/event-listener.js

@@ -0,0 +1,35 @@
+import { getCurrentScope, onScopeDispose, watch } from "vue";
+//#region src/utils/dom/event-listener.ts
+/**
+* 事件监听，跟着作用域（组件）一起移除（参考 VueUse 的 useEventListener）：
+*
+*   useEventListener(document, 'visibilitychange', update);
+*   useEventListener(() => scroller, 'scroll', onScroll, { passive: true });   目标是 getter：变了换绑，null 时不监听
+*
+* getter 在 DOM 更新之后读（模板 ref 已经有值）；服务端渲染时什么都不做。返回立即移除的函数。
+*/
+function useEventListener(target, type, listener, options) {
+	if (typeof window === "undefined") return () => {};
+	let remove = () => {};
+	const bind = (element) => {
+		remove();
+		remove = () => {};
+		if (!element) return;
+		element.addEventListener(type, listener, options);
+		remove = () => element.removeEventListener(type, listener, options);
+	};
+	const stopWatch = typeof target === "function" ? watch(target, bind, {
+		immediate: true,
+		flush: "post"
+	}) : (bind(target), void 0);
+	const stop = () => {
+		stopWatch?.();
+		remove();
+	};
+	if (getCurrentScope()) onScopeDispose(stop);
+	return stop;
+}
+//#endregion
+export { useEventListener };
+
+//# sourceMappingURL=event-listener.js.map

package/dist/utils/dom/event-listener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-listener.js","names":[],"sources":["../../../src/utils/dom/event-listener.ts"],"sourcesContent":["/**\n * 事件监听，跟着作用域（组件）一起移除（参考 VueUse 的 useEventListener）：\n *\n *   useEventListener(document, 'visibilitychange', update);\n *   useEventListener(() => scroller, 'scroll', onScroll, { passive: true });   目标是 getter：变了换绑，null 时不监听\n *\n * getter 在 DOM 更新之后读（模板 ref 已经有值）；服务端渲染时什么都不做。返回立即移除的函数。\n */\nimport { getCurrentScope, onScopeDispose, watch } from 'vue';\n\n/** 监听的目标：window、document、元素，或返回它们的 getter（返回 null、undefined 时不监听） */\nexport type ListenerTarget = EventTarget | (() => EventTarget | null | undefined);\n\n/** 监听 window 的事件（见文件开头） */\nexport function useEventListener<K extends keyof WindowEventMap>(\n  target: Window | (() => Window | null | undefined),\n  type: K,\n  listener: (event: WindowEventMap[K]) => void,\n  options?: AddEventListenerOptions,\n): () => void;\n/** 监听 document 的事件 */\nexport function useEventListener<K extends keyof DocumentEventMap>(\n  target: Document | (() => Document | null | undefined),\n  type: K,\n  listener: (event: DocumentEventMap[K]) => void,\n  options?: AddEventListenerOptions,\n): () => void;\n/** 监听元素（或 getter 给出的目标）的事件 */\nexport function useEventListener<K extends keyof HTMLElementEventMap>(\n  target: ListenerTarget,\n  type: K,\n  listener: (event: HTMLElementEventMap[K]) => void,\n  options?: AddEventListenerOptions,\n): () => void;\nexport function useEventListener(\n  target: ListenerTarget,\n  type: string,\n  listener: (event: Event) => void,\n  options?: AddEventListenerOptions,\n): () => void {\n  if (typeof window === 'undefined') return () => {};\n  let remove = () => {};\n  const bind = (element: EventTarget | null | undefined) => {\n    remove();\n    remove = () => {};\n    if (!element) return;\n    element.addEventListener(type, listener, options);\n    remove = () => element.removeEventListener(type, listener, options);\n  };\n  const stopWatch =\n    typeof target === 'function'\n      ? watch(target, bind, { immediate: true, flush: 'post' })\n      : (bind(target), undefined);\n  const stop = () => {\n    stopWatch?.();\n    remove();\n  };\n  if (getCurrentScope()) onScopeDispose(stop);\n  return stop;\n}\n"],"mappings":";;;;;;;;;;AAkCA,SAAgB,iBACd,QACA,MACA,UACA,SACY;CACZ,IAAI,OAAO,WAAW,aAAa,aAAa,CAAC;CACjD,IAAI,eAAe,CAAC;CACpB,MAAM,QAAQ,YAA4C;EACxD,OAAO;EACP,eAAe,CAAC;EAChB,IAAI,CAAC,SAAS;EACd,QAAQ,iBAAiB,MAAM,UAAU,OAAO;EAChD,eAAe,QAAQ,oBAAoB,MAAM,UAAU,OAAO;CACpE;CACA,MAAM,YACJ,OAAO,WAAW,aACd,MAAM,QAAQ,MAAM;EAAE,WAAW;EAAM,OAAO;CAAO,CAAC,KACrD,KAAK,MAAM,GAAG,KAAA;CACrB,MAAM,aAAa;EACjB,YAAY;EACZ,OAAO;CACT;CACA,IAAI,gBAAgB,GAAG,eAAe,IAAI;CAC1C,OAAO;AACT"}

package/dist/utils/dom/floating.d.ts

@@ -0,0 +1,149 @@
+/**
+ * 锚定浮层：Popover、Tooltip、Menu、Select 的弹出层贴着触发器显示。位置由 floating-ui 计算，
+ * 显示、隐藏、Esc、点击外部仍交给原生 popover；createAnchoredLayer 把两者串成打开、关闭的流程。
+ *
+ *   const anchored = anchorFloating(trigger, panel, { placement: 'bottom-start' });
+ *   await anchored.ready;   // 第一次定位完成、已经可见：这时才能把焦点移进去
+ *   anchored.stop();        // 关闭时停止跟随
+ *   sx: [floatingStyles.anchored, …]   // 浮层自己的样式：去掉原生 popover 默认的居中与外边距
+ *
+ * - 第一次算好位置之前浮层是 visibility: hidden，不会在默认位置闪一下；
+ * - 空间不够时翻到另一侧（flip）、贴着视口边缘挪回来（shift），滚动、缩放、锚点变化时自动重新定位（autoUpdate）；
+ * - start / end 对齐是逻辑方向，从右到左排版下自动镜像（floating-ui 读浮层的 direction）；
+ * - 最终方向写到 data-side / data-align，缩放原点（transform-origin）朝向锚点，进出场的 scale 过渡从锚点那侧展开。
+ */
+import { type Placement, type VirtualElement } from '@floating-ui/dom';
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type TextSize } from '../style/typography';
+/** 弹出位置：主方向 + 对齐方式（start 对齐锚点的起始边，end 对齐结束边）；空间不够时自动翻转 */
+export interface FloatingPlacements {
+    /** 上方居中 */
+    top: unknown;
+    /** 上方，与锚点起始边对齐 */
+    'top-start': unknown;
+    /** 上方，与锚点结束边对齐 */
+    'top-end': unknown;
+    /** 下方居中 */
+    bottom: unknown;
+    /** 下方，与锚点起始边对齐 */
+    'bottom-start': unknown;
+    /** 下方，与锚点结束边对齐 */
+    'bottom-end': unknown;
+    /** 左侧居中 */
+    left: unknown;
+    /** 左侧，与锚点顶边对齐 */
+    'left-start': unknown;
+    /** 左侧，与锚点底边对齐 */
+    'left-end': unknown;
+    /** 右侧居中 */
+    right: unknown;
+    /** 右侧，与锚点顶边对齐 */
+    'right-start': unknown;
+    /** 右侧，与锚点底边对齐 */
+    'right-end': unknown;
+}
+/** 弹出位置 */
+export type FloatingPlacement = keyof FloatingPlacements & Placement;
+/**
+ * 锚点：元素，或只有位置的虚拟锚点（右键菜单从指针的位置弹出：`pointAnchor(x, y)`）。
+ * 虚拟锚点没有元素可以还焦点，关闭后焦点由组件自己安排
+ */
+export type FloatingAnchor = HTMLElement | VirtualElement;
+/** 视口里一个点（clientX / clientY）做锚点 */
+export declare function pointAnchor(x: number, y: number): VirtualElement;
+/** anchorFloating 的选项 */
+export interface FloatingOptions {
+    /** 弹出位置，默认 bottom-start */
+    placement?: FloatingPlacement;
+    /** 与锚点的距离（px），默认 6 */
+    offset?: number;
+    /** 至少与锚点一样宽：下拉框、组合框的选项列表 */
+    matchWidth?: boolean;
+    /** 最大高度限制在视口剩余空间内（浮层自己设 overflow 滚动）：菜单、选项列表 */
+    fitHeight?: boolean;
+    /** 箭头元素（浮层里的子元素，样式用 floatingStyles.arrow）：指向锚点，随翻转换边；距离自动加上箭头露出的一半 */
+    arrow?: HTMLElement | null;
+    /** 主方向与对侧都放不下时，再试垂直的两侧（窄屏上“右侧”的大卡片改到上下）：引导卡片 */
+    crossAxisFallback?: boolean;
+}
+/** anchorFloating 的返回值 */
+export interface Anchored {
+    /** 第一次定位完成、浮层已可见时完成；在这之前就 stop 时不会完成 */
+    readonly ready: Promise<void>;
+    /** 停止跟随锚点；关闭浮层时调用，重复调用无副作用 */
+    stop(): void;
+}
+/**
+ * 弹出面板（选项列表、树、日期面板）共用的样式：锚定定位、浮起的表面、缩放进出场；
+ * 面板渲染在顶层，不是输入框外壳的后代、不继承它的字号：按控件的 size 设置。ListPopover、TreeSelect、日期选择器用它
+ */
+export declare function anchoredPanelSx(size?: TextSize): SxStyles;
+/** 锚定浮层的基础样式：定位与表面 */
+export declare const floatingStyles: Readonly<{
+    anchored: css.CompiledStyles;
+    arrow: css.CompiledStyles;
+    scrollArea: css.CompiledStyles;
+    scrollPanel: css.CompiledStyles;
+    surface: css.CompiledStyles;
+    withArrow: css.CompiledStyles;
+}>;
+/** 把 floating 定位到 anchor 旁边并持续跟随；floating 需要已经显示（如 showPopover 之后） */
+export declare function anchorFloating(anchor: FloatingAnchor, floating: HTMLElement, { placement, offset: distance, matchWidth, fitHeight, arrow, crossAxisFallback, }?: FloatingOptions): Anchored;
+/** 关闭浮层时焦点还给谁：true 锚点，元素，或 false 不还 */
+export type RestoreFocus = boolean | HTMLElement | null;
+/** createAnchoredLayer 的返回值：一个原生 popover 浮层的打开与关闭 */
+export interface AnchoredLayer {
+    /** 是否显示着（show 之后、hide 之前） */
+    readonly visible: boolean;
+    /** 显示 panel（showPopover）并贴着 anchor 定位；返回第一次定位完成、可以移入焦点的 Promise。已显示时不重复 */
+    show(anchor: FloatingAnchor, panel: HTMLElement, options?: FloatingOptions): Promise<void>;
+    /**
+     * 停止定位并隐藏；焦点还在浮层里或已丢失时归还：restoreFocus 默认 true 还给锚点，给元素时还给它，false 不还。
+     * 未显示时什么也不做
+     */
+    hide(options?: {
+        restoreFocus?: RestoreFocus;
+    }): void;
+}
+/**
+ * 锚定浮层的生命周期（Popover、Menu、Tooltip 共用）：显示 → 定位 → 关闭时停止定位、归还焦点。
+ * 原生 popover="auto" 被 Esc、点击外部关闭（light dismiss）时浏览器先隐藏了它，组件在 toggle 事件里调用 hide 收尾。
+ */
+export declare function createAnchoredLayer(): AnchoredLayer;
+/** useAnchoredPopover 每次渲染后读取的状态 */
+export interface AnchoredPopoverState {
+    /** 是否打开 */
+    open: boolean;
+    /** 锚点（触发器、输入框外壳，或右键菜单的虚拟锚点） */
+    anchor: FloatingAnchor | null;
+    /** 浮层（popover 元素） */
+    panel: HTMLElement | null;
+    /** 定位选项 */
+    floating?: FloatingOptions;
+    /**
+     * 关闭时焦点还给谁：默认 true 还给锚点；锚点是输入框外壳时给打开按钮（DatePicker）；
+     * 焦点一直在锚点上的组件（Select、Combobox）设 false
+     */
+    restoreFocus?: RestoreFocus;
+}
+/** useAnchoredPopover 的回调 */
+export interface AnchoredPopoverEvents {
+    /** 浏览器关掉了浮层：按了 Esc，或点了外面（别的浮层打开也算）；组件把 open 写回 false */
+    close: (reason: 'escape' | 'outside', event: Event) => void;
+    /** 浮层打开并第一次定位完成（可见）：移入焦点等 */
+    shown?: (panel: HTMLElement) => void;
+}
+/**
+ * 原生 popover="auto" 的锚定浮层接到组件的 open 上（Popover、Menu、Select、Combobox 共用）：
+ * open 变化时显示或隐藏（DOM 更新之后），浏览器的 light dismiss 写回 open，卸载时收起。
+ * 返回要放到浮层元素上的 onToggle。在组件 setup 里调用。
+ *
+ *   const { onToggle } = useAnchoredPopover(
+ *     () => ({ open, anchor, panel, floating: { placement } }),
+ *     { close: (reason, event) => setOpen(false, reason, event), shown: focusFirst },
+ *   );
+ */
+export declare function useAnchoredPopover(read: () => AnchoredPopoverState, events: AnchoredPopoverEvents): {
+    onToggle: (event: Event) => void;
+};