vlite3 1.2.16 → 1.3.1

package/components/Tabes/Tabes.vue2.js

@@ -1,8 +1,9 @@
-import { defineComponent as T, ref as u, watch as l, onMounted as D, computed as p, openBlock as i, createElementBlock as v, normalizeClass as d, normalizeStyle as N, createCommentVNode as x, Fragment as O, renderList as P, createBlock as h, resolveDynamicComponent as F, mergeProps as _, withCtx as q, createElementVNode as G, toDisplayString as H, nextTick as J } from "vue";
-import { useResizeObserver as K } from "@vueuse/core";
-import Q from "../Icon.vue.js";
-import { $t as U } from "../../utils/i18n.js";
-const ee = /* @__PURE__ */ T({
+import { defineComponent as Z, ref as d, watch as m, onMounted as _, computed as v, openBlock as g, createElementBlock as z, normalizeClass as l, withDirectives as x, createVNode as h, vShow as y, createElementVNode as f, normalizeStyle as ee, createCommentVNode as j, Fragment as te, renderList as re, createBlock as M, resolveDynamicComponent as ne, mergeProps as ae, withCtx as se, toDisplayString as oe, nextTick as le } from "vue";
+import { useResizeObserver as T } from "@vueuse/core";
+import R from "../Icon.vue.js";
+import A from "../FadeOverlay/FadeOverlay.vue.js";
+import { $t as ie } from "../../utils/i18n.js";
+const me = /* @__PURE__ */ Z({
   __name: "Tabes",
   props: {
     options: {},
@@ -15,36 +16,92 @@ const ee = /* @__PURE__ */ T({
     tabClass: {}
   },
   emits: ["update:modelValue", "change"],
-  setup(s, { emit: C }) {
-    const r = s, y = C, f = u(null), b = u(/* @__PURE__ */ new Map()), k = (e, n) => {
-      e ? b.value.set(n, e) : b.value.delete(n);
-    }, m = u({
+  setup(c, { emit: E }) {
+    const t = c, $ = E, b = d(null), i = d(null), p = d(/* @__PURE__ */ new Map()), w = d(!1), C = d(!1), s = () => {
+      if (!i.value) return;
+      const { scrollLeft: e, scrollWidth: n, clientWidth: r } = i.value;
+      w.value = e > 1, C.value = Math.ceil(e + r) < n - 1;
+    }, S = (e) => {
+      i.value && i.value.scrollBy({ left: e, behavior: "smooth" });
+    }, V = () => {
+      if (!i.value || !b.value) return;
+      const e = p.value.get(t.modelValue);
+      if (!e) return;
+      const n = i.value, r = e.getBoundingClientRect(), a = n.getBoundingClientRect(), o = 40;
+      r.left < a.left + o ? n.scrollBy({
+        left: r.left - a.left - o,
+        behavior: "smooth"
+      }) : r.right > a.right - o && n.scrollBy({
+        left: r.right - a.right + o,
+        behavior: "smooth"
+      });
+    };
+    T(i, s);
+    const O = (e, n) => {
+      e ? p.value.set(n, e) : p.value.delete(n);
+    }, k = d({
       width: "0px",
       height: "0px",
       transform: "translate(0px, 0px)",
       opacity: 0
-    }), g = u(!1), o = async () => {
-      await J();
-      const e = f.value, n = b.value.get(r.modelValue);
+    }), B = d(!1), u = async () => {
+      await le();
+      const e = b.value, n = p.value.get(t.modelValue);
       if (!e || !n) {
-        m.value.opacity = 0;
+        k.value.opacity = 0;
         return;
       }
-      const t = e.getBoundingClientRect(), a = n.getBoundingClientRect(), c = a.left - t.left, j = a.top - t.top, A = a.width, E = a.height;
-      m.value = {
-        width: `${A}px`,
-        height: `${E}px`,
-        transform: `translate(${c}px, ${j}px)`,
+      const r = e.getBoundingClientRect(), a = n.getBoundingClientRect(), o = a.left - r.left, U = a.top - r.top, X = a.width, Y = a.height;
+      k.value = {
+        width: `${X}px`,
+        height: `${Y}px`,
+        transform: `translate(${o}px, ${U}px)`,
         opacity: 1
-      }, g.value || setTimeout(() => {
-        g.value = !0;
+      }, B.value || setTimeout(() => {
+        B.value = !0;
       }, 50);
     };
-    K(f, o), l(() => r.modelValue, o), l(() => r.options, o, { deep: !0 }), l(() => r.size, o), l(() => r.block, o), l(() => r.wrap, o), D(o);
-    const w = (e) => {
-      e.disabled || (y("update:modelValue", e.value), y("change", e.value));
-    }, z = p(() => {
-      const e = r.variant === "line", n = {
+    T(b, () => {
+      u(), s();
+    }), m(
+      () => t.modelValue,
+      async () => {
+        await u(), V();
+      }
+    ), m(
+      () => t.options,
+      async () => {
+        await u(), s();
+      },
+      { deep: !0 }
+    ), m(
+      () => t.size,
+      async () => {
+        await u(), s();
+      }
+    ), m(
+      () => t.block,
+      async () => {
+        await u(), s();
+      }
+    ), m(
+      () => t.wrap,
+      async () => {
+        await u(), s();
+      }
+    ), _(async () => {
+      await u(), s(), setTimeout(s, 100), setTimeout(V, 100);
+    });
+    const D = v(() => {
+      const e = t.variant === "line";
+      return t.block || e ? "flex w-full relative" : "inline-flex max-w-full relative";
+    }), L = v(() => [
+      "absolute top-0 bottom-0 z-20 flex items-center pointer-events-none transition-opacity duration-200",
+      t.variant === "line" ? "pb-[10px]" : ""
+    ]), N = (e) => {
+      e.disabled || ($("update:modelValue", e.value), $("change", e.value));
+    }, P = v(() => {
+      const e = t.variant === "line", n = {
         surface: "bg-secondary/80 p-1",
         primary: "bg-secondary p-1",
         secondary: "bg-secondary p-1",
@@ -52,23 +109,23 @@ const ee = /* @__PURE__ */ T({
         success: "bg-success/10 p-1",
         outline: "bg-transparent border border-border p-1",
         line: "bg-transparent gap-6 rounded-none p-0 border-b border-border"
-      }, t = r.wrap && !e ? "flex-wrap" : "";
-      return [`${r.block || e ? "flex w-full" : "inline-flex"} rounded-lg relative isolate ${t}`, n[r.variant]];
-    }), $ = {
+      }, r = t.wrap && !e ? "flex-wrap" : "";
+      return [`${t.block || e ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${r}`, n[t.variant]];
+    }), I = v(() => t.variant === "surface" || t.variant === "primary" || t.variant === "secondary" ? "var(--color-secondary)" : t.variant === "danger" ? "color-mix(in srgb, var(--color-danger) 10%, transparent)" : t.variant === "success" ? "color-mix(in srgb, var(--color-success) 10%, transparent)" : "var(--color-background)"), W = {
       sm: "text-xs px-2.5 py-1",
       md: "-text-fs-2 px-3 py-1",
       lg: "-text-fs-1 px-4 py-1"
-    }, V = p(() => {
-      const e = r.variant === "line", n = e ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 pb-2 border-b-2 border-transparent hover:text-foreground" : "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50", t = (r.block || r.wrap) && !e ? "flex-1" : "";
-      return [n, t];
-    }), R = (e) => {
-      const n = e.value === r.modelValue, t = r.variant === "line";
+    }, F = v(() => {
+      const e = t.variant === "line", n = e ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 pb-3 border-b-2 border-transparent hover:text-foreground shrink-0" : "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50 shrink-0", r = (t.block || t.wrap) && !e ? "flex-1" : "";
+      return [n, r];
+    }), q = (e) => {
+      const n = e.value === t.modelValue, r = t.variant === "line";
       let a = "";
       if (n)
-        if (t)
+        if (r)
           a = "text-primary";
         else
-          switch (r.variant) {
+          switch (t.variant) {
             case "surface":
               a = "text-foreground";
               break;
@@ -91,59 +148,124 @@ const ee = /* @__PURE__ */ T({
               a = "text-foreground";
           }
       else
-        a = t ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
-      const c = e.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [V.value, a, r?.tabClass, c].join(" ");
-    }, B = p(() => {
-      const n = `absolute left-0 top-0 z-0 pointer-events-none ${g.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
-      return r.variant === "line" ? `${n} !h-[2px] !top-auto bottom-0` : `${n} rounded-md shadow-sm`;
-    }), S = () => ({
-      surface: "bg-background",
+        a = r ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
+      const o = e.disabled ? "opacity-50 cursor-not-allowed" : "";
+      return [F.value, a, t?.tabClass, o].join(" ");
+    }, G = v(() => {
+      const n = `absolute left-0 top-0 z-0 pointer-events-none ${B.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
+      return t.variant === "line" ? `${n} !h-[2px] !top-auto bottom-0` : `${n} rounded-md shadow-sm`;
+    }), H = () => ({
+      surface: "bg-[#ffff] dark:bg-[#0B0B0B]",
       primary: "bg-primary",
       secondary: "bg-secondary-foreground",
       danger: "bg-danger",
       success: "bg-success",
       outline: "bg-accent/50 ring-1 ring-border",
       line: "bg-primary"
-    })[r.variant], I = (e) => e.labelI18n ? U(e.labelI18n) : e.label, L = (e) => e.to ? "router-link" : e.href ? "a" : "button", M = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" };
-    return (e, n) => (i(), v("div", {
-      ref_key: "containerRef",
-      ref: f,
-      class: d(z.value),
-      role: "tablist",
-      "data-tabes": ""
+    })[t.variant], J = (e) => e.labelI18n ? ie(e.labelI18n) : e.label, K = (e) => e.to ? "router-link" : e.href ? "a" : "button", Q = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" };
+    return (e, n) => (g(), z("div", {
+      class: l([D.value, "group"])
     }, [
-      s.modelValue !== void 0 && !s.wrap ? (i(), v("div", {
-        key: 0,
-        class: d([B.value, S()]),
-        style: N(m.value)
-      }, null, 6)) : x("", !0),
-      (i(!0), v(O, null, P(s.options, (t) => (i(), h(F(L(t)), _({
-        key: t.value,
-        ref_for: !0,
-        ref: (a) => k(a?.$el || a, t.value),
-        role: "tab",
-        "aria-selected": s.modelValue === t.value,
-        disabled: t.disabled,
-        class: [R(t), $[r.size]]
-      }, { ref_for: !0 }, M(t), {
-        onClick: (a) => w(t)
-      }), {
-        default: q(() => [
-          t.icon ? (i(), h(Q, {
+      x(h(A, {
+        direction: "left",
+        color: I.value,
+        coverage: "100px",
+        blur: "40px",
+        easing: "smooth",
+        tintOpacity: 1,
+        class: l(["z-10 pointer-events-none", t.variant === "line" ? "" : "rounded-l-lg"])
+      }, null, 8, ["color", "class"]), [
+        [y, w.value]
+      ]),
+      x(f("div", {
+        class: l(["left-0 pl-1", L.value])
+      }, [
+        f("button", {
+          onClick: n[0] || (n[0] = (r) => S(-200)),
+          class: "pointer-events-auto h-full px-1 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors focus:outline-none",
+          "aria-label": "Scroll left"
+        }, [
+          h(R, {
+            icon: "lucide:chevron-left",
+            class: "w-5 h-5"
+          })
+        ])
+      ], 2), [
+        [y, w.value]
+      ]),
+      f("div", {
+        ref_key: "scrollRef",
+        ref: i,
+        class: "flex-1 min-w-0 max-w-full overflow-x-auto scrollbar-hide scroll-smooth",
+        onScroll: s
+      }, [
+        f("div", {
+          ref_key: "containerRef",
+          ref: b,
+          class: l([P.value, "tabes-container"]),
+          role: "tablist",
+          "data-tabes": ""
+        }, [
+          c.modelValue !== void 0 && !c.wrap ? (g(), z("div", {
             key: 0,
-            icon: t.icon,
-            class: d(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
-          }, null, 8, ["icon", "class"])) : x("", !0),
-          G("span", {
-            class: d(["whitespace-nowrap z-20 relative", s.textClass])
-          }, H(I(t)), 3)
-        ]),
-        _: 2
-      }, 1040, ["aria-selected", "disabled", "class", "onClick"]))), 128))
+            class: l([G.value, H()]),
+            style: ee(k.value)
+          }, null, 6)) : j("", !0),
+          (g(!0), z(te, null, re(c.options, (r) => (g(), M(ne(K(r)), ae({
+            key: r.value,
+            ref_for: !0,
+            ref: (a) => O(a?.$el || a, r.value),
+            role: "tab",
+            "aria-selected": c.modelValue === r.value,
+            disabled: r.disabled,
+            class: [q(r), W[t.size]]
+          }, { ref_for: !0 }, Q(r), {
+            onClick: (a) => N(r)
+          }), {
+            default: se(() => [
+              r.icon ? (g(), M(R, {
+                key: 0,
+                icon: r.icon,
+                class: l(c.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
+              }, null, 8, ["icon", "class"])) : j("", !0),
+              f("span", {
+                class: l(["whitespace-nowrap z-20 relative", c.textClass])
+              }, oe(J(r)), 3)
+            ]),
+            _: 2
+          }, 1040, ["aria-selected", "disabled", "class", "onClick"]))), 128))
+        ], 2)
+      ], 544),
+      x(h(A, {
+        direction: "right",
+        color: I.value,
+        coverage: "100px",
+        blur: "40",
+        easing: "smooth",
+        tintOpacity: 1,
+        class: l(["z-10 pointer-events-none", t.variant === "line" ? "" : "rounded-r-lg"])
+      }, null, 8, ["color", "class"]), [
+        [y, C.value]
+      ]),
+      x(f("div", {
+        class: l(["right-0 pr-1", L.value])
+      }, [
+        f("button", {
+          onClick: n[1] || (n[1] = (r) => S(200)),
+          class: "pointer-events-auto h-full px-1 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors focus:outline-none",
+          "aria-label": "Scroll right"
+        }, [
+          h(R, {
+            icon: "lucide:chevron-right",
+            class: "w-5 h-5"
+          })
+        ])
+      ], 2), [
+        [y, C.value]
+      ])
     ], 2));
   }
 });
 export {
-  ee as default
+  me as default
 };

package/components/Workbook/WorkbookAddButton.vue.js

@@ -5,7 +5,7 @@ const _ = /* @__PURE__ */ l({
   __name: "WorkbookAddButton",
   emits: ["click"],
   setup(a, { emit: o }) {
-    const n = o, i = c(() => {
+    const r = o, n = c(() => {
       const t = u("vlite.workbook.addSheet");
       return t !== "vlite.workbook.addSheet" ? t : "Add New Sheet";
     });
@@ -13,10 +13,10 @@ const _ = /* @__PURE__ */ l({
       variant: "ghost",
       size: "md",
       icon: "lucide:plus",
-      title: i.value,
+      title: n.value,
       rounded: "none",
-      class: "h-full!",
-      onClick: e[0] || (e[0] = (r) => n("click", r))
+      class: "h-full! hover:bg-gray-250!",
+      onClick: e[0] || (e[0] = (i) => r("click", i))
     }, null, 8, ["title"]));
   }
 });

package/components/index.d.ts

@@ -25,6 +25,7 @@ export { Dropdown } from './Dropdown';
 export { Empty } from './Empty';
 export { FilePicker } from './FilePicker';
 export { FileTree } from './FileTree';
+export { FadeOverlay } from './FadeOverlay';
 export { Footer } from './Footer';
 export { Form } from './Form';
 export { default as FormFields } from './Form/FormFields.vue';

package/index.d.ts

@@ -77,6 +77,7 @@ export { default as CheckBox } from './components/CheckBox.vue';
 export { default as Textarea } from './components/Textarea.vue';
 export { default as Radio } from './components/Radio.vue';
 export { default as RadioGroup } from './components/RadioGroup.vue';
+export * from './components/FadeOverlay';
 export { default as SidePanel } from './components/SidePanel.vue';
 export { default as DatePicker } from './components/DatePicker.vue';
 export { default as IconPicker } from './components/IconPicker.vue';