sard 1.0.0 → 1.0.2

package/components/fab/fab-item.js

@@ -0,0 +1,62 @@
+import { createBem } from "../../utils/bem.js";
+import { isVisibleEmpty } from "../../utils/utils.js";
+import { defaultFabItemProps, fabContextKey } from "./common.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref } from "vue";
+//#region packages/sard/components/fab/fab-item.vue
+var fab_item_default = /*@__PURE__*/ defineComponent({
+	__name: "fab-item",
+	props: /*@__PURE__*/ mergeDefaults({
+		name: {
+			type: String,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		isEntry: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultFabItemProps),
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("fab-item");
+		const context = inject(fabContextKey);
+		const onClick = (event) => {
+			if (!props.isEntry) context.onItemClick();
+			emit("click", event);
+		};
+		__expose({});
+		const fabItemClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("left", context.isLeft),
+				bem.m("entry", props.isEntry)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(fabItemClass.value),
+				onClick
+			}, [!unref(isVisibleEmpty)(__props.name) && !unref(context).hideName ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("name"))
+			}, [renderSlot(_ctx.$slots, "name", {}, () => [createTextVNode(toDisplayString(__props.name), 1)])], 2)) : createCommentVNode("v-if", true), createElementVNode("div", {
+				class: normalizeClass(unref(bem).e("btn")),
+				style: normalizeStyle({
+					background: __props.background,
+					color: __props.color
+				})
+			}, [renderSlot(_ctx.$slots, "default")], 6)], 2);
+		};
+	}
+});
+//#endregion
+export { fab_item_default as default };

package/components/fab/fab.d.ts

@@ -0,0 +1,44 @@
+import { type FabProps, type FabSlots } from './common';
+type __VLS_Slots = FabSlots;
+declare const __VLS_base: import("vue").DefineComponent<FabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+    "update:visible": (visible: boolean) => any;
+    "update:offset": (offset: {
+        x: number;
+        y: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<FabProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:offset"?: ((offset: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}>, {
+    top: string;
+    left: string;
+    offset: {
+        x: number;
+        y: number;
+    };
+    right: string;
+    bottom: string;
+    background: string;
+    visible: boolean;
+    overlayClosable: boolean;
+    color: string;
+    hideName: boolean;
+    draggable: boolean;
+    axis: "x" | "y" | "both" | "none";
+    magnet: "x" | "y";
+    marginX: number;
+    marginY: number;
+}, {}, {}, {}, 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/fab/fab.js

@@ -0,0 +1,186 @@
+import { createBem } from "../../utils/bem.js";
+import { isNullish } from "../../utils/is.js";
+import { useZIndex } from "../../use/useZIndex.js";
+import motion_default from "../motion/motion.js";
+import overlay_default from "../overlay/overlay.js";
+import { defaultFabProps, fabContextKey } from "./common.js";
+import { useFloatingBubble } from "../floating-bubble/useFloatingBubble.js";
+import fab_item_default from "./fab-item.js";
+import { Fragment, Teleport, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, reactive, renderSlot, toRef, unref, useAttrs, useModel, vShow, withCtx, withDirectives, withModifiers } from "vue";
+import { Close, Plus } from "@sard/icons";
+//#region packages/sard/components/fab/fab.vue
+var fab_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "fab",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		top: {
+			type: String,
+			required: false
+		},
+		right: {
+			type: String,
+			required: false
+		},
+		bottom: {
+			type: String,
+			required: false
+		},
+		left: {
+			type: String,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		hideName: {
+			type: Boolean,
+			required: false
+		},
+		overlayClosable: {
+			type: Boolean,
+			required: false
+		},
+		draggable: {
+			type: Boolean,
+			required: false
+		},
+		axis: {
+			type: String,
+			required: false
+		},
+		magnet: {
+			type: String,
+			required: false
+		},
+		marginX: {
+			type: Number,
+			required: false
+		},
+		marginY: {
+			type: Number,
+			required: false
+		},
+		offset: {
+			type: Object,
+			required: false
+		}
+	}, defaultFabProps),
+	emits: [
+		"click",
+		"update:visible",
+		"update:offset"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const emit = __emit;
+		const bem = createBem("fab");
+		const innerVisible = useModel(props, "visible");
+		const [zIndex, increaseZIndex] = useZIndex();
+		const onBeforeEnter = () => {
+			increaseZIndex();
+		};
+		const onItemEntryClick = (event) => {
+			if (stopBubbling.value) return;
+			innerVisible.value = !innerVisible.value;
+			emit("click", event);
+		};
+		const onItemClick = () => {
+			innerVisible.value = false;
+		};
+		const onOverlayClick = () => {
+			if (props.overlayClosable) innerVisible.value = false;
+		};
+		const { onTouchStart, onTouchMove, onTouchEnd, onPointerDown, position, initialized, animated, stopBubbling, windowWidth, windowHeight } = useFloatingBubble(props, emit, { disabled: innerVisible });
+		const isTop = computed(() => {
+			return props.draggable ? position.value.y > windowHeight / 2 ? false : true : !isNullish(props.top);
+		});
+		const isLeft = computed(() => {
+			return props.draggable ? position.value.x > windowWidth / 2 ? false : true : !isNullish(props.left);
+		});
+		provide(fabContextKey, reactive({
+			hideName: toRef(() => props.hideName),
+			isLeft,
+			visible: innerVisible,
+			onItemClick
+		}));
+		const fabClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(isTop.value ? "top" : "bottom"),
+				bem.m(isLeft.value ? "left" : "right"),
+				bem.m("animated", animated.value),
+				bem.m("initialized", initialized.value),
+				bem.m("draggable", props.draggable)
+			];
+		});
+		const fabStyle = computed(() => {
+			return {
+				zIndex: innerVisible.value ? zIndex.value : "",
+				...props.draggable ? {
+					top: 0,
+					transform: `translate3d(${position.value.x}px, ${position.value.y}px, 0)`
+				} : {
+					top: props.top,
+					left: props.left,
+					right: isLeft.value ? "auto" : props.right,
+					bottom: isTop.value ? "auto" : props.bottom
+				}
+			};
+		});
+		const contentClass = computed(() => {
+			return bem.e("content");
+		});
+		const contentStyle = computed(() => {
+			return { transformOrigin: `${isTop.value ? "top" : "bottom"} ${isLeft.value ? "left" : "right"}` };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(overlay_default, {
+				visible: unref(innerVisible),
+				"z-index": unref(zIndex),
+				class: normalizeClass([unref(bem).e("overlay"), unref(bem).is("fab")]),
+				onClick: onOverlayClick
+			}, null, 8, [
+				"visible",
+				"z-index",
+				"class"
+			]), (openBlock(), createBlock(Teleport, { to: "body" }, [createElementVNode("div", mergeProps({ ref: "bubble" }, unref(attrs), {
+				class: fabClass.value,
+				style: fabStyle.value,
+				onTouchstart: _cache[0] || (_cache[0] = (...args) => unref(onTouchStart) && unref(onTouchStart)(...args)),
+				onTouchmove: _cache[1] || (_cache[1] = withModifiers((...args) => unref(onTouchMove) && unref(onTouchMove)(...args), ["stop", "prevent"])),
+				onTouchend: _cache[2] || (_cache[2] = (...args) => unref(onTouchEnd) && unref(onTouchEnd)(...args)),
+				onTouchcancel: _cache[3] || (_cache[3] = (...args) => unref(onTouchEnd) && unref(onTouchEnd)(...args)),
+				onPointerdown: _cache[4] || (_cache[4] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args))
+			}), [createVNode(fab_item_default, {
+				"is-entry": "",
+				color: __props.color,
+				background: __props.background,
+				onClick: onItemEntryClick
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "entry", { visible: unref(innerVisible) }, () => [unref(innerVisible) ? (openBlock(), createBlock(unref(Close), { key: 0 })) : (openBlock(), createBlock(unref(Plus), { key: 1 }))])]),
+				_: 3
+			}, 8, ["color", "background"]), createVNode(motion_default, {
+				name: "wide-zoom",
+				onBeforeEnter
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", {
+					class: normalizeClass(contentClass.value),
+					style: normalizeStyle(contentStyle.value)
+				}, [renderSlot(_ctx.$slots, "default")], 6), [[vShow, unref(innerVisible)]])]),
+				_: 3
+			})], 16)]))], 64);
+		};
+	}
+});
+//#endregion
+export { fab_default as default };

package/components/fab/index.css

@@ -0,0 +1 @@
+:root{--s-fab-z-index:var(--s-z-index-secondary);--s-fab-right:var(--s-size-xl);--s-fab-bottom:var(--s-size-4xl);--s-fab-mask:var(--s-overlay-illegible);--s-fab-item-gap:var(--s-size);--s-fab-item-opacity-active:var(--s-opacity-active);--s-fab-item-btn-size:var(--s-size-4xl);--s-fab-item-btn-font-size:var(--s-size-xl);--s-fab-item-btn-color:var(--s-white);--s-fab-item-btn-bg:var(--s-color-primary);--s-fab-item-btn-box-shadow:var(--s-box-shadow-secondary);--s-fab-item-name-gap:var(--s-size-xs);--s-fab-item-name-font-size:var(--s-font-size);--s-fab-item-name-color:var(--s-white)}.s-fab{position:fixed;right:var(--s-fab-right);bottom:var(--s-fab-bottom);z-index:var(--s-fab-z-index);opacity:0;touch-action:none;direction:ltr;-webkit-user-select:none;user-select:none}.s-fab__overlay:is(.is-fab){background:var(--s-fab-mask)}.s-fab__content{display:flex;flex-direction:column;position:absolute}.s-fab--draggable{top:0;left:0;right:auto;bottom:auto}.s-fab--top .s-fab__content{top:calc(100% + var(--s-fab-item-gap))}.s-fab--bottom .s-fab__content{bottom:calc(100% + var(--s-fab-item-gap))}.s-fab--left .s-fab__content{left:0;align-items:flex-start}.s-fab--right .s-fab__content{right:0;align-items:flex-end}.s-fab--initialized{opacity:1}.s-fab--animated{transition:transform var(--s-duration)}.s-fab-item{display:flex;flex-direction:row;align-items:center;gap:var(--s-fab-item-name-gap);cursor:pointer}.s-fab-item:active{opacity:var(--s-fab-item-opacity-active)}.s-fab-item--left{flex-direction:row-reverse}.s-fab-item:not(:first-child){margin-top:var(--s-fab-item-gap)}.s-fab-item__name{font-size:var(--s-fab-item-name-font-size);color:var(--s-fab-item-name-color);white-space:nowrap}.s-fab-item__btn{flex:none;display:flex;justify-content:center;align-items:center;width:var(--s-fab-item-btn-size);height:var(--s-fab-item-btn-size);border-radius:var(--s-border-radius-full);font-size:var(--s-fab-item-btn-font-size);color:var(--s-fab-item-btn-color);background:var(--s-fab-item-btn-bg);box-shadow:var(--s-fab-item-btn-box-shadow)}

package/components/fab/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _Fab from './fab.vue';
+import _FabItem from './fab-item.vue';
+export declare const Fab: EnhancedComponent<typeof _Fab>;
+export declare const FabItem: EnhancedComponent<typeof _FabItem>;
+export default Fab;
+export type { FabProps, FabSlots, FabEmits, FabItemProps, FabItemSlots, FabItemEmits, FabItemExpose, } from './common';

package/components/fab/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import fab_item_default from "./fab-item.js";
+import fab_default from "./fab.js";
+//#region packages/sard/components/fab/index.ts
+const Fab = enhanceComponent(fab_default);
+const FabItem = enhanceComponent(fab_item_default);
+//#endregion
+export { Fab, Fab as default, FabItem };

package/components/floating-bubble/common.d.ts

@@ -0,0 +1,23 @@
+import { type DefaultProps } from '../config';
+export interface FloatingBubbleProps {
+    draggable?: boolean;
+    axis?: 'x' | 'y' | 'both' | 'none';
+    magnet?: 'x' | 'y';
+    marginX?: number;
+    marginY?: number;
+    offset?: {
+        x: number;
+        y: number;
+    };
+}
+export declare const defaultFloatingBubbleProps: DefaultProps<FloatingBubbleProps>;
+export interface FloatingBubbleSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface FloatingBubbleEmits {
+    (e: 'click', event: MouseEvent): void;
+    (e: 'update:offset', offset: {
+        x: number;
+        y: number;
+    }): void;
+}

package/components/floating-bubble/common.js

@@ -0,0 +1,9 @@
+//#region packages/sard/components/floating-bubble/common.ts
+const defaultFloatingBubbleProps = {
+	draggable: true,
+	axis: "y",
+	marginX: 24,
+	marginY: 24
+};
+//#endregion
+export { defaultFloatingBubbleProps };

package/components/floating-bubble/floating-bubble.d.ts

@@ -0,0 +1,33 @@
+import { type FloatingBubbleProps, type FloatingBubbleSlots } from './common';
+type __VLS_Slots = FloatingBubbleSlots;
+declare const __VLS_base: import("vue").DefineComponent<FloatingBubbleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+    "update:offset": (offset: {
+        x: number;
+        y: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<FloatingBubbleProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:offset"?: ((offset: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}>, {
+    offset: {
+        x: number;
+        y: number;
+    };
+    draggable: boolean;
+    axis: "x" | "y" | "both" | "none";
+    magnet: "x" | "y";
+    marginX: number;
+    marginY: number;
+}, {}, {}, {}, 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/floating-bubble/floating-bubble.js

@@ -0,0 +1,73 @@
+import { createBem } from "../../utils/bem.js";
+import { useFloatingBubble } from "./useFloatingBubble.js";
+import { defaultFloatingBubbleProps } from "./common.js";
+import { computed, createElementBlock, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, unref, withModifiers } from "vue";
+//#region packages/sard/components/floating-bubble/floating-bubble.vue
+var floating_bubble_default = /*@__PURE__*/ defineComponent({
+	__name: "floating-bubble",
+	props: /*@__PURE__*/ mergeDefaults({
+		draggable: {
+			type: Boolean,
+			required: false
+		},
+		axis: {
+			type: String,
+			required: false
+		},
+		magnet: {
+			type: String,
+			required: false
+		},
+		marginX: {
+			type: Number,
+			required: false
+		},
+		marginY: {
+			type: Number,
+			required: false
+		},
+		offset: {
+			type: Object,
+			required: false
+		}
+	}, defaultFloatingBubbleProps),
+	emits: ["click", "update:offset"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("floating-bubble");
+		const { onTouchStart, onTouchMove, onTouchEnd, onPointerDown, position, initialized, animated } = useFloatingBubble(props, emit);
+		const onClick = (event) => {
+			emit("click", event);
+		};
+		const floatingBubbleClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("animated", animated.value),
+				bem.m("initialized", initialized.value)
+			];
+		});
+		const floatingBubbleStyle = computed(() => {
+			const { x, y } = position.value;
+			return {
+				top: 0,
+				transform: `translate3d(${x}px, ${y}px, 0)`
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "bubble",
+				class: normalizeClass(floatingBubbleClass.value),
+				style: normalizeStyle(floatingBubbleStyle.value),
+				onTouchstart: _cache[0] || (_cache[0] = (...args) => unref(onTouchStart) && unref(onTouchStart)(...args)),
+				onTouchmove: _cache[1] || (_cache[1] = withModifiers((...args) => unref(onTouchMove) && unref(onTouchMove)(...args), ["stop", "prevent"])),
+				onTouchend: _cache[2] || (_cache[2] = (...args) => unref(onTouchEnd) && unref(onTouchEnd)(...args)),
+				onTouchcancel: _cache[3] || (_cache[3] = (...args) => unref(onTouchEnd) && unref(onTouchEnd)(...args)),
+				onPointerdown: _cache[4] || (_cache[4] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args)),
+				onClick
+			}, [renderSlot(_ctx.$slots, "default")], 38);
+		};
+	}
+});
+//#endregion
+export { floating_bubble_default as default };

package/components/floating-bubble/index.css

@@ -0,0 +1 @@
+:root{--s-floating-bubble-z-index:var(--s-z-index-secondary);--s-floating-bubble-size:var(--s-size-4xl);--s-floating-bubble-color:var(--s-white);--s-floating-bubble-bg:var(--s-color-primary);--s-floating-bubble-opacity-active:var(--s-opacity-active);--s-floating-bubble-duration:var(--s-duration);--s-floating-bubble-box-shadow:var(--s-box-shadow-secondary)}.s-floating-bubble{position:fixed;top:0;left:0;z-index:var(--s-floating-bubble-z-index);display:flex;justify-content:center;align-items:center;width:var(--s-floating-bubble-size);height:var(--s-floating-bubble-size);border-radius:var(--s-border-radius-full);color:var(--s-floating-bubble-color);background:var(--s-floating-bubble-bg);box-shadow:var(--s-floating-bubble-box-shadow);opacity:0;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.s-floating-bubble:active{opacity:var(--s-floating-bubble-opacity-active);transition:none}.s-floating-bubble--initialized{opacity:1}.s-floating-bubble--animated{transition:transform var(--s-floating-bubble-duration)}

package/components/floating-bubble/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _FloatingBubble from './floating-bubble.vue';
+export declare const FloatingBubble: EnhancedComponent<typeof _FloatingBubble>;
+export default FloatingBubble;
+export type { FloatingBubbleProps, FloatingBubbleSlots, FloatingBubbleEmits } from './common';

package/components/floating-bubble/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import floating_bubble_default from "./floating-bubble.js";
+//#region packages/sard/components/floating-bubble/index.ts
+const FloatingBubble = enhanceComponent(floating_bubble_default);
+//#endregion
+export { FloatingBubble, FloatingBubble as default };

package/components/floating-bubble/useFloatingBubble.d.ts

@@ -0,0 +1,42 @@
+import { type MaybeRef } from 'vue';
+export interface UseFloatingBubbleProps {
+    draggable?: boolean;
+    marginX: number;
+    marginY: number;
+    axis: 'x' | 'y' | 'none' | 'both';
+    magnet?: 'x' | 'y';
+    offset?: {
+        x: number;
+        y: number;
+    };
+}
+export interface UseFloatingBubbleEmits {
+    (e: 'update:offset', offset: {
+        x: number;
+        y: number;
+    }): void;
+}
+export interface UseFloatingBubbleOptions {
+    disabled?: MaybeRef<boolean>;
+}
+export declare function useFloatingBubble(props: UseFloatingBubbleProps, emit: UseFloatingBubbleEmits, options?: UseFloatingBubbleOptions): {
+    onTouchStart: (event: TouchEvent) => Promise<void>;
+    onTouchMove: (event: TouchEvent) => void;
+    onTouchEnd: () => void;
+    onPointerDown: (event: PointerEvent) => void;
+    position: import("vue").Ref<{
+        x: number;
+        y: number;
+    }, {
+        x: number;
+        y: number;
+    } | {
+        x: number;
+        y: number;
+    }>;
+    initialized: import("vue").Ref<boolean, boolean>;
+    animated: import("vue").Ref<boolean, boolean>;
+    stopBubbling: import("vue").Ref<boolean, boolean>;
+    windowWidth: number;
+    windowHeight: number;
+};

package/components/floating-bubble/useFloatingBubble.js

@@ -0,0 +1,123 @@
+import { clamp } from "../../utils/number.js";
+import { useTimeout } from "../../use/useTimeout.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { windowInfo } from "../config/windowInfo.js";
+import { computed, onMounted, ref, unref, useTemplateRef, watch } from "vue";
+//#region packages/sard/components/floating-bubble/useFloatingBubble.ts
+function useFloatingBubble(props, emit, options = {}) {
+	const disabled = computed(() => !props.draggable || unref(options.disabled));
+	const bubbleRef = useTemplateRef("bubble");
+	const initialized = ref(false);
+	let bubbleRect;
+	const windowWidth = window.innerWidth;
+	const windowHeight = window.innerHeight;
+	let downCoord = {
+		x: 0,
+		y: 0
+	};
+	const position = ref({
+		x: 0,
+		y: 0
+	});
+	const animated = ref(false);
+	const stopBubbling = ref(false);
+	const animatedTimer = useTimeout();
+	function getMinX() {
+		return props.marginX;
+	}
+	function getMaxX() {
+		return windowWidth - props.marginX - bubbleRect.width;
+	}
+	function getMinY() {
+		return props.marginY + (windowInfo.navBarHeight + windowInfo.statusBarHeight);
+	}
+	function getMaxY() {
+		return windowHeight - windowInfo.tabBarHeight - props.marginY - bubbleRect.height;
+	}
+	const onTouchStart = async (event) => {
+		stopBubbling.value = false;
+		if (disabled.value) return;
+		animatedTimer.clear();
+		animated.value = false;
+		downCoord = {
+			x: event.touches[0].clientX,
+			y: event.touches[0].clientY
+		};
+		bubbleRect = bubbleRef.value.getBoundingClientRect();
+	};
+	const onTouchMove = (event) => {
+		if (disabled.value) return;
+		if (!bubbleRect) return;
+		let x = 0;
+		let y = 0;
+		if (props.axis === "none") {
+			x = getMaxX();
+			y = getMaxY();
+		} else {
+			const deltaX = event.touches[0].clientX - downCoord.x;
+			const deltaY = event.touches[0].clientY - downCoord.y;
+			const deviation = 10;
+			if (Math.abs(deltaX) > deviation || Math.abs(deltaY) > deviation) stopBubbling.value = true;
+			x = bubbleRect.left + deltaX;
+			y = bubbleRect.top + deltaY;
+			x = clamp(x, getMinX(), getMaxX());
+			y = clamp(y, getMinY(), getMaxY());
+			if (props.axis === "y") x = getMaxX();
+			else if (props.axis === "x") y = getMaxY();
+		}
+		const offset = {
+			x,
+			y
+		};
+		position.value = offset;
+		emit("update:offset", offset);
+	};
+	const onTouchEnd = () => {
+		if (disabled.value) return;
+		if (bubbleRect) {
+			if (props.magnet) {
+				let { x, y } = position.value;
+				if (props.magnet === "x") x = x < (windowWidth - bubbleRect.width) / 2 ? getMinX() : getMaxX();
+				else if (props.magnet === "y") y = y < (windowHeight - bubbleRect.height) / 2 ? getMinY() : getMaxY();
+				const offset = {
+					x,
+					y
+				};
+				position.value = offset;
+				emit("update:offset", offset);
+			}
+		}
+		animated.value = true;
+		animatedTimer.set(() => {
+			animated.value = false;
+		}, 500);
+		bubbleRect = void 0;
+	};
+	const onPointerDown = usePointerDown(onTouchStart, onTouchMove, onTouchEnd);
+	onMounted(async () => {
+		bubbleRect = bubbleRef.value.getBoundingClientRect();
+		position.value = props.offset ?? {
+			x: getMaxX(),
+			y: getMaxY()
+		};
+		bubbleRect = void 0;
+		initialized.value = true;
+	});
+	watch(() => props.offset, () => {
+		if (props.offset) position.value = props.offset;
+	});
+	return {
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd,
+		onPointerDown,
+		position,
+		initialized,
+		animated,
+		stopBubbling,
+		windowWidth,
+		windowHeight
+	};
+}
+//#endregion
+export { useFloatingBubble };

package/components/floating-panel/common.d.ts

@@ -0,0 +1,18 @@
+import { type DefaultProps } from '../config';
+export interface FloatingPanelProps {
+    height?: number;
+    anchors?: number[];
+    duration?: number;
+    contentDraggable?: boolean;
+    safeAreaInsetBottom?: boolean;
+}
+export declare const defaultFloatingPanelProps: DefaultProps<FloatingPanelProps>;
+export interface FloatingPanelSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface FloatingPanelEmits {
+    (e: 'update:height', value: number): void;
+    (e: 'height-change', value: number): void;
+}
+export interface FloatingPanelExpose {
+}

package/components/floating-panel/common.js

@@ -0,0 +1,9 @@
+//#region packages/sard/components/floating-panel/common.ts
+const defaultFloatingPanelProps = {
+	height: 0,
+	duration: 300,
+	contentDraggable: true,
+	safeAreaInsetBottom: true
+};
+//#endregion
+export { defaultFloatingPanelProps };