@miden-npm/vue 0.0.2 → 0.1.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { inject as we, defineComponent as _, useAttrs as D, createElementBlock as d, openBlock as r, mergeProps as E, unref as t, createElementVNode as l, computed as k, normalizeClass as S, renderSlot as P, createBlock as w, toDisplayString as $, ref as x, onMounted as te, watch as H, onBeforeUnmount as le, normalizeStyle as ie, createCommentVNode as C, createVNode as m, Fragment as W, renderList as ue, createTextVNode as J, nextTick as ce, withCtx as ke } from "vue";
+import { inject as we, defineComponent as _, useAttrs as D, createElementBlock as d, openBlock as r, mergeProps as E, unref as t, createElementVNode as l, computed as k, normalizeClass as S, renderSlot as I, createBlock as w, toDisplayString as $, ref as x, onMounted as te, watch as P, onBeforeUnmount as le, createVNode as m, normalizeStyle as ie, createCommentVNode as C, Fragment as W, renderList as ue, createTextVNode as J, nextTick as ce, withCtx as ke } from "vue";
 const de = Symbol("MidenPGConfig");
 function ro(o) {
   if (!(o != null && o.publishableKey))
@@ -134,14 +134,14 @@ const pe = (o) => o == null || typeof o != "object" ? !1 : Object.values(o).ever
       disabled: s.value,
       onClick: i
     }, [
-      P(u.$slots, "prefix"),
+      I(u.$slots, "prefix"),
       u.loading ? (r(), w(fe, { key: 0 })) : (r(), d("div", De, [
         u.label ? (r(), d("p", {
           key: 0,
           class: S(["mb-0", h(u.size)])
-        }, $(u.label), 3)) : P(u.$slots, "default", { key: 1 })
+        }, $(u.label), 3)) : I(u.$slots, "default", { key: 1 })
       ])),
-      P(u.$slots, "suffix")
+      I(u.$slots, "suffix")
     ], 10, Te));
   }
 }), Ee = { class: "mb-0 text-body-3xs font-normal text-red-500" }, he = /* @__PURE__ */ _({
@@ -176,7 +176,7 @@ async function me(o, a, e) {
 }
 const Ae = {
   key: 0,
-  class: "absolute inset-0 grid place-items-center bg-white/60"
+  class: "w-full h-48 flex flex-col justify-center items-center"
 }, Ie = /* @__PURE__ */ _({
   __name: "checkout-iframe",
   props: {
@@ -207,12 +207,12 @@ const Ae = {
       s.value && s.value.parentNode && s.value.parentNode.removeChild(s.value), s.value = null;
     }
     function h(y) {
-      var A;
+      if (!n.value) return;
       p();
       const g = document.createElement("iframe");
       g.src = y;
       const v = a.style;
-      v.width && (g.style.width = v.width), v.height && (g.style.height = v.height), v.border && (g.style.border = v.border), v.borderRadius && (g.style.borderRadius = v.borderRadius), v.overflow && (g.style.overflow = v.overflow), (A = n.value) == null || A.appendChild(g), s.value = g;
+      v.width && (g.style.width = v.width), v.height && (g.style.height = v.height), v.border && (g.style.border = v.border), v.borderRadius && (g.style.borderRadius = v.borderRadius), v.overflow && (g.style.overflow = v.overflow), n.value.appendChild(g), s.value = g;
     }
     async function u() {
       if (a.url) {
@@ -242,27 +242,22 @@ const Ae = {
       }
     }
     return te(() => {
-      n.value && u();
-    }), H(
+      u();
+    }), P(
       () => a.url,
       (y) => {
         y && h(y);
       }
     ), le(() => {
       p();
-    }), (y, g) => (r(), d("div", {
-      class: "relative",
+    }), (y, g) => c.value ? (r(), d("div", Ae, [
+      m(fe)
+    ])) : (r(), d("div", {
+      key: 1,
+      ref_key: "containerRef",
+      ref: n,
       style: ie(e.value)
-    }, [
-      l("div", {
-        ref_key: "containerRef",
-        ref: n,
-        class: "w-full h-full"
-      }, null, 512),
-      c.value ? (r(), d("div", Ae, [
-        m(fe)
-      ])) : C("", !0)
-    ], 4));
+    }, null, 4));
   }
 }), Pe = { key: 1 }, uo = /* @__PURE__ */ _({
   __name: "checkout-button",
@@ -394,7 +389,7 @@ const Ae = {
         l("div", Oe, [
           l("div", Ye, [
             l("div", Ge, [
-              P(n.$slots, "default")
+              I(n.$slots, "default")
             ]),
             l("div", We, [
               s[2] || (s[2] = l("p", { class: "text-light-white-100 text-body-2xs font-regular" }, " Powered by Buzapay ", -1)),
@@ -413,7 +408,7 @@ const Ae = {
       ])
     ]));
   }
-}), Xe = ["src", "height", "alt"], I = /* @__PURE__ */ _({
+}), Xe = ["src", "height", "alt"], A = /* @__PURE__ */ _({
   __name: "image",
   props: {
     src: {},
@@ -454,7 +449,7 @@ const Ae = {
       if (s.value) return;
       const v = e.defaultValue ?? (e.options.length ? e.options[0].value : "");
       i.value = v, v && (n("update:modelValue", v), n("selectedChange", v));
-    }), H(
+    }), P(
       () => e.modelValue,
       (v) => {
         s.value && (i.value = v ?? "");
@@ -470,7 +465,7 @@ const Ae = {
     const h = k(
       () => e.type === "horizontal" ? "flex-row gap-5" : "flex-col gap-6"
     ), { options: u, type: y, className: g } = e;
-    return (v, A) => (r(), d("div", {
+    return (v, H) => (r(), d("div", {
       class: S(["flex", h.value, t(g)]),
       role: "radiogroup",
       "aria-orientation": t(y) === "horizontal" ? "horizontal" : "vertical",
@@ -579,17 +574,17 @@ const Ae = {
       hasValueCopy: y,
       value: g,
       valueCustomClass: v,
-      alignRight: A
+      alignRight: H
     } = a;
     return (N, T) => t(c) === "vertical" ? (r(), d("div", {
       key: 0,
-      class: S(["flex flex-col gap-1", t(A) ? "text-right items-end" : ""])
+      class: S(["flex flex-col gap-1", t(H) ? "text-right items-end" : ""])
     }, [
       l("p", {
         class: S(t(p))
       }, $(e.value), 3),
       l("div", ut, [
-        n.value ? (r(), w(I, {
+        n.value ? (r(), w(A, {
           key: 0,
           src: t(h),
           alt: t(g),
@@ -608,7 +603,7 @@ const Ae = {
           copyText: t(g),
           color: "#9DBFDE"
         }, null, 8, ["copyText"])) : C("", !0),
-        s.value ? (r(), w(I, {
+        s.value ? (r(), w(A, {
           key: 4,
           src: t(h),
           alt: t(g),
@@ -621,7 +616,7 @@ const Ae = {
         class: S(t(p))
       }, $(e.value), 3),
       l("div", dt, [
-        n.value ? (r(), w(I, {
+        n.value ? (r(), w(A, {
           key: 0,
           src: t(h),
           alt: t(g),
@@ -636,7 +631,7 @@ const Ae = {
           copyText: t(g),
           color: "#9DBFDE"
         }, null, 8, ["copyText"])) : C("", !0),
-        s.value ? (r(), w(I, {
+        s.value ? (r(), w(A, {
           key: 2,
           src: t(h),
           alt: t(g),
@@ -752,7 +747,7 @@ const Ae = {
   emits: ["update:modelValue", "blur", "copied"],
   setup(o, { emit: a }) {
     const e = o, n = a, s = k(() => e.modelValue !== void 0), i = x(e.modelValue ?? e.defaultValue ?? ""), c = x(""), p = x(""), h = x(null);
-    H(
+    P(
       () => e.modelValue,
       (b) => {
         s.value && (i.value = b ?? "");
@@ -777,7 +772,7 @@ const Ae = {
     function v(b) {
       e.rules.includes("numeric") && Ve(b);
     }
-    const A = k(
+    const H = k(
       () => e.disabled ? "bg-grey-50 cursor-not-allowed" : "bg-white"
     ), N = k(
       () => e.validationError || p.value ? "border-red-300 bg-red-50" : "border-grey-100"
@@ -802,11 +797,11 @@ const Ae = {
       l("div", {
         class: S([
           "border-c px-3 py-2 flex items-center justify-between rounded-md h-12",
-          A.value,
+          H.value,
           N.value
         ])
       }, [
-        P(b.$slots, "prefix"),
+        I(b.$slots, "prefix"),
         l("input", {
           ref_key: "inputEl",
           ref: h,
@@ -821,8 +816,8 @@ const Ae = {
           onKeydown: v
         }, null, 40, $t),
         b.loading ? (r(), d("div", St)) : (r(), d(W, { key: 0 }, [
-          P(b.$slots, "suffix"),
-          b.showCopyIcon && i.value.trim() !== "" ? (r(), w(I, {
+          I(b.$slots, "suffix"),
+          b.showCopyIcon && i.value.trim() !== "" ? (r(), w(A, {
             key: 0,
             src: "assets/images/copyIcon.svg",
             alt: "copy",
@@ -925,12 +920,12 @@ const Ae = {
   emits: ["update:modelValue", "change"],
   setup(o, { emit: a }) {
     const e = o, n = a, s = x(!1), i = x(e.defaultValue ?? e.modelValue ?? ""), c = x([...e.options]), p = x(-1), h = x(null), u = x(null), y = x(null), g = k(() => e.modelValue !== void 0);
-    H(
+    P(
       () => e.modelValue,
       (f) => {
         g.value && (i.value = f ?? "");
       }
-    ), H(
+    ), P(
       () => e.options,
       (f) => {
         c.value = [...f];
@@ -940,7 +935,7 @@ const Ae = {
     const v = k(() => {
       const f = g.value ? e.modelValue : i.value;
       return e.options.find((B) => B.value === f) ?? null;
-    }), A = k(() => {
+    }), H = k(() => {
       var f;
       return ((f = v.value) == null ? void 0 : f.label) || e.placeholder || (e.label ? `Select ${e.label}` : "Select an option");
     });
@@ -966,7 +961,7 @@ const Ae = {
       const B = f.target, L = h.value, V = u.value;
       L && !L.contains(B) && V && !V.contains(B) && T();
     }
-    H(s, (f) => {
+    P(s, (f) => {
       f ? document.addEventListener("mousedown", b) : document.removeEventListener("mousedown", b);
     }), le(
       () => document.removeEventListener("mousedown", b)
@@ -1080,9 +1075,9 @@ const Ae = {
           onKeydown: j
         }, [
           l("div", qt, [
-            P(f.$slots, "prefix"),
+            I(f.$slots, "prefix"),
             l("div", Kt, [
-              v.value && t(se) === "country" && v.value.countryCode ? (r(), w(I, {
+              v.value && t(se) === "country" && v.value.countryCode ? (r(), w(A, {
                 key: 0,
                 src: `https://flagcdn.com/w40/${v.value.countryCode.toLowerCase()}.png`,
                 alt: v.value.countryCode,
@@ -1091,7 +1086,7 @@ const Ae = {
               }, null, 8, ["src", "alt"])) : C("", !0),
               l("p", {
                 class: S(["text-body-2xs font-normal mb-0", (L = v.value) != null && L.label ? "text-sub-copy" : "text-grey-500"])
-              }, $(A.value), 3)
+              }, $(H.value), 3)
             ])
           ]),
           t(_e) ? (r(), d("span", Rt)) : s.value ? (r(), w(It, {
@@ -1137,7 +1132,7 @@ const Ae = {
                 ne === p.value ? "bg-gray-100" : ""
               ])
             }, [
-              t(se) === "country" && V.countryCode ? (r(), w(I, {
+              t(se) === "country" && V.countryCode ? (r(), w(A, {
                 key: 0,
                 src: `https://flagcdn.com/w40/${V.countryCode.toLowerCase()}.png`,
                 alt: V.countryCode,
@@ -1270,7 +1265,7 @@ const Ae = {
       }, 1e3);
     }), le(() => {
       i.value && (clearInterval(i.value), i.value = null);
-    }), H(s, (p) => {
+    }), P(s, (p) => {
       p < 0 && i.value && (clearInterval(i.value), i.value = null);
     }), (p, h) => (r(), d("div", ol, [
       l("p", al, " Amount to Pay " + $(p.amountDisplay), 1),
@@ -1504,7 +1499,7 @@ const Ae = {
         })
       ], 64)) : (r(), d("div", Dl, [
         l("div", El, [
-          m(I, {
+          m(A, {
             src: "../../../assets/images/stable-coin-qr-code.png",
             alt: "QR Code",
             width: 122,
@@ -1641,7 +1636,7 @@ const Ae = {
             l("div", Gl, [
               e.value === "PAYMENT" || e.value === "STABLE_COIN_PAYMENT" ? (r(), d("div", Wl, [
                 e.value === "PAYMENT" ? (r(), d("div", Jl, [
-                  (y = h.options) != null && y.imageUrl ? (r(), w(I, {
+                  (y = h.options) != null && y.imageUrl ? (r(), w(A, {
                     key: 0,
                     src: h.options.imageUrl,
                     alt: "Merchant Logo",