@robot-admin/naive-ui-components 0.4.3 → 0.4.4

package/dist/C_Progress.cjs

@@ -1,4 +1 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_C_Progress = require('./C_Progress.js');
-
-exports.C_Progress = require_C_Progress.C_Progress_default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./C_Progress.js`);exports.C_Progress=e.t;

package/dist/C_Progress.js

@@ -1,3 +1 @@
-import { t as C_Progress_default } from "./C_Progress2.js";
-
-export { C_Progress_default as C_Progress };
+import{t as e}from"./C_Progress2.js";export{e as C_Progress};

package/dist/C_Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Progress.js","names":["isAnimation","showIndicator"],"sources":["../src/components/C_Progress/index.vue","../src/components/C_Progress/index.vue","../src/components/C_Progress/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\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  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\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  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\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  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n"],"mappings":"iiBEmDA,IAAM,EAAQ,EAWR,GAAA,EAAA,EAAA,WAAkB,CAClB,GAAA,EAAA,EAAA,KACJ,MAAM,QAAQ,EAAM,WAAW,CAAG,CAAC,GAAG,EAAM,WAAW,CAAG,EAC3D,CAEK,GAAA,EAAA,EAAA,cAAkC,CAAC,CAAC,EAAM,UAAU,CAEpD,GAAA,EAAA,EAAA,cACG,EAAM,OAAS,kBAClB,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MACF,CAAC,EAAE,MAAM,CACX,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MAAM,GACR,EAAE,MACR,CAEI,GAAA,EAAA,EAAA,eAAgC,CACpC,KAAM,EAAM,KACZ,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,MAAO,EAAM,MACb,iBAAkB,EAAM,iBACxB,UAAW,EAAM,UACjB,gBAAiB,EAAM,gBACvB,OAAQ,EAAM,OACd,mBAAoB,EAAM,mBAC1B,mBAAoB,EAAM,mBAC1B,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,UAAW,EAAM,UACjB,OAAQ,EAAM,OACd,YAAa,EAAM,YACnB,KAAM,EAAM,KACb,EAAE,QAEH,EAAA,EAAA,WACQ,EAAM,WACX,GAAW,CACL,EAAM,YAEA,EAAM,OAAS,mBAAqB,MAAM,QAAQ,EAAO,GAClE,EAAE,MAAQ,CAAC,GAAG,EAAO,EAFrB,EAAE,MAAQ,GAKd,CAAE,UAAW,GAAM,KAAM,GAAM,CAChC,EAED,EAAA,EAAA,eAAgB,CACd,GAAI,EAAM,aAAe,EAAM,OAAS,kBAAmB,CACzD,IAAM,EAAc,MAAM,QAAQ,EAAM,WAAW,CAC/C,EAAM,WAAW,GACjB,EAAM,WAEV,GAAI,EAAc,EAAG,CACnB,IAAM,EAAY,YAAY,KAAK,CAE7B,EAAW,GAAgB,CAC/B,IAAM,EAAU,EAAM,EAChB,EAAW,KAAK,IAAI,EAAU,EAAM,KAAM,EAAE,CAClD,EAAE,MAAQ,KAAK,MAAM,EAAW,EAAY,CAExC,EAAW,GACb,sBAAsB,EAAQ,EAIlC,sBAAsB,EAAQ,IAGlC,yDApHY,EAAA,UAAA,EAAA,EAAA,EAAA,YAPF,EAOE,MAPW,CACpB,WAAY,EAAA,MACZ,WAAYA,EAAAA,uCAEGC,EAAAA,eAAiB,EAAA,MAAA,MAAmB,+BACzB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,YAAA,CAAA,CAAA"}

package/dist/C_Progress2.js

@@ -1,103 +1,2 @@
-import { NProgress } from "naive-ui";
-import { computed, createBlock, createSlots, defineComponent, mergeProps, onMounted, openBlock, ref, renderSlot, unref, useSlots, watch, withCtx } from "vue";
-
-//#region src/components/C_Progress/index.vue?vue&type=script&setup=true&lang.ts
-var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "C_Progress",
-	__name: "index",
-	props: {
-		percentage: { default: 0 },
-		isAnimation: {
-			type: Boolean,
-			default: false
-		},
-		time: { default: 3e3 },
-		type: {},
-		borderRadius: {},
-		circleGap: {},
-		color: {},
-		fillBorderRadius: {},
-		gapDegree: {},
-		gapOffsetDegree: {},
-		height: {},
-		indicatorPlacement: { default: "outside" },
-		indicatorTextColor: {},
-		offsetDegree: {},
-		railColor: {},
-		railStyle: {},
-		showIndicator: {
-			type: Boolean,
-			default: true
-		},
-		status: { default: "default" },
-		strokeWidth: { default: 7 },
-		unit: { default: "%" }
-	},
-	setup(__props) {
-		const props = __props;
-		const slots = useSlots();
-		const p = ref(Array.isArray(props.percentage) ? [...props.percentage] : 0);
-		const hasIndicatorSlot = computed(() => !!slots.indicator);
-		const processedPercentage = computed(() => {
-			return props.type === "multiple-circle" ? Array.isArray(p.value) ? p.value : [p.value] : Array.isArray(p.value) ? p.value[0] : p.value;
-		});
-		const progressProps = computed(() => ({
-			type: props.type,
-			borderRadius: props.borderRadius,
-			circleGap: props.circleGap,
-			color: props.color,
-			fillBorderRadius: props.fillBorderRadius,
-			gapDegree: props.gapDegree,
-			gapOffsetDegree: props.gapOffsetDegree,
-			height: props.height,
-			indicatorPlacement: props.indicatorPlacement,
-			indicatorTextColor: props.indicatorTextColor,
-			offsetDegree: props.offsetDegree,
-			railColor: props.railColor,
-			railStyle: props.railStyle,
-			status: props.status,
-			strokeWidth: props.strokeWidth,
-			unit: props.unit
-		}));
-		watch(() => props.percentage, (newVal) => {
-			if (!props.isAnimation) p.value = newVal;
-			else if (props.type === "multiple-circle" && Array.isArray(newVal)) p.value = [...newVal];
-		}, {
-			immediate: true,
-			deep: true
-		});
-		onMounted(() => {
-			if (props.isAnimation && props.type !== "multiple-circle") {
-				const targetValue = Array.isArray(props.percentage) ? props.percentage[0] : props.percentage;
-				if (targetValue > 0) {
-					const startTime = performance.now();
-					const animate = (now) => {
-						const elapsed = now - startTime;
-						const progress = Math.min(elapsed / props.time, 1);
-						p.value = Math.round(progress * targetValue);
-						if (progress < 1) requestAnimationFrame(animate);
-					};
-					requestAnimationFrame(animate);
-				}
-			}
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(NProgress), mergeProps(progressProps.value, {
-				percentage: processedPercentage.value,
-				processing: _ctx.isAnimation
-			}), createSlots({ _: 2 }, [_ctx.showIndicator && hasIndicatorSlot.value ? {
-				name: "default",
-				fn: withCtx(() => [renderSlot(_ctx.$slots, "indicator")]),
-				key: "0"
-			} : void 0]), 1040, ["percentage", "processing"]);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/C_Progress/index.vue
-var C_Progress_default = index_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-export { C_Progress_default as t };
+import{NProgress as e}from"naive-ui";import{computed as t,createBlock as n,createSlots as r,defineComponent as i,mergeProps as a,onMounted as o,openBlock as s,ref as c,renderSlot as l,unref as u,useSlots as d,watch as f,withCtx as p}from"vue";var m=i({name:`C_Progress`,__name:`index`,props:{percentage:{default:0},isAnimation:{type:Boolean,default:!1},time:{default:3e3},type:{},borderRadius:{},circleGap:{},color:{},fillBorderRadius:{},gapDegree:{},gapOffsetDegree:{},height:{},indicatorPlacement:{default:`outside`},indicatorTextColor:{},offsetDegree:{},railColor:{},railStyle:{},showIndicator:{type:Boolean,default:!0},status:{default:`default`},strokeWidth:{default:7},unit:{default:`%`}},setup(i){let m=i,h=d(),g=c(Array.isArray(m.percentage)?[...m.percentage]:0),_=t(()=>!!h.indicator),v=t(()=>m.type===`multiple-circle`?Array.isArray(g.value)?g.value:[g.value]:Array.isArray(g.value)?g.value[0]:g.value),y=t(()=>({type:m.type,borderRadius:m.borderRadius,circleGap:m.circleGap,color:m.color,fillBorderRadius:m.fillBorderRadius,gapDegree:m.gapDegree,gapOffsetDegree:m.gapOffsetDegree,height:m.height,indicatorPlacement:m.indicatorPlacement,indicatorTextColor:m.indicatorTextColor,offsetDegree:m.offsetDegree,railColor:m.railColor,railStyle:m.railStyle,status:m.status,strokeWidth:m.strokeWidth,unit:m.unit}));return f(()=>m.percentage,e=>{m.isAnimation?m.type===`multiple-circle`&&Array.isArray(e)&&(g.value=[...e]):g.value=e},{immediate:!0,deep:!0}),o(()=>{if(m.isAnimation&&m.type!==`multiple-circle`){let e=Array.isArray(m.percentage)?m.percentage[0]:m.percentage;if(e>0){let t=performance.now(),n=r=>{let i=r-t,a=Math.min(i/m.time,1);g.value=Math.round(a*e),a<1&&requestAnimationFrame(n)};requestAnimationFrame(n)}}}),(t,i)=>(s(),n(u(e),a(y.value,{percentage:v.value,processing:t.isAnimation}),r({_:2},[t.showIndicator&&_.value?{name:`default`,fn:p(()=>[l(t.$slots,`indicator`)]),key:`0`}:void 0]),1040,[`percentage`,`processing`]))}});export{m as t};
 //# sourceMappingURL=C_Progress2.js.map

package/dist/C_Progress2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Progress2.js","names":["isAnimation","showIndicator"],"sources":["../src/components/C_Progress/index.vue","../src/components/C_Progress/index.vue","../src/components/C_Progress/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\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  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\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  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\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  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECmDA,MAAM,QAAQ;EAWd,MAAM,QAAQ,UAAU;EACxB,MAAM,IAAI,IACR,MAAM,QAAQ,MAAM,WAAW,GAAG,CAAC,GAAG,MAAM,WAAW,GAAG,EAC3D;EAED,MAAM,mBAAmB,eAAe,CAAC,CAAC,MAAM,UAAU;EAE1D,MAAM,sBAAsB,eAAe;AACzC,UAAO,MAAM,SAAS,oBAClB,MAAM,QAAQ,EAAE,MAAM,GACpB,EAAE,QACF,CAAC,EAAE,MAAM,GACX,MAAM,QAAQ,EAAE,MAAM,GACpB,EAAE,MAAM,KACR,EAAE;IACR;EAEF,MAAM,gBAAgB,gBAAgB;GACpC,MAAM,MAAM;GACZ,cAAc,MAAM;GACpB,WAAW,MAAM;GACjB,OAAO,MAAM;GACb,kBAAkB,MAAM;GACxB,WAAW,MAAM;GACjB,iBAAiB,MAAM;GACvB,QAAQ,MAAM;GACd,oBAAoB,MAAM;GAC1B,oBAAoB,MAAM;GAC1B,cAAc,MAAM;GACpB,WAAW,MAAM;GACjB,WAAW,MAAM;GACjB,QAAQ,MAAM;GACd,aAAa,MAAM;GACnB,MAAM,MAAM;GACb,EAAE;AAEH,cACQ,MAAM,aACX,WAAW;AACV,OAAI,CAAC,MAAM,YACT,GAAE,QAAQ;YACD,MAAM,SAAS,qBAAqB,MAAM,QAAQ,OAAO,CAClE,GAAE,QAAQ,CAAC,GAAG,OAAO;KAGzB;GAAE,WAAW;GAAM,MAAM;GAAM,CAChC;AAED,kBAAgB;AACd,OAAI,MAAM,eAAe,MAAM,SAAS,mBAAmB;IACzD,MAAM,cAAc,MAAM,QAAQ,MAAM,WAAW,GAC/C,MAAM,WAAW,KACjB,MAAM;AAEV,QAAI,cAAc,GAAG;KACnB,MAAM,YAAY,YAAY,KAAK;KAEnC,MAAM,WAAW,QAAgB;MAC/B,MAAM,UAAU,MAAM;MACtB,MAAM,WAAW,KAAK,IAAI,UAAU,MAAM,MAAM,EAAE;AAClD,QAAE,QAAQ,KAAK,MAAM,WAAW,YAAY;AAE5C,UAAI,WAAW,EACb,uBAAsB,QAAQ;;AAIlC,2BAAsB,QAAQ;;;IAGlC;;uBA5HA,YAQY,MAAA,UAAA,EARZ,WACU,cAOE,OAPW;IACpB,YAAY,oBAAA;IACZ,YAAYA,KAAAA;8BAEGC,KAAAA,iBAAiB,iBAAA;UAAmB;sBACzB,CAAzB,WAAyB,KAAA,QAAA,YAAA"}
+{"version":3,"file":"C_Progress2.js","names":["isAnimation","showIndicator"],"sources":["../src/components/C_Progress/index.vue","../src/components/C_Progress/index.vue","../src/components/C_Progress/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\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  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\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  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\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  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n"],"mappings":"+rBEmDA,IAAM,EAAQ,EAWR,EAAQ,GAAU,CAClB,EAAI,EACR,MAAM,QAAQ,EAAM,WAAW,CAAG,CAAC,GAAG,EAAM,WAAW,CAAG,EAC3D,CAEK,EAAmB,MAAe,CAAC,CAAC,EAAM,UAAU,CAEpD,EAAsB,MACnB,EAAM,OAAS,kBAClB,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MACF,CAAC,EAAE,MAAM,CACX,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MAAM,GACR,EAAE,MACR,CAEI,EAAgB,OAAgB,CACpC,KAAM,EAAM,KACZ,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,MAAO,EAAM,MACb,iBAAkB,EAAM,iBACxB,UAAW,EAAM,UACjB,gBAAiB,EAAM,gBACvB,OAAQ,EAAM,OACd,mBAAoB,EAAM,mBAC1B,mBAAoB,EAAM,mBAC1B,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,UAAW,EAAM,UACjB,OAAQ,EAAM,OACd,YAAa,EAAM,YACnB,KAAM,EAAM,KACb,EAAE,QAEH,MACQ,EAAM,WACX,GAAW,CACL,EAAM,YAEA,EAAM,OAAS,mBAAqB,MAAM,QAAQ,EAAO,GAClE,EAAE,MAAQ,CAAC,GAAG,EAAO,EAFrB,EAAE,MAAQ,GAKd,CAAE,UAAW,GAAM,KAAM,GAAM,CAChC,CAED,MAAgB,CACd,GAAI,EAAM,aAAe,EAAM,OAAS,kBAAmB,CACzD,IAAM,EAAc,MAAM,QAAQ,EAAM,WAAW,CAC/C,EAAM,WAAW,GACjB,EAAM,WAEV,GAAI,EAAc,EAAG,CACnB,IAAM,EAAY,YAAY,KAAK,CAE7B,EAAW,GAAgB,CAC/B,IAAM,EAAU,EAAM,EAChB,EAAW,KAAK,IAAI,EAAU,EAAM,KAAM,EAAE,CAClD,EAAE,MAAQ,KAAK,MAAM,EAAW,EAAY,CAExC,EAAW,GACb,sBAAsB,EAAQ,EAIlC,sBAAsB,EAAQ,IAGlC,aA5HA,EAQY,EAAA,EAAA,CARZ,EACU,EAOE,MAPW,CACpB,WAAY,EAAA,MACZ,WAAYA,EAAAA,uBAEGC,EAAAA,eAAiB,EAAA,MAAA,MAAmB,mBACzB,CAAzB,EAAyB,EAAA,OAAA,YAAA,CAAA,CAAA"}

package/dist/C_QRCode.cjs

@@ -1,5 +1 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_C_QRCode = require('./C_QRCode.js');
-
-exports.C_QRCode = require_C_QRCode.C_QRCode_default;
-exports.useQRCode = require_C_QRCode.useQRCode;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./C_QRCode.js`);exports.C_QRCode=e.t,exports.useQRCode=e.n;

package/dist/C_QRCode.js

@@ -1,3 +1 @@
-import { n as useQRCode, t as C_QRCode_default } from "./C_QRCode2.js";
-
-export { C_QRCode_default as C_QRCode, useQRCode };
+import{n as e,t}from"./C_QRCode2.js";export{t as C_QRCode,e as useQRCode};

package/dist/C_QRCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_QRCode.js","names":["QRCode","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","/* unplugin-vue-components disabled */<!--\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","/* unplugin-vue-components disabled */<!--\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_QRCode2.js

@@ -1,218 +1,2 @@
-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-7a4201b5"]]);
-
-//#endregion
-export { useQRCode as n, C_QRCode_default as t };
+import{t as e}from"./export-helper.js";import{computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,defineComponent as a,normalizeClass as o,normalizeStyle as s,onMounted as c,openBlock as l,ref as u,toDisplayString as d,toRef as f,unref as p,vShow as m,watch as h,withDirectives as g}from"vue";import _ from"qrcode";function v(e,t,n){return new Promise((r,i)=>{let a=e.getContext(`2d`);if(!a)return i(Error(`Canvas context 不可用`));let o=new Image;o.crossOrigin=`anonymous`,o.onload=()=>{let i=t.size??.2,s=Math.floor(n*i),c=t.padding??4,l=t.borderRadius??4,u=(e.width-s)/2,d=(e.height-s)/2;a.save();let f=u-c,p=d-c,m=s+c*2,h=l+c;a.beginPath(),a.moveTo(f+h,p),a.arcTo(f+m,p,f+m,p+m,h),a.arcTo(f+m,p+m,f,p+m,h),a.arcTo(f,p+m,f,p,h),a.arcTo(f,p,f+m,p,h),a.closePath(),a.fillStyle=t.bgColor??`#ffffff`,a.fill(),a.beginPath(),a.moveTo(u+l,d),a.arcTo(u+s,d,u+s,d+s,l),a.arcTo(u+s,d+s,u,d+s,l),a.arcTo(u,d+s,u,d,l),a.arcTo(u,d,u+s,d,l),a.closePath(),a.clip(),a.drawImage(o,u,d,s,s),a.restore(),r()},o.onerror=()=>i(Error(`Logo 加载失败: ${t.src}`)),o.src=t.src})}function y(e,n){let r=u(``),i=u(null),a=u(!1),o=t(()=>{if(n.logo.value){let e=n.errorCorrectionLevel.value;return e===`L`||e===`M`?`Q`:e}return n.errorCorrectionLevel.value}),s=t(()=>({width:n.size.value,margin:n.margin.value,errorCorrectionLevel:o.value,color:{dark:n.color.value,light:n.bgColor.value}}));async function c(){let t=e.value;!t||!n.value.value||(await _.toCanvas(t,n.value.value,s.value),n.logo.value&&await v(t,n.logo.value,n.size.value))}async function l(){if(!n.value.value){r.value=``;return}r.value=await _.toString(n.value.value,{...s.value,type:`svg`})}async function d(){if(n.value.value){a.value=!0,i.value=null;try{n.mode.value===`canvas`?await c():await l()}catch(e){i.value=e instanceof Error?e:Error(String(e)),console.error(`二维码渲染失败:`,e)}finally{a.value=!1}}}async function f(e=`png`,t=.92){if(e===`svg`){let e=await _.toString(n.value.value,{...s.value,type:`svg`});return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`}let r=document.createElement(`canvas`);await _.toCanvas(r,n.value.value,s.value),n.logo.value&&await v(r,n.logo.value,n.size.value);let i=e===`jpeg`?`image/jpeg`:`image/png`;return r.toDataURL(i,t)}async function p(e=`qrcode`,t=`png`){let n=await f(t),r=document.createElement(`a`);r.download=`${e}.${t}`,r.href=n,r.click()}return h([n.value,n.size,n.color,n.bgColor,n.errorCorrectionLevel,n.margin,n.mode,n.logo],()=>d(),{deep:!0}),{svgHtml:r,error:i,loading:a,render:d,toDataURL:f,download:p}}const b={class:`c-qrcode`},x=[`innerHTML`],S={key:0,class:`qrcode-label`};var C=e(a({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:!0},label:{default:``},showLabel:{type:Boolean,default:!1}},emits:[`error`],setup(e,{expose:t,emit:a}){let _=e,v=a,C=u(null),{svgHtml:w,error:T,render:E,toDataURL:D,download:O}=y(C,{value:f(_,`value`),size:f(_,`size`),color:f(_,`color`),bgColor:f(_,`bgColor`),errorCorrectionLevel:f(_,`errorCorrectionLevel`),margin:f(_,`margin`),mode:f(_,`mode`),logo:f(_,`logo`)});return h(T,e=>{e&&v(`error`,e)}),c(()=>E()),t({toDataURL:(e,t)=>D(e,t),download:(e,t)=>O(e,t),refresh:()=>E()}),(e,t)=>(l(),r(`div`,b,[i(`div`,{class:o([`qrcode-wrapper`,{"with-border":e.showBorder}])},[g(i(`canvas`,{ref_key:`canvasRef`,ref:C},null,512),[[m,e.mode===`canvas`]]),e.mode===`svg`?(l(),r(`div`,{key:0,class:`qrcode-svg`,style:s({width:`${e.size}px`,height:`${e.size}px`}),innerHTML:p(w)},null,12,x)):n(`v-if`,!0)],2),e.showLabel&&e.label?(l(),r(`div`,S,d(e.label),1)):n(`v-if`,!0)]))}}),[[`__scopeId`,`data-v-7a4201b5`]]);export{y as n,C as t};
 //# sourceMappingURL=C_QRCode2.js.map

package/dist/C_QRCode2.js.map

@@ -1 +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","/* unplugin-vue-components disabled */<!--\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","/* unplugin-vue-components disabled */<!--\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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"}
+{"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","/* unplugin-vue-components disabled */<!--\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","/* unplugin-vue-components disabled */<!--\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.cjs

@@ -1,8 +1 @@
-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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./C_Icon.js`);const e=require(`./C_Signature.js`);exports.C_Signature=e.t,exports.useSignatureCanvas=e.i,exports.useSignatureExport=e.n,exports.useSignatureHistory=e.r;

package/dist/C_Signature.js

@@ -1,4 +1 @@
-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 };
+import"./C_Icon2.js";import{i as e,n as t,r as n,t as r}from"./C_Signature2.js";export{r as C_Signature,e as useSignatureCanvas,t as useSignatureExport,n as useSignatureHistory};