sard 1.0.0 → 1.0.1

package/components/popup/popup.js

@@ -0,0 +1,150 @@
+import { createBem } from "../../utils/bem.js";
+import { useZIndex } from "../../use/useZIndex.js";
+import { defaultPopupProps, mapEffectMotion, usePopupVisibleHookProvide } from "./common.js";
+import { useLockScroll } from "../../use/useLockScroll.js";
+import "../../use/index.js";
+import "../../utils/index.js";
+import motion_default from "../motion/motion.js";
+import overlay_default from "../overlay/overlay.js";
+import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeDefaults, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, vShow, withCtx, withDirectives } from "vue";
+//#region packages/sard/components/popup/popup.vue
+var popup_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "popup",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		effect: {
+			type: String,
+			required: false
+		},
+		overlay: {
+			type: Boolean,
+			required: false
+		},
+		overlayClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		},
+		overlayStyle: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		transparent: {
+			type: Boolean,
+			required: false
+		},
+		overlayClosable: {
+			type: Boolean,
+			required: false
+		},
+		lockScroll: {
+			type: Boolean,
+			required: false
+		},
+		destroyOnClose: {
+			type: Boolean,
+			required: false
+		},
+		lazy: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultPopupProps),
+	emits: [
+		"overlay-click",
+		"update:visible",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("popup");
+		const motionName = computed(() => {
+			return mapEffectMotion[props.effect];
+		});
+		const [zIndex, increaseZIndex] = useZIndex();
+		const rendered = ref(props.visible || !props.lazy);
+		const callVisibleHook = usePopupVisibleHookProvide();
+		const onVisibleHook = (name, el) => {
+			if (name === "before-enter") {
+				increaseZIndex();
+				rendered.value = true;
+			} else if (name === "after-leave") {
+				if (props.destroyOnClose) rendered.value = false;
+			}
+			callVisibleHook(name);
+			emit("visible-hook", name, el);
+			emit(name, el);
+		};
+		const onOverlayClick = (event) => {
+			emit("overlay-click", event);
+			if (props.overlayClosable) emit("update:visible", false);
+		};
+		useLockScroll(() => props.visible, props.lockScroll);
+		const popupClass = computed(() => {
+			return [bem.b(), bem.m(props.effect)];
+		});
+		const popupStyle = computed(() => {
+			return { zIndex: zIndex.value };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [__props.overlay ? (openBlock(), createBlock(overlay_default, {
+				key: 0,
+				visible: __props.visible,
+				"z-index": unref(zIndex),
+				background: __props.background,
+				transparent: __props.transparent,
+				style: normalizeStyle(__props.overlayStyle),
+				class: normalizeClass(__props.overlayClass),
+				onClick: onOverlayClick
+			}, null, 8, [
+				"visible",
+				"z-index",
+				"background",
+				"transparent",
+				"style",
+				"class"
+			])) : createCommentVNode("v-if", true), createVNode(motion_default, {
+				name: motionName.value,
+				onVisibleHook
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", mergeProps(_ctx.$attrs, {
+					class: popupClass.value,
+					style: popupStyle.value
+				}), [rendered.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true)], 16), [[vShow, __props.visible]])]),
+				_: 3
+			}, 8, ["name"])]);
+		};
+	}
+});
+//#endregion
+export { popup_default as default };

package/components/preview-image/common.d.ts

@@ -0,0 +1,28 @@
+import type { InjectionKey } from 'vue';
+import { type DefaultProps } from '../config';
+import type { MotionEmits } from '../motion';
+export interface PreviewImageProps {
+    visible?: boolean;
+    current?: number;
+    urls?: string[];
+}
+export declare const defaultPreviewImageProps: DefaultProps<PreviewImageProps>;
+export interface PreviewImageSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface PreviewImageEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:current', current: number): void;
+}
+export interface PreviewImageExpose {
+}
+export interface PreviewImageItemProps {
+    url: string;
+}
+export interface PreviewImageContext {
+    visibleSwitching: boolean;
+    immersive: boolean;
+    sceneType: 'dragPinch' | 'swipe' | null;
+    close: () => void;
+}
+export declare const previewImageContextKey: InjectionKey<PreviewImageContext>;

package/components/preview-image/common.js

@@ -0,0 +1,8 @@
+//#region packages/sard/components/preview-image/common.ts
+const defaultPreviewImageProps = {
+	current: 0,
+	urls: () => []
+};
+const previewImageContextKey = Symbol("previewImageContext");
+//#endregion
+export { defaultPreviewImageProps, previewImageContextKey };

package/components/preview-image/imperative.d.ts

@@ -0,0 +1,10 @@
+import { type PreviewImageProps } from './common';
+export type PreviewImageOptions = Omit<PreviewImageProps, 'urls'> & Required<Pick<PreviewImageProps, 'urls'>>;
+export interface PreviewImageShowFunction {
+    (options?: PreviewImageOptions): void;
+}
+export type PreviewImageFunction = PreviewImageShowFunction & {
+    hide: () => void;
+};
+export declare function createPreviewImage(defaultOptions?: PreviewImageOptions): PreviewImageFunction;
+export declare const previewImage: PreviewImageFunction;

package/components/preview-image/imperative.js

@@ -0,0 +1,20 @@
+import { createImperativeComponent } from "../../utils/createImperativeComponent.js";
+import preview_image_default from "./preview-image.js";
+//#region packages/sard/components/preview-image/imperative.ts
+function createPreviewImage(defaultOptions) {
+	const imperative = createImperativeComponent(preview_image_default, defaultOptions);
+	const show = (options) => {
+		imperative.show(options);
+	};
+	const hide = () => {
+		imperative.hide();
+	};
+	const previewImage = (options) => {
+		show(options);
+	};
+	previewImage.hide = hide;
+	return previewImage;
+}
+const previewImage = createPreviewImage();
+//#endregion
+export { createPreviewImage, previewImage };

package/components/preview-image/index.css

@@ -0,0 +1 @@
+.s-preview-image{position:relative;width:100%;height:100%;touch-action:none}.s-preview-image__overlay:is(.is-preview-image){background:var(--s-overlay-illegible)}.s-preview-image__overlay:is(.is-preview-image):is(.is-immersive){background:var(--s-black)}.s-preview-image__swiper:is(.is-preview-image){width:100%;height:100%}.s-preview-image__item{position:relative;display:flex;width:100%;height:100%;-webkit-user-select:none;user-select:none}.s-preview-image__puppet{position:absolute;top:0;left:0;transform-origin:top left;transition:transform var(--s-duration-fast);pointer-events:none;background-size:contain}.s-preview-image__toolbar{position:absolute;top:calc(var(--s-status-bar-height) + 16px);display:flex;justify-content:center;align-items:center;width:100%;pointer-events:none}.s-preview-image__indicator{font-size:var(--s-font-size);color:var(--s-white);text-shadow:1px 1px var(--s-black);transition:opacity var(--s-duration-fast)}.s-preview-image:is(.is-immersive) .s-preview-image__indicator{opacity:0}

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

@@ -0,0 +1,6 @@
+import { type EnhancedComponent } from '../../utils';
+import _PreviewImage from './preview-image.vue';
+export declare const PreviewImage: EnhancedComponent<typeof _PreviewImage>;
+export default PreviewImage;
+export type { PreviewImageProps, PreviewImageSlots, PreviewImageEmits, PreviewImageExpose, } from './common';
+export * from './imperative';

package/components/preview-image/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import "../../utils/index.js";
+import preview_image_default from "./preview-image.js";
+import { createPreviewImage, previewImage } from "./imperative.js";
+//#region packages/sard/components/preview-image/index.ts
+const PreviewImage = enhanceComponent(preview_image_default);
+//#endregion
+export { PreviewImage, PreviewImage as default, createPreviewImage, previewImage };

package/components/preview-image/preview-image-item.d.ts

@@ -0,0 +1,4 @@
+import { type PreviewImageItemProps } from './common';
+declare const __VLS_export: import("vue").DefineComponent<PreviewImageItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PreviewImageItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/preview-image/preview-image-item.js

@@ -0,0 +1,258 @@
+import { createBem } from "../../utils/bem.js";
+import { loadImage } from "../../utils/file.js";
+import { getAspectFitSize } from "../../utils/geometry.js";
+import { createInertialAnimate } from "../../utils/inertialAnimate.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useSimulatedDblClick } from "../../use/useSimulatedDblClick.js";
+import { useDragPinch } from "../../use/useDragPinch.js";
+import "../../use/index.js";
+import "../../utils/index.js";
+import { previewImageContextKey } from "./common.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, unref, watch, withModifiers } from "vue";
+//#region packages/sard/components/preview-image/preview-image-item.vue
+const BOUNCE_COEFF = 4;
+const MAX_SCALE = 5;
+const DBL_CLICK_SCALE = 2;
+var preview_image_item_default = /*@__PURE__*/ defineComponent({
+	__name: "preview-image-item",
+	props: { url: {
+		type: String,
+		required: true
+	} },
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("preview-image");
+		const context = inject(previewImageContextKey);
+		const windowWidth = window.innerWidth;
+		const windowHeight = window.innerHeight;
+		const imgNaturalSize = ref([0, 0]);
+		watch(() => props.url, (url) => {
+			imgNaturalSize.value = [0, 0];
+			if (url) loadImage(url).then((img) => {
+				imgNaturalSize.value = [img.naturalWidth, img.naturalHeight];
+			});
+		}, { immediate: true });
+		const imgContainSize = computed(() => {
+			return getAspectFitSize(...imgNaturalSize.value, windowWidth, windowHeight);
+		});
+		const imgCurrLeft = ref(0);
+		const imgCurrTop = ref(0);
+		const imgCurrWidth = ref(0);
+		const imgCurrHeight = ref(0);
+		const isContainSize = computed(() => {
+			const [containWidth, containHeight] = imgContainSize.value;
+			return imgCurrWidth.value === containWidth && imgCurrHeight.value === containHeight;
+		});
+		const adjustToCenterX = () => {
+			imgCurrLeft.value = (windowWidth - imgCurrWidth.value) / 2;
+		};
+		const adjustToCenterY = () => {
+			imgCurrTop.value = (windowHeight - imgCurrHeight.value) / 2;
+		};
+		const adjustToCenterPosition = () => {
+			adjustToCenterX();
+			adjustToCenterY();
+		};
+		watch(imgContainSize, ([containWidth, containHeight]) => {
+			imgCurrWidth.value = containWidth;
+			imgCurrHeight.value = containHeight;
+			adjustToCenterPosition();
+		}, { immediate: true });
+		const isCaptured = ref(false);
+		const inInertiaMotion = ref(false);
+		const puppetStyle = computed(() => {
+			const [width, height] = imgContainSize.value;
+			const scale = imgCurrWidth.value / width || 1;
+			const x = imgCurrLeft.value;
+			const y = imgCurrTop.value;
+			return {
+				width: width + "px",
+				height: height + "px",
+				transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+				transition: context.visibleSwitching || isCaptured.value || inInertiaMotion.value ? "none" : "",
+				backgroundImage: `url(${props.url})`
+			};
+		});
+		let stopInertialAnimate = null;
+		onBeforeUnmount(() => {
+			stopInertialAnimate?.();
+		});
+		const handleScale = (originX, originY, nextWidth, nextHeight) => {
+			const originScaleX = (originX - imgCurrLeft.value) / imgCurrWidth.value;
+			const originScaleY = (originY - imgCurrTop.value) / imgCurrHeight.value;
+			imgCurrLeft.value += (imgCurrWidth.value - nextWidth) * originScaleX;
+			imgCurrTop.value += (imgCurrHeight.value - nextHeight) * originScaleY;
+			imgCurrWidth.value = nextWidth;
+			imgCurrHeight.value = nextHeight;
+		};
+		const [onDragPinchStart, onDragPinchMove, onDragPinchEnd] = useDragPinch({
+			onCapture() {
+				isCaptured.value = true;
+				stopInertialAnimate?.();
+			},
+			onOffset(offsetX, offsetY, event) {
+				if (isContainSize.value) return;
+				event.stopImmediatePropagation();
+				if (imgCurrWidth.value > windowWidth) {
+					if (imgCurrLeft.value > 0 || imgCurrLeft.value < windowWidth - imgCurrWidth.value) offsetX /= BOUNCE_COEFF;
+					imgCurrLeft.value += offsetX;
+				}
+				if (imgCurrHeight.value > windowHeight) {
+					if (imgCurrTop.value > 0 || imgCurrTop.value < windowHeight - imgCurrHeight.value) offsetY /= BOUNCE_COEFF;
+					imgCurrTop.value += offsetY;
+				}
+			},
+			onScale(originX, originY, scale) {
+				const [containWidth, containHeight] = imgContainSize.value;
+				let scaleDeltaX = imgCurrWidth.value * scale;
+				let scaleDeltaY = imgCurrHeight.value * scale;
+				if (imgCurrWidth.value < containWidth || imgCurrHeight.value < containHeight) {
+					scaleDeltaX /= BOUNCE_COEFF;
+					scaleDeltaY /= BOUNCE_COEFF;
+				} else if (imgCurrWidth.value > containWidth * MAX_SCALE && scaleDeltaX > 0) {
+					scaleDeltaX = 0;
+					scaleDeltaY = 0;
+				}
+				const nextWidth = imgCurrWidth.value + scaleDeltaX;
+				const nextHeight = imgCurrHeight.value + scaleDeltaY;
+				handleScale(originX, originY, nextWidth, nextHeight);
+			},
+			onRelease(v) {
+				isCaptured.value = false;
+				const [containWidth, containHeight] = imgContainSize.value;
+				const _currWidth = imgCurrWidth.value;
+				const _currHeight = imgCurrHeight.value;
+				const tooSmall = _currWidth < containWidth || _currHeight < containHeight;
+				const tooBig = _currWidth > containWidth * MAX_SCALE;
+				if (tooSmall || tooBig) {
+					const [edgeWidth, edgeHeight] = tooSmall ? imgContainSize.value : imgContainSize.value.map((item) => item * MAX_SCALE);
+					imgCurrWidth.value = edgeWidth;
+					imgCurrHeight.value = edgeHeight;
+					imgCurrLeft.value += (_currWidth - edgeWidth) / 2;
+					imgCurrTop.value += (_currHeight - edgeHeight) / 2;
+				}
+				context.immersive = !isContainSize.value;
+				if (isContainSize.value) {
+					adjustToCenterPosition();
+					return;
+				}
+				if (imgCurrWidth.value > windowWidth) {
+					const overLeft = imgCurrLeft.value > 0;
+					const overRight = imgCurrLeft.value < windowWidth - imgCurrWidth.value;
+					if (overLeft) imgCurrLeft.value = 0;
+					else if (overRight) imgCurrLeft.value = windowWidth - imgCurrWidth.value;
+				} else adjustToCenterX();
+				if (imgCurrHeight.value > windowHeight) {
+					const overTop = imgCurrTop.value > 0;
+					const overBottom = imgCurrTop.value < windowHeight - imgCurrHeight.value;
+					if (overTop) imgCurrTop.value = 0;
+					else if (overBottom) imgCurrTop.value = windowHeight - imgCurrHeight.value;
+				} else adjustToCenterY();
+				const overLeft = imgCurrLeft.value > 0;
+				const overRight = imgCurrLeft.value < windowWidth - imgCurrWidth.value;
+				const overTop = imgCurrTop.value > 0;
+				const overBottom = imgCurrTop.value < windowHeight - imgCurrHeight.value;
+				const animateList = [[
+					overLeft || overRight,
+					v.x,
+					imgCurrLeft,
+					windowWidth,
+					imgCurrWidth.value
+				], [
+					overTop || overBottom,
+					v.y,
+					imgCurrTop,
+					windowHeight,
+					imgCurrHeight.value
+				]].filter(([over, v]) => !over && v !== 0).map(([, v, translate, boxSize, elSize]) => {
+					const animate = createInertialAnimate(v, {
+						update(value) {
+							let next = translate.value + value;
+							const overStart = next > 0;
+							const overEnd = next < boxSize - elSize;
+							if (overStart) next = 0;
+							else if (overEnd) next = boxSize - elSize;
+							translate.value = next;
+							if (overStart || overEnd) {
+								animate.stop();
+								tryFinish();
+							}
+						},
+						complete() {
+							tryFinish();
+						}
+					});
+					animate.play();
+					return animate;
+				});
+				if (animateList.length === 0) return;
+				inInertiaMotion.value = true;
+				const tryFinish = () => {
+					if (animateList.every((animate) => !animate.isAnimating())) inInertiaMotion.value = false;
+				};
+				stopInertialAnimate = () => {
+					animateList.forEach((animate) => {
+						animate.stop();
+					});
+					inInertiaMotion.value = false;
+					stopInertialAnimate = null;
+				};
+			}
+		});
+		const [onDblClickStart, onDblClickEnd] = useSimulatedDblClick({
+			onDblClick(x, y) {
+				if (isContainSize.value) {
+					const nextWidth = imgCurrWidth.value * DBL_CLICK_SCALE;
+					const nextHeight = imgCurrHeight.value * DBL_CLICK_SCALE;
+					handleScale(x, y, nextWidth, nextHeight);
+				} else {
+					imgCurrWidth.value = imgContainSize.value[0];
+					imgCurrHeight.value = imgContainSize.value[1];
+					adjustToCenterPosition();
+				}
+			},
+			onClick() {
+				if (!context.sceneType) context.close();
+			}
+		});
+		const onTouchStart = (event) => {
+			if (context.sceneType !== "swipe") {
+				onDblClickStart(event);
+				onDragPinchStart(event);
+			}
+		};
+		const onTouchMove = (event) => {
+			if (!context.sceneType) if (event.touches.length > 1) context.sceneType = "dragPinch";
+			else context.sceneType = "swipe";
+			if (context.sceneType === "dragPinch") {
+				event.stopImmediatePropagation();
+				onDragPinchMove(event);
+			}
+		};
+		const onTouchEnd = (event) => {
+			if (context.sceneType !== "swipe") {
+				onDblClickEnd(event);
+				onDragPinchEnd(event);
+			}
+			if (isContainSize.value) {
+				if (event.touches.length === 0) context.sceneType = null;
+			} else context.sceneType = "dragPinch";
+		};
+		const onPointerDown = usePointerDown(onTouchStart, onTouchMove, onTouchEnd);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(bem).e("item")),
+				onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args)),
+				onTouchstart: withModifiers(onTouchStart, ["prevent"]),
+				onTouchmove: onTouchMove,
+				onTouchend: onTouchEnd,
+				onTouchcancel: onTouchEnd
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(bem).e("puppet")),
+				style: normalizeStyle(puppetStyle.value)
+			}, null, 6)], 34);
+		};
+	}
+});
+//#endregion
+export { preview_image_item_default as default };

package/components/preview-image/preview-image.d.ts

@@ -0,0 +1,40 @@
+import { type PreviewImageProps, type PreviewImageSlots, type PreviewImageExpose } from './common';
+import type { MotionHookName } from '../motion/common';
+type __VLS_Slots = PreviewImageSlots;
+declare const __VLS_base: import("vue").DefineComponent<PreviewImageProps, PreviewImageExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "before-enter": (el: Element) => any;
+    enter: (el: Element) => any;
+    "after-enter": (el: Element) => any;
+    "enter-cancelled": (el: Element) => any;
+    "before-leave": (el: Element) => any;
+    leave: (el: Element) => any;
+    "after-leave": (el: Element) => any;
+    "leave-cancelled": (el: Element) => any;
+    "visible-hook": (name: MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+    "update:current": (current: number) => any;
+}, string, import("vue").PublicProps, Readonly<PreviewImageProps> & Readonly<{
+    "onBefore-enter"?: ((el: Element) => any) | undefined;
+    onEnter?: ((el: Element) => any) | undefined;
+    "onAfter-enter"?: ((el: Element) => any) | undefined;
+    "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+    "onBefore-leave"?: ((el: Element) => any) | undefined;
+    onLeave?: ((el: Element) => any) | undefined;
+    "onAfter-leave"?: ((el: Element) => any) | undefined;
+    "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+    "onVisible-hook"?: ((name: MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:current"?: ((current: number) => any) | undefined;
+}>, {
+    visible: boolean;
+    current: number;
+    urls: string[];
+}, {}, {}, {}, 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;
+    };
+};