@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/drag/DragRoot.vue.d.ts

@@ -0,0 +1,90 @@
+import { type ComputedRef } from 'vue';
+/** `grid` is one ordered list laid out in rows that wrap: it drags and moves on both axes. */
+export type DragOrientation = 'vertical' | 'horizontal' | 'grid';
+export interface DragChange<T = unknown> {
+    value: T;
+    from: number;
+    to: number;
+}
+export interface DragState {
+    /** Whether an item is being dragged, or has been picked up with the keyboard. */
+    sorting: boolean;
+    /** Which way the list runs. */
+    orientation: DragOrientation;
+    /** Whether the whole list is disabled. */
+    disabled: boolean;
+}
+export interface DragItemState {
+    /**
+     * Where the item is in the list.
+     * @attribute none
+     */
+    index: number;
+    /** Whether this item is being dragged, or has been picked up with the keyboard. */
+    dragging: boolean;
+    /** Whether it is disabled, or the whole list is. */
+    disabled: boolean;
+}
+export interface DragContext {
+    state: ComputedRef<DragState>;
+    getItemProps: (value: unknown, disabled?: boolean) => Record<string, unknown>;
+    getItemState: (value: unknown, disabled?: boolean) => DragItemState;
+    getHandleProps: (value: unknown, disabled?: boolean) => Record<string, unknown>;
+}
+export declare const provideDragContext: (value: DragContext) => DragContext, useDragContext: () => DragContext;
+export declare const provideDragItemContext: (value: {
+    value: () => unknown;
+    disabled: () => boolean;
+}) => {
+    value: () => unknown;
+    disabled: () => boolean;
+}, useDragItemContext: () => {
+    value: () => unknown;
+    disabled: () => boolean;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        /** The items in order, bound with `v-model`. */
+        modelValue?: T[];
+        /** The items at first, when no `v-model` owns the order. */
+        defaultValue?: T[];
+        /** Which way the list runs: arrows and dragging follow it. `grid` for rows that wrap. */
+        orientation?: DragOrientation;
+        /** Only a `DragHandle` starts a drag, so a long list still scrolls on touch. */
+        handle?: boolean;
+        /** Whether the list is disabled. */
+        disabled?: boolean;
+        /** Pixels the pointer travels before a press becomes a drag. */
+        threshold?: number;
+        /** Element or component to render. */
+        as?: string | object;
+    } & {
+        onChange?: ((change: DragChange<T>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        state: ComputedRef<DragState>;
+    }>) => void;
+    attrs: any;
+    slots: {
+        default(props: DragState & {
+            /**
+             * The items in their current order, to render the `DragItem`s from.
+             * @attribute none
+             */
+            items: T[];
+        }): unknown;
+    };
+    emit: ((evt: "change", change: DragChange<T>) => void) & ((evt: "update:modelValue", value: T[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/drag/DragRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,329 @@
+import { mergeProps as mergeProps$1 } from "../../shared/merge-props.js";
+import { Part } from "../../shared/part.js";
+import { dataAttrs } from "../../shared/data-attrs.js";
+import { useControlled } from "../../shared/use-controlled.js";
+import { createContext } from "../../shared/context.js";
+import { computed, createBlock, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeProps, onScopeDispose, openBlock, ref, renderSlot, unref, useAttrs, useId, withCtx } from "vue";
+//#region src/components/drag/DragRoot.vue?vue&type=script&setup=true&lang.ts
+var { provideContext: provideDragContext, useContext: useDragContext } = createContext("Drag");
+var { provideContext: provideDragItemContext, useContext: useDragItemContext } = createContext("DragItem");
+var INTERACTIVE = "button, a, input, select, textarea, [contenteditable=\"true\"]";
+var DragRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DragRoot",
+	inheritAttrs: false,
+	__name: "DragRoot",
+	props: {
+		modelValue: { default: void 0 },
+		defaultValue: {},
+		orientation: { default: "vertical" },
+		handle: { type: Boolean },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		threshold: { default: 4 },
+		as: { default: "div" }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const id = useId();
+		const root = ref(null);
+		const order = useControlled({
+			value: () => props.modelValue,
+			defaultValue: () => props.defaultValue ?? [],
+			onChange: (next) => emit("update:modelValue", next),
+			name: "DragRoot",
+			label: "modelValue"
+		});
+		const vertical = () => props.orientation === "vertical";
+		const grid = () => props.orientation === "grid";
+		const indexOf = (value) => order.value.indexOf(value);
+		const from = ref(null);
+		const target = ref(0);
+		const delta = ref({
+			x: 0,
+			y: 0
+		});
+		const dragging = ref(false);
+		let rects = [];
+		let shift = 0;
+		let release = null;
+		const start = (rect) => vertical() ? rect.top : rect.left;
+		const end = (rect) => vertical() ? rect.bottom : rect.right;
+		const middle = (rect) => (start(rect) + end(rect)) / 2;
+		function measure() {
+			const items = root.value?.querySelectorAll(`[data-drag-root="${id}"]`) ?? [];
+			return Array.from(items, (item) => item.getBoundingClientRect());
+		}
+		function begin() {
+			rects = measure();
+			const f = from.value;
+			const own = rects[f];
+			const neighbor = rects[f + 1] ?? rects[f - 1];
+			const gap = !neighbor ? 0 : neighbor === rects[f + 1] ? start(neighbor) - end(own) : start(own) - end(neighbor);
+			shift = end(own) - start(own) + gap;
+			dragging.value = true;
+		}
+		const centerOf = (rect) => ({
+			x: (rect.left + rect.right) / 2,
+			y: (rect.top + rect.bottom) / 2
+		});
+		function landing(offset) {
+			const f = from.value;
+			if (grid()) {
+				const own = centerOf(rects[f]);
+				const x = own.x + offset.x;
+				const y = own.y + offset.y;
+				let best = f;
+				let nearest = Infinity;
+				rects.forEach((rect, index) => {
+					const slot = centerOf(rect);
+					const distance = (slot.x - x) ** 2 + (slot.y - y) ** 2;
+					if (distance < nearest) {
+						nearest = distance;
+						best = index;
+					}
+				});
+				return best;
+			}
+			const center = middle(rects[f]) + (vertical() ? offset.y : offset.x);
+			return rects.reduce((count, rect, index) => index !== f && middle(rect) < center ? count + 1 : count, 0);
+		}
+		function transformFor(index) {
+			if (!dragging.value || from.value === null) return void 0;
+			const f = from.value;
+			const t = target.value;
+			if (index === f) {
+				const { x, y } = delta.value;
+				return grid() ? `translate3d(${x}px, ${y}px, 0)` : vertical() ? `translate3d(0, ${y}px, 0)` : `translate3d(${x}px, 0, 0)`;
+			}
+			const step = f < t && index > f && index <= t ? -1 : t < f && index >= t && index < f ? 1 : 0;
+			if (!step) return void 0;
+			if (grid()) {
+				const own = rects[index];
+				const slot = rects[index + step];
+				return `translate3d(${slot.left - own.left}px, ${slot.top - own.top}px, 0)`;
+			}
+			const offset = step * shift;
+			return vertical() ? `translate3d(0, ${offset}px, 0)` : `translate3d(${offset}px, 0, 0)`;
+		}
+		function press(event, index) {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			const element = event.currentTarget;
+			const { pointerId, clientX, clientY } = event;
+			element.setPointerCapture?.(pointerId);
+			from.value = index;
+			function onMove(move) {
+				if (move.pointerId !== pointerId) return;
+				const offset = {
+					x: move.clientX - clientX,
+					y: move.clientY - clientY
+				};
+				const travel = grid() ? Math.hypot(offset.x, offset.y) : Math.abs(vertical() ? offset.y : offset.x);
+				if (!dragging.value) {
+					if (travel < props.threshold) return;
+					begin();
+				}
+				delta.value = offset;
+				target.value = landing(offset);
+			}
+			function onUp(up) {
+				if (up.pointerId === pointerId) finish(true);
+			}
+			function onCancel(cancel) {
+				if (cancel.pointerId === pointerId) finish(false);
+			}
+			function onKey(key) {
+				if (key.key === "Escape" && dragging.value) {
+					key.preventDefault();
+					finish(false);
+				}
+			}
+			element.addEventListener("pointermove", onMove);
+			element.addEventListener("pointerup", onUp);
+			element.addEventListener("pointercancel", onCancel);
+			window.addEventListener("keydown", onKey);
+			release = () => {
+				element.releasePointerCapture?.(pointerId);
+				element.removeEventListener("pointermove", onMove);
+				element.removeEventListener("pointerup", onUp);
+				element.removeEventListener("pointercancel", onCancel);
+				window.removeEventListener("keydown", onKey);
+				release = null;
+			};
+		}
+		function finish(commit) {
+			release?.();
+			const moved = dragging.value;
+			if (moved && commit && from.value !== null && target.value !== from.value) reorder(from.value, target.value);
+			if (moved) swallowClick();
+			from.value = null;
+			dragging.value = false;
+			delta.value = {
+				x: 0,
+				y: 0
+			};
+		}
+		function swallowClick() {
+			const stop = (event) => {
+				event.stopPropagation();
+				event.preventDefault();
+			};
+			window.addEventListener("click", stop, {
+				capture: true,
+				once: true
+			});
+			setTimeout(() => window.removeEventListener("click", stop, { capture: true }), 0);
+		}
+		onScopeDispose(() => release?.());
+		function reorder(f, t) {
+			const next = [...order.value];
+			const [value] = next.splice(f, 1);
+			next.splice(t, 0, value);
+			order.value = next;
+			emit("change", {
+				value,
+				from: f,
+				to: t
+			});
+		}
+		const grabbed = ref(null);
+		let original = [];
+		let moving = false;
+		function ownsKey(event) {
+			const target = event.target;
+			return target === event.currentTarget || !!target.closest("[data-part=\"drag-handle\"]");
+		}
+		function onKeydown(event, index) {
+			if (!ownsKey(event)) return;
+			const lift = event.key === " " || event.key === "Enter";
+			if (grabbed.value === null) {
+				if (lift) {
+					event.preventDefault();
+					grabbed.value = index;
+					original = [...order.value];
+				}
+				return;
+			}
+			if (grabbed.value !== index) return;
+			const to = keyTarget(event.key, index);
+			if (to !== void 0) {
+				event.preventDefault();
+				if (to === index) return;
+				const focused = document.activeElement;
+				moving = true;
+				reorder(index, to);
+				grabbed.value = to;
+				nextTick(() => {
+					if (focused && document.activeElement !== focused) focused.focus();
+					moving = false;
+				});
+			} else if (lift) {
+				event.preventDefault();
+				grabbed.value = null;
+			} else if (event.key === "Escape") {
+				event.preventDefault();
+				order.value = original;
+				grabbed.value = null;
+			}
+		}
+		/** Where an arrow moves the picked-up item, or `undefined` for a key that isn't one. */
+		function keyTarget(key, index) {
+			const last = order.value.length - 1;
+			const clamp = (to) => Math.min(Math.max(to, 0), last);
+			if (!grid()) {
+				const back = vertical() ? "ArrowUp" : "ArrowLeft";
+				const forward = vertical() ? "ArrowDown" : "ArrowRight";
+				return key === back ? clamp(index - 1) : key === forward ? clamp(index + 1) : void 0;
+			}
+			if (key === "ArrowLeft") return clamp(index - 1);
+			if (key === "ArrowRight") return clamp(index + 1);
+			if (key !== "ArrowUp" && key !== "ArrowDown") return void 0;
+			const slots = measure();
+			const top = slots[0]?.top ?? 0;
+			const columns = Math.max(1, slots.filter((rect) => Math.abs(rect.top - top) < 1).length);
+			if (key === "ArrowUp") return index - columns >= 0 ? index - columns : index;
+			return Math.floor(index / columns) < Math.floor(last / columns) ? Math.min(index + columns, last) : index;
+		}
+		function onFocusout(index) {
+			if (grabbed.value === index && !moving) grabbed.value = null;
+		}
+		const state = computed(() => ({
+			sorting: dragging.value || grabbed.value !== null,
+			orientation: props.orientation,
+			disabled: props.disabled
+		}));
+		function getItemState(value, disabled = false) {
+			const index = indexOf(value);
+			return {
+				index,
+				dragging: dragging.value && from.value === index || grabbed.value === index,
+				disabled: props.disabled || disabled
+			};
+		}
+		function getItemProps(value, disabled = false) {
+			const item = getItemState(value, disabled);
+			const byItem = !props.handle && !item.disabled;
+			return {
+				"data-part": "drag-item",
+				"data-drag-root": id,
+				...dataAttrs(item, { index: () => null }),
+				role: "listitem",
+				tabindex: byItem ? 0 : void 0,
+				style: {
+					transform: transformFor(item.index),
+					...byItem ? { touchAction: "none" } : null
+				},
+				onPointerdown: byItem ? (event) => {
+					const target = event.target;
+					if (target !== event.currentTarget && target.closest(INTERACTIVE)) return;
+					press(event, item.index);
+				} : void 0,
+				onKeydown: item.disabled ? void 0 : (event) => onKeydown(event, item.index),
+				onFocusout: () => onFocusout(item.index)
+			};
+		}
+		function getHandleProps(value, disabled = false) {
+			const item = getItemState(value, disabled);
+			return {
+				"data-part": "drag-handle",
+				...dataAttrs(item, { index: () => null }),
+				type: "button",
+				"aria-label": "Reorder",
+				tabindex: props.handle && !item.disabled ? 0 : -1,
+				style: { touchAction: "none" },
+				onPointerdown: item.disabled ? void 0 : (event) => press(event, item.index)
+			};
+		}
+		provideDragContext({
+			state,
+			getItemProps,
+			getItemState,
+			getHandleProps
+		});
+		const attrs = useAttrs();
+		const merged = computed(() => mergeProps$1({
+			"data-part": "drag",
+			...dataAttrs(state.value),
+			role: "list",
+			ref: (element) => {
+				root.value = element ?? null;
+			}
+		}, attrs));
+		__expose({ state });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, merged.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+					...state.value,
+					items: unref(order)
+				})))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { DragRoot_vue_vue_type_script_setup_true_lang_default as default, provideDragContext, provideDragItemContext, useDragContext, useDragItemContext };

package/dist/components/drawer/DrawerHandle.js

@@ -0,0 +1,5 @@
+import DrawerHandle_vue_vue_type_script_setup_true_lang_default from "./DrawerHandle.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/drawer/DrawerHandle.vue
+var DrawerHandle_default = DrawerHandle_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DrawerHandle_default as default };

package/dist/components/drawer/DrawerHandle.vue.d.ts

@@ -0,0 +1,23 @@
+import { type DrawerState } from './use-drawer';
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    /**
+     * The drawer's state.
+     * @slotOnly The element carries only `data-part="handle"`, and the drag handlers with `touch-action: none`.
+     */
+    default(props: DrawerState): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, 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/dist/components/drawer/DrawerHandle.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useDrawerContext } from "./use-drawer.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/drawer/DrawerHandle.vue?vue&type=script&setup=true&lang.ts
+var DrawerHandle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DrawerHandle",
+	inheritAttrs: false,
+	__name: "DrawerHandle",
+	props: { as: { default: "div" } },
+	setup(__props) {
+		const props = __props;
+		const { handleProps, state } = useDrawerContext();
+		const merged = usePartProps(handleProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(state))))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { DrawerHandle_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/drawer/DrawerRoot.js

@@ -0,0 +1,5 @@
+import DrawerRoot_vue_vue_type_script_setup_true_lang_default from "./DrawerRoot.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/drawer/DrawerRoot.vue
+var DrawerRoot_default = DrawerRoot_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DrawerRoot_default as default };

package/dist/components/drawer/DrawerRoot.vue.d.ts

@@ -0,0 +1,55 @@
+import { type DrawerSide, type DrawerState } from './use-drawer';
+type __VLS_Props = {
+    /** Whether it is open, bound with `v-model:open`. */
+    open?: boolean;
+    /** Opens at first, when no `v-model:open` owns it. @default false */
+    defaultOpen?: boolean;
+    /** Trap focus, lock scrolling and hide the page behind from assistive tech. @default true */
+    modal?: boolean;
+    /** Closes on Escape. @default true */
+    escapeKey?: boolean;
+    /** Closes on a press outside the drawer, such as on the backdrop. */
+    outsidePress?: boolean;
+    /** Which edge the drawer enters from. @default 'bottom' */
+    side?: DrawerSide;
+    /** How it can be swiped away: `'handle'` by its handle, `true` from anywhere on it too (taps inside still land, text fields never drag), `false` not at all. */
+    swipeable?: boolean | 'handle';
+    /** Fraction of the drawer's size past which a release dismisses it. @default 0.4 */
+    dismissThreshold?: number;
+    /** Speed, in px/ms, past which a flick dismisses regardless of distance. @default 0.4 */
+    velocityThreshold?: number;
+};
+type __VLS_Slots = {
+    /**
+     * The drawer's state.
+     * @slotOnly The root renders no element of its own: the trigger, the backdrop, the popup and the handle carry these as attributes.
+     */
+    default(props: DrawerState): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, import("./use-drawer").UseDrawerReturn, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (open: boolean) => any;
+    "update:open": (open: boolean) => any;
+    closed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((open: boolean) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    onClosed?: (() => any) | undefined;
+}>, {
+    side: DrawerSide;
+    open: boolean;
+    defaultOpen: boolean;
+    modal: boolean;
+    escapeKey: boolean;
+    outsidePress: boolean;
+    swipeable: boolean | "handle";
+    dismissThreshold: number;
+    velocityThreshold: 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/dist/components/drawer/DrawerRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,72 @@
+import { provideDialogContext } from "../../shared/use-dialog.js";
+import { provideDrawerContext, useDrawer } from "./use-drawer.js";
+import { defineComponent, guardReactiveProps, normalizeProps, renderSlot, toRef, unref, watch } from "vue";
+//#region src/components/drawer/DrawerRoot.vue?vue&type=script&setup=true&lang.ts
+var DrawerRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DrawerRoot",
+	__name: "DrawerRoot",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		modal: {
+			type: Boolean,
+			default: void 0
+		},
+		escapeKey: {
+			type: Boolean,
+			default: void 0
+		},
+		outsidePress: {
+			type: Boolean,
+			default: true
+		},
+		side: { default: void 0 },
+		swipeable: {
+			type: [Boolean, String],
+			default: "handle"
+		},
+		dismissThreshold: { default: void 0 },
+		velocityThreshold: { default: void 0 }
+	},
+	emits: [
+		"update:open",
+		"change",
+		"closed"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const api = useDrawer({
+			open: toRef(() => props.open),
+			defaultOpen: toRef(() => props.defaultOpen),
+			modal: toRef(() => props.modal),
+			escapeKey: toRef(() => props.escapeKey),
+			outsidePress: toRef(() => props.outsidePress),
+			side: toRef(() => props.side),
+			swipeable: toRef(() => props.swipeable),
+			dismissThreshold: toRef(() => props.dismissThreshold),
+			velocityThreshold: toRef(() => props.velocityThreshold),
+			onChange: (open) => {
+				emit("update:open", open);
+				emit("change", open);
+			}
+		});
+		provideDrawerContext(api);
+		provideDialogContext(api);
+		watch(api.present, (present) => {
+			if (!present) emit("closed");
+		});
+		__expose(api);
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(api).state.value)));
+		};
+	}
+});
+//#endregion
+export { DrawerRoot_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/drawer/use-drawer.d.ts

@@ -0,0 +1,50 @@
+import { type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue';
+import { type DialogState, type UseDialogOptions, type UseDialogReturn } from '../../shared/use-dialog';
+export type DrawerSide = 'top' | 'right' | 'bottom' | 'left';
+export interface DrawerState extends DialogState {
+    /**
+     * The edge it enters from.
+     * @attribute `data-side="…"`
+     */
+    side: DrawerSide;
+    /** Whether the drawer is being dragged. */
+    dragging: boolean;
+}
+export interface UseDrawerOptions extends UseDialogOptions {
+    /** Which edge the drawer enters from. */
+    side?: MaybeRefOrGetter<DrawerSide | undefined>;
+    /**
+     * How the drawer can be swiped away: `'handle'` by its handle, `true` from
+     * anywhere on it as well, `false` not at all. From anywhere, a press only
+     * becomes a drag once it moves, so taps on buttons inside still land, and
+     * presses in text fields never drag; content can't scroll along the axis.
+     *
+     * @default 'handle'
+     */
+    swipeable?: MaybeRefOrGetter<boolean | 'handle' | undefined>;
+    /**
+     * Fraction of the drawer's own size that must be traveled before releasing
+     * dismisses it.
+     *
+     * @default 0.4
+     */
+    dismissThreshold?: MaybeRefOrGetter<number | undefined>;
+    /**
+     * Speed, in pixels per millisecond, past which a flick dismisses without
+     * having to reach `dismissThreshold`. A small minimum travel still applies, so
+     * a fast twitch cannot dismiss by itself.
+     *
+     * @default 0.4
+     */
+    velocityThreshold?: MaybeRefOrGetter<number | undefined>;
+}
+export interface UseDrawerReturn extends Omit<UseDialogReturn, 'state'> {
+    state: ComputedRef<DrawerState>;
+    /** Bind to the grab area. Binding it to the popup makes the whole surface draggable. */
+    handleProps: ComputedRef<Record<string, unknown>>;
+    /** How far the drawer has been dragged from rest, in pixels. */
+    offset: Ref<number>;
+    dragging: Ref<boolean>;
+}
+export declare function useDrawer(options?: UseDrawerOptions): UseDrawerReturn;
+export declare const provideDrawerContext: (value: UseDrawerReturn) => UseDrawerReturn, useDrawerContext: () => UseDrawerReturn;