@oottoo-core/oottoo-ui 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -21
- package/package.json +1 -3
package/README.md
CHANGED
|
@@ -85,37 +85,45 @@ Requiere `@oottoo-core/oottoo-icons`:
|
|
|
85
85
|
|
|
86
86
|
### OVeChainLogin
|
|
87
87
|
|
|
88
|
-
Componente para
|
|
89
|
-
|
|
90
|
-
**Instalación de dependencia peer:**
|
|
91
|
-
```bash
|
|
92
|
-
npm install @vechain/dapp-kit-ui
|
|
93
|
-
```
|
|
88
|
+
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.
|
|
94
89
|
|
|
95
90
|
**Uso:**
|
|
96
91
|
```vue
|
|
97
92
|
<template>
|
|
98
|
-
<
|
|
93
|
+
<OVeChainLogin
|
|
99
94
|
variant="primary"
|
|
100
95
|
size="lg"
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
96
|
+
:is-connected="isConnected"
|
|
97
|
+
:is-connecting="isConnecting"
|
|
98
|
+
:address="address"
|
|
99
|
+
:shorten-address-fn="shortenAddress"
|
|
100
|
+
@click="handleWalletClick"
|
|
101
|
+
@disconnect="handleDisconnect"
|
|
105
102
|
/>
|
|
106
103
|
</template>
|
|
107
104
|
|
|
108
105
|
<script setup>
|
|
109
|
-
|
|
110
|
-
|
|
106
|
+
import { ref } from 'vue'
|
|
107
|
+
|
|
108
|
+
const isConnected = ref(false)
|
|
109
|
+
const isConnecting = ref(false)
|
|
110
|
+
const address = ref(null)
|
|
111
|
+
|
|
112
|
+
const shortenAddress = (addr) => {
|
|
113
|
+
if (!addr || addr.length < 13) return addr
|
|
114
|
+
return `${addr.slice(0, 6)}...${addr.slice(-4)}`
|
|
111
115
|
}
|
|
112
116
|
|
|
113
|
-
const
|
|
114
|
-
|
|
117
|
+
const handleWalletClick = async () => {
|
|
118
|
+
// Aquí integrarías con @vechain/dapp-kit-ui o tu librería de wallet preferida
|
|
119
|
+
isConnecting.value = true
|
|
120
|
+
// ... lógica de conexión
|
|
115
121
|
}
|
|
116
122
|
|
|
117
|
-
const
|
|
118
|
-
|
|
123
|
+
const handleDisconnect = () => {
|
|
124
|
+
// ... lógica de desconexión
|
|
125
|
+
isConnected.value = false
|
|
126
|
+
address.value = null
|
|
119
127
|
}
|
|
120
128
|
</script>
|
|
121
129
|
```
|
|
@@ -123,12 +131,16 @@ const handleError = (error) => {
|
|
|
123
131
|
**Props:**
|
|
124
132
|
- `variant`: 'primary' | 'secondary' | 'ghost' (default: 'primary')
|
|
125
133
|
- `size`: 'sm' | 'md' | 'lg' (default: 'md')
|
|
126
|
-
- `
|
|
134
|
+
- `isConnected`: boolean (default: false) - Estado de conexión
|
|
135
|
+
- `isConnecting`: boolean (default: false) - Estado de carga
|
|
136
|
+
- `address`: string | null (default: null) - Dirección de la wallet
|
|
137
|
+
- `shortenAddressFn`: Function - Función para truncar la dirección
|
|
127
138
|
|
|
128
139
|
**Events:**
|
|
129
|
-
- `
|
|
130
|
-
- `
|
|
131
|
-
|
|
140
|
+
- `click`: Se emite al hacer click para conectar
|
|
141
|
+
- `disconnect`: Se emite al solicitar desconexión
|
|
142
|
+
|
|
143
|
+
**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.
|
|
132
144
|
|
|
133
145
|
## 📄 Licencia
|
|
134
146
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oottoo-core/oottoo-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "Componentes UI para Vue 3 - Oottoo Core",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/oottoo-ui.umd.js",
|
|
@@ -30,11 +30,9 @@
|
|
|
30
30
|
"author": "Oottoo Core Team",
|
|
31
31
|
"license": "MIT",
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"@vechain/dapp-kit-ui": "^1.0.0",
|
|
34
33
|
"vue": "^3.5.13"
|
|
35
34
|
},
|
|
36
35
|
"devDependencies": {
|
|
37
|
-
"@vechain/dapp-kit-ui": "^1.0.0",
|
|
38
36
|
"@vitejs/plugin-vue": "^5.2.4",
|
|
39
37
|
"vite": "^6.0.11",
|
|
40
38
|
"vite-plugin-vue-devtools": "^7.7.0",
|