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

package/src/components/headless/HeadlessModal.vue

@@ -1,62 +1,39 @@
 <template>
-    <DialogRoot ref="$root" :open="true" @update:open="persistent || close()">
+    <DialogRoot :ref="forwardRef" open @update:open="persistent || close()">
         <DialogPortal>
             <slot :close="close" />
         </DialogPortal>
     </DialogRoot>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue';
-import { DialogPortal, DialogRoot } from 'reka-ui';
+<script setup lang="ts" generic="T = void">
+import { provide, ref } from 'vue';
+import { DialogPortal, DialogRoot, useForwardExpose } from 'reka-ui';
+import type { DialogContent } from 'reka-ui';
+import type { Nullable } from '@noeldemartin/utils';
 
 import Events from '@aerogel/core/services/Events';
 import { useEvent } from '@aerogel/core/utils/composition/events';
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import type { UIModalContext } from '@aerogel/core/ui/UI.state';
-import type { ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
+import type { AcceptRefs } from '@aerogel/core/utils/vue';
+import type { UIModalContext } from '@aerogel/core/ui/UI';
+import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
-defineProps<ModalProps>();
-defineSlots<ModalSlots>();
-
-const $root = ref<{ $el?: HTMLElement } | null>(null);
-const hidden = ref(true);
-const closed = ref(false);
+const $content = ref<Nullable<InstanceType<typeof DialogContent>>>(null);
 const { modal } = injectReactiveOrFail<UIModalContext>(
     'modal',
     'could not obtain modal reference from <HeadlessModal>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
+        'did you render this component manually? Show it using $ui.modal() instead',
 );
 
-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();
+defineProps<ModalProps>();
+defineSlots<ModalSlots<T>>();
+defineExpose<AcceptRefs<ModalExpose<T>>>({ close, $content });
 
-    closed.value = true;
+const { forwardRef } = useForwardExpose();
+const closed = ref(false);
 
-    Events.emit('modal-closed', { modal, result });
-}
+provide('$modalContentRef', $content);
 
 useEvent('close-modal', async ({ id, result }) => {
     if (id !== modal.id) {
@@ -66,19 +43,15 @@ useEvent('close-modal', async ({ id, result }) => {
     await close(result);
 });
 
-useEvent('hide-modal', async ({ id }) => {
-    if (id !== modal.id) {
+async function close(result?: unknown) {
+    if (closed.value) {
         return;
     }
 
-    await hide();
-});
+    await Events.emit('modal-will-close', { modal, result });
 
-useEvent('show-modal', async ({ id }) => {
-    if (id !== modal.id) {
-        return;
-    }
+    closed.value = true;
 
-    await show();
-});
+    await Events.emit('modal-has-closed', { modal, result });
+}
 </script>

package/src/components/headless/HeadlessModalContent.vue

@@ -1,5 +1,5 @@
 <template>
-    <DialogContent>
+    <DialogContent ref="$contentRef">
         <slot />
 
         <ModalContext v-if="childModal" :child-index="childIndex + 1" :modal="childModal" />
@@ -7,18 +7,24 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, useTemplateRef, watchEffect } from 'vue';
 import { DialogContent } from 'reka-ui';
+import type { Ref } from 'vue';
 
 import ModalContext from '@aerogel/core/components/ui/ModalContext.vue';
 import UI from '@aerogel/core/ui/UI';
-import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import type { UIModalContext } from '@aerogel/core/ui/UI.state';
+import { injectOrFail, injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { UIModalContext } from '@aerogel/core/ui/UI';
+import type { ModalContentInstance } from '@aerogel/core/components/contracts/Modal';
 
 const { childIndex = 0 } = injectReactiveOrFail<UIModalContext>(
     'modal',
     'could not obtain modal reference from <HeadlessModalContent>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
+        'did you render this component manually? Show it using $ui.modal() instead',
 );
+const $modalContentRef = injectOrFail<Ref<ModalContentInstance>>('$modalContentRef');
+const $content = useTemplateRef('$contentRef');
 const childModal = computed(() => UI.modals[childIndex] ?? null);
+
+watchEffect(() => ($modalContentRef.value = $content.value));
 </script>

package/src/components/headless/HeadlessModalDescription.vue

@@ -0,0 +1,12 @@
+<template>
+    <DialogDescription v-bind="$props">
+        <slot />
+    </DialogDescription>
+</template>
+
+<script setup lang="ts">
+import { DialogDescription } from 'reka-ui';
+import type { DialogDescriptionProps } from 'reka-ui';
+
+defineProps<DialogDescriptionProps>();
+</script>

package/src/components/headless/HeadlessModalOverlay.vue

@@ -1,5 +1,5 @@
 <template>
-    <DialogOverlay v-bind="props">
+    <DialogOverlay v-bind="$props">
         <slot />
     </DialogOverlay>
 </template>
@@ -8,5 +8,5 @@
 import { DialogOverlay } from 'reka-ui';
 import type { DialogOverlayProps } from 'reka-ui';
 
-const props = defineProps<DialogOverlayProps>();
+defineProps<DialogOverlayProps>();
 </script>

package/src/components/headless/HeadlessModalTitle.vue

@@ -1,5 +1,5 @@
 <template>
-    <DialogTitle v-bind="props">
+    <DialogTitle v-bind="$props">
         <slot />
     </DialogTitle>
 </template>
@@ -8,5 +8,5 @@
 import { DialogTitle } from 'reka-ui';
 import type { DialogTitleProps } from 'reka-ui';
 
-const props = defineProps<DialogTitleProps>();
+defineProps<DialogTitleProps>();
 </script>

package/src/components/headless/HeadlessSelect.vue

@@ -0,0 +1,120 @@
+<template>
+    <SelectRoot
+        v-slot="{ open }"
+        :model-value="acceptableValue"
+        :by="compareOptions as Closure<[AcceptableValue, AcceptableValue], boolean>"
+        @update:model-value="update($event)"
+    >
+        <component :is="as" v-bind="$attrs">
+            <slot :model-value :open>
+                <HeadlessSelectTrigger />
+                <HeadlessSelectOptions />
+            </slot>
+        </component>
+    </SelectRoot>
+</template>
+
+<script setup lang="ts" generic="T extends Nullable<FormFieldValue>">
+import { computed, inject, provide, readonly } from 'vue';
+import { value as evaluate, toString, uuid } from '@noeldemartin/utils';
+import { SelectRoot } from 'reka-ui';
+import type { AcceptableValue } from 'reka-ui';
+import type { Closure, Nullable } from '@noeldemartin/utils';
+
+import { translateWithDefault } from '@aerogel/core/lang';
+import { hasSelectOptionLabel } from '@aerogel/core/components/contracts/Select';
+import type FormController from '@aerogel/core/forms/FormController';
+import type { SelectEmits, SelectExpose, SelectProps } from '@aerogel/core/components/contracts/Select';
+import type { FormFieldValue } from '@aerogel/core/forms/FormController';
+
+import HeadlessSelectTrigger from './HeadlessSelectTrigger.vue';
+import HeadlessSelectOptions from './HeadlessSelectOptions.vue';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+    name,
+    as = 'div',
+    label,
+    options,
+    labelClass,
+    optionsClass,
+    renderOption,
+    compareOptions = (a, b) => a === b,
+    description,
+    placeholder,
+    modelValue,
+    align,
+    side,
+} = defineProps<SelectProps<T>>();
+const emit = defineEmits<SelectEmits<T>>();
+const form = inject<FormController | null>('form', null);
+const computedValue = computed(() => {
+    if (form && name) {
+        return form.getFieldValue(name) as T;
+    }
+
+    return modelValue as T;
+});
+const acceptableValue = computed(() => computedValue.value as AcceptableValue);
+const errors = computed(() => {
+    if (!form || !name) {
+        return null;
+    }
+
+    return form.errors[name] ?? null;
+});
+const computedOptions = computed(() => {
+    if (!options) {
+        return null;
+    }
+
+    return options.map((option) => ({
+        key: uuid(),
+        label: renderOption
+            ? renderOption(option)
+            : hasSelectOptionLabel(option)
+                ? evaluate(option.label as string)
+                : toString(option),
+        value: option as AcceptableValue,
+    }));
+});
+const expose = {
+    labelClass,
+    optionsClass,
+    align,
+    side,
+    value: computedValue,
+    id: `select-${uuid()}`,
+    name: computed(() => name),
+    label: computed(() => label),
+    description: computed(() => description),
+    placeholder: computed(() => placeholder ?? translateWithDefault('ui.select', 'Select an option')),
+    options: computedOptions,
+    selectedOption: computed(() => computedOptions.value?.find((option) => option.value === modelValue)),
+    errors: readonly(errors),
+    required: computed(() => {
+        if (!name || !form) {
+            return;
+        }
+
+        return form.getFieldRules(name).includes('required');
+    }),
+    update(value) {
+        if (form && name) {
+            form.setFieldValue(name, value as FormFieldValue);
+
+            return;
+        }
+
+        emit('update:modelValue', value);
+    },
+} satisfies SelectExpose<T>;
+
+function update(value: AcceptableValue) {
+    expose.update(value as T);
+}
+
+provide('select', expose);
+defineExpose(expose);
+</script>

package/src/components/headless/{forms/AGHeadlessSelectError.vue → HeadlessSelectError.vue}

@@ -9,12 +9,11 @@ import { computed } from 'vue';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import { translateWithDefault } from '@aerogel/core/lang/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
 
-import type { IAGHeadlessSelect } from './AGHeadlessSelect';
-
-const select = injectReactiveOrFail<IAGHeadlessSelect>(
+const select = injectReactiveOrFail<SelectExpose>(
     'select',
-    '<AGHeadlessSelectError> must be a child of a <AGHeadlessSelect>',
+    '<HeadlessSelectError> must be a child of a <HeadlessSelect>',
 );
 const errorMessage = computed(() => {
     if (!select.errors) {

package/src/components/headless/HeadlessSelectLabel.vue

@@ -0,0 +1,25 @@
+<template>
+    <Label v-if="show" :for="select.id" v-bind="$props">
+        <slot>
+            {{ select.label }}
+        </slot>
+    </Label>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { Label } from 'reka-ui';
+import type { LabelProps } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+defineProps<Omit<LabelProps, 'for'>>();
+
+const select = injectReactiveOrFail<SelectExpose>(
+    'select',
+    '<HeadlessSelectLabel> must be a child of a <HeadlessSelect>',
+);
+const slots = useSlots();
+const show = computed(() => !!(select.label || slots.default));
+</script>

package/src/components/headless/HeadlessSelectOption.vue

@@ -0,0 +1,34 @@
+<template>
+    <SelectItem v-bind="$props">
+        <SelectItemText>
+            <slot>
+                {{ renderedLabel }}
+            </slot>
+        </SelectItemText>
+    </SelectItem>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { SelectItem, SelectItemText } from 'reka-ui';
+import { toString } from '@noeldemartin/utils';
+import type { SelectItemProps } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const { value } = defineProps<SelectItemProps>();
+const select = injectReactiveOrFail<SelectExpose>(
+    'select',
+    '<HeadlessSelectOption> must be a child of a <HeadlessSelect>',
+);
+const renderedLabel = computed(() => {
+    const itemOption = select.options?.find((option) => option.value === value);
+
+    if (itemOption) {
+        return itemOption.label;
+    }
+
+    return toString(value);
+});
+</script>

package/src/components/headless/HeadlessSelectOptions.vue

@@ -0,0 +1,42 @@
+<template>
+    <SelectPortal>
+        <SelectContent
+            position="popper"
+            :class="renderedClasses"
+            :align="select.align"
+            :side="select.side"
+            :side-offset="4"
+        >
+            <SelectViewport :class="innerClass">
+                <slot>
+                    <HeadlessSelectOption
+                        v-for="option in select.options ?? []"
+                        :key="option.key"
+                        :value="option.value"
+                    />
+                </slot>
+            </SelectViewport>
+        </SelectContent>
+    </SelectPortal>
+</template>
+
+<script setup lang="ts">
+import { SelectContent, SelectPortal, SelectViewport } from 'reka-ui';
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { classes } from '@aerogel/core/utils/classes';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+import HeadlessSelectOption from './HeadlessSelectOption.vue';
+
+const { class: rootClass } = defineProps<{ class?: HTMLAttributes['class']; innerClass?: HTMLAttributes['class'] }>();
+
+const select = injectReactiveOrFail<SelectExpose>(
+    'select',
+    '<HeadlessSelectOptions> must be a child of a <HeadlessSelect>',
+);
+const renderedClasses = computed(() =>
+    classes('min-w-(--reka-select-trigger-width) max-h-(--reka-select-content-available-height)', rootClass));
+</script>

package/src/components/headless/HeadlessSelectTrigger.vue

@@ -0,0 +1,22 @@
+<template>
+    <SelectTrigger :id="select.id">
+        <slot>
+            <HeadlessSelectValue :placeholder="select.placeholder" />
+            <SelectIcon />
+        </slot>
+    </SelectTrigger>
+</template>
+
+<script setup lang="ts">
+import { SelectIcon, SelectTrigger } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+import HeadlessSelectValue from './HeadlessSelectValue.vue';
+
+const select = injectReactiveOrFail<SelectExpose>(
+    'select',
+    '<HeadlessSelectTrigger> must be a child of a <HeadlessSelect>',
+);
+</script>

package/src/components/headless/HeadlessSelectValue.vue

@@ -0,0 +1,18 @@
+<template>
+    <SelectValue v-if="$slots.default" :placeholder="select.placeholder">
+        <slot />
+    </SelectValue>
+    <SelectValue v-else :placeholder="select.placeholder" />
+</template>
+
+<script setup lang="ts">
+import { SelectValue } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const select = injectReactiveOrFail<SelectExpose>(
+    'select',
+    '<HeadlessSelectValue> must be a child of a <HeadlessSelect>',
+);
+</script>

package/src/components/headless/HeadlessSwitch.vue

@@ -0,0 +1,96 @@
+<template>
+    <div :class="rootClass">
+        <label v-if="label" :for="expose.id" :class="labelClass">
+            {{ label }}
+        </label>
+        <SwitchRoot
+            :id="expose.id"
+            :name
+            :model-value="expose.value.value"
+            v-bind="$attrs"
+            :class="inputClass"
+            @update:model-value="$emit('update:modelValue', $event)"
+        >
+            <SwitchThumb :class="thumbClass" />
+        </SwitchRoot>
+    </div>
+</template>
+
+<script setup lang="ts" generic="T extends boolean = boolean">
+import { SwitchRoot, SwitchThumb } from 'reka-ui';
+import { computed, inject, readonly, watchEffect } from 'vue';
+import { uuid } from '@noeldemartin/utils';
+import type { HTMLAttributes } from 'vue';
+
+import type FormController from '@aerogel/core/forms/FormController';
+import type { FormFieldValue } from '@aerogel/core/forms/FormController';
+import type { InputEmits, InputExpose, InputProps } from '@aerogel/core/components/contracts/Input';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+    name,
+    label,
+    description,
+    modelValue,
+    class: rootClass,
+} = defineProps<
+    InputProps<T> & {
+        class?: HTMLAttributes['class'];
+        labelClass?: HTMLAttributes['class'];
+        inputClass?: HTMLAttributes['class'];
+        thumbClass?: HTMLAttributes['class'];
+    }
+>();
+const emit = defineEmits<InputEmits>();
+const form = inject<FormController | null>('form', null);
+const errors = computed(() => {
+    if (!form || !name) {
+        return null;
+    }
+
+    return form.errors[name] ?? null;
+});
+
+const expose = {
+    id: `switch-${uuid()}`,
+    name: computed(() => name),
+    label: computed(() => label),
+    description: computed(() => description),
+    value: computed(() => {
+        if (form && name) {
+            return form.getFieldValue(name) as boolean;
+        }
+
+        return modelValue;
+    }),
+    errors: readonly(errors),
+    required: computed(() => {
+        if (!name || !form) {
+            return;
+        }
+
+        return form.getFieldRules(name).includes('required');
+    }),
+    update(value) {
+        if (form && name) {
+            form.setFieldValue(name, value as FormFieldValue);
+
+            return;
+        }
+
+        emit('update:modelValue', value);
+    },
+} satisfies InputExpose;
+
+defineExpose(expose);
+
+watchEffect(() => {
+    if (!description && !errors.value) {
+        return;
+    }
+
+    // eslint-disable-next-line no-console
+    console.warn('Errors and description not implemented in <HeadlessSwitch>');
+});
+</script>

package/src/components/headless/HeadlessToast.vue

@@ -0,0 +1,18 @@
+<template>
+    <ToastRoot>
+        <slot>
+            <span v-if="message">{{ message }}</span>
+            <HeadlessToastAction v-for="(action, key) of actions" :key :action />
+        </slot>
+    </ToastRoot>
+</template>
+
+<script setup lang="ts">
+import { ToastRoot } from 'reka-ui';
+
+import type { ToastProps } from '@aerogel/core/components/contracts/Toast';
+
+import HeadlessToastAction from './HeadlessToastAction.vue';
+
+defineProps<ToastProps>();
+</script>

package/src/components/headless/HeadlessToastAction.vue

@@ -0,0 +1,13 @@
+<template>
+    <component :is="action.dismiss ? ToastClose : 'button'" type="button" @click="action.click">
+        {{ action.label }}
+    </component>
+</template>
+
+<script setup lang="ts">
+import { ToastClose } from 'reka-ui';
+
+import type { ToastAction as IToastAction } from '@aerogel/core/components/contracts/Toast';
+
+defineProps<{ action: IToastAction }>();
+</script>

package/src/components/headless/index.ts

@@ -1,6 +1,3 @@
-export * from './forms';
-export * from './snackbars';
-
 export { default as HeadlessButton } from './HeadlessButton.vue';
 export { default as HeadlessInput } from './HeadlessInput.vue';
 export { default as HeadlessInputDescription } from './HeadlessInputDescription.vue';
@@ -10,5 +7,14 @@ export { default as HeadlessInputLabel } from './HeadlessInputLabel.vue';
 export { default as HeadlessInputTextArea } from './HeadlessInputTextArea.vue';
 export { default as HeadlessModal } from './HeadlessModal.vue';
 export { default as HeadlessModalContent } from './HeadlessModalContent.vue';
+export { default as HeadlessModalDescription } from './HeadlessModalDescription.vue';
 export { default as HeadlessModalOverlay } from './HeadlessModalOverlay.vue';
 export { default as HeadlessModalTitle } from './HeadlessModalTitle.vue';
+export { default as HeadlessSelect } from './HeadlessSelect.vue';
+export { default as HeadlessSelectLabel } from './HeadlessSelectLabel.vue';
+export { default as HeadlessSelectOption } from './HeadlessSelectOption.vue';
+export { default as HeadlessSelectOptions } from './HeadlessSelectOptions.vue';
+export { default as HeadlessSelectTrigger } from './HeadlessSelectTrigger.vue';
+export { default as HeadlessSelectValue } from './HeadlessSelectValue.vue';
+export { default as HeadlessSwitch } from './HeadlessSwitch.vue';
+export { default as HeadlessToast } from './HeadlessToast.vue';

package/src/components/index.ts

@@ -1,13 +1,8 @@
-import AppLayout from './AppLayout.vue';
-import AppOverlays from './AppOverlays.vue';
+export { default as AppLayout } from './AppLayout.vue';
+export { default as AppModals } from './AppModals.vue';
+export { default as AppOverlays } from './AppOverlays.vue';
+export { default as AppToasts } from './AppToasts.vue';
 
-export { AppLayout, AppOverlays };
-
-export * from './composition';
-export * from './constants';
 export * from './contracts';
-export * from './forms';
 export * from './headless';
-export * from './lib';
-export * from './snackbars';
 export * from './ui';

package/src/components/ui/AdvancedOptions.vue

@@ -0,0 +1,18 @@
+<template>
+    <details class="group">
+        <summary
+            class="-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
+        >
+            <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
+            <span>{{ $td('ui.advancedOptions', 'Advanced options') }}</span>
+        </summary>
+
+        <div class="pt-2 pl-4">
+            <slot />
+        </div>
+    </details>
+</template>
+
+<script setup lang="ts">
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
+</script>