sard 1.0.2 → 1.0.4

package/all-components.js

@@ -104,7 +104,7 @@ import { StatusBar } from "./components/status-bar/index.js";
 import { Stepper } from "./components/stepper/index.js";
 import { Step, Steps } from "./components/steps/index.js";
 import { Sticky, StickyBox } from "./components/sticky/index.js";
-import { SwipeAction, SwipeActionGroup } from "./components/swipe-action/index.js";
+import { SwipeAction } from "./components/swipe-action/index.js";
 import { Swiper, SwiperItem } from "./components/swiper/index.js";
 import { Switch } from "./components/switch/index.js";
 import { Tabbar, TabbarItem } from "./components/tabbar/index.js";
@@ -262,7 +262,6 @@ var all_components_default = {
 	Sticky,
 	StickyBox,
 	SwipeAction,
-	SwipeActionGroup,
 	Swiper,
 	SwiperItem,
 	Switch,

package/components/index.js

@@ -123,7 +123,7 @@ import { StatusBar } from "./status-bar/index.js";
 import { Stepper } from "./stepper/index.js";
 import { Step, Steps } from "./steps/index.js";
 import { Sticky, StickyBox } from "./sticky/index.js";
-import { SwipeAction, SwipeActionGroup } from "./swipe-action/index.js";
+import { SwipeAction } from "./swipe-action/index.js";
 import { Swiper, SwiperItem } from "./swiper/index.js";
 import { Switch } from "./switch/index.js";
 import { Tabbar, TabbarItem } from "./tabbar/index.js";
@@ -139,4 +139,4 @@ import { Tree, TreeBranch, TreeNode } from "./tree/index.js";
 import { Upload, UploadPreview } from "./upload/index.js";
 import { Waterfall, WaterfallItem, WaterfallLoad } from "./waterfall/index.js";
 import { Watermark } from "./watermark/index.js";
-export { ADD_SWIPER_CONTEXT_KEY, Accordion, AccordionItem, ActionSheet, ActionSheetItem, Alert, Avatar, AvatarGroup, BackTop, Badge, Barcode, Button, Calendar, CalendarInput, CalendarPopout, Card, Cascader, CascaderInput, CascaderPopout, Checkbox, CheckboxGroup, CheckboxInput, CheckboxPopout, Col, Collapse, ColorPicker, ColorPickerInput, ColorPickerPopout, Compact, CoolIcon, CountDown, CountTo, CropImage, DateStrip, DatetimePicker, DatetimePickerInput, DatetimePickerPopout, DatetimeRangePicker, DatetimeRangePickerInput, DatetimeRangePickerPopout, Descriptions, DescriptionsItem, Dialog, Divider, Dnd, DndHandle, DndItem, Dropdown, DropdownItem, Ellipsis, Empty, Fab, FabItem, FloatingBubble, FloatingPanel, Form, FormItem, FormItemPlain, FormPlain, Grid, GridItem, Image, Indexes, IndexesAnchor, IndexesNav, InfiniteList, Input, Keyboard, KeyboardPopout, List, ListItem, LoadMore, Loading, Marquee, Menu, MenuItem, Motion, Navbar, NavbarItem, NavbarPit, NoticeBar, Notify, Overlay, Pagination, PasswordInput, Picker, PickerInput, PickerPopout, PickerView, PickerViewColumn, Popout, PopoutInput, Popover, Popup, PreviewImage, ProgressBar, ProgressCircle, PullDownRefresh, PuzzleVerify, Qrcode, REMOVE_SWIPER_CONTEXT_KEY, Radio, RadioGroup, RadioInput, RadioPopout, Rate, ReadMore, Result, RotateVerify, Row, SWIPER_AUTO_HEIGHT_KEY, ScrollList, ScrollSpy, ScrollSpyAnchor, Search, Segmented, SegmentedItem, Select, SelectInput, SelectOption, SelectOptionGroup, SelectPopout, ShareSheet, ShareSheetIcon, ShareSheetItem, ShareSheetRow, Sidebar, SidebarItem, Signature, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonParagraph, SkeletonTitle, SlideVerify, Slider, Space, StatusBar, Step, Stepper, Steps, Sticky, StickyBox, SwipeAction, SwipeActionGroup, Swiper, SwiperItem, Switch, Tab, Tabbar, TabbarItem, TabbarPit, Table, Tabs, Tag, Text, Timeline, TimelineItem, Toast, Tree, TreeBranch, TreeNode, Upload, UploadPreview, Waterfall, WaterfallItem, WaterfallLoad, Watermark, actionSheet, createActionSheet, createCropImage, createDialog, createNotify, createPreviewImage, createToast, cropImage, dialog, formatTime, getCurrentTime, notify, omitFormPopoutProps, partitionPopoutInputProps, plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys, previewImage, safeAreaInsets, spaceSizes, toast, useCountDown, useElementBackTop, useFormContext, useFormItem, useFormItemContext, useFormPopout, useInPopup, useLoadMore, useMotioning, usePageBackTop, usePopoutInput, usePopupEnter, usePopupVisibleHookProvide, windowInfo };
+export { ADD_SWIPER_CONTEXT_KEY, Accordion, AccordionItem, ActionSheet, ActionSheetItem, Alert, Avatar, AvatarGroup, BackTop, Badge, Barcode, Button, Calendar, CalendarInput, CalendarPopout, Card, Cascader, CascaderInput, CascaderPopout, Checkbox, CheckboxGroup, CheckboxInput, CheckboxPopout, Col, Collapse, ColorPicker, ColorPickerInput, ColorPickerPopout, Compact, CoolIcon, CountDown, CountTo, CropImage, DateStrip, DatetimePicker, DatetimePickerInput, DatetimePickerPopout, DatetimeRangePicker, DatetimeRangePickerInput, DatetimeRangePickerPopout, Descriptions, DescriptionsItem, Dialog, Divider, Dnd, DndHandle, DndItem, Dropdown, DropdownItem, Ellipsis, Empty, Fab, FabItem, FloatingBubble, FloatingPanel, Form, FormItem, FormItemPlain, FormPlain, Grid, GridItem, Image, Indexes, IndexesAnchor, IndexesNav, InfiniteList, Input, Keyboard, KeyboardPopout, List, ListItem, LoadMore, Loading, Marquee, Menu, MenuItem, Motion, Navbar, NavbarItem, NavbarPit, NoticeBar, Notify, Overlay, Pagination, PasswordInput, Picker, PickerInput, PickerPopout, PickerView, PickerViewColumn, Popout, PopoutInput, Popover, Popup, PreviewImage, ProgressBar, ProgressCircle, PullDownRefresh, PuzzleVerify, Qrcode, REMOVE_SWIPER_CONTEXT_KEY, Radio, RadioGroup, RadioInput, RadioPopout, Rate, ReadMore, Result, RotateVerify, Row, SWIPER_AUTO_HEIGHT_KEY, ScrollList, ScrollSpy, ScrollSpyAnchor, Search, Segmented, SegmentedItem, Select, SelectInput, SelectOption, SelectOptionGroup, SelectPopout, ShareSheet, ShareSheetIcon, ShareSheetItem, ShareSheetRow, Sidebar, SidebarItem, Signature, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonParagraph, SkeletonTitle, SlideVerify, Slider, Space, StatusBar, Step, Stepper, Steps, Sticky, StickyBox, SwipeAction, Swiper, SwiperItem, Switch, Tab, Tabbar, TabbarItem, TabbarPit, Table, Tabs, Tag, Text, Timeline, TimelineItem, Toast, Tree, TreeBranch, TreeNode, Upload, UploadPreview, Waterfall, WaterfallItem, WaterfallLoad, Watermark, actionSheet, createActionSheet, createCropImage, createDialog, createNotify, createPreviewImage, createToast, cropImage, dialog, formatTime, getCurrentTime, notify, omitFormPopoutProps, partitionPopoutInputProps, plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys, previewImage, safeAreaInsets, spaceSizes, toast, useCountDown, useElementBackTop, useFormContext, useFormItem, useFormItemContext, useFormPopout, useInPopup, useLoadMore, useMotioning, usePageBackTop, usePopoutInput, usePopupEnter, usePopupVisibleHookProvide, windowInfo };

package/components/popover/popover.js

@@ -60,7 +60,7 @@ var popover_default = /*@__PURE__*/ defineComponent({
 		const popperRef = useTemplateRef("popper");
 		useClickOutside(popperRef, () => {
 			innerVisible.value = false;
-		}, computed(() => innerVisible.value && props.outsideClosable));
+		}, () => innerVisible.value && props.outsideClosable);
 		const [popperPos, arrowPos] = usePopper(mergedRef, popperRef, innerVisible, {
 			position: () => props.position,
 			refGap: () => props.refGap,

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/sticky/index.css

@@ -1 +1 @@
-.s-sticky{display:block}.s-sticky__fixation{position:relative;z-index:1}.s-sticky-box{position:relative}
+.s-sticky{display:block}.s-sticky__fixation{position:relative;z-index:1;width:fit-content;height:fit-content}.s-sticky-box{position:relative}

package/components/sticky/sticky.js

@@ -1,6 +1,8 @@
 import { createBem } from "../../utils/bem.js";
 import { isNumber } from "../../utils/is.js";
+import { useWindowResize } from "../../use/useWindowResize.js";
 import { useIntersectionObserver } from "../../use/useIntersectionObserver.js";
+import { usePageScroll } from "../../use/usePageScroll.js";
 import { useResizeObserver } from "../../use/useResizeObserver.js";
 import { stickyContextKey } from "./common.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, reactive, ref, renderSlot, toValue, unref, useTemplateRef, watch } from "vue";
@@ -31,14 +33,28 @@ var sticky_default = /*@__PURE__*/ defineComponent({
 			bottom: ""
 		});
 		const boundingBox = ref("none");
-		const boundSize = useResizeObserver(useTemplateRef("bound"));
+		const fixationSize = useResizeObserver(useTemplateRef("fixation"));
 		const context = inject(stickyContextKey, null);
-		const size = computed(() => {
-			return {
-				width: boundSize.width + "px",
-				height: boundSize.height + "px"
-			};
-		});
+		const updatePosition = () => {
+			const target = targetRef.value;
+			if (!target) return;
+			let position = "relative";
+			let top = "";
+			let bottom = "";
+			const targetRect = target.getBoundingClientRect();
+			if (isNumber(props.marginTop) && targetRect.top < -props.marginTop) {
+				position = "fixed";
+				top = -props.marginTop + "px";
+			} else if (isNumber(props.marginBottom) && targetRect.bottom > window.innerHeight + props.marginBottom) {
+				position = "fixed";
+				bottom = -props.marginBottom + "px";
+			}
+			Object.assign(positionStyle, {
+				position,
+				top,
+				bottom
+			});
+		};
 		const { intersectionRatio } = useIntersectionObserver({
 			target: targetRef,
 			threshold: [1],
@@ -49,76 +65,64 @@ var sticky_default = /*@__PURE__*/ defineComponent({
 			targetRef,
 			() => props.marginTop,
 			() => props.marginBottom
-		], () => {
-			const target = targetRef.value;
-			if (!target) return;
-			Object.assign(positionStyle, {
-				position: "relative",
-				top: "",
-				bottom: ""
-			});
-			const targetRect = target.getBoundingClientRect();
-			if (intersectionRatio.value < 1) {
-				if (isNumber(props.marginTop) && targetRect.top < -props.marginTop) {
-					positionStyle.position = "fixed";
-					positionStyle.top = -props.marginTop + "px";
-				} else if (isNumber(props.marginBottom) && targetRect.bottom > window.innerHeight + props.marginBottom) {
-					positionStyle.position = "fixed";
-					positionStyle.bottom = -props.marginBottom + "px";
-				}
-			}
-		}, {
+		], updatePosition, {
 			immediate: true,
 			flush: "post"
 		});
+		usePageScroll(updatePosition);
+		useWindowResize(updatePosition);
 		if (context) {
 			const { isIntersecting } = useIntersectionObserver({
 				target: context.box,
 				threshold: [0],
 				rootMargin: computed(() => {
-					return `${(props.marginTop || 0) - boundSize.height}px 0px ${(props.marginBottom || 0) - boundSize.height}px`;
+					return `${(props.marginTop || 0) - fixationSize.height}px 0px ${(props.marginBottom || 0) - fixationSize.height}px`;
 				})
 			});
-			watch([
-				isIntersecting,
-				targetRef,
-				context.box
-			], () => {
+			const updateBoundingBox = () => {
 				const box = toValue(context.box);
 				if (!box) return;
 				const boxRect = box.getBoundingClientRect();
-				if (boxRect.top > window.innerHeight - boundSize.height + (props.marginBottom || 0)) boundingBox.value = "top";
-				else if (boxRect.bottom < boundSize.height - (props.marginTop || 0)) boundingBox.value = "bottom";
+				if (boxRect.top > window.innerHeight - fixationSize.height + (props.marginBottom || 0)) boundingBox.value = "top";
+				else if (boxRect.bottom < fixationSize.height - (props.marginTop || 0)) boundingBox.value = "bottom";
 				else boundingBox.value = "none";
+			};
+			watch([
+				isIntersecting,
+				targetRef,
+				context.box
+			], updateBoundingBox, {
+				immediate: true,
+				flush: "post"
 			});
+			usePageScroll(updateBoundingBox);
+			useWindowResize(updateBoundingBox);
 		}
-		__expose({});
 		const stickyStyle = computed(() => {
-			return size.value;
+			const { width, height } = fixationSize;
+			return {
+				width: width ? width + "px" : "auto",
+				height: height ? height + "px" : "auto"
+			};
 		});
 		const fixationStyle = computed(() => {
-			return [
-				size.value,
-				{ zIndex: props.zIndex },
-				boundingBox.value === "none" ? positionStyle : {
-					position: "absolute",
-					top: boundingBox.value === "top" ? 0 : "",
-					bottom: boundingBox.value === "bottom" ? 0 : ""
-				}
-			];
+			return [{ zIndex: props.zIndex }, boundingBox.value === "none" ? positionStyle : {
+				position: "absolute",
+				top: boundingBox.value === "top" ? 0 : "",
+				bottom: boundingBox.value === "bottom" ? 0 : ""
+			}];
 		});
+		__expose({});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref: "target",
 				class: normalizeClass(unref(bem).b()),
 				style: normalizeStyle(stickyStyle.value)
 			}, [createElementVNode("div", {
+				ref: "fixation",
 				class: normalizeClass(unref(bem).e("fixation")),
 				style: normalizeStyle(fixationStyle.value)
-			}, [createElementVNode("div", {
-				ref: "bound",
-				class: normalizeClass(unref(bem).e("bound"))
-			}, [renderSlot(_ctx.$slots, "default")], 2)], 6)], 6);
+			}, [renderSlot(_ctx.$slots, "default")], 6)], 6);
 		};
 	}
 });

package/components/swipe-action/common.d.ts

@@ -1,17 +1,21 @@
-import type { InjectionKey } from 'vue';
 import type { DefaultProps } from '../config';
 export type SwipeActionVisible = 'left' | 'right' | false;
+export type SwipeActionAsyncHide = (callback: (resolve: () => void, reject: () => void) => void) => void;
 export interface SwipeActionProps {
     disabled?: boolean;
     visible?: SwipeActionVisible;
+    outsideClosable?: boolean;
 }
+export declare const defaultSwipeActionProps: DefaultProps<SwipeActionProps>;
 export interface SwipeActionSlots {
     default?(props: Record<string, never>): any;
     left?(props: {
         hide: () => void;
+        asyncHide: SwipeActionAsyncHide;
     }): any;
     right?(props: {
         hide: () => void;
+        asyncHide: SwipeActionAsyncHide;
     }): any;
 }
 export interface SwipeActionEmits {
@@ -20,20 +24,3 @@ export interface SwipeActionEmits {
 export interface SwipeActionExpose {
     hide: () => void;
 }
-export interface SwipeActionGroupProps {
-    multiple?: boolean;
-}
-export declare const defaultSwipeActionGroupProps: DefaultProps<SwipeActionGroupProps>;
-export interface SwipeActionGroupSlots {
-    default?(props: Record<string, never>): any;
-}
-export interface SwipeActionGroupExpose {
-    closeAll: () => void;
-}
-export interface SwipeActionGroupContext {
-    multiple: SwipeActionGroupProps['multiple'];
-    register: (id: string, expose: SwipeActionExpose) => void;
-    unregister: (id: string) => void;
-    closeAll: (exceptId?: string) => void;
-}
-export declare const swipeActionGroupContextKey: InjectionKey<SwipeActionGroupContext>;

package/components/swipe-action/common.js

@@ -1,5 +1,4 @@
 //#region packages/sard/components/swipe-action/common.ts
-const defaultSwipeActionGroupProps = { multiple: false };
-const swipeActionGroupContextKey = Symbol("swipeActionGroupContext");
+const defaultSwipeActionProps = { outsideClosable: true };
 //#endregion
-export { defaultSwipeActionGroupProps, swipeActionGroupContextKey };
+export { defaultSwipeActionProps };

package/components/swipe-action/index.d.ts

@@ -1,7 +1,5 @@
 import { type EnhancedComponent } from '../../utils';
 import _SwipeAction from './swipe-action.vue';
-import _SwipeActionGroup from './swipe-action-group.vue';
 export declare const SwipeAction: EnhancedComponent<typeof _SwipeAction>;
-export declare const SwipeActionGroup: EnhancedComponent<typeof _SwipeActionGroup>;
 export default SwipeAction;
-export type { SwipeActionProps, SwipeActionSlots, SwipeActionEmits, SwipeActionExpose, SwipeActionVisible, SwipeActionGroupProps, SwipeActionGroupSlots, SwipeActionGroupExpose, } from './common';
+export type { SwipeActionProps, SwipeActionSlots, SwipeActionEmits, SwipeActionExpose, SwipeActionVisible, SwipeActionAsyncHide, } from './common';

package/components/swipe-action/index.js

@@ -1,8 +1,6 @@
 import { enhanceComponent } from "../../utils/component.js";
 import swipe_action_default from "./swipe-action.js";
-import swipe_action_group_default from "./swipe-action-group.js";
 //#region packages/sard/components/swipe-action/index.ts
 const SwipeAction = enhanceComponent(swipe_action_default);
-const SwipeActionGroup = enhanceComponent(swipe_action_group_default);
 //#endregion
-export { SwipeAction, SwipeAction as default, SwipeActionGroup };
+export { SwipeAction, SwipeAction as default };

package/components/swipe-action/swipe-action.d.ts

@@ -4,7 +4,11 @@ declare const __VLS_base: import("vue").DefineComponent<SwipeActionProps, SwipeA
     "update:visible": (value: SwipeActionVisible) => any;
 }, string, import("vue").PublicProps, Readonly<SwipeActionProps> & Readonly<{
     "onUpdate:visible"?: ((value: SwipeActionVisible) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    visible: SwipeActionVisible;
+    disabled: boolean;
+    outsideClosable: 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;

package/components/swipe-action/swipe-action.js

@@ -4,12 +4,13 @@ import { usePointerDown } from "../../use/usePointerDown.js";
 import { useInitialVelocity } from "../../use/useInitialVelocity.js";
 import { useStopMovedClick } from "../../use/useStopMovedClick.js";
 import { useRtl } from "../../use/useRtl.js";
-import { swipeActionGroupContextKey } from "./common.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, useSlots, useTemplateRef, watch, withModifiers } from "vue";
+import { useClickOutside } from "../../use/useClickOutside.js";
+import { defaultSwipeActionProps } from "./common.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, unref, useSlots, useTemplateRef, watch, withModifiers } from "vue";
 //#region packages/sard/components/swipe-action/swipe-action.vue
 var swipe_action_default = /*@__PURE__*/ defineComponent({
 	__name: "swipe-action",
-	props: {
+	props: /*@__PURE__*/ mergeDefaults({
 		disabled: {
 			type: Boolean,
 			required: false
@@ -17,16 +18,19 @@ var swipe_action_default = /*@__PURE__*/ defineComponent({
 		visible: {
 			type: [String, Boolean],
 			required: false
+		},
+		outsideClosable: {
+			type: Boolean,
+			required: false
 		}
-	},
+	}, defaultSwipeActionProps),
 	emits: ["update:visible"],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const slots = useSlots();
 		const emit = __emit;
 		const bem = createBem("swipe-action");
-		const groupContext = inject(swipeActionGroupContextKey, null);
-		const swipeActionId = uniqid();
+		uniqid();
 		const innerVisible = ref(props.visible || false);
 		watch(() => props.visible, () => {
 			if (props.visible !== innerVisible.value) {
@@ -40,14 +44,30 @@ var swipe_action_default = /*@__PURE__*/ defineComponent({
 				emit("update:visible", visible);
 			}
 		};
+		let closeDisabled = false;
 		const hide = () => {
+			if (closeDisabled) return;
 			triggerVisible(false);
 			setTranslateXByVisible(false);
 		};
+		const asyncHide = (callback) => {
+			closeDisabled = true;
+			const resolve = () => {
+				closeDisabled = false;
+				hide();
+			};
+			const reject = () => {
+				closeDisabled = false;
+			};
+			callback(resolve, reject);
+		};
 		const onContentClick = () => {
 			if (!props.disabled && !isStoppedClick.value) hide();
 		};
 		const { isStoppedClick, onPointerDown: onContentPointerDown, onPointerMove, onPointerUp } = useStopMovedClick();
+		useClickOutside(useTemplateRef("root"), () => {
+			hide();
+		}, () => props.outsideClosable, "touchstart");
 		const leftRef = useTemplateRef("left");
 		const rightRef = useTemplateRef("right");
 		let leftWidth = null;
@@ -69,16 +89,12 @@ var swipe_action_default = /*@__PURE__*/ defineComponent({
 			translateX.value = visible === "left" ? leftWidth || 0 : visible === "right" ? -(rightWidth || 0) : 0;
 		};
 		onMounted(() => {
-			groupContext?.register(swipeActionId, { hide });
 			getWidth();
 			if (innerVisible.value) setTranslateXByVisible(innerVisible.value);
 		});
-		onBeforeUnmount(() => {
-			groupContext?.unregister(swipeActionId);
-		});
 		const onTouchStart = (event) => {
+			closeDisabled = false;
 			if (props.disabled || !slots.left && !slots.right) return;
-			groupContext?.closeAll(swipeActionId);
 			const { clientX, clientY } = event.touches[0];
 			startX = clientX;
 			startY = clientY;
@@ -139,6 +155,7 @@ var swipe_action_default = /*@__PURE__*/ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
+				ref: "root",
 				class: normalizeClass(unref(bem).b()),
 				onTouchstart: onTouchStart,
 				onTouchmove: onTouchMove,
@@ -159,13 +176,19 @@ var swipe_action_default = /*@__PURE__*/ defineComponent({
 					ref: "left",
 					class: normalizeClass(unref(bem).e("left")),
 					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
-				}, [renderSlot(_ctx.$slots, "left", { hide })], 2)) : createCommentVNode("v-if", true),
+				}, [renderSlot(_ctx.$slots, "left", {
+					hide,
+					asyncHide
+				})], 2)) : createCommentVNode("v-if", true),
 				slots.right ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					ref: "right",
 					class: normalizeClass(unref(bem).e("right")),
 					onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
-				}, [renderSlot(_ctx.$slots, "right", { hide })], 2)) : createCommentVNode("v-if", true)
+				}, [renderSlot(_ctx.$slots, "right", {
+					hide,
+					asyncHide
+				})], 2)) : createCommentVNode("v-if", true)
 			], 38)], 34);
 		};
 	}

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/global.d.ts

@@ -141,7 +141,6 @@ declare module 'vue' {
     SSticky: typeof import('./components/sticky/sticky').default
     SStickyBox: typeof import('./components/sticky/sticky-box').default
     SSwipeAction: typeof import('./components/swipe-action/swipe-action').default
-    SSwipeActionGroup: typeof import('./components/swipe-action/swipe-action-group').default
     SSwiper: typeof import('./components/swiper/swiper').default
     SSwiperItem: typeof import('./components/swiper/swiper-item').default
     SSwitch: typeof import('./components/switch/switch').default