sard 1.0.0 → 1.0.2

package/components/swiper/index.d.ts

@@ -0,0 +1,8 @@
+import { type EnhancedComponent } from '../../utils';
+import _Swiper from './swiper';
+import _SwiperItem from './swiper-item';
+export declare const Swiper: EnhancedComponent<typeof _Swiper>;
+export declare const SwiperItem: EnhancedComponent<typeof _SwiperItem>;
+export default Swiper;
+export { ADD_SWIPER_CONTEXT_KEY, REMOVE_SWIPER_CONTEXT_KEY, SWIPER_AUTO_HEIGHT_KEY } from './common';
+export type { SwiperProps, SwiperSlots, SwiperEmits, SwiperExpose, SwiperItemProps, SwiperItemSlots, SwiperItemEmits, SwiperItemExpose, } from './common';

package/components/swiper/index.js

@@ -0,0 +1,9 @@
+import { enhanceComponent } from "../../utils/component.js";
+import { ADD_SWIPER_CONTEXT_KEY, REMOVE_SWIPER_CONTEXT_KEY, SWIPER_AUTO_HEIGHT_KEY } from "./common.js";
+import swiper_default from "./swiper.js";
+import swiper_item_default from "./swiper-item.js";
+//#region packages/sard/components/swiper/index.ts
+const Swiper = enhanceComponent(swiper_default);
+const SwiperItem = enhanceComponent(swiper_item_default);
+//#endregion
+export { ADD_SWIPER_CONTEXT_KEY, REMOVE_SWIPER_CONTEXT_KEY, SWIPER_AUTO_HEIGHT_KEY, Swiper, Swiper as default, SwiperItem };

package/components/swiper/swiper-item.d.ts

@@ -0,0 +1,3 @@
+import { type SwiperItemSlots } from './common';
+declare const _default: import("vue").DefineSetupFnComponent<import("vue").ExtractPublicPropTypes<{}>, {}, SwiperItemSlots>;
+export default _default;

package/components/swiper/swiper-item.js

@@ -0,0 +1,34 @@
+import { createBem } from "../../utils/bem.js";
+import { defineSetupFnComponent } from "../../utils/component.js";
+import { swiperItemProps } from "./common.js";
+import { useSwiperItem } from "./useSwiper.js";
+import { createVNode, watchPostEffect } from "vue";
+//#region packages/sard/components/swiper/swiper-item.tsx
+var swiper_item_default = defineSetupFnComponent((_props, { slots }) => {
+	const bem = createBem("swiper");
+	const { elRef, member, context: { vertical, spaceBetween, autoHeight } } = useSwiperItem();
+	watchPostEffect(() => {
+		const el = elRef.value;
+		if (el) {
+			el.style.setProperty("--swiper-item-offset-raw", member.offset + "px");
+			el.style.setProperty("--swiper-item-size", member.size + "px");
+			el.style.setProperty("--swiper-item-margin", spaceBetween.value + "px");
+		}
+	});
+	return () => {
+		return createVNode("div", {
+			"ref": elRef,
+			"class": [
+				bem.e("item"),
+				bem.is("vertical", vertical.value),
+				bem.is("auto-height", autoHeight.value)
+			]
+		}, [slots.default && slots.default()]);
+	};
+}, {
+	name: "SwiperItem",
+	props: swiperItemProps,
+	slots: null
+});
+//#endregion
+export { swiper_item_default as default };

package/components/swiper/swiper.d.ts

@@ -0,0 +1,57 @@
+import { type SwiperEmits, type SwiperSlots, type SwiperContext, type AddSwiperContext, type RemoveSwiperContext } from './common';
+export type { SwiperContext, AddSwiperContext, RemoveSwiperContext };
+declare const _default: import("vue").DefineSetupFnComponent<import("vue").ExtractPublicPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showIndicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    speed: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    slidesPerView: {
+        type: NumberConstructor;
+        default: number;
+    };
+    slidesPerGroup: {
+        type: NumberConstructor;
+        default: number;
+    };
+    spaceBetween: {
+        type: NumberConstructor;
+        default: number;
+    };
+    centeredSlides: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowTouchMove: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, SwiperEmits, SwiperSlots>;
+export default _default;

package/components/swiper/swiper.js

@@ -0,0 +1,43 @@
+import { createBem } from "../../utils/bem.js";
+import { flatVNode } from "../../utils/vnode.js";
+import { defineSetupFnComponent } from "../../utils/component.js";
+import { swiperProps } from "./common.js";
+import { useSwiper } from "./useSwiper.js";
+import { createVNode } from "vue";
+//#region packages/sard/components/swiper/swiper.tsx
+var swiper_default = defineSetupFnComponent((props, { slots, emit }) => {
+	const bem = createBem("swiper");
+	const { rootRef, wrapperRef, activeIndex, pageCount, setSwiperItems, onTouchStart, onTouchMove, onTouchEnd, onPointerDown } = useSwiper(props, emit);
+	return () => {
+		const defaultSlots = slots.default && slots.default();
+		setSwiperItems(flatVNode(defaultSlots));
+		return createVNode("div", {
+			"ref": rootRef,
+			"class": [
+				bem.b(),
+				bem.m("vertical", props.vertical),
+				bem.is("auto-height", props.autoHeight)
+			],
+			"onTouchstart": onTouchStart,
+			"onTouchmove": onTouchMove,
+			"onTouchend": onTouchEnd,
+			"onTouchcancel": onTouchEnd,
+			"onPointerdown": onPointerDown
+		}, [createVNode("div", {
+			"ref": wrapperRef,
+			"class": [bem.e("wrapper"), bem.is("vertical", props.vertical)]
+		}, [defaultSlots]), props.showIndicator && createVNode("div", { "class": [bem.e("dots"), bem.is("vertical", props.vertical)] }, [Array(pageCount.value).fill(0).map((_, index) => createVNode("div", { "class": [bem.e("dot"), bem.is("active", activeIndex.value === index)] }, null))])]);
+	};
+}, {
+	name: "Swiper",
+	props: swiperProps,
+	emits: [
+		"change",
+		"transition",
+		"animationfinish",
+		"update:modelValue"
+	],
+	slots: null
+});
+//#endregion
+export { swiper_default as default };

package/components/swiper/useSwiper.d.ts

@@ -0,0 +1,29 @@
+import { type Ref, type VNode } from 'vue';
+import { type SwiperSlideData } from './useSwiperData';
+import type { SwiperEmits, SwiperPrivateProps } from './common';
+type SwiperMember = SwiperSlideData;
+interface SwiperContext {
+    autoHeight: Ref<boolean>;
+    spaceBetween: Ref<number>;
+    vertical: Ref<boolean>;
+    addMember: (member: SwiperMember) => void;
+    removeMember: (member: SwiperMember) => void;
+}
+export declare function useSwiper(props: SwiperPrivateProps, emit: SwiperEmits): {
+    rootRef: Ref<HTMLElement | null, HTMLElement | null>;
+    wrapperRef: Ref<HTMLElement | null, HTMLElement | null>;
+    members: import("vue").ShallowRef<SwiperSlideData[], SwiperSlideData[]>;
+    activeIndex: Ref<number, number>;
+    pageCount: import("vue").ComputedRef<number>;
+    setSwiperItems: (_swiperItems: VNode[]) => void;
+    onTouchStart: (event: TouchEvent) => void;
+    onTouchMove: (event: TouchEvent) => void;
+    onTouchEnd: () => void;
+    onPointerDown: (event: PointerEvent) => void;
+};
+export declare function useSwiperItem(): {
+    elRef: Ref<HTMLElement | null, HTMLElement | null>;
+    member: SwiperSlideData;
+    context: SwiperContext;
+};
+export {};

package/components/swiper/useSwiper.js

@@ -0,0 +1,186 @@
+import { clamp } from "../../utils/number.js";
+import { isNullish } from "../../utils/is.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useInitialVelocity } from "../../use/useInitialVelocity.js";
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import { useRtl } from "../../use/useRtl.js";
+import { useSwiperData } from "./useSwiperData.js";
+import { useSwiperAnimation } from "./useSwiperAnimation.js";
+import { useSwiperAutoHeight } from "./useSwiperAutoHeight.js";
+import { useSwiperAutoPlay } from "./useSwiperAutoPlay.js";
+import { useSwiperNested } from "./useSwiperNested.js";
+import { computed, inject, onMounted, onUnmounted, provide, reactive, ref, shallowRef, toRef, toValue, watch, watchPostEffect, watchSyncEffect } from "vue";
+//#region packages/sard/components/swiper/useSwiper.ts
+const swiperContextKey = Symbol("swiperContext");
+function useSwiper(props, emit) {
+	const vertical = computed(() => toValue(props.vertical));
+	const rootRef = ref(null);
+	const wrapperRef = ref(null);
+	const isRtl = useRtl();
+	let swiperItems = [];
+	const members = shallowRef([]);
+	function updateMembers(rawMembers) {
+		const _members = [];
+		for (let i = 0; i < swiperItems.length; i++) {
+			let swiperItem = swiperItems[i];
+			if (!(swiperItem instanceof Element)) swiperItem = swiperItem.el;
+			const member = rawMembers.find((member) => swiperItem === member.el);
+			if (member) _members.push(member);
+		}
+		members.value = _members;
+	}
+	provide(swiperContextKey, {
+		autoHeight: toRef(() => props.autoHeight),
+		spaceBetween: toRef(() => props.spaceBetween),
+		vertical: toRef(() => !!props.vertical),
+		addMember(member) {
+			updateMembers([...members.value, member]);
+		},
+		removeMember(member) {
+			updateMembers(members.value.filter((m) => m !== member));
+		}
+	});
+	const setSwiperItems = (_swiperItems) => {
+		swiperItems = _swiperItems;
+	};
+	const { offset, swiperSize, startEdge, endEdge, activeIndex, slidesPerView, slidesPerGroup, spaceBetween, centeredSlides, pageCount, loop, setSlides, getOffsetByIndex, getNearestOffset, getPreviousNearestOffset, getNextNearestOffset, getNextIndexOffset, normalizeLoopOffset } = useSwiperData();
+	watchSyncEffect(() => {
+		slidesPerView.value = props.slidesPerView;
+		spaceBetween.value = props.spaceBetween;
+		slidesPerGroup.value = Math.floor(Math.max(Math.min(props.slidesPerGroup, props.slidesPerView), 1));
+		centeredSlides.value = props.centeredSlides;
+		loop.value = props.loop;
+	});
+	watchPostEffect(() => {
+		const wrapper = wrapperRef.value;
+		if (wrapper) wrapper.style.setProperty("--swiper-offset-raw", offset.value + "px");
+	});
+	useResizeObserver(rootRef, (size) => {
+		swiperSize.value = vertical.value ? size.height : size.width;
+	});
+	watch(members, () => {
+		setSlides(members.value);
+	});
+	const anim = useSwiperAnimation(offset);
+	const slideTo = ({ offset: _offset, index }, trigger = true) => {
+		anim.play(_offset, props.speed, () => {
+			if (loop.value) offset.value = normalizeLoopOffset(offset.value);
+		}).then(() => {
+			if (props.autoplay) autoPlay();
+		});
+		if (index !== activeIndex.value) {
+			activeIndex.value = index;
+			if (trigger) {
+				emit("update:modelValue", index);
+				emit("change", index);
+			}
+		}
+	};
+	watch(() => props.modelValue, (index) => {
+		if (!isNullish(index)) {
+			index = clamp(~~index, 0, pageCount.value - 1);
+			if (index !== activeIndex.value) slideTo({
+				offset: getOffsetByIndex(index),
+				index
+			}, false);
+		}
+	});
+	let startX = 0;
+	let startY = 0;
+	let oldMoveX = 0;
+	let oldMoveY = 0;
+	let lockDirection = "";
+	let lossControl = null;
+	const { nestedParentContext } = useSwiperNested();
+	const initVelocity = useInitialVelocity();
+	const onTouchStart = (event) => {
+		if (!props.allowTouchMove) return;
+		const { clientX, clientY } = event.touches[0];
+		startX = oldMoveX = clientX;
+		startY = oldMoveY = clientY;
+		anim.pause();
+		stopAutoPlay();
+		initVelocity.start(clientX, clientY);
+	};
+	const onTouchMove = (event) => {
+		if (!props.allowTouchMove) return;
+		const { clientX, clientY } = event.touches[0];
+		const deltaX = clientX - oldMoveX;
+		const deltaY = clientY - oldMoveY;
+		oldMoveX = clientX;
+		oldMoveY = clientY;
+		let delta = vertical.value ? deltaY : isRtl.value ? -deltaX : deltaX;
+		if (!lockDirection) {
+			const dx = clientX - startX;
+			const dy = clientY - startY;
+			lockDirection = Math.abs(dx) >= Math.abs(dy) ? "x" : "y";
+			if (lossControl === null) if (loop.value || !nestedParentContext) lossControl = false;
+			else {
+				const atStartEdge = offset.value >= startEdge.value && delta > 0;
+				const atEndEdge = offset.value <= endEdge.value && delta < 0;
+				if (atStartEdge || atEndEdge) lossControl = true;
+			}
+		}
+		if (lossControl || lockDirection === "x" && vertical.value || lockDirection === "y" && !vertical.value) return;
+		event.stopImmediatePropagation();
+		if (event.cancelable) event.preventDefault();
+		if (!loop.value && (offset.value > startEdge.value || offset.value < endEdge.value)) delta /= 4;
+		let nextOffset = offset.value + delta;
+		if (loop.value) nextOffset = normalizeLoopOffset(nextOffset);
+		offset.value = nextOffset;
+		initVelocity.move(clientX, clientY);
+	};
+	const onTouchEnd = () => {
+		if (!props.allowTouchMove) return;
+		const velocity = initVelocity.end();
+		if (vertical.value && Math.abs(velocity.y) > .5) if (velocity.y < 0) slideTo(getNextNearestOffset());
+		else slideTo(getPreviousNearestOffset());
+		else if (!vertical.value && Math.abs(velocity.x) > .5) if ((isRtl.value ? velocity.x * -1 : velocity.x) < 0) slideTo(getNextNearestOffset());
+		else slideTo(getPreviousNearestOffset());
+		else slideTo(getNearestOffset());
+		lossControl = null;
+		lockDirection = "";
+	};
+	const onPointerDown = usePointerDown(onTouchStart, onTouchMove, onTouchEnd);
+	useSwiperAutoHeight(rootRef, members, activeIndex, slidesPerGroup, () => props.autoHeight && !props.vertical);
+	const { autoPlay, stopAutoPlay } = useSwiperAutoPlay(() => {
+		slideTo(getNextIndexOffset());
+	}, {
+		delay: () => props.delay,
+		enabled: () => props.autoplay
+	});
+	return {
+		rootRef,
+		wrapperRef,
+		members,
+		activeIndex,
+		pageCount,
+		setSwiperItems,
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd,
+		onPointerDown
+	};
+}
+function useSwiperItem() {
+	const elRef = ref(null);
+	const member = reactive({
+		el: elRef,
+		size: ref(0),
+		offset: ref(0)
+	});
+	const context = inject(swiperContextKey);
+	onMounted(() => {
+		context.addMember(member);
+	});
+	onUnmounted(() => {
+		context.removeMember(member);
+	});
+	return {
+		elRef,
+		member,
+		context
+	};
+}
+//#endregion
+export { useSwiper, useSwiperItem };

package/components/swiper/useSwiperAnimation.d.ts

@@ -0,0 +1,5 @@
+import { type Ref } from 'vue';
+export declare function useSwiperAnimation(target: Ref<number>): {
+    play: (value: number, duration: number, update: () => void) => Promise<void>;
+    pause: () => void;
+};

package/components/swiper/useSwiperAnimation.js

@@ -0,0 +1,33 @@
+import { withResolvers } from "../../utils/polyfill.js";
+import { onUnmounted } from "vue";
+import { createAnimation } from "lwa";
+//#region packages/sard/components/swiper/useSwiperAnimation.ts
+function useSwiperAnimation(target) {
+	let tl;
+	let promiseWithResolvers;
+	const play = (value, duration, update) => {
+		tl?.pause();
+		promiseWithResolvers = withResolvers();
+		tl = createAnimation(target, { value }, {
+			duration,
+			easing: "easeOutCubic",
+			update,
+			complete() {
+				promiseWithResolvers.resolve();
+			}
+		});
+		return promiseWithResolvers.promise;
+	};
+	const pause = () => {
+		tl?.pause();
+	};
+	onUnmounted(() => {
+		pause();
+	});
+	return {
+		play,
+		pause
+	};
+}
+//#endregion
+export { useSwiperAnimation };

package/components/swiper/useSwiperAutoHeight.d.ts

@@ -0,0 +1,3 @@
+import { type Ref } from 'vue';
+import type { SwiperSlideData } from './useSwiperData';
+export declare function useSwiperAutoHeight(rootRef: Ref<HTMLElement | null>, slides: Ref<SwiperSlideData[]>, activeIndex: Ref<number>, slidesPerGroup: Ref<number>, enabled: () => boolean): void;

package/components/swiper/useSwiperAutoHeight.js

@@ -0,0 +1,25 @@
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import { ref, watch } from "vue";
+//#region packages/sard/components/swiper/useSwiperAutoHeight.ts
+function useSwiperAutoHeight(rootRef, slides, activeIndex, slidesPerGroup, enabled) {
+	const activeSlideEl = ref(null);
+	useResizeObserver(activeSlideEl, (size) => {
+		rootRef.value.style.setProperty("--swiper-height", size.height + "px");
+	});
+	watch([
+		slides,
+		enabled,
+		rootRef,
+		activeIndex,
+		slidesPerGroup
+	], () => {
+		if (enabled()) {
+			const index = activeIndex.value * slidesPerGroup.value;
+			slides.value.forEach((slide, i) => {
+				if (i === index) activeSlideEl.value = slide.el;
+			});
+		}
+	}, { flush: "post" });
+}
+//#endregion
+export { useSwiperAutoHeight };

package/components/swiper/useSwiperAutoPlay.d.ts

@@ -0,0 +1,7 @@
+export declare function useSwiperAutoPlay(callback: () => void, { delay, enabled, }: {
+    delay: () => number;
+    enabled: () => boolean;
+}): {
+    autoPlay: () => void;
+    stopAutoPlay: () => void;
+};

package/components/swiper/useSwiperAutoPlay.js

@@ -0,0 +1,25 @@
+import { useTimeout } from "../../use/useTimeout.js";
+import { onMounted, watch } from "vue";
+//#region packages/sard/components/swiper/useSwiperAutoPlay.ts
+function useSwiperAutoPlay(callback, { delay, enabled }) {
+	const timer = useTimeout();
+	function autoPlay() {
+		timer.set(callback, delay());
+	}
+	function stopAutoPlay() {
+		timer.clear();
+	}
+	watch(enabled, (enabled) => {
+		if (enabled) autoPlay();
+		else stopAutoPlay();
+	});
+	onMounted(() => {
+		if (enabled()) autoPlay();
+	});
+	return {
+		autoPlay,
+		stopAutoPlay
+	};
+}
+//#endregion
+export { useSwiperAutoPlay };

package/components/swiper/useSwiperData.d.ts

@@ -0,0 +1,49 @@
+export interface SwiperSlideData {
+    el: HTMLElement | null;
+    size: number;
+    offset: number;
+}
+export declare function useSwiperData(): {
+    offset: import("vue").Ref<number, number>;
+    swiperSize: import("vue").Ref<number, number>;
+    contentSize: import("vue").ComputedRef<number>;
+    startEdge: import("vue").ComputedRef<number>;
+    endEdge: import("vue").ComputedRef<number>;
+    activeIndex: import("vue").Ref<number, number>;
+    slidesPerView: import("vue").Ref<number, number>;
+    slidesPerGroup: import("vue").Ref<number, number>;
+    spaceBetween: import("vue").Ref<number, number>;
+    centeredSlides: import("vue").Ref<boolean, boolean>;
+    loop: import("vue").Ref<boolean, boolean>;
+    pageCount: import("vue").ComputedRef<number>;
+    setSlides: (_slides: SwiperSlideData[]) => void;
+    getOffsetByIndex: (index: number) => number;
+    getNearestOffset: (forceSide?: "before" | "after") => {
+        offset: number;
+        index: number;
+    };
+    getPreviousNearestOffset: () => {
+        offset: number;
+        index: number;
+    };
+    getNextNearestOffset: () => {
+        offset: number;
+        index: number;
+    };
+    snapToStart: () => void;
+    snapToEnd: () => void;
+    snapToNearest: () => void;
+    snapToPreviousNearest: () => void;
+    snapToNextNearest: () => void;
+    getNextIndex: () => number;
+    getPreviousIndex: () => number;
+    getNextIndexOffset: () => {
+        offset: number;
+        index: number;
+    };
+    getPreviousIndexOffset: () => {
+        offset: number;
+        index: number;
+    };
+    normalizeLoopOffset: (nextOffset: number) => number;
+};