@indielayer/ui 1.0.0-alpha.6 → 1.0.0-alpha.9

package/lib/index.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { inject, defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createElementBlock, renderSlot, createCommentVNode, Fragment, pushScopeId, popScopeId, createElementVNode, ref, watchEffect, mergeProps, watch, resolveComponent, toDisplayString, createVNode, renderList, createTextVNode, provide, onMounted, onUnmounted, withKeys, withModifiers, withDirectives, vModelCheckbox, Transition, vShow, getCurrentScope, onScopeDispose, getCurrentInstance, onBeforeMount, nextTick, unref, reactive, toRefs, Teleport, toHandlers, onBeforeUnmount, TransitionGroup, useCssModule, vModelRadio, vModelSelect } from "vue";
+import { inject, defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createElementBlock, renderSlot, createCommentVNode, Fragment, pushScopeId, popScopeId, createElementVNode, ref, watchEffect, mergeProps, watch, resolveComponent, toDisplayString, createVNode, renderList, createTextVNode, provide, onMounted, onUnmounted, withKeys, withModifiers, withDirectives, vModelCheckbox, Transition, vShow, getCurrentScope, onScopeDispose, getCurrentInstance, onBeforeMount, nextTick, unref, reactive, toRefs, Teleport, toHandlers, TransitionGroup, useCssModule, vModelRadio, vModelSelect, onBeforeUnmount } from "vue";
 const isHex = (hex) => /^#(?:[A-Fa-f0-9]{3}){1,2}$/.test(hex);
 const isRGB = (rgb) => /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.test(rgb);
 const isRGBA = (rgba) => /^^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$/.test(rgba);
@@ -365,7 +365,7 @@ const tailwindColors = Object.freeze({
     900: "#881337"
   }
 });
-var version = "1.0.0-alpha.6";
+var version = "1.0.0-alpha.9";
 const injectTabKey = Symbol();
 const injectFormKey = Symbol();
 const injectIconsKey = Symbol();
@@ -656,7 +656,7 @@ const _sfc_main$H = defineComponent({
     const computedViewBox = ref(props.viewBox);
     const attrs = ref({});
     watchEffect(() => {
-      const injectedIcon = icons[props.icon];
+      const injectedIcon = icons && icons[props.icon];
       isWrapSVG.value = false;
       computedIcon.value = injectedIcon;
       if (injectedIcon) {
@@ -2405,6 +2405,48 @@ function useScroll(element, options = {}) {
     directions
   };
 }
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function useMutationObserver(target, callback, options) {
+  const _a2 = options, { window: window2 = defaultWindow } = _a2, mutationOptions = __objRest$1(_a2, ["window"]);
+  let observer;
+  const isSupported = window2 && "MutationObserver" in window2;
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (isSupported && window2 && el) {
+      observer = new MutationObserver(callback);
+      observer.observe(el, mutationOptions);
+    }
+  }, { immediate: true });
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
 var SwipeDirection;
 (function(SwipeDirection2) {
   SwipeDirection2["UP"] = "UP";
@@ -3244,22 +3286,16 @@ const _sfc_main$p = defineComponent({
     });
     const cItem = computed(() => __spreadValues(__spreadValues({}, props), props.item));
     const htmlTag = cItem.value.to || cItem.value.href ? "x-link" : "div";
-    const isSupported = window && "MutationObserver" in window;
-    const classObserver = isSupported ? new MutationObserver(check) : null;
     onMounted(() => {
       if (!elRef.value)
         return;
       check();
-      if (isSupported && htmlTag === "x-link")
-        classObserver == null ? void 0 : classObserver.observe(elRef.value.$el, {
+      if (htmlTag === "x-link")
+        useMutationObserver(elRef.value.$el, check, {
           attributes: true,
           attributeFilter: ["class"]
         });
     });
-    onBeforeUnmount(() => {
-      if (classObserver)
-        classObserver.disconnect();
-    });
     function onItemClick(e) {
       if (cItem.value.disabled) {
         e.stopPropagation();
@@ -3444,7 +3480,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
 const cssModules$2 = {
   "$style": style0$2
 };
-var XMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__cssModules", cssModules$2], ["__scopeId", "data-v-11179d66"]]);
+var XMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__cssModules", cssModules$2], ["__scopeId", "data-v-295f8cb3"]]);
 const _sfc_main$o = defineComponent({
   name: "XMenu",
   components: {
@@ -3717,14 +3753,23 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 var Modal = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$n]]);
+const _sfc_main$m = defineComponent({
+  name: "XSpacer"
+});
+const _hoisted_1$e = { class: "flex-grow" };
+function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$e);
+}
+var XSpacer = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m]]);
 const validators$4 = {
   align: ["left", "right"],
   position: ["bottom", "top"]
 };
-const _sfc_main$m = defineComponent({
+const _sfc_main$l = defineComponent({
   name: "XNotifications",
   components: {
-    XIcon
+    XIcon,
+    XSpacer
   },
   validators: validators$4,
   props: __spreadProps(__spreadValues({}, useColors.props("primary")), {
@@ -3872,14 +3917,14 @@ const _sfc_main$m = defineComponent({
     };
   }
 });
-const _hoisted_1$e = { class: "flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900" };
+const _hoisted_1$d = { class: "flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900" };
 const _hoisted_2$a = { class: "flex items-center flex-wrap" };
 const _hoisted_3$8 = {
   key: 0,
   class: "font-semibold mr-2"
 };
 const _hoisted_4$7 = ["onClick"];
-function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_x_icon = resolveComponent("x-icon");
   const _component_x_spacer = resolveComponent("x-spacer");
   return openBlock(), createElementBlock(Fragment, null, [
@@ -3919,7 +3964,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
                 ]]),
                 style: normalizeStyle(notification.style)
               }, [
-                createElementVNode("div", _hoisted_1$e, [
+                createElementVNode("div", _hoisted_1$d, [
                   notification.icon ? (openBlock(), createBlock(_component_x_icon, {
                     key: 0,
                     filled: "",
@@ -3955,8 +4000,8 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     ]))
   ], 64);
 }
-var Notifications = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m]]);
-const _sfc_main$l = defineComponent({
+var Notifications = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
+const _sfc_main$k = defineComponent({
   name: "XPaginationItem",
   components: {
     XButton
@@ -3988,7 +4033,7 @@ const _sfc_main$l = defineComponent({
     };
   }
 });
-function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_x_button = resolveComponent("x-button");
   return openBlock(), createElementBlock("li", null, [
     createVNode(_component_x_button, {
@@ -4006,8 +4051,8 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["to", "size", "class", "outlined", "color"])
   ]);
 }
-var XPaginationItem = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
-const _sfc_main$k = defineComponent({
+var XPaginationItem = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
+const _sfc_main$j = defineComponent({
   name: "XPagination",
   components: {
     XIcon,
@@ -4108,7 +4153,7 @@ const _sfc_main$k = defineComponent({
     };
   }
 });
-const _hoisted_1$d = {
+const _hoisted_1$c = {
   key: 0,
   class: "flex items-center"
 };
@@ -4120,12 +4165,12 @@ const _hoisted_5$3 = {
   class: "flex items-center space-x-2"
 };
 const _hoisted_6$3 = ["onClick"];
-function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_x_button = resolveComponent("x-button");
   const _component_x_input = resolveComponent("x-input");
   const _component_x_pagination_item = resolveComponent("x-pagination-item");
   const _component_x_icon = resolveComponent("x-icon");
-  return _ctx.variant === "quick" ? (openBlock(), createElementBlock("ul", _hoisted_1$d, [
+  return _ctx.variant === "quick" ? (openBlock(), createElementBlock("ul", _hoisted_1$c, [
     createVNode(_component_x_button, {
       icon: _ctx.prevIcon,
       size: _ctx.quickButtonSize,
@@ -4201,7 +4246,7 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ], 4)) : createCommentVNode("", true);
 }
-var Pagination = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
+var Pagination = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 const popover = "_popover_2vipi_2";
 const popoverContent = "_popoverContent_2vipi_3";
 const popoverTop = "_popoverTop_2vipi_8";
@@ -4223,7 +4268,7 @@ const validators$3 = {
   align: ["bottom", "center", "left", "right", "top"],
   position: ["bottom", "left", "right", "top"]
 };
-const _sfc_main$j = defineComponent({
+const _sfc_main$i = defineComponent({
   name: "XPopover",
   validators: validators$3,
   props: {
@@ -4315,7 +4360,7 @@ const _sfc_main$j = defineComponent({
     };
   }
 });
-function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: "elRef",
     class: normalizeClass(["inline-block relative", [
@@ -4345,8 +4390,8 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
 const cssModules$1 = {
   "$style": style0$1
 };
-var XPopover = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j], ["__cssModules", cssModules$1]]);
-const _sfc_main$i = defineComponent({
+var XPopover = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i], ["__cssModules", cssModules$1]]);
+const _sfc_main$h = defineComponent({
   name: "XPopoverContainer",
   props: {
     tag: {
@@ -4355,7 +4400,7 @@ const _sfc_main$i = defineComponent({
     }
   }
 });
-function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { class: "block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border border-gray-200 dark:border-gray-800" }, {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")
@@ -4363,8 +4408,8 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   });
 }
-var XPopoverContainer = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
-const _sfc_main$h = defineComponent({
+var XPopoverContainer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
+const _sfc_main$g = defineComponent({
   name: "XProgress",
   props: __spreadProps(__spreadValues({}, useColors.props("primary")), {
     percentage: {
@@ -4399,7 +4444,7 @@ const _sfc_main$h = defineComponent({
     };
   }
 });
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["relative rounded bg-gray-100 dark:bg-gray-700 overflow-hidden pointer-events-none", [_ctx.thick ? "h-1.5" : "h-1"]]),
     style: normalizeStyle(_ctx.style)
@@ -4422,11 +4467,11 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 6)) : createCommentVNode("", true)
   ], 6);
 }
-var XProgress = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
+var XProgress = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 var style0 = {
   "radio--glow": "_radio--glow_14rlz_1"
 };
-const _sfc_main$g = defineComponent({
+const _sfc_main$f = defineComponent({
   name: "XRadio",
   components: {
     XSpinner
@@ -4523,7 +4568,7 @@ const _sfc_main$g = defineComponent({
   }
 });
 const _withScopeId = (n) => (pushScopeId("data-v-4e34dad2"), n = n(), popScopeId(), n);
-const _hoisted_1$c = ["aria-selected", "aria-disabled"];
+const _hoisted_1$b = ["aria-selected", "aria-disabled"];
 const _hoisted_2$8 = ["name", "required", "disabled"];
 const _hoisted_3$6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("circle", {
   cx: "10",
@@ -4535,7 +4580,7 @@ const _hoisted_4$5 = [
 ];
 const _hoisted_5$2 = ["textContent"];
 const _hoisted_6$2 = ["textContent"];
-function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_x_spinner = resolveComponent("x-spinner");
   return openBlock(), createElementBlock("label", {
     ref: "elRef",
@@ -4613,13 +4658,13 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       class: "text-sm text-red-500 mt-1",
       textContent: toDisplayString(_ctx.errorInternal)
     }, null, 8, _hoisted_6$2)) : createCommentVNode("", true)
-  ], 44, _hoisted_1$c);
+  ], 44, _hoisted_1$b);
 }
 const cssModules = {
   "$style": style0
 };
-var Radio = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__cssModules", cssModules], ["__scopeId", "data-v-4e34dad2"]]);
-const _sfc_main$f = defineComponent({
+var Radio = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f], ["__cssModules", cssModules], ["__scopeId", "data-v-4e34dad2"]]);
+const _sfc_main$e = defineComponent({
   name: "XTag",
   props: __spreadProps(__spreadValues(__spreadValues({}, useCommon.props()), useColors.props("gray")), {
     tag: {
@@ -4662,7 +4707,7 @@ const _sfc_main$f = defineComponent({
     };
   }
 });
-const _hoisted_1$b = {
+const _hoisted_1$a = {
   key: 0,
   class: "flex items-center"
 };
@@ -4670,7 +4715,7 @@ const _hoisted_2$7 = /* @__PURE__ */ createElementVNode("path", { d: "M6 18L18 6
 const _hoisted_3$5 = [
   _hoisted_2$7
 ];
-function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
     class: normalizeClass([
       "inline-flex items-center leading-none whitespace-nowrap text-[color:var(--x-text)] dark:text-[color:var(--x-dark-text)] border-[color:var(--x-border)",
@@ -4683,7 +4728,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     style: normalizeStyle(_ctx.styles)
   }, {
     default: withCtx(() => [
-      _ctx.removable ? (openBlock(), createElementBlock("span", _hoisted_1$b, [
+      _ctx.removable ? (openBlock(), createElementBlock("span", _hoisted_1$a, [
         renderSlot(_ctx.$slots, "default"),
         (openBlock(), createElementBlock("svg", {
           width: "24",
@@ -4702,8 +4747,8 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["style", "class"]);
 }
-var XTag = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
-const _sfc_main$e = defineComponent({
+var XTag = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
+const _sfc_main$d = defineComponent({
   name: "XSelect",
   components: {
     XTag,
@@ -4936,7 +4981,7 @@ const _sfc_main$e = defineComponent({
     });
   }
 });
-const _hoisted_1$a = ["textContent"];
+const _hoisted_1$9 = ["textContent"];
 const _hoisted_2$6 = { class: "relative" };
 const _hoisted_3$4 = {
   key: 0,
@@ -4956,7 +5001,7 @@ const _hoisted_10 = [
 ];
 const _hoisted_11 = ["textContent"];
 const _hoisted_12 = ["textContent"];
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_x_tag = resolveComponent("x-tag");
   const _component_x_menu_item = resolveComponent("x-menu-item");
   const _component_x_popover_container = resolveComponent("x-popover-container");
@@ -4971,7 +5016,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0,
       class: normalizeClass(["font-medium text-gray-800 dark:text-gray-200 mb-1", _ctx.labelClasses]),
       textContent: toDisplayString(_ctx.label)
-    }, null, 10, _hoisted_1$a)) : createCommentVNode("", true),
+    }, null, 10, _hoisted_1$9)) : createCommentVNode("", true),
     createElementVNode("div", _hoisted_2$6, [
       createVNode(_component_x_popover, {
         ref: "popoverRef",
@@ -5088,8 +5133,8 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, _hoisted_12)) : createCommentVNode("", true)
   ], 2);
 }
-var Select = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
-const _sfc_main$d = defineComponent({
+var Select = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
+const _sfc_main$c = defineComponent({
   name: "XSkeleton",
   props: {
     tag: {
@@ -5098,17 +5143,17 @@ const _sfc_main$d = defineComponent({
     }
   }
 });
-const _hoisted_1$9 = /* @__PURE__ */ createTextVNode(" \u200B ");
-function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$8 = /* @__PURE__ */ createTextVNode(" \u200B ");
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { class: "animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md" }, {
     default: withCtx(() => [
-      _hoisted_1$9
+      _hoisted_1$8
     ]),
     _: 1
   });
 }
-var Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
-const _sfc_main$c = defineComponent({
+var Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
+const _sfc_main$b = defineComponent({
   name: "XSlider",
   components: {
     XProgress
@@ -5256,11 +5301,11 @@ const _sfc_main$c = defineComponent({
     });
   }
 });
-const _hoisted_1$8 = ["textContent"];
+const _hoisted_1$7 = ["textContent"];
 const _hoisted_2$5 = { class: "flex items-center relative w-full" };
 const _hoisted_3$3 = { class: "-mx-2" };
 const _hoisted_4$3 = ["textContent"];
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_x_progress = resolveComponent("x-progress");
   return openBlock(), createElementBlock("label", {
     ref: "elRef",
@@ -5272,7 +5317,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0,
       class: normalizeClass(["font-medium text-gray-800 dark:text-gray-200 mb-1", _ctx.labelClasses]),
       textContent: toDisplayString(_ctx.label)
-    }, null, 10, _hoisted_1$8)) : createCommentVNode("", true),
+    }, null, 10, _hoisted_1$7)) : createCommentVNode("", true),
     createElementVNode("div", _hoisted_2$5, [
       renderSlot(_ctx.$slots, "prefix", { value: _ctx.value }),
       createElementVNode("div", {
@@ -5303,15 +5348,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, _hoisted_4$3)) : createCommentVNode("", true)
   ], 6);
 }
-var Slider = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
-const _sfc_main$b = defineComponent({
-  name: "XSpacer"
-});
-const _hoisted_1$7 = { class: "flex-grow" };
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$7);
-}
-var Spacer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
+var Slider = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
 const _sfc_main$a = defineComponent({
   name: "XTableHead"
 });
@@ -5713,23 +5750,17 @@ const _sfc_main$4 = defineComponent({
         grow: false
       })
     });
-    const isSupported = window && "MutationObserver" in window;
-    const mutationObserver = isSupported ? new MutationObserver(check) : null;
     const cExact = computed(() => tabs.state.exact || props.exact);
     const cSize = computed(() => props.size || tabs.state.size);
     onMounted(() => {
       teleportTo.value = tabs.tabsContentRef.value;
-      if (props.to)
+      if (props.to) {
         check();
-      if (isSupported && props.to)
-        mutationObserver == null ? void 0 : mutationObserver.observe(elRef.value.$el, {
+        useMutationObserver(elRef.value.$el, check, {
           attributes: true,
           attributeFilter: ["class"]
         });
-    });
-    onBeforeUnmount(() => {
-      if (mutationObserver)
-        mutationObserver.disconnect();
+      }
     });
     function check() {
       var _a2;
@@ -6287,7 +6318,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   XSelect: Select,
   XSkeleton: Skeleton,
   XSlider: Slider,
-  XSpacer: Spacer,
+  XSpacer,
   XSpinner,
   XTable: Table,
   XTableBody: TableBody,
@@ -6319,7 +6350,7 @@ const create = (createOptions = {}) => {
         app.component(`${options.prefix}${component.name.slice(1)}`, component);
       });
     app.provide(injectColorsKey, options.colors);
-    app.provide(injectIconsKey, options.icons);
+    app.provide(injectIconsKey, options.icons || {});
   };
   return {
     install: install2
@@ -6328,4 +6359,4 @@ const create = (createOptions = {}) => {
 var install = create({
   components: Object.keys(components).map((key) => components[key])
 });
-export { Alert as XAlert, Avatar as XAvatar, Badge as XBadge, Breadcrumbs as XBreadcrumbs, XButton, ButtonGroup as XButtonGroup, Card as XCard, Checkbox as XCheckbox, XCollapse, Container as XContainer, XDivider, Drawer as XDrawer, Form as XForm, XIcon, Image$1 as XImage, Input as XInput, XLink, Menu as XMenu, XMenuItem, Modal as XModal, Notifications as XNotifications, Pagination as XPagination, XPaginationItem, XPopover, XPopoverContainer, XProgress, Radio as XRadio, XScroll, Select as XSelect, Skeleton as XSkeleton, Slider as XSlider, Spacer as XSpacer, XSpinner, Tab as XTab, TabGroup as XTabGroup, Table as XTable, TableBody as XTableBody, TableCell as XTableCell, TableHead as XTableHead, TableHeader as XTableHeader, TableRow as XTableRow, XTag, Textarea as XTextarea, Toggle as XToggle, Tooltip as XTooltip, tailwindColors as colors, create as createUI, install as default, injectButtonGroupKey, injectColorsKey, injectFormKey, injectIconsKey, injectNotificationKey, injectTabKey, useCSS, useColors, useCommon, useInputtable, useInteractive, useNotification, version };
+export { Alert as XAlert, Avatar as XAvatar, Badge as XBadge, Breadcrumbs as XBreadcrumbs, XButton, ButtonGroup as XButtonGroup, Card as XCard, Checkbox as XCheckbox, XCollapse, Container as XContainer, XDivider, Drawer as XDrawer, Form as XForm, XIcon, Image$1 as XImage, Input as XInput, XLink, Menu as XMenu, XMenuItem, Modal as XModal, Notifications as XNotifications, Pagination as XPagination, XPaginationItem, XPopover, XPopoverContainer, XProgress, Radio as XRadio, XScroll, Select as XSelect, Skeleton as XSkeleton, Slider as XSlider, XSpacer, XSpinner, Tab as XTab, TabGroup as XTabGroup, Table as XTable, TableBody as XTableBody, TableCell as XTableCell, TableHead as XTableHead, TableHeader as XTableHeader, TableRow as XTableRow, XTag, Textarea as XTextarea, Toggle as XToggle, Tooltip as XTooltip, tailwindColors as colors, create as createUI, install as default, injectButtonGroupKey, injectColorsKey, injectFormKey, injectIconsKey, injectNotificationKey, injectTabKey, useCSS, useColors, useCommon, useInputtable, useInteractive, useNotification, version };

package/lib/style.css

@@ -1 +1 @@
-._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-alert-text);background-color:var(--x-alert-bg);border-color:var(--x-alert-border)}._alert--glow_1sdha_1[data-v-35ce54d8]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-alert-glow),0 4px 6px -4px var(--x-alert-glow)}.dark ._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-dark-alert-text, var(--x-alert-text));background-color:var(--x-dark-alert-bg, var(--x-alert-bg));border-color:var(--x-dark-alert-border, var(--x-alert-border))}._avatar_v7jzc_2[data-v-243016db]{color:var(--x-avatar-text);background-color:var(--x-avatar-bg);border-color:var(--x-avatar-border)}.dark ._avatar_v7jzc_2[data-v-243016db]{color:var(--x-dark-avatar-text, var(--x-avatar-text));background-color:var(--x-dark-avatar-bg, var(--x-avatar-bg));border-color:var(--x-dark-avatar-border, var(--x-avatar-border))}._button_1sbr9_2[data-v-6cb75733]{color:var(--x-button-text);background-color:var(--x-button-bg);border-color:var(--x-button-border)}._button--glow_1sbr9_1[data-v-6cb75733]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-button-glow),0 4px 6px -4px var(--x-button-glow)}._button_1sbr9_2[data-v-6cb75733]:hover{color:var(--x-button-text-hover, var(--x-button-text));background-color:var(--x-button-bg-hover, var(--x-button-bg));border-color:var(--x-button-border-hover, var(--x-button-border))}._button_1sbr9_2[data-v-6cb75733]:active{color:var(--x-button-text-active, var(--x-button-text));background-color:var(--x-button-bg-active, var(--x-button-bg));border-color:var(--x-button-border-active, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-6cb75733]{color:var(--x-dark-button-text, var(--x-button-text));background-color:var(--x-dark-button-bg, var(--x-button-bg));border-color:var(--x-dark-button-border, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-6cb75733]:hover{color:var(--x-dark-button-text-hover, var(--x-dark-button-text, var(--x-button-text)));background-color:var(--x-dark-button-bg-hover, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-hover, var(--x-dark-button-border, var(--x-button-border)))}.dark ._button_1sbr9_2[data-v-6cb75733]:active{color:var(--x-dark-button-text-active, var(--x-dark-button-text));background-color:var(--x-dark-button-bg-active, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-active, var(--x-dark-button-border, var(--x-button-border)))}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:first-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-left-width:1px}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:last-child{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}._button-group--rounded_s7fyl_1>:first-of-type{border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-left-width:1px}._button-group--rounded_s7fyl_1>:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px}._checkbox--glow_1dz66_1[data-v-05f49cb5]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}._scrollWrap_1k3q9_2[data-v-7362ac18]:before,._scrollWrap_1k3q9_2[data-v-7362ac18]:after{content:"";pointer-events:none;position:absolute;z-index:1;transition:box-shadow .2s}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:before,._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:after{top:0;bottom:0;width:20px}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:before,._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:after{right:0;left:0;height:20px}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:before{left:0}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:after{right:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:before{top:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:after{bottom:0}._scrollWrap_1k3q9_2._shadow-left_1k3q9_36[data-v-7362ac18]:before{box-shadow:inset 12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-right_1k3q9_40[data-v-7362ac18]:after{box-shadow:inset -12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-top_1k3q9_44[data-v-7362ac18]:before{box-shadow:inset 0 12px 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-bottom_1k3q9_48[data-v-7362ac18]:after{box-shadow:inset 0 -12px 10px -10px #00000012}._hideScroll_1k3q9_53[data-v-7362ac18]{-ms-overflow-style:auto;scrollbar-width:none}._hideScroll_1k3q9_53[data-v-7362ac18]::-webkit-scrollbar{display:none}._link--shadow_1tilo_1[data-v-af336fea]{box-shadow:inset 0 -.315em 0 0 var(--x-shadow)}._link--shadow_1tilo_1[data-v-af336fea]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-shadow)}.dark ._link--shadow_1tilo_1[data-v-af336fea]{box-shadow:inset 0 -.315em 0 0 var(--x-dark-shadow)}.dark ._link--shadow_1tilo_1[data-v-af336fea]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-dark-shadow)}._menu-item_1v1kj_2[data-v-11179d66]{color:var(--x-text);background-color:var(--x-bg)}._menu-item_1v1kj_2[data-v-11179d66]:before{content:"";position:absolute;left:-1px;height:100%;width:1px;background-color:transparent}._menu-item_1v1kj_2[data-v-11179d66]:hover{color:var(--x-text-hover, var(--x-text));background-color:var(--x-bg-hover, var(--x-bg))}.dark ._menu-item_1v1kj_2[data-v-11179d66]{color:var(--x-dark-text);background:var(--x-dark-bg)}.dark ._menu-item_1v1kj_2[data-v-11179d66]:hover{color:var(--x-dark-text-hover, var(--x-dark-text));background-color:var(--x-dark-bg-hover, var(--x-dark-bg))}.x-menu-inner ._menu-item_1v1kj_2[data-v-11179d66]:hover:before,.x-menu-inner ._menu-item--active_1v1kj_1[data-v-11179d66]:before{background-color:var(--x-border-hover)}._popover_2vipi_2 ._popoverContent_2vipi_3{visibility:hidden;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,1,1)}._popover_2vipi_2 ._popoverTop_2vipi_8{--tw-translate-y: .5rem}._popover_2vipi_2 ._popoverRight_2vipi_11{--tw-translate-x: -.5rem}._popover_2vipi_2 ._popoverBottom_2vipi_14{--tw-translate-y: -.25rem}._popover_2vipi_2 ._popoverLeft_2vipi_17{--tw-translate-x: .5rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverContent_2vipi_3,._popover_2vipi_2._is-open_2vipi_22 ._popoverContent_2vipi_3{visibility:visible;transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1)}._popover_2vipi_2._hover_2vipi_21:hover ._popoverTop_2vipi_8,._popover_2vipi_2._is-open_2vipi_22 ._popoverTop_2vipi_8{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverRight_2vipi_11,._popover_2vipi_2._is-open_2vipi_22 ._popoverRight_2vipi_11{--tw-translate-x: 0px}._popover_2vipi_2._hover_2vipi_21:hover ._popoverBottom_2vipi_14,._popover_2vipi_2._is-open_2vipi_22 ._popoverBottom_2vipi_14{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverLeft_2vipi_17,._popover_2vipi_2._is-open_2vipi_22 ._popoverLeft_2vipi_17{--tw-translate-x: 0px}._radio--glow_14rlz_1[data-v-4e34dad2]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}
+._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-alert-text);background-color:var(--x-alert-bg);border-color:var(--x-alert-border)}._alert--glow_1sdha_1[data-v-35ce54d8]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-alert-glow),0 4px 6px -4px var(--x-alert-glow)}.dark ._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-dark-alert-text, var(--x-alert-text));background-color:var(--x-dark-alert-bg, var(--x-alert-bg));border-color:var(--x-dark-alert-border, var(--x-alert-border))}._avatar_v7jzc_2[data-v-243016db]{color:var(--x-avatar-text);background-color:var(--x-avatar-bg);border-color:var(--x-avatar-border)}.dark ._avatar_v7jzc_2[data-v-243016db]{color:var(--x-dark-avatar-text, var(--x-avatar-text));background-color:var(--x-dark-avatar-bg, var(--x-avatar-bg));border-color:var(--x-dark-avatar-border, var(--x-avatar-border))}._button_1sbr9_2[data-v-6cb75733]{color:var(--x-button-text);background-color:var(--x-button-bg);border-color:var(--x-button-border)}._button--glow_1sbr9_1[data-v-6cb75733]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-button-glow),0 4px 6px -4px var(--x-button-glow)}._button_1sbr9_2[data-v-6cb75733]:hover{color:var(--x-button-text-hover, var(--x-button-text));background-color:var(--x-button-bg-hover, var(--x-button-bg));border-color:var(--x-button-border-hover, var(--x-button-border))}._button_1sbr9_2[data-v-6cb75733]:active{color:var(--x-button-text-active, var(--x-button-text));background-color:var(--x-button-bg-active, var(--x-button-bg));border-color:var(--x-button-border-active, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-6cb75733]{color:var(--x-dark-button-text, var(--x-button-text));background-color:var(--x-dark-button-bg, var(--x-button-bg));border-color:var(--x-dark-button-border, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-6cb75733]:hover{color:var(--x-dark-button-text-hover, var(--x-dark-button-text, var(--x-button-text)));background-color:var(--x-dark-button-bg-hover, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-hover, var(--x-dark-button-border, var(--x-button-border)))}.dark ._button_1sbr9_2[data-v-6cb75733]:active{color:var(--x-dark-button-text-active, var(--x-dark-button-text));background-color:var(--x-dark-button-bg-active, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-active, var(--x-dark-button-border, var(--x-button-border)))}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:first-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-left-width:1px}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:last-child{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}._button-group--rounded_s7fyl_1>:first-of-type{border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-left-width:1px}._button-group--rounded_s7fyl_1>:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px}._checkbox--glow_1dz66_1[data-v-05f49cb5]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}._scrollWrap_1k3q9_2[data-v-7362ac18]:before,._scrollWrap_1k3q9_2[data-v-7362ac18]:after{content:"";pointer-events:none;position:absolute;z-index:1;transition:box-shadow .2s}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:before,._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:after{top:0;bottom:0;width:20px}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:before,._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:after{right:0;left:0;height:20px}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:before{left:0}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:after{right:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:before{top:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:after{bottom:0}._scrollWrap_1k3q9_2._shadow-left_1k3q9_36[data-v-7362ac18]:before{box-shadow:inset 12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-right_1k3q9_40[data-v-7362ac18]:after{box-shadow:inset -12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-top_1k3q9_44[data-v-7362ac18]:before{box-shadow:inset 0 12px 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-bottom_1k3q9_48[data-v-7362ac18]:after{box-shadow:inset 0 -12px 10px -10px #00000012}._hideScroll_1k3q9_53[data-v-7362ac18]{-ms-overflow-style:auto;scrollbar-width:none}._hideScroll_1k3q9_53[data-v-7362ac18]::-webkit-scrollbar{display:none}._link--shadow_1tilo_1[data-v-af336fea]{box-shadow:inset 0 -.315em 0 0 var(--x-shadow)}._link--shadow_1tilo_1[data-v-af336fea]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-shadow)}.dark ._link--shadow_1tilo_1[data-v-af336fea]{box-shadow:inset 0 -.315em 0 0 var(--x-dark-shadow)}.dark ._link--shadow_1tilo_1[data-v-af336fea]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-dark-shadow)}._menu-item_1v1kj_2[data-v-295f8cb3]{color:var(--x-text);background-color:var(--x-bg)}._menu-item_1v1kj_2[data-v-295f8cb3]:before{content:"";position:absolute;left:-1px;height:100%;width:1px;background-color:transparent}._menu-item_1v1kj_2[data-v-295f8cb3]:hover{color:var(--x-text-hover, var(--x-text));background-color:var(--x-bg-hover, var(--x-bg))}.dark ._menu-item_1v1kj_2[data-v-295f8cb3]{color:var(--x-dark-text);background:var(--x-dark-bg)}.dark ._menu-item_1v1kj_2[data-v-295f8cb3]:hover{color:var(--x-dark-text-hover, var(--x-dark-text));background-color:var(--x-dark-bg-hover, var(--x-dark-bg))}.x-menu-inner ._menu-item_1v1kj_2[data-v-295f8cb3]:hover:before,.x-menu-inner ._menu-item--active_1v1kj_1[data-v-295f8cb3]:before{background-color:var(--x-border-hover)}._popover_2vipi_2 ._popoverContent_2vipi_3{visibility:hidden;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,1,1)}._popover_2vipi_2 ._popoverTop_2vipi_8{--tw-translate-y: .5rem}._popover_2vipi_2 ._popoverRight_2vipi_11{--tw-translate-x: -.5rem}._popover_2vipi_2 ._popoverBottom_2vipi_14{--tw-translate-y: -.25rem}._popover_2vipi_2 ._popoverLeft_2vipi_17{--tw-translate-x: .5rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverContent_2vipi_3,._popover_2vipi_2._is-open_2vipi_22 ._popoverContent_2vipi_3{visibility:visible;transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1)}._popover_2vipi_2._hover_2vipi_21:hover ._popoverTop_2vipi_8,._popover_2vipi_2._is-open_2vipi_22 ._popoverTop_2vipi_8{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverRight_2vipi_11,._popover_2vipi_2._is-open_2vipi_22 ._popoverRight_2vipi_11{--tw-translate-x: 0px}._popover_2vipi_2._hover_2vipi_21:hover ._popoverBottom_2vipi_14,._popover_2vipi_2._is-open_2vipi_22 ._popoverBottom_2vipi_14{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverLeft_2vipi_17,._popover_2vipi_2._is-open_2vipi_22 ._popoverLeft_2vipi_17{--tw-translate-x: 0px}._radio--glow_14rlz_1[data-v-4e34dad2]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.0.0-alpha.6";
+declare const _default: "1.0.0-alpha.9";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.9",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",

package/src/components/icon/Icon.vue

@@ -41,7 +41,7 @@ export default defineComponent({
     const attrs = ref({})
 
     watchEffect(() => {
-      const injectedIcon = icons[props.icon]
+      const injectedIcon = icons && icons[props.icon]
 
       isWrapSVG.value = false
       computedIcon.value = injectedIcon

package/src/components/menu/MenuItem.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useMutationObserver } from '@vueuse/core'
 import { useCSS } from '../../composables/css'
 import { useColors } from '../../composables/colors'
 import { useCommon } from '../../composables/common'
@@ -59,24 +60,18 @@ export default defineComponent({
     }))
 
     const htmlTag = cItem.value.to || cItem.value.href ? 'x-link' : 'div'
-    const isSupported = window && 'MutationObserver' in window
-    const classObserver = isSupported ? new MutationObserver(check) : null
 
     onMounted(() => {
       if (!elRef.value) return
 
       check()
 
-      if (isSupported && htmlTag === 'x-link') classObserver?.observe(elRef.value.$el, {
+      if (htmlTag === 'x-link') useMutationObserver(elRef.value.$el, check, {
         attributes: true,
         attributeFilter: ['class'],
       })
     })
 
-    onBeforeUnmount(() => {
-      if (classObserver) classObserver.disconnect()
-    })
-
     function onItemClick(e: Event) {
       if (cItem.value.disabled) {
         e.stopPropagation()

package/src/components/notifications/Notifications.vue

@@ -5,6 +5,7 @@ import { useColors } from '../../composables/colors'
 import { useCSS } from '../../composables/css'
 
 import XIcon from '../../components/icon/Icon.vue'
+import XSpacer from '../../components/spacer/Spacer.vue'
 
 const validators = {
   align: ['left','right'],
@@ -37,6 +38,7 @@ export default defineComponent({
 
   components: {
     XIcon,
+    XSpacer,
   },
 
   validators,

package/src/components/tab/Tab.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, inject, reactive, computed, toRefs, ref, onMounted, onBeforeUnmount } from 'vue'
+import { useMutationObserver } from '@vueuse/core'
 import { injectTabKey } from '../../composables/keys'
 import { useCommon } from '../../composables/common'
 import XIcon from '../icon/Icon.vue'
@@ -45,25 +46,19 @@ export default defineComponent({
       }),
     })
 
-    const isSupported = window && 'MutationObserver' in window
-    const mutationObserver = isSupported ? new MutationObserver(check) : null
-
     const cExact = computed(() => tabs.state.exact || props.exact)
     const cSize = computed(() => props.size || tabs.state.size)
 
     onMounted(() => {
       teleportTo.value = tabs.tabsContentRef.value
 
-      if (props.to) check()
-
-      if (isSupported && props.to) mutationObserver?.observe(elRef.value.$el, {
-        attributes: true,
-        attributeFilter: ['class'],
-      })
-    })
-
-    onBeforeUnmount(() => {
-      if (mutationObserver) mutationObserver.disconnect()
+      if (props.to) {
+        check()
+        useMutationObserver(elRef.value.$el, check, {
+          attributes: true,
+          attributeFilter: ['class'],
+        })
+      }
     })
 
     function check() {