vueless 0.0.584 → 0.0.585

package/composables/useMutationObserver.ts

@@ -1,10 +1,10 @@
 import { computed, onBeforeUnmount, onMounted, toValue, watch } from "vue";
 import { isSSR } from "../utils/helper.ts";
 
-import type { TemplateRefElement } from "../types.ts";
+import type { MaybeRef } from "vue";
 
 export function useMutationObserver(
-  target: TemplateRefElement,
+  target: MaybeRef<Element | Element[] | null>,
   callback: MutationCallback,
   config = { childList: true, attributes: true, characterData: true },
 ) {

package/directives/clickOutside/types.ts

@@ -1,12 +1,11 @@
-import type { DirectiveBinding } from "vue";
-import type { TemplateRefElement } from "../../types.ts";
+import type { DirectiveBinding, MaybeRef } from "vue";
 
 export type RemoveEvents = () => void;
 export type ClickCallback = (event: MouseEvent) => void;
 
 export interface ClickOutsideOptions {
   capture?: boolean;
-  ignore?: TemplateRefElement[];
+  ignore?: MaybeRef<Element | Element[] | null>[];
 }
 
 export interface DirectiveBindingCallback extends DirectiveBinding {

package/directives/clickOutside/vClickOutside.ts

@@ -10,6 +10,10 @@ import type {
   DirectiveBindingOptions,
 } from "./types.ts";
 
+function isElement(element: EventTarget | null) {
+  return element instanceof HTMLElement || element instanceof SVGElement;
+}
+
 function clickOutside(
   target: MaybeRef<HTMLElement | null>,
   handler: ClickCallback,
@@ -21,9 +25,9 @@ function clickOutside(
   const el = unref(target);
 
   function onClick(event: MouseEvent) {
-    if (!(event.target instanceof HTMLElement)) return;
+    if (!isElement(event.target)) return;
 
-    const targetElements = event.composedPath().filter((element) => element instanceof HTMLElement);
+    const targetElements = event.composedPath().filter((element) => isElement(element));
 
     if (
       !el ||

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.584",
+  "version": "0.0.585",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -55,12 +55,10 @@ import UInputFileConfig from "./ui.form-input-file/config.ts";
 import UInputMoneyConfig from "./ui.form-input-money/config.ts";
 import UDataListConfig from "./ui.data-list/config.ts";
 
-import type { ComputedRef, MaybeRef, Ref, ComponentInternalInstance } from "vue";
+import type { ComputedRef, Ref, ComponentInternalInstance } from "vue";
 import type { Props } from "tippy.js";
 import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
-export type TemplateRefElement = MaybeRef<HTMLElement | HTMLElement[] | null>;
-
 export enum ColorMode {
   Dark = "dark",
   Light = "light",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.584",
+  "version": "0.0.585",
   "contributions": {
     "html": {
       "description-markup": "markdown",