@aerogel/core 0.0.0-next.b85327579d32f21c6a9fa21142f0165cdd320d7e → 0.0.0-next.b9379d15fd4f40346d655134b49c9015ead9c536
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.css +1 -0
- package/dist/aerogel-core.d.ts +2310 -664
- package/dist/aerogel-core.js +3542 -0
- package/dist/aerogel-core.js.map +1 -0
- package/package.json +38 -34
- package/src/bootstrap/bootstrap.test.ts +7 -10
- package/src/bootstrap/index.ts +43 -14
- package/src/bootstrap/options.ts +4 -1
- package/src/components/AppLayout.vue +14 -0
- package/src/components/AppModals.vue +14 -0
- package/src/components/AppOverlays.vue +9 -0
- package/src/components/AppToasts.vue +16 -0
- package/src/components/contracts/AlertModal.ts +19 -0
- package/src/components/contracts/Button.ts +16 -0
- package/src/components/contracts/ConfirmModal.ts +48 -0
- package/src/components/contracts/DropdownMenu.ts +25 -0
- package/src/components/contracts/ErrorReportModal.ts +33 -0
- package/src/components/contracts/Input.ts +26 -0
- package/src/components/contracts/LoadingModal.ts +26 -0
- package/src/components/contracts/Modal.ts +21 -0
- package/src/components/contracts/PromptModal.ts +34 -0
- package/src/components/contracts/Select.ts +45 -0
- package/src/components/contracts/Toast.ts +15 -0
- package/src/components/contracts/index.ts +11 -0
- package/src/components/headless/HeadlessButton.vue +51 -0
- package/src/components/headless/HeadlessInput.vue +59 -0
- package/src/components/headless/HeadlessInputDescription.vue +27 -0
- package/src/components/headless/{forms/AGHeadlessInputError.vue → HeadlessInputError.vue} +4 -8
- package/src/components/headless/HeadlessInputInput.vue +75 -0
- package/src/components/headless/HeadlessInputLabel.vue +18 -0
- package/src/components/headless/HeadlessInputTextArea.vue +40 -0
- package/src/components/headless/HeadlessModal.vue +57 -0
- package/src/components/headless/HeadlessModalContent.vue +30 -0
- package/src/components/headless/HeadlessModalDescription.vue +12 -0
- package/src/components/headless/HeadlessModalOverlay.vue +12 -0
- package/src/components/headless/HeadlessModalTitle.vue +12 -0
- package/src/components/headless/HeadlessSelect.vue +120 -0
- package/src/components/headless/HeadlessSelectError.vue +25 -0
- package/src/components/headless/HeadlessSelectLabel.vue +25 -0
- package/src/components/headless/HeadlessSelectOption.vue +34 -0
- package/src/components/headless/HeadlessSelectOptions.vue +42 -0
- package/src/components/headless/HeadlessSelectTrigger.vue +22 -0
- package/src/components/headless/HeadlessSelectValue.vue +18 -0
- package/src/components/headless/HeadlessSwitch.vue +96 -0
- package/src/components/headless/HeadlessToast.vue +18 -0
- package/src/components/headless/HeadlessToastAction.vue +13 -0
- package/src/components/headless/index.ts +20 -2
- package/src/components/index.ts +6 -7
- package/src/components/ui/AdvancedOptions.vue +18 -0
- package/src/components/ui/AlertModal.vue +17 -0
- package/src/components/ui/Button.vue +100 -0
- package/src/components/ui/Checkbox.vue +56 -0
- package/src/components/ui/ConfirmModal.vue +50 -0
- package/src/components/ui/DropdownMenu.vue +32 -0
- package/src/components/ui/DropdownMenuOption.vue +22 -0
- package/src/components/ui/DropdownMenuOptions.vue +44 -0
- package/src/components/ui/EditableContent.vue +82 -0
- package/src/components/ui/ErrorLogs.vue +19 -0
- package/src/components/ui/ErrorLogsModal.vue +48 -0
- package/src/components/ui/ErrorMessage.vue +15 -0
- package/src/components/ui/ErrorReportModal.vue +73 -0
- package/src/components/ui/ErrorReportModalButtons.vue +118 -0
- package/src/components/ui/ErrorReportModalTitle.vue +24 -0
- package/src/components/ui/Form.vue +24 -0
- package/src/components/ui/Input.vue +56 -0
- package/src/components/ui/Link.vue +12 -0
- package/src/components/ui/LoadingModal.vue +34 -0
- package/src/components/ui/Markdown.vue +97 -0
- package/src/components/ui/Modal.vue +123 -0
- package/src/components/ui/ModalContext.vue +31 -0
- package/src/components/ui/ProgressBar.vue +51 -0
- package/src/components/ui/PromptModal.vue +38 -0
- package/src/components/ui/Select.vue +27 -0
- package/src/components/ui/SelectLabel.vue +21 -0
- package/src/components/ui/SelectOption.vue +29 -0
- package/src/components/ui/SelectOptions.vue +35 -0
- package/src/components/ui/SelectTrigger.vue +29 -0
- package/src/components/ui/SettingsModal.vue +15 -0
- package/src/components/ui/StartupCrash.vue +31 -0
- package/src/components/ui/Switch.vue +11 -0
- package/src/components/ui/Toast.vue +46 -0
- package/src/components/ui/index.ts +33 -0
- package/src/directives/index.ts +27 -6
- package/src/directives/measure.ts +46 -0
- package/src/errors/Errors.state.ts +1 -1
- package/src/errors/Errors.ts +70 -15
- package/src/errors/JobCancelledError.ts +3 -0
- package/src/errors/index.ts +38 -6
- package/src/errors/settings/Debug.vue +39 -0
- package/src/errors/settings/index.ts +10 -0
- package/src/errors/utils.ts +35 -0
- package/src/forms/FormController.test.ts +110 -0
- package/src/forms/FormController.ts +246 -0
- package/src/forms/index.ts +3 -2
- package/src/forms/utils.ts +51 -20
- package/src/forms/validation.ts +19 -0
- package/src/index.css +73 -0
- package/src/{main.ts → index.ts} +3 -2
- package/src/jobs/Job.ts +147 -0
- package/src/jobs/index.ts +10 -0
- package/src/jobs/listeners.ts +3 -0
- package/src/jobs/status.ts +4 -0
- package/src/lang/DefaultLangProvider.ts +46 -0
- package/src/lang/Lang.state.ts +11 -0
- package/src/lang/Lang.ts +44 -29
- package/src/lang/index.ts +12 -6
- package/src/lang/settings/Language.vue +48 -0
- package/src/lang/settings/index.ts +10 -0
- package/src/plugins/Plugin.ts +2 -1
- package/src/plugins/index.ts +22 -0
- package/src/services/App.state.ts +42 -5
- package/src/services/App.ts +52 -6
- package/src/services/Cache.ts +43 -0
- package/src/services/Events.test.ts +39 -0
- package/src/services/Events.ts +110 -36
- package/src/services/Service.ts +160 -50
- package/src/services/Storage.ts +20 -0
- package/src/services/index.ts +25 -10
- package/src/services/store.ts +8 -5
- package/src/services/utils.ts +18 -0
- package/src/testing/index.ts +26 -0
- package/src/testing/setup.ts +11 -0
- package/src/ui/UI.state.ts +20 -9
- package/src/ui/UI.ts +322 -74
- package/src/ui/index.ts +32 -23
- package/src/ui/utils.ts +16 -0
- package/src/utils/classes.ts +41 -0
- package/src/utils/composition/events.ts +4 -5
- package/src/utils/composition/forms.ts +20 -4
- package/src/utils/composition/persistent.test.ts +33 -0
- package/src/utils/composition/persistent.ts +11 -0
- package/src/utils/composition/state.test.ts +47 -0
- package/src/utils/composition/state.ts +33 -0
- package/src/utils/index.ts +5 -0
- package/src/utils/markdown.test.ts +50 -0
- package/src/utils/markdown.ts +60 -4
- package/src/utils/types.ts +3 -0
- package/src/utils/vue.ts +38 -121
- package/.eslintrc.js +0 -3
- package/dist/aerogel-core.cjs.js +0 -2
- package/dist/aerogel-core.cjs.js.map +0 -1
- package/dist/aerogel-core.esm.js +0 -2
- package/dist/aerogel-core.esm.js.map +0 -1
- package/noeldemartin.config.js +0 -2
- package/src/components/AGAppLayout.vue +0 -11
- package/src/components/AGAppOverlays.vue +0 -39
- package/src/components/basic/AGMarkdown.vue +0 -35
- package/src/components/basic/index.ts +0 -3
- package/src/components/forms/AGButton.vue +0 -34
- package/src/components/forms/AGCheckbox.vue +0 -35
- package/src/components/forms/AGForm.vue +0 -26
- package/src/components/forms/AGInput.vue +0 -36
- package/src/components/forms/index.ts +0 -6
- package/src/components/headless/forms/AGHeadlessButton.vue +0 -50
- package/src/components/headless/forms/AGHeadlessInput.ts +0 -8
- package/src/components/headless/forms/AGHeadlessInput.vue +0 -54
- package/src/components/headless/forms/AGHeadlessInputInput.vue +0 -45
- package/src/components/headless/forms/AGHeadlessInputLabel.vue +0 -16
- package/src/components/headless/forms/index.ts +0 -6
- package/src/components/headless/modals/AGHeadlessModal.ts +0 -7
- package/src/components/headless/modals/AGHeadlessModal.vue +0 -88
- package/src/components/headless/modals/AGHeadlessModalPanel.vue +0 -28
- package/src/components/headless/modals/AGHeadlessModalTitle.vue +0 -13
- package/src/components/headless/modals/index.ts +0 -6
- package/src/components/modals/AGAlertModal.vue +0 -26
- package/src/components/modals/AGConfirmModal.vue +0 -30
- package/src/components/modals/AGLoadingModal.vue +0 -19
- package/src/components/modals/AGModal.ts +0 -10
- package/src/components/modals/AGModal.vue +0 -36
- package/src/components/modals/AGModalContext.ts +0 -8
- package/src/components/modals/AGModalContext.vue +0 -22
- package/src/components/modals/index.ts +0 -8
- package/src/directives/initial-focus.ts +0 -11
- package/src/forms/Form.test.ts +0 -58
- package/src/forms/Form.ts +0 -176
- package/src/forms/composition.ts +0 -6
- package/src/globals.ts +0 -6
- package/tsconfig.json +0 -10
- package/vite.config.ts +0 -13
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
import { unref } from 'vue';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { twMerge } from 'tailwind-merge';
|
|
5
|
+
import type { ClassValue } from 'clsx';
|
|
6
|
+
import type { PropType } from 'vue';
|
|
7
|
+
import type { GetClosureArgs, GetClosureResult } from '@noeldemartin/utils';
|
|
8
|
+
|
|
9
|
+
export type CVAConfig<T> = NonNullable<GetClosureArgs<typeof cva<T>>[1]>;
|
|
10
|
+
export type CVAProps<T> = NonNullable<GetClosureArgs<GetClosureResult<typeof cva<T>>>[0]>;
|
|
11
|
+
export type Variants<T extends Record<string, string | boolean>> = Required<{
|
|
12
|
+
[K in keyof T]: Exclude<T[K], undefined> extends string
|
|
13
|
+
? { [key in Exclude<T[K], undefined>]: string | null }
|
|
14
|
+
: { true: string | null; false: string | null };
|
|
15
|
+
}>;
|
|
16
|
+
|
|
17
|
+
export type ComponentPropDefinitions<T> = {
|
|
18
|
+
[K in keyof T]: {
|
|
19
|
+
type?: PropType<T[K]>;
|
|
20
|
+
default: T[K] | (() => T[K]) | null;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export type PickComponentProps<TValues, TDefinitions> = {
|
|
25
|
+
[K in keyof TValues]: K extends keyof TDefinitions ? TValues[K] : never;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export function variantClasses<T>(
|
|
29
|
+
value: { baseClasses?: string } & CVAProps<T>,
|
|
30
|
+
config: { baseClasses?: string } & CVAConfig<T>,
|
|
31
|
+
): string {
|
|
32
|
+
const { baseClasses: valueBaseClasses, ...values } = value;
|
|
33
|
+
const { baseClasses: configBaseClasses, ...configs } = config;
|
|
34
|
+
const variants = cva(configBaseClasses, configs as CVAConfig<T>);
|
|
35
|
+
|
|
36
|
+
return classes(variants(values as CVAProps<T>), unref(valueBaseClasses));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export function classes(...inputs: ClassValue[]): string {
|
|
40
|
+
return twMerge(clsx(inputs));
|
|
41
|
+
}
|
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
import { onUnmounted } from 'vue';
|
|
2
2
|
|
|
3
|
-
import Events from '
|
|
3
|
+
import Events from '@aerogel/core/services/Events';
|
|
4
4
|
import type {
|
|
5
5
|
EventListener,
|
|
6
6
|
EventWithPayload,
|
|
7
7
|
EventWithoutPayload,
|
|
8
8
|
EventsPayload,
|
|
9
|
-
|
|
10
|
-
} from '@/services/Events';
|
|
9
|
+
} from '@aerogel/core/services/Events';
|
|
11
10
|
|
|
12
11
|
export function useEvent<Event extends EventWithoutPayload>(event: Event, listener: () => unknown): void;
|
|
13
12
|
export function useEvent<Event extends EventWithPayload>(
|
|
14
13
|
event: Event,
|
|
15
14
|
listener: EventListener<EventsPayload[Event]>
|
|
16
15
|
): void;
|
|
17
|
-
export function useEvent<Event extends string>(event: UnknownEvent<Event>, listener: EventListener): void;
|
|
18
16
|
|
|
19
17
|
export function useEvent(event: string, listener: EventListener): void {
|
|
20
|
-
|
|
18
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
19
|
+
const unsubscribe = Events.on(event as any, listener);
|
|
21
20
|
|
|
22
21
|
onUnmounted(() => unsubscribe());
|
|
23
22
|
}
|
|
@@ -1,11 +1,27 @@
|
|
|
1
1
|
import { objectWithout } from '@noeldemartin/utils';
|
|
2
|
-
import { computed, useAttrs } from 'vue';
|
|
2
|
+
import { computed, inject, onUnmounted, useAttrs } from 'vue';
|
|
3
|
+
import type { ClassValue } from 'clsx';
|
|
3
4
|
import type { ComputedRef } from 'vue';
|
|
5
|
+
import type { Nullable } from '@noeldemartin/utils';
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
import FormController from '@aerogel/core/forms/FormController';
|
|
8
|
+
import type { FormData, FormFieldDefinitions } from '@aerogel/core/forms/FormController';
|
|
9
|
+
|
|
10
|
+
export function onFormFocus(input: { name: Nullable<string> }, listener: () => unknown): void {
|
|
11
|
+
const form = inject<FormController | null>('form', null);
|
|
12
|
+
const stop = form?.on('focus', (name) => input.name === name && listener());
|
|
13
|
+
|
|
14
|
+
onUnmounted(() => stop?.());
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function useForm<const T extends FormFieldDefinitions>(fields: T): FormController<T> & FormData<T> {
|
|
18
|
+
return new FormController(fields) as FormController<T> & FormData<T>;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export function useInputAttrs(): [ComputedRef<{}>, ComputedRef<ClassValue>] {
|
|
6
22
|
const attrs = useAttrs();
|
|
7
|
-
const
|
|
23
|
+
const classes = computed(() => attrs.class);
|
|
8
24
|
const inputAttrs = computed(() => objectWithout(attrs, 'class'));
|
|
9
25
|
|
|
10
|
-
return [inputAttrs,
|
|
26
|
+
return [inputAttrs, classes as ComputedRef<ClassValue>];
|
|
11
27
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { describe, expect, it } from 'vitest';
|
|
2
|
+
import { nextTick } from 'vue';
|
|
3
|
+
import { Storage } from '@noeldemartin/utils';
|
|
4
|
+
|
|
5
|
+
import { persistent } from './persistent';
|
|
6
|
+
|
|
7
|
+
describe('Vue persistent helper', () => {
|
|
8
|
+
|
|
9
|
+
it('serializes to localStorage', async () => {
|
|
10
|
+
// Arrange
|
|
11
|
+
const store = persistent<{ foo?: string }>('foobar', {});
|
|
12
|
+
|
|
13
|
+
// Act
|
|
14
|
+
store.foo = 'bar';
|
|
15
|
+
|
|
16
|
+
await nextTick();
|
|
17
|
+
|
|
18
|
+
// Assert
|
|
19
|
+
expect(Storage.get('foobar')).toEqual({ foo: 'bar' });
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
it('reads from localStorage', async () => {
|
|
23
|
+
// Arrange
|
|
24
|
+
Storage.set('foobar', { foo: 'bar' });
|
|
25
|
+
|
|
26
|
+
// Act
|
|
27
|
+
const store = persistent<{ foo?: string }>('foobar', {});
|
|
28
|
+
|
|
29
|
+
// Assert
|
|
30
|
+
expect(store.foo).toEqual('bar');
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
});
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { reactive, toRaw, watch } from 'vue';
|
|
2
|
+
import { Storage } from '@noeldemartin/utils';
|
|
3
|
+
import type { UnwrapNestedRefs } from 'vue';
|
|
4
|
+
|
|
5
|
+
export function persistent<T extends object>(name: string, defaults: T): UnwrapNestedRefs<T> {
|
|
6
|
+
const store = reactive<T>(Storage.get<T>(name) ?? defaults);
|
|
7
|
+
|
|
8
|
+
watch(store, () => Storage.set(name, toRaw(store)));
|
|
9
|
+
|
|
10
|
+
return store;
|
|
11
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { after } from '@noeldemartin/utils';
|
|
2
|
+
import { describe, expect, it } from 'vitest';
|
|
3
|
+
import { ref } from 'vue';
|
|
4
|
+
|
|
5
|
+
import { computedDebounce } from './state';
|
|
6
|
+
|
|
7
|
+
describe('Vue state helpers', () => {
|
|
8
|
+
|
|
9
|
+
it('computes debounced state', async () => {
|
|
10
|
+
// Initial
|
|
11
|
+
const state = ref(0);
|
|
12
|
+
const value = computedDebounce({ delay: 90 }, () => state.value);
|
|
13
|
+
|
|
14
|
+
expect(value.value).toBe(null);
|
|
15
|
+
|
|
16
|
+
await after({ ms: 100 });
|
|
17
|
+
|
|
18
|
+
expect(value.value).toBe(0);
|
|
19
|
+
|
|
20
|
+
// Update
|
|
21
|
+
state.value = 42;
|
|
22
|
+
|
|
23
|
+
expect(value.value).toBe(0);
|
|
24
|
+
|
|
25
|
+
await after({ ms: 100 });
|
|
26
|
+
|
|
27
|
+
expect(value.value).toBe(42);
|
|
28
|
+
|
|
29
|
+
// Debounced Update
|
|
30
|
+
state.value = 23;
|
|
31
|
+
|
|
32
|
+
expect(value.value).toBe(42);
|
|
33
|
+
|
|
34
|
+
await after({ ms: 50 });
|
|
35
|
+
|
|
36
|
+
state.value = 32;
|
|
37
|
+
|
|
38
|
+
await after({ ms: 50 });
|
|
39
|
+
|
|
40
|
+
expect(value.value).toBe(42);
|
|
41
|
+
|
|
42
|
+
await after({ ms: 100 });
|
|
43
|
+
|
|
44
|
+
expect(value.value).toBe(32);
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
});
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { debounce } from '@noeldemartin/utils';
|
|
2
|
+
import { computed, ref, watch, watchEffect } from 'vue';
|
|
3
|
+
import type { ComputedGetter, ComputedRef, Ref } from 'vue';
|
|
4
|
+
|
|
5
|
+
export interface ComputedDebounceOptions<T> {
|
|
6
|
+
initial?: T;
|
|
7
|
+
delay?: number;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export function computedAsync<T>(getter: () => Promise<T>): Ref<T | undefined> {
|
|
11
|
+
const result = ref<T>();
|
|
12
|
+
const asyncValue = computed(getter);
|
|
13
|
+
|
|
14
|
+
watch(asyncValue, async () => (result.value = await asyncValue.value), { immediate: true });
|
|
15
|
+
|
|
16
|
+
return result;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export function computedDebounce<T>(options: ComputedDebounceOptions<T>, getter: ComputedGetter<T>): ComputedRef<T>;
|
|
20
|
+
export function computedDebounce<T>(getter: ComputedGetter<T>): ComputedRef<T | null>;
|
|
21
|
+
export function computedDebounce<T>(
|
|
22
|
+
optionsOrGetter: ComputedGetter<T> | ComputedDebounceOptions<T>,
|
|
23
|
+
inputGetter?: ComputedGetter<T>,
|
|
24
|
+
): ComputedRef<T> {
|
|
25
|
+
const inputOptions = inputGetter ? (optionsOrGetter as ComputedDebounceOptions<T>) : {};
|
|
26
|
+
const getter = inputGetter ?? (optionsOrGetter as ComputedGetter<T>);
|
|
27
|
+
const state = ref(inputOptions.initial ?? null);
|
|
28
|
+
const update = debounce((value) => (state.value = value), inputOptions.delay ?? 300);
|
|
29
|
+
|
|
30
|
+
watchEffect(() => update(getter()));
|
|
31
|
+
|
|
32
|
+
return state as unknown as ComputedRef<T>;
|
|
33
|
+
}
|
package/src/utils/index.ts
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
+
export * from './classes';
|
|
1
2
|
export * from './composition/events';
|
|
2
3
|
export * from './composition/forms';
|
|
3
4
|
export * from './composition/hooks';
|
|
5
|
+
export * from './composition/persistent';
|
|
6
|
+
export * from './composition/state';
|
|
7
|
+
export * from './markdown';
|
|
8
|
+
export * from './types';
|
|
4
9
|
export * from './vue';
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/* eslint-disable max-len */
|
|
2
|
+
import { describe, expect, it } from 'vitest';
|
|
3
|
+
|
|
4
|
+
import { renderMarkdown } from './markdown';
|
|
5
|
+
|
|
6
|
+
describe('Markdown utils', () => {
|
|
7
|
+
|
|
8
|
+
it('renders basic markdown', () => {
|
|
9
|
+
// Arrange
|
|
10
|
+
const expectedHTML = `
|
|
11
|
+
<h1>Title</h1>
|
|
12
|
+
<p>body with <a target="_blank" href="https://example.com">link</a></p>
|
|
13
|
+
<ul>
|
|
14
|
+
<li>One</li>
|
|
15
|
+
<li>Two</li>
|
|
16
|
+
<li>Three</li>
|
|
17
|
+
</ul>
|
|
18
|
+
`;
|
|
19
|
+
|
|
20
|
+
// Act
|
|
21
|
+
const html = renderMarkdown(
|
|
22
|
+
['# Title', 'body with [link](https://example.com)', '- One', '- Two', '- Three'].join('\n'),
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
// Assert
|
|
26
|
+
expect(normalizeHTML(html)).toMatch(new RegExp(normalizeHTML(expectedHTML)));
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
it('renders button links', () => {
|
|
30
|
+
// Arrange
|
|
31
|
+
const expectedHTML = `
|
|
32
|
+
<p><button type="button" data-markdown-action="do-something">link</button></p>
|
|
33
|
+
`;
|
|
34
|
+
|
|
35
|
+
// Act
|
|
36
|
+
const html = renderMarkdown('[link](#action:do-something)');
|
|
37
|
+
|
|
38
|
+
// Assert
|
|
39
|
+
expect(normalizeHTML(html)).toMatch(new RegExp(normalizeHTML(expectedHTML)));
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
function normalizeHTML(html: string): string {
|
|
45
|
+
return html
|
|
46
|
+
.split('\n')
|
|
47
|
+
.map((line) => line.trim())
|
|
48
|
+
.join('\n')
|
|
49
|
+
.trim();
|
|
50
|
+
}
|
package/src/utils/markdown.ts
CHANGED
|
@@ -1,12 +1,68 @@
|
|
|
1
1
|
import DOMPurify from 'dompurify';
|
|
2
|
-
import {
|
|
2
|
+
import { stringMatchAll, tap } from '@noeldemartin/utils';
|
|
3
|
+
import { Renderer, marked } from 'marked';
|
|
4
|
+
|
|
5
|
+
let router: MarkdownRouter | null = null;
|
|
6
|
+
|
|
7
|
+
function makeRenderer(): Renderer {
|
|
8
|
+
return tap(new Renderer(), (renderer) => {
|
|
9
|
+
renderer.link = function(link) {
|
|
10
|
+
const defaultLink = Renderer.prototype.link.apply(this, [link]);
|
|
11
|
+
|
|
12
|
+
if (!link.href.startsWith('#')) {
|
|
13
|
+
return defaultLink.replace('<a', '<a target="_blank"');
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
return defaultLink;
|
|
17
|
+
};
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function renderActionLinks(html: string): string {
|
|
22
|
+
const matches = stringMatchAll<3>(html, /<a[^>]*href="#action:([^"]+)"[^>]*>([^<]+)<\/a>/g);
|
|
23
|
+
|
|
24
|
+
for (const [link, action, text] of matches) {
|
|
25
|
+
html = html.replace(link, `<button type="button" data-markdown-action="${action}">${text}</button>`);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return html;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function renderRouteLinks(html: string): string {
|
|
32
|
+
const matches = stringMatchAll<3>(html, /<a[^>]*href="#route:([^"]+)"[^>]*>([^<]+)<\/a>/g);
|
|
33
|
+
|
|
34
|
+
for (const [link, route, text] of matches) {
|
|
35
|
+
const url = router?.resolve(route) ?? route;
|
|
36
|
+
|
|
37
|
+
html = html.replace(link, `<a data-markdown-route="${route}" href="${url}">${text}</a>`);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return html;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export interface MarkdownRouter {
|
|
44
|
+
resolve(route: string): string;
|
|
45
|
+
visit(route: string): Promise<void>;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export function getMarkdownRouter(): MarkdownRouter | null {
|
|
49
|
+
return router;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export function setMarkdownRouter(markdownRouter: MarkdownRouter): void {
|
|
53
|
+
router = markdownRouter;
|
|
54
|
+
}
|
|
3
55
|
|
|
4
56
|
export function renderMarkdown(markdown: string): string {
|
|
5
|
-
|
|
57
|
+
let html = marked(markdown, { renderer: makeRenderer(), async: false });
|
|
58
|
+
|
|
59
|
+
html = safeHtml(html);
|
|
60
|
+
html = renderActionLinks(html);
|
|
61
|
+
html = renderRouteLinks(html);
|
|
62
|
+
|
|
63
|
+
return html;
|
|
6
64
|
}
|
|
7
65
|
|
|
8
66
|
export function safeHtml(html: string): string {
|
|
9
|
-
// TODO improve target="_blank" exception
|
|
10
|
-
// See https://github.com/cure53/DOMPurify/issues/317
|
|
11
67
|
return DOMPurify.sanitize(html, { ADD_ATTR: ['target'] });
|
|
12
68
|
}
|
package/src/utils/vue.ts
CHANGED
|
@@ -1,50 +1,26 @@
|
|
|
1
|
-
import { fail } from '@noeldemartin/utils';
|
|
2
|
-
import { inject, reactive
|
|
3
|
-
import type { Directive, InjectionKey,
|
|
4
|
-
|
|
5
|
-
type
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
return {
|
|
22
|
-
type: Boolean,
|
|
23
|
-
default: defaultValue,
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export function componentRef<T>(): Ref<UnwrapNestedRefs<T> | undefined> {
|
|
28
|
-
return ref<UnwrapNestedRefs<T>>();
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export function defineDirective(directive: Directive): Directive {
|
|
1
|
+
import { fail, toString } from '@noeldemartin/utils';
|
|
2
|
+
import { Comment, Static, Text, inject, reactive } from 'vue';
|
|
3
|
+
import type { Directive, InjectionKey, MaybeRef, Ref, UnwrapNestedRefs, VNode } from 'vue';
|
|
4
|
+
|
|
5
|
+
export type AcceptRefs<T> = { [K in keyof T]: T[K] | RefUnion<T[K]> };
|
|
6
|
+
export type RefUnion<T> = T extends infer R ? Ref<R> : never;
|
|
7
|
+
export type Unref<T> = { [K in keyof T]: T[K] extends MaybeRef<infer Value> ? Value : T[K] };
|
|
8
|
+
|
|
9
|
+
function renderVNodeAttrs(node: VNode): string {
|
|
10
|
+
return Object.entries(node.props ?? {}).reduce((attrs, [name, value]) => {
|
|
11
|
+
return attrs + `${name}="${toString(value)}"`;
|
|
12
|
+
}, '');
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
16
|
+
export function defineDirective<TValue = any, TModifiers extends string = string>(
|
|
17
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
18
|
+
directive: Directive<any, TValue, TModifiers>,
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
20
|
+
): Directive<any, TValue, TModifiers> {
|
|
32
21
|
return directive;
|
|
33
22
|
}
|
|
34
23
|
|
|
35
|
-
export function enumProp<Enum extends Record<string, unknown>>(
|
|
36
|
-
enumeration: Enum,
|
|
37
|
-
defaultValue?: Enum[keyof Enum],
|
|
38
|
-
): OptionalProp<Enum[keyof Enum]> {
|
|
39
|
-
const values = Object.values(enumeration) as Enum[keyof Enum][];
|
|
40
|
-
|
|
41
|
-
return {
|
|
42
|
-
type: String as unknown as PropType<Enum[keyof Enum]>,
|
|
43
|
-
default: defaultValue ?? values[0] ?? null,
|
|
44
|
-
validator: (value) => values.includes(value as Enum[keyof Enum]),
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
|
|
48
24
|
export function injectReactive<T extends object>(key: InjectionKey<T> | string): UnwrapNestedRefs<T> | undefined {
|
|
49
25
|
const value = inject(key);
|
|
50
26
|
|
|
@@ -55,90 +31,31 @@ export function injectReactiveOrFail<T extends object>(
|
|
|
55
31
|
key: InjectionKey<T> | string,
|
|
56
32
|
errorMessage?: string,
|
|
57
33
|
): UnwrapNestedRefs<T> {
|
|
58
|
-
return injectReactive(key) ?? fail(errorMessage ?? `Could not resolve '${key}' injection key`);
|
|
34
|
+
return injectReactive(key) ?? fail(errorMessage ?? `Could not resolve '${toString(key)}' injection key`);
|
|
59
35
|
}
|
|
60
36
|
|
|
61
37
|
export function injectOrFail<T>(key: InjectionKey<T> | string, errorMessage?: string): T {
|
|
62
|
-
return inject(key) ?? fail(errorMessage ?? `Could not resolve '${key}' injection key`);
|
|
38
|
+
return inject(key) ?? fail(errorMessage ?? `Could not resolve '${toString(key)}' injection key`);
|
|
63
39
|
}
|
|
64
40
|
|
|
65
|
-
export function
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
};
|
|
70
|
-
}
|
|
41
|
+
export function renderVNode(node: VNode | string): string {
|
|
42
|
+
if (typeof node === 'string') {
|
|
43
|
+
return node;
|
|
44
|
+
}
|
|
71
45
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
return {
|
|
76
|
-
type: Number,
|
|
77
|
-
default: defaultValue,
|
|
78
|
-
};
|
|
79
|
-
}
|
|
46
|
+
if (node.type === Comment) {
|
|
47
|
+
return '';
|
|
48
|
+
}
|
|
80
49
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
return {
|
|
85
|
-
type: Object,
|
|
86
|
-
default: defaultValue,
|
|
87
|
-
};
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
export function requiredArrayProp<T>(): RequiredProp<T[]> {
|
|
91
|
-
return {
|
|
92
|
-
type: Array as PropType<T[]>,
|
|
93
|
-
required: true,
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
export function requiredEnumProp<Enum extends Record<string, unknown>>(
|
|
98
|
-
enumeration: Enum,
|
|
99
|
-
): RequiredProp<Enum[keyof Enum]> {
|
|
100
|
-
const values = Object.values(enumeration);
|
|
50
|
+
if (node.type === Text || node.type === Static) {
|
|
51
|
+
return node.children as string;
|
|
52
|
+
}
|
|
101
53
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
validator: (value) => values.includes(value),
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
export function requiredMixedProp<T>(type: PropType<T>): RequiredProp<T> {
|
|
110
|
-
return {
|
|
111
|
-
type,
|
|
112
|
-
required: true,
|
|
113
|
-
};
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
export function requiredNumberProp(): RequiredProp<number> {
|
|
117
|
-
return {
|
|
118
|
-
type: Number,
|
|
119
|
-
required: true,
|
|
120
|
-
};
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
export function requiredObjectProp<T = Object>(): RequiredProp<T> {
|
|
124
|
-
return {
|
|
125
|
-
type: Object,
|
|
126
|
-
required: true,
|
|
127
|
-
};
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
export function requiredStringProp(): RequiredProp<string> {
|
|
131
|
-
return {
|
|
132
|
-
type: String,
|
|
133
|
-
required: true,
|
|
134
|
-
};
|
|
135
|
-
}
|
|
54
|
+
if (node.type === 'br') {
|
|
55
|
+
return '\n\n';
|
|
56
|
+
}
|
|
136
57
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
return {
|
|
141
|
-
type: String,
|
|
142
|
-
default: defaultValue,
|
|
143
|
-
};
|
|
58
|
+
return `<${node.type} ${renderVNodeAttrs(node)}>${Array.from(node.children as Array<VNode | string>)
|
|
59
|
+
.map(renderVNode)
|
|
60
|
+
.join('')}</${node.type}>`;
|
|
144
61
|
}
|
package/.eslintrc.js
DELETED
package/dist/aerogel-core.cjs.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("core-js/modules/esnext.async-iterator.map.js"),require("core-js/modules/esnext.iterator.map.js");var e=require("vue");require("core-js/modules/esnext.async-iterator.for-each.js"),require("core-js/modules/esnext.iterator.constructor.js"),require("core-js/modules/esnext.iterator.for-each.js");var t=require("@noeldemartin/utils"),r=require("@babel/runtime/helpers/defineProperty");require("core-js/modules/esnext.set.add-all.js"),require("core-js/modules/esnext.set.delete-all.js"),require("core-js/modules/esnext.set.difference.js"),require("core-js/modules/esnext.set.every.js"),require("core-js/modules/esnext.set.filter.js"),require("core-js/modules/esnext.set.find.js"),require("core-js/modules/esnext.set.intersection.js"),require("core-js/modules/esnext.set.is-disjoint-from.js"),require("core-js/modules/esnext.set.is-subset-of.js"),require("core-js/modules/esnext.set.is-superset-of.js"),require("core-js/modules/esnext.set.join.js"),require("core-js/modules/esnext.set.map.js"),require("core-js/modules/esnext.set.reduce.js"),require("core-js/modules/esnext.set.some.js"),require("core-js/modules/esnext.set.symmetric-difference.js"),require("core-js/modules/esnext.set.union.js");var o=require("pinia");require("core-js/modules/esnext.string.at.js"),require("core-js/modules/esnext.async-iterator.filter.js"),require("core-js/modules/esnext.iterator.filter.js"),require("core-js/modules/esnext.async-iterator.reduce.js"),require("core-js/modules/esnext.iterator.reduce.js"),require("core-js/modules/esnext.async-iterator.some.js"),require("core-js/modules/esnext.iterator.some.js");var s=require("@headlessui/vue"),n=require("dompurify"),a=require("marked");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(r),u=l(n);function c(e){return e}function d(){return{type:Boolean,default:arguments.length>0&&void 0!==arguments[0]&&arguments[0]}}function p(){return e.ref()}function m(e){return e}function f(t){const r=e.inject(t);return r?e.reactive(r):void 0}function h(e,r){return f(e)??t.fail(r??`Could not resolve '${e}' injection key`)}function v(e){return{type:e,default:null}}function g(){return{type:Object,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}function x(){return{type:Number,required:!0}}function _(){return{type:Object,required:!0}}function b(){return{type:String,required:!0}}function y(){return{type:String,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}const k={"initial-focus":{mounted(e,t){let{value:r}=t;!1!==r&&e.focus()}}};var j={install(e){Object.entries(k).forEach((t=>{let[r,o]=t;return e.directive(r,o)}))}};class ServiceBootError extends t.JSError{constructor(e,t){super(`Service '${e}' failed booting`,{cause:t})}}let A=null;function S(){return A||(A=o.createPinia(),o.setActivePinia(A)),A}function w(e){var t;return t=class extends C{usesStore(){return!0}getName(){return e.name??null}getInitialState(){return e.initialState}getComputedStateDefinition(){return e.computed??{}}serializePersistedState(t){return e.serialize?.(t)??t}},i.default(t,"persist",e.persist??[]),t}class C extends t.MagicObject{constructor(){super(),i.default(this,"_name",void 0),i.default(this,"_booted",void 0),i.default(this,"_computedStateKeys",void 0),i.default(this,"_store",void 0);const e=this.getComputedStateDefinition();var r,s;this._name=this.getName()??new.target.name,this._booted=new t.PromisedValue,this._computedStateKeys=new Set(Object.keys(e)),this._store=this.usesStore()&&(r=this._name,s={state:()=>this.getInitialState(),getters:e},S(),o.defineStore(r,s)())}get booted(){return this._booted}launch(){const handleError=e=>this._booted.reject(new ServiceBootError(this._name,e));try{this.boot().then((()=>this._booted.resolve())).catch(handleError)}catch(e){handleError(e)}return this._booted}hasState(e){return!!this._store&&(e in this._store.$state||this._computedStateKeys.has(e))}getState(e){const t=this._store;return e?t?t[e]:void 0:t||{}}setState(e,t){if(!this._store)return;const r="string"==typeof e?{[e]:t}:e;Object.assign(this._store.$state,r),this.onStateUpdated(r)}__get(e){return this.hasState(e)?this.getState(e):super.__get(e)}__set(e,t){this.setState({[e]:t})}onStateUpdated(e){const r=this.constructor.persist,o=t.objectOnly(e,r);if(t.isEmpty(o))return;const s=t.Storage.require(this._name);t.Storage.set(this._name,{...s,...this.serializePersistedState(t.objectDeepClone(o))})}usesStore(){return!1}getName(){return null}getInitialState(){return{}}getComputedStateDefinition(){return{}}serializePersistedState(e){return e}async boot(){this.restorePersistedState()}restorePersistedState(){const e=this.constructor.persist;if(this.usesStore()&&!t.isEmpty(e))if(t.Storage.has(this._name)){const e=t.Storage.require(this._name);this.setState(e)}else t.Storage.set(this._name,t.objectOnly(this.getState(),e))}}i.default(C,"persist",[]);class E extends C{constructor(){super(...arguments),i.default(this,"listeners",{})}async emit(e,t){const r=[...this.listeners[e]??[]];await Promise.all(r.map((e=>e(t)))??[])}on(e,r){return(this.listeners[e]??=t.arr([])).push(r),()=>this.off(e,r)}once(e,r){let o=null;return t.tap((()=>o&&this.off(e,o)),(s=>{(this.listeners[e]??=t.arr([])).push(o=function(){return s(),r(...arguments)})}))}off(e,t){const r=this.listeners[e];r&&(r.remove(t),r.isEmpty()&&delete this.listeners[e])}}var G=t.facade(new E),B=w({name:"app",initialState:{environment:__AG_ENV,isMounted:!1},computed:{isDevelopment:e=>"development"===e.environment,isTesting:e=>"testing"===e.environment}});class q extends B{async boot(){await super.boot(),G.once("application-mounted",(()=>this.setState({isMounted:!0})))}}var M=t.facade(new q);const I={$app:M,$events:G};async function P(e,t){await Promise.all(Object.entries(t).map((async e=>{let[t,r]=e;await r.launch().catch((e=>console.error(e)))}))),Object.assign(e.config.globalProperties,t)}var $={async install(e,t){const r={...I,...t.services};e.use(A??S()),await P(e,r)}},N=w({name:"ui",initialState:{modals:[]}});const V={AlertModal:"alert-modal",ConfirmModal:"confirm-modal",LoadingModal:"loading-modal"};var H=t.facade(new class extends N{constructor(){super(...arguments),i.default(this,"modalCallbacks",{}),i.default(this,"components",{})}alert(e,t){const r="string"==typeof t?{title:e,message:t}:{message:e};this.openModal(this.requireComponent(V.AlertModal),r)}async confirm(e,t){const r="string"==typeof t?{title:e,message:t}:{message:e},o=await this.openModal(this.requireComponent(V.ConfirmModal),r);return await o.beforeClose??!1}async loading(e,t){t="string"==typeof e?t:e;const r="string"==typeof e?e:void 0,o=await this.openModal(this.requireComponent(V.LoadingModal),{message:r}),s=await t;return await this.closeModal(o.id),s}registerComponent(e,t){this.components[e]=t}async openModal(r,o){const s=t.uuid(),n={},a={id:s,properties:o??{},component:e.markRaw(r),beforeClose:new Promise((e=>n.willClose=e)),afterClose:new Promise((e=>n.closed=e))},l=this.modals.at(-1),i=this.modals.concat(a);return this.modalCallbacks[a.id]=n,this.setState({modals:i}),await e.nextTick(),await(l&&G.emit("hide-modal",{id:l.id})),await Promise.all([l||G.emit("show-overlays-backdrop"),G.emit("show-modal",{id:a.id})]),a}async closeModal(e,t){await G.emit("close-modal",{id:e,result:t})}async boot(){await super.boot(),this.watchModalEvents()}requireComponent(e){return this.components[e]??t.fail(`UI Component '${e}' is not defined!`)}watchModalEvents(){G.on("modal-will-close",(e=>{let{modal:t,result:r}=e;this.modalCallbacks[t.id]?.willClose?.(r),1===this.modals.length&&G.emit("hide-overlays-backdrop")})),G.on("modal-closed",(async e=>{let{modal:t,result:r}=e;this.setState({modals:this.modals.filter((e=>e.id!==t.id))}),this.modalCallbacks[t.id]?.closed?.(r),delete this.modalCallbacks[t.id];const o=this.modals.at(-1);await(o&&G.emit("show-modal",{id:o.id}))}))}});var O=t.facade(new class extends C{constructor(){super(),i.default(this,"provider",void 0),this.provider={translate:e=>(M.isDevelopment&&console.warn("Lang provider is missing"),e)}}setProvider(e){this.provider=e}translate(e,t){return this.provider.translate(e,t)??e}translateWithDefault(e,r,o){o??=r;const s="string"==typeof r?{}:r??{},n=this.provider.translate(e,s)??e;return n===e?Object.entries(s).reduce(((e,r)=>{let[o,s]=r;return e.replace(new RegExp(`\\{\\s*${o}\\s*\\}`,"g"),t.toString(s))}),o):n}});const D=O.translate.bind(O),R=O.translateWithDefault.bind(O);var L=w({name:"errors",initialState:{logs:[],startupErrors:[]},computed:{hasErrors:e=>{let{logs:t}=e;return t.length>0},hasNewErrors:e=>{let{logs:t}=e;return t.some((e=>!e.seen))},hasStartupErrors:e=>{let{startupErrors:t}=e;return t.length>0}}});var F=t.facade(new class extends L{constructor(){super(...arguments),i.default(this,"forceReporting",!1),i.default(this,"enabled",!0)}enable(){this.enabled=!0}disable(){this.enabled=!1}async inspect(e){Array.isArray(e)||await this.createErrorReport(e)}async report(e,t){if((M.isDevelopment||M.isTesting)&&this.logError(e),!this.enabled)throw e;if(!M.isMounted){const t=await this.createStartupErrorReport(e);return void(t&&this.setState({startupErrors:this.startupErrors.concat(t)}))}const r={report:await this.createErrorReport(e),seen:!1,date:new Date};H.alert(t??"Something went wrong, but it's not your fault! (look at the console for details)"),this.setState({logs:[r].concat(this.logs)})}see(e){this.setState({logs:this.logs.map((t=>t.report!==e?t:{...t,seen:!0}))})}seeAll(){this.setState({logs:this.logs.map((e=>({...e,seen:!0})))})}logError(e){console.error(e),t.isObject(e)&&e.cause&&this.logError(e.cause)}async createErrorReport(e){return"string"==typeof e?{title:e}:e instanceof Error||e instanceof t.JSError?this.createErrorReportFromError(e):{title:D("errors.unknown"),error:e}}async createStartupErrorReport(e){return e instanceof ServiceBootError?e.cause instanceof ServiceBootError?null:this.createErrorReport(e.cause):this.createErrorReport(e)}createErrorReportFromError(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return{title:e.name,description:e.message,details:e.stack,error:e,...t}}});const T={$errors:F};var z={async install(e){await P(e,T)}};const K={$lang:O};var U={async install(e){e.config.globalProperties.$t??=D,e.config.globalProperties.$td=R,await P(e,K)}};function W(t,r){const o=G.on(t,r);e.onUnmounted((()=>o()))}function J(){const r=e.useAttrs(),o=e.computed((()=>r.class));return[e.computed((()=>t.objectWithout(r,"class"))),o]}var Q=e.defineComponent({__name:"AGHeadlessModal",props:{cancellable:d(!0)},setup(t,{expose:r}){const o=t,n=e.ref(null),a=e.ref(!0),l=e.ref(!1),{modal:i}=h("modal","could not obtain modal reference from <AGHeadlessModal>, did you render this component manually? Show it using $ui.openModal() instead");async function u(){n.value?.$el&&(a.value=!0)}async function c(e){l.value||(G.emit("modal-will-close",{modal:i,result:e}),await u(),l.value=!0,G.emit("modal-closed",{modal:i,result:e}))}return W("close-modal",(async({id:e,result:t})=>{e===i.id&&await c(t)})),W("hide-modal",(async({id:e})=>{e===i.id&&await u()})),W("show-modal",(async({id:e})=>{e===i.id&&await async function(){n.value?.$el&&(a.value=!1)}()})),r({close:c,cancellable:e.toRef(o,"cancellable")}),(r,o)=>(e.openBlock(),e.createBlock(e.unref(s.Dialog),{ref_key:"$root",ref:n,open:!0,onClose:o[0]||(o[0]=e=>t.cancellable&&c())},{default:e.withCtx((()=>[e.renderSlot(r.$slots,"default",{close:c})])),_:3},512))}});Q.__file="src/components/headless/modals/AGHeadlessModal.vue";var X=e.defineComponent({__name:"AGModalContext",props:{modal:_(),childIndex:x()},setup(t){const r=t;return e.provide("modal",{modal:e.toRef(r,"modal"),childIndex:e.toRef(r,"childIndex")}),(r,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.modal.component),e.normalizeProps(e.guardReactiveProps(t.modal.properties)),null,16))}});X.__file="src/components/modals/AGModalContext.vue";const Y=e.createElementVNode("div",{class:"pointer-events-none fixed inset-0 z-50 bg-black/30"},null,-1);var Z=e.defineComponent({__name:"AGHeadlessModalPanel",setup(t){const r=h("modal","could not obtain modal reference from <AGHeadlessModalPanel>, did you render this component manually? Show it using $ui.openModal() instead"),o=e.computed((()=>H.modals[r.childIndex]??null));return(t,n)=>(e.openBlock(),e.createBlock(e.unref(s.DialogPanel),null,{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default"),o.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[Y,e.createVNode(X,{"child-index":e.unref(r).childIndex+1,modal:o.value},null,8,["child-index","modal"])],64)):e.createCommentVNode("v-if",!0)])),_:3}))}});Z.__file="src/components/headless/modals/AGHeadlessModalPanel.vue";const ee={class:"fixed inset-0 flex items-center justify-center"},te={class:"flex max-h-full flex-col overflow-auto p-4"};var re=e.defineComponent({__name:"AGModal",props:{cancellable:d(!0)},setup(t,{expose:r}){const o=e.ref();return r({close:async()=>o.value?.close(),cancellable:e.computed((()=>!!o.value?.cancellable))}),(r,s)=>(e.openBlock(),e.createBlock(Q,{ref_key:"$headlessModal",ref:o,cancellable:t.cancellable,class:"relative z-50"},{default:e.withCtx((({close:t})=>[e.createElementVNode("div",ee,[e.createVNode(Z,{class:"flex max-h-full max-w-full flex-col overflow-hidden bg-white"},{default:e.withCtx((()=>[e.createElementVNode("div",te,[e.renderSlot(r.$slots,"default",{close:t})])])),_:2},1024)])])),_:3},8,["cancellable"]))}});function oe(e){return t=a.marked(e,{mangle:!1,headerIds:!1}),u.default.sanitize(t,{ADD_ATTR:["target"]});var t}re.__file="src/components/modals/AGModal.vue";var se=e.defineComponent({__name:"AGMarkdown",props:{as:y("div"),langKey:y(),text:y(),inline:d(),raw:d()},setup(t){const r=t,o=e.computed((()=>r.text??(r.langKey&&D(r.langKey)))),s=e.computed((()=>{if(!o.value)return null;let e=oe(o.value);return r.inline&&(e=e.replace("<p>","<span>").replace("</p>","</span>")),e})),n=()=>e.h(r.as,{class:r.raw?"":"prose",innerHTML:s.value});return(t,r)=>(e.openBlock(),e.createBlock(n))}});se.__file="src/components/basic/AGMarkdown.vue";var ne=e.defineComponent({__name:"AGAlertModal",props:{title:y(),message:b()},setup:t=>(r,o)=>(e.openBlock(),e.createBlock(re,null,{default:e.withCtx((()=>[t.title?(e.openBlock(),e.createBlock(se,{key:0,text:t.title,as:"h2",class:"font-semibold",raw:"",inline:""},null,8,["text"])):e.createCommentVNode("v-if",!0),e.createVNode(se,{text:t.message},null,8,["text"])])),_:1}))});ne.__file="src/components/modals/AGAlertModal.vue";var ae=e.defineComponent({__name:"AGHeadlessButton",props:{url:y(),route:y(),routeParams:g((()=>({}))),routeQuery:g((()=>({}))),submit:d()},setup(r){const{url:o,route:s,routeParams:n,routeQuery:a,submit:l}=r,i=e.computed((()=>s?{tag:"router-link",props:{to:t.objectWithoutEmpty({name:s,params:n,query:a})}}:o?{tag:"a",props:{target:"_blank",href:o}}:{tag:"button",props:{type:l?"submit":"button"}}));return(t,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.value.tag),e.normalizeProps(e.guardReactiveProps(i.value.props)),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default")])),_:3},16))}});ae.__file="src/components/headless/forms/AGHeadlessButton.vue";var le=e.defineComponent({__name:"AGButton",props:{clear:d(),secondary:d()},setup(t){const r=t,o=e.computed((()=>r.secondary?"text-white bg-gray-600 hover:bg-gray-500 focus-visible:outline-offset-2 focus-visible:outline-gray-600":r.clear?"hover:bg-gray-500/20 focus-visible:outline-gray-500/60":["text-white bg-indigo-600","hover:bg-indigo-500","focus-visible:outline-offset-2 focus-visible:outline-indigo-600"].join(" ")));return(t,r)=>(e.openBlock(),e.createBlock(ae,{class:e.normalizeClass(["px-2.5 py-1.5 focus-visible:outline focus-visible:outline-2",o.value])},{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default")])),_:3},8,["class"]))}});le.__file="src/components/forms/AGButton.vue";const ie={class:"mt-2 flex flex-row-reverse gap-2"};var ue=e.defineComponent({__name:"AGConfirmModal",props:{title:y(),message:b()},setup:t=>(r,o)=>(e.openBlock(),e.createBlock(re,{cancellable:!1},{default:e.withCtx((({close:o})=>[t.title?(e.openBlock(),e.createBlock(se,{key:0,text:t.title,as:"h1"},null,8,["text"])):e.createCommentVNode("v-if",!0),e.createVNode(se,{text:t.message},null,8,["text"]),e.createElementVNode("div",ie,[e.createVNode(le,{onClick:e=>o(!0)},{default:e.withCtx((()=>[e.createTextVNode(e.toDisplayString(r.$td("ui.ok","OK")),1)])),_:2},1032,["onClick"]),e.createVNode(le,{secondary:"",onClick:e=>o()},{default:e.withCtx((()=>[e.createTextVNode(e.toDisplayString(r.$td("ui.cancel","Cancel")),1)])),_:2},1032,["onClick"])])])),_:1}))});ue.__file="src/components/modals/AGConfirmModal.vue";var ce=e.defineComponent({__name:"AGLoadingModal",props:{message:y()},setup(t){const r=t,o=e.computed((()=>r.message??R("ui.loading","Loading...")));return(t,r)=>(e.openBlock(),e.createBlock(re,{cancellable:!1},{default:e.withCtx((()=>[e.createVNode(se,{text:o.value},null,8,["text"])])),_:1}))}});ce.__file="src/components/modals/AGLoadingModal.vue";const de={$ui:H};var pe={async install(e,t){const r={[V.AlertModal]:ne,[V.ConfirmModal]:ue,[V.LoadingModal]:ce};Object.entries({...r,...t.components}).forEach((e=>{let[t,r]=e;return H.registerComponent(t,r)})),await P(e,de)}};const me={key:0};var fe=e.defineComponent({__name:"AGAppOverlays",setup(t){const r=e.ref(null),o=e.ref(!0),s=e.computed((()=>H.modals[0]??null));return W("show-overlays-backdrop",(async()=>{r.value&&o.value&&(o.value=!1,r.value.classList.remove("opacity-0"))})),W("hide-overlays-backdrop",(async()=>{r.value&&!o.value&&(o.value=!0,r.value.classList.add("opacity-0"))})),(t,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"$backdrop",ref:r,class:"pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0"},null,512),s.value?(e.openBlock(),e.createElementBlock("aside",me,[e.createVNode(X,{"child-index":1,modal:s.value},null,8,["modal"])])):e.createCommentVNode("v-if",!0)],64))}});fe.__file="src/components/AGAppOverlays.vue";const he={class:"flex h-full flex-col text-base font-normal leading-tight text-gray-900 antialiased"};var ve=e.defineComponent({__name:"AGAppLayout",setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock("div",he,[e.renderSlot(t.$slots,"default"),e.createVNode(fe)]))});ve.__file="src/components/AGAppLayout.vue";var ge=e.defineComponent({__name:"AGHeadlessInput",props:{as:y("div"),name:y(),modelValue:v([String,Number,Boolean])},emits:["update:modelValue"],setup(r,{expose:o,emit:s}){const n=r,a=e.computed((()=>l&&n.name?l.errors[n.name]??null:null)),l=e.inject("form",null),i={id:`input-${t.uuid()}`,value:e.computed((()=>l&&n.name?l.getFieldValue(n.name):n.modelValue)),errors:e.readonly(a),update(e){l&&n.name?l.setFieldValue(n.name,e):s("update:modelValue",e)}};return e.provide("input",i),o(i),(t,o)=>r.as?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.as),{key:0},{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default")])),_:3})):e.renderSlot(t.$slots,"default",{key:1})}});ge.__file="src/components/headless/forms/AGHeadlessInput.vue";const xe=["id"];var _e=e.defineComponent({__name:"AGHeadlessInputError",setup(t){const r=h("input","<AGHeadlessInputError> must be a child of a <AGHeadlessInput>"),o=e.computed((()=>r.errors?R(`errors.${r.errors[0]}`,`Error: ${r.errors[0]}`):null));return(t,s)=>o.value?(e.openBlock(),e.createElementBlock("p",{key:0,id:`${e.unref(r).id}-error`},e.toDisplayString(o.value),9,xe)):e.createCommentVNode("v-if",!0)}});_e.__file="src/components/headless/forms/AGHeadlessInputError.vue";const be=["id","type","value","aria-invalid","aria-describedby","checked"];var ye=e.defineComponent({__name:"AGHeadlessInputInput",props:{type:y("text")},setup(t){const r=t,o=e.ref(),s=h("input","<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>"),n=e.computed((()=>s.value)),a=e.computed((()=>{if("checkbox"===r.type)return!!n.value}));function l(){o.value&&s.update("checkbox"===r.type?o.value.checked:o.value.value)}return(r,i)=>(e.openBlock(),e.createElementBlock("input",{id:e.unref(s).id,ref_key:"$input",ref:o,type:t.type,value:n.value,"aria-invalid":e.unref(s).errors?"true":"false","aria-describedby":e.unref(s).errors?`${e.unref(s).id}-error`:void 0,checked:a.value,onInput:l},null,40,be))}});ye.__file="src/components/headless/forms/AGHeadlessInputInput.vue";const ke=["for"];var je=e.defineComponent({__name:"AGHeadlessInputLabel",setup(t){const r=h("input","<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>");return(t,o)=>(e.openBlock(),e.createElementBlock("label",{for:e.unref(r).id},[e.renderSlot(t.$slots,"default")],8,ke))}});je.__file="src/components/headless/forms/AGHeadlessInputLabel.vue";const Ae={class:"ml-2"};var Se=e.defineComponent({inheritAttrs:!1,__name:"AGCheckbox",props:{name:y()},setup(t){const r=p();return(o,s)=>(e.openBlock(),e.createBlock(ge,{ref_key:"$input",ref:r,name:t.name,class:"flex"},{default:e.withCtx((()=>[e.createVNode(ye,e.mergeProps(o.$attrs,{type:"checkbox",class:{"text-indigo-600 focus:ring-indigo-600":!e.unref(r)?.errors,"border-red-200 text-red-600 focus:ring-red-600":e.unref(r)?.errors}}),null,16,["class"]),e.createElementVNode("div",Ae,[o.$slots.default?(e.openBlock(),e.createBlock(je,{key:0},{default:e.withCtx((()=>[e.renderSlot(o.$slots,"default")])),_:3})):e.createCommentVNode("v-if",!0),e.createVNode(_e,{class:"text-sm text-red-600"})])])),_:3},8,["name"]))}});Se.__file="src/components/forms/AGCheckbox.vue";const we=["onSubmit"];var Ce=e.defineComponent({__name:"AGForm",props:{form:g()},emits:["submit"],setup(t,{emit:r}){const o=t;function s(){o.form&&!o.form.submit()||r("submit")}return e.provide("form",o.form),(t,r)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(s,["prevent"])},[e.renderSlot(t.$slots,"default")],40,we))}});Ce.__file="src/components/forms/AGForm.vue";const Ee={class:"absolute bottom-0 left-0 translate-y-full"};var Ge=e.defineComponent({inheritAttrs:!1,__name:"AGInput",props:{name:y()},setup(t){const r=p(),[o,s]=J();return(n,a)=>(e.openBlock(),e.createBlock(ge,{ref_key:"$input",ref:r,class:e.normalizeClass(["relative flex flex-col items-center",e.unref(s)]),name:t.name},{default:e.withCtx((()=>[e.createVNode(ye,e.mergeProps(e.unref(o),{class:["block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600",{"ring-1 ring-red-500":e.unref(r)?.errors}]}),null,16,["class"]),e.createElementVNode("div",Ee,[e.createVNode(_e,{class:"mt-1 text-sm text-red-500"})])])),_:1},8,["class","name"]))}});Ge.__file="src/components/forms/AGInput.vue";var Be=e.defineComponent({__name:"AGHeadlessModalTitle",props:{as:y("h2")},setup:t=>(r,o)=>(e.openBlock(),e.createBlock(e.unref(s.DialogTitle),{as:t.as},{default:e.withCtx((()=>[e.renderSlot(r.$slots,"default")])),_:3},8,["as"]))});Be.__file="src/components/headless/modals/AGHeadlessModalTitle.vue";const qe={String:"string",Number:"number",Boolean:"boolean"};class Me extends t.MagicObject{constructor(t){super(),i.default(this,"errors",void 0),i.default(this,"_fields",void 0),i.default(this,"_data",void 0),i.default(this,"_valid",void 0),i.default(this,"_submitted",void 0),i.default(this,"_errors",void 0),this._fields=t,this._submitted=e.ref(!1),this._data=this.getInitialData(t),this._errors=this.getInitialErrors(t),this._valid=e.computed((()=>!Object.values(this._errors).some((e=>null!==e)))),this.errors=e.readonly(this._errors)}get valid(){return this._valid.value}get submitted(){return this._submitted.value}setFieldValue(e,t){this._data[e]=t,this._submitted.value&&this.validate()}getFieldValue(e){return this._data[e]}validate(){const e=Object.entries(this._fields).reduce(((e,t)=>{let[r,o]=t;return e[r]=this.getFieldErrors(r,o),e}),{});return this.resetErrors(e),this.valid}reset(){this._submitted.value=!1,this.resetData(),this.resetErrors()}submit(){return this._submitted.value=!0,this.validate()}__get(e){return e in this._fields?this._data[e]:super.__get(e)}__set(e,t){e in this._fields?Object.assign(this._data,{[e]:t}):super.__set(e,t)}getFieldErrors(e,t){const r=[];return t.rules?.includes("required")&&!this._data[e]&&r.push("required"),r.length>0?r:null}getInitialData(t){if(this.static().isConjuring())return{};const r=Object.entries(t).reduce(((e,t)=>{let[r,o]=t;return e[r]=o.default??null,e}),{});return e.reactive(r)}getInitialErrors(t){if(this.static().isConjuring())return{};const r=Object.keys(t).reduce(((e,t)=>(e[t]=null,e)),{});return e.reactive(r)}resetData(){for(const[e,t]of Object.entries(this._fields))this._data[e]=t.default??null}resetErrors(e){Object.keys(this._errors).forEach((e=>delete this._errors[e])),e&&Object.assign(this._errors,e)}}exports.AGAlertModal=ne,exports.AGAppLayout=ve,exports.AGAppOverlays=fe,exports.AGButton=le,exports.AGCheckbox=Se,exports.AGConfirmModal=ue,exports.AGForm=Ce,exports.AGHeadlessButton=ae,exports.AGHeadlessInput=ge,exports.AGHeadlessInputError=_e,exports.AGHeadlessInputInput=ye,exports.AGHeadlessInputLabel=je,exports.AGHeadlessModal=Q,exports.AGHeadlessModalPanel=Z,exports.AGHeadlessModalTitle=Be,exports.AGInput=Ge,exports.AGLoadingModal=ce,exports.AGMarkdown=se,exports.AGModal=re,exports.AGModalContext=X,exports.App=M,exports.AppService=q,exports.Errors=F,exports.Events=G,exports.EventsService=E,exports.FormFieldTypes=qe,exports.Lang=O,exports.Service=C,exports.UI=H,exports.UIComponents=V,exports.arrayProp=function(e){return{type:Array,default:e??(()=>[])}},exports.booleanInput=function(e){return{default:e,type:qe.Boolean}},exports.booleanProp=d,exports.bootServices=P,exports.bootstrapApplication=async function(t){let r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const o=[j,z,U,$,pe,...r.plugins??[]],s=e.createApp(t);await Promise.all(o.map((e=>e.install(s,r)))??[]),s.mount("#app"),G.emit("application-mounted")},exports.componentRef=p,exports.defineDirective=m,exports.definePlugin=c,exports.defineServiceState=w,exports.enumProp=function(e,t){const r=Object.values(e);return{type:String,default:t??r[0]??null,validator:e=>r.includes(e)}},exports.injectOrFail=function(r,o){return e.inject(r)??t.fail(o??`Could not resolve '${r}' injection key`)},exports.injectReactive=f,exports.injectReactiveOrFail=h,exports.mixedProp=v,exports.numberInput=function(e){return{default:e,type:qe.Number}},exports.numberProp=function(){return{type:Number,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}},exports.objectProp=g,exports.onCleanMounted=function(r){let o=t.noop;e.onMounted((()=>o=r())),e.onUnmounted((()=>o()))},exports.requiredArrayProp=function(){return{type:Array,required:!0}},exports.requiredBooleanInput=function(e){return{default:e,type:qe.Boolean,rules:"required"}},exports.requiredEnumProp=function(e){const t=Object.values(e);return{type:String,required:!0,validator:e=>t.includes(e)}},exports.requiredMixedProp=function(e){return{type:e,required:!0}},exports.requiredNumberInput=function(e){return{default:e,type:qe.Number,rules:"required"}},exports.requiredNumberProp=x,exports.requiredObjectProp=_,exports.requiredStringInput=function(e){return{default:e,type:qe.String,rules:"required"}},exports.requiredStringProp=b,exports.stringInput=function(e){return{default:e,type:qe.String}},exports.stringProp=y,exports.translate=D,exports.translateWithDefault=R,exports.useEvent=W,exports.useForm=function(e){return new Me(e)},exports.useInputAttrs=J;
|
|
2
|
-
//# sourceMappingURL=aerogel-core.cjs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"aerogel-core.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|