@web-utils/form-ui 1.0.0-beta85 → 1.0.0-beta87

package/image-preview/index.mjs

@@ -1,201 +1,2 @@
-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 };
+import { t as e } from "../chunks/BhIjXcRj2.mjs";
+export { e as default };

package/image-preview/style.css

@@ -1 +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}
+.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}

package/image-viewer/index.d.ts

@@ -19,7 +19,7 @@ declare const _default: import('vue').DefineComponent<globalThis.ExtractPropType
     };
     lazy: BooleanConstructor;
 }>> & Readonly<{}>, {
-    lazy: boolean;
     url: string;
+    lazy: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/image-viewer/index.mjs

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