@maas/vue-equipment 0.16.9 → 0.17.1
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/nuxt/module.json +1 -1
- package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue +4 -5
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerCallback.mjs +6 -6
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.d.ts +7 -8
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.mjs +23 -9
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerGuards.d.ts +2 -2
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerGuards.mjs +16 -4
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerSnap.mjs +20 -16
- package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.d.ts +1 -1
- package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.mjs +3 -2
- package/dist/plugins/MagicDrawer/src/types/index.d.ts +5 -2
- package/dist/plugins/MagicDrawer/src/utils/defaultOptions.mjs +5 -2
- package/dist/plugins/MagicModal/src/composables/private/useModalCallback.mjs +6 -6
- package/dist/plugins/MagicModal/src/composables/useModalApi.d.ts +1 -1
- package/dist/plugins/MagicModal/src/composables/useModalApi.mjs +3 -2
- package/dist/utils/index.d.mts +3 -1
- package/dist/utils/index.d.ts +3 -1
- package/dist/utils/index.js +7 -0
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/index.mjs +6 -0
- package/dist/utils/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/nuxt/module.json
CHANGED
|
@@ -97,7 +97,7 @@ import '@maas/vue-equipment/utils/css/animations/slide-btt-out.css'
|
|
|
97
97
|
|
|
98
98
|
// Prevent deep merge of certain options
|
|
99
99
|
const customDefu = createDefu((obj, key, value) => {
|
|
100
|
-
if (key === 'keys' || key === '
|
|
100
|
+
if (key === 'keys' || key === 'points') {
|
|
101
101
|
obj[key] = value
|
|
102
102
|
return true
|
|
103
103
|
}
|
|
@@ -126,7 +126,7 @@ const mappedOptions: typeof defaultOptions = customDefu(
|
|
|
126
126
|
)
|
|
127
127
|
|
|
128
128
|
const overshoot = ref(0)
|
|
129
|
-
const { position, threshold,
|
|
129
|
+
const { position, threshold, snap, canClose } = mappedOptions
|
|
130
130
|
|
|
131
131
|
const {
|
|
132
132
|
isActive,
|
|
@@ -148,8 +148,7 @@ const { onPointerdown, dragging, style } = useDrawerDrag({
|
|
|
148
148
|
position,
|
|
149
149
|
threshold,
|
|
150
150
|
overshoot,
|
|
151
|
-
|
|
152
|
-
snapPoint,
|
|
151
|
+
snap,
|
|
153
152
|
canClose,
|
|
154
153
|
close,
|
|
155
154
|
})
|
|
@@ -290,5 +289,5 @@ onBeforeUnmount(() => {
|
|
|
290
289
|
</script>
|
|
291
290
|
|
|
292
291
|
<style>
|
|
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-x:hidden;--magic-drawer-content-overflow-y:
|
|
292
|
+
:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--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-x:hidden;--magic-drawer-content-overflow-y:hidden;--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:0rem;--magic-drawer-drag-overshoot-y:0rem;--magic-drawer-padding:0rem}.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-padding:0 0 var(--magic-drawer-drag-overshoot-y) 0}.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-padding:var(--magic-drawer-drag-overshoot-y) 0 0 0}.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-padding:0 var(--magic-drawer-drag-overshoot-x) 0 0}.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-padding:0 0 0 var(--magic-drawer-drag-overshoot-x)}.magic-drawer__wrapper{height:calc(var(--magic-drawer-height) + var(--magic-drawer-drag-overshoot-y));pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:calc(var(--magic-drawer-width) + var(--magic-drawer-drag-overshoot-x))}.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-x:var(--magic-drawer-content-overflow-x);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__drag>*{padding:var(--magic-drawer-padding)}.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}
|
|
294
293
|
</style>
|
|
@@ -15,18 +15,18 @@ export function useDrawerCallback(args) {
|
|
|
15
15
|
} = args;
|
|
16
16
|
function onBeforeEnter(_el) {
|
|
17
17
|
useDrawerEmitter().emit("beforeEnter", toValue(id));
|
|
18
|
-
}
|
|
19
|
-
function onEnter(_el) {
|
|
20
|
-
useDrawerEmitter().emit("enter", toValue(id));
|
|
21
|
-
}
|
|
22
|
-
async function onAfterEnter(_el) {
|
|
23
|
-
useDrawerEmitter().emit("afterEnter", toValue(id));
|
|
24
18
|
if (mappedOptions.scrollLock) {
|
|
25
19
|
if (mappedOptions.scrollLockPadding) {
|
|
26
20
|
addScrollLockPadding();
|
|
27
21
|
}
|
|
28
22
|
lockScroll();
|
|
29
23
|
}
|
|
24
|
+
}
|
|
25
|
+
function onEnter(_el) {
|
|
26
|
+
useDrawerEmitter().emit("enter", toValue(id));
|
|
27
|
+
}
|
|
28
|
+
async function onAfterEnter(_el) {
|
|
29
|
+
useDrawerEmitter().emit("afterEnter", toValue(id));
|
|
30
30
|
if (mappedOptions.focusTrap) {
|
|
31
31
|
await nextTick();
|
|
32
32
|
trapFocus();
|
|
@@ -1,23 +1,22 @@
|
|
|
1
|
-
import { type MaybeRef } from 'vue';
|
|
1
|
+
import { type Ref, type MaybeRef } from 'vue';
|
|
2
2
|
import { type DefaultOptions } from '../../utils/defaultOptions.js';
|
|
3
3
|
type UseDrawerDragArgs = {
|
|
4
4
|
id: MaybeRef<string>;
|
|
5
5
|
isActive: MaybeRef<boolean>;
|
|
6
|
-
elRef:
|
|
7
|
-
wrapperRef:
|
|
6
|
+
elRef: Ref<HTMLDivElement | undefined>;
|
|
7
|
+
wrapperRef: Ref<HTMLDivElement | undefined>;
|
|
8
8
|
position: MaybeRef<DefaultOptions['position']>;
|
|
9
9
|
threshold: MaybeRef<DefaultOptions['threshold']>;
|
|
10
|
-
|
|
11
|
-
snapPoint: MaybeRef<DefaultOptions['snapPoint']>;
|
|
10
|
+
snap: MaybeRef<DefaultOptions['snap']>;
|
|
12
11
|
canClose: MaybeRef<DefaultOptions['canClose']>;
|
|
13
12
|
overshoot: MaybeRef<number>;
|
|
14
13
|
close: () => void;
|
|
15
14
|
};
|
|
16
15
|
export declare function useDrawerDrag(args: UseDrawerDragArgs): {
|
|
17
16
|
style: import("vue").ComputedRef<string>;
|
|
18
|
-
draggedX:
|
|
19
|
-
draggedY:
|
|
20
|
-
dragging:
|
|
17
|
+
draggedX: Ref<number>;
|
|
18
|
+
draggedY: Ref<number>;
|
|
19
|
+
dragging: Ref<boolean>;
|
|
21
20
|
onPointerdown: (e: PointerEvent) => void;
|
|
22
21
|
};
|
|
23
22
|
export {};
|
|
@@ -24,11 +24,10 @@ export function useDrawerDrag(args) {
|
|
|
24
24
|
isActive,
|
|
25
25
|
elRef,
|
|
26
26
|
wrapperRef,
|
|
27
|
-
snapPoints,
|
|
28
27
|
position,
|
|
29
28
|
overshoot,
|
|
30
29
|
threshold,
|
|
31
|
-
|
|
30
|
+
snap,
|
|
32
31
|
canClose,
|
|
33
32
|
close
|
|
34
33
|
} = args;
|
|
@@ -46,9 +45,10 @@ export function useDrawerDrag(args) {
|
|
|
46
45
|
const relDirectionX = ref("absolute");
|
|
47
46
|
const absDirectionY = ref(void 0);
|
|
48
47
|
const absDirectionX = ref(void 0);
|
|
49
|
-
const hasSnapPoints = computed(() => toValue(
|
|
48
|
+
const hasSnapPoints = computed(() => toValue(snap)?.points.length > 1);
|
|
50
49
|
const elRect = ref(void 0);
|
|
51
50
|
const wrapperRect = ref(void 0);
|
|
51
|
+
const duration = computed(() => toValue(snap)?.duration);
|
|
52
52
|
const draggedX = ref(0);
|
|
53
53
|
const draggedY = ref(0);
|
|
54
54
|
const style = computed(
|
|
@@ -67,7 +67,7 @@ export function useDrawerDrag(args) {
|
|
|
67
67
|
} = useDrawerSnap({
|
|
68
68
|
id,
|
|
69
69
|
wrapperRect,
|
|
70
|
-
|
|
70
|
+
snap,
|
|
71
71
|
canClose,
|
|
72
72
|
position,
|
|
73
73
|
overshoot,
|
|
@@ -301,7 +301,11 @@ export function useDrawerDrag(args) {
|
|
|
301
301
|
console.warn("Cannot snap to point when drawer is not open");
|
|
302
302
|
return;
|
|
303
303
|
} else {
|
|
304
|
-
snapTo({
|
|
304
|
+
snapTo({
|
|
305
|
+
snapPoint: payload.snapPoint,
|
|
306
|
+
interpolate: true,
|
|
307
|
+
duration: duration.value
|
|
308
|
+
});
|
|
305
309
|
}
|
|
306
310
|
}
|
|
307
311
|
}
|
|
@@ -310,7 +314,10 @@ export function useDrawerDrag(args) {
|
|
|
310
314
|
close();
|
|
311
315
|
} else if (interpolateTo.value || interpolateTo.value === 0) {
|
|
312
316
|
if (scrollLock && scrollLock.value || canInterpolate(e.target)) {
|
|
313
|
-
interpolateDragged(
|
|
317
|
+
interpolateDragged({
|
|
318
|
+
to: interpolateTo.value,
|
|
319
|
+
duration: duration.value
|
|
320
|
+
});
|
|
314
321
|
}
|
|
315
322
|
activeSnapPoint.value = snapPointsMap.value[interpolateTo.value];
|
|
316
323
|
switch (position) {
|
|
@@ -327,11 +334,17 @@ export function useDrawerDrag(args) {
|
|
|
327
334
|
switch (position) {
|
|
328
335
|
case "bottom":
|
|
329
336
|
case "top":
|
|
330
|
-
interpolateDragged(
|
|
337
|
+
interpolateDragged({
|
|
338
|
+
to: snappedY.value,
|
|
339
|
+
duration: duration.value
|
|
340
|
+
});
|
|
331
341
|
break;
|
|
332
342
|
case "right":
|
|
333
343
|
case "left":
|
|
334
|
-
interpolateDragged(
|
|
344
|
+
interpolateDragged({
|
|
345
|
+
to: snappedX.value,
|
|
346
|
+
duration: duration.value
|
|
347
|
+
});
|
|
335
348
|
break;
|
|
336
349
|
}
|
|
337
350
|
}
|
|
@@ -379,9 +392,10 @@ export function useDrawerDrag(args) {
|
|
|
379
392
|
useDrawerEmitter().on("*", emitterCallback);
|
|
380
393
|
});
|
|
381
394
|
watch(
|
|
382
|
-
() => [unrefElement(
|
|
395
|
+
() => [unrefElement(elRef), unrefElement(wrapperRef)],
|
|
383
396
|
async () => {
|
|
384
397
|
await getSizes();
|
|
398
|
+
const snapPoint = toValue(snap)?.initial;
|
|
385
399
|
snapTo({ snapPoint, interpolate: false });
|
|
386
400
|
}
|
|
387
401
|
);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { type MaybeRef } from 'vue';
|
|
1
|
+
import { type Ref, type MaybeRef } from 'vue';
|
|
2
2
|
import { type DefaultOptions } from '../../utils/defaultOptions.js';
|
|
3
3
|
import { type SnapPoint } from '../../types.js';
|
|
4
4
|
interface UseDrawerGuardsArgs {
|
|
5
|
-
elRef:
|
|
5
|
+
elRef: Ref<HTMLDivElement | undefined>;
|
|
6
6
|
absDirectionX: MaybeRef<'with' | 'against' | undefined>;
|
|
7
7
|
absDirectionY: MaybeRef<'with' | 'against' | undefined>;
|
|
8
8
|
position: MaybeRef<DefaultOptions['position']>;
|
|
@@ -2,7 +2,7 @@ import { computed, toValue } from "vue";
|
|
|
2
2
|
import { unrefElement } from "@vueuse/core";
|
|
3
3
|
export function useDrawerGuards(args) {
|
|
4
4
|
const { elRef, absDirectionX, absDirectionY, position, activeSnapPoint } = args;
|
|
5
|
-
const
|
|
5
|
+
const hasCursor = computed(() => {
|
|
6
6
|
return typeof window !== "undefined" && matchMedia("(hover: hover)").matches;
|
|
7
7
|
});
|
|
8
8
|
const canSnap = computed(() => {
|
|
@@ -10,7 +10,7 @@ export function useDrawerGuards(args) {
|
|
|
10
10
|
});
|
|
11
11
|
function canDrag(el) {
|
|
12
12
|
let element = el;
|
|
13
|
-
if (
|
|
13
|
+
if (hasCursor.value) {
|
|
14
14
|
return true;
|
|
15
15
|
}
|
|
16
16
|
if (canSnap.value) {
|
|
@@ -29,6 +29,9 @@ export function useDrawerGuards(args) {
|
|
|
29
29
|
if (toValue(absDirectionY) === "with") {
|
|
30
30
|
return false;
|
|
31
31
|
}
|
|
32
|
+
if (!toValue(absDirectionY)) {
|
|
33
|
+
return false;
|
|
34
|
+
}
|
|
32
35
|
}
|
|
33
36
|
break;
|
|
34
37
|
case "top":
|
|
@@ -40,6 +43,9 @@ export function useDrawerGuards(args) {
|
|
|
40
43
|
if (toValue(absDirectionY) === "with") {
|
|
41
44
|
return false;
|
|
42
45
|
}
|
|
46
|
+
if (!toValue(absDirectionY)) {
|
|
47
|
+
return false;
|
|
48
|
+
}
|
|
43
49
|
}
|
|
44
50
|
break;
|
|
45
51
|
case "right":
|
|
@@ -50,6 +56,9 @@ export function useDrawerGuards(args) {
|
|
|
50
56
|
if (toValue(absDirectionX) === "with") {
|
|
51
57
|
return false;
|
|
52
58
|
}
|
|
59
|
+
if (!toValue(absDirectionX)) {
|
|
60
|
+
return false;
|
|
61
|
+
}
|
|
53
62
|
}
|
|
54
63
|
break;
|
|
55
64
|
case "left":
|
|
@@ -61,6 +70,9 @@ export function useDrawerGuards(args) {
|
|
|
61
70
|
if (toValue(absDirectionX) === "with") {
|
|
62
71
|
return false;
|
|
63
72
|
}
|
|
73
|
+
if (!toValue(absDirectionX)) {
|
|
74
|
+
return false;
|
|
75
|
+
}
|
|
64
76
|
}
|
|
65
77
|
break;
|
|
66
78
|
}
|
|
@@ -70,7 +82,7 @@ export function useDrawerGuards(args) {
|
|
|
70
82
|
}
|
|
71
83
|
function canInterpolate(el) {
|
|
72
84
|
let element = el;
|
|
73
|
-
if (
|
|
85
|
+
if (hasCursor.value) {
|
|
74
86
|
return true;
|
|
75
87
|
}
|
|
76
88
|
while (element) {
|
|
@@ -96,7 +108,7 @@ export function useDrawerGuards(args) {
|
|
|
96
108
|
}
|
|
97
109
|
function lockScroll(el) {
|
|
98
110
|
let element = el;
|
|
99
|
-
if (
|
|
111
|
+
if (hasCursor.value && !canSnap.value) {
|
|
100
112
|
return void 0;
|
|
101
113
|
}
|
|
102
114
|
while (element) {
|
|
@@ -5,7 +5,7 @@ import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
|
|
|
5
5
|
export function useDrawerSnap(args) {
|
|
6
6
|
const {
|
|
7
7
|
id,
|
|
8
|
-
|
|
8
|
+
snap,
|
|
9
9
|
position,
|
|
10
10
|
wrapperRect,
|
|
11
11
|
overshoot,
|
|
@@ -16,7 +16,8 @@ export function useDrawerSnap(args) {
|
|
|
16
16
|
const mappedSnapPoints = computedWithControl(
|
|
17
17
|
() => toValue(wrapperRect),
|
|
18
18
|
() => {
|
|
19
|
-
const
|
|
19
|
+
const snapPoints = toValue(snap)?.points;
|
|
20
|
+
const extended = toValue(canClose) ? [...snapPoints, 0] : snapPoints;
|
|
20
21
|
const mapped = extended.map((snapPoint) => {
|
|
21
22
|
return mapSnapPoint(snapPoint);
|
|
22
23
|
});
|
|
@@ -28,10 +29,12 @@ export function useDrawerSnap(args) {
|
|
|
28
29
|
);
|
|
29
30
|
const snapPointsMap = computedWithControl(
|
|
30
31
|
() => {
|
|
31
|
-
|
|
32
|
+
const snapPoints = toValue(snap)?.points;
|
|
33
|
+
return { ...snapPoints };
|
|
32
34
|
},
|
|
33
35
|
() => {
|
|
34
|
-
const
|
|
36
|
+
const snapPoints = toValue(snap)?.points;
|
|
37
|
+
const extended = toValue(canClose) ? [...snapPoints, 0] : snapPoints;
|
|
35
38
|
const mapped = extended.reduce((acc, current) => {
|
|
36
39
|
const key = mapSnapPoint(current);
|
|
37
40
|
if (key || key === 0) {
|
|
@@ -145,12 +148,12 @@ export function useDrawerSnap(args) {
|
|
|
145
148
|
}
|
|
146
149
|
}
|
|
147
150
|
async function snapTo(args2) {
|
|
148
|
-
const { snapPoint, interpolate: interpolate2 } = args2;
|
|
151
|
+
const { snapPoint, interpolate: interpolate2, duration = 200 } = args2;
|
|
149
152
|
await nextTick();
|
|
150
153
|
switch (position) {
|
|
151
154
|
case "top":
|
|
152
155
|
case "bottom":
|
|
153
|
-
const mappedSnapPointY = mapSnapPoint(
|
|
156
|
+
const mappedSnapPointY = mapSnapPoint(snapPoint);
|
|
154
157
|
if (!mappedSnapPointY && mappedSnapPointY !== 0)
|
|
155
158
|
return;
|
|
156
159
|
const closestY = await findClosestSnapPoint({
|
|
@@ -158,7 +161,7 @@ export function useDrawerSnap(args) {
|
|
|
158
161
|
draggedY: mappedSnapPointY
|
|
159
162
|
}) || 0;
|
|
160
163
|
if (interpolate2) {
|
|
161
|
-
await interpolateDragged(closestY);
|
|
164
|
+
await interpolateDragged({ to: closestY, duration });
|
|
162
165
|
} else {
|
|
163
166
|
draggedY.value = closestY;
|
|
164
167
|
}
|
|
@@ -175,7 +178,7 @@ export function useDrawerSnap(args) {
|
|
|
175
178
|
draggedY
|
|
176
179
|
}) || 0;
|
|
177
180
|
if (interpolate2) {
|
|
178
|
-
await interpolateDragged(closestX);
|
|
181
|
+
await interpolateDragged({ to: closestX, duration });
|
|
179
182
|
} else {
|
|
180
183
|
draggedX.value = closestX;
|
|
181
184
|
snappedX.value = closestX;
|
|
@@ -185,19 +188,20 @@ export function useDrawerSnap(args) {
|
|
|
185
188
|
break;
|
|
186
189
|
}
|
|
187
190
|
}
|
|
188
|
-
async function interpolateDragged(
|
|
189
|
-
const
|
|
191
|
+
async function interpolateDragged(args2) {
|
|
192
|
+
const { to, duration = 200 } = args2;
|
|
193
|
+
const snapPoint = snapPointsMap.value[to];
|
|
190
194
|
useDrawerEmitter().emit("beforeSnap", { id: toValue(id), snapPoint });
|
|
191
195
|
switch (position) {
|
|
192
196
|
case "bottom":
|
|
193
197
|
case "top":
|
|
194
198
|
interpolate({
|
|
195
199
|
from: draggedY.value,
|
|
196
|
-
to
|
|
197
|
-
duration
|
|
200
|
+
to,
|
|
201
|
+
duration,
|
|
198
202
|
callback: (value) => {
|
|
199
203
|
draggedY.value = value;
|
|
200
|
-
if (draggedY.value ===
|
|
204
|
+
if (draggedY.value === to) {
|
|
201
205
|
useDrawerEmitter().emit("afterSnap", {
|
|
202
206
|
id: toValue(id),
|
|
203
207
|
snapPoint
|
|
@@ -210,11 +214,11 @@ export function useDrawerSnap(args) {
|
|
|
210
214
|
case "left":
|
|
211
215
|
interpolate({
|
|
212
216
|
from: draggedX.value,
|
|
213
|
-
to
|
|
214
|
-
duration
|
|
217
|
+
to,
|
|
218
|
+
duration,
|
|
215
219
|
callback: (value) => {
|
|
216
220
|
draggedX.value = value;
|
|
217
|
-
if (draggedX.value ===
|
|
221
|
+
if (draggedX.value === to) {
|
|
218
222
|
useDrawerEmitter().emit("afterSnap", {
|
|
219
223
|
id: toValue(id),
|
|
220
224
|
snapPoint
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type MaybeRef } from 'vue';
|
|
2
|
+
import { type MaybeElementRef } from '@vueuse/core';
|
|
2
3
|
import type { DrawerOptions, SnapPoint } from '../types/index.js';
|
|
3
|
-
import type { MaybeElementRef } from '@vueuse/core';
|
|
4
4
|
export type useDrawerApiOptions = Pick<DrawerOptions, 'scrollLock'> & {
|
|
5
5
|
focusTarget: MaybeElementRef;
|
|
6
6
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { uuid } from "@maas/vue-equipment/utils";
|
|
2
1
|
import { ref, computed, toValue } from "vue";
|
|
3
2
|
import { defu } from "defu";
|
|
4
3
|
import { useScrollLock } from "@vueuse/core";
|
|
5
4
|
import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
|
|
5
|
+
import { uuid, matchClass } from "@maas/vue-equipment/utils";
|
|
6
6
|
import { useDrawerStore } from "./private/useDrawerStore.mjs";
|
|
7
7
|
import { useDrawerEmitter } from "./useDrawerEmitter.mjs";
|
|
8
8
|
const defaultOptions = {
|
|
@@ -45,13 +45,14 @@ export function useDrawerApi(id, options) {
|
|
|
45
45
|
function addScrollLockPadding() {
|
|
46
46
|
if (typeof window === "undefined")
|
|
47
47
|
return;
|
|
48
|
+
const exclude = new RegExp(/magic-drawer(__backdrop)?/);
|
|
48
49
|
const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
|
|
49
50
|
document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
|
|
50
51
|
document.body.style.paddingRight = "var(--scrollbar-width)";
|
|
51
52
|
positionFixedElements.value = [
|
|
52
53
|
...document.body.getElementsByTagName("*")
|
|
53
54
|
].filter(
|
|
54
|
-
(x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed"
|
|
55
|
+
(x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
|
|
55
56
|
);
|
|
56
57
|
positionFixedElements.value.forEach(
|
|
57
58
|
(elem) => elem.style.paddingRight = "var(--scrollbar-width)"
|
|
@@ -23,8 +23,11 @@ export type DrawerOptions = {
|
|
|
23
23
|
open: boolean;
|
|
24
24
|
animate: boolean;
|
|
25
25
|
};
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
snap?: {
|
|
27
|
+
points: SnapPoint[];
|
|
28
|
+
duration?: number;
|
|
29
|
+
initial?: SnapPoint;
|
|
30
|
+
};
|
|
28
31
|
canClose?: boolean;
|
|
29
32
|
};
|
|
30
33
|
export type DrawerEvents = {
|
|
@@ -14,18 +14,18 @@ export function useModalCallback(args) {
|
|
|
14
14
|
} = args;
|
|
15
15
|
function onBeforeEnter(_el) {
|
|
16
16
|
useModalEmitter().emit("beforeEnter", toValue(id));
|
|
17
|
-
}
|
|
18
|
-
function onEnter(_el) {
|
|
19
|
-
useModalEmitter().emit("enter", toValue(id));
|
|
20
|
-
}
|
|
21
|
-
async function onAfterEnter(_el) {
|
|
22
|
-
useModalEmitter().emit("afterEnter", toValue(id));
|
|
23
17
|
if (mappedOptions.scrollLock) {
|
|
24
18
|
if (mappedOptions.scrollLockPadding) {
|
|
25
19
|
addScrollLockPadding();
|
|
26
20
|
}
|
|
27
21
|
lockScroll();
|
|
28
22
|
}
|
|
23
|
+
}
|
|
24
|
+
function onEnter(_el) {
|
|
25
|
+
useModalEmitter().emit("enter", toValue(id));
|
|
26
|
+
}
|
|
27
|
+
async function onAfterEnter(_el) {
|
|
28
|
+
useModalEmitter().emit("afterEnter", toValue(id));
|
|
29
29
|
if (mappedOptions.focusTrap) {
|
|
30
30
|
await nextTick();
|
|
31
31
|
trapFocus();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type MaybeRef } from 'vue';
|
|
2
|
+
import { type MaybeElementRef } from '@vueuse/core';
|
|
2
3
|
import type { ModalOptions } from '../types/index.js';
|
|
3
|
-
import type { MaybeElementRef } from '@vueuse/core';
|
|
4
4
|
export type useModalApiOptions = Pick<ModalOptions, 'scrollLock'> & {
|
|
5
5
|
focusTarget: MaybeElementRef;
|
|
6
6
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { uuid } from "@maas/vue-equipment/utils";
|
|
2
1
|
import { ref, computed, toValue } from "vue";
|
|
3
2
|
import { defu } from "defu";
|
|
4
3
|
import { useScrollLock } from "@vueuse/core";
|
|
5
4
|
import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
|
|
5
|
+
import { uuid, matchClass } from "@maas/vue-equipment/utils";
|
|
6
6
|
import { useModalStore } from "./private/useModalStore.mjs";
|
|
7
7
|
const defaultOptions = {
|
|
8
8
|
focusTarget: void 0,
|
|
@@ -41,13 +41,14 @@ export function useModalApi(id, options) {
|
|
|
41
41
|
function addScrollLockPadding() {
|
|
42
42
|
if (typeof window === "undefined")
|
|
43
43
|
return;
|
|
44
|
+
const exclude = new RegExp(/magic-modal(__backdrop)?/);
|
|
44
45
|
const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
|
|
45
46
|
document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
|
|
46
47
|
document.body.style.paddingRight = "var(--scrollbar-width)";
|
|
47
48
|
positionFixedElements.value = [
|
|
48
49
|
...document.body.getElementsByTagName("*")
|
|
49
50
|
].filter(
|
|
50
|
-
(x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed"
|
|
51
|
+
(x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
|
|
51
52
|
);
|
|
52
53
|
positionFixedElements.value.forEach(
|
|
53
54
|
(elem) => elem.style.paddingRight = "var(--scrollbar-width)"
|
package/dist/utils/index.d.mts
CHANGED
|
@@ -14,6 +14,8 @@ declare function isIOS(): boolean;
|
|
|
14
14
|
|
|
15
15
|
declare function mapValue(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number;
|
|
16
16
|
|
|
17
|
+
declare function matchClass(el: Element, regex: RegExp): boolean;
|
|
18
|
+
|
|
17
19
|
declare function uuid(): string;
|
|
18
20
|
|
|
19
21
|
declare function uniq<T extends any[]>(a: T): any[];
|
|
@@ -39,4 +41,4 @@ type RequireAllNested<T> = {
|
|
|
39
41
|
[P in keyof T]-?: RequireAllNested<T[P]>;
|
|
40
42
|
};
|
|
41
43
|
|
|
42
|
-
export { type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, clampValue, interpolate, isIOS, mapValue, slugify, uniq, uuid };
|
|
44
|
+
export { type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, clampValue, interpolate, isIOS, mapValue, matchClass, slugify, uniq, uuid };
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -14,6 +14,8 @@ declare function isIOS(): boolean;
|
|
|
14
14
|
|
|
15
15
|
declare function mapValue(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number;
|
|
16
16
|
|
|
17
|
+
declare function matchClass(el: Element, regex: RegExp): boolean;
|
|
18
|
+
|
|
17
19
|
declare function uuid(): string;
|
|
18
20
|
|
|
19
21
|
declare function uniq<T extends any[]>(a: T): any[];
|
|
@@ -39,4 +41,4 @@ type RequireAllNested<T> = {
|
|
|
39
41
|
[P in keyof T]-?: RequireAllNested<T[P]>;
|
|
40
42
|
};
|
|
41
43
|
|
|
42
|
-
export { type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, clampValue, interpolate, isIOS, mapValue, slugify, uniq, uuid };
|
|
44
|
+
export { type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, clampValue, interpolate, isIOS, mapValue, matchClass, slugify, uniq, uuid };
|
package/dist/utils/index.js
CHANGED
|
@@ -24,6 +24,7 @@ __export(utils_exports, {
|
|
|
24
24
|
interpolate: () => interpolate,
|
|
25
25
|
isIOS: () => isIOS,
|
|
26
26
|
mapValue: () => mapValue,
|
|
27
|
+
matchClass: () => matchClass,
|
|
27
28
|
slugify: () => slugify,
|
|
28
29
|
uniq: () => uniq,
|
|
29
30
|
uuid: () => uuid
|
|
@@ -65,6 +66,11 @@ function mapValue(value, inMin, inMax, outMin, outMax) {
|
|
|
65
66
|
return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
|
|
66
67
|
}
|
|
67
68
|
|
|
69
|
+
// src/functions/matchClass.ts
|
|
70
|
+
function matchClass(el, regex) {
|
|
71
|
+
return Array.from(el.classList).some((className) => regex.test(className));
|
|
72
|
+
}
|
|
73
|
+
|
|
68
74
|
// src/functions/uuid.ts
|
|
69
75
|
function uuid() {
|
|
70
76
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".split("").reduce(
|
|
@@ -120,6 +126,7 @@ function slugify(string, options) {
|
|
|
120
126
|
interpolate,
|
|
121
127
|
isIOS,
|
|
122
128
|
mapValue,
|
|
129
|
+
matchClass,
|
|
123
130
|
slugify,
|
|
124
131
|
uniq,
|
|
125
132
|
uuid
|
package/dist/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../packages/utils/index.ts","../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export * from './src/functions/clampValue'\nexport * from './src/functions/interpolate'\nexport * from './src/functions/isIOS'\nexport * from './src/functions/mapValue'\nexport * from './src/functions/uuid'\nexport * from './src/functions/uniq'\nexport * from './src/functions/slugify'\n\nexport type * from './src/types'\n","export function clampValue(value: number, min: number, max: number) {\n return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n from: number\n to: number\n duration: number\n interval?: number\n easing?: (t: number) => number\n callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n let startTime: number\n\n function animate(timestamp: number) {\n if (!startTime) startTime = timestamp\n\n const progress = Math.min(1, (timestamp - startTime) / duration)\n const easedProgress = easing(progress)\n const value = from + (to - from) * easedProgress\n\n callback(value)\n\n if (progress < 1) {\n requestAnimationFrame(animate)\n }\n }\n\n requestAnimationFrame(animate)\n}\n","export function isIOS() {\n if (typeof window === 'undefined') return false\n return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n value: number,\n inMin: number,\n inMax: number,\n outMin: number,\n outMax: number,\n) {\n return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n .split('')\n .reduce(\n (c, i) =>\n c +\n (i === 'x'\n ? Math.floor(Math.random() * 0xf).toString(16)\n : i === 'y'\n ? Math.floor(Math.random() * 4 + 8).toString(16)\n : i),\n '',\n )\n}\n","export function uniq<T extends any[]>(a: T) {\n return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n separator?: string\n trim?: boolean\n remove?: RegExp\n strict?: boolean\n lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n separator: '-',\n trim: true,\n remove: undefined,\n strict: true,\n lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n if (typeof string !== 'string') {\n throw new Error('slugify: string argument expected')\n }\n\n // Merge provided options with default options\n const _options = { ...defaultOptions, ...options }\n\n const charMap: { [key: string]: string } = {}\n\n let slug = string\n .normalize()\n .split('')\n .reduce(function (result, ch) {\n let appendChar = charMap[ch]\n if (appendChar === undefined) appendChar = ch\n if (appendChar === _options?.separator) appendChar = ' '\n return (\n result +\n appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n )\n }, '')\n\n if (_options.strict) {\n slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n }\n\n if (_options.trim) {\n slug = slug.trim()\n }\n\n if (_options.separator) {\n slug = slug.replace(/ +/g, _options.separator)\n }\n\n if (_options.lowercase) {\n slug = slug.toLocaleLowerCase()\n }\n\n return slug\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM,EAAE,MAAM,IAAI,UAAU,UAAU,SAAS,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI;AAEtE,MAAI;AAEJ,WAAS,QAAQ,WAAmB;AAClC,QAAI,CAAC;AAAW,kBAAY;AAE5B,UAAM,WAAW,KAAK,IAAI,IAAI,YAAY,aAAa,QAAQ;AAC/D,UAAM,gBAAgB,OAAO,QAAQ;AACrC,UAAM,QAAQ,QAAQ,KAAK,QAAQ;AAEnC,aAAS,KAAK;AAEd,QAAI,WAAW,GAAG;AAChB,4BAAsB,OAAO;AAAA,IAC/B;AAAA,EACF;AAEA,wBAAsB,OAAO;AAC/B;;;AC7BO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;
|
|
1
|
+
{"version":3,"sources":["../../packages/utils/index.ts","../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/matchClass.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export * from './src/functions/clampValue'\nexport * from './src/functions/interpolate'\nexport * from './src/functions/isIOS'\nexport * from './src/functions/mapValue'\nexport * from './src/functions/matchClass'\nexport * from './src/functions/uuid'\nexport * from './src/functions/uniq'\nexport * from './src/functions/slugify'\n\nexport type * from './src/types'\n","export function clampValue(value: number, min: number, max: number) {\n return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n from: number\n to: number\n duration: number\n interval?: number\n easing?: (t: number) => number\n callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n let startTime: number\n\n function animate(timestamp: number) {\n if (!startTime) startTime = timestamp\n\n const progress = Math.min(1, (timestamp - startTime) / duration)\n const easedProgress = easing(progress)\n const value = from + (to - from) * easedProgress\n\n callback(value)\n\n if (progress < 1) {\n requestAnimationFrame(animate)\n }\n }\n\n requestAnimationFrame(animate)\n}\n","export function isIOS() {\n if (typeof window === 'undefined') return false\n return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n value: number,\n inMin: number,\n inMax: number,\n outMin: number,\n outMax: number,\n) {\n return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","export function matchClass(el: Element, regex: RegExp) {\n return Array.from(el.classList).some((className) => regex.test(className))\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n .split('')\n .reduce(\n (c, i) =>\n c +\n (i === 'x'\n ? Math.floor(Math.random() * 0xf).toString(16)\n : i === 'y'\n ? Math.floor(Math.random() * 4 + 8).toString(16)\n : i),\n '',\n )\n}\n","export function uniq<T extends any[]>(a: T) {\n return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n separator?: string\n trim?: boolean\n remove?: RegExp\n strict?: boolean\n lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n separator: '-',\n trim: true,\n remove: undefined,\n strict: true,\n lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n if (typeof string !== 'string') {\n throw new Error('slugify: string argument expected')\n }\n\n // Merge provided options with default options\n const _options = { ...defaultOptions, ...options }\n\n const charMap: { [key: string]: string } = {}\n\n let slug = string\n .normalize()\n .split('')\n .reduce(function (result, ch) {\n let appendChar = charMap[ch]\n if (appendChar === undefined) appendChar = ch\n if (appendChar === _options?.separator) appendChar = ' '\n return (\n result +\n appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n )\n }, '')\n\n if (_options.strict) {\n slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n }\n\n if (_options.trim) {\n slug = slug.trim()\n }\n\n if (_options.separator) {\n slug = slug.replace(/ +/g, _options.separator)\n }\n\n if (_options.lowercase) {\n slug = slug.toLocaleLowerCase()\n }\n\n return slug\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM,EAAE,MAAM,IAAI,UAAU,UAAU,SAAS,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI;AAEtE,MAAI;AAEJ,WAAS,QAAQ,WAAmB;AAClC,QAAI,CAAC;AAAW,kBAAY;AAE5B,UAAM,WAAW,KAAK,IAAI,IAAI,YAAY,aAAa,QAAQ;AAC/D,UAAM,gBAAgB,OAAO,QAAQ;AACrC,UAAM,QAAQ,QAAQ,KAAK,QAAQ;AAEnC,aAAS,KAAK;AAEd,QAAI,WAAW,GAAG;AAChB,4BAAsB,OAAO;AAAA,IAC/B;AAAA,EACF;AAEA,wBAAsB,OAAO;AAC/B;;;AC7BO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACRO,SAAS,WAAW,IAAa,OAAe;AACrD,SAAO,MAAM,KAAK,GAAG,SAAS,EAAE,KAAK,CAAC,cAAc,MAAM,KAAK,SAAS,CAAC;AAC3E;;;ACEO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}
|
package/dist/utils/index.mjs
CHANGED
|
@@ -33,6 +33,11 @@ function mapValue(value, inMin, inMax, outMin, outMax) {
|
|
|
33
33
|
return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
// src/functions/matchClass.ts
|
|
37
|
+
function matchClass(el, regex) {
|
|
38
|
+
return Array.from(el.classList).some((className) => regex.test(className));
|
|
39
|
+
}
|
|
40
|
+
|
|
36
41
|
// src/functions/uuid.ts
|
|
37
42
|
function uuid() {
|
|
38
43
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".split("").reduce(
|
|
@@ -87,6 +92,7 @@ export {
|
|
|
87
92
|
interpolate,
|
|
88
93
|
isIOS,
|
|
89
94
|
mapValue,
|
|
95
|
+
matchClass,
|
|
90
96
|
slugify,
|
|
91
97
|
uniq,
|
|
92
98
|
uuid
|
package/dist/utils/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export function clampValue(value: number, min: number, max: number) {\n return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n from: number\n to: number\n duration: number\n interval?: number\n easing?: (t: number) => number\n callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n let startTime: number\n\n function animate(timestamp: number) {\n if (!startTime) startTime = timestamp\n\n const progress = Math.min(1, (timestamp - startTime) / duration)\n const easedProgress = easing(progress)\n const value = from + (to - from) * easedProgress\n\n callback(value)\n\n if (progress < 1) {\n requestAnimationFrame(animate)\n }\n }\n\n requestAnimationFrame(animate)\n}\n","export function isIOS() {\n if (typeof window === 'undefined') return false\n return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n value: number,\n inMin: number,\n inMax: number,\n outMin: number,\n outMax: number,\n) {\n return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n .split('')\n .reduce(\n (c, i) =>\n c +\n (i === 'x'\n ? Math.floor(Math.random() * 0xf).toString(16)\n : i === 'y'\n ? Math.floor(Math.random() * 4 + 8).toString(16)\n : i),\n '',\n )\n}\n","export function uniq<T extends any[]>(a: T) {\n return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n separator?: string\n trim?: boolean\n remove?: RegExp\n strict?: boolean\n lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n separator: '-',\n trim: true,\n remove: undefined,\n strict: true,\n lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n if (typeof string !== 'string') {\n throw new Error('slugify: string argument expected')\n }\n\n // Merge provided options with default options\n const _options = { ...defaultOptions, ...options }\n\n const charMap: { [key: string]: string } = {}\n\n let slug = string\n .normalize()\n .split('')\n .reduce(function (result, ch) {\n let appendChar = charMap[ch]\n if (appendChar === undefined) appendChar = ch\n if (appendChar === _options?.separator) appendChar = ' '\n return (\n result +\n appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n )\n }, '')\n\n if (_options.strict) {\n slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n }\n\n if (_options.trim) {\n slug = slug.trim()\n }\n\n if (_options.separator) {\n slug = slug.replace(/ +/g, _options.separator)\n }\n\n if (_options.lowercase) {\n slug = slug.toLocaleLowerCase()\n }\n\n return slug\n}\n"],"mappings":";AAAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM,EAAE,MAAM,IAAI,UAAU,UAAU,SAAS,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI;AAEtE,MAAI;AAEJ,WAAS,QAAQ,WAAmB;AAClC,QAAI,CAAC;AAAW,kBAAY;AAE5B,UAAM,WAAW,KAAK,IAAI,IAAI,YAAY,aAAa,QAAQ;AAC/D,UAAM,gBAAgB,OAAO,QAAQ;AACrC,UAAM,QAAQ,QAAQ,KAAK,QAAQ;AAEnC,aAAS,KAAK;AAEd,QAAI,WAAW,GAAG;AAChB,4BAAsB,OAAO;AAAA,IAC/B;AAAA,EACF;AAEA,wBAAsB,OAAO;AAC/B;;;AC7BO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;
|
|
1
|
+
{"version":3,"sources":["../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/matchClass.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export function clampValue(value: number, min: number, max: number) {\n return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n from: number\n to: number\n duration: number\n interval?: number\n easing?: (t: number) => number\n callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n let startTime: number\n\n function animate(timestamp: number) {\n if (!startTime) startTime = timestamp\n\n const progress = Math.min(1, (timestamp - startTime) / duration)\n const easedProgress = easing(progress)\n const value = from + (to - from) * easedProgress\n\n callback(value)\n\n if (progress < 1) {\n requestAnimationFrame(animate)\n }\n }\n\n requestAnimationFrame(animate)\n}\n","export function isIOS() {\n if (typeof window === 'undefined') return false\n return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n value: number,\n inMin: number,\n inMax: number,\n outMin: number,\n outMax: number,\n) {\n return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","export function matchClass(el: Element, regex: RegExp) {\n return Array.from(el.classList).some((className) => regex.test(className))\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n .split('')\n .reduce(\n (c, i) =>\n c +\n (i === 'x'\n ? Math.floor(Math.random() * 0xf).toString(16)\n : i === 'y'\n ? Math.floor(Math.random() * 4 + 8).toString(16)\n : i),\n '',\n )\n}\n","export function uniq<T extends any[]>(a: T) {\n return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n separator?: string\n trim?: boolean\n remove?: RegExp\n strict?: boolean\n lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n separator: '-',\n trim: true,\n remove: undefined,\n strict: true,\n lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n if (typeof string !== 'string') {\n throw new Error('slugify: string argument expected')\n }\n\n // Merge provided options with default options\n const _options = { ...defaultOptions, ...options }\n\n const charMap: { [key: string]: string } = {}\n\n let slug = string\n .normalize()\n .split('')\n .reduce(function (result, ch) {\n let appendChar = charMap[ch]\n if (appendChar === undefined) appendChar = ch\n if (appendChar === _options?.separator) appendChar = ' '\n return (\n result +\n appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n )\n }, '')\n\n if (_options.strict) {\n slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n }\n\n if (_options.trim) {\n slug = slug.trim()\n }\n\n if (_options.separator) {\n slug = slug.replace(/ +/g, _options.separator)\n }\n\n if (_options.lowercase) {\n slug = slug.toLocaleLowerCase()\n }\n\n return slug\n}\n"],"mappings":";AAAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM,EAAE,MAAM,IAAI,UAAU,UAAU,SAAS,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI;AAEtE,MAAI;AAEJ,WAAS,QAAQ,WAAmB;AAClC,QAAI,CAAC;AAAW,kBAAY;AAE5B,UAAM,WAAW,KAAK,IAAI,IAAI,YAAY,aAAa,QAAQ;AAC/D,UAAM,gBAAgB,OAAO,QAAQ;AACrC,UAAM,QAAQ,QAAQ,KAAK,QAAQ;AAEnC,aAAS,KAAK;AAEd,QAAI,WAAW,GAAG;AAChB,4BAAsB,OAAO;AAAA,IAC/B;AAAA,EACF;AAEA,wBAAsB,OAAO;AAC/B;;;AC7BO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACRO,SAAS,WAAW,IAAa,OAAe;AACrD,SAAO,MAAM,KAAK,GAAG,SAAS,EAAE,KAAK,CAAC,cAAc,MAAM,KAAK,SAAS,CAAC;AAC3E;;;ACEO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}
|
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.
|
|
4
|
+
"version": "0.17.1",
|
|
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",
|