226 lines
7.8 KiB
JavaScript
226 lines
7.8 KiB
JavaScript
var __create = Object.create;
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __getProtoOf = Object.getPrototypeOf;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name2 in all)
|
|
__defProp(target, name2, { get: all[name2], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
// file that has been converted to a CommonJS file using a Babel-
|
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
mod
|
|
));
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
var stdin_exports = {};
|
|
__export(stdin_exports, {
|
|
default: () => stdin_default,
|
|
imagePreviewProps: () => imagePreviewProps
|
|
});
|
|
module.exports = __toCommonJS(stdin_exports);
|
|
var import_vue = require("vue");
|
|
var import_utils = require("../utils");
|
|
var import_use = require("@vant/use");
|
|
var import_use_expose = require("../composables/use-expose");
|
|
var import_icon = require("../icon");
|
|
var import_swipe = require("../swipe");
|
|
var import_popup = require("../popup");
|
|
var import_ImagePreviewItem = __toESM(require("./ImagePreviewItem"));
|
|
const [name, bem] = (0, import_utils.createNamespace)("image-preview");
|
|
const popupProps = ["show", "teleport", "transition", "overlayStyle", "closeOnPopstate"];
|
|
const imagePreviewProps = {
|
|
show: Boolean,
|
|
loop: import_utils.truthProp,
|
|
images: (0, import_utils.makeArrayProp)(),
|
|
minZoom: (0, import_utils.makeNumericProp)(1 / 3),
|
|
maxZoom: (0, import_utils.makeNumericProp)(3),
|
|
overlay: import_utils.truthProp,
|
|
vertical: Boolean,
|
|
closeable: Boolean,
|
|
showIndex: import_utils.truthProp,
|
|
className: import_utils.unknownProp,
|
|
closeIcon: (0, import_utils.makeStringProp)("clear"),
|
|
transition: String,
|
|
beforeClose: Function,
|
|
doubleScale: import_utils.truthProp,
|
|
overlayClass: import_utils.unknownProp,
|
|
overlayStyle: Object,
|
|
swipeDuration: (0, import_utils.makeNumericProp)(300),
|
|
startPosition: (0, import_utils.makeNumericProp)(0),
|
|
showIndicators: Boolean,
|
|
closeOnPopstate: import_utils.truthProp,
|
|
closeOnClickImage: import_utils.truthProp,
|
|
closeOnClickOverlay: import_utils.truthProp,
|
|
closeIconPosition: (0, import_utils.makeStringProp)("top-right"),
|
|
teleport: [String, Object]
|
|
};
|
|
var stdin_default = (0, import_vue.defineComponent)({
|
|
name,
|
|
props: imagePreviewProps,
|
|
emits: ["scale", "close", "closed", "change", "longPress", "update:show"],
|
|
setup(props, {
|
|
emit,
|
|
slots
|
|
}) {
|
|
const swipeRef = (0, import_vue.ref)();
|
|
const activedPreviewItemRef = (0, import_vue.ref)();
|
|
const state = (0, import_vue.reactive)({
|
|
active: 0,
|
|
rootWidth: 0,
|
|
rootHeight: 0,
|
|
disableZoom: false
|
|
});
|
|
const resize = () => {
|
|
if (swipeRef.value) {
|
|
const rect = (0, import_use.useRect)(swipeRef.value.$el);
|
|
state.rootWidth = rect.width;
|
|
state.rootHeight = rect.height;
|
|
swipeRef.value.resize();
|
|
}
|
|
};
|
|
const emitScale = (args) => emit("scale", args);
|
|
const updateShow = (show) => emit("update:show", show);
|
|
const emitClose = () => {
|
|
(0, import_utils.callInterceptor)(props.beforeClose, {
|
|
args: [state.active],
|
|
done: () => updateShow(false)
|
|
});
|
|
};
|
|
const setActive = (active) => {
|
|
if (active !== state.active) {
|
|
state.active = active;
|
|
emit("change", active);
|
|
}
|
|
};
|
|
const renderIndex = () => {
|
|
if (props.showIndex) {
|
|
return (0, import_vue.createVNode)("div", {
|
|
"class": bem("index")
|
|
}, [slots.index ? slots.index({
|
|
index: state.active
|
|
}) : `${state.active + 1} / ${props.images.length}`]);
|
|
}
|
|
};
|
|
const renderCover = () => {
|
|
if (slots.cover) {
|
|
return (0, import_vue.createVNode)("div", {
|
|
"class": bem("cover")
|
|
}, [slots.cover()]);
|
|
}
|
|
};
|
|
const onDragStart = () => {
|
|
state.disableZoom = true;
|
|
};
|
|
const onDragEnd = () => {
|
|
state.disableZoom = false;
|
|
};
|
|
const renderImages = () => (0, import_vue.createVNode)(import_swipe.Swipe, {
|
|
"ref": swipeRef,
|
|
"lazyRender": true,
|
|
"loop": props.loop,
|
|
"class": bem("swipe"),
|
|
"vertical": props.vertical,
|
|
"duration": props.swipeDuration,
|
|
"initialSwipe": props.startPosition,
|
|
"showIndicators": props.showIndicators,
|
|
"indicatorColor": "white",
|
|
"onChange": setActive,
|
|
"onDragEnd": onDragEnd,
|
|
"onDragStart": onDragStart
|
|
}, {
|
|
default: () => [props.images.map((image, index) => (0, import_vue.createVNode)(import_ImagePreviewItem.default, {
|
|
"ref": (item) => {
|
|
if (index === state.active) {
|
|
activedPreviewItemRef.value = item;
|
|
}
|
|
},
|
|
"src": image,
|
|
"show": props.show,
|
|
"active": state.active,
|
|
"maxZoom": props.maxZoom,
|
|
"minZoom": props.minZoom,
|
|
"rootWidth": state.rootWidth,
|
|
"rootHeight": state.rootHeight,
|
|
"disableZoom": state.disableZoom,
|
|
"doubleScale": props.doubleScale,
|
|
"closeOnClickImage": props.closeOnClickImage,
|
|
"closeOnClickOverlay": props.closeOnClickOverlay,
|
|
"vertical": props.vertical,
|
|
"onScale": emitScale,
|
|
"onClose": emitClose,
|
|
"onLongPress": () => emit("longPress", {
|
|
index
|
|
})
|
|
}, {
|
|
image: slots.image
|
|
}))]
|
|
});
|
|
const renderClose = () => {
|
|
if (props.closeable) {
|
|
return (0, import_vue.createVNode)(import_icon.Icon, {
|
|
"role": "button",
|
|
"name": props.closeIcon,
|
|
"class": [bem("close-icon", props.closeIconPosition), import_utils.HAPTICS_FEEDBACK],
|
|
"onClick": emitClose
|
|
}, null);
|
|
}
|
|
};
|
|
const onClosed = () => emit("closed");
|
|
const swipeTo = (index, options) => {
|
|
var _a;
|
|
return (_a = swipeRef.value) == null ? void 0 : _a.swipeTo(index, options);
|
|
};
|
|
(0, import_use_expose.useExpose)({
|
|
resetScale: () => {
|
|
var _a;
|
|
(_a = activedPreviewItemRef.value) == null ? void 0 : _a.resetScale();
|
|
},
|
|
swipeTo
|
|
});
|
|
(0, import_vue.onMounted)(resize);
|
|
(0, import_vue.watch)([import_utils.windowWidth, import_utils.windowHeight], resize);
|
|
(0, import_vue.watch)(() => props.startPosition, (value) => setActive(+value));
|
|
(0, import_vue.watch)(() => props.show, (value) => {
|
|
const {
|
|
images,
|
|
startPosition
|
|
} = props;
|
|
if (value) {
|
|
setActive(+startPosition);
|
|
(0, import_vue.nextTick)(() => {
|
|
resize();
|
|
swipeTo(+startPosition, {
|
|
immediate: true
|
|
});
|
|
});
|
|
} else {
|
|
emit("close", {
|
|
index: state.active,
|
|
url: images[state.active]
|
|
});
|
|
}
|
|
});
|
|
return () => (0, import_vue.createVNode)(import_popup.Popup, (0, import_vue.mergeProps)({
|
|
"class": [bem(), props.className],
|
|
"overlayClass": [bem("overlay"), props.overlayClass],
|
|
"onClosed": onClosed,
|
|
"onUpdate:show": updateShow
|
|
}, (0, import_utils.pick)(props, popupProps)), {
|
|
default: () => [renderClose(), renderImages(), renderIndex(), renderCover()]
|
|
});
|
|
}
|
|
});
|