@jjlmoya/utils-tools 1.10.0 → 1.12.0

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jjlmoya/utils-tools",
3
- "version": "1.10.0",
3
+ "version": "1.12.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
@@ -18,7 +18,7 @@
18
18
  margin: 0 auto;
19
19
  }
20
20
 
21
- :global(.theme-dark) .dd-root {
21
+ .theme-dark .dd-root {
22
22
  --dd-card-bg: #1e293b;
23
23
  --dd-card-border: rgba(255, 255, 255, 0.05);
24
24
  --dd-field-bg: #0f172a;
@@ -19,7 +19,7 @@
19
19
  margin: 0 auto;
20
20
  }
21
21
 
22
- :global(.theme-dark) .gdl-root {
22
+ .theme-dark .gdl-root {
23
23
  --gdl-card-bg: #1e293b;
24
24
  --gdl-card-border: #334155;
25
25
  --gdl-field-bg: #0f172a;
@@ -20,7 +20,7 @@
20
20
  margin: 0 auto;
21
21
  }
22
22
 
23
- :global(.theme-dark) .elc-root {
23
+ .theme-dark .elc-root {
24
24
  --elc-card-bg: rgba(15, 23, 42, 0.6);
25
25
  --elc-card-border: rgba(255, 255, 255, 0.1);
26
26
  --elc-field-bg: #1e293b;
@@ -90,154 +90,3 @@ const { t } = Astro.props;
90
90
  </button>
91
91
  </form>
92
92
 
93
- <style>
94
- .deb-form {
95
- display: flex;
96
- flex-direction: column;
97
- gap: 2rem;
98
- }
99
-
100
- .deb-group {
101
- display: flex;
102
- flex-direction: column;
103
- gap: 1rem;
104
- }
105
-
106
- .deb-step-label {
107
- font-size: 0.875rem;
108
- font-weight: 800;
109
- color: var(--deb-text-muted);
110
- text-transform: uppercase;
111
- letter-spacing: 0.1em;
112
- display: flex;
113
- align-items: center;
114
- gap: 0.5rem;
115
- }
116
-
117
- .deb-step-label::after {
118
- content: "";
119
- flex: 1;
120
- height: 1px;
121
- background: var(--deb-label-border);
122
- }
123
-
124
- .deb-grid {
125
- display: grid;
126
- gap: 0.75rem;
127
- }
128
-
129
- .deb-grid-3 { grid-template-columns: repeat(3, 1fr); }
130
- .deb-grid-4 { grid-template-columns: repeat(4, 1fr); }
131
-
132
- .deb-option {
133
- border-radius: 1rem;
134
- padding: 1rem 0.5rem;
135
- display: flex;
136
- flex-direction: column;
137
- align-items: center;
138
- gap: 0.75rem;
139
- background: var(--deb-option-bg);
140
- border: 2px solid var(--deb-option-border);
141
- cursor: pointer;
142
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
143
- color: var(--deb-text-main);
144
- }
145
-
146
- .deb-icon {
147
- width: 2.25rem;
148
- height: 2.25rem;
149
- stroke: currentcolor;
150
- opacity: 0.7;
151
- transition: transform 0.2s;
152
- }
153
-
154
- .deb-option span {
155
- font-size: 0.8125rem;
156
- font-weight: 700;
157
- line-height: 1.2;
158
- }
159
-
160
- .deb-option:hover {
161
- transform: translateY(-2px);
162
- background: var(--deb-option-hover);
163
- border-color: var(--deb-accent);
164
- }
165
-
166
- .deb-option:hover .deb-icon {
167
- transform: scale(1.1);
168
- opacity: 1;
169
- }
170
-
171
- :global(.deb-selected).deb-option {
172
- background: var(--deb-accent-bg);
173
- border-color: var(--deb-accent);
174
- color: #fff;
175
- box-shadow: 0 8px 16px -4px var(--deb-accent-shadow);
176
- }
177
-
178
- :global(.deb-selected) .deb-icon { opacity: 1; }
179
-
180
- .deb-vehicle {
181
- --deb-accent: #0ea5e9;
182
- --deb-accent-bg: #0ea5e9;
183
- --deb-accent-shadow: rgba(14, 165, 233, 0.4);
184
- }
185
-
186
- .deb-fuel {
187
- --deb-accent: #10b981;
188
- --deb-accent-bg: #10b981;
189
- --deb-accent-shadow: rgba(16, 185, 129, 0.4);
190
- }
191
-
192
- .deb-year {
193
- --deb-accent: #8b5cf6;
194
- --deb-accent-bg: #8b5cf6;
195
- --deb-accent-shadow: rgba(139, 92, 246, 0.4);
196
- }
197
-
198
- .deb-error {
199
- color: #ef4444;
200
- font-size: 0.75rem;
201
- font-weight: 700;
202
- opacity: 0;
203
- transition: opacity 0.2s;
204
- margin-top: -0.5rem;
205
- }
206
-
207
- .deb-help {
208
- font-size: 0.75rem;
209
- color: var(--deb-text-muted);
210
- line-height: 1.5;
211
- font-style: italic;
212
- }
213
-
214
- .deb-submit {
215
- width: 100%;
216
- padding: 1.25rem;
217
- background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
218
- color: #fff;
219
- border: none;
220
- border-radius: 1.25rem;
221
- font-weight: 800;
222
- font-size: 1.125rem;
223
- cursor: pointer;
224
- transition: all 0.3s ease;
225
- text-transform: uppercase;
226
- letter-spacing: 0.05em;
227
- display: flex;
228
- justify-content: center;
229
- align-items: center;
230
- gap: 0.75rem;
231
- box-shadow: 0 10px 15px -3px rgba(217, 119, 6, 0.3);
232
- }
233
-
234
- .deb-submit:hover {
235
- transform: translateY(-2px);
236
- box-shadow: 0 20px 25px -5px rgba(217, 119, 6, 0.4);
237
- filter: brightness(1.1);
238
- }
239
-
240
- @media (max-width: 480px) {
241
- .deb-grid-3, .deb-grid-4 { grid-template-columns: repeat(2, 1fr); }
242
- }
243
- </style>
@@ -48,104 +48,3 @@ const { t } = Astro.props;
48
48
  </div>
49
49
  </div>
50
50
 
51
- <style>
52
- .deb-result {
53
- display: none;
54
- flex-direction: column;
55
- animation: deb-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1);
56
- }
57
-
58
- .deb-result-card {
59
- background: var(--deb-result-bg);
60
- border-radius: 1.5rem;
61
- padding: 2.5rem;
62
- display: flex;
63
- flex-direction: column;
64
- align-items: center;
65
- text-align: center;
66
- border: 1px solid var(--deb-card-border);
67
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
68
- }
69
-
70
- .deb-result-title {
71
- font-size: 1.25rem;
72
- font-weight: 800;
73
- color: var(--deb-text-muted);
74
- text-transform: uppercase;
75
- letter-spacing: 0.1em;
76
- margin-bottom: 2rem;
77
- }
78
-
79
- .deb-badge-container {
80
- margin-bottom: 2rem;
81
- filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
82
- }
83
-
84
- .deb-result-info {
85
- display: flex;
86
- flex-direction: column;
87
- gap: 1.5rem;
88
- max-width: 640px;
89
- width: 100%;
90
- }
91
-
92
- .deb-result-desc {
93
- font-size: 1.125rem;
94
- font-weight: 600;
95
- line-height: 1.6;
96
- color: var(--deb-text-main);
97
- }
98
-
99
- .deb-warning-box {
100
- display: flex;
101
- gap: 1rem;
102
- padding: 1rem;
103
- background: rgba(245, 158, 11, 0.08);
104
- border-radius: 1rem;
105
- border: 1px solid rgba(245, 158, 11, 0.2);
106
- text-align: left;
107
- }
108
-
109
- .deb-result-warn {
110
- font-size: 0.8125rem;
111
- color: #b45309;
112
- font-weight: 500;
113
- line-height: 1.5;
114
- }
115
-
116
- :global(.theme-dark) .deb-result-warn {
117
- color: #fbbf24;
118
- }
119
-
120
- .deb-reset-btn {
121
- margin-top: 2.5rem;
122
- display: flex;
123
- align-items: center;
124
- gap: 0.75rem;
125
- padding: 0.875rem 2rem;
126
- background: var(--deb-option-bg);
127
- border: 1px solid var(--deb-option-border);
128
- border-radius: 100px;
129
- color: var(--deb-text-main);
130
- font-weight: 700;
131
- cursor: pointer;
132
- transition: all 0.2s;
133
- }
134
-
135
- .deb-reset-btn:hover {
136
- background: var(--deb-option-hover);
137
- transform: scale(1.05);
138
- }
139
-
140
- @keyframes deb-slide-up {
141
- from {
142
- opacity: 0;
143
- transform: translateY(20px);
144
- }
145
-
146
- to {
147
- opacity: 1;
148
- transform: translateY(0);
149
- }
150
- }
151
- </style>
@@ -16,7 +16,7 @@
16
16
  margin: 0 auto;
17
17
  }
18
18
 
19
- :global(.theme-dark) .deb-root {
19
+ .theme-dark .deb-root {
20
20
  --deb-bg: #0f172a;
21
21
  --deb-card-bg: #1e293b;
22
22
  --deb-card-border: rgba(255, 255, 255, 0.08);
@@ -45,14 +45,14 @@
45
45
  }
46
46
  }
47
47
 
48
- :global(.deb-badge-display h3) {
48
+ .deb-badge-display h3 {
49
49
  font-size: 1.5rem;
50
50
  margin: 0;
51
51
  color: var(--deb-text-main);
52
52
  font-weight: 800;
53
53
  }
54
54
 
55
- :global(.deb-replica) {
55
+ .deb-replica {
56
56
  width: 200px;
57
57
  height: 200px;
58
58
  border-radius: 50%;
@@ -67,7 +67,7 @@
67
67
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
68
68
  }
69
69
 
70
- :global(.deb-replica)::after {
70
+ .deb-replica::after {
71
71
  content: "DGT";
72
72
  position: absolute;
73
73
  top: 25px;
@@ -80,7 +80,7 @@
80
80
  z-index: 10;
81
81
  }
82
82
 
83
- :global(.deb-big-letter) {
83
+ .deb-big-letter {
84
84
  font-size: 7rem;
85
85
  font-weight: 900;
86
86
  line-height: 1;
@@ -88,7 +88,7 @@
88
88
  margin-top: 15px;
89
89
  }
90
90
 
91
- :global(.deb-sub-text) {
91
+ .deb-sub-text {
92
92
  font-size: 1rem;
93
93
  font-weight: 800;
94
94
  text-transform: uppercase;
@@ -96,46 +96,46 @@
96
96
  margin-top: -5px;
97
97
  }
98
98
 
99
- :global(.deb-replica-0) {
99
+ .deb-replica-0 {
100
100
  background: #005aa3;
101
101
  color: #fff;
102
102
  }
103
103
 
104
- :global(.deb-replica-0)::after {
104
+ .deb-replica-0::after {
105
105
  color: #fff;
106
106
  opacity: 0.9;
107
107
  }
108
108
 
109
- :global(.deb-replica-eco) {
109
+ .deb-replica-eco {
110
110
  background: linear-gradient(90deg, #00a455 50%, #005aa3 50%);
111
111
  color: #fff;
112
112
  }
113
113
 
114
- :global(.deb-replica-eco)::after {
114
+ .deb-replica-eco::after {
115
115
  color: #fff;
116
116
  opacity: 0.9;
117
117
  }
118
118
 
119
- :global(.deb-replica-eco) :global(.deb-big-letter) {
119
+ .deb-replica-eco .deb-big-letter {
120
120
  font-size: 5rem;
121
121
  margin-top: 25px;
122
122
  }
123
123
 
124
- :global(.deb-replica-c) {
124
+ .deb-replica-c {
125
125
  background: #00a455;
126
126
  color: #000;
127
127
  }
128
128
 
129
- :global(.deb-replica-c) :global(.deb-sub-text) { display: none; }
129
+ .deb-replica-c .deb-sub-text { display: none; }
130
130
 
131
- :global(.deb-replica-b) {
131
+ .deb-replica-b {
132
132
  background: #ffdf00;
133
133
  color: #000;
134
134
  }
135
135
 
136
- :global(.deb-replica-b) :global(.deb-sub-text) { display: none; }
136
+ .deb-replica-b .deb-sub-text { display: none; }
137
137
 
138
- :global(.deb-replica-a) {
138
+ .deb-replica-a {
139
139
  width: 200px;
140
140
  height: 120px;
141
141
  border-radius: 1rem;
@@ -148,7 +148,258 @@
148
148
  align-items: center;
149
149
  }
150
150
 
151
- :global(.deb-replica-a) :global(.deb-big-letter) {
151
+ .deb-replica-a .deb-big-letter {
152
152
  font-size: 4rem;
153
153
  margin-top: 0;
154
- }
154
+ }
155
+ /* BadgeForm.astro */
156
+ .deb-form {
157
+ display: flex;
158
+ flex-direction: column;
159
+ gap: 2rem;
160
+ }
161
+
162
+ .deb-group {
163
+ display: flex;
164
+ flex-direction: column;
165
+ gap: 1rem;
166
+ }
167
+
168
+ .deb-step-label {
169
+ font-size: 0.875rem;
170
+ font-weight: 800;
171
+ color: var(--deb-text-muted);
172
+ text-transform: uppercase;
173
+ letter-spacing: 0.1em;
174
+ display: flex;
175
+ align-items: center;
176
+ gap: 0.5rem;
177
+ }
178
+
179
+ .deb-step-label::after {
180
+ content: "";
181
+ flex: 1;
182
+ height: 1px;
183
+ background: var(--deb-label-border);
184
+ }
185
+
186
+ .deb-grid {
187
+ display: grid;
188
+ gap: 0.75rem;
189
+ }
190
+
191
+ .deb-grid-3 { grid-template-columns: repeat(3, 1fr); }
192
+ .deb-grid-4 { grid-template-columns: repeat(4, 1fr); }
193
+
194
+ .deb-option {
195
+ border-radius: 1rem;
196
+ padding: 1rem 0.5rem;
197
+ display: flex;
198
+ flex-direction: column;
199
+ align-items: center;
200
+ gap: 0.75rem;
201
+ background: var(--deb-option-bg);
202
+ border: 2px solid var(--deb-option-border);
203
+ cursor: pointer;
204
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
205
+ color: var(--deb-text-main);
206
+ }
207
+
208
+ .deb-icon {
209
+ width: 2.25rem;
210
+ height: 2.25rem;
211
+ stroke: currentcolor;
212
+ opacity: 0.7;
213
+ transition: transform 0.2s;
214
+ }
215
+
216
+ .deb-option span {
217
+ font-size: 0.8125rem;
218
+ font-weight: 700;
219
+ line-height: 1.2;
220
+ }
221
+
222
+ .deb-option:hover {
223
+ transform: translateY(-2px);
224
+ background: var(--deb-option-hover);
225
+ border-color: var(--deb-accent);
226
+ }
227
+
228
+ .deb-option:hover .deb-icon {
229
+ transform: scale(1.1);
230
+ opacity: 1;
231
+ }
232
+
233
+ .deb-selected.deb-option {
234
+ background: var(--deb-accent-bg);
235
+ border-color: var(--deb-accent);
236
+ color: #fff;
237
+ box-shadow: 0 8px 16px -4px var(--deb-accent-shadow);
238
+ }
239
+
240
+ .deb-selected .deb-icon { opacity: 1; }
241
+
242
+ .deb-vehicle {
243
+ --deb-accent: #0ea5e9;
244
+ --deb-accent-bg: #0ea5e9;
245
+ --deb-accent-shadow: rgba(14, 165, 233, 0.4);
246
+ }
247
+
248
+ .deb-fuel {
249
+ --deb-accent: #10b981;
250
+ --deb-accent-bg: #10b981;
251
+ --deb-accent-shadow: rgba(16, 185, 129, 0.4);
252
+ }
253
+
254
+ .deb-year {
255
+ --deb-accent: #8b5cf6;
256
+ --deb-accent-bg: #8b5cf6;
257
+ --deb-accent-shadow: rgba(139, 92, 246, 0.4);
258
+ }
259
+
260
+ .deb-error {
261
+ color: #ef4444;
262
+ font-size: 0.75rem;
263
+ font-weight: 700;
264
+ opacity: 0;
265
+ transition: opacity 0.2s;
266
+ margin-top: -0.5rem;
267
+ }
268
+
269
+ .deb-help {
270
+ font-size: 0.75rem;
271
+ color: var(--deb-text-muted);
272
+ line-height: 1.5;
273
+ font-style: italic;
274
+ }
275
+
276
+ .deb-submit {
277
+ width: 100%;
278
+ padding: 1.25rem;
279
+ background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
280
+ color: #fff;
281
+ border: none;
282
+ border-radius: 1.25rem;
283
+ font-weight: 800;
284
+ font-size: 1.125rem;
285
+ cursor: pointer;
286
+ transition: all 0.3s ease;
287
+ text-transform: uppercase;
288
+ letter-spacing: 0.05em;
289
+ display: flex;
290
+ justify-content: center;
291
+ align-items: center;
292
+ gap: 0.75rem;
293
+ box-shadow: 0 10px 15px -3px rgba(217, 119, 6, 0.3);
294
+ }
295
+
296
+ .deb-submit:hover {
297
+ transform: translateY(-2px);
298
+ box-shadow: 0 20px 25px -5px rgba(217, 119, 6, 0.4);
299
+ filter: brightness(1.1);
300
+ }
301
+
302
+ @media (max-width: 480px) {
303
+ .deb-grid-3, .deb-grid-4 { grid-template-columns: repeat(2, 1fr); }
304
+ }
305
+
306
+ /* BadgeResult.astro */
307
+ .deb-result {
308
+ display: none;
309
+ flex-direction: column;
310
+ animation: deb-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1);
311
+ }
312
+
313
+ .deb-result-card {
314
+ background: var(--deb-result-bg);
315
+ border-radius: 1.5rem;
316
+ padding: 2.5rem;
317
+ display: flex;
318
+ flex-direction: column;
319
+ align-items: center;
320
+ text-align: center;
321
+ border: 1px solid var(--deb-card-border);
322
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
323
+ }
324
+
325
+ .deb-result-title {
326
+ font-size: 1.25rem;
327
+ font-weight: 800;
328
+ color: var(--deb-text-muted);
329
+ text-transform: uppercase;
330
+ letter-spacing: 0.1em;
331
+ margin-bottom: 2rem;
332
+ }
333
+
334
+ .deb-badge-container {
335
+ margin-bottom: 2rem;
336
+ filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
337
+ }
338
+
339
+ .deb-result-info {
340
+ display: flex;
341
+ flex-direction: column;
342
+ gap: 1.5rem;
343
+ max-width: 640px;
344
+ width: 100%;
345
+ }
346
+
347
+ .deb-result-desc {
348
+ font-size: 1.125rem;
349
+ font-weight: 600;
350
+ line-height: 1.6;
351
+ color: var(--deb-text-main);
352
+ }
353
+
354
+ .deb-warning-box {
355
+ display: flex;
356
+ gap: 1rem;
357
+ padding: 1rem;
358
+ background: rgba(245, 158, 11, 0.08);
359
+ border-radius: 1rem;
360
+ border: 1px solid rgba(245, 158, 11, 0.2);
361
+ text-align: left;
362
+ }
363
+
364
+ .deb-result-warn {
365
+ font-size: 0.8125rem;
366
+ color: #b45309;
367
+ font-weight: 500;
368
+ line-height: 1.5;
369
+ }
370
+
371
+ .theme-dark .deb-result-warn {
372
+ color: #fbbf24;
373
+ }
374
+
375
+ .deb-reset-btn {
376
+ margin-top: 2.5rem;
377
+ display: flex;
378
+ align-items: center;
379
+ gap: 0.75rem;
380
+ padding: 0.875rem 2rem;
381
+ background: var(--deb-option-bg);
382
+ border: 1px solid var(--deb-option-border);
383
+ border-radius: 100px;
384
+ color: var(--deb-text-main);
385
+ font-weight: 700;
386
+ cursor: pointer;
387
+ transition: all 0.2s;
388
+ }
389
+
390
+ .deb-reset-btn:hover {
391
+ background: var(--deb-option-hover);
392
+ transform: scale(1.05);
393
+ }
394
+
395
+ @keyframes deb-slide-up {
396
+ from {
397
+ opacity: 0;
398
+ transform: translateY(20px);
399
+ }
400
+
401
+ to {
402
+ opacity: 1;
403
+ transform: translateY(0);
404
+ }
405
+ }
@@ -26,7 +26,7 @@
26
26
  margin: 0 auto;
27
27
  }
28
28
 
29
- :global(.theme-dark) .mb-root {
29
+ .theme-dark .mb-root {
30
30
  --mb-card-bg: #0f172a;
31
31
  --mb-card-border: #1e293b;
32
32
  --mb-text-main: #e2e8f0;