@douxcode/vue-spring-bottom-sheet 1.2.6 → 1.2.7
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/LICENSE.txt +21 -21
- package/README.md +14 -0
- package/dist/index.mjs +4 -4
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/LICENSE.txt
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 megaarmos
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 megaarmos
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -81,6 +81,18 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
|
|
|
81
81
|
</template>
|
|
82
82
|
```
|
|
83
83
|
|
|
84
|
+
## Slots
|
|
85
|
+
|
|
86
|
+
```vue
|
|
87
|
+
<template>
|
|
88
|
+
<BottomSheet ref="bottomSheet">
|
|
89
|
+
<template #header> Header </template>
|
|
90
|
+
<div>Your content</div>
|
|
91
|
+
<template #footer> Footer </template>
|
|
92
|
+
</BottomSheet>
|
|
93
|
+
</template>
|
|
94
|
+
```
|
|
95
|
+
|
|
84
96
|
## CSS Custom Properties
|
|
85
97
|
|
|
86
98
|
```css
|
|
@@ -100,6 +112,7 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
|
|
|
100
112
|
|
|
101
113
|
| Prop | Type | Description | Example |
|
|
102
114
|
| ------------------- | -------- | --------------------------------------------------------------------------------------------------- | -------------------------------- |
|
|
115
|
+
| duration | Number | Defines the duration open and close animations. | `:duration="250"` |
|
|
103
116
|
| snapPoints | Number[] | Defines custom snapping positions for the bottom sheet | `:snapPoints="[300, 600, 900]"` |
|
|
104
117
|
| defaultSnapPoint | Number | Specifies the default snap point. Note that at least one snapPoint must be specified for it to work | `:default-snap-point="600"` |
|
|
105
118
|
| blocking | Boolean | Controls whether the bottom sheet blocks interactions with underlying content | `:blocking="true"` |
|
|
@@ -111,6 +124,7 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
|
|
|
111
124
|
|
|
112
125
|
| Prop | Default |
|
|
113
126
|
| ------------------- | -------------------------- |
|
|
127
|
+
| duration | `250` |
|
|
114
128
|
| snapPoints | `minHeight` |
|
|
115
129
|
| defaultSnapPoint | `minHeight / minSnapPoint` |
|
|
116
130
|
| blocking | `true` |
|
package/dist/index.mjs
CHANGED
|
@@ -48,7 +48,7 @@ function $(...o) {
|
|
|
48
48
|
}
|
|
49
49
|
var Ee = (o, { min: u, max: a }) => u !== void 0 && o < u ? u : a !== void 0 && o > a ? a : o;
|
|
50
50
|
function Ie(o, u) {
|
|
51
|
-
const a = y(() => o.value.sort()), e = y(() => a.value[0]), n = y(() => a.value[a.value.length - 1]), c = y(() => {
|
|
51
|
+
const a = y(() => o.value.sort((s, r) => s - r)), e = y(() => a.value[0]), n = y(() => a.value[a.value.length - 1]), c = y(() => {
|
|
52
52
|
const s = a.value.reduce(
|
|
53
53
|
(r, f) => Math.abs(f - u.value) < Math.abs(r - u.value) ? f : r
|
|
54
54
|
);
|
|
@@ -75,8 +75,8 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
75
75
|
emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
|
|
76
76
|
setup(o, { expose: u, emit: a }) {
|
|
77
77
|
fe((i) => ({
|
|
78
|
-
"
|
|
79
|
-
"
|
|
78
|
+
"02470502": ne.value,
|
|
79
|
+
"3c3cbcbe": ue.value
|
|
80
80
|
}));
|
|
81
81
|
const e = o, n = a, c = g(null), s = g(null), r = g(null), f = g(null), S = g(null), C = g(null), H = g(null), w = g(!1), v = g(e.expandOnContentDrag), { height: h } = Ce(), { height: p } = I(c), { height: W } = I(s), { height: ae } = I(r), { height: oe } = I(C), Q = Pe([c, H], {
|
|
82
82
|
immediate: !1,
|
|
@@ -297,7 +297,7 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
297
297
|
for (const [e, n] of u)
|
|
298
298
|
a[e] = n;
|
|
299
299
|
return a;
|
|
300
|
-
}, Ne = /* @__PURE__ */ Le(Fe, [["__scopeId", "data-v-
|
|
300
|
+
}, Ne = /* @__PURE__ */ Le(Fe, [["__scopeId", "data-v-42bd48db"]]);
|
|
301
301
|
export {
|
|
302
302
|
Ne as default
|
|
303
303
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-container][data-v-
|
|
1
|
+
[data-vsbs-container][data-v-42bd48db]{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-42bd48db]{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-42bd48db]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-42bd48db]{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(--02470502);visibility:hidden;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-42bd48db]{visibility:visible}[data-vsbs-header][data-v-42bd48db]{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-42bd48db]: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-42bd48db]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-42bd48db]{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-42bd48db]:empty{display:none}[data-vsbs-scroll][data-v-42bd48db]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-42bd48db]{height:100%}[data-vsbs-content][data-v-42bd48db]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-42bd48db],.fade-leave-active[data-v-42bd48db]{transition:var(--3c3cbcbe)}.fade-enter-from[data-v-42bd48db],.fade-leave-to[data-v-42bd48db]{opacity:0}
|