@oottoo-core/oottoo-ui 0.0.4 → 0.0.6

package/README.md

@@ -85,37 +85,45 @@ Requiere `@oottoo-core/oottoo-icons`:
 
 ### OVeChainLogin
 
-Componente para conectar wallet VeChain usando `@vechain/dapp-kit-ui`.
-
-**Instalación de dependencia peer:**
-```bash
-npm install @vechain/dapp-kit-ui
-```
+Componente UI para login con wallet VeChain. Es un componente puro que requiere que la lógica de wallet se maneje desde la aplicación.
 
 **Uso:**
 ```vue
 <template>
-  <o-vechain-login
+  <OVeChainLogin
     variant="primary"
     size="lg"
-    network="mainnet"
-    @connected="handleConnected"
-    @disconnected="handleDisconnected"
-    @error="handleError"
+    :is-connected="isConnected"
+    :is-connecting="isConnecting"
+    :address="address"
+    :shorten-address-fn="shortenAddress"
+    @click="handleWalletClick"
+    @disconnect="handleDisconnect"
   />
 </template>
 
 <script setup>
-const handleConnected = (address) => {
-  console.log('Wallet conectada:', address)
+import { ref } from 'vue'
+
+const isConnected = ref(false)
+const isConnecting = ref(false)
+const address = ref(null)
+
+const shortenAddress = (addr) => {
+  if (!addr || addr.length < 13) return addr
+  return `${addr.slice(0, 6)}...${addr.slice(-4)}`
 }
 
-const handleDisconnected = () => {
-  console.log('Wallet desconectada')
+const handleWalletClick = async () => {
+  // Aquí integrarías con @vechain/dapp-kit-ui o tu librería de wallet preferida
+  isConnecting.value = true
+  // ... lógica de conexión
 }
 
-const handleError = (error) => {
-  console.error('Error:', error)
+const handleDisconnect = () => {
+  // ... lógica de desconexión
+  isConnected.value = false
+  address.value = null
 }
 </script>
 ```
@@ -123,12 +131,16 @@ const handleError = (error) => {
 **Props:**
 - `variant`: 'primary' | 'secondary' | 'ghost' (default: 'primary')
 - `size`: 'sm' | 'md' | 'lg' (default: 'md')
-- `network`: 'mainnet' | 'testnet' (default: 'mainnet')
+- `isConnected`: boolean (default: false) - Estado de conexión
+- `isConnecting`: boolean (default: false) - Estado de carga
+- `address`: string | null (default: null) - Dirección de la wallet
+- `shortenAddressFn`: Function - Función para truncar la dirección
 
 **Events:**
-- `connected(address)`: Se emite al conectar una wallet
-- `disconnected`: Se emite al desconectar la wallet
-- `error(message)`: Se emite cuando hay un error de conexión
+- `click`: Se emite al hacer click para conectar
+- `disconnect`: Se emite al solicitar desconexión
+
+**Nota:** Este componente es un UI puro. Para la integración completa con VeChain, usa `@vechain/dapp-kit-ui` en tu aplicación y pasa el estado al componente.
 
 ## 📄 Licencia
 

package/dist/oottoo-ui.es.js

@@ -1,6 +1,5 @@
-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 = {
+import { computed as d, openBlock as i, createElementBlock as a, normalizeClass as h, renderSlot as y, onMounted as f, onUnmounted as v, createBlock as _, Teleport as k, createVNode as C, Transition as w, withCtx as x, withModifiers as z, normalizeStyle as m, createElementVNode as r, createCommentVNode as p, inject as O, toDisplayString as b } from "vue";
+const S = ["disabled", "type"], $ = {
   __name: "OButton",
   props: {
     /**
@@ -37,29 +36,29 @@ const G = ["disabled", "type"], J = {
     }
   },
   emits: ["click"],
-  setup(e, { emit: i }) {
-    const n = e, o = i, c = (r) => {
-      n.disabled || o("click", r);
-    }, t = p(() => [
+  setup(e, { emit: n }) {
+    const t = e, o = n, s = (c) => {
+      t.disabled || o("click", c);
+    }, l = d(() => [
       "o-button",
-      `o-button--${n.variant}`,
-      `o-button--${n.size}`
+      `o-button--${t.variant}`,
+      `o-button--${t.size}`
     ]);
-    return (r, m) => (l(), d("button", {
-      class: x(t.value),
+    return (c, g) => (i(), a("button", {
+      class: h(l.value),
       disabled: e.disabled,
       type: e.type,
-      onClick: c
+      onClick: s
     }, [
-      S(r.$slots, "default")
-    ], 10, G));
+      y(c.$slots, "default")
+    ], 10, S));
   }
-}, 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 = {
+}, B = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [o, s] of n)
+    t[o] = s;
+  return t;
+}, M = { class: "o-modal-content" }, L = {
   __name: "OModal",
   props: {
     /**
@@ -78,35 +77,35 @@ const G = ["disabled", "type"], J = {
     }
   },
   emits: ["close"],
-  setup(e, { emit: i }) {
-    const n = e, o = i, c = () => {
+  setup(e, { emit: n }) {
+    const t = e, o = n, s = () => {
       o("close");
-    }, t = (r) => {
-      r.key === "Escape" && n.isOpen && c();
+    }, l = (c) => {
+      c.key === "Escape" && t.isOpen && s();
     };
-    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", {
+    return f(() => {
+      document.addEventListener("keydown", l);
+    }), v(() => {
+      document.removeEventListener("keydown", l);
+    }), (c, g) => (i(), _(k, { to: "body" }, [
+      C(w, { name: "o-modal" }, {
+        default: x(() => [
+          e.isOpen ? (i(), a("div", {
             key: 0,
             class: "o-modal-overlay",
-            style: f({ zIndex: e.zIndex }),
-            onClick: R(c, ["self"])
+            style: m({ zIndex: e.zIndex }),
+            onClick: z(s, ["self"])
           }, [
-            u("div", Q, [
-              S(r.$slots, "default", {}, void 0, !0)
+            r("div", M, [
+              y(c.$slots, "default", {}, void 0, !0)
             ])
-          ], 4)) : y("", !0)
+          ], 4)) : p("", !0)
         ]),
         _: 3
       })
     ]));
   }
-}, Y = /* @__PURE__ */ P(X, [["__scopeId", "data-v-882f88c1"]]), Z = ["width", "height"], ee = {
+}, I = /* @__PURE__ */ B(L, [["__scopeId", "data-v-882f88c1"]]), V = ["width", "height"], E = {
   __name: "OLoading",
   props: {
     /**
@@ -134,24 +133,24 @@ const G = ["disabled", "type"], J = {
     }
   },
   setup(e) {
-    const i = e, n = {
+    const n = e, t = {
       sm: 16,
       md: 24,
       lg: 32
-    }, o = p(() => n[i.size]);
-    return (c, t) => e.loading ? (l(), d("div", {
+    }, o = d(() => t[n.size]);
+    return (s, l) => e.loading ? (i(), a("div", {
       key: 0,
       class: "o-loading",
-      style: f({ color: e.color })
+      style: m({ color: e.color })
     }, [
-      (l(), d("svg", {
+      (i(), a("svg", {
         width: o.value,
         height: o.value,
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
-      }, [...t[0] || (t[0] = [
-        u("circle", {
+      }, [...l[0] || (l[0] = [
+        r("circle", {
           cx: "12",
           cy: "12",
           r: "10",
@@ -162,16 +161,16 @@ const G = ["disabled", "type"], J = {
           "stroke-dashoffset": "20",
           opacity: "0.25"
         }, null, -1),
-        u("path", {
+        r("path", {
           d: "M12 2C6.477 2 2 6.477 2 12",
           stroke: "currentColor",
           "stroke-width": "4",
           "stroke-linecap": "round"
         }, null, -1)
-      ])], 8, Z))
-    ], 4)) : y("", !0);
+      ])], 8, V))
+    ], 4)) : p("", !0);
   }
-}, te = ["innerHTML"], ne = {
+}, N = ["innerHTML"], H = {
   __name: "OIcon",
   props: {
     /**
@@ -197,32 +196,32 @@ const G = ["disabled", "type"], J = {
     }
   },
   setup(e) {
-    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", {
+    const n = e, t = d(
+      () => typeof n.size == "number" ? `${n.size}px` : n.size
+    ), o = O("oIcons", void 0), s = d(() => o ? o(n.name) : "");
+    return (l, c) => (i(), a("span", {
       class: "o-icon",
-      style: f({
-        width: n.value,
-        height: n.value,
+      style: m({
+        width: t.value,
+        height: t.value,
         color: e.color
       }),
-      innerHTML: c.value
-    }, null, 12, te));
+      innerHTML: s.value
+    }, null, 12, N));
   }
-}, oe = ["disabled"], se = {
+}, T = ["disabled"], A = {
   key: 0,
   class: "o-vechain-login__text"
-}, ie = {
+}, F = {
   key: 1,
   class: "o-vechain-login__text"
-}, ae = {
+}, j = {
   key: 2,
   class: "o-vechain-login__text"
-}, ce = {
+}, q = {
   key: 3,
   class: "o-vechain-login__disconnect-icon"
-}, le = {
+}, D = {
   __name: "OVeChainLogin",
   props: {
     /**
@@ -244,139 +243,100 @@ const G = ["disabled", "type"], J = {
       validator: (e) => ["sm", "md", "lg"].includes(e)
     },
     /**
-     * Nodo VeChain a utilizar
-     * @values 'mainnet', 'testnet'
+     * Estado de conexión de la wallet
      */
-    network: {
+    isConnected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Estado de carga durante conexión
+     */
+    isConnecting: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Dirección de la wallet conectada
+     */
+    address: {
       type: String,
-      default: "mainnet",
-      validator: (e) => ["mainnet", "testnet"].includes(e)
+      default: null
+    },
+    /**
+     * Función para truncar la dirección
+     */
+    shortenAddressFn: {
+      type: Function,
+      default: (e) => !e || e.length < 13 ? e : `${e.slice(0, 6)}...${e.slice(-4)}`
     }
   },
   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"
+    /** Se emite cuando se hace click en el botón (para conectar) */
+    "click",
+    /** Se emite cuando se solicita desconexión */
+    "disconnect"
   ],
-  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),
+  setup(e, { emit: n }) {
+    const t = e, o = n, s = () => {
+      t.isConnected ? o("disconnect") : o("click");
+    }, l = d(() => ({
+      "o-vechain-login": !0,
+      [`o-vechain-login--${t.variant}`]: !0,
+      [`o-vechain-login--${t.size}`]: !0,
+      "o-vechain-login--connected": t.isConnected,
+      "o-vechain-login--loading": t.isConnecting
+    })), c = d(() => t.shortenAddressFn(t.address));
+    return (g, u) => (i(), a("button", {
+      class: h(l.value),
+      disabled: e.isConnecting,
       type: "button",
-      onClick: I
+      onClick: s
     }, [
-      a[1] || (a[1] = u("span", { class: "o-vechain-login__icon" }, [
-        u("svg", {
+      u[1] || (u[1] = r("span", { class: "o-vechain-login__icon" }, [
+        r("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" })
+          r("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", {
+      e.isConnecting ? (i(), a("span", A, " Connecting... ")) : e.isConnected ? (i(), a("span", F, b(c.value), 1)) : (i(), a("span", j, " Connect Wallet ")),
+      e.isConnected ? (i(), a("span", q, [...u[0] || (u[0] = [
+        r("svg", {
           viewBox: "0 0 24 24",
           fill: "none",
           stroke: "currentColor",
           width: "1em",
           height: "1em"
         }, [
-          u("path", {
+          r("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));
+      ])])) : p("", !0)
+    ], 10, T));
   }
-}, ue = {
+}, W = {
   /**
    * Instala el plugin en la aplicación Vue
    *
    * @param {import('vue').App} app - Instancia de la aplicación
    */
   install(e) {
-    e.component("OButton", J), e.component("OModal", Y), e.component("OLoading", ee), e.component("OIcon", ne), e.component("OVeChainLogin", le);
+    e.component("OButton", $), e.component("OModal", I), e.component("OLoading", E), e.component("OIcon", H), e.component("OVeChainLogin", D);
   }
 };
 export {
-  J as OButton,
-  ne as OIcon,
-  ee as OLoading,
-  Y as OModal,
-  le as OVeChainLogin,
-  ue as default
+  $ as OButton,
+  H as OIcon,
+  E as OLoading,
+  I as OModal,
+  D as OVeChainLogin,
+  W as default
 };