@douxcode/vue-spring-bottom-sheet 1.0.7 → 1.0.8
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 +10 -13
- package/dist/index.mjs +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -62,14 +62,12 @@ const close = () => {
|
|
|
62
62
|
|
|
63
63
|
## Usage in Nuxt 3
|
|
64
64
|
|
|
65
|
-
For Nuxt 3, just wrap component in `<
|
|
65
|
+
For Nuxt 3, just wrap component in `<ClientOnly>`
|
|
66
66
|
|
|
67
67
|
```vue
|
|
68
68
|
<template>
|
|
69
69
|
<ClientOnly>
|
|
70
|
-
<
|
|
71
|
-
<BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
|
|
72
|
-
</template>
|
|
70
|
+
<BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
|
|
73
71
|
</ClientOnly>
|
|
74
72
|
</template>
|
|
75
73
|
```
|
|
@@ -77,15 +75,14 @@ For Nuxt 3, just wrap component in `<client-only>`
|
|
|
77
75
|
## CSS Custom Properties
|
|
78
76
|
|
|
79
77
|
```css
|
|
80
|
-
:
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
}
|
|
78
|
+
--vsbs-backdrop-bg: rgba(0, 0, 0, 0.5);
|
|
79
|
+
--vsbs-shadow-color: hsla(0, 0%, 35%, 0.2);
|
|
80
|
+
--vsbs-background: #fff;
|
|
81
|
+
--vsbs-border-radius: 16px;
|
|
82
|
+
--vsbs-max-width: 640px;
|
|
83
|
+
--vsbs-border-color: rgba(46, 59, 66, 0.125);
|
|
84
|
+
--vsbs-padding-x: 16px;
|
|
85
|
+
--vsbs-handle-background: rgba(0, 0, 0, 0.28);
|
|
89
86
|
```
|
|
90
87
|
|
|
91
88
|
## Props
|
package/dist/index.mjs
CHANGED
|
@@ -186,7 +186,7 @@ const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
186
186
|
for (const [n, o] of g)
|
|
187
187
|
i[n] = o;
|
|
188
188
|
return i;
|
|
189
|
-
}, He = /* @__PURE__ */ Ce(Se, [["__scopeId", "data-v-
|
|
189
|
+
}, He = /* @__PURE__ */ Ce(Se, [["__scopeId", "data-v-f08e630c"]]);
|
|
190
190
|
export {
|
|
191
191
|
He as default
|
|
192
192
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-backdrop][data-v-
|
|
1
|
+
[data-vsbs-backdrop][data-v-f08e630c]{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:100}[data-vsbs-shadow=true][data-v-f08e630c]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, hsla(0, 0%, 35%, .2))}[data-vsbs-sheet][data-v-f08e630c]{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:visibility .3s ease-in-out;visibility:hidden;width:100%;will-change:height;z-index:100}[data-vsbs-sheet-show=true][data-v-f08e630c]{visibility:visible}[data-vsbs-header][data-v-f08e630c]{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:1}[data-vsbs-header][data-v-f08e630c]: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-f08e630c]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-f08e630c]{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-f08e630c]:empty{display:none}[data-vsbs-scroll][data-v-f08e630c]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-f08e630c]{height:100%}[data-vsbs-content][data-v-f08e630c]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-f08e630c],.fade-leave-active[data-v-f08e630c]{transition:opacity .3s ease}.fade-enter-from[data-v-f08e630c],.fade-leave-to[data-v-f08e630c]{opacity:0}
|