@aerogel/core 0.0.0-next.9a1c5ba39a454b316eba36ec7bdf579fed3d95d2 → 0.0.0-next.9d1e54cc195274e9dd7d57a73fcb8a9a51927dcb

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.
Files changed (159) hide show
  1. package/dist/aerogel-core.css +1 -0
  2. package/dist/aerogel-core.d.ts +1309 -1587
  3. package/dist/aerogel-core.js +2637 -1991
  4. package/dist/aerogel-core.js.map +1 -1
  5. package/package.json +10 -2
  6. package/src/components/AppLayout.vue +14 -0
  7. package/src/components/{AGAppModals.vue → AppModals.vue} +2 -3
  8. package/src/components/AppOverlays.vue +9 -0
  9. package/src/components/AppToasts.vue +16 -0
  10. package/src/components/contracts/AlertModal.ts +19 -0
  11. package/src/components/contracts/Button.ts +16 -0
  12. package/src/components/contracts/ConfirmModal.ts +48 -0
  13. package/src/components/contracts/DropdownMenu.ts +25 -0
  14. package/src/components/contracts/ErrorReportModal.ts +33 -0
  15. package/src/components/contracts/Input.ts +26 -0
  16. package/src/components/contracts/LoadingModal.ts +26 -0
  17. package/src/components/contracts/Modal.ts +15 -10
  18. package/src/components/contracts/PromptModal.ts +34 -0
  19. package/src/components/contracts/Select.ts +45 -0
  20. package/src/components/contracts/Toast.ts +15 -0
  21. package/src/components/contracts/index.ts +10 -1
  22. package/src/components/headless/HeadlessButton.vue +51 -0
  23. package/src/components/headless/HeadlessInput.vue +59 -0
  24. package/src/components/headless/{forms/AGHeadlessInputDescription.vue → HeadlessInputDescription.vue} +6 -7
  25. package/src/components/headless/{forms/AGHeadlessInputError.vue → HeadlessInputError.vue} +2 -6
  26. package/src/components/headless/{forms/AGHeadlessInputInput.vue → HeadlessInputInput.vue} +16 -25
  27. package/src/components/headless/{forms/AGHeadlessInputLabel.vue → HeadlessInputLabel.vue} +2 -6
  28. package/src/components/headless/{forms/AGHeadlessInputTextArea.vue → HeadlessInputTextArea.vue} +9 -12
  29. package/src/components/headless/HeadlessModal.vue +57 -0
  30. package/src/components/headless/HeadlessModalContent.vue +30 -0
  31. package/src/components/headless/HeadlessModalDescription.vue +12 -0
  32. package/src/components/headless/HeadlessModalOverlay.vue +12 -0
  33. package/src/components/headless/HeadlessModalTitle.vue +12 -0
  34. package/src/components/headless/HeadlessSelect.vue +120 -0
  35. package/src/components/headless/{forms/AGHeadlessSelectError.vue → HeadlessSelectError.vue} +3 -4
  36. package/src/components/headless/HeadlessSelectLabel.vue +25 -0
  37. package/src/components/headless/HeadlessSelectOption.vue +34 -0
  38. package/src/components/headless/HeadlessSelectOptions.vue +42 -0
  39. package/src/components/headless/HeadlessSelectTrigger.vue +22 -0
  40. package/src/components/headless/HeadlessSelectValue.vue +18 -0
  41. package/src/components/headless/HeadlessToast.vue +18 -0
  42. package/src/components/headless/HeadlessToastAction.vue +13 -0
  43. package/src/components/headless/index.ts +19 -3
  44. package/src/components/index.ts +5 -10
  45. package/src/components/ui/AdvancedOptions.vue +18 -0
  46. package/src/components/ui/AlertModal.vue +17 -0
  47. package/src/components/ui/Button.vue +100 -0
  48. package/src/components/ui/Checkbox.vue +56 -0
  49. package/src/components/ui/ConfirmModal.vue +50 -0
  50. package/src/components/ui/DropdownMenu.vue +32 -0
  51. package/src/components/ui/DropdownMenuOption.vue +22 -0
  52. package/src/components/ui/DropdownMenuOptions.vue +44 -0
  53. package/src/components/ui/EditableContent.vue +82 -0
  54. package/src/components/ui/ErrorLogs.vue +19 -0
  55. package/src/components/ui/ErrorLogsModal.vue +48 -0
  56. package/src/components/ui/ErrorMessage.vue +15 -0
  57. package/src/components/ui/ErrorReportModal.vue +73 -0
  58. package/src/components/{modals/AGErrorReportModalButtons.vue → ui/ErrorReportModalButtons.vue} +28 -21
  59. package/src/components/ui/ErrorReportModalTitle.vue +24 -0
  60. package/src/components/{forms/AGForm.vue → ui/Form.vue} +4 -5
  61. package/src/components/ui/Input.vue +56 -0
  62. package/src/components/ui/Link.vue +12 -0
  63. package/src/components/ui/LoadingModal.vue +34 -0
  64. package/src/components/ui/Markdown.vue +85 -0
  65. package/src/components/ui/Modal.vue +123 -0
  66. package/src/components/{modals/AGModalContext.vue → ui/ModalContext.vue} +8 -9
  67. package/src/components/ui/ProgressBar.vue +51 -0
  68. package/src/components/ui/PromptModal.vue +38 -0
  69. package/src/components/ui/Select.vue +27 -0
  70. package/src/components/ui/SelectLabel.vue +17 -0
  71. package/src/components/ui/SelectOption.vue +29 -0
  72. package/src/components/ui/SelectOptions.vue +35 -0
  73. package/src/components/ui/SelectTrigger.vue +29 -0
  74. package/src/components/ui/SettingsModal.vue +15 -0
  75. package/src/components/{lib/AGStartupCrash.vue → ui/StartupCrash.vue} +7 -7
  76. package/src/components/ui/Toast.vue +46 -0
  77. package/src/components/ui/index.ts +32 -0
  78. package/src/directives/measure.ts +11 -5
  79. package/src/errors/Errors.ts +22 -20
  80. package/src/forms/{Form.test.ts → FormController.test.ts} +32 -9
  81. package/src/forms/{Form.ts → FormController.ts} +28 -27
  82. package/src/forms/index.ts +2 -3
  83. package/src/forms/utils.ts +35 -35
  84. package/src/index.css +73 -0
  85. package/src/lang/index.ts +4 -0
  86. package/src/lang/settings/Language.vue +48 -0
  87. package/src/lang/settings/index.ts +10 -0
  88. package/src/services/App.state.ts +11 -1
  89. package/src/services/App.ts +9 -1
  90. package/src/services/Events.test.ts +8 -8
  91. package/src/services/Events.ts +2 -8
  92. package/src/services/index.ts +3 -0
  93. package/src/ui/UI.state.ts +7 -12
  94. package/src/ui/UI.ts +115 -106
  95. package/src/ui/index.ts +23 -24
  96. package/src/utils/classes.ts +41 -0
  97. package/src/utils/composition/events.ts +2 -4
  98. package/src/utils/composition/forms.ts +20 -4
  99. package/src/utils/composition/state.ts +11 -2
  100. package/src/utils/index.ts +3 -1
  101. package/src/utils/types.ts +3 -0
  102. package/src/utils/vue.ts +28 -129
  103. package/src/components/AGAppLayout.vue +0 -16
  104. package/src/components/AGAppOverlays.vue +0 -41
  105. package/src/components/AGAppSnackbars.vue +0 -13
  106. package/src/components/composition.ts +0 -23
  107. package/src/components/constants.ts +0 -8
  108. package/src/components/contracts/shared.ts +0 -9
  109. package/src/components/forms/AGButton.vue +0 -44
  110. package/src/components/forms/AGCheckbox.vue +0 -42
  111. package/src/components/forms/AGInput.vue +0 -42
  112. package/src/components/forms/AGSelect.story.vue +0 -46
  113. package/src/components/forms/AGSelect.vue +0 -54
  114. package/src/components/forms/index.ts +0 -5
  115. package/src/components/headless/forms/AGHeadlessButton.ts +0 -3
  116. package/src/components/headless/forms/AGHeadlessButton.vue +0 -62
  117. package/src/components/headless/forms/AGHeadlessInput.ts +0 -41
  118. package/src/components/headless/forms/AGHeadlessInput.vue +0 -70
  119. package/src/components/headless/forms/AGHeadlessSelect.ts +0 -42
  120. package/src/components/headless/forms/AGHeadlessSelect.vue +0 -77
  121. package/src/components/headless/forms/AGHeadlessSelectOption.ts +0 -4
  122. package/src/components/headless/forms/AGHeadlessSelectOption.vue +0 -31
  123. package/src/components/headless/forms/AGHeadlessSelectOptions.vue +0 -19
  124. package/src/components/headless/forms/AGHeadlessSelectTrigger.vue +0 -25
  125. package/src/components/headless/forms/composition.ts +0 -10
  126. package/src/components/headless/forms/index.ts +0 -17
  127. package/src/components/headless/modals/AGHeadlessModal.ts +0 -33
  128. package/src/components/headless/modals/AGHeadlessModal.vue +0 -88
  129. package/src/components/headless/modals/AGHeadlessModalContent.vue +0 -25
  130. package/src/components/headless/modals/index.ts +0 -5
  131. package/src/components/headless/snackbars/AGHeadlessSnackbar.vue +0 -10
  132. package/src/components/headless/snackbars/index.ts +0 -40
  133. package/src/components/lib/AGErrorMessage.vue +0 -16
  134. package/src/components/lib/AGLink.vue +0 -9
  135. package/src/components/lib/AGMarkdown.vue +0 -54
  136. package/src/components/lib/AGMeasured.vue +0 -16
  137. package/src/components/lib/AGProgressBar.vue +0 -55
  138. package/src/components/lib/index.ts +0 -6
  139. package/src/components/modals/AGAlertModal.ts +0 -18
  140. package/src/components/modals/AGAlertModal.vue +0 -14
  141. package/src/components/modals/AGConfirmModal.ts +0 -42
  142. package/src/components/modals/AGConfirmModal.vue +0 -27
  143. package/src/components/modals/AGErrorReportModal.ts +0 -49
  144. package/src/components/modals/AGErrorReportModal.vue +0 -54
  145. package/src/components/modals/AGErrorReportModalTitle.vue +0 -25
  146. package/src/components/modals/AGLoadingModal.ts +0 -29
  147. package/src/components/modals/AGLoadingModal.vue +0 -15
  148. package/src/components/modals/AGModal.vue +0 -40
  149. package/src/components/modals/AGModalContext.ts +0 -8
  150. package/src/components/modals/AGModalTitle.vue +0 -9
  151. package/src/components/modals/AGPromptModal.ts +0 -41
  152. package/src/components/modals/AGPromptModal.vue +0 -35
  153. package/src/components/modals/index.ts +0 -16
  154. package/src/components/snackbars/AGSnackbar.vue +0 -36
  155. package/src/components/snackbars/index.ts +0 -3
  156. package/src/components/utils.ts +0 -63
  157. package/src/forms/composition.ts +0 -6
  158. package/src/utils/tailwindcss.test.ts +0 -26
  159. package/src/utils/tailwindcss.ts +0 -7
@@ -1,5 +0,0 @@
1
- export { DialogTitle as AGHeadlessModalTitle } from 'reka-ui';
2
-
3
- export * from './AGHeadlessModal';
4
- export { default as AGHeadlessModal } from './AGHeadlessModal.vue';
5
- export { default as AGHeadlessModalContent } from './AGHeadlessModalContent.vue';
@@ -1,10 +0,0 @@
1
- <template>
2
- <div class="pointer-events-auto">
3
- <slot />
4
- </div>
5
- </template>
6
-
7
- <script setup lang="ts">
8
- // Stub import to fix build (otherwise, this file doesn't seem to be treated as a module).
9
- import 'virtual:aerogel';
10
- </script>
@@ -1,40 +0,0 @@
1
- import type { ExtractPropTypes } from 'vue';
2
- import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
3
-
4
- import UI from '@aerogel/core/ui/UI';
5
- import { arrayProp, enumProp, requiredStringProp } from '@aerogel/core/utils/vue';
6
- import { Colors } from '@aerogel/core/components/constants';
7
- import { objectWithout } from '@noeldemartin/utils';
8
-
9
- export { default as AGHeadlessSnackbar } from './AGHeadlessSnackbar.vue';
10
-
11
- export const SnackbarColors = objectWithout(Colors, ['Primary', 'Clear']);
12
- export const snackbarProps = {
13
- id: requiredStringProp(),
14
- message: requiredStringProp(),
15
- actions: arrayProp<SnackbarAction>(() => []),
16
- color: enumProp(SnackbarColors, Colors.Secondary),
17
- };
18
-
19
- export interface SnackbarAction {
20
- text: string;
21
- dismiss?: boolean;
22
- handler?(): unknown;
23
- }
24
-
25
- export type SnackbarColor = (typeof SnackbarColors)[keyof typeof SnackbarColors];
26
- export type AGSnackbarProps = ObjectWithoutEmpty<ExtractPropTypes<typeof snackbarProps>>;
27
-
28
- export function useSnackbarProps(): typeof snackbarProps {
29
- return snackbarProps;
30
- }
31
-
32
- // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
33
- export function useSnackbar(props: ExtractPropTypes<typeof snackbarProps>) {
34
- function activate(action: SnackbarAction): void {
35
- action.handler?.();
36
- action.dismiss && UI.hideSnackbar(props.id);
37
- }
38
-
39
- return { activate };
40
- }
@@ -1,16 +0,0 @@
1
- <template>
2
- <AGMarkdown :text="message" inline />
3
- </template>
4
-
5
- <script setup lang="ts">
6
- import { computed } from 'vue';
7
-
8
- import { requiredObjectProp } from '@aerogel/core/utils/vue';
9
- import { getErrorMessage } from '@aerogel/core/errors/utils';
10
- import type { ErrorSource } from '@aerogel/core/errors/Errors.state';
11
-
12
- import AGMarkdown from './AGMarkdown.vue';
13
-
14
- const props = defineProps({ error: requiredObjectProp<ErrorSource>() });
15
- const message = computed(() => getErrorMessage(props.error));
16
- </script>
@@ -1,9 +0,0 @@
1
- <template>
2
- <AGHeadlessButton class="font-medium hover:underline">
3
- <slot />
4
- </AGHeadlessButton>
5
- </template>
6
-
7
- <script setup lang="ts">
8
- import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
9
- </script>
@@ -1,54 +0,0 @@
1
- <template>
2
- <root />
3
- </template>
4
-
5
- <script setup lang="ts">
6
- import { computed, h, useAttrs } from 'vue';
7
- import { isInstanceOf } from '@noeldemartin/utils';
8
-
9
- import { renderMarkdown } from '@aerogel/core/utils/markdown';
10
- import { booleanProp, mixedProp, objectProp, stringProp } from '@aerogel/core/utils/vue';
11
- import { translate } from '@aerogel/core/lang';
12
-
13
- const props = defineProps({
14
- as: stringProp(),
15
- inline: booleanProp(),
16
- langKey: stringProp(),
17
- langParams: mixedProp<number | Record<string, unknown>>(),
18
- text: stringProp(),
19
- actions: objectProp<Record<string, () => unknown>>(),
20
- });
21
-
22
- const attrs = useAttrs();
23
- const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey, props.langParams ?? {})));
24
- const html = computed(() => {
25
- if (!markdown.value) {
26
- return null;
27
- }
28
-
29
- let renderedHtml = renderMarkdown(markdown.value);
30
-
31
- if (props.inline) {
32
- renderedHtml = renderedHtml.replace('<p>', '<span>').replace('</p>', '</span>');
33
- }
34
-
35
- return renderedHtml;
36
- });
37
- const root = () =>
38
- h(props.as ?? (props.inline ? 'span' : 'div'), {
39
- innerHTML: html.value,
40
- onClick,
41
- ...attrs,
42
- class: `${attrs.class ?? ''} ${props.inline ? '' : 'prose'}`,
43
- });
44
-
45
- async function onClick(event: Event) {
46
- const { target } = event;
47
-
48
- if (isInstanceOf(target, HTMLElement) && target.dataset.markdownAction) {
49
- props.actions?.[target.dataset.markdownAction]?.();
50
-
51
- return;
52
- }
53
- }
54
- </script>
@@ -1,16 +0,0 @@
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 '@aerogel/core/utils/vue';
11
-
12
- defineProps({ as: stringProp('span') });
13
-
14
- // TODO use v-measure.css
15
- const measured = ref(false);
16
- </script>
@@ -1,55 +0,0 @@
1
- <template>
2
- <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
3
- <div :class="barClasses" :style="`transform:translateX(-${(1 - renderedProgress) * 100}%)`" />
4
- <span class="sr-only">
5
- {{
6
- $td('ui.progress', '{progress}% complete', {
7
- progress: renderedProgress * 100,
8
- })
9
- }}
10
- </span>
11
- </div>
12
- </template>
13
-
14
- <script setup lang="ts">
15
- import { computed, onUnmounted, ref, watch } from 'vue';
16
-
17
- import { numberProp, objectProp, stringProp } from '@aerogel/core/utils/vue';
18
- import type { Job } from '@aerogel/core/jobs';
19
-
20
- const props = defineProps({
21
- progress: numberProp(),
22
- barClass: stringProp(''),
23
- job: objectProp<Job>(),
24
- });
25
-
26
- let cleanup: Function | undefined;
27
- const jobProgress = ref(0);
28
- const barClasses = computed(() => {
29
- const classes = props.barClass ?? '';
30
-
31
- return `size-full transition-transform duration-500 ease-linear ${
32
- classes.includes('bg-') ? classes : `${classes} bg-gray-700`
33
- }`;
34
- });
35
- const renderedProgress = computed(() => {
36
- if (typeof props.progress === 'number') {
37
- return props.progress;
38
- }
39
-
40
- return jobProgress.value;
41
- });
42
-
43
- watch(
44
- () => props.job,
45
- () => {
46
- cleanup?.();
47
-
48
- jobProgress.value = props.job?.progress ?? 0;
49
- cleanup = props.job?.listeners.add({ onUpdated: (progress) => (jobProgress.value = progress) });
50
- },
51
- { immediate: true },
52
- );
53
-
54
- onUnmounted(() => cleanup?.());
55
- </script>
@@ -1,6 +0,0 @@
1
- export { default as AGErrorMessage } from './AGErrorMessage.vue';
2
- export { default as AGLink } from './AGLink.vue';
3
- export { default as AGMarkdown } from './AGMarkdown.vue';
4
- export { default as AGMeasured } from './AGMeasured.vue';
5
- export { default as AGProgressBar } from './AGProgressBar.vue';
6
- export { default as AGStartupCrash } from './AGStartupCrash.vue';
@@ -1,18 +0,0 @@
1
- import type { ExtractPropTypes } from 'vue';
2
- import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
3
-
4
- import { requiredStringProp, stringProp } from '@aerogel/core/utils';
5
- import type { AcceptRefs } from '@aerogel/core/utils';
6
-
7
- export const alertModalProps = {
8
- title: stringProp(),
9
- message: requiredStringProp(),
10
- };
11
-
12
- export type AGAlertModalProps = Pretty<
13
- AcceptRefs<ObjectWithout<ExtractPropTypes<typeof alertModalProps>, null | undefined>>
14
- >;
15
-
16
- export function useAlertModalProps(): typeof alertModalProps {
17
- return alertModalProps;
18
- }
@@ -1,14 +0,0 @@
1
- <template>
2
- <AGModal :title="title">
3
- <AGMarkdown :text="message" />
4
- </AGModal>
5
- </template>
6
-
7
- <script setup lang="ts">
8
- import AGModal from './AGModal.vue';
9
- import { useAlertModalProps } from './AGAlertModal';
10
-
11
- import AGMarkdown from '../lib/AGMarkdown.vue';
12
-
13
- defineProps(useAlertModalProps());
14
- </script>
@@ -1,42 +0,0 @@
1
- import { computed } from 'vue';
2
- import type { ExtractPropTypes } from 'vue';
3
- import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
4
-
5
- import { Colors } from '@aerogel/core/components/constants';
6
- import { booleanProp, enumProp, objectProp, requiredStringProp, stringProp } from '@aerogel/core/utils';
7
- import { translateWithDefault } from '@aerogel/core/lang';
8
- import type { AcceptRefs } from '@aerogel/core/utils';
9
- import type { ConfirmCheckboxes } from '@aerogel/core/ui';
10
-
11
- export const confirmModalProps = {
12
- title: stringProp(),
13
- message: requiredStringProp(),
14
- acceptText: stringProp(),
15
- acceptColor: enumProp(Colors, Colors.Primary),
16
- cancelText: stringProp(),
17
- cancelColor: enumProp(Colors, Colors.Clear),
18
- checkboxes: objectProp<ConfirmCheckboxes>(),
19
- actions: objectProp<Record<string, () => unknown>>(),
20
- required: booleanProp(false),
21
- };
22
-
23
- export type AGConfirmModalProps = Pretty<
24
- AcceptRefs<
25
- SubPartial<
26
- ObjectWithout<ExtractPropTypes<typeof confirmModalProps>, null | undefined>,
27
- 'acceptColor' | 'cancelColor'
28
- >
29
- >
30
- >;
31
-
32
- export function useConfirmModalProps(): typeof confirmModalProps {
33
- return confirmModalProps;
34
- }
35
-
36
- // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
37
- export function useConfirmModal(props: ExtractPropTypes<typeof confirmModalProps>) {
38
- const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
39
- const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
40
-
41
- return { renderedAcceptText, renderedCancelText };
42
- }
@@ -1,27 +0,0 @@
1
- <template>
2
- <AGModal v-slot="{ close }: IModalDefaultSlotProps" :cancellable="false" :title="title">
3
- <AGMarkdown :text="message" :actions="actions" />
4
-
5
- <div class="mt-2 flex flex-row-reverse gap-2">
6
- <AGButton :color="acceptColor" @click="close(true)">
7
- {{ renderedAcceptText }}
8
- </AGButton>
9
- <AGButton v-if="!required" :color="cancelColor" @click="close()">
10
- {{ renderedCancelText }}
11
- </AGButton>
12
- </div>
13
- </AGModal>
14
- </template>
15
-
16
- <script setup lang="ts">
17
- import type { IModalDefaultSlotProps } from '@aerogel/core/components/contracts/Modal';
18
-
19
- import AGModal from './AGModal.vue';
20
- import { useConfirmModal, useConfirmModalProps } from './AGConfirmModal';
21
-
22
- import AGButton from '../forms/AGButton.vue';
23
- import AGMarkdown from '../lib/AGMarkdown.vue';
24
-
25
- const props = defineProps(useConfirmModalProps());
26
- const { renderedAcceptText, renderedCancelText } = useConfirmModal(props);
27
- </script>
@@ -1,49 +0,0 @@
1
- import { computed, ref } from 'vue';
2
- import type { Component, ExtractPropTypes } from 'vue';
3
- import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
4
-
5
- import { requiredArrayProp } from '@aerogel/core/utils/vue';
6
- import { translateWithDefault } from '@aerogel/core/lang';
7
- import type { AcceptRefs } from '@aerogel/core/utils/vue';
8
- import type { ErrorReport } from '@aerogel/core/errors';
9
-
10
- export interface IAGErrorReportModalButtonsDefaultSlotProps {
11
- id: string;
12
- description: string;
13
- iconComponent: Component;
14
- url?: string;
15
- handler?(): void;
16
- }
17
-
18
- export const errorReportModalProps = {
19
- reports: requiredArrayProp<ErrorReport>(),
20
- };
21
-
22
- export type AGErrorReportModalProps = Pretty<
23
- AcceptRefs<ObjectWithout<ExtractPropTypes<typeof errorReportModalProps>, null | undefined>>
24
- >;
25
-
26
- export function useErrorReportModalProps(): typeof errorReportModalProps {
27
- return errorReportModalProps;
28
- }
29
-
30
- // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
31
- export function useErrorReportModal(props: ExtractPropTypes<typeof errorReportModalProps>) {
32
- const activeReportIndex = ref(0);
33
- const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
34
- const details = computed(
35
- () =>
36
- report.value.details?.trim() ||
37
- translateWithDefault('errors.detailsEmpty', 'This error is missing a stacktrace.'),
38
- );
39
- const previousReportText = translateWithDefault('errors.previousReport', 'Show previous report');
40
- const nextReportText = translateWithDefault('errors.nextReport', 'Show next report');
41
-
42
- return {
43
- activeReportIndex,
44
- details,
45
- nextReportText,
46
- previousReportText,
47
- report,
48
- };
49
- }
@@ -1,54 +0,0 @@
1
- <template>
2
- <AGModal>
3
- <div>
4
- <h2 class="flex items-center justify-between text-lg font-medium">
5
- <div class="flex items-center">
6
- <AGErrorReportModalTitle
7
- :report="report"
8
- :current-report="activeReportIndex + 1"
9
- :total-reports="reports.length"
10
- />
11
- <template v-if="reports.length > 1">
12
- <AGButton
13
- color="clear"
14
- :disabled="activeReportIndex === 0"
15
- :title="previousReportText"
16
- :aria-label="previousReportText"
17
- @click="activeReportIndex--"
18
- >
19
- <IconCheveronLeft aria-hidden="true" class="size-4" />
20
- </AGButton>
21
- <AGButton
22
- color="clear"
23
- :disabled="activeReportIndex === reports.length - 1"
24
- :title="nextReportText"
25
- :aria-label="nextReportText"
26
- @click="activeReportIndex++"
27
- >
28
- <IconCheveronRight aria-hidden="true" class="size-4" />
29
- </AGButton>
30
- </template>
31
- </div>
32
- <AGErrorReportModalButtons :report="report" />
33
- </h2>
34
- <AGMarkdown v-if="report.description" :text="report.description" class="mt-2" />
35
- </div>
36
- <pre class="h-full overflow-auto bg-gray-200 p-4 text-xs text-red-900" v-text="details" />
37
- </AGModal>
38
- </template>
39
-
40
- <script setup lang="ts">
41
- import IconCheveronRight from '~icons/zondicons/cheveron-right';
42
- import IconCheveronLeft from '~icons/zondicons/cheveron-left';
43
-
44
- import { useErrorReportModal, useErrorReportModalProps } from './AGErrorReportModal';
45
-
46
- import AGButton from '../forms/AGButton.vue';
47
- import AGErrorReportModalButtons from './AGErrorReportModalButtons.vue';
48
- import AGErrorReportModalTitle from './AGErrorReportModalTitle.vue';
49
- import AGMarkdown from '../lib/AGMarkdown.vue';
50
- import AGModal from './AGModal.vue';
51
-
52
- const props = defineProps(useErrorReportModalProps());
53
- const { activeReportIndex, details, nextReportText, previousReportText, report } = useErrorReportModal(props);
54
- </script>
@@ -1,25 +0,0 @@
1
- <template>
2
- <AGMarkdown :text="text" inline />
3
- </template>
4
-
5
- <script setup lang="ts">
6
- import { computed } from 'vue';
7
-
8
- import { numberProp, requiredObjectProp } from '@aerogel/core/utils/vue';
9
- import type { ErrorReport } from '@aerogel/core/errors';
10
-
11
- import AGMarkdown from '../lib/AGMarkdown.vue';
12
-
13
- const props = defineProps({
14
- report: requiredObjectProp<ErrorReport>(),
15
- currentReport: numberProp(),
16
- totalReports: numberProp(),
17
- });
18
- const text = computed(() => {
19
- if (!props.totalReports || props.totalReports <= 1) {
20
- return props.report.title;
21
- }
22
-
23
- return `${props.report.title} (${props.currentReport}/${props.totalReports})`;
24
- });
25
- </script>
@@ -1,29 +0,0 @@
1
- import { computed } from 'vue';
2
- import type { ExtractPropTypes } from 'vue';
3
- import type { ObjectWithout } from '@noeldemartin/utils';
4
-
5
- import { numberProp, stringProp } from '@aerogel/core/utils';
6
- import { translateWithDefault } from '@aerogel/core/lang';
7
- import type { AcceptRefs } from '@aerogel/core/utils';
8
-
9
- export const loadingModalProps = {
10
- title: stringProp(),
11
- message: stringProp(),
12
- progress: numberProp(),
13
- };
14
-
15
- export type AGLoadingModalProps = AcceptRefs<
16
- ObjectWithout<ExtractPropTypes<typeof loadingModalProps>, null | undefined>
17
- >;
18
-
19
- export function useLoadingModalProps(): typeof loadingModalProps {
20
- return loadingModalProps;
21
- }
22
-
23
- // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
24
- export function useLoadingModal(props: ExtractPropTypes<typeof loadingModalProps>) {
25
- const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
26
- const showProgress = computed(() => typeof props.progress === 'number');
27
-
28
- return { renderedMessage, showProgress };
29
- }
@@ -1,15 +0,0 @@
1
- <template>
2
- <AGModal :cancellable="false">
3
- <AGMarkdown :text="renderedMessage" />
4
- </AGModal>
5
- </template>
6
-
7
- <script setup lang="ts">
8
- import AGModal from './AGModal.vue';
9
- import { useLoadingModal, useLoadingModalProps } from './AGLoadingModal';
10
-
11
- import AGMarkdown from '../lib/AGMarkdown.vue';
12
-
13
- const props = defineProps(useLoadingModalProps());
14
- const { renderedMessage } = useLoadingModal(props);
15
- </script>
@@ -1,40 +0,0 @@
1
- <template>
2
- <AGHeadlessModal
3
- ref="$modal"
4
- v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
5
- v-bind="props"
6
- class="relative"
7
- >
8
- <AGHeadlessModalContent
9
- class="fixed top-1/2 left-1/2 z-50 max-w-lg -translate-x-1/2 -translate-y-1/2 bg-white p-4"
10
- >
11
- <AGHeadlessModalTitle v-if="title" class="mb-2 text-lg font-semibold">
12
- <AGMarkdown :text="title" inline />
13
- </AGHeadlessModalTitle>
14
- <div class="flex max-h-full flex-col overflow-auto" v-bind="$attrs">
15
- <slot :close="close" />
16
- </div>
17
- </AGHeadlessModalContent>
18
- </AGHeadlessModal>
19
- </template>
20
-
21
- <script setup lang="ts">
22
- import { ref } from 'vue';
23
-
24
- import { AGHeadlessModalTitle } from '@aerogel/core/components/headless/modals';
25
- import { modalExpose, modalProps } from '@aerogel/core/components/headless/modals/AGHeadlessModal';
26
- import type {
27
- IAGHeadlessModal,
28
- IAGHeadlessModalDefaultSlotProps,
29
- } from '@aerogel/core/components/headless/modals/AGHeadlessModal';
30
-
31
- import AGHeadlessModal from '../headless/modals/AGHeadlessModal.vue';
32
- import AGHeadlessModalContent from '../headless/modals/AGHeadlessModalContent.vue';
33
- import AGMarkdown from '../lib/AGMarkdown.vue';
34
-
35
- const props = defineProps(modalProps());
36
- const $modal = ref<IAGHeadlessModal>();
37
-
38
- defineOptions({ inheritAttrs: false });
39
- defineExpose(modalExpose($modal));
40
- </script>
@@ -1,8 +0,0 @@
1
- import type { Ref } from 'vue';
2
-
3
- import type { Modal } from '@aerogel/core/ui/UI.state';
4
-
5
- export interface IAGModalContext {
6
- modal: Ref<Modal>;
7
- childIndex: Ref<number>;
8
- }
@@ -1,9 +0,0 @@
1
- <template>
2
- <AGHeadlessModalTitle class="mb-2 font-semibold">
3
- <slot />
4
- </AGHeadlessModalTitle>
5
- </template>
6
-
7
- <script setup lang="ts">
8
- import { AGHeadlessModalTitle } from '@aerogel/core/components/headless/modals';
9
- </script>
@@ -1,41 +0,0 @@
1
- import { computed } from 'vue';
2
- import type { ExtractPropTypes } from 'vue';
3
- import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
4
-
5
- import { Colors } from '@aerogel/core/components/constants';
6
- import { enumProp, requiredStringProp, stringProp } from '@aerogel/core/utils';
7
- import { translateWithDefault } from '@aerogel/core/lang';
8
- import type { AcceptRefs } from '@aerogel/core/utils';
9
-
10
- export const promptModalProps = {
11
- title: stringProp(),
12
- message: requiredStringProp(),
13
- label: stringProp(),
14
- defaultValue: stringProp(),
15
- placeholder: stringProp(),
16
- acceptText: stringProp(),
17
- acceptColor: enumProp(Colors, Colors.Primary),
18
- cancelText: stringProp(),
19
- cancelColor: enumProp(Colors, Colors.Clear),
20
- };
21
-
22
- export type AGPromptModalProps = Pretty<
23
- AcceptRefs<
24
- SubPartial<
25
- ObjectWithout<ExtractPropTypes<typeof promptModalProps>, null | undefined>,
26
- 'acceptColor' | 'cancelColor'
27
- >
28
- >
29
- >;
30
-
31
- export function usePromptModalProps(): typeof promptModalProps {
32
- return promptModalProps;
33
- }
34
-
35
- // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
36
- export function usePromptModal(props: ExtractPropTypes<typeof promptModalProps>) {
37
- const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
38
- const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
39
-
40
- return { renderedAcceptText, renderedCancelText };
41
- }
@@ -1,35 +0,0 @@
1
- <template>
2
- <AGModal v-slot="{ close }: IModalDefaultSlotProps" :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 :color="acceptColor" submit>
10
- {{ renderedAcceptText }}
11
- </AGButton>
12
- <AGButton :color="cancelColor" @click="close()">
13
- {{ renderedCancelText }}
14
- </AGButton>
15
- </div>
16
- </AGForm>
17
- </AGModal>
18
- </template>
19
-
20
- <script setup lang="ts">
21
- import type { IModalDefaultSlotProps } from '@aerogel/core/components/contracts/Modal';
22
-
23
- import AGModal from './AGModal.vue';
24
- import { usePromptModal, usePromptModalProps } from './AGPromptModal';
25
-
26
- import AGButton from '../forms/AGButton.vue';
27
- import AGForm from '../forms/AGForm.vue';
28
- import AGInput from '../forms/AGInput.vue';
29
- import AGMarkdown from '../lib/AGMarkdown.vue';
30
- import { requiredStringInput, useForm } from '../../forms';
31
-
32
- const props = defineProps(usePromptModalProps());
33
- const form = useForm({ draft: requiredStringInput(props.defaultValue ?? '') });
34
- const { renderedAcceptText, renderedCancelText } = usePromptModal(props);
35
- </script>
@@ -1,16 +0,0 @@
1
- export * from './AGAlertModal';
2
- export * from './AGConfirmModal';
3
- export * from './AGErrorReportModal';
4
- export * from './AGLoadingModal';
5
- export * from './AGModalContext';
6
- export * from './AGPromptModal';
7
-
8
- export { default as AGAlertModal } from './AGAlertModal.vue';
9
- export { default as AGConfirmModal } from './AGConfirmModal.vue';
10
- export { default as AGErrorReportModalButtons } from './AGErrorReportModalButtons.vue';
11
- export { default as AGErrorReportModalTitle } from './AGErrorReportModalTitle.vue';
12
- export { default as AGLoadingModal } from './AGLoadingModal.vue';
13
- export { default as AGModal } from './AGModal.vue';
14
- export { default as AGModalContext } from './AGModalContext.vue';
15
- export { default as AGModalTitle } from './AGModalTitle.vue';
16
- export { default as AGPromptModal } from './AGPromptModal.vue';