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

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 '@aerogel/core/utils/vue';
-import { elementRef } from '@aerogel/core/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,41 +0,0 @@
-import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
-import type { Writable } from '@noeldemartin/utils';
-
-import { mixedProp, stringProp } from '@aerogel/core/utils';
-import { extractComponentProps } from '@aerogel/core/components/utils';
-import type { FormFieldValue } from '@aerogel/core/forms/Form';
-import type { HasElement } from '@aerogel/core/components/contracts/shared';
-
-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 const inputEmits = ['update:modelValue'] as const;
-
-export function useInputEmits(): Writable<typeof inputEmits> {
-    return [...inputEmits];
-}
-
-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 '@aerogel/core/utils/vue';
-import type Form from '@aerogel/core/forms/Form';
-import type { __SetsElement } from '@aerogel/core/components/contracts/shared';
-
-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/AGHeadlessSelect.ts

@@ -1,42 +0,0 @@
-import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
-import type { Writable } from '@noeldemartin/utils';
-
-import { mixedProp, requiredArrayProp, stringProp } from '@aerogel/core/utils/vue';
-import { extractComponentProps } from '@aerogel/core/components/utils';
-import type { FormFieldValue } from '@aerogel/core/forms/Form';
-
-export interface IAGHeadlessSelect {
-    id: string;
-    label: ComputedRef<string | null>;
-    noSelectionText: ComputedRef<string>;
-    buttonText: ComputedRef<string>;
-    renderText: ComputedRef<(value: FormFieldValue) => string>;
-    selectedOption: ComputedRef<FormFieldValue | null>;
-    options: ComputedRef<FormFieldValue[]>;
-    errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: FormFieldValue): void;
-}
-
-export const selectProps = {
-    name: stringProp(),
-    label: stringProp(),
-    options: requiredArrayProp<FormFieldValue>(),
-    noSelectionText: stringProp(),
-    optionsText: mixedProp<string | ((option: FormFieldValue) => string)>(),
-};
-
-export const selectEmits = ['update:modelValue'] as const;
-
-export function useSelectProps(): typeof selectProps {
-    return selectProps;
-}
-
-export function useSelectEmits(): Writable<typeof selectEmits> {
-    return [...selectEmits];
-}
-
-export function extractSelectProps<T extends ExtractPropTypes<typeof selectProps>>(
-    props: T,
-): Pick<T, keyof typeof selectProps> {
-    return extractComponentProps(props, selectProps);
-}

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

@@ -1,77 +0,0 @@
-<template>
-    <SelectRoot v-slot="{ open }: ComponentProps" :model-value="selectedOption" @update:model-value="update($event)">
-        <slot :model-value="modelValue" :open="open" />
-    </SelectRoot>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, provide } from 'vue';
-import { toString, uuid } from '@noeldemartin/utils';
-import { SelectRoot } from 'reka-ui';
-import type { AcceptableValue } from 'reka-ui';
-
-import { mixedProp } from '@aerogel/core/utils/vue';
-import { translateWithDefault } from '@aerogel/core/lang/utils';
-import type Form from '@aerogel/core/forms/Form';
-import type { FormFieldValue } from '@aerogel/core/forms/Form';
-import type { ComponentProps } from '@aerogel/core/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) as AcceptableValue,
-);
-const errors = computed(() => {
-    if (!form || !props.name) {
-        return null;
-    }
-
-    return form.errors[props.name] ?? null;
-});
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function update(value: any) {
-    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/AGHeadlessSelectOption.ts

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

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

@@ -1,31 +0,0 @@
-<template>
-    <SelectItem :value="value" as="template">
-        <SelectItemText>
-            <slot>
-                {{ select.renderText(value) }}
-            </slot>
-        </SelectItemText>
-    </SelectItem>
-</template>
-
-<script setup lang="ts">
-import { SelectItem, SelectItemText } from 'reka-ui';
-
-import { injectReactiveOrFail, requiredMixedProp, stringProp } from '@aerogel/core/utils/vue';
-
-import type { IAGHeadlessSelect } from './AGHeadlessSelect';
-
-defineProps({
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: requiredMixedProp<any>(),
-    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.vue

@@ -1,19 +0,0 @@
-<template>
-    <SelectPortal>
-        <SelectContent :class="classes">
-            <SelectViewport>
-                <slot />
-            </SelectViewport>
-        </SelectContent>
-    </SelectPortal>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { SelectContent, SelectPortal, SelectViewport } from 'reka-ui';
-
-import { stringProp } from '@aerogel/core/utils/vue';
-
-const props = defineProps({ class: stringProp('') });
-const classes = computed(() => props.class);
-</script>

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

@@ -1,25 +0,0 @@
-<template>
-    <SelectTrigger>
-        <SelectValue>
-            <slot>
-                <span :class="textClass">{{ select?.buttonText }}</span>
-            </slot>
-            <slot name="icon" />
-        </SelectValue>
-    </SelectTrigger>
-</template>
-
-<script setup lang="ts">
-import { SelectTrigger, SelectValue } from 'reka-ui';
-
-import { injectReactiveOrFail, stringProp } from '@aerogel/core/utils/vue';
-
-import type { IAGHeadlessSelect } from './AGHeadlessSelect';
-
-defineProps({ textClass: stringProp() });
-
-const select = injectReactiveOrFail<IAGHeadlessSelect>(
-    'select',
-    '<AGHeadlessSelectTrigger> must be a child of a <AGHeadlessSelect>',
-);
-</script>

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

@@ -1,10 +0,0 @@
-import { inject, onUnmounted } from 'vue';
-
-import type Form from '@aerogel/core/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,17 +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 AGHeadlessSelectTrigger } from './AGHeadlessSelectTrigger.vue';
-export { default as AGHeadlessSelectError } from './AGHeadlessSelectError.vue';
-export { default as AGHeadlessSelectOption } from './AGHeadlessSelectOption.vue';
-export { default as AGHeadlessSelectOptions } from './AGHeadlessSelectOptions.vue';

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

@@ -1,33 +0,0 @@
-import { computed } from 'vue';
-import type { Ref } from 'vue';
-
-import { booleanProp, stringProp } from '@aerogel/core/utils/vue';
-import { extractComponentProps } from '@aerogel/core/components/utils';
-import type { ComponentPropDefinitions } from '@aerogel/core/components/utils';
-import type { ComponentProps } from '@aerogel/core/utils/vue';
-import type { IModal, IModalProps } from '@aerogel/core/components/contracts/Modal';
-
-export interface IAGHeadlessModal extends IModal {}
-
-export interface IAGHeadlessModalDefaultSlotProps {
-    close(result?: unknown): Promise<void>;
-}
-
-export function extractModalProps<T extends IModalProps>(props: T): ComponentProps<IModalProps> {
-    return extractComponentProps(props, modalProps());
-}
-
-export function modalProps(): ComponentPropDefinitions<IModalProps> {
-    return {
-        cancellable: booleanProp(true),
-        description: stringProp(),
-        title: stringProp(),
-    };
-}
-
-export function modalExpose($modal: Ref<IAGHeadlessModal | undefined>): IModal {
-    return {
-        cancellable: computed(() => !!$modal.value?.cancellable),
-        close: async () => $modal.value?.close(),
-    };
-}

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

@@ -1,25 +0,0 @@
-<template>
-    <DialogContent>
-        <slot />
-
-        <AGModalContext v-if="childModal" :child-index="childIndex + 1" :modal="childModal" />
-    </DialogContent>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { DialogContent } from 'reka-ui';
-
-import UI from '@aerogel/core/ui/UI';
-import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import type { IAGModalContext } from '@aerogel/core/components/modals/AGModalContext';
-
-import AGModalContext from '../../modals/AGModalContext.vue';
-
-const { childIndex } = injectReactiveOrFail<IAGModalContext>(
-    'modal',
-    'could not obtain modal reference from <AGHeadlessModalContent>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
-);
-const childModal = computed(() => UI.modals[childIndex] ?? null);
-</script>

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

@@ -1,5 +0,0 @@
-export { DialogTitle as AGHeadlessModalTitle } from 'reka-ui';
-
-export * from './AGHeadlessModal';
-export { default as AGHeadlessModal } from './AGHeadlessModal.vue';
-export { default as AGHeadlessModalContent } from './AGHeadlessModalContent.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 '@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/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 '@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>