@douxcode/vue-spring-bottom-sheet 1.2.2 → 1.2.4
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 +12 -8
- package/dist/BottomSheet.d.ts +3 -11
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +3 -3
- package/dist/style.css +1 -1
- package/dist/types.d.ts +9 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -4,7 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
😎 **Modern** and 🚀 **Performant** Bottom Sheet for Vue.js
|
|
6
6
|
|
|
7
|
-
[Demo](https://
|
|
7
|
+
[Demo](https://vue-spring-bottom-sheet.douxcode.com/) 👀
|
|
8
|
+
|
|
9
|
+
|  |  |  |  |
|
|
10
|
+
| :-----------------------------------------------------------------: | :----------------------------------------------------------------: | :--------------------------------------------------------------------: | :------------------------------------------------------------------: |
|
|
8
11
|
|
|
9
12
|
# Installation
|
|
10
13
|
|
|
@@ -127,13 +130,14 @@ Assuming there is `const bottomSheet = ref()`
|
|
|
127
130
|
|
|
128
131
|
## Events
|
|
129
132
|
|
|
130
|
-
| Event | Description
|
|
131
|
-
| ------------- |
|
|
132
|
-
| min-height | Fires when the minimum height of the sheet changes. Passes the value as an argument.
|
|
133
|
-
|
|
|
134
|
-
| dragging-
|
|
135
|
-
|
|
|
136
|
-
|
|
|
133
|
+
| Event | Description | Example |
|
|
134
|
+
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
|
|
135
|
+
| min-height | Fires when the minimum height of the sheet changes. Passes the value as an argument. | `@min-height="(n) => {}"` |
|
|
136
|
+
| max-height | Fires when the height of the window changes. Passes the value as an argument. Note that this value is throttled to prevent excessive updates. | `@max-height="(n) => {}"` |
|
|
137
|
+
| dragging-up | Fires when the bottom sheet is being dragged up | `@dragging-up="() => {}"` |
|
|
138
|
+
| dragging-down | Fires when the bottom sheet is being dragged down | `@dragging-down="() => {}"` |
|
|
139
|
+
| opened | Fires when the bottom sheet is opened | `@opened="() => {}"` |
|
|
140
|
+
| closed | Fires when the bottom sheet is closed | `@closed="() => {}"` |
|
|
137
141
|
|
|
138
142
|
## Acknowledgments
|
|
139
143
|
|
package/dist/BottomSheet.d.ts
CHANGED
|
@@ -1,12 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
duration?: number;
|
|
3
|
-
snapPoints?: number[];
|
|
4
|
-
defaultSnapPoint?: number;
|
|
5
|
-
blocking?: boolean;
|
|
6
|
-
canSwipeClose?: boolean;
|
|
7
|
-
canBackdropClose?: boolean;
|
|
8
|
-
expandOnContentDrag?: boolean;
|
|
9
|
-
}
|
|
1
|
+
import { BottomSheetProps } from './types.ts';
|
|
10
2
|
declare function __VLS_template(): {
|
|
11
3
|
attrs: Partial<{}>;
|
|
12
4
|
slots: {
|
|
@@ -26,7 +18,7 @@ declare function __VLS_template(): {
|
|
|
26
18
|
rootEl: any;
|
|
27
19
|
};
|
|
28
20
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
29
|
-
declare const __VLS_component: import('vue').DefineComponent<
|
|
21
|
+
declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
|
|
30
22
|
open: () => void;
|
|
31
23
|
close: () => void;
|
|
32
24
|
snapToPoint: (snapPoint: number) => void;
|
|
@@ -38,7 +30,7 @@ declare const __VLS_component: import('vue').DefineComponent<IProps, {
|
|
|
38
30
|
"dragging-down": () => any;
|
|
39
31
|
minHeight: (minSheetHeight: number) => any;
|
|
40
32
|
maxHeight: (maxSheetHeight: number) => any;
|
|
41
|
-
}, string, import('vue').PublicProps, Readonly<
|
|
33
|
+
}, string, import('vue').PublicProps, Readonly<BottomSheetProps> & Readonly<{
|
|
42
34
|
onOpened?: (() => any) | undefined;
|
|
43
35
|
onClosed?: (() => any) | undefined;
|
|
44
36
|
onReady?: (() => any) | undefined;
|
package/dist/index.d.ts
CHANGED
package/dist/index.mjs
CHANGED
|
@@ -75,8 +75,8 @@ const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
75
75
|
emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
|
|
76
76
|
setup(n, { expose: u, emit: a }) {
|
|
77
77
|
de((i) => ({
|
|
78
|
-
"
|
|
79
|
-
|
|
78
|
+
"3f3c238a": te.value,
|
|
79
|
+
eba134fc: ae.value
|
|
80
80
|
}));
|
|
81
81
|
const e = n, o = a, v = p(null), s = p(null), r = p(null), f = p(null), S = p(null), C = p(null), O = p(null), w = p(!1), d = p(e.expandOnContentDrag), { height: g } = ke(), { height: h } = I(v), { height: W } = I(s), { height: Y } = I(r), { height: ee } = I(C), G = xe([v, O], {
|
|
82
82
|
immediate: !1,
|
|
@@ -294,7 +294,7 @@ const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
294
294
|
for (const [e, o] of u)
|
|
295
295
|
a[e] = o;
|
|
296
296
|
return a;
|
|
297
|
-
}, Re = /* @__PURE__ */ We($e, [["__scopeId", "data-v-
|
|
297
|
+
}, Re = /* @__PURE__ */ We($e, [["__scopeId", "data-v-2b4a4b0c"]]);
|
|
298
298
|
export {
|
|
299
299
|
Re as default
|
|
300
300
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-container][data-v-
|
|
1
|
+
[data-vsbs-container][data-v-2b4a4b0c]{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-2b4a4b0c]{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-2b4a4b0c]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-2b4a4b0c]{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;transition:var(--3f3c238a);visibility:hidden;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-2b4a4b0c]{visibility:visible}[data-vsbs-header][data-v-2b4a4b0c]{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-2b4a4b0c]: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-2b4a4b0c]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-2b4a4b0c]{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-2b4a4b0c]:empty{display:none}[data-vsbs-scroll][data-v-2b4a4b0c]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-2b4a4b0c]{height:100%}[data-vsbs-content][data-v-2b4a4b0c]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-2b4a4b0c],.fade-leave-active[data-v-2b4a4b0c]{transition:var(--eba134fc)}.fade-enter-from[data-v-2b4a4b0c],.fade-leave-to[data-v-2b4a4b0c]{opacity:0}
|
package/dist/types.d.ts
ADDED
package/package.json
CHANGED
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
"type": "git",
|
|
28
28
|
"url": "https://github.com/megaarmos/vue-spring-bottom-sheet.git"
|
|
29
29
|
},
|
|
30
|
-
"homepage": "https://
|
|
30
|
+
"homepage": "https://vue-spring-bottom-sheet.douxcode.com/",
|
|
31
31
|
"bugs": {
|
|
32
32
|
"url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
|
|
33
33
|
},
|
|
34
34
|
"private": false,
|
|
35
|
-
"version": "1.2.
|
|
35
|
+
"version": "1.2.4",
|
|
36
36
|
"type": "module",
|
|
37
37
|
"exports": {
|
|
38
38
|
".": {
|