@douxcode/vue-spring-bottom-sheet 1.0.1

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 megaarmos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,122 @@
+# Vue Spring Bottom Sheet
+
+**vue-spring-bottom-sheet** is built on top of **[@vueuse/gesture]** and **[@vueuse/motion]**.
+
+😎 **Modern** and 🚀 **Performant** Bottom Sheet for Vue.js
+
+# Installation
+
+```
+npm install @douxcode/vue-bottom-sheet
+```
+
+# Getting started
+
+## Basic usage
+
+```vue
+<script setup>
+import BottomSheet from '@douxcode/vue-bottom-sheet'
+import '@douxcode/vue-bottom-sheet/dist/style.css'
+import { ref } from 'vue'
+
+const bottomSheet = ref(null)
+
+const open = () => {
+  bottomSheet.value.open()
+}
+
+const close = () => {
+  bottomSheet.value.close()
+}
+</script>
+
+<template>
+  <BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
+</template>
+```
+
+## Basic usage `setup` + TS
+
+```vue
+<script setup lang="ts">
+import BottomSheet from '@douxcode/vue-bottom-sheet'
+import '@douxcode/vue-bottom-sheet/dist/style.css'
+import { ref } from 'vue'
+
+const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
+
+const open = () => {
+  bottomSheet.value.open()
+}
+
+const close = () => {
+  bottomSheet.value.close()
+}
+</script>
+
+<template>
+  <BottomSheet ref="bottomSheet"> Your content </BottomSheet>
+</template>
+```
+
+## Usage in Nuxt 3
+
+For Nuxt 3, just wrap component in `<client-only>`
+
+```vue
+<template>
+  <ClientOnly>
+    <template>
+      <BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
+    </template>
+  </ClientOnly>
+</template>
+```
+
+## CSS Custom Properties
+
+```css
+:root {
+  --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
+  --rsbs-bg: #fff;
+  --rsbs-handle-bg: hsla(0, 0%, 0%, 0.14);
+  --rsbs-max-w: auto;
+  --rsbs-ml: env(safe-area-inset-left);
+  --rsbs-mr: env(safe-area-inset-right);
+  --rsbs-overlay-rounded: 16px;
+}
+```
+
+## Props
+
+| Prop                | Type     | Description                                                                      | Example                          | Defaults  |
+| ------------------- | -------- | -------------------------------------------------------------------------------- | -------------------------------- | --------- |
+| snapPoints          | Number[] | Define custom snapping positions for the bottom sheet                            | `:snapPoints="[300, 600, 900]"`  | true      |
+| defaultSnapPoint    | Number   | Specify the default breakpoint                                                   | `:default-snap-point="600"`      | true      |
+| blocking            | Boolean  | Control whether the bottom sheet blocks interactions with the underlying content | `:blocking="true"`               | true      |
+| canSwipeClose       | Boolean  | Enable or disable swiping gestures to close the sheet                            | `:can-swipe-close="true"`        | true      |
+| canOverlayClose     | Boolean  | Allow tapping on overlay to close it                                             | `:can-overlay-close="true"`      | true      |
+| expandOnContentDrag | Boolean  | Enable expanding the sheet by dragging its content                               | `:expand-on-content-drag="true"` | #0000004D |
+
+## Exposed methods
+
+Assuming there is `const bottomSheet = ref()`
+
+| Method      | Description                                        | Example                              |
+| ----------- | -------------------------------------------------- | ------------------------------------ |
+| snapToPoint | Exposed method for snapping component to the point | `bottomSheet.value.snapToPoint(300)` |
+| open        | Exposed method for opening component               | `bottomSheet.value.open()`           |
+| close       | Exposed method for closing component               | `bottomSheet.value.close()`          |
+
+## Events
+
+| Event      | Description                                                              | Example                   |
+| ---------- | ------------------------------------------------------------------------ | ------------------------- |
+| min-height | Fires when min-height of sheet has changed and passes it as an argument  | `@min-height="(n) => {}"` |
+| max-height | Fires when max-height of window has changed and passes it as an argument | `@max-height="(n) => {}"` |
+| opened     | Fire when component is opened                                            | `@opened="() => {}"`      |
+| closed     | Fire when component is closed                                            | `@closed="() => {}"`      |
+
+[@vueuse/gesture]: https://gesture.vueuse.org/
+[@vueuse/motion]: https://motion.vueuse.org/

package/dist/BottomSheet.d.ts

@@ -0,0 +1,55 @@
+interface IProps {
+    snapPoints?: number[];
+    defaultBreakpoint?: number;
+    blocking?: boolean;
+    canSwipeClose?: boolean;
+    canBackdropClose?: boolean;
+    expandOnContentDrag?: boolean;
+}
+declare function __VLS_template(): {
+    slots: {
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {
+        backdrop: HTMLDivElement;
+        sheet: HTMLDivElement;
+        sheetHeader: HTMLDivElement;
+        sheetScroll: HTMLDivElement;
+        sheetContentWrapper: HTMLDivElement;
+        sheetContent: HTMLDivElement;
+        sheetFooter: HTMLDivElement;
+    };
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<IProps, {
+    open: () => void;
+    close: () => void;
+    snapToPoint: (snapPoint: number) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    opened: () => any;
+    closed: () => any;
+    ready: () => any;
+    minHeight: (minSheetHeight: number) => any;
+    maxHeight: (maxSheetHeight: number) => any;
+}, string, import('vue').PublicProps, Readonly<IProps> & Readonly<{
+    onOpened?: (() => any) | undefined;
+    onClosed?: (() => any) | undefined;
+    onReady?: (() => any) | undefined;
+    onMinHeight?: ((minSheetHeight: number) => any) | undefined;
+    onMaxHeight?: ((maxSheetHeight: number) => any) | undefined;
+}>, {
+    blocking: boolean;
+    canSwipeClose: boolean;
+    canBackdropClose: boolean;
+    expandOnContentDrag: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/composables/useSnapPoints.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+export declare function useSnapPoints(snapPoints: Ref<number[]>, height: Ref<number>): {
+    minSnap: import('vue').ComputedRef<number>;
+    maxSnap: import('vue').ComputedRef<number>;
+    snapPoints: Ref<number[], number[]>;
+    closestSnapPoint: import('vue').ComputedRef<number>;
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { default as BottomSheet } from './BottomSheet';
+export default BottomSheet;