Skip to content

Commit ccc41df

Browse files
megaarmosmegaarmos
committed
fix: update import names in README and improve package description
1 parent 7d2295e commit ccc41df

File tree

2 files changed

+37
-24
lines changed

2 files changed

+37
-24
lines changed

‎README.md‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ npm install @douxcode/vue-bottom-sheet
1616

1717
```vue
1818
<script setup>
19-
import VueBottomSheet from '@douxcode/vue-bottom-sheet'
19+
import BottomSheet from '@douxcode/vue-bottom-sheet'
2020
import '@douxcode/vue-bottom-sheet/dist/style.css'
2121
import { ref } from 'vue'
2222
@@ -40,11 +40,11 @@ const close = () => {
4040

4141
```vue
4242
<script setup lang="ts">
43-
import VueBottomSheet from '@douxcode/vue-bottom-sheet'
43+
import BottomSheet from '@douxcode/vue-bottom-sheet'
4444
import '@douxcode/vue-bottom-sheet/dist/style.css'
4545
import { ref } from 'vue'
4646
47-
const bottomSheet = ref<InstanceType<typeof VueBottomSheet>>()
47+
const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
4848
4949
const open = () => {
5050
bottomSheet.value.open()
@@ -90,33 +90,42 @@ For Nuxt 3, just wrap component in `<client-only>`
9090

9191
## Props
9292

93-
| Prop | Type | Description | Example | Defaults |
94-
| ------------------- | -------- | -------------------------------------------------------------------------------- | -------------------------------- | --------- |
95-
| snapPoints | Number[] | Define custom snapping positions for the bottom sheet | `:snapPoints="[300, 600, 900]"` | true |
96-
| defaultSnapPoint | Number | Specify the default breakpoint | `:default-snap-point="600"` | true |
97-
| blocking | Boolean | Control whether the bottom sheet blocks interactions with the underlying content | `:blocking="true"` | true |
98-
| canSwipeClose | Boolean | Enable or disable swiping gestures to close the sheet | `:can-swipe-close="true"` | true |
99-
| canOverlayClose | Boolean | Allow tapping on overlay to close it | `:can-overlay-close="true"` | true |
100-
| expandOnContentDrag | Boolean | Enable expanding the sheet by dragging its content | `:expand-on-content-drag="true"` | #0000004D |
93+
| Prop | Type | Description | Example | Defaults |
94+
| ------------------- | -------- | ----------------------------------------------------------------------------- | -------------------------------- | -------- |
95+
| snapPoints | Number[] | Defines custom snapping positions for the bottom sheet | `:snapPoints="[300, 600, 900]"` | true |
96+
| defaultSnapPoint | Number | Specifies the default snap point | `:default-snap-point="600"` | true |
97+
| blocking | Boolean | Controls whether the bottom sheet blocks interactions with underlying content | `:blocking="true"` | true |
98+
| canSwipeClose | Boolean | Enables or disables swipe gestures for closing the sheet | `:can-swipe-close="true"` | true |
99+
| canOverlayClose | Boolean | Allows tapping the overlay to close the sheet | `:can-overlay-close="true"` | true |
100+
| expandOnContentDrag | Boolean | Enables expanding the sheet by dragging its content | `:expand-on-content-drag="true"` | true |
101101

102102
## Exposed methods
103103

104104
Assuming there is `const bottomSheet = ref()`
105105

106-
| Method | Description | Example |
107-
| ----------- | -------------------------------------------------- | ------------------------------------ |
108-
| snapToPoint | Exposed method for snapping component to the point | `bottomSheet.value.snapToPoint(300)` |
109-
| open | Exposed method for opening component | `bottomSheet.value.open()` |
110-
| close | Exposed method for closing component | `bottomSheet.value.close()` |
106+
| Method | Description | Example |
107+
| ----------- | ------------------------------------ | ------------------------------------ |
108+
| snapToPoint | Snaps the sheet to a specified point | `bottomSheet.value.snapToPoint(300)` |
109+
| open | Opens the bottom sheet | `bottomSheet.value.open()` |
110+
| close | Closes the bottom sheet | `bottomSheet.value.close()` |
111111

112112
## Events
113113

114-
| Event | Description | Example |
115-
| ---------- | ------------------------------------------------------------------------ | ------------------------- |
116-
| min-height | Fires when min-height of sheet has changed and passes it as an argument | `@min-height="(n) => {}"` |
117-
| max-height | Fires when max-height of window has changed and passes it as an argument | `@max-height="(n) => {}"` |
118-
| opened | Fire when component is opened | `@opened="() => {}"` |
119-
| closed | Fire when component is closed | `@closed="() => {}"` |
114+
| Event | Description | Example |
115+
| ---------- | ------------------------------------------------------------------------------------- | ------------------------- |
116+
| min-height | Fires when the minimum height of the sheet changes. Passes the value as an argument. | `@min-height="(n) => {}"` |
117+
| max-height | Fires when the maximum height of the window changes. Passes the value as an argument. | `@max-height="(n) => {}"` |
118+
| opened | Fires when the bottom sheet is opened | `@opened="() => {}"` |
119+
| closed | Fires when the bottom sheet is closed | `@closed="() => {}"` |
120+
121+
## Acknowledgments
122+
123+
This project was inspired by the following:
124+
125+
- [react-spring-bottom-sheet]: Accessible ♿️, Delightful ✨, & Fast 🚀
126+
- [@webzlodimir/vue-bottom-sheet]: 🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3
120127

121128
[@vueuse/gesture]: https://gesture.vueuse.org/
122129
[@vueuse/motion]: https://motion.vueuse.org/
130+
[react-spring-bottom-sheet]: https://react-spring.bottom-sheet.dev/
131+
[@webzlodimir/vue-bottom-sheet]: https://github.com/vaban-ru/vue-bottom-sheet

‎package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@douxcode/vue-spring-bottom-sheet",
3-
"description": "😎 Modern and 🚀 Performant Bottom Sheet for Vue.js",
3+
"description": "Modern and Performant Bottom Sheet for Vue.js",
44
"keywords": [
55
"animation",
66
"bottom-drawer",
@@ -27,8 +27,12 @@
2727
"type": "git",
2828
"url": "https://github.com/megaarmos/vue-spring-bottom-sheet.git"
2929
},
30+
"homepage": "https://github.com/megaarmos/vue-spring-bottom-sheet",
31+
"bugs": {
32+
"url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
33+
},
3034
"private": false,
31-
"version": "1.0.0",
35+
"version": "1.0.1",
3236
"type": "module",
3337
"exports": {
3438
".": {

0 commit comments

Comments
 (0)