@douxcode/vue-spring-bottom-sheet 2.1.1 → 2.1.2
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 +13 -14
- package/dist/index.mjs +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -76,22 +76,20 @@ const close = () => {
|
|
|
76
76
|
|
|
77
77
|
```vue
|
|
78
78
|
<script setup lang="ts">
|
|
79
|
-
import { ref } from
|
|
80
|
-
|
|
81
|
-
import BottomSheet from "@douxcode/vue-spring-bottom-sheet";
|
|
82
|
-
import "@douxcode/vue-spring-bottom-sheet/dist/style.css";
|
|
79
|
+
import { ref } from 'vue'
|
|
83
80
|
|
|
84
|
-
|
|
81
|
+
import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
|
|
82
|
+
import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
|
|
85
83
|
|
|
84
|
+
const sheet = ref(false)
|
|
86
85
|
</script>
|
|
87
86
|
|
|
88
87
|
<template>
|
|
89
|
-
<button type="button" @click="sheet = true">
|
|
88
|
+
<button type="button" @click="sheet = true">Open bottom sheet</button>
|
|
90
89
|
<BottomSheet v-model="sheet"> Your content </BottomSheet>
|
|
91
90
|
</template>
|
|
92
91
|
```
|
|
93
92
|
|
|
94
|
-
|
|
95
93
|
## Usage in Nuxt 3
|
|
96
94
|
|
|
97
95
|
For Nuxt 3, just wrap component in `<ClientOnly>`
|
|
@@ -123,6 +121,7 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
|
|
|
123
121
|
--vsbs-shadow-color: rgba(89, 89, 89, 0.2);
|
|
124
122
|
--vsbs-background: #fff;
|
|
125
123
|
--vsbs-border-radius: 16px;
|
|
124
|
+
--vsbs-outer-border-color: transparent;
|
|
126
125
|
--vsbs-max-width: 640px;
|
|
127
126
|
--vsbs-border-color: rgba(46, 59, 66, 0.125);
|
|
128
127
|
--vsbs-padding-x: 16px;
|
|
@@ -155,13 +154,13 @@ Assuming there is `const bottomSheet = ref()`
|
|
|
155
154
|
|
|
156
155
|
## Events
|
|
157
156
|
|
|
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)
|
|
157
|
+
| Event | Description | Payload |
|
|
158
|
+
| -------------- | -------------------------------------- | ----------------------- |
|
|
159
|
+
| opened | Emitted when sheet finishes opening | - |
|
|
160
|
+
| closed | Emitted when sheet finishes closing | - |
|
|
161
|
+
| dragging-up | Emitted when user drags sheet upward | - |
|
|
162
|
+
| dragging-down | Emitted when user drags sheet downward | - |
|
|
163
|
+
| instinctHeight | Emitted when content height changes | height (number) |
|
|
165
164
|
| snapped | Emitted when sheet finishes snapping | snapPointIndex (number) |
|
|
166
165
|
|
|
167
166
|
## Acknowledgments
|
package/dist/index.mjs
CHANGED
|
@@ -389,7 +389,7 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
|
|
|
389
389
|
for (const [e, i] of a)
|
|
390
390
|
o[e] = i;
|
|
391
391
|
return o;
|
|
392
|
-
}, Ye = /* @__PURE__ */ Ne(qe, [["__scopeId", "data-v-
|
|
392
|
+
}, Ye = /* @__PURE__ */ Ne(qe, [["__scopeId", "data-v-4afa051f"]]);
|
|
393
393
|
export {
|
|
394
394
|
Ye as default
|
|
395
395
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-container][data-v-
|
|
1
|
+
[data-vsbs-container][data-v-4afa051f]{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-4afa051f]{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-4afa051f]: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-4afa051f]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-right:1px solid var(--vsbs-outer-border-color, transparent);border-left:1px solid var(--vsbs-outer-border-color, transparent);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-4afa051f]{visibility:visible}[data-vsbs-header][data-v-4afa051f]{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;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-top:1px solid var(--vsbs-outer-border-color, transparent)}[data-vsbs-header][data-v-4afa051f]: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-4afa051f]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-4afa051f]{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-4afa051f]:empty{display:none}[data-vsbs-scroll][data-v-4afa051f]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-4afa051f]{height:100%}[data-vsbs-content][data-v-4afa051f]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
|