niuma-ui 2.0.3 → 2.0.9

package/dist/components/code-block/src/RsCodeBlock.impl.js

@@ -1,24 +1,42 @@
 import { useRsI18n } from "../../../composables/useRsI18n.js";
-import { isCodeMirrorLightTheme, resolveCodeMirrorLanguage } from "../../code-editor/src/code-mirror-lang.js";
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, onMounted, onUnmounted, openBlock, ref, shallowRef, toDisplayString, unref, watch } from "vue";
+import { copyTextToClipboard } from "../../../utils/rs-clipboard.js";
+import { resolveCodeMirrorLanguage } from "../../code-editor/src/code-mirror-lang.js";
+import { codeBlockCopyFeedbackMs, codeBlockDownloadRevokeMs, isCodeBlockDarkTheme, mimeForDownloadFilename, readCodeBlockSelection, sanitizeDownloadFilename, subscribeCodeBlockTheme } from "./code-block-utils.js";
+import { codeBlockHighlightExtension, highlightCodeBlockLines } from "./code-block-highlight.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, watch } from "vue";
 import { basicSetup } from "codemirror";
-import { EditorState } from "@codemirror/state";
+import { Compartment, EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { oneDark } from "@codemirror/theme-one-dark";
 //#region src/components/code-block/src/RsCodeBlock.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
+var _hoisted_1 = ["id", "aria-label"];
+var _hoisted_2 = {
 	key: 0,
 	class: "rs-code-block__bar"
 };
-var _hoisted_2 = { class: "rs-code-block__lang" };
-var _hoisted_3 = { class: "rs-code-block__actions" };
+var _hoisted_3 = { class: "rs-code-block__meta" };
+var _hoisted_4 = {
+	key: 0,
+	class: "rs-code-block__file"
+};
+var _hoisted_5 = { class: "rs-code-block__lang" };
+var _hoisted_6 = ["aria-label"];
+var _hoisted_7 = ["aria-label"];
+var _hoisted_8 = { "aria-hidden": "true" };
+var _hoisted_9 = {
+	class: "rs-code-block__sr",
+	role: "status"
+};
 var RsCodeBlock_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsCodeBlock",
 	__name: "RsCodeBlock",
 	props: {
 		code: {},
 		lang: { default: "text" },
+		filename: {},
 		copyLabel: {},
 		copiedLabel: {},
+		copyFailedLabel: {},
 		downloadFilename: {},
 		downloadLabel: {},
 		editable: {
@@ -28,117 +46,190 @@ var RsCodeBlock_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		showBar: {
 			type: Boolean,
 			default: true
-		}
+		},
+		lineNumbers: {
+			type: Boolean,
+			default: true
+		},
+		wordWrap: {
+			type: Boolean,
+			default: true
+		},
+		highlightLines: {},
+		maxHeight: {},
+		ariaLabel: {},
+		id: {}
 	},
-	emits: ["update:code"],
+	emits: ["update:code", "copy"],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const { t } = useRsI18n();
 		const editorEl = ref(null);
 		const view = shallowRef(null);
-		const isCopied = ref(false);
+		const copyState = ref("idle");
+		const liveText = ref("");
+		const editableCompartment = new Compartment();
+		const wrapCompartment = new Compartment();
+		const themeCompartment = new Compartment();
 		let copyTimer = null;
-		let themeObserver = null;
-		/** 标记当前是否已卸载，防止异步初始化的竞态条件。 */
+		let downloadTimer = null;
+		let downloadUrl = null;
+		let unsubscribeTheme = () => {};
 		let unmounted = false;
-		function isLight() {
-			return isCodeMirrorLightTheme();
+		let syncingFromModel = false;
+		let themeIsDark = null;
+		let initSeq = 0;
+		const copyVisual = computed(() => {
+			if (copyState.value === "copied") return props.copiedLabel ?? t("codeBlock.copied");
+			if (copyState.value === "failed") return props.copyFailedLabel ?? t("codeBlock.copyFailed");
+			return props.copyLabel ?? t("codeBlock.copy");
+		});
+		const copyAria = computed(() => props.copyLabel ?? t("codeBlock.copy"));
+		const downloadVisual = computed(() => props.downloadLabel ?? t("codeBlock.download"));
+		const toolbarLabel = computed(() => props.ariaLabel || t("codeBlock.toolbar"));
+		const figureLabel = computed(() => props.ariaLabel || t("codeBlock.label"));
+		const rootStyle = computed(() => {
+			if (!props.maxHeight) return void 0;
+			return { "--rs-code-block-max-height": props.maxHeight };
+		});
+		function applyTheme() {
+			const dark = isCodeBlockDarkTheme(editorEl.value);
+			if (themeIsDark === dark) return;
+			themeIsDark = dark;
+			view.value?.dispatch({ effects: themeCompartment.reconfigure(dark ? [oneDark] : []) });
 		}
-		async function resolveLanguageExtension(lang) {
-			return resolveCodeMirrorLanguage(lang);
+		function applyHighlights() {
+			if (unmounted || !view.value) return;
+			view.value.dispatch({ effects: highlightCodeBlockLines(props.highlightLines) });
+		}
+		function replaceDocument(next) {
+			const ed = view.value;
+			if (!ed || unmounted) return;
+			if (ed.state.doc.toString() === next) return;
+			syncingFromModel = true;
+			try {
+				ed.dispatch({
+					changes: {
+						from: 0,
+						to: ed.state.doc.length,
+						insert: next
+					},
+					effects: highlightCodeBlockLines(props.highlightLines)
+				});
+			} finally {
+				syncingFromModel = false;
+			}
 		}
 		async function initEditor() {
 			if (!editorEl.value || unmounted) return;
+			const seq = ++initSeq;
 			const targetEl = editorEl.value;
 			view.value?.destroy();
 			view.value = null;
-			const langExts = await resolveLanguageExtension(props.lang ?? "");
-			if (unmounted || !targetEl.isConnected) return;
+			const langExts = await resolveCodeMirrorLanguage(props.lang ?? "");
+			if (unmounted || !targetEl.isConnected || seq !== initSeq) return;
+			const dark = isCodeBlockDarkTheme(targetEl);
+			themeIsDark = dark;
 			const state = EditorState.create({
 				doc: props.code,
 				extensions: [
 					basicSetup,
-					EditorView.editable.of(props.editable),
-					EditorView.lineWrapping,
+					wrapCompartment.of(props.wordWrap ? EditorView.lineWrapping : []),
+					editableCompartment.of(EditorView.editable.of(props.editable)),
 					...langExts,
-					...isLight() ? [] : [oneDark],
-					EditorView.updateListener.of((u) => {
-						if (props.editable && u.docChanged) emit("update:code", u.state.doc.toString());
+					codeBlockHighlightExtension(),
+					themeCompartment.of(dark ? [oneDark] : []),
+					EditorView.updateListener.of((update) => {
+						if (!props.editable || !update.docChanged || syncingFromModel) return;
+						emit("update:code", update.state.doc.toString());
 					})
 				]
 			});
+			if (unmounted || seq !== initSeq) return;
 			view.value = new EditorView({
 				state,
 				parent: targetEl
 			});
+			applyHighlights();
+		}
+		function clearCopyTimer() {
+			if (copyTimer !== null) {
+				clearTimeout(copyTimer);
+				copyTimer = null;
+			}
+		}
+		function clearDownload() {
+			if (downloadTimer !== null) {
+				clearTimeout(downloadTimer);
+				downloadTimer = null;
+			}
+			if (downloadUrl) {
+				URL.revokeObjectURL(downloadUrl);
+				downloadUrl = null;
+			}
 		}
 		onMounted(() => {
 			unmounted = false;
 			initEditor();
-			themeObserver = new MutationObserver(() => {
-				initEditor();
-			});
-			themeObserver.observe(document.documentElement, {
-				attributes: true,
-				attributeFilter: ["data-rs-theme"]
-			});
+			unsubscribeTheme = subscribeCodeBlockTheme(() => applyTheme());
 		});
 		onUnmounted(() => {
 			unmounted = true;
+			initSeq += 1;
+			clearCopyTimer();
+			clearDownload();
+			unsubscribeTheme();
 			view.value?.destroy();
 			view.value = null;
-			themeObserver?.disconnect();
-			themeObserver = null;
-			if (copyTimer !== null) {
-				clearTimeout(copyTimer);
-				copyTimer = null;
-			}
 		});
-		watch(() => [props.lang, props.editable], () => {
+		watch(() => props.lang, () => {
 			initEditor();
 		});
+		watch(() => props.editable, (editable) => {
+			view.value?.dispatch({ effects: editableCompartment.reconfigure(EditorView.editable.of(editable)) });
+		});
+		watch(() => props.wordWrap, (wrap) => {
+			view.value?.dispatch({ effects: wrapCompartment.reconfigure(wrap ? EditorView.lineWrapping : []) });
+		});
+		watch(() => props.code, (next) => replaceDocument(next));
+		watch(() => (props.highlightLines ?? []).join(","), () => applyHighlights());
 		function getSelection() {
 			const ed = view.value;
 			if (!ed) return null;
 			const range = ed.state.selection.main;
 			if (range.empty) return null;
-			const text = ed.state.sliceDoc(range.from, range.to);
-			if (!text.trim()) return null;
-			return {
-				text,
-				startLine: ed.state.doc.lineAt(range.from).number,
-				endLine: ed.state.doc.lineAt(range.to).number
-			};
+			return readCodeBlockSelection(false, ed.state.sliceDoc(range.from, range.to), ed.state.doc.lineAt(range.from).number, ed.state.doc.lineAt(range.to).number);
+		}
+		function focus() {
+			view.value?.focus();
 		}
-		__expose({ getSelection });
-		watch(() => props.code, (newCode) => {
-			if (!view.value) return;
-			if (view.value.state.doc.toString() === newCode) return;
-			view.value.dispatch({ changes: {
-				from: 0,
-				to: view.value.state.doc.length,
-				insert: newCode
-			} });
+		__expose({
+			getSelection,
+			focus
 		});
 		async function copy() {
-			try {
-				await navigator.clipboard.writeText(props.code);
-				isCopied.value = true;
-				if (copyTimer !== null) clearTimeout(copyTimer);
-				copyTimer = setTimeout(() => {
-					isCopied.value = false;
-					copyTimer = null;
-				}, 1500);
-			} catch {}
+			const text = props.code;
+			const ok = await copyTextToClipboard(text);
+			if (unmounted) return;
+			copyState.value = ok ? "copied" : "failed";
+			liveText.value = ok ? props.copiedLabel ?? t("codeBlock.copied") : props.copyFailedLabel ?? t("codeBlock.copyFailed");
+			if (ok) emit("copy", text);
+			clearCopyTimer();
+			copyTimer = setTimeout(() => {
+				copyState.value = "idle";
+				liveText.value = "";
+				copyTimer = null;
+			}, codeBlockCopyFeedbackMs());
 		}
 		function download() {
-			if (!props.downloadFilename) return;
-			const name = props.downloadFilename.replace(/^.*[/\\]/, "") || "download.html";
-			const lower = name.toLowerCase();
-			const mime = lower.endsWith(".html") || lower.endsWith(".htm") ? "text/html;charset=utf-8" : "text/plain;charset=utf-8";
-			const blob = new Blob([props.code], { type: mime });
+			const raw = props.downloadFilename;
+			if (!raw || typeof document === "undefined" || typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return;
+			const name = sanitizeDownloadFilename(raw);
+			const blob = new Blob([props.code], { type: mimeForDownloadFilename(name) });
+			clearDownload();
 			const url = URL.createObjectURL(blob);
+			downloadUrl = url;
 			const anchor = document.createElement("a");
 			anchor.href = url;
 			anchor.download = name;
@@ -146,26 +237,54 @@ var RsCodeBlock_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			document.body.appendChild(anchor);
 			anchor.click();
 			anchor.remove();
-			URL.revokeObjectURL(url);
+			downloadTimer = setTimeout(() => {
+				if (downloadUrl === url) {
+					URL.revokeObjectURL(url);
+					downloadUrl = null;
+				}
+				downloadTimer = null;
+			}, codeBlockDownloadRevokeMs());
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("figure", { class: normalizeClass(["rs-code-block", {
-				"rs-code-block--editable": __props.editable,
-				"rs-code-block--plain": !__props.showBar
-			}]) }, [__props.showBar ? (openBlock(), createElementBlock("figcaption", _hoisted_1, [createElementVNode("span", _hoisted_2, toDisplayString(__props.lang), 1), createElementVNode("div", _hoisted_3, [__props.downloadFilename ? (openBlock(), createElementBlock("button", {
-				key: 0,
-				type: "button",
-				class: "rs-code-block__copy",
-				onClick: download
-			}, toDisplayString(__props.downloadLabel ?? unref(t)("codeBlock.download")), 1)) : createCommentVNode("", true), createElementVNode("button", {
-				type: "button",
-				class: "rs-code-block__copy",
-				onClick: copy
-			}, toDisplayString(isCopied.value ? __props.copiedLabel ?? unref(t)("codeBlock.copied") : __props.copyLabel ?? unref(t)("codeBlock.copy")), 1)])])) : createCommentVNode("", true), createElementVNode("div", {
-				ref_key: "editorEl",
-				ref: editorEl,
-				class: "rs-code-block__editor"
-			}, null, 512)], 2);
+			return openBlock(), createElementBlock("figure", {
+				id: __props.id || void 0,
+				class: normalizeClass(["rs-code-block", {
+					"rs-code-block--editable": __props.editable,
+					"rs-code-block--plain": !__props.showBar,
+					"rs-code-block--no-lines": !__props.lineNumbers,
+					"rs-code-block--nowrap": !__props.wordWrap,
+					"rs-code-block--capped": !!__props.maxHeight
+				}]),
+				style: normalizeStyle(rootStyle.value),
+				"aria-label": __props.showBar ? void 0 : figureLabel.value
+			}, [
+				__props.showBar ? (openBlock(), createElementBlock("figcaption", _hoisted_2, [createElementVNode("div", _hoisted_3, [__props.filename ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.filename), 1)) : createCommentVNode("", true), createElementVNode("span", _hoisted_5, toDisplayString(__props.lang), 1)]), createElementVNode("div", {
+					class: "rs-code-block__actions",
+					role: "toolbar",
+					"aria-label": toolbarLabel.value
+				}, [
+					renderSlot(_ctx.$slots, "actions", {}, void 0, true),
+					__props.downloadFilename ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "rs-code-block__copy",
+						onClick: download
+					}, toDisplayString(downloadVisual.value), 1)) : createCommentVNode("", true),
+					createElementVNode("button", {
+						type: "button",
+						class: "rs-code-block__copy",
+						"aria-label": copyAria.value,
+						onClick: copy
+					}, [createElementVNode("span", _hoisted_8, toDisplayString(copyVisual.value), 1)], 8, _hoisted_7)
+				], 8, _hoisted_6)])) : createCommentVNode("", true),
+				createElementVNode("span", _hoisted_9, toDisplayString(liveText.value), 1),
+				createElementVNode("div", {
+					ref_key: "editorEl",
+					ref: editorEl,
+					class: "rs-code-block__editor",
+					dir: "ltr"
+				}, null, 512)
+			], 14, _hoisted_1);
 		};
 	}
 });

package/dist/components/code-block/src/RsCodeBlock.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsCodeBlock_vue_vue_type_script_setup_true_lang_default from "./RsCodeBlock.impl.js";
 
 //#region src/components/code-block/src/RsCodeBlock.vue
-var RsCodeBlock_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsCodeBlock_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-438706f0"]]);
+var RsCodeBlock_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsCodeBlock_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-227d5b66"]]);
 //#endregion
 export { RsCodeBlock_default as default };

package/dist/components/code-block/src/code-block-highlight.d.ts

@@ -0,0 +1,4 @@
+import { StateEffect, StateField } from '@codemirror/state';
+import { type DecorationSet } from '@codemirror/view';
+export declare function codeBlockHighlightExtension(): StateField<DecorationSet>;
+export declare function highlightCodeBlockLines(lines: readonly number[] | undefined): StateEffect<readonly number[]>;

package/dist/components/code-block/src/code-block-highlight.js

@@ -0,0 +1,34 @@
+import { normalizeHighlightLines } from "./code-block-utils.js";
+import { RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView } from "@codemirror/view";
+//#region src/components/code-block/src/code-block-highlight.ts
+var setHighlight = StateEffect.define();
+function buildHighlight(doc, lines) {
+	const wanted = normalizeHighlightLines(lines, doc.lines);
+	if (!wanted.length) return Decoration.none;
+	const builder = new RangeSetBuilder();
+	for (const lineNo of wanted) {
+		const line = doc.line(lineNo);
+		builder.add(line.from, line.from, Decoration.line({ class: "cm-rs-code-line--highlight" }));
+	}
+	return builder.finish();
+}
+var highlightField = StateField.define({
+	create() {
+		return Decoration.none;
+	},
+	update(deco, tr) {
+		for (const effect of tr.effects) if (effect.is(setHighlight)) return buildHighlight(tr.state.doc, effect.value);
+		if (tr.docChanged) return deco.map(tr.changes);
+		return deco;
+	},
+	provide: (field) => EditorView.decorations.from(field)
+});
+function codeBlockHighlightExtension() {
+	return highlightField;
+}
+function highlightCodeBlockLines(lines) {
+	return setHighlight.of(lines ?? []);
+}
+//#endregion
+export { codeBlockHighlightExtension, highlightCodeBlockLines };

package/dist/components/code-block/src/code-block-utils.d.ts

@@ -0,0 +1,23 @@
+export interface RsCodeBlockSelection {
+    text: string;
+    startLine: number;
+    endLine: number;
+}
+export interface RsCodeBlockExpose {
+    getSelection: () => RsCodeBlockSelection | null;
+    focus: () => void;
+}
+export declare function codeBlockCopyFeedbackMs(): number;
+export declare function codeBlockDownloadRevokeMs(): number;
+/** 下载名只留最后一段，避免把目录写进 download 属性。 */
+export declare function sanitizeDownloadFilename(name: string): string;
+export declare function mimeForDownloadFilename(name: string): string;
+export declare function readCodeBlockSelection(empty: boolean, text: string, startLine: number, endLine: number): RsCodeBlockSelection | null;
+/** 行号从 1 开始，去重后升序。超出文档的行丢掉。 */
+export declare function normalizeHighlightLines(lines: readonly number[] | undefined, lineCount: number): number[];
+/** 最近的 data-rs-theme。没有时看 documentElement。深色岛不必改整页。 */
+export declare function isCodeBlockDarkTheme(el: HTMLElement | null): boolean;
+type ThemeListener = () => void;
+/** 多个代码块共用一个主题观察器。最后一个退订时断开。 */
+export declare function subscribeCodeBlockTheme(listener: ThemeListener): () => void;
+export {};

package/dist/components/code-block/src/code-block-utils.js

@@ -0,0 +1,71 @@
+//#region src/components/code-block/src/code-block-utils.ts
+var COPY_FEEDBACK_MS = 1500;
+var DOWNLOAD_REVOKE_MS = 1500;
+function codeBlockCopyFeedbackMs() {
+	return COPY_FEEDBACK_MS;
+}
+function codeBlockDownloadRevokeMs() {
+	return DOWNLOAD_REVOKE_MS;
+}
+/** 下载名只留最后一段，避免把目录写进 download 属性。 */
+function sanitizeDownloadFilename(name) {
+	return name.replace(/^.*[/\\]/, "").replace(/[\u0000-\u001f]/g, "") || "download.html";
+}
+function mimeForDownloadFilename(name) {
+	const lower = name.toLowerCase();
+	if (lower.endsWith(".html") || lower.endsWith(".htm")) return "text/html;charset=utf-8";
+	return "text/plain;charset=utf-8";
+}
+function readCodeBlockSelection(empty, text, startLine, endLine) {
+	if (empty || !text.trim()) return null;
+	return {
+		text,
+		startLine,
+		endLine
+	};
+}
+/** 行号从 1 开始，去重后升序。超出文档的行丢掉。 */
+function normalizeHighlightLines(lines, lineCount) {
+	if (!lines?.length || lineCount < 1) return [];
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const raw of lines) {
+		if (!Number.isInteger(raw) || raw < 1 || raw > lineCount || seen.has(raw)) continue;
+		seen.add(raw);
+		out.push(raw);
+	}
+	out.sort((a, b) => a - b);
+	return out;
+}
+/** 最近的 data-rs-theme。没有时看 documentElement。深色岛不必改整页。 */
+function isCodeBlockDarkTheme(el) {
+	if (typeof document === "undefined") return false;
+	return (el?.closest("[data-rs-theme]") ?? document.documentElement).getAttribute("data-rs-theme") === "dark";
+}
+var themeListeners = /* @__PURE__ */ new Set();
+var themeObserver = null;
+function ensureThemeObserver() {
+	if (themeObserver || typeof document === "undefined" || typeof MutationObserver === "undefined") return;
+	themeObserver = new MutationObserver(() => {
+		for (const listener of themeListeners) listener();
+	});
+	themeObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["data-rs-theme"],
+		subtree: true
+	});
+}
+/** 多个代码块共用一个主题观察器。最后一个退订时断开。 */
+function subscribeCodeBlockTheme(listener) {
+	themeListeners.add(listener);
+	ensureThemeObserver();
+	return () => {
+		themeListeners.delete(listener);
+		if (themeListeners.size === 0 && themeObserver) {
+			themeObserver.disconnect();
+			themeObserver = null;
+		}
+	};
+}
+//#endregion
+export { codeBlockCopyFeedbackMs, codeBlockDownloadRevokeMs, isCodeBlockDarkTheme, mimeForDownloadFilename, normalizeHighlightLines, readCodeBlockSelection, sanitizeDownloadFilename, subscribeCodeBlockTheme };

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

@@ -1,4 +1,4 @@
 export { default as RsCodeEditor } from './src/RsCodeEditor.js';
 export { resolveCodeMirrorLanguage, isCodeMirrorLightTheme, prewarmCodeMirrorEditor } from './src/code-mirror-lang';
-export type { RsCodeEditorDiagnostic, RsCodeEditorLanguage, RsCodeEditorSqlColumn, RsCodeEditorSqlConfig, RsCodeEditorSqlDialect, RsCodeEditorSqlNamespace, RsCodeEditorTheme, RsResolvedCodeEditorTheme, } from './src/code-editor-utils';
+export type { RsCodeEditorDiagnostic, RsCodeEditorExpose, RsCodeEditorLanguage, RsCodeEditorSqlColumn, RsCodeEditorSqlConfig, RsCodeEditorSqlDialect, RsCodeEditorSqlNamespace, RsCodeEditorTheme, RsResolvedCodeEditorTheme, } from './src/code-editor-utils';
 export { codeEditorLanguageLabel, readDocumentTheme, resolveCodeEditorLanguage, resolveCodeEditorSize, resolveCodeEditorTheme, } from './src/code-editor-utils';