@antdv-next/mobile 0.0.0-stage → 0.1.1

package/dist/image/style/index.css

@@ -0,0 +1,65 @@
+.am-image {
+  --am-image-placeholder-bg: var(--am-color-fill-tertiary);
+  --am-image-placeholder-color: var(--am-color-text-quaternary);
+  --am-image-placeholder-icon-size: 28px;
+  --am-image-placeholder-font-size: var(--am-font-size-sm);
+  --am-image-border-radius: 0;
+
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  overflow: hidden;
+  color: var(--am-color-text);
+  font-size: var(--am-font-size);
+  font-family: var(--am-font-family);
+  line-height: var(--am-line-height);
+  vertical-align: middle;
+  border-radius: var(--am-image-border-radius);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.am-image-round {
+  border-radius: 9999px;
+}
+
+.am-image-previewable {
+  cursor: pointer;
+}
+
+.am-image-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -webkit-user-drag: none;
+}
+
+.am-image-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--am-margin-xxs);
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--am-image-placeholder-color);
+  font-size: var(--am-image-placeholder-font-size);
+  background: var(--am-image-placeholder-bg);
+}
+
+.am-image-placeholder-icon {
+  font-size: var(--am-image-placeholder-icon-size);
+}
+
+.am-image-placeholder-text {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* an image without a size that failed to load still needs room for the fallback */
+.am-image-error {
+  min-width: 64px;
+  min-height: 64px;
+}

package/dist/image-preview/ImagePreview.js

@@ -0,0 +1,4 @@
+import ImagePreview_vue_vue_type_script_setup_true_lang_default from "./ImagePreview.vue_vue_type_script_setup_true_lang.js";
+// src/image-preview/ImagePreview.vue
+var ImagePreview_default = ImagePreview_vue_vue_type_script_setup_true_lang_default;
+export { ImagePreview_default as default };

package/dist/image-preview/ImagePreview.vue.d.ts

@@ -0,0 +1,49 @@
+import type { ImagePreviewProps, ImagePreviewSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = ImagePreviewSlots;
+declare function close(): void;
+declare const __VLS_base: import("vue").DefineComponent<ImagePreviewProps, {
+    close: typeof close;
+    /** switch to an image */
+    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, import("vue").PublicProps, Readonly<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;
+}>, {
+    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").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,297 @@
+import Portal_default from "../_base/Portal.js";
+import { clamp, inBrowser } from "../_util/index.js";
+import { nextZIndex } from "../_util/hooks/useZIndex.js";
+import { useControlled } from "../_util/hooks/useControlled.js";
+import { useEventListener } from "../_util/hooks/useEventListener.js";
+import { useLockScroll } from "../_util/hooks/useLockScroll.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import Carousel_default from "../carousel/Carousel.js";
+import { useLocale } from "../locale/index.js";
+import ImagePreviewItem_default from "./ImagePreviewItem.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch, withCtx } from "vue";
+import { CloseOutlined } from "@antdv-next/icons";
+// src/image-preview/ImagePreview.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["dir"];
+var _hoisted_2 = ["aria-label"];
+var ImagePreview_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmImagePreview",
+	inheritAttrs: false,
+	__name: "ImagePreview",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		images: { default: () => [] },
+		current: {},
+		defaultCurrent: { default: 0 },
+		loop: {
+			type: Boolean,
+			default: true
+		},
+		showIndex: {
+			type: Boolean,
+			default: true
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		closeIcon: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		closeOnClick: {
+			type: Boolean,
+			default: true
+		},
+		swipeToClose: {
+			type: Boolean,
+			default: true
+		},
+		maxZoom: { default: 3 },
+		minZoom: { default: 1 / 3 },
+		doubleTapZoom: {
+			type: [Boolean, Number],
+			default: true
+		},
+		getContainer: {
+			type: [
+				String,
+				Function,
+				Boolean
+			],
+			default: void 0
+		},
+		zIndex: {},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"update:open",
+		"update:current",
+		"change",
+		"close",
+		"openChange",
+		"afterOpenChange"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const commonLocale = useLocale("common");
+		const rootRef = ref();
+		const carouselRef = ref();
+		const [open, setOpen] = useControlled(props, "open", {
+			defaultValue: props.defaultOpen,
+			onChange: (value) => {
+				emit("update:open", value);
+				emit("openChange", value);
+			}
+		});
+		const [current, setCurrent] = useControlled(props, "current", {
+			defaultValue: props.defaultCurrent,
+			onChange: (value) => {
+				emit("update:current", value);
+				emit("change", value);
+			}
+		});
+		const list = computed(() => props.images.map((item) => typeof item === "string" ? { src: item } : item));
+		const total = computed(() => list.value.length);
+		const safeCurrent = computed(() => clamp(current.value ?? 0, 0, Math.max(total.value - 1, 0)));
+		const indexInfo = computed(() => ({
+			current: safeCurrent.value,
+			total: total.value
+		}));
+		const zIndex = ref(props.zIndex);
+		const rootSize = ref({
+			width: 0,
+			height: 0
+		});
+		/** 0 - 1, how far the image is dragged down (fades the backdrop) */
+		const dragProgress = ref(0);
+		/** index shown by the carousel, used to tell user swipes from external `current` changes */
+		let swiperIndex = safeCurrent.value;
+		function resize() {
+			if (!inBrowser) return;
+			const root = rootRef.value;
+			rootSize.value = {
+				width: root?.offsetWidth || window.innerWidth,
+				height: root?.offsetHeight || window.innerHeight
+			};
+		}
+		watch(open, (value) => {
+			if (value) {
+				zIndex.value = props.zIndex ?? nextZIndex();
+				dragProgress.value = 0;
+				swiperIndex = safeCurrent.value;
+				resize();
+				nextTick(resize);
+			}
+		}, { immediate: true });
+		watch(() => props.zIndex, (value) => {
+			if (value !== void 0) zIndex.value = value;
+		});
+		watch(safeCurrent, (value) => {
+			if (value !== swiperIndex) {
+				swiperIndex = value;
+				carouselRef.value?.goTo(value, true);
+			}
+		});
+		useEventListener("resize", resize);
+		useEventListener("orientationchange", resize);
+		useLockScroll(rootRef, () => !!open.value);
+		function close() {
+			if (!open.value) return;
+			emit("close");
+			setOpen(false);
+		}
+		function onTap() {
+			if (props.closeOnClick) close();
+		}
+		function onBeforeChange(_, next) {
+			swiperIndex = next;
+			if (next !== safeCurrent.value) setCurrent(next);
+		}
+		useEventListener("keydown", (event) => {
+			if (open.value && event.key === "Escape") close();
+		});
+		__expose({
+			close,
+			/** switch to an image */
+			goTo: (index, dontAnimate) => carouselRef.value?.goTo(index, dontAnimate)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Portal_default), { "get-container": __props.getContainer }, {
+				default: withCtx(({ theme }) => [createVNode(Transition, {
+					name: "am-fade",
+					appear: "",
+					onAfterEnter: _cache[1] || (_cache[1] = ($event) => emit("afterOpenChange", true)),
+					onAfterLeave: _cache[2] || (_cache[2] = ($event) => emit("afterOpenChange", false))
+				}, {
+					default: withCtx(() => [unref(open) ? (openBlock(), createElementBlock("div", mergeProps({
+						key: 0,
+						ref_key: "rootRef",
+						ref: rootRef
+					}, _ctx.$attrs, {
+						class: ["am-image-preview", [
+							theme.class,
+							__props.rootClass,
+							__props.classes?.root
+						]],
+						style: [
+							theme.style,
+							{ zIndex: zIndex.value },
+							__props.styles?.root
+						],
+						dir: theme.dir,
+						role: "dialog",
+						"aria-modal": "true"
+					}), [
+						createElementVNode("div", {
+							class: "am-image-preview-backdrop",
+							style: normalizeStyle(dragProgress.value ? {
+								opacity: 1 - dragProgress.value,
+								transitionDuration: "0s"
+							} : void 0)
+						}, null, 4),
+						createVNode(Carousel_default, {
+							ref_key: "carouselRef",
+							ref: carouselRef,
+							class: "am-image-preview-swiper",
+							dots: false,
+							infinite: __props.loop,
+							"initial-slide": safeCurrent.value,
+							draggable: total.value > 1,
+							onBeforeChange
+						}, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (image, index) => {
+								return openBlock(), createBlock(ImagePreviewItem_default, {
+									key: index,
+									src: image.src,
+									alt: image.alt,
+									index,
+									active: index === safeCurrent.value,
+									"max-zoom": __props.maxZoom,
+									"min-zoom": __props.minZoom,
+									"double-tap-zoom": __props.doubleTapZoom,
+									"swipe-to-close": __props.swipeToClose,
+									"root-width": rootSize.value.width,
+									"root-height": rootSize.value.height,
+									"image-class": __props.classes?.image,
+									"image-style": __props.styles?.image,
+									onTap,
+									onSwipeClose: close,
+									onDragProgress: _cache[0] || (_cache[0] = ($event) => dragProgress.value = $event)
+								}, createSlots({ _: 2 }, [_ctx.$slots.image ? {
+									name: "default",
+									fn: withCtx(() => [renderSlot(_ctx.$slots, "image", {
+										src: image.src,
+										alt: image.alt,
+										index
+									})]),
+									key: "0"
+								} : void 0]), 1032, [
+									"src",
+									"alt",
+									"index",
+									"active",
+									"max-zoom",
+									"min-zoom",
+									"double-tap-zoom",
+									"swipe-to-close",
+									"root-width",
+									"root-height",
+									"image-class",
+									"image-style"
+								]);
+							}), 128))]),
+							_: 3
+						}, 8, [
+							"infinite",
+							"initial-slide",
+							"draggable"
+						]),
+						__props.showIndex && total.value > 0 ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(["am-image-preview-index", __props.classes?.index]),
+							style: normalizeStyle(__props.styles?.index)
+						}, [renderSlot(_ctx.$slots, "index", normalizeProps(guardReactiveProps(indexInfo.value)), () => [createTextVNode(toDisplayString(safeCurrent.value + 1) + " / " + toDisplayString(total.value), 1)])], 6)) : createCommentVNode("", true),
+						__props.closable ? (openBlock(), createElementBlock("button", {
+							key: 1,
+							type: "button",
+							class: "am-image-preview-close",
+							"aria-label": unref(commonLocale).close,
+							onClick: close
+						}, [renderSlot(_ctx.$slots, "closeIcon", {}, () => [__props.closeIcon !== void 0 ? (openBlock(), createBlock(unref(RenderNode_default), {
+							key: 0,
+							node: __props.closeIcon
+						}, null, 8, ["node"])) : (openBlock(), createBlock(unref(CloseOutlined), { key: 1 }))])], 8, _hoisted_2)) : createCommentVNode("", true),
+						_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+							key: 2,
+							class: normalizeClass(["am-image-preview-footer", __props.classes?.footer]),
+							style: normalizeStyle(__props.styles?.footer)
+						}, [renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(indexInfo.value)))], 6)) : createCommentVNode("", true)
+					], 16, _hoisted_1)) : createCommentVNode("", true)]),
+					_: 2
+				}, 1024)]),
+				_: 3
+			}, 8, ["get-container"]);
+		};
+	}
+});
+export { ImagePreview_vue_vue_type_script_setup_true_lang_default as default };

package/dist/image-preview/ImagePreviewItem.js

@@ -0,0 +1,4 @@
+import ImagePreviewItem_vue_vue_type_script_setup_true_lang_default from "./ImagePreviewItem.vue_vue_type_script_setup_true_lang.js";
+// src/image-preview/ImagePreviewItem.vue
+var ImagePreviewItem_default = ImagePreviewItem_vue_vue_type_script_setup_true_lang_default;
+export { ImagePreviewItem_default as default };

package/dist/image-preview/ImagePreviewItem.vue.d.ts

@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'vue';
+type __VLS_Props = {
+    src: string;
+    alt?: string;
+    index: number;
+    active: boolean;
+    maxZoom: number;
+    minZoom: number;
+    doubleTapZoom: boolean | number;
+    swipeToClose: boolean;
+    rootWidth: number;
+    rootHeight: number;
+    imageClass?: string;
+    imageStyle?: CSSProperties;
+};
+type __VLS_Slots = {
+    default?: () => any;
+};
+declare function resetScale(): void;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    resetScale: typeof resetScale;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    tap: () => any;
+    swipeClose: () => any;
+    dragProgress: (progress: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onTap?: (() => any) | undefined;
+    onSwipeClose?: (() => any) | undefined;
+    onDragProgress?: ((progress: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};