niuma-ui 1.3.9 → 2.0.1

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

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    code: string;
+    lang?: string;
+    /** 覆盖内置"复制"文案 */
+    copyLabel?: string;
+    /** 覆盖内置"已复制"文案 */
+    copiedLabel?: string;
+    /** 提供时显示下载按钮，值为建议文件名 */
+    downloadFilename?: string;
+    /** 覆盖内置"下载"文案 */
+    downloadLabel?: string;
+    /** 为 true 时允许改正文，并向外同步 */
+    editable?: boolean;
+    /** 为 false 时隐藏语言条与复制/下载（嵌入编辑器用） */
+    showBar?: boolean;
+};
+declare function getSelection(): {
+    text: string;
+    startLine: number;
+    endLine: number;
+} | null;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    getSelection: typeof getSelection;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:code": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:code"?: ((value: string) => any) | undefined;
+}>, {
+    lang: string;
+    editable: boolean;
+    showBar: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,173 @@
+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 { basicSetup } from "codemirror";
+import { 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 = {
+	key: 0,
+	class: "rs-code-block__bar"
+};
+var _hoisted_2 = { class: "rs-code-block__lang" };
+var _hoisted_3 = { class: "rs-code-block__actions" };
+var RsCodeBlock_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsCodeBlock",
+	props: {
+		code: {},
+		lang: { default: "text" },
+		copyLabel: {},
+		copiedLabel: {},
+		downloadFilename: {},
+		downloadLabel: {},
+		editable: {
+			type: Boolean,
+			default: false
+		},
+		showBar: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["update:code"],
+	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);
+		let copyTimer = null;
+		let themeObserver = null;
+		/** 标记当前是否已卸载，防止异步初始化的竞态条件。 */
+		let unmounted = false;
+		function isLight() {
+			return isCodeMirrorLightTheme();
+		}
+		async function resolveLanguageExtension(lang) {
+			return resolveCodeMirrorLanguage(lang);
+		}
+		async function initEditor() {
+			if (!editorEl.value || unmounted) return;
+			const targetEl = editorEl.value;
+			view.value?.destroy();
+			view.value = null;
+			const langExts = await resolveLanguageExtension(props.lang ?? "");
+			if (unmounted || !targetEl.isConnected) return;
+			const state = EditorState.create({
+				doc: props.code,
+				extensions: [
+					basicSetup,
+					EditorView.editable.of(props.editable),
+					EditorView.lineWrapping,
+					...langExts,
+					...isLight() ? [] : [oneDark],
+					EditorView.updateListener.of((u) => {
+						if (props.editable && u.docChanged) emit("update:code", u.state.doc.toString());
+					})
+				]
+			});
+			view.value = new EditorView({
+				state,
+				parent: targetEl
+			});
+		}
+		onMounted(() => {
+			unmounted = false;
+			initEditor();
+			themeObserver = new MutationObserver(() => {
+				initEditor();
+			});
+			themeObserver.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ["data-rs-theme"]
+			});
+		});
+		onUnmounted(() => {
+			unmounted = true;
+			view.value?.destroy();
+			view.value = null;
+			themeObserver?.disconnect();
+			themeObserver = null;
+			if (copyTimer !== null) {
+				clearTimeout(copyTimer);
+				copyTimer = null;
+			}
+		});
+		watch(() => [props.lang, props.editable], () => {
+			initEditor();
+		});
+		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
+			};
+		}
+		__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
+			} });
+		});
+		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 {}
+		}
+		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 url = URL.createObjectURL(blob);
+			const anchor = document.createElement("a");
+			anchor.href = url;
+			anchor.download = name;
+			anchor.rel = "noopener";
+			document.body.appendChild(anchor);
+			anchor.click();
+			anchor.remove();
+			URL.revokeObjectURL(url);
+		}
+		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);
+		};
+	}
+});
+//#endregion
+export { RsCodeBlock_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,8 @@
+import './RsCodeBlock.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+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"]]);
+//#endregion
+export { RsCodeBlock_default as default };

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

@@ -0,0 +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 { codeEditorLanguageLabel, readDocumentTheme, resolveCodeEditorLanguage, resolveCodeEditorSize, resolveCodeEditorTheme, } from './src/code-editor-utils';

package/dist/components/code-editor/src/RsCodeEditor.css

@@ -0,0 +1,214 @@
+
+.rs-code-editor[data-v-05d9a5e1] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius);
+  background: var(--rs-input-bg);
+  color: var(--rs-text);
+}
+.rs-code-editor--square[data-v-05d9a5e1] {
+  border-radius: 0;
+}
+.rs-code-editor--embedded[data-v-05d9a5e1] {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+.rs-code-editor__toolbar[data-v-05d9a5e1] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rs-space-xs) var(--rs-space-sm);
+  border-bottom: 1px solid var(--rs-border-subtle);
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-code-editor__body[data-v-05d9a5e1] {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.rs-code-editor__surface[data-v-05d9a5e1] {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.rs-code-editor--embedded .rs-code-editor__body[data-v-05d9a5e1],
+.rs-code-editor--embedded .rs-code-editor__surface[data-v-05d9a5e1] {
+  height: 100%;
+}
+.rs-code-editor__inline-edit[data-v-05d9a5e1] {
+  position: absolute;
+  left: 50%;
+  top: 12%;
+  z-index: 5;
+  width: min(28rem, calc(100% - 2rem));
+  transform: translateX(-50%);
+  padding: 0.75rem;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius);
+  background: var(--rs-surface-elevated);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
+}
+.rs-code-editor__inline-edit-head[data-v-05d9a5e1] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-semibold);
+  color: var(--rs-foreground);
+}
+.rs-code-editor__inline-edit-head kbd[data-v-05d9a5e1] {
+  padding: 0.1rem 0.35rem;
+  border-radius: 4px;
+  border: 1px solid var(--rs-border-subtle);
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-muted);
+}
+.rs-code-editor__inline-preview[data-v-05d9a5e1] {
+  margin: 0 0 0.5rem;
+  padding: 0.35rem 0.5rem;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--rs-muted) 8%, transparent);
+  color: var(--rs-muted);
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
+  font-size: var(--rs-font-size-xs);
+  line-height: 1.4;
+  white-space: pre-wrap;
+  max-height: 4.5rem;
+  overflow: hidden;
+}
+.rs-code-editor__inline-input[data-v-05d9a5e1] {
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 0.5rem;
+  padding: 0.45rem 0.55rem;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm, 4px);
+  background: var(--rs-input-bg);
+  color: var(--rs-foreground);
+  font-size: var(--rs-font-size-sm);
+}
+.rs-code-editor__inline-input[data-v-05d9a5e1]:focus {
+  outline: 2px solid color-mix(in srgb, var(--rs-primary) 35%, transparent);
+  outline-offset: 1px;
+}
+.rs-code-editor__inline-error[data-v-05d9a5e1] {
+  margin: -0.25rem 0 0.5rem;
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-danger);
+}
+.rs-code-editor__inline-actions[data-v-05d9a5e1] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.35rem;
+}
+.rs-code-editor__inline-btn[data-v-05d9a5e1] {
+  padding: 0.3rem 0.65rem;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm, 4px);
+  background: transparent;
+  color: var(--rs-foreground);
+  font-size: var(--rs-font-size-xs);
+  cursor: pointer;
+}
+.rs-code-editor__inline-btn--primary[data-v-05d9a5e1] {
+  border-color: var(--rs-primary);
+  background: var(--rs-primary);
+  color: var(--rs-primary-foreground, #fff);
+}
+.rs-code-editor__inline-btn[data-v-05d9a5e1]:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.rs-code-editor__surface--disabled[data-v-05d9a5e1] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.rs-code-editor__surface[data-v-05d9a5e1] .cm-editor {
+  height: 100%;
+  background: var(--rs-surface-elevated) !important;
+}
+.rs-code-editor__surface[data-v-05d9a5e1] .cm-scroller {
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
+  font-size: var(--rs-code-font-size, var(--rs-font-size-sm));
+  line-height: var(--rs-code-line-height, var(--rs-line-height-relaxed));
+}
+.rs-code-editor__surface[data-v-05d9a5e1] .cm-gutters {
+  background: color-mix(in srgb, var(--rs-surface-elevated) 85%, var(--rs-border) 15%) !important;
+  border-right-color: var(--rs-border-subtle) !important;
+  color: var(--rs-muted);
+}
+.rs-code-editor--embedded .rs-code-editor__surface[data-v-05d9a5e1] .cm-editor {
+  height: 100%;
+  background: transparent !important;
+}
+.rs-code-editor--no-fold .rs-code-editor__surface[data-v-05d9a5e1] .cm-foldGutter {
+  display: none !important;
+  width: 0 !important;
+  min-width: 0 !important;
+}
+.rs-code-editor--gutter-fixed .rs-code-editor__surface[data-v-05d9a5e1] .cm-gutters {
+  min-width: var(--rs-code-editor-gutter-width);
+}
+.rs-code-editor--gutter-fixed.rs-code-editor--no-fold .rs-code-editor__surface[data-v-05d9a5e1] .cm-lineNumbers {
+  min-width: var(--rs-code-editor-gutter-width);
+}
+.rs-code-editor--gutter-fixed.rs-code-editor--no-fold .rs-code-editor__surface[data-v-05d9a5e1] .cm-lineNumbers .cm-gutterElement {
+  min-width: calc(var(--rs-code-editor-gutter-width) - 8px);
+}
+.rs-code-editor__surface[data-v-05d9a5e1] .cm-content {
+  color: var(--rs-foreground);
+}
+.rs-code-editor__surface[data-v-05d9a5e1] .cm-lintRange-error {
+  background: color-mix(in srgb, var(--rs-danger) 12%, transparent);
+}
+.rs-code-editor__surface[data-v-05d9a5e1] .cm-lintRange-warning {
+  background: color-mix(in srgb, var(--rs-warning) 12%, transparent);
+}
+.rs-code-editor__surface[data-v-05d9a5e1] .cm-lintRange-info {
+  background: color-mix(in srgb, var(--rs-info) 10%, transparent);
+}
+.rs-code-editor__surface[data-v-05d9a5e1] .rs-code-editor__ghost {
+  color: var(--rs-muted);
+  opacity: 0.55;
+  pointer-events: none;
+}
+.rs-code-editor__surface[data-v-05d9a5e1] .rs-code-editor__hover {
+  max-width: 28rem;
+  padding: 0.45rem 0.65rem;
+  border-radius: var(--rs-radius-sm, 4px);
+  border: 1px solid var(--rs-border);
+  background: var(--rs-surface-elevated);
+  color: var(--rs-foreground);
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
+  font-size: var(--rs-font-size-xs);
+  line-height: 1.45;
+  white-space: pre-wrap;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+.rs-code-editor__diagnostics[data-v-05d9a5e1] {
+  margin: 0;
+  padding: var(--rs-space-sm) var(--rs-space-md);
+  border-top: 1px solid var(--rs-border-subtle);
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+  list-style: none;
+}
+.rs-code-editor__diagnostic--error[data-v-05d9a5e1] {
+  color: var(--rs-danger);
+}
+.rs-code-editor__diagnostic--warning[data-v-05d9a5e1] {
+  color: var(--rs-warning);
+}
+.rs-code-editor__diagnostic--info[data-v-05d9a5e1] {
+  color: var(--rs-info);
+}