nexa-ui-kit 0.11.5 → 0.11.8
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/components/NAlert.js +2 -14
- package/dist/components/NAlert.nexa +3 -14
- package/dist/components/NAutocomplete.js +1 -1
- package/dist/components/NAutocomplete.nexa +2 -1
- package/dist/components/NAvatar.js +0 -5
- package/dist/components/NAvatar.nexa +1 -5
- package/dist/components/NBadge.js +0 -6
- package/dist/components/NBadge.nexa +1 -6
- package/dist/components/NBottomSheet.js +0 -5
- package/dist/components/NBottomSheet.nexa +1 -5
- package/dist/components/NButton.js +202 -294
- package/dist/components/NButton.nexa +224 -318
- package/dist/components/NCard.js +39 -82
- package/dist/components/NCard.nexa +27 -71
- package/dist/components/NCheckbox.js +77 -60
- package/dist/components/NCheckbox.nexa +71 -45
- package/dist/components/NChips.nexa +1 -0
- package/dist/components/NDataTable.js +1 -313
- package/dist/components/NDataTable.nexa +2 -314
- package/dist/components/NDatepicker.js +4 -25
- package/dist/components/NDatepicker.nexa +5 -25
- package/dist/components/NForm.nexa +1 -0
- package/dist/components/NFormField.js +0 -5
- package/dist/components/NFormField.nexa +1 -5
- package/dist/components/NImage.js +1 -6
- package/dist/components/NImage.nexa +2 -6
- package/dist/components/NInput.js +96 -263
- package/dist/components/NInput.nexa +89 -259
- package/dist/components/NInputNumber.nexa +1 -1
- package/dist/components/NModal.js +1 -118
- package/dist/components/NModal.nexa +2 -119
- package/dist/components/NMultiSelect.js +1 -1
- package/dist/components/NMultiSelect.nexa +2 -1
- package/dist/components/NPaginator.js +1 -11
- package/dist/components/NPaginator.nexa +2 -11
- package/dist/components/NPassword.nexa +1 -0
- package/dist/components/NProgressBar.js +0 -11
- package/dist/components/NProgressBar.nexa +1 -11
- package/dist/components/NRadio.js +1 -8
- package/dist/components/NRadio.nexa +2 -8
- package/dist/components/NScrollView.js +0 -6
- package/dist/components/NScrollView.nexa +1 -6
- package/dist/components/NSelect.js +7 -35
- package/dist/components/NSelect.nexa +8 -35
- package/dist/components/NSkeleton.js +3 -9
- package/dist/components/NSkeleton.nexa +4 -9
- package/dist/components/NSwitch.js +0 -6
- package/dist/components/NSwitch.nexa +1 -6
- package/dist/components/NTabs.js +0 -11
- package/dist/components/NTabs.nexa +1 -11
- package/dist/components/NTag.js +1 -11
- package/dist/components/NTag.nexa +2 -11
- package/dist/components/NToastContainer.js +3 -27
- package/dist/components/NToastContainer.nexa +4 -27
- package/dist/components/NTooltip.js +0 -13
- package/dist/components/NTooltip.nexa +1 -13
- package/dist/components/NTreeMenu.js +1 -21
- package/dist/components/NTreeMenu.nexa +2 -21
- package/dist/components/NVirtualList.js +0 -2
- package/dist/components/NVirtualList.nexa +1 -2
- package/dist/styles/tokens.css +82 -173
- package/package.json +4 -4
- package/src/components/NAlert.nexa +3 -14
- package/src/components/NAutocomplete.nexa +2 -1
- package/src/components/NAvatar.nexa +1 -5
- package/src/components/NBadge.nexa +1 -6
- package/src/components/NBottomSheet.nexa +1 -5
- package/src/components/NButton.nexa +224 -318
- package/src/components/NCard.nexa +27 -71
- package/src/components/NCheckbox.nexa +71 -45
- package/src/components/NChips.nexa +1 -0
- package/src/components/NDataTable.nexa +2 -314
- package/src/components/NDatepicker.nexa +5 -25
- package/src/components/NForm.nexa +1 -0
- package/src/components/NFormField.nexa +1 -5
- package/src/components/NImage.nexa +2 -6
- package/src/components/NInput.nexa +89 -259
- package/src/components/NInputNumber.nexa +1 -1
- package/src/components/NModal.nexa +2 -119
- package/src/components/NMultiSelect.nexa +2 -1
- package/src/components/NPaginator.nexa +2 -11
- package/src/components/NPassword.nexa +1 -0
- package/src/components/NProgressBar.nexa +1 -11
- package/src/components/NRadio.nexa +2 -8
- package/src/components/NScrollView.nexa +1 -6
- package/src/components/NSelect.nexa +8 -35
- package/src/components/NSkeleton.nexa +4 -9
- package/src/components/NSwitch.nexa +1 -6
- package/src/components/NTabs.nexa +1 -11
- package/src/components/NTag.nexa +2 -11
- package/src/components/NToastContainer.nexa +4 -27
- package/src/components/NTooltip.nexa +1 -13
- package/src/components/NTreeMenu.nexa +2 -21
- package/src/components/NVirtualList.nexa +1 -2
- package/src/styles/tokens.css +82 -173
|
@@ -99,13 +99,11 @@ const onScroll = (e) => {
|
|
|
99
99
|
overscroll-behavior: contain;
|
|
100
100
|
position: relative;
|
|
101
101
|
}
|
|
102
|
-
|
|
103
102
|
.n-scroll-view--horizontal {
|
|
104
103
|
overflow-y: hidden;
|
|
105
104
|
overflow-x: auto;
|
|
106
105
|
display: flex;
|
|
107
106
|
}
|
|
108
|
-
|
|
109
107
|
.n-scroll-view-ptr {
|
|
110
108
|
display: flex;
|
|
111
109
|
align-items: center;
|
|
@@ -113,11 +111,9 @@ const onScroll = (e) => {
|
|
|
113
111
|
overflow: hidden;
|
|
114
112
|
transition: height 0.1s;
|
|
115
113
|
}
|
|
116
|
-
|
|
117
114
|
.n-scroll-view-ptr.is-refreshing {
|
|
118
115
|
height: 52px !important;
|
|
119
116
|
}
|
|
120
|
-
|
|
121
117
|
.n-scroll-view-spinner {
|
|
122
118
|
font-size: 24px;
|
|
123
119
|
color: var(--n-color-primary, #6366f1);
|
|
@@ -125,12 +121,11 @@ const onScroll = (e) => {
|
|
|
125
121
|
line-height: 1;
|
|
126
122
|
transform-origin: center;
|
|
127
123
|
}
|
|
128
|
-
|
|
129
124
|
.n-scroll-view-ptr.is-refreshing .n-scroll-view-spinner {
|
|
130
125
|
animation: n-spin 0.8s linear infinite;
|
|
131
126
|
}
|
|
132
|
-
|
|
133
127
|
@keyframes n-spin {
|
|
134
128
|
to { transform: rotate(360deg) scale(1); }
|
|
135
129
|
}
|
|
130
|
+
|
|
136
131
|
</style>
|
|
@@ -298,7 +298,6 @@ const __style = `.n-select[data-v-2dd8d436]{
|
|
|
298
298
|
width: 100%;
|
|
299
299
|
font-family: var(--n-font-sans);
|
|
300
300
|
}
|
|
301
|
-
|
|
302
301
|
.n-select-label[data-v-2dd8d436]{
|
|
303
302
|
display: block;
|
|
304
303
|
font-size: var(--n-text-sm);
|
|
@@ -306,7 +305,6 @@ const __style = `.n-select[data-v-2dd8d436]{
|
|
|
306
305
|
color: var(--n-color-text-secondary);
|
|
307
306
|
margin-bottom: var(--n-space-2);
|
|
308
307
|
}
|
|
309
|
-
|
|
310
308
|
.n-select-trigger[data-v-2dd8d436]{
|
|
311
309
|
background: var(--n-color-surface);
|
|
312
310
|
border: 1px solid var(--n-color-border);
|
|
@@ -320,33 +318,27 @@ const __style = `.n-select[data-v-2dd8d436]{
|
|
|
320
318
|
color: var(--n-color-text);
|
|
321
319
|
gap: var(--n-space-2);
|
|
322
320
|
}
|
|
323
|
-
|
|
324
321
|
.n-select-trigger[data-v-2dd8d436]:focus-visible{
|
|
325
322
|
border-color: var(--n-color-primary);
|
|
326
323
|
box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 20px rgba(var(--n-color-primary-rgb, 99, 102, 241), 0.12);
|
|
327
324
|
outline: none;
|
|
328
325
|
}
|
|
329
|
-
|
|
330
326
|
.n-select[data-v-2dd8d436]:hover .n-select-trigger:not(.is-disabled){
|
|
331
327
|
border-color: var(--n-color-border-hover);
|
|
332
328
|
}
|
|
333
|
-
|
|
334
329
|
.n-select.is-open .n-select-trigger[data-v-2dd8d436]{
|
|
335
330
|
border-color: var(--n-color-primary);
|
|
336
331
|
box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 20px rgba(var(--n-color-primary-rgb, 99, 102, 241), 0.12);
|
|
337
332
|
}
|
|
338
|
-
|
|
339
333
|
.n-select-placeholder[data-v-2dd8d436]{
|
|
340
334
|
color: var(--n-color-text-muted);
|
|
341
335
|
}
|
|
342
|
-
|
|
343
336
|
.n-select-trigger-actions[data-v-2dd8d436]{
|
|
344
337
|
display: flex;
|
|
345
338
|
align-items: center;
|
|
346
339
|
gap: 0.25rem;
|
|
347
340
|
flex-shrink: 0;
|
|
348
341
|
}
|
|
349
|
-
|
|
350
342
|
.n-select-clear[data-v-2dd8d436]{
|
|
351
343
|
background: transparent;
|
|
352
344
|
border: none;
|
|
@@ -357,21 +349,17 @@ const __style = `.n-select[data-v-2dd8d436]{
|
|
|
357
349
|
border-radius: var(--n-radius-sm);
|
|
358
350
|
line-height: 1;
|
|
359
351
|
}
|
|
360
|
-
|
|
361
352
|
.n-select-clear[data-v-2dd8d436]:hover{
|
|
362
353
|
color: var(--n-color-text);
|
|
363
354
|
}
|
|
364
|
-
|
|
365
355
|
.n-select-arrow[data-v-2dd8d436]{
|
|
366
356
|
color: var(--n-color-text-muted);
|
|
367
357
|
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
368
358
|
font-size: var(--n-text-xs);
|
|
369
359
|
}
|
|
370
|
-
|
|
371
360
|
.is-open .n-select-arrow[data-v-2dd8d436]{
|
|
372
361
|
transform: rotate(180deg);
|
|
373
362
|
}
|
|
374
|
-
|
|
375
363
|
.n-select-dropdown[data-v-2dd8d436]{
|
|
376
364
|
position: absolute;
|
|
377
365
|
top: calc(100% + 0.5rem);
|
|
@@ -388,26 +376,21 @@ const __style = `.n-select[data-v-2dd8d436]{
|
|
|
388
376
|
animation: n-dropdown-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
389
377
|
transform-origin: top center;
|
|
390
378
|
}
|
|
391
|
-
|
|
392
379
|
@keyframes n-dropdown-in {
|
|
393
|
-
from[data-v-2dd8d436]{ opacity: 0;
|
|
394
|
-
to[data-v-2dd8d436]{ opacity: 1;
|
|
380
|
+
from[data-v-2dd8d436]{ opacity: 0; scale(0.98); }
|
|
381
|
+
to[data-v-2dd8d436]{ opacity: 1; scale(1); }
|
|
395
382
|
}
|
|
396
|
-
|
|
397
383
|
.n-select-dropdown.is-top[data-v-2dd8d436]{
|
|
398
384
|
animation: n-dropdown-in-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
399
385
|
}
|
|
400
|
-
|
|
401
386
|
@keyframes n-dropdown-in-top {
|
|
402
|
-
from[data-v-2dd8d436]{ opacity: 0;
|
|
403
|
-
to[data-v-2dd8d436]{ opacity: 1;
|
|
387
|
+
from[data-v-2dd8d436]{ opacity: 0; scale(0.98); }
|
|
388
|
+
to[data-v-2dd8d436]{ opacity: 1; scale(1); }
|
|
404
389
|
}
|
|
405
|
-
|
|
406
390
|
.n-select-search[data-v-2dd8d436]{
|
|
407
391
|
padding: var(--n-space-2);
|
|
408
392
|
border-bottom: 1px solid var(--n-color-border);
|
|
409
393
|
}
|
|
410
|
-
|
|
411
394
|
.n-select-search-input[data-v-2dd8d436]{
|
|
412
395
|
width: 100%;
|
|
413
396
|
background: var(--n-color-bg);
|
|
@@ -419,16 +402,13 @@ to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0) scale(1); }
|
|
|
419
402
|
outline: none;
|
|
420
403
|
font-family: inherit;
|
|
421
404
|
}
|
|
422
|
-
|
|
423
405
|
.n-select-search-input[data-v-2dd8d436]:focus{
|
|
424
406
|
border-color: var(--n-color-primary);
|
|
425
407
|
}
|
|
426
|
-
|
|
427
408
|
.n-select-options[data-v-2dd8d436]{
|
|
428
409
|
max-height: 250px;
|
|
429
410
|
overflow-y: auto;
|
|
430
411
|
}
|
|
431
|
-
|
|
432
412
|
.n-select-group-label[data-v-2dd8d436]{
|
|
433
413
|
padding: var(--n-space-2) var(--n-space-3);
|
|
434
414
|
font-size: var(--n-text-xs);
|
|
@@ -438,60 +418,52 @@ to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0) scale(1); }
|
|
|
438
418
|
letter-spacing: var(--n-tracking-wide);
|
|
439
419
|
background: var(--n-color-bg);
|
|
440
420
|
}
|
|
441
|
-
|
|
442
421
|
.n-select-option[data-v-2dd8d436]{
|
|
443
422
|
padding: 0.7rem 1rem;
|
|
444
423
|
padding-left: 1rem;
|
|
445
424
|
color: var(--n-color-text-secondary);
|
|
446
425
|
cursor: pointer;
|
|
447
|
-
transition:
|
|
426
|
+
transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
|
|
448
427
|
letter-spacing: 0.01em;
|
|
449
428
|
position: relative;
|
|
450
429
|
}
|
|
451
|
-
|
|
452
430
|
.n-select-option[data-v-2dd8d436]::before{
|
|
453
431
|
content: '';
|
|
454
432
|
position: absolute;
|
|
455
433
|
left: 0;
|
|
456
434
|
top: 50%;
|
|
457
|
-
|
|
435
|
+
scaleY(0);
|
|
458
436
|
width: 3px;
|
|
459
437
|
height: 50%;
|
|
460
438
|
background: var(--n-color-primary);
|
|
461
439
|
border-radius: 0 3px 3px 0;
|
|
462
440
|
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
463
441
|
}
|
|
464
|
-
|
|
465
442
|
.n-select-option[data-v-2dd8d436]:hover::before,
|
|
466
443
|
.n-select-option.is-focused[data-v-2dd8d436]::before{
|
|
467
|
-
|
|
444
|
+
scaleY(1);
|
|
468
445
|
}
|
|
469
|
-
|
|
470
446
|
.n-select-option[data-v-2dd8d436]:hover,
|
|
471
447
|
.n-select-option.is-focused[data-v-2dd8d436]{
|
|
472
448
|
background: var(--n-color-glass);
|
|
473
449
|
color: var(--n-color-text);
|
|
474
450
|
padding-left: 1.25rem;
|
|
475
451
|
}
|
|
476
|
-
|
|
477
452
|
.n-select-option.is-selected[data-v-2dd8d436]{
|
|
478
453
|
background: var(--n-color-primary-light);
|
|
479
454
|
color: var(--n-color-primary);
|
|
480
455
|
font-weight: var(--n-weight-semibold);
|
|
481
456
|
}
|
|
482
|
-
|
|
483
457
|
.n-select-option.is-disabled[data-v-2dd8d436]{
|
|
484
458
|
opacity: 0.4;
|
|
485
459
|
cursor: not-allowed;
|
|
486
460
|
}
|
|
487
|
-
|
|
488
461
|
.n-select-empty[data-v-2dd8d436]{
|
|
489
462
|
padding: var(--n-space-4);
|
|
490
463
|
color: var(--n-color-text-muted);
|
|
491
464
|
text-align: center;
|
|
492
465
|
font-size: var(--n-text-sm);
|
|
493
466
|
}
|
|
494
|
-
|
|
495
467
|
.is-disabled .n-select-trigger[data-v-2dd8d436]{
|
|
496
468
|
opacity: 0.5;
|
|
497
469
|
cursor: not-allowed;
|
|
@@ -277,7 +277,6 @@ onBeforeUnmount(() => {
|
|
|
277
277
|
width: 100%;
|
|
278
278
|
font-family: var(--n-font-sans);
|
|
279
279
|
}
|
|
280
|
-
|
|
281
280
|
.n-select-label {
|
|
282
281
|
display: block;
|
|
283
282
|
font-size: var(--n-text-sm);
|
|
@@ -285,7 +284,6 @@ onBeforeUnmount(() => {
|
|
|
285
284
|
color: var(--n-color-text-secondary);
|
|
286
285
|
margin-bottom: var(--n-space-2);
|
|
287
286
|
}
|
|
288
|
-
|
|
289
287
|
.n-select-trigger {
|
|
290
288
|
background: var(--n-color-surface);
|
|
291
289
|
border: 1px solid var(--n-color-border);
|
|
@@ -299,33 +297,27 @@ onBeforeUnmount(() => {
|
|
|
299
297
|
color: var(--n-color-text);
|
|
300
298
|
gap: var(--n-space-2);
|
|
301
299
|
}
|
|
302
|
-
|
|
303
300
|
.n-select-trigger:focus-visible {
|
|
304
301
|
border-color: var(--n-color-primary);
|
|
305
302
|
box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 20px rgba(var(--n-color-primary-rgb, 99, 102, 241), 0.12);
|
|
306
303
|
outline: none;
|
|
307
304
|
}
|
|
308
|
-
|
|
309
305
|
.n-select:hover .n-select-trigger:not(.is-disabled) {
|
|
310
306
|
border-color: var(--n-color-border-hover);
|
|
311
307
|
}
|
|
312
|
-
|
|
313
308
|
.n-select.is-open .n-select-trigger {
|
|
314
309
|
border-color: var(--n-color-primary);
|
|
315
310
|
box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 20px rgba(var(--n-color-primary-rgb, 99, 102, 241), 0.12);
|
|
316
311
|
}
|
|
317
|
-
|
|
318
312
|
.n-select-placeholder {
|
|
319
313
|
color: var(--n-color-text-muted);
|
|
320
314
|
}
|
|
321
|
-
|
|
322
315
|
.n-select-trigger-actions {
|
|
323
316
|
display: flex;
|
|
324
317
|
align-items: center;
|
|
325
318
|
gap: 0.25rem;
|
|
326
319
|
flex-shrink: 0;
|
|
327
320
|
}
|
|
328
|
-
|
|
329
321
|
.n-select-clear {
|
|
330
322
|
background: transparent;
|
|
331
323
|
border: none;
|
|
@@ -336,21 +328,17 @@ onBeforeUnmount(() => {
|
|
|
336
328
|
border-radius: var(--n-radius-sm);
|
|
337
329
|
line-height: 1;
|
|
338
330
|
}
|
|
339
|
-
|
|
340
331
|
.n-select-clear:hover {
|
|
341
332
|
color: var(--n-color-text);
|
|
342
333
|
}
|
|
343
|
-
|
|
344
334
|
.n-select-arrow {
|
|
345
335
|
color: var(--n-color-text-muted);
|
|
346
336
|
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
347
337
|
font-size: var(--n-text-xs);
|
|
348
338
|
}
|
|
349
|
-
|
|
350
339
|
.is-open .n-select-arrow {
|
|
351
340
|
transform: rotate(180deg);
|
|
352
341
|
}
|
|
353
|
-
|
|
354
342
|
.n-select-dropdown {
|
|
355
343
|
position: absolute;
|
|
356
344
|
top: calc(100% + 0.5rem);
|
|
@@ -367,26 +355,21 @@ onBeforeUnmount(() => {
|
|
|
367
355
|
animation: n-dropdown-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
368
356
|
transform-origin: top center;
|
|
369
357
|
}
|
|
370
|
-
|
|
371
358
|
@keyframes n-dropdown-in {
|
|
372
|
-
from { opacity: 0;
|
|
373
|
-
to { opacity: 1;
|
|
359
|
+
from { opacity: 0; scale(0.98); }
|
|
360
|
+
to { opacity: 1; scale(1); }
|
|
374
361
|
}
|
|
375
|
-
|
|
376
362
|
.n-select-dropdown.is-top {
|
|
377
363
|
animation: n-dropdown-in-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
378
364
|
}
|
|
379
|
-
|
|
380
365
|
@keyframes n-dropdown-in-top {
|
|
381
|
-
from { opacity: 0;
|
|
382
|
-
to { opacity: 1;
|
|
366
|
+
from { opacity: 0; scale(0.98); }
|
|
367
|
+
to { opacity: 1; scale(1); }
|
|
383
368
|
}
|
|
384
|
-
|
|
385
369
|
.n-select-search {
|
|
386
370
|
padding: var(--n-space-2);
|
|
387
371
|
border-bottom: 1px solid var(--n-color-border);
|
|
388
372
|
}
|
|
389
|
-
|
|
390
373
|
.n-select-search-input {
|
|
391
374
|
width: 100%;
|
|
392
375
|
background: var(--n-color-bg);
|
|
@@ -398,16 +381,13 @@ onBeforeUnmount(() => {
|
|
|
398
381
|
outline: none;
|
|
399
382
|
font-family: inherit;
|
|
400
383
|
}
|
|
401
|
-
|
|
402
384
|
.n-select-search-input:focus {
|
|
403
385
|
border-color: var(--n-color-primary);
|
|
404
386
|
}
|
|
405
|
-
|
|
406
387
|
.n-select-options {
|
|
407
388
|
max-height: 250px;
|
|
408
389
|
overflow-y: auto;
|
|
409
390
|
}
|
|
410
|
-
|
|
411
391
|
.n-select-group-label {
|
|
412
392
|
padding: var(--n-space-2) var(--n-space-3);
|
|
413
393
|
font-size: var(--n-text-xs);
|
|
@@ -417,62 +397,55 @@ onBeforeUnmount(() => {
|
|
|
417
397
|
letter-spacing: var(--n-tracking-wide);
|
|
418
398
|
background: var(--n-color-bg);
|
|
419
399
|
}
|
|
420
|
-
|
|
421
400
|
.n-select-option {
|
|
422
401
|
padding: 0.7rem 1rem;
|
|
423
402
|
padding-left: 1rem;
|
|
424
403
|
color: var(--n-color-text-secondary);
|
|
425
404
|
cursor: pointer;
|
|
426
|
-
transition:
|
|
405
|
+
transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
|
|
427
406
|
letter-spacing: 0.01em;
|
|
428
407
|
position: relative;
|
|
429
408
|
}
|
|
430
|
-
|
|
431
409
|
.n-select-option::before {
|
|
432
410
|
content: '';
|
|
433
411
|
position: absolute;
|
|
434
412
|
left: 0;
|
|
435
413
|
top: 50%;
|
|
436
|
-
|
|
414
|
+
scaleY(0);
|
|
437
415
|
width: 3px;
|
|
438
416
|
height: 50%;
|
|
439
417
|
background: var(--n-color-primary);
|
|
440
418
|
border-radius: 0 3px 3px 0;
|
|
441
419
|
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
442
420
|
}
|
|
443
|
-
|
|
444
421
|
.n-select-option:hover::before,
|
|
445
422
|
.n-select-option.is-focused::before {
|
|
446
|
-
|
|
423
|
+
scaleY(1);
|
|
447
424
|
}
|
|
448
|
-
|
|
449
425
|
.n-select-option:hover,
|
|
450
426
|
.n-select-option.is-focused {
|
|
451
427
|
background: var(--n-color-glass);
|
|
452
428
|
color: var(--n-color-text);
|
|
453
429
|
padding-left: 1.25rem;
|
|
454
430
|
}
|
|
455
|
-
|
|
456
431
|
.n-select-option.is-selected {
|
|
457
432
|
background: var(--n-color-primary-light);
|
|
458
433
|
color: var(--n-color-primary);
|
|
459
434
|
font-weight: var(--n-weight-semibold);
|
|
460
435
|
}
|
|
461
|
-
|
|
462
436
|
.n-select-option.is-disabled {
|
|
463
437
|
opacity: 0.4;
|
|
464
438
|
cursor: not-allowed;
|
|
465
439
|
}
|
|
466
|
-
|
|
467
440
|
.n-select-empty {
|
|
468
441
|
padding: var(--n-space-4);
|
|
469
442
|
color: var(--n-color-text-muted);
|
|
470
443
|
text-align: center;
|
|
471
444
|
font-size: var(--n-text-sm);
|
|
472
445
|
}
|
|
473
|
-
|
|
474
446
|
.is-disabled .n-select-trigger {
|
|
475
447
|
opacity: 0.5;
|
|
476
448
|
cursor: not-allowed;
|
|
477
449
|
}
|
|
450
|
+
|
|
478
451
|
</style>
|
|
@@ -53,44 +53,38 @@ const __style = `.n-skeleton[data-v-6b9116c8]{
|
|
|
53
53
|
flex-direction: column;
|
|
54
54
|
gap: var(--n-space-2);
|
|
55
55
|
}
|
|
56
|
-
|
|
57
56
|
.n-skeleton-line[data-v-6b9116c8]{
|
|
58
57
|
height: 14px;
|
|
59
58
|
border-radius: var(--n-radius-sm);
|
|
60
|
-
background:
|
|
59
|
+
background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
|
|
61
60
|
background-size: 200% 100%;
|
|
62
61
|
animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
|
|
63
62
|
}
|
|
64
|
-
|
|
65
63
|
.is-circle .n-skeleton-circle[data-v-6b9116c8]{
|
|
66
64
|
width: 60px;
|
|
67
65
|
height: 60px;
|
|
68
66
|
border-radius: var(--n-radius-full);
|
|
69
|
-
background:
|
|
67
|
+
background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
|
|
70
68
|
background-size: 200% 100%;
|
|
71
69
|
animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
|
|
72
70
|
}
|
|
73
|
-
|
|
74
71
|
.is-card .n-skeleton-card[data-v-6b9116c8]{
|
|
75
72
|
border-radius: var(--n-radius-lg);
|
|
76
73
|
overflow: hidden;
|
|
77
74
|
border: 1px solid var(--n-color-border);
|
|
78
75
|
}
|
|
79
|
-
|
|
80
76
|
.is-card .n-skeleton-card-image[data-v-6b9116c8]{
|
|
81
77
|
height: 140px;
|
|
82
|
-
background:
|
|
78
|
+
background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
|
|
83
79
|
background-size: 200% 100%;
|
|
84
80
|
animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
|
|
85
81
|
}
|
|
86
|
-
|
|
87
82
|
.is-card .n-skeleton-card-body{
|
|
88
83
|
padding: var(--n-space-5);
|
|
89
84
|
display: flex;
|
|
90
85
|
flex-direction: column;
|
|
91
86
|
gap: var(--n-space-3);
|
|
92
87
|
}
|
|
93
|
-
|
|
94
88
|
@keyframes n-skeleton-shimmer {
|
|
95
89
|
from[data-v-6b9116c8]{ background-position: 200% 0; }
|
|
96
90
|
to[data-v-6b9116c8]{ background-position: -200% 0; }
|
|
@@ -31,46 +31,41 @@ const lineArray = Array.from({ length: props.lines || 3 }, (_, i) => i + 1)
|
|
|
31
31
|
flex-direction: column;
|
|
32
32
|
gap: var(--n-space-2);
|
|
33
33
|
}
|
|
34
|
-
|
|
35
34
|
.n-skeleton-line {
|
|
36
35
|
height: 14px;
|
|
37
36
|
border-radius: var(--n-radius-sm);
|
|
38
|
-
background:
|
|
37
|
+
background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
|
|
39
38
|
background-size: 200% 100%;
|
|
40
39
|
animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
|
|
41
40
|
}
|
|
42
|
-
|
|
43
41
|
.is-circle .n-skeleton-circle {
|
|
44
42
|
width: 60px;
|
|
45
43
|
height: 60px;
|
|
46
44
|
border-radius: var(--n-radius-full);
|
|
47
|
-
background:
|
|
45
|
+
background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
|
|
48
46
|
background-size: 200% 100%;
|
|
49
47
|
animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
|
|
50
48
|
}
|
|
51
|
-
|
|
52
49
|
.is-card .n-skeleton-card {
|
|
53
50
|
border-radius: var(--n-radius-lg);
|
|
54
51
|
overflow: hidden;
|
|
55
52
|
border: 1px solid var(--n-color-border);
|
|
56
53
|
}
|
|
57
|
-
|
|
58
54
|
.is-card .n-skeleton-card-image {
|
|
59
55
|
height: 140px;
|
|
60
|
-
background:
|
|
56
|
+
background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
|
|
61
57
|
background-size: 200% 100%;
|
|
62
58
|
animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
|
|
63
59
|
}
|
|
64
|
-
|
|
65
60
|
.is-card .n-skeleton-card-body {
|
|
66
61
|
padding: var(--n-space-5);
|
|
67
62
|
display: flex;
|
|
68
63
|
flex-direction: column;
|
|
69
64
|
gap: var(--n-space-3);
|
|
70
65
|
}
|
|
71
|
-
|
|
72
66
|
@keyframes n-skeleton-shimmer {
|
|
73
67
|
from { background-position: 200% 0; }
|
|
74
68
|
to { background-position: -200% 0; }
|
|
75
69
|
}
|
|
70
|
+
|
|
76
71
|
</style>
|
|
@@ -46,7 +46,6 @@ const __style = `.n-switch[data-v-3cd56cb4]{
|
|
|
46
46
|
cursor: pointer;
|
|
47
47
|
user-select: none;
|
|
48
48
|
}
|
|
49
|
-
|
|
50
49
|
.n-switch-track[data-v-3cd56cb4]{
|
|
51
50
|
width: 44px;
|
|
52
51
|
height: 24px;
|
|
@@ -56,12 +55,10 @@ const __style = `.n-switch[data-v-3cd56cb4]{
|
|
|
56
55
|
transition: all var(--n-transition-normal);
|
|
57
56
|
flex-shrink: 0;
|
|
58
57
|
}
|
|
59
|
-
|
|
60
58
|
.is-checked .n-switch-track[data-v-3cd56cb4]{
|
|
61
59
|
background: var(--n-color-primary);
|
|
62
60
|
box-shadow: var(--n-shadow-glow-primary);
|
|
63
61
|
}
|
|
64
|
-
|
|
65
62
|
.n-switch-thumb[data-v-3cd56cb4]{
|
|
66
63
|
width: 18px;
|
|
67
64
|
height: 18px;
|
|
@@ -74,19 +71,16 @@ const __style = `.n-switch[data-v-3cd56cb4]{
|
|
|
74
71
|
box-shadow: var(--n-shadow-md);
|
|
75
72
|
will-change: transform;
|
|
76
73
|
}
|
|
77
|
-
|
|
78
74
|
.is-checked .n-switch-thumb[data-v-3cd56cb4]{
|
|
79
75
|
transform: translateX(20px);
|
|
80
76
|
background: white;
|
|
81
77
|
box-shadow: var(--n-shadow-md);
|
|
82
78
|
}
|
|
83
|
-
|
|
84
79
|
.n-switch-label[data-v-3cd56cb4]{
|
|
85
80
|
font-size: var(--n-text-sm);
|
|
86
81
|
color: var(--n-color-text);
|
|
87
82
|
font-weight: var(--n-weight-medium);
|
|
88
83
|
}
|
|
89
|
-
|
|
90
84
|
.is-disabled[data-v-3cd56cb4]{
|
|
91
85
|
opacity: 0.5;
|
|
92
86
|
cursor: not-allowed;
|
|
@@ -30,7 +30,6 @@ const toggle = () => {
|
|
|
30
30
|
cursor: pointer;
|
|
31
31
|
user-select: none;
|
|
32
32
|
}
|
|
33
|
-
|
|
34
33
|
.n-switch-track {
|
|
35
34
|
width: 44px;
|
|
36
35
|
height: 24px;
|
|
@@ -40,12 +39,10 @@ const toggle = () => {
|
|
|
40
39
|
transition: all var(--n-transition-normal);
|
|
41
40
|
flex-shrink: 0;
|
|
42
41
|
}
|
|
43
|
-
|
|
44
42
|
.is-checked .n-switch-track {
|
|
45
43
|
background: var(--n-color-primary);
|
|
46
44
|
box-shadow: var(--n-shadow-glow-primary);
|
|
47
45
|
}
|
|
48
|
-
|
|
49
46
|
.n-switch-thumb {
|
|
50
47
|
width: 18px;
|
|
51
48
|
height: 18px;
|
|
@@ -58,21 +55,19 @@ const toggle = () => {
|
|
|
58
55
|
box-shadow: var(--n-shadow-md);
|
|
59
56
|
will-change: transform;
|
|
60
57
|
}
|
|
61
|
-
|
|
62
58
|
.is-checked .n-switch-thumb {
|
|
63
59
|
transform: translateX(20px);
|
|
64
60
|
background: white;
|
|
65
61
|
box-shadow: var(--n-shadow-md);
|
|
66
62
|
}
|
|
67
|
-
|
|
68
63
|
.n-switch-label {
|
|
69
64
|
font-size: var(--n-text-sm);
|
|
70
65
|
color: var(--n-color-text);
|
|
71
66
|
font-weight: var(--n-weight-medium);
|
|
72
67
|
}
|
|
73
|
-
|
|
74
68
|
.is-disabled {
|
|
75
69
|
opacity: 0.5;
|
|
76
70
|
cursor: not-allowed;
|
|
77
71
|
}
|
|
72
|
+
|
|
78
73
|
</style>
|
package/dist/components/NTabs.js
CHANGED
|
@@ -66,13 +66,11 @@ const __style = `.n-tabs[data-v-339e5ee5]{
|
|
|
66
66
|
gap: var(--n-space-6);
|
|
67
67
|
width: 100%;
|
|
68
68
|
}
|
|
69
|
-
|
|
70
69
|
.n-tabs-header[data-v-339e5ee5]{
|
|
71
70
|
display: flex;
|
|
72
71
|
position: relative;
|
|
73
72
|
border-bottom: 1px solid var(--n-color-border);
|
|
74
73
|
}
|
|
75
|
-
|
|
76
74
|
.n-tab[data-v-339e5ee5]{
|
|
77
75
|
flex: 1;
|
|
78
76
|
padding: var(--n-space-3) var(--n-space-5);
|
|
@@ -90,31 +88,24 @@ const __style = `.n-tabs[data-v-339e5ee5]{
|
|
|
90
88
|
white-space: nowrap;
|
|
91
89
|
border-radius: var(--n-radius-sm) var(--n-radius-sm) 0 0;
|
|
92
90
|
}
|
|
93
|
-
|
|
94
91
|
.n-tab[data-v-339e5ee5]:hover:not(.is-active):not(.is-disabled){
|
|
95
92
|
color: var(--n-color-text);
|
|
96
93
|
background: var(--n-color-glass);
|
|
97
94
|
}
|
|
98
|
-
|
|
99
95
|
.n-tab[data-v-339e5ee5]:focus-visible{
|
|
100
96
|
outline: none;
|
|
101
|
-
box-shadow: inset 0 0 0 2px var(--n-color-primary);
|
|
102
97
|
}
|
|
103
|
-
|
|
104
98
|
.n-tab.is-active[data-v-339e5ee5]{
|
|
105
99
|
color: var(--n-color-primary);
|
|
106
100
|
font-weight: var(--n-weight-semibold);
|
|
107
101
|
}
|
|
108
|
-
|
|
109
102
|
.n-tab.is-disabled[data-v-339e5ee5]{
|
|
110
103
|
opacity: 0.4;
|
|
111
104
|
cursor: not-allowed;
|
|
112
105
|
}
|
|
113
|
-
|
|
114
106
|
.n-tab-icon[data-v-339e5ee5]{
|
|
115
107
|
font-size: var(--n-text-base);
|
|
116
108
|
}
|
|
117
|
-
|
|
118
109
|
.n-tab-badge[data-v-339e5ee5]{
|
|
119
110
|
background: var(--n-color-primary);
|
|
120
111
|
color: white;
|
|
@@ -124,7 +115,6 @@ const __style = `.n-tabs[data-v-339e5ee5]{
|
|
|
124
115
|
border-radius: var(--n-radius-full);
|
|
125
116
|
line-height: 1.2;
|
|
126
117
|
}
|
|
127
|
-
|
|
128
118
|
.n-tabs-indicator[data-v-339e5ee5]{
|
|
129
119
|
position: absolute;
|
|
130
120
|
bottom: -1px;
|
|
@@ -132,6 +122,5 @@ const __style = `.n-tabs[data-v-339e5ee5]{
|
|
|
132
122
|
background: var(--n-color-primary);
|
|
133
123
|
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
134
124
|
border-radius: var(--n-radius-full);
|
|
135
|
-
box-shadow: 0 1px 6px rgba(99, 102, 241, 0.35);
|
|
136
125
|
}`
|
|
137
126
|
injectStyle('data-v-339e5ee5', __style)
|