@surdeddd/bottom-sheet 0.6.1 → 0.7.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 +31 -3
- package/dist/element.cjs +28 -26
- package/dist/element.iife.global.js +2 -2
- package/dist/element.js +28 -26
- package/dist/index.cjs +27 -25
- package/dist/index.js +27 -25
- package/dist/qwik.cjs +27 -25
- package/dist/qwik.js +27 -25
- package/dist/react.cjs +27 -25
- package/dist/react.js +27 -25
- package/dist/solid.cjs +30 -26
- package/dist/solid.d.cts +2 -0
- package/dist/solid.d.ts +2 -0
- package/dist/solid.js +30 -26
- package/dist/solid.source.jsx +30 -26
- package/dist/styles.css +4 -4
- package/dist/svelte-core.cjs +27 -25
- package/dist/svelte-core.js +27 -25
- package/dist/svelte.cjs +27 -25
- package/dist/svelte.js +27 -25
- package/dist/vue.cjs +27 -25
- package/dist/vue.js +27 -25
- package/package.json +1 -1
package/dist/svelte.cjs
CHANGED
|
@@ -2671,8 +2671,8 @@ var BottomSheetEngine = class {
|
|
|
2671
2671
|
this.updateAriaSlider();
|
|
2672
2672
|
this.emit("snap", {
|
|
2673
2673
|
id,
|
|
2674
|
-
size:
|
|
2675
|
-
progress: this.computeProgress(
|
|
2674
|
+
size: this.size,
|
|
2675
|
+
progress: this.computeProgress(this.size)
|
|
2676
2676
|
});
|
|
2677
2677
|
if (wasClosed && target.size > 0) {
|
|
2678
2678
|
this.emit("open", { id });
|
|
@@ -2751,12 +2751,12 @@ var BottomSheetEngine = class {
|
|
|
2751
2751
|
const value = typeof h === "number" ? `${h}px` : h;
|
|
2752
2752
|
const axis = layoutAxis(this.mode);
|
|
2753
2753
|
this.element.style.setProperty(
|
|
2754
|
-
axis === "height" ? "
|
|
2754
|
+
axis === "height" ? "max-height" : "max-width",
|
|
2755
2755
|
value
|
|
2756
2756
|
);
|
|
2757
2757
|
if (typeof h === "number") {
|
|
2758
2758
|
this.maxHeightCap = h;
|
|
2759
|
-
this.
|
|
2759
|
+
this.recompute();
|
|
2760
2760
|
} else if (typeof window !== "undefined") {
|
|
2761
2761
|
const probe2 = document.createElement("div");
|
|
2762
2762
|
probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
|
|
@@ -2764,7 +2764,7 @@ var BottomSheetEngine = class {
|
|
|
2764
2764
|
const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
|
|
2765
2765
|
probe2.remove();
|
|
2766
2766
|
this.maxHeightCap = measured > 0 ? measured : void 0;
|
|
2767
|
-
this.
|
|
2767
|
+
this.recompute();
|
|
2768
2768
|
}
|
|
2769
2769
|
}
|
|
2770
2770
|
clampToMaxHeight() {
|
|
@@ -2772,9 +2772,6 @@ var BottomSheetEngine = class {
|
|
|
2772
2772
|
if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
|
|
2773
2773
|
this.snaps.setMaxAxisSize(this.maxHeightCap);
|
|
2774
2774
|
}
|
|
2775
|
-
if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
|
|
2776
|
-
this.applySize(this.maxHeightCap);
|
|
2777
|
-
}
|
|
2778
2775
|
}
|
|
2779
2776
|
setAllowed(ids, snap) {
|
|
2780
2777
|
if (this.destroyed) return;
|
|
@@ -2912,6 +2909,7 @@ var BottomSheetEngine = class {
|
|
|
2912
2909
|
recompute() {
|
|
2913
2910
|
if (this.destroyed) return;
|
|
2914
2911
|
this.snaps.recompute();
|
|
2912
|
+
this.clampToMaxHeight();
|
|
2915
2913
|
this.scrim.invalidateOpacityCache();
|
|
2916
2914
|
if (this.gesture?.isDragging) return;
|
|
2917
2915
|
const current = this.snaps.findById(this.activeId);
|
|
@@ -2969,9 +2967,10 @@ var BottomSheetEngine = class {
|
|
|
2969
2967
|
const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
|
|
2970
2968
|
const content = this.scrollContainer;
|
|
2971
2969
|
const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
|
|
2972
|
-
|
|
2970
|
+
const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
|
|
2971
|
+
if (typeof window === "undefined") return capped;
|
|
2973
2972
|
const viewport = vertical ? window.innerHeight : window.innerWidth;
|
|
2974
|
-
return viewport > 0 ? Math.min(
|
|
2973
|
+
return viewport > 0 ? Math.min(capped, viewport) : capped;
|
|
2975
2974
|
}
|
|
2976
2975
|
installFitObserver() {
|
|
2977
2976
|
if (typeof ResizeObserver === "undefined") return;
|
|
@@ -3342,8 +3341,8 @@ var BottomSheetEngine = class {
|
|
|
3342
3341
|
this.updateAriaSlider();
|
|
3343
3342
|
this.emit("snap", {
|
|
3344
3343
|
id: target.id,
|
|
3345
|
-
size:
|
|
3346
|
-
progress: this.computeProgress(
|
|
3344
|
+
size: this.size,
|
|
3345
|
+
progress: this.computeProgress(this.size)
|
|
3347
3346
|
});
|
|
3348
3347
|
this.haptic();
|
|
3349
3348
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
@@ -3368,23 +3367,25 @@ var BottomSheetEngine = class {
|
|
|
3368
3367
|
}
|
|
3369
3368
|
}
|
|
3370
3369
|
applySize(size) {
|
|
3371
|
-
|
|
3372
|
-
const
|
|
3370
|
+
const cap = this.snaps.getMaxAxisSize();
|
|
3371
|
+
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
|
|
3372
|
+
this.size = clamped;
|
|
3373
|
+
const offset = cap - clamped;
|
|
3373
3374
|
const style = this.element.style;
|
|
3374
3375
|
style.transform = this.transformTemplate(offset);
|
|
3375
|
-
if (this.sizeWriteSentinel.shouldWrite(
|
|
3376
|
-
style.setProperty("--bs-size", `${
|
|
3376
|
+
if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
|
|
3377
|
+
style.setProperty("--bs-size", `${clamped}px`);
|
|
3377
3378
|
if (this.scrimParent) {
|
|
3378
|
-
this.scrimParent.style.setProperty("--bs-size", `${
|
|
3379
|
+
this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
|
|
3379
3380
|
}
|
|
3380
3381
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3381
|
-
this.anchorHost.style.setProperty("--bs-size", `${
|
|
3382
|
+
this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
|
|
3382
3383
|
}
|
|
3383
3384
|
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3384
|
-
this.rootEl.style.setProperty("--bs-size", `${
|
|
3385
|
+
this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
|
|
3385
3386
|
}
|
|
3386
3387
|
}
|
|
3387
|
-
const progress = this.computeProgress(
|
|
3388
|
+
const progress = this.computeProgress(clamped);
|
|
3388
3389
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
3389
3390
|
progress,
|
|
3390
3391
|
OPACITY_WRITE_EPSILON
|
|
@@ -3401,14 +3402,15 @@ var BottomSheetEngine = class {
|
|
|
3401
3402
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3402
3403
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
3403
3404
|
this.progressPayload.value = progress;
|
|
3404
|
-
this.progressPayload.size =
|
|
3405
|
+
this.progressPayload.size = clamped;
|
|
3405
3406
|
this.emit("progress", this.progressPayload);
|
|
3406
3407
|
}
|
|
3407
3408
|
}
|
|
3408
3409
|
computeProgress(size) {
|
|
3409
3410
|
const { min, max } = this.getAllowedRange();
|
|
3410
|
-
|
|
3411
|
-
|
|
3411
|
+
const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
|
|
3412
|
+
if (reachableMax <= min) return 0;
|
|
3413
|
+
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3412
3414
|
}
|
|
3413
3415
|
handleOpen() {
|
|
3414
3416
|
sheetStack.promote(this.id);
|
|
@@ -3432,8 +3434,8 @@ var BottomSheetEngine = class {
|
|
|
3432
3434
|
this.updateAriaSlider();
|
|
3433
3435
|
this.emit("snap", {
|
|
3434
3436
|
id: target.id,
|
|
3435
|
-
size:
|
|
3436
|
-
progress: this.computeProgress(
|
|
3437
|
+
size: this.size,
|
|
3438
|
+
progress: this.computeProgress(this.size)
|
|
3437
3439
|
});
|
|
3438
3440
|
if (target.size > 0 && !this.lifecycle.isInstalled) {
|
|
3439
3441
|
this.emit("open", { id: target.id });
|
package/dist/svelte.js
CHANGED
|
@@ -2649,8 +2649,8 @@ var BottomSheetEngine = class {
|
|
|
2649
2649
|
this.updateAriaSlider();
|
|
2650
2650
|
this.emit("snap", {
|
|
2651
2651
|
id,
|
|
2652
|
-
size:
|
|
2653
|
-
progress: this.computeProgress(
|
|
2652
|
+
size: this.size,
|
|
2653
|
+
progress: this.computeProgress(this.size)
|
|
2654
2654
|
});
|
|
2655
2655
|
if (wasClosed && target.size > 0) {
|
|
2656
2656
|
this.emit("open", { id });
|
|
@@ -2729,12 +2729,12 @@ var BottomSheetEngine = class {
|
|
|
2729
2729
|
const value = typeof h === "number" ? `${h}px` : h;
|
|
2730
2730
|
const axis = layoutAxis(this.mode);
|
|
2731
2731
|
this.element.style.setProperty(
|
|
2732
|
-
axis === "height" ? "
|
|
2732
|
+
axis === "height" ? "max-height" : "max-width",
|
|
2733
2733
|
value
|
|
2734
2734
|
);
|
|
2735
2735
|
if (typeof h === "number") {
|
|
2736
2736
|
this.maxHeightCap = h;
|
|
2737
|
-
this.
|
|
2737
|
+
this.recompute();
|
|
2738
2738
|
} else if (typeof window !== "undefined") {
|
|
2739
2739
|
const probe2 = document.createElement("div");
|
|
2740
2740
|
probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
|
|
@@ -2742,7 +2742,7 @@ var BottomSheetEngine = class {
|
|
|
2742
2742
|
const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
|
|
2743
2743
|
probe2.remove();
|
|
2744
2744
|
this.maxHeightCap = measured > 0 ? measured : void 0;
|
|
2745
|
-
this.
|
|
2745
|
+
this.recompute();
|
|
2746
2746
|
}
|
|
2747
2747
|
}
|
|
2748
2748
|
clampToMaxHeight() {
|
|
@@ -2750,9 +2750,6 @@ var BottomSheetEngine = class {
|
|
|
2750
2750
|
if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
|
|
2751
2751
|
this.snaps.setMaxAxisSize(this.maxHeightCap);
|
|
2752
2752
|
}
|
|
2753
|
-
if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
|
|
2754
|
-
this.applySize(this.maxHeightCap);
|
|
2755
|
-
}
|
|
2756
2753
|
}
|
|
2757
2754
|
setAllowed(ids, snap) {
|
|
2758
2755
|
if (this.destroyed) return;
|
|
@@ -2890,6 +2887,7 @@ var BottomSheetEngine = class {
|
|
|
2890
2887
|
recompute() {
|
|
2891
2888
|
if (this.destroyed) return;
|
|
2892
2889
|
this.snaps.recompute();
|
|
2890
|
+
this.clampToMaxHeight();
|
|
2893
2891
|
this.scrim.invalidateOpacityCache();
|
|
2894
2892
|
if (this.gesture?.isDragging) return;
|
|
2895
2893
|
const current = this.snaps.findById(this.activeId);
|
|
@@ -2947,9 +2945,10 @@ var BottomSheetEngine = class {
|
|
|
2947
2945
|
const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
|
|
2948
2946
|
const content = this.scrollContainer;
|
|
2949
2947
|
const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
|
|
2950
|
-
|
|
2948
|
+
const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
|
|
2949
|
+
if (typeof window === "undefined") return capped;
|
|
2951
2950
|
const viewport = vertical ? window.innerHeight : window.innerWidth;
|
|
2952
|
-
return viewport > 0 ? Math.min(
|
|
2951
|
+
return viewport > 0 ? Math.min(capped, viewport) : capped;
|
|
2953
2952
|
}
|
|
2954
2953
|
installFitObserver() {
|
|
2955
2954
|
if (typeof ResizeObserver === "undefined") return;
|
|
@@ -3320,8 +3319,8 @@ var BottomSheetEngine = class {
|
|
|
3320
3319
|
this.updateAriaSlider();
|
|
3321
3320
|
this.emit("snap", {
|
|
3322
3321
|
id: target.id,
|
|
3323
|
-
size:
|
|
3324
|
-
progress: this.computeProgress(
|
|
3322
|
+
size: this.size,
|
|
3323
|
+
progress: this.computeProgress(this.size)
|
|
3325
3324
|
});
|
|
3326
3325
|
this.haptic();
|
|
3327
3326
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
@@ -3346,23 +3345,25 @@ var BottomSheetEngine = class {
|
|
|
3346
3345
|
}
|
|
3347
3346
|
}
|
|
3348
3347
|
applySize(size) {
|
|
3349
|
-
|
|
3350
|
-
const
|
|
3348
|
+
const cap = this.snaps.getMaxAxisSize();
|
|
3349
|
+
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
|
|
3350
|
+
this.size = clamped;
|
|
3351
|
+
const offset = cap - clamped;
|
|
3351
3352
|
const style = this.element.style;
|
|
3352
3353
|
style.transform = this.transformTemplate(offset);
|
|
3353
|
-
if (this.sizeWriteSentinel.shouldWrite(
|
|
3354
|
-
style.setProperty("--bs-size", `${
|
|
3354
|
+
if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
|
|
3355
|
+
style.setProperty("--bs-size", `${clamped}px`);
|
|
3355
3356
|
if (this.scrimParent) {
|
|
3356
|
-
this.scrimParent.style.setProperty("--bs-size", `${
|
|
3357
|
+
this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
|
|
3357
3358
|
}
|
|
3358
3359
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3359
|
-
this.anchorHost.style.setProperty("--bs-size", `${
|
|
3360
|
+
this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
|
|
3360
3361
|
}
|
|
3361
3362
|
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3362
|
-
this.rootEl.style.setProperty("--bs-size", `${
|
|
3363
|
+
this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
|
|
3363
3364
|
}
|
|
3364
3365
|
}
|
|
3365
|
-
const progress = this.computeProgress(
|
|
3366
|
+
const progress = this.computeProgress(clamped);
|
|
3366
3367
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
3367
3368
|
progress,
|
|
3368
3369
|
OPACITY_WRITE_EPSILON
|
|
@@ -3379,14 +3380,15 @@ var BottomSheetEngine = class {
|
|
|
3379
3380
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3380
3381
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
3381
3382
|
this.progressPayload.value = progress;
|
|
3382
|
-
this.progressPayload.size =
|
|
3383
|
+
this.progressPayload.size = clamped;
|
|
3383
3384
|
this.emit("progress", this.progressPayload);
|
|
3384
3385
|
}
|
|
3385
3386
|
}
|
|
3386
3387
|
computeProgress(size) {
|
|
3387
3388
|
const { min, max } = this.getAllowedRange();
|
|
3388
|
-
|
|
3389
|
-
|
|
3389
|
+
const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
|
|
3390
|
+
if (reachableMax <= min) return 0;
|
|
3391
|
+
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3390
3392
|
}
|
|
3391
3393
|
handleOpen() {
|
|
3392
3394
|
sheetStack.promote(this.id);
|
|
@@ -3410,8 +3412,8 @@ var BottomSheetEngine = class {
|
|
|
3410
3412
|
this.updateAriaSlider();
|
|
3411
3413
|
this.emit("snap", {
|
|
3412
3414
|
id: target.id,
|
|
3413
|
-
size:
|
|
3414
|
-
progress: this.computeProgress(
|
|
3415
|
+
size: this.size,
|
|
3416
|
+
progress: this.computeProgress(this.size)
|
|
3415
3417
|
});
|
|
3416
3418
|
if (target.size > 0 && !this.lifecycle.isInstalled) {
|
|
3417
3419
|
this.emit("open", { id: target.id });
|
package/dist/vue.cjs
CHANGED
|
@@ -2649,8 +2649,8 @@ var BottomSheetEngine = class {
|
|
|
2649
2649
|
this.updateAriaSlider();
|
|
2650
2650
|
this.emit("snap", {
|
|
2651
2651
|
id,
|
|
2652
|
-
size:
|
|
2653
|
-
progress: this.computeProgress(
|
|
2652
|
+
size: this.size,
|
|
2653
|
+
progress: this.computeProgress(this.size)
|
|
2654
2654
|
});
|
|
2655
2655
|
if (wasClosed && target.size > 0) {
|
|
2656
2656
|
this.emit("open", { id });
|
|
@@ -2729,12 +2729,12 @@ var BottomSheetEngine = class {
|
|
|
2729
2729
|
const value = typeof h === "number" ? `${h}px` : h;
|
|
2730
2730
|
const axis = layoutAxis(this.mode);
|
|
2731
2731
|
this.element.style.setProperty(
|
|
2732
|
-
axis === "height" ? "
|
|
2732
|
+
axis === "height" ? "max-height" : "max-width",
|
|
2733
2733
|
value
|
|
2734
2734
|
);
|
|
2735
2735
|
if (typeof h === "number") {
|
|
2736
2736
|
this.maxHeightCap = h;
|
|
2737
|
-
this.
|
|
2737
|
+
this.recompute();
|
|
2738
2738
|
} else if (typeof window !== "undefined") {
|
|
2739
2739
|
const probe2 = document.createElement("div");
|
|
2740
2740
|
probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
|
|
@@ -2742,7 +2742,7 @@ var BottomSheetEngine = class {
|
|
|
2742
2742
|
const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
|
|
2743
2743
|
probe2.remove();
|
|
2744
2744
|
this.maxHeightCap = measured > 0 ? measured : void 0;
|
|
2745
|
-
this.
|
|
2745
|
+
this.recompute();
|
|
2746
2746
|
}
|
|
2747
2747
|
}
|
|
2748
2748
|
clampToMaxHeight() {
|
|
@@ -2750,9 +2750,6 @@ var BottomSheetEngine = class {
|
|
|
2750
2750
|
if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
|
|
2751
2751
|
this.snaps.setMaxAxisSize(this.maxHeightCap);
|
|
2752
2752
|
}
|
|
2753
|
-
if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
|
|
2754
|
-
this.applySize(this.maxHeightCap);
|
|
2755
|
-
}
|
|
2756
2753
|
}
|
|
2757
2754
|
setAllowed(ids, snap) {
|
|
2758
2755
|
if (this.destroyed) return;
|
|
@@ -2890,6 +2887,7 @@ var BottomSheetEngine = class {
|
|
|
2890
2887
|
recompute() {
|
|
2891
2888
|
if (this.destroyed) return;
|
|
2892
2889
|
this.snaps.recompute();
|
|
2890
|
+
this.clampToMaxHeight();
|
|
2893
2891
|
this.scrim.invalidateOpacityCache();
|
|
2894
2892
|
if (this.gesture?.isDragging) return;
|
|
2895
2893
|
const current = this.snaps.findById(this.activeId);
|
|
@@ -2947,9 +2945,10 @@ var BottomSheetEngine = class {
|
|
|
2947
2945
|
const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
|
|
2948
2946
|
const content = this.scrollContainer;
|
|
2949
2947
|
const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
|
|
2950
|
-
|
|
2948
|
+
const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
|
|
2949
|
+
if (typeof window === "undefined") return capped;
|
|
2951
2950
|
const viewport = vertical ? window.innerHeight : window.innerWidth;
|
|
2952
|
-
return viewport > 0 ? Math.min(
|
|
2951
|
+
return viewport > 0 ? Math.min(capped, viewport) : capped;
|
|
2953
2952
|
}
|
|
2954
2953
|
installFitObserver() {
|
|
2955
2954
|
if (typeof ResizeObserver === "undefined") return;
|
|
@@ -3320,8 +3319,8 @@ var BottomSheetEngine = class {
|
|
|
3320
3319
|
this.updateAriaSlider();
|
|
3321
3320
|
this.emit("snap", {
|
|
3322
3321
|
id: target.id,
|
|
3323
|
-
size:
|
|
3324
|
-
progress: this.computeProgress(
|
|
3322
|
+
size: this.size,
|
|
3323
|
+
progress: this.computeProgress(this.size)
|
|
3325
3324
|
});
|
|
3326
3325
|
this.haptic();
|
|
3327
3326
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
@@ -3346,23 +3345,25 @@ var BottomSheetEngine = class {
|
|
|
3346
3345
|
}
|
|
3347
3346
|
}
|
|
3348
3347
|
applySize(size) {
|
|
3349
|
-
|
|
3350
|
-
const
|
|
3348
|
+
const cap = this.snaps.getMaxAxisSize();
|
|
3349
|
+
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
|
|
3350
|
+
this.size = clamped;
|
|
3351
|
+
const offset = cap - clamped;
|
|
3351
3352
|
const style = this.element.style;
|
|
3352
3353
|
style.transform = this.transformTemplate(offset);
|
|
3353
|
-
if (this.sizeWriteSentinel.shouldWrite(
|
|
3354
|
-
style.setProperty("--bs-size", `${
|
|
3354
|
+
if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
|
|
3355
|
+
style.setProperty("--bs-size", `${clamped}px`);
|
|
3355
3356
|
if (this.scrimParent) {
|
|
3356
|
-
this.scrimParent.style.setProperty("--bs-size", `${
|
|
3357
|
+
this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
|
|
3357
3358
|
}
|
|
3358
3359
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3359
|
-
this.anchorHost.style.setProperty("--bs-size", `${
|
|
3360
|
+
this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
|
|
3360
3361
|
}
|
|
3361
3362
|
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3362
|
-
this.rootEl.style.setProperty("--bs-size", `${
|
|
3363
|
+
this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
|
|
3363
3364
|
}
|
|
3364
3365
|
}
|
|
3365
|
-
const progress = this.computeProgress(
|
|
3366
|
+
const progress = this.computeProgress(clamped);
|
|
3366
3367
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
3367
3368
|
progress,
|
|
3368
3369
|
OPACITY_WRITE_EPSILON
|
|
@@ -3379,14 +3380,15 @@ var BottomSheetEngine = class {
|
|
|
3379
3380
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3380
3381
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
3381
3382
|
this.progressPayload.value = progress;
|
|
3382
|
-
this.progressPayload.size =
|
|
3383
|
+
this.progressPayload.size = clamped;
|
|
3383
3384
|
this.emit("progress", this.progressPayload);
|
|
3384
3385
|
}
|
|
3385
3386
|
}
|
|
3386
3387
|
computeProgress(size) {
|
|
3387
3388
|
const { min, max } = this.getAllowedRange();
|
|
3388
|
-
|
|
3389
|
-
|
|
3389
|
+
const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
|
|
3390
|
+
if (reachableMax <= min) return 0;
|
|
3391
|
+
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3390
3392
|
}
|
|
3391
3393
|
handleOpen() {
|
|
3392
3394
|
sheetStack.promote(this.id);
|
|
@@ -3410,8 +3412,8 @@ var BottomSheetEngine = class {
|
|
|
3410
3412
|
this.updateAriaSlider();
|
|
3411
3413
|
this.emit("snap", {
|
|
3412
3414
|
id: target.id,
|
|
3413
|
-
size:
|
|
3414
|
-
progress: this.computeProgress(
|
|
3415
|
+
size: this.size,
|
|
3416
|
+
progress: this.computeProgress(this.size)
|
|
3415
3417
|
});
|
|
3416
3418
|
if (target.size > 0 && !this.lifecycle.isInstalled) {
|
|
3417
3419
|
this.emit("open", { id: target.id });
|
package/dist/vue.js
CHANGED
|
@@ -2647,8 +2647,8 @@ var BottomSheetEngine = class {
|
|
|
2647
2647
|
this.updateAriaSlider();
|
|
2648
2648
|
this.emit("snap", {
|
|
2649
2649
|
id,
|
|
2650
|
-
size:
|
|
2651
|
-
progress: this.computeProgress(
|
|
2650
|
+
size: this.size,
|
|
2651
|
+
progress: this.computeProgress(this.size)
|
|
2652
2652
|
});
|
|
2653
2653
|
if (wasClosed && target.size > 0) {
|
|
2654
2654
|
this.emit("open", { id });
|
|
@@ -2727,12 +2727,12 @@ var BottomSheetEngine = class {
|
|
|
2727
2727
|
const value = typeof h === "number" ? `${h}px` : h;
|
|
2728
2728
|
const axis = layoutAxis(this.mode);
|
|
2729
2729
|
this.element.style.setProperty(
|
|
2730
|
-
axis === "height" ? "
|
|
2730
|
+
axis === "height" ? "max-height" : "max-width",
|
|
2731
2731
|
value
|
|
2732
2732
|
);
|
|
2733
2733
|
if (typeof h === "number") {
|
|
2734
2734
|
this.maxHeightCap = h;
|
|
2735
|
-
this.
|
|
2735
|
+
this.recompute();
|
|
2736
2736
|
} else if (typeof window !== "undefined") {
|
|
2737
2737
|
const probe2 = document.createElement("div");
|
|
2738
2738
|
probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
|
|
@@ -2740,7 +2740,7 @@ var BottomSheetEngine = class {
|
|
|
2740
2740
|
const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
|
|
2741
2741
|
probe2.remove();
|
|
2742
2742
|
this.maxHeightCap = measured > 0 ? measured : void 0;
|
|
2743
|
-
this.
|
|
2743
|
+
this.recompute();
|
|
2744
2744
|
}
|
|
2745
2745
|
}
|
|
2746
2746
|
clampToMaxHeight() {
|
|
@@ -2748,9 +2748,6 @@ var BottomSheetEngine = class {
|
|
|
2748
2748
|
if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
|
|
2749
2749
|
this.snaps.setMaxAxisSize(this.maxHeightCap);
|
|
2750
2750
|
}
|
|
2751
|
-
if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
|
|
2752
|
-
this.applySize(this.maxHeightCap);
|
|
2753
|
-
}
|
|
2754
2751
|
}
|
|
2755
2752
|
setAllowed(ids, snap) {
|
|
2756
2753
|
if (this.destroyed) return;
|
|
@@ -2888,6 +2885,7 @@ var BottomSheetEngine = class {
|
|
|
2888
2885
|
recompute() {
|
|
2889
2886
|
if (this.destroyed) return;
|
|
2890
2887
|
this.snaps.recompute();
|
|
2888
|
+
this.clampToMaxHeight();
|
|
2891
2889
|
this.scrim.invalidateOpacityCache();
|
|
2892
2890
|
if (this.gesture?.isDragging) return;
|
|
2893
2891
|
const current = this.snaps.findById(this.activeId);
|
|
@@ -2945,9 +2943,10 @@ var BottomSheetEngine = class {
|
|
|
2945
2943
|
const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
|
|
2946
2944
|
const content = this.scrollContainer;
|
|
2947
2945
|
const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
|
|
2948
|
-
|
|
2946
|
+
const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
|
|
2947
|
+
if (typeof window === "undefined") return capped;
|
|
2949
2948
|
const viewport = vertical ? window.innerHeight : window.innerWidth;
|
|
2950
|
-
return viewport > 0 ? Math.min(
|
|
2949
|
+
return viewport > 0 ? Math.min(capped, viewport) : capped;
|
|
2951
2950
|
}
|
|
2952
2951
|
installFitObserver() {
|
|
2953
2952
|
if (typeof ResizeObserver === "undefined") return;
|
|
@@ -3318,8 +3317,8 @@ var BottomSheetEngine = class {
|
|
|
3318
3317
|
this.updateAriaSlider();
|
|
3319
3318
|
this.emit("snap", {
|
|
3320
3319
|
id: target.id,
|
|
3321
|
-
size:
|
|
3322
|
-
progress: this.computeProgress(
|
|
3320
|
+
size: this.size,
|
|
3321
|
+
progress: this.computeProgress(this.size)
|
|
3323
3322
|
});
|
|
3324
3323
|
this.haptic();
|
|
3325
3324
|
if (previousSnapSize === 0 && target.size > 0) {
|
|
@@ -3344,23 +3343,25 @@ var BottomSheetEngine = class {
|
|
|
3344
3343
|
}
|
|
3345
3344
|
}
|
|
3346
3345
|
applySize(size) {
|
|
3347
|
-
|
|
3348
|
-
const
|
|
3346
|
+
const cap = this.snaps.getMaxAxisSize();
|
|
3347
|
+
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
|
|
3348
|
+
this.size = clamped;
|
|
3349
|
+
const offset = cap - clamped;
|
|
3349
3350
|
const style = this.element.style;
|
|
3350
3351
|
style.transform = this.transformTemplate(offset);
|
|
3351
|
-
if (this.sizeWriteSentinel.shouldWrite(
|
|
3352
|
-
style.setProperty("--bs-size", `${
|
|
3352
|
+
if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
|
|
3353
|
+
style.setProperty("--bs-size", `${clamped}px`);
|
|
3353
3354
|
if (this.scrimParent) {
|
|
3354
|
-
this.scrimParent.style.setProperty("--bs-size", `${
|
|
3355
|
+
this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
|
|
3355
3356
|
}
|
|
3356
3357
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3357
|
-
this.anchorHost.style.setProperty("--bs-size", `${
|
|
3358
|
+
this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
|
|
3358
3359
|
}
|
|
3359
3360
|
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3360
|
-
this.rootEl.style.setProperty("--bs-size", `${
|
|
3361
|
+
this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
|
|
3361
3362
|
}
|
|
3362
3363
|
}
|
|
3363
|
-
const progress = this.computeProgress(
|
|
3364
|
+
const progress = this.computeProgress(clamped);
|
|
3364
3365
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
3365
3366
|
progress,
|
|
3366
3367
|
OPACITY_WRITE_EPSILON
|
|
@@ -3377,14 +3378,15 @@ var BottomSheetEngine = class {
|
|
|
3377
3378
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3378
3379
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
3379
3380
|
this.progressPayload.value = progress;
|
|
3380
|
-
this.progressPayload.size =
|
|
3381
|
+
this.progressPayload.size = clamped;
|
|
3381
3382
|
this.emit("progress", this.progressPayload);
|
|
3382
3383
|
}
|
|
3383
3384
|
}
|
|
3384
3385
|
computeProgress(size) {
|
|
3385
3386
|
const { min, max } = this.getAllowedRange();
|
|
3386
|
-
|
|
3387
|
-
|
|
3387
|
+
const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
|
|
3388
|
+
if (reachableMax <= min) return 0;
|
|
3389
|
+
return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
|
|
3388
3390
|
}
|
|
3389
3391
|
handleOpen() {
|
|
3390
3392
|
sheetStack.promote(this.id);
|
|
@@ -3408,8 +3410,8 @@ var BottomSheetEngine = class {
|
|
|
3408
3410
|
this.updateAriaSlider();
|
|
3409
3411
|
this.emit("snap", {
|
|
3410
3412
|
id: target.id,
|
|
3411
|
-
size:
|
|
3412
|
-
progress: this.computeProgress(
|
|
3413
|
+
size: this.size,
|
|
3414
|
+
progress: this.computeProgress(this.size)
|
|
3413
3415
|
});
|
|
3414
3416
|
if (target.size > 0 && !this.lifecycle.isInstalled) {
|
|
3415
3417
|
this.emit("open", { id: target.id });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@surdeddd/bottom-sheet",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.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",
|