@zerodep-dev/vue-tsx-pro-ui 0.3.3 → 0.4.0

package/dist/overlay/detached.js.map

@@ -1 +1 @@
-{"version":3,"file":"detached.js","names":["_vtp_readonlyProp","_createVNode"],"sources":["../../src/overlay/detached.tsx"],"sourcesContent":["/**\n * 渲染到组件树之外：沿用调用处的配置（主题、语言、默认值，经 ConfigScope）与应用上下文（全局组件），\n * 生命周期跟着调用的组件——它卸载时一起收掉，不留孤儿。\n *\n *   const renderDetached = useDetachedRender();   // setup 里；第三方库管的元素（图表的提示框）\n *   renderDetached(<Tip />, element);             // 再调一次换内容，传 null 卸载；组件卸载时自动卸载\n *\n *   const mount = useDetachedDialog();            // setup 里；命令式的对话框（useConfirm、useFormDialog）\n *   mount((host) => <Dialog _open={host.open} onClose={host.closed}>…</Dialog>);\n *\n * 对话框渲染到 body 末尾，关上后等离场过渡播完再卸载；调用的组件卸载时（例如切换了路由）把开着的对话框关上，\n * 照常走关闭的流程，等着结果的 `await confirm()` 也拿到结果。\n * useDetachedOverlay 在 useDetachedDialog 上面加一层句柄（close、update、closed），useDialog、useDrawer 用它。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport {\n  getCurrentInstance,\n  getCurrentScope,\n  h,\n  onScopeDispose,\n  render,\n  shallowRef,\n  type AppContext,\n  type VNodeChild,\n} from 'vue';\nimport { ConfigContext, useConfig, type UiConfig } from '../config/context';\nimport { ConfigScope } from '../config/Provider';\nimport type { OpenChangeProps, OpenChangeReasons } from '../utils/dom/open-change';\nimport { afterTransitions } from '../utils/style/transitions';\n\n/** 交给对话框内容的控制：开着没有、关上了 */\nexport interface DetachedDialogHost {\n  /** 对话框开着：对话框写 _open={host.open}，改成 false 就关上 */\n  open: boolean;\n  /** 对话框关上了（原生 close 事件里调用）：等离场过渡播完卸载 */\n  closed: () => void;\n}\n\n/** 组件树之外的根数到第几个了：给每个根一个自己的 useId 命名段 */\nlet detachedRoots = 0;\n\n/**\n * 组件树之外的根：提供调用处的配置，内容包在 ConfigScope 里（主题变量、语言）。\n * render() 出来的根，useId 从头计数、前缀又和应用相同（共用 appContext），生成的 id 会和页面上已有的撞上\n * （表单对话框的 label 关联到页面里另一个控件）。照 Vue 处理异步边界的做法（markAsyncBoundary）换一个命名段：\n * 子组件沿用父组件的 ids，所以在根上换一次就够了。\n */\nconst DetachedRoot = _component(\n  ({ config, content }: { config: UiConfig; content: () => VNodeChild }) => {\n    const instance = getCurrentInstance() as { ids?: [string, number, number] } | null;\n    if (instance?.ids) instance.ids = [`d${++detachedRoots}-`, 0, 0];\n    ConfigContext.provide(config);\n    return () => <ConfigScope>{content()}</ConfigScope>;\n  },\n);\n\n/** 调用处的配置与应用上下文（在 setup 里取），交给组件树之外的根 */\nfunction captureContext() {\n  return { config: useConfig(), appContext: getCurrentInstance()?.appContext ?? null };\n}\n\nfunction renderInto(\n  container: Element,\n  { config, appContext }: { config: UiConfig; appContext: AppContext | null },\n  content: () => VNodeChild,\n) {\n  const vnode = h(DetachedRoot, { config, content });\n  vnode.appContext = appContext;\n  render(vnode, container);\n}\n\n/** 在 setup 里调用，返回 renderDetached(content, container)：渲染到组件树之外的元素里，调用的组件卸载时一起卸载 */\nexport function useDetachedRender(): (content: VNodeChild | null, container: Element) => void {\n  const context = captureContext();\n  const containers = new Set<Element>();\n  if (getCurrentScope()) {\n    onScopeDispose(() => {\n      for (const container of containers) render(null, container);\n      containers.clear();\n    });\n  }\n  return (content, container) => {\n    if (content == null) {\n      containers.delete(container);\n      render(null, container);\n      return;\n    }\n    containers.add(container);\n    renderInto(container, context, () => content);\n  };\n}\n\n/** 在 setup 里调用，返回 mount(content)：把对话框渲染到组件树之外 */\nexport function useDetachedDialog(): (content: (host: DetachedDialogHost) => VNodeChild) => void {\n  const context = captureContext();\n  /** 开着的对话框：调用的组件卸载时关上 */\n  const live = new Set<DetachedDialogHost>();\n  if (getCurrentScope()) {\n    onScopeDispose(() => {\n      for (const host of live) host.open = false;\n    });\n  }\n\n  return (content) => {\n    const container = document.createElement('div');\n    document.body.append(container);\n    const open = shallowRef(true);\n    const host: DetachedDialogHost = {\n      get open() {\n        return open.value;\n      },\n      set open(value) {\n        open.value = value;\n      },\n      closed() {\n        live.delete(host);\n        const dialog = container.querySelector('dialog');\n        void (dialog ? afterTransitions(dialog) : Promise.resolve()).then(() => {\n          render(null, container);\n          container.remove();\n        });\n      },\n    };\n    live.add(host);\n    renderInto(container, context, () => content(host));\n  };\n}\n\n/** 命令式浮层（useDialog、useDrawer）的选项：浮层的属性（_open 由句柄管理），content 是正文 */\nexport type DetachedOverlayOptions<P> = Omit<P, '_open' | 'children'> & {\n  /** 正文；给函数时拿到句柄，正文里的按钮可以自己关上、改标题 */\n  content?: VNodeChild | ((handle: DetachedOverlayHandle<P>) => VNodeChild);\n};\n\n/** useDialog().open、useDrawer().open 返回的句柄；方法不依赖 this，可以直接传出去（onSaved={handle.close}） */\nexport interface DetachedOverlayHandle<P> {\n  /** 关上（onOpenChange 的原因是 imperative）；已经关上时什么也不做 */\n  readonly close: () => void;\n  /** 改属性（标题、宽度、确认按钮的文字、正文……），没写的保持不变 */\n  readonly update: (patch: Partial<DetachedOverlayOptions<P>>) => void;\n  /** 关上之后 resolve，得到关上的原因：确认是 confirm，Esc、遮罩、关闭按钮、close() 各是 escape、outside、close、imperative */\n  readonly closed: Promise<keyof OpenChangeReasons>;\n}\n\n/** 原生 dialog 的 close 事件 */\ntype DialogCloseEvent = Event & { currentTarget: HTMLDialogElement };\n\n/** 浮层要支持的：onOpenChange 报告原因，onClose 落到原生 dialog 上 */\ninterface DetachedOverlayProps extends OpenChangeProps {\n  onClose?: (event: DialogCloseEvent) => void;\n}\n\n/**\n * 命令式浮层：在 setup 里调用，返回 open(options)。renderOverlay 把属性、开关与正文交给具体的浮层（Dialog、Drawer）：\n *\n *   useDetachedOverlay<DialogProps>((props, host, children) => <Dialog {...props} _open={host.open}>{children}</Dialog>);\n */\nexport function useDetachedOverlay<P extends DetachedOverlayProps>(\n  renderOverlay: (\n    props: Omit<P, '_open' | 'children'>,\n    host: DetachedDialogHost,\n    children: VNodeChild,\n  ) => VNodeChild,\n): (options: DetachedOverlayOptions<P>) => DetachedOverlayHandle<P> {\n  const mount = useDetachedDialog();\n  return (options) => {\n    const state = shallowRef(options);\n    let host: DetachedDialogHost | undefined;\n    let reason: keyof OpenChangeReasons = 'imperative';\n    let resolveClosed!: (reason: keyof OpenChangeReasons) => void;\n    const handle: DetachedOverlayHandle<P> = {\n      close: () => {\n        if (!host?.open) return;\n        reason = 'imperative';\n        host.open = false;\n        state.value.onOpenChange?.(false, { reason });\n      },\n      update: (patch) => {\n        state.value = { ...state.value, ...patch };\n      },\n      closed: new Promise((resolve) => (resolveClosed = resolve)),\n    };\n    mount((current) => {\n      host = current;\n      const { content, onOpenChange, onClose, ...props } = state.value;\n      const overlayProps = {\n        ...props,\n        onOpenChange: (open, details) => {\n          if (!open) reason = details.reason;\n          onOpenChange?.(open, details);\n        },\n        onClose: (event: DialogCloseEvent) => {\n          onClose?.(event);\n          // 原生 close 事件先到这里、后到浮层自己（它在那里报告原因）：等它报告完再 resolve\n          queueMicrotask(() => resolveClosed(reason));\n          current.closed();\n        },\n      } as Omit<P, '_open' | 'children'> & DetachedOverlayProps;\n      return renderOverlay(\n        overlayProps,\n        current,\n        typeof content === 'function' ? content(handle) : content,\n      );\n    });\n    options.onOpenChange?.(true, { reason: 'imperative' });\n    return handle;\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"detached.js","names":["_vtp_readonlyProp","_createVNode"],"sources":["../../src/overlay/detached.tsx"],"sourcesContent":["/**\n * 渲染到组件树之外：沿用调用处的配置（主题、语言、默认值，经 ConfigScope）与应用上下文（全局组件），\n * 生命周期跟着调用的组件——它卸载时一起收掉，不留孤儿。\n *\n *   const renderDetached = useDetachedRender();   // setup 里；第三方库管的元素（如别的图表库的提示框）\n *   renderDetached(<Tip />, element);             // 再调一次换内容，传 null 卸载；组件卸载时自动卸载\n *\n *   const mount = useDetachedDialog();            // setup 里；命令式的对话框（useConfirm、useFormDialog）\n *   mount((host) => <Dialog _open={host.open} onClose={host.closed}>…</Dialog>);\n *\n * 对话框渲染到 body 末尾，关上后等离场过渡播完再卸载；调用的组件卸载时（例如切换了路由）把开着的对话框关上，\n * 照常走关闭的流程，等着结果的 `await confirm()` 也拿到结果。\n * useDetachedOverlay 在 useDetachedDialog 上面加一层句柄（close、update、closed），useDialog、useDrawer 用它。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport {\n  getCurrentInstance,\n  getCurrentScope,\n  h,\n  onScopeDispose,\n  render,\n  shallowRef,\n  type AppContext,\n  type VNodeChild,\n} from 'vue';\nimport { ConfigContext, useConfig, type UiConfig } from '../config/context';\nimport { ConfigScope } from '../config/Provider';\nimport type { OpenChangeProps, OpenChangeReasons } from '../utils/dom/open-change';\nimport { afterTransitions } from '../utils/style/transitions';\n\n/** 交给对话框内容的控制：开着没有、关上了 */\nexport interface DetachedDialogHost {\n  /** 对话框开着：对话框写 _open={host.open}，改成 false 就关上 */\n  open: boolean;\n  /** 对话框关上了（原生 close 事件里调用）：等离场过渡播完卸载 */\n  closed: () => void;\n}\n\n/** 组件树之外的根数到第几个了：给每个根一个自己的 useId 命名段 */\nlet detachedRoots = 0;\n\n/**\n * 组件树之外的根：提供调用处的配置，内容包在 ConfigScope 里（主题变量、语言）。\n * render() 出来的根，useId 从头计数、前缀又和应用相同（共用 appContext），生成的 id 会和页面上已有的撞上\n * （表单对话框的 label 关联到页面里另一个控件）。照 Vue 处理异步边界的做法（markAsyncBoundary）换一个命名段：\n * 子组件沿用父组件的 ids，所以在根上换一次就够了。\n */\nconst DetachedRoot = _component(\n  ({ config, content }: { config: UiConfig; content: () => VNodeChild }) => {\n    const instance = getCurrentInstance() as { ids?: [string, number, number] } | null;\n    if (instance?.ids) instance.ids = [`d${++detachedRoots}-`, 0, 0];\n    ConfigContext.provide(config);\n    return () => <ConfigScope>{content()}</ConfigScope>;\n  },\n);\n\n/** 调用处的配置与应用上下文（在 setup 里取），交给组件树之外的根 */\nfunction captureContext() {\n  return { config: useConfig(), appContext: getCurrentInstance()?.appContext ?? null };\n}\n\nfunction renderInto(\n  container: Element,\n  { config, appContext }: { config: UiConfig; appContext: AppContext | null },\n  content: () => VNodeChild,\n) {\n  const vnode = h(DetachedRoot, { config, content });\n  vnode.appContext = appContext;\n  render(vnode, container);\n}\n\n/** 在 setup 里调用，返回 renderDetached(content, container)：渲染到组件树之外的元素里，调用的组件卸载时一起卸载 */\nexport function useDetachedRender(): (content: VNodeChild | null, container: Element) => void {\n  const context = captureContext();\n  const containers = new Set<Element>();\n  if (getCurrentScope()) {\n    onScopeDispose(() => {\n      for (const container of containers) render(null, container);\n      containers.clear();\n    });\n  }\n  return (content, container) => {\n    if (content == null) {\n      containers.delete(container);\n      render(null, container);\n      return;\n    }\n    containers.add(container);\n    renderInto(container, context, () => content);\n  };\n}\n\n/** 在 setup 里调用，返回 mount(content)：把对话框渲染到组件树之外 */\nexport function useDetachedDialog(): (content: (host: DetachedDialogHost) => VNodeChild) => void {\n  const context = captureContext();\n  /** 开着的对话框：调用的组件卸载时关上 */\n  const live = new Set<DetachedDialogHost>();\n  if (getCurrentScope()) {\n    onScopeDispose(() => {\n      for (const host of live) host.open = false;\n    });\n  }\n\n  return (content) => {\n    const container = document.createElement('div');\n    document.body.append(container);\n    const open = shallowRef(true);\n    const host: DetachedDialogHost = {\n      get open() {\n        return open.value;\n      },\n      set open(value) {\n        open.value = value;\n      },\n      closed() {\n        live.delete(host);\n        const dialog = container.querySelector('dialog');\n        void (dialog ? afterTransitions(dialog) : Promise.resolve()).then(() => {\n          render(null, container);\n          container.remove();\n        });\n      },\n    };\n    live.add(host);\n    renderInto(container, context, () => content(host));\n  };\n}\n\n/** 命令式浮层（useDialog、useDrawer）的选项：浮层的属性（_open 由句柄管理），content 是正文 */\nexport type DetachedOverlayOptions<P> = Omit<P, '_open' | 'children'> & {\n  /** 正文；给函数时拿到句柄，正文里的按钮可以自己关上、改标题 */\n  content?: VNodeChild | ((handle: DetachedOverlayHandle<P>) => VNodeChild);\n};\n\n/** useDialog().open、useDrawer().open 返回的句柄；方法不依赖 this，可以直接传出去（onSaved={handle.close}） */\nexport interface DetachedOverlayHandle<P> {\n  /** 关上（onOpenChange 的原因是 imperative）；已经关上时什么也不做 */\n  readonly close: () => void;\n  /** 改属性（标题、宽度、确认按钮的文字、正文……），没写的保持不变 */\n  readonly update: (patch: Partial<DetachedOverlayOptions<P>>) => void;\n  /** 关上之后 resolve，得到关上的原因：确认是 confirm，Esc、遮罩、关闭按钮、close() 各是 escape、outside、close、imperative */\n  readonly closed: Promise<keyof OpenChangeReasons>;\n}\n\n/** 原生 dialog 的 close 事件 */\ntype DialogCloseEvent = Event & { currentTarget: HTMLDialogElement };\n\n/** 浮层要支持的：onOpenChange 报告原因，onClose 落到原生 dialog 上 */\ninterface DetachedOverlayProps extends OpenChangeProps {\n  onClose?: (event: DialogCloseEvent) => void;\n}\n\n/**\n * 命令式浮层：在 setup 里调用，返回 open(options)。renderOverlay 把属性、开关与正文交给具体的浮层（Dialog、Drawer）：\n *\n *   useDetachedOverlay<DialogProps>((props, host, children) => <Dialog {...props} _open={host.open}>{children}</Dialog>);\n */\nexport function useDetachedOverlay<P extends DetachedOverlayProps>(\n  renderOverlay: (\n    props: Omit<P, '_open' | 'children'>,\n    host: DetachedDialogHost,\n    children: VNodeChild,\n  ) => VNodeChild,\n): (options: DetachedOverlayOptions<P>) => DetachedOverlayHandle<P> {\n  const mount = useDetachedDialog();\n  return (options) => {\n    const state = shallowRef(options);\n    let host: DetachedDialogHost | undefined;\n    let reason: keyof OpenChangeReasons = 'imperative';\n    let resolveClosed!: (reason: keyof OpenChangeReasons) => void;\n    const handle: DetachedOverlayHandle<P> = {\n      close: () => {\n        if (!host?.open) return;\n        reason = 'imperative';\n        host.open = false;\n        state.value.onOpenChange?.(false, { reason });\n      },\n      update: (patch) => {\n        state.value = { ...state.value, ...patch };\n      },\n      closed: new Promise((resolve) => (resolveClosed = resolve)),\n    };\n    mount((current) => {\n      host = current;\n      const { content, onOpenChange, onClose, ...props } = state.value;\n      const overlayProps = {\n        ...props,\n        onOpenChange: (open, details) => {\n          if (!open) reason = details.reason;\n          onOpenChange?.(open, details);\n        },\n        onClose: (event: DialogCloseEvent) => {\n          onClose?.(event);\n          // 原生 close 事件先到这里、后到浮层自己（它在那里报告原因）：等它报告完再 resolve\n          queueMicrotask(() => resolveClosed(reason));\n          current.closed();\n        },\n      } as Omit<P, '_open' | 'children'> & DetachedOverlayProps;\n      return renderOverlay(\n        overlayProps,\n        current,\n        typeof content === 'function' ? content(handle) : content,\n      );\n    });\n    options.onOpenChange?.(true, { reason: 'imperative' });\n    return handle;\n  };\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodep-dev/vue-tsx-pro-ui",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "vue-tsx-pro 组件库",
   "type": "module",
   "license": "MIT",
@@ -48,6 +48,11 @@
       "types": "./dist/charts/index.d.ts",
       "default": "./dist/charts/index.js"
     },
+    "./maps": {
+      "@vue-tsx-pro/source": "./src/maps/index.ts",
+      "types": "./dist/maps/index.d.ts",
+      "default": "./dist/maps/index.js"
+    },
     "./docs-kit": {
       "@vue-tsx-pro/source": "./src/docs-kit/index.ts",
       "types": "./dist/docs-kit/index.d.ts",
@@ -112,7 +117,7 @@
     "@floating-ui/dom": "1.8.0",
     "@internationalized/date": "3.12.4",
     "@radix-ui/colors": "3.0.0",
-    "@zerodep-dev/vue-tsx-pro-tsx": "^0.3.3",
+    "@zerodep-dev/vue-tsx-pro-tsx": "^0.4.0",
     "animejs": "4.5.0",
     "culori": "4.0.2",
     "decimal.js": "10.6.0",
@@ -124,7 +129,6 @@
     "pinia": "^4.0.0",
     "shiki": "^4.0.0",
     "three": ">=0.170.0",
-    "@unovis/ts": "^1.7.0",
     "vue": "^3.5.0",
     "vue-router": "^5.0.0",
     "zod": "^4.6.0",
@@ -149,9 +153,6 @@
     "three": {
       "optional": true
     },
-    "@unovis/ts": {
-      "optional": true
-    },
     "vue-router": {
       "optional": true
     },
@@ -201,7 +202,6 @@
         "@lezer/highlight",
         "@lucide/icons",
         "@radix-ui/colors",
-        "@unovis/ts",
         "animejs",
         "culori/fn",
         "exceljs",
@@ -231,7 +231,6 @@
     "three": "0.186.1",
     "@types/three": "0.186.0",
     "typescript": "7.1.0-beta",
-    "@unovis/ts": "1.7.1",
     "vite": "8.3.4",
     "vitest": "5.0.5",
     "vue": "3.5.44",

package/dist/charts/single.d.ts

@@ -1,41 +0,0 @@
-/**
- * 单容器图表（环形图、桑基图、弦图）共用的绘制过程：Unovis 的 SingleContainer 只建一次，数据与配置变化时 update，
- * 卸载时 destroy；绘图区换了元素（加载、空状态之后重新出现）时容器连同组件、提示框一起重建。
- * 提示框按选择器触发，内容用 Vue 渲染进同一个元素交给 Unovis 定位。在组件 setup 里调用。
- *
- *   const chart = useSingleChart(() => ({
- *     element: plot, ready: !loading && rows.length > 0, tooltip,
- *     build: (instance) => ({ component: …, data: rows, triggers: { [Donut.selectors.segment]: (d) => chart.tooltip(…) } }),
- *   }));
- */
-import { Tooltip, type ComponentCore } from '@unovis/ts';
-import { type VNode } from 'vue';
-/** 一次绘制要的东西 */
-export interface SingleChartBuild<D> {
-    /** 配置好的组件 */
-    component: ComponentCore<D>;
-    /** 交给组件的数据 */
-    data: D;
-    /** 提示框：选择器 → 悬停的数据 → 内容（Unovis 的 Tooltip triggers） */
-    triggers?: NonNullable<Tooltip['config']['triggers']>;
-    /** 每次画完之后（容器的 onRenderComplete）：组件要在画好之后调整的（地图的标签避让） */
-    onRender?: () => void;
-}
-/** useSingleChart 每次读取的状态 */
-export interface SingleChartState<D> {
-    /** 绘图区元素 */
-    element: HTMLElement | null;
-    /** 可以画了：不在加载中、有数据 */
-    ready: boolean;
-    /** 显示提示框 */
-    tooltip: boolean;
-    /** 配置组件：instance 取跨渲染保留的实例（第一次调用时创建） */
-    build: (instance: <C>(key: string, create: () => C) => C) => SingleChartBuild<D>;
-}
-/** useSingleChart 的返回值 */
-export interface SingleChart {
-    /** 提示框的内容渲染进同一个元素，交给 Unovis 定位 */
-    tooltip(content: VNode): HTMLElement;
-}
-/** 单容器图表的绘制 */
-export declare function useSingleChart<D>(read: () => SingleChartState<D>): SingleChart;

package/dist/charts/single.js

@@ -1,66 +0,0 @@
-import { useDetachedRender } from "../overlay/detached.js";
-import { chartDuration, createChartInstances, uniqueHighlightFilter, usePlotSeen } from "./frame.js";
-import { useId } from "vue";
-import { effect } from "@zerodep-dev/vue-tsx-pro-tsx";
-import { SingleContainer, Tooltip } from "@unovis/ts";
-//#region src/charts/single.tsx
-/**
-* 单容器图表（环形图、桑基图、弦图）共用的绘制过程：Unovis 的 SingleContainer 只建一次，数据与配置变化时 update，
-* 卸载时 destroy；绘图区换了元素（加载、空状态之后重新出现）时容器连同组件、提示框一起重建。
-* 提示框按选择器触发，内容用 Vue 渲染进同一个元素交给 Unovis 定位。在组件 setup 里调用。
-*
-*   const chart = useSingleChart(() => ({
-*     element: plot, ready: !loading && rows.length > 0, tooltip,
-*     build: (instance) => ({ component: …, data: rows, triggers: { [Donut.selectors.segment]: (d) => chart.tooltip(…) } }),
-*   }));
-*/
-/** 一次绘制要的东西 */
-/** useSingleChart 每次读取的状态 */
-/** useSingleChart 的返回值 */
-/** 单容器图表的绘制 */
-function useSingleChart(read) {
-	const id = useId();
-	const instances = createChartInstances();
-	let tooltipElement;
-	const renderDetached = useDetachedRender();
-	let container;
-	let containerElement;
-	const seen = usePlotSeen(() => read().element);
-	effect(() => () => {
-		container?.destroy();
-	});
-	effect(() => {
-		const { element, ready, tooltip, build } = read();
-		if (!element || !ready || !seen()) return;
-		if (container && containerElement !== element) {
-			container.destroy();
-			container = void 0;
-			instances.reset();
-		}
-		const { component, data, triggers, onRender } = build(instances.get);
-		const tooltipBox = instances.get("tooltip", () => new Tooltip());
-		tooltipBox.setConfig({ triggers: triggers ?? {} });
-		const config = {
-			component,
-			tooltip: tooltip ? tooltipBox : void 0,
-			ariaLabel: null,
-			duration: chartDuration(element),
-			onRenderComplete: onRender
-		};
-		if (container) container.update(config, void 0, data);
-		else {
-			container = new SingleContainer(element, config, data);
-			containerElement = element;
-			uniqueHighlightFilter(element, `${id}-highlight`);
-		}
-	});
-	return { tooltip(content) {
-		tooltipElement ??= document.createElement("div");
-		renderDetached(content, tooltipElement);
-		return tooltipElement;
-	} };
-}
-//#endregion
-export { useSingleChart };
-
-//# sourceMappingURL=single.js.map

package/dist/charts/single.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"single.js","names":[],"sources":["../../src/charts/single.tsx"],"sourcesContent":["/**\n * 单容器图表（环形图、桑基图、弦图）共用的绘制过程：Unovis 的 SingleContainer 只建一次，数据与配置变化时 update，\n * 卸载时 destroy；绘图区换了元素（加载、空状态之后重新出现）时容器连同组件、提示框一起重建。\n * 提示框按选择器触发，内容用 Vue 渲染进同一个元素交给 Unovis 定位。在组件 setup 里调用。\n *\n *   const chart = useSingleChart(() => ({\n *     element: plot, ready: !loading && rows.length > 0, tooltip,\n *     build: (instance) => ({ component: …, data: rows, triggers: { [Donut.selectors.segment]: (d) => chart.tooltip(…) } }),\n *   }));\n */\nimport { SingleContainer, Tooltip, type ComponentCore } from '@unovis/ts';\nimport { useId, type VNode } from 'vue';\nimport { useDetachedRender } from '../overlay/detached';\nimport { chartDuration, createChartInstances, uniqueHighlightFilter, usePlotSeen } from './frame';\n\n/** 一次绘制要的东西 */\nexport interface SingleChartBuild<D> {\n  /** 配置好的组件 */\n  component: ComponentCore<D>;\n  /** 交给组件的数据 */\n  data: D;\n  /** 提示框：选择器 → 悬停的数据 → 内容（Unovis 的 Tooltip triggers） */\n  triggers?: NonNullable<Tooltip['config']['triggers']>;\n  /** 每次画完之后（容器的 onRenderComplete）：组件要在画好之后调整的（地图的标签避让） */\n  onRender?: () => void;\n}\n\n/** useSingleChart 每次读取的状态 */\nexport interface SingleChartState<D> {\n  /** 绘图区元素 */\n  element: HTMLElement | null;\n  /** 可以画了：不在加载中、有数据 */\n  ready: boolean;\n  /** 显示提示框 */\n  tooltip: boolean;\n  /** 配置组件：instance 取跨渲染保留的实例（第一次调用时创建） */\n  build: (instance: <C>(key: string, create: () => C) => C) => SingleChartBuild<D>;\n}\n\n/** useSingleChart 的返回值 */\nexport interface SingleChart {\n  /** 提示框的内容渲染进同一个元素，交给 Unovis 定位 */\n  tooltip(content: VNode): HTMLElement;\n}\n\n/** 单容器图表的绘制 */\nexport function useSingleChart<D>(read: () => SingleChartState<D>): SingleChart {\n  const id = useId();\n  const instances = createChartInstances();\n  let tooltipElement: HTMLElement | undefined;\n  // 提示框的内容渲染进 Unovis 管的元素：带上调用处的主题与语言，组件卸载时一起卸载\n  const renderDetached = useDetachedRender();\n  let container: SingleContainer<D> | undefined;\n  let containerElement: HTMLElement | undefined;\n  const seen = usePlotSeen(() => read().element);\n\n  _effect(() => () => {\n    container?.destroy();\n  });\n  _effect(() => {\n    const { element, ready, tooltip, build } = read();\n    if (!element || !ready || !seen()) return;\n    // 绘图区换了元素：旧容器连同组件、提示框一起销毁，实例表清空后重新创建\n    if (container && containerElement !== element) {\n      container.destroy();\n      container = undefined;\n      instances.reset();\n    }\n    const { component, data, triggers, onRender } = build(instances.get);\n    const tooltipBox = instances.get('tooltip', () => new Tooltip());\n    tooltipBox.setConfig({ triggers: triggers ?? {} });\n    const config = {\n      component,\n      tooltip: tooltip ? tooltipBox : undefined,\n      ariaLabel: null,\n      duration: chartDuration(element),\n      onRenderComplete: onRender,\n    };\n    if (container) container.update(config, undefined, data);\n    else {\n      container = new SingleContainer<D>(element, config, data);\n      containerElement = element;\n      uniqueHighlightFilter(element, `${id}-highlight`);\n    }\n  });\n\n  return {\n    tooltip(content) {\n      tooltipElement ??= document.createElement('div');\n      renderDetached(content, tooltipElement);\n      return tooltipElement;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,eAAkB,MAA8C;CAC9E,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,qBAAqB;CACvC,IAAI;CAEJ,MAAM,iBAAiB,kBAAkB;CACzC,IAAI;CACJ,IAAI;CACJ,MAAM,OAAO,kBAAkB,KAAK,CAAC,CAAC,OAAO;CAE7C,mBAAoB;EAClB,WAAW,QAAQ;CACrB,CAAC;CACD,aAAc;EACZ,MAAM,EAAE,SAAS,OAAO,SAAS,UAAU,KAAK;EAChD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,GAAG;EAEnC,IAAI,aAAa,qBAAqB,SAAS;GAC7C,UAAU,QAAQ;GAClB,YAAY,KAAA;GACZ,UAAU,MAAM;EAClB;EACA,MAAM,EAAE,WAAW,MAAM,UAAU,aAAa,MAAM,UAAU,GAAG;EACnE,MAAM,aAAa,UAAU,IAAI,iBAAiB,IAAI,QAAQ,CAAC;EAC/D,WAAW,UAAU,EAAE,UAAU,YAAY,CAAC,EAAE,CAAC;EACjD,MAAM,SAAS;GACb;GACA,SAAS,UAAU,aAAa,KAAA;GAChC,WAAW;GACX,UAAU,cAAc,OAAO;GAC/B,kBAAkB;EACpB;EACA,IAAI,WAAW,UAAU,OAAO,QAAQ,KAAA,GAAW,IAAI;OAClD;GACH,YAAY,IAAI,gBAAmB,SAAS,QAAQ,IAAI;GACxD,mBAAmB;GACnB,sBAAsB,SAAS,GAAG,GAAE,WAAY;EAClD;CACF,CAAC;CAED,OAAO,EACL,QAAQ,SAAS;EACf,mBAAmB,SAAS,cAAc,KAAK;EAC/C,eAAe,SAAS,cAAc;EACtC,OAAO;CACT,EACF;AACF"}