@robot-admin/naive-ui-components 0.3.0

package/dist/C_QRCode2.js

@@ -0,0 +1,218 @@
+import { t as export_helper_default } from "./export-helper.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, toDisplayString, toRef, unref, vShow, watch, withDirectives } from "vue";
+import QRCode from "qrcode";
+
+//#region src/components/C_QRCode/composables/useQRCode.ts
+function drawLogo(canvas, logo, qrSize) {
+	return new Promise((resolve, reject) => {
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return reject(/* @__PURE__ */ new Error("Canvas context 不可用"));
+		const img = new Image();
+		img.crossOrigin = "anonymous";
+		img.onload = () => {
+			const ratio = logo.size ?? .2;
+			const logoSize = Math.floor(qrSize * ratio);
+			const padding = logo.padding ?? 4;
+			const borderRadius = logo.borderRadius ?? 4;
+			const x = (canvas.width - logoSize) / 2;
+			const y = (canvas.height - logoSize) / 2;
+			ctx.save();
+			const bgX = x - padding;
+			const bgY = y - padding;
+			const bgSize = logoSize + padding * 2;
+			const r = borderRadius + padding;
+			ctx.beginPath();
+			ctx.moveTo(bgX + r, bgY);
+			ctx.arcTo(bgX + bgSize, bgY, bgX + bgSize, bgY + bgSize, r);
+			ctx.arcTo(bgX + bgSize, bgY + bgSize, bgX, bgY + bgSize, r);
+			ctx.arcTo(bgX, bgY + bgSize, bgX, bgY, r);
+			ctx.arcTo(bgX, bgY, bgX + bgSize, bgY, r);
+			ctx.closePath();
+			ctx.fillStyle = logo.bgColor ?? "#ffffff";
+			ctx.fill();
+			ctx.beginPath();
+			ctx.moveTo(x + borderRadius, y);
+			ctx.arcTo(x + logoSize, y, x + logoSize, y + logoSize, borderRadius);
+			ctx.arcTo(x + logoSize, y + logoSize, x, y + logoSize, borderRadius);
+			ctx.arcTo(x, y + logoSize, x, y, borderRadius);
+			ctx.arcTo(x, y, x + logoSize, y, borderRadius);
+			ctx.closePath();
+			ctx.clip();
+			ctx.drawImage(img, x, y, logoSize, logoSize);
+			ctx.restore();
+			resolve();
+		};
+		img.onerror = () => reject(/* @__PURE__ */ new Error(`Logo 加载失败: ${logo.src}`));
+		img.src = logo.src;
+	});
+}
+function useQRCode(canvasRef, options) {
+	const svgHtml = ref("");
+	const error = ref(null);
+	const loading = ref(false);
+	const effectiveLevel = computed(() => {
+		if (options.logo.value) {
+			const level = options.errorCorrectionLevel.value;
+			if (level === "L" || level === "M") return "Q";
+			return level;
+		}
+		return options.errorCorrectionLevel.value;
+	});
+	const qrOptions = computed(() => ({
+		width: options.size.value,
+		margin: options.margin.value,
+		errorCorrectionLevel: effectiveLevel.value,
+		color: {
+			dark: options.color.value,
+			light: options.bgColor.value
+		}
+	}));
+	async function renderCanvas() {
+		const canvas = canvasRef.value;
+		if (!canvas || !options.value.value) return;
+		await QRCode.toCanvas(canvas, options.value.value, qrOptions.value);
+		if (options.logo.value) await drawLogo(canvas, options.logo.value, options.size.value);
+	}
+	async function renderSvg() {
+		if (!options.value.value) {
+			svgHtml.value = "";
+			return;
+		}
+		svgHtml.value = await QRCode.toString(options.value.value, {
+			...qrOptions.value,
+			type: "svg"
+		});
+	}
+	async function render() {
+		if (!options.value.value) return;
+		loading.value = true;
+		error.value = null;
+		try {
+			if (options.mode.value === "canvas") await renderCanvas();
+			else await renderSvg();
+		} catch (e) {
+			error.value = e instanceof Error ? e : new Error(String(e));
+			console.error("二维码渲染失败:", e);
+		} finally {
+			loading.value = false;
+		}
+	}
+	async function toDataURL(type = "png", quality = .92) {
+		if (type === "svg") {
+			const svgStr = await QRCode.toString(options.value.value, {
+				...qrOptions.value,
+				type: "svg"
+			});
+			return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;
+		}
+		const tempCanvas = document.createElement("canvas");
+		await QRCode.toCanvas(tempCanvas, options.value.value, qrOptions.value);
+		if (options.logo.value) await drawLogo(tempCanvas, options.logo.value, options.size.value);
+		const mimeType = type === "jpeg" ? "image/jpeg" : "image/png";
+		return tempCanvas.toDataURL(mimeType, quality);
+	}
+	async function download(filename = "qrcode", type = "png") {
+		const dataUrl = await toDataURL(type);
+		const link = document.createElement("a");
+		link.download = `${filename}.${type}`;
+		link.href = dataUrl;
+		link.click();
+	}
+	watch([
+		options.value,
+		options.size,
+		options.color,
+		options.bgColor,
+		options.errorCorrectionLevel,
+		options.margin,
+		options.mode,
+		options.logo
+	], () => render(), { deep: true });
+	return {
+		svgHtml,
+		error,
+		loading,
+		render,
+		toDataURL,
+		download
+	};
+}
+
+//#endregion
+//#region src/components/C_QRCode/index.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "c-qrcode" };
+const _hoisted_2 = ["innerHTML"];
+const _hoisted_3 = {
+	key: 0,
+	class: "qrcode-label"
+};
+var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "C_QRCode",
+	__name: "index",
+	props: {
+		value: {},
+		size: { default: 200 },
+		color: { default: "#000000" },
+		bgColor: { default: "#FFFFFF" },
+		errorCorrectionLevel: { default: "M" },
+		margin: { default: 2 },
+		mode: { default: "canvas" },
+		logo: { default: void 0 },
+		showBorder: {
+			type: Boolean,
+			default: true
+		},
+		label: { default: "" },
+		showLabel: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["error"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const canvasRef = ref(null);
+		const { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {
+			value: toRef(props, "value"),
+			size: toRef(props, "size"),
+			color: toRef(props, "color"),
+			bgColor: toRef(props, "bgColor"),
+			errorCorrectionLevel: toRef(props, "errorCorrectionLevel"),
+			margin: toRef(props, "margin"),
+			mode: toRef(props, "mode"),
+			logo: toRef(props, "logo")
+		});
+		watch(error, (e) => {
+			if (e) emit("error", e);
+		});
+		onMounted(() => render());
+		__expose({
+			toDataURL: (type, quality) => toDataURL(type, quality),
+			download: (filename, type) => download(filename, type),
+			refresh: () => render()
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", { class: normalizeClass(["qrcode-wrapper", { "with-border": _ctx.showBorder }]) }, [withDirectives(createElementVNode("canvas", {
+				ref_key: "canvasRef",
+				ref: canvasRef
+			}, null, 512), [[vShow, _ctx.mode === "canvas"]]), _ctx.mode === "svg" ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "qrcode-svg",
+				style: normalizeStyle({
+					width: `${_ctx.size}px`,
+					height: `${_ctx.size}px`
+				}),
+				innerHTML: unref(svgHtml)
+			}, null, 12, _hoisted_2)) : createCommentVNode("v-if", true)], 2), _ctx.showLabel && _ctx.label ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(_ctx.label), 1)) : createCommentVNode("v-if", true)]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/C_QRCode/index.vue
+var C_QRCode_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-09a8468f"]]);
+
+//#endregion
+export { useQRCode as n, C_QRCode_default as t };
+//# sourceMappingURL=C_QRCode2.js.map

package/dist/C_QRCode2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_QRCode2.js","names":["showBorder","mode","size","showLabel","label"],"sources":["../src/components/C_QRCode/composables/useQRCode.ts","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue"],"sourcesContent":["import { ref, computed, watch } from \"vue\";\r\nimport QRCode from \"qrcode\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n  ErrorCorrectionLevel,\r\n  ExportType,\r\n  LogoOptions,\r\n  RenderMode,\r\n} from \"../types\";\r\n\r\ninterface UseQRCodeOptions {\r\n  value: Ref<string>;\r\n  size: Ref<number>;\r\n  color: Ref<string>;\r\n  bgColor: Ref<string>;\r\n  errorCorrectionLevel: Ref<ErrorCorrectionLevel>;\r\n  margin: Ref<number>;\r\n  mode: Ref<RenderMode>;\r\n  logo: Ref<LogoOptions | undefined>;\r\n}\r\n\r\nfunction drawLogo(\r\n  canvas: HTMLCanvasElement,\r\n  logo: LogoOptions,\r\n  qrSize: number,\r\n): Promise<void> {\r\n  return new Promise((resolve, reject) => {\r\n    const ctx = canvas.getContext(\"2d\");\r\n    if (!ctx) return reject(new Error(\"Canvas context 不可用\"));\r\n\r\n    const img = new Image();\r\n    img.crossOrigin = \"anonymous\";\r\n    img.onload = () => {\r\n      const ratio = logo.size ?? 0.2;\r\n      const logoSize = Math.floor(qrSize * ratio);\r\n      const padding = logo.padding ?? 4;\r\n      const borderRadius = logo.borderRadius ?? 4;\r\n\r\n      const x = (canvas.width - logoSize) / 2;\r\n      const y = (canvas.height - logoSize) / 2;\r\n\r\n      ctx.save();\r\n      const bgX = x - padding;\r\n      const bgY = y - padding;\r\n      const bgSize = logoSize + padding * 2;\r\n      const r = borderRadius + padding;\r\n\r\n      ctx.beginPath();\r\n      ctx.moveTo(bgX + r, bgY);\r\n      ctx.arcTo(bgX + bgSize, bgY, bgX + bgSize, bgY + bgSize, r);\r\n      ctx.arcTo(bgX + bgSize, bgY + bgSize, bgX, bgY + bgSize, r);\r\n      ctx.arcTo(bgX, bgY + bgSize, bgX, bgY, r);\r\n      ctx.arcTo(bgX, bgY, bgX + bgSize, bgY, r);\r\n      ctx.closePath();\r\n      ctx.fillStyle = logo.bgColor ?? \"#ffffff\";\r\n      ctx.fill();\r\n\r\n      ctx.beginPath();\r\n      ctx.moveTo(x + borderRadius, y);\r\n      ctx.arcTo(x + logoSize, y, x + logoSize, y + logoSize, borderRadius);\r\n      ctx.arcTo(x + logoSize, y + logoSize, x, y + logoSize, borderRadius);\r\n      ctx.arcTo(x, y + logoSize, x, y, borderRadius);\r\n      ctx.arcTo(x, y, x + logoSize, y, borderRadius);\r\n      ctx.closePath();\r\n      ctx.clip();\r\n      ctx.drawImage(img, x, y, logoSize, logoSize);\r\n      ctx.restore();\r\n\r\n      resolve();\r\n    };\r\n    img.onerror = () => reject(new Error(`Logo 加载失败: ${logo.src}`));\r\n    img.src = logo.src;\r\n  });\r\n}\r\n\r\nexport function useQRCode(\r\n  canvasRef: Ref<HTMLCanvasElement | null>,\r\n  options: UseQRCodeOptions,\r\n) {\r\n  const svgHtml = ref(\"\");\r\n  const error = ref<Error | null>(null);\r\n  const loading = ref(false);\r\n\r\n  const effectiveLevel = computed<ErrorCorrectionLevel>(() => {\r\n    if (options.logo.value) {\r\n      const level = options.errorCorrectionLevel.value;\r\n      if (level === \"L\" || level === \"M\") return \"Q\";\r\n      return level;\r\n    }\r\n    return options.errorCorrectionLevel.value;\r\n  });\r\n\r\n  const qrOptions = computed(() => ({\r\n    width: options.size.value,\r\n    margin: options.margin.value,\r\n    errorCorrectionLevel: effectiveLevel.value,\r\n    color: {\r\n      dark: options.color.value,\r\n      light: options.bgColor.value,\r\n    },\r\n  }));\r\n\r\n  async function renderCanvas() {\r\n    const canvas = canvasRef.value;\r\n    if (!canvas || !options.value.value) return;\r\n    await QRCode.toCanvas(canvas, options.value.value, qrOptions.value);\r\n    if (options.logo.value) {\r\n      await drawLogo(canvas, options.logo.value, options.size.value);\r\n    }\r\n  }\r\n\r\n  async function renderSvg() {\r\n    if (!options.value.value) {\r\n      svgHtml.value = \"\";\r\n      return;\r\n    }\r\n    const svgString = await QRCode.toString(options.value.value, {\r\n      ...qrOptions.value,\r\n      type: \"svg\",\r\n    });\r\n    svgHtml.value = svgString;\r\n  }\r\n\r\n  async function render() {\r\n    if (!options.value.value) return;\r\n    loading.value = true;\r\n    error.value = null;\r\n    try {\r\n      if (options.mode.value === \"canvas\") {\r\n        await renderCanvas();\r\n      } else {\r\n        await renderSvg();\r\n      }\r\n    } catch (e) {\r\n      error.value = e instanceof Error ? e : new Error(String(e));\r\n      console.error(\"二维码渲染失败:\", e);\r\n    } finally {\r\n      loading.value = false;\r\n    }\r\n  }\r\n\r\n  async function toDataURL(\r\n    type: ExportType = \"png\",\r\n    quality = 0.92,\r\n  ): Promise<string> {\r\n    if (type === \"svg\") {\r\n      const svgStr = await QRCode.toString(options.value.value, {\r\n        ...qrOptions.value,\r\n        type: \"svg\",\r\n      });\r\n      return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;\r\n    }\r\n    const tempCanvas = document.createElement(\"canvas\");\r\n    await QRCode.toCanvas(tempCanvas, options.value.value, qrOptions.value);\r\n    if (options.logo.value) {\r\n      await drawLogo(tempCanvas, options.logo.value, options.size.value);\r\n    }\r\n    const mimeType = type === \"jpeg\" ? \"image/jpeg\" : \"image/png\";\r\n    return tempCanvas.toDataURL(mimeType, quality);\r\n  }\r\n\r\n  async function download(filename = \"qrcode\", type: ExportType = \"png\") {\r\n    const dataUrl = await toDataURL(type);\r\n    const link = document.createElement(\"a\");\r\n    link.download = `${filename}.${type}`;\r\n    link.href = dataUrl;\r\n    link.click();\r\n  }\r\n\r\n  watch(\r\n    [\r\n      options.value,\r\n      options.size,\r\n      options.color,\r\n      options.bgColor,\r\n      options.errorCorrectionLevel,\r\n      options.margin,\r\n      options.mode,\r\n      options.logo,\r\n    ],\r\n    () => render(),\r\n    { deep: true },\r\n  );\r\n\r\n  return { svgHtml, error, loading, render, toDataURL, download };\r\n}\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-qrcode\">\r\n    <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n      <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n      <div\r\n        v-if=\"mode === 'svg'\"\r\n        class=\"qrcode-svg\"\r\n        :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n        v-html=\"svgHtml\"\r\n      />\r\n    </div>\r\n    <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n      {{ label }}\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n  ErrorCorrectionLevel,\r\n  ExportType,\r\n  LogoOptions,\r\n  QRCodeExpose,\r\n  RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n  value: string;\r\n  size?: number;\r\n  color?: string;\r\n  bgColor?: string;\r\n  errorCorrectionLevel?: ErrorCorrectionLevel;\r\n  margin?: number;\r\n  mode?: RenderMode;\r\n  logo?: LogoOptions;\r\n  showBorder?: boolean;\r\n  label?: string;\r\n  showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  size: 200,\r\n  color: \"#000000\",\r\n  bgColor: \"#FFFFFF\",\r\n  errorCorrectionLevel: \"M\",\r\n  margin: 2,\r\n  mode: \"canvas\",\r\n  logo: undefined,\r\n  showBorder: true,\r\n  label: \"\",\r\n  showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n  value: toRef(props, \"value\"),\r\n  size: toRef(props, \"size\"),\r\n  color: toRef(props, \"color\"),\r\n  bgColor: toRef(props, \"bgColor\"),\r\n  errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n  margin: toRef(props, \"margin\"),\r\n  mode: toRef(props, \"mode\"),\r\n  logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n  if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n  toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n  download: (filename?: string, type?: ExportType) => download(filename, type),\r\n  refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-qrcode\">\r\n    <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n      <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n      <div\r\n        v-if=\"mode === 'svg'\"\r\n        class=\"qrcode-svg\"\r\n        :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n        v-html=\"svgHtml\"\r\n      />\r\n    </div>\r\n    <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n      {{ label }}\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n  ErrorCorrectionLevel,\r\n  ExportType,\r\n  LogoOptions,\r\n  QRCodeExpose,\r\n  RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n  value: string;\r\n  size?: number;\r\n  color?: string;\r\n  bgColor?: string;\r\n  errorCorrectionLevel?: ErrorCorrectionLevel;\r\n  margin?: number;\r\n  mode?: RenderMode;\r\n  logo?: LogoOptions;\r\n  showBorder?: boolean;\r\n  label?: string;\r\n  showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  size: 200,\r\n  color: \"#000000\",\r\n  bgColor: \"#FFFFFF\",\r\n  errorCorrectionLevel: \"M\",\r\n  margin: 2,\r\n  mode: \"canvas\",\r\n  logo: undefined,\r\n  showBorder: true,\r\n  label: \"\",\r\n  showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n  value: toRef(props, \"value\"),\r\n  size: toRef(props, \"size\"),\r\n  color: toRef(props, \"color\"),\r\n  bgColor: toRef(props, \"bgColor\"),\r\n  errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n  margin: toRef(props, \"margin\"),\r\n  mode: toRef(props, \"mode\"),\r\n  logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n  if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n  toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n  download: (filename?: string, type?: ExportType) => download(filename, type),\r\n  refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-qrcode\">\r\n    <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n      <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n      <div\r\n        v-if=\"mode === 'svg'\"\r\n        class=\"qrcode-svg\"\r\n        :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n        v-html=\"svgHtml\"\r\n      />\r\n    </div>\r\n    <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n      {{ label }}\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n  ErrorCorrectionLevel,\r\n  ExportType,\r\n  LogoOptions,\r\n  QRCodeExpose,\r\n  RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n  value: string;\r\n  size?: number;\r\n  color?: string;\r\n  bgColor?: string;\r\n  errorCorrectionLevel?: ErrorCorrectionLevel;\r\n  margin?: number;\r\n  mode?: RenderMode;\r\n  logo?: LogoOptions;\r\n  showBorder?: boolean;\r\n  label?: string;\r\n  showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  size: 200,\r\n  color: \"#000000\",\r\n  bgColor: \"#FFFFFF\",\r\n  errorCorrectionLevel: \"M\",\r\n  margin: 2,\r\n  mode: \"canvas\",\r\n  logo: undefined,\r\n  showBorder: true,\r\n  label: \"\",\r\n  showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n  value: toRef(props, \"value\"),\r\n  size: toRef(props, \"size\"),\r\n  color: toRef(props, \"color\"),\r\n  bgColor: toRef(props, \"bgColor\"),\r\n  errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n  margin: toRef(props, \"margin\"),\r\n  mode: toRef(props, \"mode\"),\r\n  logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n  if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n  toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n  download: (filename?: string, type?: ExportType) => download(filename, type),\r\n  refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}

package/dist/C_Signature-zhHCbra9.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Signature-zhHCbra9.css","names":[],"sources":["../src/components/C_Signature/index.vue?vue&type=style&index=0&scoped=4f40e616&lang.scss"],"sourcesContent":["/* 电子签名组件样式 */\n.c-signature[data-v-4f40e616] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n}\n.c-signature .signature-toolbar[data-v-4f40e616] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  background: var(--c-bg-card, #fff);\n  border: 1px solid var(--c-border, #e1e4e8);\n  border-radius: var(--c-radius, 6px);\n  flex-wrap: wrap;\n}\n.c-signature .signature-toolbar .toolbar-section[data-v-4f40e616] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.c-signature .signature-toolbar .toolbar-section.divider[data-v-4f40e616] {\n  width: 1px;\n  height: 24px;\n  background: var(--c-border, #e1e4e8);\n  margin: 0 4px;\n}\n.c-signature .signature-toolbar .toolbar-section .section-label[data-v-4f40e616] {\n  font-size: 13px;\n  color: var(--c-text-3, #999);\n  font-weight: 500;\n}\n.c-signature .signature-canvas-wrapper[data-v-4f40e616] {\n  position: relative;\n  border: 1px solid var(--c-border, #e1e4e8);\n  border-radius: var(--c-radius, 6px);\n  overflow: hidden;\n  background: var(--c-bg, #fff);\n  transition: border-color 0.3s;\n}\n.c-signature .signature-canvas-wrapper[data-v-4f40e616]:hover {\n  border-color: var(--c-primary, #409eff);\n}\n.c-signature .signature-canvas-wrapper.disabled[data-v-4f40e616] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  border-color: var(--c-border, #e1e4e8);\n}\n.c-signature .signature-canvas-wrapper.readonly[data-v-4f40e616] {\n  cursor: default;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas[data-v-4f40e616] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  cursor: crosshair;\n  touch-action: none;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas.disabled[data-v-4f40e616], .c-signature .signature-canvas-wrapper .signature-canvas.readonly[data-v-4f40e616] {\n  cursor: not-allowed;\n}\n.c-signature .signature-canvas-wrapper .canvas-placeholder[data-v-4f40e616] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--c-text-4, #ccc);\n  font-size: 14px;\n  pointer-events: none;\n  user-select: none;\n}\n.c-signature .signature-actions[data-v-4f40e616] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_Signature.cjs

@@ -0,0 +1,8 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+require('./C_Icon.js');
+const require_C_Signature = require('./C_Signature.js');
+
+exports.C_Signature = require_C_Signature.C_Signature_default;
+exports.useSignatureCanvas = require_C_Signature.useSignatureCanvas;
+exports.useSignatureExport = require_C_Signature.useSignatureExport;
+exports.useSignatureHistory = require_C_Signature.useSignatureHistory;

package/dist/C_Signature.d.cts

@@ -0,0 +1,2 @@
+import { a as EraserConfig, c as PenMode, d as SignatureExpose, f as SignaturePoint, g as WatermarkConfig, h as SignatureStroke, i as _default, l as SignatureEmits, m as SignatureSnapshot, n as useSignatureExport, o as ExportOptions, p as SignatureProps, r as useSignatureCanvas, s as PenConfig, t as useSignatureHistory, u as SignatureExportFormat } from "./useSignatureHistory.js";
+export { _default as C_Signature, type EraserConfig, type ExportOptions, type PenConfig, type PenMode, type SignatureEmits, type SignatureExportFormat, type SignatureExpose, type SignaturePoint, type SignatureProps, type SignatureSnapshot, type SignatureStroke, type WatermarkConfig, useSignatureCanvas, useSignatureExport, useSignatureHistory };

package/dist/C_Signature.d.ts

@@ -0,0 +1,2 @@
+import { a as EraserConfig, c as PenMode, d as SignatureExpose, f as SignaturePoint, g as WatermarkConfig, h as SignatureStroke, i as _default, l as SignatureEmits, m as SignatureSnapshot, n as useSignatureExport, o as ExportOptions, p as SignatureProps, r as useSignatureCanvas, s as PenConfig, t as useSignatureHistory, u as SignatureExportFormat } from "./useSignatureHistory.js";
+export { _default as C_Signature, type EraserConfig, type ExportOptions, type PenConfig, type PenMode, type SignatureEmits, type SignatureExportFormat, type SignatureExpose, type SignaturePoint, type SignatureProps, type SignatureSnapshot, type SignatureStroke, type WatermarkConfig, useSignatureCanvas, useSignatureExport, useSignatureHistory };

package/dist/C_Signature.js

@@ -0,0 +1,4 @@
+import "./C_Icon2.js";
+import { i as useSignatureCanvas, n as useSignatureExport, r as useSignatureHistory, t as C_Signature_default } from "./C_Signature2.js";
+
+export { C_Signature_default as C_Signature, useSignatureCanvas, useSignatureExport, useSignatureHistory };