@aerogel/core 0.0.0-next.b3caf219a503ce9b8c65ef1463132c9507f56c0a → 0.0.0-next.b656a964404fbde17d9cce7668722596098e47fd

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

@@ -1,40 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
-
-import UI from '@aerogel/core/ui/UI';
-import { arrayProp, enumProp, requiredStringProp } from '@aerogel/core/utils/vue';
-import { Colors } from '@aerogel/core/components/constants';
-import { objectWithout } from '@noeldemartin/utils';
-
-export { default as AGHeadlessSnackbar } from './AGHeadlessSnackbar.vue';
-
-export const SnackbarColors = objectWithout(Colors, ['Primary', 'Clear']);
-export const snackbarProps = {
-    id: requiredStringProp(),
-    message: requiredStringProp(),
-    actions: arrayProp<SnackbarAction>(() => []),
-    color: enumProp(SnackbarColors, Colors.Secondary),
-};
-
-export interface SnackbarAction {
-    text: string;
-    dismiss?: boolean;
-    handler?(): unknown;
-}
-
-export type SnackbarColor = (typeof SnackbarColors)[keyof typeof SnackbarColors];
-export type AGSnackbarProps = ObjectWithoutEmpty<ExtractPropTypes<typeof snackbarProps>>;
-
-export function useSnackbarProps(): typeof snackbarProps {
-    return snackbarProps;
-}
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function useSnackbar(props: ExtractPropTypes<typeof snackbarProps>) {
-    function activate(action: SnackbarAction): void {
-        action.handler?.();
-        action.dismiss && UI.hideSnackbar(props.id);
-    }
-
-    return { activate };
-}

package/src/components/lib/AGErrorMessage.vue

@@ -1,16 +0,0 @@
-<template>
-    <AGMarkdown :text="message" inline />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { requiredObjectProp } from '@aerogel/core/utils/vue';
-import { getErrorMessage } from '@aerogel/core/errors/utils';
-import type { ErrorSource } from '@aerogel/core/errors/Errors.state';
-
-import AGMarkdown from './AGMarkdown.vue';
-
-const props = defineProps({ error: requiredObjectProp<ErrorSource>() });
-const message = computed(() => getErrorMessage(props.error));
-</script>

package/src/components/lib/AGMarkdown.vue

@@ -1,54 +0,0 @@
-<template>
-    <root />
-</template>
-
-<script setup lang="ts">
-import { computed, h, useAttrs } from 'vue';
-import { isInstanceOf } from '@noeldemartin/utils';
-
-import { renderMarkdown } from '@aerogel/core/utils/markdown';
-import { booleanProp, mixedProp, objectProp, stringProp } from '@aerogel/core/utils/vue';
-import { translate } from '@aerogel/core/lang';
-
-const props = defineProps({
-    as: stringProp(),
-    inline: booleanProp(),
-    langKey: stringProp(),
-    langParams: mixedProp<number | Record<string, unknown>>(),
-    text: stringProp(),
-    actions: objectProp<Record<string, () => unknown>>(),
-});
-
-const attrs = useAttrs();
-const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey, props.langParams ?? {})));
-const html = computed(() => {
-    if (!markdown.value) {
-        return null;
-    }
-
-    let renderedHtml = renderMarkdown(markdown.value);
-
-    if (props.inline) {
-        renderedHtml = renderedHtml.replace('<p>', '<span>').replace('</p>', '</span>');
-    }
-
-    return renderedHtml;
-});
-const root = () =>
-    h(props.as ?? (props.inline ? 'span' : 'div'), {
-        innerHTML: html.value,
-        onClick,
-        ...attrs,
-        class: `${attrs.class ?? ''} ${props.inline ? '' : 'prose'}`,
-    });
-
-async function onClick(event: Event) {
-    const { target } = event;
-
-    if (isInstanceOf(target, HTMLElement) && target.dataset.markdownAction) {
-        props.actions?.[target.dataset.markdownAction]?.();
-
-        return;
-    }
-}
-</script>

package/src/components/lib/AGMeasured.vue

@@ -1,16 +0,0 @@
-<template>
-    <component :is="as" v-measure="() => (measured = true)" :class="{ 'invisible! absolute! w-auto!': !measured }">
-        <slot />
-    </component>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import { stringProp } from '@aerogel/core/utils/vue';
-
-defineProps({ as: stringProp('span') });
-
-// TODO use v-measure.css
-const measured = ref(false);
-</script>

package/src/components/lib/index.ts

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

package/src/components/snackbars/AGSnackbar.vue

@@ -1,38 +0,0 @@
-<template>
-    <AGHeadlessSnackbar class="flex flex-row items-center justify-center gap-3 p-4" :class="styleClasses">
-        <AGMarkdown :text="message" inline />
-        <Button
-            v-for="(action, i) of actions"
-            :key="i"
-            :variant="colorVariant"
-            @click="activate(action)"
-        >
-            {{ action.text }}
-        </Button>
-    </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 type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
-
-import Button from '../ui/Button.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';
-    }
-});
-const colorVariant = computed(() => props.color as ButtonVariant);
-</script>

package/src/components/snackbars/index.ts

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

package/src/components/utils.ts

@@ -1,107 +0,0 @@
-import clsx from 'clsx';
-import { computed, customRef, inject, onUnmounted, unref } from 'vue';
-import { cva } from 'class-variance-authority';
-import { isObject } from '@noeldemartin/utils';
-import { twMerge } from 'tailwind-merge';
-import type { ClassValue } from 'clsx';
-import type { ComputedRef, ExtractPropTypes, PropType, Ref, UnwrapNestedRefs } from 'vue';
-import type { GetClosureArgs, GetClosureResult, Nullable } from '@noeldemartin/utils';
-
-import type { HasElement } from '@aerogel/core/components/contracts/shared';
-import type { FormController } from '@aerogel/core/forms';
-
-export type CVAConfig<T> = NonNullable<GetClosureArgs<typeof cva<T>>[1]>;
-export type CVAProps<T> = NonNullable<GetClosureArgs<GetClosureResult<typeof cva<T>>>[0]>;
-export type RefsObject<T> = { [K in keyof T]: Ref<T[K]> | T[K] };
-export type Variants<T extends Record<string, string>> = Required<{
-    [K in keyof T]: {
-        [key in T[K]]: string;
-    };
-}>;
-
-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 computedVariantClasses<T>(
-    value: RefsObject<{ baseClasses?: string } & CVAProps<T>>,
-    config: { baseClasses?: string } & CVAConfig<T>,
-): ComputedRef<string> {
-    return computed(() => {
-        const { baseClasses: valueBaseClasses, ...valueRefs } = value;
-        const { baseClasses: configBaseClasses, ...configs } = config;
-        const variants = cva(configBaseClasses, configs as CVAConfig<T>);
-        const values = Object.entries(valueRefs).reduce((extractedValues, [name, valueRef]) => {
-            extractedValues[name as keyof CVAProps<T>] = unref(valueRef);
-
-            return extractedValues;
-        }, {} as CVAProps<T>);
-
-        return classes(variants(values), unref(valueBaseClasses));
-    });
-}
-
-export function classes(...inputs: ClassValue[]): string {
-    return twMerge(clsx(inputs));
-}
-
-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;
-}
-
-export function onFormFocus(input: { name: Nullable<string> }, listener: () => unknown): void {
-    const form = inject<FormController | null>('form', null);
-    const stop = form?.on('focus', (name) => input.name === name && listener());
-
-    onUnmounted(() => stop?.());
-}

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