@maas/vue-equipment 0.24.1 → 0.24.3
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/MagicCommand/src/composables/useCommandApi.d.ts +1 -12
- package/dist/plugins/MagicCommand/src/composables/useCommandApi.mjs +3 -59
- package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue +18 -11
- package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue.d.ts +2 -2
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.d.ts +1 -1
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.mjs +3 -5
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerGuards.d.ts +1 -1
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerProgress.d.ts +16 -0
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerProgress.mjs +150 -0
- package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.d.ts +5 -1
- package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.mjs +24 -5
- package/dist/plugins/MagicDrawer/src/types/index.d.ts +7 -1
- package/dist/plugins/MagicDrawer/src/utils/defaultOptions.d.ts +6 -3
- package/dist/plugins/MagicDrawer/src/utils/defaultOptions.mjs +4 -1
- package/dist/plugins/MagicModal/src/components/MagicModal.vue +11 -7
- package/dist/plugins/MagicModal/src/composables/useModalApi.d.ts +1 -1
- package/dist/plugins/MagicModal/src/composables/useModalApi.mjs +2 -1
- package/dist/plugins/MagicModal/src/types/index.d.ts +2 -1
- package/dist/plugins/MagicModal/src/utils/defaultOptions.mjs +4 -1
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/nuxt/module.json
CHANGED
|
@@ -1,19 +1,8 @@
|
|
|
1
1
|
import { type MaybeRef } from 'vue';
|
|
2
|
-
|
|
3
|
-
import { type CommandOptions } from '../types/index.js';
|
|
4
|
-
export type UseCommandApiOptions = Pick<CommandOptions, 'scrollLock'> & {
|
|
5
|
-
focusTarget: MaybeElementRef;
|
|
6
|
-
};
|
|
7
|
-
export declare function useCommandApi(id: MaybeRef<string>, options?: UseCommandApiOptions): {
|
|
2
|
+
export declare function useCommandApi(id: MaybeRef<string>): {
|
|
8
3
|
isActive: import("vue").ComputedRef<boolean>;
|
|
9
4
|
open: () => void;
|
|
10
5
|
close: () => void;
|
|
11
|
-
trapFocus: () => void;
|
|
12
|
-
releaseFocus: () => void;
|
|
13
|
-
lockScroll: () => void;
|
|
14
|
-
unlockScroll: () => void;
|
|
15
|
-
addScrollLockPadding: () => void;
|
|
16
|
-
removeScrollLockPadding: () => void;
|
|
17
6
|
selectItem: (id: string) => void;
|
|
18
7
|
selectLastItem: () => void;
|
|
19
8
|
selectView: (id: string) => void;
|
|
@@ -1,21 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { useScrollLock } from "@vueuse/core";
|
|
4
|
-
import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
|
|
5
|
-
import { uuid, matchClass } from "@maas/vue-equipment/utils";
|
|
1
|
+
import { computed, toValue } from "vue";
|
|
2
|
+
import { uuid } from "@maas/vue-equipment/utils";
|
|
6
3
|
import { useCommandStore } from "./private/useCommandStore.mjs";
|
|
7
4
|
import { useCommandItem } from "./private/useCommandItem.mjs";
|
|
8
5
|
import { useCommandView } from "./private/useCommandView.mjs";
|
|
9
|
-
|
|
10
|
-
focusTarget: void 0,
|
|
11
|
-
scrollLock: true
|
|
12
|
-
};
|
|
13
|
-
export function useCommandApi(id, options) {
|
|
14
|
-
const positionFixedElements = ref([]);
|
|
6
|
+
export function useCommandApi(id) {
|
|
15
7
|
const mappedId = computed(() => toValue(id) || uuid());
|
|
16
|
-
const mappedOptions = defu(options, defaultOptions);
|
|
17
|
-
const focusTrap = mappedOptions.focusTarget ? useFocusTrap(mappedOptions.focusTarget) : void 0;
|
|
18
|
-
const scrollLock = mappedOptions.scrollLock && typeof window !== "undefined" ? useScrollLock(document.body) : ref(false);
|
|
19
8
|
const isActive = computed(
|
|
20
9
|
() => commandStore.value.map((item) => item.id).includes(mappedId.value)
|
|
21
10
|
);
|
|
@@ -26,57 +15,12 @@ export function useCommandApi(id, options) {
|
|
|
26
15
|
function close() {
|
|
27
16
|
removeInstance(mappedId.value);
|
|
28
17
|
}
|
|
29
|
-
function trapFocus() {
|
|
30
|
-
if (focusTrap) {
|
|
31
|
-
focusTrap.activate();
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
function releaseFocus() {
|
|
35
|
-
if (focusTrap) {
|
|
36
|
-
focusTrap.deactivate();
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
function lockScroll() {
|
|
40
|
-
scrollLock.value = true;
|
|
41
|
-
}
|
|
42
|
-
function unlockScroll() {
|
|
43
|
-
scrollLock.value = false;
|
|
44
|
-
}
|
|
45
|
-
function addScrollLockPadding() {
|
|
46
|
-
if (typeof window === "undefined")
|
|
47
|
-
return;
|
|
48
|
-
const exclude = new RegExp(/magic-command(__backdrop)?/);
|
|
49
|
-
const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
|
|
50
|
-
document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
|
|
51
|
-
document.body.style.paddingRight = "var(--scrollbar-width)";
|
|
52
|
-
positionFixedElements.value = [
|
|
53
|
-
...document.body.getElementsByTagName("*")
|
|
54
|
-
].filter(
|
|
55
|
-
(x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
|
|
56
|
-
);
|
|
57
|
-
positionFixedElements.value.forEach(
|
|
58
|
-
(elem) => elem.style.paddingRight = "var(--scrollbar-width)"
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
function removeScrollLockPadding() {
|
|
62
|
-
document.body.style.paddingRight = "";
|
|
63
|
-
document.body.style.removeProperty("--scrollbar-width");
|
|
64
|
-
positionFixedElements.value.forEach(
|
|
65
|
-
(elem) => elem.style.paddingRight = ""
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
18
|
const { selectItem, selectLastItem } = useCommandItem(mappedId);
|
|
69
19
|
const { selectView, selectLastView } = useCommandView();
|
|
70
20
|
return {
|
|
71
21
|
isActive,
|
|
72
22
|
open,
|
|
73
23
|
close,
|
|
74
|
-
trapFocus,
|
|
75
|
-
releaseFocus,
|
|
76
|
-
lockScroll,
|
|
77
|
-
unlockScroll,
|
|
78
|
-
addScrollLockPadding,
|
|
79
|
-
removeScrollLockPadding,
|
|
80
24
|
selectItem,
|
|
81
25
|
selectLastItem,
|
|
82
26
|
selectView,
|
|
@@ -5,8 +5,7 @@
|
|
|
5
5
|
:to="mappedOptions.teleport?.target"
|
|
6
6
|
:disabled="mappedOptions.teleport?.disabled"
|
|
7
7
|
>
|
|
8
|
-
<
|
|
9
|
-
:is="mappedOptions.tag"
|
|
8
|
+
<div
|
|
10
9
|
ref="drawerRef"
|
|
11
10
|
class="magic-drawer"
|
|
12
11
|
:id="toValue(id)"
|
|
@@ -41,7 +40,8 @@
|
|
|
41
40
|
@after-enter="onAfterEnter"
|
|
42
41
|
>
|
|
43
42
|
<div v-show="innerActive" class="magic-drawer__content">
|
|
44
|
-
<
|
|
43
|
+
<component
|
|
44
|
+
:is="mappedOptions.tag"
|
|
45
45
|
ref="elRef"
|
|
46
46
|
class="magic-drawer__drag"
|
|
47
47
|
:style="style"
|
|
@@ -56,11 +56,11 @@
|
|
|
56
56
|
/>
|
|
57
57
|
<slot v-else />
|
|
58
58
|
<div v-if="hasDragged" class="magic-drawer__overlay" />
|
|
59
|
-
</
|
|
59
|
+
</component>
|
|
60
60
|
</div>
|
|
61
61
|
</transition>
|
|
62
62
|
</div>
|
|
63
|
-
</
|
|
63
|
+
</div>
|
|
64
64
|
</teleport>
|
|
65
65
|
</transition>
|
|
66
66
|
</template>
|
|
@@ -82,6 +82,7 @@ import { onKeyStroke, unrefElement } from '@vueuse/core'
|
|
|
82
82
|
import { defaultOptions } from './../utils/defaultOptions'
|
|
83
83
|
import { useDrawerApi } from './../composables/useDrawerApi'
|
|
84
84
|
import { useDrawerCallback } from '../composables/private/useDrawerCallback'
|
|
85
|
+
import { useDrawerProgress } from '../composables/private/useDrawerProgress'
|
|
85
86
|
import { useDrawerDrag } from '../composables/private/useDrawerDrag'
|
|
86
87
|
|
|
87
88
|
import type { DrawerOptions } from './../types/index'
|
|
@@ -117,16 +118,20 @@ const props = withDefaults(defineProps<MagicDrawerProps>(), {
|
|
|
117
118
|
options: () => defaultOptions,
|
|
118
119
|
})
|
|
119
120
|
|
|
120
|
-
const elRef = ref<HTMLDivElement | undefined>(undefined)
|
|
121
|
-
const drawerRef = ref<HTMLElement | undefined>(undefined)
|
|
122
|
-
const wrapperRef = ref<HTMLDivElement | undefined>(undefined)
|
|
123
|
-
const drawerApi = useDrawerApi(props.id, { focusTarget: drawerRef })
|
|
124
|
-
|
|
125
121
|
const mappedOptions: typeof defaultOptions = customDefu(
|
|
126
122
|
props.options,
|
|
127
123
|
defaultOptions
|
|
128
124
|
)
|
|
129
125
|
|
|
126
|
+
const elRef = ref<HTMLElement | undefined>(undefined)
|
|
127
|
+
const drawerRef = ref<HTMLDivElement | undefined>(undefined)
|
|
128
|
+
const wrapperRef = ref<HTMLDivElement | undefined>(undefined)
|
|
129
|
+
|
|
130
|
+
const drawerApi = useDrawerApi(props.id, {
|
|
131
|
+
focusTarget: drawerRef,
|
|
132
|
+
focusTrap: mappedOptions.focusTrap,
|
|
133
|
+
})
|
|
134
|
+
|
|
130
135
|
const overshoot = ref(0)
|
|
131
136
|
const { position, threshold, snap, canClose } = mappedOptions
|
|
132
137
|
|
|
@@ -180,6 +185,8 @@ const {
|
|
|
180
185
|
wasActive,
|
|
181
186
|
})
|
|
182
187
|
|
|
188
|
+
useDrawerProgress({ id: props.id, elRef, drawerRef, position, overshoot })
|
|
189
|
+
|
|
183
190
|
// Surpress animation on initial mount if the options call for it
|
|
184
191
|
// To achive this, the transition names are set to undefined
|
|
185
192
|
const surpressTransition = computed(() => {
|
|
@@ -291,5 +298,5 @@ onBeforeUnmount(() => {
|
|
|
291
298
|
</script>
|
|
292
299
|
|
|
293
300
|
<style>
|
|
294
|
-
: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-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-padding:0px}.magic-drawer{--magic-drawer-drag-overshoot-x:0px;--magic-drawer-drag-overshoot-y:0px;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{
|
|
301
|
+
: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-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-padding:0px}.magic-drawer{--magic-drawer-drag-overshoot-x:0px;--magic-drawer-drag-overshoot-y:0px;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.-bottom>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.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.-top>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.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.-right>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.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.-left>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer__wrapper{height:var(--magic-drawer-height);pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:var(--magic-drawer-width)}.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;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-drawer__drag>*{padding:var(--magic-drawer-padding)}.magic-drawer__overlay{inset:0;position:absolute;z-index:9999}.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}
|
|
295
302
|
</style>
|
|
@@ -18,9 +18,9 @@ interface MagicDrawerProps {
|
|
|
18
18
|
options?: DrawerOptions;
|
|
19
19
|
}
|
|
20
20
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicDrawerProps>, {
|
|
21
|
-
options: () =>
|
|
21
|
+
options: () => any;
|
|
22
22
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicDrawerProps>, {
|
|
23
|
-
options: () =>
|
|
23
|
+
options: () => any;
|
|
24
24
|
}>>>, {
|
|
25
25
|
options: DrawerOptions;
|
|
26
26
|
}, {}>, {
|
|
@@ -3,7 +3,7 @@ import { type DefaultOptions } from '../../utils/defaultOptions.js';
|
|
|
3
3
|
type UseDrawerDragArgs = {
|
|
4
4
|
id: MaybeRef<string>;
|
|
5
5
|
isActive: MaybeRef<boolean>;
|
|
6
|
-
elRef: Ref<
|
|
6
|
+
elRef: Ref<HTMLElement | undefined>;
|
|
7
7
|
wrapperRef: Ref<HTMLDivElement | undefined>;
|
|
8
8
|
position: MaybeRef<DefaultOptions['position']>;
|
|
9
9
|
threshold: MaybeRef<DefaultOptions['threshold']>;
|
|
@@ -401,11 +401,9 @@ export function useDrawerDrag(args) {
|
|
|
401
401
|
snapTo({ snapPoint, interpolate: false });
|
|
402
402
|
}
|
|
403
403
|
);
|
|
404
|
-
watch(snappedX, (
|
|
405
|
-
lastDraggedX.value =
|
|
406
|
-
|
|
407
|
-
watch(snappedY, (value) => {
|
|
408
|
-
lastDraggedY.value = value;
|
|
404
|
+
watch([snappedX, snappedY], ([x, y]) => {
|
|
405
|
+
lastDraggedX.value = x;
|
|
406
|
+
lastDraggedY.value = y;
|
|
409
407
|
});
|
|
410
408
|
useResizeObserver(elRef, async () => {
|
|
411
409
|
useThrottleFn(async () => {
|
|
@@ -2,7 +2,7 @@ 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: Ref<
|
|
5
|
+
elRef: Ref<HTMLElement | undefined>;
|
|
6
6
|
absDirectionX: MaybeRef<'with' | 'against' | undefined>;
|
|
7
7
|
absDirectionY: MaybeRef<'with' | 'against' | undefined>;
|
|
8
8
|
position: MaybeRef<DefaultOptions['position']>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type Ref, type MaybeRef } from 'vue';
|
|
2
|
+
import type { DefaultOptions } from '../../utils/defaultOptions.js';
|
|
3
|
+
interface UseDrawerProgressArgs {
|
|
4
|
+
id: MaybeRef<string>;
|
|
5
|
+
elRef: Ref<HTMLElement | undefined>;
|
|
6
|
+
drawerRef: Ref<HTMLDivElement | undefined>;
|
|
7
|
+
position: MaybeRef<DefaultOptions['position']>;
|
|
8
|
+
overshoot: MaybeRef<number>;
|
|
9
|
+
}
|
|
10
|
+
export declare function useDrawerProgress(args: UseDrawerProgressArgs): {
|
|
11
|
+
progress: Ref<{
|
|
12
|
+
x: number;
|
|
13
|
+
y: number;
|
|
14
|
+
}>;
|
|
15
|
+
};
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ref,
|
|
3
|
+
watch,
|
|
4
|
+
toValue,
|
|
5
|
+
computed,
|
|
6
|
+
onMounted,
|
|
7
|
+
onBeforeUnmount,
|
|
8
|
+
nextTick
|
|
9
|
+
} from "vue";
|
|
10
|
+
import { useDrawerEmitter } from "./../useDrawerEmitter.mjs";
|
|
11
|
+
import { useElementBounding, useRafFn } from "@vueuse/core";
|
|
12
|
+
import { clampValue, mapValue } from "@maas/vue-equipment/utils";
|
|
13
|
+
export function useDrawerProgress(args) {
|
|
14
|
+
const { id, drawerRef, elRef, position, overshoot } = args;
|
|
15
|
+
const drawerRect = useElementBounding(drawerRef);
|
|
16
|
+
const elRect = useElementBounding(elRef);
|
|
17
|
+
const maxX = computed(
|
|
18
|
+
() => drawerRect.width.value - elRect.width.value + toValue(overshoot)
|
|
19
|
+
);
|
|
20
|
+
const maxY = computed(
|
|
21
|
+
() => drawerRect.height.value - elRect.height.value + toValue(overshoot)
|
|
22
|
+
);
|
|
23
|
+
const progress = ref({ x: 0, y: 0 });
|
|
24
|
+
function rafCallback() {
|
|
25
|
+
drawerRect.update();
|
|
26
|
+
elRect.update();
|
|
27
|
+
calculateProgress();
|
|
28
|
+
}
|
|
29
|
+
const { pause: snapPause, resume: snapResume } = useRafFn(rafCallback, {
|
|
30
|
+
immediate: false
|
|
31
|
+
});
|
|
32
|
+
const { pause: dragPause, resume: dragResume } = useRafFn(rafCallback, {
|
|
33
|
+
immediate: false
|
|
34
|
+
});
|
|
35
|
+
const { pause, resume } = useRafFn(rafCallback, {
|
|
36
|
+
immediate: false
|
|
37
|
+
});
|
|
38
|
+
function calculateProgress() {
|
|
39
|
+
let rawX = 0;
|
|
40
|
+
let rawY = 0;
|
|
41
|
+
switch (position) {
|
|
42
|
+
case "bottom":
|
|
43
|
+
rawY = mapValue(
|
|
44
|
+
elRect.top.value,
|
|
45
|
+
drawerRect.height.value,
|
|
46
|
+
maxY.value,
|
|
47
|
+
0,
|
|
48
|
+
1
|
|
49
|
+
);
|
|
50
|
+
break;
|
|
51
|
+
case "top":
|
|
52
|
+
rawY = mapValue(
|
|
53
|
+
elRect.top.value * -1,
|
|
54
|
+
drawerRect.height.value,
|
|
55
|
+
maxX.value,
|
|
56
|
+
0,
|
|
57
|
+
1
|
|
58
|
+
);
|
|
59
|
+
break;
|
|
60
|
+
case "left":
|
|
61
|
+
rawX = mapValue(
|
|
62
|
+
elRect.left.value * -1,
|
|
63
|
+
drawerRect.width.value,
|
|
64
|
+
maxX.value,
|
|
65
|
+
0,
|
|
66
|
+
1
|
|
67
|
+
);
|
|
68
|
+
break;
|
|
69
|
+
case "right":
|
|
70
|
+
rawX = mapValue(
|
|
71
|
+
elRect.left.value,
|
|
72
|
+
drawerRect.width.value,
|
|
73
|
+
maxX.value,
|
|
74
|
+
0,
|
|
75
|
+
1
|
|
76
|
+
);
|
|
77
|
+
break;
|
|
78
|
+
}
|
|
79
|
+
const x = clampValue(rawX, 0, 1);
|
|
80
|
+
const y = clampValue(rawY, 0, 1);
|
|
81
|
+
progress.value = { x, y };
|
|
82
|
+
}
|
|
83
|
+
watch([() => progress.value.x, () => progress.value.y], ([x, y]) => {
|
|
84
|
+
useDrawerEmitter().emit("progress", {
|
|
85
|
+
id: toValue(id),
|
|
86
|
+
x,
|
|
87
|
+
y
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
function beforeCallback(payload) {
|
|
91
|
+
if (payload === toValue(id)) {
|
|
92
|
+
resume();
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
function beforeSnapCallback(payload) {
|
|
96
|
+
if (payload.id === toValue(id)) {
|
|
97
|
+
snapResume();
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
function beforeDragCallback(payload) {
|
|
101
|
+
if (payload.id === toValue(id)) {
|
|
102
|
+
dragResume();
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
async function afterCallback(payload) {
|
|
106
|
+
await nextTick();
|
|
107
|
+
if (payload === toValue(id)) {
|
|
108
|
+
pause();
|
|
109
|
+
await nextTick();
|
|
110
|
+
rafCallback();
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
async function afterSnapCallback(payload) {
|
|
114
|
+
await nextTick();
|
|
115
|
+
if (payload.id === toValue(id)) {
|
|
116
|
+
snapPause();
|
|
117
|
+
await nextTick();
|
|
118
|
+
rafCallback();
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
async function afterDragCallback(payload) {
|
|
122
|
+
await nextTick();
|
|
123
|
+
if (payload.id === toValue(id)) {
|
|
124
|
+
dragPause();
|
|
125
|
+
await nextTick();
|
|
126
|
+
rafCallback();
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
onMounted(() => {
|
|
130
|
+
useDrawerEmitter().on("beforeEnter", beforeCallback);
|
|
131
|
+
useDrawerEmitter().on("afterEnter", afterCallback);
|
|
132
|
+
useDrawerEmitter().on("beforeDrag", beforeDragCallback);
|
|
133
|
+
useDrawerEmitter().on("afterDrag", afterDragCallback);
|
|
134
|
+
useDrawerEmitter().on("beforeSnap", beforeSnapCallback);
|
|
135
|
+
useDrawerEmitter().on("afterSnap", afterSnapCallback);
|
|
136
|
+
useDrawerEmitter().on("beforeLeave", beforeCallback);
|
|
137
|
+
useDrawerEmitter().on("afterLeave", afterCallback);
|
|
138
|
+
});
|
|
139
|
+
onBeforeUnmount(() => {
|
|
140
|
+
useDrawerEmitter().off("beforeEnter", beforeCallback);
|
|
141
|
+
useDrawerEmitter().off("afterEnter", afterCallback);
|
|
142
|
+
useDrawerEmitter().off("beforeDrag", beforeDragCallback);
|
|
143
|
+
useDrawerEmitter().off("afterDrag", afterDragCallback);
|
|
144
|
+
useDrawerEmitter().off("beforeSnap", beforeSnapCallback);
|
|
145
|
+
useDrawerEmitter().off("afterSnap", afterSnapCallback);
|
|
146
|
+
useDrawerEmitter().off("beforeLeave", beforeCallback);
|
|
147
|
+
useDrawerEmitter().off("afterLeave", afterCallback);
|
|
148
|
+
});
|
|
149
|
+
return { progress };
|
|
150
|
+
}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import { type MaybeRef } from 'vue';
|
|
2
2
|
import { type MaybeElementRef } from '@vueuse/core';
|
|
3
3
|
import type { DrawerOptions, SnapPoint } from '../types/index.js';
|
|
4
|
-
export type UseDrawerApiOptions = Pick<DrawerOptions, 'scrollLock'> & {
|
|
4
|
+
export type UseDrawerApiOptions = Pick<DrawerOptions, 'scrollLock' | 'focusTrap'> & {
|
|
5
5
|
focusTarget: MaybeElementRef;
|
|
6
6
|
};
|
|
7
7
|
export declare function useDrawerApi(id?: MaybeRef<string>, options?: UseDrawerApiOptions): {
|
|
8
8
|
id: import("vue").ComputedRef<string>;
|
|
9
9
|
isActive: import("vue").ComputedRef<boolean>;
|
|
10
|
+
progress: import("vue").Ref<{
|
|
11
|
+
x: number;
|
|
12
|
+
y: number;
|
|
13
|
+
}>;
|
|
10
14
|
open: () => void;
|
|
11
15
|
close: () => void;
|
|
12
16
|
snapTo: (snapPoint: SnapPoint) => void;
|
|
@@ -1,13 +1,18 @@
|
|
|
1
|
-
import { ref, computed, toValue } from "vue";
|
|
2
|
-
import { defu } from "defu";
|
|
3
1
|
import {
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
ref,
|
|
3
|
+
computed,
|
|
4
|
+
toValue,
|
|
5
|
+
onMounted,
|
|
6
|
+
onBeforeUnmount
|
|
7
|
+
} from "vue";
|
|
8
|
+
import { defu } from "defu";
|
|
9
|
+
import { useScrollLock } from "@vueuse/core";
|
|
6
10
|
import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
|
|
7
11
|
import { uuid, matchClass } from "@maas/vue-equipment/utils";
|
|
8
12
|
import { useDrawerStore } from "./private/useDrawerStore.mjs";
|
|
9
13
|
import { useDrawerEmitter } from "./useDrawerEmitter.mjs";
|
|
10
14
|
const defaultOptions = {
|
|
15
|
+
focusTrap: false,
|
|
11
16
|
focusTarget: void 0,
|
|
12
17
|
scrollLock: true
|
|
13
18
|
};
|
|
@@ -15,10 +20,17 @@ export function useDrawerApi(id, options) {
|
|
|
15
20
|
const positionFixedElements = ref([]);
|
|
16
21
|
const mappedId = computed(() => toValue(id) || uuid());
|
|
17
22
|
const mappedOptions = defu(options, defaultOptions);
|
|
18
|
-
const focusTrap = mappedOptions.focusTarget ? useFocusTrap(mappedOptions.focusTarget) : void 0;
|
|
23
|
+
const focusTrap = mappedOptions.focusTarget ? typeof mappedOptions.focusTrap === "boolean" ? useFocusTrap(mappedOptions.focusTarget) : useFocusTrap(mappedOptions.focusTarget, mappedOptions.focusTrap) : void 0;
|
|
19
24
|
const scrollLock = mappedOptions.scrollLock && typeof window !== "undefined" ? useScrollLock(document.body) : ref(false);
|
|
20
25
|
const { drawerStore, addInstance, removeInstance } = useDrawerStore();
|
|
26
|
+
function progressCallback(payload) {
|
|
27
|
+
if (payload.id === mappedId.value) {
|
|
28
|
+
progress.value.x = payload.x;
|
|
29
|
+
progress.value.y = payload.y;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
21
32
|
const isActive = computed(() => drawerStore.value.includes(mappedId.value));
|
|
33
|
+
const progress = ref({ x: 0, y: 0 });
|
|
22
34
|
function open() {
|
|
23
35
|
addInstance(mappedId.value);
|
|
24
36
|
}
|
|
@@ -67,9 +79,16 @@ export function useDrawerApi(id, options) {
|
|
|
67
79
|
(elem) => elem.style.paddingRight = ""
|
|
68
80
|
);
|
|
69
81
|
}
|
|
82
|
+
onMounted(() => {
|
|
83
|
+
useDrawerEmitter().on("progress", progressCallback);
|
|
84
|
+
});
|
|
85
|
+
onBeforeUnmount(() => {
|
|
86
|
+
useDrawerEmitter().off("progress", progressCallback);
|
|
87
|
+
});
|
|
70
88
|
return {
|
|
71
89
|
id: mappedId,
|
|
72
90
|
isActive,
|
|
91
|
+
progress,
|
|
73
92
|
open,
|
|
74
93
|
close,
|
|
75
94
|
snapTo,
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { type Options } from 'focus-trap';
|
|
1
2
|
export type SnapPoint = number | `${string}px`;
|
|
2
3
|
export interface DrawerOptions {
|
|
3
4
|
position?: 'top' | 'right' | 'bottom' | 'left';
|
|
4
5
|
backdrop?: boolean;
|
|
5
|
-
focusTrap?: boolean;
|
|
6
|
+
focusTrap?: boolean | Options;
|
|
6
7
|
scrollLock?: boolean;
|
|
7
8
|
scrollLockPadding?: boolean;
|
|
8
9
|
preventZoom?: boolean;
|
|
@@ -66,4 +67,9 @@ export type DrawerEvents = {
|
|
|
66
67
|
x: number;
|
|
67
68
|
y: number;
|
|
68
69
|
};
|
|
70
|
+
progress: {
|
|
71
|
+
id: string;
|
|
72
|
+
x: number;
|
|
73
|
+
y: number;
|
|
74
|
+
};
|
|
69
75
|
};
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import type { DrawerOptions } from '../types.js';
|
|
2
|
-
import type {
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import type { RequireAll } from '@maas/vue-equipment/utils';
|
|
3
|
+
type DefaultOptions = RequireAll<DrawerOptions> & {
|
|
4
|
+
threshold: RequireAll<DrawerOptions['threshold']>;
|
|
5
|
+
snap: RequireAll<DrawerOptions['snap']>;
|
|
6
|
+
};
|
|
7
|
+
declare const defaultOptions: DefaultOptions;
|
|
5
8
|
export { defaultOptions, type DefaultOptions };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
:to="mappedOptions.teleport?.target"
|
|
6
6
|
:disabled="mappedOptions.teleport?.disabled"
|
|
7
7
|
>
|
|
8
|
-
<
|
|
8
|
+
<div
|
|
9
9
|
:is="mappedOptions.tag"
|
|
10
10
|
ref="modalRef"
|
|
11
11
|
class="magic-modal"
|
|
@@ -35,7 +35,8 @@
|
|
|
35
35
|
@enter="onEnter"
|
|
36
36
|
@after-enter="onAfterEnter"
|
|
37
37
|
>
|
|
38
|
-
<
|
|
38
|
+
<component
|
|
39
|
+
:is="mappedOptions.tag"
|
|
39
40
|
v-show="innerActive"
|
|
40
41
|
class="magic-modal__content"
|
|
41
42
|
@click.self="close"
|
|
@@ -47,9 +48,9 @@
|
|
|
47
48
|
@close="close"
|
|
48
49
|
/>
|
|
49
50
|
<slot v-else />
|
|
50
|
-
</
|
|
51
|
+
</component>
|
|
51
52
|
</transition>
|
|
52
|
-
</
|
|
53
|
+
</div>
|
|
53
54
|
</teleport>
|
|
54
55
|
</transition>
|
|
55
56
|
</template>
|
|
@@ -95,9 +96,12 @@ const props = withDefaults(defineProps<MagicModalProps>(), {
|
|
|
95
96
|
options: () => defaultOptions,
|
|
96
97
|
})
|
|
97
98
|
|
|
98
|
-
const modalRef = ref<HTMLElement | undefined>(undefined)
|
|
99
|
-
const modalApi = useModalApi(props.id, { focusTarget: modalRef })
|
|
100
99
|
const mappedOptions = customDefu(props.options, defaultOptions)
|
|
100
|
+
const modalRef = ref<HTMLElement | undefined>(undefined)
|
|
101
|
+
const modalApi = useModalApi(props.id, {
|
|
102
|
+
focusTarget: modalRef,
|
|
103
|
+
focusTrap: mappedOptions.focusTrap,
|
|
104
|
+
})
|
|
101
105
|
|
|
102
106
|
const {
|
|
103
107
|
isActive,
|
|
@@ -168,5 +172,5 @@ onBeforeUnmount(() => {
|
|
|
168
172
|
</script>
|
|
169
173
|
|
|
170
174
|
<style>
|
|
171
|
-
:root{--magic-modal-z-index:999;--magic-modal-backdrop-color:rgba(0,0,0,.5);--magic-modal-backdrop-filter:unset;--magic-modal-content-align-items:center;--magic-modal-content-justify-content:center;--magic-modal-content-overflow-y:auto}@keyframes magic-modal-content-enter{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes magic-modal-content-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.magic-modal{align-items:center;background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:center;padding:0;position:fixed;width:100%;z-index:var(--magic-modal-z-index)}.magic-modal__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-modal-content-align-items);display:flex;justify-content:var(--magic-modal-content-justify-content);max-height:100%;overflow-y:var(--magic-modal-content-overflow-y);scroll-behavior:smooth;width:100%}.magic-modal__backdrop{-webkit-backdrop-filter:var(--magic-modal-backdrop-filter);backdrop-filter:var(--magic-modal-backdrop-filter);background-color:var(--magic-modal-backdrop-color);bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-modal--content-enter-active{animation:magic-modal-content-enter .3s ease}.magic-modal--content-leave-active{animation:magic-modal-content-leave .3s ease}@media (prefers-reduced-motion){.magic-modal--content-enter-active{animation:fade-in .3s ease}.magic-modal--content-leave-active{animation:fade-out .3s ease}}.magic-modal--backdrop-enter-active{animation:fade-in .3s ease}.magic-modal--backdrop-leave-active{animation:fade-out .3s ease}
|
|
175
|
+
:root{--magic-modal-z-index:999;--magic-modal-backdrop-color:rgba(0,0,0,.5);--magic-modal-backdrop-filter:unset;--magic-modal-content-align-items:center;--magic-modal-content-justify-content:center;--magic-modal-content-overflow-y:auto}@keyframes magic-modal-content-enter{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes magic-modal-content-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.magic-modal{align-items:center;background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:center;padding:0;position:fixed;width:100%;z-index:var(--magic-modal-z-index)}.magic-modal__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-modal-content-align-items);display:flex;justify-content:var(--magic-modal-content-justify-content);max-height:100%;overflow-y:var(--magic-modal-content-overflow-y);scroll-behavior:smooth;width:100%}dialog.magic-modal__content{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-modal__content::backdrop{background-color:transparent}.magic-modal__backdrop{-webkit-backdrop-filter:var(--magic-modal-backdrop-filter);backdrop-filter:var(--magic-modal-backdrop-filter);background-color:var(--magic-modal-backdrop-color);bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-modal--content-enter-active{animation:magic-modal-content-enter .3s ease}.magic-modal--content-leave-active{animation:magic-modal-content-leave .3s ease}@media (prefers-reduced-motion){.magic-modal--content-enter-active{animation:fade-in .3s ease}.magic-modal--content-leave-active{animation:fade-out .3s ease}}.magic-modal--backdrop-enter-active{animation:fade-in .3s ease}.magic-modal--backdrop-leave-active{animation:fade-out .3s ease}
|
|
172
176
|
</style>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type MaybeRef } from 'vue';
|
|
2
2
|
import { type MaybeElementRef } from '@vueuse/core';
|
|
3
3
|
import type { ModalOptions } from '../types/index.js';
|
|
4
|
-
export type useModalApiOptions = Pick<ModalOptions, 'scrollLock'> & {
|
|
4
|
+
export type useModalApiOptions = Pick<ModalOptions, 'scrollLock' | 'focusTrap'> & {
|
|
5
5
|
focusTarget: MaybeElementRef;
|
|
6
6
|
};
|
|
7
7
|
export declare function useModalApi(id?: MaybeRef<string>, options?: useModalApiOptions): {
|
|
@@ -5,6 +5,7 @@ import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
|
|
|
5
5
|
import { uuid, matchClass } from "@maas/vue-equipment/utils";
|
|
6
6
|
import { useModalStore } from "./private/useModalStore.mjs";
|
|
7
7
|
const defaultOptions = {
|
|
8
|
+
focusTrap: false,
|
|
8
9
|
focusTarget: void 0,
|
|
9
10
|
scrollLock: true
|
|
10
11
|
};
|
|
@@ -12,7 +13,7 @@ export function useModalApi(id, options) {
|
|
|
12
13
|
const positionFixedElements = ref([]);
|
|
13
14
|
const mappedId = computed(() => toValue(id) || uuid());
|
|
14
15
|
const mappedOptions = defu(options, defaultOptions);
|
|
15
|
-
const focusTrap = mappedOptions.focusTarget ? useFocusTrap(mappedOptions.focusTarget) : void 0;
|
|
16
|
+
const focusTrap = mappedOptions.focusTarget ? typeof mappedOptions.focusTrap === "boolean" ? useFocusTrap(mappedOptions.focusTarget) : useFocusTrap(mappedOptions.focusTarget, mappedOptions.focusTrap) : void 0;
|
|
16
17
|
const scrollLock = mappedOptions.scrollLock && typeof window !== "undefined" ? useScrollLock(document.body) : ref(false);
|
|
17
18
|
const { modalStore, addInstance, removeInstance } = useModalStore();
|
|
18
19
|
const isActive = computed(() => modalStore.value.includes(mappedId.value));
|
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/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
|
|
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.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/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
|
|
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.24.
|
|
4
|
+
"version": "0.24.3",
|
|
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",
|