@web-utils/component 4.0.16 → 5.0.0-beta01

package/image-cropper/index.mjs

@@ -1,73 +1,171 @@
-import { B as r } from "../chunks/util.DqFv_pWg.mjs";
-import { VueCropper as n } from "vue-cropper";
-import { n as s } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-const p = {
-  name: "ImageCropper",
-  components: {
-    VueCropper: n
-  },
-  data() {
-    return {
-      visible: !1,
-      previews: {},
-      option: {}
-    };
-  },
-  methods: {
-    show() {
-      this.visible = !0;
-    },
-    // 图片缩放
-    changeScale(o) {
-      o = o || 1, this.$refs.cropper.changeScale(o);
-    },
-    // 向左旋转
-    rotateLeft() {
-      this.$refs.cropper.rotateLeft();
-    },
-    // 向右旋转
-    rotateRight() {
-      this.$refs.cropper.rotateRight();
-    },
-    // 实时预览函数
-    realTime(o) {
-      this.previews = o;
-    },
-    submit() {
-      this.visible = !1, this.$refs.cropper.getCropData((o) => {
-        var t, i;
-        let e = o;
-        this.option.type === "file" && (e = r(o, `${(/* @__PURE__ */ new Date()).getTime()}.${this.option.outputType}`)), (i = (t = this.option).callback) == null || i.call(t, e);
-      });
-    },
-    cancel(o) {
-      var e, t;
-      o == null || o(), this.visible = !1, (t = (e = this.option).cancel) == null || t.call(e), typeof this.option.beforeClose == "function" && this.option.beforeClose(), this.$destroy(), this.$el.remove();
-    }
-  }
-};
-var a = function() {
-  var e = this, t = e._self._c;
-  return t("ElementDialog", { staticClass: "avue-cropper", attrs: { visible: e.visible, "before-close": e.cancel, title: "图片剪裁", "close-on-press-escape": !1, "close-on-click-modal": !1, "modal-append-to-body": e.$AVUE.modalAppendToBody, "append-to-body": e.$AVUE.appendToBody, width: "1000px" }, on: { "update:visible": function(i) {
-    e.visible = i;
-  } }, scopedSlots: e._u([{ key: "footer", fn: function() {
-    return [t("ElButton", { attrs: { size: "small", type: "primary" }, on: { click: e.submit } }, [e._v(" 确 定 ")]), t("ElButton", { attrs: { size: "small" }, on: { click: function(i) {
-      return e.cancel();
-    } } }, [e._v(" 取 消 ")])];
-  }, proxy: !0 }]) }, [t("div", { staticClass: "cropper-content" }, [t("div", { staticClass: "cropper-box" }, [t("div", { staticClass: "cropper" }, [t("VueCropper", { ref: "cropper", attrs: { img: e.option.img, "output-size": e.option.outputSize, "output-type": e.option.outputType, info: e.option.info, "can-scale": e.option.canScale, "auto-crop": e.option.autoCrop, "auto-crop-width": e.option.autoCropWidth, "auto-crop-height": e.option.autoCropHeight, fixed: e.option.fixed, "fixed-number": e.option.fixedNumber, full: e.option.full, "fixed-box": e.option.fixedBox, "can-move": e.option.canMove, "can-move-box": e.option.canMoveBox, original: e.option.original, "center-box": e.option.centerBox, height: e.option.height, "info-true": e.option.infoTrue, "max-img-size": e.option.maxImgSize, enlarge: e.option.enlarge, mode: e.option.mode }, on: { realTime: e.realTime } })], 1), t("div", { staticClass: "footer-btn" }, [t("ElButton", { attrs: { size: "mini", type: "primary", icon: "el-icon-zoom-in" }, on: { click: function(i) {
-    return e.changeScale(1);
-  } } }), t("ElButton", { attrs: { size: "mini", type: "primary", icon: "el-icon-zoom-out" }, on: { click: function(i) {
-    return e.changeScale(-1);
-  } } }), t("ElButton", { attrs: { size: "mini", type: "primary", icon: "el-icon-refresh-left" }, on: { click: e.rotateLeft } }), t("ElButton", { attrs: { size: "mini", type: "primary", icon: "el-icon-refresh-right" }, on: { click: e.rotateRight } })], 1)]), t("div", { staticClass: "show-preview" }, [t("div", { staticClass: "preview", style: e.previews.div }, [t("img", { style: e.previews.img, attrs: { src: e.previews.url, alt: "" } })])])])]);
-}, l = [], c = /* @__PURE__ */ s(
-  p,
-  a,
-  l,
-  !1,
-  null,
-  null
-);
-const h = c.exports;
-export {
-  h as default
-};
+import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
+import { i as t } from "../chunks/util.g-WQEec9.mjs";
+import { createBlock as n, createCommentVNode as r, createElementVNode as i, createTextVNode as a, createVNode as o, normalizeStyle as s, openBlock as c, resolveComponent as l, withCtx as u } from "vue";
+import { VueCropper as d } from "vue-cropper";
+//#region src/components/image-cropper/ImageCropper.vue
+var f = {
+	name: "ImageCropper",
+	components: { VueCropper: d },
+	data() {
+		return {
+			visible: !1,
+			previews: {},
+			option: {}
+		};
+	},
+	methods: {
+		show() {
+			this.visible = !0;
+		},
+		changeScale(e) {
+			e = e || 1, this.$refs.cropper.changeScale(e);
+		},
+		rotateLeft() {
+			this.$refs.cropper.rotateLeft();
+		},
+		rotateRight() {
+			this.$refs.cropper.rotateRight();
+		},
+		realTime(e) {
+			this.previews = e;
+		},
+		submit() {
+			this.visible = !1, this.$refs.cropper.getCropData((e) => {
+				var n, r;
+				let i = e;
+				this.option.type === "file" && (i = t(e, `${(/* @__PURE__ */ new Date()).getTime()}.${this.option.outputType}`)), (n = (r = this.option).callback) == null || n.call(r, i);
+			});
+		},
+		cancel(e) {
+			var t, n;
+			e == null || e(), this.visible = !1, (t = (n = this.option).cancel) == null || t.call(n), typeof this.option.beforeClose == "function" && this.option.beforeClose(), this.$destroy(), this.$el.remove();
+		}
+	}
+}, p = { class: "cropper-content" }, m = { class: "cropper-box" }, h = { class: "cropper" }, g = { class: "footer-btn" }, _ = { class: "show-preview" }, v = ["src"];
+function y(e, t, d, f, y, b) {
+	let x = l("VueCropper"), S = l("ElButton"), C = l("ElementDialog");
+	return c(), n(C, {
+		visible: y.visible,
+		"onUpdate:visible": t[3] || (t[3] = (e) => y.visible = e),
+		class: "avue-cropper",
+		"before-close": b.cancel,
+		title: "图片剪裁",
+		"close-on-press-escape": !1,
+		"close-on-click-modal": !1,
+		"modal-append-to-body": e.$AVUE.modalAppendToBody,
+		"append-to-body": e.$AVUE.appendToBody,
+		width: "1000px"
+	}, {
+		footer: u(() => [o(S, {
+			size: "small",
+			type: "primary",
+			onClick: b.submit
+		}, {
+			default: u(() => [...t[4] || (t[4] = [a(" 确 定 ", -1)])]),
+			_: 1
+		}, 8, ["onClick"]), o(S, {
+			size: "small",
+			onClick: t[2] || (t[2] = (e) => b.cancel())
+		}, {
+			default: u(() => [...t[5] || (t[5] = [a(" 取 消 ", -1)])]),
+			_: 1
+		})]),
+		default: u(() => [i("div", p, [
+			i("div", m, [
+				i("div", h, [o(x, {
+					ref: "cropper",
+					img: y.option.img,
+					"output-size": y.option.outputSize,
+					"output-type": y.option.outputType,
+					info: y.option.info,
+					"can-scale": y.option.canScale,
+					"auto-crop": y.option.autoCrop,
+					"auto-crop-width": y.option.autoCropWidth,
+					"auto-crop-height": y.option.autoCropHeight,
+					fixed: y.option.fixed,
+					"fixed-number": y.option.fixedNumber,
+					full: y.option.full,
+					"fixed-box": y.option.fixedBox,
+					"can-move": y.option.canMove,
+					"can-move-box": y.option.canMoveBox,
+					original: y.option.original,
+					"center-box": y.option.centerBox,
+					height: y.option.height,
+					"info-true": y.option.infoTrue,
+					"max-img-size": y.option.maxImgSize,
+					enlarge: y.option.enlarge,
+					mode: y.option.mode,
+					onRealTime: b.realTime
+				}, null, 8, [
+					"img",
+					"output-size",
+					"output-type",
+					"info",
+					"can-scale",
+					"auto-crop",
+					"auto-crop-width",
+					"auto-crop-height",
+					"fixed",
+					"fixed-number",
+					"full",
+					"fixed-box",
+					"can-move",
+					"can-move-box",
+					"original",
+					"center-box",
+					"height",
+					"info-true",
+					"max-img-size",
+					"enlarge",
+					"mode",
+					"onRealTime"
+				])]),
+				r("底部操作工具按钮"),
+				i("div", g, [
+					o(S, {
+						size: "mini",
+						type: "primary",
+						icon: "el-icon-zoom-in",
+						onClick: t[0] || (t[0] = (e) => b.changeScale(1))
+					}),
+					o(S, {
+						size: "mini",
+						type: "primary",
+						icon: "el-icon-zoom-out",
+						onClick: t[1] || (t[1] = (e) => b.changeScale(-1))
+					}),
+					o(S, {
+						size: "mini",
+						type: "primary",
+						icon: "el-icon-refresh-left",
+						onClick: b.rotateLeft
+					}, null, 8, ["onClick"]),
+					o(S, {
+						size: "mini",
+						type: "primary",
+						icon: "el-icon-refresh-right",
+						onClick: b.rotateRight
+					}, null, 8, ["onClick"])
+				])
+			]),
+			r("预览效果图"),
+			i("div", _, [i("div", {
+				style: s(y.previews.div),
+				class: "preview"
+			}, [i("img", {
+				src: y.previews.url,
+				style: s(y.previews.img),
+				alt: ""
+			}, null, 12, v)], 4)])
+		])]),
+		_: 1
+	}, 8, [
+		"visible",
+		"before-close",
+		"modal-append-to-body",
+		"append-to-body"
+	]);
+}
+var b = /* @__PURE__ */ e(f, [["render", y]]);
+//#endregion
+export { b as default };

package/image-preview/index.mjs

@@ -1,116 +1,187 @@
-import { i as r } from "../chunks/util.DqFv_pWg.mjs";
-import { setPx as o } from "@web-utils/core";
-import { n as c } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-const u = {
-  name: "ImagePreview",
-  data() {
-    return {
-      left: 0,
-      top: 0,
-      scale: 1,
-      datas: [],
-      rotate: 0,
-      isShow: !1,
-      index: 0,
-      ops: {}
-    };
-  },
-  computed: {
-    styleBoxName() {
-      return {
-        marginLeft: o(this.left),
-        marginTop: o(this.top)
-      };
-    },
-    styleName() {
-      return {
-        transform: `scale(${this.scale}) rotate(${this.rotate}deg)`,
-        maxWidth: "100%",
-        maxHeight: "100%"
-      };
-    },
-    isRrrow() {
-      return this.datas.length > 1;
-    }
-  },
-  methods: {
-    getName(i) {
-      return i.substring(i.lastIndexOf("/") + 1);
-    },
-    handlePrint() {
-      this.$Print(`#avue-image-preview__${this.index}`);
-    },
-    handlePrev() {
-      this.$refs.carousel.prev(), this.index = this.$refs.carousel.activeIndex, this.stopItem();
-    },
-    handleNext() {
-      this.$refs.carousel.next(), this.index = this.$refs.carousel.activeIndex, this.stopItem();
-    },
-    stopItem() {
-      this.left = 0, this.top = 0, this.$refs.item.forEach((i) => {
-        var e;
-        (e = i.pause) == null || e.call(i);
-      });
-    },
-    isMediaType(i) {
-      return r(i.url, i.type);
-    },
-    subScale() {
-      this.scale !== 0.2 && (this.scale = parseFloat((this.scale - 0.2).toFixed(2)));
-    },
-    addScale() {
-      this.scale = parseFloat((this.scale + 0.2).toFixed(2));
-    },
-    handleChange() {
-      this.scale = 1, this.rotate = 0;
-    },
-    move(i) {
-      let e = i.clientX, t = i.clientY;
-      const s = 2;
-      document.onmousemove = (a) => {
-        const n = a.clientX - e, l = a.clientY - t;
-        e = a.clientX, t = a.clientY, this.left = this.left + n * s, this.top = this.top + l * s;
-      }, document.onmouseup = () => {
-        document.onmousemove = null, document.onmouseup = null;
-      };
-    },
-    handleClick(i, e, t = !1) {
-      typeof this.ops.click == "function" ? this.ops.click(i, e) : t && window.open(i.url);
-    },
-    close() {
-      this.isShow = !1, typeof this.ops.beforeClose == "function" && this.ops.beforeClose(this.datas, this.index), this.$destroy(), this.$el.remove();
-    }
-  }
-};
-var d = function() {
-  var e = this, t = e._self._c;
-  return e.isShow ? t("div", { staticClass: "avue-image-preview" }, [e.ops.modal ? t("div", { staticClass: "avue-image-preview__mask", on: { click: e.close } }) : e._e(), t("span", { staticClass: "el-image-viewer__btn el-image-viewer__close", on: { click: e.close } }, [t("i", { staticClass: "el-icon-circle-close" })]), e.isRrrow ? t("span", { staticClass: "el-image-viewer__btn el-image-viewer__prev", on: { click: function(s) {
-    return e.handlePrev();
-  } } }, [t("i", { staticClass: "el-icon-arrow-left" })]) : e._e(), e.isRrrow ? t("span", { staticClass: "el-image-viewer__btn el-image-viewer__next", on: { click: function(s) {
-    return e.handleNext();
-  } } }, [t("i", { staticClass: "el-icon-arrow-right" })]) : e._e(), t("div", { ref: "box", staticClass: "avue-image-preview__box" }, [t("ElCarousel", { ref: "carousel", attrs: { "show-indicators": !1, "initial-index": e.index, "initial-swipe": e.index, interval: 0, arrow: "never", "indicator-position": "none" }, on: { change: e.handleChange } }, e._l(e.datas, function(s, a) {
-    return t("ElCarouselItem", { key: a, nativeOn: { click: function(n) {
-      if (n.target !== n.currentTarget) return null;
-      e.ops.closeOnClickModal && e.close();
-    } } }, [e.isMediaType(s) ? t(e.isMediaType(s), { ref: "item", refInFor: !0, tag: "Component", style: [e.styleName, e.styleBoxName], attrs: { id: `avue-image-preview__${a}`, src: s.url, controls: "controls", ondragstart: "return false" }, on: { click: function(n) {
-      return e.handleClick(s, a);
-    }, mousedown: e.move } }) : t("div", { staticClass: "avue-image-preview__file", attrs: { id: `avue-image-preview__${a}` }, on: { click: function(n) {
-      return e.handleClick(s, a, !0);
-    } } }, [t("span", [t("i", { staticClass: "el-icon-document" }), t("p", [e._v(e._s(s.name || e.getName(s.url)))])])])], 1);
-  }), 1)], 1), t("div", { staticClass: "el-image-viewer__btn el-image-viewer__actions" }, [t("div", { staticClass: "el-image-viewer__actions__inner" }, [t("i", { staticClass: "el-icon-zoom-out", on: { click: e.subScale } }), t("i", { staticClass: "el-icon-zoom-in", on: { click: e.addScale } }), t("i", { staticClass: "el-image-viewer__actions__divider" }), t("i", { staticClass: "el-icon-printer", on: { click: e.handlePrint } }), t("i", { staticClass: "el-image-viewer__actions__divider" }), t("i", { staticClass: "el-icon-refresh-left", on: { click: function(s) {
-    e.rotate = e.rotate - 90;
-  } } }), t("i", { staticClass: "el-icon-refresh-right", on: { click: function(s) {
-    e.rotate = e.rotate + 90;
-  } } })])])]) : e._e();
-}, h = [], m = /* @__PURE__ */ c(
-  u,
-  d,
-  h,
-  !1,
-  null,
-  null
-);
-const p = m.exports;
-export {
-  p as default
-};
+import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
+import { g as t } from "../chunks/util.g-WQEec9.mjs";
+import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, normalizeStyle as c, openBlock as l, renderList as u, resolveComponent as d, resolveDynamicComponent as f, toDisplayString as p, withCtx as m, withModifiers as h } from "vue";
+import { setPx as g } from "@web-utils/core";
+//#region src/components/image-preview/ImagePreview.vue
+var _ = {
+	name: "ImagePreview",
+	data() {
+		return {
+			left: 0,
+			top: 0,
+			scale: 1,
+			datas: [],
+			rotate: 0,
+			isShow: !1,
+			index: 0,
+			ops: {}
+		};
+	},
+	computed: {
+		styleBoxName() {
+			return {
+				marginLeft: g(this.left),
+				marginTop: g(this.top)
+			};
+		},
+		styleName() {
+			return {
+				transform: `scale(${this.scale}) rotate(${this.rotate}deg)`,
+				maxWidth: "100%",
+				maxHeight: "100%"
+			};
+		},
+		isRrrow() {
+			return this.datas.length > 1;
+		}
+	},
+	methods: {
+		getName(e) {
+			return e.substring(e.lastIndexOf("/") + 1);
+		},
+		handlePrint() {
+			this.$Print(`#avue-image-preview__${this.index}`);
+		},
+		handlePrev() {
+			this.$refs.carousel.prev(), this.index = this.$refs.carousel.activeIndex, this.stopItem();
+		},
+		handleNext() {
+			this.$refs.carousel.next(), this.index = this.$refs.carousel.activeIndex, this.stopItem();
+		},
+		stopItem() {
+			this.left = 0, this.top = 0, this.$refs.item.forEach((e) => {
+				var t;
+				(t = e.pause) == null || t.call(e);
+			});
+		},
+		isMediaType(e) {
+			return t(e.url, e.type);
+		},
+		subScale() {
+			this.scale !== .2 && (this.scale = parseFloat((this.scale - .2).toFixed(2)));
+		},
+		addScale() {
+			this.scale = parseFloat((this.scale + .2).toFixed(2));
+		},
+		handleChange() {
+			this.scale = 1, this.rotate = 0;
+		},
+		move(e) {
+			let t = e.clientX, n = e.clientY;
+			document.onmousemove = (e) => {
+				let r = e.clientX - t, i = e.clientY - n;
+				t = e.clientX, n = e.clientY, this.left += r * 2, this.top += i * 2;
+			}, document.onmouseup = () => {
+				document.onmousemove = null, document.onmouseup = null;
+			};
+		},
+		handleClick(e, t, n = !1) {
+			typeof this.ops.click == "function" ? this.ops.click(e, t) : n && window.open(e.url);
+		},
+		close() {
+			this.isShow = !1, typeof this.ops.beforeClose == "function" && this.ops.beforeClose(this.datas, this.index), this.$destroy(), this.$el.remove();
+		}
+	}
+}, v = {
+	key: 0,
+	class: "avue-image-preview"
+}, y = {
+	ref: "box",
+	class: "avue-image-preview__box"
+}, b = ["id", "onClick"], x = { class: "el-image-viewer__btn el-image-viewer__actions" }, S = { class: "el-image-viewer__actions__inner" };
+function C(e, t, g, _, C, w) {
+	let T = d("ElCarouselItem"), E = d("ElCarousel");
+	return C.isShow ? (l(), a("div", v, [
+		C.ops.modal ? (l(), a("div", {
+			key: 0,
+			class: "avue-image-preview__mask",
+			onClick: t[0] || (t[0] = (...e) => w.close && w.close(...e))
+		})) : i("v-if", !0),
+		o("span", {
+			class: "el-image-viewer__btn el-image-viewer__close",
+			onClick: t[1] || (t[1] = (...e) => w.close && w.close(...e))
+		}, [...t[10] || (t[10] = [o("i", { class: "el-icon-circle-close" }, null, -1)])]),
+		w.isRrrow ? (l(), a("span", {
+			key: 1,
+			class: "el-image-viewer__btn el-image-viewer__prev",
+			onClick: t[2] || (t[2] = (e) => w.handlePrev())
+		}, [...t[11] || (t[11] = [o("i", { class: "el-icon-arrow-left" }, null, -1)])])) : i("v-if", !0),
+		w.isRrrow ? (l(), a("span", {
+			key: 2,
+			class: "el-image-viewer__btn el-image-viewer__next",
+			onClick: t[3] || (t[3] = (e) => w.handleNext())
+		}, [...t[12] || (t[12] = [o("i", { class: "el-icon-arrow-right" }, null, -1)])])) : i("v-if", !0),
+		o("div", y, [s(E, {
+			ref: "carousel",
+			"show-indicators": !1,
+			"initial-index": C.index,
+			"initial-swipe": C.index,
+			interval: 0,
+			arrow: "never",
+			"indicator-position": "none",
+			onChange: w.handleChange
+		}, {
+			default: m(() => [(l(!0), a(n, null, u(C.datas, (e, n) => (l(), r(T, {
+				key: n,
+				onClick: t[4] || (t[4] = h((e) => C.ops.closeOnClickModal ? w.close() : "", ["self"]))
+			}, {
+				default: m(() => [w.isMediaType(e) ? (l(), r(f(w.isMediaType(e)), {
+					key: 0,
+					id: `avue-image-preview__${n}`,
+					ref_for: !0,
+					ref: "item",
+					src: e.url,
+					style: c([w.styleName, w.styleBoxName]),
+					controls: "controls",
+					ondragstart: "return false",
+					onClick: (t) => w.handleClick(e, n),
+					onMousedown: w.move
+				}, null, 40, [
+					"id",
+					"src",
+					"style",
+					"onClick",
+					"onMousedown"
+				])) : (l(), a("div", {
+					key: 1,
+					id: `avue-image-preview__${n}`,
+					class: "avue-image-preview__file",
+					onClick: (t) => w.handleClick(e, n, !0)
+				}, [o("span", null, [t[13] || (t[13] = o("i", { class: "el-icon-document" }, null, -1)), o("p", null, p(e.name || w.getName(e.url)), 1)])], 8, b))]),
+				_: 2
+			}, 1024))), 128))]),
+			_: 1
+		}, 8, [
+			"initial-index",
+			"initial-swipe",
+			"onChange"
+		])], 512),
+		o("div", x, [o("div", S, [
+			o("i", {
+				class: "el-icon-zoom-out",
+				onClick: t[5] || (t[5] = (...e) => w.subScale && w.subScale(...e))
+			}),
+			o("i", {
+				class: "el-icon-zoom-in",
+				onClick: t[6] || (t[6] = (...e) => w.addScale && w.addScale(...e))
+			}),
+			t[14] || (t[14] = o("i", { class: "el-image-viewer__actions__divider" }, null, -1)),
+			o("i", {
+				class: "el-icon-printer",
+				onClick: t[7] || (t[7] = (...e) => w.handlePrint && w.handlePrint(...e))
+			}),
+			t[15] || (t[15] = o("i", { class: "el-image-viewer__actions__divider" }, null, -1)),
+			o("i", {
+				class: "el-icon-refresh-left",
+				onClick: t[8] || (t[8] = (e) => C.rotate -= 90)
+			}),
+			o("i", {
+				class: "el-icon-refresh-right",
+				onClick: t[9] || (t[9] = (e) => C.rotate += 90)
+			})
+		])])
+	])) : i("v-if", !0);
+}
+var w = /* @__PURE__ */ e(_, [["render", C]]);
+//#endregion
+export { w as default };