@aerogel/core 0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c → 0.0.0-next.9a1c5ba39a454b316eba36ec7bdf579fed3d95d2

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

@@ -1,33 +1,41 @@
-import type { ComputedRef, DeepReadonly, Ref } from 'vue';
+import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
+import type { Writable } from '@noeldemartin/utils';
 
-import { stringProp } from '@/utils';
+import { mixedProp, stringProp } from '@aerogel/core/utils';
+import { extractComponentProps } from '@aerogel/core/components/utils';
+import type { FormFieldValue } from '@aerogel/core/forms/Form';
+import type { HasElement } from '@aerogel/core/components/contracts/shared';
 
-export interface IAGHeadlessInput {
+export interface IAGHeadlessInput extends HasElement {
     id: string;
     name: ComputedRef<string | null>;
     label: ComputedRef<string | null>;
-    value: ComputedRef<string | number | boolean | null>;
+    description: ComputedRef<string | boolean | null>;
+    value: ComputedRef<FormFieldValue | null>;
+    required: ComputedRef<boolean | null>;
     errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: string | number | boolean | null): void;
+    update(value: FormFieldValue | null): void;
 }
 
 export const inputProps = {
     name: stringProp(),
     label: stringProp(),
+    description: stringProp(),
+    modelValue: mixedProp<FormFieldValue>([String, Number, Boolean]),
 };
 
+export const inputEmits = ['update:modelValue'] as const;
+
+export function useInputEmits(): Writable<typeof inputEmits> {
+    return [...inputEmits];
+}
+
 export function useInputProps(): typeof inputProps {
     return inputProps;
 }
 
-export function extractInputProps<T extends Record<keyof typeof inputProps, unknown>>(
-    componentProps: T,
+export function extractInputProps<T extends ExtractPropTypes<typeof inputProps>>(
+    props: T,
 ): Pick<T, keyof typeof inputProps> {
-    return Object.keys(inputProps).reduce((extractedProps, selectProp) => {
-        const prop = selectProp as keyof typeof inputProps;
-
-        extractedProps[prop] = componentProps[prop];
-
-        return extractedProps;
-    }, {} as Pick<T, keyof typeof inputProps>);
+    return extractComponentProps(props, inputProps);
 }

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

@@ -6,11 +6,12 @@
 </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/contracts/shared';
 
 import { useInputProps } from './AGHeadlessInput';
 import type { IAGHeadlessInput } from './AGHeadlessInput';
@@ -18,9 +19,9 @@ import type { IAGHeadlessInput } from './AGHeadlessInput';
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
     as: stringProp('div'),
-    modelValue: mixedProp<string | number | boolean>([String, Number, Boolean]),
     ...useInputProps(),
 });
+const $el = ref<HTMLElement>();
 const errors = computed(() => {
     if (!form || !props.name) {
         return null;
@@ -29,18 +30,27 @@ const errors = computed(() => {
     return form.errors[props.name] ?? null;
 });
 const form = inject<Form | null>('form', null);
-const api: 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) as string | number | boolean | null;
+            return form.getFieldValue(props.name);
         }
 
         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);
@@ -50,6 +60,9 @@ const api: IAGHeadlessInput = {
 
         emit('update:modelValue', value);
     },
+    __setElement(element) {
+        $el.value = element;
+    },
 };
 
 provide<IAGHeadlessInput>('input', api);

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/contracts/shared';
+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

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

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/contracts/shared';
+
+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

@@ -1,44 +1,42 @@
-import type { ComputedRef, DeepReadonly, Ref } from 'vue';
+import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
+import type { Writable } from '@noeldemartin/utils';
 
-import { requiredArrayProp, stringProp } from '@/utils/vue';
-
-export interface IAGSelectOption {
-    value: string | number | boolean | object | null;
-    text: string;
-}
-
-export type IAGSelectOptionValue = string | number | boolean | object | null;
+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>;
-    selectedOption: ComputedRef<IAGSelectOption | undefined>;
-    options: ComputedRef<IAGSelectOption[]>;
+    renderText: ComputedRef<(value: FormFieldValue) => string>;
+    selectedOption: ComputedRef<FormFieldValue | null>;
+    options: ComputedRef<FormFieldValue[]>;
     errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: IAGSelectOptionValue): void;
+    update(value: FormFieldValue): void;
 }
 
 export const selectProps = {
     name: stringProp(),
     label: stringProp(),
-    options: requiredArrayProp<IAGSelectOptionValue>(),
+    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 extractSelectProps<T extends Record<keyof typeof selectProps, unknown>>(
-    componentProps: T,
-): Pick<T, keyof typeof selectProps> {
-    return Object.keys(selectProps).reduce((extractedProps, selectProp) => {
-        const prop = selectProp as keyof typeof selectProps;
-
-        extractedProps[prop] = componentProps[prop];
+export function useSelectEmits(): Writable<typeof selectEmits> {
+    return [...selectEmits];
+}
 
-        return extractedProps;
-    }, {} as Pick<T, keyof typeof selectProps>);
+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

@@ -1,47 +1,45 @@
 <template>
-    <Listbox
-        v-slot="{ value, open, disabled }: ComponentProps"
-        :model-value="selectedOption?.value"
-        @update:model-value="update($event)"
-    >
-        <slot :value="value" :open="open" :disabled="disabled" />
-    </Listbox>
+    <SelectRoot v-slot="{ open }: ComponentProps" :model-value="selectedOption" @update:model-value="update($event)">
+        <slot :model-value="modelValue" :open="open" />
+    </SelectRoot>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, provide } from 'vue';
-import { isObject, toString, uuid } from '@noeldemartin/utils';
-import { Listbox } from '@headlessui/vue';
+import { toString, uuid } from '@noeldemartin/utils';
+import { SelectRoot } from 'reka-ui';
+import type { AcceptableValue } from 'reka-ui';
 
-import { mixedProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
-import type Form from '@/forms/Form';
-import type { ComponentProps } from '@/utils/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 { useSelectProps } from './AGHeadlessSelect';
-import type { IAGHeadlessSelect, IAGSelectOption, IAGSelectOptionValue } from './AGHeadlessSelect';
+import { useSelectEmits, useSelectProps } from './AGHeadlessSelect';
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(useSelectEmits());
 const props = defineProps({
-    modelValue: mixedProp<IAGSelectOptionValue>(),
+    modelValue: mixedProp<FormFieldValue>(),
     ...useSelectProps(),
 });
-const form = inject<Form | null>('form', null);
-const noSelectionText = computed(() => props.noSelectionText ?? translateWithDefault('select.noSelection', '-'));
-const options = computed(() =>
-    props.options.map((value) => {
-        const option: IAGSelectOption = {
-            value,
-            text: toString(isObject(value) && 'text' in value ? value.text : value),
-        };
+const renderText = computed(() => {
+    if (typeof props.optionsText === 'function') {
+        return props.optionsText;
+    }
 
-        return option;
-    }));
-const selectedOption = computed(() => {
-    const selectedOptionValue = form && props.name ? form.getFieldValue(props.name) : props.modelValue;
+    if (typeof props.optionsText === 'string') {
+        return (option: FormFieldValue): string => toString(option[props.optionsText as keyof FormFieldValue]);
+    }
 
-    return options.value.find((option) => option.value === selectedOptionValue);
+    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) as AcceptableValue,
+);
 const errors = computed(() => {
     if (!form || !props.name) {
         return null;
@@ -50,7 +48,8 @@ const errors = computed(() => {
     return form.errors[props.name] ?? null;
 });
 
-function update(value: IAGSelectOptionValue) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function update(value: any) {
     if (form && props.name) {
         form.setFieldValue(props.name, value);
 
@@ -62,12 +61,14 @@ function update(value: IAGSelectOptionValue) {
 
 const api: IAGHeadlessSelect = {
     id: `select-${uuid()}`,
-    options,
     noSelectionText,
     selectedOption,
     errors,
+    options: computed(() => props.options),
     label: computed(() => props.label),
-    buttonText: computed(() => selectedOption.value?.text ?? noSelectionText.value),
+    buttonText: computed(() =>
+        selectedOption.value === null ? noSelectionText.value : renderText.value(selectedOption.value)),
+    renderText,
     update,
 };
 

package/src/components/headless/forms/AGHeadlessSelectError.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 { IAGHeadlessSelect } from './AGHeadlessSelect';
 

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

@@ -1,39 +1,31 @@
 <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,
-                }"
-            >
-                {{ option?.text }}
-            </li>
-        </slot>
-    </ListboxOption>
+    <SelectItem :value="value" as="template">
+        <SelectItemText>
+            <slot>
+                {{ select.renderText(value) }}
+            </slot>
+        </SelectItemText>
+    </SelectItem>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { ListboxOption } from '@headlessui/vue';
+import { SelectItem, SelectItemText } from 'reka-ui';
 
-import { injectReactiveOrFail, requiredMixedProp, stringProp } from '@/utils/vue';
-import type { ComponentProps } from '@/utils/vue';
+import { injectReactiveOrFail, requiredMixedProp, stringProp } from '@aerogel/core/utils/vue';
 
-import type { IAGHeadlessSelect, IAGSelectOptionValue } from './AGHeadlessSelect';
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
 
-const props = defineProps({
-    value: requiredMixedProp<IAGSelectOptionValue>(),
+defineProps({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: requiredMixedProp<any>(),
     selectedClass: stringProp(),
     unselectedClass: stringProp(),
     activeClass: stringProp(),
     inactiveClass: stringProp(),
 });
+
 const select = injectReactiveOrFail<IAGHeadlessSelect>(
     'select',
     '<AGHeadlessSelectOption> must be a child of a <AGHeadlessSelect>',
 );
-const option = computed(() => select.options.find((selectOption) => selectOption.value === props.value));
 </script>

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

@@ -0,0 +1,19 @@
+<template>
+    <SelectPortal>
+        <SelectContent :class="classes">
+            <SelectViewport>
+                <slot />
+            </SelectViewport>
+        </SelectContent>
+    </SelectPortal>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { SelectContent, SelectPortal, SelectViewport } from 'reka-ui';
+
+import { stringProp } from '@aerogel/core/utils/vue';
+
+const props = defineProps({ class: stringProp('') });
+const classes = computed(() => props.class);
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+    <SelectTrigger>
+        <SelectValue>
+            <slot>
+                <span :class="textClass">{{ select?.buttonText }}</span>
+            </slot>
+            <slot name="icon" />
+        </SelectValue>
+    </SelectTrigger>
+</template>
+
+<script setup lang="ts">
+import { SelectTrigger, SelectValue } from 'reka-ui';
+
+import { injectReactiveOrFail, stringProp } from '@aerogel/core/utils/vue';
+
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
+
+defineProps({ textClass: stringProp() });
+
+const select = injectReactiveOrFail<IAGHeadlessSelect>(
+    'select',
+    '<AGHeadlessSelectTrigger> must be a child of a <AGHeadlessSelect>',
+);
+</script>

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,14 +1,17 @@
+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 AGHeadlessSelectTrigger } from './AGHeadlessSelectTrigger.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';
+export { default as AGHeadlessSelectOptions } from './AGHeadlessSelectOptions.vue';

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

@@ -1,16 +1,33 @@
-import type { IAGModal } from '@/components/modals/AGModal';
-import { booleanProp } from '@/utils';
+import { computed } from 'vue';
+import type { Ref } from 'vue';
 
-export interface IAGHeadlessModal extends IAGModal {}
+import { booleanProp, stringProp } from '@aerogel/core/utils/vue';
+import { extractComponentProps } from '@aerogel/core/components/utils';
+import type { ComponentPropDefinitions } from '@aerogel/core/components/utils';
+import type { ComponentProps } from '@aerogel/core/utils/vue';
+import type { IModal, IModalProps } from '@aerogel/core/components/contracts/Modal';
+
+export interface IAGHeadlessModal extends IModal {}
 
 export interface IAGHeadlessModalDefaultSlotProps {
     close(result?: unknown): Promise<void>;
 }
 
-export const modalProps = {
-    cancellable: booleanProp(true),
-};
+export function extractModalProps<T extends IModalProps>(props: T): ComponentProps<IModalProps> {
+    return extractComponentProps(props, modalProps());
+}
+
+export function modalProps(): ComponentPropDefinitions<IModalProps> {
+    return {
+        cancellable: booleanProp(true),
+        description: stringProp(),
+        title: stringProp(),
+    };
+}
 
-export function useModalProps(): typeof modalProps {
-    return modalProps;
+export function modalExpose($modal: Ref<IAGHeadlessModal | undefined>): IModal {
+    return {
+        cancellable: computed(() => !!$modal.value?.cancellable),
+        close: async () => $modal.value?.close(),
+    };
 }