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.
Files changed (95) hide show
  1. package/dist/components/NAlert.js +2 -14
  2. package/dist/components/NAlert.nexa +3 -14
  3. package/dist/components/NAutocomplete.js +1 -1
  4. package/dist/components/NAutocomplete.nexa +2 -1
  5. package/dist/components/NAvatar.js +0 -5
  6. package/dist/components/NAvatar.nexa +1 -5
  7. package/dist/components/NBadge.js +0 -6
  8. package/dist/components/NBadge.nexa +1 -6
  9. package/dist/components/NBottomSheet.js +0 -5
  10. package/dist/components/NBottomSheet.nexa +1 -5
  11. package/dist/components/NButton.js +202 -294
  12. package/dist/components/NButton.nexa +224 -318
  13. package/dist/components/NCard.js +39 -82
  14. package/dist/components/NCard.nexa +27 -71
  15. package/dist/components/NCheckbox.js +77 -60
  16. package/dist/components/NCheckbox.nexa +71 -45
  17. package/dist/components/NChips.nexa +1 -0
  18. package/dist/components/NDataTable.js +1 -313
  19. package/dist/components/NDataTable.nexa +2 -314
  20. package/dist/components/NDatepicker.js +4 -25
  21. package/dist/components/NDatepicker.nexa +5 -25
  22. package/dist/components/NForm.nexa +1 -0
  23. package/dist/components/NFormField.js +0 -5
  24. package/dist/components/NFormField.nexa +1 -5
  25. package/dist/components/NImage.js +1 -6
  26. package/dist/components/NImage.nexa +2 -6
  27. package/dist/components/NInput.js +96 -263
  28. package/dist/components/NInput.nexa +89 -259
  29. package/dist/components/NInputNumber.nexa +1 -1
  30. package/dist/components/NModal.js +1 -118
  31. package/dist/components/NModal.nexa +2 -119
  32. package/dist/components/NMultiSelect.js +1 -1
  33. package/dist/components/NMultiSelect.nexa +2 -1
  34. package/dist/components/NPaginator.js +1 -11
  35. package/dist/components/NPaginator.nexa +2 -11
  36. package/dist/components/NPassword.nexa +1 -0
  37. package/dist/components/NProgressBar.js +0 -11
  38. package/dist/components/NProgressBar.nexa +1 -11
  39. package/dist/components/NRadio.js +1 -8
  40. package/dist/components/NRadio.nexa +2 -8
  41. package/dist/components/NScrollView.js +0 -6
  42. package/dist/components/NScrollView.nexa +1 -6
  43. package/dist/components/NSelect.js +7 -35
  44. package/dist/components/NSelect.nexa +8 -35
  45. package/dist/components/NSkeleton.js +3 -9
  46. package/dist/components/NSkeleton.nexa +4 -9
  47. package/dist/components/NSwitch.js +0 -6
  48. package/dist/components/NSwitch.nexa +1 -6
  49. package/dist/components/NTabs.js +0 -11
  50. package/dist/components/NTabs.nexa +1 -11
  51. package/dist/components/NTag.js +1 -11
  52. package/dist/components/NTag.nexa +2 -11
  53. package/dist/components/NToastContainer.js +3 -27
  54. package/dist/components/NToastContainer.nexa +4 -27
  55. package/dist/components/NTooltip.js +0 -13
  56. package/dist/components/NTooltip.nexa +1 -13
  57. package/dist/components/NTreeMenu.js +1 -21
  58. package/dist/components/NTreeMenu.nexa +2 -21
  59. package/dist/components/NVirtualList.js +0 -2
  60. package/dist/components/NVirtualList.nexa +1 -2
  61. package/dist/styles/tokens.css +82 -173
  62. package/package.json +4 -4
  63. package/src/components/NAlert.nexa +3 -14
  64. package/src/components/NAutocomplete.nexa +2 -1
  65. package/src/components/NAvatar.nexa +1 -5
  66. package/src/components/NBadge.nexa +1 -6
  67. package/src/components/NBottomSheet.nexa +1 -5
  68. package/src/components/NButton.nexa +224 -318
  69. package/src/components/NCard.nexa +27 -71
  70. package/src/components/NCheckbox.nexa +71 -45
  71. package/src/components/NChips.nexa +1 -0
  72. package/src/components/NDataTable.nexa +2 -314
  73. package/src/components/NDatepicker.nexa +5 -25
  74. package/src/components/NForm.nexa +1 -0
  75. package/src/components/NFormField.nexa +1 -5
  76. package/src/components/NImage.nexa +2 -6
  77. package/src/components/NInput.nexa +89 -259
  78. package/src/components/NInputNumber.nexa +1 -1
  79. package/src/components/NModal.nexa +2 -119
  80. package/src/components/NMultiSelect.nexa +2 -1
  81. package/src/components/NPaginator.nexa +2 -11
  82. package/src/components/NPassword.nexa +1 -0
  83. package/src/components/NProgressBar.nexa +1 -11
  84. package/src/components/NRadio.nexa +2 -8
  85. package/src/components/NScrollView.nexa +1 -6
  86. package/src/components/NSelect.nexa +8 -35
  87. package/src/components/NSkeleton.nexa +4 -9
  88. package/src/components/NSwitch.nexa +1 -6
  89. package/src/components/NTabs.nexa +1 -11
  90. package/src/components/NTag.nexa +2 -11
  91. package/src/components/NToastContainer.nexa +4 -27
  92. package/src/components/NTooltip.nexa +1 -13
  93. package/src/components/NTreeMenu.nexa +2 -21
  94. package/src/components/NVirtualList.nexa +1 -2
  95. package/src/styles/tokens.css +82 -173
@@ -290,317 +290,5 @@ _sfc_main.__hmrId = 'NDataTable_nexa'
290
290
 
291
291
  export default _sfc_main
292
292
 
293
- const __style = `.n-dt[data-v-5a84a658]{
294
- border: 1px solid var(--n-color-border);
295
- border-radius: var(--n-radius-lg);
296
- background: var(--n-color-surface);
297
- overflow: hidden;
298
- font-family: var(--n-font-sans);
299
- }
300
-
301
- .n-dt.is-grid[data-v-5a84a658]{
302
- border-color: var(--n-color-border);
303
- }
304
-
305
- .n-dt.is-grid .n-dt-th[data-v-5a84a658],
306
- .n-dt.is-grid .n-dt-td[data-v-5a84a658]{
307
- border: 1px solid var(--n-color-border);
308
- }
309
-
310
- .n-dt-toolbar[data-v-5a84a658]{
311
- display: flex;
312
- align-items: center;
313
- justify-content: space-between;
314
- padding: 0.75rem 1rem;
315
- border-bottom: 1px solid var(--n-color-border);
316
- }
317
-
318
- .n-dt-global[data-v-5a84a658]{
319
- display: flex;
320
- align-items: center;
321
- gap: 0.5rem;
322
- color: var(--n-color-text-muted);
323
- }
324
-
325
- .n-dt-global-input[data-v-5a84a658]{
326
- width: 260px;
327
- max-width: 100%;
328
- background: transparent;
329
- border: 1px solid var(--n-color-border);
330
- border-radius: var(--n-radius-md);
331
- padding: 0.45rem 0.75rem;
332
- color: var(--n-color-text);
333
- font-size: var(--n-text-sm);
334
- outline: none;
335
- box-sizing: border-box;
336
- transition: border-color 0.15s ease;
337
- }
338
-
339
- .n-dt-global-input[data-v-5a84a658]:focus{
340
- border-color: var(--n-color-primary);
341
- }
342
-
343
- .n-dt-wrapper[data-v-5a84a658]{
344
- width: 100%;
345
- overflow: auto;
346
- border-radius: inherit;
347
- }
348
-
349
- .n-dt-table[data-v-5a84a658]{
350
- width: 100%;
351
- border-collapse: collapse;
352
- table-layout: fixed;
353
- }
354
-
355
- .n-dt-thead[data-v-5a84a658]{
356
- background: linear-gradient(180deg, var(--n-color-surface-alt, var(--n-color-surface)) 0%, var(--n-color-surface) 100%);
357
- }
358
-
359
- .n-dt-th[data-v-5a84a658]{
360
- position: relative;
361
- padding: 0.65rem 0.85rem;
362
- border-bottom: 2px solid var(--n-color-border);
363
- color: var(--n-color-text-secondary);
364
- font-size: var(--n-text-sm);
365
- font-weight: var(--n-weight-semibold);
366
- user-select: none;
367
- vertical-align: middle;
368
- text-align: left;
369
- background: var(--n-color-surface);
370
- transition: background 0.15s ease;
371
- }
372
-
373
- .n-dt-th.is-sortable[data-v-5a84a658]{
374
- cursor: pointer;
375
- }
376
-
377
- .n-dt-th.is-sortable[data-v-5a84a658]:hover{
378
- background: var(--n-color-glass);
379
- }
380
-
381
- .n-dt-th.is-right[data-v-5a84a658]{
382
- text-align: right;
383
- }
384
-
385
- .n-dt-th.is-center[data-v-5a84a658]{
386
- text-align: center;
387
- }
388
-
389
- .n-dt-th.is-selection[data-v-5a84a658]{
390
- width: 3rem;
391
- text-align: center;
392
- }
393
-
394
- .n-dt-th-content[data-v-5a84a658]{
395
- display: flex;
396
- align-items: center;
397
- gap: 0.35rem;
398
- }
399
-
400
- .n-dt-th.is-right .n-dt-th-content[data-v-5a84a658]{
401
- justify-content: flex-end;
402
- }
403
-
404
- .n-dt-th.is-center .n-dt-th-content[data-v-5a84a658]{
405
- justify-content: center;
406
- }
407
-
408
- .n-dt-th-text[data-v-5a84a658]{
409
- overflow: hidden;
410
- text-overflow: ellipsis;
411
- white-space: nowrap;
412
- letter-spacing: 0.02em;
413
- text-transform: uppercase;
414
- font-size: 0.6875rem;
415
- }
416
-
417
- .n-dt-sort[data-v-5a84a658]{
418
- display: inline-flex;
419
- flex-direction: column;
420
- align-items: center;
421
- gap: 0;
422
- line-height: 1;
423
- margin-left: auto;
424
- flex-shrink: 0;
425
- }
426
-
427
- .n-dt-sort-arrow[data-v-5a84a658]{
428
- display: block;
429
- color: var(--n-color-border);
430
- transition: color 0.15s ease;
431
- margin: -3px 0;
432
- }
433
-
434
- .n-dt-sort-arrow-up.is-on[data-v-5a84a658]{
435
- color: var(--n-color-primary);
436
- }
437
-
438
- .n-dt-sort-arrow-down.is-on[data-v-5a84a658]{
439
- color: var(--n-color-primary);
440
- }
441
-
442
- .n-dt-th.is-sortable[data-v-5a84a658]:hover .n-dt-sort-arrow{
443
- color: var(--n-color-text-muted);
444
- }
445
-
446
- .n-dt-resizer[data-v-5a84a658]{
447
- position: absolute;
448
- right: 0;
449
- top: 0;
450
- bottom: 0;
451
- width: 6px;
452
- cursor: col-resize;
453
- background: transparent;
454
- transition: background 0.15s ease;
455
- }
456
-
457
- .n-dt-resizer[data-v-5a84a658]:hover{
458
- background: var(--n-color-primary);
459
- opacity: 0.4;
460
- }
461
-
462
- .n-dt-filter-row .n-dt-th[data-v-5a84a658]{
463
- border-bottom: 1px solid var(--n-color-border);
464
- padding: 0.5rem 0.6rem;
465
- background: var(--n-color-surface);
466
- }
467
-
468
- .n-dt-filter[data-v-5a84a658]{
469
- width: 100%;
470
- max-width: 100%;
471
- display: block;
472
- background: var(--n-color-bg);
473
- border: 1px solid var(--n-color-border);
474
- border-radius: var(--n-radius-sm);
475
- padding: 0.3rem 0.45rem;
476
- color: var(--n-color-text);
477
- font-size: var(--n-text-xs);
478
- outline: none;
479
- box-sizing: border-box;
480
- transition: border-color 0.15s ease;
481
- }
482
-
483
- .n-dt-filter[data-v-5a84a658]:focus{
484
- border-color: var(--n-color-primary);
485
- }
486
-
487
- .n-dt-tbody .n-dt-row{
488
- transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
489
- }
490
-
491
- .n-dt-tbody .n-dt-row.is-hover:hover{
492
- background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
493
- }
494
-
495
- .n-dt-tbody .n-dt-row.is-selected{
496
- background: var(--n-color-primary-light);
497
- outline: none;
498
- }
499
-
500
- .n-dt-tbody .n-dt-row.is-selected td:first-child{
501
- box-shadow: inset 3px 0 0 0 var(--n-color-primary);
502
- }
503
-
504
- .n-dt-tbody .n-dt-row.is-hover.is-selected:hover{
505
- background: var(--n-color-primary-light);
506
- filter: brightness(0.96);
507
- }
508
-
509
- .n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even){
510
- background: color-mix(in srgb, var(--n-color-glass) 50%, var(--n-color-surface));
511
- }
512
-
513
- .n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even).is-hover:hover{
514
- background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
515
- }
516
-
517
- .n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even).is-selected{
518
- background: var(--n-color-primary-light);
519
- }
520
-
521
- .n-dt-td[data-v-5a84a658]{
522
- padding: 0.6rem 0.85rem;
523
- border-bottom: 1px solid var(--n-color-border);
524
- color: var(--n-color-text);
525
- font-size: var(--n-text-sm);
526
- vertical-align: middle;
527
- text-align: left;
528
- }
529
-
530
- .n-dt-td.is-right[data-v-5a84a658]{
531
- text-align: right;
532
- }
533
-
534
- .n-dt-td.is-center[data-v-5a84a658]{
535
- text-align: center;
536
- }
537
-
538
- .n-dt-td.is-selection[data-v-5a84a658]{
539
- width: 3rem;
540
- text-align: center;
541
- }
542
-
543
- .n-dt-selectbox[data-v-5a84a658]{
544
- width: 20px;
545
- height: 20px;
546
- border: 2px solid var(--n-color-border);
547
- border-radius: 5px;
548
- background: transparent;
549
- cursor: pointer;
550
- display: inline-flex;
551
- align-items: center;
552
- justify-content: center;
553
- padding: 0;
554
- transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
555
- color: transparent;
556
- }
557
-
558
- .n-dt-selectbox.is-checked[data-v-5a84a658]{
559
- background: var(--n-color-primary);
560
- border-color: var(--n-color-primary);
561
- color: white;
562
- }
563
-
564
- .n-dt-selectbox[data-v-5a84a658]:hover:not(.is-checked){
565
- border-color: var(--n-color-primary);
566
- }
567
-
568
- .n-dt-selectbox.is-checked svg[data-v-5a84a658]{
569
- animation: n-dt-check-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
570
- }
571
-
572
- @keyframes n-dt-check-pop {
573
- 0%[data-v-5a84a658]{ transform: scale(0); }
574
- 50%[data-v-5a84a658]{ transform: scale(1.15); }
575
- 100%[data-v-5a84a658]{ transform: scale(1); }
576
- }
577
-
578
- .n-dt-empty-row .n-dt-empty[data-v-5a84a658]{
579
- padding: 2rem 1rem;
580
- text-align: center;
581
- color: var(--n-color-text-muted);
582
- font-size: var(--n-text-sm);
583
- }
584
-
585
- .n-dt-sm .n-dt-th[data-v-5a84a658],
586
- .n-dt-sm .n-dt-td[data-v-5a84a658]{
587
- padding: 0.4rem 0.6rem;
588
- font-size: var(--n-text-xs);
589
- }
590
-
591
- .n-dt-lg .n-dt-th[data-v-5a84a658],
592
- .n-dt-lg .n-dt-td[data-v-5a84a658]{
593
- padding: 0.85rem 1rem;
594
- font-size: var(--n-text-base);
595
- }
596
-
597
- .n-dt-paginator-wrap[data-v-5a84a658]{
598
- border-top: 1px solid var(--n-color-border);
599
- background: var(--n-color-surface-alt, var(--n-color-surface));
600
- }
601
-
602
- .n-dt-paginator-wrap [data-v-5a84a658]:deep(.n-paginator){
603
- border-top: none;
604
- background: transparent;
605
- }`
293
+ const __style = `.n-dt[data-v-5a84a658]{
606
294
  border: 1px solid var(--n-color-border);
607
295
  border-radius: var(--n-radius-lg);
608
296
  background: var(--n-color-surface);
609
297
  overflow: hidden;
610
298
  font-family: var(--n-font-sans);
611
299
  border-color: var(--n-color-border);
612
300
  border: 1px solid var(--n-color-border);
613
301
  display: flex;
614
302
  align-items: center;
615
303
  justify-content: space-between;
616
304
  padding: 0.75rem 1rem;
617
305
  border-bottom: 1px solid var(--n-color-border);
618
306
  display: flex;
619
307
  align-items: center;
620
308
  gap: 0.5rem;
621
309
  color: var(--n-color-text-muted);
622
310
  width: 260px;
623
311
  max-width: 100%;
624
312
  background: transparent;
625
313
  border: 1px solid var(--n-color-border);
626
314
  border-radius: var(--n-radius-md);
627
315
  padding: 0.45rem 0.75rem;
628
316
  color: var(--n-color-text);
629
317
  font-size: var(--n-text-sm);
630
318
  outline: none;
631
319
  box-sizing: border-box;
632
320
  transition: border-color 0.15s ease;
633
321
  border-color: var(--n-color-primary);
634
322
  width: 100%;
635
323
  overflow: auto;
636
324
  border-radius: inherit;
637
325
  width: 100%;
638
326
  border-collapse: collapse;
639
327
  table-layout: fixed;
640
328
  background-color: var(--n-color-surface);) 0%, var(--n-color-surface) 100%);
641
329
  position: relative;
642
330
  padding: 0.65rem 0.85rem;
643
331
  border-bottom: 2px solid var(--n-color-border);
644
332
  color: var(--n-color-text-secondary);
645
333
  font-size: var(--n-text-sm);
646
334
  font-weight: var(--n-weight-semibold);
647
335
  user-select: none;
648
336
  vertical-align: middle;
649
337
  text-align: left;
650
338
  background: var(--n-color-surface);
651
339
  transition: background 0.15s ease;
652
340
  cursor: pointer;
653
341
  background: var(--n-color-glass);
654
342
  text-align: right;
655
343
  text-align: center;
656
344
  width: 3rem;
657
345
  text-align: center;
658
346
  display: flex;
659
347
  align-items: center;
660
348
  gap: 0.35rem;
661
349
  justify-content: flex-end;
662
350
  justify-content: center;
663
351
  overflow: hidden;
664
352
  text-overflow: ellipsis;
665
353
  white-space: nowrap;
666
354
  letter-spacing: 0.02em;
667
355
  text-transform: uppercase;
668
356
  font-size: 0.6875rem;
669
357
  display: inline-flex;
670
358
  flex-direction: column;
671
359
  align-items: center;
672
360
  gap: 0;
673
361
  line-height: 1;
674
362
  margin-left: auto;
675
363
  flex-shrink: 0;
676
364
  display: block;
677
365
  color: var(--n-color-border);
678
366
  transition: color 0.15s ease;
679
367
  margin: -3px 0;
680
368
  color: var(--n-color-primary);
681
369
  color: var(--n-color-primary);
682
370
  color: var(--n-color-text-muted);
683
371
  position: absolute;
684
372
  right: 0;
685
373
  top: 0;
686
374
  bottom: 0;
687
375
  width: 6px;
688
376
  cursor: col-resize;
689
377
  background: transparent;
690
378
  transition: background 0.15s ease;
691
379
  background: var(--n-color-primary);
692
380
  opacity: 0.4;
693
381
  border-bottom: 1px solid var(--n-color-border);
694
382
  padding: 0.5rem 0.6rem;
695
383
  background: var(--n-color-surface);
696
384
  width: 100%;
697
385
  max-width: 100%;
698
386
  display: block;
699
387
  background: var(--n-color-bg);
700
388
  border: 1px solid var(--n-color-border);
701
389
  border-radius: var(--n-radius-sm);
702
390
  padding: 0.3rem 0.45rem;
703
391
  color: var(--n-color-text);
704
392
  font-size: var(--n-text-xs);
705
393
  outline: none;
706
394
  box-sizing: border-box;
707
395
  transition: border-color 0.15s ease;
708
396
  border-color: var(--n-color-primary);
709
397
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
710
398
  background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
711
399
  background: var(--n-color-primary-light);
712
400
  outline: none;
713
401
  background: var(--n-color-primary-light);
714
402
  filter: brightness(0.96);
715
403
  background: color-mix(in srgb, var(--n-color-glass) 50%, var(--n-color-surface));
716
404
  background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
717
405
  background: var(--n-color-primary-light);
718
406
  padding: 0.6rem 0.85rem;
719
407
  border-bottom: 1px solid var(--n-color-border);
720
408
  color: var(--n-color-text);
721
409
  font-size: var(--n-text-sm);
722
410
  vertical-align: middle;
723
411
  text-align: left;
724
412
  text-align: right;
725
413
  text-align: center;
726
414
  width: 3rem;
727
415
  text-align: center;
728
416
  width: 20px;
729
417
  height: 20px;
730
418
  border: 2px solid var(--n-color-border);
731
419
  border-radius: 5px;
732
420
  background: transparent;
733
421
  cursor: pointer;
734
422
  display: inline-flex;
735
423
  align-items: center;
736
424
  justify-content: center;
737
425
  padding: 0;
738
426
  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
739
427
  color: transparent;
740
428
  background: var(--n-color-primary);
741
429
  border-color: var(--n-color-primary);
742
430
  color: white;
743
431
  border-color: var(--n-color-primary);
744
432
  animation: n-dt-check-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
745
433
  0% { transform: scale(0); }
746
434
  50% { transform: scale(1.15); }
747
435
  100% { transform: scale(1); }
748
436
  padding: 2rem 1rem;
749
437
  text-align: center;
750
438
  color: var(--n-color-text-muted);
751
439
  font-size: var(--n-text-sm);
752
440
  padding: 0.4rem 0.6rem;
753
441
  font-size: var(--n-text-xs);
754
442
  padding: 0.85rem 1rem;
755
443
  font-size: var(--n-text-base);
756
444
  border-top: 1px solid var(--n-color-border);
757
445
  background: var(--n-color-surface-alt, var(--n-color-surface));
758
446
  border-top: none;
759
447
  background: transparent;
760
448
  injectStyle('data-v-5a84a658', __style)