@aerogel/core 0.0.0-next.d824b40e5d06757cd9f47c9f771d916185df4f05 → 0.0.0-next.eed7a057cf5b844cd9f7fc6bda2d8df49fcd6736

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

@@ -6,20 +6,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, provide, readonly } from 'vue';
+import { computed, inject, provide, readonly, ref } from 'vue';
 import { uuid } from '@noeldemartin/utils';
 
-import { mixedProp, stringProp } from '@/utils/vue';
-import type Form from '@/forms/Form';
+import { stringProp } from '@aerogel/core/utils/vue';
+import type Form from '@aerogel/core/forms/Form';
+import type { __SetsElement } from '@aerogel/core/components/interfaces';
 
+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 $el = ref<HTMLElement>();
 const errors = computed(() => {
     if (!form || !props.name) {
         return null;
@@ -28,8 +30,12 @@ const errors = computed(() => {
     return form.errors[props.name] ?? null;
 });
 const form = inject<Form | null>('form', null);
-const publicApi: IAGHeadlessInput = {
+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);
@@ -38,6 +44,13 @@ const publicApi: IAGHeadlessInput = {
         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);
@@ -47,8 +60,11 @@ const publicApi: IAGHeadlessInput = {
 
         emit('update:modelValue', value);
     },
+    __setElement(element) {
+        $el.value = element;
+    },
 };
 
-provide<IAGHeadlessInput>('input', publicApi);
-defineExpose<IAGHeadlessInput>(publicApi);
+provide<IAGHeadlessInput>('input', api);
+defineExpose<IAGHeadlessInput>(api);
 </script>

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

@@ -0,0 +1,28 @@
+<template>
+    <slot :id="`${input.id}-description`">
+        <AGMarkdown
+            v-if="show"
+            v-bind="$attrs"
+            :id="`${input.id}-description`"
+            :text="text"
+        />
+    </slot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+
+import AGMarkdown from '../../lib/AGMarkdown.vue';
+import type { IAGHeadlessInput } from './AGHeadlessInput';
+
+defineOptions({ inheritAttrs: false });
+
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputDescription> must be a child of a <AGHeadlessInput>',
+);
+const text = computed(() => (typeof input.description === 'string' ? input.description : ''));
+const show = computed(() => !!input.description);
+</script>

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

@@ -7,8 +7,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
 
 import type { IAGHeadlessInput } from './AGHeadlessInput';
 

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

@@ -2,20 +2,27 @@
     <input
         :id="input.id"
         ref="$input"
+        :name="name"
         :type="type"
-        :value="value"
+        :required="input.required ?? undefined"
         :aria-invalid="input.errors ? 'true' : 'false'"
-        :aria-describedby="input.errors ? `${input.id}-error` : undefined"
+        :aria-describedby="
+            input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined
+        "
         :checked="checked"
         @input="update"
     >
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 
-import { injectReactiveOrFail, stringProp } from '@/utils';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
+import { injectReactiveOrFail, stringProp } from '@aerogel/core/utils/vue';
+import type { __SetsElement } from '@aerogel/core/components/interfaces';
+import type { FormFieldValue } from '@aerogel/core/forms/Form';
+import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
+
+import { onFormFocus } from './composition';
 
 const props = defineProps({
     type: stringProp('text'),
@@ -26,6 +33,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') {
@@ -40,6 +48,37 @@ function update() {
         return;
     }
 
-    input.update(props.type === 'checkbox' ? $input.value.checked : $input.value.value);
+    input.update(getValue());
 }
+
+function getValue(): FormFieldValue | null {
+    if (!$input.value) {
+        return null;
+    }
+
+    switch (props.type) {
+        case 'checkbox':
+            return $input.value.checked;
+        case 'date':
+            return $input.value.valueAsDate;
+        default:
+            return $input.value.value;
+    }
+}
+
+onFormFocus(input, () => $input.value?.focus());
+watchEffect(() => (input as unknown as __SetsElement).__setElement($input.value));
+watchEffect(() => {
+    if (!$input.value) {
+        return;
+    }
+
+    if (props.type === 'date') {
+        $input.value.valueAsDate = value.value as Date;
+
+        return;
+    }
+
+    $input.value.value = value.value as string;
+});
 </script>

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

@@ -1,11 +1,15 @@
 <template>
-    <label :for="input.id">
-        <slot />
+    <label v-if="show" :for="input.id">
+        <slot>
+            {{ input.label }}
+        </slot>
     </label>
 </template>
 
 <script setup lang="ts">
-import { injectReactiveOrFail } from '@/utils/vue';
+import { computed, useSlots } from 'vue';
+
+import { injectReactiveOrFail } from '@aerogel/core/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/AGHeadlessInputTextArea.vue

@@ -0,0 +1,43 @@
+<template>
+    <textarea
+        :id="input.id"
+        ref="$textArea"
+        :name="name"
+        :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
+        "
+        @input="update"
+    />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
+import type { __SetsElement } from '@aerogel/core/components/interfaces';
+
+import { onFormFocus } from './composition';
+
+const $textArea = ref<HTMLTextAreaElement>();
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputTextArea> must be a child of a <AGHeadlessInput>',
+);
+const name = computed(() => input.name ?? undefined);
+const value = computed(() => input.value as string);
+
+function update() {
+    if (!$textArea.value) {
+        return;
+    }
+
+    input.update($textArea.value.value);
+}
+
+watchEffect(() => (input as unknown as __SetsElement).__setElement($textArea.value));
+onFormFocus(input, () => $textArea.value?.focus());
+</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 '@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

@@ -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 '@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));
+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 '@aerogel/core/utils/vue';
+import type { ComponentProps } from '@aerogel/core/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 '@aerogel/core/utils/vue';
+import { translateWithDefault } from '@aerogel/core/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 '@aerogel/core/utils/vue';
+import type { ComponentProps } from '@aerogel/core/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;
+};

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

@@ -0,0 +1,39 @@
+<template>
+    <ListboxOption v-slot="{ active, selected, disabled }: ComponentProps" :value="value" as="template">
+        <slot :active="active" :selected="selected" :disabled="disabled">
+            <li
+                :class="{
+                    [activeClass ?? 'active']: active,
+                    [inactiveClass ?? 'inactive']: !active,
+                    [selectedClass ?? 'selected']: selected,
+                    [unselectedClass ?? 'unselected']: !selected,
+                }"
+            >
+                {{ select.renderText(value) }}
+            </li>
+        </slot>
+    </ListboxOption>
+</template>
+
+<script setup lang="ts">
+import { ListboxOption } from '@headlessui/vue';
+
+import { injectReactiveOrFail, requiredMixedProp, stringProp } from '@aerogel/core/utils/vue';
+import type { ComponentProps } from '@aerogel/core/utils/vue';
+import type { FormFieldValue } from '@aerogel/core/forms/Form';
+
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
+
+defineProps({
+    value: requiredMixedProp<FormFieldValue>(),
+    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.ts

@@ -0,0 +1,3 @@
+import { ListboxOptions } from '@headlessui/vue';
+
+export default ListboxOptions;

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

@@ -0,0 +1,10 @@
+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,6 +1,18 @@
-export { IAGHeadlessInput } from './AGHeadlessInput';
+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 AGHeadlessSelectButton } from './AGHeadlessSelectButton.vue';
+export { default as AGHeadlessSelectError } from './AGHeadlessSelectError.vue';
+export { default as AGHeadlessSelectLabel } from './AGHeadlessSelectLabel.vue';
+export { default as AGHeadlessSelectOption } from './AGHeadlessSelectOption.vue';
+export { default as AGHeadlessSelectOptions } from './AGHeadlessSelectOptions';

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

@@ -1,7 +1,36 @@
-import type { IAGModal } from '@/components/modals/AGModal';
+import { computed } from 'vue';
+import type { ExtractPropTypes, Ref } from 'vue';
+
+import { booleanProp, stringProp } from '@aerogel/core/utils';
+import { extractComponentProps } from '@aerogel/core/components/utils';
+import type { IAGModal } from '@aerogel/core/components/modals/AGModal';
 
 export interface IAGHeadlessModal extends IAGModal {}
 
 export interface IAGHeadlessModalDefaultSlotProps {
     close(result?: unknown): Promise<void>;
 }
+
+export const modalProps = {
+    cancellable: booleanProp(true),
+    inline: booleanProp(),
+    title: stringProp(),
+};
+
+export function useModalProps(): typeof modalProps {
+    return modalProps;
+}
+
+export function extractModalProps<T extends ExtractPropTypes<typeof modalProps>>(
+    props: T,
+): Pick<T, keyof typeof modalProps> {
+    return extractComponentProps(props, modalProps);
+}
+
+export function useModalExpose($modal: Ref<IAGHeadlessModal | undefined>): IAGModal {
+    return {
+        inline: computed(() => !!$modal.value?.inline),
+        cancellable: computed(() => !!$modal.value?.cancellable),
+        close: async () => $modal.value?.close(),
+    };
+}

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

@@ -1,25 +1,28 @@
 <template>
-    <Dialog ref="$root" :open="true" @close="cancellable && close()">
+    <component
+        :is="rootComponent"
+        ref="$root"
+        :open="true"
+        @close="cancellable && close()"
+    >
         <slot :close="close" />
-    </Dialog>
+    </component>
 </template>
 
 <script setup lang="ts">
-import { ref, toRef } from 'vue';
+import { computed, ref, toRef } from 'vue';
 import { Dialog } from '@headlessui/vue';
 import type { VNode } from 'vue';
 
-import Events from '@/services/Events';
-import { useEvent } from '@/utils/composition/events';
-import { booleanProp, injectReactiveOrFail } from '@/utils/vue';
-import type { IAGModalContext } from '@/components/modals/AGModalContext';
+import Events from '@aerogel/core/services/Events';
+import { useEvent } from '@aerogel/core/utils/composition/events';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { IAGModalContext } from '@aerogel/core/components/modals/AGModalContext';
 
+import { useModalProps } from './AGHeadlessModal';
 import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from './AGHeadlessModal';
 
-const props = defineProps({
-    cancellable: booleanProp(true),
-});
-
+const props = defineProps(useModalProps());
 const $root = ref<{ $el?: HTMLElement } | null>(null);
 const hidden = ref(true);
 const closed = ref(false);
@@ -28,6 +31,7 @@ const { modal } = injectReactiveOrFail<IAGModalContext>(
     'could not obtain modal reference from <AGHeadlessModal>, ' +
         'did you render this component manually? Show it using $ui.openModal() instead',
 );
+const rootComponent = computed(() => (modal.properties.inline ? 'div' : Dialog));
 
 async function hide(): Promise<void> {
     if (!$root.value?.$el) {
@@ -84,5 +88,5 @@ useEvent('show-modal', async ({ id }) => {
 });
 
 defineSlots<{ default(props: IAGHeadlessModalDefaultSlotProps): VNode[] }>();
-defineExpose<IAGHeadlessModal>({ close, cancellable: toRef(props, 'cancellable') });
+defineExpose<IAGHeadlessModal>({ close, cancellable: toRef(props, 'cancellable'), inline: toRef(props, 'inline') });
 </script>