@web-utils/form-ui 1.0.0-beta71 → 1.0.0-beta73

package/image-preview/index.mjs

@@ -1,2 +1,201 @@
-import { t as e } from "../chunks/nLBvkerV2.mjs";
-export { e as default };
+import { u as e } from "../chunks/ClVh1Lek.mjs";
+import { t } from "../chunks/CaczibeD.mjs";
+import { ElCarousel as n, ElCarouselItem as r } from "element-plus/es";
+import "element-plus/es/components/base/style/css";
+import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, normalizeStyle as u, openBlock as d, renderList as f, resolveDynamicComponent as p, toDisplayString as m, withCtx as h, withModifiers as g } from "vue";
+import { setPx as _ } from "@web-utils/core";
+import "element-plus/es/components/carousel/style/css";
+import "element-plus/es/components/carousel-item/style/css";
+//#region src/components/image-preview/ImagePreview.vue
+var v = {
+	name: "ImagePreview",
+	props: {
+		visible: Boolean,
+		beforeClose: Function,
+		closeOnClickModal: Boolean,
+		click: Function,
+		modal: Boolean,
+		datas: {
+			type: Array,
+			default: () => []
+		},
+		beginIndex: Number
+	},
+	emits: ["close"],
+	data() {
+		return {
+			left: 0,
+			top: 0,
+			scale: 1,
+			rotate: 0,
+			index: this.beginIndex
+		};
+	},
+	computed: {
+		styleBoxName() {
+			return {
+				marginLeft: _(this.left),
+				marginTop: _(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(t) {
+			return e(t.url, t.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.click == "function" ? this.click(e, t) : n && window.open(e.url);
+		},
+		close() {
+			typeof this.beforeClose == "function" && this.beforeClose(this.datas, this.index), this.$emit("close", this.datas, this.index);
+		}
+	}
+}, y = {
+	key: 0,
+	class: "avue-image-preview"
+}, b = {
+	ref: "box",
+	class: "avue-image-preview__box"
+}, x = ["id", "onClick"], S = { class: "el-image-viewer__btn el-image-viewer__actions" }, C = { class: "el-image-viewer__actions__inner" };
+function w(e, t, _, v, w, T) {
+	let E = r, D = n;
+	return _.visible ? (d(), s("div", y, [
+		_.modal ? (d(), s("div", {
+			key: 0,
+			class: "avue-image-preview__mask",
+			onClick: t[0] || (t[0] = (...e) => T.close && T.close(...e))
+		})) : o("v-if", !0),
+		c("span", {
+			class: "el-image-viewer__btn el-image-viewer__close",
+			onClick: t[1] || (t[1] = (...e) => T.close && T.close(...e))
+		}, [...t[10] || (t[10] = [c("i", { class: "el-icon-circle-close" }, null, -1)])]),
+		T.isRrrow ? (d(), s("span", {
+			key: 1,
+			class: "el-image-viewer__btn el-image-viewer__prev",
+			onClick: t[2] || (t[2] = (e) => T.handlePrev())
+		}, [...t[11] || (t[11] = [c("i", { class: "el-icon-arrow-left" }, null, -1)])])) : o("v-if", !0),
+		T.isRrrow ? (d(), s("span", {
+			key: 2,
+			class: "el-image-viewer__btn el-image-viewer__next",
+			onClick: t[3] || (t[3] = (e) => T.handleNext())
+		}, [...t[12] || (t[12] = [c("i", { class: "el-icon-arrow-right" }, null, -1)])])) : o("v-if", !0),
+		c("div", b, [l(D, {
+			ref: "carousel",
+			"show-indicators": !1,
+			"initial-index": w.index,
+			"initial-swipe": w.index,
+			interval: 0,
+			arrow: "never",
+			"indicator-position": "none",
+			onChange: T.handleChange
+		}, {
+			default: h(() => [(d(!0), s(i, null, f(_.datas, (e, n) => (d(), a(E, {
+				key: n,
+				onClick: t[4] || (t[4] = g((e) => _.closeOnClickModal ? T.close() : "", ["self"]))
+			}, {
+				default: h(() => [T.isMediaType(e) ? (d(), a(p(T.isMediaType(e)), {
+					key: 0,
+					id: `avue-image-preview__${n}`,
+					ref_for: !0,
+					ref: "item",
+					src: e.url,
+					style: u([T.styleName, T.styleBoxName]),
+					controls: "controls",
+					ondragstart: "return false",
+					onClick: (t) => T.handleClick(e, n),
+					onMousedown: T.move
+				}, null, 40, [
+					"id",
+					"src",
+					"style",
+					"onClick",
+					"onMousedown"
+				])) : (d(), s("div", {
+					key: 1,
+					id: `avue-image-preview__${n}`,
+					class: "avue-image-preview__file",
+					onClick: (t) => T.handleClick(e, n, !0)
+				}, [c("span", null, [t[13] || (t[13] = c("i", { class: "el-icon-document" }, null, -1)), c("p", null, m(e.name || T.getName(e.url)), 1)])], 8, x))]),
+				_: 2
+			}, 1024))), 128))]),
+			_: 1
+		}, 8, [
+			"initial-index",
+			"initial-swipe",
+			"onChange"
+		])], 512),
+		c("div", S, [c("div", C, [
+			c("i", {
+				class: "el-icon-zoom-out",
+				onClick: t[5] || (t[5] = (...e) => T.subScale && T.subScale(...e))
+			}),
+			c("i", {
+				class: "el-icon-zoom-in",
+				onClick: t[6] || (t[6] = (...e) => T.addScale && T.addScale(...e))
+			}),
+			t[14] || (t[14] = c("i", { class: "el-image-viewer__actions__divider" }, null, -1)),
+			c("i", {
+				class: "el-icon-printer",
+				onClick: t[7] || (t[7] = (...e) => T.handlePrint && T.handlePrint(...e))
+			}),
+			t[15] || (t[15] = c("i", { class: "el-image-viewer__actions__divider" }, null, -1)),
+			c("i", {
+				class: "el-icon-refresh-left",
+				onClick: t[8] || (t[8] = (e) => w.rotate -= 90)
+			}),
+			c("i", {
+				class: "el-icon-refresh-right",
+				onClick: t[9] || (t[9] = (e) => w.rotate += 90)
+			})
+		])])
+	])) : o("v-if", !0);
+}
+var T = /* @__PURE__ */ t(v, [["render", w]]);
+//#endregion
+export { T as default };

package/image-viewer/index.mjs

@@ -1,4 +1,4 @@
-import { t as e } from "../chunks/BwYEpK-u.mjs";
+import { t as e } from "../chunks/CaczibeD.mjs";
 import { Fragment as t, createElementBlock as n, normalizeStyle as r, openBlock as i, renderList as a, renderSlot as o, vShow as s, withDirectives as c } from "vue";
 import l from "viewerjs";
 import "viewerjs/dist/viewer.css";