@surdeddd/bottom-sheet 0.7.0 → 0.8.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/dist/{BottomSheetEngine-CqiCz64W.d.cts → BottomSheetEngine-BD1mSExI.d.cts} +2 -1
- package/dist/{BottomSheetEngine-BHjKFtnM.d.ts → BottomSheetEngine-BDGRWa2i.d.ts} +2 -1
- package/dist/element.cjs +35 -32
- package/dist/element.d.cts +1 -1
- package/dist/element.d.ts +1 -1
- package/dist/element.iife.global.js +2 -2
- package/dist/element.js +35 -32
- package/dist/index.cjs +36 -33
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +36 -33
- 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 +1 -1
- package/dist/preact.d.ts +1 -1
- package/dist/qwik.cjs +63 -35
- package/dist/qwik.d.cts +8 -3
- package/dist/qwik.d.ts +8 -3
- package/dist/qwik.js +63 -35
- package/dist/react.cjs +48 -33
- package/dist/react.d.cts +2 -2
- package/dist/react.d.ts +2 -2
- package/dist/react.js +48 -33
- package/dist/solid.cjs +43 -35
- package/dist/solid.d.cts +7 -1
- package/dist/solid.d.ts +7 -1
- package/dist/solid.js +43 -35
- package/dist/solid.source.jsx +43 -35
- package/dist/svelte-core.cjs +36 -33
- package/dist/svelte-core.js +36 -33
- package/dist/svelte-src/BottomSheet.svelte +0 -10
- package/dist/svelte.cjs +44 -53
- package/dist/svelte.js +44 -53
- package/dist/vue.cjs +36 -49
- package/dist/vue.js +36 -49
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2364,6 +2364,7 @@ var BottomSheetEngine = class {
|
|
|
2364
2364
|
__publicField(this, "progressWriteSentinel", new WriteSentinel());
|
|
2365
2365
|
__publicField(this, "isTopSheet", true);
|
|
2366
2366
|
__publicField(this, "opening", false);
|
|
2367
|
+
__publicField(this, "allowOvershoot", false);
|
|
2367
2368
|
__publicField(this, "progressPayload", {
|
|
2368
2369
|
value: 0,
|
|
2369
2370
|
size: 0
|
|
@@ -2916,40 +2917,32 @@ var BottomSheetEngine = class {
|
|
|
2916
2917
|
}
|
|
2917
2918
|
return out;
|
|
2918
2919
|
}
|
|
2919
|
-
|
|
2920
|
+
measureSheetNatural(vertical) {
|
|
2921
|
+
const el = this.element;
|
|
2920
2922
|
const content = this.scrollContainer;
|
|
2921
|
-
if (!content)
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
}
|
|
2941
|
-
let pad = 0;
|
|
2942
|
-
if (typeof getComputedStyle !== "undefined") {
|
|
2943
|
-
const cs = getComputedStyle(content);
|
|
2944
|
-
pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
|
|
2945
|
-
}
|
|
2946
|
-
return max - min + pad;
|
|
2923
|
+
if (!content) {
|
|
2924
|
+
return vertical ? el.offsetHeight : el.offsetWidth;
|
|
2925
|
+
}
|
|
2926
|
+
const axis = vertical ? "height" : "width";
|
|
2927
|
+
const sheetStyle = el.style;
|
|
2928
|
+
const cs = content.style;
|
|
2929
|
+
const prevSheet = sheetStyle[axis];
|
|
2930
|
+
const prevFlex = cs.flex;
|
|
2931
|
+
const prevContent = vertical ? cs.height : cs.width;
|
|
2932
|
+
sheetStyle[axis] = "auto";
|
|
2933
|
+
cs.flex = "none";
|
|
2934
|
+
if (vertical) cs.height = "auto";
|
|
2935
|
+
else cs.width = "auto";
|
|
2936
|
+
const natural = vertical ? el.offsetHeight : el.offsetWidth;
|
|
2937
|
+
sheetStyle[axis] = prevSheet;
|
|
2938
|
+
cs.flex = prevFlex;
|
|
2939
|
+
if (vertical) cs.height = prevContent;
|
|
2940
|
+
else cs.width = prevContent;
|
|
2941
|
+
return natural;
|
|
2947
2942
|
}
|
|
2948
2943
|
measureFitSize() {
|
|
2949
2944
|
const vertical = layoutAxis(this.mode) === "height";
|
|
2950
|
-
const
|
|
2951
|
-
const content = this.scrollContainer;
|
|
2952
|
-
const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
|
|
2945
|
+
const natural = this.measureSheetNatural(vertical);
|
|
2953
2946
|
const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
|
|
2954
2947
|
if (typeof window === "undefined") return capped;
|
|
2955
2948
|
const viewport = vertical ? window.innerHeight : window.innerWidth;
|
|
@@ -3035,6 +3028,10 @@ var BottomSheetEngine = class {
|
|
|
3035
3028
|
this.backdrop.style.opacity = "";
|
|
3036
3029
|
this.backdrop.style.pointerEvents = "";
|
|
3037
3030
|
}
|
|
3031
|
+
if (this.anchorHost) {
|
|
3032
|
+
this.anchorHost.style.removeProperty("--bs-size");
|
|
3033
|
+
this.anchorHost.style.removeProperty("--bs-progress");
|
|
3034
|
+
}
|
|
3038
3035
|
if (this.screenComponent) {
|
|
3039
3036
|
this.screenComponent.style.opacity = "";
|
|
3040
3037
|
this.screenComponent.style.display = "";
|
|
@@ -3046,6 +3043,7 @@ var BottomSheetEngine = class {
|
|
|
3046
3043
|
this.bus.emit(event, payload);
|
|
3047
3044
|
}
|
|
3048
3045
|
newCycle() {
|
|
3046
|
+
this.allowOvershoot = false;
|
|
3049
3047
|
this.currentAbort.abort();
|
|
3050
3048
|
this.currentAbort = new AbortController();
|
|
3051
3049
|
return this.currentAbort.signal;
|
|
@@ -3111,6 +3109,7 @@ var BottomSheetEngine = class {
|
|
|
3111
3109
|
seen.add(p.id);
|
|
3112
3110
|
}
|
|
3113
3111
|
this.snaps.setRaw(this.snapPointsRaw);
|
|
3112
|
+
this.clampToMaxHeight();
|
|
3114
3113
|
this.scrim.invalidateOpacityCache();
|
|
3115
3114
|
}
|
|
3116
3115
|
getAllowedRange() {
|
|
@@ -3317,9 +3316,13 @@ var BottomSheetEngine = class {
|
|
|
3317
3316
|
this.opening = true;
|
|
3318
3317
|
sheetStack.promote(this.id);
|
|
3319
3318
|
}
|
|
3320
|
-
|
|
3321
|
-
|
|
3319
|
+
const settleCap = this.snaps.getMaxAxisSize();
|
|
3320
|
+
const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
|
|
3321
|
+
this.allowOvershoot = true;
|
|
3322
|
+
void this.animation.animateTo(settleSize, velocity).then(() => {
|
|
3322
3323
|
if (signal.aborted) return;
|
|
3324
|
+
this.allowOvershoot = false;
|
|
3325
|
+
this.opening = false;
|
|
3323
3326
|
this.scrollCache.restore(target.id, previousSize, target.size);
|
|
3324
3327
|
this.updateAriaSlider();
|
|
3325
3328
|
this.emit("snap", {
|
|
@@ -3351,7 +3354,7 @@ var BottomSheetEngine = class {
|
|
|
3351
3354
|
}
|
|
3352
3355
|
applySize(size) {
|
|
3353
3356
|
const cap = this.snaps.getMaxAxisSize();
|
|
3354
|
-
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
|
|
3357
|
+
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
|
|
3355
3358
|
this.size = clamped;
|
|
3356
3359
|
const offset = cap - clamped;
|
|
3357
3360
|
const style = this.element.style;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { d as SnapPoint, b as SheetMode, a as SnapPointDef, c as EngineOptions, f as ScrimOverlayPosition } from './BottomSheetEngine-
|
|
2
|
-
export { g as AnchorAnimationPreset, h as AnchorAnimationSpec, i as AnchorHandle, A as AnchorOptions, j as AnchorPosition, k as AnchorState, B as BottomSheetEngine, C as CloseReason, E as EngineState, P as Plugin, l as SCRIM_PRESETS, m as ScrimOverlayOptions, n as ScrimPreset, o as ScrimPresetConfig, p as ScrimStageDef, S as ScrimStagesOptions, q as ScrimUpdate, e as SheetEventMap, r as SnapId, T as TeardownScope, s as runAnchorTransition } from './BottomSheetEngine-
|
|
1
|
+
import { d as SnapPoint, b as SheetMode, a as SnapPointDef, c as EngineOptions, f as ScrimOverlayPosition } from './BottomSheetEngine-BD1mSExI.cjs';
|
|
2
|
+
export { g as AnchorAnimationPreset, h as AnchorAnimationSpec, i as AnchorHandle, A as AnchorOptions, j as AnchorPosition, k as AnchorState, B as BottomSheetEngine, C as CloseReason, E as EngineState, P as Plugin, l as SCRIM_PRESETS, m as ScrimOverlayOptions, n as ScrimPreset, o as ScrimPresetConfig, p as ScrimStageDef, S as ScrimStagesOptions, q as ScrimUpdate, e as SheetEventMap, r as SnapId, T as TeardownScope, s as runAnchorTransition } from './BottomSheetEngine-BD1mSExI.cjs';
|
|
3
3
|
export { OVERLAY_PRESETS, Overlay, OverlayAnimation, OverlayCloseReason, OverlayEdge, Overlay as OverlayEngine, OverlayEventMap, OverlayMountTarget, OverlayOptions, OverlayPreset, OverlayState, OverlayUpdate, SwipeToCloseConfig, createOverlay } from './overlay.cjs';
|
|
4
4
|
import './transform-jVfAikE9.cjs';
|
|
5
5
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { d as SnapPoint, b as SheetMode, a as SnapPointDef, c as EngineOptions, f as ScrimOverlayPosition } from './BottomSheetEngine-
|
|
2
|
-
export { g as AnchorAnimationPreset, h as AnchorAnimationSpec, i as AnchorHandle, A as AnchorOptions, j as AnchorPosition, k as AnchorState, B as BottomSheetEngine, C as CloseReason, E as EngineState, P as Plugin, l as SCRIM_PRESETS, m as ScrimOverlayOptions, n as ScrimPreset, o as ScrimPresetConfig, p as ScrimStageDef, S as ScrimStagesOptions, q as ScrimUpdate, e as SheetEventMap, r as SnapId, T as TeardownScope, s as runAnchorTransition } from './BottomSheetEngine-
|
|
1
|
+
import { d as SnapPoint, b as SheetMode, a as SnapPointDef, c as EngineOptions, f as ScrimOverlayPosition } from './BottomSheetEngine-BDGRWa2i.js';
|
|
2
|
+
export { g as AnchorAnimationPreset, h as AnchorAnimationSpec, i as AnchorHandle, A as AnchorOptions, j as AnchorPosition, k as AnchorState, B as BottomSheetEngine, C as CloseReason, E as EngineState, P as Plugin, l as SCRIM_PRESETS, m as ScrimOverlayOptions, n as ScrimPreset, o as ScrimPresetConfig, p as ScrimStageDef, S as ScrimStagesOptions, q as ScrimUpdate, e as SheetEventMap, r as SnapId, T as TeardownScope, s as runAnchorTransition } from './BottomSheetEngine-BDGRWa2i.js';
|
|
3
3
|
export { OVERLAY_PRESETS, Overlay, OverlayAnimation, OverlayCloseReason, OverlayEdge, Overlay as OverlayEngine, OverlayEventMap, OverlayMountTarget, OverlayOptions, OverlayPreset, OverlayState, OverlayUpdate, SwipeToCloseConfig, createOverlay } from './overlay.js';
|
|
4
4
|
import './transform-jVfAikE9.js';
|
|
5
5
|
|
package/dist/index.js
CHANGED
|
@@ -2362,6 +2362,7 @@ var BottomSheetEngine = class {
|
|
|
2362
2362
|
__publicField(this, "progressWriteSentinel", new WriteSentinel());
|
|
2363
2363
|
__publicField(this, "isTopSheet", true);
|
|
2364
2364
|
__publicField(this, "opening", false);
|
|
2365
|
+
__publicField(this, "allowOvershoot", false);
|
|
2365
2366
|
__publicField(this, "progressPayload", {
|
|
2366
2367
|
value: 0,
|
|
2367
2368
|
size: 0
|
|
@@ -2914,40 +2915,32 @@ var BottomSheetEngine = class {
|
|
|
2914
2915
|
}
|
|
2915
2916
|
return out;
|
|
2916
2917
|
}
|
|
2917
|
-
|
|
2918
|
+
measureSheetNatural(vertical) {
|
|
2919
|
+
const el = this.element;
|
|
2918
2920
|
const content = this.scrollContainer;
|
|
2919
|
-
if (!content)
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
}
|
|
2939
|
-
let pad = 0;
|
|
2940
|
-
if (typeof getComputedStyle !== "undefined") {
|
|
2941
|
-
const cs = getComputedStyle(content);
|
|
2942
|
-
pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
|
|
2943
|
-
}
|
|
2944
|
-
return max - min + pad;
|
|
2921
|
+
if (!content) {
|
|
2922
|
+
return vertical ? el.offsetHeight : el.offsetWidth;
|
|
2923
|
+
}
|
|
2924
|
+
const axis = vertical ? "height" : "width";
|
|
2925
|
+
const sheetStyle = el.style;
|
|
2926
|
+
const cs = content.style;
|
|
2927
|
+
const prevSheet = sheetStyle[axis];
|
|
2928
|
+
const prevFlex = cs.flex;
|
|
2929
|
+
const prevContent = vertical ? cs.height : cs.width;
|
|
2930
|
+
sheetStyle[axis] = "auto";
|
|
2931
|
+
cs.flex = "none";
|
|
2932
|
+
if (vertical) cs.height = "auto";
|
|
2933
|
+
else cs.width = "auto";
|
|
2934
|
+
const natural = vertical ? el.offsetHeight : el.offsetWidth;
|
|
2935
|
+
sheetStyle[axis] = prevSheet;
|
|
2936
|
+
cs.flex = prevFlex;
|
|
2937
|
+
if (vertical) cs.height = prevContent;
|
|
2938
|
+
else cs.width = prevContent;
|
|
2939
|
+
return natural;
|
|
2945
2940
|
}
|
|
2946
2941
|
measureFitSize() {
|
|
2947
2942
|
const vertical = layoutAxis(this.mode) === "height";
|
|
2948
|
-
const
|
|
2949
|
-
const content = this.scrollContainer;
|
|
2950
|
-
const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
|
|
2943
|
+
const natural = this.measureSheetNatural(vertical);
|
|
2951
2944
|
const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
|
|
2952
2945
|
if (typeof window === "undefined") return capped;
|
|
2953
2946
|
const viewport = vertical ? window.innerHeight : window.innerWidth;
|
|
@@ -3033,6 +3026,10 @@ var BottomSheetEngine = class {
|
|
|
3033
3026
|
this.backdrop.style.opacity = "";
|
|
3034
3027
|
this.backdrop.style.pointerEvents = "";
|
|
3035
3028
|
}
|
|
3029
|
+
if (this.anchorHost) {
|
|
3030
|
+
this.anchorHost.style.removeProperty("--bs-size");
|
|
3031
|
+
this.anchorHost.style.removeProperty("--bs-progress");
|
|
3032
|
+
}
|
|
3036
3033
|
if (this.screenComponent) {
|
|
3037
3034
|
this.screenComponent.style.opacity = "";
|
|
3038
3035
|
this.screenComponent.style.display = "";
|
|
@@ -3044,6 +3041,7 @@ var BottomSheetEngine = class {
|
|
|
3044
3041
|
this.bus.emit(event, payload);
|
|
3045
3042
|
}
|
|
3046
3043
|
newCycle() {
|
|
3044
|
+
this.allowOvershoot = false;
|
|
3047
3045
|
this.currentAbort.abort();
|
|
3048
3046
|
this.currentAbort = new AbortController();
|
|
3049
3047
|
return this.currentAbort.signal;
|
|
@@ -3109,6 +3107,7 @@ var BottomSheetEngine = class {
|
|
|
3109
3107
|
seen.add(p.id);
|
|
3110
3108
|
}
|
|
3111
3109
|
this.snaps.setRaw(this.snapPointsRaw);
|
|
3110
|
+
this.clampToMaxHeight();
|
|
3112
3111
|
this.scrim.invalidateOpacityCache();
|
|
3113
3112
|
}
|
|
3114
3113
|
getAllowedRange() {
|
|
@@ -3315,9 +3314,13 @@ var BottomSheetEngine = class {
|
|
|
3315
3314
|
this.opening = true;
|
|
3316
3315
|
sheetStack.promote(this.id);
|
|
3317
3316
|
}
|
|
3318
|
-
|
|
3319
|
-
|
|
3317
|
+
const settleCap = this.snaps.getMaxAxisSize();
|
|
3318
|
+
const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
|
|
3319
|
+
this.allowOvershoot = true;
|
|
3320
|
+
void this.animation.animateTo(settleSize, velocity).then(() => {
|
|
3320
3321
|
if (signal.aborted) return;
|
|
3322
|
+
this.allowOvershoot = false;
|
|
3323
|
+
this.opening = false;
|
|
3321
3324
|
this.scrollCache.restore(target.id, previousSize, target.size);
|
|
3322
3325
|
this.updateAriaSlider();
|
|
3323
3326
|
this.emit("snap", {
|
|
@@ -3349,7 +3352,7 @@ var BottomSheetEngine = class {
|
|
|
3349
3352
|
}
|
|
3350
3353
|
applySize(size) {
|
|
3351
3354
|
const cap = this.snaps.getMaxAxisSize();
|
|
3352
|
-
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
|
|
3355
|
+
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
|
|
3353
3356
|
this.size = clamped;
|
|
3354
3357
|
const offset = cap - clamped;
|
|
3355
3358
|
const style = this.element.style;
|
package/dist/preact.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { BottomSheet, BottomSheetFromConfig, BottomSheetFromConfigProps, BottomSheetHandle, BottomSheetProps, HeaderProp, Overlay, OverlayHandle, OverlayProps, SheetConfig, UseBottomSheetRefs, UseBottomSheetReturn, UseOverlayReturn, useBottomSheet, useOverlay } from './react.cjs';
|
|
2
|
-
export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-
|
|
2
|
+
export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-BD1mSExI.cjs';
|
|
3
3
|
export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.cjs';
|
|
4
4
|
import 'react';
|
|
5
5
|
import './transform-jVfAikE9.cjs';
|
package/dist/preact.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { BottomSheet, BottomSheetFromConfig, BottomSheetFromConfigProps, BottomSheetHandle, BottomSheetProps, HeaderProp, Overlay, OverlayHandle, OverlayProps, SheetConfig, UseBottomSheetRefs, UseBottomSheetReturn, UseOverlayReturn, useBottomSheet, useOverlay } from './react.js';
|
|
2
|
-
export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-
|
|
2
|
+
export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetEngine-BDGRWa2i.js';
|
|
3
3
|
export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.js';
|
|
4
4
|
import 'react';
|
|
5
5
|
import './transform-jVfAikE9.js';
|
package/dist/qwik.cjs
CHANGED
|
@@ -2360,6 +2360,7 @@ var BottomSheetEngine = class {
|
|
|
2360
2360
|
__publicField(this, "progressWriteSentinel", new WriteSentinel());
|
|
2361
2361
|
__publicField(this, "isTopSheet", true);
|
|
2362
2362
|
__publicField(this, "opening", false);
|
|
2363
|
+
__publicField(this, "allowOvershoot", false);
|
|
2363
2364
|
__publicField(this, "progressPayload", {
|
|
2364
2365
|
value: 0,
|
|
2365
2366
|
size: 0
|
|
@@ -2912,40 +2913,32 @@ var BottomSheetEngine = class {
|
|
|
2912
2913
|
}
|
|
2913
2914
|
return out;
|
|
2914
2915
|
}
|
|
2915
|
-
|
|
2916
|
+
measureSheetNatural(vertical) {
|
|
2917
|
+
const el = this.element;
|
|
2916
2918
|
const content = this.scrollContainer;
|
|
2917
|
-
if (!content)
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
}
|
|
2937
|
-
let pad = 0;
|
|
2938
|
-
if (typeof getComputedStyle !== "undefined") {
|
|
2939
|
-
const cs = getComputedStyle(content);
|
|
2940
|
-
pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
|
|
2941
|
-
}
|
|
2942
|
-
return max - min + pad;
|
|
2919
|
+
if (!content) {
|
|
2920
|
+
return vertical ? el.offsetHeight : el.offsetWidth;
|
|
2921
|
+
}
|
|
2922
|
+
const axis = vertical ? "height" : "width";
|
|
2923
|
+
const sheetStyle = el.style;
|
|
2924
|
+
const cs = content.style;
|
|
2925
|
+
const prevSheet = sheetStyle[axis];
|
|
2926
|
+
const prevFlex = cs.flex;
|
|
2927
|
+
const prevContent = vertical ? cs.height : cs.width;
|
|
2928
|
+
sheetStyle[axis] = "auto";
|
|
2929
|
+
cs.flex = "none";
|
|
2930
|
+
if (vertical) cs.height = "auto";
|
|
2931
|
+
else cs.width = "auto";
|
|
2932
|
+
const natural = vertical ? el.offsetHeight : el.offsetWidth;
|
|
2933
|
+
sheetStyle[axis] = prevSheet;
|
|
2934
|
+
cs.flex = prevFlex;
|
|
2935
|
+
if (vertical) cs.height = prevContent;
|
|
2936
|
+
else cs.width = prevContent;
|
|
2937
|
+
return natural;
|
|
2943
2938
|
}
|
|
2944
2939
|
measureFitSize() {
|
|
2945
2940
|
const vertical = layoutAxis(this.mode) === "height";
|
|
2946
|
-
const
|
|
2947
|
-
const content = this.scrollContainer;
|
|
2948
|
-
const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
|
|
2941
|
+
const natural = this.measureSheetNatural(vertical);
|
|
2949
2942
|
const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
|
|
2950
2943
|
if (typeof window === "undefined") return capped;
|
|
2951
2944
|
const viewport = vertical ? window.innerHeight : window.innerWidth;
|
|
@@ -3031,6 +3024,10 @@ var BottomSheetEngine = class {
|
|
|
3031
3024
|
this.backdrop.style.opacity = "";
|
|
3032
3025
|
this.backdrop.style.pointerEvents = "";
|
|
3033
3026
|
}
|
|
3027
|
+
if (this.anchorHost) {
|
|
3028
|
+
this.anchorHost.style.removeProperty("--bs-size");
|
|
3029
|
+
this.anchorHost.style.removeProperty("--bs-progress");
|
|
3030
|
+
}
|
|
3034
3031
|
if (this.screenComponent) {
|
|
3035
3032
|
this.screenComponent.style.opacity = "";
|
|
3036
3033
|
this.screenComponent.style.display = "";
|
|
@@ -3042,6 +3039,7 @@ var BottomSheetEngine = class {
|
|
|
3042
3039
|
this.bus.emit(event, payload);
|
|
3043
3040
|
}
|
|
3044
3041
|
newCycle() {
|
|
3042
|
+
this.allowOvershoot = false;
|
|
3045
3043
|
this.currentAbort.abort();
|
|
3046
3044
|
this.currentAbort = new AbortController();
|
|
3047
3045
|
return this.currentAbort.signal;
|
|
@@ -3107,6 +3105,7 @@ var BottomSheetEngine = class {
|
|
|
3107
3105
|
seen.add(p.id);
|
|
3108
3106
|
}
|
|
3109
3107
|
this.snaps.setRaw(this.snapPointsRaw);
|
|
3108
|
+
this.clampToMaxHeight();
|
|
3110
3109
|
this.scrim.invalidateOpacityCache();
|
|
3111
3110
|
}
|
|
3112
3111
|
getAllowedRange() {
|
|
@@ -3313,9 +3312,13 @@ var BottomSheetEngine = class {
|
|
|
3313
3312
|
this.opening = true;
|
|
3314
3313
|
sheetStack.promote(this.id);
|
|
3315
3314
|
}
|
|
3316
|
-
|
|
3317
|
-
|
|
3315
|
+
const settleCap = this.snaps.getMaxAxisSize();
|
|
3316
|
+
const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
|
|
3317
|
+
this.allowOvershoot = true;
|
|
3318
|
+
void this.animation.animateTo(settleSize, velocity).then(() => {
|
|
3318
3319
|
if (signal.aborted) return;
|
|
3320
|
+
this.allowOvershoot = false;
|
|
3321
|
+
this.opening = false;
|
|
3319
3322
|
this.scrollCache.restore(target.id, previousSize, target.size);
|
|
3320
3323
|
this.updateAriaSlider();
|
|
3321
3324
|
this.emit("snap", {
|
|
@@ -3347,7 +3350,7 @@ var BottomSheetEngine = class {
|
|
|
3347
3350
|
}
|
|
3348
3351
|
applySize(size) {
|
|
3349
3352
|
const cap = this.snaps.getMaxAxisSize();
|
|
3350
|
-
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
|
|
3353
|
+
const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
|
|
3351
3354
|
this.size = clamped;
|
|
3352
3355
|
const offset = cap - clamped;
|
|
3353
3356
|
const style = this.element.style;
|
|
@@ -3439,6 +3442,8 @@ var BottomSheet = qwik.component$((props) => {
|
|
|
3439
3442
|
const contentRef = qwik.useSignal();
|
|
3440
3443
|
const backdropRef = qwik.useSignal();
|
|
3441
3444
|
const scrimRef = qwik.useSignal();
|
|
3445
|
+
const headerRef = qwik.useSignal();
|
|
3446
|
+
const footerRef = qwik.useSignal();
|
|
3442
3447
|
const initialActive = props.initial ?? props.snapPoints[0]?.id ?? "default";
|
|
3443
3448
|
const state = qwik.useStore({
|
|
3444
3449
|
size: 0,
|
|
@@ -3473,6 +3478,11 @@ var BottomSheet = qwik.component$((props) => {
|
|
|
3473
3478
|
lockBodyScroll: props.lockBodyScroll,
|
|
3474
3479
|
rubberBand: props.rubberBand,
|
|
3475
3480
|
backdropRange: props.backdropRange,
|
|
3481
|
+
persistent: props.persistent,
|
|
3482
|
+
disableClose: props.disableClose,
|
|
3483
|
+
disableDrag: props.disableDrag,
|
|
3484
|
+
closeOnRouteChange: props.closeOnRouteChange,
|
|
3485
|
+
returnFocusTo: props.returnFocusTo,
|
|
3476
3486
|
radius: props.radius,
|
|
3477
3487
|
maxHeight: props.maxHeight
|
|
3478
3488
|
};
|
|
@@ -3494,7 +3504,25 @@ var BottomSheet = qwik.component$((props) => {
|
|
|
3494
3504
|
});
|
|
3495
3505
|
engine.on("dragstart", sync);
|
|
3496
3506
|
engine.on("dragend", sync);
|
|
3507
|
+
let onBackdropClick;
|
|
3508
|
+
if (props.backdrop !== false && props.closeOnBackdrop !== false && backdropRef.value) {
|
|
3509
|
+
onBackdropClick = () => {
|
|
3510
|
+
if (engine.canDismiss()) void engine.close("backdrop");
|
|
3511
|
+
};
|
|
3512
|
+
backdropRef.value.addEventListener("click", onBackdropClick);
|
|
3513
|
+
}
|
|
3514
|
+
const collapseEmpty = (el) => {
|
|
3515
|
+
if (!el) return;
|
|
3516
|
+
const empty = el.children.length === 0 && el.textContent?.trim() === "";
|
|
3517
|
+
if (empty) el.setAttribute("hidden", "");
|
|
3518
|
+
else el.removeAttribute("hidden");
|
|
3519
|
+
};
|
|
3520
|
+
collapseEmpty(headerRef.value);
|
|
3521
|
+
collapseEmpty(footerRef.value);
|
|
3497
3522
|
cleanup(() => {
|
|
3523
|
+
if (onBackdropClick && backdropRef.value) {
|
|
3524
|
+
backdropRef.value.removeEventListener("click", onBackdropClick);
|
|
3525
|
+
}
|
|
3498
3526
|
engineStore.engine = void 0;
|
|
3499
3527
|
engine.destroy();
|
|
3500
3528
|
});
|
|
@@ -3544,9 +3572,9 @@ var BottomSheet = qwik.component$((props) => {
|
|
|
3544
3572
|
"aria-label": "Resize sheet"
|
|
3545
3573
|
}
|
|
3546
3574
|
),
|
|
3547
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-header", children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "header" }) }),
|
|
3575
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-header", ref: headerRef, children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "header" }) }),
|
|
3548
3576
|
/* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-content", ref: contentRef, children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}) }),
|
|
3549
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-footer", children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "footer" }) }),
|
|
3577
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { class: "bs-footer", ref: footerRef, children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, { name: "footer" }) }),
|
|
3550
3578
|
/* @__PURE__ */ jsxRuntime.jsx("span", { class: "bs-sr-only", role: "status", "aria-live": "polite", children: state.activeId })
|
|
3551
3579
|
]
|
|
3552
3580
|
}
|
package/dist/qwik.d.cts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as _builder_io_qwik from '@builder.io/qwik';
|
|
2
2
|
import { QRL } from '@builder.io/qwik';
|
|
3
|
-
import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-
|
|
4
|
-
export {
|
|
3
|
+
import { a as SnapPointDef, b as SheetMode, c as EngineOptions, E as EngineState } from './BottomSheetEngine-BD1mSExI.cjs';
|
|
4
|
+
export { d as SnapPoint } from './BottomSheetEngine-BD1mSExI.cjs';
|
|
5
5
|
import './transform-jVfAikE9.cjs';
|
|
6
6
|
|
|
7
7
|
type BottomSheetProps<TId extends string = string> = {
|
|
@@ -23,6 +23,11 @@ type BottomSheetProps<TId extends string = string> = {
|
|
|
23
23
|
backdropRange?: [number, number];
|
|
24
24
|
backdrop?: boolean;
|
|
25
25
|
closeOnBackdrop?: boolean;
|
|
26
|
+
persistent?: boolean;
|
|
27
|
+
disableClose?: boolean;
|
|
28
|
+
disableDrag?: boolean;
|
|
29
|
+
closeOnRouteChange?: boolean;
|
|
30
|
+
returnFocusTo?: EngineOptions["returnFocusTo"];
|
|
26
31
|
ariaLabel?: string;
|
|
27
32
|
radius?: string | number;
|
|
28
33
|
maxHeight?: string | number;
|
|
@@ -33,4 +38,4 @@ type BottomSheetProps<TId extends string = string> = {
|
|
|
33
38
|
};
|
|
34
39
|
declare const BottomSheet: _builder_io_qwik.Component<BottomSheetProps<string>>;
|
|
35
40
|
|
|
36
|
-
export { BottomSheet, type BottomSheetProps, EngineState, SheetMode, SnapPointDef };
|
|
41
|
+
export { BottomSheet, type BottomSheetProps, EngineOptions, EngineState, SheetMode, SnapPointDef };
|
package/dist/qwik.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as _builder_io_qwik from '@builder.io/qwik';
|
|
2
2
|
import { QRL } from '@builder.io/qwik';
|
|
3
|
-
import { a as SnapPointDef, b as SheetMode, E as EngineState } from './BottomSheetEngine-
|
|
4
|
-
export {
|
|
3
|
+
import { a as SnapPointDef, b as SheetMode, c as EngineOptions, E as EngineState } from './BottomSheetEngine-BDGRWa2i.js';
|
|
4
|
+
export { d as SnapPoint } from './BottomSheetEngine-BDGRWa2i.js';
|
|
5
5
|
import './transform-jVfAikE9.js';
|
|
6
6
|
|
|
7
7
|
type BottomSheetProps<TId extends string = string> = {
|
|
@@ -23,6 +23,11 @@ type BottomSheetProps<TId extends string = string> = {
|
|
|
23
23
|
backdropRange?: [number, number];
|
|
24
24
|
backdrop?: boolean;
|
|
25
25
|
closeOnBackdrop?: boolean;
|
|
26
|
+
persistent?: boolean;
|
|
27
|
+
disableClose?: boolean;
|
|
28
|
+
disableDrag?: boolean;
|
|
29
|
+
closeOnRouteChange?: boolean;
|
|
30
|
+
returnFocusTo?: EngineOptions["returnFocusTo"];
|
|
26
31
|
ariaLabel?: string;
|
|
27
32
|
radius?: string | number;
|
|
28
33
|
maxHeight?: string | number;
|
|
@@ -33,4 +38,4 @@ type BottomSheetProps<TId extends string = string> = {
|
|
|
33
38
|
};
|
|
34
39
|
declare const BottomSheet: _builder_io_qwik.Component<BottomSheetProps<string>>;
|
|
35
40
|
|
|
36
|
-
export { BottomSheet, type BottomSheetProps, EngineState, SheetMode, SnapPointDef };
|
|
41
|
+
export { BottomSheet, type BottomSheetProps, EngineOptions, EngineState, SheetMode, SnapPointDef };
|