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

package/dist/C_ImageCropper2.js

@@ -1,723 +1,2 @@
-import { t as C_Icon_default } from "./C_Icon2.js";
-import { t as export_helper_default } from "./export-helper.js";
-import { NButton, NButtonGroup, NDivider, NModal, NSpace, NTooltip } from "naive-ui";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
-import { VueCropper } from "vue-cropper";
-
-//#region src/components/C_ImageCropper/composables/useCropperCore.ts
-function useCropperCore(options = {}) {
-	const cropperRef = ref(null);
-	function rotateLeft() {
-		cropperRef.value?.rotateLeft();
-	}
-	function rotateRight() {
-		cropperRef.value?.rotateRight();
-	}
-	function rotate(angle) {
-		const steps = Math.round(angle / 90);
-		const fn = steps > 0 ? rotateRight : rotateLeft;
-		for (let i = 0; i < Math.abs(steps); i++) fn();
-	}
-	function zoom(scale) {
-		cropperRef.value?.changeScale(scale > 0 ? 1 : -1);
-	}
-	function flipX() {
-		const el = cropperRef.value?.$refs?.img;
-		if (!el) return;
-		const current = el.style.transform || "";
-		if (current.includes("scaleX(-1)")) el.style.transform = current.replace("scaleX(-1)", "scaleX(1)");
-		else el.style.transform = current.replace(/scaleX\([^)]*\)/, "") + " scaleX(-1)";
-	}
-	function flipY() {
-		const el = cropperRef.value?.$refs?.img;
-		if (!el) return;
-		const current = el.style.transform || "";
-		if (current.includes("scaleY(-1)")) el.style.transform = current.replace("scaleY(-1)", "scaleY(1)");
-		else el.style.transform = current.replace(/scaleY\([^)]*\)/, "") + " scaleY(-1)";
-	}
-	function reset() {
-		cropperRef.value?.refresh();
-	}
-	function constrainSize(w, h) {
-		let ow = w;
-		let oh = h;
-		const maxW = options.maxWidth?.value ?? 0;
-		const maxH = options.maxHeight?.value ?? 0;
-		if (maxW > 0 && ow > maxW) {
-			const ratio = maxW / ow;
-			ow = maxW;
-			oh = Math.round(oh * ratio);
-		}
-		if (maxH > 0 && oh > maxH) {
-			const ratio = maxH / oh;
-			oh = maxH;
-			ow = Math.round(ow * ratio);
-		}
-		return {
-			width: ow,
-			height: oh
-		};
-	}
-	function getCropResult() {
-		return new Promise((resolve, reject) => {
-			const cropper = cropperRef.value;
-			if (!cropper) return reject(/* @__PURE__ */ new Error("Cropper not initialized"));
-			const format = options.format?.value ?? "png";
-			const quality = options.quality?.value ?? .92;
-			const mime = format === "jpeg" ? "image/jpeg" : format === "webp" ? "image/webp" : "image/png";
-			cropper.getCropData((base64) => {
-				cropper.getCropBlob((blob) => {
-					const img = new Image();
-					img.onload = () => {
-						const { width, height } = constrainSize(img.width, img.height);
-						if (width !== img.width || height !== img.height) {
-							const canvas = document.createElement("canvas");
-							canvas.width = width;
-							canvas.height = height;
-							canvas.getContext("2d").drawImage(img, 0, 0, width, height);
-							const constrainedBase64 = canvas.toDataURL(mime, quality);
-							canvas.toBlob((constrainedBlob) => {
-								resolve({
-									base64: constrainedBase64,
-									blob: constrainedBlob,
-									width,
-									height,
-									format
-								});
-							}, mime, format === "png" ? void 0 : quality);
-						} else resolve({
-							base64,
-							blob,
-							width: img.width,
-							height: img.height,
-							format
-						});
-					};
-					img.onerror = () => reject(/* @__PURE__ */ new Error("Failed to load crop result"));
-					img.src = base64;
-				});
-			});
-		});
-	}
-	return {
-		cropperRef,
-		rotate,
-		rotateLeft,
-		rotateRight,
-		zoom,
-		flipX,
-		flipY,
-		reset,
-		getCropResult
-	};
-}
-
-//#endregion
-//#region src/components/C_ImageCropper/components/CropperToolbar.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$2 = { class: "cropper-toolbar" };
-var CropperToolbar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "CropperToolbar",
-	props: {
-		currentRatio: {},
-		ratioPresets: {}
-	},
-	emits: [
-		"ratio",
-		"rotate",
-		"flipX",
-		"flipY",
-		"zoom",
-		"reset"
-	],
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$2, [
-				createVNode(unref(NButtonGroup), { size: "small" }, {
-					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.ratioPresets, (item) => {
-						return openBlock(), createBlock(unref(NButton), {
-							key: item.value,
-							type: _ctx.currentRatio === item.value ? "primary" : "default",
-							onClick: ($event) => _ctx.$emit("ratio", item.value)
-						}, {
-							default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
-							_: 2
-						}, 1032, ["type", "onClick"]);
-					}), 128))]),
-					_: 1
-				}),
-				createVNode(unref(NDivider), { vertical: "" }),
-				createVNode(unref(NTooltip), null, {
-					trigger: withCtx(() => [createVNode(unref(NButton), {
-						size: "small",
-						quaternary: "",
-						onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("rotate", -90))
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:rotate-left" })]),
-						_: 1
-					})]),
-					default: withCtx(() => [_cache[7] || (_cache[7] = createTextVNode(" 逆时针旋转 90° ", -1))]),
-					_: 1,
-					__: [7]
-				}),
-				createVNode(unref(NTooltip), null, {
-					trigger: withCtx(() => [createVNode(unref(NButton), {
-						size: "small",
-						quaternary: "",
-						onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("rotate", 90))
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:rotate-right" })]),
-						_: 1
-					})]),
-					default: withCtx(() => [_cache[8] || (_cache[8] = createTextVNode(" 顺时针旋转 90° ", -1))]),
-					_: 1,
-					__: [8]
-				}),
-				createVNode(unref(NDivider), { vertical: "" }),
-				createVNode(unref(NTooltip), null, {
-					trigger: withCtx(() => [createVNode(unref(NButton), {
-						size: "small",
-						quaternary: "",
-						onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("flipX"))
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:flip-horizontal" })]),
-						_: 1
-					})]),
-					default: withCtx(() => [_cache[9] || (_cache[9] = createTextVNode(" 水平翻转 ", -1))]),
-					_: 1,
-					__: [9]
-				}),
-				createVNode(unref(NTooltip), null, {
-					trigger: withCtx(() => [createVNode(unref(NButton), {
-						size: "small",
-						quaternary: "",
-						onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("flipY"))
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:flip-vertical" })]),
-						_: 1
-					})]),
-					default: withCtx(() => [_cache[10] || (_cache[10] = createTextVNode(" 垂直翻转 ", -1))]),
-					_: 1,
-					__: [10]
-				}),
-				createVNode(unref(NDivider), { vertical: "" }),
-				createVNode(unref(NTooltip), null, {
-					trigger: withCtx(() => [createVNode(unref(NButton), {
-						size: "small",
-						quaternary: "",
-						onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("zoom", .1))
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:magnify-plus-outline" })]),
-						_: 1
-					})]),
-					default: withCtx(() => [_cache[11] || (_cache[11] = createTextVNode(" 放大 ", -1))]),
-					_: 1,
-					__: [11]
-				}),
-				createVNode(unref(NTooltip), null, {
-					trigger: withCtx(() => [createVNode(unref(NButton), {
-						size: "small",
-						quaternary: "",
-						onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("zoom", -.1))
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:magnify-minus-outline" })]),
-						_: 1
-					})]),
-					default: withCtx(() => [_cache[12] || (_cache[12] = createTextVNode(" 缩小 ", -1))]),
-					_: 1,
-					__: [12]
-				}),
-				createVNode(unref(NDivider), { vertical: "" }),
-				createVNode(unref(NTooltip), null, {
-					trigger: withCtx(() => [createVNode(unref(NButton), {
-						size: "small",
-						quaternary: "",
-						onClick: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("reset"))
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, { name: "mdi:refresh" })]),
-						_: 1
-					})]),
-					default: withCtx(() => [_cache[13] || (_cache[13] = createTextVNode(" 重置 ", -1))]),
-					_: 1,
-					__: [13]
-				})
-			]);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/C_ImageCropper/components/CropperToolbar.vue
-var CropperToolbar_default = /* @__PURE__ */ export_helper_default(CropperToolbar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ac310c55"]]);
-
-//#endregion
-//#region src/components/C_ImageCropper/components/CropperPreview.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$1 = { class: "cropper-preview" };
-const _hoisted_2$1 = { class: "preview-label" };
-const _hoisted_3$1 = ["src"];
-const _hoisted_4$1 = {
-	key: 1,
-	class: "preview-empty"
-};
-const _hoisted_5$1 = { class: "preview-thumbs" };
-const _hoisted_6$1 = ["src"];
-const _hoisted_7$1 = { class: "preview-thumb__label" };
-var CropperPreview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "CropperPreview",
-	props: {
-		previewData: {},
-		circular: { type: Boolean }
-	},
-	setup(__props) {
-		const props = __props;
-		const mainBoxRef = ref(null);
-		const mainBoxWidth = ref(200);
-		const thumbSizes = [
-			{
-				label: "80px",
-				size: 80
-			},
-			{
-				label: "48px",
-				size: 48
-			},
-			{
-				label: "32px",
-				size: 32
-			}
-		];
-		const hasValidPreview = computed(() => {
-			const d = props.previewData;
-			return d && d.url && d.w > 0 && d.h > 0;
-		});
-		const mainViewportStyle = computed(() => {
-			if (!hasValidPreview.value) return {};
-			const { w } = props.previewData;
-			return {
-				zoom: mainBoxWidth.value / w,
-				overflow: "hidden"
-			};
-		});
-		function getThumbViewportStyle(size) {
-			if (!hasValidPreview.value) return {};
-			const { w } = props.previewData;
-			return {
-				zoom: size / w,
-				overflow: "hidden"
-			};
-		}
-		let resizeObserver = null;
-		onMounted(() => {
-			if (mainBoxRef.value) {
-				mainBoxWidth.value = mainBoxRef.value.clientWidth;
-				resizeObserver = new ResizeObserver((entries) => {
-					requestAnimationFrame(() => {
-						for (const entry of entries) mainBoxWidth.value = entry.contentRect.width;
-					});
-				});
-				resizeObserver.observe(mainBoxRef.value);
-			}
-		});
-		onBeforeUnmount(() => {
-			resizeObserver?.disconnect();
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$1, [
-				createElementVNode("div", _hoisted_2$1, [createVNode(C_Icon_default, { name: "mdi:eye-outline" }), _cache[0] || (_cache[0] = createElementVNode("span", null, "裁剪预览", -1))]),
-				createElementVNode("div", {
-					ref_key: "mainBoxRef",
-					ref: mainBoxRef,
-					class: normalizeClass(["preview-main", { "preview-main--circular": _ctx.circular }])
-				}, [hasValidPreview.value ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					class: "preview-main__viewport",
-					style: normalizeStyle(mainViewportStyle.value)
-				}, [createElementVNode("div", { style: normalizeStyle(_ctx.previewData.div) }, [createElementVNode("img", {
-					src: _ctx.previewData.url,
-					style: normalizeStyle(_ctx.previewData.img),
-					alt: "preview"
-				}, null, 12, _hoisted_3$1)], 4)], 4)) : (openBlock(), createElementBlock("div", _hoisted_4$1, [createVNode(C_Icon_default, {
-					name: "mdi:image-outline",
-					style: {
-						"font-size": "32px",
-						"opacity": "0.2"
-					}
-				})]))], 2),
-				createElementVNode("div", _hoisted_5$1, [(openBlock(), createElementBlock(Fragment, null, renderList(thumbSizes, (item) => {
-					return createElementVNode("div", {
-						key: item.label,
-						class: "preview-thumb"
-					}, [createElementVNode("div", {
-						class: normalizeClass(["preview-thumb__box", { "preview-thumb__box--circular": _ctx.circular }]),
-						style: normalizeStyle({
-							width: `${item.size}px`,
-							height: `${item.size}px`
-						})
-					}, [hasValidPreview.value ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: "preview-thumb__viewport",
-						style: normalizeStyle(getThumbViewportStyle(item.size))
-					}, [createElementVNode("div", { style: normalizeStyle(_ctx.previewData.div) }, [createElementVNode("img", {
-						src: _ctx.previewData.url,
-						style: normalizeStyle(_ctx.previewData.img),
-						alt: "thumb"
-					}, null, 12, _hoisted_6$1)], 4)], 4)) : createCommentVNode("v-if", true)], 6), createElementVNode("span", _hoisted_7$1, toDisplayString(item.label), 1)]);
-				}), 64))])
-			]);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/C_ImageCropper/components/CropperPreview.vue
-var CropperPreview_default = /* @__PURE__ */ export_helper_default(CropperPreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-11f355b4"]]);
-
-//#endregion
-//#region src/components/C_ImageCropper/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = { class: "c-image-cropper__body" };
-const _hoisted_2 = { class: "c-image-cropper__workspace" };
-const _hoisted_3 = {
-	key: 1,
-	class: "c-image-cropper__placeholder"
-};
-const _hoisted_4 = {
-	key: 0,
-	class: "c-image-cropper__preview-panel"
-};
-const _hoisted_5 = {
-	key: 1,
-	class: "c-image-cropper"
-};
-const _hoisted_6 = { class: "c-image-cropper__body" };
-const _hoisted_7 = { class: "c-image-cropper__workspace" };
-const _hoisted_8 = {
-	key: 1,
-	class: "c-image-cropper__placeholder"
-};
-const _hoisted_9 = {
-	key: 0,
-	class: "c-image-cropper__preview-panel"
-};
-var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "C_ImageCropper",
-	__name: "index",
-	props: {
-		src: { default: "" },
-		aspectRatio: { default: 0 },
-		outputFormat: { default: "png" },
-		outputQuality: { default: .92 },
-		maxOutputWidth: { default: 0 },
-		maxOutputHeight: { default: 0 },
-		showPreview: {
-			type: Boolean,
-			default: true
-		},
-		showToolbar: {
-			type: Boolean,
-			default: true
-		},
-		circular: {
-			type: Boolean,
-			default: false
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		height: { default: "400px" },
-		modal: {
-			type: Boolean,
-			default: false
-		},
-		modalTitle: { default: "图片裁剪" }
-	},
-	emits: [
-		"crop",
-		"ready",
-		"error",
-		"confirm",
-		"cancel"
-	],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const imgSrc = ref(props.src);
-		const currentRatio = ref(props.aspectRatio);
-		const modalVisible = ref(false);
-		const exporting = ref(false);
-		const previewData = ref(null);
-		const inlineCropperRef = ref(null);
-		const modalCropperRef = ref(null);
-		const activeCropperRef = computed(() => props.modal ? modalCropperRef.value : inlineCropperRef.value);
-		const containerHeight = computed(() => typeof props.height === "number" ? `${props.height}px` : props.height);
-		const vueCropperOutputType = computed(() => {
-			return {
-				png: "png",
-				jpeg: "jpeg",
-				webp: "webp"
-			}[props.outputFormat] || "png";
-		});
-		const isFixed = computed(() => currentRatio.value > 0);
-		const fixedNumber = computed(() => {
-			if (currentRatio.value <= 0) return [1, 1];
-			if (currentRatio.value === 1) return [1, 1];
-			if (Math.abs(currentRatio.value - 16 / 9) < .01) return [16, 9];
-			if (Math.abs(currentRatio.value - 4 / 3) < .01) return [4, 3];
-			if (Math.abs(currentRatio.value - 3 / 2) < .01) return [3, 2];
-			return [Math.round(currentRatio.value * 100), 100];
-		});
-		const autoCropSize = computed(() => ({
-			width: 300,
-			height: currentRatio.value > 0 ? 300 / currentRatio.value : 200
-		}));
-		const ratioPresets = [
-			{
-				label: "自由",
-				value: 0
-			},
-			{
-				label: "1:1",
-				value: 1
-			},
-			{
-				label: "16:9",
-				value: 16 / 9
-			},
-			{
-				label: "4:3",
-				value: 4 / 3
-			},
-			{
-				label: "3:2",
-				value: 3 / 2
-			}
-		];
-		const core = useCropperCore({
-			format: computed(() => props.outputFormat),
-			quality: computed(() => props.outputQuality),
-			maxWidth: computed(() => props.maxOutputWidth),
-			maxHeight: computed(() => props.maxOutputHeight)
-		});
-		watch(activeCropperRef, (v) => {
-			core.cropperRef.value = v;
-		});
-		function handleRealTimePreview(data) {
-			previewData.value = data;
-		}
-		function onImgLoad(status) {
-			if (status === "success") emit("ready");
-		}
-		function rotate(angle) {
-			core.rotate(angle);
-		}
-		function handleRatio(v) {
-			currentRatio.value = v;
-		}
-		function handleReset() {
-			core.reset();
-		}
-		async function handleConfirm() {
-			exporting.value = true;
-			try {
-				const result = await core.getCropResult();
-				emit("confirm", result);
-				emit("crop", result);
-				modalVisible.value = false;
-			} finally {
-				exporting.value = false;
-			}
-		}
-		function handleCancel() {
-			modalVisible.value = false;
-			emit("cancel");
-		}
-		function loadFile(file) {
-			const reader = new FileReader();
-			reader.onload = (e) => {
-				imgSrc.value = e.target?.result;
-			};
-			reader.readAsDataURL(file);
-		}
-		watch(() => props.src, (v) => {
-			imgSrc.value = v;
-		});
-		watch(() => props.aspectRatio, (v) => {
-			currentRatio.value = v;
-		});
-		__expose({
-			getCropResult: core.getCropResult,
-			rotate: core.rotate,
-			zoom: core.zoom,
-			flipX: core.flipX,
-			flipY: core.flipY,
-			reset: core.reset,
-			setAspectRatio: (r) => {
-				currentRatio.value = r;
-			},
-			loadFile,
-			open: (src) => {
-				if (src) imgSrc.value = src;
-				modalVisible.value = true;
-			},
-			close: () => {
-				modalVisible.value = false;
-			}
-		});
-		return (_ctx, _cache) => {
-			return props.modal ? (openBlock(), createBlock(unref(NModal), {
-				key: 0,
-				show: modalVisible.value,
-				"onUpdate:show": _cache[0] || (_cache[0] = ($event) => modalVisible.value = $event),
-				preset: "card",
-				title: props.modalTitle || "图片裁剪",
-				style: { width: "860px" },
-				"mask-closable": false,
-				closable: true
-			}, {
-				footer: withCtx(() => [createVNode(unref(NSpace), { justify: "end" }, {
-					default: withCtx(() => [createVNode(unref(NButton), { onClick: handleCancel }, {
-						default: withCtx(() => _cache[2] || (_cache[2] = [createTextVNode("取消", -1)])),
-						_: 1,
-						__: [2]
-					}), createVNode(unref(NButton), {
-						type: "primary",
-						loading: exporting.value,
-						onClick: handleConfirm
-					}, {
-						default: withCtx(() => _cache[3] || (_cache[3] = [createTextVNode("确认裁剪", -1)])),
-						_: 1,
-						__: [3]
-					}, 8, ["loading"])]),
-					_: 1
-				})]),
-				default: withCtx(() => [createElementVNode("div", _hoisted_1, [props.showToolbar ? (openBlock(), createBlock(CropperToolbar_default, {
-					key: 0,
-					"current-ratio": currentRatio.value,
-					"ratio-presets": ratioPresets,
-					onRatio: handleRatio,
-					onRotate: rotate,
-					onFlipX: unref(core).flipX,
-					onFlipY: unref(core).flipY,
-					onZoom: unref(core).zoom,
-					onReset: handleReset
-				}, null, 8, [
-					"current-ratio",
-					"onFlipX",
-					"onFlipY",
-					"onZoom"
-				])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [createElementVNode("div", {
-					class: "c-image-cropper__canvas",
-					style: normalizeStyle({ height: containerHeight.value })
-				}, [imgSrc.value ? (openBlock(), createBlock(unref(VueCropper), {
-					key: 0,
-					ref_key: "modalCropperRef",
-					ref: modalCropperRef,
-					img: imgSrc.value,
-					"output-size": props.outputQuality,
-					"output-type": vueCropperOutputType.value,
-					"can-scale": false,
-					"auto-crop": true,
-					"auto-crop-width": autoCropSize.value.width,
-					"auto-crop-height": autoCropSize.value.height,
-					fixed: isFixed.value,
-					"fixed-number": fixedNumber.value,
-					"center-box": true,
-					info: true,
-					"info-true": true,
-					"can-move": true,
-					"can-move-box": true,
-					original: false,
-					high: true,
-					full: false,
-					mode: "contain",
-					onRealTime: handleRealTimePreview,
-					onImgLoad
-				}, null, 8, [
-					"img",
-					"output-size",
-					"output-type",
-					"auto-crop-width",
-					"auto-crop-height",
-					"fixed",
-					"fixed-number"
-				])) : (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(C_Icon_default, {
-					name: "mdi:image-plus-outline",
-					style: {
-						"font-size": "48px",
-						"opacity": "0.3"
-					}
-				}), _cache[1] || (_cache[1] = createElementVNode("span", null, "请选择图片", -1))]))], 4), props.showPreview && imgSrc.value ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(CropperPreview_default, {
-					"preview-data": previewData.value,
-					circular: props.circular
-				}, null, 8, ["preview-data", "circular"])])) : createCommentVNode("v-if", true)])])]),
-				_: 1
-			}, 8, ["show", "title"])) : (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [props.showToolbar ? (openBlock(), createBlock(CropperToolbar_default, {
-				key: 0,
-				"current-ratio": currentRatio.value,
-				"ratio-presets": ratioPresets,
-				onRatio: handleRatio,
-				onRotate: rotate,
-				onFlipX: unref(core).flipX,
-				onFlipY: unref(core).flipY,
-				onZoom: unref(core).zoom,
-				onReset: handleReset
-			}, null, 8, [
-				"current-ratio",
-				"onFlipX",
-				"onFlipY",
-				"onZoom"
-			])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_7, [createElementVNode("div", {
-				class: "c-image-cropper__canvas",
-				style: normalizeStyle({ height: containerHeight.value })
-			}, [imgSrc.value ? (openBlock(), createBlock(unref(VueCropper), {
-				key: 0,
-				ref_key: "inlineCropperRef",
-				ref: inlineCropperRef,
-				img: imgSrc.value,
-				"output-size": props.outputQuality,
-				"output-type": vueCropperOutputType.value,
-				"can-scale": false,
-				"auto-crop": true,
-				"auto-crop-width": autoCropSize.value.width,
-				"auto-crop-height": autoCropSize.value.height,
-				fixed: isFixed.value,
-				"fixed-number": fixedNumber.value,
-				"center-box": true,
-				info: true,
-				"info-true": true,
-				"can-move": true,
-				"can-move-box": true,
-				original: false,
-				high: true,
-				full: false,
-				mode: "contain",
-				onRealTime: handleRealTimePreview,
-				onImgLoad
-			}, null, 8, [
-				"img",
-				"output-size",
-				"output-type",
-				"auto-crop-width",
-				"auto-crop-height",
-				"fixed",
-				"fixed-number"
-			])) : (openBlock(), createElementBlock("div", _hoisted_8, [createVNode(C_Icon_default, {
-				name: "mdi:image-plus-outline",
-				style: {
-					"font-size": "48px",
-					"opacity": "0.3"
-				}
-			}), _cache[4] || (_cache[4] = createElementVNode("span", null, "请选择图片", -1))]))], 4), props.showPreview && imgSrc.value ? (openBlock(), createElementBlock("div", _hoisted_9, [createVNode(CropperPreview_default, {
-				"preview-data": previewData.value,
-				circular: props.circular
-			}, null, 8, ["preview-data", "circular"])])) : createCommentVNode("v-if", true)])])]));
-		};
-	}
-});
-
-//#endregion
-//#region src/components/C_ImageCropper/index.vue
-var C_ImageCropper_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b25a5839"]]);
-
-//#endregion
-export { useCropperCore as n, C_ImageCropper_default as t };
+import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{NButton as n,NButtonGroup as r,NDivider as i,NModal as a,NSpace as o,NTooltip as s}from"naive-ui";import{Fragment as c,computed as l,createBlock as u,createCommentVNode as d,createElementBlock as f,createElementVNode as p,createTextVNode as m,createVNode as h,defineComponent as g,normalizeClass as _,normalizeStyle as v,onBeforeUnmount as y,onMounted as b,openBlock as x,ref as S,renderList as C,toDisplayString as w,unref as T,watch as E,withCtx as D}from"vue";import{VueCropper as O}from"vue-cropper";function k(e={}){let t=S(null);function n(){t.value?.rotateLeft()}function r(){t.value?.rotateRight()}function i(e){let t=Math.round(e/90),i=t>0?r:n;for(let e=0;e<Math.abs(t);e++)i()}function a(e){t.value?.changeScale(e>0?1:-1)}function o(){let e=t.value?.$refs?.img;if(!e)return;let n=e.style.transform||``;n.includes(`scaleX(-1)`)?e.style.transform=n.replace(`scaleX(-1)`,`scaleX(1)`):e.style.transform=n.replace(/scaleX\([^)]*\)/,``)+` scaleX(-1)`}function s(){let e=t.value?.$refs?.img;if(!e)return;let n=e.style.transform||``;n.includes(`scaleY(-1)`)?e.style.transform=n.replace(`scaleY(-1)`,`scaleY(1)`):e.style.transform=n.replace(/scaleY\([^)]*\)/,``)+` scaleY(-1)`}function c(){t.value?.refresh()}function l(t,n){let r=t,i=n,a=e.maxWidth?.value??0,o=e.maxHeight?.value??0;if(a>0&&r>a){let e=a/r;r=a,i=Math.round(i*e)}if(o>0&&i>o){let e=o/i;i=o,r=Math.round(r*e)}return{width:r,height:i}}function u(){return new Promise((n,r)=>{let i=t.value;if(!i)return r(Error(`Cropper not initialized`));let a=e.format?.value??`png`,o=e.quality?.value??.92,s=a===`jpeg`?`image/jpeg`:a===`webp`?`image/webp`:`image/png`;i.getCropData(e=>{i.getCropBlob(t=>{let i=new Image;i.onload=()=>{let{width:r,height:c}=l(i.width,i.height);if(r!==i.width||c!==i.height){let e=document.createElement(`canvas`);e.width=r,e.height=c,e.getContext(`2d`).drawImage(i,0,0,r,c);let t=e.toDataURL(s,o);e.toBlob(e=>{n({base64:t,blob:e,width:r,height:c,format:a})},s,a===`png`?void 0:o)}else n({base64:e,blob:t,width:i.width,height:i.height,format:a})},i.onerror=()=>r(Error(`Failed to load crop result`)),i.src=e})})})}return{cropperRef:t,rotate:i,rotateLeft:n,rotateRight:r,zoom:a,flipX:o,flipY:s,reset:c,getCropResult:u}}const A={class:`cropper-toolbar`};var j=t(g({__name:`CropperToolbar`,props:{currentRatio:{},ratioPresets:{}},emits:[`ratio`,`rotate`,`flipX`,`flipY`,`zoom`,`reset`],setup(t){return(t,a)=>(x(),f(`div`,A,[h(T(r),{size:`small`},{default:D(()=>[(x(!0),f(c,null,C(t.ratioPresets,e=>(x(),u(T(n),{key:e.value,type:t.currentRatio===e.value?`primary`:`default`,onClick:n=>t.$emit(`ratio`,e.value)},{default:D(()=>[m(w(e.label),1)]),_:2},1032,[`type`,`onClick`]))),128))]),_:1}),h(T(i),{vertical:``}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[0]||=e=>t.$emit(`rotate`,-90)},{icon:D(()=>[h(e,{name:`mdi:rotate-left`})]),_:1})]),default:D(()=>[a[7]||=m(` 逆时针旋转 90° `,-1)]),_:1,__:[7]}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[1]||=e=>t.$emit(`rotate`,90)},{icon:D(()=>[h(e,{name:`mdi:rotate-right`})]),_:1})]),default:D(()=>[a[8]||=m(` 顺时针旋转 90° `,-1)]),_:1,__:[8]}),h(T(i),{vertical:``}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[2]||=e=>t.$emit(`flipX`)},{icon:D(()=>[h(e,{name:`mdi:flip-horizontal`})]),_:1})]),default:D(()=>[a[9]||=m(` 水平翻转 `,-1)]),_:1,__:[9]}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[3]||=e=>t.$emit(`flipY`)},{icon:D(()=>[h(e,{name:`mdi:flip-vertical`})]),_:1})]),default:D(()=>[a[10]||=m(` 垂直翻转 `,-1)]),_:1,__:[10]}),h(T(i),{vertical:``}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[4]||=e=>t.$emit(`zoom`,.1)},{icon:D(()=>[h(e,{name:`mdi:magnify-plus-outline`})]),_:1})]),default:D(()=>[a[11]||=m(` 放大 `,-1)]),_:1,__:[11]}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[5]||=e=>t.$emit(`zoom`,-.1)},{icon:D(()=>[h(e,{name:`mdi:magnify-minus-outline`})]),_:1})]),default:D(()=>[a[12]||=m(` 缩小 `,-1)]),_:1,__:[12]}),h(T(i),{vertical:``}),h(T(s),null,{trigger:D(()=>[h(T(n),{size:`small`,quaternary:``,onClick:a[6]||=e=>t.$emit(`reset`)},{icon:D(()=>[h(e,{name:`mdi:refresh`})]),_:1})]),default:D(()=>[a[13]||=m(` 重置 `,-1)]),_:1,__:[13]})]))}}),[[`__scopeId`,`data-v-ac310c55`]]);const M={class:`cropper-preview`},N={class:`preview-label`},P=[`src`],F={key:1,class:`preview-empty`},I={class:`preview-thumbs`},L=[`src`],R={class:`preview-thumb__label`};var z=t(g({__name:`CropperPreview`,props:{previewData:{},circular:{type:Boolean}},setup(t){let n=t,r=S(null),i=S(200),a=[{label:`80px`,size:80},{label:`48px`,size:48},{label:`32px`,size:32}],o=l(()=>{let e=n.previewData;return e&&e.url&&e.w>0&&e.h>0}),s=l(()=>{if(!o.value)return{};let{w:e}=n.previewData;return{zoom:i.value/e,overflow:`hidden`}});function u(e){if(!o.value)return{};let{w:t}=n.previewData;return{zoom:e/t,overflow:`hidden`}}let m=null;return b(()=>{r.value&&(i.value=r.value.clientWidth,m=new ResizeObserver(e=>{requestAnimationFrame(()=>{for(let t of e)i.value=t.contentRect.width})}),m.observe(r.value))}),y(()=>{m?.disconnect()}),(t,n)=>(x(),f(`div`,M,[p(`div`,N,[h(e,{name:`mdi:eye-outline`}),n[0]||=p(`span`,null,`裁剪预览`,-1)]),p(`div`,{ref_key:`mainBoxRef`,ref:r,class:_([`preview-main`,{"preview-main--circular":t.circular}])},[o.value?(x(),f(`div`,{key:0,class:`preview-main__viewport`,style:v(s.value)},[p(`div`,{style:v(t.previewData.div)},[p(`img`,{src:t.previewData.url,style:v(t.previewData.img),alt:`preview`},null,12,P)],4)],4)):(x(),f(`div`,F,[h(e,{name:`mdi:image-outline`,style:{"font-size":`32px`,opacity:`0.2`}})]))],2),p(`div`,I,[(x(),f(c,null,C(a,e=>p(`div`,{key:e.label,class:`preview-thumb`},[p(`div`,{class:_([`preview-thumb__box`,{"preview-thumb__box--circular":t.circular}]),style:v({width:`${e.size}px`,height:`${e.size}px`})},[o.value?(x(),f(`div`,{key:0,class:`preview-thumb__viewport`,style:v(u(e.size))},[p(`div`,{style:v(t.previewData.div)},[p(`img`,{src:t.previewData.url,style:v(t.previewData.img),alt:`thumb`},null,12,L)],4)],4)):d(`v-if`,!0)],6),p(`span`,R,w(e.label),1)])),64))])]))}}),[[`__scopeId`,`data-v-11f355b4`]]);const B={class:`c-image-cropper__body`},V={class:`c-image-cropper__workspace`},H={key:1,class:`c-image-cropper__placeholder`},U={key:0,class:`c-image-cropper__preview-panel`},W={key:1,class:`c-image-cropper`},G={class:`c-image-cropper__body`},K={class:`c-image-cropper__workspace`},q={key:1,class:`c-image-cropper__placeholder`},ee={key:0,class:`c-image-cropper__preview-panel`};var J=t(g({name:`C_ImageCropper`,__name:`index`,props:{src:{default:``},aspectRatio:{default:0},outputFormat:{default:`png`},outputQuality:{default:.92},maxOutputWidth:{default:0},maxOutputHeight:{default:0},showPreview:{type:Boolean,default:!0},showToolbar:{type:Boolean,default:!0},circular:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},height:{default:`400px`},modal:{type:Boolean,default:!1},modalTitle:{default:`图片裁剪`}},emits:[`crop`,`ready`,`error`,`confirm`,`cancel`],setup(t,{expose:r,emit:i}){let s=t,c=i,g=S(s.src),_=S(s.aspectRatio),y=S(!1),b=S(!1),C=S(null),w=S(null),A=S(null),M=l(()=>s.modal?A.value:w.value),N=l(()=>typeof s.height==`number`?`${s.height}px`:s.height),P=l(()=>({png:`png`,jpeg:`jpeg`,webp:`webp`})[s.outputFormat]||`png`),F=l(()=>_.value>0),I=l(()=>_.value<=0||_.value===1?[1,1]:Math.abs(_.value-16/9)<.01?[16,9]:Math.abs(_.value-4/3)<.01?[4,3]:Math.abs(_.value-3/2)<.01?[3,2]:[Math.round(_.value*100),100]),L=l(()=>({width:300,height:_.value>0?300/_.value:200})),R=[{label:`自由`,value:0},{label:`1:1`,value:1},{label:`16:9`,value:16/9},{label:`4:3`,value:4/3},{label:`3:2`,value:3/2}],J=k({format:l(()=>s.outputFormat),quality:l(()=>s.outputQuality),maxWidth:l(()=>s.maxOutputWidth),maxHeight:l(()=>s.maxOutputHeight)});E(M,e=>{J.cropperRef.value=e});function Y(e){C.value=e}function X(e){e===`success`&&c(`ready`)}function Z(e){J.rotate(e)}function Q(e){_.value=e}function $(){J.reset()}async function te(){b.value=!0;try{let e=await J.getCropResult();c(`confirm`,e),c(`crop`,e),y.value=!1}finally{b.value=!1}}function ne(){y.value=!1,c(`cancel`)}function re(e){let t=new FileReader;t.onload=e=>{g.value=e.target?.result},t.readAsDataURL(e)}return E(()=>s.src,e=>{g.value=e}),E(()=>s.aspectRatio,e=>{_.value=e}),r({getCropResult:J.getCropResult,rotate:J.rotate,zoom:J.zoom,flipX:J.flipX,flipY:J.flipY,reset:J.reset,setAspectRatio:e=>{_.value=e},loadFile:re,open:e=>{e&&(g.value=e),y.value=!0},close:()=>{y.value=!1}}),(t,r)=>s.modal?(x(),u(T(a),{key:0,show:y.value,"onUpdate:show":r[0]||=e=>y.value=e,preset:`card`,title:s.modalTitle||`图片裁剪`,style:{width:`860px`},"mask-closable":!1,closable:!0},{footer:D(()=>[h(T(o),{justify:`end`},{default:D(()=>[h(T(n),{onClick:ne},{default:D(()=>r[2]||=[m(`取消`,-1)]),_:1,__:[2]}),h(T(n),{type:`primary`,loading:b.value,onClick:te},{default:D(()=>r[3]||=[m(`确认裁剪`,-1)]),_:1,__:[3]},8,[`loading`])]),_:1})]),default:D(()=>[p(`div`,B,[s.showToolbar?(x(),u(j,{key:0,"current-ratio":_.value,"ratio-presets":R,onRatio:Q,onRotate:Z,onFlipX:T(J).flipX,onFlipY:T(J).flipY,onZoom:T(J).zoom,onReset:$},null,8,[`current-ratio`,`onFlipX`,`onFlipY`,`onZoom`])):d(`v-if`,!0),p(`div`,V,[p(`div`,{class:`c-image-cropper__canvas`,style:v({height:N.value})},[g.value?(x(),u(T(O),{key:0,ref_key:`modalCropperRef`,ref:A,img:g.value,"output-size":s.outputQuality,"output-type":P.value,"can-scale":!1,"auto-crop":!0,"auto-crop-width":L.value.width,"auto-crop-height":L.value.height,fixed:F.value,"fixed-number":I.value,"center-box":!0,info:!0,"info-true":!0,"can-move":!0,"can-move-box":!0,original:!1,high:!0,full:!1,mode:`contain`,onRealTime:Y,onImgLoad:X},null,8,[`img`,`output-size`,`output-type`,`auto-crop-width`,`auto-crop-height`,`fixed`,`fixed-number`])):(x(),f(`div`,H,[h(e,{name:`mdi:image-plus-outline`,style:{"font-size":`48px`,opacity:`0.3`}}),r[1]||=p(`span`,null,`请选择图片`,-1)]))],4),s.showPreview&&g.value?(x(),f(`div`,U,[h(z,{"preview-data":C.value,circular:s.circular},null,8,[`preview-data`,`circular`])])):d(`v-if`,!0)])])]),_:1},8,[`show`,`title`])):(x(),f(`div`,W,[p(`div`,G,[s.showToolbar?(x(),u(j,{key:0,"current-ratio":_.value,"ratio-presets":R,onRatio:Q,onRotate:Z,onFlipX:T(J).flipX,onFlipY:T(J).flipY,onZoom:T(J).zoom,onReset:$},null,8,[`current-ratio`,`onFlipX`,`onFlipY`,`onZoom`])):d(`v-if`,!0),p(`div`,K,[p(`div`,{class:`c-image-cropper__canvas`,style:v({height:N.value})},[g.value?(x(),u(T(O),{key:0,ref_key:`inlineCropperRef`,ref:w,img:g.value,"output-size":s.outputQuality,"output-type":P.value,"can-scale":!1,"auto-crop":!0,"auto-crop-width":L.value.width,"auto-crop-height":L.value.height,fixed:F.value,"fixed-number":I.value,"center-box":!0,info:!0,"info-true":!0,"can-move":!0,"can-move-box":!0,original:!1,high:!0,full:!1,mode:`contain`,onRealTime:Y,onImgLoad:X},null,8,[`img`,`output-size`,`output-type`,`auto-crop-width`,`auto-crop-height`,`fixed`,`fixed-number`])):(x(),f(`div`,q,[h(e,{name:`mdi:image-plus-outline`,style:{"font-size":`48px`,opacity:`0.3`}}),r[4]||=p(`span`,null,`请选择图片`,-1)]))],4),s.showPreview&&g.value?(x(),f(`div`,ee,[h(z,{"preview-data":C.value,circular:s.circular},null,8,[`preview-data`,`circular`])])):d(`v-if`,!0)])])]))}}),[[`__scopeId`,`data-v-b25a5839`]]);export{k as n,J as t};
 //# sourceMappingURL=C_ImageCropper2.js.map