@oottoo-core/oottoo-ui 0.0.1 → 0.0.3

package/dist/oottoo-ui.css

@@ -0,0 +1 @@
+:root{--o-primary: #3b82f6;--o-primary-hover: #2563eb;--o-primary-active: #1d4ed8;--o-success: #22c55e;--o-warning: #f59e0b;--o-error: #ef4444;--o-info: #3b82f6;--o-white: #ffffff;--o-gray-100: #f3f4f6;--o-gray-200: #e5e7eb;--o-gray-300: #d1d5db;--o-gray-400: #9ca3af;--o-gray-500: #6b7280;--o-gray-600: #4b5563;--o-gray-700: #374151;--o-gray-800: #1f2937;--o-gray-900: #111827;--o-font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;--o-font-mono: ui-monospace, monospace;--o-space-1: .25rem;--o-space-2: .5rem;--o-space-3: .75rem;--o-space-4: 1rem;--o-space-6: 1.5rem;--o-space-8: 2rem;--o-radius-sm: .25rem;--o-radius-md: .375rem;--o-radius-lg: .5rem;--o-radius-xl: .75rem;--o-radius-full: 9999px;--o-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--o-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--o-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);--o-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1);--o-transition-fast: .15s ease;--o-transition-base: .2s ease;--o-transition-slow: .3s ease}.o-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--o-space-2);padding:var(--o-space-2) var(--o-space-4);font-family:var(--o-font-sans);font-size:.875rem;font-weight:500;line-height:1.25rem;border-radius:var(--o-radius-md);border:1px solid transparent;cursor:pointer;transition:all var(--o-transition-fast)}.o-button:disabled{opacity:.5;cursor:not-allowed}.o-button--primary{background-color:var(--o-primary);color:var(--o-white)}.o-button--primary:hover:not(:disabled){background-color:var(--o-primary-hover)}.o-button--secondary{background-color:var(--o-gray-200);color:var(--o-gray-800)}.o-button--secondary:hover:not(:disabled){background-color:var(--o-gray-300)}.o-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.o-modal-content{background-color:var(--o-white);border-radius:var(--o-radius-lg);box-shadow:var(--o-shadow-xl);max-width:90vw;max-height:90vh;overflow:auto;padding:var(--o-space-6)}.o-loading{display:inline-flex;animation:o-spin 1s linear infinite}@keyframes o-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.o-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.o-vechain-login{display:inline-flex;align-items:center;justify-content:center;gap:var(--o-space-2);padding:var(--o-space-2) var(--o-space-4);font-family:var(--o-font-sans);font-size:.875rem;font-weight:500;line-height:1.25rem;border-radius:var(--o-radius-md);border:1px solid transparent;cursor:pointer;transition:all var(--o-transition-fast);background-color:var(--o-primary);color:var(--o-white)}.o-vechain-login:hover:not(:disabled){background-color:var(--o-primary-hover)}.o-vechain-login:disabled{opacity:.7;cursor:not-allowed}.o-vechain-login--primary{background-color:var(--o-primary);color:var(--o-white)}.o-vechain-login--primary:hover:not(:disabled){background-color:var(--o-primary-hover)}.o-vechain-login--secondary{background-color:var(--o-gray-200);color:var(--o-gray-800)}.o-vechain-login--secondary:hover:not(:disabled){background-color:var(--o-gray-300)}.o-vechain-login--ghost{background-color:transparent;color:var(--o-primary);border-color:var(--o-primary)}.o-vechain-login--ghost:hover:not(:disabled){background-color:var(--o-primary);color:var(--o-white)}.o-vechain-login--sm{padding:var(--o-space-1) var(--o-space-3);font-size:.75rem}.o-vechain-login--md{padding:var(--o-space-2) var(--o-space-4);font-size:.875rem}.o-vechain-login--lg{padding:var(--o-space-3) var(--o-space-6);font-size:1rem}.o-vechain-login--connected{background-color:var(--o-success)}.o-vechain-login--connected:hover:not(:disabled){background-color:#16a34a}.o-vechain-login--loading{cursor:wait}.o-vechain-login__icon{display:inline-flex;align-items:center;justify-content:center}.o-vechain-login__disconnect-icon{display:inline-flex;align-items:center;justify-content:center;margin-left:var(--o-space-1);opacity:.8}.o-vechain-login__text{white-space:nowrap}.o-modal-enter-active[data-v-882f88c1],.o-modal-leave-active[data-v-882f88c1]{transition:opacity var(--o-transition-base)}.o-modal-enter-from[data-v-882f88c1],.o-modal-leave-to[data-v-882f88c1]{opacity:0}

package/dist/oottoo-ui.es.js

@@ -1,5 +1,6 @@
-import { computed as i, openBlock as a, createElementBlock as c, normalizeClass as y, renderSlot as m, onMounted as g, onUnmounted as h, createBlock as v, Teleport as k, createVNode as _, Transition as z, withCtx as O, withModifiers as b, normalizeStyle as u, createElementVNode as d, createCommentVNode as p, inject as w } from "vue";
-const x = ["disabled", "type"], S = {
+import { computed as p, openBlock as l, createElementBlock as d, normalizeClass as x, renderSlot as S, onMounted as E, onUnmounted as L, createBlock as D, Teleport as W, createVNode as H, Transition as K, withCtx as T, withModifiers as R, normalizeStyle as f, createElementVNode as u, createCommentVNode as y, inject as j, ref as O, watch as U, unref as v, toDisplayString as q } from "vue";
+import { useVeChainWallet as F } from "@oottoo-core/oottoo-fns";
+const G = ["disabled", "type"], J = {
   __name: "OButton",
   props: {
     /**
@@ -36,29 +37,29 @@ const x = ["disabled", "type"], S = {
     }
   },
   emits: ["click"],
-  setup(e, { emit: o }) {
-    const t = e, n = o, s = (l) => {
-      t.disabled || n("click", l);
-    }, r = i(() => [
+  setup(e, { emit: i }) {
+    const n = e, o = i, c = (r) => {
+      n.disabled || o("click", r);
+    }, t = p(() => [
       "o-button",
-      `o-button--${t.variant}`,
-      `o-button--${t.size}`
+      `o-button--${n.variant}`,
+      `o-button--${n.size}`
     ]);
-    return (l, f) => (a(), c("button", {
-      class: y(r.value),
+    return (r, m) => (l(), d("button", {
+      class: x(t.value),
       disabled: e.disabled,
       type: e.type,
-      onClick: s
+      onClick: c
     }, [
-      m(l.$slots, "default")
-    ], 10, x));
+      S(r.$slots, "default")
+    ], 10, G));
   }
-}, C = (e, o) => {
-  const t = e.__vccOpts || e;
-  for (const [n, s] of o)
-    t[n] = s;
-  return t;
-}, $ = { class: "o-modal-content" }, B = {
+}, P = (e, i) => {
+  const n = e.__vccOpts || e;
+  for (const [o, c] of i)
+    n[o] = c;
+  return n;
+}, Q = { class: "o-modal-content" }, X = {
   __name: "OModal",
   props: {
     /**
@@ -77,35 +78,35 @@ const x = ["disabled", "type"], S = {
     }
   },
   emits: ["close"],
-  setup(e, { emit: o }) {
-    const t = e, n = o, s = () => {
-      n("close");
-    }, r = (l) => {
-      l.key === "Escape" && t.isOpen && s();
+  setup(e, { emit: i }) {
+    const n = e, o = i, c = () => {
+      o("close");
+    }, t = (r) => {
+      r.key === "Escape" && n.isOpen && c();
     };
-    return g(() => {
-      document.addEventListener("keydown", r);
-    }), h(() => {
-      document.removeEventListener("keydown", r);
-    }), (l, f) => (a(), v(k, { to: "body" }, [
-      _(z, { name: "o-modal" }, {
-        default: O(() => [
-          e.isOpen ? (a(), c("div", {
+    return E(() => {
+      document.addEventListener("keydown", t);
+    }), L(() => {
+      document.removeEventListener("keydown", t);
+    }), (r, m) => (l(), D(W, { to: "body" }, [
+      H(K, { name: "o-modal" }, {
+        default: T(() => [
+          e.isOpen ? (l(), d("div", {
             key: 0,
             class: "o-modal-overlay",
-            style: u({ zIndex: e.zIndex }),
-            onClick: b(s, ["self"])
+            style: f({ zIndex: e.zIndex }),
+            onClick: R(c, ["self"])
           }, [
-            d("div", $, [
-              m(l.$slots, "default", {}, void 0, !0)
+            u("div", Q, [
+              S(r.$slots, "default", {}, void 0, !0)
             ])
-          ], 4)) : p("", !0)
+          ], 4)) : y("", !0)
         ]),
         _: 3
       })
     ]));
   }
-}, I = /* @__PURE__ */ C(B, [["__scopeId", "data-v-11d6d987"]]), M = ["width", "height"], L = {
+}, Y = /* @__PURE__ */ P(X, [["__scopeId", "data-v-882f88c1"]]), Z = ["width", "height"], ee = {
   __name: "OLoading",
   props: {
     /**
@@ -133,24 +134,24 @@ const x = ["disabled", "type"], S = {
     }
   },
   setup(e) {
-    const o = e, t = {
+    const i = e, n = {
       sm: 16,
       md: 24,
       lg: 32
-    }, n = i(() => t[o.size]);
-    return (s, r) => e.loading ? (a(), c("div", {
+    }, o = p(() => n[i.size]);
+    return (c, t) => e.loading ? (l(), d("div", {
       key: 0,
       class: "o-loading",
-      style: u({ color: e.color })
+      style: f({ color: e.color })
     }, [
-      (a(), c("svg", {
-        width: n.value,
-        height: n.value,
+      (l(), d("svg", {
+        width: o.value,
+        height: o.value,
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
-      }, [...r[0] || (r[0] = [
-        d("circle", {
+      }, [...t[0] || (t[0] = [
+        u("circle", {
           cx: "12",
           cy: "12",
           r: "10",
@@ -161,16 +162,16 @@ const x = ["disabled", "type"], S = {
           "stroke-dashoffset": "20",
           opacity: "0.25"
         }, null, -1),
-        d("path", {
+        u("path", {
           d: "M12 2C6.477 2 2 6.477 2 12",
           stroke: "currentColor",
           "stroke-width": "4",
           "stroke-linecap": "round"
         }, null, -1)
-      ])], 8, M))
-    ], 4)) : p("", !0);
+      ])], 8, Z))
+    ], 4)) : y("", !0);
   }
-}, E = ["innerHTML"], N = {
+}, te = ["innerHTML"], ne = {
   __name: "OIcon",
   props: {
     /**
@@ -196,33 +197,186 @@ const x = ["disabled", "type"], S = {
     }
   },
   setup(e) {
-    const o = e, t = i(
-      () => typeof o.size == "number" ? `${o.size}px` : o.size
-    ), n = w("oIcons", void 0), s = i(() => n ? n(o.name) : "");
-    return (r, l) => (a(), c("span", {
+    const i = e, n = p(
+      () => typeof i.size == "number" ? `${i.size}px` : i.size
+    ), o = j("oIcons", void 0), c = p(() => o ? o(i.name) : "");
+    return (t, r) => (l(), d("span", {
       class: "o-icon",
-      style: u({
-        width: t.value,
-        height: t.value,
+      style: f({
+        width: n.value,
+        height: n.value,
         color: e.color
       }),
-      innerHTML: s.value
-    }, null, 12, E));
+      innerHTML: c.value
+    }, null, 12, te));
+  }
+}, oe = ["disabled"], se = {
+  key: 0,
+  class: "o-vechain-login__text"
+}, ie = {
+  key: 1,
+  class: "o-vechain-login__text"
+}, ae = {
+  key: 2,
+  class: "o-vechain-login__text"
+}, ce = {
+  key: 3,
+  class: "o-vechain-login__disconnect-icon"
+}, le = {
+  __name: "OVeChainLogin",
+  props: {
+    /**
+     * Variante visual del botón
+     * @values 'primary', 'secondary', 'ghost'
+     */
+    variant: {
+      type: String,
+      default: "primary",
+      validator: (e) => ["primary", "secondary", "ghost"].includes(e)
+    },
+    /**
+     * Tamaño del botón
+     * @values 'sm', 'md', 'lg'
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md", "lg"].includes(e)
+    },
+    /**
+     * Nodo VeChain a utilizar
+     * @values 'mainnet', 'testnet'
+     */
+    network: {
+      type: String,
+      default: "mainnet",
+      validator: (e) => ["mainnet", "testnet"].includes(e)
+    }
+  },
+  emits: [
+    /** Se emite cuando se conecta una wallet */
+    "connected",
+    /** Se emite cuando se desconecta la wallet */
+    "disconnected",
+    /** Se emite cuando hay un error de conexión */
+    "error"
+  ],
+  setup(e, { emit: i }) {
+    const n = e, o = i, c = O(null), t = O(null), {
+      address: r,
+      isConnected: m,
+      isConnecting: h,
+      setAddress: $,
+      clearWallet: k,
+      setError: g,
+      startConnecting: B,
+      stopConnecting: _,
+      shortenAddress: M
+    } = F(), C = {
+      mainnet: "https://mainnet.vechain.org",
+      testnet: "https://testnet.vechain.org"
+    }, A = async () => {
+      try {
+        const { DAppKit: s } = await import("./index-Bywq0IP9.js").then((a) => a.A);
+        t.value || (t.value = document.createElement("vdk-button"), t.value.setAttribute("node-url", C[n.network]), document.addEventListener("vdk-connected", w), document.addEventListener("vdk-disconnected", b), t.value.style.display = "none", document.body.appendChild(t.value));
+      } catch (s) {
+        console.error("Error initializing VeChain DApp Kit:", s), g(s.message), o("error", s.message);
+      }
+    }, w = (s) => {
+      var z;
+      const a = (z = s.detail) == null ? void 0 : z.address;
+      a && ($(a), o("connected", a)), _();
+    }, b = () => {
+      k(), o("disconnected");
+    }, I = async () => {
+      var s;
+      if (m.value) {
+        V();
+        return;
+      }
+      B();
+      try {
+        t.value ? t.value.click() : (s = c.value) == null || s.click();
+      } catch (a) {
+        g(a.message), o("error", a.message), _();
+      }
+    }, V = () => {
+      try {
+        if (t.value) {
+          const s = new CustomEvent("vdk-disconnect");
+          document.dispatchEvent(s);
+        }
+        k(), o("disconnected");
+      } catch (s) {
+        g(s.message), o("error", s.message);
+      }
+    }, N = p(() => [
+      "o-vechain-login",
+      `o-vechain-login--${n.variant}`,
+      `o-vechain-login--${n.size}`,
+      {
+        "o-vechain-login--connected": m.value,
+        "o-vechain-login--loading": h.value
+      }
+    ]);
+    return E(() => {
+      A();
+    }), L(() => {
+      document.removeEventListener("vdk-connected", w), document.removeEventListener("vdk-disconnected", b), t.value && t.value.parentNode && t.value.parentNode.removeChild(t.value);
+    }), U(() => n.network, () => {
+      t.value && t.value.setAttribute("node-url", C[n.network]);
+    }), (s, a) => (l(), d("button", {
+      ref_key: "walletButtonRef",
+      ref: c,
+      class: x(N.value),
+      disabled: v(h),
+      type: "button",
+      onClick: I
+    }, [
+      a[1] || (a[1] = u("span", { class: "o-vechain-login__icon" }, [
+        u("svg", {
+          viewBox: "0 0 24 24",
+          fill: "currentColor",
+          width: "1em",
+          height: "1em"
+        }, [
+          u("path", { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" })
+        ])
+      ], -1)),
+      v(h) ? (l(), d("span", se, " Connecting... ")) : v(m) ? (l(), d("span", ie, q(v(M)(v(r))), 1)) : (l(), d("span", ae, " Connect Wallet ")),
+      v(m) ? (l(), d("span", ce, [...a[0] || (a[0] = [
+        u("svg", {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          width: "1em",
+          height: "1em"
+        }, [
+          u("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+          })
+        ], -1)
+      ])])) : y("", !0)
+    ], 10, oe));
   }
-}, V = {
+}, ue = {
   /**
    * Instala el plugin en la aplicación Vue
    *
    * @param {import('vue').App} app - Instancia de la aplicación
    */
   install(e) {
-    e.component("OButton", S), e.component("OModal", I), e.component("OLoading", L), e.component("OIcon", N);
+    e.component("OButton", J), e.component("OModal", Y), e.component("OLoading", ee), e.component("OIcon", ne), e.component("OVeChainLogin", le);
   }
 };
 export {
-  S as OButton,
-  N as OIcon,
-  L as OLoading,
-  I as OModal,
-  V as default
+  J as OButton,
+  ne as OIcon,
+  ee as OLoading,
+  Y as OModal,
+  le as OVeChainLogin,
+  ue as default
 };