@zerodep-dev/vue-tsx-pro-ui 0.1.0 → 0.3.0

package/dist/charts/single.js

@@ -1,5 +1,6 @@
+import { useDetachedRender } from "../overlay/detached.js";
 import { chartDuration, createChartInstances, uniqueHighlightFilter, usePlotSeen } from "./frame.js";
-import { render, useId } from "vue";
+import { useId } from "vue";
 import { effect } from "@zerodep-dev/vue-tsx-pro-tsx";
 import { SingleContainer, Tooltip } from "@unovis/ts";
 //#region src/charts/single.tsx
@@ -21,12 +22,12 @@ 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();
-		if (tooltipElement) render(null, tooltipElement);
 	});
 	effect(() => {
 		const { element, ready, tooltip, build } = read();
@@ -55,7 +56,7 @@ function useSingleChart(read) {
 	});
 	return { tooltip(content) {
 		tooltipElement ??= document.createElement("div");
-		render(content, tooltipElement);
+		renderDetached(content, tooltipElement);
 		return tooltipElement;
 	} };
 }

package/dist/charts/single.js.map

@@ -1 +1 @@
-{"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 { render, useId, type VNode } from 'vue';\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  let container: SingleContainer<D> | undefined;\n  let containerElement: HTMLElement | undefined;\n  const seen = usePlotSeen(() => read().element);\n\n  _effect(() => () => {\n    container?.destroy();\n    if (tooltipElement) render(null, tooltipElement);\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      render(content, tooltipElement);\n      return tooltipElement;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,eAAkB,MAA8C;CAC9E,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,qBAAqB;CACvC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM,OAAO,kBAAkB,KAAK,CAAC,CAAC,OAAO;CAE7C,mBAAoB;EAClB,WAAW,QAAQ;EACnB,IAAI,gBAAgB,OAAO,MAAM,cAAc;CACjD,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,OAAO,SAAS,cAAc;EAC9B,OAAO;CACT,EACF;AACF"}
+{"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"}

package/dist/code-editor/CodeEditor.d.ts

@@ -0,0 +1,18 @@
+import type { Extension } from '@codemirror/state';
+import { type PartProps } from '../utils/props';
+import { type CodeEditorHandle } from './editor';
+/** CodeEditor 的属性 */
+export interface CodeEditorProps extends PartProps<'div'> {
+    /** 代码：父级写 _value={x} 双向绑定 */
+    _value?: string;
+    /** 编辑区的无障碍名称 */
+    'aria-label': string;
+    /** 语言扩展（CodeMirror 的 json()、java()……）；不给时是 TSX。只在挂载时读 */
+    language?: Extension;
+    /** 只读：能选中、复制、搜索，不能改 */
+    readonly?: boolean;
+    /** 编辑器建好了：拿到 CodeMirror 的视图，做撤销、读选区这类更细的操作 */
+    onReady?: (editor: CodeEditorHandle) => void;
+}
+/** 代码编辑器：语法高亮、括号匹配、缩进、搜索，颜色跟随主题 */
+export declare const CodeEditor: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CodeEditorProps>;

package/dist/code-editor/CodeEditor.js

@@ -0,0 +1,57 @@
+import { useConfig } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { inputRecipe } from "../input/control.js";
+import { createEditor } from "./editor.js";
+import { createVNode, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/code-editor/CodeEditor.tsx
+var styles = css.create({ root: {
+	display: "block",
+	height: "20rem",
+	paddingInline: 0,
+	overflow: "hidden"
+} });
+/** CodeEditor 的属性 */
+/** 代码编辑器：语法高亮、括号匹配、缩进、搜索，颜色跟随主题 */
+var CodeEditor = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => "", _ctx.emit);
+	const label = readonlyProp(_props, "ariaLabel");
+	const language = readonlyProp(_props, "language");
+	const readonly = readonlyProp(_props, "readonly");
+	const onReady = readonlyProp(_props, "onReady");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	let host = shallowRef(null);
+	let editor;
+	const isDark = () => config.theme.colorScheme === "dark";
+	onMounted(() => {
+		editor = createEditor(host.value, {
+			code: value.value,
+			dark: isDark(),
+			label: label.value,
+			language: language.value,
+			readonly: readonly.value,
+			onChange: (code) => value.value = code
+		});
+		onReady.value?.(editor);
+	});
+	onBeforeUnmount(() => editor?.destroy());
+	watch(() => value.value, (code) => editor?.setCode(code));
+	watch(isDark, (dark) => editor?.setDark(dark));
+	return () => createVNode("div", mergeAttrs({ sx: [inputRecipe().root, styles.root] }, rest, { ref: host }), null);
+}, {
+	name: "CodeEditor",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"ariaLabel",
+		"language",
+		"readonly",
+		"onReady"
+	]
+});
+//#endregion
+export { CodeEditor };
+
+//# sourceMappingURL=CodeEditor.js.map

package/dist/code-editor/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode"],"sources":["../../src/code-editor/CodeEditor.tsx"],"sourcesContent":["/**\n * 代码编辑器组件：外壳与输入框相同（边框、悬停、焦点环），里面是 CodeMirror（editor.ts）。\n * CodeMirror 只在这个子路径里：页面用到编辑器时才随子路径加载，组件库主入口不带它。\n *\n *   <CodeEditor _value={code} aria-label=\"代码\" sx={styles.editor} />\n *   <CodeEditor _value={manifest} language={json()} aria-label=\"字段清单\" onReady={(editor) => …} />\n *\n * 高度由使用方给（sx），默认 20rem；未声明的属性落到外壳上。颜色、字体取主题 token，跟着主题变。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { Extension } from '@codemirror/state';\nimport { useConfig } from '../config/context';\nimport { inputRecipe } from '../input/control';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { onBeforeUnmount, onMounted, watch } from 'vue';\nimport { createEditor, type CodeEditorHandle } from './editor';\n\nconst styles = css.create({\n  // 输入框外壳是一行的 inline-flex：改成整块，内边距交给 CodeMirror\n  root: {\n    display: 'block',\n    height: '20rem',\n    paddingInline: 0,\n    overflow: 'hidden',\n  },\n});\n\n/** CodeEditor 的属性 */\nexport interface CodeEditorProps extends PartProps<'div'> {\n  /** 代码：父级写 _value={x} 双向绑定 */\n  _value?: string;\n  /** 编辑区的无障碍名称 */\n  'aria-label': string;\n  /** 语言扩展（CodeMirror 的 json()、java()……）；不给时是 TSX。只在挂载时读 */\n  language?: Extension;\n  /** 只读：能选中、复制、搜索，不能改 */\n  readonly?: boolean;\n  /** 编辑器建好了：拿到 CodeMirror 的视图，做撤销、读选区这类更细的操作 */\n  onReady?: (editor: CodeEditorHandle) => void;\n}\n\n/** 代码编辑器：语法高亮、括号匹配、缩进、搜索，颜色跟随主题 */\nexport const CodeEditor = _component(\n  ({\n    _value: value = _bindable(''),\n    'aria-label': label,\n    language,\n    readonly,\n    onReady,\n    ...rest\n  }: CodeEditorProps) => {\n    const config = useConfig();\n    let host = _state.raw<HTMLElement | null>(null);\n    let editor: CodeEditorHandle | undefined;\n    const isDark = () => config.theme.colorScheme === 'dark';\n\n    onMounted(() => {\n      editor = createEditor(host!, {\n        code: value,\n        dark: isDark(),\n        label,\n        language,\n        readonly,\n        onChange: (code) => (value = code),\n      });\n      onReady?.(editor);\n    });\n    onBeforeUnmount(() => editor?.destroy());\n    watch(\n      () => value,\n      (code) => editor?.setCode(code),\n    );\n    watch(isDark, (dark) => editor?.setDark(dark));\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: [inputRecipe().root, styles.root] }, rest, {\n          ref: _toRef(host),\n        })}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;AAkBA,IAAM,SAAS,IAAI,OAAO,EAExB,MAAM;CACJ,SAAS;CACT,QAAQ;CACR,eAAe;CACf,UAAU;AACZ,EACF,CAAC;;;AAiBD,IAAa,aAAa,0BACxB,QAAA,SAOuB;CAAA,MAAA,QAAAA,SAAA,QAAA,gBANK,IAAE,KAAA,IAAA;CAAA,MAAA,QAAAC,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAKzB,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,SAAS,UAAU;CACzB,IAAI,OAAIC,WAAkC,IAAI;CAC9C,IAAI;CACJ,MAAM,eAAe,OAAO,MAAM,gBAAgB;CAElD,gBAAgB;EACd,SAAS,aAAY,KAAA,OAAQ;GAC3B,MAAI,MAAA;GACJ,MAAM,OAAO;GACb,OAAK,MAAA;GACL,UAAQ,SAAA;GACR,UAAQ,SAAA;GACR,WAAW,SAAU,MAAA,QAAQ;EAC/B,CAAC;EACD,QAAA,QAAU,MAAM;CAClB,CAAC;CACD,sBAAsB,QAAQ,QAAQ,CAAC;CACvC,YACE,MAAA,QACC,SAAS,QAAQ,QAAQ,IAAI,CAChC;CACA,MAAM,SAAS,SAAS,QAAQ,QAAQ,IAAI,CAAC;CAE7C,aAAOC,YAAA,OAEC,WAAkB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,OAAO,IAAI,EAAE,GAAG,MAAM,EACrE,KAAG,KACL,CAAC,GAAC,IAAA;AAGR,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/code-editor/editor.d.ts

@@ -0,0 +1,52 @@
+import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+/** 一处修改：把 [from, to) 换成 insert */
+export interface CodeChange {
+    /** 开始位置（字符偏移，含） */
+    readonly from: number;
+    /** 结束位置（不含）；等于 from 时是插入 */
+    readonly to: number;
+    /** 换上的文字；空串是删除 */
+    readonly insert: string;
+}
+/** 编辑器实例的操作 */
+export interface CodeEditorHandle {
+    /** CodeMirror 的视图：读状态（view.state）、派发修改、做撤销等更细的操作 */
+    readonly view: EditorView;
+    /** 换掉全部代码（与当前内容相同时什么都不做） */
+    setCode(code: string): void;
+    /**
+     * 改几段代码（位置都按改之前的），当作用户的修改：进撤销历史、回传 onChange。
+     * 默认单独成一步撤销（可视化编辑器的一次操作）；merge 为 true 时像打字一样，与紧挨着的上一次修改合成一步（属性面板里逐字输入）
+     */
+    edit(changes: readonly CodeChange[], options?: {
+        merge?: boolean;
+    }): void;
+    /** 撤销一步；没有可撤销的时返回 false */
+    undo(): boolean;
+    /** 重做一步；没有可重做的时返回 false */
+    redo(): boolean;
+    /** 光标移到第几行第几列（都从 1 起，超出时取最近的）、滚进视野并聚焦：编译错误列表点一条跳过去 */
+    goTo(line: number, column?: number): void;
+    /** 跟随站点主题的明暗 */
+    setDark(dark: boolean): void;
+    /** 拆掉编辑器（组件卸载时） */
+    destroy(): void;
+}
+/** createEditor 的选项 */
+export interface CodeEditorOptions {
+    /** 初始代码 */
+    code: string;
+    /** 当前是不是暗色主题 */
+    dark: boolean;
+    /** 编辑区的无障碍名称 */
+    label: string;
+    /** 语言扩展；不给时是 TSX */
+    language?: Extension;
+    /** 只读：能选中、复制、搜索，不能改 */
+    readonly?: boolean;
+    /** 用户改了代码 */
+    onChange: (code: string) => void;
+}
+/** 在 parent 里创建编辑器 */
+export declare function createEditor(parent: HTMLElement, { code, dark, label, language, readonly, onChange }: CodeEditorOptions): CodeEditorHandle;

package/dist/code-editor/editor.js

@@ -0,0 +1,225 @@
+import { colors, fontSizes, fonts, radii } from "../config/theme/tokens.js";
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap, indentWithTab, isolateHistory, redo, temporarilySetTabFocusMode, undo } from "@codemirror/commands";
+import { javascript } from "@codemirror/lang-javascript";
+import { HighlightStyle, bracketMatching, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting } from "@codemirror/language";
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { Annotation, Compartment, EditorState, Transaction } from "@codemirror/state";
+import { EditorView, drawSelection, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+//#region src/code-editor/editor.ts
+/**
+* 代码编辑器的内核：CodeMirror 6。CodeEditor.tsx 挂载时建一个；不用 Vue 时也可以直接调 createEditor。
+* 语言由使用方传（CodeMirror 的语言扩展，如 json()、java()），默认 TSX。
+*
+* 颜色、字体全部取主题 token（colors.code* 与 Shiki 代码块同一套），切换主题、主题编辑器调色都跟着变；
+* 明暗只影响 CodeMirror 自带的少量默认样式，用 Compartment 切换。
+* Tab 用来缩进；按 Esc 后再按 Tab 才把焦点移出编辑器（CodeMirror 的 tab-focus 模式），键盘用户不会被困住。
+*/
+var c = (token) => String(token);
+/** 标记 setCode 发起的修改：不当作用户编辑回传 */
+var external = Annotation.define();
+var highlightStyle = HighlightStyle.define([
+	{
+		tag: [
+			tags.keyword,
+			tags.modifier,
+			tags.operatorKeyword,
+			tags.self
+		],
+		color: c(colors.codeKeyword)
+	},
+	{
+		tag: [
+			tags.string,
+			tags.special(tags.string),
+			tags.regexp
+		],
+		color: c(colors.codeString)
+	},
+	{
+		tag: [
+			tags.number,
+			tags.bool,
+			tags.null,
+			tags.atom
+		],
+		color: c(colors.codeNumber)
+	},
+	{
+		tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
+		color: c(colors.codeFunction)
+	},
+	{
+		tag: [
+			tags.typeName,
+			tags.className,
+			tags.namespace
+		],
+		color: c(colors.codeType)
+	},
+	{
+		tag: tags.comment,
+		color: c(colors.codeComment),
+		fontStyle: "italic"
+	},
+	{
+		tag: [tags.punctuation, tags.angleBracket],
+		color: c(colors.codeComment)
+	},
+	{
+		tag: tags.tagName,
+		color: c(colors.codeTag)
+	},
+	{
+		tag: tags.attributeName,
+		color: c(colors.codeAttribute)
+	},
+	{
+		tag: tags.invalid,
+		color: c(colors.dangerText)
+	}
+]);
+var theme = EditorView.theme({
+	"&": {
+		height: "100%",
+		color: c(colors.text),
+		backgroundColor: c(colors.surface),
+		fontSize: c(fontSizes.sm)
+	},
+	"&.cm-focused": { outline: "none" },
+	".cm-scroller": {
+		fontFamily: c(fonts.mono),
+		lineHeight: "1.6",
+		scrollbarWidth: "thin",
+		scrollbarColor: `color-mix(in srgb, ${c(colors.textMuted)} 50%, transparent) transparent`
+	},
+	".cm-content": {
+		caretColor: c(colors.text),
+		paddingBlock: "12px"
+	},
+	".cm-cursor, .cm-dropCursor": { borderLeftColor: c(colors.text) },
+	"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": { backgroundColor: c(colors.selection) },
+	".cm-activeLine": { backgroundColor: c(colors.surfaceMuted) },
+	".cm-gutters": {
+		color: c(colors.codeComment),
+		backgroundColor: c(colors.surface),
+		border: "none"
+	},
+	".cm-activeLineGutter": {
+		color: c(colors.text),
+		backgroundColor: c(colors.surfaceMuted)
+	},
+	"&.cm-focused .cm-matchingBracket": {
+		backgroundColor: c(colors.accentSoft),
+		outline: `1px solid ${c(colors.accentBorder)}`
+	},
+	".cm-selectionMatch, .cm-searchMatch": { backgroundColor: c(colors.highlight) },
+	".cm-tooltip": {
+		color: c(colors.text),
+		backgroundColor: c(colors.surfaceRaised),
+		border: `1px solid ${c(colors.border)}`,
+		borderRadius: c(radii.md),
+		overflow: "hidden"
+	},
+	".cm-tooltip-autocomplete > ul": { fontFamily: c(fonts.mono) },
+	".cm-tooltip-autocomplete > ul > li[aria-selected]": {
+		color: c(colors.text),
+		backgroundColor: c(colors.accentSoft)
+	},
+	".cm-panels": {
+		color: c(colors.text),
+		backgroundColor: c(colors.surfaceMuted)
+	},
+	".cm-panels-bottom": { borderTop: `1px solid ${c(colors.border)}` }
+});
+/** 在 parent 里创建编辑器 */
+function createEditor(parent, { code, dark, label, language, readonly, onChange }) {
+	const darkMode = new Compartment();
+	const view = new EditorView({
+		parent,
+		state: EditorState.create({
+			doc: code,
+			extensions: [
+				lineNumbers(),
+				highlightActiveLineGutter(),
+				foldGutter(),
+				history(),
+				drawSelection(),
+				indentOnInput(),
+				bracketMatching(),
+				closeBrackets(),
+				autocompletion(),
+				highlightActiveLine(),
+				highlightSelectionMatches(),
+				language ?? javascript({
+					jsx: true,
+					typescript: true
+				}),
+				EditorState.readOnly.of(readonly === true),
+				syntaxHighlighting(highlightStyle),
+				EditorState.tabSize.of(2),
+				theme,
+				darkMode.of(EditorView.darkTheme.of(dark)),
+				EditorView.contentAttributes.of({ "aria-label": label }),
+				keymap.of([
+					...closeBracketsKeymap,
+					...completionKeymap,
+					...searchKeymap,
+					...foldKeymap,
+					...historyKeymap,
+					...defaultKeymap,
+					{
+						key: "Escape",
+						run: temporarilySetTabFocusMode
+					},
+					indentWithTab
+				]),
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged && update.transactions.some((tr) => !tr.annotation(external))) onChange(update.state.doc.toString());
+				})
+			]
+		})
+	});
+	return {
+		view,
+		setCode(next) {
+			if (next === view.state.doc.toString()) return;
+			view.dispatch({
+				changes: {
+					from: 0,
+					to: view.state.doc.length,
+					insert: next
+				},
+				annotations: external.of(true)
+			});
+		},
+		edit(changes, { merge = false } = {}) {
+			if (changes.length === 0) return;
+			view.dispatch({
+				changes: [...changes],
+				annotations: merge ? Transaction.userEvent.of("input.type") : isolateHistory.of("full")
+			});
+		},
+		undo: () => undo(view),
+		redo: () => redo(view),
+		goTo(line, column = 1) {
+			const doc = view.state.doc;
+			const target = doc.line(Math.min(Math.max(line, 1), doc.lines));
+			const pos = target.from + Math.min(Math.max(column - 1, 0), target.length);
+			view.dispatch({
+				selection: { anchor: pos },
+				effects: EditorView.scrollIntoView(pos, { y: "center" })
+			});
+			view.focus();
+		},
+		setDark(next) {
+			view.dispatch({ effects: darkMode.reconfigure(EditorView.darkTheme.of(next)) });
+		},
+		destroy: () => view.destroy()
+	};
+}
+//#endregion
+export { createEditor };
+
+//# sourceMappingURL=editor.js.map

package/dist/code-editor/editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.js","names":[],"sources":["../../src/code-editor/editor.ts"],"sourcesContent":["/**\n * 代码编辑器的内核：CodeMirror 6。CodeEditor.tsx 挂载时建一个；不用 Vue 时也可以直接调 createEditor。\n * 语言由使用方传（CodeMirror 的语言扩展，如 json()、java()），默认 TSX。\n *\n * 颜色、字体全部取主题 token（colors.code* 与 Shiki 代码块同一套），切换主题、主题编辑器调色都跟着变；\n * 明暗只影响 CodeMirror 自带的少量默认样式，用 Compartment 切换。\n * Tab 用来缩进；按 Esc 后再按 Tab 才把焦点移出编辑器（CodeMirror 的 tab-focus 模式），键盘用户不会被困住。\n */\nimport {\n  autocompletion,\n  closeBrackets,\n  closeBracketsKeymap,\n  completionKeymap,\n} from '@codemirror/autocomplete';\nimport {\n  defaultKeymap,\n  history,\n  historyKeymap,\n  indentWithTab,\n  isolateHistory,\n  redo,\n  temporarilySetTabFocusMode,\n  undo,\n} from '@codemirror/commands';\nimport { javascript } from '@codemirror/lang-javascript';\nimport {\n  bracketMatching,\n  foldGutter,\n  foldKeymap,\n  HighlightStyle,\n  indentOnInput,\n  syntaxHighlighting,\n} from '@codemirror/language';\nimport { highlightSelectionMatches, searchKeymap } from '@codemirror/search';\nimport {\n  Annotation,\n  Compartment,\n  EditorState,\n  Transaction,\n  type Extension,\n} from '@codemirror/state';\nimport {\n  drawSelection,\n  EditorView,\n  highlightActiveLine,\n  highlightActiveLineGutter,\n  keymap,\n  lineNumbers,\n} from '@codemirror/view';\nimport { tags } from '@lezer/highlight';\nimport { colors, fonts, fontSizes, radii } from '../config/theme/tokens';\n\n// token 在运行时是 var(--哈希) 字符串\nconst c = (token: unknown) => String(token);\n\n/** 标记 setCode 发起的修改：不当作用户编辑回传 */\nconst external = Annotation.define<boolean>();\n\nconst highlightStyle = HighlightStyle.define([\n  {\n    tag: [tags.keyword, tags.modifier, tags.operatorKeyword, tags.self],\n    color: c(colors.codeKeyword),\n  },\n  { tag: [tags.string, tags.special(tags.string), tags.regexp], color: c(colors.codeString) },\n  { tag: [tags.number, tags.bool, tags.null, tags.atom], color: c(colors.codeNumber) },\n  {\n    tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],\n    color: c(colors.codeFunction),\n  },\n  { tag: [tags.typeName, tags.className, tags.namespace], color: c(colors.codeType) },\n  { tag: tags.comment, color: c(colors.codeComment), fontStyle: 'italic' },\n  { tag: [tags.punctuation, tags.angleBracket], color: c(colors.codeComment) },\n  { tag: tags.tagName, color: c(colors.codeTag) },\n  { tag: tags.attributeName, color: c(colors.codeAttribute) },\n  { tag: tags.invalid, color: c(colors.dangerText) },\n]);\n\nconst theme = EditorView.theme({\n  '&': {\n    height: '100%',\n    color: c(colors.text),\n    backgroundColor: c(colors.surface),\n    fontSize: c(fontSizes.sm),\n  },\n  // 外框（CodeEditor）画焦点环\n  '&.cm-focused': { outline: 'none' },\n  '.cm-scroller': {\n    fontFamily: c(fonts.mono),\n    lineHeight: '1.6',\n    // CodeMirror 自己管滚动，套不了 ScrollArea：原生滚动条改细，滑块取浮层滚动条（scrollAreaBarStyles.thumb）的颜色，外观一致\n    scrollbarWidth: 'thin',\n    scrollbarColor: `color-mix(in srgb, ${c(colors.textMuted)} 50%, transparent) transparent`,\n  },\n  '.cm-content': { caretColor: c(colors.text), paddingBlock: '12px' },\n  '.cm-cursor, .cm-dropCursor': { borderLeftColor: c(colors.text) },\n  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':\n    { backgroundColor: c(colors.selection) },\n  '.cm-activeLine': { backgroundColor: c(colors.surfaceMuted) },\n  // 行号与 CodeBlock 的同色：textPlaceholder 在编辑器底色上不到 4.5:1\n  '.cm-gutters': {\n    color: c(colors.codeComment),\n    backgroundColor: c(colors.surface),\n    border: 'none',\n  },\n  '.cm-activeLineGutter': { color: c(colors.text), backgroundColor: c(colors.surfaceMuted) },\n  '&.cm-focused .cm-matchingBracket': {\n    backgroundColor: c(colors.accentSoft),\n    outline: `1px solid ${c(colors.accentBorder)}`,\n  },\n  '.cm-selectionMatch, .cm-searchMatch': { backgroundColor: c(colors.highlight) },\n  '.cm-tooltip': {\n    color: c(colors.text),\n    backgroundColor: c(colors.surfaceRaised),\n    border: `1px solid ${c(colors.border)}`,\n    borderRadius: c(radii.md),\n    overflow: 'hidden',\n  },\n  '.cm-tooltip-autocomplete > ul': { fontFamily: c(fonts.mono) },\n  '.cm-tooltip-autocomplete > ul > li[aria-selected]': {\n    color: c(colors.text),\n    backgroundColor: c(colors.accentSoft),\n  },\n  '.cm-panels': { color: c(colors.text), backgroundColor: c(colors.surfaceMuted) },\n  '.cm-panels-bottom': { borderTop: `1px solid ${c(colors.border)}` },\n});\n\n/** 一处修改：把 [from, to) 换成 insert */\nexport interface CodeChange {\n  /** 开始位置（字符偏移，含） */\n  readonly from: number;\n  /** 结束位置（不含）；等于 from 时是插入 */\n  readonly to: number;\n  /** 换上的文字；空串是删除 */\n  readonly insert: string;\n}\n\n/** 编辑器实例的操作 */\nexport interface CodeEditorHandle {\n  /** CodeMirror 的视图：读状态（view.state）、派发修改、做撤销等更细的操作 */\n  readonly view: EditorView;\n  /** 换掉全部代码（与当前内容相同时什么都不做） */\n  setCode(code: string): void;\n  /**\n   * 改几段代码（位置都按改之前的），当作用户的修改：进撤销历史、回传 onChange。\n   * 默认单独成一步撤销（可视化编辑器的一次操作）；merge 为 true 时像打字一样，与紧挨着的上一次修改合成一步（属性面板里逐字输入）\n   */\n  edit(changes: readonly CodeChange[], options?: { merge?: boolean }): void;\n  /** 撤销一步；没有可撤销的时返回 false */\n  undo(): boolean;\n  /** 重做一步；没有可重做的时返回 false */\n  redo(): boolean;\n  /** 光标移到第几行第几列（都从 1 起，超出时取最近的）、滚进视野并聚焦：编译错误列表点一条跳过去 */\n  goTo(line: number, column?: number): void;\n  /** 跟随站点主题的明暗 */\n  setDark(dark: boolean): void;\n  /** 拆掉编辑器（组件卸载时） */\n  destroy(): void;\n}\n\n/** createEditor 的选项 */\nexport interface CodeEditorOptions {\n  /** 初始代码 */\n  code: string;\n  /** 当前是不是暗色主题 */\n  dark: boolean;\n  /** 编辑区的无障碍名称 */\n  label: string;\n  /** 语言扩展；不给时是 TSX */\n  language?: Extension;\n  /** 只读：能选中、复制、搜索，不能改 */\n  readonly?: boolean;\n  /** 用户改了代码 */\n  onChange: (code: string) => void;\n}\n\n/** 在 parent 里创建编辑器 */\nexport function createEditor(\n  parent: HTMLElement,\n  { code, dark, label, language, readonly, onChange }: CodeEditorOptions,\n): CodeEditorHandle {\n  const darkMode = new Compartment();\n  const view = new EditorView({\n    parent,\n    state: EditorState.create({\n      doc: code,\n      extensions: [\n        lineNumbers(),\n        highlightActiveLineGutter(),\n        foldGutter(),\n        history(),\n        drawSelection(),\n        indentOnInput(),\n        bracketMatching(),\n        closeBrackets(),\n        autocompletion(),\n        highlightActiveLine(),\n        highlightSelectionMatches(),\n        language ?? javascript({ jsx: true, typescript: true }),\n        EditorState.readOnly.of(readonly === true),\n        syntaxHighlighting(highlightStyle),\n        EditorState.tabSize.of(2),\n        theme,\n        darkMode.of(EditorView.darkTheme.of(dark)),\n        EditorView.contentAttributes.of({ 'aria-label': label }),\n        keymap.of([\n          ...closeBracketsKeymap,\n          ...completionKeymap,\n          ...searchKeymap,\n          ...foldKeymap,\n          ...historyKeymap,\n          ...defaultKeymap,\n          // 补全、搜索面板没有接住的 Esc：下一次 Tab 移出焦点\n          { key: 'Escape', run: temporarilySetTabFocusMode },\n          indentWithTab,\n        ]),\n        EditorView.updateListener.of((update) => {\n          if (update.docChanged && update.transactions.some((tr) => !tr.annotation(external)))\n            onChange(update.state.doc.toString());\n        }),\n      ],\n    }),\n  });\n  return {\n    view,\n    setCode(next) {\n      if (next === view.state.doc.toString()) return;\n      view.dispatch({\n        changes: { from: 0, to: view.state.doc.length, insert: next },\n        annotations: external.of(true),\n      });\n    },\n    edit(changes, { merge = false } = {}) {\n      if (changes.length === 0) return;\n      view.dispatch({\n        changes: [...changes],\n        annotations: merge ? Transaction.userEvent.of('input.type') : isolateHistory.of('full'),\n      });\n    },\n    undo: () => undo(view),\n    redo: () => redo(view),\n    goTo(line, column = 1) {\n      const doc = view.state.doc;\n      const target = doc.line(Math.min(Math.max(line, 1), doc.lines));\n      const pos = target.from + Math.min(Math.max(column - 1, 0), target.length);\n      view.dispatch({\n        selection: { anchor: pos },\n        effects: EditorView.scrollIntoView(pos, { y: 'center' }),\n      });\n      view.focus();\n    },\n    setDark(next) {\n      view.dispatch({ effects: darkMode.reconfigure(EditorView.darkTheme.of(next)) });\n    },\n    destroy: () => view.destroy(),\n  };\n}\n"],"mappings":"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"}

package/dist/code-editor/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 代码编辑器（子路径 `@zerodep-dev/vue-tsx-pro-ui/code-editor`）：CodeMirror 6，颜色、字体取主题 token；Esc 后 Tab 移出焦点。
+ * 依赖可选的 peer：@codemirror/*（autocomplete、commands、lang-javascript、language、search、state、view）与 @lezer/highlight，用到时安装。
+ *
+ *   import { CodeEditor } from '@zerodep-dev/vue-tsx-pro-ui/code-editor';
+ *   <CodeEditor _value={source} aria-label="表单源码" />
+ */
+export { CodeEditor, type CodeEditorProps } from './CodeEditor';
+export { createEditor, type CodeChange, type CodeEditorHandle, type CodeEditorOptions, } from './editor';

package/dist/code-editor/index.js

@@ -0,0 +1,3 @@
+import { createEditor } from "./editor.js";
+import { CodeEditor } from "./CodeEditor.js";
+export { CodeEditor, createEditor };

package/dist/config/Provider.d.ts

@@ -1,6 +1,6 @@
 import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
-import { type Highlighter, type TextMatcher, type UiRouter } from './context';
+import { type Highlighter, type TextMatcher, type UiPermissions, type UiRouter } from './context';
 import { type ComponentDefaults } from './defaults';
 import { type ComponentStyles } from './styles';
 import { type Lang } from './lang/lang';
@@ -23,6 +23,8 @@ export interface ProviderProps {
     styles?: ComponentStyles;
     /** 路由适配；不写时沿用上层配置 */
     router?: UiRouter;
+    /** 权限判断；不写时沿用上层配置 */
+    permissions?: UiPermissions;
     /** 请求客户端；不写时沿用上层配置 */
     http?: HttpClient;
     /** 工作日历；不写时沿用上层配置 */

package/dist/config/Provider.js

@@ -4,8 +4,8 @@ import { mergeStyles } from "./styles.js";
 import { resolveTheme, themeAttrs } from "./theme/theme.js";
 import { usePrefersDark } from "../utils/dom/media-query.js";
 import { defineLang } from "./lang/lang.js";
-import { computed, createVNode, mergeProps } from "vue";
-import { _component, childrenProp, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { computed, createVNode } from "vue";
+import { _component, childrenProp, mergeJsxProps, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/config/Provider.tsx
 /** 局部配置；都不写时只是透明的容器，沿用上层配置 */
@@ -31,6 +31,7 @@ var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
 	const defaults = readonlyProp(_props, "defaults");
 	const styles = readonlyProp(_props, "styles");
 	const router = readonlyProp(_props, "router");
+	const permissions = readonlyProp(_props, "permissions");
 	const http = readonlyProp(_props, "http");
 	const workCalendar = readonlyProp(_props, "workCalendar");
 	const ripple = readonlyProp(_props, "ripple");
@@ -63,6 +64,9 @@ var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
 		get router() {
 			return router.value ?? parent.router;
 		},
+		get permissions() {
+			return permissions.value ?? parent.permissions;
+		},
 		get http() {
 			return http.value ?? parent.http;
 		},
@@ -73,7 +77,7 @@ var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
 			return ripple.value ?? parent.ripple;
 		}
 	});
-	return () => createVNode("div", mergeProps(theme.value ? themeAttrs(currentTheme.value) : {}, css.attrs(providerStyles.root, theme.value != null && providerStyles.themed), {
+	return () => createVNode("div", mergeJsxProps(theme.value ? themeAttrs(currentTheme.value) : {}, css.attrs(providerStyles.root, theme.value != null && providerStyles.themed), {
 		"lang": currentLang.value.code,
 		"dir": currentLang.value.direction
 	}), [children.value]);
@@ -87,6 +91,7 @@ var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
 		"defaults",
 		"styles",
 		"router",
+		"permissions",
 		"http",
 		"workCalendar",
 		"ripple"
@@ -100,7 +105,7 @@ var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
 var ConfigScope = /*#__PURE__*/ _component((_props2, _ctx2) => {
 	const children = childrenProp(_props2);
 	const config = useConfig();
-	return () => createVNode("div", mergeProps(themeAttrs(config.theme), css.attrs(providerStyles.root, providerStyles.themed), {
+	return () => createVNode("div", mergeJsxProps(themeAttrs(config.theme), css.attrs(providerStyles.root, providerStyles.themed), {
 		"lang": config.lang.code,
 		"dir": config.lang.direction
 	}), [children.value]);

package/dist/config/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/config/Provider.tsx"],"sourcesContent":["import { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport {\n  ConfigContext,\n  useConfig,\n  type Highlighter,\n  type TextMatcher,\n  type UiRouter,\n} from './context';\nimport { mergeDefaults, type ComponentDefaults } from './defaults';\nimport { mergeStyles, type ComponentStyles } from './styles';\nimport { defineLang, type Lang } from './lang/lang';\nimport { usePrefersDark } from '../utils/dom/media-query';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport { resolveTheme, themeAttrs, type ThemeInput } from './theme/theme';\n\n/** 局部配置；都不写时只是透明的容器，沿用上层配置 */\nexport interface ProviderProps {\n  /** 主题；不写时沿用上层配置 */\n  theme?: ThemeInput;\n  /** 语言；只写要改的字段，其余沿用上层配置 */\n  lang?: Partial<Lang>;\n  /** 代码高亮器（CodeBlock 用）；不写时沿用上层配置 */\n  highlighter?: Highlighter;\n  /** 额外的文字匹配（拼音）；不写时沿用上层配置 */\n  textMatcher?: TextMatcher;\n  /** 组件默认值：按组件逐个与上层合并，只写要改的 */\n  defaults?: ComponentDefaults;\n  /** 组件的主题定制：追加在上层的定制之后（见 styles.ts） */\n  styles?: ComponentStyles;\n  /** 路由适配；不写时沿用上层配置 */\n  router?: UiRouter;\n  /** 请求客户端；不写时沿用上层配置 */\n  http?: HttpClient;\n  /** 工作日历；不写时沿用上层配置 */\n  workCalendar?: WorkCalendar;\n  /** 波纹效果的开关；不写时沿用上层配置 */\n  ripple?: boolean;\n  children?: VNodeChild;\n}\n\n/** Provider 的样式：root、themed */\nexport const providerStyles = css.create({\n  // 不产生盒子，不影响布局；主题变量与文字样式照常由子元素继承\n  root: { display: 'contents' },\n  themed: {\n    color: '_text',\n    fontFamily: '_sans',\n    fontSize: '_md',\n    lineHeight: '_normal',\n  },\n});\n\n/**\n * 局部配置主题与语言，可以嵌套：内层只写要改的部分，其余继承外层。\n * 应用级配置见 createUi。\n */\nexport const Provider = _component(\n  ({\n    theme,\n    lang,\n    highlighter,\n    textMatcher,\n    defaults,\n    styles,\n    router,\n    http,\n    workCalendar,\n    ripple,\n    children,\n  }: ProviderProps) => {\n    const parent = useConfig();\n    const prefersDark = usePrefersDark();\n    const currentTheme = _derived(theme ? resolveTheme(theme, prefersDark.value) : parent.theme);\n    const currentLang = _derived(lang ? defineLang(parent.lang, lang) : parent.lang);\n    const currentDefaults = _derived(mergeDefaults(parent.defaults, defaults));\n    const currentStyles = _derived(mergeStyles(parent.styles, styles));\n    ConfigContext.provide({\n      get theme() {\n        return currentTheme;\n      },\n      get lang() {\n        return currentLang;\n      },\n      get highlighter() {\n        return highlighter ?? parent.highlighter;\n      },\n      get textMatcher() {\n        return textMatcher ?? parent.textMatcher;\n      },\n      get defaults() {\n        return currentDefaults;\n      },\n      get styles() {\n        return currentStyles;\n      },\n      get router() {\n        return router ?? parent.router;\n      },\n      get http() {\n        return http ?? parent.http;\n      },\n      get workCalendar() {\n        return workCalendar ?? parent.workCalendar;\n      },\n      get ripple() {\n        return ripple ?? parent.ripple;\n      },\n    });\n\n    return () => (\n      <div\n        {...(theme ? themeAttrs(currentTheme) : {})}\n        {...css.attrs(providerStyles.root, theme != null && providerStyles.themed)}\n        lang={currentLang.code}\n        dir={currentLang.direction}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/** ConfigScope 的 props */\nexport interface ConfigScopeProps {\n  children?: VNodeChild;\n}\n\n/**\n * 给移出 Provider 的内容（Teleport 到 body 的 Toaster 等）重新带上当前的主题、语言与文字方向：\n * 主题变量、lang、dir 都挂在 Provider 的元素上，传送出去的元素不再是它的后代。\n */\nexport const ConfigScope = _component(({ children }: ConfigScopeProps) => {\n  const config = useConfig();\n  return () => (\n    <div\n      {...themeAttrs(config.theme)}\n      {...css.attrs(providerStyles.root, providerStyles.themed)}\n      lang={config.lang.code}\n      dir={config.lang.direction}\n    >\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AA4CA,IAAa,iBAAiB,IAAI,OAAO;CAEvC,MAAM,EAAE,SAAS,WAAW;CAC5B,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,UAAU;EACV,YAAY;CACd;AACF,CAAC;;;;;AAMD,IAAa,WAAW,0BACtB,QAAA,SAYqB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CACnB,MAAM,SAAS,UAAU;CACzB,MAAM,cAAc,eAAe;CACnC,MAAM,eAAYC,eAAY,MAAA,QAAQ,aAAY,MAAA,OAAQ,YAAY,KAAK,IAAI,OAAO,KAAK;CAC3F,MAAM,cAAWA,eAAY,KAAA,QAAO,WAAW,OAAO,MAAI,KAAA,KAAM,IAAI,OAAO,IAAI;CAC/E,MAAM,kBAAeA,eAAY,cAAc,OAAO,UAAQ,SAAA,KAAU,CAAC;CACzE,MAAM,gBAAaA,eAAY,YAAY,OAAO,QAAM,OAAA,KAAQ,CAAC;CACjE,cAAc,QAAQ;EACpB,IAAI,QAAQ;GACV,OAAA,aAAA;EACF;EACA,IAAI,OAAO;GACT,OAAA,YAAA;EACF;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,WAAW;GACb,OAAA,gBAAA;EACF;EACA,IAAI,SAAS;GACX,OAAA,cAAA;EACF;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;EACA,IAAI,OAAO;GACT,OAAO,KAAA,SAAQ,OAAO;EACxB;EACA,IAAI,eAAe;GACjB,OAAO,aAAA,SAAgB,OAAO;EAChC;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;CACF,CAAC;CAED,aAAOC,YAAA,OAAAC,WAEE,MAAA,QAAQ,WAAU,aAAA,KAAa,IAAI,CAAC,GACrC,IAAI,MAAM,eAAe,MAAM,MAAA,SAAS,QAAQ,eAAe,MAAM,GAAC;EAAA,QACpE,YAAA,MAAY;EAAI,OACjB,YAAA,MAAY;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;;;;AAWA,IAAa,cAAc,0BAAW,SAAA,UAAoC;CAAA,MAAA,WAAAH,aAAA,OAAA;CACxE,MAAM,SAAS,UAAU;CACzB,aAAOE,YAAA,OAAAC,WAEC,WAAW,OAAO,KAAK,GACvB,IAAI,MAAM,eAAe,MAAM,eAAe,MAAM,GAAC;EAAA,QACnD,OAAO,KAAK;EAAI,OACjB,OAAO,KAAK;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC,EAAA,MAAA,cAAA,CAAA"}
+{"version":3,"file":"Provider.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/config/Provider.tsx"],"sourcesContent":["import { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport {\n  ConfigContext,\n  useConfig,\n  type Highlighter,\n  type TextMatcher,\n  type UiPermissions,\n  type UiRouter,\n} from './context';\nimport { mergeDefaults, type ComponentDefaults } from './defaults';\nimport { mergeStyles, type ComponentStyles } from './styles';\nimport { defineLang, type Lang } from './lang/lang';\nimport { usePrefersDark } from '../utils/dom/media-query';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport { resolveTheme, themeAttrs, type ThemeInput } from './theme/theme';\n\n/** 局部配置；都不写时只是透明的容器，沿用上层配置 */\nexport interface ProviderProps {\n  /** 主题；不写时沿用上层配置 */\n  theme?: ThemeInput;\n  /** 语言；只写要改的字段，其余沿用上层配置 */\n  lang?: Partial<Lang>;\n  /** 代码高亮器（CodeBlock 用）；不写时沿用上层配置 */\n  highlighter?: Highlighter;\n  /** 额外的文字匹配（拼音）；不写时沿用上层配置 */\n  textMatcher?: TextMatcher;\n  /** 组件默认值：按组件逐个与上层合并，只写要改的 */\n  defaults?: ComponentDefaults;\n  /** 组件的主题定制：追加在上层的定制之后（见 styles.ts） */\n  styles?: ComponentStyles;\n  /** 路由适配；不写时沿用上层配置 */\n  router?: UiRouter;\n  /** 权限判断；不写时沿用上层配置 */\n  permissions?: UiPermissions;\n  /** 请求客户端；不写时沿用上层配置 */\n  http?: HttpClient;\n  /** 工作日历；不写时沿用上层配置 */\n  workCalendar?: WorkCalendar;\n  /** 波纹效果的开关；不写时沿用上层配置 */\n  ripple?: boolean;\n  children?: VNodeChild;\n}\n\n/** Provider 的样式：root、themed */\nexport const providerStyles = css.create({\n  // 不产生盒子，不影响布局；主题变量与文字样式照常由子元素继承\n  root: { display: 'contents' },\n  themed: {\n    color: '_text',\n    fontFamily: '_sans',\n    fontSize: '_md',\n    lineHeight: '_normal',\n  },\n});\n\n/**\n * 局部配置主题与语言，可以嵌套：内层只写要改的部分，其余继承外层。\n * 应用级配置见 createUi。\n */\nexport const Provider = _component(\n  ({\n    theme,\n    lang,\n    highlighter,\n    textMatcher,\n    defaults,\n    styles,\n    router,\n    permissions,\n    http,\n    workCalendar,\n    ripple,\n    children,\n  }: ProviderProps) => {\n    const parent = useConfig();\n    const prefersDark = usePrefersDark();\n    const currentTheme = _derived(theme ? resolveTheme(theme, prefersDark.value) : parent.theme);\n    const currentLang = _derived(lang ? defineLang(parent.lang, lang) : parent.lang);\n    const currentDefaults = _derived(mergeDefaults(parent.defaults, defaults));\n    const currentStyles = _derived(mergeStyles(parent.styles, styles));\n    ConfigContext.provide({\n      get theme() {\n        return currentTheme;\n      },\n      get lang() {\n        return currentLang;\n      },\n      get highlighter() {\n        return highlighter ?? parent.highlighter;\n      },\n      get textMatcher() {\n        return textMatcher ?? parent.textMatcher;\n      },\n      get defaults() {\n        return currentDefaults;\n      },\n      get styles() {\n        return currentStyles;\n      },\n      get router() {\n        return router ?? parent.router;\n      },\n      get permissions() {\n        return permissions ?? parent.permissions;\n      },\n      get http() {\n        return http ?? parent.http;\n      },\n      get workCalendar() {\n        return workCalendar ?? parent.workCalendar;\n      },\n      get ripple() {\n        return ripple ?? parent.ripple;\n      },\n    });\n\n    return () => (\n      <div\n        {...(theme ? themeAttrs(currentTheme) : {})}\n        {...css.attrs(providerStyles.root, theme != null && providerStyles.themed)}\n        lang={currentLang.code}\n        dir={currentLang.direction}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/** ConfigScope 的 props */\nexport interface ConfigScopeProps {\n  children?: VNodeChild;\n}\n\n/**\n * 给移出 Provider 的内容（Teleport 到 body 的 Toaster 等）重新带上当前的主题、语言与文字方向：\n * 主题变量、lang、dir 都挂在 Provider 的元素上，传送出去的元素不再是它的后代。\n */\nexport const ConfigScope = _component(({ children }: ConfigScopeProps) => {\n  const config = useConfig();\n  return () => (\n    <div\n      {...themeAttrs(config.theme)}\n      {...css.attrs(providerStyles.root, providerStyles.themed)}\n      lang={config.lang.code}\n      dir={config.lang.direction}\n    >\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AA+CA,IAAa,iBAAiB,IAAI,OAAO;CAEvC,MAAM,EAAE,SAAS,WAAW;CAC5B,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,UAAU;EACV,YAAY;CACd;AACF,CAAC;;;;;AAMD,IAAa,WAAW,0BACtB,QAAA,SAaqB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CACnB,MAAM,SAAS,UAAU;CACzB,MAAM,cAAc,eAAe;CACnC,MAAM,eAAYC,eAAY,MAAA,QAAQ,aAAY,MAAA,OAAQ,YAAY,KAAK,IAAI,OAAO,KAAK;CAC3F,MAAM,cAAWA,eAAY,KAAA,QAAO,WAAW,OAAO,MAAI,KAAA,KAAM,IAAI,OAAO,IAAI;CAC/E,MAAM,kBAAeA,eAAY,cAAc,OAAO,UAAQ,SAAA,KAAU,CAAC;CACzE,MAAM,gBAAaA,eAAY,YAAY,OAAO,QAAM,OAAA,KAAQ,CAAC;CACjE,cAAc,QAAQ;EACpB,IAAI,QAAQ;GACV,OAAA,aAAA;EACF;EACA,IAAI,OAAO;GACT,OAAA,YAAA;EACF;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,WAAW;GACb,OAAA,gBAAA;EACF;EACA,IAAI,SAAS;GACX,OAAA,cAAA;EACF;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,OAAO;GACT,OAAO,KAAA,SAAQ,OAAO;EACxB;EACA,IAAI,eAAe;GACjB,OAAO,aAAA,SAAgB,OAAO;EAChC;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;CACF,CAAC;CAED,aAAOC,YAAA,OAAAC,cAEE,MAAA,QAAQ,WAAU,aAAA,KAAa,IAAI,CAAC,GACrC,IAAI,MAAM,eAAe,MAAM,MAAA,SAAS,QAAQ,eAAe,MAAM,GAAC;EAAA,QACpE,YAAA,MAAY;EAAI,OACjB,YAAA,MAAY;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;;;;AAWA,IAAa,cAAc,0BAAW,SAAA,UAAoC;CAAA,MAAA,WAAAH,aAAA,OAAA;CACxE,MAAM,SAAS,UAAU;CACzB,aAAOE,YAAA,OAAAC,cAEC,WAAW,OAAO,KAAK,GACvB,IAAI,MAAM,eAAe,MAAM,eAAe,MAAM,GAAC;EAAA,QACnD,OAAO,KAAK;EAAI,OACjB,OAAO,KAAK;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC,EAAA,MAAA,cAAA,CAAA"}

package/dist/config/context.d.ts

@@ -45,6 +45,14 @@ export interface UiRouter {
      */
     replaceQuery?: (patch: QueryPatch) => void;
 }
+/**
+ * 权限判断：用户有没有这个权限点。组件库不知道权限从哪来（后端返回的权限点、角色…），由应用接入：
+ *
+ *   createUi({ permissions: (permission) => access.can(permission) })
+ *
+ * 在渲染时调用，读响应式状态就能跟随变化（登录、退出、换角色后界面随之更新）。用 Can、useCan 控制界面。
+ */
+export type UiPermissions = (permission: string) => boolean;
 /** 地址里的查询参数：同名多个时是数组；只写了键（?flag）时是空字符串 */
 export type QueryValues = Readonly<Record<string, string | readonly string[]>>;
 /** 要改的查询参数：undefined 是删掉 */
@@ -65,6 +73,8 @@ export interface UiConfig {
     readonly styles: StyleLayers;
     /** 路由适配；没有时链接就是普通的页面跳转 */
     readonly router?: UiRouter;
+    /** 权限判断；没有时 useCan、Can 一律放行 */
+    readonly permissions?: UiPermissions;
     /** 请求客户端（远程选项、上传、列表查询用）；没有时 useHttp 给一个默认的 createHttpClient() */
     readonly http?: HttpClient;
     /** 工作日历（时限、剩余工作日用）；没有时只按周末算 */
@@ -88,3 +98,11 @@ export declare function useLang(): Lang;
  * 在 setup 里调用，返回的函数在渲染、计算里调用（读到最新的语言与配置）
  */
 export declare function useTextMatcher(): () => TextMatcher;
+/**
+ * 当前配置下的权限判断（在 setup 里调用）：返回 can(权限点)，给数组时有其中任意一个就算有。
+ * createUi / Provider 没给 permissions 时一律放行（没有权限体系的应用不受影响）。返回的函数在渲染、计算里调用才跟随变化。
+ *
+ *   const can = useCan();
+ *   <Button disabled={!can('cost:project:add')}>新建</Button>
+ */
+export declare function useCan(): (permission: string | readonly string[]) => boolean;

package/dist/config/context.js

@@ -52,7 +52,22 @@ function useTextMatcher() {
 		return extra ? (text, query) => builtin(text, query) || extra(text, query) : builtin;
 	};
 }
+/**
+* 当前配置下的权限判断（在 setup 里调用）：返回 can(权限点)，给数组时有其中任意一个就算有。
+* createUi / Provider 没给 permissions 时一律放行（没有权限体系的应用不受影响）。返回的函数在渲染、计算里调用才跟随变化。
+*
+*   const can = useCan();
+*   <Button disabled={!can('cost:project:add')}>新建</Button>
+*/
+function useCan() {
+	const config = useConfig();
+	return (permission) => {
+		const has = config.permissions;
+		if (!has) return true;
+		return typeof permission === "string" ? has(permission) : permission.some((item) => has(item));
+	};
+}
 //#endregion
-export { ConfigContext, defaultConfig, useConfig, useLang, useTextMatcher };
+export { ConfigContext, defaultConfig, useCan, useConfig, useLang, useTextMatcher };
 
 //# sourceMappingURL=context.js.map