@aerogel/core 0.0.0-next.b85327579d32f21c6a9fa21142f0165cdd320d7e → 0.0.0-next.d547095ca85c86c1e41f5c7fa170d0ba856c3f4d

package/src/components/AGAppOverlays.vue

@@ -1,21 +1,23 @@
 <template>
-    <div ref="$backdrop" class="pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0" />
-    <aside v-if="modal">
-        <AGModalContext :child-index="1" :modal="modal" />
-    </aside>
+    <div
+        id="aerogel-overlays-backdrop"
+        ref="$backdrop"
+        class="pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0"
+    />
+    <AGAppModals />
+    <AGAppSnackbars />
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
-import UI from '@/ui/UI';
 import { useEvent } from '@/utils/composition/events';
 
-import AGModalContext from './modals/AGModalContext.vue';
+import AGAppModals from './AGAppModals.vue';
+import AGAppSnackbars from './AGAppSnackbars.vue';
 
 const $backdrop = ref<HTMLElement | null>(null);
 const backdropHidden = ref(true);
-const modal = computed(() => UI.modals[0] ?? null);
 
 useEvent('show-overlays-backdrop', async () => {
     if (!$backdrop.value || !backdropHidden.value) {

package/src/components/AGAppSnackbars.vue

@@ -0,0 +1,13 @@
+<template>
+    <div aria-live="assertive" class="z-60 pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:p-6">
+        <div class="flex w-full flex-col items-end space-y-4">
+            <component
+                :is="snackbar.component"
+                v-for="snackbar of $ui.snackbars"
+                :id="snackbar.id"
+                :key="snackbar.id"
+                v-bind="snackbar.properties"
+            />
+        </div>
+    </div>
+</template>

package/src/components/constants.ts

@@ -0,0 +1,8 @@
+export const Colors = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Danger: 'danger',
+    Clear: 'clear',
+} as const;
+
+export type Color = (typeof Colors)[keyof typeof Colors];

package/src/components/forms/AGButton.vue

@@ -7,28 +7,38 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { booleanProp } from '@/utils';
+import { enumProp } from '@/utils/vue';
+import { Colors } from '@/components/constants';
 
 import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
 
 const props = defineProps({
-    clear: booleanProp(),
-    secondary: booleanProp(),
+    color: enumProp(Colors, Colors.Primary),
 });
 
 const colorClasses = computed(() => {
-    if (props.secondary) {
-        return 'text-white bg-gray-600 hover:bg-gray-500 focus-visible:outline-offset-2 focus-visible:outline-gray-600';
+    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(' ');
     }
-
-    if (props.clear) {
-        return 'hover:bg-gray-500/20 focus-visible:outline-gray-500/60';
-    }
-
-    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,5 +1,10 @@
 <template>
-    <AGHeadlessInput ref="$input" :name="name" class="flex">
+    <AGHeadlessInput
+        ref="$input"
+        :name="name"
+        class="flex"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
         <AGHeadlessInputInput
             v-bind="$attrs"
             type="checkbox"
@@ -30,6 +35,7 @@ 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

@@ -3,8 +3,9 @@
         ref="$input"
         class="relative flex flex-col items-center"
         :class="className"
-        :name="name"
+        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"
@@ -19,18 +20,19 @@
 </template>
 
 <script setup lang="ts">
-import { componentRef, stringProp } from '@/utils/vue';
-
-import { useInputAttrs } from '@/utils';
+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 AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.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 });
 
+const props = defineProps(useInputProps());
 const $input = componentRef<IAGHeadlessInput>();
 const [attrs, className] = useInputAttrs();
 </script>

package/src/components/forms/AGSelect.story.vue

@@ -0,0 +1,46 @@
+<template>
+    <Story>
+        <div class="h-96">
+            <AGSelect v-model="bestMugiwara" :label="bestMugiwaraLabel" :options="bestMugiwaraOptions" />
+            <AGSelect
+                v-model="bestFood"
+                :label="bestFoodLabel"
+                :options="bestFoodOptions"
+                options-text="name"
+            />
+        </div>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import AGSelect from './AGSelect.vue';
+
+const bestMugiwara = ref(null);
+const bestFood = ref(null);
+const bestMugiwaraLabel = 'Who\'s the best Mugiwara?';
+const bestFoodLabel = 'What\'s the best food?';
+const bestMugiwaraOptions = [
+    'Monkey D. Luffy',
+    'Roronoa Zoro',
+    'Nami',
+    'Usopp',
+    'Sanji',
+    'Tony Tony Chopper',
+    'Nico Robin',
+    'Franky',
+    'Brook',
+    'Jinbe',
+];
+const bestFoodOptions = [
+    {
+        id: 'ramen',
+        name: 'Ramen',
+    },
+    {
+        id: 'pizza',
+        name: 'Pizza',
+    },
+];
+</script>

package/src/components/forms/AGSelect.vue

@@ -0,0 +1,60 @@
+<template>
+    <AGHeadlessSelect
+        v-bind="props"
+        ref="$select"
+        as="div"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <AGHeadlessSelectLabel class="block text-sm font-medium leading-6 text-gray-900" />
+        <div class="relative" :class="{ 'mt-2': $select?.label }">
+            <AGHeadlessSelectButton
+                class="relative w-full cursor-default bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600"
+                text-class="block truncate"
+                :class="{
+                    'ring-1 ring-red-500': $select?.errors,
+                }"
+            >
+                <template #icon>
+                    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                        <IconCheveronDown class="h-5 w-5 text-gray-400" />
+                    </span>
+                </template>
+            </AGHeadlessSelectButton>
+            <AGHeadlessSelectOptions
+                class="absolute z-10 mt-1 max-h-60 w-full overflow-auto border bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none"
+            >
+                <AGHeadlessSelectOption
+                    v-for="(option, index) in $select?.options ?? []"
+                    :key="index"
+                    :value="option"
+                    class="relative block cursor-default select-none truncate py-2 pl-3 pr-9"
+                    selected-class="font-semibold"
+                    unselected-class="font-normal"
+                    active-class="bg-indigo-600 text-white"
+                    inactive-class="text-gray-900"
+                />
+            </AGHeadlessSelectOptions>
+        </div>
+        <AGHeadlessSelectError class="mt-2 text-sm text-red-600" />
+    </AGHeadlessSelect>
+</template>
+
+<script setup lang="ts">
+import IconCheveronDown from '~icons/zondicons/cheveron-down';
+
+import { componentRef } from '@/utils/vue';
+import { useSelectEmits, useSelectProps } from '@/components/headless/forms/AGHeadlessSelect';
+import type { IAGHeadlessSelect } from '@/components/headless/forms/AGHeadlessSelect';
+
+import AGHeadlessSelect from '../headless/forms/AGHeadlessSelect.vue';
+import AGHeadlessSelectButton from '../headless/forms/AGHeadlessSelectButton.vue';
+import AGHeadlessSelectError from '../headless/forms/AGHeadlessSelectError.vue';
+import AGHeadlessSelectLabel from '../headless/forms/AGHeadlessSelectLabel.vue';
+import AGHeadlessSelectOption from '../headless/forms/AGHeadlessSelectOption.vue';
+import AGHeadlessSelectOptions from '../headless/forms/AGHeadlessSelectOptions';
+
+defineEmits(useSelectEmits());
+
+const props = defineProps(useSelectProps());
+const $select = componentRef<IAGHeadlessSelect>();
+</script>

package/src/components/forms/index.ts

@@ -1,6 +1,5 @@
-import AGButton from './AGButton.vue';
-import AGCheckbox from './AGCheckbox.vue';
-import AGForm from './AGForm.vue';
-import AGInput from './AGInput.vue';
-
-export { AGButton, AGCheckbox, AGForm, AGInput };
+export { default as AGButton } from './AGButton.vue';
+export { default as AGCheckbox } from './AGCheckbox.vue';
+export { default as AGForm } from './AGForm.vue';
+export { default as AGInput } from './AGInput.vue';
+export { default as AGSelect } from './AGSelect.vue';

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

@@ -10,7 +10,8 @@ import { objectWithoutEmpty } from '@noeldemartin/utils';
 
 import { booleanProp, objectProp, stringProp } from '@/utils/vue';
 
-const { url, route, routeParams, routeQuery, submit } = defineProps({
+const props = defineProps({
+    href: stringProp(),
     url: stringProp(),
     route: stringProp(),
     routeParams: objectProp(() => ({})),
@@ -19,32 +20,32 @@ const { url, route, routeParams, routeQuery, submit } = defineProps({
 });
 
 const component = computed(() => {
-    if (route) {
+    if (props.route) {
         return {
             tag: 'router-link',
             props: {
                 to: objectWithoutEmpty({
-                    name: route,
-                    params: routeParams,
-                    query: routeQuery,
+                    name: props.route,
+                    params: props.routeParams,
+                    query: props.routeQuery,
                 }),
             },
         };
     }
 
-    if (url) {
+    if (props.href || props.url) {
         return {
             tag: 'a',
             props: {
                 target: '_blank',
-                href: url,
+                href: props.href || props.url,
             },
         };
     }
 
     return {
         tag: 'button',
-        props: { type: submit ? 'submit' : 'button' },
+        props: { type: props.submit ? 'submit' : 'button' },
     };
 });
 </script>

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

@@ -1,8 +1,28 @@
-import type { ComputedRef, DeepReadonly, Ref } from 'vue';
+import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
+
+import { stringProp } from '@/utils';
+import { extractComponentProps } from '@/components/utils';
 
 export interface IAGHeadlessInput {
     id: string;
+    name: ComputedRef<string | null>;
+    label: ComputedRef<string | null>;
     value: ComputedRef<string | number | boolean | null>;
     errors: DeepReadonly<Ref<string[] | null>>;
     update(value: string | number | boolean | null): void;
 }
+
+export const inputProps = {
+    name: stringProp(),
+    label: stringProp(),
+};
+
+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

@@ -12,13 +12,14 @@ import { uuid } from '@noeldemartin/utils';
 import { mixedProp, stringProp } from '@/utils/vue';
 import type Form from '@/forms/Form';
 
+import { useInputProps } from './AGHeadlessInput';
 import type { IAGHeadlessInput } from './AGHeadlessInput';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
     as: stringProp('div'),
-    name: stringProp(),
     modelValue: mixedProp<string | number | boolean>([String, Number, Boolean]),
+    ...useInputProps(),
 });
 const errors = computed(() => {
     if (!form || !props.name) {
@@ -28,11 +29,13 @@ const errors = computed(() => {
     return form.errors[props.name] ?? null;
 });
 const form = inject<Form | null>('form', null);
-const publicApi: IAGHeadlessInput = {
+const api: IAGHeadlessInput = {
     id: `input-${uuid()}`,
+    name: computed(() => props.name),
+    label: computed(() => props.label),
     value: computed(() => {
         if (form && props.name) {
-            return form.getFieldValue(props.name);
+            return form.getFieldValue(props.name) as string | number | boolean | null;
         }
 
         return props.modelValue;
@@ -49,6 +52,6 @@ const publicApi: IAGHeadlessInput = {
     },
 };
 
-provide<IAGHeadlessInput>('input', publicApi);
-defineExpose<IAGHeadlessInput>(publicApi);
+provide<IAGHeadlessInput>('input', api);
+defineExpose<IAGHeadlessInput>(api);
 </script>

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

@@ -2,6 +2,7 @@
     <input
         :id="input.id"
         ref="$input"
+        :name="name"
         :type="type"
         :value="value"
         :aria-invalid="input.errors ? 'true' : 'false'"
@@ -26,6 +27,7 @@ const input = injectReactiveOrFail<IAGHeadlessInput>(
     'input',
     '<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>',
 );
+const name = computed(() => input.name ?? undefined);
 const value = computed(() => input.value);
 const checked = computed(() => {
     if (props.type !== 'checkbox') {

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

@@ -1,10 +1,14 @@
 <template>
-    <label :for="input.id">
-        <slot />
+    <label v-if="show" :for="input.id">
+        <slot>
+            {{ input.label }}
+        </slot>
     </label>
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from 'vue';
+
 import { injectReactiveOrFail } from '@/utils/vue';
 
 import type { IAGHeadlessInput } from './AGHeadlessInput';
@@ -13,4 +17,6 @@ const input = injectReactiveOrFail<IAGHeadlessInput>(
     'input',
     '<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>',
 );
+const slots = useSlots();
+const show = computed(() => !!(input.label || slots.default));
 </script>

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

@@ -0,0 +1,42 @@
+import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
+import type { Writable } from '@noeldemartin/utils';
+
+import { mixedProp, requiredArrayProp, stringProp } from '@/utils/vue';
+import { extractComponentProps } from '@/components/utils';
+import type { FormFieldValue } from '@/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

@@ -0,0 +1,77 @@
+<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

@@ -0,0 +1,24 @@
+<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/AGHeadlessSelectError.vue

@@ -0,0 +1,26 @@
+<template>
+    <p v-if="errorMessage" :id="`${select.id}-error`">
+        {{ errorMessage }}
+    </p>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { injectReactiveOrFail } from '@/utils/vue';
+import { translateWithDefault } from '@/lang/utils';
+
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
+
+const select = injectReactiveOrFail<IAGHeadlessSelect>(
+    'select',
+    '<AGHeadlessSelectError> must be a child of a <AGHeadlessSelect>',
+);
+const errorMessage = computed(() => {
+    if (!select.errors) {
+        return null;
+    }
+
+    return translateWithDefault(`errors.${select.errors[0]}`, `Error: ${select.errors[0]}`);
+});
+</script>

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

@@ -0,0 +1,24 @@
+<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

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