@jjlmoya/utils-tools 1.10.0 → 1.11.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.11.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
@@ -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>
@@ -151,4 +151,255 @@
151
151
  :global(.deb-replica-a) :global(.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
+ }
@@ -55,173 +55,3 @@ const options = [
55
55
  </div>
56
56
  </div>
57
57
 
58
- <style>
59
- .pg-config-card {
60
- background: rgba(255, 255, 255, 0.4);
61
- border: 1px solid rgba(0, 0, 0, 0.05);
62
- border-radius: 1.5rem;
63
- padding: 1.5rem;
64
- display: flex;
65
- flex-direction: column;
66
- gap: 2rem;
67
- }
68
-
69
- :global(.theme-dark) .pg-config-card {
70
- background: rgba(0, 0, 0, 0.2);
71
- border-color: rgba(255, 255, 255, 0.05);
72
- }
73
-
74
- .pg-config-header {
75
- display: flex;
76
- justify-content: space-between;
77
- align-items: center;
78
- margin-bottom: 1rem;
79
- }
80
-
81
- .pg-config-label {
82
- font-size: 1rem;
83
- font-weight: 600;
84
- color: #475569;
85
- }
86
-
87
- :global(.theme-dark) .pg-config-label {
88
- color: #94a3b8;
89
- }
90
-
91
- .pg-config-value {
92
- font-size: 1.5rem;
93
- font-weight: 800;
94
- color: #3b82f6;
95
- }
96
-
97
- .pg-range-input {
98
- width: 100%;
99
- margin-bottom: 0.5rem;
100
- cursor: pointer;
101
- accent-color: #3b82f6;
102
- }
103
-
104
- .pg-range-markers {
105
- display: flex;
106
- justify-content: space-between;
107
- padding: 0 4px;
108
- font-size: 0.75rem;
109
- color: #94a3b8;
110
- font-weight: 500;
111
- }
112
-
113
- .pg-options-grid {
114
- display: grid;
115
- grid-template-columns: repeat(2, 1fr);
116
- gap: 0.75rem;
117
- }
118
-
119
- @media (max-width: 480px) {
120
- .pg-options-grid {
121
- grid-template-columns: 1fr;
122
- }
123
- }
124
-
125
- .pg-option-item {
126
- cursor: pointer;
127
- position: relative;
128
- }
129
-
130
- .pg-option-checkbox {
131
- position: absolute;
132
- opacity: 0;
133
- width: 0;
134
- height: 0;
135
- }
136
-
137
- .pg-option-content {
138
- display: flex;
139
- align-items: center;
140
- gap: 0.75rem;
141
- padding: 0.75rem;
142
- background: rgba(255, 255, 255, 0.6);
143
- border: 1px solid rgba(0, 0, 0, 0.05);
144
- border-radius: 1rem;
145
- transition: all 0.2s ease;
146
- }
147
-
148
- :global(.theme-dark) .pg-option-content {
149
- background: rgba(30, 41, 59, 0.4);
150
- border-color: rgba(255, 255, 255, 0.05);
151
- }
152
-
153
- .pg-option-item:hover .pg-option-content {
154
- background: rgba(255, 255, 255, 0.8);
155
- transform: translateY(-1px);
156
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
157
- }
158
-
159
- :global(.theme-dark) .pg-option-item:hover .pg-option-content {
160
- background: rgba(30, 41, 59, 0.6);
161
- }
162
-
163
- .pg-option-checkbox:checked + .pg-option-content {
164
- border-color: #10b981;
165
- background: rgba(16, 185, 129, 0.05);
166
- }
167
-
168
- :global(.theme-dark) .pg-option-checkbox:checked + .pg-option-content {
169
- background: rgba(16, 185, 129, 0.1);
170
- }
171
-
172
- .pg-option-indicator {
173
- width: 1.5rem;
174
- height: 1.5rem;
175
- border-radius: 0.5rem;
176
- border: 2px solid #cbd5e1;
177
- display: flex;
178
- align-items: center;
179
- justify-content: center;
180
- transition: all 0.2s ease;
181
- color: white;
182
- }
183
-
184
- :global(.theme-dark) .pg-option-indicator {
185
- border-color: #475569;
186
- }
187
-
188
- .pg-option-checkbox:checked + .pg-option-content .pg-option-indicator {
189
- background: #10b981;
190
- border-color: #10b981;
191
- box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
192
- }
193
-
194
- .pg-option-indicator svg {
195
- width: 0.875rem;
196
- height: 0.875rem;
197
- opacity: 0;
198
- transform: scale(0.5);
199
- transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
200
- }
201
-
202
- .pg-option-checkbox:checked + .pg-option-content .pg-option-indicator svg {
203
- opacity: 1;
204
- transform: scale(1);
205
- }
206
-
207
- .pg-option-info {
208
- display: flex;
209
- flex-direction: column;
210
- }
211
-
212
- .pg-option-label {
213
- font-size: 0.9375rem;
214
- font-weight: 600;
215
- color: #1e293b;
216
- }
217
-
218
- :global(.theme-dark) .pg-option-label {
219
- color: #e2e8f0;
220
- }
221
-
222
- .pg-option-hint {
223
- font-size: 0.75rem;
224
- color: #94a3b8;
225
- font-weight: 500;
226
- }
227
- </style>