@oiij/chrome-tabs 0.0.1

package/dist/index.umd.cjs

@@ -0,0 +1,554 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["@oiij/chrome-tabs"] = {}, global.Vue));
+})(this, function(exports2, vue) {
+  "use strict";
+  function tryOnScopeDispose(fn) {
+    if (vue.getCurrentScope()) {
+      vue.onScopeDispose(fn);
+      return true;
+    }
+    return false;
+  }
+  const isClient = typeof window !== "undefined" && typeof document !== "undefined";
+  typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+  const noop = () => {
+  };
+  function createFilterWrapper(filter, fn) {
+    function wrapper(...args) {
+      return new Promise((resolve, reject) => {
+        Promise.resolve(filter(() => fn.apply(this, args), { fn, thisArg: this, args })).then(resolve).catch(reject);
+      });
+    }
+    return wrapper;
+  }
+  function debounceFilter(ms, options = {}) {
+    let timer;
+    let maxTimer;
+    let lastRejector = noop;
+    const _clearTimeout = (timer2) => {
+      clearTimeout(timer2);
+      lastRejector();
+      lastRejector = noop;
+    };
+    let lastInvoker;
+    const filter = (invoke) => {
+      const duration = vue.toValue(ms);
+      const maxDuration = vue.toValue(options.maxWait);
+      if (timer)
+        _clearTimeout(timer);
+      if (duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) {
+        if (maxTimer) {
+          _clearTimeout(maxTimer);
+          maxTimer = null;
+        }
+        return Promise.resolve(invoke());
+      }
+      return new Promise((resolve, reject) => {
+        lastRejector = options.rejectOnCancel ? reject : resolve;
+        lastInvoker = invoke;
+        if (maxDuration && !maxTimer) {
+          maxTimer = setTimeout(() => {
+            if (timer)
+              _clearTimeout(timer);
+            maxTimer = null;
+            resolve(lastInvoker());
+          }, maxDuration);
+        }
+        timer = setTimeout(() => {
+          if (maxTimer)
+            _clearTimeout(maxTimer);
+          maxTimer = null;
+          resolve(invoke());
+        }, duration);
+      });
+    };
+    return filter;
+  }
+  function getLifeCycleTarget(target) {
+    return vue.getCurrentInstance();
+  }
+  function toArray(value) {
+    return Array.isArray(value) ? value : [value];
+  }
+  function useDebounceFn(fn, ms = 200, options = {}) {
+    return createFilterWrapper(
+      debounceFilter(ms, options),
+      fn
+    );
+  }
+  function tryOnMounted(fn, sync = true, target) {
+    const instance = getLifeCycleTarget();
+    if (instance)
+      vue.onMounted(fn, target);
+    else if (sync)
+      fn();
+    else
+      vue.nextTick(fn);
+  }
+  const defaultWindow = isClient ? window : void 0;
+  function unrefElement(elRef) {
+    var _a;
+    const plain = vue.toValue(elRef);
+    return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+  }
+  function useMounted() {
+    const isMounted = vue.ref(false);
+    const instance = vue.getCurrentInstance();
+    if (instance) {
+      vue.onMounted(() => {
+        isMounted.value = true;
+      }, instance);
+    }
+    return isMounted;
+  }
+  function useSupported(callback) {
+    const isMounted = useMounted();
+    return vue.computed(() => {
+      isMounted.value;
+      return Boolean(callback());
+    });
+  }
+  function useResizeObserver(target, callback, options = {}) {
+    const { window: window2 = defaultWindow, ...observerOptions } = options;
+    let observer;
+    const isSupported = useSupported(() => window2 && "ResizeObserver" in window2);
+    const cleanup = () => {
+      if (observer) {
+        observer.disconnect();
+        observer = void 0;
+      }
+    };
+    const targets = vue.computed(() => {
+      const _targets = vue.toValue(target);
+      return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+    });
+    const stopWatch = vue.watch(
+      targets,
+      (els) => {
+        cleanup();
+        if (isSupported.value && window2) {
+          observer = new ResizeObserver(callback);
+          for (const _el of els) {
+            if (_el)
+              observer.observe(_el, observerOptions);
+          }
+        }
+      },
+      { immediate: true, flush: "post" }
+    );
+    const stop = () => {
+      cleanup();
+      stopWatch();
+    };
+    tryOnScopeDispose(stop);
+    return {
+      isSupported,
+      stop
+    };
+  }
+  function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+    const { window: window2 = defaultWindow, box = "content-box" } = options;
+    const isSVG = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+    });
+    const width = vue.ref(initialSize.width);
+    const height = vue.ref(initialSize.height);
+    const { stop: stop1 } = useResizeObserver(
+      target,
+      ([entry]) => {
+        const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
+        if (window2 && isSVG.value) {
+          const $elem = unrefElement(target);
+          if ($elem) {
+            const rect = $elem.getBoundingClientRect();
+            width.value = rect.width;
+            height.value = rect.height;
+          }
+        } else {
+          if (boxSize) {
+            const formatBoxSize = toArray(boxSize);
+            width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+            height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+          } else {
+            width.value = entry.contentRect.width;
+            height.value = entry.contentRect.height;
+          }
+        }
+      },
+      options
+    );
+    tryOnMounted(() => {
+      const ele = unrefElement(target);
+      if (ele) {
+        width.value = "offsetWidth" in ele ? ele.offsetWidth : initialSize.width;
+        height.value = "offsetHeight" in ele ? ele.offsetHeight : initialSize.height;
+      }
+    });
+    const stop2 = vue.watch(
+      () => unrefElement(target),
+      (ele) => {
+        width.value = ele ? initialSize.width : 0;
+        height.value = ele ? initialSize.height : 0;
+      }
+    );
+    function stop() {
+      stop1();
+      stop2();
+    }
+    return {
+      width,
+      height,
+      stop
+    };
+  }
+  function useInjectionKey(key) {
+    return Symbol(key);
+  }
+  function useScrollView(options) {
+    const { activeClassName = ".active", enableWheel = true } = options || {};
+    const scrollRef = vue.ref();
+    const { width } = useElementSize(scrollRef);
+    async function scrollToView() {
+      var _a;
+      if (!scrollRef.value)
+        return;
+      await vue.nextTick();
+      const activeEl = (_a = scrollRef.value) == null ? void 0 : _a.children[0].querySelector(activeClassName);
+      if (!activeEl)
+        return;
+      activeEl.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+    function wheelEvent(e2) {
+      var _a, _b;
+      const { deltaY } = e2;
+      if (deltaY > 0) {
+        (_a = scrollRef.value) == null ? void 0 : _a.scrollBy({
+          top: 0,
+          left: width.value,
+          behavior: "smooth"
+        });
+      } else {
+        (_b = scrollRef.value) == null ? void 0 : _b.scrollBy({
+          top: 0,
+          left: -width.value,
+          behavior: "smooth"
+        });
+      }
+    }
+    function init() {
+      if (!scrollRef.value || !enableWheel)
+        return;
+      scrollRef.value.addEventListener("wheel", wheelEvent);
+    }
+    function destroy() {
+      var _a;
+      (_a = scrollRef.value) == null ? void 0 : _a.removeEventListener("wheel", wheelEvent);
+    }
+    const debouncedScrollToView = useDebounceFn(scrollToView, 500);
+    vue.watch(width, () => {
+      debouncedScrollToView();
+    });
+    vue.onBeforeUnmount(() => {
+      destroy();
+    });
+    vue.onMounted(() => {
+      scrollToView();
+      init();
+    });
+    return {
+      scrollRef,
+      scrollToView
+    };
+  }
+  const _hoisted_1$1 = { class: "uno-iyw1ix" };
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    __name: "TabItem",
+    props: {
+      name: {},
+      disabled: { type: Boolean },
+      closeable: { type: Boolean },
+      showLine: { type: Boolean },
+      icon: { type: [Function, String] },
+      loading: { type: Boolean },
+      loadingRender: { type: Function, default: () => vue.h("i", { class: "i-line-md-loading-twotone-loop", style: { width: `16px`, height: `16px` } }) }
+    },
+    emits: ["close", "click", "contextmenu"],
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
+      const { activeName, list, pushItem, removeItem, itemClick } = vue.inject(tabsBarInjectionKey) || {};
+      const active = vue.computed(() => (activeName == null ? void 0 : activeName.value) === __props.name);
+      const activeIndex = vue.computed(() => list == null ? void 0 : list.value.findIndex((f2) => f2 === (activeName == null ? void 0 : activeName.value)));
+      const currentIndex = vue.computed(() => list == null ? void 0 : list.value.findIndex((f2) => f2 === __props.name));
+      const showLine = vue.computed(() => (activeIndex == null ? void 0 : activeIndex.value) !== (currentIndex == null ? void 0 : currentIndex.value) && ((activeIndex == null ? void 0 : activeIndex.value) ?? 0) - 1 !== (currentIndex == null ? void 0 : currentIndex.value));
+      function onClose() {
+        removeItem == null ? void 0 : removeItem(__props.name);
+        emit("close");
+      }
+      function onClick(ev) {
+        itemClick == null ? void 0 : itemClick(__props.name);
+        emit("click", ev);
+      }
+      function onContextMenu(ev) {
+        emit("contextmenu", ev);
+      }
+      vue.onMounted(() => {
+        pushItem == null ? void 0 : pushItem(__props.name);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["uno-ubq14l group", [active.value ? "tab-active" : "", _ctx.disabled ? "uno-4y9yog" : ""]]),
+          onClick,
+          onContextmenu: onContextMenu
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["uno-qjxywp", active.value ? "" : "uno-epu25o"])
+          }, [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.loading ? _ctx.loadingRender : _ctx.icon))),
+            vue.createElementVNode("div", _hoisted_1$1, [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _ctx.closeable ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "uno-r1pbch",
+              onClick: vue.withModifiers(onClose, ["stop"])
+            }, _cache[0] || (_cache[0] = [
+              vue.createElementVNode("i", { class: "uno-sjjwmq" }, null, -1)
+            ]))) : vue.createCommentVNode("", true)
+          ], 2),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["uno-mzsdgg", active.value ? "uno-h6cmdc" : "uno-m6t4oj"])
+          }, _cache[1] || (_cache[1] = [
+            vue.createStaticVNode('<svg width="10" height="10" class="uno-3sky1m"><path d="M 0 10 A 10 10 0 0 0 10 0 L 10 10 Z"></path></svg><div class="uno-nylnxp"></div><svg width="10" height="10" class="uno-3sky1m"><path d="M 0 0 A 10 10 0 0 0 10 10 L 0 10 Z"></path></svg>', 3)
+          ]), 2),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass([showLine.value ? "uno-h6cmdc" : "uno-m6t4oj", "uno-wqscdb"])
+          }, null, 2)
+        ], 34);
+      };
+    }
+  });
+  var r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, t = function(r2) {
+    return "string" == typeof r2 ? r2.length > 0 : "number" == typeof r2;
+  }, n = function(r2, t2, n2) {
+    return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = Math.pow(10, t2)), Math.round(n2 * r2) / n2 + 0;
+  }, e = function(r2, t2, n2) {
+    return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = 1), r2 > n2 ? n2 : r2 > t2 ? r2 : t2;
+  }, u = function(r2) {
+    return (r2 = isFinite(r2) ? r2 % 360 : 0) > 0 ? r2 : r2 + 360;
+  }, a = function(r2) {
+    return { r: e(r2.r, 0, 255), g: e(r2.g, 0, 255), b: e(r2.b, 0, 255), a: e(r2.a) };
+  }, o = function(r2) {
+    return { r: n(r2.r), g: n(r2.g), b: n(r2.b), a: n(r2.a, 3) };
+  }, i = /^#([0-9a-f]{3,8})$/i, s = function(r2) {
+    var t2 = r2.toString(16);
+    return t2.length < 2 ? "0" + t2 : t2;
+  }, h = function(r2) {
+    var t2 = r2.r, n2 = r2.g, e2 = r2.b, u2 = r2.a, a2 = Math.max(t2, n2, e2), o2 = a2 - Math.min(t2, n2, e2), i2 = o2 ? a2 === t2 ? (n2 - e2) / o2 : a2 === n2 ? 2 + (e2 - t2) / o2 : 4 + (t2 - n2) / o2 : 0;
+    return { h: 60 * (i2 < 0 ? i2 + 6 : i2), s: a2 ? o2 / a2 * 100 : 0, v: a2 / 255 * 100, a: u2 };
+  }, b = function(r2) {
+    var t2 = r2.h, n2 = r2.s, e2 = r2.v, u2 = r2.a;
+    t2 = t2 / 360 * 6, n2 /= 100, e2 /= 100;
+    var a2 = Math.floor(t2), o2 = e2 * (1 - n2), i2 = e2 * (1 - (t2 - a2) * n2), s2 = e2 * (1 - (1 - t2 + a2) * n2), h2 = a2 % 6;
+    return { r: 255 * [e2, i2, o2, o2, s2, e2][h2], g: 255 * [s2, e2, e2, i2, o2, o2][h2], b: 255 * [o2, o2, s2, e2, e2, i2][h2], a: u2 };
+  }, g = function(r2) {
+    return { h: u(r2.h), s: e(r2.s, 0, 100), l: e(r2.l, 0, 100), a: e(r2.a) };
+  }, d = function(r2) {
+    return { h: n(r2.h), s: n(r2.s), l: n(r2.l), a: n(r2.a, 3) };
+  }, f = function(r2) {
+    return b((n2 = (t2 = r2).s, { h: t2.h, s: (n2 *= ((e2 = t2.l) < 50 ? e2 : 100 - e2) / 100) > 0 ? 2 * n2 / (e2 + n2) * 100 : 0, v: e2 + n2, a: t2.a }));
+    var t2, n2, e2;
+  }, c = function(r2) {
+    return { h: (t2 = h(r2)).h, s: (u2 = (200 - (n2 = t2.s)) * (e2 = t2.v) / 100) > 0 && u2 < 200 ? n2 * e2 / 100 / (u2 <= 100 ? u2 : 200 - u2) * 100 : 0, l: u2 / 2, a: t2.a };
+    var t2, n2, e2, u2;
+  }, l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, p = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, v = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, m = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, y = { string: [[function(r2) {
+    var t2 = i.exec(r2);
+    return t2 ? (r2 = t2[1]).length <= 4 ? { r: parseInt(r2[0] + r2[0], 16), g: parseInt(r2[1] + r2[1], 16), b: parseInt(r2[2] + r2[2], 16), a: 4 === r2.length ? n(parseInt(r2[3] + r2[3], 16) / 255, 2) : 1 } : 6 === r2.length || 8 === r2.length ? { r: parseInt(r2.substr(0, 2), 16), g: parseInt(r2.substr(2, 2), 16), b: parseInt(r2.substr(4, 2), 16), a: 8 === r2.length ? n(parseInt(r2.substr(6, 2), 16) / 255, 2) : 1 } : null : null;
+  }, "hex"], [function(r2) {
+    var t2 = v.exec(r2) || m.exec(r2);
+    return t2 ? t2[2] !== t2[4] || t2[4] !== t2[6] ? null : a({ r: Number(t2[1]) / (t2[2] ? 100 / 255 : 1), g: Number(t2[3]) / (t2[4] ? 100 / 255 : 1), b: Number(t2[5]) / (t2[6] ? 100 / 255 : 1), a: void 0 === t2[7] ? 1 : Number(t2[7]) / (t2[8] ? 100 : 1) }) : null;
+  }, "rgb"], [function(t2) {
+    var n2 = l.exec(t2) || p.exec(t2);
+    if (!n2) return null;
+    var e2, u2, a2 = g({ h: (e2 = n2[1], u2 = n2[2], void 0 === u2 && (u2 = "deg"), Number(e2) * (r[u2] || 1)), s: Number(n2[3]), l: Number(n2[4]), a: void 0 === n2[5] ? 1 : Number(n2[5]) / (n2[6] ? 100 : 1) });
+    return f(a2);
+  }, "hsl"]], object: [[function(r2) {
+    var n2 = r2.r, e2 = r2.g, u2 = r2.b, o2 = r2.a, i2 = void 0 === o2 ? 1 : o2;
+    return t(n2) && t(e2) && t(u2) ? a({ r: Number(n2), g: Number(e2), b: Number(u2), a: Number(i2) }) : null;
+  }, "rgb"], [function(r2) {
+    var n2 = r2.h, e2 = r2.s, u2 = r2.l, a2 = r2.a, o2 = void 0 === a2 ? 1 : a2;
+    if (!t(n2) || !t(e2) || !t(u2)) return null;
+    var i2 = g({ h: Number(n2), s: Number(e2), l: Number(u2), a: Number(o2) });
+    return f(i2);
+  }, "hsl"], [function(r2) {
+    var n2 = r2.h, a2 = r2.s, o2 = r2.v, i2 = r2.a, s2 = void 0 === i2 ? 1 : i2;
+    if (!t(n2) || !t(a2) || !t(o2)) return null;
+    var h2 = function(r3) {
+      return { h: u(r3.h), s: e(r3.s, 0, 100), v: e(r3.v, 0, 100), a: e(r3.a) };
+    }({ h: Number(n2), s: Number(a2), v: Number(o2), a: Number(s2) });
+    return b(h2);
+  }, "hsv"]] }, N = function(r2, t2) {
+    for (var n2 = 0; n2 < t2.length; n2++) {
+      var e2 = t2[n2][0](r2);
+      if (e2) return [e2, t2[n2][1]];
+    }
+    return [null, void 0];
+  }, x = function(r2) {
+    return "string" == typeof r2 ? N(r2.trim(), y.string) : "object" == typeof r2 && null !== r2 ? N(r2, y.object) : [null, void 0];
+  }, M = function(r2, t2) {
+    var n2 = c(r2);
+    return { h: n2.h, s: e(n2.s + 100 * t2, 0, 100), l: n2.l, a: n2.a };
+  }, H = function(r2) {
+    return (299 * r2.r + 587 * r2.g + 114 * r2.b) / 1e3 / 255;
+  }, $ = function(r2, t2) {
+    var n2 = c(r2);
+    return { h: n2.h, s: n2.s, l: e(n2.l + 100 * t2, 0, 100), a: n2.a };
+  }, j = function() {
+    function r2(r3) {
+      this.parsed = x(r3)[0], this.rgba = this.parsed || { r: 0, g: 0, b: 0, a: 1 };
+    }
+    return r2.prototype.isValid = function() {
+      return null !== this.parsed;
+    }, r2.prototype.brightness = function() {
+      return n(H(this.rgba), 2);
+    }, r2.prototype.isDark = function() {
+      return H(this.rgba) < 0.5;
+    }, r2.prototype.isLight = function() {
+      return H(this.rgba) >= 0.5;
+    }, r2.prototype.toHex = function() {
+      return r3 = o(this.rgba), t2 = r3.r, e2 = r3.g, u2 = r3.b, i2 = (a2 = r3.a) < 1 ? s(n(255 * a2)) : "", "#" + s(t2) + s(e2) + s(u2) + i2;
+      var r3, t2, e2, u2, a2, i2;
+    }, r2.prototype.toRgb = function() {
+      return o(this.rgba);
+    }, r2.prototype.toRgbString = function() {
+      return r3 = o(this.rgba), t2 = r3.r, n2 = r3.g, e2 = r3.b, (u2 = r3.a) < 1 ? "rgba(" + t2 + ", " + n2 + ", " + e2 + ", " + u2 + ")" : "rgb(" + t2 + ", " + n2 + ", " + e2 + ")";
+      var r3, t2, n2, e2, u2;
+    }, r2.prototype.toHsl = function() {
+      return d(c(this.rgba));
+    }, r2.prototype.toHslString = function() {
+      return r3 = d(c(this.rgba)), t2 = r3.h, n2 = r3.s, e2 = r3.l, (u2 = r3.a) < 1 ? "hsla(" + t2 + ", " + n2 + "%, " + e2 + "%, " + u2 + ")" : "hsl(" + t2 + ", " + n2 + "%, " + e2 + "%)";
+      var r3, t2, n2, e2, u2;
+    }, r2.prototype.toHsv = function() {
+      return r3 = h(this.rgba), { h: n(r3.h), s: n(r3.s), v: n(r3.v), a: n(r3.a, 3) };
+      var r3;
+    }, r2.prototype.invert = function() {
+      return w({ r: 255 - (r3 = this.rgba).r, g: 255 - r3.g, b: 255 - r3.b, a: r3.a });
+      var r3;
+    }, r2.prototype.saturate = function(r3) {
+      return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, r3));
+    }, r2.prototype.desaturate = function(r3) {
+      return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, -r3));
+    }, r2.prototype.grayscale = function() {
+      return w(M(this.rgba, -1));
+    }, r2.prototype.lighten = function(r3) {
+      return void 0 === r3 && (r3 = 0.1), w($(this.rgba, r3));
+    }, r2.prototype.darken = function(r3) {
+      return void 0 === r3 && (r3 = 0.1), w($(this.rgba, -r3));
+    }, r2.prototype.rotate = function(r3) {
+      return void 0 === r3 && (r3 = 15), this.hue(this.hue() + r3);
+    }, r2.prototype.alpha = function(r3) {
+      return "number" == typeof r3 ? w({ r: (t2 = this.rgba).r, g: t2.g, b: t2.b, a: r3 }) : n(this.rgba.a, 3);
+      var t2;
+    }, r2.prototype.hue = function(r3) {
+      var t2 = c(this.rgba);
+      return "number" == typeof r3 ? w({ h: r3, s: t2.s, l: t2.l, a: t2.a }) : n(t2.h);
+    }, r2.prototype.isEqual = function(r3) {
+      return this.toHex() === w(r3).toHex();
+    }, r2;
+  }(), w = function(r2) {
+    return r2 instanceof j ? r2 : new j(r2);
+  };
+  const _hoisted_1 = { class: "uno-5zyl8j" };
+  const _hoisted_2 = { class: "uno-ov60i3" };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    __name: "Tabs",
+    props: /* @__PURE__ */ vue.mergeModels({
+      backgroundColor: { default: "#E5E7EB" },
+      activeBackgroundColor: { default: "#fff" },
+      primaryColor: { default: "rgba(251,191,36,1)" }
+    }, {
+      "value": {},
+      "valueModifiers": {}
+    }),
+    emits: /* @__PURE__ */ vue.mergeModels(["close"], ["update:value"]),
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
+      const value = vue.useModel(__props, "value");
+      const { scrollRef, scrollToView } = useScrollView({ activeClassName: ".tab-active" });
+      vue.watch(value, () => {
+        scrollToView();
+      });
+      const list = vue.ref([]);
+      const activeName = vue.computed(() => list.value.find((f2) => f2 === value.value));
+      vue.provide(tabsBarInjectionKey, {
+        list,
+        activeName,
+        pushItem(name) {
+          list.value.push(name);
+        },
+        removeItem(name) {
+          emit("close", name);
+          vue.nextTick(() => {
+            scrollToView();
+          });
+        },
+        itemClick(name) {
+          value.value = name;
+        }
+      });
+      const backgroundColorDark = vue.computed(() => w(__props.backgroundColor).darken(0.8).toHex());
+      const activeBackgroundColorDark = vue.computed(() => w(__props.activeBackgroundColor).darken(0.8).toHex());
+      const primaryColorDark = vue.computed(() => w(__props.primaryColor).darken(0.3).toHex());
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "uno-f9asjx",
+          style: vue.normalizeStyle({
+            "--tabs-bar-background-color": `${_ctx.backgroundColor}`,
+            "--tabs-bar-background-color-dark": `${backgroundColorDark.value}`,
+            "--tabs-bar-active-background-color": `${_ctx.activeBackgroundColor}`,
+            "--tabs-bar-active-background-color-dark": `${activeBackgroundColorDark.value}`,
+            "--tabs-bar-primary-color": `${_ctx.primaryColor}`,
+            "--tabs-bar-primary-color-dark": `${primaryColorDark.value}`
+          })
+        }, [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createElementVNode("div", _hoisted_2, [
+              vue.renderSlot(_ctx.$slots, "prefix", {}, () => [
+                _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "uno-kq7run" }, [
+                  vue.createElementVNode("i", { class: "i-ri-arrow-down-s-line" })
+                ], -1))
+              ])
+            ]),
+            vue.createElementVNode("div", {
+              ref_key: "scrollRef",
+              ref: scrollRef,
+              class: "uno-23n4xq"
+            }, [
+              vue.createVNode(vue.TransitionGroup, {
+                name: "group",
+                tag: "div",
+                class: "uno-r0jwks"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+              })
+            ], 512),
+            vue.renderSlot(_ctx.$slots, "suffix")
+          ]),
+          _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "uno-kfa0e9" }, null, -1))
+        ], 4);
+      };
+    }
+  });
+  const tabsBarInjectionKey = useInjectionKey("tabs-bar-injection-key");
+  exports2.CTabItem = _sfc_main$1;
+  exports2.CTabs = _sfc_main;
+  exports2.tabsBarInjectionKey = tabsBarInjectionKey;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@oiij/chrome-tabs",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "",
+  "author": "oiij",
+  "license": "MIT",
+  "homepage": "https://github.com/oiij/chrome-tabs",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:oiij/chrome-tabs.git"
+  },
+  "bugs": "https://github.com/oiij/chrome-tabs/issues",
+  "keywords": [
+    "chrome-tabs"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vue-tsc --noEmit && vite build",
+    "docs:dev": "vitepress dev .docs",
+    "docs:build": "vitepress build .docs",
+    "docs:preview": "vitepress preview .docs",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "prepublishOnly": "pnpm build",
+    "release": "bumpp -r && npm publish --access public",
+    "awe": "pnpx are-we-esm",
+    "nmi": "pnpx node-modules-inspector",
+    "start": "esno src/index.ts",
+    "test": "vitest",
+    "update:deps": "taze -w && pnpm i",
+    "type:check": "vue-tsc --noEmit",
+    "cz": "czg",
+    "commit": "git pull && git add -A && pnpm cz && git push",
+    "link": "pnpm link --global",
+    "preinstall": "npx only-allow pnpm"
+  },
+  "dependencies": {
+    "@oiij/use": "^0.0.1",
+    "colord": "^2.9.3"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^4.1.1",
+    "@iconify-json/line-md": "^1.2.5",
+    "@iconify-json/ri": "^1.2.5",
+    "@oiij/tsconfig": "^0.0.1",
+    "@types/node": "^22.13.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/ui": "^3.0.5",
+    "bumpp": "^10.0.2",
+    "commitlint": "^19.7.1",
+    "cz-git": "^1.11.0",
+    "czg": "^1.11.0",
+    "eslint": "^9.20.0",
+    "eslint-plugin-format": "^1.0.1",
+    "esno": "^4.8.0",
+    "lint-staged": "^15.4.3",
+    "simple-git-hooks": "^2.11.1",
+    "taze": "^18.4.0",
+    "tsup": "8.3.6",
+    "typescript": "^5.7.3",
+    "unbuild": "^3.3.1",
+    "unocss": "^65.4.3",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitepress": "^1.6.3",
+    "vitest": "^3.0.5",
+    "vue-tsc": "^2.2.0"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged && pnpm type:check"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "pnpm lint:fix"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}