@maas/vue-equipment 1.0.0-beta.33 → 1.0.0-beta.35
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/composables/useCountdown/index.d.ts +23 -0
- package/dist/composables/useCountdown/index.js +133 -0
- package/dist/composables/useCountdown/index.js.map +1 -0
- package/dist/composables/useEasings/index.d.ts +21 -0
- package/dist/composables/useEasings/index.js +40 -0
- package/dist/composables/useEasings/index.js.map +1 -0
- package/dist/composables/useMetaViewport/index.d.ts +9 -0
- package/dist/composables/useMetaViewport/index.js +29 -0
- package/dist/composables/useMetaViewport/index.js.map +1 -0
- package/dist/composables/useScrollTo/index.d.ts +49 -0
- package/dist/composables/useScrollTo/index.js +148 -0
- package/dist/composables/useScrollTo/index.js.map +1 -0
- package/dist/nuxt/module.json +1 -1
- package/dist/nuxt/module.mjs +22 -9
- package/dist/plugins/.turbo/turbo-lint.log +92 -1
- package/dist/plugins/MagicAccordion/src/components/MagicAccordionContent.vue +15 -6
- package/dist/plugins/MagicAccordion/src/components/MagicAccordionTrigger.vue +15 -10
- package/dist/plugins/MagicAccordion/src/components/MagicAccordionView.vue +11 -5
- package/dist/plugins/MagicAccordion/src/composables/private/useAccordionCallback.mjs +1 -1
- package/dist/plugins/MagicCommand/src/components/MagicCommandContent.vue +15 -8
- package/dist/plugins/MagicCommand/src/components/MagicCommandDrawer.vue +13 -7
- package/dist/plugins/MagicCommand/src/components/MagicCommandItem.vue +19 -9
- package/dist/plugins/MagicCommand/src/components/MagicCommandModal.vue +2 -2
- package/dist/plugins/MagicCommand/src/components/MagicCommandRenderer.vue +12 -6
- package/dist/plugins/MagicCommand/src/components/MagicCommandTrigger.vue +15 -10
- package/dist/plugins/MagicCommand/src/components/MagicCommandView.vue +11 -3
- package/dist/plugins/MagicCommand/src/composables/private/useCommandCallback.mjs +1 -1
- package/dist/plugins/MagicCommand/src/composables/private/useCommandView.d.ts +1 -1
- package/dist/plugins/MagicCommand/src/composables/private/useCommandView.mjs +42 -37
- package/dist/plugins/MagicCommand/src/composables/useMagicCommand.mjs +21 -4
- package/dist/plugins/MagicCookie/src/components/MagicCookieItem.vue +12 -3
- package/dist/plugins/MagicCookie/src/components/MagicCookieView.vue +11 -5
- package/dist/plugins/MagicCookie/src/composables/private/useCookieCallback.mjs +1 -1
- package/dist/plugins/MagicCookie/src/composables/private/useCookieItem.mjs +6 -1
- package/dist/plugins/MagicCookie/src/composables/useMagicCookie.mjs +1 -1
- package/dist/plugins/MagicDraggable/src/components/MagicDraggable.vue +11 -1
- package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.mjs +9 -4
- package/dist/plugins/MagicDraggable/src/composables/private/useDraggableSnap.mjs +8 -3
- package/dist/plugins/MagicDraggable/src/composables/useMagicDraggable.mjs +1 -1
- package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue +7 -2
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerCallback.mjs +2 -2
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.mjs +7 -2
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerProgress.mjs +1 -1
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerSnap.mjs +1 -1
- package/dist/plugins/MagicDrawer/src/composables/private/useDrawerWheel.mjs +6 -1
- package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.mjs +1 -1
- package/dist/plugins/MagicError/index.d.ts +5 -0
- package/dist/plugins/MagicError/index.mjs +3 -0
- package/dist/plugins/MagicError/nuxt.d.ts +2 -0
- package/dist/plugins/MagicError/nuxt.mjs +12 -0
- package/dist/plugins/MagicError/package.json +40 -0
- package/dist/plugins/MagicError/src/MagicError.d.ts +0 -0
- package/dist/plugins/MagicError/src/MagicError.mjs +0 -0
- package/dist/plugins/MagicError/src/class/MagicError.d.ts +6 -0
- package/dist/plugins/MagicError/src/class/MagicError.mjs +15 -0
- package/dist/plugins/MagicError/src/composables/useMagicError.d.ts +18 -0
- package/dist/plugins/MagicError/src/composables/useMagicError.mjs +31 -0
- package/dist/plugins/MagicMenu/src/components/MagicMenuChannel.vue +22 -10
- package/dist/plugins/MagicMenu/src/components/MagicMenuContent.vue +15 -6
- package/dist/plugins/MagicMenu/src/components/MagicMenuItem.vue +19 -9
- package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue +19 -13
- package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue +15 -10
- package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue +11 -3
- package/dist/plugins/MagicMenu/src/composables/private/useMenuCallback.mjs +1 -1
- package/dist/plugins/MagicMenu/src/composables/private/useMenuItem.mjs +9 -1
- package/dist/plugins/MagicMenu/src/composables/private/useMenuKeyListener.mjs +16 -8
- package/dist/plugins/MagicMenu/src/composables/private/useMenuView.mjs +7 -2
- package/dist/plugins/MagicModal/src/composables/private/useModalCallback.mjs +1 -1
- package/dist/plugins/MagicPie/src/components/MagicPie.vue +15 -2
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudio.vue +17 -7
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudioControls.vue +11 -5
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerDisplayTime.vue +11 -5
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerMuxPopover.vue +29 -14
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerOverlay.vue +11 -5
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerPoster.vue +11 -5
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerTimeline.vue +11 -5
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerVideo.vue +17 -7
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerVideoControls.vue +11 -5
- package/dist/plugins/MagicPlayer/src/composables/private/usePlayerEmitter.mjs +1 -1
- package/dist/plugins/MagicPlayer/src/composables/private/usePlayerMediaApi.mjs +65 -11
- package/dist/plugins/MagicPlayer/src/composables/private/usePlayerRuntime.d.ts +1 -0
- package/dist/plugins/MagicPlayer/src/composables/private/usePlayerRuntime.mjs +96 -16
- package/dist/plugins/MagicPlayer/src/composables/private/usePlayerVideoApi.mjs +7 -2
- package/dist/plugins/MagicPlayer/src/types/index.d.ts +2 -0
- package/dist/plugins/MagicPlayer/src/utils/defaultOptions.mjs +1 -0
- package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue +12 -6
- package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue +11 -3
- package/dist/plugins/MagicScroll/src/composables/private/useCollisionDetection.mjs +1 -1
- package/dist/plugins/MagicToast/src/components/MagicToastView.vue +11 -3
- package/dist/plugins/MagicToast/src/composables/private/useToastCallback.d.ts +2 -2
- package/dist/plugins/MagicToast/src/composables/private/useToastCallback.mjs +8 -6
- package/dist/plugins/MagicToast/src/composables/private/useToastDrag.mjs +1 -1
- package/package.json +20 -13
- package/dist/composables/index.d.ts +0 -97
- package/dist/composables/index.js +0 -344
- package/dist/composables/index.js.map +0 -1
- package/dist/plugins/index.d.ts +0 -14
- package/dist/plugins/index.mjs +0 -14
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
import { reactive, computed, toValue } from "vue";
|
|
2
|
+
import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
|
|
2
3
|
import { useCommandState } from "./useCommandState.mjs";
|
|
3
4
|
function isAbortError(error) {
|
|
4
5
|
return error instanceof DOMException && error.name === "AbortError";
|
|
5
6
|
}
|
|
6
|
-
export function useCommandView(
|
|
7
|
-
const { initializeState } = useCommandState(
|
|
7
|
+
export function useCommandView(id) {
|
|
8
|
+
const { initializeState } = useCommandState(id);
|
|
9
|
+
const { logWarning } = useMagicError({
|
|
10
|
+
prefix: "MagicCommand",
|
|
11
|
+
source: "useCommandView"
|
|
12
|
+
});
|
|
8
13
|
const state = initializeState();
|
|
9
|
-
const currentInstanceId = toValue(
|
|
14
|
+
const currentInstanceId = toValue(id);
|
|
10
15
|
const currentView = computed(() => {
|
|
11
16
|
const activeViews = state.views.filter((view) => view.active);
|
|
12
17
|
if (activeViews.length === 0) return void 0;
|
|
@@ -17,12 +22,12 @@ export function useCommandView(instanceId) {
|
|
|
17
22
|
});
|
|
18
23
|
const viewMap = /* @__PURE__ */ new Map();
|
|
19
24
|
function createView(args) {
|
|
20
|
-
const { id, parent, initial } = args;
|
|
25
|
+
const { id: id2, parent, initial } = args;
|
|
21
26
|
if (parent.views.length === 0) {
|
|
22
27
|
parent.views.push(currentInstanceId);
|
|
23
28
|
}
|
|
24
29
|
const view = reactive({
|
|
25
|
-
id,
|
|
30
|
+
id: id2,
|
|
26
31
|
parent,
|
|
27
32
|
initial,
|
|
28
33
|
active: false,
|
|
@@ -33,7 +38,7 @@ export function useCommandView(instanceId) {
|
|
|
33
38
|
unselectAbortController: new AbortController()
|
|
34
39
|
}
|
|
35
40
|
});
|
|
36
|
-
viewMap.set(
|
|
41
|
+
viewMap.set(id2, view);
|
|
37
42
|
return view;
|
|
38
43
|
}
|
|
39
44
|
function addView(args) {
|
|
@@ -55,35 +60,35 @@ export function useCommandView(instanceId) {
|
|
|
55
60
|
const view = state?.views.findLast((view2) => view2.active)?.id;
|
|
56
61
|
state.input.view = view;
|
|
57
62
|
}
|
|
58
|
-
function getView(
|
|
59
|
-
let view = viewMap.get(
|
|
63
|
+
function getView(id2) {
|
|
64
|
+
let view = viewMap.get(id2);
|
|
60
65
|
if (!view) {
|
|
61
|
-
view = state.views.find((v) => v.id ===
|
|
62
|
-
if (view) viewMap.set(
|
|
66
|
+
view = state.views.find((v) => v.id === id2);
|
|
67
|
+
if (view) viewMap.set(id2, view);
|
|
63
68
|
}
|
|
64
69
|
return view;
|
|
65
70
|
}
|
|
66
|
-
function deleteView(
|
|
67
|
-
const index = state.views.findIndex((view) => view.id ===
|
|
71
|
+
function deleteView(id2) {
|
|
72
|
+
const index = state.views.findIndex((view) => view.id === id2);
|
|
68
73
|
if (index !== -1) {
|
|
69
74
|
state.views.splice(index, 1);
|
|
70
|
-
viewMap.delete(
|
|
75
|
+
viewMap.delete(id2);
|
|
71
76
|
}
|
|
72
77
|
}
|
|
73
|
-
function getRelativeViewIndex(
|
|
74
|
-
const view = getView(
|
|
78
|
+
function getRelativeViewIndex(id2) {
|
|
79
|
+
const view = getView(id2);
|
|
75
80
|
if (!view) return -1;
|
|
76
81
|
const nestingLevel = view.parent.views.length;
|
|
77
82
|
return state.views.findIndex(
|
|
78
|
-
(v) => v.parent.views.length === nestingLevel && v.id ===
|
|
83
|
+
(v) => v.parent.views.length === nestingLevel && v.id === id2
|
|
79
84
|
);
|
|
80
85
|
}
|
|
81
|
-
function getNextView(
|
|
82
|
-
const index = state.views.findIndex((view) => view.id ===
|
|
86
|
+
function getNextView(id2) {
|
|
87
|
+
const index = state.views.findIndex((view) => view.id === id2);
|
|
83
88
|
return index !== -1 ? state.views[index + 1] : void 0;
|
|
84
89
|
}
|
|
85
|
-
function getPreviousView(
|
|
86
|
-
const index = state.views.findIndex((view) => view.id ===
|
|
90
|
+
function getPreviousView(id2) {
|
|
91
|
+
const index = state.views.findIndex((view) => view.id === id2);
|
|
87
92
|
return index > 0 ? state.views[index - 1] : void 0;
|
|
88
93
|
}
|
|
89
94
|
function getTopLevelView() {
|
|
@@ -92,20 +97,20 @@ export function useCommandView(instanceId) {
|
|
|
92
97
|
function getNestedView(itemId) {
|
|
93
98
|
return state.views.find((view) => view.parent.item === itemId);
|
|
94
99
|
}
|
|
95
|
-
function getParentView(
|
|
96
|
-
const view = getView(
|
|
100
|
+
function getParentView(id2) {
|
|
101
|
+
const view = getView(id2);
|
|
97
102
|
if (!view) return void 0;
|
|
98
103
|
const parentId = view.parent.views[view.parent.views.length - 1];
|
|
99
104
|
return parentId ? getView(parentId) : void 0;
|
|
100
105
|
}
|
|
101
|
-
function getUnrelatedViews(
|
|
102
|
-
const view = getView(
|
|
106
|
+
function getUnrelatedViews(id2) {
|
|
107
|
+
const view = getView(id2);
|
|
103
108
|
if (!view) return [];
|
|
104
109
|
const parentViewsSet = new Set(view.parent.views);
|
|
105
|
-
return state.views.filter((v) => v.id !==
|
|
110
|
+
return state.views.filter((v) => v.id !== id2 && !parentViewsSet.has(v.id));
|
|
106
111
|
}
|
|
107
|
-
async function selectView(
|
|
108
|
-
const view = getView(
|
|
112
|
+
async function selectView(id2, delayMs = 0) {
|
|
113
|
+
const view = getView(id2);
|
|
109
114
|
if (!view) return;
|
|
110
115
|
if (view.state.unselectAbortController) {
|
|
111
116
|
view.state.unselectAbortController.abort();
|
|
@@ -120,7 +125,7 @@ export function useCommandView(instanceId) {
|
|
|
120
125
|
activateView();
|
|
121
126
|
} catch (error) {
|
|
122
127
|
if (isAbortError(error) && state.options.debug) {
|
|
123
|
-
|
|
128
|
+
logWarning("selectView() was interrupted by a call to unselectView()");
|
|
124
129
|
}
|
|
125
130
|
}
|
|
126
131
|
}
|
|
@@ -131,8 +136,8 @@ export function useCommandView(instanceId) {
|
|
|
131
136
|
activateView();
|
|
132
137
|
}
|
|
133
138
|
}
|
|
134
|
-
async function unselectView(
|
|
135
|
-
const view = getView(
|
|
139
|
+
async function unselectView(id2, delayMs = 0) {
|
|
140
|
+
const view = getView(id2);
|
|
136
141
|
if (!view) return;
|
|
137
142
|
if (view.state.selectAbortController) {
|
|
138
143
|
view.state.selectAbortController.abort();
|
|
@@ -147,12 +152,12 @@ export function useCommandView(instanceId) {
|
|
|
147
152
|
activateView();
|
|
148
153
|
} catch (error) {
|
|
149
154
|
if (isAbortError(error) && state.options.debug) {
|
|
150
|
-
|
|
155
|
+
logWarning("unselectView() was interrupted by a call to selectView()");
|
|
151
156
|
}
|
|
152
157
|
}
|
|
153
158
|
}
|
|
154
|
-
function unselectUnrelatedViews(
|
|
155
|
-
const views = getUnrelatedViews(
|
|
159
|
+
function unselectUnrelatedViews(id2) {
|
|
160
|
+
const views = getUnrelatedViews(id2);
|
|
156
161
|
for (const view of views) {
|
|
157
162
|
view.active = false;
|
|
158
163
|
}
|
|
@@ -163,8 +168,8 @@ export function useCommandView(instanceId) {
|
|
|
163
168
|
}
|
|
164
169
|
}
|
|
165
170
|
function initializeView(args) {
|
|
166
|
-
const { id } = args;
|
|
167
|
-
const view = getView(
|
|
171
|
+
const { id: id2 } = args;
|
|
172
|
+
const view = getView(id2) ?? addView(args);
|
|
168
173
|
return view;
|
|
169
174
|
}
|
|
170
175
|
function sortViewItems(viewId) {
|
|
@@ -173,8 +178,8 @@ export function useCommandView(instanceId) {
|
|
|
173
178
|
const elements = Array.from(
|
|
174
179
|
parent?.querySelectorAll(".magic-command-item") ?? []
|
|
175
180
|
);
|
|
176
|
-
function getIndex(
|
|
177
|
-
return elements.findIndex((el) => el.dataset.id ===
|
|
181
|
+
function getIndex(id2) {
|
|
182
|
+
return elements.findIndex((el) => el.dataset.id === id2);
|
|
178
183
|
}
|
|
179
184
|
view?.items?.sort((a, b) => getIndex(a.id) - getIndex(b.id));
|
|
180
185
|
}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import { computed, nextTick } from "vue";
|
|
2
|
+
import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
|
|
2
3
|
import { useCommandState } from "./private/useCommandState.mjs";
|
|
3
4
|
import { useCommandItem } from "./private/useCommandItem.mjs";
|
|
4
5
|
import { useCommandView } from "./private/useCommandView.mjs";
|
|
6
|
+
const { throwError } = useMagicError({
|
|
7
|
+
prefix: "MagicCommand",
|
|
8
|
+
source: "useMagicCommand"
|
|
9
|
+
});
|
|
5
10
|
export function useMagicCommand(id) {
|
|
6
11
|
const { initializeState } = useCommandState(id);
|
|
7
12
|
const state = initializeState();
|
|
@@ -20,10 +25,16 @@ export function useMagicCommand(id) {
|
|
|
20
25
|
function selectItem(args) {
|
|
21
26
|
const { id: id2, viewId } = args;
|
|
22
27
|
if (!viewId) {
|
|
23
|
-
|
|
28
|
+
throwError({
|
|
29
|
+
message: "viewId is required to select an item",
|
|
30
|
+
errorCode: "view_id_required"
|
|
31
|
+
});
|
|
24
32
|
}
|
|
25
33
|
if (!id2) {
|
|
26
|
-
|
|
34
|
+
throwError({
|
|
35
|
+
message: "id is required to select an item",
|
|
36
|
+
errorCode: "id_required"
|
|
37
|
+
});
|
|
27
38
|
}
|
|
28
39
|
const { selectItem: selectItem2 } = useCommandItem({
|
|
29
40
|
instanceId: id2,
|
|
@@ -34,10 +45,16 @@ export function useMagicCommand(id) {
|
|
|
34
45
|
function unselectItem(args) {
|
|
35
46
|
const { id: id2, viewId } = args;
|
|
36
47
|
if (!viewId) {
|
|
37
|
-
|
|
48
|
+
throwError({
|
|
49
|
+
message: "viewId is required to select an item",
|
|
50
|
+
errorCode: "view_id_required"
|
|
51
|
+
});
|
|
38
52
|
}
|
|
39
53
|
if (!id2) {
|
|
40
|
-
|
|
54
|
+
throwError({
|
|
55
|
+
message: "id is required to select an item",
|
|
56
|
+
errorCode: "id_required"
|
|
57
|
+
});
|
|
41
58
|
}
|
|
42
59
|
const { unselectItem: unselectItem2 } = useCommandItem({
|
|
43
60
|
instanceId: id2,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
3
|
class="magic-cookie-item"
|
|
4
|
+
:data-id="mappedId"
|
|
4
5
|
:data-optional="item.optional"
|
|
5
6
|
:data-active="item.active"
|
|
6
7
|
>
|
|
@@ -10,6 +11,9 @@
|
|
|
10
11
|
|
|
11
12
|
<script setup>
|
|
12
13
|
import { computed, inject, provide, onBeforeUnmount, useId } from "vue";
|
|
14
|
+
import {
|
|
15
|
+
useMagicError
|
|
16
|
+
} from "@maas/vue-equipment/plugins/MagicError";
|
|
13
17
|
import { useCookieItem } from "../composables/private/useCookieItem";
|
|
14
18
|
import {
|
|
15
19
|
MagicCookieInstanceId,
|
|
@@ -21,10 +25,15 @@ const { id, optional, maxAge } = defineProps({
|
|
|
21
25
|
optional: { type: Boolean, required: false },
|
|
22
26
|
maxAge: { type: Number, required: false }
|
|
23
27
|
});
|
|
28
|
+
const magicError = useMagicError({
|
|
29
|
+
prefix: "MagicCookie",
|
|
30
|
+
source: "MagicCookieItem"
|
|
31
|
+
});
|
|
24
32
|
const instanceId = inject(MagicCookieInstanceId, void 0);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
33
|
+
magicError.assert(instanceId, {
|
|
34
|
+
message: "MagicCookieItem must be nested inside MagicCookieProvider",
|
|
35
|
+
errorCode: "missing_instance_id"
|
|
36
|
+
});
|
|
28
37
|
const mappedId = computed(() => id ?? `magic-cookie-item-${useId()}`);
|
|
29
38
|
const mappedActive = computed(() => item.active);
|
|
30
39
|
const { initializeItem, deleteItem } = useCookieItem({
|
|
@@ -24,17 +24,23 @@
|
|
|
24
24
|
<script setup>
|
|
25
25
|
import { inject } from "vue";
|
|
26
26
|
import { AutoSize } from "@maas/vue-autosize";
|
|
27
|
+
import {
|
|
28
|
+
useMagicError
|
|
29
|
+
} from "@maas/vue-equipment/plugins/MagicError";
|
|
27
30
|
import { useCookieState } from "../composables/private/useCookieState";
|
|
28
31
|
import { useCookieCallback } from "../composables/private/useCookieCallback";
|
|
29
32
|
import { MagicCookieInstanceId } from "../symbols";
|
|
30
33
|
import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
|
|
31
34
|
import "@maas/vue-equipment/utils/css/keyframes/auto-size-out.css";
|
|
35
|
+
const magicError = useMagicError({
|
|
36
|
+
prefix: "MagicCookie",
|
|
37
|
+
source: "MagicCookieView"
|
|
38
|
+
});
|
|
32
39
|
const instanceId = inject(MagicCookieInstanceId, void 0);
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
40
|
+
magicError.assert(instanceId, {
|
|
41
|
+
message: "MagicCookieView must be used within a MagicCookieProvider",
|
|
42
|
+
errorCode: "missing_instance_id"
|
|
43
|
+
});
|
|
38
44
|
const { initializeState } = useCookieState(instanceId);
|
|
39
45
|
const state = initializeState();
|
|
40
46
|
const {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { toValue } from "vue";
|
|
2
|
-
import { useMagicEmitter } from "@maas/vue-equipment/plugins";
|
|
2
|
+
import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
|
|
3
3
|
export function useCookieCallback(instanceId) {
|
|
4
4
|
const emitter = useMagicEmitter();
|
|
5
5
|
function onBeforeEnter() {
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { reactive, toValue } from "vue";
|
|
2
2
|
import { useCookies } from "@vueuse/integrations/useCookies";
|
|
3
|
+
import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
|
|
3
4
|
import { useCookieState } from "./useCookieState.mjs";
|
|
4
5
|
export function useCookieItem(args) {
|
|
5
6
|
const { instanceId } = args;
|
|
7
|
+
const { logWarning } = useMagicError({
|
|
8
|
+
prefix: "MagicCookie",
|
|
9
|
+
source: "useCookieItem"
|
|
10
|
+
});
|
|
6
11
|
const { initializeState } = useCookieState(instanceId);
|
|
7
12
|
const state = initializeState();
|
|
8
13
|
function getBrowserCookie(id) {
|
|
@@ -67,7 +72,7 @@ export function useCookieItem(args) {
|
|
|
67
72
|
function setItemCookie(id) {
|
|
68
73
|
const item = getItem(id);
|
|
69
74
|
if (!item) {
|
|
70
|
-
|
|
75
|
+
logWarning(`Item ${id} not found. Cookie cannot be set.`);
|
|
71
76
|
return;
|
|
72
77
|
}
|
|
73
78
|
useCookies([id]).set(toValue(id), item.active, {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { computed, nextTick } from "vue";
|
|
2
|
-
import { useMagicEmitter } from "@maas/vue-equipment/plugins";
|
|
2
|
+
import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
|
|
3
3
|
import { useCookieState } from "./private/useCookieState.mjs";
|
|
4
4
|
import { useCookieItem } from "./private/useCookieItem.mjs";
|
|
5
5
|
export function useMagicCookie(id) {
|
|
@@ -26,6 +26,9 @@
|
|
|
26
26
|
<script setup>
|
|
27
27
|
import { useTemplateRef, computed, toValue, toRefs } from "vue";
|
|
28
28
|
import { createDefu } from "defu";
|
|
29
|
+
import {
|
|
30
|
+
useMagicError
|
|
31
|
+
} from "@maas/vue-equipment/plugins/MagicError";
|
|
29
32
|
import { useDraggableDrag } from "../composables/private/useDraggableDrag";
|
|
30
33
|
import { useDraggableState } from "../composables/private/useDraggableState";
|
|
31
34
|
import { defaultOptions } from "../utils/defaultOptions";
|
|
@@ -36,6 +39,10 @@ const { id, options = {} } = defineProps({
|
|
|
36
39
|
id: { type: null, required: true },
|
|
37
40
|
options: { type: Object, required: false }
|
|
38
41
|
});
|
|
42
|
+
const magicError = useMagicError({
|
|
43
|
+
prefix: "MagicDraggable",
|
|
44
|
+
source: "MagicDraggable"
|
|
45
|
+
});
|
|
39
46
|
const customDefu = createDefu((obj, key, value) => {
|
|
40
47
|
if (key === "snapPoints") {
|
|
41
48
|
obj[key] = value;
|
|
@@ -45,7 +52,10 @@ const customDefu = createDefu((obj, key, value) => {
|
|
|
45
52
|
const mappedOptions = customDefu(options, defaultOptions);
|
|
46
53
|
const mappedId = toValue(id);
|
|
47
54
|
if (!mappedOptions.snapPoints.length) {
|
|
48
|
-
|
|
55
|
+
magicError.throwError({
|
|
56
|
+
message: "MagicDraggable must have at least one snap point set",
|
|
57
|
+
errorCode: "missing_snap_point"
|
|
58
|
+
});
|
|
49
59
|
}
|
|
50
60
|
const elRef = useTemplateRef("el");
|
|
51
61
|
const wrapperRef = useTemplateRef("wrapper");
|
|
@@ -23,7 +23,8 @@ import {
|
|
|
23
23
|
} from "@maas/vue-equipment/utils";
|
|
24
24
|
import {
|
|
25
25
|
useMagicEmitter
|
|
26
|
-
} from "@maas/vue-equipment/plugins";
|
|
26
|
+
} from "@maas/vue-equipment/plugins/MagicEmitter";
|
|
27
|
+
import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
|
|
27
28
|
import { useDraggableSnap } from "./useDraggableSnap.mjs";
|
|
28
29
|
import { useDraggableState } from "./useDraggableState.mjs";
|
|
29
30
|
import { useDraggableScrollLock } from "./useDraggableScrollLock.mjs";
|
|
@@ -38,6 +39,10 @@ export function useDraggableDrag(args) {
|
|
|
38
39
|
animation,
|
|
39
40
|
scrollLock
|
|
40
41
|
} = args;
|
|
42
|
+
const { logWarning } = useMagicError({
|
|
43
|
+
prefix: "MagicDraggable",
|
|
44
|
+
source: "useDraggableDrag"
|
|
45
|
+
});
|
|
41
46
|
const { initializeState } = useDraggableState(toValue(id));
|
|
42
47
|
const state = initializeState();
|
|
43
48
|
const {
|
|
@@ -127,11 +132,11 @@ export function useDraggableDrag(args) {
|
|
|
127
132
|
const childRect = toValue(elRect);
|
|
128
133
|
const parentRect = toValue(wrapperRect);
|
|
129
134
|
if (!childRect || !parentRect) {
|
|
130
|
-
|
|
135
|
+
logWarning("Could not calculate sizing");
|
|
131
136
|
return;
|
|
132
137
|
}
|
|
133
138
|
if (childRect.width > parentRect.width || childRect.height > parentRect.height) {
|
|
134
|
-
|
|
139
|
+
logWarning("Element is too small for its content");
|
|
135
140
|
return;
|
|
136
141
|
}
|
|
137
142
|
}
|
|
@@ -350,7 +355,7 @@ export function useDraggableDrag(args) {
|
|
|
350
355
|
if (elRect.value && wrapperRect.value) {
|
|
351
356
|
emitter.on("snapTo", snapToCallback);
|
|
352
357
|
if (elRect.value.width > wrapperRect.value.width || elRect.value.height > wrapperRect.value.height) {
|
|
353
|
-
|
|
358
|
+
logWarning("is too small for its content");
|
|
354
359
|
return;
|
|
355
360
|
}
|
|
356
361
|
}
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import { ref, toRefs, computed, toValue, nextTick } from "vue";
|
|
2
2
|
import { computedWithControl } from "@vueuse/core";
|
|
3
3
|
import { interpolate } from "@maas/vue-equipment/utils";
|
|
4
|
-
import { useMagicEmitter } from "@maas/vue-equipment/plugins";
|
|
4
|
+
import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
|
|
5
|
+
import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
|
|
5
6
|
import { defu } from "defu";
|
|
6
7
|
import { useDraggableState } from "./useDraggableState.mjs";
|
|
7
8
|
export function useDraggableSnap(args) {
|
|
8
9
|
const { id, animation, snapPoints } = args;
|
|
9
10
|
const { initializeState } = useDraggableState(toValue(id));
|
|
10
11
|
const state = initializeState();
|
|
12
|
+
const { logWarning } = useMagicError({
|
|
13
|
+
prefix: "MagicDraggable",
|
|
14
|
+
source: "useDraggableSnap"
|
|
15
|
+
});
|
|
11
16
|
const {
|
|
12
17
|
lastDraggedX,
|
|
13
18
|
lastDraggedY,
|
|
@@ -54,11 +59,11 @@ export function useDraggableSnap(args) {
|
|
|
54
59
|
const emitter = useMagicEmitter();
|
|
55
60
|
function mapSnapPoint(snapPoint) {
|
|
56
61
|
if (!wrapperRect.value) {
|
|
57
|
-
|
|
62
|
+
logWarning("Wrapper rect is not defined");
|
|
58
63
|
return void 0;
|
|
59
64
|
}
|
|
60
65
|
if (!elRect.value) {
|
|
61
|
-
|
|
66
|
+
logWarning("Element rect is not defined");
|
|
62
67
|
return void 0;
|
|
63
68
|
}
|
|
64
69
|
const mappedSnapPoint = typeof snapPoint === "string" ? [snapPoint] : snapPoint;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { toValue } from "vue";
|
|
2
|
-
import { useMagicEmitter } from "@maas/vue-equipment/plugins";
|
|
2
|
+
import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
|
|
3
3
|
export function useMagicDraggable(id) {
|
|
4
4
|
function snapTo(snapPoint, duration) {
|
|
5
5
|
useMagicEmitter().emit("snapTo", {
|
|
@@ -72,7 +72,8 @@ import {
|
|
|
72
72
|
} from "vue";
|
|
73
73
|
import { createDefu } from "defu";
|
|
74
74
|
import { onKeyStroke, unrefElement } from "@vueuse/core";
|
|
75
|
-
import {
|
|
75
|
+
import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
|
|
76
|
+
import { useMetaViewport } from "@maas/vue-equipment/composables/useMetaViewport";
|
|
76
77
|
import { defaultOptions } from "./../utils/defaultOptions";
|
|
77
78
|
import { useDrawerDOM } from "../composables/private/useDrawerDOM";
|
|
78
79
|
import { useDrawerCallback } from "../composables/private/useDrawerCallback";
|
|
@@ -121,6 +122,10 @@ const {
|
|
|
121
122
|
focusTrap: mappedOptions.focusTrap
|
|
122
123
|
});
|
|
123
124
|
const { isActive, open, close } = useMagicDrawer(id);
|
|
125
|
+
const { logWarning } = useMagicError({
|
|
126
|
+
prefix: "MagicDrawer",
|
|
127
|
+
source: "MagicDrawer"
|
|
128
|
+
});
|
|
124
129
|
const overshoot = shallowRef(0);
|
|
125
130
|
const {
|
|
126
131
|
position,
|
|
@@ -196,7 +201,7 @@ function convertToPixels(value) {
|
|
|
196
201
|
const regex = /^(\d*\.?\d+)\s*(rem|px)$/;
|
|
197
202
|
const match = value.match(regex);
|
|
198
203
|
if (!match) {
|
|
199
|
-
|
|
204
|
+
logWarning(
|
|
200
205
|
`--magic-drawer-drag-overshoot (${value}) needs to be specified in px or rem`
|
|
201
206
|
);
|
|
202
207
|
return 0;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { toValue, nextTick } from "vue";
|
|
2
|
-
import { useMetaViewport } from "@maas/vue-equipment/composables";
|
|
3
|
-
import { useMagicEmitter } from "@maas/vue-equipment/plugins";
|
|
2
|
+
import { useMetaViewport } from "@maas/vue-equipment/composables/useMetaViewport";
|
|
3
|
+
import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
|
|
4
4
|
export function useDrawerCallback(args) {
|
|
5
5
|
const {
|
|
6
6
|
id,
|
|
@@ -22,7 +22,8 @@ import {
|
|
|
22
22
|
} from "@maas/vue-equipment/utils";
|
|
23
23
|
import {
|
|
24
24
|
useMagicEmitter
|
|
25
|
-
} from "@maas/vue-equipment/plugins";
|
|
25
|
+
} from "@maas/vue-equipment/plugins/MagicEmitter";
|
|
26
|
+
import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
|
|
26
27
|
import { useMagicDrawer } from "./../useMagicDrawer.mjs";
|
|
27
28
|
import { useDrawerSnap } from "./useDrawerSnap.mjs";
|
|
28
29
|
import { useDrawerGuards } from "./useDrawerGuards.mjs";
|
|
@@ -42,6 +43,10 @@ export function useDrawerDrag(args) {
|
|
|
42
43
|
preventDragClose,
|
|
43
44
|
disabled
|
|
44
45
|
} = args;
|
|
46
|
+
const { logWarning } = useMagicError({
|
|
47
|
+
prefix: "MagicDrawer",
|
|
48
|
+
source: "useDrawerDrag"
|
|
49
|
+
});
|
|
45
50
|
const { initializeState } = useDrawerState(toValue(id));
|
|
46
51
|
const state = initializeState();
|
|
47
52
|
const {
|
|
@@ -285,7 +290,7 @@ export function useDrawerDrag(args) {
|
|
|
285
290
|
function snapToCallback(payload) {
|
|
286
291
|
if (payload.id === toValue(id)) {
|
|
287
292
|
if (!toValue(isActive)) {
|
|
288
|
-
|
|
293
|
+
logWarning("Cannot snap to point when drawer is not open");
|
|
289
294
|
return;
|
|
290
295
|
} else {
|
|
291
296
|
snapTo({
|
|
@@ -11,7 +11,7 @@ import { useElementBounding, useRafFn } from "@vueuse/core";
|
|
|
11
11
|
import { clampValue, mapValue } from "@maas/vue-equipment/utils";
|
|
12
12
|
import {
|
|
13
13
|
useMagicEmitter
|
|
14
|
-
} from "@maas/vue-equipment/plugins";
|
|
14
|
+
} from "@maas/vue-equipment/plugins/MagicEmitter";
|
|
15
15
|
import { useDrawerState } from "./useDrawerState.mjs";
|
|
16
16
|
export function useDrawerProgress(args) {
|
|
17
17
|
const { id, drawerRef, elRef, position, overshoot } = args;
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
} from "vue";
|
|
7
7
|
import { computedWithControl } from "@vueuse/core";
|
|
8
8
|
import { mapValue, interpolate } from "@maas/vue-equipment/utils";
|
|
9
|
-
import { useMagicEmitter } from "@maas/vue-equipment/plugins";
|
|
9
|
+
import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
|
|
10
10
|
export function useDrawerSnap(args) {
|
|
11
11
|
const {
|
|
12
12
|
id,
|
|
@@ -5,9 +5,14 @@ import {
|
|
|
5
5
|
} from "vue";
|
|
6
6
|
import { unrefElement } from "@vueuse/core";
|
|
7
7
|
import WheelGestures, {} from "wheel-gestures";
|
|
8
|
+
import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
|
|
8
9
|
import { useDrawerState } from "./useDrawerState.mjs";
|
|
9
10
|
export function useDrawerWheel(args) {
|
|
10
11
|
const { id, elRef, position, disabled } = args;
|
|
12
|
+
const { logError } = useMagicError({
|
|
13
|
+
prefix: "MagicDrawer",
|
|
14
|
+
source: "useDrawerWheel"
|
|
15
|
+
});
|
|
11
16
|
const { initializeState } = useDrawerState(toValue(id));
|
|
12
17
|
const state = initializeState();
|
|
13
18
|
const { dragging, wheeling } = toRefs(state);
|
|
@@ -56,7 +61,7 @@ export function useDrawerWheel(args) {
|
|
|
56
61
|
dispatchEvent(startEvent);
|
|
57
62
|
wheeling.value = true;
|
|
58
63
|
} catch (e) {
|
|
59
|
-
|
|
64
|
+
logError(String(e));
|
|
60
65
|
return destroyWheelListener();
|
|
61
66
|
}
|
|
62
67
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { computed, toValue, toRefs } from "vue";
|
|
2
|
-
import { useMagicEmitter } from "@maas/vue-equipment/plugins";
|
|
2
|
+
import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
|
|
3
3
|
import { useDrawerState } from "./private/useDrawerState.mjs";
|
|
4
4
|
export function useMagicDrawer(id) {
|
|
5
5
|
const { initializeState } = useDrawerState(toValue(id));
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { useMagicError } from './src/composables/useMagicError.js';
|
|
2
|
+
import { MagicError } from './src/class/MagicError.js';
|
|
3
|
+
import type { UseMagicErrorReturn } from './src/composables/useMagicError.js';
|
|
4
|
+
export { useMagicError, MagicError };
|
|
5
|
+
export type { UseMagicErrorReturn };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { defineNuxtModule, addImports } from "@nuxt/kit";
|
|
2
|
+
export default defineNuxtModule({
|
|
3
|
+
meta: {
|
|
4
|
+
name: "@maas/vue-equipment/nuxt/MagicError"
|
|
5
|
+
},
|
|
6
|
+
setup() {
|
|
7
|
+
addImports({
|
|
8
|
+
from: "@maas/vue-equipment/plugins/MagicError",
|
|
9
|
+
name: "useMagicError"
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
});
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@maas/magic-error",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"description": "Vue composable for centralized error handling with custom error classes",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"vue",
|
|
7
|
+
"composable",
|
|
8
|
+
"error",
|
|
9
|
+
"error-handling",
|
|
10
|
+
"typescript"
|
|
11
|
+
],
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"type": "module",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
17
|
+
"import": "./dist/index.js"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"main": "./dist/index.js",
|
|
21
|
+
"module": "./dist/index.js",
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
23
|
+
"files": [
|
|
24
|
+
"dist"
|
|
25
|
+
],
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "tsup",
|
|
28
|
+
"build:types": "tsup --dts-only",
|
|
29
|
+
"dev": "tsup --watch",
|
|
30
|
+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
|
31
|
+
"test": "vitest",
|
|
32
|
+
"test:coverage": "vitest --coverage"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"vue": "^3.0.0"
|
|
36
|
+
},
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@vue/tsconfig": "^0.5.1"
|
|
39
|
+
}
|
|
40
|
+
}
|
|
File without changes
|
|
File without changes
|