@greypan/web-ui 4.0.0 → 5.0.0

package/dist/shared/overlay/portal.js

@@ -2,45 +2,76 @@ import { getFallbackOverlayRoot as e } from "../theme/overlay-root.js";
 import { findNearestTheme as t, findRootTheme as n } from "../theme/theme-scope.js";
 import { definePlugin as r } from "@greypan/js-kit";
 //#region src/shared/overlay/portal.ts
-var i = () => r((e) => {
+function i(e, t, n) {
+	let r = getComputedStyle(t);
+	for (let t of n) {
+		let n = r.getPropertyValue(t).trim();
+		n && e.style.setProperty(t, n);
+	}
+}
+var a = () => r((e) => {
 	let t = document.createElement("div");
 	t.style.display = "contents";
 	let n = t.attachShadow({ mode: "open" }), r = document.createElement("style");
 	r.textContent = e.style;
 	let i = document.createElement("div");
 	i.className = e.className, i.dataset.wuiPresence = "entering", n.append(r, i);
-	let o = [], s = new MutationObserver(() => e.onContentChange?.()), c = (e) => {
+	let a = [], o = new MutationObserver((t) => e.onContentChange?.(t)), s = (e) => {
 		e.forEach((e) => {
-			let t = o.indexOf(e);
-			t >= 0 && o.splice(t, 1);
+			let t = a.indexOf(e);
+			t >= 0 && a.splice(t, 1);
 		});
 	};
-	return a(e.container, e.target).appendChild(t), e.onContentChange && s.observe(i, {
+	return c(e.container, e.target).appendChild(t), e.onContentChange && o.observe(i, {
 		childList: !0,
 		subtree: !0
 	}), {
 		panel: i,
 		moveContent(e, t = i) {
-			o.splice(0, o.length, ...e), t.append(...o);
+			a.splice(0, a.length, ...e), t.append(...a);
 		},
 		appendContent(e, t = i) {
-			c(e), o.push(...e), t.append(...e);
+			s(e), a.push(...e), t.append(...e);
 		},
 		removeContent(e) {
-			c(e);
+			s(e);
 		},
 		restoreContent() {
-			e.target.append(...o), o.length = 0;
+			e.target.append(...a), a.length = 0;
 		},
 		remove() {
-			s.disconnect(), t.remove();
+			o.disconnect(), t.remove();
 		}
 	};
 });
-function a(r, i, a = {}) {
-	return (typeof r == "function" ? r() : r) || ((a.preferRootTheme ? n() : t(i))?.getOverlayRoot() ?? e());
+function o(e, t, n) {
+	let r = e;
+	for (; r && r !== n;) {
+		if (r === t) return !0;
+		r = r.parentNode;
+	}
+	return !1;
+}
+function s(e) {
+	let t = e;
+	for (; t && t !== document.documentElement;) {
+		if (t instanceof HTMLDialogElement && t.open) return t;
+		if (t instanceof Element && t.shadowRoot) {
+			let n = t.shadowRoot.querySelectorAll("dialog");
+			for (let r of n) {
+				if (!(r instanceof HTMLDialogElement) || !r.open) continue;
+				let n = r.querySelectorAll("slot");
+				for (let i of n) for (let n of i.assignedNodes()) if (n instanceof Node && o(e, n, t)) return r;
+			}
+		}
+		t = t.parentNode;
+	}
+	return null;
+}
+function c(r, i, a = {}) {
+	return (typeof r == "function" ? r() : r) || s(i) || ((a.preferRootTheme ? n() : t(i))?.getOverlayRoot() ?? e());
 }
 //#endregion
-export { i as defineOverlayPortal, a as resolveOverlayContainer };
+export { i as applyOverlayVariables, a as defineOverlayPortal, c as resolveOverlayContainer };
 
 //# sourceMappingURL=portal.js.map

package/dist/shared/overlay/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","names":[],"sources":["../../../src/shared/overlay/portal.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\n\nimport { getFallbackOverlayRoot } from '@/shared/theme/overlay-root'\nimport { findNearestTheme, findRootTheme } from '@/shared/theme/theme-scope'\n\nexport type OverlayContainer = HTMLElement | (() => HTMLElement | undefined)\n\nexport interface OverlayContainerResolutionOptions {\n  /** 无 target 时优先使用文档中的 root theme。 */\n  preferRootTheme?: boolean\n}\n\nexport interface OverlayPortalOptions {\n  container?: OverlayContainer\n  target: Element\n  style: string\n  className: string\n  onContentChange?: () => void\n}\n\nexport interface OverlayPortal {\n  readonly panel: HTMLElement\n  restoreContent(): void\n  moveContent(nodes: Node[], target?: HTMLElement): void\n  appendContent(nodes: Node[], target?: HTMLElement): void\n  removeContent(nodes: Node[]): void\n  remove(): void\n}\n\n/**\n * 构建带 Shadow DOM 样式边界的 Portal 面板，并追踪被迁移的内容节点以便恢复。\n */\nexport const defineOverlayPortal = () =>\n  definePlugin<OverlayPortal, OverlayPortalOptions>(ctx => {\n    const host = document.createElement('div')\n    // :host 规则可能让宿主在 overlay 容器中生成行盒；display: contents 保留面板定位而不参与布局。\n    host.style.display = 'contents'\n\n    const root = host.attachShadow({ mode: 'open' })\n    const style = document.createElement('style')\n    style.textContent = ctx.style\n    const panel = document.createElement('div')\n    panel.className = ctx.className\n    panel.dataset.wuiPresence = 'entering'\n    root.append(style, panel)\n\n    const trackedNodes: Node[] = []\n    const contentObserver = new MutationObserver(() => ctx.onContentChange?.())\n    const untrackNodes = (nodes: Node[]) => {\n      nodes.forEach(node => {\n        const index = trackedNodes.indexOf(node)\n        if (index >= 0) trackedNodes.splice(index, 1)\n      })\n    }\n\n    resolveOverlayContainer(ctx.container, ctx.target).appendChild(host)\n    if (ctx.onContentChange) contentObserver.observe(panel, { childList: true, subtree: true })\n\n    return {\n      panel,\n\n      moveContent(nodes, target = panel) {\n        trackedNodes.splice(0, trackedNodes.length, ...nodes)\n        target.append(...trackedNodes)\n      },\n\n      appendContent(nodes, target = panel) {\n        untrackNodes(nodes)\n        trackedNodes.push(...nodes)\n        target.append(...nodes)\n      },\n\n      removeContent(nodes) {\n        untrackNodes(nodes)\n      },\n\n      restoreContent() {\n        ctx.target.append(...trackedNodes)\n        trackedNodes.length = 0\n      },\n\n      remove() {\n        contentObserver.disconnect()\n        host.remove()\n      }\n    }\n  })\n\nexport function resolveOverlayContainer(\n  container: OverlayContainer | undefined,\n  target: Element,\n  options: OverlayContainerResolutionOptions = {}\n): HTMLElement {\n  const explicit = typeof container === 'function' ? container() : container\n  if (explicit) return explicit\n\n  // 无 target 的调用（如菜单）优先使用 root theme；有 target 时使用最近的 theme。\n  const theme = options.preferRootTheme ? findRootTheme() : findNearestTheme(target)\n  return theme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n}\n"],"mappings":";;;;AAgCA,IAAa,UACX,GAAkD,MAAO;CACvD,IAAM,IAAO,SAAS,cAAc,KAAK;CAEzC,EAAK,MAAM,UAAU;CAErB,IAAM,IAAO,EAAK,aAAa,EAAE,MAAM,OAAO,CAAC,GACzC,IAAQ,SAAS,cAAc,OAAO;CAC5C,EAAM,cAAc,EAAI;CACxB,IAAM,IAAQ,SAAS,cAAc,KAAK;CAG1C,AAFA,EAAM,YAAY,EAAI,WACtB,EAAM,QAAQ,cAAc,YAC5B,EAAK,OAAO,GAAO,CAAK;CAExB,IAAM,IAAuB,CAAC,GACxB,IAAkB,IAAI,uBAAuB,EAAI,kBAAkB,CAAC,GACpE,KAAgB,MAAkB;EACtC,EAAM,SAAQ,MAAQ;GACpB,IAAM,IAAQ,EAAa,QAAQ,CAAI;GACvC,AAAI,KAAS,KAAG,EAAa,OAAO,GAAO,CAAC;EAC9C,CAAC;CACH;CAKA,OAHA,EAAwB,EAAI,WAAW,EAAI,MAAM,CAAC,CAAC,YAAY,CAAI,GAC/D,EAAI,mBAAiB,EAAgB,QAAQ,GAAO;EAAE,WAAW;EAAM,SAAS;CAAK,CAAC,GAEnF;EACL;EAEA,YAAY,GAAO,IAAS,GAAO;GAEjC,AADA,EAAa,OAAO,GAAG,EAAa,QAAQ,GAAG,CAAK,GACpD,EAAO,OAAO,GAAG,CAAY;EAC/B;EAEA,cAAc,GAAO,IAAS,GAAO;GAGnC,AAFA,EAAa,CAAK,GAClB,EAAa,KAAK,GAAG,CAAK,GAC1B,EAAO,OAAO,GAAG,CAAK;EACxB;EAEA,cAAc,GAAO;GACnB,EAAa,CAAK;EACpB;EAEA,iBAAiB;GAEf,AADA,EAAI,OAAO,OAAO,GAAG,CAAY,GACjC,EAAa,SAAS;EACxB;EAEA,SAAS;GAEP,AADA,EAAgB,WAAW,GAC3B,EAAK,OAAO;EACd;CACF;AACF,CAAC;AAEH,SAAgB,EACd,GACA,GACA,IAA6C,CAAC,GACjC;CAMb,QALiB,OAAO,KAAc,aAAa,EAAU,IAAI,QAInD,EAAQ,kBAAkB,EAAc,IAAI,EAAiB,CAAM,EAAA,EACnE,eAAe,KAAK,EAAuB;AAC3D"}
+{"version":3,"file":"portal.js","names":[],"sources":["../../../src/shared/overlay/portal.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\n\nimport { getFallbackOverlayRoot } from '@/shared/theme/overlay-root'\nimport { findNearestTheme, findRootTheme } from '@/shared/theme/theme-scope'\n\nexport type OverlayContainer = HTMLElement | (() => HTMLElement | undefined)\n\nexport interface OverlayContainerResolutionOptions {\n  /** 无 target 时优先使用文档中的 root theme。 */\n  preferRootTheme?: boolean\n}\n\nexport interface OverlayPortalOptions {\n  container?: OverlayContainer\n  target: Element\n  style: string\n  className: string\n  onContentChange?: (mutations: MutationRecord[]) => void\n}\n\nexport interface OverlayPortal {\n  readonly panel: HTMLElement\n  restoreContent(): void\n  moveContent(nodes: Node[], target?: HTMLElement): void\n  appendContent(nodes: Node[], target?: HTMLElement): void\n  removeContent(nodes: Node[]): void\n  remove(): void\n}\n\n/**\n * Portal 面板位于独立 shadow root，宿主上的 CSS 自定义属性不会沿渲染树继承到 panel。\n * 这里在创建时镜像锚点解析后的变量，让组件 host 上的尺寸配置对 portal 仍然生效。\n */\nexport function applyOverlayVariables(panel: HTMLElement, source: Element, variables: readonly string[]): void {\n  const computedStyle = getComputedStyle(source)\n  for (const variable of variables) {\n    const value = computedStyle.getPropertyValue(variable).trim()\n    if (value) panel.style.setProperty(variable, value)\n  }\n}\n\n/**\n * 构建带 Shadow DOM 样式边界的 Portal 面板，并追踪被迁移的内容节点以便恢复。\n */\nexport const defineOverlayPortal = () =>\n  definePlugin<OverlayPortal, OverlayPortalOptions>(ctx => {\n    const host = document.createElement('div')\n    // :host 规则可能让宿主在 overlay 容器中生成行盒；display: contents 保留面板定位而不参与布局。\n    host.style.display = 'contents'\n\n    const root = host.attachShadow({ mode: 'open' })\n    const style = document.createElement('style')\n    style.textContent = ctx.style\n    const panel = document.createElement('div')\n    panel.className = ctx.className\n    panel.dataset.wuiPresence = 'entering'\n    root.append(style, panel)\n\n    const trackedNodes: Node[] = []\n    const contentObserver = new MutationObserver(mutations => ctx.onContentChange?.(mutations))\n    const untrackNodes = (nodes: Node[]) => {\n      nodes.forEach(node => {\n        const index = trackedNodes.indexOf(node)\n        if (index >= 0) trackedNodes.splice(index, 1)\n      })\n    }\n\n    resolveOverlayContainer(ctx.container, ctx.target).appendChild(host)\n    if (ctx.onContentChange) contentObserver.observe(panel, { childList: true, subtree: true })\n\n    return {\n      panel,\n\n      moveContent(nodes, target = panel) {\n        trackedNodes.splice(0, trackedNodes.length, ...nodes)\n        target.append(...trackedNodes)\n      },\n\n      appendContent(nodes, target = panel) {\n        untrackNodes(nodes)\n        trackedNodes.push(...nodes)\n        target.append(...nodes)\n      },\n\n      removeContent(nodes) {\n        untrackNodes(nodes)\n      },\n\n      restoreContent() {\n        ctx.target.append(...trackedNodes)\n        trackedNodes.length = 0\n      },\n\n      remove() {\n        contentObserver.disconnect()\n        host.remove()\n      }\n    }\n  })\n\n/**\n * 判断 node 是否是 slot 已分配节点（或其 light DOM 后代），即 node 实际渲染在 shadowRoot 内。\n * slotted 内容的 parentNode 仍停留在 light DOM，因此不能用普通祖先遍历跨过 shadow 边界，\n * 只能通过 slot.assignedNodes() 判断内容被渲染到哪个 slot。\n */\nfunction isAssignedIntoTarget(node: Node, assignedNode: Node, boundary: Node): boolean {\n  let current: Node | null = node\n  while (current && current !== boundary) {\n    if (current === assignedNode) return true\n    current = current.parentNode\n  }\n  return false\n}\n\n/**\n * 查找包含 target 且处于打开态的最近原生 <dialog>。\n * 原生 showModal() 会把 dialog 提升到浏览器 top layer，而常规 overlay 容器在普通文档流，\n * 二者无法靠 z-index 叠序——overlay 会被 top layer 的 dialog 遮住。\n * 因此 target 被渲染到某个已打开的原生 dialog 内时，应把 overlay 挂到该 dialog 上，\n * 使其一并进入 top layer（抽屉 / 对话框内的 dropdown、tooltip、context-menu 均适用）。\n */\nfunction findEnclosingOpenDialog(target: Element): HTMLDialogElement | null {\n  let current: Node | null = target\n  while (current && current !== document.documentElement) {\n    if (current instanceof HTMLDialogElement && current.open) return current\n\n    // 跨过 shadow host：检查其 shadowRoot 内已打开的 dialog 是否渲染了 target。\n    if (current instanceof Element && current.shadowRoot) {\n      const dialogs = current.shadowRoot.querySelectorAll('dialog')\n      for (const dialog of dialogs) {\n        if (!(dialog instanceof HTMLDialogElement) || !dialog.open) continue\n        const slots = dialog.querySelectorAll('slot')\n        for (const slot of slots) {\n          for (const assigned of slot.assignedNodes()) {\n            if (!(assigned instanceof Node)) continue\n            if (isAssignedIntoTarget(target, assigned, current)) return dialog\n          }\n        }\n      }\n    }\n\n    current = current.parentNode\n  }\n  return null\n}\n\nexport function resolveOverlayContainer(\n  container: OverlayContainer | undefined,\n  target: Element,\n  options: OverlayContainerResolutionOptions = {}\n): HTMLElement {\n  const explicit = typeof container === 'function' ? container() : container\n  if (explicit) return explicit\n\n  // target 在已打开的原生 dialog / drawer 内：挂到该 dialog，加入 top layer。\n  const enclosingDialog = findEnclosingOpenDialog(target)\n  if (enclosingDialog) return enclosingDialog\n\n  // 无 target 的调用（如菜单）优先使用 root theme；有 target 时使用最近的 theme。\n  const theme = options.preferRootTheme ? findRootTheme() : findNearestTheme(target)\n  return theme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n}\n"],"mappings":";;;;AAiCA,SAAgB,EAAsB,GAAoB,GAAiB,GAAoC;CAC7G,IAAM,IAAgB,iBAAiB,CAAM;CAC7C,KAAK,IAAM,KAAY,GAAW;EAChC,IAAM,IAAQ,EAAc,iBAAiB,CAAQ,CAAC,CAAC,KAAK;EAC5D,AAAI,KAAO,EAAM,MAAM,YAAY,GAAU,CAAK;CACpD;AACF;AAKA,IAAa,UACX,GAAkD,MAAO;CACvD,IAAM,IAAO,SAAS,cAAc,KAAK;CAEzC,EAAK,MAAM,UAAU;CAErB,IAAM,IAAO,EAAK,aAAa,EAAE,MAAM,OAAO,CAAC,GACzC,IAAQ,SAAS,cAAc,OAAO;CAC5C,EAAM,cAAc,EAAI;CACxB,IAAM,IAAQ,SAAS,cAAc,KAAK;CAG1C,AAFA,EAAM,YAAY,EAAI,WACtB,EAAM,QAAQ,cAAc,YAC5B,EAAK,OAAO,GAAO,CAAK;CAExB,IAAM,IAAuB,CAAC,GACxB,IAAkB,IAAI,kBAAiB,MAAa,EAAI,kBAAkB,CAAS,CAAC,GACpF,KAAgB,MAAkB;EACtC,EAAM,SAAQ,MAAQ;GACpB,IAAM,IAAQ,EAAa,QAAQ,CAAI;GACvC,AAAI,KAAS,KAAG,EAAa,OAAO,GAAO,CAAC;EAC9C,CAAC;CACH;CAKA,OAHA,EAAwB,EAAI,WAAW,EAAI,MAAM,CAAC,CAAC,YAAY,CAAI,GAC/D,EAAI,mBAAiB,EAAgB,QAAQ,GAAO;EAAE,WAAW;EAAM,SAAS;CAAK,CAAC,GAEnF;EACL;EAEA,YAAY,GAAO,IAAS,GAAO;GAEjC,AADA,EAAa,OAAO,GAAG,EAAa,QAAQ,GAAG,CAAK,GACpD,EAAO,OAAO,GAAG,CAAY;EAC/B;EAEA,cAAc,GAAO,IAAS,GAAO;GAGnC,AAFA,EAAa,CAAK,GAClB,EAAa,KAAK,GAAG,CAAK,GAC1B,EAAO,OAAO,GAAG,CAAK;EACxB;EAEA,cAAc,GAAO;GACnB,EAAa,CAAK;EACpB;EAEA,iBAAiB;GAEf,AADA,EAAI,OAAO,OAAO,GAAG,CAAY,GACjC,EAAa,SAAS;EACxB;EAEA,SAAS;GAEP,AADA,EAAgB,WAAW,GAC3B,EAAK,OAAO;EACd;CACF;AACF,CAAC;AAOH,SAAS,EAAqB,GAAY,GAAoB,GAAyB;CACrF,IAAI,IAAuB;CAC3B,OAAO,KAAW,MAAY,IAAU;EACtC,IAAI,MAAY,GAAc,OAAO;EACrC,IAAU,EAAQ;CACpB;CACA,OAAO;AACT;AASA,SAAS,EAAwB,GAA2C;CAC1E,IAAI,IAAuB;CAC3B,OAAO,KAAW,MAAY,SAAS,kBAAiB;EACtD,IAAI,aAAmB,qBAAqB,EAAQ,MAAM,OAAO;EAGjE,IAAI,aAAmB,WAAW,EAAQ,YAAY;GACpD,IAAM,IAAU,EAAQ,WAAW,iBAAiB,QAAQ;GAC5D,KAAK,IAAM,KAAU,GAAS;IAC5B,IAAI,EAAE,aAAkB,sBAAsB,CAAC,EAAO,MAAM;IAC5D,IAAM,IAAQ,EAAO,iBAAiB,MAAM;IAC5C,KAAK,IAAM,KAAQ,GACjB,KAAK,IAAM,KAAY,EAAK,cAAc,GAClC,iBAAoB,QACtB,EAAqB,GAAQ,GAAU,CAAO,GAAG,OAAO;GAGlE;EACF;EAEA,IAAU,EAAQ;CACpB;CACA,OAAO;AACT;AAEA,SAAgB,EACd,GACA,GACA,IAA6C,CAAC,GACjC;CAUb,QATiB,OAAO,KAAc,aAAa,EAAU,IAAI,MAIzC,EAAwB,CAC5C,OAGU,EAAQ,kBAAkB,EAAc,IAAI,EAAiB,CAAM,EAAA,EACnE,eAAe,KAAK,EAAuB;AAC3D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greypan/web-ui",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Lit-based web components for React, Vue, and vanilla JS",
   "license": "MIT",
   "repository": {
@@ -41,13 +41,15 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@greypan/js-kit": "2.0.0",
-    "@greypan/browser-kit": "2.0.0"
+    "@lit/context": "^1.1.6",
+    "@greypan/browser-kit": "2.1.0",
+    "@greypan/js-kit": "2.0.0"
   },
   "devDependencies": {
     "@iconify-json/jam": "^1.2.3",
     "@iconify-json/lucide": "^1.2.126",
     "@iconify-json/si": "^1.2.17",
+    "@iconify-json/tabler": "^1.2.38",
     "@iconify-json/heroicons": "^1.2.3",
     "@iconify-json/ooui": "^1.2.20",
     "@iconify-json/radix-icons": "^1.2.6",