@web-utils/form-ui 1.0.0-beta1 → 1.0.0-beta100

package/iframe-window/style.css

@@ -0,0 +1 @@
+.iframe-window.el-dialog .el-dialog__body{position:relative}.iframe-window .iframe-window-iframe{border:none;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}

package/image-cropper/index.d.ts

@@ -0,0 +1,21 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    appendToBody: BooleanConstructor;
+    option: ObjectConstructor;
+    modelValue: {
+        type: globalThis.PropType<boolean>;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    appendToBody: BooleanConstructor;
+    option: ObjectConstructor;
+    modelValue: {
+        type: globalThis.PropType<boolean>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    appendToBody: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/image-cropper/index.mjs

@@ -0,0 +1,155 @@
+import { t as e } from "../chunks/B24kbvxB.mjs";
+import { t } from "../chunks/DTeHffqJ.mjs";
+import { createBlock as n, createCommentVNode as r, createElementVNode as i, createTextVNode as a, createVNode as o, mergeModels as s, normalizeStyle as c, openBlock as l, ref as u, unref as d, useModel as f, useTemplateRef as p, withCtx as m } from "vue";
+import { dataURLtoFile as h } from "@web-utils/core";
+import { VueCropper as g } from "vue-cropper";
+import "./style.css";
+//#region src/components/image-cropper/ImageCropper.vue
+var _ = { class: "cropper-content" }, v = { class: "cropper-box" }, y = { class: "cropper" }, b = { class: "footer-btn" }, x = { class: "show-preview" }, S = ["src"], C = /* @__PURE__ */ Object.assign({ name: "ImageCropper" }, {
+	__name: "ImageCropper",
+	props: /* @__PURE__ */ s({
+		appendToBody: Boolean,
+		option: Object
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s) {
+		let C = f(s, "modelValue"), w = s, T = p("cropper"), E = p("dialog"), D = u({}), O = (e) => {
+			e = e || 1, T.value.changeScale(e);
+		}, k = () => {
+			T.value.rotateLeft();
+		}, A = () => {
+			T.value.rotateRight();
+		}, j = (e) => {
+			D.value = e;
+		}, M = () => {
+			E.value.close(), T.value.getCropData((e) => {
+				var t, n;
+				let r = e;
+				w.option.type === "file" && (r = h(e, `${(/* @__PURE__ */ new Date()).getTime()}.${w.option.outputType}`)), (t = (n = w.option).callback) == null || t.call(n, r);
+			});
+		}, N = (e) => {
+			var t, n;
+			e == null || e(), (t = (n = w.option).cancel) == null || t.call(n), typeof w.option.beforeClose == "function" && w.option.beforeClose();
+		};
+		return (u, f) => {
+			let p = t, h = e;
+			return l(), n(h, {
+				ref_key: "dialog",
+				ref: E,
+				modelValue: C.value,
+				"onUpdate:modelValue": f[3] || (f[3] = (e) => C.value = e),
+				class: "avue-cropper",
+				"before-close": N,
+				title: "图片剪裁",
+				"close-on-press-escape": !1,
+				"close-on-click-modal": !1,
+				"append-to-body": s.appendToBody,
+				width: "1000px"
+			}, {
+				footer: m(() => [o(p, {
+					type: "primary",
+					onClick: M
+				}, {
+					default: m(() => [...f[4] || (f[4] = [a("确 定", -1)])]),
+					_: 1
+				}), o(p, { onClick: f[2] || (f[2] = (e) => N()) }, {
+					default: m(() => [...f[5] || (f[5] = [a("取 消", -1)])]),
+					_: 1
+				})]),
+				default: m(() => [i("div", _, [
+					i("div", v, [
+						i("div", y, [o(d(g), {
+							ref_key: "cropper",
+							ref: T,
+							img: s.option.img,
+							"output-size": s.option.outputSize,
+							"output-type": s.option.outputType,
+							info: s.option.info,
+							"can-scale": s.option.canScale,
+							"auto-crop": s.option.autoCrop,
+							"auto-crop-width": s.option.autoCropWidth,
+							"auto-crop-height": s.option.autoCropHeight,
+							fixed: s.option.fixed,
+							"fixed-number": s.option.fixedNumber,
+							full: s.option.full,
+							"fixed-box": s.option.fixedBox,
+							"can-move": s.option.canMove,
+							"can-move-box": s.option.canMoveBox,
+							original: s.option.original,
+							"center-box": s.option.centerBox,
+							height: s.option.height,
+							"info-true": s.option.infoTrue,
+							"max-img-size": s.option.maxImgSize,
+							enlarge: s.option.enlarge,
+							mode: s.option.mode,
+							onRealTime: j
+						}, 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"
+						])]),
+						r("底部操作工具按钮"),
+						i("div", b, [
+							o(p, {
+								type: "primary",
+								icon: "el-icon-zoom-in",
+								onClick: f[0] || (f[0] = (e) => O(1))
+							}),
+							o(p, {
+								type: "primary",
+								icon: "el-icon-zoom-out",
+								onClick: f[1] || (f[1] = (e) => O(-1))
+							}),
+							o(p, {
+								type: "primary",
+								icon: "el-icon-refresh-left",
+								onClick: k
+							}),
+							o(p, {
+								type: "primary",
+								icon: "el-icon-refresh-right",
+								onClick: A
+							})
+						])
+					]),
+					r("预览效果图"),
+					i("div", x, [i("div", {
+						style: c(d(D).div),
+						class: "preview"
+					}, [i("img", {
+						src: d(D).url,
+						style: c(d(D).img),
+						alt: ""
+					}, null, 12, S)], 4)])
+				])]),
+				_: 1
+			}, 8, ["modelValue", "append-to-body"]);
+		};
+	}
+});
+//#endregion
+export { C as default };

package/image-cropper/style.css

@@ -0,0 +1 @@
+.vue-cropper[data-v-a742df44]{box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;text-align:left;direction:ltr;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);width:100%;height:100%;position:relative}.cropper-box[data-v-a742df44],.cropper-box-canvas[data-v-a742df44],.cropper-drag-box[data-v-a742df44],.cropper-crop-box[data-v-a742df44],.cropper-face[data-v-a742df44]{-webkit-user-select:none;user-select:none;position:absolute;top:0;bottom:0;left:0;right:0}.cropper-box-canvas img[data-v-a742df44]{text-align:left;-webkit-user-select:none;user-select:none;max-width:none;max-height:none;position:relative;transform:none}.cropper-box[data-v-a742df44]{overflow:hidden}.cropper-move[data-v-a742df44]{cursor:move}.cropper-crop[data-v-a742df44]{cursor:crosshair}.cropper-modal[data-v-a742df44]{background:#00000080}.cropper-view-box[data-v-a742df44]{-webkit-user-select:none;user-select:none;outline:1px solid #3399ffbf;width:100%;height:100%;display:block;overflow:hidden}.cropper-view-box img[data-v-a742df44]{-webkit-user-select:none;user-select:none;text-align:left;max-width:none;max-height:none}.cropper-face[data-v-a742df44]{opacity:.1;background-color:#fff;top:0;left:0}.crop-info[data-v-a742df44]{text-align:center;color:#fff;background-color:#000c;min-width:65px;font-size:12px;line-height:20px;position:absolute;left:0}.crop-line[data-v-a742df44]{opacity:.1;width:100%;height:100%;display:block;position:absolute}.line-w[data-v-a742df44]{cursor:n-resize;height:5px;top:-3px;left:0}.line-a[data-v-a742df44]{cursor:w-resize;width:5px;top:0;left:-3px}.line-s[data-v-a742df44]{cursor:s-resize;height:5px;bottom:-3px;left:0}.line-d[data-v-a742df44]{cursor:e-resize;width:5px;top:0;right:-3px}.crop-point[data-v-a742df44]{opacity:.75;background-color:#39f;border-radius:100%;width:8px;height:8px;position:absolute}.point1[data-v-a742df44]{cursor:nw-resize;top:-4px;left:-4px}.point2[data-v-a742df44]{cursor:n-resize;margin-left:-3px;top:-5px;left:50%}.point3[data-v-a742df44]{cursor:ne-resize;top:-4px;right:-4px}.point4[data-v-a742df44]{cursor:w-resize;margin-top:-3px;top:50%;left:-4px}.point5[data-v-a742df44]{cursor:e-resize;margin-top:-3px;top:50%;right:-4px}.point6[data-v-a742df44]{cursor:sw-resize;bottom:-5px;left:-4px}.point7[data-v-a742df44]{cursor:s-resize;margin-left:-3px;bottom:-5px;left:50%}.point8[data-v-a742df44]{cursor:se-resize;bottom:-5px;right:-4px}@media screen and (max-width:500px){.crop-point[data-v-a742df44]{opacity:.45;background-color:#39f;border-radius:100%;width:20px;height:20px;position:absolute}.point1[data-v-a742df44]{top:-10px;left:-10px}.point2[data-v-a742df44],.point4[data-v-a742df44],.point5[data-v-a742df44],.point7[data-v-a742df44]{display:none}.point3[data-v-a742df44]{top:-10px;right:-10px}.point4[data-v-a742df44]{top:0;left:0}.point6[data-v-a742df44]{bottom:-10px;left:-10px}.point8[data-v-a742df44]{bottom:-10px;right:-10px}}.avue-cropper .cropper-content{justify-content:flex-end;display:flex}.avue-cropper .cropper-content .cropper-box{flex:1;width:100%}.avue-cropper .cropper-content .cropper-box .cropper{width:auto;height:300px}.avue-cropper .cropper-content .show-preview{flex:1;justify-content:center;display:flex}.avue-cropper .cropper-content .show-preview .preview{background:#ccc;border:1px solid #67c23a;overflow:hidden}.avue-cropper .cropper-content .footer-btn{justify-content:center;margin-top:30px;padding-right:10px;display:flex}

package/image-preview/index.d.ts

@@ -0,0 +1,62 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    visible: BooleanConstructor;
+    beforeClose: FunctionConstructor;
+    closeOnClickModal: BooleanConstructor;
+    click: FunctionConstructor;
+    modal: BooleanConstructor;
+    datas: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    beginIndex: NumberConstructor;
+}>, {}, {
+    left: number;
+    top: number;
+    scale: number;
+    rotate: number;
+    index: number | undefined;
+}, {
+    styleBoxName(): {
+        marginLeft: string;
+        marginTop: string;
+    };
+    styleName(): {
+        transform: string;
+        maxWidth: string;
+        maxHeight: string;
+    };
+    isRrrow(): boolean;
+}, {
+    getName(url: any): any;
+    handlePrint(): void;
+    handlePrev(): void;
+    handleNext(): void;
+    stopItem(): void;
+    isMediaType(item: any): false | "audio" | "video" | "img" | undefined;
+    subScale(): void;
+    addScale(): void;
+    handleChange(): void;
+    move(e: any): void;
+    handleClick(item: any, index: any, df?: boolean): void;
+    close(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "close"[], "close", import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    visible: BooleanConstructor;
+    beforeClose: FunctionConstructor;
+    closeOnClickModal: BooleanConstructor;
+    click: FunctionConstructor;
+    modal: BooleanConstructor;
+    datas: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    beginIndex: NumberConstructor;
+}>> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    visible: boolean;
+    modal: boolean;
+    closeOnClickModal: boolean;
+    datas: unknown[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/image-preview/index.mjs

@@ -0,0 +1,202 @@
+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";
+import "./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,26 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: 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<{}>, {
+    url: string;
+    lazy: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/image-viewer/index.mjs

@@ -0,0 +1,71 @@
+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";
+import "./style.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}