@aerogel/core 0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c → 0.0.0-next.9a02fcd3bcf698211dd7a71d4c48257c96dd7832
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/aerogel-core.cjs.js +1 -1
- package/dist/aerogel-core.cjs.js.map +1 -1
- package/dist/aerogel-core.d.ts +553 -113
- package/dist/aerogel-core.esm.js +1 -1
- package/dist/aerogel-core.esm.js.map +1 -1
- package/package.json +2 -2
- package/src/bootstrap/bootstrap.test.ts +3 -3
- package/src/bootstrap/index.ts +16 -5
- package/src/bootstrap/options.ts +3 -0
- package/src/components/AGAppLayout.vue +3 -2
- package/src/components/AGAppOverlays.vue +5 -1
- package/src/components/forms/AGCheckbox.vue +7 -1
- package/src/components/forms/AGInput.vue +8 -6
- package/src/components/forms/AGSelect.story.vue +21 -3
- package/src/components/forms/AGSelect.vue +10 -3
- package/src/components/headless/forms/AGHeadlessButton.vue +8 -8
- package/src/components/headless/forms/AGHeadlessInput.ts +5 -10
- package/src/components/headless/forms/AGHeadlessInputInput.vue +2 -0
- package/src/components/headless/forms/AGHeadlessSelect.ts +20 -22
- package/src/components/headless/forms/AGHeadlessSelect.vue +23 -22
- package/src/components/headless/forms/AGHeadlessSelectOption.vue +6 -6
- package/src/components/headless/modals/AGHeadlessModal.ts +19 -1
- package/src/components/headless/modals/AGHeadlessModal.vue +3 -5
- package/src/components/headless/snackbars/index.ts +23 -8
- package/src/components/lib/AGErrorMessage.vue +2 -2
- package/src/components/lib/AGMeasured.vue +15 -0
- package/src/components/lib/index.ts +1 -0
- package/src/components/modals/AGAlertModal.ts +15 -0
- package/src/components/modals/AGAlertModal.vue +3 -14
- package/src/components/modals/AGConfirmModal.ts +17 -0
- package/src/components/modals/AGConfirmModal.vue +6 -10
- package/src/components/modals/AGErrorReportModal.ts +27 -1
- package/src/components/modals/AGErrorReportModal.vue +7 -15
- package/src/components/modals/AGErrorReportModalButtons.vue +4 -2
- package/src/components/modals/AGLoadingModal.ts +14 -0
- package/src/components/modals/AGLoadingModal.vue +3 -7
- package/src/components/modals/AGModal.vue +14 -12
- package/src/components/modals/AGPromptModal.ts +30 -0
- package/src/components/modals/AGPromptModal.vue +34 -0
- package/src/components/modals/index.ts +11 -19
- package/src/components/snackbars/AGSnackbar.vue +2 -8
- package/src/components/utils.ts +10 -0
- package/src/directives/index.ts +3 -1
- package/src/directives/measure.ts +12 -0
- package/src/errors/Errors.ts +26 -24
- package/src/errors/index.ts +2 -11
- package/src/errors/utils.ts +19 -0
- package/src/forms/Form.ts +1 -0
- package/src/jobs/Job.ts +5 -0
- package/src/jobs/index.ts +7 -0
- package/src/lang/Lang.ts +11 -23
- package/src/main.ts +2 -0
- package/src/services/App.state.ts +1 -2
- package/src/services/App.ts +21 -3
- package/src/services/Events.test.ts +39 -0
- package/src/services/Events.ts +100 -30
- package/src/services/Service.ts +42 -12
- package/src/services/index.ts +2 -1
- package/src/services/store.ts +8 -5
- package/src/testing/index.ts +25 -0
- package/src/ui/UI.ts +98 -15
- package/src/ui/index.ts +8 -3
- package/src/utils/composition/events.ts +1 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/tailwindcss.test.ts +26 -0
- package/src/utils/tailwindcss.ts +7 -0
- package/src/utils/vue.ts +10 -1
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
<script setup lang="ts">
|
|
6
6
|
import { computed } from 'vue';
|
|
7
7
|
|
|
8
|
-
import Errors from '@/errors/Errors';
|
|
9
8
|
import { requiredObjectProp } from '@/utils/vue';
|
|
9
|
+
import { getErrorMessage } from '@/errors/utils';
|
|
10
10
|
import type { ErrorSource } from '@/errors/Errors.state';
|
|
11
11
|
|
|
12
12
|
import AGMarkdown from './AGMarkdown.vue';
|
|
13
13
|
|
|
14
14
|
const props = defineProps({ error: requiredObjectProp<ErrorSource>() });
|
|
15
|
-
const message = computed(() =>
|
|
15
|
+
const message = computed(() => getErrorMessage(props.error));
|
|
16
16
|
</script>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<component :is="as" v-measure="() => (measured = true)" :class="{ '!invisible !absolute !w-auto': !measured }">
|
|
3
|
+
<slot />
|
|
4
|
+
</component>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script setup lang="ts">
|
|
8
|
+
import { ref } from 'vue';
|
|
9
|
+
|
|
10
|
+
import { stringProp } from '@/utils/vue';
|
|
11
|
+
|
|
12
|
+
defineProps({ as: stringProp('span') });
|
|
13
|
+
|
|
14
|
+
const measured = ref(false);
|
|
15
|
+
</script>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as AGErrorMessage } from './AGErrorMessage.vue';
|
|
2
2
|
export { default as AGLink } from './AGLink.vue';
|
|
3
3
|
export { default as AGMarkdown } from './AGMarkdown.vue';
|
|
4
|
+
export { default as AGMeasured } from './AGMeasured.vue';
|
|
4
5
|
export { default as AGStartupCrash } from './AGStartupCrash.vue';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ExtractPropTypes } from 'vue';
|
|
2
|
+
import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
|
|
3
|
+
|
|
4
|
+
import { requiredStringProp, stringProp } from '@/utils';
|
|
5
|
+
|
|
6
|
+
export const alertModalProps = {
|
|
7
|
+
title: stringProp(),
|
|
8
|
+
message: requiredStringProp(),
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export type AGAlertModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof alertModalProps>>;
|
|
12
|
+
|
|
13
|
+
export function useAlertModalProps(): typeof alertModalProps {
|
|
14
|
+
return alertModalProps;
|
|
15
|
+
}
|
|
@@ -1,25 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<AGModal>
|
|
3
|
-
<AGMarkdown
|
|
4
|
-
v-if="title"
|
|
5
|
-
:text="title"
|
|
6
|
-
as="h2"
|
|
7
|
-
class="font-semibold"
|
|
8
|
-
inline
|
|
9
|
-
/>
|
|
2
|
+
<AGModal :title="title">
|
|
10
3
|
<AGMarkdown :text="message" />
|
|
11
4
|
</AGModal>
|
|
12
5
|
</template>
|
|
13
6
|
|
|
14
7
|
<script setup lang="ts">
|
|
15
|
-
import { requiredStringProp, stringProp } from '@/utils/vue';
|
|
16
|
-
|
|
17
8
|
import AGModal from './AGModal.vue';
|
|
9
|
+
import { useAlertModalProps } from './AGAlertModal';
|
|
18
10
|
|
|
19
11
|
import AGMarkdown from '../lib/AGMarkdown.vue';
|
|
20
12
|
|
|
21
|
-
defineProps(
|
|
22
|
-
title: stringProp(),
|
|
23
|
-
message: requiredStringProp(),
|
|
24
|
-
});
|
|
13
|
+
defineProps(useAlertModalProps());
|
|
25
14
|
</script>
|
|
@@ -1,10 +1,27 @@
|
|
|
1
|
+
import { computed } from 'vue';
|
|
2
|
+
import type { ExtractPropTypes } from 'vue';
|
|
3
|
+
import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
|
|
4
|
+
|
|
1
5
|
import { requiredStringProp, stringProp } from '@/utils';
|
|
6
|
+
import { translateWithDefault } from '@/lang';
|
|
2
7
|
|
|
3
8
|
export const confirmModalProps = {
|
|
4
9
|
title: stringProp(),
|
|
5
10
|
message: requiredStringProp(),
|
|
11
|
+
acceptText: stringProp(),
|
|
12
|
+
cancelText: stringProp(),
|
|
6
13
|
};
|
|
7
14
|
|
|
15
|
+
export type AGConfirmModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof confirmModalProps>>;
|
|
16
|
+
|
|
8
17
|
export function useConfirmModalProps(): typeof confirmModalProps {
|
|
9
18
|
return confirmModalProps;
|
|
10
19
|
}
|
|
20
|
+
|
|
21
|
+
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
22
|
+
export function useConfirmModal(props: ExtractPropTypes<typeof confirmModalProps>) {
|
|
23
|
+
const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
|
|
24
|
+
const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
|
|
25
|
+
|
|
26
|
+
return { renderedAcceptText, renderedCancelText };
|
|
27
|
+
}
|
|
@@ -1,30 +1,26 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false">
|
|
3
|
-
<AGMarkdown v-if="title" :text="title" as="h1" />
|
|
2
|
+
<AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false" :title="title">
|
|
4
3
|
<AGMarkdown :text="message" />
|
|
5
4
|
|
|
6
5
|
<div class="mt-2 flex flex-row-reverse gap-2">
|
|
7
6
|
<AGButton @click="close(true)">
|
|
8
|
-
{{
|
|
7
|
+
{{ renderedAcceptText }}
|
|
9
8
|
</AGButton>
|
|
10
9
|
<AGButton color="secondary" @click="close()">
|
|
11
|
-
{{
|
|
10
|
+
{{ renderedCancelText }}
|
|
12
11
|
</AGButton>
|
|
13
12
|
</div>
|
|
14
13
|
</AGModal>
|
|
15
14
|
</template>
|
|
16
15
|
|
|
17
16
|
<script setup lang="ts">
|
|
18
|
-
import { requiredStringProp, stringProp } from '@/utils/vue';
|
|
19
|
-
|
|
20
17
|
import AGModal from './AGModal.vue';
|
|
18
|
+
import { useConfirmModal, useConfirmModalProps } from './AGConfirmModal';
|
|
21
19
|
import type { IAGModalDefaultSlotProps } from './AGModal';
|
|
22
20
|
|
|
23
21
|
import AGButton from '../forms/AGButton.vue';
|
|
24
22
|
import AGMarkdown from '../lib/AGMarkdown.vue';
|
|
25
23
|
|
|
26
|
-
defineProps(
|
|
27
|
-
|
|
28
|
-
message: requiredStringProp(),
|
|
29
|
-
});
|
|
24
|
+
const props = defineProps(useConfirmModalProps());
|
|
25
|
+
const { renderedAcceptText, renderedCancelText } = useConfirmModal(props);
|
|
30
26
|
</script>
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { computed, ref } from 'vue';
|
|
2
|
+
import type { Component, ExtractPropTypes } from 'vue';
|
|
3
|
+
import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
|
|
2
4
|
|
|
3
5
|
import { requiredArrayProp } from '@/utils/vue';
|
|
6
|
+
import { translateWithDefault } from '@/lang';
|
|
4
7
|
import type { ErrorReport } from '@/errors';
|
|
5
8
|
|
|
6
9
|
export interface IAGErrorReportModalButtonsDefaultSlotProps {
|
|
@@ -15,6 +18,29 @@ export const errorReportModalProps = {
|
|
|
15
18
|
reports: requiredArrayProp<ErrorReport>(),
|
|
16
19
|
};
|
|
17
20
|
|
|
21
|
+
export type AGErrorReportModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof errorReportModalProps>>;
|
|
22
|
+
|
|
18
23
|
export function useErrorReportModalProps(): typeof errorReportModalProps {
|
|
19
24
|
return errorReportModalProps;
|
|
20
25
|
}
|
|
26
|
+
|
|
27
|
+
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
28
|
+
export function useErrorReportModal(props: ExtractPropTypes<typeof errorReportModalProps>) {
|
|
29
|
+
const activeReportIndex = ref(0);
|
|
30
|
+
const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
|
|
31
|
+
const details = computed(
|
|
32
|
+
() =>
|
|
33
|
+
report.value.details?.trim() ||
|
|
34
|
+
translateWithDefault('errors.detailsEmpty', 'This error is missing a stacktrace.'),
|
|
35
|
+
);
|
|
36
|
+
const previousReportText = translateWithDefault('errors.previousReport', 'Show previous report');
|
|
37
|
+
const nextReportText = translateWithDefault('errors.nextReport', 'Show next report');
|
|
38
|
+
|
|
39
|
+
return {
|
|
40
|
+
activeReportIndex,
|
|
41
|
+
details,
|
|
42
|
+
nextReportText,
|
|
43
|
+
previousReportText,
|
|
44
|
+
report,
|
|
45
|
+
};
|
|
46
|
+
}
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
<AGButton
|
|
13
13
|
color="clear"
|
|
14
14
|
:disabled="activeReportIndex === 0"
|
|
15
|
-
:title="
|
|
16
|
-
:aria-label="
|
|
15
|
+
:title="previousReportText"
|
|
16
|
+
:aria-label="previousReportText"
|
|
17
17
|
@click="activeReportIndex--"
|
|
18
18
|
>
|
|
19
19
|
<IconCheveronLeft aria-hidden="true" class="h-4 w-4" />
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
<AGButton
|
|
22
22
|
color="clear"
|
|
23
23
|
:disabled="activeReportIndex === reports.length - 1"
|
|
24
|
-
:title="
|
|
25
|
-
:aria-label="
|
|
24
|
+
:title="nextReportText"
|
|
25
|
+
:aria-label="nextReportText"
|
|
26
26
|
@click="activeReportIndex++"
|
|
27
27
|
>
|
|
28
28
|
<IconCheveronRight aria-hidden="true" class="h-4 w-4" />
|
|
@@ -33,10 +33,7 @@
|
|
|
33
33
|
</h2>
|
|
34
34
|
<AGMarkdown v-if="report.description" :text="report.description" class="mt-2" />
|
|
35
35
|
</div>
|
|
36
|
-
<pre
|
|
37
|
-
class="h-full overflow-auto bg-gray-200 p-4 text-xs text-red-900"
|
|
38
|
-
v-text="report.details ?? $td('errors.detailsEmpty', 'This error is missing a stacktrace.')"
|
|
39
|
-
/>
|
|
36
|
+
<pre class="h-full overflow-auto bg-gray-200 p-4 text-xs text-red-900" v-text="details" />
|
|
40
37
|
</AGModal>
|
|
41
38
|
</template>
|
|
42
39
|
|
|
@@ -44,11 +41,7 @@
|
|
|
44
41
|
import IconCheveronRight from '~icons/zondicons/cheveron-right';
|
|
45
42
|
import IconCheveronLeft from '~icons/zondicons/cheveron-left';
|
|
46
43
|
|
|
47
|
-
import {
|
|
48
|
-
|
|
49
|
-
import type { ErrorReport } from '@/errors';
|
|
50
|
-
|
|
51
|
-
import { useErrorReportModalProps } from './AGErrorReportModal';
|
|
44
|
+
import { useErrorReportModal, useErrorReportModalProps } from './AGErrorReportModal';
|
|
52
45
|
|
|
53
46
|
import AGButton from '../forms/AGButton.vue';
|
|
54
47
|
import AGErrorReportModalButtons from './AGErrorReportModalButtons.vue';
|
|
@@ -57,6 +50,5 @@ import AGMarkdown from '../lib/AGMarkdown.vue';
|
|
|
57
50
|
import AGModal from './AGModal.vue';
|
|
58
51
|
|
|
59
52
|
const props = defineProps(useErrorReportModalProps());
|
|
60
|
-
const activeReportIndex =
|
|
61
|
-
const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
|
|
53
|
+
const { activeReportIndex, details, nextReportText, previousReportText, report } = useErrorReportModal(props);
|
|
62
54
|
</script>
|
|
@@ -79,10 +79,12 @@ const buttons = computed(() =>
|
|
|
79
79
|
description: 'Log to console',
|
|
80
80
|
iconComponent: IconConsole,
|
|
81
81
|
handler() {
|
|
82
|
-
|
|
82
|
+
const error = props.report.error ?? props.report;
|
|
83
|
+
|
|
84
|
+
(window as { error?: unknown }).error = error;
|
|
83
85
|
|
|
84
86
|
// eslint-disable-next-line no-console
|
|
85
|
-
console.error(
|
|
87
|
+
console.error(error);
|
|
86
88
|
|
|
87
89
|
UI.showSnackbar(
|
|
88
90
|
translateWithDefault(
|
|
@@ -1,9 +1,23 @@
|
|
|
1
|
+
import { computed } from 'vue';
|
|
2
|
+
import type { ExtractPropTypes } from 'vue';
|
|
3
|
+
import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
|
|
4
|
+
|
|
1
5
|
import { stringProp } from '@/utils';
|
|
6
|
+
import { translateWithDefault } from '@/lang';
|
|
2
7
|
|
|
3
8
|
export const loadingModalProps = {
|
|
4
9
|
message: stringProp(),
|
|
5
10
|
};
|
|
6
11
|
|
|
12
|
+
export type AGLoadingModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof loadingModalProps>>;
|
|
13
|
+
|
|
7
14
|
export function useLoadingModalProps(): typeof loadingModalProps {
|
|
8
15
|
return loadingModalProps;
|
|
9
16
|
}
|
|
17
|
+
|
|
18
|
+
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
19
|
+
export function useLoadingModal(props: ExtractPropTypes<typeof loadingModalProps>) {
|
|
20
|
+
const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
|
|
21
|
+
|
|
22
|
+
return { renderedMessage };
|
|
23
|
+
}
|
|
@@ -5,15 +5,11 @@
|
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
7
|
<script setup lang="ts">
|
|
8
|
-
import { computed } from 'vue';
|
|
9
|
-
|
|
10
|
-
import { stringProp } from '@/utils/vue';
|
|
11
|
-
import { translateWithDefault } from '@/lang/utils';
|
|
12
|
-
|
|
13
8
|
import AGModal from './AGModal.vue';
|
|
9
|
+
import { useLoadingModal, useLoadingModalProps } from './AGLoadingModal';
|
|
14
10
|
|
|
15
11
|
import AGMarkdown from '../lib/AGMarkdown.vue';
|
|
16
12
|
|
|
17
|
-
const props = defineProps(
|
|
18
|
-
const renderedMessage =
|
|
13
|
+
const props = defineProps(useLoadingModalProps());
|
|
14
|
+
const { renderedMessage } = useLoadingModal(props);
|
|
19
15
|
</script>
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<AGHeadlessModal
|
|
3
|
-
ref="$
|
|
3
|
+
ref="$modal"
|
|
4
4
|
v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
|
|
5
|
-
|
|
5
|
+
v-bind="props"
|
|
6
6
|
class="relative z-50"
|
|
7
7
|
>
|
|
8
8
|
<div class="fixed inset-0 flex items-center justify-center p-8">
|
|
9
|
-
<AGHeadlessModalPanel class="flex max-h-full max-w-full flex-col overflow-hidden bg-white">
|
|
10
|
-
<
|
|
9
|
+
<AGHeadlessModalPanel class="flex max-h-full max-w-full flex-col overflow-hidden bg-white p-4">
|
|
10
|
+
<AGHeadlessModalTitle v-if="title" class="mb-2 text-lg font-semibold">
|
|
11
|
+
<AGMarkdown :text="title" inline />
|
|
12
|
+
</AGHeadlessModalTitle>
|
|
13
|
+
<div class="flex max-h-full flex-col overflow-auto" v-bind="$attrs">
|
|
11
14
|
<slot :close="close" />
|
|
12
15
|
</div>
|
|
13
16
|
</AGHeadlessModalPanel>
|
|
@@ -16,22 +19,21 @@
|
|
|
16
19
|
</template>
|
|
17
20
|
|
|
18
21
|
<script setup lang="ts">
|
|
19
|
-
import {
|
|
22
|
+
import { ref } from 'vue';
|
|
20
23
|
|
|
21
|
-
import {
|
|
24
|
+
import { useModalExpose, useModalProps } from '@/components/headless/modals/AGHeadlessModal';
|
|
22
25
|
import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from '@/components/headless/modals/AGHeadlessModal';
|
|
23
26
|
|
|
24
27
|
import type { IAGModal } from './AGModal';
|
|
25
28
|
|
|
26
29
|
import AGHeadlessModal from '../headless/modals/AGHeadlessModal.vue';
|
|
27
30
|
import AGHeadlessModalPanel from '../headless/modals/AGHeadlessModalPanel.vue';
|
|
31
|
+
import AGHeadlessModalTitle from '../headless/modals/AGHeadlessModalTitle.vue';
|
|
32
|
+
import AGMarkdown from '../lib/AGMarkdown.vue';
|
|
28
33
|
|
|
29
|
-
const
|
|
34
|
+
const props = defineProps(useModalProps());
|
|
35
|
+
const $modal = ref<IAGHeadlessModal>();
|
|
30
36
|
|
|
31
37
|
defineOptions({ inheritAttrs: false });
|
|
32
|
-
|
|
33
|
-
defineExpose<IAGModal>({
|
|
34
|
-
close: async () => $headlessModal.value?.close(),
|
|
35
|
-
cancellable: computed(() => !!$headlessModal.value?.cancellable),
|
|
36
|
-
});
|
|
38
|
+
defineExpose<IAGModal>(useModalExpose($modal));
|
|
37
39
|
</script>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { computed } from 'vue';
|
|
2
|
+
import type { ExtractPropTypes } from 'vue';
|
|
3
|
+
import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
|
|
4
|
+
|
|
5
|
+
import { requiredStringProp, stringProp } from '@/utils';
|
|
6
|
+
import { translateWithDefault } from '@/lang';
|
|
7
|
+
|
|
8
|
+
export const promptModalProps = {
|
|
9
|
+
title: stringProp(),
|
|
10
|
+
message: requiredStringProp(),
|
|
11
|
+
label: stringProp(),
|
|
12
|
+
defaultValue: stringProp(),
|
|
13
|
+
placeholder: stringProp(),
|
|
14
|
+
acceptText: stringProp(),
|
|
15
|
+
cancelText: stringProp(),
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export type AGPromptModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof promptModalProps>>;
|
|
19
|
+
|
|
20
|
+
export function usePromptModalProps(): typeof promptModalProps {
|
|
21
|
+
return promptModalProps;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
25
|
+
export function usePromptModal(props: ExtractPropTypes<typeof promptModalProps>) {
|
|
26
|
+
const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
|
|
27
|
+
const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
|
|
28
|
+
|
|
29
|
+
return { renderedAcceptText, renderedCancelText };
|
|
30
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false" :title="title">
|
|
3
|
+
<AGMarkdown :text="message" />
|
|
4
|
+
|
|
5
|
+
<AGForm :form="form" @submit="close(form.draft)">
|
|
6
|
+
<AGInput name="draft" :placeholder="placeholder" :label="label" />
|
|
7
|
+
|
|
8
|
+
<div class="mt-2 flex flex-row-reverse gap-2">
|
|
9
|
+
<AGButton submit>
|
|
10
|
+
{{ renderedAcceptText }}
|
|
11
|
+
</AGButton>
|
|
12
|
+
<AGButton color="secondary" @click="close()">
|
|
13
|
+
{{ renderedCancelText }}
|
|
14
|
+
</AGButton>
|
|
15
|
+
</div>
|
|
16
|
+
</AGForm>
|
|
17
|
+
</AGModal>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<script setup lang="ts">
|
|
21
|
+
import AGModal from './AGModal.vue';
|
|
22
|
+
import { usePromptModal, usePromptModalProps } from './AGPromptModal';
|
|
23
|
+
import type { IAGModalDefaultSlotProps } from './AGModal';
|
|
24
|
+
|
|
25
|
+
import AGButton from '../forms/AGButton.vue';
|
|
26
|
+
import AGForm from '../forms/AGForm.vue';
|
|
27
|
+
import AGInput from '../forms/AGInput.vue';
|
|
28
|
+
import AGMarkdown from '../lib/AGMarkdown.vue';
|
|
29
|
+
import { requiredStringInput, useForm } from '../../forms';
|
|
30
|
+
|
|
31
|
+
const props = defineProps(usePromptModalProps());
|
|
32
|
+
const form = useForm({ draft: requiredStringInput(props.defaultValue ?? '') });
|
|
33
|
+
const { renderedAcceptText, renderedCancelText } = usePromptModal(props);
|
|
34
|
+
</script>
|
|
@@ -1,25 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
import AGConfirmModal from './AGConfirmModal.vue';
|
|
3
|
-
import AGErrorReportModalButtons from './AGErrorReportModalButtons.vue';
|
|
4
|
-
import AGErrorReportModalTitle from './AGErrorReportModalTitle.vue';
|
|
5
|
-
import AGLoadingModal from './AGLoadingModal.vue';
|
|
6
|
-
import AGModal from './AGModal.vue';
|
|
7
|
-
import AGModalTitle from './AGModalTitle.vue';
|
|
8
|
-
import AGModalContext from './AGModalContext.vue';
|
|
9
|
-
|
|
1
|
+
export * from './AGAlertModal';
|
|
10
2
|
export * from './AGConfirmModal';
|
|
11
3
|
export * from './AGErrorReportModal';
|
|
12
4
|
export * from './AGLoadingModal';
|
|
13
5
|
export * from './AGModal';
|
|
14
6
|
export * from './AGModalContext';
|
|
7
|
+
export * from './AGPromptModal';
|
|
15
8
|
|
|
16
|
-
export {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
};
|
|
9
|
+
export { default as AGAlertModal } from './AGAlertModal.vue';
|
|
10
|
+
export { default as AGConfirmModal } from './AGConfirmModal.vue';
|
|
11
|
+
export { default as AGErrorReportModalButtons } from './AGErrorReportModalButtons.vue';
|
|
12
|
+
export { default as AGErrorReportModalTitle } from './AGErrorReportModalTitle.vue';
|
|
13
|
+
export { default as AGLoadingModal } from './AGLoadingModal.vue';
|
|
14
|
+
export { default as AGModal } from './AGModal.vue';
|
|
15
|
+
export { default as AGModalContext } from './AGModalContext.vue';
|
|
16
|
+
export { default as AGModalTitle } from './AGModalTitle.vue';
|
|
17
|
+
export { default as AGPromptModal } from './AGPromptModal.vue';
|
|
@@ -15,16 +15,15 @@
|
|
|
15
15
|
<script setup lang="ts">
|
|
16
16
|
import { computed } from 'vue';
|
|
17
17
|
|
|
18
|
-
import UI from '@/ui/UI';
|
|
19
18
|
import { Colors } from '@/components/constants';
|
|
20
|
-
import { useSnackbarProps } from '@/components/headless';
|
|
21
|
-
import type { SnackbarAction } from '@/components/headless';
|
|
19
|
+
import { useSnackbar, useSnackbarProps } from '@/components/headless/snackbars';
|
|
22
20
|
|
|
23
21
|
import AGButton from '../forms/AGButton.vue';
|
|
24
22
|
import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';
|
|
25
23
|
import AGMarkdown from '../lib/AGMarkdown.vue';
|
|
26
24
|
|
|
27
25
|
const props = defineProps(useSnackbarProps());
|
|
26
|
+
const { activate } = useSnackbar(props);
|
|
28
27
|
const styleClasses = computed(() => {
|
|
29
28
|
switch (props.color) {
|
|
30
29
|
case Colors.Danger:
|
|
@@ -34,9 +33,4 @@ const styleClasses = computed(() => {
|
|
|
34
33
|
return 'bg-gray-900 text-white';
|
|
35
34
|
}
|
|
36
35
|
});
|
|
37
|
-
|
|
38
|
-
function activate(action: SnackbarAction): void {
|
|
39
|
-
action.handler?.();
|
|
40
|
-
action.dismiss && UI.hideSnackbar(props.id);
|
|
41
|
-
}
|
|
42
36
|
</script>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export function extractComponentProps<T extends Record<string, unknown>>(
|
|
2
|
+
values: Record<string, unknown>,
|
|
3
|
+
definitions: Record<string, unknown>,
|
|
4
|
+
): T {
|
|
5
|
+
return Object.keys(definitions).reduce((extracted, prop) => {
|
|
6
|
+
extracted[prop] = values[prop];
|
|
7
|
+
|
|
8
|
+
return extracted;
|
|
9
|
+
}, {} as Record<string, unknown>) as T;
|
|
10
|
+
}
|
package/src/directives/index.ts
CHANGED
|
@@ -3,9 +3,11 @@ import type { Directive } from 'vue';
|
|
|
3
3
|
import { definePlugin } from '@/plugins';
|
|
4
4
|
|
|
5
5
|
import initialFocus from './initial-focus';
|
|
6
|
+
import measure from './measure';
|
|
6
7
|
|
|
7
8
|
const builtInDirectives: Record<string, Directive> = {
|
|
8
9
|
'initial-focus': initialFocus,
|
|
10
|
+
'measure': measure,
|
|
9
11
|
};
|
|
10
12
|
|
|
11
13
|
export default definePlugin({
|
|
@@ -22,7 +24,7 @@ export default definePlugin({
|
|
|
22
24
|
});
|
|
23
25
|
|
|
24
26
|
declare module '@/bootstrap/options' {
|
|
25
|
-
interface AerogelOptions {
|
|
27
|
+
export interface AerogelOptions {
|
|
26
28
|
directives?: Record<string, Directive>;
|
|
27
29
|
}
|
|
28
30
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { defineDirective } from '@/utils/vue';
|
|
2
|
+
|
|
3
|
+
export default defineDirective({
|
|
4
|
+
mounted(element: HTMLElement, { value }: { value?: () => unknown }) {
|
|
5
|
+
const sizes = element.getBoundingClientRect();
|
|
6
|
+
|
|
7
|
+
element.style.setProperty('--width', `${sizes.width}px`);
|
|
8
|
+
element.style.setProperty('--height', `${sizes.height}px`);
|
|
9
|
+
|
|
10
|
+
value?.();
|
|
11
|
+
},
|
|
12
|
+
});
|
package/src/errors/Errors.ts
CHANGED
|
@@ -7,7 +7,10 @@ import { translateWithDefault } from '@/lang/utils';
|
|
|
7
7
|
|
|
8
8
|
import Service from './Errors.state';
|
|
9
9
|
import { Colors } from '@/components/constants';
|
|
10
|
+
import { Events } from '@/services';
|
|
11
|
+
import type { AGErrorReportModalProps } from '@/components/modals/AGErrorReportModal';
|
|
10
12
|
import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
|
|
13
|
+
import type { ModalComponent } from '@/ui/UI.state';
|
|
11
14
|
|
|
12
15
|
export class ErrorsService extends Service {
|
|
13
16
|
|
|
@@ -23,7 +26,7 @@ export class ErrorsService extends Service {
|
|
|
23
26
|
}
|
|
24
27
|
|
|
25
28
|
public async inspect(error: ErrorSource | ErrorReport[]): Promise<void> {
|
|
26
|
-
const reports = Array.isArray(error) ? error : [await this.createErrorReport(error)];
|
|
29
|
+
const reports = Array.isArray(error) ? (error as ErrorReport[]) : [await this.createErrorReport(error)];
|
|
27
30
|
|
|
28
31
|
if (reports.length === 0) {
|
|
29
32
|
UI.alert(translateWithDefault('errors.inspectEmpty', 'Nothing to inspect!'));
|
|
@@ -31,11 +34,19 @@ export class ErrorsService extends Service {
|
|
|
31
34
|
return;
|
|
32
35
|
}
|
|
33
36
|
|
|
34
|
-
UI.openModal(UI.requireComponent(UIComponents.ErrorReportModal), {
|
|
37
|
+
UI.openModal<ModalComponent<AGErrorReportModalProps>>(UI.requireComponent(UIComponents.ErrorReportModal), {
|
|
38
|
+
reports,
|
|
39
|
+
});
|
|
35
40
|
}
|
|
36
41
|
|
|
37
42
|
public async report(error: ErrorSource, message?: string): Promise<void> {
|
|
38
|
-
|
|
43
|
+
await Events.emit('error', { error, message });
|
|
44
|
+
|
|
45
|
+
if (App.testing) {
|
|
46
|
+
throw error;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
if (App.development) {
|
|
39
50
|
this.logError(error);
|
|
40
51
|
}
|
|
41
52
|
|
|
@@ -43,7 +54,7 @@ export class ErrorsService extends Service {
|
|
|
43
54
|
throw error;
|
|
44
55
|
}
|
|
45
56
|
|
|
46
|
-
if (!App.isMounted) {
|
|
57
|
+
if (!App.isMounted()) {
|
|
47
58
|
const startupError = await this.createStartupErrorReport(error);
|
|
48
59
|
|
|
49
60
|
if (startupError) {
|
|
@@ -70,9 +81,10 @@ export class ErrorsService extends Service {
|
|
|
70
81
|
text: translateWithDefault('errors.viewDetails', 'View details'),
|
|
71
82
|
dismiss: true,
|
|
72
83
|
handler: () =>
|
|
73
|
-
UI.openModal(
|
|
74
|
-
|
|
75
|
-
|
|
84
|
+
UI.openModal<ModalComponent<AGErrorReportModalProps>>(
|
|
85
|
+
UI.requireComponent(UIComponents.ErrorReportModal),
|
|
86
|
+
{ reports: [report] },
|
|
87
|
+
),
|
|
76
88
|
},
|
|
77
89
|
],
|
|
78
90
|
},
|
|
@@ -105,22 +117,6 @@ export class ErrorsService extends Service {
|
|
|
105
117
|
});
|
|
106
118
|
}
|
|
107
119
|
|
|
108
|
-
public getErrorMessage(error: ErrorSource): string {
|
|
109
|
-
if (typeof error === 'string') {
|
|
110
|
-
return error;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
if (error instanceof Error || error instanceof JSError) {
|
|
114
|
-
return error.message;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
if (isObject(error)) {
|
|
118
|
-
return toString(error['message'] ?? error['description'] ?? 'Unknown error object');
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
return translateWithDefault('errors.unknown', 'Unknown Error');
|
|
122
|
-
}
|
|
123
|
-
|
|
124
120
|
private logError(error: unknown): void {
|
|
125
121
|
// eslint-disable-next-line no-console
|
|
126
122
|
console.error(error);
|
|
@@ -180,4 +176,10 @@ export class ErrorsService extends Service {
|
|
|
180
176
|
|
|
181
177
|
}
|
|
182
178
|
|
|
183
|
-
export default facade(
|
|
179
|
+
export default facade(ErrorsService);
|
|
180
|
+
|
|
181
|
+
declare module '@/services/Events' {
|
|
182
|
+
export interface EventsPayload {
|
|
183
|
+
error: { error: ErrorSource; message?: string };
|
|
184
|
+
}
|
|
185
|
+
}
|