@aerogel/core 0.0.0-next.63f6c97c7c6f262bf6bfb3aa64528e4b599c46ea → 0.0.0-next.824cf5311c4335d119158f507dad094ed4f4f0b6

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.63f6c97c7c6f262bf6bfb3aa64528e4b599c46ea",
+    "version": "0.0.0-next.824cf5311c4335d119158f507dad094ed4f4f0b6",
     "main": "dist/aerogel-core.cjs.js",
     "module": "dist/aerogel-core.esm.js",
     "types": "dist/aerogel-core.d.ts",
@@ -9,12 +9,12 @@
     "scripts": {
         "build": "rm dist -rf && npm run build:js && npm run build:types",
         "build:js": "noeldemartin-build-javascript",
-        "build:types": "noeldemartin-build-types && cp src/types/virtual.d.ts dist",
-        "histoire:dev": "histoire dev",
-        "histoire:prod": "histoire build",
+        "build:types": "noeldemartin-build-types",
+        "histoire": "histoire dev",
         "lint": "noeldemartin-lint src",
         "publish-next": "noeldemartin-publish-next",
-        "test": "vitest --run"
+        "test": "vitest --run",
+        "test:ci": "vitest --run --reporter verbose"
     },
     "engines": {
         "node": ">=18.x"
@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.14",
-        "@noeldemartin/utils": "0.4.0-next.2549ce58d5c94a6009ecdd37d6fe2fcd76b6038e",
+        "@noeldemartin/utils": "0.5.1-next.49cc6c9b4a20930cbf922a949135981791acc5c3",
         "dompurify": "^3.0.3",
         "marked": "^5.0.4",
         "pinia": "^2.1.6",
@@ -43,8 +43,14 @@
     },
     "devDependencies": {
         "@aerogel/vite": "*",
+        "@histoire/plugin-vue": "^0.17.6",
         "@types/dompurify": "^3.0.2",
         "@types/marked": "^5.0.0",
         "tailwindcss": "^3.3.5"
+    },
+    "eslintConfig": {
+        "extends": [
+            "@noeldemartin/eslint-config-vue"
+        ]
     }
 }

package/src/bootstrap/bootstrap.test.ts

@@ -6,7 +6,7 @@ import type { Component } from 'vue';
 import Events from '@/services/Events';
 import initialFocus from '@/directives/initial-focus';
 
-import { bootstrapApplication } from './index';
+import { bootstrap } from './index';
 
 describe('Aerogel', () => {
 
@@ -32,7 +32,7 @@ describe('Aerogel', () => {
         const rootComponent = mock<Component>();
 
         // Act
-        await bootstrapApplication(rootComponent);
+        await bootstrap(rootComponent);
 
         // Assert
         const globals = vi.mocked(createApp).mock.results[0]?.value.config.globalProperties;
@@ -46,7 +46,7 @@ describe('Aerogel', () => {
         const rootComponent = mock<Component>();
 
         // Act
-        await bootstrapApplication(rootComponent);
+        await bootstrap(rootComponent);
 
         // Assert
         expect(vi.mocked(createApp).mock.results[0]?.value.directive).toHaveBeenCalledWith(

package/src/bootstrap/index.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import type { Component } from 'vue';
+import type { App, Component } from 'vue';
 
 import directives from '@/directives';
 import errors from '@/errors';
@@ -10,20 +10,30 @@ import ui from '@/ui';
 import { installPlugins } from '@/plugins';
 import type { AerogelOptions } from '@/bootstrap/options';
 
-export async function bootstrapApplication(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
+export { AerogelOptions };
+
+export async function bootstrapApplication(app: App, options: AerogelOptions = {}): Promise<void> {
     const plugins = [directives, errors, lang, services, ui, ...(options.plugins ?? [])];
-    const app = createApp(rootComponent);
 
     await installPlugins(plugins, app, options);
+    await options.install?.(app);
+    await Events.emit('application-ready');
+}
+
+export async function bootstrap(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
+    const app = createApp(rootComponent);
+
+    await bootstrapApplication(app, options);
 
     app.mount('#app');
     app._container?.classList.remove('loading');
 
-    Events.emit('application-mounted');
+    await Events.emit('application-mounted');
 }
 
 declare module '@/services/Events' {
     export interface EventsPayload {
+        'application-ready': void;
         'application-mounted': void;
     }
 }

package/src/bootstrap/options.ts

@@ -1,5 +1,8 @@
+import type { App } from 'vue';
+
 import type { Plugin } from '@/plugins';
 
 export interface AerogelOptions {
     plugins?: Plugin[];
+    install?(app: App): void | Promise<void>;
 }

package/src/components/AGAppLayout.vue

@@ -1,11 +1,16 @@
 <template>
-    <div class="flex h-full flex-col text-base font-normal leading-tight text-gray-900 antialiased">
-        <slot />
+    <div class="flex min-h-full flex-col text-base font-normal leading-tight text-gray-900 antialiased">
+        <slot v-if="$errors.hasStartupErrors" name="startup-crash">
+            <component :is="$ui.requireComponent(UIComponents.StartupCrash)" />
+        </slot>
+        <slot v-else />
 
         <AGAppOverlays />
     </div>
 </template>
 
 <script setup lang="ts">
+import { UIComponents } from '@/ui/UI';
+
 import AGAppOverlays from './AGAppOverlays.vue';
 </script>

package/src/components/AGAppOverlays.vue

@@ -1,5 +1,9 @@
 <template>
-    <div ref="$backdrop" class="pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0" />
+    <div
+        id="aerogel-overlays-backdrop"
+        ref="$backdrop"
+        class="pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0"
+    />
     <AGAppModals />
     <AGAppSnackbars />
 </template>

package/src/components/AGAppSnackbars.vue

@@ -1,6 +1,6 @@
 <template>
     <div aria-live="assertive" class="z-60 pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:p-6">
-        <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
+        <div class="flex w-full flex-col items-end space-y-4">
             <component
                 :is="snackbar.component"
                 v-for="snackbar of $ui.snackbars"

package/src/components/forms/AGCheckbox.vue

@@ -1,5 +1,10 @@
 <template>
-    <AGHeadlessInput ref="$input" :name="name" class="flex">
+    <AGHeadlessInput
+        ref="$input"
+        :name="name"
+        class="flex"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
         <AGHeadlessInputInput
             v-bind="$attrs"
             type="checkbox"
@@ -30,6 +35,7 @@ import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
 
 defineProps({ name: stringProp() });
 defineOptions({ inheritAttrs: false });
+defineEmits(['update:modelValue']);
 
 const $input = componentRef<IAGHeadlessInput>();
 </script>

package/src/components/forms/AGInput.vue

@@ -3,8 +3,9 @@
         ref="$input"
         class="relative flex flex-col items-center"
         :class="className"
-        :name="name"
+        v-bind="props"
     >
+        <AGHeadlessInputLabel class="sr-only" />
         <AGHeadlessInputInput
             v-bind="attrs"
             class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"
@@ -19,18 +20,19 @@
 </template>
 
 <script setup lang="ts">
-import { componentRef, stringProp } from '@/utils/vue';
-
-import { useInputAttrs } from '@/utils';
+import { componentRef } from '@/utils/vue';
+import { useInputAttrs } from '@/utils/composition/forms';
+import { useInputProps } from '@/components/headless/forms/AGHeadlessInput';
 import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
 
 import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
-import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
 import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
+import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
+import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
 
-defineProps({ name: stringProp() });
 defineOptions({ inheritAttrs: false });
 
+const props = defineProps(useInputProps());
 const $input = componentRef<IAGHeadlessInput>();
 const [attrs, className] = useInputAttrs();
 </script>

package/src/components/forms/AGSelect.story.vue

@@ -1,7 +1,13 @@
 <template>
     <Story>
         <div class="h-96">
-            <AGSelect v-model="bestMugiwara" :label="label" :options="options" />
+            <AGSelect v-model="bestMugiwara" :label="bestMugiwaraLabel" :options="bestMugiwaraOptions" />
+            <AGSelect
+                v-model="bestFood"
+                :label="bestFoodLabel"
+                :options="bestFoodOptions"
+                options-text="name"
+            />
         </div>
     </Story>
 </template>
@@ -12,8 +18,10 @@ import { ref } from 'vue';
 import AGSelect from './AGSelect.vue';
 
 const bestMugiwara = ref(null);
-const label = 'Who\'s the best Mugiwara?';
-const options = [
+const bestFood = ref(null);
+const bestMugiwaraLabel = 'Who\'s the best Mugiwara?';
+const bestFoodLabel = 'What\'s the best food?';
+const bestMugiwaraOptions = [
     'Monkey D. Luffy',
     'Roronoa Zoro',
     'Nami',
@@ -25,4 +33,14 @@ const options = [
     'Brook',
     'Jinbe',
 ];
+const bestFoodOptions = [
+    {
+        id: 'ramen',
+        name: 'Ramen',
+    },
+    {
+        id: 'pizza',
+        name: 'Pizza',
+    },
+];
 </script>

package/src/components/forms/AGSelect.vue

@@ -1,5 +1,10 @@
 <template>
-    <AGHeadlessSelect v-bind="props" ref="$select" as="div">
+    <AGHeadlessSelect
+        v-bind="props"
+        ref="$select"
+        as="div"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
         <AGHeadlessSelectLabel class="block text-sm font-medium leading-6 text-gray-900" />
         <div class="relative" :class="{ 'mt-2': $select?.label }">
             <AGHeadlessSelectButton
@@ -21,7 +26,7 @@
                 <AGHeadlessSelectOption
                     v-for="(option, index) in $select?.options ?? []"
                     :key="index"
-                    :value="option.value"
+                    :value="option"
                     class="relative block cursor-default select-none truncate py-2 pl-3 pr-9"
                     selected-class="font-semibold"
                     unselected-class="font-normal"
@@ -38,7 +43,7 @@
 import IconCheveronDown from '~icons/zondicons/cheveron-down';
 
 import { componentRef } from '@/utils/vue';
-import { useSelectProps } from '@/components/headless/forms/AGHeadlessSelect';
+import { useSelectEmits, useSelectProps } from '@/components/headless/forms/AGHeadlessSelect';
 import type { IAGHeadlessSelect } from '@/components/headless/forms/AGHeadlessSelect';
 
 import AGHeadlessSelect from '../headless/forms/AGHeadlessSelect.vue';
@@ -48,6 +53,8 @@ import AGHeadlessSelectLabel from '../headless/forms/AGHeadlessSelectLabel.vue';
 import AGHeadlessSelectOption from '../headless/forms/AGHeadlessSelectOption.vue';
 import AGHeadlessSelectOptions from '../headless/forms/AGHeadlessSelectOptions';
 
+defineEmits(useSelectEmits());
+
 const props = defineProps(useSelectProps());
 const $select = componentRef<IAGHeadlessSelect>();
 </script>

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

@@ -1,8 +1,28 @@
-import type { ComputedRef, DeepReadonly, Ref } from 'vue';
+import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
+
+import { stringProp } from '@/utils';
+import { extractComponentProps } from '@/components/utils';
 
 export interface IAGHeadlessInput {
     id: string;
+    name: ComputedRef<string | null>;
+    label: ComputedRef<string | null>;
     value: ComputedRef<string | number | boolean | null>;
     errors: DeepReadonly<Ref<string[] | null>>;
     update(value: string | number | boolean | null): void;
 }
+
+export const inputProps = {
+    name: stringProp(),
+    label: stringProp(),
+};
+
+export function useInputProps(): typeof inputProps {
+    return inputProps;
+}
+
+export function extractInputProps<T extends ExtractPropTypes<typeof inputProps>>(
+    props: T,
+): Pick<T, keyof typeof inputProps> {
+    return extractComponentProps(props, inputProps);
+}

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

@@ -12,13 +12,14 @@ import { uuid } from '@noeldemartin/utils';
 import { mixedProp, stringProp } from '@/utils/vue';
 import type Form from '@/forms/Form';
 
+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 errors = computed(() => {
     if (!form || !props.name) {
@@ -30,6 +31,8 @@ const errors = computed(() => {
 const form = inject<Form | null>('form', null);
 const api: IAGHeadlessInput = {
     id: `input-${uuid()}`,
+    name: computed(() => props.name),
+    label: computed(() => props.label),
     value: computed(() => {
         if (form && props.name) {
             return form.getFieldValue(props.name) as string | number | boolean | null;

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

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

@@ -1,43 +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 '@/utils/vue';
+import { extractComponentProps } from '@/components/utils';
+import type { FormFieldValue } from '@/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 = {
-    options: requiredArrayProp<IAGSelectOptionValue>(),
+    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 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,7 +1,7 @@
 <template>
     <Listbox
         v-slot="{ value, open, disabled }: ComponentProps"
-        :model-value="selectedOption?.value"
+        :model-value="selectedOption"
         @update:model-value="update($event)"
     >
         <slot :value="value" :open="open" :disabled="disabled" />
@@ -10,39 +10,37 @@
 
 <script setup lang="ts">
 import { computed, inject, provide } from 'vue';
-import { isObject, toString, uuid } from '@noeldemartin/utils';
+import { toString, uuid } from '@noeldemartin/utils';
 import { Listbox } from '@headlessui/vue';
 
-import { mixedProp, stringProp } from '@/utils/vue';
+import { mixedProp } from '@/utils/vue';
 import { translateWithDefault } from '@/lang/utils';
 import type Form from '@/forms/Form';
+import type { FormFieldValue } from '@/forms/Form';
 import type { ComponentProps } from '@/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({
-    name: stringProp(),
-    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));
 const errors = computed(() => {
     if (!form || !props.name) {
         return null;
@@ -51,7 +49,7 @@ const errors = computed(() => {
     return form.errors[props.name] ?? null;
 });
 
-function update(value: IAGSelectOptionValue) {
+function update(value: FormFieldValue) {
     if (form && props.name) {
         form.setFieldValue(props.name, value);
 
@@ -63,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/AGHeadlessSelectLabel.vue

@@ -1,5 +1,5 @@
 <template>
-    <ListboxLabel v-if="select.label" v-slot="{ open, disabled }: ComponentProps">
+    <ListboxLabel v-if="show" v-slot="{ open, disabled }: ComponentProps">
         <slot :open="open" :disabled="disabled">
             {{ select.label }}
         </slot>
@@ -7,6 +7,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from 'vue';
 import { ListboxLabel } from '@headlessui/vue';
 
 import { injectReactiveOrFail } from '@/utils/vue';
@@ -18,4 +19,6 @@ 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.vue

@@ -9,31 +9,31 @@
                     [unselectedClass ?? 'unselected']: !selected,
                 }"
             >
-                {{ option?.text }}
+                {{ select.renderText(value) }}
             </li>
         </slot>
     </ListboxOption>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import { ListboxOption } from '@headlessui/vue';
 
 import { injectReactiveOrFail, requiredMixedProp, stringProp } from '@/utils/vue';
 import type { ComponentProps } from '@/utils/vue';
+import type { FormFieldValue } from '@/forms/Form';
 
-import type { IAGHeadlessSelect, IAGSelectOptionValue } from './AGHeadlessSelect';
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
 
-const props = defineProps({
-    value: requiredMixedProp<IAGSelectOptionValue>(),
+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>',
 );
-const option = computed(() => select.options.find((selectOption) => selectOption.value === props.value));
 </script>

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

@@ -1,3 +1,8 @@
+import { computed } from 'vue';
+import type { ExtractPropTypes, Ref } from 'vue';
+
+import { booleanProp, stringProp } from '@/utils';
+import { extractComponentProps } from '@/components/utils';
 import type { IAGModal } from '@/components/modals/AGModal';
 
 export interface IAGHeadlessModal extends IAGModal {}
@@ -5,3 +10,25 @@ export interface IAGHeadlessModal extends IAGModal {}
 export interface IAGHeadlessModalDefaultSlotProps {
     close(result?: unknown): Promise<void>;
 }
+
+export const modalProps = {
+    cancellable: booleanProp(true),
+    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 {
+        close: async () => $modal.value?.close(),
+        cancellable: computed(() => !!$modal.value?.cancellable),
+    };
+}

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

@@ -11,15 +11,13 @@ import type { VNode } from 'vue';
 
 import Events from '@/services/Events';
 import { useEvent } from '@/utils/composition/events';
-import { booleanProp, injectReactiveOrFail } from '@/utils/vue';
+import { injectReactiveOrFail } from '@/utils/vue';
 import type { IAGModalContext } from '@/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);