@oiij/chrome-tabs 0.0.1

package/dist/index.js

@@ -0,0 +1,551 @@
+import { onMounted, nextTick, getCurrentScope, onScopeDispose, getCurrentInstance, toValue, computed, ref, watch, onBeforeUnmount, defineComponent, h as h$1, inject, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, resolveDynamicComponent, renderSlot, withModifiers, createStaticVNode, mergeModels, useModel, provide, normalizeStyle, createVNode, TransitionGroup, withCtx } from "vue";
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    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 = toValue(ms);
+    const maxDuration = 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 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)
+    onMounted(fn, target);
+  else if (sync)
+    fn();
+  else
+    nextTick(fn);
+}
+const defaultWindow = isClient ? window : void 0;
+function unrefElement(elRef) {
+  var _a;
+  const plain = toValue(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+function useMounted() {
+  const isMounted = ref(false);
+  const instance = getCurrentInstance();
+  if (instance) {
+    onMounted(() => {
+      isMounted.value = true;
+    }, instance);
+  }
+  return isMounted;
+}
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return 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 = computed(() => {
+    const _targets = toValue(target);
+    return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+  });
+  const stopWatch = 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 = computed(() => {
+    var _a, _b;
+    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+  });
+  const width = ref(initialSize.width);
+  const height = 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 = 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 = ref();
+  const { width } = useElementSize(scrollRef);
+  async function scrollToView() {
+    var _a;
+    if (!scrollRef.value)
+      return;
+    await 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);
+  watch(width, () => {
+    debouncedScrollToView();
+  });
+  onBeforeUnmount(() => {
+    destroy();
+  });
+  onMounted(() => {
+    scrollToView();
+    init();
+  });
+  return {
+    scrollRef,
+    scrollToView
+  };
+}
+const _hoisted_1$1 = { class: "uno-iyw1ix" };
+const _sfc_main$1 = /* @__PURE__ */ 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: () => h$1("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 } = inject(tabsBarInjectionKey) || {};
+    const active = computed(() => (activeName == null ? void 0 : activeName.value) === __props.name);
+    const activeIndex = computed(() => list == null ? void 0 : list.value.findIndex((f2) => f2 === (activeName == null ? void 0 : activeName.value)));
+    const currentIndex = computed(() => list == null ? void 0 : list.value.findIndex((f2) => f2 === __props.name));
+    const showLine = 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);
+    }
+    onMounted(() => {
+      pushItem == null ? void 0 : pushItem(__props.name);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["uno-ubq14l group", [active.value ? "tab-active" : "", _ctx.disabled ? "uno-4y9yog" : ""]]),
+        onClick,
+        onContextmenu: onContextMenu
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["uno-qjxywp", active.value ? "" : "uno-epu25o"])
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.loading ? _ctx.loadingRender : _ctx.icon))),
+          createElementVNode("div", _hoisted_1$1, [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _ctx.closeable ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "uno-r1pbch",
+            onClick: withModifiers(onClose, ["stop"])
+          }, _cache[0] || (_cache[0] = [
+            createElementVNode("i", { class: "uno-sjjwmq" }, null, -1)
+          ]))) : createCommentVNode("", true)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(["uno-mzsdgg", active.value ? "uno-h6cmdc" : "uno-m6t4oj"])
+        }, _cache[1] || (_cache[1] = [
+          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),
+        createElementVNode("div", {
+          class: 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__ */ defineComponent({
+  __name: "Tabs",
+  props: /* @__PURE__ */ mergeModels({
+    backgroundColor: { default: "#E5E7EB" },
+    activeBackgroundColor: { default: "#fff" },
+    primaryColor: { default: "rgba(251,191,36,1)" }
+  }, {
+    "value": {},
+    "valueModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["close"], ["update:value"]),
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const value = useModel(__props, "value");
+    const { scrollRef, scrollToView } = useScrollView({ activeClassName: ".tab-active" });
+    watch(value, () => {
+      scrollToView();
+    });
+    const list = ref([]);
+    const activeName = computed(() => list.value.find((f2) => f2 === value.value));
+    provide(tabsBarInjectionKey, {
+      list,
+      activeName,
+      pushItem(name) {
+        list.value.push(name);
+      },
+      removeItem(name) {
+        emit("close", name);
+        nextTick(() => {
+          scrollToView();
+        });
+      },
+      itemClick(name) {
+        value.value = name;
+      }
+    });
+    const backgroundColorDark = computed(() => w(__props.backgroundColor).darken(0.8).toHex());
+    const activeBackgroundColorDark = computed(() => w(__props.activeBackgroundColor).darken(0.8).toHex());
+    const primaryColorDark = computed(() => w(__props.primaryColor).darken(0.3).toHex());
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "uno-f9asjx",
+        style: 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}`
+        })
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            renderSlot(_ctx.$slots, "prefix", {}, () => [
+              _cache[0] || (_cache[0] = createElementVNode("div", { class: "uno-kq7run" }, [
+                createElementVNode("i", { class: "i-ri-arrow-down-s-line" })
+              ], -1))
+            ])
+          ]),
+          createElementVNode("div", {
+            ref_key: "scrollRef",
+            ref: scrollRef,
+            class: "uno-23n4xq"
+          }, [
+            createVNode(TransitionGroup, {
+              name: "group",
+              tag: "div",
+              class: "uno-r0jwks"
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "default")
+              ]),
+              _: 3
+            })
+          ], 512),
+          renderSlot(_ctx.$slots, "suffix")
+        ]),
+        _cache[1] || (_cache[1] = createElementVNode("div", { class: "uno-kfa0e9" }, null, -1))
+      ], 4);
+    };
+  }
+});
+const tabsBarInjectionKey = useInjectionKey("tabs-bar-injection-key");
+export {
+  _sfc_main$1 as CTabItem,
+  _sfc_main as CTabs,
+  tabsBarInjectionKey
+};