@surdeddd/bottom-sheet 0.21.2 → 0.22.0
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 +32 -0
- package/dist/{BottomSheetCore-CK_mq14p.d.ts → BottomSheetCore-9i-Uh6T3.d.ts} +4 -1
- package/dist/{BottomSheetCore-BHv6LPmS.d.cts → BottomSheetCore-CQStdVy2.d.cts} +4 -1
- package/dist/{BottomSheetEngine-mmFzIK1Z.d.cts → BottomSheetEngine-CsQWHLNb.d.cts} +1 -1
- package/dist/{BottomSheetEngine-wLn6Q2kA.d.ts → BottomSheetEngine-Dn6h-7gF.d.ts} +1 -1
- package/dist/core.cjs +9 -1
- package/dist/core.d.cts +2 -2
- package/dist/core.d.ts +2 -2
- package/dist/core.js +9 -1
- package/dist/debug.d.cts +1 -1
- package/dist/debug.d.ts +1 -1
- package/dist/default-features-C3cilcW9.d.ts +11 -0
- package/dist/default-features-DkG9aho0.d.cts +11 -0
- package/dist/element.cjs +84 -4
- package/dist/element.d.cts +2 -2
- package/dist/element.d.ts +2 -2
- package/dist/element.iife.global.js +2 -2
- package/dist/element.js +84 -4
- package/dist/features.cjs +65 -1
- package/dist/features.d.cts +5 -10
- package/dist/features.d.ts +5 -10
- package/dist/features.js +65 -2
- package/dist/{index-juAyT76E.d.cts → index-CVGC5B5D.d.cts} +1 -1
- package/dist/{index-CWKv1Xy4.d.ts → index-CnsJQZp2.d.ts} +1 -1
- package/dist/index.cjs +73 -2
- package/dist/index.d.cts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.js +73 -2
- package/dist/integrations/formik.d.cts +1 -1
- package/dist/integrations/formik.d.ts +1 -1
- package/dist/integrations/react-hook-form.d.cts +1 -1
- package/dist/integrations/react-hook-form.d.ts +1 -1
- package/dist/preact.d.cts +2 -2
- package/dist/preact.d.ts +2 -2
- package/dist/qwik-lib/index.qwik.cjs +67 -2
- package/dist/qwik-lib/index.qwik.mjs +67 -2
- package/dist/qwik.cjs +74 -2
- package/dist/qwik.d.cts +3 -2
- package/dist/qwik.d.ts +3 -2
- package/dist/qwik.js +74 -2
- package/dist/react.cjs +73 -2
- package/dist/react.d.cts +3 -3
- package/dist/react.d.ts +3 -3
- package/dist/react.js +73 -2
- package/dist/solid.cjs +74 -2
- package/dist/solid.d.cts +4 -0
- package/dist/solid.d.ts +4 -0
- package/dist/solid.js +74 -2
- package/dist/solid.source.jsx +74 -2
- package/dist/styles.css +11 -0
- package/dist/svelte-core.cjs +73 -2
- package/dist/svelte-core.js +73 -2
- package/dist/svelte-src/BottomSheet.svelte +3 -0
- package/dist/svelte.cjs +74 -2
- package/dist/svelte.d.cts +1 -0
- package/dist/svelte.d.ts +1 -0
- package/dist/svelte.js +74 -2
- package/dist/vue.cjs +77 -2
- package/dist/vue.js +77 -2
- package/dist/webgl.d.cts +1 -1
- package/dist/webgl.d.ts +1 -1
- package/package.json +9 -9
package/dist/vue.js
CHANGED
|
@@ -2604,6 +2604,7 @@ var BottomSheetCore = class {
|
|
|
2604
2604
|
__publicField(this, "lifecycle");
|
|
2605
2605
|
__publicField(this, "closeOnBack");
|
|
2606
2606
|
__publicField(this, "routedTo");
|
|
2607
|
+
__publicField(this, "fitContentToSnap");
|
|
2607
2608
|
__publicField(this, "persistent");
|
|
2608
2609
|
__publicField(this, "disableCloseFlag");
|
|
2609
2610
|
__publicField(this, "disableDragFlag");
|
|
@@ -2717,6 +2718,7 @@ var BottomSheetCore = class {
|
|
|
2717
2718
|
);
|
|
2718
2719
|
this.closeOnBack = resolved.closeOnBack;
|
|
2719
2720
|
this.routedTo = opts.routedTo;
|
|
2721
|
+
this.fitContentToSnap = opts.fitContentToSnap === true;
|
|
2720
2722
|
this.persistent = resolved.persistent;
|
|
2721
2723
|
this.disableCloseFlag = resolved.disableClose;
|
|
2722
2724
|
this.disableDragFlag = resolved.disableDrag;
|
|
@@ -2818,7 +2820,8 @@ var BottomSheetCore = class {
|
|
|
2818
2820
|
closeOnBack: this.closeOnBack,
|
|
2819
2821
|
closeOnRouteChange: this.closeOnRouteChange,
|
|
2820
2822
|
persistKey: this.persistKey,
|
|
2821
|
-
autoCollapseAfter
|
|
2823
|
+
autoCollapseAfter,
|
|
2824
|
+
fitContentToSnap: this.fitContentToSnap
|
|
2822
2825
|
},
|
|
2823
2826
|
isDestroyed: () => this.destroyed,
|
|
2824
2827
|
isDragging: () => this.isDraggingAny(),
|
|
@@ -2870,6 +2873,11 @@ var BottomSheetCore = class {
|
|
|
2870
2873
|
"[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() \u2014 option ignored"
|
|
2871
2874
|
);
|
|
2872
2875
|
}
|
|
2876
|
+
if (this.fitContentToSnap && !names.has("content-fit")) {
|
|
2877
|
+
devWarn(
|
|
2878
|
+
"[BottomSheet] fitContentToSnap needs contentFitFeature() \u2014 option ignored"
|
|
2879
|
+
);
|
|
2880
|
+
}
|
|
2873
2881
|
if (this.persistKey && !names.has("persist")) {
|
|
2874
2882
|
devWarn(
|
|
2875
2883
|
"[BottomSheet] persistKey needs persistFeature() \u2014 snaps will not be saved"
|
|
@@ -4227,6 +4235,68 @@ function visualViewportFeature() {
|
|
|
4227
4235
|
};
|
|
4228
4236
|
}
|
|
4229
4237
|
|
|
4238
|
+
// src/core/features/content-fit.ts
|
|
4239
|
+
var INSET_VAR = "--bs-content-inset";
|
|
4240
|
+
var FIT_ATTR = "data-bs-fit-content";
|
|
4241
|
+
function contentFitFeature() {
|
|
4242
|
+
return {
|
|
4243
|
+
name: "content-fit",
|
|
4244
|
+
install: (ctx) => {
|
|
4245
|
+
const scroller = ctx.scrollContainer;
|
|
4246
|
+
if (!ctx.options.fitContentToSnap || !scroller || typeof window === "undefined") {
|
|
4247
|
+
return;
|
|
4248
|
+
}
|
|
4249
|
+
const sheet = ctx.element;
|
|
4250
|
+
let inset = 0;
|
|
4251
|
+
let unpaddedMax = -1;
|
|
4252
|
+
let top = 0;
|
|
4253
|
+
const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
|
|
4254
|
+
const follow = (size) => {
|
|
4255
|
+
if (unpaddedMax < 0) {
|
|
4256
|
+
unpaddedMax = scroller.scrollHeight - scroller.clientHeight - inset;
|
|
4257
|
+
top = scroller.scrollTop;
|
|
4258
|
+
}
|
|
4259
|
+
const limit = Math.max(0, unpaddedMax + hiddenAt(size));
|
|
4260
|
+
if (top > limit) {
|
|
4261
|
+
if (scroller.scrollTop > limit) scroller.scrollTop = limit;
|
|
4262
|
+
top = limit;
|
|
4263
|
+
}
|
|
4264
|
+
};
|
|
4265
|
+
const settle = () => {
|
|
4266
|
+
if (ctx.isDestroyed()) return;
|
|
4267
|
+
const size = ctx.getSize();
|
|
4268
|
+
unpaddedMax = -1;
|
|
4269
|
+
follow(size);
|
|
4270
|
+
inset = hiddenAt(size);
|
|
4271
|
+
sheet.style.setProperty(INSET_VAR, `${inset}px`);
|
|
4272
|
+
unpaddedMax = -1;
|
|
4273
|
+
};
|
|
4274
|
+
const moving = () => ctx.isAnimating() || ctx.isDragging();
|
|
4275
|
+
const whenIdle = () => {
|
|
4276
|
+
if (!moving()) settle();
|
|
4277
|
+
};
|
|
4278
|
+
sheet.setAttribute(FIT_ATTR, "");
|
|
4279
|
+
settle();
|
|
4280
|
+
const offProgress = ctx.on(
|
|
4281
|
+
"progress",
|
|
4282
|
+
(p) => moving() ? follow(p.size) : settle()
|
|
4283
|
+
);
|
|
4284
|
+
const offSnap = ctx.on("snap", settle);
|
|
4285
|
+
const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
|
|
4286
|
+
observer?.observe(document.documentElement);
|
|
4287
|
+
window.addEventListener("orientationchange", whenIdle);
|
|
4288
|
+
return () => {
|
|
4289
|
+
offProgress();
|
|
4290
|
+
offSnap();
|
|
4291
|
+
observer?.disconnect();
|
|
4292
|
+
window.removeEventListener("orientationchange", whenIdle);
|
|
4293
|
+
sheet.removeAttribute(FIT_ATTR);
|
|
4294
|
+
sheet.style.removeProperty(INSET_VAR);
|
|
4295
|
+
};
|
|
4296
|
+
}
|
|
4297
|
+
};
|
|
4298
|
+
}
|
|
4299
|
+
|
|
4230
4300
|
// src/core/default-features.ts
|
|
4231
4301
|
function defaultEngineFeatures() {
|
|
4232
4302
|
return [
|
|
@@ -4234,7 +4304,8 @@ function defaultEngineFeatures() {
|
|
|
4234
4304
|
visualViewportFeature(),
|
|
4235
4305
|
persistFeature(),
|
|
4236
4306
|
autoCollapseFeature(),
|
|
4237
|
-
routeFeature()
|
|
4307
|
+
routeFeature(),
|
|
4308
|
+
contentFitFeature()
|
|
4238
4309
|
];
|
|
4239
4310
|
}
|
|
4240
4311
|
|
|
@@ -4451,6 +4522,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
4451
4522
|
type: Boolean,
|
|
4452
4523
|
required: false
|
|
4453
4524
|
},
|
|
4525
|
+
fitContentToSnap: {
|
|
4526
|
+
type: Boolean,
|
|
4527
|
+
required: false
|
|
4528
|
+
},
|
|
4454
4529
|
rubberBand: {
|
|
4455
4530
|
type: Boolean,
|
|
4456
4531
|
required: false
|
package/dist/webgl.d.cts
CHANGED
package/dist/webgl.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@surdeddd/bottom-sheet",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.22.0",
|
|
4
4
|
"description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -240,37 +240,37 @@
|
|
|
240
240
|
{
|
|
241
241
|
"name": "core (engine + types)",
|
|
242
242
|
"path": "dist/index.js",
|
|
243
|
-
"limit": "
|
|
243
|
+
"limit": "22.1 KB",
|
|
244
244
|
"gzip": true
|
|
245
245
|
},
|
|
246
246
|
{
|
|
247
247
|
"name": "react adapter",
|
|
248
248
|
"path": "dist/react.js",
|
|
249
|
-
"limit": "29.
|
|
249
|
+
"limit": "29.57 KB",
|
|
250
250
|
"gzip": true
|
|
251
251
|
},
|
|
252
252
|
{
|
|
253
253
|
"name": "vue adapter",
|
|
254
254
|
"path": "dist/vue.js",
|
|
255
|
-
"limit": "
|
|
255
|
+
"limit": "25.32 KB",
|
|
256
256
|
"gzip": true
|
|
257
257
|
},
|
|
258
258
|
{
|
|
259
259
|
"name": "svelte adapter",
|
|
260
260
|
"path": "dist/svelte.js",
|
|
261
|
-
"limit": "24.
|
|
261
|
+
"limit": "24.96 KB",
|
|
262
262
|
"gzip": true
|
|
263
263
|
},
|
|
264
264
|
{
|
|
265
265
|
"name": "solid adapter",
|
|
266
266
|
"path": "dist/solid.js",
|
|
267
|
-
"limit": "23.
|
|
267
|
+
"limit": "23.61 KB",
|
|
268
268
|
"gzip": true
|
|
269
269
|
},
|
|
270
270
|
{
|
|
271
271
|
"name": "qwik adapter",
|
|
272
272
|
"path": "dist/qwik.js",
|
|
273
|
-
"limit": "23.
|
|
273
|
+
"limit": "23.66 KB",
|
|
274
274
|
"gzip": true
|
|
275
275
|
},
|
|
276
276
|
{
|
|
@@ -285,13 +285,13 @@
|
|
|
285
285
|
{
|
|
286
286
|
"name": "web component (self-contained)",
|
|
287
287
|
"path": "dist/element.js",
|
|
288
|
-
"limit": "28.
|
|
288
|
+
"limit": "28.8 KB",
|
|
289
289
|
"gzip": true
|
|
290
290
|
},
|
|
291
291
|
{
|
|
292
292
|
"name": "web component (IIFE / CDN)",
|
|
293
293
|
"path": "dist/element.iife.global.js",
|
|
294
|
-
"limit": "
|
|
294
|
+
"limit": "28.38 KB",
|
|
295
295
|
"gzip": true
|
|
296
296
|
},
|
|
297
297
|
{
|