@douxcode/vue-spring-bottom-sheet 1.2.4 → 1.2.6

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.
Files changed (3) hide show
  1. package/dist/index.mjs +138 -135
  2. package/dist/style.css +1 -1
  3. package/package.json +94 -94
package/dist/index.mjs CHANGED
@@ -1,54 +1,54 @@
1
- import { computed as y, defineComponent as ve, useCssVars as de, ref as p, toRefs as ce, watch as J, nextTick as A, onMounted as fe, openBlock as ge, createBlock as pe, Teleport as he, createElementVNode as b, createVNode as me, Transition as be, withCtx as ye, withDirectives as Se, vShow as we, renderSlot as R } from "vue";
2
- import { useWindowSize as ke, useElementBounding as I, useScrollLock as Z } from "@vueuse/core";
3
- import { useGesture as z, rubberbandIfOutOfBounds as N } from "@vueuse/gesture";
4
- import { useMotionProperties as Te, useMotionTransitions as Ce, useMotionControls as De } from "@vueuse/motion";
5
- import { useFocusTrap as xe } from "@vueuse/integrations/useFocusTrap";
6
- function Me(n, u, a) {
7
- let e = (o) => n(o, ...u);
1
+ import { computed as y, defineComponent as ce, useCssVars as fe, ref as g, toRefs as he, watch as ee, nextTick as R, onMounted as ge, openBlock as pe, createBlock as me, Teleport as be, createElementVNode as b, createVNode as ye, Transition as Se, withCtx as we, withDirectives as ke, vShow as Te, renderSlot as z } from "vue";
2
+ import { useWindowSize as Ce, useElementBounding as I, useScrollLock as te } from "@vueuse/core";
3
+ import { useGesture as N, rubberbandIfOutOfBounds as G } from "@vueuse/gesture";
4
+ import { useMotionProperties as De, useMotionTransitions as xe, useMotionControls as Me } from "@vueuse/motion";
5
+ import { useFocusTrap as Pe } from "@vueuse/integrations/useFocusTrap";
6
+ function _e(o, u, a) {
7
+ let e = (n) => o(n, ...u);
8
8
  return a === void 0 ? e : Object.assign(e, { lazy: a, lazyArgs: u });
9
9
  }
10
- function Pe(n, u, a) {
11
- let e = n.length - u.length;
12
- if (e === 0) return n(...u);
13
- if (e === 1) return Me(n, u, a);
10
+ function He(o, u, a) {
11
+ let e = o.length - u.length;
12
+ if (e === 0) return o(...u);
13
+ if (e === 1) return _e(o, u, a);
14
14
  throw new Error("Wrong number of arguments");
15
15
  }
16
- function _e(n, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs: e, minGapMs: o, reducer: v = He }) {
16
+ function Oe(o, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs: e, minGapMs: n, reducer: c = Be }) {
17
17
  let s, r, f, S, C = () => {
18
- let d = f;
19
- d !== void 0 && (f = void 0, n(d), o !== void 0 && (r = setTimeout(O, o)));
20
- }, O = () => {
18
+ let v = f;
19
+ v !== void 0 && (f = void 0, o(v), n !== void 0 && (r = setTimeout(H, n)));
20
+ }, H = () => {
21
21
  clearTimeout(r), r = void 0, s === void 0 && C();
22
22
  }, w = () => {
23
23
  clearTimeout(s), s = void 0, S = void 0, r === void 0 && C();
24
24
  };
25
- return { call: (...d) => {
26
- let g = s === void 0 && r === void 0;
27
- if ((u !== "start" || g) && (f = v(f, ...d)), !(s === void 0 && !g)) {
28
- if (a !== void 0 || e !== void 0 || o === void 0) {
25
+ return { call: (...v) => {
26
+ let h = s === void 0 && r === void 0;
27
+ if ((u !== "start" || h) && (f = c(f, ...v)), !(s === void 0 && !h)) {
28
+ if (a !== void 0 || e !== void 0 || n === void 0) {
29
29
  clearTimeout(s);
30
- let h = Date.now();
31
- S ?? (S = h);
32
- let W = e === void 0 ? a ?? 0 : Math.min(a ?? e, e - (h - S));
30
+ let p = Date.now();
31
+ S ?? (S = p);
32
+ let W = e === void 0 ? a ?? 0 : Math.min(a ?? e, e - (p - S));
33
33
  s = setTimeout(w, W);
34
34
  }
35
- u !== "end" && g && C();
35
+ u !== "end" && h && C();
36
36
  }
37
37
  }, cancel: () => {
38
38
  clearTimeout(s), s = void 0, S = void 0, clearTimeout(r), r = void 0, f = void 0;
39
39
  }, flush: () => {
40
- w(), O();
40
+ w(), H();
41
41
  }, get isIdle() {
42
42
  return s === void 0 && r === void 0;
43
43
  } };
44
44
  }
45
- var He = () => "";
46
- function $(...n) {
47
- return Pe(Oe, n);
45
+ var Be = () => "";
46
+ function $(...o) {
47
+ return He(Ee, o);
48
48
  }
49
- var Oe = (n, { min: u, max: a }) => u !== void 0 && n < u ? u : a !== void 0 && n > a ? a : n;
50
- function Be(n, u) {
51
- const a = y(() => n.value.sort()), e = y(() => a.value[0]), o = y(() => a.value[a.value.length - 1]), v = y(() => {
49
+ var Ee = (o, { min: u, max: a }) => u !== void 0 && o < u ? u : a !== void 0 && o > a ? a : o;
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(() => {
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
  );
@@ -56,12 +56,12 @@ function Be(n, u) {
56
56
  });
57
57
  return {
58
58
  minSnap: e,
59
- maxSnap: o,
60
- snapPoints: n,
61
- closestSnapPointIndex: v
59
+ maxSnap: n,
60
+ snapPoints: o,
61
+ closestSnapPointIndex: c
62
62
  };
63
63
  }
64
- const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-sheet-show"], $e = /* @__PURE__ */ ve({
64
+ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-sheet-show"], Fe = /* @__PURE__ */ ce({
65
65
  __name: "BottomSheet",
66
66
  props: {
67
67
  duration: { default: 250 },
@@ -73,29 +73,29 @@ const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-s
73
73
  expandOnContentDrag: { type: Boolean, default: !0 }
74
74
  },
75
75
  emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
76
- setup(n, { expose: u, emit: a }) {
77
- de((i) => ({
78
- "3f3c238a": te.value,
79
- eba134fc: ae.value
76
+ setup(o, { expose: u, emit: a }) {
77
+ fe((i) => ({
78
+ "14f7879e": ne.value,
79
+ "5872cb4c": ue.value
80
80
  }));
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], {
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,
83
- fallbackFocus: () => v.value || document.body
83
+ fallbackFocus: () => c.value || document.body
84
84
  }), k = y(
85
- () => Math.ceil(ee.value + W.value + Y.value)
86
- ), te = y(() => `visibility ${e.duration}ms ease-in-out`), ae = y(() => `opacity ${e.duration}ms ease-in-out`), { motionProperties: D } = Te(v), { push: x, stop: ne, motionValues: M } = Ce(), { set: P, stop: F } = De(
85
+ () => Math.ceil(oe.value + W.value + ae.value)
86
+ ), ne = y(() => `visibility ${e.duration}ms ease-in-out`), ue = y(() => `opacity ${e.duration}ms ease-in-out`), { motionProperties: D } = De(c), { push: x, stop: le, motionValues: O } = xe(), { set: M, stop: j } = Me(
87
87
  D,
88
88
  {},
89
- { push: x, motionValues: M, stop: ne }
90
- ), t = p(0), l = p(0), { snapPoints: oe } = ce(e), le = y(() => oe.value ?? [k.value]), {
91
- minSnap: _,
92
- maxSnap: H,
89
+ { push: x, motionValues: O, stop: le }
90
+ ), t = g(0), l = g(0), { snapPoints: ie } = he(e), se = y(() => ie.value ?? [k.value]), {
91
+ minSnap: P,
92
+ maxSnap: _,
93
93
  snapPoints: T,
94
- closestSnapPointIndex: L
95
- } = Be(le, t), Q = Z(document.body), j = Z(document.documentElement), K = (i) => {
94
+ closestSnapPointIndex: F
95
+ } = Ie(se, t), L = te(document.body), V = te(document.documentElement), K = (i) => {
96
96
  i.key === "Escape" && E();
97
- }, ue = () => {
98
- v.value && (t.value = Math.min(e.defaultSnapPoint ?? _.value, g.value), P({
97
+ }, re = () => {
98
+ c.value && (t.value = Math.min(e.defaultSnapPoint ?? P.value, h.value), M({
99
99
  height: t.value,
100
100
  y: t.value
101
101
  }), x("y", 0, D, {
@@ -103,148 +103,149 @@ const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-s
103
103
  easings: "easeInOut",
104
104
  bounce: 0,
105
105
  duration: e.duration
106
- }), w.value = !0, Q.value = !0, j.value = !0, window.addEventListener("keydown", K), e.blocking && setTimeout(() => {
107
- M.value.y.get() - 0 < 0.1 && (o("opened"), G.activate());
106
+ }), w.value = !0, window.addEventListener("keydown", K), e.blocking && setTimeout(() => {
107
+ O.value.y.get() - 0 < 0.1 && (n("opened"), Q.activate());
108
108
  }, e.duration));
109
109
  }, E = () => {
110
- v.value && (x("y", h.value, D, {
110
+ c.value && (x("y", p.value, D, {
111
111
  type: "tween",
112
112
  bounce: 0,
113
113
  duration: e.duration
114
- }), w.value = !1, Q.value = !1, j.value = !1, e.blocking && G.deactivate(), window.removeEventListener("keydown", K), setTimeout(() => {
115
- M.value.y.get() - h.value < 0.1 && o("closed");
114
+ }), w.value = !1, e.blocking && Q.deactivate(), window.removeEventListener("keydown", K), setTimeout(() => {
115
+ O.value.y.get() - p.value < 0.1 && n("closed");
116
116
  }, e.duration));
117
- }, ie = () => {
117
+ }, ve = () => {
118
118
  e.canBackdropClose && E();
119
119
  };
120
- function se(i) {
121
- d.value && i.preventDefault();
120
+ function U(i) {
121
+ v.value = !0, q(i);
122
122
  }
123
- const V = (i) => {
123
+ function q(i) {
124
+ v.value && i.preventDefault();
125
+ }
126
+ const X = (i) => {
124
127
  t.value = i, x("height", t.value, D, {
125
128
  type: "tween",
126
129
  easings: "easeInOut",
127
130
  bounce: 0,
128
131
  duration: e.duration
129
132
  });
130
- }, U = ({
131
- delta: [i, c],
133
+ }, J = ({
134
+ delta: [i, d],
132
135
  direction: [B, m]
133
136
  }) => {
134
- v.value && (l.value <= 0 && (t.value -= c), t.value <= _.value && (t.value = _.value, l.value += c, P({
135
- y: e.canSwipeClose ? $(l.value, { min: 0 }) : $(N(l.value, -h.value, 0, 0.5), { min: 0 })
136
- })), P({
137
- height: $(N(t.value, 0, H.value, 0.25), {
137
+ c.value && (l.value <= 0 && (t.value -= d), t.value <= P.value && (t.value = P.value, l.value += d, M({
138
+ y: e.canSwipeClose ? $(l.value, { min: 0 }) : $(G(l.value, -p.value, 0, 0.5), { min: 0 })
139
+ })), M({
140
+ height: $(G(t.value, 0, _.value, 0.25), {
138
141
  min: 0,
139
- max: g.value
142
+ max: h.value
140
143
  })
141
- }), m > 0 ? o("dragging-down") : m < 0 && o("dragging-up"));
142
- }, X = () => {
143
- v.value && (l.value = e.canSwipeClose ? [0, t.value].reduce(
144
- (i, c) => Math.abs(c - l.value) < Math.abs(i - l.value) ? c : i
144
+ }), m > 0 ? n("dragging-down") : m < 0 && n("dragging-up"));
145
+ }, A = () => {
146
+ L.value = !1, V.value = !1, l.value = e.canSwipeClose ? [0, t.value].reduce(
147
+ (i, d) => Math.abs(d - l.value) < Math.abs(i - l.value) ? d : i
145
148
  ) : 0, x("y", l.value, D, {
146
149
  type: "tween",
147
150
  easings: "easeInOut",
148
151
  bounce: 0,
149
152
  duration: e.duration
150
- }), l.value === t.value && (l.value = 0, E()), t.value = Math.min(T.value[L.value], g.value), x("height", t.value, D, {
153
+ }), l.value === t.value && (l.value = 0, E()), t.value = Math.min(T.value[F.value], h.value), x("height", t.value, D, {
151
154
  type: "tween",
152
155
  easings: "easeInOut",
153
156
  bounce: 0,
154
157
  duration: e.duration
155
- }));
158
+ });
159
+ }, Z = () => {
160
+ L.value = !0, V.value = !0, t.value = p.value, l.value = O.value.y.get(), j();
156
161
  };
157
- z(
162
+ N(
158
163
  {
159
- onDragStart: () => {
160
- t.value = h.value, l.value = M.value.y.get(), F();
161
- },
162
- onDrag: U,
163
- onDragEnd: X
164
+ onDragStart: Z,
165
+ onDrag: J,
166
+ onDragEnd: A
164
167
  },
165
168
  {
166
169
  domTarget: s,
167
170
  drag: { filterTaps: !0 }
168
171
  }
169
- ), z(
172
+ ), N(
170
173
  {
171
- onDragStart: () => {
172
- t.value = h.value, l.value = M.value.y.get(), F();
173
- },
174
- onDrag: U,
175
- onDragEnd: X
174
+ onDragStart: Z,
175
+ onDrag: J,
176
+ onDragEnd: A
176
177
  },
177
178
  {
178
179
  domTarget: r,
179
180
  drag: { filterTaps: !0 }
180
181
  }
181
- ), z(
182
+ ), N(
182
183
  {
183
- onDragStart: ({ direction: [i, c] }) => {
184
- t.value = h.value, l.value = M.value.y.get(), F();
185
- const B = f.value.scrollTop === 0, m = c > 0;
186
- T.value.length === 1 ? l.value === 0 && B && (d.value = m) : (e.expandOnContentDrag && t.value !== H.value && (d.value = !0), t.value === H.value && B && (d.value = m));
184
+ onDragStart: ({ direction: [i, d] }) => {
185
+ L.value = !0, V.value = !0, t.value = p.value, l.value = O.value.y.get(), j();
186
+ const B = f.value.scrollTop === 0, m = d > 0;
187
+ T.value.length === 1 ? l.value === 0 && B && (v.value = m) : (e.expandOnContentDrag && t.value !== _.value && (v.value = !0), t.value === _.value && B && (v.value = m));
187
188
  },
188
- onDrag: ({ delta: [i, c], direction: [B, m] }) => {
189
+ onDrag: ({ delta: [i, d], direction: [B, m] }) => {
189
190
  if (!e.expandOnContentDrag) {
190
- d.value = !1;
191
+ v.value = !1;
191
192
  return;
192
193
  }
193
- if (!v.value) return;
194
- l.value === 0 && d.value && e.expandOnContentDrag && (t.value -= c), t.value <= _.value && (t.value = _.value, d.value && e.expandOnContentDrag && (l.value += c), l.value = $(l.value, { min: 0, max: _.value }), P({
195
- y: e.canSwipeClose ? l.value : N(l.value, -h.value, 0, 0.5)
196
- })), t.value > H.value && (t.value = H.value), t.value = Math.min(t.value, g.value);
197
- const q = f.value.scrollTop === 0;
198
- T.value.length === 1 ? c < 0 && l.value === 0 && q && (d.value = !1) : t.value === H.value && (d.value = !1), P({
194
+ if (!c.value) return;
195
+ l.value === 0 && v.value && e.expandOnContentDrag && (t.value -= d), t.value <= P.value && (t.value = P.value, v.value && e.expandOnContentDrag && (l.value += d), l.value = $(l.value, { min: 0, max: P.value }), M({
196
+ y: e.canSwipeClose ? l.value : G(l.value, -p.value, 0, 0.5)
197
+ })), t.value > _.value && (t.value = _.value), t.value = Math.min(t.value, h.value);
198
+ const Y = f.value.scrollTop === 0;
199
+ T.value.length === 1 ? d < 0 && l.value === 0 && Y && (v.value = !1) : t.value === _.value && (v.value = !1), M({
199
200
  height: t.value
200
- }), m > 0 ? o("dragging-down") : m < 0 && o("dragging-up");
201
+ }), m > 0 ? n("dragging-down") : m < 0 && n("dragging-up");
201
202
  },
202
- onDragEnd: X
203
+ onDragEnd: A
203
204
  },
204
205
  {
205
206
  domTarget: S,
206
207
  drag: { filterTaps: !0 }
207
208
  }
208
209
  );
209
- const re = _e(
210
+ const de = Oe(
210
211
  () => {
211
- o("maxHeight", g.value), A(() => {
212
- t.value = T.value[L.value], V(T.value[L.value]);
212
+ n("maxHeight", h.value), R(() => {
213
+ t.value = T.value[F.value], X(T.value[F.value]);
213
214
  });
214
215
  },
215
216
  { minQuietPeriodMs: 50 }
216
217
  );
217
- return J(g, () => {
218
- re.call();
219
- }), J(k, () => {
220
- o("minHeight", k.value), T.value.length === 1 && A(() => {
221
- T.value[0] === k.value && V(Math.min(k.value, g.value));
218
+ return ee(h, () => {
219
+ de.call();
220
+ }), ee(k, () => {
221
+ n("minHeight", k.value), T.value.length === 1 && R(() => {
222
+ T.value[0] === k.value && X(Math.min(k.value, h.value));
222
223
  });
223
- }), fe(() => {
224
- o("minHeight", k.value), o("maxHeight", g.value), t.value = e.defaultSnapPoint ?? Number(k.value), P({
224
+ }), ge(() => {
225
+ n("minHeight", k.value), n("maxHeight", h.value), t.value = e.defaultSnapPoint ?? Number(k.value), M({
225
226
  height: t.value,
226
227
  y: t.value
227
- }), A(() => {
228
- o("ready");
228
+ }), R(() => {
229
+ n("ready");
229
230
  });
230
- }), u({ open: ue, close: E, snapToPoint: V }), (i, c) => (ge(), pe(he, { to: "body" }, [
231
- b("div", Ee, [
232
- me(be, { name: "fade" }, {
233
- default: ye(() => [
234
- Se(b("div", {
231
+ }), u({ open: re, close: E, snapToPoint: X }), (i, d) => (pe(), me(be, { to: "body" }, [
232
+ b("div", $e, [
233
+ ye(Se, { name: "fade" }, {
234
+ default: we(() => [
235
+ ke(b("div", {
235
236
  ref_key: "backdrop",
236
- ref: O,
237
+ ref: H,
237
238
  "data-vsbs-backdrop": "",
238
- onClick: c[0] || (c[0] = (B) => ie())
239
+ onClick: d[0] || (d[0] = (B) => ve())
239
240
  }, null, 512), [
240
- [we, w.value && i.blocking]
241
+ [Te, w.value && i.blocking]
241
242
  ])
242
243
  ]),
243
244
  _: 1
244
245
  }),
245
246
  b("div", {
246
247
  ref_key: "sheet",
247
- ref: v,
248
+ ref: c,
248
249
  "data-vsbs-shadow": !i.blocking,
249
250
  "data-vsbs-sheet-show": w.value,
250
251
  "aria-modal": "true",
@@ -254,15 +255,16 @@ const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-s
254
255
  b("div", {
255
256
  ref_key: "sheetHeader",
256
257
  ref: s,
257
- "data-vsbs-header": ""
258
+ "data-vsbs-header": "",
259
+ onTouchmove: U
258
260
  }, [
259
- R(i.$slots, "header", {}, void 0, !0)
260
- ], 512),
261
+ z(i.$slots, "header", {}, void 0, !0)
262
+ ], 544),
261
263
  b("div", {
262
264
  ref_key: "sheetScroll",
263
265
  ref: f,
264
266
  "data-vsbs-scroll": "",
265
- onTouchmove: se
267
+ onTouchmove: q
266
268
  }, [
267
269
  b("div", {
268
270
  ref_key: "sheetContentWrapper",
@@ -274,27 +276,28 @@ const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-s
274
276
  ref: C,
275
277
  "data-vsbs-content": ""
276
278
  }, [
277
- R(i.$slots, "default", {}, void 0, !0)
279
+ z(i.$slots, "default", {}, void 0, !0)
278
280
  ], 512)
279
281
  ], 512)
280
282
  ], 544),
281
283
  b("div", {
282
284
  ref_key: "sheetFooter",
283
285
  ref: r,
284
- "data-vsbs-footer": ""
286
+ "data-vsbs-footer": "",
287
+ onTouchmove: U
285
288
  }, [
286
- R(i.$slots, "footer", {}, void 0, !0)
287
- ], 512)
288
- ], 8, Ie)
289
+ z(i.$slots, "footer", {}, void 0, !0)
290
+ ], 544)
291
+ ], 8, We)
289
292
  ])
290
293
  ]));
291
294
  }
292
- }), We = (n, u) => {
293
- const a = n.__vccOpts || n;
294
- for (const [e, o] of u)
295
- a[e] = o;
295
+ }), Le = (o, u) => {
296
+ const a = o.__vccOpts || o;
297
+ for (const [e, n] of u)
298
+ a[e] = n;
296
299
  return a;
297
- }, Re = /* @__PURE__ */ We($e, [["__scopeId", "data-v-2b4a4b0c"]]);
300
+ }, Ne = /* @__PURE__ */ Le(Fe, [["__scopeId", "data-v-7f53bf25"]]);
298
301
  export {
299
- Re as default
302
+ Ne as default
300
303
  };
package/dist/style.css CHANGED
@@ -1 +1 @@
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}
1
+ [data-vsbs-container][data-v-7f53bf25]{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-7f53bf25]{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-7f53bf25]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-7f53bf25]{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(--14f7879e);visibility:hidden;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-7f53bf25]{visibility:visible}[data-vsbs-header][data-v-7f53bf25]{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-7f53bf25]: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-7f53bf25]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-7f53bf25]{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-7f53bf25]:empty{display:none}[data-vsbs-scroll][data-v-7f53bf25]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-7f53bf25]{height:100%}[data-vsbs-content][data-v-7f53bf25]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-7f53bf25],.fade-leave-active[data-v-7f53bf25]{transition:var(--5872cb4c)}.fade-enter-from[data-v-7f53bf25],.fade-leave-to[data-v-7f53bf25]{opacity:0}
package/package.json CHANGED
@@ -1,94 +1,94 @@
1
- {
2
- "name": "@douxcode/vue-spring-bottom-sheet",
3
- "description": "Modern and Performant Bottom Sheet for Vue.js",
4
- "keywords": [
5
- "animation",
6
- "bottom-drawer",
7
- "bottom-sheet",
8
- "bottomsheet",
9
- "dialog",
10
- "drag-drop",
11
- "draggableview",
12
- "drawer",
13
- "gesture-control",
14
- "modal",
15
- "motion",
16
- "overlay",
17
- "popup",
18
- "vue",
19
- "vueuse/motion",
20
- "vueuse/gesture",
21
- "sheet",
22
- "typescript"
23
- ],
24
- "author": "Arion Paul",
25
- "license": "MIT",
26
- "repository": {
27
- "type": "git",
28
- "url": "https://github.com/megaarmos/vue-spring-bottom-sheet.git"
29
- },
30
- "homepage": "https://vue-spring-bottom-sheet.douxcode.com/",
31
- "bugs": {
32
- "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
33
- },
34
- "private": false,
35
- "version": "1.2.4",
36
- "type": "module",
37
- "exports": {
38
- ".": {
39
- "types": "./dist/index.d.ts",
40
- "import": "./dist/index.mjs"
41
- },
42
- "./dist/style.css": {
43
- "import": "./dist/style.css",
44
- "require": "./dist/style.css"
45
- }
46
- },
47
- "main": "./dist/index.mjs",
48
- "types": "dist/index.d.ts",
49
- "scripts": {
50
- "build": "vue-tsc -b && vite build",
51
- "build:watch": "vite build --watch",
52
- "type-check": "vue-tsc --build",
53
- "lint": "eslint . --fix",
54
- "format": "prettier --write src/",
55
- "release": "npm run build && npm publish --access public"
56
- },
57
- "peerDependencies": {
58
- "@vueuse/gesture": "^2.0.0",
59
- "@vueuse/motion": "^2.2.6",
60
- "vue": ">=3.3"
61
- },
62
- "dependencies": {
63
- "@vueuse/core": "^12.5.0",
64
- "@vueuse/gesture": "^2.0.0",
65
- "@vueuse/integrations": "^12.5.0",
66
- "@vueuse/motion": "^2.2.6",
67
- "focus-trap": "^7.6.4",
68
- "remeda": "^2.20.0",
69
- "vue": "^3.5.13"
70
- },
71
- "devDependencies": {
72
- "@types/node": "^22.10.10",
73
- "@vitejs/plugin-vue": "^5.2.1",
74
- "@vue/eslint-config-prettier": "^10.2.0",
75
- "@vue/eslint-config-typescript": "^14.3.0",
76
- "@vue/tsconfig": "^0.7.0",
77
- "ajv": "^8.17.1",
78
- "eslint": "^9.19.0",
79
- "eslint-plugin-vue": "^9.32.0",
80
- "prettier": "^3.4.2",
81
- "typescript": "~5.6.3",
82
- "vite": "^6.0.11",
83
- "vite-plugin-dts": "^4.5.0",
84
- "vue-tsc": "^2.2.0"
85
- },
86
- "files": [
87
- "dist",
88
- "README.md",
89
- "LICENSE"
90
- ],
91
- "publishConfig": {
92
- "access": "public"
93
- }
94
- }
1
+ {
2
+ "name": "@douxcode/vue-spring-bottom-sheet",
3
+ "description": "Modern and Performant Bottom Sheet for Vue.js",
4
+ "keywords": [
5
+ "animation",
6
+ "bottom-drawer",
7
+ "bottom-sheet",
8
+ "bottomsheet",
9
+ "dialog",
10
+ "drag-drop",
11
+ "draggableview",
12
+ "drawer",
13
+ "gesture-control",
14
+ "modal",
15
+ "motion",
16
+ "overlay",
17
+ "popup",
18
+ "vue",
19
+ "vueuse/motion",
20
+ "vueuse/gesture",
21
+ "sheet",
22
+ "typescript"
23
+ ],
24
+ "author": "Arion Paul",
25
+ "license": "MIT",
26
+ "repository": {
27
+ "type": "git",
28
+ "url": "https://github.com/megaarmos/vue-spring-bottom-sheet.git"
29
+ },
30
+ "homepage": "https://vue-spring-bottom-sheet.douxcode.com/",
31
+ "bugs": {
32
+ "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
33
+ },
34
+ "private": false,
35
+ "version": "1.2.6",
36
+ "type": "module",
37
+ "exports": {
38
+ ".": {
39
+ "types": "./dist/index.d.ts",
40
+ "import": "./dist/index.mjs"
41
+ },
42
+ "./dist/style.css": {
43
+ "import": "./dist/style.css",
44
+ "require": "./dist/style.css"
45
+ }
46
+ },
47
+ "main": "./dist/index.mjs",
48
+ "types": "dist/index.d.ts",
49
+ "scripts": {
50
+ "build": "vue-tsc -b && vite build",
51
+ "build:watch": "vite build --watch",
52
+ "type-check": "vue-tsc --build",
53
+ "lint": "eslint . --fix",
54
+ "format": "prettier --write src/",
55
+ "release": "npm run build && npm publish --access public"
56
+ },
57
+ "peerDependencies": {
58
+ "@vueuse/gesture": "^2.0.0",
59
+ "@vueuse/motion": "^2.2.6",
60
+ "vue": ">=3.3"
61
+ },
62
+ "dependencies": {
63
+ "@vueuse/core": "^12.5.0",
64
+ "@vueuse/gesture": "^2.0.0",
65
+ "@vueuse/integrations": "^12.5.0",
66
+ "@vueuse/motion": "^2.2.6",
67
+ "focus-trap": "^7.6.4",
68
+ "remeda": "^2.20.0",
69
+ "vue": "^3.5.13"
70
+ },
71
+ "devDependencies": {
72
+ "@types/node": "^22.10.10",
73
+ "@vitejs/plugin-vue": "^5.2.1",
74
+ "@vue/eslint-config-prettier": "^10.2.0",
75
+ "@vue/eslint-config-typescript": "^14.3.0",
76
+ "@vue/tsconfig": "^0.7.0",
77
+ "ajv": "^8.17.1",
78
+ "eslint": "^9.19.0",
79
+ "eslint-plugin-vue": "^9.32.0",
80
+ "prettier": "^3.4.2",
81
+ "typescript": "~5.6.3",
82
+ "vite": "^6.0.11",
83
+ "vite-plugin-dts": "^4.5.0",
84
+ "vue-tsc": "^2.2.0"
85
+ },
86
+ "files": [
87
+ "dist",
88
+ "README.md",
89
+ "LICENSE"
90
+ ],
91
+ "publishConfig": {
92
+ "access": "public"
93
+ }
94
+ }