@aerogel/core 0.0.0-next.c29ffcd25bffdbed37ecce3aac1ba14cde3e9d39 → 0.0.0-next.c2e6acc000e97a1020c2e232678563c53884dd0e

package/src/components/forms/AGButton.vue

@@ -1,44 +0,0 @@
-<template>
-    <AGHeadlessButton class="px-2.5 py-1.5 focus-visible:outline focus-visible:outline-2" :class="colorClasses">
-        <slot />
-    </AGHeadlessButton>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { enumProp } from '@/utils/vue';
-import { Colors } from '@/components/constants';
-
-import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
-
-const props = defineProps({
-    color: enumProp(Colors, Colors.Primary),
-});
-
-const colorClasses = computed(() => {
-    switch (props.color) {
-        case Colors.Secondary:
-            return [
-                'text-white bg-gray-600',
-                'hover:bg-gray-500',
-                'focus-visible:outline-offset-2 focus-visible:outline-gray-600',
-            ].join(' ');
-        case Colors.Clear:
-            return 'hover:bg-gray-500/20 focus-visible:outline-gray-500/60';
-        case Colors.Danger:
-            return [
-                'text-white bg-red-600',
-                'hover:bg-red-500',
-                'focus-visible:outline-offset-2 focus-visible:outline-red-600',
-            ].join(' ');
-        case Colors.Primary:
-        default:
-            return [
-                'text-white bg-indigo-600',
-                'hover:bg-indigo-500',
-                'focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
-            ].join(' ');
-    }
-});
-</script>

package/src/components/forms/AGCheckbox.vue

@@ -1,41 +0,0 @@
-<template>
-    <AGHeadlessInput
-        ref="$input"
-        :name="name"
-        class="flex"
-        @update:model-value="$emit('update:modelValue', $event)"
-    >
-        <AGHeadlessInputInput
-            v-bind="$attrs"
-            type="checkbox"
-            :class="{
-                'text-indigo-600 focus:ring-indigo-600': !$input?.errors,
-                'border-red-200 text-red-600 focus:ring-red-600': $input?.errors,
-            }"
-        />
-
-        <div class="ml-2">
-            <AGHeadlessInputLabel v-if="$slots.default">
-                <slot />
-            </AGHeadlessInputLabel>
-            <AGHeadlessInputError class="text-sm text-red-600" />
-        </div>
-    </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 AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
-import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
-import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
-
-defineProps({ name: stringProp() });
-defineOptions({ inheritAttrs: false });
-defineEmits(['update:modelValue']);
-
-const $input = componentRef<IAGHeadlessInput>();
-</script>

package/src/components/forms/AGInput.vue

@@ -1,40 +0,0 @@
-<template>
-    <AGHeadlessInput
-        ref="$input"
-        class="relative flex flex-col items-center"
-        :class="className"
-        v-bind="props"
-    >
-        <AGHeadlessInputLabel class="sr-only" />
-        <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,
-            }"
-        />
-        <AGHeadlessInputDescription />
-        <div class="absolute bottom-0 left-0 translate-y-full">
-            <AGHeadlessInputError class="mt-1 text-sm text-red-500" />
-        </div>
-    </AGHeadlessInput>
-</template>
-
-<script setup lang="ts">
-import { componentRef } from '@/utils/vue';
-import { useInputAttrs } from '@/utils/composition/forms';
-import { useInputProps } from '@/components/headless/forms/AGHeadlessInput';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
-
-import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
-import AGHeadlessInputDescription from '../headless/forms/AGHeadlessInputDescription.vue';
-import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
-import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
-import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps(useInputProps());
-const $input = componentRef<IAGHeadlessInput>();
-const [attrs, className] = useInputAttrs();
-</script>

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

@@ -1,3 +0,0 @@
-import type { HasElement } from '@/components/interfaces';
-
-export interface IAGHeadlessButton extends HasElement {}

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

@@ -1,62 +0,0 @@
-<template>
-    <component :is="component.as" ref="$root" v-bind="component.props">
-        <slot />
-    </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { objectWithoutEmpty } from '@noeldemartin/utils';
-
-import { booleanProp, objectProp, stringProp } from '@/utils/vue';
-import { elementRef } from '@/components/composition';
-
-import type { IAGHeadlessButton } from './AGHeadlessButton';
-
-const props = defineProps({
-    as: objectProp(),
-    href: stringProp(),
-    url: stringProp(),
-    route: stringProp(),
-    routeParams: objectProp(() => ({})),
-    routeQuery: objectProp(() => ({})),
-    submit: booleanProp(),
-});
-
-const $root = elementRef();
-const component = computed(() => {
-    if (props.as) {
-        return { as: props.as, props: {} };
-    }
-
-    if (props.route) {
-        return {
-            as: 'router-link',
-            props: {
-                to: objectWithoutEmpty({
-                    name: props.route,
-                    params: props.routeParams,
-                    query: props.routeQuery,
-                }),
-            },
-        };
-    }
-
-    if (props.href || props.url) {
-        return {
-            as: 'a',
-            props: {
-                target: '_blank',
-                href: props.href || props.url,
-            },
-        };
-    }
-
-    return {
-        as: 'button',
-        props: { type: props.submit ? 'submit' : 'button' },
-    };
-});
-
-defineExpose<IAGHeadlessButton>({ $el: $root });
-</script>

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

@@ -1,34 +0,0 @@
-import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
-
-import { mixedProp, stringProp } from '@/utils';
-import { extractComponentProps } from '@/components/utils';
-import type { FormFieldValue } from '@/forms/Form';
-import type { HasElement } from '@/components/interfaces';
-
-export interface IAGHeadlessInput extends HasElement {
-    id: string;
-    name: ComputedRef<string | null>;
-    label: ComputedRef<string | null>;
-    description: ComputedRef<string | boolean | null>;
-    value: ComputedRef<FormFieldValue | null>;
-    required: ComputedRef<boolean | null>;
-    errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: FormFieldValue | null): void;
-}
-
-export const inputProps = {
-    name: stringProp(),
-    label: stringProp(),
-    description: stringProp(),
-    modelValue: mixedProp<FormFieldValue>([String, Number, Boolean]),
-};
-
-export function useInputProps(): typeof inputProps {
-    return inputProps;
-}
-
-export function extractInputProps<T extends ExtractPropTypes<typeof inputProps>>(
-    props: T,
-): Pick<T, keyof typeof inputProps> {
-    return extractComponentProps(props, inputProps);
-}

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

@@ -1,70 +0,0 @@
-<template>
-    <component :is="as" v-if="as">
-        <slot />
-    </component>
-    <slot v-else />
-</template>
-
-<script setup lang="ts">
-import { computed, inject, provide, readonly, ref } from 'vue';
-import { uuid } from '@noeldemartin/utils';
-
-import { stringProp } from '@/utils/vue';
-import type Form from '@/forms/Form';
-import type { __SetsElement } from '@/components/interfaces';
-
-import { useInputProps } from './AGHeadlessInput';
-import type { IAGHeadlessInput } from './AGHeadlessInput';
-
-const emit = defineEmits(['update:modelValue']);
-const props = defineProps({
-    as: stringProp('div'),
-    ...useInputProps(),
-});
-const $el = ref<HTMLElement>();
-const errors = computed(() => {
-    if (!form || !props.name) {
-        return null;
-    }
-
-    return form.errors[props.name] ?? null;
-});
-const form = inject<Form | null>('form', null);
-const api: IAGHeadlessInput & __SetsElement = {
-    $el,
-    id: `input-${uuid()}`,
-    name: computed(() => props.name),
-    label: computed(() => props.label),
-    description: computed(() => props.description),
-    value: computed(() => {
-        if (form && props.name) {
-            return form.getFieldValue(props.name);
-        }
-
-        return props.modelValue;
-    }),
-    errors: readonly(errors),
-    required: computed(() => {
-        if (!props.name || !form) {
-            return null;
-        }
-
-        return form.getFieldRules(props.name).includes('required');
-    }),
-    update(value) {
-        if (form && props.name) {
-            form.setFieldValue(props.name, value);
-
-            return;
-        }
-
-        emit('update:modelValue', value);
-    },
-    __setElement(element) {
-        $el.value = element;
-    },
-};
-
-provide<IAGHeadlessInput>('input', api);
-defineExpose<IAGHeadlessInput>(api);
-</script>

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

@@ -1,24 +0,0 @@
-<template>
-    <ListboxButton v-slot="{ value, open, disabled }: ComponentProps">
-        <slot :value="value" :open="open" :disabled="disabled">
-            <span :class="textClass">{{ select?.buttonText }}</span>
-        </slot>
-        <slot name="icon" />
-    </ListboxButton>
-</template>
-
-<script setup lang="ts">
-import { ListboxButton } from '@headlessui/vue';
-
-import { injectReactiveOrFail, stringProp } from '@/utils/vue';
-import type { ComponentProps } from '@/utils/vue';
-
-import type { IAGHeadlessSelect } from './AGHeadlessSelect';
-
-defineProps({ textClass: stringProp() });
-
-const select = injectReactiveOrFail<IAGHeadlessSelect>(
-    'select',
-    '<AGHeadlessSelectButton> must be a child of a <AGHeadlessSelect>',
-);
-</script>

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

@@ -1,24 +0,0 @@
-<template>
-    <ListboxLabel v-if="show" v-slot="{ open, disabled }: ComponentProps">
-        <slot :open="open" :disabled="disabled">
-            {{ select.label }}
-        </slot>
-    </ListboxLabel>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from 'vue';
-import { ListboxLabel } from '@headlessui/vue';
-
-import { injectReactiveOrFail } from '@/utils/vue';
-import type { ComponentProps } from '@/utils/vue';
-
-import type { IAGHeadlessSelect } from './AGHeadlessSelect';
-
-const select = injectReactiveOrFail<IAGHeadlessSelect>(
-    'select',
-    '<AGHeadlessSelectLabel> must be a child of a <AGHeadlessSelect>',
-);
-const slots = useSlots();
-const show = computed(() => !!(select.label || slots.default));
-</script>

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

@@ -1,3 +0,0 @@
-import { ListboxOptions } from '@headlessui/vue';
-
-export default ListboxOptions;

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

@@ -1,36 +0,0 @@
-import { computed } from 'vue';
-import type { ExtractPropTypes, Ref } from 'vue';
-
-import { booleanProp, stringProp } from '@/utils';
-import { extractComponentProps } from '@/components/utils';
-import type { IAGModal } from '@/components/modals/AGModal';
-
-export interface IAGHeadlessModal extends IAGModal {}
-
-export interface IAGHeadlessModalDefaultSlotProps {
-    close(result?: unknown): Promise<void>;
-}
-
-export const modalProps = {
-    cancellable: booleanProp(true),
-    inline: booleanProp(),
-    title: stringProp(),
-};
-
-export function useModalProps(): typeof modalProps {
-    return modalProps;
-}
-
-export function extractModalProps<T extends ExtractPropTypes<typeof modalProps>>(
-    props: T,
-): Pick<T, keyof typeof modalProps> {
-    return extractComponentProps(props, modalProps);
-}
-
-export function useModalExpose($modal: Ref<IAGHeadlessModal | undefined>): IAGModal {
-    return {
-        inline: computed(() => !!$modal.value?.inline),
-        cancellable: computed(() => !!$modal.value?.cancellable),
-        close: async () => $modal.value?.close(),
-    };
-}

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

@@ -1,32 +0,0 @@
-<template>
-    <component :is="rootComponent">
-        <slot />
-
-        <template v-if="childModal">
-            <div
-                class="pointer-events-none inset-0 z-50 bg-black/30"
-                :class="childModal.properties.inline ? 'absolute' : 'fixed'"
-            />
-            <AGModalContext :child-index="childIndex + 1" :modal="childModal" />
-        </template>
-    </component>
-</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, childIndex } = injectReactiveOrFail<IAGModalContext>(
-    'modal',
-    'could not obtain modal reference from <AGHeadlessModalPanel>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
-);
-const rootComponent = computed(() => (modal.properties.inline ? 'div' : DialogPanel));
-const childModal = computed(() => UI.modals[childIndex] ?? null);
-</script>

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

@@ -1,23 +0,0 @@
-<template>
-    <component :is="rootComponent" v-bind="rootProps">
-        <slot />
-    </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { DialogTitle } from '@headlessui/vue';
-
-import { injectReactiveOrFail, stringProp } from '@/utils/vue';
-import type { IAGModalContext } from '@/components/modals/AGModalContext';
-
-const props = defineProps({ as: stringProp('h2') });
-
-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 rootComponent = computed(() => (modal.properties.inline ? 'div' : DialogTitle));
-const rootProps = computed(() => (modal.properties.inline ? {} : { as: props.as }));
-</script>

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

@@ -1,4 +0,0 @@
-export * from './AGHeadlessModal';
-export { default as AGHeadlessModal } from './AGHeadlessModal.vue';
-export { default as AGHeadlessModalPanel } from './AGHeadlessModalPanel.vue';
-export { default as AGHeadlessModalTitle } from './AGHeadlessModalTitle.vue';

package/src/components/interfaces.ts

@@ -1,24 +0,0 @@
-import { isObject } from '@noeldemartin/utils';
-import type { Ref, UnwrapNestedRefs } from 'vue';
-
-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 interface __SetsElement {
-    __setElement(element?: HTMLElement): void;
-}
-
-export interface HasElement {
-    $el: Readonly<Ref<HTMLElement | undefined>>;
-}

package/src/components/lib/AGLink.vue

@@ -1,9 +0,0 @@
-<template>
-    <AGHeadlessButton class="font-medium hover:underline">
-        <slot />
-    </AGHeadlessButton>
-</template>
-
-<script setup lang="ts">
-import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
-</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 '@/utils/markdown';
-import { booleanProp, mixedProp, objectProp, stringProp } from '@/utils/vue';
-import { translate } from '@/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/AGProgressBar.vue

@@ -1,45 +0,0 @@
-<template>
-    <div class="mt-1 h-2 w-full min-w-[min(400px,80vw)] 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, onMounted, onUnmounted, ref } from 'vue';
-
-import { numberProp, objectProp, stringProp } from '@/utils/vue';
-import type { Job } from '@/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 `h-full w-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;
-});
-
-onMounted(() => (cleanup = props.job?.listeners.add({ onUpdated: (progress) => (jobProgress.value = progress) })));
-onUnmounted(() => cleanup?.());
-</script>

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 '@/utils';
-import type { AcceptRefs } from '@/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 '@/components/constants';
-import { booleanProp, enumProp, objectProp, requiredStringProp, stringProp } from '@/utils';
-import { translateWithDefault } from '@/lang';
-import type { AcceptRefs } from '@/utils';
-import type { ConfirmCheckboxes } from '@/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 };
-}