@aerogel/core 0.0.0-next.b3caf219a503ce9b8c65ef1463132c9507f56c0a → 0.0.0-next.b656a964404fbde17d9cce7668722596098e47fd

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.0.0-next.b3caf219a503ce9b8c65ef1463132c9507f56c0a",
+    "version": "0.0.0-next.b656a964404fbde17d9cce7668722596098e47fd",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -23,7 +23,10 @@
         "verify": "noeldemartin-verify"
     },
     "peerDependencies": {
-        "vue": "^3.5.0"
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
+        "vue": "^3.5.0",
+        "tailwindcss": "^4.1.1"
     },
     "dependencies": {
         "@noeldemartin/utils": "0.7.0-next.31cf84b4b57092d146528f27579439783aca71bb",

package/src/components/AppModals.vue

@@ -1,6 +1,6 @@
 <template>
     <aside v-if="modal">
-        <ModalContext :child-index="1" :modal="modal" />
+        <ModalContext :child-index="1" :modal />
     </aside>
 </template>
 

package/src/components/AppOverlays.vue

@@ -1,11 +1,6 @@
 <template>
-    <div
-        id="aerogel-overlays-backdrop"
-        ref="$backdrop"
-        class="pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0"
-    />
     <AppModals />
-    <AppSnackbars />
+    <AppToasts />
 </template>
 
 <script setup lang="ts">
@@ -14,7 +9,7 @@ import { ref } from 'vue';
 import { useEvent } from '@aerogel/core/utils/composition/events';
 
 import AppModals from './AppModals.vue';
-import AppSnackbars from './AppSnackbars.vue';
+import AppToasts from './AppToasts.vue';
 
 const $backdrop = ref<HTMLElement | null>(null);
 const backdropHidden = ref(true);

package/src/components/AppToasts.vue

@@ -0,0 +1,16 @@
+<template>
+    <ToastProvider>
+        <component
+            :is="toast.component"
+            v-for="toast of $ui.toasts"
+            :id="toast.id"
+            :key="toast.id"
+            v-bind="toast.properties"
+        />
+        <ToastViewport class="fixed right-0 bottom-0 z-50 flex flex-col items-end space-y-4 px-4 py-6 sm:p-6" />
+    </ToastProvider>
+</template>
+
+<script setup lang="ts">
+import { ToastProvider, ToastViewport } from 'reka-ui';
+</script>

package/src/components/contracts/Button.ts

@@ -5,6 +5,7 @@ export type ButtonVariant = 'default' | 'secondary' | 'danger' | 'ghost' | 'outl
 export type ButtonSize = 'default' | 'small' | 'large' | 'icon';
 export interface ButtonProps extends PrimitiveProps {
     class?: HTMLAttributes['class'];
+    disabled?: boolean;
     href?: string;
     route?: string;
     routeParams?: object;

package/src/components/contracts/DropdownMenu.ts

@@ -0,0 +1,11 @@
+import type { DropdownMenuContentProps } from 'reka-ui';
+
+export type DropdownMenuOption = {
+    label: string;
+    click: () => unknown;
+};
+
+export interface DropdownMenuProps {
+    align?: DropdownMenuContentProps['align'];
+    options?: DropdownMenuOption[];
+}

package/src/components/contracts/Input.ts

@@ -1,18 +1,18 @@
+import type { ComputedRef, DeepReadonly, Ref } from 'vue';
 import type { Nullable } from '@noeldemartin/utils';
 
 import type { FormFieldValue } from '@aerogel/core/forms';
-import type { ComputedRef, DeepReadonly, Ref } from 'vue';
 
 export interface InputProps {
     name?: string;
     label?: string;
     description?: string;
-    modelValue?: FormFieldValue;
+    modelValue?: Nullable<FormFieldValue>;
 }
 
-export type InputEmits = {
-    (event: 'update:modelValue', value: Nullable<FormFieldValue>): void;
-};
+export interface InputEmits {
+    'update:modelValue': [value: Nullable<FormFieldValue>];
+}
 
 export interface InputExpose {
     id: string;

package/src/components/contracts/Modal.ts

@@ -7,3 +7,7 @@ export interface ModalProps {
 export interface ModalSlots {
     default(props: { close(result?: unknown): Promise<void> }): unknown;
 }
+
+export interface ModalExpose {
+    close(result?: unknown): Promise<void>;
+}

package/src/components/contracts/Select.ts

@@ -0,0 +1,36 @@
+import type { AcceptableValue, AsTag } from 'reka-ui';
+import type { Component, ComputedRef } from 'vue';
+import type { Nullable } from '@noeldemartin/utils';
+
+import type { InputEmits, InputExpose, InputProps } from './Input';
+
+export type SelectOption = {
+    key: string;
+    label: string;
+    value: AcceptableValue;
+};
+
+export interface HasSelectOptionLabel {
+    label: string | (() => string);
+}
+
+export interface SelectProps extends InputProps {
+    as?: AsTag | Component;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    options?: any[];
+    placeholder?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    renderOption?: (option: any) => string;
+}
+
+export interface SelectEmits extends InputEmits {}
+
+export interface SelectExpose extends InputExpose {
+    options: ComputedRef<Nullable<SelectOption[]>>;
+    selectedOption: ComputedRef<Nullable<SelectOption>>;
+    placeholder: ComputedRef<string>;
+}
+
+export function hasSelectOptionLabel(option: unknown): option is HasSelectOptionLabel {
+    return typeof option === 'object' && option !== null && 'label' in option;
+}

package/src/components/contracts/Toast.ts

@@ -0,0 +1,13 @@
+export interface ToastAction {
+    label: string;
+    dismiss?: boolean;
+    click?(): unknown;
+}
+
+export type ToastVariant = 'secondary' | 'danger';
+
+export interface ToastProps {
+    message?: string;
+    actions?: ToastAction[];
+    variant?: ToastVariant;
+}

package/src/components/contracts/index.ts

@@ -1,7 +1,9 @@
 export * from './AlertModal';
 export * from './Button';
 export * from './ConfirmModal';
+export * from './DropdownMenu';
 export * from './LoadingModal';
 export * from './Modal';
 export * from './PromptModal';
+export * from './Select';
 export * from './shared';

package/src/components/headless/HeadlessButton.vue

@@ -1,5 +1,10 @@
 <template>
-    <Primitive :class="classes" :as-child="asChild" v-bind="props">
+    <Primitive
+        :class="classes"
+        :as-child
+        :disabled
+        v-bind="props"
+    >
         <slot />
     </Primitive>
 </template>
@@ -11,7 +16,7 @@ import { objectWithoutEmpty } from '@noeldemartin/utils';
 
 import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
 
-const { as, href, route, routeParams, routeQuery, submit, class: classes } = defineProps<ButtonProps>();
+const { as, href, route, routeParams, routeQuery, submit, disabled, class: classes } = defineProps<ButtonProps>();
 
 const props = computed(() => {
     if (as) {

package/src/components/headless/HeadlessInputDescription.vue

@@ -1,10 +1,10 @@
 <template>
     <slot :id="`${input.id}-description`">
-        <AGMarkdown
+        <Markdown
             v-if="show"
             v-bind="$attrs"
             :id="`${input.id}-description`"
-            :text="text"
+            :text
         />
     </slot>
 </template>
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import AGMarkdown from '@aerogel/core/components/lib/AGMarkdown.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 

package/src/components/headless/HeadlessInputInput.vue

@@ -2,14 +2,14 @@
     <input
         :id="input.id"
         ref="$input"
-        :name="name"
-        :type="type"
+        :name
+        :type
+        :checked
         :required="input.required ?? undefined"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="
             input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined
         "
-        :checked="checked"
         @input="update"
     >
 </template>
@@ -18,7 +18,7 @@
 import { computed, ref, watchEffect } from 'vue';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import { onFormFocus } from '@aerogel/core/components/utils';
+import { onFormFocus } from '@aerogel/core/utils/composition/forms';
 import type { FormFieldValue } from '@aerogel/core/forms/FormController';
 import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 

package/src/components/headless/HeadlessInputTextArea.vue

@@ -2,9 +2,9 @@
     <textarea
         :id="input.id"
         ref="$textArea"
-        :name="name"
+        :name
+        :value
         :required="input.required ?? undefined"
-        :value="value"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="
             input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { onFormFocus } from '@aerogel/core/components/utils';
+import { onFormFocus } from '@aerogel/core/utils/composition/forms';
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 

package/src/components/headless/HeadlessModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <DialogRoot ref="$root" :open="true" @update:open="persistent || close()">
+    <DialogRoot ref="$root" open @update:open="persistent || close()">
         <DialogPortal>
             <slot :close="close" />
         </DialogPortal>
@@ -14,7 +14,7 @@ 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 { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
 defineProps<ModalProps>();
 defineSlots<ModalSlots>();
@@ -81,4 +81,6 @@ useEvent('show-modal', async ({ id }) => {
 
     await show();
 });
+
+defineExpose<ModalExpose>({ close });
 </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,104 @@
+<template>
+    <SelectRoot v-slot="{ open }" :model-value="acceptableValue" @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">
+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 { 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 = 'template',
+    label,
+    options,
+    renderOption,
+    description,
+    placeholder,
+    modelValue,
+} = defineProps<SelectProps>();
+const emit = defineEmits<SelectEmits>();
+const form = inject<FormController | null>('form', null);
+const acceptableValue = computed(() => modelValue 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 context = {
+    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)),
+    value: computed(() => {
+        if (form && name) {
+            return form.getFieldValue(name);
+        }
+
+        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 SelectExpose;
+
+function update(value: AcceptableValue) {
+    context.update(value as FormFieldValue);
+}
+
+provide('select', context);
+defineExpose(context);
+</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 class="the-text">
+            <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,30 @@
+<template>
+    <SelectPortal>
+        <SelectContent :class="classes">
+            <SelectViewport>
+                <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 { injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+import HeadlessSelectOption from './HeadlessSelectOption.vue';
+
+const { class: classes } = defineProps<{ class?: string }>();
+const select = injectReactiveOrFail<SelectExpose>(
+    'select',
+    '<HeadlessSelectOptions> must be a child of a <HeadlessSelect>',
+);
+</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,15 @@
+<template>
+    <SelectValue :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/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';
@@ -12,3 +9,10 @@ export { default as HeadlessModal } from './HeadlessModal.vue';
 export { default as HeadlessModalContent } from './HeadlessModalContent.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 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';