@douxcode/vue-spring-bottom-sheet 2.0.4 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +176 -155
- package/dist/BottomSheet.d.ts +4 -0
- package/dist/index.mjs +198 -184
- package/dist/style.css +1 -1
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,155 +1,176 @@
|
|
|
1
|
-
# Vue Spring Bottom Sheet
|
|
2
|
-
|
|
3
|
-
**vue-spring-bottom-sheet** is built on top of **[motion-v]**.
|
|
4
|
-
|
|
5
|
-
😎 **Modern** and 🚀 **Performant** Bottom Sheet for Vue.js
|
|
6
|
-
|
|
7
|
-
[Demo](https://vue-spring-bottom-sheet.douxcode.com/) 👀
|
|
8
|
-
|
|
9
|
-
|  |  |  |  |
|
|
10
|
-
| :-----------------------------------------------------------------: | :----------------------------------------------------------------: | :--------------------------------------------------------------------: | :------------------------------------------------------------------: |
|
|
11
|
-
|
|
12
|
-
# Installation
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
npm install @douxcode/vue-spring-bottom-sheet
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
```
|
|
19
|
-
bun install @douxcode/vue-spring-bottom-sheet
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
# Getting started
|
|
23
|
-
|
|
24
|
-
## Basic usage
|
|
25
|
-
|
|
26
|
-
```vue
|
|
27
|
-
<script setup>
|
|
28
|
-
import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
|
|
29
|
-
import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
|
|
30
|
-
import { ref } from 'vue'
|
|
31
|
-
|
|
32
|
-
const bottomSheet = ref(null)
|
|
33
|
-
|
|
34
|
-
const open = () => {
|
|
35
|
-
bottomSheet.value.open()
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
const close = () => {
|
|
39
|
-
bottomSheet.value.close()
|
|
40
|
-
}
|
|
41
|
-
</script>
|
|
42
|
-
|
|
43
|
-
<template>
|
|
44
|
-
<BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
|
|
45
|
-
</template>
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
## Basic usage `setup` + TS
|
|
49
|
-
|
|
50
|
-
```vue
|
|
51
|
-
<script setup lang="ts">
|
|
52
|
-
import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
|
|
53
|
-
import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
|
|
54
|
-
import { ref } from 'vue'
|
|
55
|
-
|
|
56
|
-
const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
|
|
57
|
-
|
|
58
|
-
/* For vue 3.5+ you can use useTemplateRef() */
|
|
59
|
-
const bottomSheet = useTemplateRef('bottomSheet')
|
|
60
|
-
|
|
61
|
-
const open = () => {
|
|
62
|
-
bottomSheet.value.open()
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
const close = () => {
|
|
66
|
-
bottomSheet.value.close()
|
|
67
|
-
}
|
|
68
|
-
</script>
|
|
69
|
-
|
|
70
|
-
<template>
|
|
71
|
-
<BottomSheet ref="bottomSheet"> Your content </BottomSheet>
|
|
72
|
-
</template>
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## Usage
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
|
|
146
|
-
##
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
1
|
+
# Vue Spring Bottom Sheet
|
|
2
|
+
|
|
3
|
+
**vue-spring-bottom-sheet** is built on top of **[motion-v]**.
|
|
4
|
+
|
|
5
|
+
😎 **Modern** and 🚀 **Performant** Bottom Sheet for Vue.js
|
|
6
|
+
|
|
7
|
+
[Demo](https://vue-spring-bottom-sheet.douxcode.com/) 👀
|
|
8
|
+
|
|
9
|
+
|  |  |  |  |
|
|
10
|
+
| :-----------------------------------------------------------------: | :----------------------------------------------------------------: | :--------------------------------------------------------------------: | :------------------------------------------------------------------: |
|
|
11
|
+
|
|
12
|
+
# Installation
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
npm install @douxcode/vue-spring-bottom-sheet
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
bun install @douxcode/vue-spring-bottom-sheet
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
# Getting started
|
|
23
|
+
|
|
24
|
+
## Basic usage
|
|
25
|
+
|
|
26
|
+
```vue
|
|
27
|
+
<script setup>
|
|
28
|
+
import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
|
|
29
|
+
import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
|
|
30
|
+
import { ref } from 'vue'
|
|
31
|
+
|
|
32
|
+
const bottomSheet = ref(null)
|
|
33
|
+
|
|
34
|
+
const open = () => {
|
|
35
|
+
bottomSheet.value.open()
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
const close = () => {
|
|
39
|
+
bottomSheet.value.close()
|
|
40
|
+
}
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<template>
|
|
44
|
+
<BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
|
|
45
|
+
</template>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Basic usage `setup` + TS
|
|
49
|
+
|
|
50
|
+
```vue
|
|
51
|
+
<script setup lang="ts">
|
|
52
|
+
import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
|
|
53
|
+
import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
|
|
54
|
+
import { ref } from 'vue'
|
|
55
|
+
|
|
56
|
+
const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
|
|
57
|
+
|
|
58
|
+
/* For vue 3.5+ you can use useTemplateRef() */
|
|
59
|
+
const bottomSheet = useTemplateRef('bottomSheet')
|
|
60
|
+
|
|
61
|
+
const open = () => {
|
|
62
|
+
bottomSheet.value.open()
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const close = () => {
|
|
66
|
+
bottomSheet.value.close()
|
|
67
|
+
}
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
<template>
|
|
71
|
+
<BottomSheet ref="bottomSheet"> Your content </BottomSheet>
|
|
72
|
+
</template>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Usage with v-model
|
|
76
|
+
|
|
77
|
+
```vue
|
|
78
|
+
<script setup lang="ts">
|
|
79
|
+
import { ref } from "vue";
|
|
80
|
+
|
|
81
|
+
import BottomSheet from "@douxcode/vue-spring-bottom-sheet";
|
|
82
|
+
import "@douxcode/vue-spring-bottom-sheet/dist/style.css";
|
|
83
|
+
|
|
84
|
+
const sheet = ref(false);
|
|
85
|
+
|
|
86
|
+
</script>
|
|
87
|
+
|
|
88
|
+
<template>
|
|
89
|
+
<button type="button" @click="sheet = true"> Open bottom sheet </button>
|
|
90
|
+
<BottomSheet v-model="sheet"> Your content </BottomSheet>
|
|
91
|
+
</template>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
## Usage in Nuxt 3
|
|
96
|
+
|
|
97
|
+
For Nuxt 3, just wrap component in `<ClientOnly>`
|
|
98
|
+
|
|
99
|
+
```vue
|
|
100
|
+
<template>
|
|
101
|
+
<ClientOnly>
|
|
102
|
+
<BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
|
|
103
|
+
</ClientOnly>
|
|
104
|
+
</template>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Slots
|
|
108
|
+
|
|
109
|
+
```vue
|
|
110
|
+
<template>
|
|
111
|
+
<BottomSheet ref="bottomSheet">
|
|
112
|
+
<template #header> Header </template>
|
|
113
|
+
<div>Your content</div>
|
|
114
|
+
<template #footer> Footer </template>
|
|
115
|
+
</BottomSheet>
|
|
116
|
+
</template>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## CSS Custom Properties
|
|
120
|
+
|
|
121
|
+
```css
|
|
122
|
+
--vsbs-backdrop-bg: rgba(0, 0, 0, 0.5);
|
|
123
|
+
--vsbs-shadow-color: rgba(89, 89, 89, 0.2);
|
|
124
|
+
--vsbs-background: #fff;
|
|
125
|
+
--vsbs-border-radius: 16px;
|
|
126
|
+
--vsbs-max-width: 640px;
|
|
127
|
+
--vsbs-border-color: rgba(46, 59, 66, 0.125);
|
|
128
|
+
--vsbs-padding-x: 16px;
|
|
129
|
+
--vsbs-handle-background: rgba(0, 0, 0, 0.28);
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## Props
|
|
133
|
+
|
|
134
|
+
### Prop Definitions
|
|
135
|
+
|
|
136
|
+
| Prop | Type | Default | Description |
|
|
137
|
+
| ------------------- | --------------------- | ---------------- | ------------------------------------------ |
|
|
138
|
+
| duration | Number | 250 | Animation duration in milliseconds |
|
|
139
|
+
| snapPoints | Array<number\|string> | [instinctHeight] | Custom snapping positions |
|
|
140
|
+
| initialSnapPoint | Number | minHeight | Initial snap point index |
|
|
141
|
+
| blocking | Boolean | true | Block interactions with underlying content |
|
|
142
|
+
| canSwipeClose | Boolean | true | Enable swipe-to-close gesture |
|
|
143
|
+
| canBackdropClose | Boolean | true | Allow closing by tapping backdrop |
|
|
144
|
+
| expandOnContentDrag | Boolean | true | Enable expanding by dragging content |
|
|
145
|
+
|
|
146
|
+
## Exposed methods
|
|
147
|
+
|
|
148
|
+
Assuming there is `const bottomSheet = ref()`
|
|
149
|
+
|
|
150
|
+
| Method | Description | Example |
|
|
151
|
+
| ----------- | ------------------------------- | ---------------------------------- |
|
|
152
|
+
| open | Opens the bottom sheet | `bottomSheet.value.open()` |
|
|
153
|
+
| close | Closes the bottom sheet | `bottomSheet.value.close()` |
|
|
154
|
+
| snapToPoint | Snaps to an index of snapPoints | `bottomSheet.value.snapToPoint(1)` |
|
|
155
|
+
|
|
156
|
+
## Events
|
|
157
|
+
|
|
158
|
+
| Event | Description | Payload |
|
|
159
|
+
| -------------- | -------------------------------------- | --------------- |
|
|
160
|
+
| opened | Emitted when sheet finishes opening | - |
|
|
161
|
+
| closed | Emitted when sheet finishes closing | - |
|
|
162
|
+
| dragging-up | Emitted when user drags sheet upward | - |
|
|
163
|
+
| dragging-down | Emitted when user drags sheet downward | - |
|
|
164
|
+
| instinctHeight | Emitted when content height changes | height (number) |
|
|
165
|
+
| snapped | Emitted when sheet finishes snapping | snapPointIndex (number) |
|
|
166
|
+
|
|
167
|
+
## Acknowledgments
|
|
168
|
+
|
|
169
|
+
This project was inspired by the following:
|
|
170
|
+
|
|
171
|
+
- [react-spring-bottom-sheet]: Accessible ♿️, Delightful ✨, & Fast 🚀
|
|
172
|
+
- [@webzlodimir/vue-bottom-sheet]: 🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3
|
|
173
|
+
|
|
174
|
+
[motion-v]: https://motion.unovue.com/
|
|
175
|
+
[react-spring-bottom-sheet]: https://react-spring.bottom-sheet.dev/
|
|
176
|
+
[@webzlodimir/vue-bottom-sheet]: https://github.com/vaban-ru/vue-bottom-sheet
|
package/dist/BottomSheet.d.ts
CHANGED
|
@@ -28,14 +28,18 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
|
|
|
28
28
|
ready: () => any;
|
|
29
29
|
"dragging-up": () => any;
|
|
30
30
|
"dragging-down": () => any;
|
|
31
|
+
snapped: (snapPointIndex?: number | undefined) => any;
|
|
31
32
|
instinctHeight: (instinctHeight: number) => any;
|
|
33
|
+
"update:modelValue": () => any;
|
|
32
34
|
}, string, import('vue').PublicProps, Readonly<BottomSheetProps> & Readonly<{
|
|
33
35
|
onOpened?: (() => any) | undefined;
|
|
34
36
|
onClosed?: (() => any) | undefined;
|
|
35
37
|
onReady?: (() => any) | undefined;
|
|
36
38
|
"onDragging-up"?: (() => any) | undefined;
|
|
37
39
|
"onDragging-down"?: (() => any) | undefined;
|
|
40
|
+
onSnapped?: ((snapPointIndex?: number | undefined) => any) | undefined;
|
|
38
41
|
onInstinctHeight?: ((instinctHeight: number) => any) | undefined;
|
|
42
|
+
"onUpdate:modelValue"?: (() => any) | undefined;
|
|
39
43
|
}>, {
|
|
40
44
|
duration: number;
|
|
41
45
|
blocking: boolean;
|
package/dist/index.mjs
CHANGED
|
@@ -1,83 +1,83 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
import { useMotionValue as
|
|
3
|
-
import {
|
|
4
|
-
import { useFocusTrap as
|
|
5
|
-
function
|
|
1
|
+
import { ref as P, computed as E, defineComponent as xe, watch as q, onMounted as Me, toRefs as _e, nextTick as N, onUnmounted as Oe, createBlock as Z, openBlock as ee, Teleport as Ie, createElementVNode as te, createVNode as $, unref as m, withCtx as B, createCommentVNode as fe, normalizeStyle as Be, renderSlot as ae } from "vue";
|
|
2
|
+
import { useMotionValue as he, animate as O, AnimatePresence as pe, Motion as A } from "motion-v";
|
|
3
|
+
import { useVModel as Ee, useWindowSize as De, useElementBounding as Q, useScrollLock as ge } from "@vueuse/core";
|
|
4
|
+
import { useFocusTrap as He } from "@vueuse/integrations/useFocusTrap";
|
|
5
|
+
function G(n, a) {
|
|
6
6
|
const o = parseFloat(n);
|
|
7
7
|
return a * o / 100;
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
const e =
|
|
11
|
-
const
|
|
9
|
+
function Ve(n, a, o) {
|
|
10
|
+
const e = P(0), i = E(() => n.value.map((h) => typeof h == "string" ? G(h, o.value) : h)), y = E(() => Math.min(...i.value)), r = E(() => Math.max(...i.value)), p = E(() => {
|
|
11
|
+
const h = i.value.reduce(
|
|
12
12
|
(g, x) => Math.abs(x - a.value) < Math.abs(g - a.value) ? x : g
|
|
13
13
|
);
|
|
14
|
-
return
|
|
14
|
+
return i.value.indexOf(h);
|
|
15
15
|
});
|
|
16
16
|
return {
|
|
17
17
|
currentSnapPointIndex: e,
|
|
18
|
-
flattenedSnapPoints:
|
|
19
|
-
minSnapPoint:
|
|
20
|
-
maxSnapPoint:
|
|
18
|
+
flattenedSnapPoints: i,
|
|
19
|
+
minSnapPoint: y,
|
|
20
|
+
maxSnapPoint: r,
|
|
21
21
|
closestSnapPointIndex: p
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
|
-
function
|
|
25
|
-
let e = (
|
|
24
|
+
function Re(n, a, o) {
|
|
25
|
+
let e = (i) => n(i, ...a);
|
|
26
26
|
return o === void 0 ? e : Object.assign(e, { lazy: o, lazyArgs: a });
|
|
27
27
|
}
|
|
28
|
-
function
|
|
28
|
+
function Fe(n, a, o) {
|
|
29
29
|
let e = n.length - a.length;
|
|
30
30
|
if (e === 0) return n(...a);
|
|
31
|
-
if (e === 1) return
|
|
31
|
+
if (e === 1) return Re(n, a, o);
|
|
32
32
|
throw new Error("Wrong number of arguments");
|
|
33
33
|
}
|
|
34
|
-
function
|
|
35
|
-
let
|
|
36
|
-
let
|
|
37
|
-
|
|
34
|
+
function $e(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: e, minGapMs: i, reducer: y = Ae }) {
|
|
35
|
+
let r, p, h, g, x = () => {
|
|
36
|
+
let s = h;
|
|
37
|
+
s !== void 0 && (h = void 0, n(s), i !== void 0 && (p = setTimeout(D, i)));
|
|
38
38
|
}, D = () => {
|
|
39
|
-
clearTimeout(p), p = void 0,
|
|
39
|
+
clearTimeout(p), p = void 0, r === void 0 && x();
|
|
40
40
|
}, H = () => {
|
|
41
|
-
clearTimeout(
|
|
41
|
+
clearTimeout(r), r = void 0, g = void 0, p === void 0 && x();
|
|
42
42
|
};
|
|
43
|
-
return { call: (...
|
|
44
|
-
let
|
|
45
|
-
if ((a !== "start" ||
|
|
46
|
-
if (o !== void 0 || e !== void 0 ||
|
|
47
|
-
clearTimeout(
|
|
43
|
+
return { call: (...s) => {
|
|
44
|
+
let c = r === void 0 && p === void 0;
|
|
45
|
+
if ((a !== "start" || c) && (h = y(h, ...s)), !(r === void 0 && !c)) {
|
|
46
|
+
if (o !== void 0 || e !== void 0 || i === void 0) {
|
|
47
|
+
clearTimeout(r);
|
|
48
48
|
let w = Date.now();
|
|
49
49
|
g ?? (g = w);
|
|
50
50
|
let W = e === void 0 ? o ?? 0 : Math.min(o ?? e, e - (w - g));
|
|
51
|
-
|
|
51
|
+
r = setTimeout(H, W);
|
|
52
52
|
}
|
|
53
|
-
a !== "end" &&
|
|
53
|
+
a !== "end" && c && x();
|
|
54
54
|
}
|
|
55
55
|
}, cancel: () => {
|
|
56
|
-
clearTimeout(
|
|
56
|
+
clearTimeout(r), r = void 0, g = void 0, clearTimeout(p), p = void 0, h = void 0;
|
|
57
57
|
}, flush: () => {
|
|
58
58
|
H(), D();
|
|
59
59
|
}, get isIdle() {
|
|
60
|
-
return
|
|
60
|
+
return r === void 0 && p === void 0;
|
|
61
61
|
} };
|
|
62
62
|
}
|
|
63
|
-
var
|
|
64
|
-
function
|
|
65
|
-
return
|
|
63
|
+
var Ae = () => "";
|
|
64
|
+
function b(...n) {
|
|
65
|
+
return Fe(We, n);
|
|
66
66
|
}
|
|
67
|
-
var
|
|
68
|
-
function
|
|
67
|
+
var We = (n, { min: a, max: o }) => a !== void 0 && n < a ? a : o !== void 0 && n > o ? o : n;
|
|
68
|
+
function Le(n, a, o) {
|
|
69
69
|
return Math.max(a, Math.min(n, o));
|
|
70
70
|
}
|
|
71
|
-
function
|
|
71
|
+
function ze(n, a) {
|
|
72
72
|
return Math.pow(n, a * 5);
|
|
73
73
|
}
|
|
74
|
-
function
|
|
75
|
-
return a === 0 || Math.abs(a) === 1 / 0 ?
|
|
74
|
+
function me(n, a, o) {
|
|
75
|
+
return a === 0 || Math.abs(a) === 1 / 0 ? ze(n, o) : n * a * o / (a + o * n);
|
|
76
76
|
}
|
|
77
|
-
function
|
|
78
|
-
return e === 0 ?
|
|
77
|
+
function ne(n, a, o, e = 0.15) {
|
|
78
|
+
return e === 0 ? Le(n, a, o) : n < a ? -me(a - n, o - a, e) + a : n > o ? +me(n - o, o - a, e) + o : n;
|
|
79
79
|
}
|
|
80
|
-
const
|
|
80
|
+
const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
|
|
81
81
|
__name: "BottomSheet",
|
|
82
82
|
props: {
|
|
83
83
|
duration: { default: 250 },
|
|
@@ -86,197 +86,211 @@ const Ve = { "data-vsbs-container": "" }, ze = /* @__PURE__ */ xe({
|
|
|
86
86
|
blocking: { type: Boolean, default: !0 },
|
|
87
87
|
canSwipeClose: { type: Boolean, default: !0 },
|
|
88
88
|
canBackdropClose: { type: Boolean, default: !0 },
|
|
89
|
-
expandOnContentDrag: { type: Boolean, default: !0 }
|
|
89
|
+
expandOnContentDrag: { type: Boolean, default: !0 },
|
|
90
|
+
modelValue: { type: Boolean }
|
|
90
91
|
},
|
|
91
|
-
emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "instinctHeight"],
|
|
92
|
+
emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
|
|
92
93
|
setup(n, { expose: a, emit: o }) {
|
|
93
|
-
const e = n,
|
|
94
|
+
const e = n, i = o, y = Ee(e, "modelValue", i, {
|
|
95
|
+
passive: !0
|
|
96
|
+
});
|
|
97
|
+
q(y, (t) => {
|
|
98
|
+
t && J();
|
|
99
|
+
}), Me(() => {
|
|
100
|
+
y.value && J();
|
|
101
|
+
});
|
|
102
|
+
const r = P(), p = P(null), h = P(null), g = P(null), x = P(null), D = P(null), H = P(null), s = P(e.expandOnContentDrag), { height: c } = De(), { height: w } = Q(r), { height: W } = Q(p), { height: oe } = Q(D), { height: le } = Q(h), K = E({
|
|
94
103
|
get() {
|
|
95
|
-
return
|
|
96
|
-
Math.ceil(
|
|
104
|
+
return b(
|
|
105
|
+
Math.ceil(oe.value + W.value + le.value),
|
|
97
106
|
{
|
|
98
|
-
max:
|
|
107
|
+
max: c.value
|
|
99
108
|
}
|
|
100
109
|
);
|
|
101
110
|
},
|
|
102
111
|
set(t) {
|
|
103
|
-
[W.value,
|
|
112
|
+
[W.value, oe.value, le.value] = t;
|
|
104
113
|
}
|
|
105
|
-
}), l =
|
|
106
|
-
flattenedSnapPoints:
|
|
114
|
+
}), l = P(0), v = P(0), k = he(0), S = he(0), { snapPoints: be } = _e(e), d = E(() => be.value ?? [K.value]), {
|
|
115
|
+
flattenedSnapPoints: U,
|
|
107
116
|
currentSnapPointIndex: I,
|
|
108
|
-
closestSnapPointIndex:
|
|
109
|
-
minSnapPoint:
|
|
117
|
+
closestSnapPointIndex: V,
|
|
118
|
+
minSnapPoint: _,
|
|
110
119
|
maxSnapPoint: R
|
|
111
|
-
} =
|
|
112
|
-
let
|
|
113
|
-
const
|
|
120
|
+
} = Ve(d, l, c);
|
|
121
|
+
let M;
|
|
122
|
+
const L = ge(document.body), z = ge(document.documentElement), Y = He([r, H], {
|
|
114
123
|
immediate: !1,
|
|
115
|
-
fallbackFocus: () =>
|
|
124
|
+
fallbackFocus: () => r.value || document.body
|
|
116
125
|
});
|
|
117
|
-
function le(t) {
|
|
118
|
-
r.value = !0, ue(t);
|
|
119
|
-
}
|
|
120
126
|
function ue(t) {
|
|
121
|
-
|
|
127
|
+
s.value = !0, ie(t);
|
|
128
|
+
}
|
|
129
|
+
function ie(t) {
|
|
130
|
+
s.value && t.preventDefault();
|
|
122
131
|
}
|
|
123
|
-
const
|
|
132
|
+
const re = (t) => {
|
|
124
133
|
t.key === "Escape" && j();
|
|
125
|
-
},
|
|
134
|
+
}, ye = () => {
|
|
126
135
|
e.canBackdropClose && j();
|
|
127
|
-
},
|
|
128
|
-
|
|
129
|
-
const t =
|
|
136
|
+
}, J = async () => {
|
|
137
|
+
y.value = !0, e.blocking && (L.value = !0, z.value = !0), await N();
|
|
138
|
+
const t = r.value.$el;
|
|
130
139
|
w.value = t.getBoundingClientRect().height;
|
|
131
|
-
const u = t.querySelector("[data-vsbs-content]"),
|
|
132
|
-
if (
|
|
133
|
-
|
|
140
|
+
const u = t.querySelector("[data-vsbs-content]"), f = t.querySelector("[data-vsbs-header]"), C = t.querySelector("[data-vsbs-footer]");
|
|
141
|
+
if (K.value = [
|
|
142
|
+
f.getBoundingClientRect().height,
|
|
134
143
|
u.getBoundingClientRect().height,
|
|
135
144
|
C.getBoundingClientRect().height
|
|
136
|
-
], await
|
|
137
|
-
(T) => T ===
|
|
145
|
+
], await N(), I.value = U.value.findIndex(
|
|
146
|
+
(T) => T === _.value
|
|
138
147
|
), e.initialSnapPoint) {
|
|
139
148
|
const T = e.initialSnapPoint;
|
|
140
|
-
if (T < 0 || T >=
|
|
149
|
+
if (T < 0 || T >= d.value.length) {
|
|
141
150
|
console.warn("Index out of bounds");
|
|
142
151
|
return;
|
|
143
152
|
}
|
|
144
153
|
let F;
|
|
145
|
-
typeof
|
|
146
|
-
max:
|
|
147
|
-
}) : F =
|
|
154
|
+
typeof d.value[T] == "number" ? F = b(d.value[T], {
|
|
155
|
+
max: c.value
|
|
156
|
+
}) : F = G(d.value[T], c.value), l.value = F;
|
|
148
157
|
} else
|
|
149
|
-
l.value =
|
|
150
|
-
max:
|
|
158
|
+
l.value = b(_.value, {
|
|
159
|
+
max: c.value
|
|
151
160
|
});
|
|
152
|
-
|
|
161
|
+
v.value = l.value, k.set(l.value), S.set(l.value), M = O(k, l.value, {
|
|
153
162
|
duration: e.duration / 1e3,
|
|
154
163
|
ease: "easeInOut"
|
|
155
|
-
}),
|
|
164
|
+
}), M = O(S, 0, {
|
|
156
165
|
duration: e.duration / 1e3,
|
|
157
166
|
ease: "easeInOut"
|
|
158
|
-
}), window.addEventListener("keydown",
|
|
159
|
-
|
|
167
|
+
}), window.addEventListener("keydown", re), e.blocking && setTimeout(() => {
|
|
168
|
+
k.get() < 1 && (i("opened"), Y.activate());
|
|
160
169
|
}, e.duration);
|
|
161
170
|
}, j = () => {
|
|
162
|
-
|
|
163
|
-
|
|
171
|
+
y.value = !1, e.blocking && (L.value = !1, z.value = !1), window.removeEventListener("keydown", re), e.blocking && Y.deactivate(), setTimeout(() => {
|
|
172
|
+
i("closed");
|
|
164
173
|
}, e.duration);
|
|
165
|
-
},
|
|
166
|
-
if (!
|
|
167
|
-
if (t < 0 || t >=
|
|
174
|
+
}, se = (t) => {
|
|
175
|
+
if (!d.value) return;
|
|
176
|
+
if (t < 0 || t >= d.value.length) {
|
|
168
177
|
console.warn("Index out of bounds");
|
|
169
178
|
return;
|
|
170
179
|
}
|
|
171
180
|
I.value = t;
|
|
172
181
|
let u;
|
|
173
|
-
typeof
|
|
174
|
-
max:
|
|
175
|
-
}) : u =
|
|
182
|
+
typeof d.value[t] == "number" ? u = b(d.value[t], {
|
|
183
|
+
max: c.value
|
|
184
|
+
}) : u = G(d.value[t], c.value), l.value = u, M = O(k, l.value, {
|
|
176
185
|
duration: e.duration / 1e3,
|
|
177
|
-
ease: "easeInOut"
|
|
186
|
+
ease: "easeInOut",
|
|
187
|
+
onComplete: () => i("snapped", d.value.indexOf(d.value[t]))
|
|
178
188
|
});
|
|
179
189
|
};
|
|
180
|
-
function
|
|
181
|
-
t > 0 ?
|
|
190
|
+
function ve(t) {
|
|
191
|
+
t > 0 ? i("dragging-down") : t < 0 && i("dragging-up");
|
|
182
192
|
}
|
|
183
|
-
const
|
|
184
|
-
l.value = w.value,
|
|
185
|
-
},
|
|
186
|
-
await
|
|
187
|
-
e.canSwipeClose ?
|
|
193
|
+
const de = () => {
|
|
194
|
+
l.value = w.value, v.value = S.get(), k.jump(l.value), S.jump(v.value);
|
|
195
|
+
}, ce = async (t, u) => {
|
|
196
|
+
await N(), r.value && (v.value <= 0 && (l.value -= u.delta.y), l.value <= _.value && (l.value = _.value, v.value += u.delta.y, S.set(
|
|
197
|
+
e.canSwipeClose ? b(v.value, { min: 0 }) : b(ne(v.value, -w.value, 0, 0.5), {
|
|
188
198
|
min: 0
|
|
189
199
|
})
|
|
190
|
-
)),
|
|
191
|
-
|
|
200
|
+
)), k.set(
|
|
201
|
+
b(ne(l.value, 0, R.value, 0.25), {
|
|
192
202
|
min: 0,
|
|
193
|
-
max:
|
|
203
|
+
max: c.value
|
|
194
204
|
})
|
|
195
|
-
),
|
|
196
|
-
},
|
|
197
|
-
|
|
198
|
-
(u,
|
|
199
|
-
) : 0,
|
|
205
|
+
), ve(u.delta.y));
|
|
206
|
+
}, X = () => {
|
|
207
|
+
v.value = e.canSwipeClose ? [0, l.value].reduce(
|
|
208
|
+
(u, f) => Math.abs(f - v.value) < Math.abs(u - v.value) ? f : u
|
|
209
|
+
) : 0, M = O(S, v.value, {
|
|
200
210
|
duration: e.duration / 1e3,
|
|
201
211
|
ease: "easeInOut"
|
|
202
|
-
}),
|
|
212
|
+
}), v.value === l.value && (v.value = 0, j()), I.value = V.value;
|
|
203
213
|
let t;
|
|
204
|
-
typeof
|
|
205
|
-
max:
|
|
206
|
-
}) : t =
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
), l.value = t,
|
|
214
|
+
typeof d.value[V.value] == "number" ? t = b(d.value[V.value], {
|
|
215
|
+
max: c.value
|
|
216
|
+
}) : t = G(
|
|
217
|
+
d.value[V.value],
|
|
218
|
+
c.value
|
|
219
|
+
), l.value = t, M = O(k, l.value, {
|
|
210
220
|
duration: e.duration / 1e3,
|
|
211
|
-
ease: "easeInOut"
|
|
212
|
-
|
|
221
|
+
ease: "easeInOut",
|
|
222
|
+
onComplete: () => i(
|
|
223
|
+
"snapped",
|
|
224
|
+
d.value.indexOf(d.value[V.value])
|
|
225
|
+
)
|
|
226
|
+
}), M = O(S, 0, {
|
|
213
227
|
duration: e.duration / 1e3,
|
|
214
228
|
ease: "easeInOut"
|
|
215
229
|
});
|
|
216
230
|
}, Se = (t, u) => {
|
|
217
|
-
if (l.value = w.value,
|
|
218
|
-
const
|
|
231
|
+
if (l.value = w.value, v.value = S.get(), M.stop(), !g.value) return;
|
|
232
|
+
const f = g.value.scrollTop === 0, C = u.delta.y > 0, T = U.value.length === 1, F = 0.5 > Math.abs(l.value - R.value);
|
|
219
233
|
if (T) {
|
|
220
234
|
if (!e.expandOnContentDrag) {
|
|
221
|
-
|
|
235
|
+
s.value = !1;
|
|
222
236
|
return;
|
|
223
237
|
}
|
|
224
|
-
|
|
238
|
+
S.get() === 0 && f && C && (s.value = !0), S.get() === 0 && f && !C && (s.value = !1);
|
|
225
239
|
} else {
|
|
226
240
|
if (!e.expandOnContentDrag) {
|
|
227
|
-
|
|
241
|
+
s.value = !1;
|
|
228
242
|
return;
|
|
229
243
|
}
|
|
230
|
-
|
|
244
|
+
s.value = !0, F && (C && f && (s.value = !0), !C && f && (s.value = !1), f || (s.value = !1));
|
|
231
245
|
}
|
|
232
246
|
}, Pe = async (t, u) => {
|
|
233
|
-
if (await
|
|
234
|
-
|
|
247
|
+
if (await N(), !e.expandOnContentDrag) {
|
|
248
|
+
s.value = !1;
|
|
235
249
|
return;
|
|
236
250
|
}
|
|
237
|
-
if (!
|
|
238
|
-
|
|
239
|
-
e.canSwipeClose ?
|
|
251
|
+
if (!r.value) return;
|
|
252
|
+
v.value === 0 && s.value && e.expandOnContentDrag && (l.value -= u.delta.y), l.value <= _.value && (l.value = _.value, s.value && e.expandOnContentDrag && (v.value += u.delta.y), v.value = b(v.value, { min: 0, max: _.value }), S.set(
|
|
253
|
+
e.canSwipeClose ? b(v.value, { min: 0 }) : b(ne(v.value, -w.value, 0, 0.5), {
|
|
240
254
|
min: 0
|
|
241
255
|
})
|
|
242
|
-
)), l.value > R.value && (l.value = R.value), l.value =
|
|
256
|
+
)), l.value > R.value && (l.value = R.value), l.value = b(l.value, { max: c.value }), U.value.length === 1 || l.value === R.value && (s.value = !1), k.set(l.value), ve(u.delta.y);
|
|
243
257
|
}, ke = () => {
|
|
244
|
-
e.blocking || (
|
|
258
|
+
e.blocking || (L.value = !0, z.value = !0);
|
|
245
259
|
}, we = () => {
|
|
246
|
-
e.blocking || (
|
|
260
|
+
e.blocking || (L.value = !1, z.value = !1);
|
|
247
261
|
}, Ce = () => {
|
|
248
262
|
if (!g.value) return;
|
|
249
263
|
const t = g.value.scrollTop === 0;
|
|
250
|
-
|
|
251
|
-
}, Te =
|
|
264
|
+
s.value = t;
|
|
265
|
+
}, Te = $e((t) => se(t), {
|
|
252
266
|
minQuietPeriodMs: e.duration,
|
|
253
267
|
reducer: (t, u) => u
|
|
254
268
|
});
|
|
255
|
-
return
|
|
256
|
-
if (
|
|
257
|
-
const
|
|
258
|
-
typeof
|
|
259
|
-
max:
|
|
260
|
-
}),
|
|
269
|
+
return q(d, (t, u) => {
|
|
270
|
+
if (y.value === !1 || !t || !u) return;
|
|
271
|
+
const f = t[I.value], C = u[I.value];
|
|
272
|
+
typeof f != "string" && typeof C != "string" && (l.value = b(f, {
|
|
273
|
+
max: c.value
|
|
274
|
+
}), f !== C && (M = O(k, l.value, {
|
|
261
275
|
duration: e.duration / 1e3,
|
|
262
276
|
ease: "easeInOut"
|
|
263
277
|
})));
|
|
264
|
-
}),
|
|
278
|
+
}), q(c, () => {
|
|
265
279
|
Te.call(I.value);
|
|
266
|
-
}),
|
|
267
|
-
|
|
268
|
-
}),
|
|
269
|
-
|
|
270
|
-
}), a({ open:
|
|
271
|
-
|
|
272
|
-
$(
|
|
273
|
-
default:
|
|
274
|
-
|
|
280
|
+
}), q(K, (t) => {
|
|
281
|
+
i("instinctHeight", t);
|
|
282
|
+
}), Oe(() => {
|
|
283
|
+
Y.deactivate();
|
|
284
|
+
}), a({ open: J, close: j, snapToPoint: se }), (t, u) => (ee(), Z(Ie, { to: "body" }, [
|
|
285
|
+
te("div", je, [
|
|
286
|
+
$(m(pe), null, {
|
|
287
|
+
default: B(() => [
|
|
288
|
+
m(y) && t.blocking ? (ee(), Z(m(A), {
|
|
275
289
|
key: 0,
|
|
276
290
|
ref_key: "backdrop",
|
|
277
291
|
ref: H,
|
|
278
292
|
"data-vsbs-backdrop": "",
|
|
279
|
-
onClick: u[0] || (u[0] = (
|
|
293
|
+
onClick: u[0] || (u[0] = (f) => ye()),
|
|
280
294
|
transition: {
|
|
281
295
|
ease: "easeInOut",
|
|
282
296
|
duration: t.duration / 1e3
|
|
@@ -284,98 +298,98 @@ const Ve = { "data-vsbs-container": "" }, ze = /* @__PURE__ */ xe({
|
|
|
284
298
|
initial: { opacity: 0 },
|
|
285
299
|
animate: { opacity: 1 },
|
|
286
300
|
exit: { opacity: 0 }
|
|
287
|
-
}, null, 8, ["transition"])) :
|
|
301
|
+
}, null, 8, ["transition"])) : fe("", !0)
|
|
288
302
|
]),
|
|
289
303
|
_: 1
|
|
290
304
|
}),
|
|
291
|
-
$(
|
|
292
|
-
default:
|
|
293
|
-
|
|
305
|
+
$(m(pe), null, {
|
|
306
|
+
default: B(() => [
|
|
307
|
+
m(y) ? (ee(), Z(m(A), {
|
|
294
308
|
key: 0,
|
|
295
309
|
ref_key: "sheet",
|
|
296
|
-
ref:
|
|
297
|
-
exit: { y: "100%", height:
|
|
310
|
+
ref: r,
|
|
311
|
+
exit: { y: "100%", height: m(w) },
|
|
298
312
|
initial: { y: "100%" },
|
|
299
|
-
style:
|
|
313
|
+
style: Be({ y: m(S), height: m(k) }),
|
|
300
314
|
"data-vsbs-shadow": !t.blocking,
|
|
301
|
-
"data-vsbs-sheet-show":
|
|
315
|
+
"data-vsbs-sheet-show": m(y),
|
|
302
316
|
"aria-modal": "true",
|
|
303
317
|
"data-vsbs-sheet": "",
|
|
304
318
|
tabindex: "-1",
|
|
305
319
|
onTouchstart: ke,
|
|
306
320
|
onTouchend: we
|
|
307
321
|
}, {
|
|
308
|
-
default:
|
|
309
|
-
$(
|
|
322
|
+
default: B(() => [
|
|
323
|
+
$(m(A), {
|
|
310
324
|
ref_key: "sheetHeader",
|
|
311
325
|
ref: p,
|
|
312
326
|
"data-vsbs-header": "",
|
|
313
|
-
onPanStart:
|
|
314
|
-
onPan:
|
|
315
|
-
onPanEnd:
|
|
316
|
-
onTouchmove:
|
|
327
|
+
onPanStart: de,
|
|
328
|
+
onPan: ce,
|
|
329
|
+
onPanEnd: X,
|
|
330
|
+
onTouchmove: ue
|
|
317
331
|
}, {
|
|
318
|
-
default:
|
|
319
|
-
|
|
332
|
+
default: B(() => [
|
|
333
|
+
ae(t.$slots, "header", {}, void 0, !0)
|
|
320
334
|
]),
|
|
321
335
|
_: 3
|
|
322
336
|
}, 512),
|
|
323
|
-
|
|
337
|
+
te("div", {
|
|
324
338
|
ref_key: "sheetScroll",
|
|
325
339
|
ref: g,
|
|
326
340
|
"data-vsbs-scroll": "",
|
|
327
341
|
onScrollend: Ce
|
|
328
342
|
}, [
|
|
329
|
-
$(
|
|
343
|
+
$(m(A), {
|
|
330
344
|
ref_key: "sheetContentWrapper",
|
|
331
345
|
ref: x,
|
|
332
346
|
"data-vsbs-content-wrapper": "",
|
|
333
347
|
onPanStart: Se,
|
|
334
348
|
onPan: Pe,
|
|
335
|
-
onPanEnd:
|
|
336
|
-
onTouchmove:
|
|
349
|
+
onPanEnd: X,
|
|
350
|
+
onTouchmove: ie
|
|
337
351
|
}, {
|
|
338
|
-
default:
|
|
339
|
-
|
|
352
|
+
default: B(() => [
|
|
353
|
+
te("div", {
|
|
340
354
|
ref_key: "sheetContent",
|
|
341
355
|
ref: D,
|
|
342
356
|
"data-vsbs-content": ""
|
|
343
357
|
}, [
|
|
344
|
-
|
|
358
|
+
ae(t.$slots, "default", {}, void 0, !0)
|
|
345
359
|
], 512)
|
|
346
360
|
]),
|
|
347
361
|
_: 3
|
|
348
362
|
}, 512)
|
|
349
363
|
], 544),
|
|
350
|
-
$(
|
|
364
|
+
$(m(A), {
|
|
351
365
|
ref_key: "sheetFooter",
|
|
352
|
-
ref:
|
|
366
|
+
ref: h,
|
|
353
367
|
"data-vsbs-footer": "",
|
|
354
|
-
onPanStart:
|
|
355
|
-
onPan:
|
|
356
|
-
onPanEnd:
|
|
357
|
-
onTouchmove:
|
|
368
|
+
onPanStart: de,
|
|
369
|
+
onPan: ce,
|
|
370
|
+
onPanEnd: X,
|
|
371
|
+
onTouchmove: ue
|
|
358
372
|
}, {
|
|
359
|
-
default:
|
|
360
|
-
|
|
373
|
+
default: B(() => [
|
|
374
|
+
ae(t.$slots, "footer", {}, void 0, !0)
|
|
361
375
|
]),
|
|
362
376
|
_: 3
|
|
363
377
|
}, 512)
|
|
364
378
|
]),
|
|
365
379
|
_: 3
|
|
366
|
-
}, 8, ["exit", "style", "data-vsbs-shadow", "data-vsbs-sheet-show"])) :
|
|
380
|
+
}, 8, ["exit", "style", "data-vsbs-shadow", "data-vsbs-sheet-show"])) : fe("", !0)
|
|
367
381
|
]),
|
|
368
382
|
_: 3
|
|
369
383
|
})
|
|
370
384
|
])
|
|
371
385
|
]));
|
|
372
386
|
}
|
|
373
|
-
}),
|
|
387
|
+
}), Ne = (n, a) => {
|
|
374
388
|
const o = n.__vccOpts || n;
|
|
375
|
-
for (const [e,
|
|
376
|
-
o[e] =
|
|
389
|
+
for (const [e, i] of a)
|
|
390
|
+
o[e] = i;
|
|
377
391
|
return o;
|
|
378
|
-
},
|
|
392
|
+
}, Ye = /* @__PURE__ */ Ne(qe, [["__scopeId", "data-v-20d4973e"]]);
|
|
379
393
|
export {
|
|
380
|
-
|
|
394
|
+
Ye as default
|
|
381
395
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-container][data-v-
|
|
1
|
+
[data-vsbs-container][data-v-20d4973e]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:9999;visibility:visible}[data-vsbs-backdrop][data-v-20d4973e]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));top:0;right:0;bottom:0;left:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;z-index:1}[data-vsbs-shadow=true][data-v-20d4973e]:before{content:"";z-index:-1;position:absolute;top:0;height:100lvh;width:100%;border-radius:var(--vsbs-border-radius, 16px);box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-20d4973e]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);bottom:0;display:flex;flex-direction:column;left:0;margin-left:auto;margin-right:auto;max-height:inherit;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-20d4973e]{visibility:visible}[data-vsbs-header][data-v-20d4973e]{box-shadow:0 1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-shrink:0;padding:20px var(--vsbs-padding-x, 16px) 8px;-webkit-user-select:none;user-select:none;z-index:3}[data-vsbs-header][data-v-20d4973e]:before{background-color:var(--vsbs-handle-background, rgba(0, 0, 0, .28));border-radius:2px;content:"";display:block;height:4px;left:50%;position:absolute;top:8px;transform:translate(-50%);width:36px}[data-vsbs-header][data-v-20d4973e]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-20d4973e]{box-shadow:0 -1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-grow:0;flex-shrink:0;padding:16px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}[data-vsbs-footer][data-v-20d4973e]:empty{display:none}[data-vsbs-scroll][data-v-20d4973e]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-20d4973e]{height:100%}[data-vsbs-content][data-v-20d4973e]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
|
package/dist/types.d.ts
CHANGED