@aerogel/core 0.0.0-next.c8f032a868370824898e171969aec1bb6827688e → 0.0.0-next.d197d66a9d339318d752a1d8a96b2919faba3003

package/src/components/forms/AGForm.vue

@@ -1,26 +0,0 @@
-<template>
-    <form @submit.prevent="submit">
-        <slot />
-    </form>
-</template>
-
-<script setup lang="ts">
-import { provide } from 'vue';
-
-import { objectProp } from '@/utils/vue';
-import type Form from '@/forms/Form';
-
-const props = defineProps({ form: objectProp<Form>() });
-
-const emit = defineEmits<{ submit: [] }>();
-
-provide('form', props.form);
-
-function submit() {
-    if (props.form && !props.form.submit()) {
-        return;
-    }
-
-    emit('submit');
-}
-</script>

package/src/components/forms/AGInput.vue

@@ -1,32 +0,0 @@
-<template>
-    <AGHeadlessInput
-        ref="$input"
-        as="div"
-        class="flex flex-col items-center"
-        :name="name"
-    >
-        <AGHeadlessInputInput
-            v-bind="$attrs"
-            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"
-            :class="{
-                'ring-1 ring-red-500': $input?.errors,
-            }"
-        />
-        <AGHeadlessInputError class="mt-1 text-sm text-red-500" />
-    </AGHeadlessInput>
-</template>
-
-<script setup lang="ts">
-import { componentRef, stringProp } from '@/utils/vue';
-
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
-
-import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
-import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
-import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
-
-defineProps({ name: stringProp() });
-defineOptions({ inheritAttrs: false });
-
-const $input = componentRef<IAGHeadlessInput>();
-</script>

package/src/components/forms/index.ts

@@ -1,5 +0,0 @@
-import AGButton from './AGButton.vue';
-import AGForm from './AGForm.vue';
-import AGInput from './AGInput.vue';
-
-export { AGButton, AGForm, AGInput };

package/src/components/headless/forms/AGHeadlessButton.vue

@@ -1,51 +0,0 @@
-<template>
-    <component :is="component.tag" v-bind="component.props">
-        <slot />
-    </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { objectWithoutEmpty } from '@noeldemartin/utils';
-import type { LocationQuery, RouteLocation, RouteParams } from 'vue-router';
-
-import { booleanProp, objectProp, stringProp } from '@/utils/vue';
-
-const { url, route, routeParams, routeQuery, submit } = defineProps({
-    url: stringProp(),
-    route: stringProp(),
-    routeParams: objectProp<RouteParams>(() => ({})),
-    routeQuery: objectProp<LocationQuery>(() => ({})),
-    submit: booleanProp(),
-});
-
-const component = computed(() => {
-    if (route) {
-        return {
-            tag: 'router-link',
-            props: {
-                to: objectWithoutEmpty<Partial<RouteLocation>>({
-                    name: route,
-                    params: routeParams,
-                    query: routeQuery,
-                }),
-            },
-        };
-    }
-
-    if (url) {
-        return {
-            tag: 'a',
-            props: {
-                target: '_blank',
-                href: url,
-            },
-        };
-    }
-
-    return {
-        tag: 'button',
-        props: { type: submit ? 'submit' : 'button' },
-    };
-});
-</script>

package/src/components/headless/forms/AGHeadlessInput.ts

@@ -1,8 +0,0 @@
-import type { ComputedRef, DeepReadonly, Ref } from 'vue';
-
-export interface IAGHeadlessInput {
-    id: string;
-    value: ComputedRef<string | number | null>;
-    errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: string | number | null): void;
-}

package/src/components/headless/forms/AGHeadlessInput.vue

@@ -1,54 +0,0 @@
-<template>
-    <component :is="as" v-if="as">
-        <slot />
-    </component>
-    <slot v-else />
-</template>
-
-<script setup lang="ts">
-import { computed, inject, provide, readonly } from 'vue';
-import { uuid } from '@noeldemartin/utils';
-
-import { stringProp } from '@/utils/vue';
-import type Form from '@/forms/Form';
-
-import type { IAGHeadlessInput } from './AGHeadlessInput';
-
-const emit = defineEmits(['update:modelValue']);
-const props = defineProps({
-    as: stringProp(),
-    name: stringProp(),
-    modelValue: stringProp(),
-});
-const errors = computed(() => {
-    if (!form || !props.name) {
-        return null;
-    }
-
-    return form.errors[props.name] ?? null;
-});
-const form = inject<Form | null>('form', null);
-const publicApi: IAGHeadlessInput = {
-    id: `input-${uuid()}`,
-    value: computed(() => {
-        if (form && props.name) {
-            return form.getFieldValue(props.name);
-        }
-
-        return props.modelValue;
-    }),
-    errors: readonly(errors),
-    update(value) {
-        if (form && props.name) {
-            form.setFieldValue(props.name, value);
-
-            return;
-        }
-
-        emit('update:modelValue', value);
-    },
-};
-
-provide<IAGHeadlessInput>('input', publicApi);
-defineExpose<IAGHeadlessInput>(publicApi);
-</script>

package/src/components/headless/forms/AGHeadlessInputInput.vue

@@ -1,33 +0,0 @@
-<template>
-    <input
-        :id="input.id"
-        ref="$input"
-        type="text"
-        :value="value"
-        :aria-invalid="input.errors ? 'true' : 'false'"
-        :aria-describedby="input.errors ? `${input.id}-error` : undefined"
-        @input="update"
-    >
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-import { injectReactiveOrFail } from '@/utils';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
-
-const $input = ref<HTMLInputElement>();
-const input = injectReactiveOrFail<IAGHeadlessInput>(
-    'input',
-    '<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>',
-);
-const value = computed(() => input.value);
-
-function update() {
-    if (!$input.value) {
-        return;
-    }
-
-    input.update($input.value.value);
-}
-</script>

package/src/components/headless/forms/AGHeadlessInputLabel.vue

@@ -1,16 +0,0 @@
-<template>
-    <label :for="input.id">
-        <slot />
-    </label>
-</template>
-
-<script setup lang="ts">
-import { injectReactiveOrFail } from '@/utils/vue';
-
-import type { IAGHeadlessInput } from './AGHeadlessInput';
-
-const input = injectReactiveOrFail<IAGHeadlessInput>(
-    'input',
-    '<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>',
-);
-</script>

package/src/components/headless/forms/index.ts

@@ -1,6 +0,0 @@
-export { IAGHeadlessInput } from './AGHeadlessInput';
-export { default as AGHeadlessButton } from './AGHeadlessButton.vue';
-export { default as AGHeadlessInput } from './AGHeadlessInput.vue';
-export { default as AGHeadlessInputError } from './AGHeadlessInputError.vue';
-export { default as AGHeadlessInputInput } from './AGHeadlessInputInput.vue';
-export { default as AGHeadlessInputLabel } from './AGHeadlessInputLabel.vue';

package/src/components/headless/modals/AGHeadlessModal.ts

@@ -1,7 +0,0 @@
-import type { IAGModal } from '@/components/modals/AGModal';
-
-export interface IAGHeadlessModal extends IAGModal {}
-
-export interface IAGHeadlessModalDefaultSlotProps {
-    close(result?: unknown): Promise<void>;
-}

package/src/components/headless/modals/AGHeadlessModal.vue

@@ -1,88 +0,0 @@
-<template>
-    <Dialog ref="$root" :open="true" @close="cancellable && close()">
-        <slot :close="close" />
-    </Dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, toRef } from 'vue';
-import { Dialog } from '@headlessui/vue';
-import type { VNode } from 'vue';
-
-import Events from '@/services/Events';
-import { useEvent } from '@/utils/composition/events';
-import { booleanProp, injectReactiveOrFail } from '@/utils/vue';
-import type { IAGModalContext } from '@/components/modals/AGModalContext';
-
-import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from './AGHeadlessModal';
-
-const props = defineProps({
-    cancellable: booleanProp(true),
-});
-
-const $root = ref<{ $el?: HTMLElement } | null>(null);
-const hidden = ref(true);
-const closed = ref(false);
-const { modal } = injectReactiveOrFail<IAGModalContext>(
-    'modal',
-    'could not obtain modal reference from <AGHeadlessModal>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
-);
-
-async function hide(): Promise<void> {
-    if (!$root.value?.$el) {
-        return;
-    }
-
-    hidden.value = true;
-}
-
-async function show(): Promise<void> {
-    if (!$root.value?.$el) {
-        return;
-    }
-
-    hidden.value = false;
-}
-
-async function close(result?: unknown) {
-    if (closed.value) {
-        return;
-    }
-
-    Events.emit('modal-will-close', { modal, result });
-
-    await hide();
-
-    closed.value = true;
-
-    Events.emit('modal-closed', { modal, result });
-}
-
-useEvent('close-modal', async ({ id, result }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await close(result);
-});
-
-useEvent('hide-modal', async ({ id }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await hide();
-});
-
-useEvent('show-modal', async ({ id }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await show();
-});
-
-defineSlots<{ default(props: IAGHeadlessModalDefaultSlotProps): VNode[] }>();
-defineExpose<IAGHeadlessModal>({ close, cancellable: toRef(props, 'cancellable') });
-</script>

package/src/components/headless/modals/AGHeadlessModalPanel.vue

@@ -1,24 +0,0 @@
-<template>
-    <DialogPanel>
-        <slot />
-        <AGModalContext v-if="childModal" :child-index="modal.childIndex + 1" :modal="childModal" />
-    </DialogPanel>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { DialogPanel } from '@headlessui/vue';
-
-import UI from '@/ui/UI';
-import { injectReactiveOrFail } from '@/utils/vue';
-import type { IAGModalContext } from '@/components/modals/AGModalContext';
-
-import AGModalContext from '../../modals/AGModalContext.vue';
-
-const modal = injectReactiveOrFail<IAGModalContext>(
-    'modal',
-    'could not obtain modal reference from <AGHeadlessModalPanel>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
-);
-const childModal = computed(() => UI.modals[modal.childIndex] ?? null);
-</script>

package/src/components/headless/modals/AGHeadlessModalTitle.vue

@@ -1,13 +0,0 @@
-<template>
-    <DialogTitle :as="as">
-        <slot />
-    </DialogTitle>
-</template>
-
-<script setup lang="ts">
-import { DialogTitle } from '@headlessui/vue';
-
-import { stringProp } from '@/utils/vue';
-
-defineProps({ as: stringProp('h2') });
-</script>

package/src/components/headless/modals/index.ts

@@ -1,6 +0,0 @@
-import AGHeadlessModal from './AGHeadlessModal.vue';
-import AGHeadlessModalPanel from './AGHeadlessModalPanel.vue';
-import AGHeadlessModalTitle from './AGHeadlessModalTitle.vue';
-import type { IAGHeadlessModal } from './AGHeadlessModal';
-
-export { AGHeadlessModal, AGHeadlessModalPanel, AGHeadlessModalTitle, IAGHeadlessModal };

package/src/components/modals/AGAlertModal.vue

@@ -1,26 +0,0 @@
-<template>
-    <AGModal>
-        <AGMarkdown
-            v-if="title"
-            :text="title"
-            as="h2"
-            class="font-semibold"
-            raw
-            inline
-        />
-        <AGMarkdown :text="message" />
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import { requiredStringProp, stringProp } from '@/utils/vue';
-
-import AGModal from './AGModal.vue';
-
-import AGMarkdown from '../basic/AGMarkdown.vue';
-
-defineProps({
-    title: stringProp(),
-    message: requiredStringProp(),
-});
-</script>

package/src/components/modals/AGConfirmModal.vue

@@ -1,30 +0,0 @@
-<template>
-    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false">
-        <AGMarkdown v-if="title" :text="title" as="h1" />
-        <AGMarkdown :text="message" />
-
-        <div class="mt-2 flex flex-row-reverse gap-2">
-            <AGButton @click="close(true)">
-                {{ $td('ui.ok', 'OK') }}
-            </AGButton>
-            <AGButton secondary @click="close()">
-                {{ $td('ui.cancel', 'Cancel') }}
-            </AGButton>
-        </div>
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import { requiredStringProp, stringProp } from '@/utils/vue';
-
-import AGModal from './AGModal.vue';
-import type { IAGModalDefaultSlotProps } from './AGModal';
-
-import AGButton from '../forms/AGButton.vue';
-import AGMarkdown from '../basic/AGMarkdown.vue';
-
-defineProps({
-    title: stringProp(),
-    message: requiredStringProp(),
-});
-</script>

package/src/components/modals/AGModal.ts

@@ -1,10 +0,0 @@
-import type { Ref } from 'vue';
-
-export interface IAGModal {
-    cancellable: Ref<boolean>;
-    close(): Promise<void>;
-}
-
-export interface IAGModalDefaultSlotProps {
-    close(result?: unknown): Promise<void>;
-}

package/src/components/modals/AGModal.vue

@@ -1,18 +0,0 @@
-<template>
-    <AGHeadlessModal v-slot="{ close }: IAGHeadlessModalDefaultSlotProps" class="relative z-50">
-        <div class="fixed inset-0 flex items-center justify-center">
-            <AGHeadlessModalPanel class="flex max-h-full max-w-full flex-col overflow-hidden bg-white">
-                <div class="flex max-h-full flex-col overflow-auto p-4">
-                    <slot :close="close" />
-                </div>
-            </AGHeadlessModalPanel>
-        </div>
-    </AGHeadlessModal>
-</template>
-
-<script setup lang="ts">
-import type { IAGHeadlessModalDefaultSlotProps } from '@/components/headless/modals/AGHeadlessModal';
-
-import AGHeadlessModal from '../headless/modals/AGHeadlessModal.vue';
-import AGHeadlessModalPanel from '../headless/modals/AGHeadlessModalPanel.vue';
-</script>

package/src/components/modals/AGModalContext.ts

@@ -1,8 +0,0 @@
-import type { Ref } from 'vue';
-
-import type { Modal } from '@/ui/UI.state';
-
-export interface IAGModalContext {
-    modal: Ref<Modal>;
-    childIndex: Ref<number>;
-}

package/src/components/modals/AGModalContext.vue

@@ -1,22 +0,0 @@
-<template>
-    <component :is="modal.component" v-bind="modal.properties" />
-</template>
-
-<script setup lang="ts">
-import { provide, toRef } from 'vue';
-
-import { requiredNumberProp, requiredObjectProp } from '@/utils/vue';
-import type { Modal } from '@/ui/UI.state';
-
-import type { IAGModalContext } from './AGModalContext';
-
-const props = defineProps({
-    modal: requiredObjectProp<Modal>(),
-    childIndex: requiredNumberProp(),
-});
-
-provide<IAGModalContext>('modal', {
-    modal: toRef(props, 'modal'),
-    childIndex: toRef(props, 'childIndex'),
-});
-</script>

package/src/components/modals/index.ts

@@ -1,7 +0,0 @@
-import AGAlertModal from './AGAlertModal.vue';
-import AGConfirmModal from './AGConfirmModal.vue';
-import AGModal from './AGModal.vue';
-import AGModalContext from './AGModalContext.vue';
-import { IAGModal } from './AGModal';
-
-export { AGAlertModal, AGConfirmModal, AGModal, AGModalContext, IAGModal };

package/src/directives/initial-focus.ts

@@ -1,11 +0,0 @@
-import { defineDirective } from '@/utils/vue';
-
-export default defineDirective({
-    mounted(element: HTMLElement, { value }) {
-        if (value === false) {
-            return;
-        }
-
-        element.focus();
-    },
-});

package/src/forms/Form.test.ts

@@ -1,37 +0,0 @@
-import { describe, expect, expectTypeOf, it } from 'vitest';
-
-import { useForm } from './composition';
-import { FormFieldTypes } from '@/main';
-import { numberInput, requiredStringInput } from '@/forms/utils';
-
-describe('Form', () => {
-
-    it('defines magic fields', () => {
-        const form = useForm({
-            name: requiredStringInput(),
-            age: numberInput(),
-        });
-
-        expectTypeOf(form.name).toEqualTypeOf<string>();
-        expectTypeOf(form.age).toEqualTypeOf<number | null>();
-    });
-
-    it('validates required fields', () => {
-        // Arrange
-        const form = useForm({
-            name: {
-                type: FormFieldTypes.String,
-                rules: 'required',
-            },
-        });
-
-        // Act
-        form.submit();
-
-        // Assert
-        expect(form.valid).toBe(false);
-        expect(form.submitted).toBe(true);
-        expect(form.errors.name).toEqual(['required']);
-    });
-
-});