sard 1.0.0 → 1.0.2

package/components/sticky/sticky.js

@@ -0,0 +1,126 @@
+import { createBem } from "../../utils/bem.js";
+import { isNumber } from "../../utils/is.js";
+import { useIntersectionObserver } from "../../use/useIntersectionObserver.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";
+//#region packages/sard/components/sticky/sticky.vue
+var sticky_default = /*@__PURE__*/ defineComponent({
+	__name: "sticky",
+	props: {
+		marginTop: {
+			type: Number,
+			required: false
+		},
+		marginBottom: {
+			type: Number,
+			required: false
+		},
+		zIndex: {
+			type: [Number, String],
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const bem = createBem("sticky");
+		const targetRef = useTemplateRef("target");
+		const positionStyle = reactive({
+			position: "relative",
+			top: "",
+			bottom: ""
+		});
+		const boundingBox = ref("none");
+		const boundSize = useResizeObserver(useTemplateRef("bound"));
+		const context = inject(stickyContextKey, null);
+		const size = computed(() => {
+			return {
+				width: boundSize.width + "px",
+				height: boundSize.height + "px"
+			};
+		});
+		const { intersectionRatio } = useIntersectionObserver({
+			target: targetRef,
+			threshold: [1],
+			rootMargin: computed(() => `${props.marginTop || 0}px 0px ${props.marginBottom || 0}px`)
+		});
+		watch([
+			intersectionRatio,
+			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";
+				}
+			}
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		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`;
+				})
+			});
+			watch([
+				isIntersecting,
+				targetRef,
+				context.box
+			], () => {
+				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";
+				else boundingBox.value = "none";
+			});
+		}
+		__expose({});
+		const stickyStyle = computed(() => {
+			return size.value;
+		});
+		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 (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "target",
+				class: normalizeClass(unref(bem).b()),
+				style: normalizeStyle(stickyStyle.value)
+			}, [createElementVNode("div", {
+				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);
+		};
+	}
+});
+//#endregion
+export { sticky_default as default };

package/components/style/index.css

@@ -0,0 +1 @@
+:root{--s-white:#fff;--s-gray-50:#fafafa;--s-gray-100:#f3f3f3;--s-gray-125:#ececec;--s-gray-150:#e5e5e5;--s-gray-200:#dedede;--s-gray-300:#c4c4c4;--s-gray-400:#ababab;--s-gray-500:#8f8f8f;--s-gray-600:#717171;--s-gray-700:#525252;--s-gray-800:#353535;--s-gray-900:#181818;--s-gray-950:#0e0e0e;--s-black:#000;--s-white-rgb:255,255,255;--s-gray-50-rgb:250,250,250;--s-gray-100-rgb:243,243,243;--s-gray-125-rgb:236,236,236;--s-gray-150-rgb:229,229,229;--s-gray-200-rgb:222,222,222;--s-gray-300-rgb:196,196,196;--s-gray-400-rgb:171,171,171;--s-gray-500-rgb:143,143,143;--s-gray-600-rgb:113,113,113;--s-gray-700-rgb:82,82,82;--s-gray-800-rgb:53,53,53;--s-gray-900-rgb:24,24,24;--s-gray-950-rgb:14,14,14;--s-black-rgb:0,0,0;--s-color-primary:#3b82f6;--s-color-secondary:var(--s-gray-600);--s-color-success:#22c55e;--s-color-warning:#eab308;--s-color-danger:#ef4444;--s-color-primary-rgb:59,130,246;--s-color-secondary-rgb:113,113,113;--s-color-success-rgb:34,197,94;--s-color-warning-rgb:234,179,8;--s-color-danger-rgb:239,68,68;--s-text-color-emphasis:var(--s-black);--s-text-color-primary:var(--s-gray-900);--s-text-color-secondary:var(--s-gray-700);--s-text-color-tertiary:var(--s-gray-600);--s-text-color-fourth:var(--s-gray-400);--s-text-color-disabled:var(--s-gray-400);--s-bg-color-layout:var(--s-gray-100);--s-bg-color-container:var(--s-white);--s-bg-color-container-rgb:var(--s-white-rgb);--s-bg-color-elevated:var(--s-white);--s-bg-color-elevated-rgb:var(--s-white-rgb);--s-bg-color-extreme:var(--s-white);--s-bg-color-disabled:var(--s-gray-150);--s-bg-color-active:var(--s-gray-125);--s-bg-color-active-dark:var(--s-gray-200);--s-fill-color:var(--s-gray-200);--s-fill-color-secondary:var(--s-gray-150);--s-fill-color-tertiary:var(--s-gray-125);--s-fill-color-fourth:var(--s-gray-100);--s-border-style:solid;--s-border-width:1px;--s-border-color-dark:var(--s-gray-300);--s-border-color:var(--s-gray-150);--s-border-color-light:var(--s-gray-125);--s-border-color-lighter:var(--s-gray-100);--s-border-color-disabled:var(--s-gray-200);--s-border-radius-xs:2px;--s-border-radius-sm:4px;--s-border-radius:6px;--s-border-radius-lg:10px;--s-border-radius-xl:14px;--s-border-radius-full:9999px;--s-font-family:-apple-system,blinkmacsystemfont,"Helvetica Neue",helvetica,segoe ui,arial,roboto,"PingFang SC","miui","Hiragino Sans GB","Microsoft Yahei",sans-serif;--s-font-family-code:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--s-font-size-xs:10px;--s-font-size-sm:12px;--s-font-size:14px;--s-font-size-lg:16px;--s-font-size-xl:24px;--s-font-size-2xl:32px;--s-font-weight-bold:600;--s-font-weight-normal:400;--s-font-weight-light:300;--s-line-height-none:1;--s-line-height-tight:1.25;--s-line-height-snug:1.375;--s-line-height-normal:1.5;--s-line-height-relaxed:1.625;--s-line-height-loose:2;--s-size-3xs:2px;--s-size-2xs:4px;--s-size-xs:8px;--s-size-sm:12px;--s-size:16px;--s-size-lg:20px;--s-size-xl:24px;--s-size-2xl:32px;--s-size-3xl:40px;--s-size-4xl:48px;--s-size-5xl:56px;--s-size-6xl:64px;--s-content-height-2xs:24px;--s-content-height-xs:32px;--s-content-height-sm:40px;--s-content-height:44px;--s-content-height-lg:48px;--s-content-padding-y:var(--s-size-xs);--s-content-padding-x:var(--s-size);--s-content-padding:var(--s-size-xs) var(--s-size);--s-z-index:1000;--s-z-index-secondary:100;--s-z-index-tertiary:10;--s-box-shadow:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);--s-box-shadow-secondary:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);--s-box-shadow-tertiary:0 1px 2px 0 rgba(0,0,0,.05),0 1px 6px -1px rgba(0,0,0,.03),0 2px 4px 0 rgba(0,0,0,.03);--s-box-shadow-side-color:rgba(0,0,0,.15);--s-box-shadow-left:inset 10px 0 10px -10px var(--s-box-shadow-side-color);--s-box-shadow-right:inset -10px 0 10px -10px var(--s-box-shadow-side-color);--s-box-shadow-top:inset 0 10px 10px -10px var(--s-box-shadow-side-color);--s-box-shadow-bottom:inset 0 -10px 10px -10px var(--s-box-shadow-side-color);--s-overlay-legible:rgba(0,0,0,.1);--s-overlay:rgba(0,0,0,.5);--s-overlay-illegible:rgba(0,0,0,.7);--s-opacity-disabled:.6;--s-opacity-active:.5;--s-opacity-loading:.6;--s-opacity-theme-bg:.1;--s-cursor-disabled:not-allowed;--s-cursor-loading:wait;--s-filter-disabled:grayscale(100%);--s-duration-slow:350ms;--s-duration:250ms;--s-duration-fast:150ms;--s-safe-bottom:env(safe-area-inset-bottom);--s-status-bar-height:0}.dark{--s-text-color-emphasis:var(--s-white);--s-text-color-primary:var(--s-gray-100);--s-text-color-secondary:var(--s-gray-300);--s-text-color-tertiary:var(--s-gray-500);--s-text-color-fourth:var(--s-gray-600);--s-text-color-disabled:var(--s-gray-600);--s-bg-color-layout:var(--s-black);--s-bg-color-container:var(--s-gray-950);--s-bg-color-container-rgb:var(--s-gray-950-rgb);--s-bg-color-elevated:var(--s-gray-950);--s-bg-color-elevated-rgb:var(--s-gray-950-rgb);--s-bg-color-extreme:var(--s-black);--s-bg-color-disabled:var(--s-gray-700);--s-bg-color-active:var(--s-gray-800);--s-bg-color-active-dark:var(--s-gray-600);--s-fill-color:var(--s-gray-600);--s-fill-color-secondary:var(--s-gray-700);--s-fill-color-tertiary:var(--s-gray-800);--s-fill-color-fourth:var(--s-gray-900);--s-border-color-dark:var(--s-gray-600);--s-border-color:var(--s-gray-700);--s-border-color-light:var(--s-gray-800);--s-border-color-lighter:var(--s-gray-900);--s-border-color-disabled:var(--s-gray-700);--s-box-shadow:0 6px 16px 0 hsla(0,0%,100%,.04),0 3px 6px -4px hsla(0,0%,100%,.06),0 9px 28px 8px hsla(0,0%,100%,.02);--s-box-shadow-secondary:0 6px 16px 0 hsla(0,0%,100%,.04),0 3px 6px -4px hsla(0,0%,100%,.06),0 9px 28px 8px hsla(0,0%,100%,.02);--s-box-shadow-tertiary:0 1px 2px 0 hsla(0,0%,100%,.05),0 1px 6px -1px hsla(0,0%,100%,.03),0 2px 4px 0 hsla(0,0%,100%,.03);--s-box-shadow-side-color:hsla(0,0%,100%,.1)}

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

@@ -0,0 +1,39 @@
+import type { InjectionKey } from 'vue';
+import type { DefaultProps } from '../config';
+export type SwipeActionVisible = 'left' | 'right' | false;
+export interface SwipeActionProps {
+    disabled?: boolean;
+    visible?: SwipeActionVisible;
+}
+export interface SwipeActionSlots {
+    default?(props: Record<string, never>): any;
+    left?(props: {
+        hide: () => void;
+    }): any;
+    right?(props: {
+        hide: () => void;
+    }): any;
+}
+export interface SwipeActionEmits {
+    (e: 'update:visible', value: SwipeActionVisible): void;
+}
+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

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

package/components/swipe-action/index.css

@@ -0,0 +1 @@
+.s-swipe-action{overflow:hidden;-webkit-user-select:none;user-select:none}.s-swipe-action__content{--swipe-action-x: var(--swipe-action-x-raw);position:relative;cursor:grab;transform:translate3d(var(--swipe-action-x), 0, 0)}:root[dir=rtl] .s-swipe-action__content{--swipe-action-x: calc(var(--swipe-action-x-raw) * -1)}.s-swipe-action__left,.s-swipe-action__right{position:absolute;top:0;bottom:0;display:flex;pointer-events:auto}.s-swipe-action__left{inset-inline-start:0;transform:translateX(-100%)}:root[dir=rtl] .s-swipe-action__left{transform:translateX(100%)}.s-swipe-action__right{inset-inline-end:0;transform:translateX(100%)}:root[dir=rtl] .s-swipe-action__right{transform:translateX(-100%)}

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

@@ -0,0 +1,7 @@
+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';

package/components/swipe-action/index.js

@@ -0,0 +1,8 @@
+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 };

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

@@ -0,0 +1,13 @@
+import { type SwipeActionGroupProps, type SwipeActionGroupSlots, type SwipeActionGroupExpose } from './common';
+type __VLS_Slots = SwipeActionGroupSlots;
+declare const __VLS_base: import("vue").DefineComponent<SwipeActionGroupProps, SwipeActionGroupExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SwipeActionGroupProps> & Readonly<{}>, {
+    multiple: 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,39 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultSwipeActionGroupProps, swipeActionGroupContextKey } from "./common.js";
+import { createElementBlock, defineComponent, mergeDefaults, normalizeClass, openBlock, provide, reactive, renderSlot, toRef, unref } from "vue";
+//#region packages/sard/components/swipe-action/swipe-action-group.vue
+var swipe_action_group_default = /*@__PURE__*/ defineComponent({
+	__name: "swipe-action-group",
+	props: /*@__PURE__*/ mergeDefaults({ multiple: {
+		type: Boolean,
+		required: false
+	} }, defaultSwipeActionGroupProps),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const bem = createBem("swipe-action-group");
+		const itemMap = /* @__PURE__ */ new Map();
+		const closeAll = (exceptId) => {
+			itemMap.forEach((item, id) => {
+				if (id !== exceptId) item.hide();
+			});
+		};
+		const register = (id, expose) => {
+			itemMap.set(id, expose);
+		};
+		const unregister = (id) => {
+			itemMap.delete(id);
+		};
+		provide(swipeActionGroupContextKey, reactive({
+			multiple: toRef(() => props.multiple),
+			register,
+			unregister,
+			closeAll
+		}));
+		__expose({ closeAll: () => closeAll() });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(bem).b()) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { swipe_action_group_default as default };

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

@@ -0,0 +1,15 @@
+import { type SwipeActionProps, type SwipeActionSlots, type SwipeActionExpose, type SwipeActionVisible } from './common';
+type __VLS_Slots = SwipeActionSlots;
+declare const __VLS_base: import("vue").DefineComponent<SwipeActionProps, SwipeActionExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:visible": (value: SwipeActionVisible) => any;
+}, string, import("vue").PublicProps, Readonly<SwipeActionProps> & Readonly<{
+    "onUpdate:visible"?: ((value: SwipeActionVisible) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,174 @@
+import { createBem } from "../../utils/bem.js";
+import { uniqid } from "../../utils/string.js";
+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";
+//#region packages/sard/components/swipe-action/swipe-action.vue
+var swipe_action_default = /*@__PURE__*/ defineComponent({
+	__name: "swipe-action",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		visible: {
+			type: [String, Boolean],
+			required: false
+		}
+	},
+	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();
+		const innerVisible = ref(props.visible || false);
+		watch(() => props.visible, () => {
+			if (props.visible !== innerVisible.value) {
+				innerVisible.value = props.visible || false;
+				setTranslateXByVisible(innerVisible.value);
+			}
+		});
+		const triggerVisible = (visible) => {
+			if (innerVisible.value !== visible) {
+				innerVisible.value = visible;
+				emit("update:visible", visible);
+			}
+		};
+		const hide = () => {
+			triggerVisible(false);
+			setTranslateXByVisible(false);
+		};
+		const onContentClick = () => {
+			if (!props.disabled && !isStoppedClick.value) hide();
+		};
+		const { isStoppedClick, onPointerDown: onContentPointerDown, onPointerMove, onPointerUp } = useStopMovedClick();
+		const leftRef = useTemplateRef("left");
+		const rightRef = useTemplateRef("right");
+		let leftWidth = null;
+		let rightWidth = null;
+		const translateX = ref(0);
+		const movable = ref(false);
+		const isRtl = useRtl();
+		let startX = 0;
+		let startY = 0;
+		let downTranslateX = 0;
+		let lockDirection = "";
+		let canResolveVisible = false;
+		const initVelocity = useInitialVelocity();
+		const getWidth = () => {
+			leftWidth = leftRef.value ? leftRef.value.getBoundingClientRect().width : null;
+			rightWidth = rightRef.value ? rightRef.value.getBoundingClientRect().width : null;
+		};
+		const setTranslateXByVisible = (visible) => {
+			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) => {
+			if (props.disabled || !slots.left && !slots.right) return;
+			groupContext?.closeAll(swipeActionId);
+			const { clientX, clientY } = event.touches[0];
+			startX = clientX;
+			startY = clientY;
+			initVelocity.start(startX, startY);
+			downTranslateX = translateX.value;
+			movable.value = true;
+			getWidth();
+		};
+		const onTouchMove = (event) => {
+			if (!movable.value || lockDirection && lockDirection !== "x") return;
+			const { clientX, clientY } = event.touches[0];
+			let deltaX = clientX - startX;
+			const deltaY = clientY - startY;
+			if (isRtl.value) deltaX *= -1;
+			initVelocity.move(clientX, clientY);
+			if (!lockDirection) lockDirection = Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y";
+			if (lockDirection !== "x") return;
+			if ((!slots.left || leftWidth !== null) && (!slots.right || rightWidth !== null)) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				let nextTranslateX = downTranslateX + deltaX;
+				const leftEdge = leftWidth !== null ? leftWidth : 0;
+				const rightEdge = rightWidth !== null ? -rightWidth : 0;
+				if (nextTranslateX > leftEdge) nextTranslateX = leftEdge;
+				if (nextTranslateX < rightEdge) nextTranslateX = rightEdge;
+				translateX.value = nextTranslateX;
+				canResolveVisible = true;
+			}
+		};
+		const onTouchEnd = () => {
+			if (canResolveVisible) {
+				const velocity = initVelocity.end();
+				const dependsOnSpeed = Math.abs(velocity.x) > .3;
+				const x = translateX.value;
+				let nextVisible = false;
+				let velocityX = isRtl.value ? velocity.x * -1 : velocity.x;
+				if (x < 0) if (dependsOnSpeed && velocityX < 0 || !dependsOnSpeed && Math.abs(x) >= rightWidth / 2) {
+					nextVisible = "right";
+					translateX.value = -rightWidth;
+				} else translateX.value = 0;
+				else if (x > 0) if (dependsOnSpeed && velocityX > 0 || !dependsOnSpeed && Math.abs(x) >= leftWidth / 2) {
+					nextVisible = "left";
+					translateX.value = leftWidth;
+				} else translateX.value = 0;
+				triggerVisible(nextVisible);
+			}
+			movable.value = false;
+			lockDirection = "";
+			canResolveVisible = false;
+		};
+		const onPointerDown = usePointerDown(onTouchStart, onTouchMove, onTouchEnd);
+		__expose({ hide });
+		const translateStyle = computed(() => {
+			return {
+				"--swipe-action-x-raw": `${translateX.value}px`,
+				transition: movable.value ? "none" : `transform 300ms`
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(bem).b()),
+				onTouchstart: onTouchStart,
+				onTouchmove: onTouchMove,
+				onTouchend: onTouchEnd,
+				onTouchcancel: onTouchEnd,
+				onPointerdown: _cache[5] || (_cache[5] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args))
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(bem).e("content")),
+				style: normalizeStyle(translateStyle.value),
+				onClick: onContentClick,
+				onPointerdown: _cache[2] || (_cache[2] = (...args) => unref(onContentPointerDown) && unref(onContentPointerDown)(...args)),
+				onPointermove: _cache[3] || (_cache[3] = (...args) => unref(onPointerMove) && unref(onPointerMove)(...args)),
+				onPointerup: _cache[4] || (_cache[4] = (...args) => unref(onPointerUp) && unref(onPointerUp)(...args))
+			}, [
+				renderSlot(_ctx.$slots, "default"),
+				slots.left ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					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),
+				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)
+			], 38)], 34);
+		};
+	}
+});
+//#endregion
+export { swipe_action_default as default };

package/components/swiper/common.d.ts

@@ -0,0 +1,101 @@
+import { type ExtractPropTypes, type ExtractPublicPropTypes, type Ref } from 'vue';
+import { type DefaultProps } from '../config';
+export declare const swiperProps: {
+    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;
+    };
+};
+export type SwiperProps = ExtractPublicPropTypes<typeof swiperProps>;
+export type SwiperPrivateProps = ExtractPropTypes<typeof swiperProps>;
+export declare const defaultSwiperProps: DefaultProps<SwiperProps>;
+export interface SwiperSlots {
+    default?(): any;
+}
+export interface SwiperEmits {
+    (e: 'change', value: number): any;
+    (e: 'transition', event: {
+        dx: number;
+        dy: number;
+    }): any;
+    (e: 'animationfinish', value: number): any;
+    (e: 'update:modelValue', value: number): any;
+}
+export interface SwiperExpose {
+}
+export type CurrentChangeSource = 'click' | 'touch' | 'autoplay' | '';
+/**
+ * Symbol keys for provide/inject to support nested swiper instances.
+ * Using Symbol instead of string ensures each swiper only communicates
+ * with its immediate children, not ancestors or descendants.
+ */
+export declare const ADD_SWIPER_CONTEXT_KEY: unique symbol;
+export declare const REMOVE_SWIPER_CONTEXT_KEY: unique symbol;
+export declare const SWIPER_AUTO_HEIGHT_KEY: unique symbol;
+export interface SwiperContext {
+    rootRef: Ref<HTMLElement | null>;
+    getItemId(): string;
+    getBoundingClientRect(): DOMRect;
+    updatePosition(position: number, vertical: boolean): void;
+}
+export type AddSwiperContext = (context: SwiperContext) => void;
+export type RemoveSwiperContext = (context: SwiperContext) => void;
+export declare const swiperItemProps: {};
+export type SwiperItemProps = ExtractPublicPropTypes<typeof swiperItemProps>;
+export type SwiperItemPrivateProps = ExtractPropTypes<typeof swiperItemProps>;
+export declare const defaultSwiperItemProps: DefaultProps<SwiperItemProps>;
+export interface SwiperItemSlots {
+    default?(): any;
+}
+export interface SwiperItemEmits {
+}
+export interface SwiperItemExpose {
+}

package/components/swiper/common.js

@@ -0,0 +1,68 @@
+//#region packages/sard/components/swiper/common.ts
+const swiperProps = {
+	modelValue: {
+		type: Number,
+		default: 0
+	},
+	showIndicator: {
+		type: Boolean,
+		default: false
+	},
+	vertical: {
+		type: Boolean,
+		default: false
+	},
+	speed: {
+		type: Number,
+		default: 300
+	},
+	autoplay: {
+		type: Boolean,
+		default: false
+	},
+	delay: {
+		type: Number,
+		default: 3e3
+	},
+	loop: {
+		type: Boolean,
+		default: false
+	},
+	slidesPerView: {
+		type: Number,
+		default: 1
+	},
+	slidesPerGroup: {
+		type: Number,
+		default: 1
+	},
+	spaceBetween: {
+		type: Number,
+		default: 0
+	},
+	centeredSlides: {
+		type: Boolean,
+		default: false
+	},
+	allowTouchMove: {
+		type: Boolean,
+		default: true
+	},
+	autoHeight: {
+		type: Boolean,
+		default: false
+	}
+};
+const defaultSwiperProps = {};
+/**
+* Symbol keys for provide/inject to support nested swiper instances.
+* Using Symbol instead of string ensures each swiper only communicates
+* with its immediate children, not ancestors or descendants.
+*/
+const ADD_SWIPER_CONTEXT_KEY = Symbol("addSwiperContext");
+const REMOVE_SWIPER_CONTEXT_KEY = Symbol("removeSwiperContext");
+const SWIPER_AUTO_HEIGHT_KEY = Symbol("swiperAutoHeight");
+const swiperItemProps = {};
+const defaultSwiperItemProps = {};
+//#endregion
+export { ADD_SWIPER_CONTEXT_KEY, REMOVE_SWIPER_CONTEXT_KEY, SWIPER_AUTO_HEIGHT_KEY, defaultSwiperItemProps, defaultSwiperProps, swiperItemProps, swiperProps };

package/components/swiper/index.css

@@ -0,0 +1 @@
+:root{--s-swiper-height:150px;--s-swiper-dots-margin:10px;--s-swiper-dots-gap:6px;--s-swiper-dot-bg:hsla(0,0%,100%,.3);--s-swiper-dot-width:6px;--s-swiper-dot-width-active:6px;--s-swiper-dot-height:6px;--s-swiper-dot-height-active:6px;--s-swiper-dot-border-radius:var(--s-border-radius-full);--s-swiper-dot-bg-active:var(--s-white)}.s-swiper{position:relative;height:var(--s-swiper-height);overflow:hidden}.s-swiper:not(.is-vertical):is(.is-auto-height){height:var(--swiper-height)}.s-swiper__wrapper{position:absolute;left:0;top:0;display:flex;width:100%;height:100%;will-change:transform;--swiper-offset: var(--swiper-offset-raw, 0)}:root[dir=rtl] .s-swiper__wrapper:not(.is-vertical){--swiper-offset: calc(var(--swiper-offset-raw) * -1)}.s-swiper__wrapper:not(.is-vertical){transform:translate3d(var(--swiper-offset), 0, 0)}.s-swiper__wrapper:is(.is-vertical){flex-direction:column;transform:translate3d(0, var(--swiper-offset), 0)}.s-swiper__item{--swiper-item-offset: var(--swiper-item-offset-raw, 0);--swiper-item-size: 0;--swiper-item-margin: 0;position:relative;flex:none;width:100%;height:100%}:root[dir=rtl] .s-swiper__item:not(.is-vertical){--swiper-item-offset: calc(var(--swiper-item-offset-raw) * -1)}.s-swiper__item:not(.is-vertical){width:var(--swiper-item-size);margin-inline-end:var(--swiper-item-margin);transform:translate3d(var(--swiper-item-offset), 0, 0)}.s-swiper__item:not(.is-vertical):is(.is-auto-height){height:fit-content}.s-swiper__item:is(.is-vertical){height:var(--swiper-item-size);margin-bottom:var(--swiper-item-margin);transform:translate3d(0, var(--swiper-item-offset), 0)}.s-swiper__dots{position:absolute;display:flex;gap:var(--s-swiper-dots-gap);font-size:0;pointer-events:none}.s-swiper__dots:not(.is-vertical){left:50%;bottom:var(--s-swiper-dots-margin);transform:translate(-50%, 0)}.s-swiper__dots:is(.is-vertical){inset-inline-end:var(--s-swiper-dots-margin);top:50%;flex-direction:column;transform:translate(0, -50%)}.s-swiper__dots:is(.is-vertical) .s-swiper__dot{width:var(--s-swiper-dot-height);height:var(--s-swiper-dot-width)}.s-swiper__dots:is(.is-vertical) .s-swiper__dot:is(.is-active){width:var(--s-swiper-dot-height-active);height:var(--s-swiper-dot-width-active)}.s-swiper__dot{display:inline-block;width:var(--s-swiper-dot-width);height:var(--s-swiper-dot-height);background:var(--s-swiper-dot-bg);border-radius:var(--s-swiper-dot-border-radius);transition-property:background-color,width,height;transition-duration:var(--s-duration-fast)}.s-swiper__dot:is(.is-active){width:var(--s-swiper-dot-width-active);height:var(--s-swiper-dot-height-active);background-color:var(--s-swiper-dot-bg-active)}