@web-utils/form-ui 1.0.0-beta8 → 1.0.0-beta80

package/image-preview/index.mjs

@@ -0,0 +1,201 @@
+import { u as e } from "../chunks/ClVh1Lek.mjs";
+import { t } from "../chunks/B1MSrc6f.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-preview/style.css

@@ -0,0 +1 @@
+.avue-img--center{justify-content:center;align-items:center;display:flex}.avue-img--fullscreen .el-dialog__body{height:100%}.avue-image-preview{z-index:9998;width:100%;height:100%;transition:all .5s;position:fixed;top:0;left:0}.avue-image-preview .el-image-viewer__close i{color:#fff}.avue-image-preview .el-image-viewer__btn{z-index:1024}.avue-image-preview img{cursor:pointer;transition:all .5s}.avue-image-preview__file{text-align:center}.avue-image-preview__file a{color:#fff}.avue-image-preview__file i{cursor:pointer;font-size:80px}.avue-image-preview__mask{background:#00000080;width:100%;height:100%;position:absolute;top:0;left:0}.avue-image-preview__box{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.avue-image-preview__box .el-carousel{width:90%;height:100%}.avue-image-preview__box .el-carousel__container{height:100%}.avue-image-preview__box .el-carousel__item{justify-content:center;align-items:center;width:100%;height:100%;display:flex}

package/image-viewer/index.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    images: ArrayConstructor;
+    url: {
+        type: StringConstructor;
+        default: string;
+    };
+    lazy: BooleanConstructor;
+}>, {}, {}, {}, {
+    init({ container, options }: {
+        container: any;
+        options: any;
+    }): void;
+    show({ container, options, index }?: {}): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    images: ArrayConstructor;
+    url: {
+        type: StringConstructor;
+        default: string;
+    };
+    lazy: BooleanConstructor;
+}>> & Readonly<{}>, {
+    lazy: boolean;
+    url: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/image-viewer/index.mjs

@@ -0,0 +1,70 @@
+import { t as e } from "../chunks/B1MSrc6f.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";
+//#region src/components/ImageViewer.vue
+var u = {
+	name: "ImageViewer",
+	props: {
+		images: Array,
+		url: {
+			type: String,
+			default: "data-src"
+		},
+		lazy: Boolean
+	},
+	mounted() {
+		this.lazy || this.init({
+			container: this.$refs.wrapper,
+			options: {
+				navbar: !1,
+				backdrop: "static",
+				url: this.url
+			}
+		});
+	},
+	updated() {
+		if (!this.lazy) {
+			var e;
+			(e = this.gallery) == null || e.update();
+		}
+	},
+	beforeUnmount() {
+		this.lazy || this.gallery.destroy();
+	},
+	methods: {
+		init({ container: e, options: t }) {
+			this.gallery = new l(e, t);
+		},
+		show({ container: e, options: t, index: n } = {}) {
+			e = e || this.$refs.wrapper, t = t || {
+				navbar: !1,
+				backdrop: "static",
+				url: this.url,
+				loop: !1,
+				initialViewIndex: n || 0,
+				hidden: () => {
+					this.gallery.destroy(), this.gallery = null;
+				}
+			}, this.gallery || (this.init({
+				container: e,
+				options: t
+			}), this.gallery.show());
+		}
+	}
+}, d = {
+	ref: "wrapper",
+	class: "image-viewer"
+}, f = ["data-src", "alt"];
+function p(e, l, u, p, m, h) {
+	return c((i(), n("div", d, [o(e.$slots, "default", {}, () => [(i(!0), n(t, null, a(u.images, (e) => (i(), n("img", {
+		key: e.src,
+		class: "image-item",
+		style: r({ backgroundImage: `url('${e.src}')` }),
+		"data-src": e.src,
+		alt: e.alt
+	}, null, 12, f))), 128))])], 512)), [[s, !u.lazy]]);
+}
+var m = /* @__PURE__ */ e(u, [["render", p]]);
+//#endregion
+export { m as default };

package/image-viewer/style.css

@@ -0,0 +1 @@
+.image-viewer .image-item{cursor:pointer;background-color:#0000;background-position:50%;background-repeat:no-repeat;background-size:cover;border:none;outline:none;width:100px;height:100px;display:inline-block}.viewer-backdrop{background-color:#5e5e5e}