ywana-core8 0.1.95 → 0.1.96
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/dist/index.css +1 -16
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
- package/src/html/textfield2.css +1 -16
- package/src/widgets/login/LoginBox.example.js +195 -0
- package/test-textfield2-icons.html +0 -150
package/package.json
CHANGED
package/src/html/textfield2.css
CHANGED
|
@@ -117,8 +117,7 @@
|
|
|
117
117
|
.textfield2-outlined .textfield2-clear,
|
|
118
118
|
.textfield2-outlined .textfield2-password-toggle {
|
|
119
119
|
/* Para outlined, centramos respecto al input que tiene padding de 1rem */
|
|
120
|
-
top:
|
|
121
|
-
right: 0.75rem; /* Alineado con el padding del input */
|
|
120
|
+
top: 3.3rem;
|
|
122
121
|
}
|
|
123
122
|
|
|
124
123
|
.textfield2-clear:hover,
|
|
@@ -133,20 +132,6 @@
|
|
|
133
132
|
top: calc(0.5rem + 1.25rem); /* padding-top reducido + mitad altura input */
|
|
134
133
|
}
|
|
135
134
|
|
|
136
|
-
.textfield2-password-toggle {
|
|
137
|
-
right: 2.5rem; /* Más espacio para el clear button */
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
/* When both clear and password toggle are present */
|
|
141
|
-
.textfield2.textfield2-password .textfield2-clear {
|
|
142
|
-
right: 2.5rem;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
/* Outlined variant - icon spacing */
|
|
146
|
-
.textfield2-outlined .textfield2-password-toggle {
|
|
147
|
-
right: 2.5rem;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
135
|
.textfield2-outlined.textfield2-password .textfield2-clear {
|
|
151
136
|
right: 2.5rem;
|
|
152
137
|
}
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { LoginBox } from './LoginBox'
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* LoginBox Examples
|
|
6
|
+
*
|
|
7
|
+
* Ejemplos de uso del componente LoginBox con diferentes configuraciones
|
|
8
|
+
* para verificar el centrado de iconos en los textfields.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
export const LoginBoxExamples = () => {
|
|
12
|
+
const [loginState, setLoginState] = useState({
|
|
13
|
+
loading: false,
|
|
14
|
+
message: '',
|
|
15
|
+
lastLogin: null
|
|
16
|
+
})
|
|
17
|
+
|
|
18
|
+
const handleLogin = (user, password) => {
|
|
19
|
+
console.log('Login attempt:', { user, password })
|
|
20
|
+
|
|
21
|
+
setLoginState(prev => ({ ...prev, loading: true, message: '' }))
|
|
22
|
+
|
|
23
|
+
// Simular proceso de login
|
|
24
|
+
setTimeout(() => {
|
|
25
|
+
if (user === 'admin' && password === 'admin') {
|
|
26
|
+
setLoginState({
|
|
27
|
+
loading: false,
|
|
28
|
+
message: '',
|
|
29
|
+
lastLogin: { user, timestamp: new Date() }
|
|
30
|
+
})
|
|
31
|
+
console.log('Login successful!')
|
|
32
|
+
} else {
|
|
33
|
+
setLoginState({
|
|
34
|
+
loading: false,
|
|
35
|
+
message: 'Usuario o contraseña incorrectos',
|
|
36
|
+
lastLogin: null
|
|
37
|
+
})
|
|
38
|
+
}
|
|
39
|
+
}, 2000)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const resetLogin = () => {
|
|
43
|
+
setLoginState({
|
|
44
|
+
loading: false,
|
|
45
|
+
message: '',
|
|
46
|
+
lastLogin: null
|
|
47
|
+
})
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<div style={{
|
|
52
|
+
padding: '2rem',
|
|
53
|
+
backgroundColor: '#f5f5f5',
|
|
54
|
+
minHeight: '100vh',
|
|
55
|
+
display: 'flex',
|
|
56
|
+
flexDirection: 'column',
|
|
57
|
+
gap: '2rem'
|
|
58
|
+
}}>
|
|
59
|
+
<h1>LoginBox Examples</h1>
|
|
60
|
+
|
|
61
|
+
{/* Ejemplo 1: LoginBox básico */}
|
|
62
|
+
<div style={{
|
|
63
|
+
backgroundColor: 'white',
|
|
64
|
+
padding: '2rem',
|
|
65
|
+
borderRadius: '8px',
|
|
66
|
+
boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
|
|
67
|
+
maxWidth: '400px'
|
|
68
|
+
}}>
|
|
69
|
+
<h2>1. LoginBox Básico</h2>
|
|
70
|
+
<p>LoginBox estándar con labels en español</p>
|
|
71
|
+
<LoginBox
|
|
72
|
+
userLabel="Usuario"
|
|
73
|
+
passwordLabel="Contraseña"
|
|
74
|
+
loginLabel="Iniciar Sesión"
|
|
75
|
+
onOK={handleLogin}
|
|
76
|
+
loading={loginState.loading}
|
|
77
|
+
message={loginState.message}
|
|
78
|
+
/>
|
|
79
|
+
{loginState.lastLogin && (
|
|
80
|
+
<div style={{
|
|
81
|
+
marginTop: '1rem',
|
|
82
|
+
padding: '1rem',
|
|
83
|
+
backgroundColor: '#e8f5e8',
|
|
84
|
+
borderRadius: '4px',
|
|
85
|
+
fontSize: '0.9rem'
|
|
86
|
+
}}>
|
|
87
|
+
✅ Login exitoso: {loginState.lastLogin.user}
|
|
88
|
+
<br />
|
|
89
|
+
{loginState.lastLogin.timestamp.toLocaleString()}
|
|
90
|
+
<br />
|
|
91
|
+
<button onClick={resetLogin} style={{ marginTop: '0.5rem' }}>
|
|
92
|
+
Reset
|
|
93
|
+
</button>
|
|
94
|
+
</div>
|
|
95
|
+
)}
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
{/* Ejemplo 2: LoginBox con valores predefinidos */}
|
|
99
|
+
<div style={{
|
|
100
|
+
backgroundColor: 'white',
|
|
101
|
+
padding: '2rem',
|
|
102
|
+
borderRadius: '8px',
|
|
103
|
+
boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
|
|
104
|
+
maxWidth: '400px'
|
|
105
|
+
}}>
|
|
106
|
+
<h2>2. LoginBox con Valores Predefinidos</h2>
|
|
107
|
+
<p>Para probar el centrado de iconos con texto existente</p>
|
|
108
|
+
<LoginBox
|
|
109
|
+
userLabel="Email"
|
|
110
|
+
userValue="usuario@ejemplo.com"
|
|
111
|
+
passwordLabel="Password"
|
|
112
|
+
passwordValue="password123"
|
|
113
|
+
loginLabel="Sign In"
|
|
114
|
+
onOK={(user, pass) => console.log('Login with preset values:', { user, pass })}
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
{/* Ejemplo 3: LoginBox en inglés */}
|
|
119
|
+
<div style={{
|
|
120
|
+
backgroundColor: 'white',
|
|
121
|
+
padding: '2rem',
|
|
122
|
+
borderRadius: '8px',
|
|
123
|
+
boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
|
|
124
|
+
maxWidth: '400px'
|
|
125
|
+
}}>
|
|
126
|
+
<h2>3. LoginBox en Inglés</h2>
|
|
127
|
+
<p>Labels en inglés para verificar diferentes longitudes de texto</p>
|
|
128
|
+
<LoginBox
|
|
129
|
+
userLabel="Username"
|
|
130
|
+
passwordLabel="Password"
|
|
131
|
+
loginLabel="Log In"
|
|
132
|
+
onOK={(user, pass) => console.log('English login:', { user, pass })}
|
|
133
|
+
/>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
{/* Ejemplo 4: LoginBox con contenido adicional */}
|
|
137
|
+
<div style={{
|
|
138
|
+
backgroundColor: 'white',
|
|
139
|
+
padding: '2rem',
|
|
140
|
+
borderRadius: '8px',
|
|
141
|
+
boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
|
|
142
|
+
maxWidth: '400px'
|
|
143
|
+
}}>
|
|
144
|
+
<h2>4. LoginBox con Contenido Adicional</h2>
|
|
145
|
+
<p>LoginBox con elementos adicionales en el footer</p>
|
|
146
|
+
<LoginBox
|
|
147
|
+
userLabel="Usuario"
|
|
148
|
+
passwordLabel="Contraseña"
|
|
149
|
+
loginLabel="Entrar"
|
|
150
|
+
onOK={(user, pass) => console.log('Login with extra content:', { user, pass })}
|
|
151
|
+
>
|
|
152
|
+
<div style={{
|
|
153
|
+
width: '100%',
|
|
154
|
+
textAlign: 'center',
|
|
155
|
+
marginTop: '1rem',
|
|
156
|
+
fontSize: '0.9rem',
|
|
157
|
+
color: '#666'
|
|
158
|
+
}}>
|
|
159
|
+
<a href="#" style={{ color: '#2196f3', textDecoration: 'none' }}>
|
|
160
|
+
¿Olvidaste tu contraseña?
|
|
161
|
+
</a>
|
|
162
|
+
<br />
|
|
163
|
+
<span style={{ fontSize: '0.8rem' }}>
|
|
164
|
+
¿No tienes cuenta? <a href="#" style={{ color: '#2196f3' }}>Regístrate</a>
|
|
165
|
+
</span>
|
|
166
|
+
</div>
|
|
167
|
+
</LoginBox>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
{/* Información de prueba */}
|
|
171
|
+
<div style={{
|
|
172
|
+
backgroundColor: '#fff3cd',
|
|
173
|
+
padding: '1rem',
|
|
174
|
+
borderRadius: '4px',
|
|
175
|
+
border: '1px solid #ffeaa7',
|
|
176
|
+
maxWidth: '600px'
|
|
177
|
+
}}>
|
|
178
|
+
<h3>💡 Información de Prueba</h3>
|
|
179
|
+
<p><strong>Para probar el login exitoso:</strong></p>
|
|
180
|
+
<ul>
|
|
181
|
+
<li>Usuario: <code>admin</code></li>
|
|
182
|
+
<li>Contraseña: <code>admin</code></li>
|
|
183
|
+
</ul>
|
|
184
|
+
<p><strong>Verificar centrado de iconos:</strong></p>
|
|
185
|
+
<ul>
|
|
186
|
+
<li>Los iconos de "clear" (X) deben aparecer centrados verticalmente en los campos</li>
|
|
187
|
+
<li>El icono de "visibility toggle" en el campo de contraseña debe estar centrado</li>
|
|
188
|
+
<li>Probar en diferentes tamaños de pantalla (responsive)</li>
|
|
189
|
+
</ul>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
)
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
export default LoginBoxExamples
|
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="es">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Test TextField2 Icons Centering</title>
|
|
7
|
-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
8
|
-
<link rel="stylesheet" href="src/html/textfield2.css">
|
|
9
|
-
<link rel="stylesheet" href="src/html/icon.css">
|
|
10
|
-
<style>
|
|
11
|
-
body {
|
|
12
|
-
font-family: Arial, sans-serif;
|
|
13
|
-
padding: 2rem;
|
|
14
|
-
background: #f5f5f5;
|
|
15
|
-
}
|
|
16
|
-
.test-container {
|
|
17
|
-
max-width: 600px;
|
|
18
|
-
margin: 0 auto;
|
|
19
|
-
background: white;
|
|
20
|
-
padding: 2rem;
|
|
21
|
-
border-radius: 8px;
|
|
22
|
-
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
23
|
-
}
|
|
24
|
-
.test-section {
|
|
25
|
-
margin-bottom: 2rem;
|
|
26
|
-
padding: 1rem;
|
|
27
|
-
border: 1px solid #e0e0e0;
|
|
28
|
-
border-radius: 4px;
|
|
29
|
-
}
|
|
30
|
-
.test-section h3 {
|
|
31
|
-
margin-top: 0;
|
|
32
|
-
color: #333;
|
|
33
|
-
}
|
|
34
|
-
.field-group {
|
|
35
|
-
margin-bottom: 1.5rem;
|
|
36
|
-
}
|
|
37
|
-
/* Variables CSS básicas */
|
|
38
|
-
:root {
|
|
39
|
-
--text-color: #333;
|
|
40
|
-
--text-color-light: #666;
|
|
41
|
-
--primary-color: #2196f3;
|
|
42
|
-
--error-color: #f44336;
|
|
43
|
-
--paper-color: #fff;
|
|
44
|
-
--divider-color: #e0e0e0;
|
|
45
|
-
}
|
|
46
|
-
</style>
|
|
47
|
-
</head>
|
|
48
|
-
<body>
|
|
49
|
-
<div class="test-container">
|
|
50
|
-
<h1>Test de Centrado de Iconos en TextField2</h1>
|
|
51
|
-
|
|
52
|
-
<div class="test-section">
|
|
53
|
-
<h3>1. TextField2 Normal con Label</h3>
|
|
54
|
-
<div class="field-group">
|
|
55
|
-
<div class="textfield2">
|
|
56
|
-
<input type="text" id="test1" value="Texto de prueba">
|
|
57
|
-
<i class="textfield2-clear material-icons">close</i>
|
|
58
|
-
<label for="test1">Campo de texto</label>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
<div class="test-section">
|
|
64
|
-
<h3>2. TextField2 Password con Toggle</h3>
|
|
65
|
-
<div class="field-group">
|
|
66
|
-
<div class="textfield2 textfield2-password">
|
|
67
|
-
<input type="password" id="test2" value="password123">
|
|
68
|
-
<i class="textfield2-clear material-icons">close</i>
|
|
69
|
-
<i class="textfield2-password-toggle material-icons">visibility</i>
|
|
70
|
-
<label for="test2">Contraseña</label>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<div class="test-section">
|
|
76
|
-
<h3>3. TextField2 Sin Label</h3>
|
|
77
|
-
<div class="field-group">
|
|
78
|
-
<div class="textfield2 no-label">
|
|
79
|
-
<input type="text" id="test3" value="Sin etiqueta" placeholder="Placeholder text">
|
|
80
|
-
<i class="textfield2-clear material-icons">close</i>
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
83
|
-
</div>
|
|
84
|
-
|
|
85
|
-
<div class="test-section">
|
|
86
|
-
<h3>4. TextField2 Outlined</h3>
|
|
87
|
-
<div class="field-group">
|
|
88
|
-
<div class="textfield2 textfield2-outlined">
|
|
89
|
-
<input type="text" id="test4" value="Texto outlined">
|
|
90
|
-
<i class="textfield2-clear material-icons">close</i>
|
|
91
|
-
<label for="test4">Campo outlined</label>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
<div class="test-section">
|
|
97
|
-
<h3>5. TextField2 Outlined Password</h3>
|
|
98
|
-
<div class="field-group">
|
|
99
|
-
<div class="textfield2 textfield2-outlined textfield2-password">
|
|
100
|
-
<input type="password" id="test5" value="password123">
|
|
101
|
-
<i class="textfield2-clear material-icons">close</i>
|
|
102
|
-
<i class="textfield2-password-toggle material-icons">visibility</i>
|
|
103
|
-
<label for="test5">Contraseña outlined</label>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
<div class="test-section">
|
|
109
|
-
<h3>6. TextArea2</h3>
|
|
110
|
-
<div class="field-group">
|
|
111
|
-
<div class="textfield2">
|
|
112
|
-
<textarea id="test6" rows="3">Texto en área de texto
|
|
113
|
-
Segunda línea
|
|
114
|
-
Tercera línea</textarea>
|
|
115
|
-
<i class="textfield2-clear material-icons">close</i>
|
|
116
|
-
<label for="test6">Área de texto</label>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
</div>
|
|
120
|
-
</div>
|
|
121
|
-
|
|
122
|
-
<script>
|
|
123
|
-
// Simular funcionalidad de los iconos
|
|
124
|
-
document.querySelectorAll('.textfield2-clear').forEach(icon => {
|
|
125
|
-
icon.addEventListener('click', function() {
|
|
126
|
-
const input = this.parentElement.querySelector('input, textarea');
|
|
127
|
-
if (input) {
|
|
128
|
-
input.value = '';
|
|
129
|
-
input.focus();
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
});
|
|
133
|
-
|
|
134
|
-
document.querySelectorAll('.textfield2-password-toggle').forEach(icon => {
|
|
135
|
-
icon.addEventListener('click', function() {
|
|
136
|
-
const input = this.parentElement.querySelector('input');
|
|
137
|
-
if (input) {
|
|
138
|
-
if (input.type === 'password') {
|
|
139
|
-
input.type = 'text';
|
|
140
|
-
this.textContent = 'visibility_off';
|
|
141
|
-
} else {
|
|
142
|
-
input.type = 'password';
|
|
143
|
-
this.textContent = 'visibility';
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
});
|
|
147
|
-
});
|
|
148
|
-
</script>
|
|
149
|
-
</body>
|
|
150
|
-
</html>
|