@datametria/vue-components 2.3.1 → 2.4.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.
Files changed (128) hide show
  1. package/README.md +625 -594
  2. package/dist/index.es.js +1962 -1887
  3. package/dist/index.umd.js +6 -6
  4. package/dist/src/components/DatametriaForm.vue.d.ts +1 -1
  5. package/dist/src/components/DatametriaInput.vue.d.ts +9 -1
  6. package/dist/src/components/DatametriaSelect.vue.d.ts +10 -1
  7. package/dist/vue-components.css +1 -1
  8. package/package.json +103 -102
  9. package/src/components/DatametriaAlert.vue +151 -133
  10. package/src/components/DatametriaAutocomplete.vue +250 -229
  11. package/src/components/DatametriaAvatar.vue +256 -238
  12. package/src/components/DatametriaBadge.vue +101 -96
  13. package/src/components/DatametriaBreadcrumb.vue +132 -128
  14. package/src/components/DatametriaButton.vue +191 -173
  15. package/src/components/DatametriaCard.vue +84 -66
  16. package/src/components/DatametriaCheckbox.vue +197 -193
  17. package/src/components/DatametriaCheckboxGroup.vue +56 -38
  18. package/src/components/DatametriaChip.vue +159 -141
  19. package/src/components/DatametriaContainer.vue +70 -52
  20. package/src/components/DatametriaDataTable.vue +318 -300
  21. package/src/components/DatametriaDatePicker.vue +396 -378
  22. package/src/components/DatametriaDialog.vue +297 -293
  23. package/src/components/DatametriaDivider.vue +105 -98
  24. package/src/components/DatametriaDropdown.vue +356 -350
  25. package/src/components/DatametriaEmpty.vue +155 -151
  26. package/src/components/DatametriaFileUpload.vue +413 -395
  27. package/src/components/DatametriaFloatingBar.vue +144 -126
  28. package/src/components/DatametriaForm.vue +174 -156
  29. package/src/components/DatametriaFormItem.vue +183 -179
  30. package/src/components/DatametriaGrid.vue +55 -37
  31. package/src/components/DatametriaInput.vue +314 -263
  32. package/src/components/DatametriaMenu.vue +618 -600
  33. package/src/components/DatametriaModal.vue +147 -129
  34. package/src/components/DatametriaNavbar.vue +277 -223
  35. package/src/components/DatametriaPagination.vue +375 -371
  36. package/src/components/DatametriaPasswordInput.vue +444 -426
  37. package/src/components/DatametriaPopconfirm.vue +240 -234
  38. package/src/components/DatametriaProgress.vue +228 -224
  39. package/src/components/DatametriaRadio.vue +151 -147
  40. package/src/components/DatametriaRadioGroup.vue +55 -37
  41. package/src/components/DatametriaResult.vue +135 -131
  42. package/src/components/DatametriaSelect.vue +311 -211
  43. package/src/components/DatametriaSidebar.vue +294 -222
  44. package/src/components/DatametriaSkeleton.vue +257 -234
  45. package/src/components/DatametriaSlider.vue +409 -391
  46. package/src/components/DatametriaSortableTable.vue +820 -802
  47. package/src/components/DatametriaSpinner.vue +114 -110
  48. package/src/components/DatametriaSteps.vue +318 -312
  49. package/src/components/DatametriaSwitch.vue +146 -142
  50. package/src/components/DatametriaTabPane.vue +94 -76
  51. package/src/components/DatametriaTable.vue +118 -100
  52. package/src/components/DatametriaTabs.vue +315 -297
  53. package/src/components/DatametriaTextarea.vue +213 -195
  54. package/src/components/DatametriaTimePicker.vue +317 -299
  55. package/src/components/DatametriaToast.vue +176 -176
  56. package/src/components/DatametriaTooltip.vue +421 -400
  57. package/src/components/DatametriaTree.vue +126 -122
  58. package/src/components/DatametriaTreeNode.vue +176 -172
  59. package/src/components/DatametriaUpload.vue +379 -361
  60. package/src/components/__tests__/DatametriaAlert.test.js +35 -35
  61. package/src/components/__tests__/DatametriaAlert.test.ts +190 -190
  62. package/src/components/__tests__/DatametriaAvatar.test.ts +151 -151
  63. package/src/components/__tests__/DatametriaBadge.test.js +29 -29
  64. package/src/components/__tests__/DatametriaBadge.test.ts +167 -167
  65. package/src/components/__tests__/DatametriaBreadcrumb.test.ts +187 -0
  66. package/src/components/__tests__/DatametriaButton.test.js +30 -30
  67. package/src/components/__tests__/DatametriaButton.test.ts +283 -283
  68. package/src/components/__tests__/DatametriaCard.test.ts +201 -201
  69. package/src/components/__tests__/DatametriaCheckbox.test.ts +204 -0
  70. package/src/components/__tests__/DatametriaChip.test.js +38 -38
  71. package/src/components/__tests__/DatametriaContainer.test.ts +52 -52
  72. package/src/components/__tests__/DatametriaDialog.test.ts +338 -0
  73. package/src/components/__tests__/DatametriaDivider.test.ts +54 -54
  74. package/src/components/__tests__/DatametriaDropdown.test.ts +357 -0
  75. package/src/components/__tests__/DatametriaEmpty.test.ts +261 -0
  76. package/src/components/__tests__/DatametriaFileUpload.test.ts +290 -290
  77. package/src/components/__tests__/DatametriaFloatingBar.test.ts +137 -137
  78. package/src/components/__tests__/DatametriaForm.test.ts +96 -0
  79. package/src/components/__tests__/DatametriaFormItem.test.ts +58 -0
  80. package/src/components/__tests__/DatametriaGrid.test.ts +31 -31
  81. package/src/components/__tests__/DatametriaInput.test.ts +72 -72
  82. package/src/components/__tests__/DatametriaMenu.test.ts +366 -366
  83. package/src/components/__tests__/DatametriaModal.test.ts +86 -86
  84. package/src/components/__tests__/DatametriaNavbar.test.js +48 -48
  85. package/src/components/__tests__/DatametriaNavbar.test.ts +203 -203
  86. package/src/components/__tests__/DatametriaPasswordInput.test.js +305 -305
  87. package/src/components/__tests__/DatametriaRadio.test.ts +195 -0
  88. package/src/components/__tests__/DatametriaSelect.test.ts +77 -77
  89. package/src/components/__tests__/DatametriaSidebar.test.ts +169 -169
  90. package/src/components/__tests__/DatametriaSlider.test.ts +261 -261
  91. package/src/components/__tests__/DatametriaSortableTable.test.js +168 -168
  92. package/src/components/__tests__/DatametriaSpinner.test.ts +156 -156
  93. package/src/components/__tests__/DatametriaSteps.test.ts +211 -0
  94. package/src/components/__tests__/DatametriaSwitch.test.ts +129 -0
  95. package/src/components/__tests__/DatametriaTabPane.test.ts +205 -0
  96. package/src/components/__tests__/DatametriaTable.test.ts +97 -97
  97. package/src/components/__tests__/DatametriaTabs.test.ts +232 -232
  98. package/src/components/__tests__/DatametriaToast.test.js +48 -48
  99. package/src/components/__tests__/DatametriaToast.test.ts +99 -99
  100. package/src/components/__tests__/DatametriaTree.test.ts +376 -0
  101. package/src/components/__tests__/index.test.ts +48 -0
  102. package/src/composables/useAccessibilityScale.ts +94 -94
  103. package/src/composables/useBreakpoints.ts +82 -82
  104. package/src/composables/useHapticFeedback.ts +439 -439
  105. package/src/composables/useRipple.ts +218 -218
  106. package/src/composables/useTheme.ts +5 -1
  107. package/src/index.ts +84 -84
  108. package/src/stories/Variants.stories.js +95 -95
  109. package/src/styles/design-tokens.css +623 -623
  110. package/src/theme/ThemeProvider.vue +96 -96
  111. package/src/theme/__tests__/ThemeProvider.test.ts +208 -208
  112. package/src/theme/__tests__/constants.test.ts +31 -31
  113. package/src/theme/__tests__/presets.test.ts +166 -166
  114. package/src/theme/__tests__/tokens.test.ts +155 -155
  115. package/src/theme/__tests__/types.test.ts +153 -153
  116. package/src/theme/__tests__/useTheme.test.ts +146 -146
  117. package/src/theme/constants.ts +14 -14
  118. package/src/theme/index.ts +12 -12
  119. package/src/theme/presets/datametria.ts +94 -94
  120. package/src/theme/presets/default.ts +94 -94
  121. package/src/theme/presets/index.ts +8 -8
  122. package/src/theme/tokens/colors.ts +28 -28
  123. package/src/theme/tokens/index.ts +47 -47
  124. package/src/theme/tokens/spacing.ts +21 -21
  125. package/src/theme/tokens/typography.ts +35 -35
  126. package/src/theme/types.ts +111 -111
  127. package/src/theme/useTheme.ts +28 -28
  128. package/src/types/index.ts +55 -55
package/src/components/DatametriaDivider.vue CHANGED
@@ -1,100 +1,107 @@
1
- <template>
2
- <div
3
- class="dm-divider"
4
- :class="[`dm-divider--${orientation}`, { 'dm-divider--dashed': dashed }]"
5
- :role="orientation === 'horizontal' ? 'separator' : undefined"
6
- :aria-orientation="orientation"
7
- >
8
- <span v-if="$slots.default || label" class="dm-divider__label">
9
- <slot>{{ label }}</slot>
10
- </span>
11
- </div>
12
- </template>
13
-
14
- <script setup lang="ts">
15
- interface Props {
16
- orientation?: 'horizontal' | 'vertical'
17
- dashed?: boolean
18
- label?: string
19
- }
20
-
21
- withDefaults(defineProps<Props>(), {
22
- orientation: 'horizontal',
23
- dashed: false
24
- })
25
- </script>
26
-
27
- <style scoped>
28
- .dm-divider {
29
- display: flex;
30
- align-items: center;
31
- color: var(--dm-neutral-600, #4b5563);
32
- font-size: var(--dm-font-size-sm, 0.875rem);
33
- }
34
-
35
- .dm-divider--horizontal {
36
- width: 100%;
37
- margin: var(--dm-spacing-4, 1rem) 0;
38
- }
39
-
40
- .dm-divider--horizontal::before,
41
- .dm-divider--horizontal::after {
42
- content: '';
43
- flex: 1;
44
- height: 1px;
45
- background: var(--dm-neutral-300, #d1d5db);
46
- }
47
-
48
- .dm-divider--horizontal .dm-divider__label {
49
- padding: 0 var(--dm-spacing-3, 0.75rem);
50
- }
51
-
52
- .dm-divider--vertical {
53
- height: 100%;
54
- flex-direction: column;
55
- margin: 0 var(--dm-spacing-4, 1rem);
56
- }
57
-
58
- .dm-divider--vertical::before,
59
- .dm-divider--vertical::after {
60
- content: '';
61
- flex: 1;
62
- width: 1px;
63
- background: var(--dm-neutral-300, #d1d5db);
64
- }
65
-
66
- .dm-divider--vertical .dm-divider__label {
67
- padding: var(--dm-spacing-3, 0.75rem) 0;
68
- }
69
-
70
- .dm-divider--dashed::before,
71
- .dm-divider--dashed::after {
72
- background: none;
73
- border-top: 1px dashed var(--dm-neutral-300, #d1d5db);
74
- }
75
-
76
- .dm-divider--vertical.dm-divider--dashed::before,
77
- .dm-divider--vertical.dm-divider--dashed::after {
78
- border-top: none;
79
- border-left: 1px dashed var(--dm-neutral-300, #d1d5db);
80
- }
81
-
82
- @media (prefers-color-scheme: dark) {
83
- .dm-divider--horizontal::before,
84
- .dm-divider--horizontal::after,
85
- .dm-divider--vertical::before,
86
- .dm-divider--vertical::after {
87
- background: var(--dm-neutral-700, #374151);
1
+ <template>
2
+ <div
3
+ class="dm-divider"
4
+ :class="[`dm-divider--${orientation}`, { 'dm-divider--dashed': dashed }]"
5
+ :role="orientation === 'horizontal' ? 'separator' : undefined"
6
+ :aria-orientation="orientation"
7
+ >
8
+ <span v-if="$slots.default || label" class="dm-divider__label">
9
+ <slot>{{ label }}</slot>
10
+ </span>
11
+ </div>
12
+ </template>
13
+
14
+ <script setup lang="ts">
15
+ interface Props {
16
+ orientation?: 'horizontal' | 'vertical'
17
+ dashed?: boolean
18
+ label?: string
19
+ }
20
+
21
+ withDefaults(defineProps<Props>(), {
22
+ orientation: 'horizontal',
23
+ dashed: false
24
+ })
25
+ </script>
26
+
27
+ <style scoped>
28
+ .dm-divider {
29
+ display: flex;
30
+ align-items: center;
31
+ color: var(--dm-neutral-600, #4b5563);
32
+ font-size: var(--dm-font-size-sm, 0.875rem);
33
+ }
34
+
35
+ .dm-divider--horizontal {
36
+ width: 100%;
37
+ margin: var(--dm-spacing-4, 1rem) 0;
38
+ }
39
+
40
+ .dm-divider--horizontal::before,
41
+ .dm-divider--horizontal::after {
42
+ content: '';
43
+ flex: 1;
44
+ height: 1px;
45
+ background: var(--dm-neutral-300, #d1d5db);
46
+ }
47
+
48
+ .dm-divider--horizontal .dm-divider__label {
49
+ padding: 0 var(--dm-spacing-3, 0.75rem);
50
+ }
51
+
52
+ .dm-divider--vertical {
53
+ height: 100%;
54
+ flex-direction: column;
55
+ margin: 0 var(--dm-spacing-4, 1rem);
56
+ }
57
+
58
+ .dm-divider--vertical::before,
59
+ .dm-divider--vertical::after {
60
+ content: '';
61
+ flex: 1;
62
+ width: 1px;
63
+ background: var(--dm-neutral-300, #d1d5db);
64
+ }
65
+
66
+ .dm-divider--vertical .dm-divider__label {
67
+ padding: var(--dm-spacing-3, 0.75rem) 0;
68
+ }
69
+
70
+ .dm-divider--dashed::before,
71
+ .dm-divider--dashed::after {
72
+ background: none;
73
+ border-top: 1px dashed var(--dm-neutral-300, #d1d5db);
74
+ }
75
+
76
+ .dm-divider--vertical.dm-divider--dashed::before,
77
+ .dm-divider--vertical.dm-divider--dashed::after {
78
+ border-top: none;
79
+ border-left: 1px dashed var(--dm-neutral-300, #d1d5db);
80
+ }
81
+
82
+ @media (prefers-color-scheme: dark) {
83
+ .dm-divider--horizontal::before,
84
+ .dm-divider--horizontal::after,
85
+ .dm-divider--vertical::before,
86
+ .dm-divider--vertical::after {
87
+ background: var(--dm-neutral-700, #374151);
88
88
  }
89
89
 
90
- .dm-divider--dashed::before,
91
- .dm-divider--dashed::after {
92
- border-color: var(--dm-neutral-700, #374151);
93
- }
94
-
95
- .dm-divider--vertical.dm-divider--dashed::before,
96
- .dm-divider--vertical.dm-divider--dashed::after {
97
- border-color: var(--dm-neutral-700, #374151);
98
- }
99
- }
100
- </style>
90
+ [data-theme="dark"] .dm-divider--horizontal::before,
91
+ .dm-divider--horizontal::after,
92
+ .dm-divider--vertical::before,
93
+ .dm-divider--vertical::after {
94
+ background: var(--dm-neutral-700, #374151);
95
+ }
96
+
97
+ .dm-divider--dashed::before,
98
+ .dm-divider--dashed::after {
99
+ border-color: var(--dm-neutral-700, #374151);
100
+ }
101
+
102
+ .dm-divider--vertical.dm-divider--dashed::before,
103
+ .dm-divider--vertical.dm-divider--dashed::after {
104
+ border-color: var(--dm-neutral-700, #374151);
105
+ }
106
+ }
107
+ </style>