@gct-paas/core-web 0.1.4-dev.18 → 0.1.4-dev.19

package/es/modules/{Cropper/src/CropperFree.vue_vue_type_style_index_0_scoped_dc019220_lang.css → picture-cropper/src/CropperFree.vue_vue_type_style_index_0_scoped_f287eb8f_lang.css}

@@ -1,4 +1,4 @@
-.cropper-photo[data-v-dc019220] {
+.cropper-photo[data-v-f287eb8f] {
   display: inline-block;
   position: relative;
   width: var(--width, 200px);
@@ -7,7 +7,7 @@
   text-align: center;
   cursor: pointer;
 }
-.cropper-photo__trigger[data-v-dc019220] {
+.cropper-photo__trigger[data-v-f287eb8f] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19,25 +19,25 @@
   background: #fbfbfc;
   color: #9b9b9b;
 }
-.cropper-photo__trigger .iconfont[data-v-dc019220] {
+.cropper-photo__trigger .iconfont[data-v-f287eb8f] {
   color: #c3c3c3;
   font-size: 32px;
 }
-.cropper-photo__trigger .ant-icon[data-v-dc019220] {
+.cropper-photo__trigger .ant-icon[data-v-f287eb8f] {
   margin-bottom: 3px;
   color: #666;
 }
-.cropper-photo__trigger .prompt[data-v-dc019220],
-.cropper-photo__trigger .auxiliary[data-v-dc019220] {
+.cropper-photo__trigger .prompt[data-v-f287eb8f],
+.cropper-photo__trigger .auxiliary[data-v-f287eb8f] {
   margin: 0;
 }
-.cropper-photo__trigger .prompt[data-v-dc019220] {
+.cropper-photo__trigger .prompt[data-v-f287eb8f] {
   color: #797a7d;
 }
-.cropper-photo__trigger .auxiliary[data-v-dc019220] {
+.cropper-photo__trigger .auxiliary[data-v-f287eb8f] {
   color: #c3c3c3;
 }
-.cropper-photo__mask[data-v-dc019220] {
+.cropper-photo__mask[data-v-f287eb8f] {
   display: flex;
   position: absolute;
   top: 0;
@@ -51,31 +51,31 @@
   opacity: 0;
   background: rgba(0, 0, 0, 0.4);
 }
-.cropper-photo__mask .anticon[data-v-dc019220] {
+.cropper-photo__mask .anticon[data-v-f287eb8f] {
   margin-right: 20px;
 }
-.cropper-photo__mask .anticon[data-v-dc019220]:last-child {
+.cropper-photo__mask .anticon[data-v-f287eb8f]:last-child {
   margin-right: 0;
 }
-.cropper-photo__mask[data-v-dc019220]:hover {
+.cropper-photo__mask[data-v-f287eb8f]:hover {
   opacity: 40;
 }
-.cropper-photo__wrapper[data-v-dc019220] {
+.cropper-photo__wrapper[data-v-f287eb8f] {
   width: 100%;
   height: 100%;
   border: 1px solid var(--gct-color-border);
   border-radius: 4px;
 }
-.cropper-photo__wrapper img[data-v-dc019220] {
+.cropper-photo__wrapper img[data-v-f287eb8f] {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
-.not-allow[data-v-dc019220] {
+.not-allow[data-v-f287eb8f] {
   cursor: default;
   pointer-events: none;
 }
-.defult-img[data-v-dc019220] {
+.defult-img[data-v-f287eb8f] {
   position: absolute;
   z-index: 2;
   border: 1px solid #d9d9d9;

package/es/modules/picture-preview/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ImagePreview } from './src/picture-preview.vue';
+export { createImgPreview } from './src/functional';

package/es/modules/picture-preview/index.mjs

@@ -0,0 +1,2 @@
+import "./src/picture-preview.vue.mjs";
+import "./src/functional.mjs";

package/es/modules/picture-preview/src/Functional.vue.d.ts

@@ -0,0 +1,60 @@
+import { PropType } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    show: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    imageList: {
+        type: PropType<string[]>;
+        default: null;
+    };
+    index: {
+        type: PropType<number>;
+        default: number;
+    };
+    scaleStep: {
+        type: PropType<number>;
+    };
+    defaultWidth: {
+        type: PropType<number>;
+    };
+    maskClosable: {
+        type: PropType<boolean>;
+    };
+    rememberState: {
+        type: PropType<boolean>;
+    };
+}>, () => false | import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("img-load" | "img-error")[], "img-load" | "img-error", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    show: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    imageList: {
+        type: PropType<string[]>;
+        default: null;
+    };
+    index: {
+        type: PropType<number>;
+        default: number;
+    };
+    scaleStep: {
+        type: PropType<number>;
+    };
+    defaultWidth: {
+        type: PropType<number>;
+    };
+    maskClosable: {
+        type: PropType<boolean>;
+    };
+    rememberState: {
+        type: PropType<boolean>;
+    };
+}>> & Readonly<{
+    "onImg-load"?: ((...args: any[]) => any) | undefined;
+    "onImg-error"?: ((...args: any[]) => any) | undefined;
+}>, {
+    index: number;
+    imageList: string[];
+    show: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/modules/picture-preview/src/Functional.vue.mjs

@@ -0,0 +1,6 @@
+import Functional_vue_vue_type_script_lang_default from "./Functional.vue_vue_type_script_lang.mjs";
+import './Functional.vue_vue_type_style_index_0_lang.css';/* empty css                                                 */
+//#region src/modules/picture-preview/src/Functional.vue
+var Functional_default = Functional_vue_vue_type_script_lang_default;
+//#endregion
+export { Functional_default as default };

package/es/modules/picture-preview/src/Functional.vue_vue_type_script_lang.mjs

@@ -0,0 +1,287 @@
+import { computed, createTextVNode, createVNode, defineComponent, reactive, ref, unref, watchEffect } from "vue";
+import { CloseOutlined, LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
+//#region src/modules/picture-preview/src/Functional.vue?vue&type=script&lang.tsx
+var StatueEnum = /* @__PURE__ */ function(StatueEnum) {
+	StatueEnum[StatueEnum["LOADING"] = 0] = "LOADING";
+	StatueEnum[StatueEnum["DONE"] = 1] = "DONE";
+	StatueEnum[StatueEnum["FAIL"] = 2] = "FAIL";
+	return StatueEnum;
+}(StatueEnum || {});
+var props = {
+	show: {
+		type: Boolean,
+		default: false
+	},
+	imageList: {
+		type: Array,
+		default: null
+	},
+	index: {
+		type: Number,
+		default: 0
+	},
+	scaleStep: { type: Number },
+	defaultWidth: { type: Number },
+	maskClosable: { type: Boolean },
+	rememberState: { type: Boolean }
+};
+var prefixCls = "img-preview";
+var Functional_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ImagePreview",
+	props,
+	emits: ["img-load", "img-error"],
+	setup(props, { expose, emit }) {
+		const stateMap = /* @__PURE__ */ new Map();
+		const imgState = reactive({
+			currentUrl: "",
+			imgScale: 1,
+			imgRotate: 0,
+			imgTop: 0,
+			imgLeft: 0,
+			status: StatueEnum.LOADING,
+			currentIndex: 0,
+			moveX: 0,
+			moveY: 0,
+			show: props.show
+		});
+		const wrapElRef = ref(null);
+		const imgElRef = ref(null);
+		function init() {
+			initMouseWheel();
+			const { index, imageList } = props;
+			if (!imageList || !imageList.length) throw new Error("imageList is undefined");
+			imgState.currentIndex = index;
+			handleIChangeImage(imageList[index]);
+		}
+		function initState() {
+			imgState.imgScale = 1;
+			imgState.imgRotate = 0;
+			imgState.imgTop = 0;
+			imgState.imgLeft = 0;
+		}
+		function initMouseWheel() {
+			const wrapEl = unref(wrapElRef);
+			if (!wrapEl) return;
+			wrapEl.onmousewheel = scrollFunc;
+			document.body.addEventListener("DOMMouseScroll", scrollFunc);
+			document.ondragstart = function() {
+				return false;
+			};
+		}
+		const getScaleStep = computed(() => {
+			const scaleStep = props?.scaleStep ?? 0;
+			if (scaleStep > 0 && scaleStep < 100) return scaleStep / 100;
+			else return imgState.imgScale / 10;
+		});
+		function scrollFunc(e) {
+			e = e || window.event;
+			e.delta = e.wheelDelta || -e.detail;
+			e.preventDefault();
+			if (e.delta > 0) scaleFunc(getScaleStep.value);
+			if (e.delta < 0) scaleFunc(-getScaleStep.value);
+		}
+		function scaleFunc(num) {
+			const MIN_SCALE = .02;
+			const GRA = .1;
+			if (imgState.imgScale <= .2 && num < 0) return;
+			imgState.imgScale += num * GRA;
+			if (imgState.imgScale < 0) imgState.imgScale = MIN_SCALE;
+		}
+		function rotateFunc(deg) {
+			imgState.imgRotate += deg;
+		}
+		function handleMouseUp() {
+			const imgEl = unref(imgElRef);
+			if (!imgEl) return;
+			imgEl.onmousemove = null;
+		}
+		function handleIChangeImage(url) {
+			imgState.status = StatueEnum.LOADING;
+			const img = new Image();
+			img.src = url;
+			img.onload = (e) => {
+				if (imgState.currentUrl !== url) {
+					const ele = e.composedPath();
+					if (props.rememberState) {
+						stateMap.set(imgState.currentUrl, {
+							scale: imgState.imgScale,
+							top: imgState.imgTop,
+							left: imgState.imgLeft,
+							rotate: imgState.imgRotate
+						});
+						const stateInfo = stateMap.get(url);
+						if (stateInfo) {
+							imgState.imgScale = stateInfo.scale;
+							imgState.imgTop = stateInfo.top;
+							imgState.imgRotate = stateInfo.rotate;
+							imgState.imgLeft = stateInfo.left;
+						} else {
+							initState();
+							if (props.defaultWidth) imgState.imgScale = props.defaultWidth / ele[0].naturalWidth;
+						}
+					} else if (props.defaultWidth) imgState.imgScale = props.defaultWidth / ele[0].naturalWidth;
+					ele && emit("img-load", {
+						index: imgState.currentIndex,
+						dom: ele[0],
+						url
+					});
+				}
+				imgState.currentUrl = url;
+				imgState.status = StatueEnum.DONE;
+			};
+			img.onerror = (e) => {
+				const ele = e.composedPath();
+				ele && emit("img-error", {
+					index: imgState.currentIndex,
+					dom: ele[0],
+					url
+				});
+				imgState.status = StatueEnum.FAIL;
+			};
+		}
+		function handleClose(e) {
+			e && e.stopPropagation();
+			close();
+		}
+		function close() {
+			imgState.show = false;
+			document.body.removeEventListener("DOMMouseScroll", scrollFunc);
+			document.ondragstart = null;
+		}
+		function resume() {
+			initState();
+		}
+		expose({
+			resume,
+			close,
+			prev: handleChange.bind(null, "left"),
+			next: handleChange.bind(null, "right"),
+			setScale: (scale) => {
+				if (scale > 0 && scale <= 10) imgState.imgScale = scale;
+			},
+			setRotate: (rotate) => {
+				imgState.imgRotate = rotate;
+			}
+		});
+		function handleChange(direction) {
+			const { currentIndex } = imgState;
+			const { imageList } = props;
+			if (direction === "left") {
+				imgState.currentIndex -= 1;
+				if (currentIndex <= 0) imgState.currentIndex = imageList.length - 1;
+			}
+			if (direction === "right") {
+				imgState.currentIndex += 1;
+				if (currentIndex >= imageList.length - 1) imgState.currentIndex = 0;
+			}
+			handleIChangeImage(imageList[imgState.currentIndex]);
+		}
+		function handleAddMoveListener(e) {
+			e = e || window.event;
+			imgState.moveX = e.clientX;
+			imgState.moveY = e.clientY;
+			const imgEl = unref(imgElRef);
+			if (imgEl) imgEl.onmousemove = moveFunc;
+		}
+		function moveFunc(e) {
+			e = e || window.event;
+			e.preventDefault();
+			const movementX = e.clientX - imgState.moveX;
+			const movementY = e.clientY - imgState.moveY;
+			imgState.imgLeft += movementX;
+			imgState.imgTop += movementY;
+			imgState.moveX = e.clientX;
+			imgState.moveY = e.clientY;
+		}
+		const getImageStyle = computed(() => {
+			const { imgScale, imgRotate, imgTop, imgLeft } = imgState;
+			return {
+				transform: `scale(${imgScale}) rotate(${imgRotate}deg)`,
+				marginTop: `${imgTop}px`,
+				marginLeft: `${imgLeft}px`,
+				maxWidth: props.defaultWidth ? "unset" : "100%"
+			};
+		});
+		const getIsMultipleImage = computed(() => {
+			const { imageList } = props;
+			return imageList.length > 1;
+		});
+		watchEffect(() => {
+			if (props.show) init();
+			if (props.imageList) initState();
+		});
+		const handleMaskClick = (e) => {
+			if (props.maskClosable && e.target && e.target.classList.contains(`${prefixCls}-content`)) handleClose(e);
+		};
+		const renderClose = () => {
+			return createVNode("div", {
+				"class": `${prefixCls}__close`,
+				"onClick": handleClose
+			}, [createVNode(CloseOutlined, { "class": `${prefixCls}__close-icon` }, null)]);
+		};
+		const renderIndex = () => {
+			if (!unref(getIsMultipleImage)) return null;
+			const { currentIndex } = imgState;
+			const { imageList } = props;
+			return createVNode("div", { "class": `${prefixCls}__index` }, [
+				currentIndex + 1,
+				createTextVNode(" / "),
+				imageList.length
+			]);
+		};
+		const renderController = () => {
+			return createVNode("div", { "class": `${prefixCls}__controller` }, [
+				createVNode("div", {
+					"class": `${prefixCls}__controller-item`,
+					"onClick": () => scaleFunc(-getScaleStep.value)
+				}, [createVNode("img", { "src": "/extras-assets/svg/preview/unscale.svg" }, null)]),
+				createVNode("div", {
+					"class": `${prefixCls}__controller-item`,
+					"onClick": () => scaleFunc(getScaleStep.value)
+				}, [createVNode("img", { "src": "/extras-assets/svg/preview/scale.svg" }, null)]),
+				createVNode("div", {
+					"class": `${prefixCls}__controller-item`,
+					"onClick": resume
+				}, [createVNode("img", { "src": "/extras-assets/svg/preview/resume.svg" }, null)]),
+				createVNode("div", {
+					"class": `${prefixCls}__controller-item`,
+					"onClick": () => rotateFunc(-90)
+				}, [createVNode("img", { "src": "/extras-assets/svg/preview/unrotate.svg" }, null)]),
+				createVNode("div", {
+					"class": `${prefixCls}__controller-item`,
+					"onClick": () => rotateFunc(90)
+				}, [createVNode("img", { "src": "/extras-assets/svg/preview/p-rotate.svg" }, null)])
+			]);
+		};
+		const renderArrow = (direction) => {
+			if (!unref(getIsMultipleImage)) return null;
+			return createVNode("div", {
+				"class": [`${prefixCls}__arrow`, direction],
+				"onClick": () => handleChange(direction)
+			}, [direction === "left" ? createVNode(LeftOutlined, null, null) : createVNode(RightOutlined, null, null)]);
+		};
+		return () => {
+			return imgState.show && createVNode("div", {
+				"class": prefixCls,
+				"ref": wrapElRef,
+				"onMouseup": handleMouseUp,
+				"onClick": handleMaskClick
+			}, [createVNode("div", { "class": `${prefixCls}-content` }, [
+				createVNode("img", {
+					"style": unref(getImageStyle),
+					"class": [`${prefixCls}-image`, imgState.status === StatueEnum.DONE ? "" : "hidden"],
+					"ref": imgElRef,
+					"src": imgState.currentUrl,
+					"onMousedown": handleAddMoveListener
+				}, null),
+				renderClose(),
+				renderIndex(),
+				renderController(),
+				renderArrow("left"),
+				renderArrow("right")
+			])]);
+		};
+	}
+});
+//#endregion
+export { Functional_vue_vue_type_script_lang_default as default };

package/es/modules/picture-preview/src/Functional.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,101 @@
+.img-preview {
+  position: fixed;
+  z-index: 9999;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  user-select: none;
+}
+.img-preview-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--gct-color-white);
+}
+.img-preview-image {
+  transition: transform 0.3s;
+  cursor: pointer;
+}
+.img-preview__close {
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+  transition: all 0.2s;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: var(--gct-color-white);
+  cursor: pointer;
+}
+.img-preview__close-icon {
+  position: absolute;
+  top: 46px;
+  left: 16px;
+  font-size: 16px;
+}
+.img-preview__close:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.img-preview__index {
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  padding: 0 22px;
+  transform: translateX(-50%);
+  border-radius: 15px;
+  background: rgba(109, 109, 109, 0.6);
+  font-size: 16px;
+}
+.img-preview__controller {
+  display: flex;
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  justify-content: center;
+  width: 260px;
+  height: 44px;
+  margin-left: -139px;
+  padding: 0 22px;
+  border-radius: 22px;
+  background: rgba(109, 109, 109, 0.6);
+}
+.img-preview__controller-item {
+  display: flex;
+  height: 100%;
+  padding: 0 9px;
+  transition: all 0.2s;
+  font-size: 24px;
+  cursor: pointer;
+}
+.img-preview__controller-item:hover {
+  transform: scale(1.2);
+}
+.img-preview__controller-item img {
+  width: 1em;
+}
+.img-preview__arrow {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  transition: all 0.2s;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+  font-size: 28px;
+  cursor: pointer;
+}
+.img-preview__arrow:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.img-preview__arrow.left {
+  left: 50px;
+}
+.img-preview__arrow.right {
+  right: 50px;
+}

package/es/modules/picture-preview/src/functional.d.ts

@@ -0,0 +1,2 @@
+import { Options } from './typing';
+export declare function createImgPreview(options: Options): Record<string, any> | null | undefined;

package/es/modules/picture-preview/src/functional.mjs

@@ -0,0 +1,19 @@
+import Functional_default from "./Functional.vue.mjs";
+import { createVNode, render } from "vue";
+//#region src/modules/picture-preview/src/functional.ts
+var instance = null;
+function createImgPreview(options) {
+	const propsData = {};
+	const container = document.createElement("div");
+	Object.assign(propsData, {
+		show: true,
+		index: 0,
+		scaleStep: 100
+	}, options);
+	instance = createVNode(Functional_default, propsData);
+	render(instance, container);
+	document.body.appendChild(container);
+	return instance.component?.exposed;
+}
+//#endregion
+export { createImgPreview };

package/es/modules/picture-preview/src/picture-preview.vue.d.ts

@@ -0,0 +1,51 @@
+import { PropType } from 'vue';
+interface ImageProps {
+    alt?: string;
+    fallback?: string;
+    src: string;
+    width: string | number;
+    height?: string | number;
+    placeholder?: string | boolean;
+    preview?: boolean | {
+        visible?: boolean;
+        onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
+        getContainer: string | HTMLElement | (() => HTMLElement);
+    };
+}
+type ImageItem = string | ImageProps;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    functional: {
+        type: BooleanConstructor;
+    };
+    imageList: {
+        type: PropType<ImageItem[]>;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    functional: {
+        type: BooleanConstructor;
+    };
+    imageList: {
+        type: PropType<ImageItem[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    functional: boolean;
+    imageList: ImageItem[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/modules/picture-preview/src/picture-preview.vue.mjs

@@ -0,0 +1,6 @@
+import picture_preview_vue_vue_type_script_setup_true_lang_default from "./picture-preview.vue_vue_type_script_setup_true_lang.mjs";
+import './picture-preview.vue_vue_type_style_index_0_lang.css';/* empty css                                                      */
+//#region src/modules/picture-preview/src/picture-preview.vue
+var picture_preview_default = picture_preview_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { picture_preview_default as default };

package/es/modules/picture-preview/src/picture-preview.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,49 @@
+import { Fragment, computed, createBlock, createElementBlock, createSlots, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, unref, withCtx } from "vue";
+import { isString } from "lodash-es";
+import { useNamespace } from "@gct-paas/core";
+import { Image } from "ant-design-vue";
+//#region src/modules/picture-preview/src/picture-preview.vue?vue&type=script&setup=true&lang.ts
+var picture_preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "picture-preview",
+	props: {
+		functional: { type: Boolean },
+		imageList: {
+			type: Array,
+			default: () => []
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const ns = useNamespace("image-preview");
+		const getImageList = computed(() => {
+			return props.imageList.map((item) => {
+				if (isString(item)) return {
+					src: item,
+					placeholder: false
+				};
+				return item;
+			});
+		});
+		return (_ctx, _cache) => {
+			const _component_PreviewGroup = resolveComponent("PreviewGroup");
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ns).b()) }, [createVNode(_component_PreviewGroup, null, {
+				default: withCtx(() => [!__props.imageList || _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(getImageList.value, (item) => {
+					return openBlock(), createBlock(unref(Image), mergeProps({
+						key: item.src,
+						ref_for: true
+					}, item), createSlots({ _: 2 }, [item.placeholder ? {
+						name: "placeholder",
+						fn: withCtx(() => [createVNode(unref(Image), mergeProps({ ref_for: true }, item, {
+							src: item.placeholder,
+							preview: false
+						}), null, 16, ["src"])]),
+						key: "0"
+					} : void 0]), 1040);
+				}), 128))]),
+				_: 3
+			})], 2);
+		};
+	}
+});
+//#endregion
+export { picture_preview_vue_vue_type_script_setup_true_lang_default as default };