@guodun/antdv 1.2.4 → 1.2.5

package/dist/es/components/pro-contract-template-designer/src/DesignerPage.vue.mjs

@@ -0,0 +1,447 @@
+import { CONTRACT_TEXT_STYLE_PRESETS as e } from "./constants.mjs";
+import { buildTemplateVariableAttrs as t } from "./extensions/template-variable.mjs";
+import { createEditorExtensions as n } from "./extensions/editor-extensions.mjs";
+import { DEFAULT_FIELD_STYLE as r, resolvePageSize as i, splitPageContentByMeasurements as a } from "./composables/use-template-designer.mjs";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, openBlock as g, ref as _, toDisplayString as v, unref as y, watch as b, withModifiers as x } from "vue";
+import { EditorContent as S, useEditor as ee } from "@tiptap/vue-3";
+import { generateHTML as C } from "@tiptap/core";
+//#region src/components/pro-contract-template-designer/src/DesignerPage.vue?vue&type=script&setup=true&lang.ts
+var w = { class: "gd-contract-template-designer__page-title" }, T = /* @__PURE__ */ d({
+	name: "ProContractTemplateDesignerPage",
+	__name: "DesignerPage",
+	props: {
+		page: {},
+		pageIndex: {},
+		pageSize: {},
+		variables: {},
+		selectedVariableKey: { default: "" },
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		zoom: { default: 1 }
+	},
+	emits: [
+		"page-update",
+		"variable-drop",
+		"variable-select",
+		"editor-focus",
+		"editor-state-change",
+		"editor-context-menu"
+	],
+	setup(d, { expose: T, emit: te }) {
+		let E = d, D = te, O = o(() => E.readonly || E.disabled), k = _(), A = n("请输入合同正文，或从 WPS / Word 粘贴合同内容");
+		function j(e) {
+			if (typeof window > "u") return e;
+			let t = new DOMParser().parseFromString(e, "text/html");
+			return t.querySelectorAll("script,style,meta,link").forEach((e) => e.remove()), t.querySelectorAll("*").forEach((e) => {
+				e.removeAttribute("class"), e.removeAttribute("lang"), e.removeAttribute("width"), e.removeAttribute("height"), e.removeAttribute("onload"), e.removeAttribute("onclick");
+				let t = [
+					"font-weight",
+					"font-style",
+					"text-decoration",
+					"text-align",
+					"color",
+					"font-size",
+					"font-family"
+				].map((t) => {
+					let n = e.style.getPropertyValue(t);
+					return n ? `${t}:${n}` : "";
+				}).filter(Boolean).join(";");
+				t ? e.setAttribute("style", t) : e.removeAttribute("style");
+			}), t.body.innerHTML;
+		}
+		let M = ee({
+			content: E.page.contentHtml,
+			editable: !O.value,
+			extensions: A,
+			editorProps: {
+				attributes: { class: "gd-contract-template-designer__editor-prose" },
+				transformPastedHTML: j,
+				handleClick: (e, t, n) => {
+					let r = (n.target instanceof HTMLElement ? n.target.closest("[data-template-variable]") : void 0)?.dataset.key;
+					if (!r) return !1;
+					let i = E.variables.find((e) => e.key === r);
+					return i ? (D("variable-select", i.key), !0) : !1;
+				},
+				handleDOMEvents: { contextmenu: (e, t) => O.value || (t.target instanceof HTMLElement ? t.target : null)?.closest("[data-template-variable]") || !P().trim() ? !1 : (t.preventDefault(), D("editor-context-menu", {
+					pageId: E.page.id,
+					clientX: t.clientX,
+					clientY: t.clientY
+				}), !0) }
+			},
+			onUpdate: ({ editor: e }) => {
+				D("page-update", {
+					...E.page,
+					contentHtml: e.getHTML(),
+					contentJson: e.getJSON()
+				}), R();
+			},
+			onFocus: () => {
+				D("editor-focus", E.page.id), R();
+			},
+			onBlur: R,
+			onSelectionUpdate: R,
+			onCreate: R
+		});
+		function N(e) {
+			if (typeof e == "number" && Number.isFinite(e)) return e;
+			let t = String(e || "").match(/(\d+(\.\d+)?)/);
+			return t ? Number(t[1]) : void 0;
+		}
+		function P() {
+			if (!M.value) return "";
+			let { from: e, to: t } = M.value.state.selection;
+			return M.value.state.doc.textBetween(e, t, "\n");
+		}
+		function F() {
+			return M.value ? [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6
+			].find((e) => M.value?.isActive("heading", { level: e })) : void 0;
+		}
+		function I() {
+			return M.value?.isActive("heading", { textAlign: "center" }) || M.value?.isActive("paragraph", { textAlign: "center" }) ? "center" : M.value?.isActive("heading", { textAlign: "right" }) || M.value?.isActive("paragraph", { textAlign: "right" }) ? "right" : "left";
+		}
+		function L() {
+			let e = M.value;
+			if (!e) return {
+				isFocused: !1,
+				canUndo: !1,
+				canRedo: !1,
+				isBold: !1,
+				isItalic: !1,
+				isUnderline: !1,
+				isBulletList: !1,
+				isOrderedList: !1,
+				isTableActive: !1,
+				textAlign: "left"
+			};
+			let t = e.getAttributes("textStyle");
+			return {
+				isFocused: e.isFocused,
+				canUndo: e.can().undo(),
+				canRedo: e.can().redo(),
+				isBold: e.isActive("bold"),
+				isItalic: e.isActive("italic"),
+				isUnderline: e.isActive("underline"),
+				isBulletList: e.isActive("bulletList"),
+				isOrderedList: e.isActive("orderedList"),
+				isTableActive: e.isActive("table"),
+				currentHeadingLevel: F(),
+				textAlign: I(),
+				fontFamily: typeof t.fontFamily == "string" ? t.fontFamily : void 0,
+				fontSize: N(t.fontSize),
+				textColor: typeof t.color == "string" ? t.color : void 0,
+				selectionText: P()
+			};
+		}
+		function R() {
+			D("editor-state-change", E.page.id, L());
+		}
+		b(O, (e) => {
+			M.value?.setEditable(!e), R();
+		}), b(() => E.page.contentHtml, (e) => {
+			!M.value || e === M.value.getHTML() || (M.value.commands.setContent(e || "<p></p>", { emitUpdate: !1 }), R());
+		});
+		let z = o(() => ({
+			width: `${E.pageSize.width}px`,
+			height: `${E.pageSize.height}px`,
+			"--gd-contract-page-content-height": `${Y()}px`
+		})), B = o(() => Math.max(.1, E.zoom || 1)), V = o(() => ({
+			width: `${Math.ceil((E.pageSize.width + 10) * B.value)}px`,
+			height: `${Math.ceil((E.pageSize.height + 40) * B.value)}px`
+		})), H = o(() => ({ "--gd-contract-page-zoom": String(B.value) })), U = o(() => i(E.pageSize));
+		function W(e) {
+			if (e.preventDefault(), e.stopPropagation(), O.value) return;
+			let t = e.dataTransfer?.getData("application/x-gd-contract-variable");
+			t && D("variable-drop", E.page.id, t, e.clientX, e.clientY);
+		}
+		function ne(e, n) {
+			if (!M.value) return;
+			let r = {
+				type: "templateVariable",
+				attrs: t(e)
+			}, i = n ? M.value.view.posAtCoords(n)?.pos : void 0;
+			return typeof i == "number" ? (M.value.chain().focus().insertContentAt(i, r).run(), $(), G()) : (M.value?.chain().focus().insertContent(r).run(), $(), G());
+		}
+		function G() {
+			return {
+				...E.page,
+				pageSize: U.value,
+				contentHtml: M.value?.getHTML() ?? E.page.contentHtml,
+				contentJson: M.value?.getJSON() ?? E.page.contentJson
+			};
+		}
+		function K(e) {
+			return {
+				type: "doc",
+				content: e.length ? e : [{ type: "paragraph" }]
+			};
+		}
+		function q(e) {
+			return e?.length ? e.length === 1 && e[0].type === "paragraph" && !e[0].content?.length : !0;
+		}
+		function J(e) {
+			return C(K(e), A);
+		}
+		function Y() {
+			let e = k.value;
+			if (!e) return E.pageSize.height - 108;
+			let t = window.getComputedStyle(e), n = Number.parseFloat(t.paddingTop) || 0, r = Number.parseFloat(t.paddingBottom) || 0;
+			return Math.max(120, E.pageSize.height - n - r);
+		}
+		function X() {
+			let e = k.value?.querySelector(".gd-contract-template-designer__editor-prose");
+			if (!e) return [];
+			let t = e.getBoundingClientRect(), n = B.value;
+			return Array.from(e.children).map((e) => {
+				let r = e.getBoundingClientRect();
+				return {
+					top: (r.top - t.top) / n,
+					height: r.height / n
+				};
+			});
+		}
+		function Z() {
+			if (!M.value) return;
+			let e = a(M.value.getJSON().content, X(), Y());
+			if (e) return M.value.commands.setContent(K(e.currentContent), { emitUpdate: !1 }), {
+				page: G(),
+				overflowContent: e.overflowContent,
+				overflowHtml: J(e.overflowContent)
+			};
+		}
+		function re(e) {
+			if (!M.value || !e.length) return;
+			let t = M.value.getJSON().content, n = [...e, ...q(t) ? [] : t ?? []];
+			return M.value.commands.setContent(K(n), { emitUpdate: !1 }), G();
+		}
+		function ie(e, n = e.key) {
+			if (!M.value) return;
+			let r = t(e), i = !1;
+			return M.value.commands.command(({ tr: e, state: t, dispatch: a }) => (t.doc.descendants((t, a) => {
+				t.type.name !== "templateVariable" && t.type.name !== "templateField" || t.attrs.key !== n || (e.setNodeMarkup(a, void 0, {
+					...t.attrs,
+					...r
+				}), i = !0);
+			}), i && a?.(e), i)), $(), i ? G() : void 0;
+		}
+		function ae(e) {
+			if (!M.value) return;
+			let t = [];
+			return M.value.commands.command(({ tr: n, state: r, dispatch: i }) => {
+				r.doc.descendants((n, r) => {
+					n.type.name !== "templateVariable" && n.type.name !== "templateField" || n.attrs.key !== e || t.push({
+						from: r,
+						to: r + n.nodeSize
+					});
+				}), t.sort((e, t) => t.from - e.from).forEach((e) => n.delete(e.from, e.to));
+				let a = t.length > 0;
+				return a && i?.(n), a;
+			}), t.length ? G() : void 0;
+		}
+		function Q() {
+			k.value?.querySelectorAll(".gd-contract-template-variable.is-active").forEach((e) => e.classList.remove("is-active"));
+		}
+		function oe(e) {
+			Q();
+			let t = Array.from(k.value?.querySelectorAll("[data-template-variable]") ?? []).find((t) => t.dataset.key === e);
+			return t ? (t.classList.add("is-active"), t.scrollIntoView({
+				behavior: "smooth",
+				block: "center",
+				inline: "center"
+			}), M.value?.commands.focus(), !0) : !1;
+		}
+		function $() {
+			Q(), E.selectedVariableKey && Array.from(k.value?.querySelectorAll("[data-template-variable]") ?? []).find((e) => e.dataset.key === E.selectedVariableKey)?.classList.add("is-active");
+		}
+		function se(t) {
+			return e.find((e) => e.key === t);
+		}
+		function ce(e) {
+			let t = se(e), n = M.value;
+			if (!t || !n) return;
+			let i = n.chain().focus().clearNodes();
+			t.headingLevel ? i.setHeading({ level: t.headingLevel }) : i.setParagraph(), i.unsetAllMarks().unsetTextAlign().unsetFontSize().unsetFontFamily().unsetColor().setTextAlign(t.textAlign).setFontSize(`${t.fontSize}px`).setFontFamily(t.fontFamily || "Noto Serif SC, Source Han Serif SC, Songti SC, STSong, SimSun, serif").setColor(r.color || "#1f2937"), t.bold ? i.setBold() : i.unsetBold(), t.italic ? i.setItalic() : i.unsetItalic(), t.underline ? i.setUnderline() : i.unsetUnderline(), i.run();
+		}
+		b([() => E.selectedVariableKey, () => E.variables], () => {
+			f($);
+		}, {
+			deep: !0,
+			flush: "post"
+		});
+		function le(e) {
+			let t = M.value?.chain().focus();
+			if (t) {
+				switch (e.type) {
+					case "undo":
+						t.undo().run();
+						break;
+					case "redo":
+						t.redo().run();
+						break;
+					case "set-paragraph":
+						t.setParagraph().run();
+						break;
+					case "set-heading":
+						t.setHeading({ level: e.level }).run();
+						break;
+					case "toggle-heading":
+						t.toggleHeading({ level: e.level }).run();
+						break;
+					case "toggle-bold":
+						t.toggleBold().run();
+						break;
+					case "toggle-italic":
+						t.toggleItalic().run();
+						break;
+					case "toggle-underline":
+						t.toggleUnderline().run();
+						break;
+					case "toggle-bullet-list":
+						t.toggleBulletList().run();
+						break;
+					case "toggle-ordered-list":
+						t.toggleOrderedList().run();
+						break;
+					case "set-text-align":
+						t.setTextAlign(e.value).run();
+						break;
+					case "unset-text-align":
+						t.unsetTextAlign().run();
+						break;
+					case "set-color":
+						t.setColor(e.value || "#1f2937").run();
+						break;
+					case "set-font-size":
+						t.setFontSize(`${e.value || 14}px`).run();
+						break;
+					case "unset-font-size":
+						t.unsetFontSize().run();
+						break;
+					case "set-font-family":
+						t.setFontFamily(e.value || "Noto Serif SC, Source Han Serif SC, Songti SC, STSong, SimSun, serif").run();
+						break;
+					case "unset-font-family":
+						t.unsetFontFamily().run();
+						break;
+					case "clear-text-format":
+						t.unsetAllMarks().unsetColor().unsetFontSize().unsetFontFamily().run();
+						break;
+					case "clear-block-format":
+						t.clearNodes().unsetTextAlign().run();
+						break;
+					case "apply-text-style-preset":
+						ce(e.preset);
+						break;
+					case "insert-table":
+						t.insertTable(e.options).run();
+						break;
+					case "add-table-row-before":
+						t.addRowBefore().run();
+						break;
+					case "add-table-row-after":
+						t.addRowAfter().run();
+						break;
+					case "delete-table-row":
+						t.deleteRow().run();
+						break;
+					case "add-table-column-before":
+						t.addColumnBefore().run();
+						break;
+					case "add-table-column-after":
+						t.addColumnAfter().run();
+						break;
+					case "delete-table-column":
+						t.deleteColumn().run();
+						break;
+					case "toggle-table-header-row":
+						t.toggleHeaderRow().run();
+						break;
+					case "toggle-table-header-column":
+						t.toggleHeaderColumn().run();
+						break;
+					case "toggle-table-header-cell":
+						t.toggleHeaderCell().run();
+						break;
+					case "delete-table":
+						t.deleteTable().run();
+						break;
+				}
+				R();
+			}
+		}
+		function ue() {
+			M.value?.commands.focus();
+		}
+		function de() {
+			return M.value?.getJSON();
+		}
+		function fe() {
+			return M.value?.getHTML() ?? E.page.contentHtml;
+		}
+		function pe(e) {
+			let t = E.variables.find((t) => t.id === e || t.key === e), n = t ? Array.from(k.value?.querySelectorAll("[data-template-variable]") ?? []).find((e) => e.dataset.key === t.key) : void 0;
+			$(), n?.scrollIntoView({
+				behavior: "smooth",
+				block: "center"
+			});
+		}
+		function me() {
+			k.value?.scrollIntoView({
+				behavior: "smooth",
+				block: "start",
+				inline: "center"
+			});
+		}
+		return h(() => {
+			M.value?.destroy();
+		}), T({
+			focus: ue,
+			getHTML: fe,
+			getJSON: de,
+			getEditorState: L,
+			insertVariable: ne,
+			updateVariable: ie,
+			removeVariable: ae,
+			splitOverflowContent: Z,
+			prependContent: re,
+			runCommand: le,
+			scrollIntoField: pe,
+			scrollIntoVariable: oe,
+			scrollIntoPage: me
+		}), (e, t) => (g(), l("section", {
+			class: "gd-contract-template-designer__page-shell",
+			style: m(V.value)
+		}, [u("div", {
+			class: p(["gd-contract-template-designer__page-zoom", { "is-active": d.active }]),
+			style: m(H.value)
+		}, [u("header", w, [u("span", null, v(d.page.title || `第 ${d.pageIndex + 1} 页`), 1), u("span", null, "第 " + v(d.pageIndex + 1) + " 页 · " + v(d.pageSize.label || "A4") + " · " + v(d.pageSize.width) + " × " + v(d.pageSize.height), 1)]), u("div", {
+			ref_key: "pageElement",
+			ref: k,
+			class: "gd-contract-template-designer__page",
+			style: m(z.value),
+			onDragover: t[0] ||= x(() => {}, ["prevent"]),
+			onDrop: W,
+			onClick: t[1] ||= (e) => D("editor-focus", d.page.id)
+		}, [y(M) ? (g(), s(y(S), {
+			key: 0,
+			editor: y(M)
+		}, null, 8, ["editor"])) : c("", !0)], 36)], 6)], 4));
+	}
+});
+//#endregion
+export { T as default };

package/dist/es/components/pro-contract-template-designer/src/ProContractTemplateDesigner.mjs

@@ -0,0 +1,5 @@
+import e from "./ProContractTemplateDesigner.vue.mjs";
+//#region src/components/pro-contract-template-designer/src/ProContractTemplateDesigner.vue
+var t = e;
+//#endregion
+export { t as default };