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

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

@@ -1,77 +0,0 @@
-<template>
-    <Listbox
-        v-slot="{ value, open, disabled }: ComponentProps"
-        :model-value="selectedOption"
-        @update:model-value="update($event)"
-    >
-        <slot :value="value" :open="open" :disabled="disabled" />
-    </Listbox>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, provide } from 'vue';
-import { toString, uuid } from '@noeldemartin/utils';
-import { Listbox } from '@headlessui/vue';
-
-import { mixedProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
-import type Form from '@/forms/Form';
-import type { FormFieldValue } from '@/forms/Form';
-import type { ComponentProps } from '@/utils/vue';
-
-import { useSelectEmits, useSelectProps } from './AGHeadlessSelect';
-import type { IAGHeadlessSelect } from './AGHeadlessSelect';
-
-const emit = defineEmits(useSelectEmits());
-const props = defineProps({
-    modelValue: mixedProp<FormFieldValue>(),
-    ...useSelectProps(),
-});
-const renderText = computed(() => {
-    if (typeof props.optionsText === 'function') {
-        return props.optionsText;
-    }
-
-    if (typeof props.optionsText === 'string') {
-        return (option: FormFieldValue): string => toString(option[props.optionsText as keyof FormFieldValue]);
-    }
-
-    return (option: FormFieldValue) => toString(option);
-});
-const form = inject<Form | null>('form', null);
-const noSelectionText = computed(() => props.noSelectionText ?? translateWithDefault('select.noSelection', '-'));
-const selectedOption = computed(() => (form && props.name ? form.getFieldValue(props.name) : props.modelValue));
-const errors = computed(() => {
-    if (!form || !props.name) {
-        return null;
-    }
-
-    return form.errors[props.name] ?? null;
-});
-
-function update(value: FormFieldValue) {
-    if (form && props.name) {
-        form.setFieldValue(props.name, value);
-
-        return;
-    }
-
-    emit('update:modelValue', value);
-}
-
-const api: IAGHeadlessSelect = {
-    id: `select-${uuid()}`,
-    noSelectionText,
-    selectedOption,
-    errors,
-    options: computed(() => props.options),
-    label: computed(() => props.label),
-    buttonText: computed(() =>
-        selectedOption.value === null ? noSelectionText.value : renderText.value(selectedOption.value)),
-    renderText,
-    update,
-};
-
-provide<IAGHeadlessSelect>('select', api);
-defineExpose<IAGHeadlessSelect>(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/AGHeadlessSelectOption.ts

@@ -1,4 +0,0 @@
-export type IAGHeadlessSelectOptionSlotProps = {
-    active: boolean;
-    selected: boolean;
-};

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

@@ -1,39 +0,0 @@
-<template>
-    <ListboxOption v-slot="{ active, selected, disabled }: ComponentProps" :value="value" as="template">
-        <slot :active="active" :selected="selected" :disabled="disabled">
-            <li
-                :class="{
-                    [activeClass ?? 'active']: active,
-                    [inactiveClass ?? 'inactive']: !active,
-                    [selectedClass ?? 'selected']: selected,
-                    [unselectedClass ?? 'unselected']: !selected,
-                }"
-            >
-                {{ select.renderText(value) }}
-            </li>
-        </slot>
-    </ListboxOption>
-</template>
-
-<script setup lang="ts">
-import { ListboxOption } from '@headlessui/vue';
-
-import { injectReactiveOrFail, requiredMixedProp, stringProp } from '@/utils/vue';
-import type { ComponentProps } from '@/utils/vue';
-import type { FormFieldValue } from '@/forms/Form';
-
-import type { IAGHeadlessSelect } from './AGHeadlessSelect';
-
-defineProps({
-    value: requiredMixedProp<FormFieldValue>(),
-    selectedClass: stringProp(),
-    unselectedClass: stringProp(),
-    activeClass: stringProp(),
-    inactiveClass: stringProp(),
-});
-
-const select = injectReactiveOrFail<IAGHeadlessSelect>(
-    'select',
-    '<AGHeadlessSelectOption> must be a child of a <AGHeadlessSelect>',
-);
-</script>

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

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

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

@@ -1,10 +0,0 @@
-import { inject, onUnmounted } from 'vue';
-
-import type Form from '@/forms/Form';
-
-export function onFormFocus(input: { name: string | null }, listener: () => unknown): void {
-    const form = inject<Form | null>('form', null);
-    const stop = form?.on('focus', (name) => input.name === name && listener());
-
-    onUnmounted(() => stop?.());
-}

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

@@ -1,18 +0,0 @@
-export * from './composition';
-export * from './AGHeadlessButton';
-export * from './AGHeadlessInput';
-export * from './AGHeadlessSelect';
-export * from './AGHeadlessSelectOption';
-export { default as AGHeadlessButton } from './AGHeadlessButton.vue';
-export { default as AGHeadlessInput } from './AGHeadlessInput.vue';
-export { default as AGHeadlessInputDescription } from './AGHeadlessInputDescription.vue';
-export { default as AGHeadlessInputError } from './AGHeadlessInputError.vue';
-export { default as AGHeadlessInputInput } from './AGHeadlessInputInput.vue';
-export { default as AGHeadlessInputLabel } from './AGHeadlessInputLabel.vue';
-export { default as AGHeadlessInputTextArea } from './AGHeadlessInputTextArea.vue';
-export { default as AGHeadlessSelect } from './AGHeadlessSelect.vue';
-export { default as AGHeadlessSelectButton } from './AGHeadlessSelectButton.vue';
-export { default as AGHeadlessSelectError } from './AGHeadlessSelectError.vue';
-export { default as AGHeadlessSelectLabel } from './AGHeadlessSelectLabel.vue';
-export { default as AGHeadlessSelectOption } from './AGHeadlessSelectOption.vue';
-export { default as AGHeadlessSelectOptions } from './AGHeadlessSelectOptions';

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

@@ -1,92 +0,0 @@
-<template>
-    <component
-        :is="rootComponent"
-        ref="$root"
-        :open="true"
-        @close="cancellable && close()"
-    >
-        <slot :close="close" />
-    </component>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, toRef } from 'vue';
-import { Dialog } from '@headlessui/vue';
-import type { VNode } from 'vue';
-
-import Events from '@/services/Events';
-import { useEvent } from '@/utils/composition/events';
-import { injectReactiveOrFail } from '@/utils/vue';
-import type { IAGModalContext } from '@/components/modals/AGModalContext';
-
-import { useModalProps } from './AGHeadlessModal';
-import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from './AGHeadlessModal';
-
-const props = defineProps(useModalProps());
-const $root = ref<{ $el?: HTMLElement } | null>(null);
-const hidden = ref(true);
-const closed = ref(false);
-const { modal } = injectReactiveOrFail<IAGModalContext>(
-    'modal',
-    'could not obtain modal reference from <AGHeadlessModal>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
-);
-const rootComponent = computed(() => (modal.properties.inline ? 'div' : Dialog));
-
-async function hide(): Promise<void> {
-    if (!$root.value?.$el) {
-        return;
-    }
-
-    hidden.value = true;
-}
-
-async function show(): Promise<void> {
-    if (!$root.value?.$el) {
-        return;
-    }
-
-    hidden.value = false;
-}
-
-async function close(result?: unknown) {
-    if (closed.value) {
-        return;
-    }
-
-    Events.emit('modal-will-close', { modal, result });
-
-    await hide();
-
-    closed.value = true;
-
-    Events.emit('modal-closed', { modal, result });
-}
-
-useEvent('close-modal', async ({ id, result }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await close(result);
-});
-
-useEvent('hide-modal', async ({ id }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await hide();
-});
-
-useEvent('show-modal', async ({ id }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await show();
-});
-
-defineSlots<{ default(props: IAGHeadlessModalDefaultSlotProps): VNode[] }>();
-defineExpose<IAGHeadlessModal>({ close, cancellable: toRef(props, 'cancellable'), inline: toRef(props, 'inline') });
-</script>

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/headless/snackbars/AGHeadlessSnackbar.vue

@@ -1,10 +0,0 @@
-<template>
-    <div class="pointer-events-auto">
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-// Stub import to fix build (otherwise, this file doesn't seem to be treated as a module).
-import 'virtual:aerogel';
-</script>

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 '@/ui/UI';
-import { arrayProp, enumProp, requiredStringProp } from '@/utils/vue';
-import { Colors } from '@/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/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/AGErrorMessage.vue

@@ -1,16 +0,0 @@
-<template>
-    <AGMarkdown :text="message" inline />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { requiredObjectProp } from '@/utils/vue';
-import { getErrorMessage } from '@/errors/utils';
-import type { ErrorSource } from '@/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/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/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 '@/utils/vue';
-
-defineProps({ as: stringProp('span') });
-
-// TODO use v-measure.css
-const measured = ref(false);
-</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/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 '@/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>