@maas/vue-equipment 0.16.3 → 0.16.5

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.
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@maas/vue-equipment/nuxt",
3
3
  "configKey": "vueEquipment",
4
- "version": "0.16.2"
4
+ "version": "0.16.4"
5
5
  }
@@ -142,6 +142,7 @@ const {
142
142
 
143
143
  const { onPointerdown, dragging, style } = useDrawerDrag({
144
144
  id: props.id,
145
+ isActive,
145
146
  elRef,
146
147
  wrapperRef,
147
148
  position,
@@ -289,5 +290,5 @@ onBeforeUnmount(() => {
289
290
  </script>
290
291
 
291
292
  <style>
292
- :root{--magic-drawer-height:75svh;--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-y:auto;--magic-drawer-handle-wrapper-height:2rem;--magic-drawer-handle-width:3rem;--magic-drawer-handle-height:0.375rem;--magic-drawer-handle-color:#d4d4d8;--magic-drawer-handle-border-radius:0.25rem;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-drag-overshoot-x:0;--magic-drawer-drag-overshoot-y:0}.magic-drawer{align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot)}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1)}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot)}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1)}.magic-drawer__wrapper{height:calc(var(--magic-drawer-height) + var(--magic-drawer-drag-overshoot));pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:100%}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}.magic-drawer.-dragging .magic-drawer__content{cursor:grabbing}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
293
+ :root{--magic-drawer-height:75svh;--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-y:auto;--magic-drawer-handle-wrapper-height:2rem;--magic-drawer-handle-width:3rem;--magic-drawer-handle-height:0.375rem;--magic-drawer-handle-color:#d4d4d8;--magic-drawer-handle-border-radius:0.25rem;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-drag-overshoot-x:0;--magic-drawer-drag-overshoot-y:0}.magic-drawer{align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot)}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1)}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot)}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1)}.magic-drawer__wrapper{height:calc(var(--magic-drawer-height) + var(--magic-drawer-drag-overshoot));pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:100%}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}.magic-drawer.-dragging .magic-drawer__drag{cursor:grabbing}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
293
294
  </style>
@@ -2,6 +2,7 @@ import { type MaybeRef } from 'vue';
2
2
  import { type DefaultOptions } from '../../utils/defaultOptions.js';
3
3
  type UseDrawerDragArgs = {
4
4
  id: MaybeRef<string>;
5
+ isActive: MaybeRef<boolean>;
5
6
  elRef: MaybeRef<HTMLDivElement | undefined>;
6
7
  wrapperRef: MaybeRef<HTMLDivElement | undefined>;
7
8
  position: MaybeRef<DefaultOptions['position']>;
@@ -7,13 +7,18 @@ import {
7
7
  toValue,
8
8
  nextTick
9
9
  } from "vue";
10
- import { useEventListener, unrefElement } from "@vueuse/core";
11
- import { interpolate } from "@maas/vue-equipment/utils";
10
+ import {
11
+ useEventListener,
12
+ unrefElement,
13
+ useResizeObserver,
14
+ useThrottleFn
15
+ } from "@vueuse/core";
12
16
  import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
13
17
  import { useDrawerSnap } from "./useDrawerSnap.mjs";
14
18
  export function useDrawerDrag(args) {
15
19
  const {
16
20
  id,
21
+ isActive,
17
22
  elRef,
18
23
  wrapperRef,
19
24
  snapPoints,
@@ -24,21 +29,6 @@ export function useDrawerDrag(args) {
24
29
  canClose,
25
30
  close
26
31
  } = args;
27
- const elRect = ref(void 0);
28
- const wrapperRect = ref(void 0);
29
- const {
30
- findClosestSnapPoint,
31
- mapSnapPoint,
32
- snapPointsMap,
33
- drawerHeight,
34
- drawerWidth
35
- } = useDrawerSnap({
36
- wrapperRect,
37
- snapPoints,
38
- canClose,
39
- position,
40
- overshoot
41
- });
42
32
  const dragStart = ref(void 0);
43
33
  const dragging = ref(false);
44
34
  const shouldClose = ref(false);
@@ -47,16 +37,36 @@ export function useDrawerDrag(args) {
47
37
  let cancelPointermove = void 0;
48
38
  const originX = ref(0);
49
39
  const originY = ref(0);
50
- const snappedY = ref(0);
51
- const snappedX = ref(0);
52
40
  const directionY = ref("absolute");
53
41
  const directionX = ref("absolute");
54
42
  const hasSnapPoints = computed(() => toValue(snapPoints).length > 1);
43
+ const elRect = ref(void 0);
44
+ const wrapperRect = ref(void 0);
55
45
  const draggedX = ref(0);
56
46
  const draggedY = ref(0);
57
47
  const style = computed(
58
48
  () => `transform: translate(${draggedX.value}px, ${draggedY.value}px)`
59
49
  );
50
+ const {
51
+ snappedY,
52
+ snappedX,
53
+ activeSnapPoint,
54
+ snapTo,
55
+ snapPointsMap,
56
+ interpolateDragged,
57
+ findClosestSnapPoint,
58
+ drawerHeight,
59
+ drawerWidth
60
+ } = useDrawerSnap({
61
+ id,
62
+ wrapperRect,
63
+ snapPoints,
64
+ canClose,
65
+ position,
66
+ overshoot,
67
+ draggedY,
68
+ draggedX
69
+ });
60
70
  async function getSizes() {
61
71
  elRect.value = unrefElement(elRef)?.getBoundingClientRect();
62
72
  wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
@@ -228,31 +238,6 @@ export function useDrawerDrag(args) {
228
238
  break;
229
239
  }
230
240
  }
231
- async function setInitial() {
232
- await nextTick();
233
- switch (position) {
234
- case "top":
235
- case "bottom":
236
- const mappedSnapPointY = mapSnapPoint(toValue(snapPoint));
237
- if (!mappedSnapPointY)
238
- return;
239
- draggedY.value = await findClosestSnapPoint({
240
- draggedX,
241
- draggedY: mappedSnapPointY
242
- }) || 0;
243
- break;
244
- case "left":
245
- case "right":
246
- const mappedSnapPointX = mapSnapPoint(toValue(snapPoint));
247
- if (!mappedSnapPointX)
248
- return;
249
- draggedX.value = await findClosestSnapPoint({
250
- draggedX: mappedSnapPointX,
251
- draggedY
252
- }) || 0;
253
- break;
254
- }
255
- }
256
241
  function resetStateAndListeners() {
257
242
  dragging.value = false;
258
243
  shouldClose.value = false;
@@ -267,53 +252,20 @@ export function useDrawerDrag(args) {
267
252
  function resetSnapped() {
268
253
  snappedX.value = 0;
269
254
  snappedY.value = 0;
255
+ activeSnapPoint.value = void 0;
270
256
  }
271
257
  function emitterCallback(event, payload) {
272
258
  if (event === "afterLeave" && payload === toValue(id)) {
273
259
  resetDragged();
274
260
  resetSnapped();
275
261
  }
276
- }
277
- async function interpolateDragged(target) {
278
- const snapPoint2 = snapPointsMap.value[target];
279
- useDrawerEmitter().emit("beforeSnap", { id: toValue(id), snapPoint: snapPoint2 });
280
- switch (position) {
281
- case "bottom":
282
- case "top":
283
- snappedY.value = target;
284
- interpolate({
285
- from: draggedY.value,
286
- to: target,
287
- duration: 300,
288
- callback: (value) => {
289
- draggedY.value = value;
290
- if (draggedY.value === target) {
291
- useDrawerEmitter().emit("beforeSnap", {
292
- id: toValue(id),
293
- snapPoint: snapPoint2
294
- });
295
- }
296
- }
297
- });
298
- break;
299
- case "right":
300
- case "left":
301
- snappedX.value = target;
302
- interpolate({
303
- from: draggedX.value,
304
- to: target,
305
- duration: 300,
306
- callback: (value) => {
307
- draggedX.value = value;
308
- if (draggedX.value === target) {
309
- useDrawerEmitter().emit("beforeSnap", {
310
- id: toValue(id),
311
- snapPoint: snapPoint2
312
- });
313
- }
314
- }
315
- });
316
- break;
262
+ if (event === "snapTo" && typeof payload === "object" && payload.id === toValue(id)) {
263
+ if (!toValue(isActive)) {
264
+ console.warn("Cannot snap to point when drawer is not open");
265
+ return;
266
+ } else {
267
+ snapTo({ snapPoint: payload.snapPoint, interpolate: true });
268
+ }
317
269
  }
318
270
  }
319
271
  function onPointerup(e) {
@@ -321,6 +273,17 @@ export function useDrawerDrag(args) {
321
273
  close();
322
274
  } else if (interpolateTo.value || interpolateTo.value === 0) {
323
275
  interpolateDragged(interpolateTo.value);
276
+ activeSnapPoint.value = snapPointsMap.value[interpolateTo.value];
277
+ switch (position) {
278
+ case "bottom":
279
+ case "top":
280
+ snappedY.value = interpolateTo.value;
281
+ break;
282
+ case "right":
283
+ case "left":
284
+ snappedX.value = interpolateTo.value;
285
+ break;
286
+ }
324
287
  } else {
325
288
  switch (position) {
326
289
  case "bottom":
@@ -364,12 +327,21 @@ export function useDrawerDrag(args) {
364
327
  useDrawerEmitter().on("*", emitterCallback);
365
328
  });
366
329
  watch(
367
- () => [unrefElement(elRef), unrefElement(wrapperRef)],
330
+ () => [unrefElement(wrapperRef), unrefElement(wrapperRef)],
368
331
  async () => {
369
332
  await getSizes();
370
- setInitial();
333
+ snapTo({ snapPoint, interpolate: false });
371
334
  }
372
335
  );
336
+ useResizeObserver(elRef, async () => {
337
+ useThrottleFn(async () => {
338
+ await getSizes();
339
+ if (activeSnapPoint.value) {
340
+ await snapTo({ snapPoint: activeSnapPoint.value, interpolate: false });
341
+ snapPointsMap.trigger();
342
+ }
343
+ }, 100)();
344
+ });
373
345
  onBeforeUnmount(() => {
374
346
  useDrawerEmitter().off("*", emitterCallback);
375
347
  });
@@ -1,23 +0,0 @@
1
- import { type MaybeRef } from 'vue';
2
- import { type DefaultOptions } from '../../utils/defaultOptions.js';
3
- import { type SnapPoint } from '../../types.js';
4
- type UseDrawerSnapArgs = {
5
- wrapperRect: MaybeRef<DOMRect | undefined>;
6
- position: MaybeRef<DefaultOptions['position']>;
7
- snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
8
- canClose: MaybeRef<DefaultOptions['canClose']>;
9
- overshoot: MaybeRef<number>;
10
- };
11
- type FindClosestSnapPointArgs = {
12
- draggedY: MaybeRef<number>;
13
- draggedX: MaybeRef<number>;
14
- direction?: 'below' | 'above' | 'absolute';
15
- };
16
- export declare function useDrawerSnap(args: UseDrawerSnapArgs): {
17
- findClosestSnapPoint: (args: FindClosestSnapPointArgs) => Promise<number | undefined>;
18
- mapSnapPoint: (snapPoint: SnapPoint) => number | undefined;
19
- snapPointsMap: import("vue").ComputedRef<Record<number, SnapPoint>>;
20
- drawerHeight: import("vue").ComputedRef<number>;
21
- drawerWidth: import("vue").ComputedRef<number>;
22
- };
23
- export {};
@@ -1,28 +1,50 @@
1
- import { computed, toValue } from "vue";
2
- import { mapValue } from "@maas/vue-equipment/utils";
1
+ import { ref, computed, toValue, nextTick } from "vue";
2
+ import { computedWithControl } from "@vueuse/core";
3
+ import { mapValue, interpolate } from "@maas/vue-equipment/utils";
4
+ import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
3
5
  export function useDrawerSnap(args) {
4
- const { snapPoints, position, wrapperRect, overshoot, canClose } = args;
5
- const mappedSnapPoints = computed(() => {
6
- const extended = toValue(canClose) ? [...toValue(snapPoints), 0] : toValue(snapPoints);
7
- const mapped = extended.map((snapPoint) => {
8
- return mapSnapPoint(snapPoint);
9
- });
10
- const filtered = mapped.filter(
11
- (snapPoint) => !!snapPoint || snapPoint === 0
12
- ).sort((a, b) => a - b);
13
- return filtered;
14
- });
15
- const snapPointsMap = computed(() => {
16
- const extended = toValue(canClose) ? [...toValue(snapPoints), 0] : toValue(snapPoints);
17
- const mapped = extended.reduce((acc, current) => {
18
- const key = mapSnapPoint(current);
19
- if (key || key === 0) {
20
- acc[key] = current;
21
- }
22
- return acc;
23
- }, {});
24
- return mapped;
25
- });
6
+ const {
7
+ id,
8
+ snapPoints,
9
+ position,
10
+ wrapperRect,
11
+ overshoot,
12
+ draggedY,
13
+ draggedX,
14
+ canClose
15
+ } = args;
16
+ const mappedSnapPoints = computedWithControl(
17
+ () => toValue(wrapperRect),
18
+ () => {
19
+ const extended = toValue(canClose) ? [...toValue(snapPoints), 0] : toValue(snapPoints);
20
+ const mapped = extended.map((snapPoint) => {
21
+ return mapSnapPoint(snapPoint);
22
+ });
23
+ const filtered = mapped.filter(
24
+ (snapPoint) => !!snapPoint || snapPoint === 0
25
+ ).sort((a, b) => a - b);
26
+ return filtered;
27
+ }
28
+ );
29
+ const snapPointsMap = computedWithControl(
30
+ () => {
31
+ return { ...toValue(snapPoints) };
32
+ },
33
+ () => {
34
+ const extended = toValue(canClose) ? [...toValue(snapPoints), 0] : toValue(snapPoints);
35
+ const mapped = extended.reduce((acc, current) => {
36
+ const key = mapSnapPoint(current);
37
+ if (key || key === 0) {
38
+ acc[key] = current;
39
+ }
40
+ return acc;
41
+ }, {});
42
+ return mapped;
43
+ }
44
+ );
45
+ const snappedY = ref(0);
46
+ const snappedX = ref(0);
47
+ const activeSnapPoint = ref(void 0);
26
48
  const drawerHeight = computed(() => {
27
49
  if (toValue(wrapperRect) === void 0) {
28
50
  return 0;
@@ -122,14 +144,95 @@ export function useDrawerSnap(args) {
122
144
  }
123
145
  }
124
146
  }
147
+ async function snapTo(args2) {
148
+ const { snapPoint, interpolate: interpolate2 } = args2;
149
+ await nextTick();
150
+ switch (position) {
151
+ case "top":
152
+ case "bottom":
153
+ const mappedSnapPointY = mapSnapPoint(toValue(snapPoint));
154
+ if (!mappedSnapPointY)
155
+ return;
156
+ const closestY = await findClosestSnapPoint({
157
+ draggedX,
158
+ draggedY: mappedSnapPointY
159
+ }) || 0;
160
+ if (interpolate2) {
161
+ await interpolateDragged(closestY);
162
+ } else {
163
+ draggedY.value = closestY;
164
+ }
165
+ snappedY.value = closestY;
166
+ activeSnapPoint.value = toValue(snapPoint);
167
+ break;
168
+ case "left":
169
+ case "right":
170
+ const mappedSnapPointX = mapSnapPoint(toValue(snapPoint));
171
+ if (!mappedSnapPointX)
172
+ return;
173
+ const closestX = await findClosestSnapPoint({
174
+ draggedX: mappedSnapPointX,
175
+ draggedY
176
+ }) || 0;
177
+ if (interpolate2) {
178
+ await interpolateDragged(closestX);
179
+ } else {
180
+ draggedX.value = closestX;
181
+ snappedX.value = closestX;
182
+ }
183
+ snappedX.value = closestX;
184
+ activeSnapPoint.value = toValue(snapPoint);
185
+ break;
186
+ }
187
+ }
188
+ async function interpolateDragged(target) {
189
+ const snapPoint = snapPointsMap.value[target];
190
+ useDrawerEmitter().emit("beforeSnap", { id: toValue(id), snapPoint });
191
+ switch (position) {
192
+ case "bottom":
193
+ case "top":
194
+ interpolate({
195
+ from: draggedY.value,
196
+ to: target,
197
+ duration: 300,
198
+ callback: (value) => {
199
+ draggedY.value = value;
200
+ if (draggedY.value === target) {
201
+ useDrawerEmitter().emit("afterSnap", {
202
+ id: toValue(id),
203
+ snapPoint
204
+ });
205
+ }
206
+ }
207
+ });
208
+ break;
209
+ case "right":
210
+ case "left":
211
+ interpolate({
212
+ from: draggedX.value,
213
+ to: target,
214
+ duration: 300,
215
+ callback: (value) => {
216
+ draggedX.value = value;
217
+ if (draggedX.value === target) {
218
+ useDrawerEmitter().emit("afterSnap", {
219
+ id: toValue(id),
220
+ snapPoint
221
+ });
222
+ }
223
+ }
224
+ });
225
+ break;
226
+ }
227
+ }
125
228
  async function findClosestSnapPoint(args2) {
126
- const { draggedY, draggedX, direction = "absolute" } = args2;
229
+ const { draggedY: draggedY2, draggedX: draggedX2, direction = "absolute" } = args2;
127
230
  let closest = 0;
128
231
  switch (position) {
129
232
  case "bottom":
130
233
  case "top":
131
234
  closest = findClosestNumber({
132
- number: toValue(draggedY),
235
+ number: toValue(draggedY2),
133
236
  numbers: mappedSnapPoints.value,
134
237
  direction
135
238
  });
@@ -137,7 +240,7 @@ export function useDrawerSnap(args) {
137
240
  case "right":
138
241
  case "left":
139
242
  closest = findClosestNumber({
140
- number: toValue(draggedX),
243
+ number: toValue(draggedX2),
141
244
  numbers: mappedSnapPoints.value,
142
245
  direction
143
246
  });
@@ -146,8 +249,12 @@ export function useDrawerSnap(args) {
146
249
  return closest;
147
250
  }
148
251
  return {
252
+ snappedY,
253
+ snappedX,
254
+ activeSnapPoint,
255
+ snapTo,
149
256
  findClosestSnapPoint,
150
- mapSnapPoint,
257
+ interpolateDragged,
151
258
  snapPointsMap,
152
259
  drawerHeight,
153
260
  drawerWidth
@@ -1,5 +1,5 @@
1
1
  import { type MaybeRef } from 'vue';
2
- import type { DrawerOptions } from '../types/index.js';
2
+ import type { DrawerOptions, SnapPoint } from '../types/index.js';
3
3
  import type { MaybeElementRef } from '@vueuse/core';
4
4
  export type useDrawerApiOptions = Pick<DrawerOptions, 'scrollLock'> & {
5
5
  focusTarget: MaybeElementRef;
@@ -9,6 +9,7 @@ export declare function useDrawerApi(id?: MaybeRef<string>, options?: useDrawerA
9
9
  isActive: import("vue").ComputedRef<boolean>;
10
10
  open: () => void;
11
11
  close: () => void;
12
+ snapTo: (snapPoint: SnapPoint) => void;
12
13
  trapFocus: () => void;
13
14
  releaseFocus: () => void;
14
15
  lockScroll: () => void;
@@ -4,6 +4,7 @@ import { defu } from "defu";
4
4
  import { useScrollLock } from "@vueuse/core";
5
5
  import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
6
6
  import { useDrawerStore } from "./private/useDrawerStore.mjs";
7
+ import { useDrawerEmitter } from "./useDrawerEmitter.mjs";
7
8
  const defaultOptions = {
8
9
  focusTarget: void 0,
9
10
  scrollLock: true
@@ -22,6 +23,9 @@ export function useDrawerApi(id, options) {
22
23
  function close() {
23
24
  removeInstance(mappedId.value);
24
25
  }
26
+ function snapTo(snapPoint) {
27
+ useDrawerEmitter().emit("snapTo", { id: mappedId.value, snapPoint });
28
+ }
25
29
  function trapFocus() {
26
30
  if (focusTrap) {
27
31
  focusTrap.activate();
@@ -65,6 +69,7 @@ export function useDrawerApi(id, options) {
65
69
  isActive,
66
70
  open,
67
71
  close,
72
+ snapTo,
68
73
  trapFocus,
69
74
  releaseFocus,
70
75
  lockScroll,
@@ -38,6 +38,10 @@ export type DrawerEvents = {
38
38
  id: string;
39
39
  snapPoint: SnapPoint;
40
40
  };
41
+ snapTo: {
42
+ id: string;
43
+ snapPoint: SnapPoint;
44
+ };
41
45
  afterSnap: {
42
46
  id: string;
43
47
  snapPoint: SnapPoint;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@maas/vue-equipment",
3
3
  "description": "A magic collection of Vue composables, plugins, components and directives",
4
- "version": "0.16.3",
4
+ "version": "0.16.5",
5
5
  "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
6
6
  "devDependencies": {
7
7
  "@antfu/ni": "^0.21.12",