@aerogel/core 0.0.0-next.71f28064caa2ea968f0e99396b672de218176260 → 0.0.0-next.73a6df428477c011a1aebe0a932ebef0aa5e1b16

package/src/components/modals/AGErrorReportModalTitle.vue

@@ -1,25 +0,0 @@
-<template>
-    <AGMarkdown :text="text" inline />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { numberProp, requiredObjectProp } from '@/utils/vue';
-import type { ErrorReport } from '@/errors';
-
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-const props = defineProps({
-    report: requiredObjectProp<ErrorReport>(),
-    currentReport: numberProp(),
-    totalReports: numberProp(),
-});
-const text = computed(() => {
-    if (!props.totalReports || props.totalReports <= 1) {
-        return props.report.title;
-    }
-
-    return `${props.report.title} (${props.currentReport}/${props.totalReports})`;
-});
-</script>

package/src/components/modals/AGLoadingModal.ts

@@ -1,23 +0,0 @@
-import { computed } from 'vue';
-import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
-
-import { stringProp } from '@/utils';
-import { translateWithDefault } from '@/lang';
-
-export const loadingModalProps = {
-    message: stringProp(),
-};
-
-export type AGLoadingModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof loadingModalProps>>;
-
-export function useLoadingModalProps(): typeof loadingModalProps {
-    return loadingModalProps;
-}
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function useLoadingModal(props: ExtractPropTypes<typeof loadingModalProps>) {
-    const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
-
-    return { renderedMessage };
-}

package/src/components/modals/AGLoadingModal.vue

@@ -1,15 +0,0 @@
-<template>
-    <AGModal :cancellable="false">
-        <AGMarkdown :text="renderedMessage" />
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import AGModal from './AGModal.vue';
-import { useLoadingModal, useLoadingModalProps } from './AGLoadingModal';
-
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-const props = defineProps(useLoadingModalProps());
-const { renderedMessage } = useLoadingModal(props);
-</script>

package/src/components/modals/AGModal.ts

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

package/src/components/modals/AGModal.vue

@@ -1,39 +0,0 @@
-<template>
-    <AGHeadlessModal
-        ref="$modal"
-        v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
-        v-bind="props"
-        class="relative z-50"
-    >
-        <div class="fixed inset-0 flex items-center justify-center p-8">
-            <AGHeadlessModalPanel class="flex max-h-full max-w-full flex-col overflow-hidden bg-white p-4">
-                <AGHeadlessModalTitle v-if="title" class="mb-2 text-lg font-semibold">
-                    <AGMarkdown :text="title" inline />
-                </AGHeadlessModalTitle>
-                <div class="flex max-h-full flex-col overflow-auto" v-bind="$attrs">
-                    <slot :close="close" />
-                </div>
-            </AGHeadlessModalPanel>
-        </div>
-    </AGHeadlessModal>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import { useModalExpose, useModalProps } from '@/components/headless/modals/AGHeadlessModal';
-import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from '@/components/headless/modals/AGHeadlessModal';
-
-import type { IAGModal } from './AGModal';
-
-import AGHeadlessModal from '../headless/modals/AGHeadlessModal.vue';
-import AGHeadlessModalPanel from '../headless/modals/AGHeadlessModalPanel.vue';
-import AGHeadlessModalTitle from '../headless/modals/AGHeadlessModalTitle.vue';
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-const props = defineProps(useModalProps());
-const $modal = ref<IAGHeadlessModal>();
-
-defineOptions({ inheritAttrs: false });
-defineExpose<IAGModal>(useModalExpose($modal));
-</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/AGModalTitle.vue

@@ -1,9 +0,0 @@
-<template>
-    <AGHeadlessModalTitle class="mb-2 font-semibold">
-        <slot />
-    </AGHeadlessModalTitle>
-</template>
-
-<script setup lang="ts">
-import AGHeadlessModalTitle from '../headless/modals/AGHeadlessModalTitle.vue';
-</script>

package/src/components/modals/AGPromptModal.ts

@@ -1,30 +0,0 @@
-import { computed } from 'vue';
-import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
-
-import { requiredStringProp, stringProp } from '@/utils';
-import { translateWithDefault } from '@/lang';
-
-export const promptModalProps = {
-    title: stringProp(),
-    message: requiredStringProp(),
-    label: stringProp(),
-    defaultValue: stringProp(),
-    placeholder: stringProp(),
-    acceptText: stringProp(),
-    cancelText: stringProp(),
-};
-
-export type AGPromptModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof promptModalProps>>;
-
-export function usePromptModalProps(): typeof promptModalProps {
-    return promptModalProps;
-}
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function usePromptModal(props: ExtractPropTypes<typeof promptModalProps>) {
-    const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
-    const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
-
-    return { renderedAcceptText, renderedCancelText };
-}

package/src/components/modals/AGPromptModal.vue

@@ -1,34 +0,0 @@
-<template>
-    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false" :title="title">
-        <AGMarkdown :text="message" />
-
-        <AGForm :form="form" @submit="close(form.draft)">
-            <AGInput name="draft" :placeholder="placeholder" :label="label" />
-
-            <div class="mt-2 flex flex-row-reverse gap-2">
-                <AGButton submit>
-                    {{ renderedAcceptText }}
-                </AGButton>
-                <AGButton color="secondary" @click="close()">
-                    {{ renderedCancelText }}
-                </AGButton>
-            </div>
-        </AGForm>
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import AGModal from './AGModal.vue';
-import { usePromptModal, usePromptModalProps } from './AGPromptModal';
-import type { IAGModalDefaultSlotProps } from './AGModal';
-
-import AGButton from '../forms/AGButton.vue';
-import AGForm from '../forms/AGForm.vue';
-import AGInput from '../forms/AGInput.vue';
-import AGMarkdown from '../lib/AGMarkdown.vue';
-import { requiredStringInput, useForm } from '../../forms';
-
-const props = defineProps(usePromptModalProps());
-const form = useForm({ draft: requiredStringInput(props.defaultValue ?? '') });
-const { renderedAcceptText, renderedCancelText } = usePromptModal(props);
-</script>

package/src/components/modals/index.ts

@@ -1,17 +0,0 @@
-export * from './AGAlertModal';
-export * from './AGConfirmModal';
-export * from './AGErrorReportModal';
-export * from './AGLoadingModal';
-export * from './AGModal';
-export * from './AGModalContext';
-export * from './AGPromptModal';
-
-export { default as AGAlertModal } from './AGAlertModal.vue';
-export { default as AGConfirmModal } from './AGConfirmModal.vue';
-export { default as AGErrorReportModalButtons } from './AGErrorReportModalButtons.vue';
-export { default as AGErrorReportModalTitle } from './AGErrorReportModalTitle.vue';
-export { default as AGLoadingModal } from './AGLoadingModal.vue';
-export { default as AGModal } from './AGModal.vue';
-export { default as AGModalContext } from './AGModalContext.vue';
-export { default as AGModalTitle } from './AGModalTitle.vue';
-export { default as AGPromptModal } from './AGPromptModal.vue';

package/src/components/snackbars/AGSnackbar.vue

@@ -1,36 +0,0 @@
-<template>
-    <AGHeadlessSnackbar class="flex flex-row items-center justify-center gap-3 p-4" :class="styleClasses">
-        <AGMarkdown :text="message" inline />
-        <AGButton
-            v-for="(action, i) of actions"
-            :key="i"
-            :color="color"
-            @click="activate(action)"
-        >
-            {{ action.text }}
-        </AGButton>
-    </AGHeadlessSnackbar>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { Colors } from '@/components/constants';
-import { useSnackbar, useSnackbarProps } from '@/components/headless/snackbars';
-
-import AGButton from '../forms/AGButton.vue';
-import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-const props = defineProps(useSnackbarProps());
-const { activate } = useSnackbar(props);
-const styleClasses = computed(() => {
-    switch (props.color) {
-        case Colors.Danger:
-            return 'bg-red-200 text-red-900';
-        default:
-        case Colors.Secondary:
-            return 'bg-gray-900 text-white';
-    }
-});
-</script>

package/src/components/snackbars/index.ts

@@ -1,3 +0,0 @@
-import AGSnackbar from './AGSnackbar.vue';
-
-export { AGSnackbar };

package/src/components/utils.ts

@@ -1,10 +0,0 @@
-export function extractComponentProps<T extends Record<string, unknown>>(
-    values: Record<string, unknown>,
-    definitions: Record<string, unknown>,
-): T {
-    return Object.keys(definitions).reduce((extracted, prop) => {
-        extracted[prop] = values[prop];
-
-        return extracted;
-    }, {} as Record<string, unknown>) as T;
-}

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,58 +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']);
-    });
-
-    it('resets form', () => {
-        // Arrange
-        const form = useForm({
-            name: {
-                type: FormFieldTypes.String,
-                rules: 'required',
-            },
-        });
-
-        form.name = 'Foo bar';
-        form.submit();
-
-        // Act
-        form.reset();
-
-        // Assert
-        expect(form.valid).toBe(true);
-        expect(form.submitted).toBe(false);
-        expect(form.name).toBeNull();
-    });
-
-});

package/src/forms/Form.ts

@@ -1,205 +0,0 @@
-import { MagicObject, arrayRemove } from '@noeldemartin/utils';
-import { computed, nextTick, reactive, readonly, ref } from 'vue';
-import type { ObjectValues } from '@noeldemartin/utils';
-import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
-
-export const FormFieldTypes = {
-    String: 'string',
-    Number: 'number',
-    Boolean: 'boolean',
-    Object: 'object',
-} as const;
-
-export interface FormFieldDefinition<TType extends FormFieldType = FormFieldType, TRules extends string = string> {
-    type: TType;
-    default?: GetFormFieldValue<TType>;
-    rules?: TRules;
-}
-
-export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
-export type FormFieldType = ObjectValues<typeof FormFieldTypes>;
-export type FormFieldValue = GetFormFieldValue<FormFieldType>;
-
-export type FormData<T> = {
-    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules>
-        ? TRules extends 'required'
-            ? GetFormFieldValue<TType>
-            : GetFormFieldValue<TType> | null
-        : never;
-};
-
-export type FormErrors<T> = {
-    [k in keyof T]: string[] | null;
-};
-
-export type GetFormFieldValue<TType> = TType extends typeof FormFieldTypes.String
-    ? string
-    : TType extends typeof FormFieldTypes.Number
-    ? number
-    : TType extends typeof FormFieldTypes.Boolean
-    ? boolean
-    : TType extends typeof FormFieldTypes.Object
-    ? object
-    : never;
-
-const validForms: WeakMap<Form, ComputedRef<boolean>> = new WeakMap();
-
-export type FormListener = (input: string) => unknown;
-
-export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
-
-    public errors: DeepReadonly<UnwrapNestedRefs<FormErrors<Fields>>>;
-
-    private _fields: Fields;
-    private _data: FormData<Fields>;
-    private _submitted: Ref<boolean>;
-    private _errors: FormErrors<Fields>;
-    private _listeners: Record<string, FormListener[]> = {};
-
-    constructor(fields: Fields) {
-        super();
-
-        this._fields = fields;
-        this._submitted = ref(false);
-        this._data = this.getInitialData(fields);
-        this._errors = this.getInitialErrors(fields);
-
-        validForms.set(
-            this,
-            computed(() => !Object.values(this._errors).some((error) => error !== null)),
-        );
-
-        this.errors = readonly(this._errors);
-    }
-
-    public get valid(): boolean {
-        return !!validForms.get(this)?.value;
-    }
-
-    public get submitted(): boolean {
-        return this._submitted.value;
-    }
-
-    public setFieldValue<T extends keyof Fields>(field: T, value: FormData<Fields>[T]): void {
-        this._data[field] = value;
-
-        if (this._submitted.value) {
-            this.validate();
-        }
-    }
-
-    public getFieldValue<T extends keyof Fields>(field: T): GetFormFieldValue<Fields[T]['type']> {
-        return this._data[field] as unknown as GetFormFieldValue<Fields[T]['type']>;
-    }
-
-    public validate(): boolean {
-        const errors = Object.entries(this._fields).reduce((formErrors, [name, definition]) => {
-            formErrors[name] = this.getFieldErrors(name, definition);
-
-            return formErrors;
-        }, {} as Record<string, string[] | null>);
-
-        this.resetErrors(errors);
-
-        return this.valid;
-    }
-
-    public reset(options: { keepData?: boolean; keepErrors?: boolean } = {}): void {
-        this._submitted.value = false;
-
-        options.keepData || this.resetData();
-        options.keepErrors || this.resetErrors();
-    }
-
-    public submit(): boolean {
-        this._submitted.value = true;
-
-        return this.validate();
-    }
-
-    public on(event: string, listener: FormListener): () => void {
-        this._listeners[event] ??= [];
-        this._listeners[event]?.push(listener);
-
-        return () => this.off(event, listener);
-    }
-
-    public off(event: string, listener: FormListener): void {
-        arrayRemove(this._listeners[event] ?? [], listener);
-    }
-
-    public async focus(input: string): Promise<void> {
-        await nextTick();
-
-        this._listeners['focus']?.forEach((listener) => listener(input));
-    }
-
-    protected __get(property: string): unknown {
-        if (!(property in this._fields)) {
-            return super.__get(property);
-        }
-
-        return this._data[property];
-    }
-
-    protected __set(property: string, value: unknown): void {
-        if (!(property in this._fields)) {
-            super.__set(property, value);
-
-            return;
-        }
-
-        Object.assign(this._data, { [property]: value });
-    }
-
-    private getFieldErrors(name: keyof Fields, definition: FormFieldDefinition): string[] | null {
-        const errors = [];
-
-        if (definition.rules?.includes('required') && !this._data[name]) {
-            errors.push('required');
-        }
-
-        return errors.length > 0 ? errors : null;
-    }
-
-    private getInitialData(fields: Fields): FormData<Fields> {
-        if (this.static().isConjuring()) {
-            return {} as FormData<Fields>;
-        }
-
-        const data = Object.entries(fields).reduce((formData, [name, definition]) => {
-            formData[name as keyof Fields] = (definition.default ?? null) as FormData<Fields>[keyof Fields];
-
-            return formData;
-        }, {} as FormData<Fields>);
-
-        return reactive(data) as FormData<Fields>;
-    }
-
-    private getInitialErrors(fields: Fields): FormErrors<Fields> {
-        if (this.static().isConjuring()) {
-            return {} as FormErrors<Fields>;
-        }
-
-        const errors = Object.keys(fields).reduce((formErrors, name) => {
-            formErrors[name as keyof Fields] = null;
-
-            return formErrors;
-        }, {} as FormErrors<Fields>);
-
-        return reactive(errors) as FormErrors<Fields>;
-    }
-
-    private resetData(): void {
-        for (const [name, field] of Object.entries(this._fields)) {
-            this._data[name as keyof Fields] = (field.default ?? null) as FormData<Fields>[keyof Fields];
-        }
-    }
-
-    private resetErrors(errors?: Record<string, string[] | null>): void {
-        Object.keys(this._errors).forEach((key) => delete this._errors[key as keyof Fields]);
-
-        errors && Object.assign(this._errors, errors);
-    }
-
-}

package/src/forms/composition.ts

@@ -1,6 +0,0 @@
-import Form from '@/forms/Form';
-import type { FormData, FormFieldDefinitions } from '@/forms/Form';
-
-export function useForm<const T extends FormFieldDefinitions>(fields: T): Form<T> & FormData<T> {
-    return new Form(fields) as Form<T> & FormData<T>;
-}

package/src/main.histoire.ts

@@ -1 +0,0 @@
-import './assets/histoire.css';

package/src/utils/tailwindcss.test.ts

@@ -1,26 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { removeInteractiveClasses } from './tailwindcss';
-
-describe('TailwindCSS utils', () => {
-
-    it('Removes interactive classes', () => {
-        const cases: [string, string][] = [
-            ['text-red hover:text-green', 'text-red'],
-            ['text-red hover:text-green text-lg', 'text-red text-lg'],
-            [
-                `
-                    text-red text-lg
-                    focus:text-yellow
-                    hover:focus:text-black
-                `,
-                'text-red text-lg',
-            ],
-        ];
-
-        cases.forEach(([original, expected]) => {
-            expect(removeInteractiveClasses(original)).toEqual(expected);
-        });
-    });
-
-});

package/src/utils/tailwindcss.ts

@@ -1,7 +0,0 @@
-export function removeInteractiveClasses(classes: string): string {
-    return classes
-        .split(/\s+/)
-        .filter((className) => !/^(hover|focus|focus-visible):/.test(className))
-        .join(' ')
-        .trim();
-}

package/tailwind.config.js

@@ -1,4 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: ['./src/**/*.{vue,ts}'],
-};

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-    "extends": "../../tsconfig.json",
-    "compilerOptions": {
-        "types": ["unplugin-icons/types/vue3", "@aerogel/vite/dist/virtual"],
-        "baseUrl": ".",
-        "paths": {
-            "@/*": ["./src/*"]
-        }
-    },
-    "include": ["src/**/*.ts", "src/**/*.vue"]
-}

package/vite.config.ts

@@ -1,14 +0,0 @@
-import Aerogel from '@aerogel/vite';
-import Icons from 'unplugin-icons/vite';
-import { defineConfig } from 'vitest/config';
-import { resolve } from 'path';
-
-export default defineConfig({
-    test: { clearMocks: true },
-    plugins: [Aerogel(), Icons()],
-    resolve: {
-        alias: {
-            '@': resolve(__dirname, './src'),
-        },
-    },
-});