@roku-ui/vue 0.18.1 → 0.18.2

package/dist/index.js

@@ -1223,14 +1223,14 @@ function Bn(e, r, t, n = {}) {
   }), $ || _();
   function I(k, R) {
     if (u) {
-      const V = {
+      const B = {
         key: e,
         oldValue: k,
         newValue: R,
         storageArea: t
       };
-      u.dispatchEvent(t instanceof Storage ? new StorageEvent("storage", V) : new CustomEvent(Kt, {
-        detail: V
+      u.dispatchEvent(t instanceof Storage ? new StorageEvent("storage", B) : new CustomEvent(Kt, {
+        detail: B
       }));
     }
   }
@@ -1240,8 +1240,8 @@ function Bn(e, r, t, n = {}) {
       if (k == null)
         I(R, null), t.removeItem(e);
       else {
-        const V = h.write(k);
-        R !== V && (t.setItem(e, V), I(R, V));
+        const B = h.write(k);
+        R !== B && (t.setItem(e, B), I(R, B));
       }
     } catch (R) {
       y(R);
@@ -1252,8 +1252,8 @@ function Bn(e, r, t, n = {}) {
     if (R == null)
       return o && b != null && t.setItem(e, h.write(b)), b;
     if (!k && c) {
-      const V = h.read(R);
-      return typeof c == "function" ? c(V, b) : w === "object" && !Array.isArray(V) ? { ...b, ...V } : V;
+      const B = h.read(R);
+      return typeof c == "function" ? c(B, b) : w === "object" && !Array.isArray(B) ? { ...b, ...B } : B;
     } else return typeof R != "string" ? R : h.read(R);
   }
   function _(k) {
@@ -1485,7 +1485,7 @@ function Ln(e, r = {}) {
     }
   });
   function p(g, _) {
-    var T, k, R, V;
+    var T, k, R, B;
     if (!c)
       return;
     const z = K(e);
@@ -1496,7 +1496,7 @@ function Ln(e, r = {}) {
       left: (k = K(g)) != null ? k : y.value,
       behavior: K(o)
     });
-    const j = ((V = z == null ? void 0 : z.document) == null ? void 0 : V.documentElement) || (z == null ? void 0 : z.documentElement) || z;
+    const j = ((B = z == null ? void 0 : z.document) == null ? void 0 : B.documentElement) || (z == null ? void 0 : z.documentElement) || z;
     y != null && (u.value = j.scrollLeft), $ != null && (f.value = j.scrollTop);
   }
   const b = C(!1), w = Fe({
@@ -1515,14 +1515,14 @@ function Ln(e, r = {}) {
     var _;
     if (!c)
       return;
-    const T = ((_ = g == null ? void 0 : g.document) == null ? void 0 : _.documentElement) || (g == null ? void 0 : g.documentElement) || ae(g), { display: k, flexDirection: R } = getComputedStyle(T), V = T.scrollLeft;
-    h.left = V < u.value, h.right = V > u.value;
-    const z = Math.abs(V) <= (i.left || 0), j = Math.abs(V) + T.clientWidth >= T.scrollWidth - (i.right || 0) - Jt;
-    k === "flex" && R === "row-reverse" ? (w.left = j, w.right = z) : (w.left = z, w.right = j), u.value = V;
+    const T = ((_ = g == null ? void 0 : g.document) == null ? void 0 : _.documentElement) || (g == null ? void 0 : g.documentElement) || ae(g), { display: k, flexDirection: R } = getComputedStyle(T), B = T.scrollLeft;
+    h.left = B < u.value, h.right = B > u.value;
+    const z = Math.abs(B) <= (i.left || 0), j = Math.abs(B) + T.clientWidth >= T.scrollWidth - (i.right || 0) - Jt;
+    k === "flex" && R === "row-reverse" ? (w.left = j, w.right = z) : (w.left = z, w.right = j), u.value = B;
     let X = T.scrollTop;
     g === c.document && !X && (X = c.document.body.scrollTop), h.top = X < f.value, h.bottom = X > f.value;
-    const fe = Math.abs(X) <= (i.top || 0), B = Math.abs(X) + T.clientHeight >= T.scrollHeight - (i.bottom || 0) - Jt;
-    k === "flex" && R === "column-reverse" ? (w.top = B, w.bottom = fe) : (w.top = fe, w.bottom = B), f.value = X;
+    const fe = Math.abs(X) <= (i.top || 0), V = Math.abs(X) + T.clientHeight >= T.scrollHeight - (i.bottom || 0) - Jt;
+    k === "flex" && R === "column-reverse" ? (w.top = V, w.bottom = fe) : (w.top = fe, w.bottom = V), f.value = X;
   }, H = (g) => {
     var _;
     if (!c)
@@ -3012,6 +3012,7 @@ const Vl = {
     trigger: {
       default: "click"
     },
+    classes: {},
     color: {
       default: "primary"
     }
@@ -3049,6 +3050,10 @@ const Vl = {
       });
     }), $t(f, () => {
       s(!1);
+    }, {
+      capture: !0
+    }), N(window, "contextmenu", () => {
+      s(!1);
     });
     const b = C([-1]);
     ce(() => {
@@ -3136,22 +3141,25 @@ const Vl = {
       position: "absolute"
     } : {});
     return (g, _) => {
+      var k, R, B, z;
       const T = Fl;
       return x(), A("div", {
         ref_key: "menuWrapperRef",
         ref: d,
-        class: "relative"
+        class: D([(k = t.classes) == null ? void 0 : k.wrapper, {
+          relative: !((R = t.classes) != null && R.wrapper)
+        }])
       }, [O("div", {
         ref_key: "menuTriggerRef",
-        ref: u
-      }, [L(g.$slots, "default", {
-        ref_key: "menuTriggerRef",
-        ref: u
-      })], 512), Y(We, {
+        ref: u,
+        class: D([(B = t.classes) == null ? void 0 : B.trigger, {
+          "w-inherit h-inherit": !((z = t.classes) != null && z.trigger)
+        }])
+      }, [L(g.$slots, "default")], 2), Y(We, {
         "enter-active-class": t.enterActiveClass,
         "leave-active-class": t.leaveActiveClass
       }, {
-        default: ee(() => [o.value ? (x(), A("menu", {
+        default: ee(() => [o.value && g.data ? (x(), A("menu", {
           key: 0,
           class: "relative z-1 flex justify-center",
           style: P(H.value)
@@ -3160,24 +3168,24 @@ const Vl = {
           ref: f,
           class: D([[v(c).class, I.value], "w-64 border bg-surface p-2"]),
           style: P([v(c).style])
-        }, [(x(!0), A(J, null, de(t.data, (k, R) => (x(), A(J, {
-          key: R
-        }, [v(Ot)(k) ? (x(), A("div", Wl, ne(k.title), 1)) : v(Pt)(k) ? (x(), A("div", Nl)) : (x(), A(J, {
+        }, [(x(!0), A(J, null, de(t.data, (j, X) => (x(), A(J, {
+          key: X
+        }, [v(Ot)(j) ? (x(), A("div", Wl, ne(j.title), 1)) : v(Pt)(j) ? (x(), A("div", Nl)) : (x(), A(J, {
           key: 2
-        }, [k.render ? (x(), U(we(k.render), {
+        }, [j.render ? (x(), U(we(j.render), {
           key: 0
         })) : (x(), U(T, Z({
           key: 1,
           ref_for: !0
         }, {
           ...t,
-          data: k
+          data: j
         }, {
-          idx: [R],
+          idx: [X],
           "has-icon": v(wr)(t.data)
         }), null, 16, ["idx", "has-icon"]))], 64))], 64))), 128))], 6)], 4)) : F("", !0)]),
         _: 1
-      }, 8, ["enter-active-class", "leave-active-class"])], 512);
+      }, 8, ["enter-active-class", "leave-active-class"])], 2);
     };
   }
 }), Sr = /* @__PURE__ */ W({
@@ -4372,9 +4380,9 @@ const bo = /* @__PURE__ */ W({
       $el: o
     });
     const g = C(), _ = Se(g), T = Se(() => l.value), k = Qe("bg", { dark: 2, light: 7 }, 0.5), R = Qe("bg", { dark: 2, light: 7 }, 0.75);
-    function V(z) {
+    function B(z) {
       var Re;
-      const { clientY: j } = z, { top: X, height: fe } = i, B = X.value, G = fe.value, ie = B + G / 2, ge = j - ie;
+      const { clientY: j } = z, { top: X, height: fe } = i, V = X.value, G = fe.value, ie = V + G / 2, ge = j - ie;
       (Re = o.value) == null || Re.scrollBy({
         top: ge / G * c.value,
         behavior: "smooth"
@@ -4394,7 +4402,7 @@ const bo = /* @__PURE__ */ W({
           width: `${z.barWidth}px`
         }),
         class: "absolute right-0 z-99999 h-full",
-        onPointerdown: V
+        onPointerdown: B
       }, [
         ft(O("div", {
           ref_key: "scrollBarIndicatorRef",
@@ -4471,36 +4479,36 @@ const bo = /* @__PURE__ */ W({
     }), Q(l, () => {
       n("change", l.value);
     });
-    const u = m(() => l.value), f = m(() => p(u.value)), y = m(() => t.options.findIndex((B) => R(B, u.value))), $ = C(f.value);
+    const u = m(() => l.value), f = m(() => p(u.value)), y = m(() => t.options.findIndex((V) => R(V, u.value))), $ = C(f.value);
     Q(f, () => {
       $.value = f.value;
     });
-    function p(B) {
-      return B ? typeof B == "string" || typeof B == "symbol" || typeof B == "number" ? String(B) : B.label ? B.label : B.id : "";
+    function p(V) {
+      return V ? typeof V == "string" || typeof V == "symbol" || typeof V == "number" ? String(V) : V.label ? V.label : V.id : "";
     }
-    function b(B) {
-      if (B)
-        return typeof B == "string" || typeof B == "symbol" || typeof B == "number" ? B : B.id;
+    function b(V) {
+      if (V)
+        return typeof V == "string" || typeof V == "symbol" || typeof V == "number" ? V : V.id;
     }
-    function w(B) {
+    function w(V) {
       o.value = !0;
-      const G = B.target;
+      const G = V.target;
       $.value = G.value, n("input", $.value);
     }
-    const h = m(() => t.searchable && $.value !== f.value ? t.options.filter((B) => t.filter(p(B), $.value)) : t.options);
-    pe("ArrowDown", (B) => {
-      o.value && (B.preventDefault(), d.value === -1 && c.value !== -1 ? d.value = c.value : d.value === -1 && c.value === -1 && y.value !== -1 && (d.value = y.value), d.value = (d.value + 1) % t.options.length);
-    }), pe("ArrowUp", (B) => {
-      o.value && (B.preventDefault(), d.value === -1 && c.value !== -1 ? d.value = c.value : d.value === -1 && c.value === -1 && y.value !== -1 && (d.value = y.value), d.value = (d.value - 1 + t.options.length) % t.options.length);
+    const h = m(() => t.searchable && $.value !== f.value ? t.options.filter((V) => t.filter(p(V), $.value)) : t.options);
+    pe("ArrowDown", (V) => {
+      o.value && (V.preventDefault(), d.value === -1 && c.value !== -1 ? d.value = c.value : d.value === -1 && c.value === -1 && y.value !== -1 && (d.value = y.value), d.value = (d.value + 1) % t.options.length);
+    }), pe("ArrowUp", (V) => {
+      o.value && (V.preventDefault(), d.value === -1 && c.value !== -1 ? d.value = c.value : d.value === -1 && c.value === -1 && y.value !== -1 && (d.value = y.value), d.value = (d.value - 1 + t.options.length) % t.options.length);
     }), pe("Enter", () => {
       o.value && d.value !== -1 && (l.value = h.value[d.value], i.value.focus(), o.value = !1);
     });
-    function S(B) {
+    function S(V) {
       if (i.value.focus(), !o.value) {
         o.value = !0;
         return;
       }
-      l.value = B, o.value = !1;
+      l.value = V, o.value = !1;
     }
     const M = m(() => t.color), I = br(M, "default"), H = m(() => {
       switch (t.size) {
@@ -4525,14 +4533,14 @@ const bo = /* @__PURE__ */ W({
       d.value = -1, c.value = -1;
     });
     const k = m(() => o.value && Me ? _.value === 0 ? !1 : document.documentElement.clientHeight - T.value > _.value : !1);
-    function R(B, G) {
-      return G ? typeof B == "string" || typeof B == "symbol" || typeof B == "number" ? B === G : typeof G == "string" || typeof G == "symbol" || typeof G == "number" ? !1 : B.id === G.id : !1;
+    function R(V, G) {
+      return G ? typeof V == "string" || typeof V == "symbol" || typeof V == "number" ? V === G : typeof G == "string" || typeof G == "symbol" || typeof G == "number" ? !1 : V.id === G.id : !1;
     }
-    const V = m(() => t.searchable ? "cursor-text" : "cursor-pointer"), z = Et(), j = yr(), X = at(M);
-    function fe(B) {
-      c.value = B, d.value = -1;
+    const B = m(() => t.searchable ? "cursor-text" : "cursor-pointer"), z = Et(), j = yr(), X = at(M);
+    function fe(V) {
+      c.value = V, d.value = -1;
     }
-    return (B, G) => (x(), A("div", {
+    return (V, G) => (x(), A("div", {
       ref_key: "wrapperRef",
       ref: s,
       class: "relative",
@@ -4542,12 +4550,12 @@ const bo = /* @__PURE__ */ W({
         O("input", {
           ref_key: "inputRef",
           ref: i,
-          class: D([[H.value.wrapper, v(a).class, V.value], "border outline-none outline-none focus-visible:outline-2 custom-input-colors"]),
-          placeholder: B.placeholder,
+          class: D([[H.value.wrapper, v(a).class, B.value], "border outline-none outline-none focus-visible:outline-2 custom-input-colors"]),
+          placeholder: V.placeholder,
           style: P([v(a).style, v(I)]),
-          readonly: !B.searchable,
+          readonly: !V.searchable,
           value: $.value,
-          "aria-label": B.ariaLabel,
+          "aria-label": V.ariaLabel,
           "aria-haspopup": "listbox",
           autocomplete: "off",
           onInput: w,
@@ -4564,9 +4572,9 @@ const bo = /* @__PURE__ */ W({
         }]]),
         style: P([v(z).style])
       }, [
-        B.options.length === 0 ? (x(), A("div", $a, [
-          L(B.$slots, "none", {}, () => [
-            Ze(ne(B.noneText), 1)
+        V.options.length === 0 ? (x(), A("div", $a, [
+          L(V.$slots, "none", {}, () => [
+            Ze(ne(V.noneText), 1)
           ])
         ])) : (x(), A(J, { key: 1 }, [
           (x(!0), A(J, null, de(h.value, (ie, ge) => (x(), A("div", {
@@ -4583,7 +4591,7 @@ const bo = /* @__PURE__ */ W({
             onMousemove: (Re) => fe(ge),
             onMouseleave: G[1] || (G[1] = (Re) => c.value = -1)
           }, [
-            L(B.$slots, "item", {
+            L(V.$slots, "item", {
               data: ie,
               selected: R(ie, u.value)
             }, () => [
@@ -4593,9 +4601,9 @@ const bo = /* @__PURE__ */ W({
               O("i", { class: "i-fluent-checkmark-12-filled h-3 w-3" }, null, -1)
             ]))) : F("", !0)
           ], 46, Ca))), 128)),
-          B.searchable && h.value.length === 0 ? (x(), A("div", Aa, [
-            L(B.$slots, "not-found", {}, () => [
-              Ze(ne(B.notFoundText), 1)
+          V.searchable && h.value.length === 0 ? (x(), A("div", Aa, [
+            L(V.$slots, "not-found", {}, () => [
+              Ze(ne(V.notFoundText), 1)
             ])
           ])) : F("", !0)
         ], 64))
@@ -4743,7 +4751,7 @@ const bo = /* @__PURE__ */ W({
         return;
       }
       H.preventDefault(), H.stopPropagation();
-      const _ = Ae(p), { clientX: T } = H, k = _.left.value, V = _.right.value - k, z = Math.round((T - k) / V * (o.value - 1));
+      const _ = Ae(p), { clientX: T } = H, k = _.left.value, B = _.right.value - k, z = Math.round((T - k) / B * (o.value - 1));
       if (z < 0) {
         c.value = 0;
         return;
@@ -5467,7 +5475,7 @@ function Ua(e, r = {}) {
     }
   });
   function p(g, _) {
-    var T, k, R, V;
+    var T, k, R, B;
     if (!c)
       return;
     const z = ve(e);
@@ -5478,7 +5486,7 @@ function Ua(e, r = {}) {
       left: (k = ve(g)) != null ? k : y.value,
       behavior: ve(o)
     });
-    const j = ((V = z == null ? void 0 : z.document) == null ? void 0 : V.documentElement) || (z == null ? void 0 : z.documentElement) || z;
+    const j = ((B = z == null ? void 0 : z.document) == null ? void 0 : B.documentElement) || (z == null ? void 0 : z.documentElement) || z;
     y != null && (u.value = j.scrollLeft), $ != null && (f.value = j.scrollTop);
   }
   const b = C(!1), w = Fe({
@@ -5497,14 +5505,14 @@ function Ua(e, r = {}) {
     var _;
     if (!c)
       return;
-    const T = ((_ = g == null ? void 0 : g.document) == null ? void 0 : _.documentElement) || (g == null ? void 0 : g.documentElement) || Te(g), { display: k, flexDirection: R } = getComputedStyle(T), V = T.scrollLeft;
-    h.left = V < u.value, h.right = V > u.value;
-    const z = Math.abs(V) <= (i.left || 0), j = Math.abs(V) + T.clientWidth >= T.scrollWidth - (i.right || 0) - Qt;
-    k === "flex" && R === "row-reverse" ? (w.left = j, w.right = z) : (w.left = z, w.right = j), u.value = V;
+    const T = ((_ = g == null ? void 0 : g.document) == null ? void 0 : _.documentElement) || (g == null ? void 0 : g.documentElement) || Te(g), { display: k, flexDirection: R } = getComputedStyle(T), B = T.scrollLeft;
+    h.left = B < u.value, h.right = B > u.value;
+    const z = Math.abs(B) <= (i.left || 0), j = Math.abs(B) + T.clientWidth >= T.scrollWidth - (i.right || 0) - Qt;
+    k === "flex" && R === "row-reverse" ? (w.left = j, w.right = z) : (w.left = z, w.right = j), u.value = B;
     let X = T.scrollTop;
     g === c.document && !X && (X = c.document.body.scrollTop), h.top = X < f.value, h.bottom = X > f.value;
-    const fe = Math.abs(X) <= (i.top || 0), B = Math.abs(X) + T.clientHeight >= T.scrollHeight - (i.bottom || 0) - Qt;
-    k === "flex" && R === "column-reverse" ? (w.top = B, w.bottom = fe) : (w.top = fe, w.bottom = B), f.value = X;
+    const fe = Math.abs(X) <= (i.top || 0), V = Math.abs(X) + T.clientHeight >= T.scrollHeight - (i.bottom || 0) - Qt;
+    k === "flex" && R === "column-reverse" ? (w.top = V, w.bottom = fe) : (w.top = fe, w.bottom = V), f.value = X;
   }, H = (g) => {
     var _;
     if (!c)
@@ -5567,8 +5575,8 @@ const Vo = /* @__PURE__ */ W({
     function y(S, M, I, H) {
       const g = v(S), _ = Array.from({ length: v(M) }).fill(0), T = [], k = Math.max(0, u.value - v(H) * 2 - f.value * g.length - v(I) * g.length) / 2;
       for (let R = 0; R < g.length; R++) {
-        const V = g[R], z = _.indexOf(Math.min(..._)), j = z * (f.value + v(I)) + v(H) + k, X = _[z];
-        T.push({ x: j, y: X, width: V.width.value, height: V.height.value }), _[z] += V.height.value + v(I);
+        const B = g[R], z = _.indexOf(Math.min(..._)), j = z * (f.value + v(I)) + v(H) + k, X = _[z];
+        T.push({ x: j, y: X, width: B.width.value, height: B.height.value }), _[z] += B.height.value + v(I);
       }
       return T;
     }
@@ -5648,11 +5656,11 @@ const Vo = /* @__PURE__ */ W({
         height: k.height * R
       };
     }));
-    function $(k, R, V, z) {
-      const j = v(k), X = Array.from({ length: v(R) }).fill(0), fe = [], B = Math.max(0, u.value - v(z) * 2 - f.value * j.length - v(V) * j.length) / 2;
+    function $(k, R, B, z) {
+      const j = v(k), X = Array.from({ length: v(R) }).fill(0), fe = [], V = Math.max(0, u.value - v(z) * 2 - f.value * j.length - v(B) * j.length) / 2;
       for (let G = 0; G < j.length; G++) {
-        const ie = j[G], ge = X.indexOf(Math.min(...X)), Re = ge * (f.value + v(V)) + v(z) + B, Cr = X[ge];
-        fe.push({ x: Re, y: Cr, width: ie.width, height: ie.height }), X[ge] += ie.height + v(V);
+        const ie = j[G], ge = X.indexOf(Math.min(...X)), Re = ge * (f.value + v(B)) + v(z) + V, Cr = X[ge];
+        fe.push({ x: Re, y: Cr, width: ie.width, height: ie.height }), X[ge] += ie.height + v(B);
       }
       return fe;
     }
@@ -5679,27 +5687,27 @@ const Vo = /* @__PURE__ */ W({
         I.y.value + (((k = c.value) == null ? void 0 : k.clientHeight) ?? 0) + n.value
       ];
     }), g = m(() => p.value.map((k) => {
-      const R = k.y, V = k.y + k.height;
-      return R >= H.value[0] && R <= H.value[1] || V >= H.value[0] && V <= H.value[1] || R <= H.value[0] && V >= H.value[1];
+      const R = k.y, B = k.y + k.height;
+      return R >= H.value[0] && R <= H.value[1] || B >= H.value[0] && B <= H.value[1] || R <= H.value[0] && B >= H.value[1];
     })), _ = m(() => {
       const k = [];
-      return w.value.forEach((R, V) => {
+      return w.value.forEach((R, B) => {
         if (d(R.children))
           R.children.forEach((z, j) => {
             g.value[j] && k.push([z, j]);
           });
         else {
-          if (!g.value[V])
+          if (!g.value[B])
             return;
-          k.push([R, V]);
+          k.push([R, B]);
         }
       }), k;
     });
     r({
       scroll: I,
       scrollTo: (k, R = !1) => {
-        const V = S.value;
-        S.value = R, I.y.value = k, S.value = V;
+        const B = S.value;
+        S.value = R, I.y.value = k, S.value = B;
       }
     });
     const T = m(() => t.is ?? "div");
@@ -5719,11 +5727,11 @@ const Vo = /* @__PURE__ */ W({
             position: "relative"
           })
         }, [
-          (x(!0), A(J, null, de(_.value, ([V, z]) => (x(), A("div", {
-            key: V,
+          (x(!0), A(J, null, de(_.value, ([B, z]) => (x(), A("div", {
+            key: B,
             style: P([h(z), { position: "absolute" }])
           }, [
-            (x(), U(we(V), {
+            (x(), U(we(B), {
               style: P({
                 width: `${f.value}px`
               })