@surdeddd/bottom-sheet 0.23.2 → 0.23.4
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 +18 -16
- package/README.ru.md +697 -0
- package/dist/{BottomSheetCore-CQStdVy2.d.cts → BottomSheetCore-C5tJYVMY.d.cts} +4 -1
- package/dist/{BottomSheetCore-9i-Uh6T3.d.ts → BottomSheetCore-DxSrC4QC.d.ts} +4 -1
- package/dist/{BottomSheetEngine-CsQWHLNb.d.cts → BottomSheetEngine-B3F9qukX.d.cts} +1 -1
- package/dist/{BottomSheetEngine-Dn6h-7gF.d.ts → BottomSheetEngine-BchzgqGG.d.ts} +1 -1
- package/dist/core.cjs +43 -13
- package/dist/core.d.cts +2 -2
- package/dist/core.d.ts +2 -2
- package/dist/core.js +43 -13
- package/dist/debug.d.cts +3 -2
- package/dist/debug.d.ts +3 -2
- package/dist/{default-features-DkG9aho0.d.cts → default-features-BGiCSmV1.d.cts} +1 -1
- package/dist/{default-features-C3cilcW9.d.ts → default-features-DwVTzDwP.d.ts} +1 -1
- package/dist/element.cjs +107 -21
- package/dist/element.d.cts +5 -3
- package/dist/element.d.ts +5 -3
- package/dist/element.iife.global.js +2 -2
- package/dist/element.js +107 -21
- package/dist/features.cjs +56 -3
- package/dist/features.d.cts +3 -3
- package/dist/features.d.ts +3 -3
- package/dist/features.js +56 -3
- package/dist/{index-CnsJQZp2.d.ts → index-C7TSQkVK.d.cts} +3 -2
- package/dist/{index-CVGC5B5D.d.cts → index-CdM1tke5.d.ts} +3 -2
- package/dist/index.cjs +96 -16
- package/dist/index.d.cts +7 -6
- package/dist/index.d.ts +7 -6
- package/dist/index.js +96 -16
- package/dist/integrations/formik.d.cts +3 -2
- package/dist/integrations/formik.d.ts +3 -2
- package/dist/integrations/react-hook-form.d.cts +3 -2
- package/dist/integrations/react-hook-form.d.ts +3 -2
- package/dist/overlay.d.cts +2 -1
- package/dist/overlay.d.ts +2 -1
- package/dist/preact.d.cts +2 -2
- package/dist/preact.d.ts +2 -2
- package/dist/qwik-lib/index.qwik.cjs +87 -16
- package/dist/qwik-lib/index.qwik.mjs +87 -16
- package/dist/qwik.cjs +96 -16
- package/dist/qwik.d.cts +5 -3
- package/dist/qwik.d.ts +5 -3
- package/dist/qwik.js +96 -16
- package/dist/react.cjs +96 -16
- package/dist/react.d.cts +8 -5
- package/dist/react.d.ts +8 -5
- package/dist/react.js +96 -16
- package/dist/solid.cjs +96 -16
- package/dist/solid.d.cts +4 -1
- package/dist/solid.d.ts +4 -1
- package/dist/solid.js +96 -16
- package/dist/solid.source.jsx +96 -16
- package/dist/svelte-core.cjs +98 -16
- package/dist/svelte-core.js +97 -17
- package/dist/svelte-src/BottomSheet.svelte +1 -1
- package/dist/svelte.cjs +97 -18
- package/dist/svelte.js +97 -18
- package/dist/vue.cjs +96 -16
- package/dist/vue.js +96 -16
- package/dist/webgl.d.cts +3 -2
- package/dist/webgl.d.ts +3 -2
- package/package.json +32 -34
package/dist/solid.source.jsx
CHANGED
|
@@ -89,6 +89,7 @@ function buildTransformTemplate(axis) {
|
|
|
89
89
|
return (offset) => `translate3d(${offset}px, 0, 0)`;
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
|
+
var offsetFromMatrix = (axis, m) => axis === "bottom" ? m.m42 : axis === "top" ? -m.m42 : axis === "left" ? -m.m41 : m.m41;
|
|
92
93
|
var layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
|
|
93
94
|
|
|
94
95
|
// src/core/primitives/instance-id.ts
|
|
@@ -1175,7 +1176,7 @@ var tween = ({
|
|
|
1175
1176
|
}
|
|
1176
1177
|
const step = (now) => {
|
|
1177
1178
|
if (cancelled) return;
|
|
1178
|
-
const elapsed = now - start;
|
|
1179
|
+
const elapsed = Math.max(0, now - start);
|
|
1179
1180
|
const t = Math.min(elapsed / duration, 1);
|
|
1180
1181
|
const value = from + (to - from) * easing(t);
|
|
1181
1182
|
onUpdate(value);
|
|
@@ -1228,8 +1229,8 @@ var runSpring = ({
|
|
|
1228
1229
|
resolveFn = resolve;
|
|
1229
1230
|
const step = (now) => {
|
|
1230
1231
|
if (cancelled) return;
|
|
1231
|
-
const dt = Math.min((now - lastTime) / 1e3, MAX_DT);
|
|
1232
|
-
lastTime = now;
|
|
1232
|
+
const dt = Math.min(Math.max(0, now - lastTime) / 1e3, MAX_DT);
|
|
1233
|
+
lastTime = Math.max(lastTime, now);
|
|
1233
1234
|
const steps = Math.max(1, Math.ceil(dt * 240));
|
|
1234
1235
|
const subDt = dt / steps;
|
|
1235
1236
|
let stepsLeft = steps;
|
|
@@ -1293,6 +1294,7 @@ function resolveAnimationPreset(animation) {
|
|
|
1293
1294
|
}
|
|
1294
1295
|
|
|
1295
1296
|
// src/core/animation/waapi-settle.ts
|
|
1297
|
+
var SETTLE_ANIMATION_ID = "bs-settle";
|
|
1296
1298
|
var SIM_HZ = 240;
|
|
1297
1299
|
var SAMPLE_STRIDE = 4;
|
|
1298
1300
|
var MAX_SIM_MS = 3e3;
|
|
@@ -1349,6 +1351,7 @@ var AnimationRunner = class {
|
|
|
1349
1351
|
isDragging;
|
|
1350
1352
|
applyAux;
|
|
1351
1353
|
getTransformFor;
|
|
1354
|
+
readShownSize;
|
|
1352
1355
|
settleWaapi;
|
|
1353
1356
|
currentWaapi = null;
|
|
1354
1357
|
animationKind;
|
|
@@ -1369,6 +1372,7 @@ var AnimationRunner = class {
|
|
|
1369
1372
|
this.isDragging = deps.isDragging;
|
|
1370
1373
|
this.applyAux = deps.applyAux;
|
|
1371
1374
|
this.getTransformFor = deps.getTransformFor;
|
|
1375
|
+
this.readShownSize = deps.readShownSize;
|
|
1372
1376
|
this.settleWaapi = opts.settleAnimation === "waapi";
|
|
1373
1377
|
const preset = resolveAnimationPreset(opts.animation);
|
|
1374
1378
|
this.animationKind = preset.kind;
|
|
@@ -1401,10 +1405,12 @@ var AnimationRunner = class {
|
|
|
1401
1405
|
const entry = this.currentWaapi;
|
|
1402
1406
|
this.currentWaapi = null;
|
|
1403
1407
|
entry.stop();
|
|
1408
|
+
const size = this.readShownSize?.() ?? entry.sizeNow();
|
|
1404
1409
|
try {
|
|
1405
1410
|
entry.anim.cancel();
|
|
1406
1411
|
} catch {
|
|
1407
1412
|
}
|
|
1413
|
+
this.applySizeFn(size);
|
|
1408
1414
|
}
|
|
1409
1415
|
cancel() {
|
|
1410
1416
|
this.currentTween?.cancel();
|
|
@@ -1414,6 +1420,7 @@ var AnimationRunner = class {
|
|
|
1414
1420
|
async animateTo(target, velocityPxPerMs) {
|
|
1415
1421
|
if (target === this.getSize()) {
|
|
1416
1422
|
if (!this.isAnimating && !this.isDragging()) {
|
|
1423
|
+
this.applySizeFn(target);
|
|
1417
1424
|
this.element.style.willChange = "";
|
|
1418
1425
|
}
|
|
1419
1426
|
return;
|
|
@@ -1450,6 +1457,7 @@ var AnimationRunner = class {
|
|
|
1450
1457
|
return;
|
|
1451
1458
|
}
|
|
1452
1459
|
}
|
|
1460
|
+
let current = false;
|
|
1453
1461
|
if (this.animationKind === "spring") {
|
|
1454
1462
|
const spring = runSpring({
|
|
1455
1463
|
from: this.getSize(),
|
|
@@ -1460,7 +1468,8 @@ var AnimationRunner = class {
|
|
|
1460
1468
|
});
|
|
1461
1469
|
this.currentSpring = spring;
|
|
1462
1470
|
await spring.promise;
|
|
1463
|
-
|
|
1471
|
+
current = this.currentSpring === spring;
|
|
1472
|
+
if (current) this.currentSpring = null;
|
|
1464
1473
|
} else {
|
|
1465
1474
|
const tw = tween({
|
|
1466
1475
|
from: this.getSize(),
|
|
@@ -1471,11 +1480,15 @@ var AnimationRunner = class {
|
|
|
1471
1480
|
});
|
|
1472
1481
|
this.currentTween = tw;
|
|
1473
1482
|
await tw.promise;
|
|
1474
|
-
|
|
1483
|
+
current = this.currentTween === tw;
|
|
1484
|
+
if (current) this.currentTween = null;
|
|
1475
1485
|
}
|
|
1476
1486
|
if (!this.isAnimating) {
|
|
1477
1487
|
this.getRootEl()?.removeAttribute("data-animating");
|
|
1478
|
-
if (!this.isDragging())
|
|
1488
|
+
if (!this.isDragging()) {
|
|
1489
|
+
if (current) this.applySizeFn(this.getSize());
|
|
1490
|
+
this.element.style.willChange = "";
|
|
1491
|
+
}
|
|
1479
1492
|
}
|
|
1480
1493
|
}
|
|
1481
1494
|
async runWaapiSettle(samples, target) {
|
|
@@ -1489,11 +1502,11 @@ var AnimationRunner = class {
|
|
|
1489
1502
|
easing: "linear",
|
|
1490
1503
|
fill: "forwards"
|
|
1491
1504
|
});
|
|
1505
|
+
anim.id = SETTLE_ANIMATION_ID;
|
|
1492
1506
|
let stopped = false;
|
|
1493
1507
|
let auxRaf = 0;
|
|
1494
1508
|
const lastIdx = samples.values.length - 1;
|
|
1495
|
-
const
|
|
1496
|
-
if (stopped) return;
|
|
1509
|
+
const sizeNow = () => {
|
|
1497
1510
|
const at = Math.min(
|
|
1498
1511
|
(Number(anim.currentTime) || 0) / samples.stepMs,
|
|
1499
1512
|
lastIdx
|
|
@@ -1501,7 +1514,11 @@ var AnimationRunner = class {
|
|
|
1501
1514
|
const idx = Math.floor(at);
|
|
1502
1515
|
const from = samples.values[idx];
|
|
1503
1516
|
const to = samples.values[Math.min(idx + 1, lastIdx)];
|
|
1504
|
-
|
|
1517
|
+
return from + (to - from) * (at - idx);
|
|
1518
|
+
};
|
|
1519
|
+
const auxTick = () => {
|
|
1520
|
+
if (stopped) return;
|
|
1521
|
+
applyAux(sizeNow());
|
|
1505
1522
|
auxRaf = requestAnimationFrame(auxTick);
|
|
1506
1523
|
};
|
|
1507
1524
|
auxRaf = requestAnimationFrame(auxTick);
|
|
@@ -1510,7 +1527,8 @@ var AnimationRunner = class {
|
|
|
1510
1527
|
stop: () => {
|
|
1511
1528
|
stopped = true;
|
|
1512
1529
|
cancelAnimationFrame(auxRaf);
|
|
1513
|
-
}
|
|
1530
|
+
},
|
|
1531
|
+
sizeNow
|
|
1514
1532
|
};
|
|
1515
1533
|
this.currentWaapi = entry;
|
|
1516
1534
|
try {
|
|
@@ -2611,6 +2629,7 @@ var BottomSheetCore = class {
|
|
|
2611
2629
|
closeOnBack;
|
|
2612
2630
|
routedTo;
|
|
2613
2631
|
fitContentToSnap;
|
|
2632
|
+
settleAnimation;
|
|
2614
2633
|
persistent;
|
|
2615
2634
|
disableCloseFlag;
|
|
2616
2635
|
disableDragFlag;
|
|
@@ -2716,6 +2735,11 @@ var BottomSheetCore = class {
|
|
|
2716
2735
|
const cap = this.snaps.getMaxAxisSize();
|
|
2717
2736
|
const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
|
|
2718
2737
|
return this.transformTemplate(cap - shown);
|
|
2738
|
+
},
|
|
2739
|
+
readShownSize: () => {
|
|
2740
|
+
const shown = getComputedStyle(this.element).transform;
|
|
2741
|
+
if (!shown || shown === "none") return void 0;
|
|
2742
|
+
return this.snaps.getMaxAxisSize() - offsetFromMatrix(this.mode, new DOMMatrix(shown));
|
|
2719
2743
|
}
|
|
2720
2744
|
},
|
|
2721
2745
|
resolved.animation
|
|
@@ -2730,6 +2754,7 @@ var BottomSheetCore = class {
|
|
|
2730
2754
|
this.closeOnBack = resolved.closeOnBack;
|
|
2731
2755
|
this.routedTo = opts.routedTo;
|
|
2732
2756
|
this.fitContentToSnap = opts.fitContentToSnap === true;
|
|
2757
|
+
this.settleAnimation = opts.settleAnimation;
|
|
2733
2758
|
this.persistent = resolved.persistent;
|
|
2734
2759
|
this.disableCloseFlag = resolved.disableClose;
|
|
2735
2760
|
this.disableDragFlag = resolved.disableDrag;
|
|
@@ -2832,7 +2857,8 @@ var BottomSheetCore = class {
|
|
|
2832
2857
|
closeOnRouteChange: this.closeOnRouteChange,
|
|
2833
2858
|
persistKey: this.persistKey,
|
|
2834
2859
|
autoCollapseAfter,
|
|
2835
|
-
fitContentToSnap: this.fitContentToSnap
|
|
2860
|
+
fitContentToSnap: this.fitContentToSnap,
|
|
2861
|
+
settleAnimation: this.settleAnimation
|
|
2836
2862
|
},
|
|
2837
2863
|
isDestroyed: () => this.destroyed,
|
|
2838
2864
|
isDragging: () => this.isDraggingAny(),
|
|
@@ -3724,7 +3750,11 @@ var BottomSheetCore = class {
|
|
|
3724
3750
|
const offset = cap - clamped;
|
|
3725
3751
|
const style = this.element.style;
|
|
3726
3752
|
if (!skipTransform) style.transform = this.transformTemplate(offset);
|
|
3727
|
-
|
|
3753
|
+
const sizeChanged = this.sizeWriteSentinel.shouldWrite(
|
|
3754
|
+
clamped,
|
|
3755
|
+
this.animation.isAnimating || this.isDraggingAny() ? SIZE_WRITE_EPSILON : 0
|
|
3756
|
+
);
|
|
3757
|
+
if (sizeChanged) {
|
|
3728
3758
|
style.setProperty("--bs-size", `${clamped}px`);
|
|
3729
3759
|
if (this.scrimParent) {
|
|
3730
3760
|
this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
|
|
@@ -3751,7 +3781,7 @@ var BottomSheetCore = class {
|
|
|
3751
3781
|
}
|
|
3752
3782
|
}
|
|
3753
3783
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3754
|
-
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
3784
|
+
if ((progressChanged || sizeChanged) && this.bus.listenerCount("progress") > 0) {
|
|
3755
3785
|
this.progressPayload.value = progress;
|
|
3756
3786
|
this.progressPayload.size = clamped;
|
|
3757
3787
|
this.emit("progress", this.progressPayload);
|
|
@@ -4248,7 +4278,6 @@ function visualViewportFeature() {
|
|
|
4248
4278
|
|
|
4249
4279
|
// src/core/features/content-fit.ts
|
|
4250
4280
|
var INSET_VAR = "--bs-content-inset";
|
|
4251
|
-
var SIZE_VAR = "--bs-size";
|
|
4252
4281
|
var CAP_VAR = "--bs-max-size";
|
|
4253
4282
|
var LIFT_VAR = "--bs-footer-lift-max";
|
|
4254
4283
|
var FIT_ATTR = "data-bs-fit-content";
|
|
@@ -4261,10 +4290,14 @@ function contentFitFeature() {
|
|
|
4261
4290
|
return;
|
|
4262
4291
|
}
|
|
4263
4292
|
const sheet = ctx.element;
|
|
4293
|
+
const waapi = ctx.options.settleAnimation === "waapi";
|
|
4264
4294
|
let inset = 0;
|
|
4265
4295
|
let unpaddedMax = -1;
|
|
4266
4296
|
let top = 0;
|
|
4267
4297
|
let resting = false;
|
|
4298
|
+
let liftMax = 0;
|
|
4299
|
+
let followed = null;
|
|
4300
|
+
let follower = null;
|
|
4268
4301
|
const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
|
|
4269
4302
|
const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
|
|
4270
4303
|
const follow = (size) => {
|
|
@@ -4278,8 +4311,45 @@ function contentFitFeature() {
|
|
|
4278
4311
|
top = limit;
|
|
4279
4312
|
}
|
|
4280
4313
|
};
|
|
4314
|
+
const unfollow = () => {
|
|
4315
|
+
follower?.cancel();
|
|
4316
|
+
follower = null;
|
|
4317
|
+
followed = null;
|
|
4318
|
+
};
|
|
4319
|
+
const followSettle = () => {
|
|
4320
|
+
if (followed?.playState === "running") return;
|
|
4321
|
+
const settleAnim = sheet.getAnimations?.().find((a) => a.id === SETTLE_ANIMATION_ID);
|
|
4322
|
+
const footer = sheet.querySelector(".bs-footer");
|
|
4323
|
+
if (!settleAnim || !footer) return;
|
|
4324
|
+
const effect = settleAnim.effect;
|
|
4325
|
+
unfollow();
|
|
4326
|
+
const own = footer.animate(
|
|
4327
|
+
effect.getKeyframes().map((k) => ({
|
|
4328
|
+
offset: k.computedOffset,
|
|
4329
|
+
transform: `translateY(${-Math.min(
|
|
4330
|
+
Math.max(0, parseFloat(String(k.transform).split(",")[1]) || 0),
|
|
4331
|
+
liftMax
|
|
4332
|
+
)}px)`
|
|
4333
|
+
})),
|
|
4334
|
+
{
|
|
4335
|
+
duration: effect.getTiming().duration,
|
|
4336
|
+
easing: "linear",
|
|
4337
|
+
fill: "forwards"
|
|
4338
|
+
}
|
|
4339
|
+
);
|
|
4340
|
+
follower = own;
|
|
4341
|
+
followed = settleAnim;
|
|
4342
|
+
const done = () => {
|
|
4343
|
+
if (followed === settleAnim) unfollow();
|
|
4344
|
+
};
|
|
4345
|
+
settleAnim.ready.then(() => {
|
|
4346
|
+
if (follower === own) own.startTime = settleAnim.startTime;
|
|
4347
|
+
}, done);
|
|
4348
|
+
settleAnim.finished.then(done, done);
|
|
4349
|
+
};
|
|
4281
4350
|
const settle = () => {
|
|
4282
4351
|
if (ctx.isDestroyed()) return;
|
|
4352
|
+
unfollow();
|
|
4283
4353
|
const size = ctx.getSize();
|
|
4284
4354
|
if (!resting) {
|
|
4285
4355
|
unpaddedMax = -1;
|
|
@@ -4287,7 +4357,6 @@ function contentFitFeature() {
|
|
|
4287
4357
|
}
|
|
4288
4358
|
inset = hiddenAt(size);
|
|
4289
4359
|
put(INSET_VAR, inset);
|
|
4290
|
-
put(SIZE_VAR, size);
|
|
4291
4360
|
put(CAP_VAR, ctx.getMaxAxisSize());
|
|
4292
4361
|
if (!resting) {
|
|
4293
4362
|
resting = true;
|
|
@@ -4299,9 +4368,13 @@ function contentFitFeature() {
|
|
|
4299
4368
|
if (resting) {
|
|
4300
4369
|
resting = false;
|
|
4301
4370
|
sheet.setAttribute(FIT_ATTR, "moving");
|
|
4302
|
-
|
|
4371
|
+
liftMax = scroller.offsetHeight;
|
|
4372
|
+
put(LIFT_VAR, liftMax);
|
|
4303
4373
|
}
|
|
4304
4374
|
follow(size);
|
|
4375
|
+
if (waapi && ctx.isAnimating() && sheet.dataset.mode === "bottom") {
|
|
4376
|
+
followSettle();
|
|
4377
|
+
}
|
|
4305
4378
|
};
|
|
4306
4379
|
const moving = () => ctx.isAnimating() || ctx.isDragging();
|
|
4307
4380
|
const whenIdle = () => {
|
|
@@ -4314,13 +4387,20 @@ function contentFitFeature() {
|
|
|
4314
4387
|
);
|
|
4315
4388
|
const offSnap = ctx.on("snap", settle);
|
|
4316
4389
|
const offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
|
|
4390
|
+
const offBeforeSnap = ctx.on("before-snap", () => {
|
|
4391
|
+
queueMicrotask(() => {
|
|
4392
|
+
if (!ctx.isDestroyed() && ctx.isAnimating()) move(ctx.getSize());
|
|
4393
|
+
});
|
|
4394
|
+
});
|
|
4317
4395
|
const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
|
|
4318
4396
|
observer?.observe(document.documentElement);
|
|
4319
4397
|
window.addEventListener("orientationchange", whenIdle);
|
|
4320
4398
|
return () => {
|
|
4399
|
+
unfollow();
|
|
4321
4400
|
offProgress();
|
|
4322
4401
|
offSnap();
|
|
4323
4402
|
offDragStart();
|
|
4403
|
+
offBeforeSnap();
|
|
4324
4404
|
observer?.disconnect();
|
|
4325
4405
|
window.removeEventListener("orientationchange", whenIdle);
|
|
4326
4406
|
sheet.removeAttribute(FIT_ATTR);
|
package/dist/svelte-core.cjs
CHANGED
|
@@ -88,6 +88,7 @@ function buildTransformTemplate(axis) {
|
|
|
88
88
|
return (offset) => `translate3d(${offset}px, 0, 0)`;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
+
var offsetFromMatrix = (axis, m) => axis === "bottom" ? m.m42 : axis === "top" ? -m.m42 : axis === "left" ? -m.m41 : m.m41;
|
|
91
92
|
var layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
|
|
92
93
|
|
|
93
94
|
// src/core/primitives/instance-id.ts
|
|
@@ -1173,7 +1174,7 @@ var tween = ({
|
|
|
1173
1174
|
}
|
|
1174
1175
|
const step = (now) => {
|
|
1175
1176
|
if (cancelled) return;
|
|
1176
|
-
const elapsed = now - start;
|
|
1177
|
+
const elapsed = Math.max(0, now - start);
|
|
1177
1178
|
const t = Math.min(elapsed / duration, 1);
|
|
1178
1179
|
const value = from + (to - from) * easing(t);
|
|
1179
1180
|
onUpdate(value);
|
|
@@ -1226,8 +1227,8 @@ var runSpring = ({
|
|
|
1226
1227
|
resolveFn = resolve;
|
|
1227
1228
|
const step = (now) => {
|
|
1228
1229
|
if (cancelled) return;
|
|
1229
|
-
const dt = Math.min((now - lastTime) / 1e3, MAX_DT);
|
|
1230
|
-
lastTime = now;
|
|
1230
|
+
const dt = Math.min(Math.max(0, now - lastTime) / 1e3, MAX_DT);
|
|
1231
|
+
lastTime = Math.max(lastTime, now);
|
|
1231
1232
|
const steps = Math.max(1, Math.ceil(dt * 240));
|
|
1232
1233
|
const subDt = dt / steps;
|
|
1233
1234
|
let stepsLeft = steps;
|
|
@@ -1291,6 +1292,7 @@ function resolveAnimationPreset(animation) {
|
|
|
1291
1292
|
}
|
|
1292
1293
|
|
|
1293
1294
|
// src/core/animation/waapi-settle.ts
|
|
1295
|
+
var SETTLE_ANIMATION_ID = "bs-settle";
|
|
1294
1296
|
var SIM_HZ = 240;
|
|
1295
1297
|
var SAMPLE_STRIDE = 4;
|
|
1296
1298
|
var MAX_SIM_MS = 3e3;
|
|
@@ -1348,6 +1350,7 @@ var AnimationRunner = class {
|
|
|
1348
1350
|
__publicField(this, "isDragging");
|
|
1349
1351
|
__publicField(this, "applyAux");
|
|
1350
1352
|
__publicField(this, "getTransformFor");
|
|
1353
|
+
__publicField(this, "readShownSize");
|
|
1351
1354
|
__publicField(this, "settleWaapi");
|
|
1352
1355
|
__publicField(this, "currentWaapi", null);
|
|
1353
1356
|
__publicField(this, "animationKind");
|
|
@@ -1367,6 +1370,7 @@ var AnimationRunner = class {
|
|
|
1367
1370
|
this.isDragging = deps.isDragging;
|
|
1368
1371
|
this.applyAux = deps.applyAux;
|
|
1369
1372
|
this.getTransformFor = deps.getTransformFor;
|
|
1373
|
+
this.readShownSize = deps.readShownSize;
|
|
1370
1374
|
this.settleWaapi = opts.settleAnimation === "waapi";
|
|
1371
1375
|
const preset = resolveAnimationPreset(opts.animation);
|
|
1372
1376
|
this.animationKind = preset.kind;
|
|
@@ -1399,10 +1403,12 @@ var AnimationRunner = class {
|
|
|
1399
1403
|
const entry = this.currentWaapi;
|
|
1400
1404
|
this.currentWaapi = null;
|
|
1401
1405
|
entry.stop();
|
|
1406
|
+
const size = this.readShownSize?.() ?? entry.sizeNow();
|
|
1402
1407
|
try {
|
|
1403
1408
|
entry.anim.cancel();
|
|
1404
1409
|
} catch {
|
|
1405
1410
|
}
|
|
1411
|
+
this.applySizeFn(size);
|
|
1406
1412
|
}
|
|
1407
1413
|
cancel() {
|
|
1408
1414
|
this.currentTween?.cancel();
|
|
@@ -1412,6 +1418,7 @@ var AnimationRunner = class {
|
|
|
1412
1418
|
async animateTo(target, velocityPxPerMs) {
|
|
1413
1419
|
if (target === this.getSize()) {
|
|
1414
1420
|
if (!this.isAnimating && !this.isDragging()) {
|
|
1421
|
+
this.applySizeFn(target);
|
|
1415
1422
|
this.element.style.willChange = "";
|
|
1416
1423
|
}
|
|
1417
1424
|
return;
|
|
@@ -1448,6 +1455,7 @@ var AnimationRunner = class {
|
|
|
1448
1455
|
return;
|
|
1449
1456
|
}
|
|
1450
1457
|
}
|
|
1458
|
+
let current = false;
|
|
1451
1459
|
if (this.animationKind === "spring") {
|
|
1452
1460
|
const spring = runSpring({
|
|
1453
1461
|
from: this.getSize(),
|
|
@@ -1458,7 +1466,8 @@ var AnimationRunner = class {
|
|
|
1458
1466
|
});
|
|
1459
1467
|
this.currentSpring = spring;
|
|
1460
1468
|
await spring.promise;
|
|
1461
|
-
|
|
1469
|
+
current = this.currentSpring === spring;
|
|
1470
|
+
if (current) this.currentSpring = null;
|
|
1462
1471
|
} else {
|
|
1463
1472
|
const tw = tween({
|
|
1464
1473
|
from: this.getSize(),
|
|
@@ -1469,11 +1478,15 @@ var AnimationRunner = class {
|
|
|
1469
1478
|
});
|
|
1470
1479
|
this.currentTween = tw;
|
|
1471
1480
|
await tw.promise;
|
|
1472
|
-
|
|
1481
|
+
current = this.currentTween === tw;
|
|
1482
|
+
if (current) this.currentTween = null;
|
|
1473
1483
|
}
|
|
1474
1484
|
if (!this.isAnimating) {
|
|
1475
1485
|
this.getRootEl()?.removeAttribute("data-animating");
|
|
1476
|
-
if (!this.isDragging())
|
|
1486
|
+
if (!this.isDragging()) {
|
|
1487
|
+
if (current) this.applySizeFn(this.getSize());
|
|
1488
|
+
this.element.style.willChange = "";
|
|
1489
|
+
}
|
|
1477
1490
|
}
|
|
1478
1491
|
}
|
|
1479
1492
|
async runWaapiSettle(samples, target) {
|
|
@@ -1487,11 +1500,11 @@ var AnimationRunner = class {
|
|
|
1487
1500
|
easing: "linear",
|
|
1488
1501
|
fill: "forwards"
|
|
1489
1502
|
});
|
|
1503
|
+
anim.id = SETTLE_ANIMATION_ID;
|
|
1490
1504
|
let stopped = false;
|
|
1491
1505
|
let auxRaf = 0;
|
|
1492
1506
|
const lastIdx = samples.values.length - 1;
|
|
1493
|
-
const
|
|
1494
|
-
if (stopped) return;
|
|
1507
|
+
const sizeNow = () => {
|
|
1495
1508
|
const at = Math.min(
|
|
1496
1509
|
(Number(anim.currentTime) || 0) / samples.stepMs,
|
|
1497
1510
|
lastIdx
|
|
@@ -1499,7 +1512,11 @@ var AnimationRunner = class {
|
|
|
1499
1512
|
const idx = Math.floor(at);
|
|
1500
1513
|
const from = samples.values[idx];
|
|
1501
1514
|
const to = samples.values[Math.min(idx + 1, lastIdx)];
|
|
1502
|
-
|
|
1515
|
+
return from + (to - from) * (at - idx);
|
|
1516
|
+
};
|
|
1517
|
+
const auxTick = () => {
|
|
1518
|
+
if (stopped) return;
|
|
1519
|
+
applyAux(sizeNow());
|
|
1503
1520
|
auxRaf = requestAnimationFrame(auxTick);
|
|
1504
1521
|
};
|
|
1505
1522
|
auxRaf = requestAnimationFrame(auxTick);
|
|
@@ -1508,7 +1525,8 @@ var AnimationRunner = class {
|
|
|
1508
1525
|
stop: () => {
|
|
1509
1526
|
stopped = true;
|
|
1510
1527
|
cancelAnimationFrame(auxRaf);
|
|
1511
|
-
}
|
|
1528
|
+
},
|
|
1529
|
+
sizeNow
|
|
1512
1530
|
};
|
|
1513
1531
|
this.currentWaapi = entry;
|
|
1514
1532
|
try {
|
|
@@ -2611,6 +2629,7 @@ var BottomSheetCore = class {
|
|
|
2611
2629
|
__publicField(this, "closeOnBack");
|
|
2612
2630
|
__publicField(this, "routedTo");
|
|
2613
2631
|
__publicField(this, "fitContentToSnap");
|
|
2632
|
+
__publicField(this, "settleAnimation");
|
|
2614
2633
|
__publicField(this, "persistent");
|
|
2615
2634
|
__publicField(this, "disableCloseFlag");
|
|
2616
2635
|
__publicField(this, "disableDragFlag");
|
|
@@ -2715,6 +2734,11 @@ var BottomSheetCore = class {
|
|
|
2715
2734
|
const cap = this.snaps.getMaxAxisSize();
|
|
2716
2735
|
const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
|
|
2717
2736
|
return this.transformTemplate(cap - shown);
|
|
2737
|
+
},
|
|
2738
|
+
readShownSize: () => {
|
|
2739
|
+
const shown = getComputedStyle(this.element).transform;
|
|
2740
|
+
if (!shown || shown === "none") return void 0;
|
|
2741
|
+
return this.snaps.getMaxAxisSize() - offsetFromMatrix(this.mode, new DOMMatrix(shown));
|
|
2718
2742
|
}
|
|
2719
2743
|
},
|
|
2720
2744
|
resolved.animation
|
|
@@ -2729,6 +2753,7 @@ var BottomSheetCore = class {
|
|
|
2729
2753
|
this.closeOnBack = resolved.closeOnBack;
|
|
2730
2754
|
this.routedTo = opts.routedTo;
|
|
2731
2755
|
this.fitContentToSnap = opts.fitContentToSnap === true;
|
|
2756
|
+
this.settleAnimation = opts.settleAnimation;
|
|
2732
2757
|
this.persistent = resolved.persistent;
|
|
2733
2758
|
this.disableCloseFlag = resolved.disableClose;
|
|
2734
2759
|
this.disableDragFlag = resolved.disableDrag;
|
|
@@ -2831,7 +2856,8 @@ var BottomSheetCore = class {
|
|
|
2831
2856
|
closeOnRouteChange: this.closeOnRouteChange,
|
|
2832
2857
|
persistKey: this.persistKey,
|
|
2833
2858
|
autoCollapseAfter,
|
|
2834
|
-
fitContentToSnap: this.fitContentToSnap
|
|
2859
|
+
fitContentToSnap: this.fitContentToSnap,
|
|
2860
|
+
settleAnimation: this.settleAnimation
|
|
2835
2861
|
},
|
|
2836
2862
|
isDestroyed: () => this.destroyed,
|
|
2837
2863
|
isDragging: () => this.isDraggingAny(),
|
|
@@ -3723,7 +3749,11 @@ var BottomSheetCore = class {
|
|
|
3723
3749
|
const offset = cap - clamped;
|
|
3724
3750
|
const style = this.element.style;
|
|
3725
3751
|
if (!skipTransform) style.transform = this.transformTemplate(offset);
|
|
3726
|
-
|
|
3752
|
+
const sizeChanged = this.sizeWriteSentinel.shouldWrite(
|
|
3753
|
+
clamped,
|
|
3754
|
+
this.animation.isAnimating || this.isDraggingAny() ? SIZE_WRITE_EPSILON : 0
|
|
3755
|
+
);
|
|
3756
|
+
if (sizeChanged) {
|
|
3727
3757
|
style.setProperty("--bs-size", `${clamped}px`);
|
|
3728
3758
|
if (this.scrimParent) {
|
|
3729
3759
|
this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
|
|
@@ -3750,7 +3780,7 @@ var BottomSheetCore = class {
|
|
|
3750
3780
|
}
|
|
3751
3781
|
}
|
|
3752
3782
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3753
|
-
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
3783
|
+
if ((progressChanged || sizeChanged) && this.bus.listenerCount("progress") > 0) {
|
|
3754
3784
|
this.progressPayload.value = progress;
|
|
3755
3785
|
this.progressPayload.size = clamped;
|
|
3756
3786
|
this.emit("progress", this.progressPayload);
|
|
@@ -4247,7 +4277,6 @@ function visualViewportFeature() {
|
|
|
4247
4277
|
|
|
4248
4278
|
// src/core/features/content-fit.ts
|
|
4249
4279
|
var INSET_VAR = "--bs-content-inset";
|
|
4250
|
-
var SIZE_VAR = "--bs-size";
|
|
4251
4280
|
var CAP_VAR = "--bs-max-size";
|
|
4252
4281
|
var LIFT_VAR = "--bs-footer-lift-max";
|
|
4253
4282
|
var FIT_ATTR = "data-bs-fit-content";
|
|
@@ -4260,10 +4289,14 @@ function contentFitFeature() {
|
|
|
4260
4289
|
return;
|
|
4261
4290
|
}
|
|
4262
4291
|
const sheet = ctx.element;
|
|
4292
|
+
const waapi = ctx.options.settleAnimation === "waapi";
|
|
4263
4293
|
let inset = 0;
|
|
4264
4294
|
let unpaddedMax = -1;
|
|
4265
4295
|
let top = 0;
|
|
4266
4296
|
let resting = false;
|
|
4297
|
+
let liftMax = 0;
|
|
4298
|
+
let followed = null;
|
|
4299
|
+
let follower = null;
|
|
4267
4300
|
const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
|
|
4268
4301
|
const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
|
|
4269
4302
|
const follow = (size) => {
|
|
@@ -4277,8 +4310,45 @@ function contentFitFeature() {
|
|
|
4277
4310
|
top = limit;
|
|
4278
4311
|
}
|
|
4279
4312
|
};
|
|
4313
|
+
const unfollow = () => {
|
|
4314
|
+
follower?.cancel();
|
|
4315
|
+
follower = null;
|
|
4316
|
+
followed = null;
|
|
4317
|
+
};
|
|
4318
|
+
const followSettle = () => {
|
|
4319
|
+
if (followed?.playState === "running") return;
|
|
4320
|
+
const settleAnim = sheet.getAnimations?.().find((a) => a.id === SETTLE_ANIMATION_ID);
|
|
4321
|
+
const footer = sheet.querySelector(".bs-footer");
|
|
4322
|
+
if (!settleAnim || !footer) return;
|
|
4323
|
+
const effect = settleAnim.effect;
|
|
4324
|
+
unfollow();
|
|
4325
|
+
const own = footer.animate(
|
|
4326
|
+
effect.getKeyframes().map((k) => ({
|
|
4327
|
+
offset: k.computedOffset,
|
|
4328
|
+
transform: `translateY(${-Math.min(
|
|
4329
|
+
Math.max(0, parseFloat(String(k.transform).split(",")[1]) || 0),
|
|
4330
|
+
liftMax
|
|
4331
|
+
)}px)`
|
|
4332
|
+
})),
|
|
4333
|
+
{
|
|
4334
|
+
duration: effect.getTiming().duration,
|
|
4335
|
+
easing: "linear",
|
|
4336
|
+
fill: "forwards"
|
|
4337
|
+
}
|
|
4338
|
+
);
|
|
4339
|
+
follower = own;
|
|
4340
|
+
followed = settleAnim;
|
|
4341
|
+
const done = () => {
|
|
4342
|
+
if (followed === settleAnim) unfollow();
|
|
4343
|
+
};
|
|
4344
|
+
settleAnim.ready.then(() => {
|
|
4345
|
+
if (follower === own) own.startTime = settleAnim.startTime;
|
|
4346
|
+
}, done);
|
|
4347
|
+
settleAnim.finished.then(done, done);
|
|
4348
|
+
};
|
|
4280
4349
|
const settle = () => {
|
|
4281
4350
|
if (ctx.isDestroyed()) return;
|
|
4351
|
+
unfollow();
|
|
4282
4352
|
const size = ctx.getSize();
|
|
4283
4353
|
if (!resting) {
|
|
4284
4354
|
unpaddedMax = -1;
|
|
@@ -4286,7 +4356,6 @@ function contentFitFeature() {
|
|
|
4286
4356
|
}
|
|
4287
4357
|
inset = hiddenAt(size);
|
|
4288
4358
|
put(INSET_VAR, inset);
|
|
4289
|
-
put(SIZE_VAR, size);
|
|
4290
4359
|
put(CAP_VAR, ctx.getMaxAxisSize());
|
|
4291
4360
|
if (!resting) {
|
|
4292
4361
|
resting = true;
|
|
@@ -4298,9 +4367,13 @@ function contentFitFeature() {
|
|
|
4298
4367
|
if (resting) {
|
|
4299
4368
|
resting = false;
|
|
4300
4369
|
sheet.setAttribute(FIT_ATTR, "moving");
|
|
4301
|
-
|
|
4370
|
+
liftMax = scroller.offsetHeight;
|
|
4371
|
+
put(LIFT_VAR, liftMax);
|
|
4302
4372
|
}
|
|
4303
4373
|
follow(size);
|
|
4374
|
+
if (waapi && ctx.isAnimating() && sheet.dataset.mode === "bottom") {
|
|
4375
|
+
followSettle();
|
|
4376
|
+
}
|
|
4304
4377
|
};
|
|
4305
4378
|
const moving = () => ctx.isAnimating() || ctx.isDragging();
|
|
4306
4379
|
const whenIdle = () => {
|
|
@@ -4313,13 +4386,20 @@ function contentFitFeature() {
|
|
|
4313
4386
|
);
|
|
4314
4387
|
const offSnap = ctx.on("snap", settle);
|
|
4315
4388
|
const offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
|
|
4389
|
+
const offBeforeSnap = ctx.on("before-snap", () => {
|
|
4390
|
+
queueMicrotask(() => {
|
|
4391
|
+
if (!ctx.isDestroyed() && ctx.isAnimating()) move(ctx.getSize());
|
|
4392
|
+
});
|
|
4393
|
+
});
|
|
4316
4394
|
const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
|
|
4317
4395
|
observer?.observe(document.documentElement);
|
|
4318
4396
|
window.addEventListener("orientationchange", whenIdle);
|
|
4319
4397
|
return () => {
|
|
4398
|
+
unfollow();
|
|
4320
4399
|
offProgress();
|
|
4321
4400
|
offSnap();
|
|
4322
4401
|
offDragStart();
|
|
4402
|
+
offBeforeSnap();
|
|
4323
4403
|
observer?.disconnect();
|
|
4324
4404
|
window.removeEventListener("orientationchange", whenIdle);
|
|
4325
4405
|
sheet.removeAttribute(FIT_ATTR);
|
|
@@ -4469,5 +4549,7 @@ function createBottomSheet(opts) {
|
|
|
4469
4549
|
}
|
|
4470
4550
|
|
|
4471
4551
|
exports.createBottomSheet = createBottomSheet;
|
|
4552
|
+
exports.resolveTeleportTarget = resolveTeleportTarget;
|
|
4553
|
+
exports.teleportElements = teleportElements;
|
|
4472
4554
|
//# sourceMappingURL=svelte-core.cjs.map
|
|
4473
4555
|
//# sourceMappingURL=svelte-core.cjs.map
|