@antdv-next/mobile 0.0.0-stage → 0.1.1

package/dist/image-preview/ImagePreviewItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,261 @@
+import Spinner_default from "../_base/Spinner.js";
+import { clamp, preventDefault } from "../_util/index.js";
+import { useTouch } from "../_util/hooks/useTouch.js";
+import { useLocale } from "../locale/index.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, reactive, renderSlot, toDisplayString, unref, vShow, watch, withDirectives } from "vue";
+import { PictureOutlined } from "@antdv-next/icons";
+// src/image-preview/ImagePreviewItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["src", "alt"];
+var _hoisted_2 = {
+	key: 0,
+	class: "am-image-preview-status"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "am-image-preview-status"
+};
+var _hoisted_4 = { class: "am-image-preview-status-text" };
+var TAP_TIME = 250;
+var CLOSE_DISTANCE = 100;
+var ImagePreviewItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmImagePreviewItem",
+	__name: "ImagePreviewItem",
+	props: {
+		src: {},
+		alt: {},
+		index: {},
+		active: { type: Boolean },
+		maxZoom: {},
+		minZoom: {},
+		doubleTapZoom: { type: [Boolean, Number] },
+		swipeToClose: { type: Boolean },
+		rootWidth: {},
+		rootHeight: {},
+		imageClass: {},
+		imageStyle: {}
+	},
+	emits: [
+		"tap",
+		"swipeClose",
+		"dragProgress"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const locale = useLocale("Image");
+		const touch = useTouch();
+		const state = reactive({
+			scale: 1,
+			moveX: 0,
+			moveY: 0,
+			moving: false,
+			zooming: false,
+			/** distance the un-zoomed image is dragged down */
+			dragY: 0,
+			dragging: false,
+			/** naturalHeight / naturalWidth */
+			imageRatio: 0,
+			status: "loading"
+		});
+		const vertical = computed(() => {
+			const rootRatio = props.rootHeight / props.rootWidth;
+			return state.imageRatio > rootRatio;
+		});
+		const maxMoveX = computed(() => {
+			if (!state.imageRatio) return 0;
+			const displayWidth = vertical.value ? props.rootHeight / state.imageRatio : props.rootWidth;
+			return Math.max(0, (state.scale * displayWidth - props.rootWidth) / 2);
+		});
+		const maxMoveY = computed(() => {
+			if (!state.imageRatio) return 0;
+			const displayHeight = vertical.value ? props.rootHeight : props.rootWidth * state.imageRatio;
+			return Math.max(0, (state.scale * displayHeight - props.rootHeight) / 2);
+		});
+		const imageStyle = computed(() => {
+			const { scale, moveX, moveY, dragY, moving, zooming, dragging } = state;
+			const style = { transitionDuration: zooming || moving || dragging ? "0s" : void 0 };
+			if (dragY) style.transform = `translate3d(0, ${dragY}px, 0) scale(${1 - Math.min(dragY / (props.rootHeight || 600), 1) * .4})`;
+			else if (scale !== 1 || moveX || moveY) style.transform = `translate3d(${moveX}px, ${moveY}px, 0) scale(${scale})`;
+			return style;
+		});
+		function setScale(scale, center) {
+			const next = clamp(scale, props.minZoom, props.maxZoom + 1);
+			if (next === state.scale) return;
+			const ratio = next / state.scale;
+			state.scale = next;
+			if (center) {
+				const cx = center.x - props.rootWidth / 2;
+				const cy = center.y - props.rootHeight / 2;
+				state.moveX = clamp(cx - (cx - state.moveX) * ratio, -maxMoveX.value, maxMoveX.value);
+				state.moveY = clamp(cy - (cy - state.moveY) * ratio, -maxMoveY.value, maxMoveY.value);
+			} else {
+				state.moveX = clamp(state.moveX, -maxMoveX.value, maxMoveX.value);
+				state.moveY = clamp(state.moveY, -maxMoveY.value, maxMoveY.value);
+			}
+		}
+		function resetScale() {
+			state.scale = 1;
+			state.moveX = 0;
+			state.moveY = 0;
+		}
+		function toggleScale(center) {
+			if (state.scale > 1) resetScale();
+			else {
+				const target = typeof props.doubleTapZoom === "number" ? props.doubleTapZoom : 2;
+				setScale(Math.min(target, props.maxZoom), center);
+			}
+		}
+		const getDistance = (touches) => Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
+		function getCenter(touches) {
+			return {
+				x: (touches[0].clientX + touches[1].clientX) / 2,
+				y: (touches[0].clientY + touches[1].clientY) / 2
+			};
+		}
+		let fingerNum = 0;
+		let startMoveX = 0;
+		let startMoveY = 0;
+		let startScale = 1;
+		let startDistance = 0;
+		let touchStartTime = 0;
+		let isImageMoved = false;
+		let doubleTapTimer;
+		/** time of the last touch, the click synthesized right after it must be ignored */
+		let lastTouchTime = 0;
+		function onTouchStart(event) {
+			const { touches } = event;
+			fingerNum = touches.length;
+			touch.start(event);
+			startMoveX = state.moveX;
+			startMoveY = state.moveY;
+			touchStartTime = Date.now();
+			isImageMoved = false;
+			state.moving = fingerNum === 1 && state.scale !== 1;
+			state.zooming = fingerNum === 2;
+			state.dragging = false;
+			if (state.zooming) {
+				startScale = state.scale;
+				startDistance = getDistance(touches);
+			}
+		}
+		function onTouchMove(event) {
+			const { touches } = event;
+			touch.move(event);
+			if (state.moving) {
+				const moveX = touch.deltaX.value + startMoveX;
+				const moveY = touch.deltaY.value + startMoveY;
+				if (touch.isHorizontal() && Math.abs(moveX) > maxMoveX.value && !isImageMoved) {
+					state.moving = false;
+					return;
+				}
+				isImageMoved = true;
+				preventDefault(event, true);
+				state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
+				state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
+				return;
+			}
+			if (state.zooming) {
+				preventDefault(event, true);
+				if (touches.length === 2 && startDistance) setScale(startScale * getDistance(touches) / startDistance, getCenter(touches));
+				return;
+			}
+			if (props.swipeToClose && fingerNum === 1 && state.scale === 1 && touch.isVertical() && (state.dragging || touch.deltaY.value > 0)) {
+				preventDefault(event, true);
+				state.dragging = true;
+				state.dragY = Math.max(touch.deltaY.value, 0);
+				emit("dragProgress", Math.min(state.dragY / (props.rootHeight || 600) * 2, 1));
+			}
+		}
+		function checkTap(event) {
+			if (fingerNum > 1 || !touch.isTap.value) return;
+			if (Date.now() - touchStartTime >= TAP_TIME) return;
+			if (props.doubleTapZoom) {
+				if (doubleTapTimer) {
+					clearTimeout(doubleTapTimer);
+					doubleTapTimer = void 0;
+					const point = event.changedTouches?.[0];
+					toggleScale(point ? {
+						x: point.clientX,
+						y: point.clientY
+					} : void 0);
+				} else doubleTapTimer = setTimeout(() => {
+					doubleTapTimer = void 0;
+					emit("tap");
+				}, TAP_TIME);
+			} else emit("tap");
+		}
+		function onTouchEnd(event) {
+			let stopPropagation = false;
+			if (state.dragging) {
+				stopPropagation = true;
+				const velocity = state.dragY / Math.max(Date.now() - touchStartTime, 1);
+				const shouldClose = state.dragY > CLOSE_DISTANCE || state.dragY > 30 && velocity > .5;
+				state.dragging = false;
+				if (shouldClose) emit("swipeClose");
+				else {
+					state.dragY = 0;
+					emit("dragProgress", 0);
+				}
+			}
+			if (state.moving || state.zooming) {
+				stopPropagation = true;
+				if (state.moving && startMoveX === state.moveX && startMoveY === state.moveY) stopPropagation = false;
+				if (!event.touches.length) {
+					state.moving = false;
+					state.zooming = false;
+					if (state.scale < 1) resetScale();
+					if (state.scale > props.maxZoom) setScale(props.maxZoom);
+					state.moveX = clamp(state.moveX, -maxMoveX.value, maxMoveX.value);
+					state.moveY = clamp(state.moveY, -maxMoveY.value, maxMoveY.value);
+				}
+			}
+			preventDefault(event, stopPropagation);
+			checkTap(event);
+			touch.reset();
+			lastTouchTime = Date.now();
+		}
+		function onClick() {
+			if (Date.now() - lastTouchTime < 500) return;
+			emit("tap");
+		}
+		function onLoad(event) {
+			const { naturalWidth, naturalHeight } = event.target;
+			state.imageRatio = naturalWidth ? naturalHeight / naturalWidth : 0;
+			state.status = "loaded";
+		}
+		function onError() {
+			state.status = "error";
+		}
+		watch(() => props.active, (active) => {
+			if (!active) resetScale();
+		});
+		watch(() => props.src, () => {
+			state.status = "loading";
+			resetScale();
+		});
+		watch(() => [props.rootWidth, props.rootHeight], resetScale);
+		onBeforeUnmount(() => clearTimeout(doubleTapTimer));
+		__expose({ resetScale });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "am-image-preview-item",
+				onTouchstart: onTouchStart,
+				onTouchmove: onTouchMove,
+				onTouchend: onTouchEnd,
+				onTouchcancel: onTouchEnd,
+				onClick
+			}, [createElementVNode("div", {
+				class: normalizeClass(["am-image-preview-image", __props.imageClass]),
+				style: normalizeStyle([imageStyle.value, props.imageStyle])
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [withDirectives(createElementVNode("img", {
+				class: "am-image-preview-img",
+				src: __props.src,
+				alt: __props.alt,
+				draggable: "false",
+				onLoad,
+				onError
+			}, null, 40, _hoisted_1), [[vShow, state.status !== "error"]])])], 6), !_ctx.$slots.default ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [state.status === "loading" ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(Spinner_default))])) : state.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(PictureOutlined)), createElementVNode("span", _hoisted_4, toDisplayString(unref(locale).loadFailed), 1)])) : createCommentVNode("", true)], 64)) : createCommentVNode("", true)], 32);
+		};
+	}
+});
+export { ImagePreviewItem_vue_vue_type_script_setup_true_lang_default as default };

package/dist/image-preview/index.d.ts

@@ -0,0 +1,120 @@
+import type { ImagePreviewShowHandler, ImagePreviewShowOptions } from './interface';
+export type * from './interface';
+/** Opens a full-screen image viewer without declaring the component. */
+declare function show(options: ImagePreviewShowOptions): ImagePreviewShowHandler;
+/** Closes every viewer opened with `ImagePreview.show`. */
+declare function clear(): void;
+declare const ImagePreview: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").ImagePreviewProps> & Readonly<{
+        onChange?: ((current: number) => any) | undefined;
+        onClose?: (() => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+        onAfterOpenChange?: ((open: boolean) => any) | undefined;
+        onOpenChange?: ((open: boolean) => any) | undefined;
+        "onUpdate:current"?: ((current: number) => any) | undefined;
+    }>, {
+        close: () => void;
+        goTo: (index: number, dontAnimate?: boolean) => void | undefined;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (current: number) => any;
+        close: () => any;
+        "update:open": (open: boolean) => any;
+        afterOpenChange: (open: boolean) => any;
+        openChange: (open: boolean) => any;
+        "update:current": (current: number) => any;
+    }, import("vue").PublicProps, {
+        open: boolean;
+        getContainer: import("../index.ts").GetContainer;
+        closable: boolean;
+        closeIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+        defaultOpen: boolean;
+        swipeToClose: boolean;
+        loop: boolean;
+        showIndex: boolean;
+        maxZoom: number;
+        minZoom: number;
+        doubleTapZoom: number | boolean;
+        images: import("./interface").ImagePreviewImageType[];
+        defaultCurrent: number;
+        closeOnClick: boolean;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").ImagePreviewProps> & Readonly<{
+        onChange?: ((current: number) => any) | undefined;
+        onClose?: (() => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+        onAfterOpenChange?: ((open: boolean) => any) | undefined;
+        onOpenChange?: ((open: boolean) => any) | undefined;
+        "onUpdate:current"?: ((current: number) => any) | undefined;
+    }>, {
+        close: () => void;
+        goTo: (index: number, dontAnimate?: boolean) => void | undefined;
+    }, {}, {}, {}, {
+        open: boolean;
+        getContainer: import("../index.ts").GetContainer;
+        closable: boolean;
+        closeIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+        defaultOpen: boolean;
+        swipeToClose: boolean;
+        loop: boolean;
+        showIndex: boolean;
+        maxZoom: number;
+        minZoom: number;
+        doubleTapZoom: number | boolean;
+        images: import("./interface").ImagePreviewImageType[];
+        defaultCurrent: number;
+        closeOnClick: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").ImagePreviewProps> & Readonly<{
+    onChange?: ((current: number) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    onAfterOpenChange?: ((open: boolean) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
+    "onUpdate:current"?: ((current: number) => any) | undefined;
+}>, {
+    close: () => void;
+    goTo: (index: number, dontAnimate?: boolean) => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (current: number) => any;
+    close: () => any;
+    "update:open": (open: boolean) => any;
+    afterOpenChange: (open: boolean) => any;
+    openChange: (open: boolean) => any;
+    "update:current": (current: number) => any;
+}, string, {
+    open: boolean;
+    getContainer: import("../index.ts").GetContainer;
+    closable: boolean;
+    closeIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    defaultOpen: boolean;
+    swipeToClose: boolean;
+    loop: boolean;
+    showIndex: boolean;
+    maxZoom: number;
+    minZoom: number;
+    doubleTapZoom: number | boolean;
+    images: import("./interface").ImagePreviewImageType[];
+    defaultCurrent: number;
+    closeOnClick: boolean;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").ImagePreviewSlots;
+}), {
+    show: typeof show;
+    clear: typeof clear;
+}>;
+export default ImagePreview;

package/dist/image-preview/index.js

@@ -0,0 +1,51 @@
+import { inBrowser } from "../_util/index.js";
+import { mountComponent } from "../_util/mount.js";
+import { withInstall } from "../_util/withInstall.js";
+import ImagePreview_default from "./ImagePreview.js";
+import { h, ref } from "vue";
+// src/image-preview/index.ts
+var instances = /* @__PURE__ */ new Set();
+/** Opens a full-screen image viewer without declaring the component. */
+function show(options) {
+	const { index, footer, onChange, onClose, afterClose, current: initial = 0, ...rest } = options;
+	if (!inBrowser) return { close() {} };
+	const open = ref(true);
+	const current = ref(initial);
+	const handler = { close() {
+		open.value = false;
+	} };
+	const { unmount } = mountComponent(() => h(ImagePreview_default, {
+		...rest,
+		"open": open.value,
+		"current": current.value,
+		"onUpdate:open": (value) => {
+			open.value = value;
+		},
+		"onUpdate:current": (value) => {
+			current.value = value;
+		},
+		"onChange": (value) => onChange?.(value),
+		"onClose": () => onClose?.(),
+		"onAfterOpenChange": (value) => {
+			if (!value) {
+				instances.delete(handler);
+				unmount();
+				afterClose?.();
+			}
+		}
+	}, {
+		...index ? { index } : {},
+		...footer ? { footer } : {}
+	}));
+	instances.add(handler);
+	return handler;
+}
+/** Closes every viewer opened with `ImagePreview.show`. */
+function clear() {
+	instances.forEach((instance) => instance.close());
+}
+var ImagePreview = withInstall(ImagePreview_default, "AmImagePreview", {
+	show,
+	clear
+});
+export { ImagePreview as default };

package/dist/image-preview/interface.d.ts

@@ -0,0 +1,104 @@
+import type { CSSProperties } from 'vue';
+import type { GetContainer, VueNode } from '../_util/type';
+export interface ImagePreviewImage {
+    src: string;
+    alt?: string;
+}
+export type ImagePreviewImageType = string | ImagePreviewImage;
+export interface ImagePreviewIndexInfo {
+    /** index of the current image */
+    current: number;
+    total: number;
+}
+export interface ImagePreviewImageInfo {
+    src: string;
+    alt?: string;
+    index: number;
+}
+export interface ImagePreviewSemanticClassNames {
+    root?: string;
+    image?: string;
+    index?: string;
+    footer?: string;
+}
+export interface ImagePreviewSemanticStyles {
+    root?: CSSProperties;
+    image?: CSSProperties;
+    index?: CSSProperties;
+    footer?: CSSProperties;
+}
+export interface ImagePreviewProps {
+    /** Whether the viewer is visible. Supports `v-model:open`. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    images?: ImagePreviewImageType[];
+    /** Index of the displayed image. Supports `v-model:current`. */
+    current?: number;
+    defaultCurrent?: number;
+    /** Swipe from the last image to the first one */
+    loop?: boolean;
+    /** Show the `2 / 5` indicator */
+    showIndex?: boolean;
+    /** Show a close icon */
+    closable?: boolean;
+    closeIcon?: VueNode;
+    /** Close on a single tap */
+    closeOnClick?: boolean;
+    /** Drag an un-zoomed image down to close */
+    swipeToClose?: boolean;
+    maxZoom?: number;
+    minZoom?: number;
+    /** Zoom on double tap. A number is the scale to zoom to (default `2`). */
+    doubleTapZoom?: boolean | number;
+    /** Teleport target. Default `document.body`; `false` renders in place. */
+    getContainer?: GetContainer;
+    zIndex?: number;
+    rootClass?: string;
+    classes?: ImagePreviewSemanticClassNames;
+    styles?: ImagePreviewSemanticStyles;
+}
+export interface ImagePreviewEmits {
+    'update:open': [open: boolean];
+    'update:current': [current: number];
+    /** The displayed image changed */
+    'change': [current: number];
+    /** The user asked to close (tap, close icon, swipe down) */
+    'close': [];
+    'openChange': [open: boolean];
+    /** After the enter / leave animation finished */
+    'afterOpenChange': [open: boolean];
+}
+export interface ImagePreviewSlots {
+    index?: (info: ImagePreviewIndexInfo) => any;
+    footer?: (info: ImagePreviewIndexInfo) => any;
+    /** replaces the `<img>` of every page */
+    image?: (info: ImagePreviewImageInfo) => any;
+    closeIcon?: () => any;
+}
+export interface ImagePreviewShowOptions {
+    images: ImagePreviewImageType[];
+    /** index of the first displayed image */
+    current?: number;
+    loop?: boolean;
+    showIndex?: boolean;
+    closable?: boolean;
+    closeIcon?: VueNode;
+    closeOnClick?: boolean;
+    swipeToClose?: boolean;
+    maxZoom?: number;
+    minZoom?: number;
+    doubleTapZoom?: boolean | number;
+    getContainer?: GetContainer;
+    zIndex?: number;
+    rootClass?: string;
+    /** custom index indicator */
+    index?: (info: ImagePreviewIndexInfo) => any;
+    /** content fixed at the bottom */
+    footer?: (info: ImagePreviewIndexInfo) => any;
+    onChange?: (current: number) => void;
+    onClose?: () => void;
+    afterClose?: () => void;
+}
+export interface ImagePreviewShowHandler {
+    close: () => void;
+}

package/dist/image-preview/style/index.css

@@ -0,0 +1,147 @@
+.am-image-preview {
+  --am-image-preview-z-index: var(--am-z-index-popup-base);
+  --am-image-preview-bg: var(--am-color-black);
+  --am-image-preview-color: var(--am-color-white);
+  --am-image-preview-index-font-size: var(--am-font-size);
+  --am-image-preview-index-top: 16px;
+  --am-image-preview-close-size: 22px;
+  --am-image-preview-duration: 0.3s;
+
+  position: fixed;
+  inset: 0;
+  z-index: var(--am-image-preview-z-index);
+  box-sizing: border-box;
+  overflow: hidden;
+  color: var(--am-image-preview-color);
+  font-size: var(--am-font-size);
+  font-family: var(--am-font-family);
+  line-height: var(--am-line-height);
+  touch-action: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.am-image-preview-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--am-image-preview-bg);
+  transition: opacity var(--am-image-preview-duration);
+}
+
+.am-image-preview-swiper {
+  width: 100%;
+  height: 100%;
+  color: inherit;
+}
+
+.am-image-preview-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.am-image-preview-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  transition: transform var(--am-image-preview-duration) var(--am-motion-ease-out);
+  will-change: transform;
+}
+
+.am-image-preview-img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+  -webkit-user-drag: none;
+  -webkit-touch-callout: none;
+}
+
+.am-image-preview-status {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--am-margin-xs);
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  opacity: 0.65;
+  pointer-events: none;
+}
+
+.am-image-preview-status-text {
+  font-size: var(--am-font-size);
+}
+
+.am-image-preview-index {
+  position: absolute;
+  top: var(--am-image-preview-index-top);
+  top: calc(var(--am-image-preview-index-top) + constant(safe-area-inset-top));
+  top: calc(var(--am-image-preview-index-top) + env(safe-area-inset-top));
+  left: 50%;
+  z-index: 1;
+  font-size: var(--am-image-preview-index-font-size);
+  line-height: 22px;
+  text-shadow: 0 1px 1px var(--am-color-bg-mask);
+  transform: translateX(-50%);
+  pointer-events: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.am-image-preview-close {
+  position: absolute;
+  top: 8px;
+  top: calc(8px + constant(safe-area-inset-top));
+  top: calc(8px + env(safe-area-inset-top));
+  inset-inline-end: 8px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font-size: var(--am-image-preview-close-size);
+  background: transparent;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.am-image-preview-close:active {
+  opacity: var(--am-opacity-active);
+}
+
+.am-image-preview-footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  padding: var(--am-padding-sm) var(--am-padding);
+  padding-bottom: calc(var(--am-padding-sm) + constant(safe-area-inset-bottom));
+  padding-bottom: calc(var(--am-padding-sm) + env(safe-area-inset-bottom));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .am-image-preview {
+    --am-image-preview-duration: 0.01s;
+  }
+}
+
+.am-image-preview-swiper.am-carousel {
+  touch-action: none;
+}

package/dist/index-bar/IndexBar.js

@@ -0,0 +1,4 @@
+import IndexBar_vue_vue_type_script_setup_true_lang_default from "./IndexBar.vue_vue_type_script_setup_true_lang.js";
+// src/index-bar/IndexBar.vue
+var IndexBar_default = IndexBar_vue_vue_type_script_setup_true_lang_default;
+export { IndexBar_default as default };