@aerogel/core 0.0.0-next.a56c0f4966eb71571173f8502f3f36d357ceebc7 → 0.0.0-next.aa6e27a9c197d1ee10c9fe018ee8c0fc6ff77767

package/src/components/modals/AGAlertModal.vue

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

package/src/components/modals/AGConfirmModal.vue

@@ -1,30 +0,0 @@
-<template>
-    <AGModal v-slot="{ close }: IAGModalSlotProps" :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 color="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 { IAGModalSlotProps } from './AGModal';
-
-import AGButton from '../forms/AGButton.vue';
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-defineProps({
-    title: stringProp(),
-    message: requiredStringProp(),
-});
-</script>

package/src/components/modals/AGErrorReportModal.ts

@@ -1,20 +0,0 @@
-import type { Component } from 'vue';
-
-import { requiredArrayProp } from '@/utils/vue';
-import type { ErrorReport } from '@/errors';
-
-export interface IAGErrorReportModalButtonsDefaultSlotProps {
-    id: string;
-    description: string;
-    iconComponent: Component;
-    url?: string;
-    handler?(): void;
-}
-
-export const errorReportModalProps = {
-    reports: requiredArrayProp<ErrorReport>(),
-};
-
-export function useErrorReportModalProps(): typeof errorReportModalProps {
-    return errorReportModalProps;
-}

package/src/components/modals/AGErrorReportModal.vue

@@ -1,62 +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="$td('errors.previousReport', 'Show previous report')"
-                            :aria-label="$td('errors.previousReport', 'Show previous report')"
-                            @click="activeReportIndex--"
-                        >
-                            <IconCheveronLeft aria-hidden="true" class="h-4 w-4" />
-                        </AGButton>
-                        <AGButton
-                            color="clear"
-                            :disabled="activeReportIndex === reports.length - 1"
-                            :title="$td('errors.nextReport', 'Show next report')"
-                            :aria-label="$td('errors.nextReport', 'Show next report')"
-                            @click="activeReportIndex++"
-                        >
-                            <IconCheveronRight aria-hidden="true" class="h-4 w-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="report.details ?? $td('errors.detailsEmpty', 'This error is missing a stacktrace.')"
-        />
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import IconCheveronRight from '~icons/zondicons/cheveron-right';
-import IconCheveronLeft from '~icons/zondicons/cheveron-left';
-
-import { computed, ref } from 'vue';
-
-import type { ErrorReport } from '@/errors';
-
-import { 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 = ref(0);
-const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
-</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 '@/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.vue

@@ -1,19 +0,0 @@
-<template>
-    <AGModal :cancellable="false">
-        <AGMarkdown :text="renderedMessage" />
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { stringProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
-
-import AGModal from './AGModal.vue';
-
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-const props = defineProps({ message: stringProp() });
-const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
-</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 IAGModalSlotProps {
-    close(result?: unknown): Promise<void>;
-}

package/src/components/modals/AGModal.vue

@@ -1,37 +0,0 @@
-<template>
-    <AGHeadlessModal
-        ref="$headlessModal"
-        v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
-        :cancellable="cancellable"
-        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">
-                <div class="flex max-h-full flex-col overflow-auto p-4" v-bind="$attrs">
-                    <slot :close="close" />
-                </div>
-            </AGHeadlessModalPanel>
-        </div>
-    </AGHeadlessModal>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-import { booleanProp } from '@/utils';
-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';
-
-const $headlessModal = ref<IAGHeadlessModal>();
-
-defineOptions({ inheritAttrs: false });
-defineProps({ cancellable: booleanProp(true) });
-defineExpose<IAGModal>({
-    close: async () => $headlessModal.value?.close(),
-    cancellable: computed(() => !!$headlessModal.value?.cancellable),
-});
-</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/index.ts

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

package/src/components/snackbars/AGSnackbar.vue

@@ -1,42 +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 UI from '@/ui/UI';
-import { Colors } from '@/components/constants';
-import { useSnackbarProps } from '@/components/headless';
-import type { SnackbarAction } from '@/components/headless';
-
-import AGButton from '../forms/AGButton.vue';
-import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-const props = defineProps(useSnackbarProps());
-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';
-    }
-});
-
-function activate(action: SnackbarAction): void {
-    action.handler?.();
-    action.dismiss && UI.hideSnackbar(props.id);
-}
-</script>

package/src/components/snackbars/index.ts

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

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/main.histoire.ts

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

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'),
-        },
-    },
-});