@oiij/chrome-tabs 0.0.8 → 0.0.10

package/dist/index.js

@@ -1,79 +1,79 @@
-import { inject as Le, onBeforeMount as ze, onMounted as xe, nextTick as $e, watch as O, getCurrentScope as je, onScopeDispose as Te, getCurrentInstance as ke, toValue as j, computed as S, shallowRef as Q, unref as p, ref as Pe, createElementBlock as A, openBlock as I, createElementVNode as $, createStaticVNode as Fe, defineComponent as we, h as re, normalizeClass as C, createCommentVNode as X, normalizeStyle as _, createBlock as ee, resolveDynamicComponent as ie, withModifiers as Oe, createVNode as K, renderSlot as se, TransitionGroup as Ve, withCtx as De, Fragment as He, renderList as We, mergeProps as Ke } from "vue";
+import { inject as Le, onBeforeMount as ze, onMounted as xe, nextTick as $e, watch as P, getCurrentScope as je, onScopeDispose as Te, getCurrentInstance as ke, toValue as L, computed as M, shallowRef as Q, unref as x, ref as Pe, createElementBlock as A, openBlock as I, createElementVNode as k, createStaticVNode as Fe, defineComponent as we, h as re, normalizeClass as C, createCommentVNode as X, normalizeStyle as _, createBlock as ee, resolveDynamicComponent as ie, withModifiers as Oe, createVNode as D, renderSlot as se, TransitionGroup as Ve, withCtx as He, Fragment as We, renderList as De, mergeProps as Ke } from "vue";
 function qe(e) {
   let t = ".", n = "__", o = "--", r;
   if (e) {
-    let l = e.blockPrefix;
-    l && (t = l), l = e.elementPrefix, l && (n = l), l = e.modifierPrefix, l && (o = l);
+    let a = e.blockPrefix;
+    a && (t = a), a = e.elementPrefix, a && (n = a), a = e.modifierPrefix, a && (o = a);
   }
   const i = {
-    install(l) {
-      r = l.c;
-      const h = l.context;
-      h.bem = {}, h.bem.b = null, h.bem.els = null;
+    install(a) {
+      r = a.c;
+      const m = a.context;
+      m.bem = {}, m.bem.b = null, m.bem.els = null;
     }
   };
-  function s(l) {
-    let h, v;
+  function s(a) {
+    let m, v;
     return {
-      before(m) {
-        h = m.bem.b, v = m.bem.els, m.bem.els = null;
+      before(b) {
+        m = b.bem.b, v = b.bem.els, b.bem.els = null;
       },
-      after(m) {
-        m.bem.b = h, m.bem.els = v;
+      after(b) {
+        b.bem.b = m, b.bem.els = v;
       },
-      $({ context: m, props: k }) {
-        return l = typeof l == "string" ? l : l({ context: m, props: k }), m.bem.b = l, `${k?.bPrefix || t}${m.bem.b}`;
+      $({ context: b, props: N }) {
+        return a = typeof a == "string" ? a : a({ context: b, props: N }), b.bem.b = a, `${N?.bPrefix || t}${b.bem.b}`;
       }
     };
   }
-  function u(l) {
-    let h;
+  function u(a) {
+    let m;
     return {
       before(v) {
-        h = v.bem.els;
+        m = v.bem.els;
       },
       after(v) {
-        v.bem.els = h;
+        v.bem.els = m;
       },
-      $({ context: v, props: m }) {
-        return l = typeof l == "string" ? l : l({ context: v, props: m }), v.bem.els = l.split(",").map((k) => k.trim()), v.bem.els.map((k) => `${m?.bPrefix || t}${v.bem.b}${n}${k}`).join(", ");
+      $({ context: v, props: b }) {
+        return a = typeof a == "string" ? a : a({ context: v, props: b }), v.bem.els = a.split(",").map((N) => N.trim()), v.bem.els.map((N) => `${b?.bPrefix || t}${v.bem.b}${n}${N}`).join(", ");
       }
     };
   }
-  function f(l) {
+  function f(a) {
     return {
-      $({ context: h, props: v }) {
-        l = typeof l == "string" ? l : l({ context: h, props: v });
-        const m = l.split(",").map((L) => L.trim());
-        function k(L) {
-          return m.map((Be) => `&${v?.bPrefix || t}${h.bem.b}${L !== void 0 ? `${n}${L}` : ""}${o}${Be}`).join(", ");
+      $({ context: m, props: v }) {
+        a = typeof a == "string" ? a : a({ context: m, props: v });
+        const b = a.split(",").map((F) => F.trim());
+        function N(F) {
+          return b.map((Be) => `&${v?.bPrefix || t}${m.bem.b}${F !== void 0 ? `${n}${F}` : ""}${o}${Be}`).join(", ");
         }
-        const B = h.bem.els;
-        if (B !== null) {
-          if (process.env.NODE_ENV !== "production" && B.length >= 2)
-            throw Error(`[css-render/plugin-bem]: m(${l}) is invalid, using modifier inside multiple elements is not allowed`);
-          return k(B[0]);
+        const G = m.bem.els;
+        if (G !== null) {
+          if (process.env.NODE_ENV !== "production" && G.length >= 2)
+            throw Error(`[css-render/plugin-bem]: m(${a}) is invalid, using modifier inside multiple elements is not allowed`);
+          return N(G[0]);
         } else
-          return k();
+          return N();
       }
     };
   }
-  function d(l) {
+  function d(a) {
     return {
-      $({ context: h, props: v }) {
-        l = typeof l == "string" ? l : l({ context: h, props: v });
-        const m = h.bem.els;
-        if (process.env.NODE_ENV !== "production" && m !== null && m.length >= 2)
-          throw Error(`[css-render/plugin-bem]: notM(${l}) is invalid, using modifier inside multiple elements is not allowed`);
-        return `&:not(${v?.bPrefix || t}${h.bem.b}${m !== null && m.length > 0 ? `${n}${m[0]}` : ""}${o}${l})`;
+      $({ context: m, props: v }) {
+        a = typeof a == "string" ? a : a({ context: m, props: v });
+        const b = m.bem.els;
+        if (process.env.NODE_ENV !== "production" && b !== null && b.length >= 2)
+          throw Error(`[css-render/plugin-bem]: notM(${a}) is invalid, using modifier inside multiple elements is not allowed`);
+        return `&:not(${v?.bPrefix || t}${m.bem.b}${b !== null && b.length > 0 ? `${n}${b[0]}` : ""}${o}${a})`;
       }
     };
   }
   return Object.assign(i, {
-    cB: ((...l) => r(s(l[0]), l[1], l[2])),
-    cE: ((...l) => r(u(l[0]), l[1], l[2])),
-    cM: ((...l) => r(f(l[0]), l[1], l[2])),
-    cNotM: ((...l) => r(d(l[0]), l[1], l[2]))
+    cB: ((...a) => r(s(a[0]), a[1], a[2])),
+    cE: ((...a) => r(u(a[0]), a[1], a[2])),
+    cM: ((...a) => r(f(a[0]), a[1], a[2])),
+    cNotM: ((...a) => r(d(a[0]), a[1], a[2]))
   }), i;
 }
 function Ge(e) {
@@ -145,7 +145,7 @@ function Qe(e) {
   const t = document.createElement("style");
   return t.setAttribute("cssr-id", e), t;
 }
-function V(e) {
+function O(e) {
   return e ? /^\s*@(s|m)/.test(e) : !1;
 }
 const Xe = /[A-Z]/g;
@@ -207,21 +207,21 @@ function Ee(e, t, n, o, r) {
   const i = e.$;
   let s = "";
   if (!i || typeof i == "string")
-    V(i) ? s = i : t.push(i);
+    O(i) ? s = i : t.push(i);
   else if (typeof i == "function") {
     const d = i({
       context: o.context,
       props: r
     });
-    V(d) ? s = d : t.push(d);
+    O(d) ? s = d : t.push(d);
   } else if (i.before && i.before(o.context), !i.$ || typeof i.$ == "string")
-    V(i.$) ? s = i.$ : t.push(i.$);
+    O(i.$) ? s = i.$ : t.push(i.$);
   else if (i.$) {
     const d = i.$({
       context: o.context,
       props: r
     });
-    V(d) ? s = d : t.push(d);
+    O(d) ? s = d : t.push(d);
   }
   const u = Je(t), f = le(u, e.props, o, r);
   s ? n.push(`${s} {`) : f.length && n.push(f), e.children && te(e.children, {
@@ -229,8 +229,8 @@ function Ee(e, t, n, o, r) {
     props: r
   }, (d) => {
     if (typeof d == "string") {
-      const a = le(u, { raw: d }, o, r);
-      n.push(a);
+      const c = le(u, { raw: d }, o, r);
+      n.push(c);
     } else
       Ee(d, t, n, o, r);
   }), t.pop(), s && n.push("}"), i && i.after && i.after(o.context);
@@ -280,18 +280,18 @@ function rt(e, t, n, o, r, i, s, u, f) {
     return;
   }
   u === void 0 && (u = document.head);
-  const a = ne(n, u);
-  if (a !== null && !i)
-    return a;
-  const c = a ?? Qe(n);
-  if (d === void 0 && (d = t.render(o)), c.textContent = d, a !== null)
-    return a;
+  const c = ne(n, u);
+  if (c !== null && !i)
+    return c;
+  const l = c ?? Qe(n);
+  if (d === void 0 && (d = t.render(o)), l.textContent = d, c !== null)
+    return c;
   if (s) {
-    const b = u.querySelector(`meta[name="${s}"]`);
-    if (b)
-      return u.insertBefore(c, b), ae(t.els, c), c;
+    const h = u.querySelector(`meta[name="${s}"]`);
+    if (h)
+      return u.insertBefore(l, h), ae(t.els, l), l;
   }
-  return r ? u.insertBefore(c, u.querySelector("style, link")) : u.appendChild(c), ae(t.els, c), c;
+  return r ? u.insertBefore(l, u.querySelector("style, link")) : u.appendChild(l), ae(t.els, l), l;
 }
 function it(e) {
   return tt(this, this.instance, e);
@@ -304,7 +304,7 @@ function ut(e = {}) {
   const { id: t, parent: n } = e;
   ot(this.instance, this, t, n);
 }
-const D = function(e, t, n, o) {
+const V = function(e, t, n, o) {
   return {
     instance: e,
     $: t,
@@ -316,7 +316,7 @@ const D = function(e, t, n, o) {
     unmount: ut
   };
 }, lt = function(e, t, n, o) {
-  return Array.isArray(t) ? D(e, { $: null }, null, t) : Array.isArray(n) ? D(e, t, null, n) : Array.isArray(o) ? D(e, t, n, o) : D(e, t, n, null);
+  return Array.isArray(t) ? V(e, { $: null }, null, t) : Array.isArray(n) ? V(e, t, null, n) : Array.isArray(o) ? V(e, t, n, o) : V(e, t, n, null);
 };
 function at(e = {}) {
   const t = {
@@ -399,17 +399,17 @@ function $t(e, t = {}) {
   };
   let s;
   return (f) => {
-    const d = j(e), a = j(t.maxWait);
-    return n && i(n), d <= 0 || a !== void 0 && a <= 0 ? (o && (i(o), o = void 0), Promise.resolve(f())) : new Promise((c, b) => {
-      r = t.rejectOnCancel ? b : c, s = f, a && !o && (o = setTimeout(() => {
-        n && i(n), o = void 0, c(s());
-      }, a)), n = setTimeout(() => {
-        o && i(o), o = void 0, c(f());
+    const d = L(e), c = L(t.maxWait);
+    return n && i(n), d <= 0 || c !== void 0 && c <= 0 ? (o && (i(o), o = void 0), Promise.resolve(f())) : new Promise((l, h) => {
+      r = t.rejectOnCancel ? h : l, s = f, c && !o && (o = setTimeout(() => {
+        n && i(n), o = void 0, l(s());
+      }, c)), n = setTimeout(() => {
+        o && i(o), o = void 0, l(f());
       }, d);
     });
   };
 }
-function q(e) {
+function K(e) {
   return Array.isArray(e) ? e : [e];
 }
 function kt(e) {
@@ -426,7 +426,7 @@ function Ct(e, t = !0, n) {
   kt() ? xe(e, n) : t ? e() : $e(e);
 }
 function It(e, t, n) {
-  return O(
+  return P(
     e,
     t,
     {
@@ -436,36 +436,36 @@ function It(e, t, n) {
   );
 }
 const oe = pt ? window : void 0;
-function z(e) {
+function B(e) {
   var t;
-  const n = j(e);
+  const n = L(e);
   return (t = n?.$el) != null ? t : n;
 }
 function Et(...e) {
   const t = [], n = () => {
     t.forEach((u) => u()), t.length = 0;
-  }, o = (u, f, d, a) => (u.addEventListener(f, d, a), () => u.removeEventListener(f, d, a)), r = S(() => {
-    const u = q(j(e[0])).filter((f) => f != null);
+  }, o = (u, f, d, c) => (u.addEventListener(f, d, c), () => u.removeEventListener(f, d, c)), r = M(() => {
+    const u = K(L(e[0])).filter((f) => f != null);
     return u.every((f) => typeof f != "string") ? u : void 0;
   }), i = It(
     () => {
       var u, f;
       return [
-        (f = (u = r.value) == null ? void 0 : u.map((d) => z(d))) != null ? f : [oe].filter((d) => d != null),
-        q(j(r.value ? e[1] : e[0])),
-        q(p(r.value ? e[2] : e[1])),
+        (f = (u = r.value) == null ? void 0 : u.map((d) => B(d))) != null ? f : [oe].filter((d) => d != null),
+        K(L(r.value ? e[1] : e[0])),
+        K(x(r.value ? e[2] : e[1])),
         // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
-        j(r.value ? e[3] : e[2])
+        L(r.value ? e[3] : e[2])
       ];
     },
-    ([u, f, d, a]) => {
+    ([u, f, d, c]) => {
       if (n(), !u?.length || !f?.length || !d?.length)
         return;
-      const c = yt(a) ? { ...a } : a;
+      const l = yt(c) ? { ...c } : c;
       t.push(
         ...u.flatMap(
-          (b) => f.flatMap(
-            (M) => d.map((l) => o(b, M, l, c))
+          (h) => f.flatMap(
+            ($) => d.map((a) => o(h, $, a, l))
           )
         )
       );
@@ -486,101 +486,101 @@ function St() {
 // @__NO_SIDE_EFFECTS__
 function Nt(e) {
   const t = /* @__PURE__ */ St();
-  return S(() => (t.value, !!e()));
+  return M(() => (t.value, !!e()));
 }
 function Mt(e, t, n = {}) {
   const { window: o = oe, ...r } = n;
   let i;
   const s = /* @__PURE__ */ Nt(() => o && "ResizeObserver" in o), u = () => {
     i && (i.disconnect(), i = void 0);
-  }, f = S(() => {
-    const c = j(e);
-    return Array.isArray(c) ? c.map((b) => z(b)) : [z(c)];
-  }), d = O(
+  }, f = M(() => {
+    const l = L(e);
+    return Array.isArray(l) ? l.map((h) => B(h)) : [B(l)];
+  }), d = P(
     f,
-    (c) => {
+    (l) => {
       if (u(), s.value && o) {
         i = new ResizeObserver(t);
-        for (const b of c)
-          b && i.observe(b, r);
+        for (const h of l)
+          h && i.observe(h, r);
       }
     },
     { immediate: !0, flush: "post" }
-  ), a = () => {
+  ), c = () => {
     u(), d();
   };
-  return Se(a), {
+  return Se(c), {
     isSupported: s,
-    stop: a
+    stop: c
   };
 }
 function At(e, t = { width: 0, height: 0 }, n = {}) {
-  const { window: o = oe, box: r = "content-box" } = n, i = S(() => {
-    var c, b;
-    return (b = (c = z(e)) == null ? void 0 : c.namespaceURI) == null ? void 0 : b.includes("svg");
+  const { window: o = oe, box: r = "content-box" } = n, i = M(() => {
+    var l, h;
+    return (h = (l = B(e)) == null ? void 0 : l.namespaceURI) == null ? void 0 : h.includes("svg");
   }), s = Q(t.width), u = Q(t.height), { stop: f } = Mt(
     e,
-    ([c]) => {
-      const b = r === "border-box" ? c.borderBoxSize : r === "content-box" ? c.contentBoxSize : c.devicePixelContentBoxSize;
+    ([l]) => {
+      const h = r === "border-box" ? l.borderBoxSize : r === "content-box" ? l.contentBoxSize : l.devicePixelContentBoxSize;
       if (o && i.value) {
-        const M = z(e);
-        if (M) {
-          const l = M.getBoundingClientRect();
-          s.value = l.width, u.value = l.height;
+        const $ = B(e);
+        if ($) {
+          const a = $.getBoundingClientRect();
+          s.value = a.width, u.value = a.height;
         }
-      } else if (b) {
-        const M = q(b);
-        s.value = M.reduce((l, { inlineSize: h }) => l + h, 0), u.value = M.reduce((l, { blockSize: h }) => l + h, 0);
+      } else if (h) {
+        const $ = K(h);
+        s.value = $.reduce((a, { inlineSize: m }) => a + m, 0), u.value = $.reduce((a, { blockSize: m }) => a + m, 0);
       } else
-        s.value = c.contentRect.width, u.value = c.contentRect.height;
+        s.value = l.contentRect.width, u.value = l.contentRect.height;
     },
     n
   );
   Ct(() => {
-    const c = z(e);
-    c && (s.value = "offsetWidth" in c ? c.offsetWidth : t.width, u.value = "offsetHeight" in c ? c.offsetHeight : t.height);
+    const l = B(e);
+    l && (s.value = "offsetWidth" in l ? l.offsetWidth : t.width, u.value = "offsetHeight" in l ? l.offsetHeight : t.height);
   });
-  const d = O(
-    () => z(e),
-    (c) => {
-      s.value = c ? t.width : 0, u.value = c ? t.height : 0;
+  const d = P(
+    () => B(e),
+    (l) => {
+      s.value = l ? t.width : 0, u.value = l ? t.height : 0;
     }
   );
-  function a() {
+  function c() {
     f(), d();
   }
   return {
     width: s,
     height: u,
-    stop: a
+    stop: c
   };
 }
 function Rt(e) {
   const { activeClassName: t = ".active", enableWheel: n = !0, direction: o = "vertical" } = e ?? {}, r = Pe(), { width: i, height: s } = At(r);
-  async function u(a) {
+  async function u(c) {
     await $e();
-    const c = r.value?.querySelector(t);
-    c && c.scrollIntoView({
+    const l = r.value?.querySelector(t);
+    l && l.scrollIntoView({
       behavior: "smooth",
       block: "nearest",
       inline: "nearest",
-      ...a
+      ...c
     });
   }
-  function f(a) {
+  function f(c) {
     if (!n) return;
-    a.preventDefault();
-    const { deltaY: c } = a;
+    c.preventDefault();
+    const { deltaY: l } = c;
     switch (o) {
       case "vertical":
         r.value?.scrollBy({
-          top: c > 0 ? s.value : -s.value,
+          top: l > 0 ? s.value : -s.value,
           behavior: "smooth"
         });
         break;
       case "horizontal":
         r.value?.scrollBy({
-          left: c > 0 ? i.value : -i.value,
+          left: l > 0 ? i.value : -i.value,
           behavior: "smooth"
         });
         break;
@@ -588,7 +588,7 @@ function Rt(e) {
   }
   Et(r, "wheel", f);
   const d = /* @__PURE__ */ wt(u, 500);
-  return O([i, s], () => {
+  return P([i, s], () => {
     d();
   }), {
     scrollRef: r,
@@ -597,16 +597,16 @@ function Rt(e) {
 }
 var Bt = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, R = function(e) {
   return typeof e == "string" ? e.length > 0 : typeof e == "number";
-}, x = function(e, t, n) {
+}, y = function(e, t, n) {
   return t === void 0 && (t = 0), n === void 0 && (n = Math.pow(10, t)), Math.round(n * e) / n + 0;
-}, N = function(e, t, n) {
+}, S = function(e, t, n) {
   return t === void 0 && (t = 0), n === void 0 && (n = 1), e > n ? n : e > t ? e : t;
 }, Ne = function(e) {
   return (e = isFinite(e) ? e % 360 : 0) > 0 ? e : e + 360;
 }, de = function(e) {
-  return { r: N(e.r, 0, 255), g: N(e.g, 0, 255), b: N(e.b, 0, 255), a: N(e.a) };
+  return { r: S(e.r, 0, 255), g: S(e.g, 0, 255), b: S(e.b, 0, 255), a: S(e.a) };
 }, Z = function(e) {
-  return { r: x(e.r), g: x(e.g), b: x(e.b), a: x(e.a, 3) };
+  return { r: y(e.r), g: y(e.g), b: y(e.b), a: y(e.a, 3) };
 }, Lt = /^#([0-9a-f]{3,8})$/i, H = function(e) {
   var t = e.toString(16);
   return t.length < 2 ? "0" + t : t;
@@ -619,18 +619,18 @@ var Bt = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, R = function(e) {
   var i = Math.floor(t), s = o * (1 - n), u = o * (1 - (t - i) * n), f = o * (1 - (1 - t + i) * n), d = i % 6;
   return { r: 255 * [o, u, s, s, f, o][d], g: 255 * [f, o, o, u, s, s][d], b: 255 * [s, s, f, o, o, u][d], a: r };
 }, fe = function(e) {
-  return { h: Ne(e.h), s: N(e.s, 0, 100), l: N(e.l, 0, 100), a: N(e.a) };
+  return { h: Ne(e.h), s: S(e.s, 0, 100), l: S(e.l, 0, 100), a: S(e.a) };
 }, he = function(e) {
-  return { h: x(e.h), s: x(e.s), l: x(e.l), a: x(e.a, 3) };
+  return { h: y(e.h), s: y(e.s), l: y(e.l), a: y(e.a, 3) };
 }, me = function(e) {
   return Ae((n = (t = e).s, { h: t.h, s: (n *= ((o = t.l) < 50 ? o : 100 - o) / 100) > 0 ? 2 * n / (o + n) * 100 : 0, v: o + n, a: t.a }));
   var t, n, o;
-}, F = function(e) {
+}, T = function(e) {
   return { h: (t = Me(e)).h, s: (r = (200 - (n = t.s)) * (o = t.v) / 100) > 0 && r < 200 ? n * o / 100 / (r <= 100 ? r : 200 - r) * 100 : 0, l: r / 2, a: t.a };
   var t, n, o, r;
 }, zt = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, jt = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, Tt = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, Pt = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, ve = { string: [[function(e) {
   var t = Lt.exec(e);
-  return t ? (e = t[1]).length <= 4 ? { r: parseInt(e[0] + e[0], 16), g: parseInt(e[1] + e[1], 16), b: parseInt(e[2] + e[2], 16), a: e.length === 4 ? x(parseInt(e[3] + e[3], 16) / 255, 2) : 1 } : e.length === 6 || e.length === 8 ? { r: parseInt(e.substr(0, 2), 16), g: parseInt(e.substr(2, 2), 16), b: parseInt(e.substr(4, 2), 16), a: e.length === 8 ? x(parseInt(e.substr(6, 2), 16) / 255, 2) : 1 } : null : null;
+  return t ? (e = t[1]).length <= 4 ? { r: parseInt(e[0] + e[0], 16), g: parseInt(e[1] + e[1], 16), b: parseInt(e[2] + e[2], 16), a: e.length === 4 ? y(parseInt(e[3] + e[3], 16) / 255, 2) : 1 } : e.length === 6 || e.length === 8 ? { r: parseInt(e.substr(0, 2), 16), g: parseInt(e.substr(2, 2), 16), b: parseInt(e.substr(4, 2), 16), a: e.length === 8 ? y(parseInt(e.substr(6, 2), 16) / 255, 2) : 1 } : null : null;
 }, "hex"], [function(e) {
   var t = Tt.exec(e) || Pt.exec(e);
   return t ? t[2] !== t[4] || t[4] !== t[6] ? null : de({ r: Number(t[1]) / (t[2] ? 100 / 255 : 1), g: Number(t[3]) / (t[4] ? 100 / 255 : 1), b: Number(t[5]) / (t[6] ? 100 / 255 : 1), a: t[7] === void 0 ? 1 : Number(t[7]) / (t[8] ? 100 : 1) }) : null;
@@ -651,7 +651,7 @@ var Bt = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, R = function(e) {
   var t = e.h, n = e.s, o = e.v, r = e.a, i = r === void 0 ? 1 : r;
   if (!R(t) || !R(n) || !R(o)) return null;
   var s = (function(u) {
-    return { h: Ne(u.h), s: N(u.s, 0, 100), v: N(u.v, 0, 100), a: N(u.a) };
+    return { h: Ne(u.h), s: S(u.s, 0, 100), v: S(u.v, 0, 100), a: S(u.a) };
   })({ h: Number(t), s: Number(n), v: Number(o), a: Number(i) });
   return Ae(s);
 }, "hsv"]] }, be = function(e, t) {
@@ -663,13 +663,13 @@ var Bt = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, R = function(e) {
 }, Ft = function(e) {
   return typeof e == "string" ? be(e.trim(), ve.string) : typeof e == "object" && e !== null ? be(e, ve.object) : [null, void 0];
 }, U = function(e, t) {
-  var n = F(e);
-  return { h: n.h, s: N(n.s + 100 * t, 0, 100), l: n.l, a: n.a };
+  var n = T(e);
+  return { h: n.h, s: S(n.s + 100 * t, 0, 100), l: n.l, a: n.a };
 }, Y = function(e) {
   return (299 * e.r + 587 * e.g + 114 * e.b) / 1e3 / 255;
 }, pe = function(e, t) {
-  var n = F(e);
-  return { h: n.h, s: n.s, l: N(n.l + 100 * t, 0, 100), a: n.a };
+  var n = T(e);
+  return { h: n.h, s: n.s, l: S(n.l + 100 * t, 0, 100), a: n.a };
 }, ge = (function() {
   function e(t) {
     this.parsed = Ft(t)[0], this.rgba = this.parsed || { r: 0, g: 0, b: 0, a: 1 };
@@ -677,13 +677,13 @@ var Bt = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, R = function(e) {
   return e.prototype.isValid = function() {
     return this.parsed !== null;
   }, e.prototype.brightness = function() {
-    return x(Y(this.rgba), 2);
+    return y(Y(this.rgba), 2);
   }, e.prototype.isDark = function() {
     return Y(this.rgba) < 0.5;
   }, e.prototype.isLight = function() {
     return Y(this.rgba) >= 0.5;
   }, e.prototype.toHex = function() {
-    return t = Z(this.rgba), n = t.r, o = t.g, r = t.b, s = (i = t.a) < 1 ? H(x(255 * i)) : "", "#" + H(n) + H(o) + H(r) + s;
+    return t = Z(this.rgba), n = t.r, o = t.g, r = t.b, s = (i = t.a) < 1 ? H(y(255 * i)) : "", "#" + H(n) + H(o) + H(r) + s;
     var t, n, o, r, i, s;
   }, e.prototype.toRgb = function() {
     return Z(this.rgba);
@@ -691,12 +691,12 @@ var Bt = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, R = function(e) {
     return t = Z(this.rgba), n = t.r, o = t.g, r = t.b, (i = t.a) < 1 ? "rgba(" + n + ", " + o + ", " + r + ", " + i + ")" : "rgb(" + n + ", " + o + ", " + r + ")";
     var t, n, o, r, i;
   }, e.prototype.toHsl = function() {
-    return he(F(this.rgba));
+    return he(T(this.rgba));
   }, e.prototype.toHslString = function() {
-    return t = he(F(this.rgba)), n = t.h, o = t.s, r = t.l, (i = t.a) < 1 ? "hsla(" + n + ", " + o + "%, " + r + "%, " + i + ")" : "hsl(" + n + ", " + o + "%, " + r + "%)";
+    return t = he(T(this.rgba)), n = t.h, o = t.s, r = t.l, (i = t.a) < 1 ? "hsla(" + n + ", " + o + "%, " + r + "%, " + i + ")" : "hsl(" + n + ", " + o + "%, " + r + "%)";
     var t, n, o, r, i;
   }, e.prototype.toHsv = function() {
-    return t = Me(this.rgba), { h: x(t.h), s: x(t.s), v: x(t.v), a: x(t.a, 3) };
+    return t = Me(this.rgba), { h: y(t.h), s: y(t.s), v: y(t.v), a: y(t.a, 3) };
     var t;
   }, e.prototype.invert = function() {
     return E({ r: 255 - (t = this.rgba).r, g: 255 - t.g, b: 255 - t.b, a: t.a });
@@ -714,20 +714,20 @@ var Bt = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, R = function(e) {
   }, e.prototype.rotate = function(t) {
     return t === void 0 && (t = 15), this.hue(this.hue() + t);
   }, e.prototype.alpha = function(t) {
-    return typeof t == "number" ? E({ r: (n = this.rgba).r, g: n.g, b: n.b, a: t }) : x(this.rgba.a, 3);
+    return typeof t == "number" ? E({ r: (n = this.rgba).r, g: n.g, b: n.b, a: t }) : y(this.rgba.a, 3);
     var n;
   }, e.prototype.hue = function(t) {
-    var n = F(this.rgba);
-    return typeof t == "number" ? E({ h: t, s: n.s, l: n.l, a: n.a }) : x(n.h);
+    var n = T(this.rgba);
+    return typeof t == "number" ? E({ h: t, s: n.s, l: n.l, a: n.a }) : y(n.h);
   }, e.prototype.isEqual = function(t) {
     return this.toHex() === E(t).toHex();
   }, e;
 })(), E = function(e) {
   return e instanceof ge ? e : new ge(e);
 };
-const { cssr: Ot, plugin: Vt, namespace: Re } = ct(), { c: g, cB: W, cE: y, cM: J, cNotM: ye } = { ...Ot, ...Vt }, P = `${Re}-chrome-tabs`, w = `${Re}-chrome-tabs-item`, T = "all .2s cubic-bezier(.4, 0, .2, 1)";
-function Dt() {
-  return g([
+const { cssr: Ot, plugin: Vt, namespace: Re } = ct(), { c: p, cB: W, cE: g, cM: J, cNotM: ye } = { ...Ot, ...Vt }, j = `${Re}-chrome-tabs`, w = `${Re}-chrome-tabs-item`, z = "all .2s cubic-bezier(.4, 0, .2, 1)";
+function Ht() {
+  return p([
     W("chrome-tabs", {
       display: "flex",
       width: "100%",
@@ -737,18 +737,18 @@ function Dt() {
       backgroundColor: "var(--background-color)",
       color: "var(--background-color-dark)"
     }, [
-      g("div", {
+      p("div", {
         boxSizing: "border-box"
       }),
-      g(".group-move, .group-enter-active, .group-leave-active", {
-        transition: T
+      p(".group-move, .group-enter-active, .group-leave-active", {
+        transition: z
       }),
-      g(".group-enter-from, .group-leave-to", {
+      p(".group-enter-from, .group-leave-to", {
         opacity: 0
       }),
-      g(".group-leave-active", {}),
-      y("prefix", {}),
-      y("icon", {
+      p(".group-leave-active", {}),
+      g("prefix", {}),
+      g("icon", {
         width: "28px",
         height: "28px",
         display: "flex",
@@ -757,18 +757,18 @@ function Dt() {
         padding: "5px",
         borderRadius: "10px",
         backgroundColor: "var(--active-background-color)",
-        transition: T
+        transition: z
       }, [
-        g("svg", {
+        p("svg", {
           width: "100%",
           height: "100%",
           fill: "currentColor"
         }),
-        g("&:hover", {
+        p("&:hover", {
           backgroundColor: "var(--primary-color)"
         })
       ]),
-      y("content", {
+      g("content", {
         flex: "1",
         height: "100%",
         minWidth: 0,
@@ -776,24 +776,24 @@ function Dt() {
         marginLeft: "-6px",
         padding: "0 10px"
       }),
-      y("scroll", {
+      g("scroll", {
         position: "relative",
         display: "flex",
         alignItems: "center",
         height: "100%"
       }, [
-        y("icon", {
+        g("icon", {
           marginLeft: "5px",
           borderRadius: "50%",
           backgroundColor: "transparent",
           flexShrink: 0
         }, [
-          g("&:hover", {
+          p("&:hover", {
             backgroundColor: "var(--primary-color)"
           })
         ])
       ]),
-      y("suffix", {})
+      g("suffix", {})
     ]),
     W("chrome-tabs-item", {
       position: "relative",
@@ -811,24 +811,24 @@ function Dt() {
         filter: "grayscale(0.5)"
       }),
       J("active", [
-        y("background", {
+        g("background", {
           opacity: 1
         })
       ]),
       ye("active", [
-        g("&:hover", {}, [
-          y("content", {
+        p("&:hover", {}, [
+          g("content", {
             backgroundColor: "var(--primary-color)"
           })
         ])
       ]),
-      g("&::first-child", {
+      p("&::first-child", {
         marginLeft: "0 !important"
       }),
-      g("&::last-child", {
+      p("&::last-child", {
         marginRight: "0 !important"
       }),
-      y("content", {
+      g("content", {
         position: "relative",
         zIndex: 1,
         height: "28px",
@@ -837,19 +837,19 @@ function Dt() {
         gap: "5px",
         borderRadius: "10px",
         padding: "0 10px",
-        transition: T
+        transition: z
       }),
-      y("slot", {}),
-      y("icon", {
+      g("slot", {}),
+      g("icon", {
         lineHeight: 1
       }, [
-        g("svg", {
+        p("svg", {
           width: "1.2em",
           height: "1.2em",
           fill: "currentColor"
         })
       ]),
-      y("close", {
+      g("close", {
         width: "16px",
         height: "16px",
         padding: "2px",
@@ -857,18 +857,18 @@ function Dt() {
         alignItems: "center",
         justifyContent: "center",
         borderRadius: "50%",
-        transition: T
+        transition: z
       }, [
-        g("&:hover", {
+        p("&:hover", {
           backgroundColor: "rgba(0,0,0,0.1)"
         }),
-        g("svg", {
+        p("svg", {
           width: "100%",
           height: "100%",
           fill: "currentColor"
         })
       ]),
-      y("background", {
+      g("background", {
         position: "absolute",
         opacity: 0,
         left: 0,
@@ -878,27 +878,27 @@ function Dt() {
         width: "100%",
         display: "flex",
         alignItems: "flex-end",
-        transition: T
+        transition: z
       }, [
-        y("block", {
+        g("block", {
           height: "100%",
           flex: 1,
           minWidth: 0,
           borderRadius: "10px 10px 0 0",
           backgroundColor: "var(--active-background-color)"
         }),
-        g("svg", {
+        p("svg", {
           fill: "var(--active-background-color)"
         })
       ]),
-      y("line", {
+      g("line", {
         position: "absolute",
         bottom: "12px",
         right: "4px",
         height: "16px",
         width: "2px",
         borderRadius: "1px",
-        transition: T,
+        transition: z,
         backgroundColor: "var(--primary-color)",
         opacity: 0
       }, [
@@ -907,32 +907,32 @@ function Dt() {
         })
       ])
     ]),
-    g(".dark", [
+    p(".dark", [
       W("chrome-tabs", {
         backgroundColor: "var(--background-color-dark)",
         color: "var(--background-color)"
       }, [
-        y("icon", {
+        g("icon", {
           backgroundColor: "var(--active-background-color-dark)"
         }, [
-          g("&:hover", {
+          p("&:hover", {
             backgroundColor: "var(--primary-color-dark)"
           })
         ])
       ]),
       W("chrome-tabs-item", {}, [
         ye("active", [
-          g("&:hover", {}, [
-            y("content", {
+          p("&:hover", {}, [
+            g("content", {
               backgroundColor: "var(--primary-color-dark)"
             })
           ])
         ]),
-        y("background", {}, [
-          y("block", {
+        g("background", {}, [
+          g("block", {
             backgroundColor: "var(--active-background-color-dark)"
           }),
-          g("svg", {
+          p("svg", {
             fill: "var(--active-background-color-dark)"
           })
         ])
@@ -940,28 +940,28 @@ function Dt() {
     ])
   ]);
 }
-const G = (e, t) => {
+const q = (e, t) => {
   const n = e.__vccOpts || e;
   for (const [o, r] of t)
     n[o] = r;
   return n;
-}, Ht = {
-  name: "RiAddLine"
 }, Wt = {
+  name: "RiAddLine"
+}, Dt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 24 24"
 };
 function Kt(e, t, n, o, r, i) {
-  return I(), A("svg", Wt, t[0] || (t[0] = [
-    $("path", {
+  return I(), A("svg", Dt, [...t[0] || (t[0] = [
+    k("path", {
       fill: "#757575",
       d: "M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"
     }, null, -1)
-  ]));
+  ])]);
 }
-const qt = /* @__PURE__ */ G(Ht, [["render", Kt]]), Gt = {
+const qt = /* @__PURE__ */ q(Wt, [["render", Kt]]), Gt = {
   name: "RiArrowDropDownLine"
 }, Zt = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -970,14 +970,14 @@ const qt = /* @__PURE__ */ G(Ht, [["render", Kt]]), Gt = {
   viewBox: "0 0 24 24"
 };
 function Ut(e, t, n, o, r, i) {
-  return I(), A("svg", Zt, t[0] || (t[0] = [
-    $("path", {
+  return I(), A("svg", Zt, [...t[0] || (t[0] = [
+    k("path", {
       fill: "#757575",
       d: "m12 15l-4.243-4.242l1.415-1.414L12 12.172l2.828-2.828l1.415 1.414z"
     }, null, -1)
-  ]));
+  ])]);
 }
-const Yt = /* @__PURE__ */ G(Gt, [["render", Ut]]), Jt = {
+const Yt = /* @__PURE__ */ q(Gt, [["render", Ut]]), Jt = {
   name: "LineMdLoadingTwotoneLoop"
 }, Qt = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -986,11 +986,11 @@ const Yt = /* @__PURE__ */ G(Gt, [["render", Ut]]), Jt = {
   viewBox: "0 0 24 24"
 };
 function Xt(e, t, n, o, r, i) {
-  return I(), A("svg", Qt, t[0] || (t[0] = [
+  return I(), A("svg", Qt, [...t[0] || (t[0] = [
     Fe('<g fill="none" stroke="#757575" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="16" stroke-dashoffset="16" d="M12 3c4.97 0 9 4.03 9 9"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="16;0"></animate><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"></animateTransform></path><path stroke-dasharray="64" stroke-dashoffset="64" stroke-opacity=".3" d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.2s" values="64;0"></animate></path></g>', 1)
-  ]));
+  ])]);
 }
-const _t = /* @__PURE__ */ G(Jt, [["render", Xt]]), en = {
+const _t = /* @__PURE__ */ q(Jt, [["render", Xt]]), en = {
   name: "RiCloseLine"
 }, tn = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -999,14 +999,14 @@ const _t = /* @__PURE__ */ G(Jt, [["render", Xt]]), en = {
   viewBox: "0 0 24 24"
 };
 function nn(e, t, n, o, r, i) {
-  return I(), A("svg", tn, t[0] || (t[0] = [
-    $("path", {
+  return I(), A("svg", tn, [...t[0] || (t[0] = [
+    k("path", {
       fill: "#757575",
       d: "m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z"
     }, null, -1)
-  ]));
+  ])]);
 }
-const on = /* @__PURE__ */ G(en, [["render", nn]]), rn = /* @__PURE__ */ we({
+const on = /* @__PURE__ */ q(en, [["render", nn]]), rn = /* @__PURE__ */ we({
   __name: "TabItem",
   props: {
     label: { type: [String, Function] },
@@ -1027,70 +1027,70 @@ const on = /* @__PURE__ */ G(en, [["render", nn]]), rn = /* @__PURE__ */ we({
   },
   emits: ["itemClick", "itemContextmenu", "itemClose"],
   setup(e, { emit: t }) {
-    const n = t, o = S(() => e.activeIndex !== e.itemIndex && e.activeIndex - 1 !== e.itemIndex), r = S(() => e.activeIndex === e.itemIndex), i = S(() => typeof e.label == "string" ? re("span", { class: `${w}__label` }, e.label) : e.label(e.itemKey, e.itemIndex)), s = S(() => e.loadingIcon?.(e.itemKey, e.itemIndex) ?? re(_t));
-    function u(a) {
-      a.stopPropagation(), n("itemClick", a), e.onClick?.(e.itemKey, e.itemIndex, a);
+    const n = t, o = M(() => e.activeIndex !== e.itemIndex && e.activeIndex - 1 !== e.itemIndex), r = M(() => e.activeIndex === e.itemIndex), i = M(() => typeof e.label == "string" ? re("span", { class: `${w}__label` }, e.label) : e.label(e.itemKey, e.itemIndex)), s = M(() => e.loadingIcon?.(e.itemKey, e.itemIndex) ?? re(_t));
+    function u(c) {
+      c.stopPropagation(), n("itemClick", c), e.onClick?.(e.itemKey, e.itemIndex, c);
     }
-    function f(a) {
-      n("itemContextmenu", a), e.onContextMenu?.(e.itemKey, e.itemIndex, a);
+    function f(c) {
+      n("itemContextmenu", c), e.onContextMenu?.(e.itemKey, e.itemIndex, c);
     }
-    function d(a) {
-      n("itemClose"), e.onClose?.(e.itemKey, e.itemIndex, a);
+    function d(c) {
+      n("itemClose"), e.onClose?.(e.itemKey, e.itemIndex, c);
     }
-    return (a, c) => (I(), A("div", {
+    return (c, l) => (I(), A("div", {
       class: C([
-        p(w),
+        x(w),
         {
-          [`${p(w)}--active`]: r.value,
-          [`${p(w)}--disabled`]: typeof a.disabled == "function" ? a.disabled(a.itemKey, a.itemIndex) : a.disabled
+          [`${x(w)}--active`]: r.value,
+          [`${x(w)}--disabled`]: typeof c.disabled == "function" ? c.disabled(c.itemKey, c.itemIndex) : c.disabled
         }
       ]),
       onClick: u,
       onContextmenu: f
     }, [
-      $("div", {
-        class: C([`${p(w)}__content`])
+      k("div", {
+        class: C([`${x(w)}__content`])
       }, [
-        $("div", {
-          class: C([`${p(w)}__icon`]),
-          style: _({ fontSize: `${a.iconSize}px` })
+        k("div", {
+          class: C([`${x(w)}__icon`]),
+          style: _({ fontSize: `${c.iconSize}px` })
         }, [
-          (I(), ee(ie(typeof a.loading == "function" ? a.loading(a.itemKey, a.itemIndex) : a.loading ? s.value : a.icon?.(a.itemKey, a.itemIndex) ?? void 0)))
+          (I(), ee(ie(typeof c.loading == "function" ? c.loading(c.itemKey, c.itemIndex) : c.loading ? s.value : c.icon?.(c.itemKey, c.itemIndex) ?? void 0)))
         ], 6),
-        $("div", {
-          class: C([`${p(w)}__slot`])
+        k("div", {
+          class: C([`${x(w)}__slot`])
         }, [
           (I(), ee(ie(i.value)))
         ], 2),
-        (typeof a.closable == "function" ? a.closable(a.itemKey, a.itemIndex) : a.closable) ? (I(), A("div", {
+        (typeof c.closable == "function" ? c.closable(c.itemKey, c.itemIndex) : c.closable) ? (I(), A("div", {
           key: 0,
-          class: C([`${p(w)}__close`]),
+          class: C([`${x(w)}__close`]),
           onClick: Oe(d, ["stop"])
         }, [
-          K(on)
+          D(on)
         ], 2)) : X("", !0)
       ], 2),
-      $("div", {
-        class: C([`${p(w)}__background`])
+      k("div", {
+        class: C([`${x(w)}__background`])
       }, [
-        c[0] || (c[0] = $("svg", {
+        l[0] || (l[0] = k("svg", {
           width: "10",
           height: "10"
         }, [
-          $("path", { d: "M 0 10 A 10 10 0 0 0 10 0 L 10 10 Z" })
+          k("path", { d: "M 0 10 A 10 10 0 0 0 10 0 L 10 10 Z" })
         ], -1)),
-        $("div", {
-          class: C([`${p(w)}__block`])
+        k("div", {
+          class: C([`${x(w)}__block`])
         }, null, 2),
-        c[1] || (c[1] = $("svg", {
+        l[1] || (l[1] = k("svg", {
           width: "10",
           height: "10"
         }, [
-          $("path", { d: "M 0 0 A 10 10 0 0 0 10 10 L 0 10 Z" })
+          k("path", { d: "M 0 0 A 10 10 0 0 0 10 10 L 0 10 Z" })
         ], -1))
       ], 2),
-      $("div", {
-        class: C([`${p(w)}__line`, o.value ? `${p(w)}__line--show` : ""])
+      k("div", {
+        class: C([`${x(w)}__line`, o.value ? `${x(w)}__line--show` : ""])
       }, null, 2)
     ], 34));
   }
@@ -1110,76 +1110,85 @@ const on = /* @__PURE__ */ G(en, [["render", nn]]), rn = /* @__PURE__ */ we({
   emits: ["update:value", "click", "contextmenu", "close", "add"],
   setup(e, { emit: t }) {
     const n = t;
-    bt("n-chrome-tabs", Dt());
-    const { background: o = "#F1F1F1", active: r = "#fff", primary: i = "rgba(0,0,0,.1)" } = e.colors ?? {}, s = S(() => e.value ? e.options?.findIndex((h) => h.key === e.value) : 0), { scrollRef: u, scrollToView: f } = Rt({ activeClassName: `.${w}--active`, direction: "horizontal" });
-    O(() => e.value, () => {
-      f();
+    bt("n-chrome-tabs", Ht());
+    const o = M(() => e.value ? e.options?.findIndex((l) => l.key === e.value) : 0), { scrollRef: r, scrollToView: i } = Rt({ activeClassName: `.${w}--active`, direction: "horizontal" });
+    P(() => e.value, () => {
+      i();
     }, {
       immediate: !0
     });
-    const d = S(() => E(o).darken(0.9).toHex()), a = S(() => E(r).darken(0.8).toHex()), c = S(() => E(i).darken(0.3).toHex());
-    function b(h, v) {
-      n("update:value", h), n("click", h, v);
+    const s = M(() => ({
+      background: "#F1F1F1",
+      active: "#fff",
+      primary: "rgba(0,0,0,.1)",
+      ...e.colors
+    })), u = M(() => ({
+      background: E(s.value.background).darken(0.8).toHex(),
+      active: E(s.value.active).darken(0.8).toHex(),
+      primary: E(s.value.primary).darken(0.3).toHex()
+    }));
+    function f(l, h) {
+      n("update:value", l), n("click", l, h);
     }
-    function M(h, v) {
-      n("contextmenu", h, v);
+    function d(l, h) {
+      n("contextmenu", l, h);
     }
-    function l(h, v) {
-      n("close", h, v);
+    function c(l, h) {
+      n("close", l, h);
     }
-    return (h, v) => (I(), A("div", {
-      class: C([p(P)]),
+    return (l, h) => (I(), A("div", {
+      class: C([x(j)]),
       style: _({
-        "--background-color": `${p(o)}`,
-        "--background-color-dark": `${d.value}`,
-        "--active-background-color": `${p(r)}`,
-        "--active-background-color-dark": `${a.value}`,
-        "--primary-color": `${p(i)}`,
-        "--primary-color-dark": `${c.value}`
+        "--background-color": `${s.value.background}`,
+        "--background-color-dark": `${u.value.background}`,
+        "--active-background-color": `${s.value.active}`,
+        "--active-background-color-dark": `${u.value.active}`,
+        "--primary-color": `${s.value.primary}`,
+        "--primary-color-dark": `${u.value.primary}`
       })
     }, [
-      h.dropdown ? (I(), A("div", {
+      l.dropdown ? (I(), A("div", {
         key: 0,
-        class: C([`${p(P)}__icon`])
+        class: C([`${x(j)}__icon`])
       }, [
-        K(Yt)
+        D(Yt)
       ], 2)) : X("", !0),
-      se(h.$slots, "prefix"),
-      $("div", {
+      se(l.$slots, "prefix"),
+      k("div", {
         ref_key: "scrollRef",
-        ref: u,
-        class: C([`${p(P)}__content`, h.contentClass]),
-        style: _(h.contentStyle)
+        ref: r,
+        class: C([`${x(j)}__content`, l.contentClass]),
+        style: _(l.contentStyle)
       }, [
-        K(Ve, {
+        D(Ve, {
           name: "group",
           tag: "div",
-          class: C([`${p(P)}__scroll`])
+          class: C([`${x(j)}__scroll`])
         }, {
-          default: De(() => [
-            (I(!0), A(He, null, We(h.options, ({ key: m, ...k }, B) => (I(), ee(rn, Ke({
-              key: m,
-              loading: h.loadingValue === m
-            }, { ref_for: !0 }, k, {
-              "item-key": m,
-              "item-index": B,
-              "active-index": s.value,
-              "icon-size": h.iconSize,
-              onItemClick: (L) => b(m, B),
-              onItemContextmenu: (L) => M(m, B),
-              onItemClose: (L) => l(m, B)
+          default: He(() => [
+            (I(!0), A(We, null, De(l.options, ({ key: $, ...a }, m) => (I(), ee(rn, Ke({
+              key: $,
+              loading: l.loadingValue === $
+            }, { ref_for: !0 }, a, {
+              "item-key": $,
+              "item-index": m,
+              "active-index": o.value,
+              "icon-size": l.iconSize,
+              onItemClick: (v) => f($, m),
+              onItemContextmenu: (v) => d($, m),
+              onItemClose: (v) => c($, m)
             }), null, 16, ["loading", "item-key", "item-index", "active-index", "icon-size", "onItemClick", "onItemContextmenu", "onItemClose"]))), 128))
           ]),
           _: 1
         }, 8, ["class"])
       ], 6),
-      se(h.$slots, "suffix"),
-      h.addable ? (I(), A("div", {
+      se(l.$slots, "suffix"),
+      l.addable ? (I(), A("div", {
         key: 1,
-        class: C([`${p(P)}__icon`]),
-        onClick: v[0] || (v[0] = (m) => n("add"))
+        class: C([`${x(j)}__icon`]),
+        onClick: h[0] || (h[0] = ($) => n("add"))
       }, [
-        K(qt)
+        D(qt)
       ], 2)) : X("", !0)
     ], 6));
   }