@aerogel/core 0.1.1-next.47ee6e5e3485291a8763a804016f87a051476893 → 0.1.1-next.6005e06a52b9294023bae608af05bf826d281a4d

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.1.1-next.47ee6e5e3485291a8763a804016f87a051476893",
+    "version": "0.1.1-next.6005e06a52b9294023bae608af05bf826d281a4d",
     "type": "module",
     "sideEffects": false,
     "exports": {

package/src/components/contracts/Combobox.ts

@@ -0,0 +1,5 @@
+export type ComboboxContext = {
+    input: string;
+    preventChange: boolean;
+    $group: HTMLDivElement | null;
+};

package/src/components/contracts/Select.ts

@@ -1,8 +1,12 @@
+import { computed, inject, provide, readonly } from 'vue';
+import { evaluate, toString, uuid } from '@noeldemartin/utils';
+import type { AcceptRefs } from '@aerogel/core/utils';
 import type { AcceptableValue, AsTag, SelectContentProps } from 'reka-ui';
-import type { Component, ComputedRef, HTMLAttributes } from 'vue';
+import type { Component, ComputedRef, EmitFn, HTMLAttributes, Ref } from 'vue';
 import type { Nullable } from '@noeldemartin/utils';
 
-import type { FormFieldValue } from '@aerogel/core/forms';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { FormController, FormFieldValue } from '@aerogel/core/forms';
 
 import type { InputEmits, InputExpose, InputProps } from './Input';
 
@@ -34,12 +38,102 @@ export interface SelectExpose<T extends Nullable<FormFieldValue> = Nullable<Form
     options: ComputedRef<Nullable<readonly SelectOptionData[]>>;
     selectedOption: ComputedRef<Nullable<SelectOptionData>>;
     placeholder: ComputedRef<string>;
-    labelClass?: HTMLAttributes['class'];
-    optionsClass?: HTMLAttributes['class'];
+    labelClass: ComputedRef<HTMLAttributes['class']>;
+    optionsClass: ComputedRef<HTMLAttributes['class']>;
     align?: SelectContentProps['align'];
     side?: SelectContentProps['side'];
+    renderOption: (option: T) => string;
 }
 
 export function hasSelectOptionLabel(option: unknown): option is HasSelectOptionLabel {
     return typeof option === 'object' && option !== null && 'label' in option;
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useSelect<T extends Nullable<FormFieldValue>>(
+    props: Ref<SelectProps<T>>,
+    emit: EmitFn<SelectEmits<T>>,
+) {
+    const form = inject<FormController | null>('form', null);
+    const renderOption = (option: T): string => {
+        if (option === undefined) {
+            return '';
+        }
+
+        return props.value.renderOption
+            ? props.value.renderOption(option)
+            : hasSelectOptionLabel(option)
+                ? evaluate(option.label as string)
+                : toString(option);
+    };
+    const computedValue = computed(() => {
+        const { name, modelValue } = props.value;
+
+        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 || !props.value.name) {
+            return null;
+        }
+
+        return form.errors[props.value.name] ?? null;
+    });
+    const computedOptions = computed(() => {
+        if (!props.value.options) {
+            return null;
+        }
+
+        return props.value.options.map((option) => ({
+            key: uuid(),
+            label: renderOption(option),
+            value: option as AcceptableValue,
+        }));
+    });
+
+    const expose = {
+        renderOption,
+        labelClass: computed(() => props.value.labelClass),
+        optionsClass: computed(() => props.value.optionsClass),
+        align: computed(() => props.value.align),
+        side: computed(() => props.value.side),
+        value: computedValue,
+        id: `select-${uuid()}`,
+        name: computed(() => props.value.name),
+        label: computed(() => props.value.label),
+        description: computed(() => props.value.description),
+        placeholder: computed(() => props.value.placeholder ?? translateWithDefault('ui.select', 'Select an option')),
+        options: computedOptions,
+        selectedOption: computed(() =>
+            computedOptions.value?.find((option) => option.value === props.value.modelValue)),
+        errors: readonly(errors),
+        required: computed(() => {
+            if (!props.value.name || !form) {
+                return;
+            }
+
+            return form.getFieldRules(props.value.name).includes('required');
+        }),
+        update(value) {
+            if (form && props.value.name) {
+                form.setFieldValue(props.value.name, value as FormFieldValue);
+
+                return;
+            }
+
+            emit('update:modelValue', value);
+        },
+    } satisfies AcceptRefs<SelectExpose<T>>;
+
+    function update(value: AcceptableValue) {
+        expose.update(value as T);
+    }
+
+    provide('select', expose);
+
+    return { expose, acceptableValue, update, renderOption };
+}

package/src/components/contracts/index.ts

@@ -1,5 +1,6 @@
 export * from './AlertModal';
 export * from './Button';
+export * from './Combobox';
 export * from './ConfirmModal';
 export * from './DropdownMenu';
 export * from './ErrorReportModal';

package/src/components/headless/HeadlessSelect.vue

@@ -2,7 +2,7 @@
     <SelectRoot
         v-slot="{ open }"
         :model-value="acceptableValue"
-        :by="compareOptions as Closure<[AcceptableValue, AcceptableValue], boolean>"
+        :by="compareOptions"
         @update:model-value="update($event)"
     >
         <component :is="as" v-bind="$attrs">
@@ -15,16 +15,12 @@
 </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 { computed } from 'vue';
+import type { 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 { useSelect } from '@aerogel/core/components/contracts/Select';
+import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
 import type { FormFieldValue } from '@aerogel/core/forms/FormController';
 
 import HeadlessSelectTrigger from './HeadlessSelectTrigger.vue';
@@ -32,89 +28,12 @@ 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;
-    }
+const { as = 'div', compareOptions = (a, b) => a === b, ...props } = defineProps<SelectProps<T>>();
+const { expose, acceptableValue, update } = useSelect(
+    computed(() => ({ as, compareOptions, ...props })),
+    emit,
+);
 
-    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/HeadlessSelectOption.vue

@@ -25,10 +25,6 @@ const select = injectReactiveOrFail<SelectExpose>(
 const renderedLabel = computed(() => {
     const itemOption = select.options?.find((option) => option.value === value);
 
-    if (itemOption) {
-        return itemOption.label;
-    }
-
-    return toString(value);
+    return itemOption ? select.renderOption(itemOption.value) : toString(value);
 });
 </script>

package/src/components/index.ts

@@ -5,3 +5,4 @@ export { default as AppToasts } from './AppToasts.vue';
 export * from './contracts';
 export * from './headless';
 export * from './ui';
+export * from './vue';

package/src/components/ui/Combobox.vue

@@ -0,0 +1,65 @@
+<template>
+    <ComboboxRoot
+        ignore-filter
+        :open
+        :reset-search-term-on-blur="false"
+        :reset-search-term-on-select="false"
+        :model-value="acceptableValue"
+        :by="compareOptions"
+        @update:model-value="update($event)"
+    >
+        <Provide name="combobox" :value="combobox">
+            <ComboboxLabel />
+            <ComboboxTrigger @focus="open = true" @change="open = true" @blur="open = false" />
+            <ComboboxOptions :new-input-value @select="open = false" />
+        </Provide>
+    </ComboboxRoot>
+</template>
+
+<script setup lang="ts" generic="T extends Nullable<FormFieldValue>">
+import { ComboboxRoot } from 'reka-ui';
+import { computed, ref } from 'vue';
+import type { AcceptableValue } from 'reka-ui';
+import type { Nullable } from '@noeldemartin/utils';
+
+import Provide from '@aerogel/core/components/vue/Provide.vue';
+import { useSelect } from '@aerogel/core/components/contracts/Select';
+import type { AcceptRefs } from '@aerogel/core/utils';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
+import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
+import type { FormFieldValue } from '@aerogel/core/forms';
+
+import ComboboxOptions from './ComboboxOptions.vue';
+import ComboboxTrigger from './ComboboxTrigger.vue';
+import ComboboxLabel from './ComboboxLabel.vue';
+
+const emit = defineEmits<SelectEmits<T>>();
+const {
+    as = 'div',
+    compareOptions = (a, b) => a === b,
+    ...props
+} = defineProps<SelectProps<T> & { newInputValue?: (value: string) => T }>();
+const {
+    expose,
+    acceptableValue,
+    update: baseUpdate,
+    renderOption,
+} = useSelect(
+    computed(() => ({ as, compareOptions, ...props })),
+    emit,
+);
+const open = ref(false);
+const combobox = {
+    input: ref(acceptableValue.value ? renderOption(acceptableValue.value as T) : ''),
+    preventChange: ref(false),
+    $group: ref(null),
+} satisfies AcceptRefs<ComboboxContext>;
+
+function update(value: AcceptableValue) {
+    combobox.input.value = renderOption(value as T);
+
+    baseUpdate(value);
+}
+
+defineExpose(expose);
+</script>

package/src/components/ui/ComboboxLabel.vue

@@ -0,0 +1,29 @@
+<template>
+    <Label
+        v-if="show"
+        :for="select.id"
+        :class="renderedClasses"
+        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 { classes } from '@aerogel/core/utils';
+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', '<ComboboxLabel> must be a child of a <Combobox>');
+const slots = useSlots();
+const show = computed(() => !!(select.label || slots.default));
+const renderedClasses = computed(() => classes('block text-sm leading-6 font-medium text-gray-900', select.labelClass));
+</script>

package/src/components/ui/ComboboxOption.vue

@@ -0,0 +1,46 @@
+<template>
+    <ComboboxItem v-bind="$props" class="group p-1 outline-none" @select="onSelect($event)">
+        <div
+            class="relative flex max-w-[calc(100vw-2rem)] cursor-pointer items-center gap-2 truncate rounded-md px-2 py-1 text-sm select-none *:truncate group-data-[highlighted]:bg-gray-100 group-data-[state=checked]:font-semibold group-data-[state=unchecked]:opacity-50"
+        >
+            <slot>
+                {{ renderedLabel }}
+            </slot>
+        </div>
+    </ComboboxItem>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ComboboxItem, injectComboboxRootContext } from 'reka-ui';
+import { toString } from '@noeldemartin/utils';
+import type { ComboboxItemProps, SelectItemSelectEvent } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const emit = defineEmits<{ select: [] }>();
+
+const { value } = defineProps<ComboboxItemProps>();
+const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxOption> must be a child of a <Combobox>');
+const rootContext = injectComboboxRootContext();
+const combobox = injectReactiveOrFail<ComboboxContext>('combobox');
+const renderedLabel = computed(() => {
+    const itemOption = select.options?.find((option) => option.value === value);
+
+    return itemOption ? select.renderOption(itemOption.value) : toString(value);
+});
+
+function onSelect(event: SelectItemSelectEvent<unknown>) {
+    if (rootContext.multiple.value || rootContext.disabled.value) {
+        return;
+    }
+
+    event.preventDefault();
+    combobox.preventChange = true;
+    rootContext.modelValue.value = value;
+
+    emit('select');
+}
+</script>

package/src/components/ui/ComboboxOptions.vue

@@ -0,0 +1,71 @@
+<template>
+    <ComboboxPortal>
+        <ComboboxContent
+            position="popper"
+            :align="select.align"
+            :side="select.side"
+            :side-offset="4"
+            :class="renderedClasses"
+        >
+            <ComboboxViewport>
+                <ComboboxEmpty class="group p-1 outline-none">
+                    <div
+                        class="relative flex max-w-[calc(100vw-2rem)] items-center gap-2 truncate rounded-md px-2 py-1 text-sm select-none *:truncate"
+                    >
+                        {{ $td('ui.comboboxEmpty', 'No options found') }}
+                    </div>
+                </ComboboxEmpty>
+
+                <ComboboxGroup ref="$group">
+                    <ComboboxOption
+                        v-if="showInputOption"
+                        :value="newInputValue?.(combobox.input) ?? (combobox.input as AcceptableValue)"
+                        @select="$emit('select')"
+                    >
+                        {{ combobox.input }}
+                    </ComboboxOption>
+                    <ComboboxOption
+                        v-for="option in filteredOptions"
+                        :key="option.key"
+                        :value="option.value"
+                        @select="$emit('select')"
+                    />
+                </ComboboxGroup>
+            </ComboboxViewport>
+        </ComboboxContent>
+    </ComboboxPortal>
+</template>
+
+<script setup lang="ts">
+import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxPortal, ComboboxViewport, useFilter } from 'reka-ui';
+import { computed, useTemplateRef, watch } from 'vue';
+import type { Nullable } from '@noeldemartin/utils';
+import type { AcceptableValue } from 'reka-ui';
+
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
+import type { FormFieldValue } from '@aerogel/core/forms';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
+
+import ComboboxOption from './ComboboxOption.vue';
+
+defineEmits<{ select: [] }>();
+
+const { newInputValue } = defineProps<{ newInputValue?: (value: string) => Nullable<FormFieldValue> }>();
+const { contains } = useFilter({ sensitivity: 'base' });
+const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxOptions> must be a child of a <Combobox>');
+const combobox = injectReactiveOrFail<ComboboxContext>('combobox');
+const $group = useTemplateRef('$group');
+const filteredOptions = computed(
+    () => select.options?.filter((option) => contains(option.label, combobox.input)) ?? [],
+);
+const showInputOption = computed(
+    () => combobox.input && !filteredOptions.value.some((option) => option.label === combobox.input),
+);
+const renderedClasses = classes(
+    'max-h-(--reka-combobox-content-available-height) min-w-(--reka-combobox-trigger-width)',
+    'z-50 overflow-auto rounded-lg bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden',
+);
+
+watch($group, () => (combobox.$group = $group.value?.$el ?? null));
+</script>

package/src/components/ui/ComboboxTrigger.vue

@@ -0,0 +1,63 @@
+<template>
+    <ComboboxAnchor>
+        <ComboboxInput
+            :id="select.id"
+            v-model="combobox.input"
+            :placeholder="select.placeholder"
+            :class="renderedRootClasses"
+            :display-value="select.renderOption"
+            :name="select.name"
+            @focus="$emit('focus')"
+            @blur="onBlur()"
+            @keydown.esc="$emit('blur')"
+        />
+    </ComboboxAnchor>
+</template>
+
+<script setup lang="ts">
+import { ComboboxAnchor, ComboboxInput } from 'reka-ui';
+import { computed, watch } from 'vue';
+
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
+
+const emit = defineEmits<{ focus: []; change: []; blur: [] }>();
+
+const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxTrigger> must be a child of a <Combobox>');
+const combobox = injectReactiveOrFail<ComboboxContext>('combobox');
+const renderedRootClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6',
+        {
+            'mt-1': select.label,
+            'focus:ring-primary-600': !select.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !select.errors,
+            'pr-10 text-red-900 ring-red-900/10 placeholder:text-red-300 focus:ring-red-500': select.errors,
+        },
+    ));
+
+function onBlur() {
+    const elements = Array.from(document.querySelectorAll(':hover'));
+
+    if (elements.some((element) => combobox.$group?.contains(element))) {
+        return;
+    }
+
+    emit('blur');
+}
+
+watch(
+    () => combobox.input,
+    () => {
+        if (combobox.preventChange) {
+            combobox.preventChange = false;
+
+            return;
+        }
+
+        emit('change');
+    },
+);
+</script>

package/src/components/ui/Details.vue

@@ -26,7 +26,7 @@ const {
 const renderedContentClasses = computed(() => classes('pt-2 pl-4', contentClass));
 const renderedSummaryClasses = computed(() =>
     classes(
-        '-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1',
+        '-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 max-w-full',
         'hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700',
         summaryClass,
     ));

package/src/components/ui/ProgressBar.vue

@@ -36,7 +36,7 @@ const filledClasses = computed(() =>
     classes('size-full transition-transform duration-500 rounded-r-full ease-linear bg-primary-600', filledClass));
 const overflowClasses = computed(() =>
     classes(
-        'absolute inset-y-0 right-0 size-full rounded-r-full border-l-3 border-gray-200',
+        'absolute inset-y-0 right-0 size-full rounded-r-full',
         'bg-primary-900 transition-[width] duration-500 ease-linear',
         overflowClass,
     ));

package/src/components/ui/index.ts

@@ -2,6 +2,11 @@ export { default as AdvancedOptions } from './AdvancedOptions.vue';
 export { default as AlertModal } from './AlertModal.vue';
 export { default as Button } from './Button.vue';
 export { default as Checkbox } from './Checkbox.vue';
+export { default as Combobox } from './Combobox.vue';
+export { default as ComboboxLabel } from './ComboboxLabel.vue';
+export { default as ComboboxOption } from './ComboboxOption.vue';
+export { default as ComboboxOptions } from './ComboboxOptions.vue';
+export { default as ComboboxTrigger } from './ComboboxTrigger.vue';
 export { default as ConfirmModal } from './ConfirmModal.vue';
 export { default as Details } from './Details.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';

package/src/components/vue/Provide.vue

@@ -0,0 +1,11 @@
+<template>
+    <slot />
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue';
+
+const { name, value } = defineProps<{ name: string; value: unknown }>();
+
+provide(name, value);
+</script>

package/src/components/vue/index.ts

@@ -0,0 +1 @@
+export { default as Provide } from './Provide.vue';