@surdeddd/bottom-sheet 0.2.0 → 0.4.0

package/dist/vue.d.cts

@@ -0,0 +1,127 @@
+import type { DefineComponent } from "vue";
+import type {
+  AnchorOptions,
+  BottomSheetEngine,
+  CloseReason,
+  EngineOptions,
+  EngineState,
+  SheetEventMap,
+  SheetMode,
+  SnapPoint,
+  SnapPointDef,
+  ScrimStagesOptions,
+  ScrimUpdate,
+  ScrimOverlayOptions,
+} from "./index.cjs";
+
+export type UseBottomSheetVueOptions<TId extends string = string> = Omit<
+  EngineOptions,
+  | "element"
+  | "handle"
+  | "scrollContainer"
+  | "backdrop"
+  | "scrim"
+  | "snapPoints"
+  | "allowed"
+  | "initial"
+> & {
+  snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
+  allowed?: TId[] | ReadonlyArray<TId>;
+  initial?: TId;
+  onSnap?: (id: TId) => void;
+};
+
+export type UseBottomSheetVueReturn<TId extends string = string> = {
+  sheetRef: { value: HTMLElement | null };
+  handleRef: { value: HTMLElement | null };
+  contentRef: { value: HTMLElement | null };
+  backdropRef: { value: HTMLElement | null };
+  screenRef: { value: HTMLElement | null };
+  state: EngineState & { activeId: TId };
+  snapTo: (id: TId) => Promise<void>;
+  open: (id?: TId) => Promise<void>;
+  close: (reason?: CloseReason) => Promise<void>;
+  setAllowed: (ids: TId[], snap?: TId) => void;
+  setSnapPoints: (
+    points: EngineOptions["snapPoints"],
+    allowed?: string[],
+  ) => void;
+  setScrim: (opts: ScrimUpdate) => void;
+  setScrimOverlay: (opts: ScrimOverlayOptions) => () => void;
+  addAnchor: (opts: AnchorOptions) => () => void;
+  setScrimStages: (opts: ScrimStagesOptions | null) => () => void;
+  recompute: () => void;
+  setScrimColor: (color: string | undefined | null) => void;
+  setBackdropRange: (range: [number, number]) => void;
+  setRadius: (r: string | number) => void;
+  setMaxHeight: (h: string | number) => void;
+  expand: () => Promise<void>;
+  collapse: () => Promise<void>;
+  isTop: () => boolean;
+  depth: () => number;
+  canDismiss: () => boolean;
+  on: <K extends keyof SheetEventMap>(
+    event: K,
+    fn: (payload: SheetEventMap[K]) => void,
+  ) => () => void;
+  getEngine: () => BottomSheetEngine | null;
+};
+
+export function useBottomSheet<TId extends string = string>(
+  opts: UseBottomSheetVueOptions<TId>,
+): UseBottomSheetVueReturn<TId>;
+
+export type VueAnchor<TId extends string = string> = Omit<
+  AnchorOptions,
+  "element"
+> & { id: string };
+
+export type BottomSheetProps<TId extends string = string> =
+  UseBottomSheetVueOptions<TId> & {
+    backdrop?: boolean;
+    closeOnBackdrop?: boolean;
+    ariaLabel?: string;
+    open?: boolean;
+    snap?: TId;
+    teleport?: boolean;
+    teleportTo?: string | HTMLElement;
+    anchors?: VueAnchor<TId>[];
+    scrimStages?: ScrimStagesOptions | null;
+    backdropColor?: string;
+    backdropOpacity?: number;
+  };
+
+export const BottomSheet: DefineComponent<
+  BottomSheetProps,
+  Record<string, never>,
+  Record<string, never>,
+  Record<string, never>,
+  Record<string, never>,
+  Record<string, never>,
+  Record<string, never>,
+  {
+    change: (state: EngineState) => void;
+    snap: (id: string) => void;
+    open: (id: string) => void;
+    close: () => void;
+    opened: (id: string) => void;
+    closed: () => void;
+    "before-close": (payload: {
+      reason: CloseReason;
+      cancel: () => void;
+    }) => void;
+    "drag-start": (payload: { size: number }) => void;
+    "drag-end": (payload: { size: number; velocity: number }) => void;
+    "update:open": (open: boolean) => void;
+    "update:snap": (id: string) => void;
+  }
+>;
+
+export type {
+  SnapPoint,
+  SnapPointDef,
+  SheetMode,
+  EngineState,
+  EngineOptions,
+  CloseReason,
+};

package/dist/vue.d.ts

@@ -1,15 +1,18 @@
 import type { DefineComponent } from "vue";
 import type {
+  AnchorOptions,
+  BottomSheetEngine,
+  CloseReason,
   EngineOptions,
   EngineState,
   SheetEventMap,
   SheetMode,
   SnapPoint,
   SnapPointDef,
+  ScrimStagesOptions,
   ScrimUpdate,
   ScrimOverlayOptions,
-} from "../core/types";
-import type { BottomSheetEngine } from "../core/BottomSheetEngine";
+} from "./index.js";
 
 export type UseBottomSheetVueOptions<TId extends string = string> = Omit<
   EngineOptions,
@@ -37,7 +40,7 @@ export type UseBottomSheetVueReturn<TId extends string = string> = {
   state: EngineState & { activeId: TId };
   snapTo: (id: TId) => Promise<void>;
   open: (id?: TId) => Promise<void>;
-  close: () => Promise<void>;
+  close: (reason?: CloseReason) => Promise<void>;
   setAllowed: (ids: TId[], snap?: TId) => void;
   setSnapPoints: (
     points: EngineOptions["snapPoints"],
@@ -45,6 +48,18 @@ export type UseBottomSheetVueReturn<TId extends string = string> = {
   ) => void;
   setScrim: (opts: ScrimUpdate) => void;
   setScrimOverlay: (opts: ScrimOverlayOptions) => () => void;
+  addAnchor: (opts: AnchorOptions) => () => void;
+  setScrimStages: (opts: ScrimStagesOptions | null) => () => void;
+  recompute: () => void;
+  setScrimColor: (color: string | undefined | null) => void;
+  setBackdropRange: (range: [number, number]) => void;
+  setRadius: (r: string | number) => void;
+  setMaxHeight: (h: string | number) => void;
+  expand: () => Promise<void>;
+  collapse: () => Promise<void>;
+  isTop: () => boolean;
+  depth: () => number;
+  canDismiss: () => boolean;
   on: <K extends keyof SheetEventMap>(
     event: K,
     fn: (payload: SheetEventMap[K]) => void,
@@ -56,14 +71,51 @@ export function useBottomSheet<TId extends string = string>(
   opts: UseBottomSheetVueOptions<TId>,
 ): UseBottomSheetVueReturn<TId>;
 
+export type VueAnchor<TId extends string = string> = Omit<
+  AnchorOptions,
+  "element"
+> & { id: string };
+
 export type BottomSheetProps<TId extends string = string> =
   UseBottomSheetVueOptions<TId> & {
     backdrop?: boolean;
     closeOnBackdrop?: boolean;
     ariaLabel?: string;
+    open?: boolean;
+    snap?: TId;
+    teleport?: boolean;
+    teleportTo?: string | HTMLElement;
+    anchors?: VueAnchor<TId>[];
+    scrimStages?: ScrimStagesOptions | null;
+    backdropColor?: string;
+    backdropOpacity?: number;
   };
 
-export const BottomSheet: DefineComponent<BottomSheetProps>;
+export const BottomSheet: DefineComponent<
+  BottomSheetProps,
+  Record<string, never>,
+  Record<string, never>,
+  Record<string, never>,
+  Record<string, never>,
+  Record<string, never>,
+  Record<string, never>,
+  {
+    change: (state: EngineState) => void;
+    snap: (id: string) => void;
+    open: (id: string) => void;
+    close: () => void;
+    opened: (id: string) => void;
+    closed: () => void;
+    "before-close": (payload: {
+      reason: CloseReason;
+      cancel: () => void;
+    }) => void;
+    "drag-start": (payload: { size: number }) => void;
+    "drag-end": (payload: { size: number; velocity: number }) => void;
+    "update:open": (open: boolean) => void;
+    "update:snap": (id: string) => void;
+  }
+>;
 
 export type {
   SnapPoint,
@@ -71,4 +123,5 @@ export type {
   SheetMode,
   EngineState,
   EngineOptions,
+  CloseReason,
 };