@douxcode/vue-spring-bottom-sheet 2.0.4 → 2.1.0
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 +175 -155
- package/dist/BottomSheet.d.ts +2 -0
- package/dist/index.mjs +178 -169
- 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,175 @@
|
|
|
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
|
+
|
|
166
|
+
## Acknowledgments
|
|
167
|
+
|
|
168
|
+
This project was inspired by the following:
|
|
169
|
+
|
|
170
|
+
- [react-spring-bottom-sheet]: Accessible ♿️, Delightful ✨, & Fast 🚀
|
|
171
|
+
- [@webzlodimir/vue-bottom-sheet]: 🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3
|
|
172
|
+
|
|
173
|
+
[motion-v]: https://motion.unovue.com/
|
|
174
|
+
[react-spring-bottom-sheet]: https://react-spring.bottom-sheet.dev/
|
|
175
|
+
[@webzlodimir/vue-bottom-sheet]: https://github.com/vaban-ru/vue-bottom-sheet
|
package/dist/BottomSheet.d.ts
CHANGED
|
@@ -29,6 +29,7 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
|
|
|
29
29
|
"dragging-up": () => any;
|
|
30
30
|
"dragging-down": () => any;
|
|
31
31
|
instinctHeight: (instinctHeight: number) => any;
|
|
32
|
+
"update:modelValue": () => any;
|
|
32
33
|
}, string, import('vue').PublicProps, Readonly<BottomSheetProps> & Readonly<{
|
|
33
34
|
onOpened?: (() => any) | undefined;
|
|
34
35
|
onClosed?: (() => any) | undefined;
|
|
@@ -36,6 +37,7 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
|
|
|
36
37
|
"onDragging-up"?: (() => any) | undefined;
|
|
37
38
|
"onDragging-down"?: (() => any) | undefined;
|
|
38
39
|
onInstinctHeight?: ((instinctHeight: number) => any) | undefined;
|
|
40
|
+
"onUpdate:modelValue"?: (() => any) | undefined;
|
|
39
41
|
}>, {
|
|
40
42
|
duration: number;
|
|
41
43
|
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 F, 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 $ } 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 f =
|
|
9
|
+
function Ve(n, a, o) {
|
|
10
|
+
const e = P(0), i = E(() => n.value.map((f) => typeof f == "string" ? G(f, o.value) : f)), y = E(() => Math.min(...i.value)), r = E(() => Math.max(...i.value)), p = E(() => {
|
|
11
|
+
const f = 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(f);
|
|
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, f, g, x = () => {
|
|
36
|
+
let s = f;
|
|
37
|
+
s !== void 0 && (f = 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 d =
|
|
45
|
-
if ((a !== "start" || d) && (f =
|
|
46
|
-
if (o !== void 0 || e !== void 0 ||
|
|
47
|
-
clearTimeout(
|
|
43
|
+
return { call: (...s) => {
|
|
44
|
+
let d = r === void 0 && p === void 0;
|
|
45
|
+
if ((a !== "start" || d) && (f = y(f, ...s)), !(r === void 0 && !d)) {
|
|
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
|
-
let
|
|
51
|
-
|
|
50
|
+
let A = e === void 0 ? o ?? 0 : Math.min(o ?? e, e - (w - g));
|
|
51
|
+
r = setTimeout(H, A);
|
|
52
52
|
}
|
|
53
53
|
a !== "end" && d && x();
|
|
54
54
|
}
|
|
55
55
|
}, cancel: () => {
|
|
56
|
-
clearTimeout(
|
|
56
|
+
clearTimeout(r), r = void 0, g = void 0, clearTimeout(p), p = void 0, f = 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,83 +86,92 @@ 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", "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), f = P(null), g = P(null), x = P(null), D = P(null), H = P(null), s = P(e.expandOnContentDrag), { height: d } = De(), { height: w } = Q(r), { height: A } = Q(p), { height: oe } = Q(D), { height: le } = Q(f), K = E({
|
|
94
103
|
get() {
|
|
95
|
-
return
|
|
96
|
-
Math.ceil(
|
|
104
|
+
return b(
|
|
105
|
+
Math.ceil(oe.value + A.value + le.value),
|
|
97
106
|
{
|
|
98
107
|
max: d.value
|
|
99
108
|
}
|
|
100
109
|
);
|
|
101
110
|
},
|
|
102
111
|
set(t) {
|
|
103
|
-
[
|
|
112
|
+
[A.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), h = E(() => be.value ?? [K.value]), {
|
|
115
|
+
flattenedSnapPoints: U,
|
|
107
116
|
currentSnapPointIndex: I,
|
|
108
|
-
closestSnapPointIndex:
|
|
109
|
-
minSnapPoint:
|
|
110
|
-
maxSnapPoint:
|
|
111
|
-
} =
|
|
112
|
-
let
|
|
113
|
-
const
|
|
117
|
+
closestSnapPointIndex: W,
|
|
118
|
+
minSnapPoint: _,
|
|
119
|
+
maxSnapPoint: V
|
|
120
|
+
} = Ve(h, l, d);
|
|
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);
|
|
122
128
|
}
|
|
123
|
-
|
|
129
|
+
function ie(t) {
|
|
130
|
+
s.value && t.preventDefault();
|
|
131
|
+
}
|
|
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
140
|
const u = t.querySelector("[data-vsbs-content]"), c = t.querySelector("[data-vsbs-header]"), C = t.querySelector("[data-vsbs-footer]");
|
|
132
|
-
if (
|
|
141
|
+
if (K.value = [
|
|
133
142
|
c.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
149
|
if (T < 0 || T >= h.value.length) {
|
|
141
150
|
console.warn("Index out of bounds");
|
|
142
151
|
return;
|
|
143
152
|
}
|
|
144
|
-
let
|
|
145
|
-
typeof h.value[T] == "number" ?
|
|
153
|
+
let R;
|
|
154
|
+
typeof h.value[T] == "number" ? R = b(h.value[T], {
|
|
146
155
|
max: d.value
|
|
147
|
-
}) :
|
|
156
|
+
}) : R = G(h.value[T], d.value), l.value = R;
|
|
148
157
|
} else
|
|
149
|
-
l.value =
|
|
158
|
+
l.value = b(_.value, {
|
|
150
159
|
max: d.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
|
-
},
|
|
174
|
+
}, se = (t) => {
|
|
166
175
|
if (!h.value) return;
|
|
167
176
|
if (t < 0 || t >= h.value.length) {
|
|
168
177
|
console.warn("Index out of bounds");
|
|
@@ -170,113 +179,113 @@ const Ve = { "data-vsbs-container": "" }, ze = /* @__PURE__ */ xe({
|
|
|
170
179
|
}
|
|
171
180
|
I.value = t;
|
|
172
181
|
let u;
|
|
173
|
-
typeof h.value[t] == "number" ? u =
|
|
182
|
+
typeof h.value[t] == "number" ? u = b(h.value[t], {
|
|
174
183
|
max: d.value
|
|
175
|
-
}) : u =
|
|
184
|
+
}) : u = G(h.value[t], d.value), l.value = u, M = O(k, l.value, {
|
|
176
185
|
duration: e.duration / 1e3,
|
|
177
186
|
ease: "easeInOut"
|
|
178
187
|
});
|
|
179
188
|
};
|
|
180
|
-
function
|
|
181
|
-
t > 0 ?
|
|
189
|
+
function ve(t) {
|
|
190
|
+
t > 0 ? i("dragging-down") : t < 0 && i("dragging-up");
|
|
182
191
|
}
|
|
183
|
-
const
|
|
184
|
-
l.value = w.value,
|
|
185
|
-
},
|
|
186
|
-
await
|
|
187
|
-
e.canSwipeClose ?
|
|
192
|
+
const de = () => {
|
|
193
|
+
l.value = w.value, v.value = S.get(), k.jump(l.value), S.jump(v.value);
|
|
194
|
+
}, ce = async (t, u) => {
|
|
195
|
+
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(
|
|
196
|
+
e.canSwipeClose ? b(v.value, { min: 0 }) : b(ne(v.value, -w.value, 0, 0.5), {
|
|
188
197
|
min: 0
|
|
189
198
|
})
|
|
190
|
-
)),
|
|
191
|
-
|
|
199
|
+
)), k.set(
|
|
200
|
+
b(ne(l.value, 0, V.value, 0.25), {
|
|
192
201
|
min: 0,
|
|
193
202
|
max: d.value
|
|
194
203
|
})
|
|
195
|
-
),
|
|
196
|
-
},
|
|
197
|
-
|
|
198
|
-
(u, c) => Math.abs(c -
|
|
199
|
-
) : 0,
|
|
204
|
+
), ve(u.delta.y));
|
|
205
|
+
}, X = () => {
|
|
206
|
+
v.value = e.canSwipeClose ? [0, l.value].reduce(
|
|
207
|
+
(u, c) => Math.abs(c - v.value) < Math.abs(u - v.value) ? c : u
|
|
208
|
+
) : 0, M = O(S, v.value, {
|
|
200
209
|
duration: e.duration / 1e3,
|
|
201
210
|
ease: "easeInOut"
|
|
202
|
-
}),
|
|
211
|
+
}), v.value === l.value && (v.value = 0, j()), I.value = W.value;
|
|
203
212
|
let t;
|
|
204
|
-
typeof h.value[
|
|
213
|
+
typeof h.value[W.value] == "number" ? t = b(h.value[W.value], {
|
|
205
214
|
max: d.value
|
|
206
|
-
}) : t =
|
|
207
|
-
h.value[
|
|
215
|
+
}) : t = G(
|
|
216
|
+
h.value[W.value],
|
|
208
217
|
d.value
|
|
209
|
-
), l.value = t,
|
|
218
|
+
), l.value = t, M = O(k, l.value, {
|
|
210
219
|
duration: e.duration / 1e3,
|
|
211
220
|
ease: "easeInOut"
|
|
212
|
-
}),
|
|
221
|
+
}), M = O(S, 0, {
|
|
213
222
|
duration: e.duration / 1e3,
|
|
214
223
|
ease: "easeInOut"
|
|
215
224
|
});
|
|
216
225
|
}, Se = (t, u) => {
|
|
217
|
-
if (l.value = w.value,
|
|
218
|
-
const c = g.value.scrollTop === 0, C = u.delta.y > 0, T =
|
|
226
|
+
if (l.value = w.value, v.value = S.get(), M.stop(), !g.value) return;
|
|
227
|
+
const c = g.value.scrollTop === 0, C = u.delta.y > 0, T = U.value.length === 1, R = 0.5 > Math.abs(l.value - V.value);
|
|
219
228
|
if (T) {
|
|
220
229
|
if (!e.expandOnContentDrag) {
|
|
221
|
-
|
|
230
|
+
s.value = !1;
|
|
222
231
|
return;
|
|
223
232
|
}
|
|
224
|
-
|
|
233
|
+
S.get() === 0 && c && C && (s.value = !0), S.get() === 0 && c && !C && (s.value = !1);
|
|
225
234
|
} else {
|
|
226
235
|
if (!e.expandOnContentDrag) {
|
|
227
|
-
|
|
236
|
+
s.value = !1;
|
|
228
237
|
return;
|
|
229
238
|
}
|
|
230
|
-
|
|
239
|
+
s.value = !0, R && (C && c && (s.value = !0), !C && c && (s.value = !1), c || (s.value = !1));
|
|
231
240
|
}
|
|
232
241
|
}, Pe = async (t, u) => {
|
|
233
|
-
if (await
|
|
234
|
-
|
|
242
|
+
if (await N(), !e.expandOnContentDrag) {
|
|
243
|
+
s.value = !1;
|
|
235
244
|
return;
|
|
236
245
|
}
|
|
237
|
-
if (!
|
|
238
|
-
|
|
239
|
-
e.canSwipeClose ?
|
|
246
|
+
if (!r.value) return;
|
|
247
|
+
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(
|
|
248
|
+
e.canSwipeClose ? b(v.value, { min: 0 }) : b(ne(v.value, -w.value, 0, 0.5), {
|
|
240
249
|
min: 0
|
|
241
250
|
})
|
|
242
|
-
)), l.value >
|
|
251
|
+
)), l.value > V.value && (l.value = V.value), l.value = b(l.value, { max: d.value }), U.value.length === 1 || l.value === V.value && (s.value = !1), k.set(l.value), ve(u.delta.y);
|
|
243
252
|
}, ke = () => {
|
|
244
|
-
e.blocking || (
|
|
253
|
+
e.blocking || (L.value = !0, z.value = !0);
|
|
245
254
|
}, we = () => {
|
|
246
|
-
e.blocking || (
|
|
255
|
+
e.blocking || (L.value = !1, z.value = !1);
|
|
247
256
|
}, Ce = () => {
|
|
248
257
|
if (!g.value) return;
|
|
249
258
|
const t = g.value.scrollTop === 0;
|
|
250
|
-
|
|
251
|
-
}, Te =
|
|
259
|
+
s.value = t;
|
|
260
|
+
}, Te = $e((t) => se(t), {
|
|
252
261
|
minQuietPeriodMs: e.duration,
|
|
253
262
|
reducer: (t, u) => u
|
|
254
263
|
});
|
|
255
|
-
return
|
|
256
|
-
if (
|
|
264
|
+
return q(h, (t, u) => {
|
|
265
|
+
if (y.value === !1 || !t || !u) return;
|
|
257
266
|
const c = t[I.value], C = u[I.value];
|
|
258
|
-
typeof c != "string" && typeof C != "string" && (l.value =
|
|
267
|
+
typeof c != "string" && typeof C != "string" && (l.value = b(c, {
|
|
259
268
|
max: d.value
|
|
260
|
-
}), c !== C && (
|
|
269
|
+
}), c !== C && (M = O(k, l.value, {
|
|
261
270
|
duration: e.duration / 1e3,
|
|
262
271
|
ease: "easeInOut"
|
|
263
272
|
})));
|
|
264
|
-
}),
|
|
273
|
+
}), q(d, () => {
|
|
265
274
|
Te.call(I.value);
|
|
266
|
-
}),
|
|
267
|
-
|
|
268
|
-
}),
|
|
269
|
-
|
|
270
|
-
}), a({ open:
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
default:
|
|
274
|
-
|
|
275
|
+
}), q(K, (t) => {
|
|
276
|
+
i("instinctHeight", t);
|
|
277
|
+
}), Oe(() => {
|
|
278
|
+
Y.deactivate();
|
|
279
|
+
}), a({ open: J, close: j, snapToPoint: se }), (t, u) => (ee(), Z(Ie, { to: "body" }, [
|
|
280
|
+
te("div", je, [
|
|
281
|
+
F(m(pe), null, {
|
|
282
|
+
default: B(() => [
|
|
283
|
+
m(y) && t.blocking ? (ee(), Z(m($), {
|
|
275
284
|
key: 0,
|
|
276
285
|
ref_key: "backdrop",
|
|
277
286
|
ref: H,
|
|
278
287
|
"data-vsbs-backdrop": "",
|
|
279
|
-
onClick: u[0] || (u[0] = (c) =>
|
|
288
|
+
onClick: u[0] || (u[0] = (c) => ye()),
|
|
280
289
|
transition: {
|
|
281
290
|
ease: "easeInOut",
|
|
282
291
|
duration: t.duration / 1e3
|
|
@@ -284,98 +293,98 @@ const Ve = { "data-vsbs-container": "" }, ze = /* @__PURE__ */ xe({
|
|
|
284
293
|
initial: { opacity: 0 },
|
|
285
294
|
animate: { opacity: 1 },
|
|
286
295
|
exit: { opacity: 0 }
|
|
287
|
-
}, null, 8, ["transition"])) :
|
|
296
|
+
}, null, 8, ["transition"])) : fe("", !0)
|
|
288
297
|
]),
|
|
289
298
|
_: 1
|
|
290
299
|
}),
|
|
291
|
-
|
|
292
|
-
default:
|
|
293
|
-
|
|
300
|
+
F(m(pe), null, {
|
|
301
|
+
default: B(() => [
|
|
302
|
+
m(y) ? (ee(), Z(m($), {
|
|
294
303
|
key: 0,
|
|
295
304
|
ref_key: "sheet",
|
|
296
|
-
ref:
|
|
297
|
-
exit: { y: "100%", height:
|
|
305
|
+
ref: r,
|
|
306
|
+
exit: { y: "100%", height: m(w) },
|
|
298
307
|
initial: { y: "100%" },
|
|
299
|
-
style:
|
|
308
|
+
style: Be({ y: m(S), height: m(k) }),
|
|
300
309
|
"data-vsbs-shadow": !t.blocking,
|
|
301
|
-
"data-vsbs-sheet-show":
|
|
310
|
+
"data-vsbs-sheet-show": m(y),
|
|
302
311
|
"aria-modal": "true",
|
|
303
312
|
"data-vsbs-sheet": "",
|
|
304
313
|
tabindex: "-1",
|
|
305
314
|
onTouchstart: ke,
|
|
306
315
|
onTouchend: we
|
|
307
316
|
}, {
|
|
308
|
-
default:
|
|
309
|
-
|
|
317
|
+
default: B(() => [
|
|
318
|
+
F(m($), {
|
|
310
319
|
ref_key: "sheetHeader",
|
|
311
320
|
ref: p,
|
|
312
321
|
"data-vsbs-header": "",
|
|
313
|
-
onPanStart:
|
|
314
|
-
onPan:
|
|
315
|
-
onPanEnd:
|
|
316
|
-
onTouchmove:
|
|
322
|
+
onPanStart: de,
|
|
323
|
+
onPan: ce,
|
|
324
|
+
onPanEnd: X,
|
|
325
|
+
onTouchmove: ue
|
|
317
326
|
}, {
|
|
318
|
-
default:
|
|
319
|
-
|
|
327
|
+
default: B(() => [
|
|
328
|
+
ae(t.$slots, "header", {}, void 0, !0)
|
|
320
329
|
]),
|
|
321
330
|
_: 3
|
|
322
331
|
}, 512),
|
|
323
|
-
|
|
332
|
+
te("div", {
|
|
324
333
|
ref_key: "sheetScroll",
|
|
325
334
|
ref: g,
|
|
326
335
|
"data-vsbs-scroll": "",
|
|
327
336
|
onScrollend: Ce
|
|
328
337
|
}, [
|
|
329
|
-
|
|
338
|
+
F(m($), {
|
|
330
339
|
ref_key: "sheetContentWrapper",
|
|
331
340
|
ref: x,
|
|
332
341
|
"data-vsbs-content-wrapper": "",
|
|
333
342
|
onPanStart: Se,
|
|
334
343
|
onPan: Pe,
|
|
335
|
-
onPanEnd:
|
|
336
|
-
onTouchmove:
|
|
344
|
+
onPanEnd: X,
|
|
345
|
+
onTouchmove: ie
|
|
337
346
|
}, {
|
|
338
|
-
default:
|
|
339
|
-
|
|
347
|
+
default: B(() => [
|
|
348
|
+
te("div", {
|
|
340
349
|
ref_key: "sheetContent",
|
|
341
350
|
ref: D,
|
|
342
351
|
"data-vsbs-content": ""
|
|
343
352
|
}, [
|
|
344
|
-
|
|
353
|
+
ae(t.$slots, "default", {}, void 0, !0)
|
|
345
354
|
], 512)
|
|
346
355
|
]),
|
|
347
356
|
_: 3
|
|
348
357
|
}, 512)
|
|
349
358
|
], 544),
|
|
350
|
-
|
|
359
|
+
F(m($), {
|
|
351
360
|
ref_key: "sheetFooter",
|
|
352
361
|
ref: f,
|
|
353
362
|
"data-vsbs-footer": "",
|
|
354
|
-
onPanStart:
|
|
355
|
-
onPan:
|
|
356
|
-
onPanEnd:
|
|
357
|
-
onTouchmove:
|
|
363
|
+
onPanStart: de,
|
|
364
|
+
onPan: ce,
|
|
365
|
+
onPanEnd: X,
|
|
366
|
+
onTouchmove: ue
|
|
358
367
|
}, {
|
|
359
|
-
default:
|
|
360
|
-
|
|
368
|
+
default: B(() => [
|
|
369
|
+
ae(t.$slots, "footer", {}, void 0, !0)
|
|
361
370
|
]),
|
|
362
371
|
_: 3
|
|
363
372
|
}, 512)
|
|
364
373
|
]),
|
|
365
374
|
_: 3
|
|
366
|
-
}, 8, ["exit", "style", "data-vsbs-shadow", "data-vsbs-sheet-show"])) :
|
|
375
|
+
}, 8, ["exit", "style", "data-vsbs-shadow", "data-vsbs-sheet-show"])) : fe("", !0)
|
|
367
376
|
]),
|
|
368
377
|
_: 3
|
|
369
378
|
})
|
|
370
379
|
])
|
|
371
380
|
]));
|
|
372
381
|
}
|
|
373
|
-
}),
|
|
382
|
+
}), Ne = (n, a) => {
|
|
374
383
|
const o = n.__vccOpts || n;
|
|
375
|
-
for (const [e,
|
|
376
|
-
o[e] =
|
|
384
|
+
for (const [e, i] of a)
|
|
385
|
+
o[e] = i;
|
|
377
386
|
return o;
|
|
378
|
-
},
|
|
387
|
+
}, Ye = /* @__PURE__ */ Ne(qe, [["__scopeId", "data-v-6364f6e9"]]);
|
|
379
388
|
export {
|
|
380
|
-
|
|
389
|
+
Ye as default
|
|
381
390
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-container][data-v-
|
|
1
|
+
[data-vsbs-container][data-v-6364f6e9]{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-6364f6e9]{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-6364f6e9]: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-6364f6e9]{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-6364f6e9]{visibility:visible}[data-vsbs-header][data-v-6364f6e9]{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-6364f6e9]: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-6364f6e9]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-6364f6e9]{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-6364f6e9]:empty{display:none}[data-vsbs-scroll][data-v-6364f6e9]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-6364f6e9]{height:100%}[data-vsbs-content][data-v-6364f6e9]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
|
package/dist/types.d.ts
CHANGED