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

package/src/components/lib/AGProgressBar.vue

@@ -1,55 +0,0 @@
-<template>
-    <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
-        <div :class="barClasses" :style="`transform:translateX(-${(1 - renderedProgress) * 100}%)`" />
-        <span class="sr-only">
-            {{
-                $td('ui.progress', '{progress}% complete', {
-                    progress: renderedProgress * 100,
-                })
-            }}
-        </span>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onUnmounted, ref, watch } from 'vue';
-
-import { numberProp, objectProp, stringProp } from '@aerogel/core/utils/vue';
-import type { Job } from '@aerogel/core/jobs';
-
-const props = defineProps({
-    progress: numberProp(),
-    barClass: stringProp(''),
-    job: objectProp<Job>(),
-});
-
-let cleanup: Function | undefined;
-const jobProgress = ref(0);
-const barClasses = computed(() => {
-    const classes = props.barClass ?? '';
-
-    return `size-full transition-transform duration-500 ease-linear ${
-        classes.includes('bg-') ? classes : `${classes} bg-gray-700`
-    }`;
-});
-const renderedProgress = computed(() => {
-    if (typeof props.progress === 'number') {
-        return props.progress;
-    }
-
-    return jobProgress.value;
-});
-
-watch(
-    () => props.job,
-    () => {
-        cleanup?.();
-
-        jobProgress.value = props.job?.progress ?? 0;
-        cleanup = props.job?.listeners.add({ onUpdated: (progress) => (jobProgress.value = progress) });
-    },
-    { immediate: true },
-);
-
-onUnmounted(() => cleanup?.());
-</script>

package/src/components/lib/index.ts

@@ -1,6 +0,0 @@
-export { default as AGErrorMessage } from './AGErrorMessage.vue';
-export { default as AGLink } from './AGLink.vue';
-export { default as AGMarkdown } from './AGMarkdown.vue';
-export { default as AGMeasured } from './AGMeasured.vue';
-export { default as AGProgressBar } from './AGProgressBar.vue';
-export { default as AGStartupCrash } from './AGStartupCrash.vue';

package/src/components/modals/AGAlertModal.ts

@@ -1,18 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
-
-import { requiredStringProp, stringProp } from '@aerogel/core/utils';
-import type { AcceptRefs } from '@aerogel/core/utils';
-
-export const alertModalProps = {
-    title: stringProp(),
-    message: requiredStringProp(),
-};
-
-export type AGAlertModalProps = Pretty<
-    AcceptRefs<ObjectWithout<ExtractPropTypes<typeof alertModalProps>, null | undefined>>
->;
-
-export function useAlertModalProps(): typeof alertModalProps {
-    return alertModalProps;
-}

package/src/components/modals/AGAlertModal.vue

@@ -1,14 +0,0 @@
-<template>
-    <AGModal :title="title">
-        <AGMarkdown :text="message" />
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import AGModal from './AGModal.vue';
-import { useAlertModalProps } from './AGAlertModal';
-
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-defineProps(useAlertModalProps());
-</script>

package/src/components/modals/AGConfirmModal.ts

@@ -1,42 +0,0 @@
-import { computed } from 'vue';
-import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
-
-import { Colors } from '@aerogel/core/components/constants';
-import { booleanProp, enumProp, objectProp, requiredStringProp, stringProp } from '@aerogel/core/utils';
-import { translateWithDefault } from '@aerogel/core/lang';
-import type { AcceptRefs } from '@aerogel/core/utils';
-import type { ConfirmCheckboxes } from '@aerogel/core/ui';
-
-export const confirmModalProps = {
-    title: stringProp(),
-    message: requiredStringProp(),
-    acceptText: stringProp(),
-    acceptColor: enumProp(Colors, Colors.Primary),
-    cancelText: stringProp(),
-    cancelColor: enumProp(Colors, Colors.Clear),
-    checkboxes: objectProp<ConfirmCheckboxes>(),
-    actions: objectProp<Record<string, () => unknown>>(),
-    required: booleanProp(false),
-};
-
-export type AGConfirmModalProps = Pretty<
-    AcceptRefs<
-        SubPartial<
-            ObjectWithout<ExtractPropTypes<typeof confirmModalProps>, null | undefined>,
-            'acceptColor' | 'cancelColor'
-        >
-    >
->;
-
-export function useConfirmModalProps(): typeof confirmModalProps {
-    return confirmModalProps;
-}
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function useConfirmModal(props: ExtractPropTypes<typeof confirmModalProps>) {
-    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/AGConfirmModal.vue

@@ -1,27 +0,0 @@
-<template>
-    <AGModal v-slot="{ close }: IModalDefaultSlotProps" :cancellable="false" :title="title">
-        <AGMarkdown :text="message" :actions="actions" />
-
-        <div class="mt-2 flex flex-row-reverse gap-2">
-            <AGButton :color="acceptColor" @click="close(true)">
-                {{ renderedAcceptText }}
-            </AGButton>
-            <AGButton v-if="!required" :color="cancelColor" @click="close()">
-                {{ renderedCancelText }}
-            </AGButton>
-        </div>
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import type { IModalDefaultSlotProps } from '@aerogel/core/components/contracts/Modal';
-
-import AGModal from './AGModal.vue';
-import { useConfirmModal, useConfirmModalProps } from './AGConfirmModal';
-
-import AGButton from '../forms/AGButton.vue';
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-const props = defineProps(useConfirmModalProps());
-const { renderedAcceptText, renderedCancelText } = useConfirmModal(props);
-</script>

package/src/components/modals/AGErrorReportModal.vue

@@ -1,54 +0,0 @@
-<template>
-    <AGModal>
-        <div>
-            <h2 class="flex items-center justify-between text-lg font-medium">
-                <div class="flex items-center">
-                    <AGErrorReportModalTitle
-                        :report="report"
-                        :current-report="activeReportIndex + 1"
-                        :total-reports="reports.length"
-                    />
-                    <template v-if="reports.length > 1">
-                        <AGButton
-                            color="clear"
-                            :disabled="activeReportIndex === 0"
-                            :title="previousReportText"
-                            :aria-label="previousReportText"
-                            @click="activeReportIndex--"
-                        >
-                            <IconCheveronLeft aria-hidden="true" class="size-4" />
-                        </AGButton>
-                        <AGButton
-                            color="clear"
-                            :disabled="activeReportIndex === reports.length - 1"
-                            :title="nextReportText"
-                            :aria-label="nextReportText"
-                            @click="activeReportIndex++"
-                        >
-                            <IconCheveronRight aria-hidden="true" class="size-4" />
-                        </AGButton>
-                    </template>
-                </div>
-                <AGErrorReportModalButtons :report="report" />
-            </h2>
-            <AGMarkdown v-if="report.description" :text="report.description" class="mt-2" />
-        </div>
-        <pre class="h-full overflow-auto bg-gray-200 p-4 text-xs text-red-900" v-text="details" />
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import IconCheveronRight from '~icons/zondicons/cheveron-right';
-import IconCheveronLeft from '~icons/zondicons/cheveron-left';
-
-import { useErrorReportModal, useErrorReportModalProps } from './AGErrorReportModal';
-
-import AGButton from '../forms/AGButton.vue';
-import AGErrorReportModalButtons from './AGErrorReportModalButtons.vue';
-import AGErrorReportModalTitle from './AGErrorReportModalTitle.vue';
-import AGMarkdown from '../lib/AGMarkdown.vue';
-import AGModal from './AGModal.vue';
-
-const props = defineProps(useErrorReportModalProps());
-const { activeReportIndex, details, nextReportText, previousReportText, report } = useErrorReportModal(props);
-</script>

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 '@aerogel/core/utils/vue';
-import type { ErrorReport } from '@aerogel/core/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,29 +0,0 @@
-import { computed } from 'vue';
-import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithout } from '@noeldemartin/utils';
-
-import { numberProp, stringProp } from '@aerogel/core/utils';
-import { translateWithDefault } from '@aerogel/core/lang';
-import type { AcceptRefs } from '@aerogel/core/utils';
-
-export const loadingModalProps = {
-    title: stringProp(),
-    message: stringProp(),
-    progress: numberProp(),
-};
-
-export type AGLoadingModalProps = AcceptRefs<
-    ObjectWithout<ExtractPropTypes<typeof loadingModalProps>, null | undefined>
->;
-
-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...'));
-    const showProgress = computed(() => typeof props.progress === 'number');
-
-    return { renderedMessage, showProgress };
-}

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.vue

@@ -1,40 +0,0 @@
-<template>
-    <AGHeadlessModal
-        ref="$modal"
-        v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
-        v-bind="props"
-        class="relative"
-    >
-        <AGHeadlessModalContent
-            class="fixed top-1/2 left-1/2 z-50 max-w-lg -translate-x-1/2 -translate-y-1/2 bg-white p-4"
-        >
-            <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>
-        </AGHeadlessModalContent>
-    </AGHeadlessModal>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import { AGHeadlessModalTitle } from '@aerogel/core/components/headless/modals';
-import { modalExpose, modalProps } from '@aerogel/core/components/headless/modals/AGHeadlessModal';
-import type {
-    IAGHeadlessModal,
-    IAGHeadlessModalDefaultSlotProps,
-} from '@aerogel/core/components/headless/modals/AGHeadlessModal';
-
-import AGHeadlessModal from '../headless/modals/AGHeadlessModal.vue';
-import AGHeadlessModalContent from '../headless/modals/AGHeadlessModalContent.vue';
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-const props = defineProps(modalProps());
-const $modal = ref<IAGHeadlessModal>();
-
-defineOptions({ inheritAttrs: false });
-defineExpose(modalExpose($modal));
-</script>

package/src/components/modals/AGModalContext.ts

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

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 '@aerogel/core/components/headless/modals';
-</script>

package/src/components/modals/AGPromptModal.ts

@@ -1,41 +0,0 @@
-import { computed } from 'vue';
-import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
-
-import { Colors } from '@aerogel/core/components/constants';
-import { enumProp, requiredStringProp, stringProp } from '@aerogel/core/utils';
-import { translateWithDefault } from '@aerogel/core/lang';
-import type { AcceptRefs } from '@aerogel/core/utils';
-
-export const promptModalProps = {
-    title: stringProp(),
-    message: requiredStringProp(),
-    label: stringProp(),
-    defaultValue: stringProp(),
-    placeholder: stringProp(),
-    acceptText: stringProp(),
-    acceptColor: enumProp(Colors, Colors.Primary),
-    cancelText: stringProp(),
-    cancelColor: enumProp(Colors, Colors.Clear),
-};
-
-export type AGPromptModalProps = Pretty<
-    AcceptRefs<
-        SubPartial<
-            ObjectWithout<ExtractPropTypes<typeof promptModalProps>, null | undefined>,
-            'acceptColor' | 'cancelColor'
-        >
-    >
->;
-
-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,35 +0,0 @@
-<template>
-    <AGModal v-slot="{ close }: IModalDefaultSlotProps" :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 :color="acceptColor" submit>
-                    {{ renderedAcceptText }}
-                </AGButton>
-                <AGButton :color="cancelColor" @click="close()">
-                    {{ renderedCancelText }}
-                </AGButton>
-            </div>
-        </AGForm>
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import type { IModalDefaultSlotProps } from '@aerogel/core/components/contracts/Modal';
-
-import AGModal from './AGModal.vue';
-import { usePromptModal, usePromptModalProps } from './AGPromptModal';
-
-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,16 +0,0 @@
-export * from './AGAlertModal';
-export * from './AGConfirmModal';
-export * from './AGErrorReportModal';
-export * from './AGLoadingModal';
-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 '@aerogel/core/components/constants';
-import { useSnackbar, useSnackbarProps } from '@aerogel/core/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,63 +0,0 @@
-import { isObject } from '@noeldemartin/utils';
-import { customRef } from 'vue';
-import type { ExtractPropTypes, PropType, Ref, UnwrapNestedRefs } from 'vue';
-
-import type { HasElement } from '@aerogel/core/components/contracts/shared';
-
-export type ComponentPropDefinitions<T> = {
-    [K in keyof T]: {
-        type?: PropType<T[K]>;
-        default: T[K] | (() => T[K]) | null;
-    };
-};
-
-export type PickComponentProps<TValues, TDefinitions> = {
-    [K in keyof TValues]: K extends keyof TDefinitions ? TValues[K] : never;
-};
-
-export function elementRef(): Ref<HTMLElement | undefined> {
-    return customRef((track, trigger) => {
-        let value: HTMLElement | undefined = undefined;
-
-        return {
-            get() {
-                track();
-
-                return value;
-            },
-            set(newValue) {
-                value = getElement(newValue);
-
-                trigger();
-            },
-        };
-    });
-}
-
-export function extractComponentProps<TDefinitions extends {}, TValues extends ExtractPropTypes<TDefinitions>>(
-    values: TValues,
-    definitions: TDefinitions,
-): PickComponentProps<TValues, TDefinitions> {
-    return Object.keys(definitions).reduce(
-        (extracted, prop) => {
-            extracted[prop] = values[prop as keyof TValues];
-
-            return extracted;
-        },
-        {} as Record<string, unknown>,
-    ) as PickComponentProps<TValues, TDefinitions>;
-}
-
-export function getElement(value: unknown): HTMLElement | undefined {
-    if (value instanceof HTMLElement) {
-        return value;
-    }
-
-    if (hasElement(value)) {
-        return value.$el;
-    }
-}
-
-export function hasElement(value: unknown): value is UnwrapNestedRefs<HasElement> {
-    return isObject(value) && '$el' in value;
-}

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();
-}