@aerogel/core 0.0.0-next.8ae083000611b11799d37033e9a5250d0d07c324 → 0.0.0-next.8bd66d5f5e264650120ea3cc37519f2409c6cc39

package/src/components/ui/SelectLabel.vue

@@ -7,11 +7,15 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
 
 import HeadlessSelectLabel from '@aerogel/core/components/headless/HeadlessSelectLabel.vue';
 import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
 import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
 
+const { class: rootClasses } = defineProps<{ class?: HTMLAttributes['class'] }>();
+
 const select = injectReactiveOrFail<SelectExpose>('select', '<SelectLabel> must be a child of a <Select>');
-const renderedClasses = computed(() => classes('block text-sm leading-6 font-medium text-gray-900', select.labelClass));
+const renderedClasses = computed(() =>
+    classes('block text-sm leading-6 font-medium text-gray-900', select.labelClass, rootClasses));
 </script>

package/src/components/ui/Setting.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="mt-4 flex" :class="{ 'flex-col': layout === 'vertical' }">
+        <div class="flex-grow">
+            <h3 :id="titleId" class="text-base font-semibold">
+                {{ title }}
+            </h3>
+            <Markdown v-if="description" :text="description" class="mt-1 text-sm text-gray-500" />
+        </div>
+
+        <div :class="renderedRootClass">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import { classes } from '@aerogel/core/utils';
+
+const { layout = 'horizontal', class: rootClass } = defineProps<{
+    title: string;
+    titleId?: string;
+    description?: string;
+    class?: HTMLAttributes['class'];
+    layout?: 'vertical' | 'horizontal';
+}>();
+const renderedRootClass = computed(() => classes(rootClass, 'flex flex-col justify-center gap-1'));
+</script>

package/src/components/ui/Switch.vue

@@ -0,0 +1,11 @@
+<template>
+    <HeadlessSwitch
+        class="flex flex-row items-center gap-1"
+        input-class="disabled:opacity-50 disabled:cursor-not-allowed data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-gray-200 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focusdisabled:opacity-50 disabled:cursor-not-allowed :ring-2 focus:ring-primary-600 focus:ring-offset-2 focus:outline-hidden"
+        thumb-class="data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
+    />
+</template>
+
+<script setup lang="ts">
+import HeadlessSwitch from '@aerogel/core/components/headless/HeadlessSwitch.vue';
+</script>

package/src/components/ui/TextArea.vue

@@ -0,0 +1,56 @@
+<template>
+    <HeadlessInput
+        ref="$inputRef"
+        :label="label"
+        :class="rootClasses"
+        v-bind="props"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <HeadlessInputLabel class="block text-sm leading-6 font-medium text-gray-900" />
+        <div :class="renderedWrapperClasses">
+            <HeadlessInputTextArea v-bind="inputAttrs" :class="renderedInputClasses" />
+            <div v-if="$input?.errors" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                <IconExclamationSolid class="size-5 text-red-500" />
+            </div>
+        </div>
+        <HeadlessInputDescription class="mt-2 text-sm text-gray-600" />
+        <HeadlessInputError class="mt-2 text-sm text-red-600" />
+    </HeadlessInput>
+</template>
+
+<script setup lang="ts">
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
+
+import { computed, useTemplateRef } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import HeadlessInput from '@aerogel/core/components/headless/HeadlessInput.vue';
+import HeadlessInputLabel from '@aerogel/core/components/headless/HeadlessInputLabel.vue';
+import HeadlessInputTextArea from '@aerogel/core/components/headless/HeadlessInputTextArea.vue';
+import HeadlessInputDescription from '@aerogel/core/components/headless/HeadlessInputDescription.vue';
+import HeadlessInputError from '@aerogel/core/components/headless/HeadlessInputError.vue';
+import { classes } from '@aerogel/core/utils/classes';
+import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
+import type { InputEmits, InputProps } from '@aerogel/core/components/contracts/Input';
+
+defineOptions({ inheritAttrs: false });
+defineEmits<InputEmits>();
+const { label, inputClass, wrapperClass, ...props } = defineProps<
+    InputProps & { inputClass?: HTMLAttributes['class']; wrapperClass?: HTMLAttributes['class'] }
+>();
+const $input = useTemplateRef('$inputRef');
+const [inputAttrs, rootClasses] = useInputAttrs();
+const renderedWrapperClasses = computed(() =>
+    classes('relative rounded-md shadow-2xs', { 'mt-1': label }, wrapperClass));
+const renderedInputClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6',
+        {
+            'focus:ring-primary-600': !$input.value?.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !$input.value?.errors,
+            'pr-10 text-red-900 ring-red-900/10 placeholder:text-red-300 focus:ring-red-500': $input.value?.errors,
+        },
+        inputClass,
+    ));
+</script>

package/src/components/ui/Toast.vue

@@ -13,32 +13,34 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 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/utils/classes';
+import { variantClasses } from '@aerogel/core/utils/classes';
 import type { ToastExpose, ToastProps } from '@aerogel/core/components/contracts/Toast';
 import type { Variants } from '@aerogel/core/utils/classes';
 
 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',
+const renderedClasses = computed(() =>
+    variantClasses<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',
             },
         },
-        defaultVariants: {
-            variant: 'secondary',
-        },
-    },
-);
+    ));
 
 defineExpose<ToastExpose>();
 </script>

package/src/components/ui/index.ts

@@ -7,6 +7,8 @@ export { default as DropdownMenu } from './DropdownMenu.vue';
 export { default as DropdownMenuOption } from './DropdownMenuOption.vue';
 export { default as DropdownMenuOptions } from './DropdownMenuOptions.vue';
 export { default as EditableContent } from './EditableContent.vue';
+export { default as ErrorLogs } from './ErrorLogs.vue';
+export { default as ErrorLogsModal } from './ErrorLogsModal.vue';
 export { default as ErrorMessage } from './ErrorMessage.vue';
 export { default as ErrorReportModal } from './ErrorReportModal.vue';
 export { default as ErrorReportModalButtons } from './ErrorReportModalButtons.vue';
@@ -25,6 +27,9 @@ export { default as SelectLabel } from './SelectLabel.vue';
 export { default as SelectOption } from './SelectOption.vue';
 export { default as SelectOptions } from './SelectOptions.vue';
 export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as Setting } from './Setting.vue';
 export { default as SettingsModal } from './SettingsModal.vue';
 export { default as StartupCrash } from './StartupCrash.vue';
+export { default as Switch } from './Switch.vue';
+export { default as TextArea } from './TextArea.vue';
 export { default as Toast } from './Toast.vue';

package/src/directives/measure.ts

@@ -3,6 +3,15 @@ import { tap } from '@noeldemartin/utils';
 
 const resizeObservers: WeakMap<HTMLElement, ResizeObserver> = new WeakMap();
 
+export type MeasureDirectiveValue =
+    | MeasureDirectiveListener
+    | {
+          css?: boolean;
+          watch?: boolean;
+      };
+
+export type MeasureDirectiveModifiers = 'css' | 'watch';
+
 export interface ElementSize {
     width: number;
     height: number;
@@ -10,11 +19,8 @@ export interface ElementSize {
 
 export type MeasureDirectiveListener = (size: ElementSize) => unknown;
 
-export default defineDirective({
-    mounted(element: HTMLElement, { value }) {
-        // TODO replace with argument when typed properly
-        const modifiers = { css: true, watch: true };
-
+export default defineDirective<MeasureDirectiveValue, MeasureDirectiveModifiers>({
+    mounted(element: HTMLElement, { value, modifiers }) {
         const listener = typeof value === 'function' ? (value as MeasureDirectiveListener) : null;
         const update = () => {
             const sizes = element.getBoundingClientRect();

package/src/errors/Errors.ts

@@ -22,16 +22,23 @@ export class ErrorsService extends Service {
         this.enabled = false;
     }
 
-    public async inspect(error: ErrorSource | ErrorReport[]): Promise<void> {
-        const reports = Array.isArray(error) ? (error as ErrorReport[]) : [await this.createErrorReport(error)];
-
-        if (reports.length === 0) {
+    public async inspect(error: ErrorSource | ErrorReport, reports?: ErrorReport[]): Promise<void>;
+    public async inspect(reports: ErrorReport[]): Promise<void>;
+    public async inspect(errorOrReports: ErrorSource | ErrorReport[], _reports?: ErrorReport[]): Promise<void> {
+        if (Array.isArray(errorOrReports) && errorOrReports.length === 0) {
             UI.alert(translateWithDefault('errors.inspectEmpty', 'Nothing to inspect!'));
 
             return;
         }
 
-        UI.modal(UI.requireComponent('error-report-modal'), { reports });
+        const report = Array.isArray(errorOrReports)
+            ? (errorOrReports[0] as ErrorReport)
+            : this.isErrorReport(errorOrReports)
+                ? errorOrReports
+                : await this.createErrorReport(errorOrReports);
+        const reports = Array.isArray(errorOrReports) ? (errorOrReports as ErrorReport[]) : (_reports ?? [report]);
+
+        UI.modal(UI.requireComponent('error-report-modal'), { report, reports });
     }
 
     public async report(error: ErrorSource, message?: string): Promise<void> {
@@ -75,7 +82,7 @@ export class ErrorsService extends Service {
                     {
                         label: translateWithDefault('errors.viewDetails', 'View details'),
                         dismiss: true,
-                        click: () => UI.modal(UI.requireComponent('error-report-modal'), { reports: [report] }),
+                        click: () => UI.modal(UI.requireComponent('error-report-modal'), { report, reports: [report] }),
                     },
                 ],
             },
@@ -117,6 +124,10 @@ export class ErrorsService extends Service {
         }
     }
 
+    private isErrorReport(error: unknown): error is ErrorReport {
+        return isObject(error) && 'title' in error;
+    }
+
     private async createErrorReport(error: ErrorSource): Promise<ErrorReport> {
         if (typeof error === 'string') {
             return { title: error };

package/src/errors/index.ts

@@ -1,9 +1,11 @@
-import type { App } from 'vue';
+import type { App as AppInstance } from 'vue';
 
+import App from '@aerogel/core/services/App';
 import { bootServices } from '@aerogel/core/services';
 import { definePlugin } from '@aerogel/core/plugins';
 
 import Errors from './Errors';
+import settings from './settings';
 import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
 
 export * from './utils';
@@ -19,7 +21,7 @@ const frameworkHandler: ErrorHandler = (error) => {
     return true;
 };
 
-function setUpErrorHandler(app: App, baseHandler: ErrorHandler = () => false): void {
+function setUpErrorHandler(app: AppInstance, baseHandler: ErrorHandler = () => false): void {
     const errorHandler: ErrorHandler = (error) => baseHandler(error) || frameworkHandler(error);
 
     app.config.errorHandler = errorHandler;
@@ -34,6 +36,8 @@ export default definePlugin({
     async install(app, options) {
         setUpErrorHandler(app, options.handleError);
 
+        settings.forEach((setting) => App.addSetting(setting));
+
         await bootServices(app, services);
     },
 });

package/src/errors/settings/Debug.vue

@@ -0,0 +1,32 @@
+<template>
+    <Setting
+        title-id="debug-setting"
+        :title="$td('settings.debug', 'Debugging')"
+        :description="$td('settings.debugDescription', 'Enable debugging with [Eruda](https://eruda.liriliri.io/).')"
+    >
+        <Switch v-model="enabled" aria-labelledby="debug-setting" />
+    </Setting>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import type Eruda from 'eruda';
+
+import Setting from '@aerogel/core/components/ui/Setting.vue';
+import Switch from '@aerogel/core/components/ui/Switch.vue';
+
+let eruda: typeof Eruda | null = null;
+const enabled = ref(false);
+
+watchEffect(async () => {
+    if (!enabled.value) {
+        eruda?.destroy();
+
+        return;
+    }
+
+    eruda ??= (await import('eruda')).default;
+
+    eruda.init();
+});
+</script>

package/src/errors/settings/index.ts

@@ -0,0 +1,10 @@
+import { defineSettings } from '@aerogel/core/services';
+
+import Debug from './Debug.vue';
+
+export default defineSettings([
+    {
+        priority: 10,
+        component: Debug,
+    },
+]);

package/src/forms/FormController.ts

@@ -109,6 +109,10 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
         return this._fields[field]?.rules?.split('|') ?? [];
     }
 
+    public getFieldType<T extends keyof Fields>(field: T): FormFieldType | null {
+        return this._fields[field]?.type ?? null;
+    }
+
     public data(): FormData<Fields> {
         return { ...this._data };
     }

package/src/index.css

@@ -21,6 +21,9 @@
 
     --color-background: oklch(1 0 0);
     --color-links: var(--color-primary);
+
+    --breakpoint-content: var(--breakpoint-md);
+    --spacing-edge: 1rem;
 }
 
 .clickable {

package/src/lang/index.ts

@@ -4,8 +4,8 @@ import { definePlugin } from '@aerogel/core/plugins';
 
 import Lang from './Lang';
 import settings from './settings';
-import type { LangProvider } from './Lang';
 import { translate, translateWithDefault } from './utils';
+import type { LangProvider } from './Lang';
 
 export { Lang, translate, translateWithDefault };
 export type { LangProvider };

package/src/lang/settings/Language.vue

@@ -7,7 +7,7 @@
         :render-option="renderLocale"
     >
         <div class="grow">
-            <SelectLabel>
+            <SelectLabel class="text-base font-semibold">
                 {{ $td('settings.locale', 'Language') }}
             </SelectLabel>
             <Markdown

package/src/services/index.ts

@@ -1,4 +1,4 @@
-import type { App as VueApp } from 'vue';
+import type { App as AppInstance } from 'vue';
 
 import { definePlugin } from '@aerogel/core/plugins';
 import { isDevelopment, isTesting } from '@noeldemartin/utils';
@@ -30,7 +30,7 @@ export type DefaultServices = typeof defaultServices;
 
 export interface Services extends DefaultServices {}
 
-export async function bootServices(app: VueApp, services: Record<string, Service>): Promise<void> {
+export async function bootServices(app: AppInstance, services: Record<string, Service>): Promise<void> {
     await Promise.all(
         Object.entries(services).map(async ([name, service]) => {
             await service

package/src/testing/index.ts

@@ -2,10 +2,13 @@ import { isTesting } from '@noeldemartin/utils';
 import type { GetClosureArgs } from '@noeldemartin/utils';
 
 import Events from '@aerogel/core/services/Events';
+import { App } from '@aerogel/core/services';
 import { definePlugin } from '@aerogel/core/plugins';
+import type { Services } from '@aerogel/core/services';
 
 export interface AerogelTestingRuntime {
     on: (typeof Events)['on'];
+    service<T extends keyof Services>(name: T): Services[T] | null;
 }
 
 export default definePlugin({
@@ -16,6 +19,7 @@ export default definePlugin({
 
         globalThis.testingRuntime = {
             on: ((...args: GetClosureArgs<(typeof Events)['on']>) => Events.on(...args)) as (typeof Events)['on'],
+            service: (name) => App.service(name),
         };
     },
 });

package/src/ui/UI.ts

@@ -1,5 +1,5 @@
 import { after, facade, fail, isDevelopment, required, uuid } from '@noeldemartin/utils';
-import { markRaw, nextTick } from 'vue';
+import { markRaw, nextTick, unref } from 'vue';
 import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
 import type { Component } from 'vue';
 import type { ClosureArgs } from '@noeldemartin/utils';
@@ -64,6 +64,7 @@ export type LoadingOptions = AcceptRefs<{
     title?: string;
     message?: string;
     progress?: number;
+    delay?: number;
 }>;
 
 export interface ConfirmOptionsWithCheckboxes<T extends ConfirmModalCheckboxes = ConfirmModalCheckboxes>
@@ -218,7 +219,11 @@ export class UIService extends Service {
         operation?: Promise<T> | (() => T),
     ): Promise<T> {
         const processOperation = (o: Promise<T> | (() => T)) => (typeof o === 'function' ? Promise.resolve(o()) : o);
-        const processArgs = (): { operationPromise: Promise<T>; props?: AcceptRefs<LoadingModalProps> } => {
+        const processArgs = (): {
+            operationPromise: Promise<T>;
+            props?: AcceptRefs<LoadingModalProps>;
+            delay?: number;
+        } => {
             if (typeof operationOrMessageOrOptions === 'string') {
                 return {
                     props: { message: operationOrMessageOrOptions },
@@ -230,13 +235,24 @@ export class UIService extends Service {
                 return { operationPromise: processOperation(operationOrMessageOrOptions) };
             }
 
+            const { delay, ...props } = operationOrMessageOrOptions;
+
             return {
-                props: operationOrMessageOrOptions,
+                props,
+                delay: unref(delay),
                 operationPromise: processOperation(operation as Promise<T> | (() => T)),
             };
         };
 
-        const { operationPromise, props } = processArgs();
+        let delayed = false;
+        const { operationPromise, props, delay } = processArgs();
+
+        delay && (await Promise.race([after({ ms: delay }).then(() => (delayed = true)), operationPromise]));
+
+        if (delay && !delayed) {
+            return operationPromise;
+        }
+
         const modal = await this.modal(this.requireComponent('loading-modal'), props);
 
         try {

package/src/utils/classes.ts

@@ -1,14 +1,13 @@
 import clsx from 'clsx';
-import { computed, unref } from 'vue';
+import { unref } from 'vue';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 import type { ClassValue } from 'clsx';
-import type { ComputedRef, PropType, Ref } from 'vue';
+import type { PropType } from 'vue';
 import type { GetClosureArgs, GetClosureResult } from '@noeldemartin/utils';
 
 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 }
@@ -26,22 +25,15 @@ 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>>,
+export function variantClasses<T>(
+    value: { 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);
+): string {
+    const { baseClasses: valueBaseClasses, ...values } = value;
+    const { baseClasses: configBaseClasses, ...configs } = config;
+    const variants = cva(configBaseClasses, configs as CVAConfig<T>);
 
-            return extractedValues;
-        }, {} as CVAProps<T>);
-
-        return classes(variants(values), unref(valueBaseClasses));
-    });
+    return classes(variants(values as CVAProps<T>), unref(valueBaseClasses));
 }
 
 export function classes(...inputs: ClassValue[]): string {

package/src/utils/markdown.ts

@@ -2,10 +2,18 @@ import DOMPurify from 'dompurify';
 import { stringMatchAll, tap } from '@noeldemartin/utils';
 import { Renderer, marked } from 'marked';
 
+let router: MarkdownRouter | null = null;
+
 function makeRenderer(): Renderer {
     return tap(new Renderer(), (renderer) => {
         renderer.link = function(link) {
-            return Renderer.prototype.link.apply(this, [link]).replace('<a', '<a target="_blank"');
+            const defaultLink = Renderer.prototype.link.apply(this, [link]);
+
+            if (!link.href.startsWith('#')) {
+                return defaultLink.replace('<a', '<a target="_blank"');
+            }
+
+            return defaultLink;
         };
     });
 }
@@ -20,11 +28,37 @@ function renderActionLinks(html: string): string {
     return html;
 }
 
+function renderRouteLinks(html: string): string {
+    const matches = stringMatchAll<3>(html, /<a[^>]*href="#route:([^"]+)"[^>]*>([^<]+)<\/a>/g);
+
+    for (const [link, route, text] of matches) {
+        const url = router?.resolve(route) ?? route;
+
+        html = html.replace(link, `<a data-markdown-route="${route}" href="${url}">${text}</a>`);
+    }
+
+    return html;
+}
+
+export interface MarkdownRouter {
+    resolve(route: string): string;
+    visit(route: string): Promise<void>;
+}
+
+export function getMarkdownRouter(): MarkdownRouter | null {
+    return router;
+}
+
+export function setMarkdownRouter(markdownRouter: MarkdownRouter): void {
+    router = markdownRouter;
+}
+
 export function renderMarkdown(markdown: string): string {
     let html = marked(markdown, { renderer: makeRenderer(), async: false });
 
     html = safeHtml(html);
     html = renderActionLinks(html);
+    html = renderRouteLinks(html);
 
     return html;
 }

package/src/utils/vue.ts

@@ -12,7 +12,12 @@ function renderVNodeAttrs(node: VNode): string {
     }, '');
 }
 
-export function defineDirective(directive: Directive): Directive {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function defineDirective<TValue = any, TModifiers extends string = string>(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    directive: Directive<any, TValue, TModifiers>,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): Directive<any, TValue, TModifiers> {
     return directive;
 }