@datametria/vue-components 1.1.3 → 2.0.1

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 (97) hide show
  1. package/README.md +548 -590
  2. package/dist/index.es.js +2460 -1440
  3. package/dist/index.umd.js +10 -10
  4. package/dist/vue-components.css +1 -1
  5. package/package.json +102 -98
  6. package/src/components/DatametriaAlert.vue +38 -24
  7. package/src/components/DatametriaAutocomplete.vue +184 -138
  8. package/src/components/DatametriaAvatar.vue +177 -33
  9. package/src/components/DatametriaBadge.vue +31 -23
  10. package/src/components/DatametriaBreadcrumb.vue +21 -21
  11. package/src/components/DatametriaButton.vue +38 -18
  12. package/src/components/DatametriaCard.vue +12 -12
  13. package/src/components/DatametriaCheckbox.vue +8 -8
  14. package/src/components/DatametriaChip.vue +29 -33
  15. package/src/components/DatametriaContainer.vue +4 -4
  16. package/src/components/DatametriaDatePicker.vue +686 -68
  17. package/src/components/DatametriaDivider.vue +13 -13
  18. package/src/components/DatametriaFileUpload.vue +272 -140
  19. package/src/components/DatametriaGrid.vue +3 -3
  20. package/src/components/DatametriaInput.vue +15 -15
  21. package/src/components/DatametriaMenu.vue +604 -619
  22. package/src/components/DatametriaModal.vue +16 -16
  23. package/src/components/DatametriaNavbar.vue +57 -54
  24. package/src/components/DatametriaPasswordInput.vue +430 -0
  25. package/src/components/DatametriaProgress.vue +18 -18
  26. package/src/components/DatametriaRadio.vue +20 -20
  27. package/src/components/DatametriaSelect.vue +15 -15
  28. package/src/components/DatametriaSkeleton.vue +243 -239
  29. package/src/components/DatametriaSlider.vue +395 -407
  30. package/src/components/DatametriaSortableTable.vue +585 -0
  31. package/src/components/DatametriaSpinner.vue +7 -7
  32. package/src/components/DatametriaSwitch.vue +16 -16
  33. package/src/components/DatametriaTable.vue +14 -14
  34. package/src/components/DatametriaTextarea.vue +28 -28
  35. package/src/components/DatametriaTimePicker.vue +285 -285
  36. package/src/components/DatametriaToast.vue +32 -19
  37. package/src/components/DatametriaTooltip.vue +408 -408
  38. package/src/components/__tests__/DatametriaAlert.test.js +36 -0
  39. package/src/components/__tests__/DatametriaAlert.test.ts +190 -0
  40. package/src/components/__tests__/DatametriaAutocomplete.test.ts +180 -0
  41. package/src/components/__tests__/DatametriaAvatar.test.ts +152 -0
  42. package/src/components/__tests__/DatametriaBadge.test.js +30 -0
  43. package/src/components/__tests__/DatametriaBadge.test.ts +167 -0
  44. package/src/components/__tests__/DatametriaBreadcrumb.test.ts +75 -0
  45. package/src/components/__tests__/DatametriaButton.test.js +31 -0
  46. package/src/components/__tests__/DatametriaButton.test.ts +283 -0
  47. package/src/components/__tests__/DatametriaCard.test.ts +201 -0
  48. package/src/components/__tests__/DatametriaCheckbox.test.ts +47 -0
  49. package/src/components/__tests__/DatametriaChip.test.js +39 -0
  50. package/src/components/__tests__/DatametriaContainer.test.ts +52 -0
  51. package/src/components/__tests__/DatametriaDatePicker.test.ts +234 -0
  52. package/src/components/__tests__/DatametriaDivider.test.ts +54 -0
  53. package/src/components/__tests__/DatametriaFileUpload.test.ts +291 -0
  54. package/src/components/__tests__/DatametriaGrid.test.ts +31 -0
  55. package/src/components/__tests__/DatametriaInput.test.ts +72 -0
  56. package/src/components/__tests__/DatametriaMenu.test.ts +366 -0
  57. package/src/components/__tests__/DatametriaModal.test.ts +86 -0
  58. package/src/components/__tests__/DatametriaNavbar.test.js +49 -0
  59. package/src/components/__tests__/DatametriaNavbar.test.ts +203 -0
  60. package/src/components/__tests__/DatametriaPasswordInput.test.js +305 -0
  61. package/src/components/__tests__/DatametriaProgress.test.ts +90 -0
  62. package/src/components/__tests__/DatametriaRadio.test.ts +77 -0
  63. package/src/components/__tests__/DatametriaSelect.test.ts +77 -0
  64. package/src/components/__tests__/DatametriaSlider.test.ts +261 -0
  65. package/src/components/__tests__/DatametriaSortableTable.test.js +168 -0
  66. package/src/components/__tests__/DatametriaSpinner.test.ts +156 -0
  67. package/src/components/__tests__/DatametriaSwitch.test.ts +64 -0
  68. package/src/components/__tests__/DatametriaTable.test.ts +97 -0
  69. package/src/components/__tests__/DatametriaTextarea.test.ts +66 -0
  70. package/src/components/__tests__/DatametriaToast.test.js +49 -0
  71. package/src/components/__tests__/DatametriaToast.test.ts +99 -0
  72. package/src/composables/useAccessibilityScale.ts +94 -94
  73. package/src/composables/useBreakpoints.ts +82 -82
  74. package/src/composables/useHapticFeedback.ts +439 -439
  75. package/src/composables/useRipple.ts +218 -218
  76. package/src/index.ts +68 -61
  77. package/src/stories/Variants.stories.js +96 -0
  78. package/src/styles/design-tokens.css +623 -623
  79. package/src/theme/ThemeProvider.vue +96 -0
  80. package/src/theme/__tests__/ThemeProvider.test.ts +208 -0
  81. package/src/theme/__tests__/constants.test.ts +31 -0
  82. package/src/theme/__tests__/presets.test.ts +166 -0
  83. package/src/theme/__tests__/tokens.test.ts +155 -0
  84. package/src/theme/__tests__/types.test.ts +153 -0
  85. package/src/theme/__tests__/useTheme.test.ts +146 -0
  86. package/src/theme/constants.ts +14 -0
  87. package/src/theme/index.ts +12 -0
  88. package/src/theme/presets/datametria.ts +94 -0
  89. package/src/theme/presets/default.ts +94 -0
  90. package/src/theme/presets/index.ts +8 -0
  91. package/src/theme/tokens/colors.ts +28 -0
  92. package/src/theme/tokens/index.ts +47 -0
  93. package/src/theme/tokens/spacing.ts +21 -0
  94. package/src/theme/tokens/typography.ts +35 -0
  95. package/src/theme/types.ts +111 -0
  96. package/src/theme/useTheme.ts +28 -0
  97. package/src/types/index.ts +19 -0
package/src/components/DatametriaChip.vue CHANGED
@@ -27,17 +27,25 @@
27
27
  <script setup lang="ts">
28
28
  interface Props {
29
29
  label?: string
30
- variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default'
30
+ variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error'
31
31
  closable?: boolean
32
32
  clickable?: boolean
33
33
  }
34
34
 
35
- withDefaults(defineProps<Props>(), {
36
- variant: 'default',
35
+ const props = withDefaults(defineProps<Props>(), {
36
+ variant: 'primary',
37
37
  closable: false,
38
38
  clickable: false
39
39
  })
40
40
 
41
+ // Validação em desenvolvimento
42
+ if (process.env.NODE_ENV === 'development') {
43
+ const validVariants = ['primary', 'secondary', 'success', 'warning', 'error']
44
+ if (!validVariants.includes(props.variant)) {
45
+ console.warn(`[DatametriaChip] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
46
+ }
47
+ }
48
+
41
49
  const emit = defineEmits<{
42
50
  click: []
43
51
  close: []
@@ -56,13 +64,13 @@ const handleClose = () => {
56
64
  .dm-chip {
57
65
  display: inline-flex;
58
66
  align-items: center;
59
- gap: var(--dm-space-2);
60
- padding: var(--dm-space-2) var(--dm-space-3);
61
- border-radius: 16px;
62
- font-size: var(--dm-text-sm);
63
- font-weight: 500;
67
+ gap: var(--dm-spacing-2, 0.5rem);
68
+ padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
69
+ border-radius: var(--dm-radius-full, 16px);
70
+ font-size: var(--dm-font-size-sm, 0.875rem);
71
+ font-weight: var(--dm-font-weight-medium, 500);
64
72
  user-select: none;
65
- transition: var(--dm-transition);
73
+ transition: var(--dm-transition-base, 0.2s);
66
74
  }
67
75
 
68
76
  .dm-chip--clickable {
@@ -74,38 +82,33 @@ const handleClose = () => {
74
82
  }
75
83
 
76
84
  .dm-chip--clickable:focus-visible {
77
- outline: var(--dm-focus-ring);
85
+ outline: 2px solid var(--dm-primary, #0072CE);
78
86
  outline-offset: 2px;
79
87
  }
80
88
 
81
- .dm-chip--default {
82
- background: var(--dm-gray-200);
83
- color: var(--dm-gray-900);
84
- }
85
-
86
89
  .dm-chip--primary {
87
- background: var(--dm-primary-light, rgba(0, 114, 206, 0.1));
88
- color: var(--dm-primary);
90
+ background: color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
91
+ color: var(--dm-primary, #0072CE);
89
92
  }
90
93
 
91
94
  .dm-chip--secondary {
92
- background: var(--dm-secondary-light, rgba(75, 0, 120, 0.1));
93
- color: var(--dm-secondary);
95
+ background: color-mix(in srgb, var(--dm-secondary, #4B0078) 10%, transparent);
96
+ color: var(--dm-secondary, #4B0078);
94
97
  }
95
98
 
96
99
  .dm-chip--success {
97
- background: var(--dm-success-light, rgba(34, 197, 94, 0.1));
98
- color: var(--dm-success);
100
+ background: color-mix(in srgb, var(--dm-success, #10b981) 10%, transparent);
101
+ color: var(--dm-success, #10b981);
99
102
  }
100
103
 
101
104
  .dm-chip--warning {
102
- background: var(--dm-warning-light, rgba(251, 191, 36, 0.2));
103
- color: var(--dm-warning-dark, #92400e);
105
+ background: color-mix(in srgb, var(--dm-warning, #f59e0b) 20%, transparent);
106
+ color: color-mix(in srgb, var(--dm-warning, #f59e0b) 80%, black);
104
107
  }
105
108
 
106
109
  .dm-chip--error {
107
- background: var(--dm-error-light, rgba(239, 68, 68, 0.1));
108
- color: var(--dm-error);
110
+ background: color-mix(in srgb, var(--dm-error, #ef4444) 10%, transparent);
111
+ color: var(--dm-error, #ef4444);
109
112
  }
110
113
 
111
114
  .dm-chip__icon {
@@ -131,7 +134,7 @@ const handleClose = () => {
131
134
  line-height: 1;
132
135
  cursor: pointer;
133
136
  opacity: 0.6;
134
- transition: var(--dm-transition);
137
+ transition: var(--dm-transition-base, 0.2s);
135
138
  padding: 0;
136
139
  margin: 0;
137
140
  }
@@ -139,11 +142,4 @@ const handleClose = () => {
139
142
  .dm-chip__close:hover {
140
143
  opacity: 1;
141
144
  }
142
-
143
- @media (prefers-color-scheme: dark) {
144
- .dm-chip--default {
145
- background: var(--dm-gray-700);
146
- color: var(--dm-white);
147
- }
148
- }
149
145
  </style>
package/src/components/DatametriaContainer.vue CHANGED
@@ -24,8 +24,8 @@ withDefaults(defineProps<Props>(), {
24
24
  width: 100%;
25
25
  margin-left: auto;
26
26
  margin-right: auto;
27
- padding-left: var(--dm-space-4);
28
- padding-right: var(--dm-space-4);
27
+ padding-left: var(--dm-spacing-4, 1rem);
28
+ padding-right: var(--dm-spacing-4, 1rem);
29
29
  }
30
30
 
31
31
  .dm-container--sm {
@@ -50,8 +50,8 @@ withDefaults(defineProps<Props>(), {
50
50
 
51
51
  @media (max-width: 640px) {
52
52
  .dm-container {
53
- padding-left: var(--dm-space-3);
54
- padding-right: var(--dm-space-3);
53
+ padding-left: var(--dm-spacing-3, 0.75rem);
54
+ padding-right: var(--dm-spacing-3, 0.75rem);
55
55
  }
56
56
  }
57
57
  </style>