@aerogel/core 0.0.0-next.9aa7c279868edbedbcee075aef52212597d803fb → 0.0.0-next.9d1e54cc195274e9dd7d57a73fcb8a9a51927dcb

package/src/ui/UI.ts

@@ -119,7 +119,7 @@ export class UIService extends Service {
             };
         };
 
-        this.openModal(this.requireComponent('alert-modal'), getProperties());
+        this.modal(this.requireComponent('alert-modal'), getProperties());
     }
 
     /* eslint-disable max-len */
@@ -152,9 +152,7 @@ export class UIService extends Service {
         };
 
         const properties = getProperties();
-        const modal = await this.openModal(this.requireComponent('confirm-modal'), properties);
-        const result = await modal.beforeClose;
-
+        const result = await this.modalForm(this.requireComponent('confirm-modal'), properties);
         const confirmed = typeof result === 'object' ? result[0] : (result ?? false);
         const checkboxes =
             typeof result === 'object'
@@ -206,8 +204,7 @@ export class UIService extends Service {
             } as PromptModalProps;
         };
 
-        const modal = await this.openModal(this.requireComponent('prompt-modal'), getProperties());
-        const rawResult = await modal.beforeClose;
+        const rawResult = await this.modalForm(this.requireComponent('prompt-modal'), getProperties());
         const result = trim && typeof rawResult === 'string' ? rawResult?.trim() : rawResult;
 
         return result ?? null;
@@ -240,7 +237,7 @@ export class UIService extends Service {
         };
 
         const { operationPromise, props } = processArgs();
-        const modal = await this.openModal(this.requireComponent('loading-modal'), props);
+        const modal = await this.modal(this.requireComponent('loading-modal'), props);
 
         try {
             const result = await operationPromise;
@@ -264,16 +261,13 @@ export class UIService extends Service {
         this.setState('toasts', this.toasts.concat(toast));
     }
 
-    public openModal<T extends Component>(
+    public modal<T extends Component>(
         ...args: {} extends ComponentProps<T>
             ? [component: T, props?: AcceptRefs<ComponentProps<T>>]
             : [component: T, props: AcceptRefs<ComponentProps<T>>]
     ): Promise<UIModal<ModalResult<T>>>;
 
-    public async openModal<T extends Component>(
-        component: T,
-        props?: ComponentProps<T>,
-    ): Promise<UIModal<ModalResult<T>>> {
+    public async modal<T extends Component>(component: T, props?: ComponentProps<T>): Promise<UIModal<ModalResult<T>>> {
         const id = uuid();
         const callbacks: Partial<ModalCallbacks<ModalResult<T>>> = {};
         const modal: UIModal<ModalResult<T>> = {
@@ -295,6 +289,22 @@ export class UIService extends Service {
         return modal;
     }
 
+    public modalForm<T extends Component>(
+        ...args: {} extends ComponentProps<T>
+            ? [component: T, props?: AcceptRefs<ComponentProps<T>>]
+            : [component: T, props: AcceptRefs<ComponentProps<T>>]
+    ): Promise<ModalResult<T> | undefined>;
+
+    public async modalForm<T extends Component>(
+        component: T,
+        props?: ComponentProps<T>,
+    ): Promise<ModalResult<T> | undefined> {
+        const modal = await this.modal<T>(component, props as ComponentProps<T>);
+        const result = await modal.beforeClose;
+
+        return result;
+    }
+
     public async closeModal(id: string, result?: unknown): Promise<void> {
         if (!App.isMounted()) {
             await this.removeModal(id, result);

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/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;
 }