sard 1.0.3 → 1.0.5

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/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