@aerogel/core 0.0.0-next.a56c0f4966eb71571173f8502f3f36d357ceebc7 → 0.0.0-next.aa6e27a9c197d1ee10c9fe018ee8c0fc6ff77767

package/src/components/ui/Link.vue

@@ -0,0 +1,12 @@
+<template>
+    <Button variant="link" v-bind="$props">
+        <slot />
+    </Button>
+</template>
+
+<script setup lang="ts">
+import Button from '@aerogel/core/components/ui/Button.vue';
+import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
+
+defineProps<Omit<ButtonProps, 'variant'>>();
+</script>

package/src/components/ui/LoadingModal.vue

@@ -0,0 +1,32 @@
+<template>
+    <Modal
+        persistent
+        class="flex"
+        wrapper-class="w-auto"
+        :title
+        :class="{ 'flex-col-reverse': showProgress, 'items-center justify-center gap-2': !showProgress }"
+    >
+        <ProgressBar
+            v-if="showProgress"
+            :progress
+            :job
+            class="min-w-[min(400px,80vw)]"
+        />
+        <IconSpinner v-else class="text-primary mr-1 size-6" />
+        <Markdown :text="renderedMessage" />
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import IconSpinner from '~icons/svg-spinners/90-ring-with-bg';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import ProgressBar from '@aerogel/core/components/ui/ProgressBar.vue';
+import { useLoadingModal } from '@aerogel/core/components/contracts/LoadingModal';
+import type { LoadingModalProps } from '@aerogel/core/components/contracts/LoadingModal';
+
+const props = defineProps<LoadingModalProps>();
+
+const { renderedMessage, showProgress } = useLoadingModal(props);
+</script>

package/src/components/ui/Markdown.vue

@@ -0,0 +1,69 @@
+<template>
+    <root />
+</template>
+
+<script setup lang="ts">
+import { computed, h, useAttrs } from 'vue';
+import { isInstanceOf } from '@noeldemartin/utils';
+import type { VNode } from 'vue';
+
+import { renderMarkdown } from '@aerogel/core/utils/markdown';
+import { translate, translateWithDefault } from '@aerogel/core/lang';
+import { renderNode } from '@aerogel/core/utils/vdom';
+
+const { as, inline, langKey, langParams, langDefault, text, actions } = defineProps<{
+    as?: string;
+    inline?: boolean;
+    langKey?: string;
+    langParams?: number | Record<string, unknown>;
+    langDefault?: string;
+    text?: string;
+    actions?: Record<string, () => unknown>;
+}>();
+
+const attrs = useAttrs();
+const slots = defineSlots<{ default?(): VNode[] }>();
+const markdown = computed(() => {
+    if (slots.default) {
+        return slots.default().map(renderNode).join('');
+    }
+
+    return (
+        text ??
+        (langKey &&
+            (langDefault
+                ? translateWithDefault(langKey, langDefault, langParams ?? {})
+                : translate(langKey, langParams ?? {})))
+    );
+});
+const html = computed(() => {
+    if (!markdown.value) {
+        return null;
+    }
+
+    let renderedHtml = renderMarkdown(markdown.value);
+
+    if (inline) {
+        renderedHtml = renderedHtml.replace('<p>', '<span>').replace('</p>', '</span>');
+    }
+
+    return renderedHtml;
+});
+const root = () =>
+    h(as ?? (inline ? 'span' : 'div'), {
+        innerHTML: html.value,
+        onClick,
+        ...attrs,
+        class: `${attrs.class ?? ''} ${inline ? '' : 'prose'}`,
+    });
+
+async function onClick(event: Event) {
+    const { target } = event;
+
+    if (isInstanceOf(target, HTMLElement) && target.dataset.markdownAction) {
+        actions?.[target.dataset.markdownAction]?.();
+
+        return;
+    }
+}
+</script>

package/src/components/ui/Modal.vue

@@ -0,0 +1,70 @@
+<template>
+    <HeadlessModal
+        v-slot="{ close }"
+        v-bind="props"
+        ref="$modal"
+        :persistent
+    >
+        <HeadlessModalOverlay class="fixed inset-0 bg-gray-500/75" />
+
+        <HeadlessModalContent :class="renderedWrapperClass">
+            <div v-if="!persistent && dismissable" class="absolute top-0 right-0 hidden pt-1.5 pr-1.5 sm:block">
+                <Button variant="ghost" size="icon" @click="close()">
+                    <span class="sr-only">{{ $td('ui.close', 'Close') }}</span>
+                    <IconClose class="size-3 text-gray-400" />
+                </Button>
+            </div>
+
+            <HeadlessModalTitle v-if="title" class="text-base font-semibold text-gray-900">
+                <Markdown :text="title" inline />
+            </HeadlessModalTitle>
+
+            <div :class="renderedContentClass">
+                <slot :close />
+            </div>
+        </HeadlessModalContent>
+    </HeadlessModal>
+</template>
+
+<script setup lang="ts">
+import IconClose from '~icons/zondicons/close';
+
+import { computed, useTemplateRef } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import HeadlessModal from '@aerogel/core/components/headless/HeadlessModal.vue';
+import HeadlessModalContent from '@aerogel/core/components/headless/HeadlessModalContent.vue';
+import HeadlessModalOverlay from '@aerogel/core/components/headless/HeadlessModalOverlay.vue';
+import HeadlessModalTitle from '@aerogel/core/components/headless/HeadlessModalTitle.vue';
+import { classes } from '@aerogel/core/components/utils';
+import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
+
+const {
+    class: contentClass = '',
+    dismissable = true,
+    wrapperClass = '',
+    title,
+    persistent,
+    ...props
+} = defineProps<
+    ModalProps & {
+        dismissable?: boolean;
+        wrapperClass?: HTMLAttributes['class'];
+        class?: HTMLAttributes['class'];
+    }
+>();
+
+const $modal = useTemplateRef('$modal');
+const renderedContentClass = computed(() => classes({ 'mt-2': title }, contentClass));
+const renderedWrapperClass = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl sm:max-w-lg',
+        wrapperClass,
+    ));
+
+defineSlots<ModalSlots>();
+defineExpose<ModalExpose>({ close: async () => $modal.value?.close() });
+</script>

package/src/components/ui/ModalContext.vue

@@ -0,0 +1,30 @@
+<template>
+    <component :is="modal.component" v-bind="modalProperties" />
+</template>
+
+<script setup lang="ts">
+import { computed, provide, toRef, unref } from 'vue';
+
+import type { UIModal, UIModalContext } from '@aerogel/core/ui/UI.state';
+import type { AcceptRefs } from '@aerogel/core/utils/vue';
+
+const props = defineProps<{
+    modal: UIModal;
+    childIndex?: number;
+}>();
+
+const modalProperties = computed(() => {
+    const properties = {} as typeof props.modal.properties;
+
+    for (const property in props.modal.properties) {
+        properties[property] = unref(props.modal.properties[property]);
+    }
+
+    return properties;
+});
+
+provide<AcceptRefs<UIModalContext>>('modal', {
+    modal: toRef(props, 'modal'),
+    childIndex: toRef(props, 'childIndex'),
+});
+</script>

package/src/components/ui/ProgressBar.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
+        <div :class="filledClasses" :style="`transform:translateX(-${(1 - renderedProgress) * 100}%)`" />
+        <span class="sr-only">
+            {{
+                $td('ui.progress', '{progress}% complete', {
+                    progress: renderedProgress * 100,
+                })
+            }}
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue';
+
+import { classes } from '@aerogel/core/components/utils';
+import type Job from '@aerogel/core/jobs/Job';
+
+const { filledClass, progress, job } = defineProps<{
+    filledClass?: string;
+    progress?: number;
+    job?: Job;
+}>();
+
+let cleanup: Function | undefined;
+const jobProgress = ref(0);
+const filledClasses = computed(() =>
+    classes('size-full transition-transform duration-500 rounded-r-full ease-linear bg-primary', filledClass));
+const renderedProgress = computed(() => {
+    if (typeof progress === 'number') {
+        return progress;
+    }
+
+    return jobProgress.value;
+});
+
+watch(
+    () => job,
+    () => {
+        cleanup?.();
+
+        jobProgress.value = job?.progress ?? 0;
+        cleanup = job?.listeners.add({ onUpdated: (value) => (jobProgress.value = value) });
+    },
+    { immediate: true },
+);
+
+onUnmounted(() => cleanup?.());
+</script>

package/src/components/ui/PromptModal.vue

@@ -0,0 +1,35 @@
+<template>
+    <Modal v-slot="{ close }" :title persistent>
+        <Form :form @submit="close(form.draft)">
+            <Markdown :text="message" />
+            <Input
+                name="draft"
+                class="mt-2"
+                :placeholder
+                :label
+            />
+
+            <div class="mt-4 flex flex-row-reverse gap-2">
+                <Button :variant="acceptVariant" submit>
+                    {{ renderedAcceptText }}
+                </Button>
+                <Button :variant="cancelVariant" @click="close(false)">
+                    {{ renderedCancelText }}
+                </Button>
+            </div>
+        </Form>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Form from '@aerogel/core/components/ui/Form.vue';
+import Input from '@aerogel/core/components/ui/Input.vue';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import { usePromptModal } from '@aerogel/core/components/contracts/PromptModal';
+import type { PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
+
+const { cancelVariant = 'secondary', ...props } = defineProps<PromptModalProps>();
+const { form, renderedAcceptText, renderedCancelText } = usePromptModal(props);
+</script>

package/src/components/ui/Select.vue

@@ -0,0 +1,21 @@
+<template>
+    <HeadlessSelect v-bind="$props" @update:model-value="$emit('update:modelValue', $event)">
+        <SelectLabel />
+        <slot>
+            <SelectTrigger />
+            <SelectOptions />
+        </slot>
+    </HeadlessSelect>
+</template>
+
+<script setup lang="ts">
+import HeadlessSelect from '@aerogel/core/components/headless/HeadlessSelect.vue';
+import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
+
+import SelectLabel from './SelectLabel.vue';
+import SelectOptions from './SelectOptions.vue';
+import SelectTrigger from './SelectTrigger.vue';
+
+defineProps<SelectProps>();
+defineEmits<SelectEmits>();
+</script>

package/src/components/ui/SelectLabel.vue

@@ -0,0 +1,10 @@
+<template>
+    <HeadlessSelectLabel v-if="$slots.default" class="block text-sm leading-6 font-medium text-gray-900">
+        <slot />
+    </HeadlessSelectLabel>
+    <HeadlessSelectLabel v-else class="block text-sm leading-6 font-medium text-gray-900" />
+</template>
+
+<script setup lang="ts">
+import HeadlessSelectLabel from '@aerogel/core/components/headless/HeadlessSelectLabel.vue';
+</script>

package/src/components/ui/SelectOptions.vue

@@ -0,0 +1,31 @@
+<template>
+    <HeadlessSelectOptions
+        class="z-50 overflow-auto rounded-lg bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden"
+    >
+        <slot>
+            <HeadlessSelectOption
+                v-for="option of select?.options ?? []"
+                :key="option.key"
+                :value="option.value"
+                class="group p-1 outline-none"
+            >
+                <div
+                    class="relative flex max-w-[calc(100vw-2rem)] cursor-pointer items-center truncate rounded-md px-2 py-1 select-none *:truncate group-data-[highlighted]:bg-gray-100 group-data-[state=checked]:font-semibold group-data-[state=unchecked]:opacity-50"
+                >
+                    <span class="text-sm">
+                        {{ option.label }}
+                    </span>
+                </div>
+            </HeadlessSelectOption>
+        </slot>
+    </HeadlessSelectOptions>
+</template>
+
+<script setup lang="ts">
+import HeadlessSelectOption from '@aerogel/core/components/headless/HeadlessSelectOption.vue';
+import HeadlessSelectOptions from '@aerogel/core/components/headless/HeadlessSelectOptions.vue';
+import { injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const select = injectReactiveOrFail<SelectExpose>('select', '<SelectOptions> must be a child of a <Select>');
+</script>

package/src/components/ui/SelectTrigger.vue

@@ -0,0 +1,29 @@
+<template>
+    <HeadlessSelectTrigger :class="renderedClasses">
+        <HeadlessSelectValue class="col-start-1 row-start-1 truncate pr-2" />
+        <IconCheveronDown class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4" />
+    </HeadlessSelectTrigger>
+</template>
+
+<script setup lang="ts">
+import IconCheveronDown from '~icons/zondicons/cheveron-down';
+
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import HeadlessSelectTrigger from '@aerogel/core/components/headless/HeadlessSelectTrigger.vue';
+import HeadlessSelectValue from '@aerogel/core/components/headless/HeadlessSelectValue.vue';
+import { injectReactiveOrFail } from '@aerogel/core/utils';
+import { classes } from '@aerogel/core/components/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const { class: rootClasses } = defineProps<{ class?: HTMLAttributes['class'] }>();
+const select = injectReactiveOrFail<SelectExpose>('select', '<SelectTrigger> must be a child of a <Select>');
+const renderedClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'focus:outline-primary grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
+        { 'mt-1': select.label },
+        rootClasses,
+    ));
+</script>

package/src/components/ui/SettingsModal.vue

@@ -0,0 +1,51 @@
+<template>
+    <Modal :title="$td('settings.title', 'Settings')">
+        <Select
+            v-model="$lang.locale"
+            class="flex flex-col items-start md:flex-row"
+            as="div"
+            :options
+            :render-option="renderLocale"
+        >
+            <div class="grow">
+                <SelectLabel>
+                    {{ $td('settings.locale', 'Language') }}
+                </SelectLabel>
+                <Markdown
+                    lang-key="settings.localeDescription"
+                    lang-default="Choose the application's language."
+                    class="mt-1 text-sm text-gray-500"
+                />
+            </div>
+            <Button variant="ghost" :as="SelectTrigger" class="w-auto outline-none" />
+            <SelectOptions />
+        </Select>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import Aerogel from 'virtual:aerogel';
+
+import { computed } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import Select from '@aerogel/core/components/ui/Select.vue';
+import SelectLabel from '@aerogel/core/components/ui/SelectLabel.vue';
+import SelectTrigger from '@aerogel/core/components/ui/SelectTrigger.vue';
+import SelectOptions from '@aerogel/core/components/ui/SelectOptions.vue';
+import { Lang, translateWithDefault } from '@aerogel/core/lang';
+
+const browserLocale = Lang.getBrowserLocale();
+const options = computed(() => [null, ...Lang.locales]);
+
+function renderLocale(locale: string | null): string {
+    return (
+        (locale && Aerogel.locales[locale]) ??
+        translateWithDefault('settings.localeDefault', '{locale} (default)', {
+            locale: Aerogel.locales[browserLocale] ?? browserLocale,
+        })
+    );
+}
+</script>

package/src/components/{lib/AGStartupCrash.vue → ui/StartupCrash.vue}

@@ -1,10 +1,10 @@
 <template>
-    <div class="grid flex-grow place-items-center">
+    <div class="grid grow place-items-center">
         <div class="flex flex-col items-center space-y-6 p-8">
             <h1 class="mt-2 text-center text-4xl font-medium text-red-600">
                 {{ $td('startupCrash.title', 'Something went wrong!') }}
             </h1>
-            <AGMarkdown
+            <Markdown
                 :text="
                     $td(
                         'startupCrash.message',
@@ -14,18 +14,18 @@
                 class="mt-4 text-center"
             />
             <div class="mt-4 flex flex-col space-y-4">
-                <AGButton color="danger" @click="$app.reload()">
+                <Button variant="danger" @click="$app.reload()">
                     {{ $td('startupCrash.reload', 'Try again') }}
-                </AGButton>
-                <AGButton color="danger" @click="$errors.inspect($errors.startupErrors)">
+                </Button>
+                <Button variant="danger" @click="$errors.inspect($errors.startupErrors)">
                     {{ $td('startupCrash.inspect', 'View error details') }}
-                </AGButton>
+                </Button>
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import AGMarkdown from './AGMarkdown.vue';
-import AGButton from '../forms/AGButton.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
 </script>

package/src/components/ui/Toast.vue

@@ -0,0 +1,42 @@
+<template>
+    <HeadlessToast :class="renderedClasses">
+        <Markdown v-if="message" :text="message" inline />
+
+        <Button
+            v-for="(action, key) of actions"
+            :key
+            :action
+            :variant
+            :as="HeadlessToastAction"
+        />
+    </HeadlessToast>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import HeadlessToast from '@aerogel/core/components/headless/HeadlessToast.vue';
+import HeadlessToastAction from '@aerogel/core/components/headless/HeadlessToastAction.vue';
+import { computedVariantClasses } from '@aerogel/core/components/utils';
+import type { ToastProps } from '@aerogel/core/components/contracts/Toast';
+import type { Variants } from '@aerogel/core/components/utils';
+
+const { class: baseClasses, variant = 'secondary' } = defineProps<ToastProps & { class?: HTMLAttributes['class'] }>();
+const renderedClasses = computedVariantClasses<Variants<Pick<ToastProps, 'variant'>>>(
+    { baseClasses, variant },
+    {
+        baseClasses: 'flex items-center gap-2 rounded-md p-2 ring-1 shadow-lg border-gray-200',
+        variants: {
+            variant: {
+                secondary: 'bg-gray-900 text-white ring-black',
+                danger: 'bg-red-50 text-red-900 ring-red-100',
+            },
+        },
+        defaultVariants: {
+            variant: 'secondary',
+        },
+    },
+);
+</script>

package/src/components/ui/index.ts

@@ -0,0 +1,27 @@
+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 ConfirmModal } from './ConfirmModal.vue';
+export { default as DropdownMenu } from './DropdownMenu.vue';
+export { default as EditableContent } from './EditableContent.vue';
+export { default as ErrorMessage } from './ErrorMessage.vue';
+export { default as ErrorReportModal } from './ErrorReportModal.vue';
+export { default as ErrorReportModalButtons } from './ErrorReportModalButtons.vue';
+export { default as ErrorReportModalTitle } from './ErrorReportModalTitle.vue';
+export { default as Form } from './Form.vue';
+export { default as Input } from './Input.vue';
+export { default as Link } from './Link.vue';
+export { default as LoadingModal } from './LoadingModal.vue';
+export { default as Markdown } from './Markdown.vue';
+export { default as Modal } from './Modal.vue';
+export { default as ModalContext } from './ModalContext.vue';
+export { default as ProgressBar } from './ProgressBar.vue';
+export { default as PromptModal } from './PromptModal.vue';
+export { default as Select } from './Select.vue';
+export { default as SelectLabel } from './SelectLabel.vue';
+export { default as SelectOptions } from './SelectOptions.vue';
+export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as SettingsModal } from './SettingsModal.vue';
+export { default as StartupCrash } from './StartupCrash.vue';
+export { default as Toast } from './Toast.vue';

package/src/components/utils.ts

@@ -0,0 +1,107 @@
+import clsx from 'clsx';
+import { computed, customRef, inject, onUnmounted, unref } from 'vue';
+import { cva } from 'class-variance-authority';
+import { isObject } from '@noeldemartin/utils';
+import { twMerge } from 'tailwind-merge';
+import type { ClassValue } from 'clsx';
+import type { ComputedRef, ExtractPropTypes, PropType, Ref, UnwrapNestedRefs } from 'vue';
+import type { GetClosureArgs, GetClosureResult, Nullable } from '@noeldemartin/utils';
+
+import type { HasElement } from '@aerogel/core/components/contracts/shared';
+import type { FormController } from '@aerogel/core/forms';
+
+export type CVAConfig<T> = NonNullable<GetClosureArgs<typeof cva<T>>[1]>;
+export type CVAProps<T> = NonNullable<GetClosureArgs<GetClosureResult<typeof cva<T>>>[0]>;
+export type RefsObject<T> = { [K in keyof T]: Ref<T[K]> | T[K] };
+export type Variants<T extends Record<string, string | boolean>> = Required<{
+    [K in keyof T]: Exclude<T[K], undefined> extends string
+        ? { [key in Exclude<T[K], undefined>]: string | null }
+        : { true: string | null; false: string | null };
+}>;
+
+export type ComponentPropDefinitions<T> = {
+    [K in keyof T]: {
+        type?: PropType<T[K]>;
+        default: T[K] | (() => T[K]) | null;
+    };
+};
+
+export type PickComponentProps<TValues, TDefinitions> = {
+    [K in keyof TValues]: K extends keyof TDefinitions ? TValues[K] : never;
+};
+
+export function computedVariantClasses<T>(
+    value: RefsObject<{ baseClasses?: string } & CVAProps<T>>,
+    config: { baseClasses?: string } & CVAConfig<T>,
+): ComputedRef<string> {
+    return computed(() => {
+        const { baseClasses: valueBaseClasses, ...valueRefs } = value;
+        const { baseClasses: configBaseClasses, ...configs } = config;
+        const variants = cva(configBaseClasses, configs as CVAConfig<T>);
+        const values = Object.entries(valueRefs).reduce((extractedValues, [name, valueRef]) => {
+            extractedValues[name as keyof CVAProps<T>] = unref(valueRef);
+
+            return extractedValues;
+        }, {} as CVAProps<T>);
+
+        return classes(variants(values), unref(valueBaseClasses));
+    });
+}
+
+export function classes(...inputs: ClassValue[]): string {
+    return twMerge(clsx(inputs));
+}
+
+export function elementRef(): Ref<HTMLElement | undefined> {
+    return customRef((track, trigger) => {
+        let value: HTMLElement | undefined = undefined;
+
+        return {
+            get() {
+                track();
+
+                return value;
+            },
+            set(newValue) {
+                value = getElement(newValue);
+
+                trigger();
+            },
+        };
+    });
+}
+
+export function extractComponentProps<TDefinitions extends {}, TValues extends ExtractPropTypes<TDefinitions>>(
+    values: TValues,
+    definitions: TDefinitions,
+): PickComponentProps<TValues, TDefinitions> {
+    return Object.keys(definitions).reduce(
+        (extracted, prop) => {
+            extracted[prop] = values[prop as keyof TValues];
+
+            return extracted;
+        },
+        {} as Record<string, unknown>,
+    ) as PickComponentProps<TValues, TDefinitions>;
+}
+
+export function getElement(value: unknown): HTMLElement | undefined {
+    if (value instanceof HTMLElement) {
+        return value;
+    }
+
+    if (hasElement(value)) {
+        return value.$el;
+    }
+}
+
+export function hasElement(value: unknown): value is UnwrapNestedRefs<HasElement> {
+    return isObject(value) && '$el' in value;
+}
+
+export function onFormFocus(input: { name: Nullable<string> }, listener: () => unknown): void {
+    const form = inject<FormController | null>('form', null);
+    const stop = form?.on('focus', (name) => input.name === name && listener());
+
+    onUnmounted(() => stop?.());
+}