sard 1.0.2 → 1.0.3

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

@@ -2,9 +2,11 @@ import type { InjectionKey } from 'vue';
 import { type DefaultProps } from '../config';
 import type { MotionEmits } from '../motion';
 export interface PreviewImageProps {
+    urls?: string[];
     visible?: boolean;
     current?: number;
-    urls?: string[];
+    showIndicator?: boolean;
+    loop?: boolean;
 }
 export declare const defaultPreviewImageProps: DefaultProps<PreviewImageProps>;
 export interface PreviewImageSlots {

package/components/preview-image/common.js

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

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

@@ -29,6 +29,8 @@ declare const __VLS_base: import("vue").DefineComponent<PreviewImageProps, Previ
     visible: boolean;
     current: number;
     urls: string[];
+    showIndicator: boolean;
+    loop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -8,13 +8,17 @@ import { defaultPreviewImageProps, previewImageContextKey } from "./common.js";
 import swiper_default from "../swiper/swiper.js";
 import swiper_item_default from "../swiper/swiper-item.js";
 import preview_image_item_default from "./preview-image-item.js";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeDefaults, normalizeClass, normalizeStyle, openBlock, provide, reactive, ref, renderList, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeDefaults, normalizeClass, normalizeStyle, openBlock, provide, reactive, ref, renderList, toDisplayString, unref, useModel, watch, withCtx } from "vue";
 //#region packages/sard/components/preview-image/preview-image.vue
 const CLOSE_THRESHOLD = 80;
 const SCALE_THRESHOLD = 300;
 var preview_image_default = /*@__PURE__*/ defineComponent({
 	__name: "preview-image",
 	props: /*@__PURE__*/ mergeDefaults({
+		urls: {
+			type: Array,
+			required: false
+		},
 		visible: {
 			type: Boolean,
 			required: false
@@ -23,8 +27,12 @@ var preview_image_default = /*@__PURE__*/ defineComponent({
 			type: Number,
 			required: false
 		},
-		urls: {
-			type: Array,
+		showIndicator: {
+			type: Boolean,
+			required: false
+		},
+		loop: {
+			type: Boolean,
 			required: false
 		}
 	}, defaultPreviewImageProps),
@@ -146,7 +154,7 @@ var preview_image_default = /*@__PURE__*/ defineComponent({
 				}, [createVNode(unref(swiper_default), {
 					modelValue: unref(current),
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(current) ? current.value = $event : null),
-					loop: "",
+					loop: __props.loop,
 					duration: visibleSwitching.value ? 0 : 300,
 					"space-between": 20,
 					class: normalizeClass([unref(bem).e("swiper"), unref(bem).is("preview-image")])
@@ -160,9 +168,13 @@ var preview_image_default = /*@__PURE__*/ defineComponent({
 					_: 1
 				}, 8, [
 					"modelValue",
+					"loop",
 					"duration",
 					"class"
-				])], 38), createElementVNode("div", { class: normalizeClass(unref(bem).e("toolbar")) }, [createElementVNode("div", { class: normalizeClass(unref(bem).e("indicator")) }, toDisplayString(unref(current) + 1) + " / " + toDisplayString(__props.urls.length), 3)], 2)]),
+				])], 38), createElementVNode("div", { class: normalizeClass(unref(bem).e("toolbar")) }, [__props.showIndicator ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("indicator"))
+				}, toDisplayString(unref(current) + 1) + " / " + toDisplayString(__props.urls.length), 3)) : createCommentVNode("v-if", true)], 2)]),
 				_: 1
 			}, 8, ["overlay-class", "visible"]);
 		};

package/components/swiper/useSwiper.js

@@ -43,13 +43,13 @@ function useSwiper(props, emit) {
 	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();
+	const { offset, swiperSize, startEdge, endEdge, activeIndex, slidesPerView, slidesPerGroup, spaceBetween, centeredSlides, pageCount, loop, slides, setSlides, getNearestOffset, getPreviousNearestOffset, getNextNearestOffset, getNextIndexOffset, normalizeLoopOffset, snapTo } = 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;
+		loop.value = props.loop && slides.value.length > 1;
 	});
 	watchPostEffect(() => {
 		const wrapper = wrapperRef.value;
@@ -76,14 +76,18 @@ function useSwiper(props, emit) {
 			}
 		}
 	};
+	activeIndex.value = Number(props.modelValue) || 0;
 	watch(() => props.modelValue, (index) => {
 		if (!isNullish(index)) {
 			index = clamp(~~index, 0, pageCount.value - 1);
-			if (index !== activeIndex.value) slideTo({
-				offset: getOffsetByIndex(index),
-				index
-			}, false);
+			if (index !== activeIndex.value) {
+				activeIndex.value = index;
+				snapTo(index);
+			}
 		}
+	}, { flush: "post" });
+	onMounted(() => {
+		snapTo(props.modelValue);
 	});
 	let startX = 0;
 	let startY = 0;

package/components/swiper/useSwiperData.d.ts

@@ -16,6 +16,15 @@ export declare function useSwiperData(): {
     centeredSlides: import("vue").Ref<boolean, boolean>;
     loop: import("vue").Ref<boolean, boolean>;
     pageCount: import("vue").ComputedRef<number>;
+    slides: import("vue").Ref<{
+        el: HTMLElement | null;
+        size: number;
+        offset: number;
+    }[], SwiperSlideData[] | {
+        el: HTMLElement | null;
+        size: number;
+        offset: number;
+    }[]>;
     setSlides: (_slides: SwiperSlideData[]) => void;
     getOffsetByIndex: (index: number) => number;
     getNearestOffset: (forceSide?: "before" | "after") => {
@@ -46,4 +55,5 @@ export declare function useSwiperData(): {
         index: number;
     };
     normalizeLoopOffset: (nextOffset: number) => number;
+    snapTo: (index: number) => void;
 };

package/components/swiper/useSwiperData.js

@@ -207,6 +207,7 @@ function useSwiperData() {
 		centeredSlides,
 		loop,
 		pageCount,
+		slides,
 		setSlides,
 		getOffsetByIndex,
 		getNearestOffset,
@@ -221,7 +222,8 @@ function useSwiperData() {
 		getPreviousIndex,
 		getNextIndexOffset,
 		getPreviousIndexOffset,
-		normalizeLoopOffset
+		normalizeLoopOffset,
+		snapTo
 	};
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sard",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "sard 是基于 Vue3 的 Web 移动端 UI 组件库",
   "keywords": [
     "UI",