@milaboratories/uikit 2.10.14 → 2.10.16

package/src/composition/filters/types.ts

@@ -1,4 +1,10 @@
-import type { FilterSpec, FilterSpecOfType, FilterSpecType, SimplifiedPColumnSpec, SUniversalPColumnId } from '@platforma-sdk/model';
+import type {
+  FilterSpec,
+  FilterSpecOfType,
+  FilterSpecType,
+  SimplifiedPColumnSpec,
+  SUniversalPColumnId,
+} from "@platforma-sdk/model";
 
 /** Metadata about a single field in FilterSpec */
 export type FilterSpecTypeField<V> = {
@@ -8,11 +14,13 @@ export type FilterSpecTypeField<V> = {
 };
 
 /** Converts each field in FilterSpec to FilterSpecTypeField */
-export type FilterSpecTypeFieldRecord<T extends FilterSpec> = { [K in keyof T]: FilterSpecTypeField<T[K]>; };
+export type FilterSpecTypeFieldRecord<T extends FilterSpec> = {
+  [K in keyof T]: FilterSpecTypeField<T[K]>;
+};
 
 /** Extracts FilterSpecOfType from FilterSpecType */
 export type FilterSpecFormField<T extends FilterSpec> = {
-  [K in keyof T]: FilterSpecTypeField<T[K]>
+  [K in keyof T]: FilterSpecTypeField<T[K]>;
 };
 
 /** Metadata about all supported filter types */
@@ -21,24 +29,39 @@ export type FilterSpecMetadataRecord<T extends FilterSpecType> = {
     label: string;
     labelNot?: string;
     form: FilterSpecFormField<FilterSpecOfType<P>>;
-    supportedFor: (spec1: SimplifiedPColumnSpec, spec2: SimplifiedPColumnSpec | undefined) => boolean;
-  }
+    supportedFor: (
+      spec1: SimplifiedPColumnSpec,
+      spec2: SimplifiedPColumnSpec | undefined,
+    ) => boolean;
+  };
 };
 
 /** Converts FilterSpecType to a literal string representing the type */
-export type FilterSpecTypeToLiteral<T> =
-    [T] extends [FilterSpecType] ? 'FilterType' :
-        [T] extends [SUniversalPColumnId] ? 'SUniversalPColumnId' :
-            [T] extends [number] ? 'number' :
-                [T] extends [number | undefined] ? 'number?' :
-                    [T] extends [string] ? 'string' :
-                        [T] extends [string | undefined] ? 'string?' :
-                            [T] extends [boolean] ? 'boolean' :
-                                [T] extends [boolean | undefined] ? 'boolean?' :
-                                    [T] extends [unknown[]] ? 'unknown[]' :
-                                    // this is special
-                                      T extends number ? 'number' :
-                                        T extends string ? 'string' :
-                                          T extends boolean ? 'boolean' :
-                                            T extends Record<string, unknown> ? 'form' :
-                                              'unknown';
+export type FilterSpecTypeToLiteral<T> = [T] extends [FilterSpecType]
+  ? "FilterType"
+  : [T] extends [SUniversalPColumnId]
+    ? "SUniversalPColumnId"
+    : [T] extends [number]
+      ? "number"
+      : [T] extends [number | undefined]
+        ? "number?"
+        : [T] extends [string]
+          ? "string"
+          : [T] extends [string | undefined]
+            ? "string?"
+            : [T] extends [boolean]
+              ? "boolean"
+              : [T] extends [boolean | undefined]
+                ? "boolean?"
+                : [T] extends [unknown[]]
+                  ? "unknown[]"
+                  : // this is special
+                    T extends number
+                    ? "number"
+                    : T extends string
+                      ? "string"
+                      : T extends boolean
+                        ? "boolean"
+                        : T extends Record<string, unknown>
+                          ? "form"
+                          : "unknown";

package/src/composition/useClickOutside.ts

@@ -1,11 +1,11 @@
-import type { Ref } from 'vue';
-import { useEventListener } from './useEventListener';
-import { flatValue } from '../helpers/functions';
+import type { Ref } from "vue";
+import { useEventListener } from "./useEventListener";
+import { flatValue } from "../helpers/functions";
 
 type HtmlRef = Ref<HTMLElement | undefined>;
 
 export function useClickOutside(el: HtmlRef | HtmlRef[], cb: () => void) {
-  useEventListener(document, 'click', (event) => {
+  useEventListener(document, "click", (event) => {
     if (!document.contains(event.target as Node)) {
       return;
     }

package/src/composition/useComponentProp.ts

@@ -1,5 +1,5 @@
-import type { InferComponentProps } from '../types';
-import { computed, type Component, type ComputedRef } from 'vue';
+import type { InferComponentProps } from "../types";
+import { computed, type Component, type ComputedRef } from "vue";
 
 /**
  * A utility function that creates a reactive computed property
@@ -31,6 +31,8 @@ import { computed, type Component, type ComputedRef } from 'vue';
  * console.log(propValue.value); // Outputs: 'example'
  * ```
  */
-export function useComponentProp<C extends Component, P extends keyof InferComponentProps<C>>(cb: () => InferComponentProps<C>[P]): ComputedRef<InferComponentProps<C>[P]> {
+export function useComponentProp<C extends Component, P extends keyof InferComponentProps<C>>(
+  cb: () => InferComponentProps<C>[P],
+): ComputedRef<InferComponentProps<C>[P]> {
   return computed(cb);
 }

package/src/composition/useConfirm.ts

@@ -1,5 +1,5 @@
-import { h, render } from 'vue';
-import PlConfirmDialog from '../components/PlConfirmDialog.vue';
+import { h, render } from "vue";
+import PlConfirmDialog from "../components/PlConfirmDialog.vue";
 
 export type ConfirmProps = {
   title: string;
@@ -15,13 +15,13 @@ export function useConfirm(props: ConfirmProps) {
         opened: true,
         title: props.title,
         message: props.message,
-        confirmLabel: props.confirmLabel ?? 'Confirm',
-        cancelLabel: props.cancelLabel ?? 'Cancel',
+        confirmLabel: props.confirmLabel ?? "Confirm",
+        cancelLabel: props.cancelLabel ?? "Cancel",
         onConfirm: () => finish(true),
         onCancel: () => finish(false),
       });
 
-      const mountPoint = document.createElement('div');
+      const mountPoint = document.createElement("div");
       document.body.appendChild(mountPoint);
       render(vnode, mountPoint);
 

package/src/composition/useDraggable.ts

@@ -1,44 +1,47 @@
-import type { MaybeRef } from '../types';
-import { onMounted, onUnmounted, unref } from 'vue';
+import type { MaybeRef } from "../types";
+import { onMounted, onUnmounted, unref } from "vue";
 
 type Position = {
   x: number;
   y: number;
 };
 
-export function useDraggable<T extends HTMLElement>(elRef: MaybeRef<T | undefined>, cb: (ev: MouseEvent) => void) {
+export function useDraggable<T extends HTMLElement>(
+  elRef: MaybeRef<T | undefined>,
+  cb: (ev: MouseEvent) => void,
+) {
   function onMove(down: Position, ev: MouseEvent) {
     const el = unref(elRef);
     if (!el) {
       return;
     }
     const translate = `translate(${ev.x - down.x}px, ${ev.y - down.y}px)`;
-    el.style.setProperty('transform', translate);
+    el.style.setProperty("transform", translate);
     cb(ev);
   }
 
   function onDown(down: Position) {
     const listener = (e: MouseEvent) => onMove(down, e);
 
-    document.addEventListener('mousemove', listener);
+    document.addEventListener("mousemove", listener);
 
     document.addEventListener(
-      'mouseup',
+      "mouseup",
       () => {
         const el = unref(elRef);
 
-        document.removeEventListener('mousemove', listener);
+        document.removeEventListener("mousemove", listener);
 
         if (!el) {
           return;
         }
 
-        el.style.setProperty('transition', 'all .3s ease-in-out');
+        el.style.setProperty("transition", "all .3s ease-in-out");
 
-        el.style.removeProperty('transform');
+        el.style.removeProperty("transform");
 
-        el.addEventListener('transitionend', () => {
-          el.style.removeProperty('transition');
+        el.addEventListener("transitionend", () => {
+          el.style.removeProperty("transition");
         });
       },
       { once: true },
@@ -46,11 +49,11 @@ export function useDraggable<T extends HTMLElement>(elRef: MaybeRef<T | undefine
   }
 
   function init() {
-    unref(elRef)?.addEventListener('mousedown', onDown);
+    unref(elRef)?.addEventListener("mousedown", onDown);
   }
 
   function clear() {
-    unref(elRef)?.removeEventListener('mousedown', onDown);
+    unref(elRef)?.removeEventListener("mousedown", onDown);
   }
 
   onMounted(init);

package/src/composition/useEventListener.ts

@@ -1,14 +1,22 @@
-import { onMounted, onUnmounted, unref } from 'vue';
-import type { MaybeRef } from '../types';
+import { onMounted, onUnmounted, unref } from "vue";
+import type { MaybeRef } from "../types";
 
 type EventMap = WindowEventMap & HTMLElementEventMap & { adjust: Event };
 
-export function useEventListener<T extends EventTarget, E extends EventMap[K], K extends keyof EventMap>(
+export function useEventListener<
+  T extends EventTarget,
+  E extends EventMap[K],
+  K extends keyof EventMap,
+>(
   target: MaybeRef<T | undefined>,
   type: K,
   callback: (this: T, evt: E) => void,
   options?: AddEventListenerOptions | boolean,
 ) {
-  onMounted(() => unref(target)?.addEventListener(type, callback as (this: T, evt: Event) => void, options));
-  onUnmounted(() => unref(target)?.removeEventListener(type, callback as (this: T, evt: Event) => void, options));
+  onMounted(() =>
+    unref(target)?.addEventListener(type, callback as (this: T, evt: Event) => void, options),
+  );
+  onUnmounted(() =>
+    unref(target)?.removeEventListener(type, callback as (this: T, evt: Event) => void, options),
+  );
 }

package/src/composition/useFilteredList.ts

@@ -1,10 +1,13 @@
-import type { ComputedRef, Ref } from 'vue';
-import { computed } from 'vue';
-import type { ListOption } from '../types';
-import { normalizeListOptions } from '../helpers/utils';
-import type { ListOptionBase } from '@platforma-sdk/model';
+import type { ComputedRef, Ref } from "vue";
+import { computed } from "vue";
+import type { ListOption } from "../types";
+import { normalizeListOptions } from "../helpers/utils";
+import type { ListOptionBase } from "@platforma-sdk/model";
 
-export function useFilteredList<V = unknown>(optionsRef: Ref<ListOption<V>[]>, searchPhrase: Ref<string>): ComputedRef<Readonly<ListOptionBase<V>[]>> {
+export function useFilteredList<V = unknown>(
+  optionsRef: Ref<ListOption<V>[]>,
+  searchPhrase: Ref<string>,
+): ComputedRef<Readonly<ListOptionBase<V>[]>> {
   return computed(() => {
     const options = normalizeListOptions(optionsRef.value);
     if (searchPhrase.value) {

package/src/composition/useFormState.ts

@@ -1,6 +1,6 @@
-import type { Ref, UnwrapRef } from 'vue';
-import { reactive, watch } from 'vue';
-import { objects } from '@milaboratories/helpers';
+import type { Ref, UnwrapRef } from "vue";
+import { reactive, watch } from "vue";
+import { objects } from "@milaboratories/helpers";
 
 export function useFormState<Source, D extends Record<string, unknown>>(
   source: Ref<Source>,

package/src/composition/useHover.ts

@@ -1,14 +1,17 @@
-import type { Ref } from 'vue';
-import { ref } from 'vue';
-import { useEventListener } from './useEventListener';
-import type { MaybeRef } from '../types';
+import type { Ref } from "vue";
+import { ref } from "vue";
+import { useEventListener } from "./useEventListener";
+import type { MaybeRef } from "../types";
 
 export interface UseElementHoverOptions {
   delayEnter?: number;
   delayLeave?: number;
 }
 
-export function useHover(el: MaybeRef<EventTarget | undefined>, options: UseElementHoverOptions = {}): Ref<boolean> {
+export function useHover(
+  el: MaybeRef<EventTarget | undefined>,
+  options: UseElementHoverOptions = {},
+): Ref<boolean> {
   const { delayEnter = 0, delayLeave = 0 } = options;
 
   const isHovered = ref(false);
@@ -28,8 +31,8 @@ export function useHover(el: MaybeRef<EventTarget | undefined>, options: UseElem
 
   if (!window) return isHovered;
 
-  useEventListener(el, 'mouseenter', () => toggle(true));
-  useEventListener(el, 'mouseleave', () => toggle(false));
+  useEventListener(el, "mouseenter", () => toggle(true));
+  useEventListener(el, "mouseleave", () => toggle(false));
 
   return isHovered;
 }

package/src/composition/useInterval.ts

@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted } from "vue";
 
 export function useInterval(update: () => void, ms: number) {
   let interval: ReturnType<typeof setInterval>;

package/src/composition/useLocalStorage.ts

@@ -1,6 +1,6 @@
-import type { Ref } from 'vue';
-import { ref, watch } from 'vue';
-import { notEmpty } from '@milaboratories/helpers';
+import type { Ref } from "vue";
+import { ref, watch } from "vue";
+import { notEmpty } from "@milaboratories/helpers";
 
 const $store = new Map<string, Ref<string | null>>();
 
@@ -9,7 +9,7 @@ function getValue(key: string) {
     $store.set(key, ref(localStorage.getItem(key)));
   }
 
-  return notEmpty($store.get(key), '...');
+  return notEmpty($store.get(key), "...");
 }
 
 function setValue(key: string, v: string | null | undefined) {

package/src/composition/useMouse.ts

@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, reactive } from 'vue';
+import { onMounted, onUnmounted, reactive } from "vue";
 
 export function useMouse() {
   const pos = reactive({
@@ -11,8 +11,8 @@ export function useMouse() {
     pos.y = event.pageY;
   }
 
-  onMounted(() => window.addEventListener('mousemove', update));
-  onUnmounted(() => window.removeEventListener('mousemove', update));
+  onMounted(() => window.addEventListener("mousemove", update));
+  onUnmounted(() => window.removeEventListener("mousemove", update));
 
   return pos;
 }

package/src/composition/useMouseCapture.ts

@@ -1,6 +1,6 @@
-import type { MaybeRef } from '../types';
-import { unref } from 'vue';
-import { useEventListener } from './useEventListener';
+import type { MaybeRef } from "../types";
+import { unref } from "vue";
+import { useEventListener } from "./useEventListener";
 
 type CustomEvent = {
   x: number;
@@ -16,7 +16,10 @@ type CaptureState = {
   y: number;
 };
 
-export function useMouseCapture<T extends HTMLElement>(elRef: MaybeRef<T | undefined>, cb: (ev: CustomEvent, state: CaptureState) => void) {
+export function useMouseCapture<T extends HTMLElement>(
+  elRef: MaybeRef<T | undefined>,
+  cb: (ev: CustomEvent, state: CaptureState) => void,
+) {
   const state: CaptureState = {
     el: undefined as HTMLElement | undefined,
     x: 0,
@@ -30,7 +33,7 @@ export function useMouseCapture<T extends HTMLElement>(elRef: MaybeRef<T | undef
     dy: ev.y - state.y,
   });
 
-  useEventListener(document, 'mousedown', (ev) => {
+  useEventListener(document, "mousedown", (ev) => {
     if (ev.target === unref(elRef)) {
       // disable selection when moving
       if (ev.stopPropagation) ev.stopPropagation();
@@ -41,7 +44,7 @@ export function useMouseCapture<T extends HTMLElement>(elRef: MaybeRef<T | undef
     }
   });
 
-  useEventListener(document, 'mouseup', (ev) => {
+  useEventListener(document, "mouseup", (ev) => {
     if (!state.el) {
       return;
     }
@@ -57,7 +60,7 @@ export function useMouseCapture<T extends HTMLElement>(elRef: MaybeRef<T | undef
     );
   });
 
-  useEventListener(document, 'mousemove', (ev) => {
+  useEventListener(document, "mousemove", (ev) => {
     if (state.el) {
       cb(createCustom(ev), state);
     }

package/src/composition/useNotificationPosition.ts

@@ -1,9 +1,9 @@
-import { type Ref, ref } from 'vue';
-import { call } from '../helpers/utils';
-import { useElementPosition } from './usePosition';
+import { type Ref, ref } from "vue";
+import { call } from "../helpers/utils";
+import { useElementPosition } from "./usePosition";
 
 export function useNotificationPosition(el: Ref<HTMLElement | undefined>) {
-  const style = ref('');
+  const style = ref("");
 
   useElementPosition(el, (pos) => {
     style.value = call(() => {

package/src/composition/usePollingQuery.ts

@@ -1,12 +1,12 @@
-import type { MaybeRef, WatchSource } from 'vue';
-import { onScopeDispose, readonly, ref, shallowRef, toValue, watch } from 'vue';
+import type { MaybeRef, WatchSource } from "vue";
+import { onScopeDispose, readonly, ref, shallowRef, toValue, watch } from "vue";
 
-type AbortReason = 'args' | 'pause' | 'dispose';
+type AbortReason = "args" | "pause" | "dispose";
 
 type PollingData<Result> =
-  | { status: 'idle' }
-  | { status: 'synced'; value: Result }
-  | { status: 'stale'; value: Result };
+  | { status: "idle" }
+  | { status: "synced"; value: Result }
+  | { status: "stale"; value: Result };
 
 interface InternalOptions {
   minInterval: MaybeRef<number>;
@@ -23,13 +23,13 @@ interface Waiter {
 }
 
 const enum ScheduleSource {
-  Normal = 'normal',
-  External = 'external',
+  Normal = "normal",
+  External = "external",
 }
 
 function toError(error: unknown): Error {
   if (error instanceof Error) return error;
-  return new Error(typeof error === 'string' ? error : JSON.stringify(error));
+  return new Error(typeof error === "string" ? error : JSON.stringify(error));
 }
 
 /**
@@ -147,7 +147,7 @@ export function usePollingQuery<Args, Result>(
   };
   const canRun = () => resolveMinInterval() > 0;
 
-  const data = shallowRef<PollingData<Result>>({ status: 'idle' });
+  const data = shallowRef<PollingData<Result>>({ status: "idle" });
   const lastError = ref<Error | null>(null);
   const isActive = ref(false);
 
@@ -175,9 +175,9 @@ export function usePollingQuery<Args, Result>(
   };
 
   const markStale = () => {
-    if (data.value.status === 'synced' || data.value.status === 'stale') {
+    if (data.value.status === "synced" || data.value.status === "stale") {
       const { value } = data.value;
-      data.value = { status: 'stale', value };
+      data.value = { status: "stale", value };
     }
   };
 
@@ -279,11 +279,14 @@ export function usePollingQuery<Args, Result>(
     };
 
     try {
-      const result = await queryFn(argsSnapshot, { signal: controller.signal, pause: pauseFromCallback });
+      const result = await queryFn(argsSnapshot, {
+        signal: controller.signal,
+        pause: pauseFromCallback,
+      });
       if (!controller.signal.aborted) {
         if (version === latestVersion && assignedArgsVersion === argsVersion) {
           lastError.value = null;
-          data.value = { status: 'synced', value: result };
+          data.value = { status: "synced", value: result };
         }
       }
     } catch (error) {
@@ -312,8 +315,7 @@ export function usePollingQuery<Args, Result>(
         abortReasons.delete(version);
       }
 
-      const shouldSchedule
-        = isActive.value && !disposed && reason !== 'args';
+      const shouldSchedule = isActive.value && !disposed && reason !== "args";
 
       if (shouldSchedule) {
         queueExecution();
@@ -329,7 +331,7 @@ export function usePollingQuery<Args, Result>(
   const handleArgsChange = () => {
     argsVersion += 1;
     markStale();
-    abortAll('args');
+    abortAll("args");
 
     if (!isActive.value || !canRun()) {
       return;
@@ -355,7 +357,7 @@ export function usePollingQuery<Args, Result>(
     isActive.value = false;
     clearScheduled();
     clearDebounce();
-    abortAll('pause');
+    abortAll("pause");
     nextMinIntervalStart = Date.now();
     nextMinDelayStart = Date.now();
   };
@@ -382,7 +384,7 @@ export function usePollingQuery<Args, Result>(
     disposed = true;
     clearScheduled();
     clearDebounce();
-    abortAll('dispose');
+    abortAll("dispose");
     isActive.value = false;
     waiters.splice(0, waiters.length).forEach(({ resolve }) => resolve());
   });
@@ -397,7 +399,7 @@ export function usePollingQuery<Args, Result>(
       }
       handleArgsChange();
     },
-    { flush: 'sync', immediate: true },
+    { flush: "sync", immediate: true },
   );
 
   if (internal.autoStart && canRun()) {

package/src/composition/usePosition.ts

@@ -1,12 +1,16 @@
-import { type Ref, onMounted } from 'vue';
-import { useEventListener } from './useEventListener';
-import { requestTick } from '../helpers/utils';
-import type { ElementPosition } from '../types';
+import { type Ref, onMounted } from "vue";
+import { useEventListener } from "./useEventListener";
+import { requestTick } from "../helpers/utils";
+import type { ElementPosition } from "../types";
 
-export function useElementPosition(el: Ref<HTMLElement | undefined>, cb: (pos: ElementPosition) => void) {
+export function useElementPosition(
+  el: Ref<HTMLElement | undefined>,
+  cb: (pos: ElementPosition) => void,
+) {
   const update = () => {
     if (el.value) {
-      const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = document.documentElement;
+      const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } =
+        document.documentElement;
       const rect = el.value.getBoundingClientRect();
       cb({
         scrollTop,
@@ -33,9 +37,9 @@ export function useElementPosition(el: Ref<HTMLElement | undefined>, cb: (pos: E
 
   onMounted(handle);
 
-  useEventListener(window, 'scroll', handle, { capture: true, passive: true });
+  useEventListener(window, "scroll", handle, { capture: true, passive: true });
 
-  useEventListener(window, 'resize', handle, { passive: true });
+  useEventListener(window, "resize", handle, { passive: true });
 
-  useEventListener(window, 'adjust', handle, true);
+  useEventListener(window, "adjust", handle, true);
 }

package/src/composition/useQuery.ts

@@ -1,5 +1,5 @@
-import { reactive } from 'vue';
-import { debounce } from '@milaboratories/helpers';
+import { reactive } from "vue";
+import { debounce } from "@milaboratories/helpers";
 
 export function useQuery<P extends unknown[], R>(fn: (...args: P) => Promise<R>) {
   const self = reactive({

package/src/composition/useResizeObserver.ts

@@ -1,10 +1,13 @@
-import { onUnmounted, unref } from 'vue';
-import { tapIf } from '../helpers/functions';
-import { onChanged } from './utils';
-import { startResizeObserving, stopResizeObserving } from '../global/resizeObserver';
-import type { MaybeRef } from '../types';
+import { onUnmounted, unref } from "vue";
+import { tapIf } from "../helpers/functions";
+import { onChanged } from "./utils";
+import { startResizeObserving, stopResizeObserving } from "../global/resizeObserver";
+import type { MaybeRef } from "../types";
 
-export function useResizeObserver<T extends HTMLElement>(target: MaybeRef<T | undefined>, cb: (el?: T | undefined) => void) {
+export function useResizeObserver<T extends HTMLElement>(
+  target: MaybeRef<T | undefined>,
+  cb: (el?: T | undefined) => void,
+) {
   onChanged(() => {
     tapIf(unref(target), (el) => {
       startResizeObserving(el, () => cb(el));

package/src/composition/useRipple.ts

@@ -1,20 +1,20 @@
-import type { Ref } from 'vue';
-import { onMounted } from 'vue';
+import type { Ref } from "vue";
+import { onMounted } from "vue";
 
 export function useRipple(el: Ref<HTMLElement | undefined>) {
   function createRipple(event: MouseEvent) {
     const button = event.currentTarget as HTMLButtonElement;
 
-    const circle = document.createElement('span');
+    const circle = document.createElement("span");
     const diameter = Math.max(button.clientWidth, button.clientHeight);
     const radius = diameter / 2;
 
     circle.style.width = circle.style.height = `${diameter}px`;
     circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
     circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
-    circle.classList.add('ripple');
+    circle.classList.add("ripple");
 
-    const ripple = button.getElementsByClassName('ripple')[0];
+    const ripple = button.getElementsByClassName("ripple")[0];
 
     if (ripple) {
       ripple.remove();
@@ -24,6 +24,6 @@ export function useRipple(el: Ref<HTMLElement | undefined>) {
   }
 
   onMounted(() => {
-    el.value?.addEventListener('click', createRipple);
+    el.value?.addEventListener("click", createRipple);
   });
 }