Skip to content

Commit ff57c2f

Browse files
megaarmosmegaarmos
committed
chore: update package description and enhance keywords for better discoverability;
chore: playground with different use cases;
1 parent c75dc1a commit ff57c2f

24 files changed

+794
-253
lines changed

‎package.json‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
11
{
22
"name": "@douxcode/vue-spring-bottom-sheet",
3-
"description": "A modern and performant bottom sheet component for Vue 3 with animations and snap points.",
3+
"description": "😎 Modern and 🚀 Performant Bottom Sheet for Vue.js",
44
"keywords": [
5-
"vue",
6-
"vue3",
5+
"animation",
6+
"bottom-drawer",
77
"bottom-sheet",
8-
"spring",
9-
"animation"
8+
"bottomsheet",
9+
"dialog",
10+
"drag-drop",
11+
"draggableview",
12+
"drawer",
13+
"gesture-control",
14+
"modal",
15+
"motion",
16+
"overlay",
17+
"popup",
18+
"vue",
19+
"vueuse/motion",
20+
"vueuse/gesture",
21+
"sheet",
22+
"typescript"
1023
],
1124
"author": "Arion Paul",
1225
"license": "MIT",

‎playground/nuxt/app.vue‎

Lines changed: 5 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,9 @@
1-
<script lang="ts" setup>
2-
import { ref } from 'vue'
3-
4-
import BottomSheet from 'vue-spring-bottom-sheet'
5-
import 'vue-spring-bottom-sheet/dist/style.css'
6-
7-
const myBottomSheet = ref<InstanceType<typeof BottomSheet>>()
8-
const maxHeight = ref(0)
9-
const minHeight = ref(0)
10-
11-
const expandOnContentDrag = ref(true)
12-
13-
const open = () => {
14-
myBottomSheet.value?.open()
15-
}
16-
17-
const close = () => {
18-
myBottomSheet.value?.close()
19-
}
20-
21-
const snapToPoint = (index: number) => {
22-
myBottomSheet.value?.snapToPoint(index)
23-
}
1+
<script>
2+
// Use a static import for server-side compatibility
3+
import '~/assets/css/style.css'
244
</script>
255

266
<template>
27-
<button class="btn btn-primary" type="button" @click="open">Open bottom sheet</button>
28-
<ClientOnly>
29-
<BottomSheet
30-
ref="myBottomSheet"
31-
:snap-points="[maxHeight / 3, maxHeight / 1.5, maxHeight]"
32-
:blocking="true"
33-
:can-overlay-close="true"
34-
:can-swipe-close="true"
35-
:expand-on-content-drag="expandOnContentDrag"
36-
@min-height="(n) => (minHeight = n)"
37-
@max-height="(n) => (maxHeight = n)"
38-
>
39-
<template #header>
40-
<h1 style="font-size: 24px; margin: 0; text-align: center">Header</h1>
41-
</template>
42-
<div class="button-group">
43-
<button type="button" @click="snapToPoint(2)">Top</button>
44-
<button type="button" @click="snapToPoint(1)">Middle</button>
45-
<button type="button" @click="snapToPoint(0)">Bottom</button>
46-
</div>
47-
<button type="button" @click="expandOnContentDrag = !expandOnContentDrag">
48-
{{ expandOnContentDrag ? 'Enable' : 'Disable' }} expand on content drag
49-
</button>
50-
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur sagittis, nunc</p>
51-
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur sagittis, nunc</p>
52-
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur sagittis, nunc</p>
53-
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur sagittis, nunc</p>
54-
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur sagittis, nunc</p>
55-
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur sagittis, nunc</p>
56-
<details>
57-
<summary>Epcot Center</summary>
58-
<p>
59-
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks
60-
and seasonal special events.
61-
</p>
62-
<p>
63-
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks
64-
and seasonal special events.
65-
</p>
66-
<p>
67-
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks
68-
and seasonal special events.
69-
</p>
70-
<p>
71-
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks
72-
and seasonal special events.
73-
</p>
74-
<p>
75-
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks
76-
and seasonal special events.
77-
</p>
78-
</details>
79-
<template #footer>
80-
<button type="button" @click="close">Close bottom sheet</button>
81-
</template>
82-
</BottomSheet>
83-
</ClientOnly>
7+
<NaviagtionBar />
8+
<NuxtPage />
849
</template>
85-
86-
<style>
87-
body,
88-
html {
89-
overscroll-behavior-y: none;
90-
}
91-
92-
body {
93-
min-height: 100dvh;
94-
overflow: hidden;
95-
width: 100%;
96-
}
97-
98-
.button-group {
99-
display: flex;
100-
gap: 1rem;
101-
margin-bottom: 1rem;
102-
}
103-
104-
.button-group button {
105-
flex: 1 1 33%;
106-
}
107-
108-
#app {
109-
padding: 0;
110-
width: 100%;
111-
}
112-
</style>

‎playground/nuxt/assets/css/style.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color: #213547;
7+
background-color: #ffffff;
8+
9+
font-synthesis: none;
10+
text-rendering: optimizeLegibility;
11+
-webkit-font-smoothing: antialiased;
12+
-moz-osx-font-smoothing: grayscale;
13+
}
14+
15+
body {
16+
margin: 0;
17+
}
18+
19+
a {
20+
font-weight: 500;
21+
color: #646cff;
22+
text-decoration: inherit;
23+
}
24+
a:hover {
25+
color: #747bff;
26+
}
27+
28+
29+
h1 {
30+
font-size: 3.2em;
31+
line-height: 1.1;
32+
}
33+
34+
button {
35+
border-radius: 8px;
36+
border: 1px solid transparent;
37+
padding: 0.6em 1.2em;
38+
font-size: 1em;
39+
font-weight: 500;
40+
font-family: inherit;
41+
background-color: #f9f9f9;
42+
cursor: pointer;
43+
transition: border-color 0.25s;
44+
}
45+
button:hover {
46+
border-color: #646cff;
47+
}
48+
button:focus,
49+
button:focus-visible {
50+
outline: 4px auto -webkit-focus-ring-color;
51+
}
52+
53+
.card {
54+
padding: 2em;
55+
}

‎playground/nuxt/bun.lockb‎

1.48 KB
Binary file not shown.

‎playground/nuxt/components/NaviagtionBar.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<nav class="navbar">
3+
<ul class="nav-list">
4+
<RouterLink to="/" class="nav-item">Basic</RouterLink>
5+
<RouterLink to="/snap" class="nav-item">Snap point & content drag</RouterLink>
6+
<RouterLink to="/sticky" class="nav-item">Sticky Header & Footer</RouterLink>
7+
<RouterLink to="/blocking" class="nav-item">Non-blocking mode</RouterLink>
8+
</ul>
9+
</nav>
10+
</template>
11+
12+
<style scoped>
13+
.navbar {
14+
background-color: #e6e6e6;
15+
}
16+
17+
.nav-list {
18+
list-style: none;
19+
display: flex;
20+
justify-content: space-around;
21+
margin: 0;
22+
}
23+
24+
.nav-item {
25+
color: black;
26+
text-decoration: none;
27+
padding: 1rem;
28+
transition:
29+
color 150ms ease-in-out,
30+
background-color 150ms ease-in-out;
31+
}
32+
33+
.nav-item:hover {
34+
background-color: #cfcfcf;
35+
}
36+
37+
.nav-item.router-link-active {
38+
color: #646cff;
39+
}
40+
</style>

‎playground/nuxt/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@
1010
"postinstall": "nuxt prepare"
1111
},
1212
"dependencies": {
13+
"@vueuse/core": "^12.2.0",
1314
"nuxt": "^3.14.1592",
14-
"vue-spring-bottom-sheet": "link:vue-spring-bottom-sheet",
1515
"vue": "latest",
16-
"vue-router": "latest"
16+
"vue-router": "latest",
17+
"vue-spring-bottom-sheet": "link:vue-spring-bottom-sheet"
1718
}
1819
}

‎playground/nuxt/pages/blocking.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<script lang="ts" setup>
2+
import { ref, version } from 'vue'
3+
4+
import BottomSheet from 'vue-spring-bottom-sheet'
5+
import 'vue-spring-bottom-sheet/dist/style.css'
6+
7+
const myBottomSheet = ref<InstanceType<typeof BottomSheet>>()
8+
const open = ref(false)
9+
const maxHeight = ref(0)
10+
const minHeight = ref(0)
11+
12+
const expandOnContentDrag = ref(true)
13+
14+
const toggle = () => {
15+
open.value = !open.value
16+
17+
if (open.value) {
18+
myBottomSheet.value?.open()
19+
} else {
20+
myBottomSheet.value?.close()
21+
}
22+
}
23+
</script>
24+
25+
<template>
26+
<div class="content">
27+
<button class="btn btn-primary" type="button" @click="toggle">{{ open ? 'Close' : 'Open' }} bottom sheet</button>
28+
<p>vue js: {{ version }}</p>
29+
</div>
30+
<ClientOnly>
31+
<BottomSheet
32+
ref="myBottomSheet"
33+
:blocking="false"
34+
:can-overlay-close="true"
35+
:can-swipe-close="true"
36+
:expand-on-content-drag="expandOnContentDrag"
37+
:snap-points="[maxHeight / 4, maxHeight / 1.5]"
38+
@min-height="(n) => (minHeight = n)"
39+
@max-height="(n) => (maxHeight = n)"
40+
>
41+
<template #header>
42+
<input type="text" placeholder="Search..." style="width: 100%; padding: 0.5rem; box-sizing: border-box" />
43+
</template>
44+
<p v-for="i in 3" :key="i">
45+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste aperiam, accusamus amet veniam officiis libero necessitatibus ipsum,
46+
reprehenderit eveniet neque ad delectus fugit!
47+
</p>
48+
</BottomSheet>
49+
</ClientOnly>
50+
</template>
51+
52+
<style>
53+
.content {
54+
height: calc(100dvh - 56px);
55+
display: flex;
56+
flex-direction: column;
57+
align-items: center;
58+
justify-content: center;
59+
}
60+
61+
.button-group {
62+
display: flex;
63+
gap: 1rem;
64+
margin-bottom: 1rem;
65+
}
66+
67+
.button-group button {
68+
flex: 1 1 33%;
69+
}
70+
71+
#app {
72+
padding: 0;
73+
width: 100%;
74+
}
75+
</style>

0 commit comments

Comments
 (0)