@web-utils/form-ui 1.0.0-beta72 → 1.0.0-beta74

package/image-preview/index.mjs

@@ -1,2 +1,201 @@
-import { t as e } from "../chunks/ZBsqmcIN2.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-preview/style.css

@@ -1 +1 @@
-.el-carousel{--el-carousel-arrow-font-size:12px;--el-carousel-arrow-size:36px;--el-carousel-arrow-background:#1f2d3d1c;--el-carousel-arrow-hover-background:#1f2d3d3b;--el-carousel-indicator-width:30px;--el-carousel-indicator-height:2px;--el-carousel-indicator-padding-horizontal:4px;--el-carousel-indicator-padding-vertical:12px;--el-carousel-indicator-out-color:var(--el-border-color-hover);position:relative}.el-carousel--horizontal,.el-carousel--vertical{overflow:hidden}.el-carousel.is-vertical-outside{flex-direction:row;align-items:center;display:flex}.el-carousel.is-vertical-outside .el-carousel__container{flex:1}.el-carousel__container{height:300px;position:relative}.el-carousel__arrow{height:var(--el-carousel-arrow-size);width:var(--el-carousel-arrow-size);cursor:pointer;transition:var(--el-transition-duration);background-color:var(--el-carousel-arrow-background);color:#fff;z-index:10;text-align:center;font-size:var(--el-carousel-arrow-font-size);border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.el-carousel__arrow:hover{background-color:var(--el-carousel-arrow-hover-background)}.el-carousel__arrow i{cursor:pointer}.el-carousel__indicators{z-index:calc(var(--el-index-normal) + 1);margin:0;padding:0;list-style:none;position:absolute}.el-carousel__indicators--horizontal{bottom:0;left:50%;transform:translate(-50%)}.el-carousel__indicators--vertical{top:50%;right:0;transform:translateY(-50%)}.el-carousel__indicators--outside{text-align:center;position:static;transform:none}.el-carousel__indicators--outside .el-carousel__indicator:hover button{opacity:.64}.el-carousel__indicators--outside button{background-color:var(--el-carousel-indicator-out-color);opacity:.24}.el-carousel__indicators--right{right:0}.el-carousel__indicators--labels .el-carousel__button{color:#000;padding:2px 18px;font-size:12px}.el-carousel__indicators--labels .el-carousel__indicator{padding:6px 4px}.el-carousel__indicator{cursor:pointer;background-color:#0000}.el-carousel__indicator:hover button{opacity:.72}.el-carousel__indicator--horizontal{padding:var(--el-carousel-indicator-padding-vertical) var(--el-carousel-indicator-padding-horizontal);display:inline-block}.el-carousel__indicator--vertical{padding:var(--el-carousel-indicator-padding-horizontal) var(--el-carousel-indicator-padding-vertical)}.el-carousel__indicator--vertical .el-carousel__button{width:var(--el-carousel-indicator-height);height:calc(var(--el-carousel-indicator-width) / 2)}.el-carousel__indicator.is-active button{opacity:1}.el-carousel__button{opacity:.48;width:var(--el-carousel-indicator-width);height:var(--el-carousel-indicator-height);cursor:pointer;transition:var(--el-transition-duration);background-color:#fff;border:none;outline:none;margin:0;padding:0;display:block}.el-carousel__indicators--labels .el-carousel__button{width:auto;height:auto}.carousel-arrow-left-enter-from,.carousel-arrow-left-leave-active{opacity:0;transform:translateY(-50%)translate(-10px)}.carousel-arrow-right-enter-from,.carousel-arrow-right-leave-active{opacity:0;transform:translateY(-50%)translate(10px)}.el-transitioning{filter:url(#elCarouselHorizontal)}.el-transitioning-vertical{filter:url(#elCarouselVertical)}.el-carousel__item{width:100%;height:100%;z-index:calc(var(--el-index-normal) - 1);display:inline-block;position:absolute;top:0;left:0;overflow:hidden}.el-carousel__item.is-active{z-index:calc(var(--el-index-normal) - 1)}.el-carousel__item.is-animating{transition:transform .4s ease-in-out}.el-carousel__item--card{width:50%;transition:transform .4s ease-in-out}.el-carousel__item--card.is-in-stage{cursor:pointer;z-index:var(--el-index-normal)}.el-carousel__item--card.is-in-stage:hover .el-carousel__mask,.el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask{opacity:.12}.el-carousel__item--card.is-active{z-index:calc(var(--el-index-normal) + 1)}.el-carousel__item--card-vertical{width:100%;height:50%}.el-carousel__mask{background-color:var(--el-color-white);opacity:.24;width:100%;height:100%;transition:var(--el-transition-duration-fast);position:absolute;top:0;left:0}.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}
+.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.mjs

@@ -1,4 +1,4 @@
-import { t as e } from "../chunks/BQ0e8kIi.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";