@datametria/vue-components 1.2.0 → 2.1.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 (103) hide show
  1. package/README.md +554 -657
  2. package/dist/index.es.js +2570 -1433
  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 +137 -137
  7. package/src/components/DatametriaAutocomplete.vue +184 -138
  8. package/src/components/DatametriaAvatar.vue +177 -33
  9. package/src/components/DatametriaBadge.vue +98 -98
  10. package/src/components/DatametriaBreadcrumb.vue +21 -21
  11. package/src/components/DatametriaButton.vue +177 -165
  12. package/src/components/DatametriaCard.vue +12 -12
  13. package/src/components/DatametriaCheckbox.vue +8 -8
  14. package/src/components/DatametriaChip.vue +145 -149
  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/DatametriaFloatingBar.vue +126 -0
  20. package/src/components/DatametriaGrid.vue +3 -3
  21. package/src/components/DatametriaInput.vue +15 -15
  22. package/src/components/DatametriaMenu.vue +604 -619
  23. package/src/components/DatametriaModal.vue +16 -16
  24. package/src/components/DatametriaNavbar.vue +230 -252
  25. package/src/components/DatametriaPasswordInput.vue +430 -0
  26. package/src/components/DatametriaProgress.vue +18 -18
  27. package/src/components/DatametriaRadio.vue +20 -20
  28. package/src/components/DatametriaSelect.vue +15 -15
  29. package/src/components/DatametriaSidebar.vue +230 -0
  30. package/src/components/DatametriaSkeleton.vue +243 -239
  31. package/src/components/DatametriaSlider.vue +395 -407
  32. package/src/components/DatametriaSortableTable.vue +585 -0
  33. package/src/components/DatametriaSpinner.vue +7 -7
  34. package/src/components/DatametriaSwitch.vue +16 -16
  35. package/src/components/DatametriaTable.vue +14 -14
  36. package/src/components/DatametriaTabs.vue +150 -29
  37. package/src/components/DatametriaTextarea.vue +28 -28
  38. package/src/components/DatametriaTimePicker.vue +285 -285
  39. package/src/components/DatametriaToast.vue +176 -176
  40. package/src/components/DatametriaTooltip.vue +408 -408
  41. package/src/components/__tests__/DatametriaAlert.test.js +35 -35
  42. package/src/components/__tests__/DatametriaAlert.test.ts +190 -0
  43. package/src/components/__tests__/DatametriaAutocomplete.test.ts +180 -0
  44. package/src/components/__tests__/DatametriaAvatar.test.ts +152 -0
  45. package/src/components/__tests__/DatametriaBadge.test.js +29 -29
  46. package/src/components/__tests__/DatametriaBadge.test.ts +167 -0
  47. package/src/components/__tests__/DatametriaBreadcrumb.test.ts +75 -0
  48. package/src/components/__tests__/DatametriaButton.test.js +30 -30
  49. package/src/components/__tests__/DatametriaButton.test.ts +283 -0
  50. package/src/components/__tests__/DatametriaCard.test.ts +201 -0
  51. package/src/components/__tests__/DatametriaCheckbox.test.ts +47 -0
  52. package/src/components/__tests__/DatametriaChip.test.js +38 -38
  53. package/src/components/__tests__/DatametriaContainer.test.ts +52 -0
  54. package/src/components/__tests__/DatametriaDatePicker.test.ts +234 -0
  55. package/src/components/__tests__/DatametriaDivider.test.ts +54 -0
  56. package/src/components/__tests__/DatametriaFileUpload.test.ts +291 -0
  57. package/src/components/__tests__/DatametriaFloatingBar.test.ts +137 -0
  58. package/src/components/__tests__/DatametriaGrid.test.ts +31 -0
  59. package/src/components/__tests__/DatametriaInput.test.ts +72 -0
  60. package/src/components/__tests__/DatametriaMenu.test.ts +366 -0
  61. package/src/components/__tests__/DatametriaModal.test.ts +86 -0
  62. package/src/components/__tests__/DatametriaNavbar.test.js +48 -48
  63. package/src/components/__tests__/DatametriaNavbar.test.ts +203 -0
  64. package/src/components/__tests__/DatametriaPasswordInput.test.js +305 -0
  65. package/src/components/__tests__/DatametriaProgress.test.ts +90 -0
  66. package/src/components/__tests__/DatametriaRadio.test.ts +77 -0
  67. package/src/components/__tests__/DatametriaSelect.test.ts +77 -0
  68. package/src/components/__tests__/DatametriaSidebar.test.ts +169 -0
  69. package/src/components/__tests__/DatametriaSlider.test.ts +261 -0
  70. package/src/components/__tests__/DatametriaSortableTable.test.js +168 -0
  71. package/src/components/__tests__/DatametriaSpinner.test.ts +156 -0
  72. package/src/components/__tests__/DatametriaSwitch.test.ts +64 -0
  73. package/src/components/__tests__/DatametriaTable.test.ts +97 -0
  74. package/src/components/__tests__/DatametriaTabs.test.ts +232 -0
  75. package/src/components/__tests__/DatametriaTextarea.test.ts +66 -0
  76. package/src/components/__tests__/DatametriaToast.test.js +48 -48
  77. package/src/components/__tests__/DatametriaToast.test.ts +99 -0
  78. package/src/composables/useAccessibilityScale.ts +94 -94
  79. package/src/composables/useBreakpoints.ts +82 -82
  80. package/src/composables/useHapticFeedback.ts +439 -439
  81. package/src/composables/useRipple.ts +218 -218
  82. package/src/index.ts +70 -61
  83. package/src/stories/Variants.stories.js +95 -95
  84. package/src/styles/design-tokens.css +623 -623
  85. package/src/theme/ThemeProvider.vue +96 -0
  86. package/src/theme/__tests__/ThemeProvider.test.ts +208 -0
  87. package/src/theme/__tests__/constants.test.ts +31 -0
  88. package/src/theme/__tests__/presets.test.ts +166 -0
  89. package/src/theme/__tests__/tokens.test.ts +155 -0
  90. package/src/theme/__tests__/types.test.ts +153 -0
  91. package/src/theme/__tests__/useTheme.test.ts +146 -0
  92. package/src/theme/constants.ts +14 -0
  93. package/src/theme/index.ts +12 -0
  94. package/src/theme/presets/datametria.ts +94 -0
  95. package/src/theme/presets/default.ts +94 -0
  96. package/src/theme/presets/index.ts +8 -0
  97. package/src/theme/tokens/colors.ts +28 -0
  98. package/src/theme/tokens/index.ts +47 -0
  99. package/src/theme/tokens/spacing.ts +21 -0
  100. package/src/theme/tokens/typography.ts +35 -0
  101. package/src/theme/types.ts +111 -0
  102. package/src/theme/useTheme.ts +28 -0
  103. package/src/types/index.ts +19 -0
package/src/stories/Variants.stories.js CHANGED
@@ -1,96 +1,96 @@
1
- import DatametriaButton from '../components/DatametriaButton.vue'
2
- import DatametriaAlert from '../components/DatametriaAlert.vue'
3
- import DatametriaBadge from '../components/DatametriaBadge.vue'
4
- import DatametriaChip from '../components/DatametriaChip.vue'
5
- import DatametriaToast from '../components/DatametriaToast.vue'
6
- import DatametriaNavbar from '../components/DatametriaNavbar.vue'
7
-
8
- export default {
9
- title: 'Design System/Variants',
10
- parameters: {
11
- docs: {
12
- description: {
13
- component: 'Showcase of all component variants with primary variant standardization'
14
- }
15
- }
16
- }
17
- }
18
-
19
- export const AllVariants = () => ({
20
- components: {
21
- DatametriaButton,
22
- DatametriaAlert,
23
- DatametriaBadge,
24
- DatametriaChip,
25
- DatametriaToast,
26
- DatametriaNavbar
27
- },
28
- template: `
29
- <div style="padding: 2rem; space-y: 2rem;">
30
- <section>
31
- <h2>Button Variants</h2>
32
- <div style="display: flex; gap: 1rem; margin: 1rem 0;">
33
- <DatametriaButton variant="primary">Primary</DatametriaButton>
34
- <DatametriaButton variant="secondary">Secondary</DatametriaButton>
35
- <DatametriaButton variant="outline">Outline</DatametriaButton>
36
- <DatametriaButton variant="ghost">Ghost</DatametriaButton>
37
- </div>
38
- </section>
39
-
40
- <section>
41
- <h2>Alert Variants</h2>
42
- <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
43
- <DatametriaAlert variant="primary" message="Primary alert message" />
44
- <DatametriaAlert variant="success" message="Success alert message" />
45
- <DatametriaAlert variant="error" message="Error alert message" />
46
- <DatametriaAlert variant="warning" message="Warning alert message" />
47
- <DatametriaAlert variant="info" message="Info alert message" />
48
- </div>
49
- </section>
50
-
51
- <section>
52
- <h2>Badge Variants</h2>
53
- <div style="display: flex; gap: 1rem; margin: 1rem 0;">
54
- <DatametriaBadge variant="primary" label="Primary" />
55
- <DatametriaBadge variant="secondary" label="Secondary" />
56
- <DatametriaBadge variant="success" label="Success" />
57
- <DatametriaBadge variant="error" label="Error" />
58
- <DatametriaBadge variant="warning" label="Warning" />
59
- <DatametriaBadge variant="info" label="Info" />
60
- </div>
61
- </section>
62
-
63
- <section>
64
- <h2>Chip Variants</h2>
65
- <div style="display: flex; gap: 1rem; margin: 1rem 0;">
66
- <DatametriaChip variant="primary" label="Primary" />
67
- <DatametriaChip variant="secondary" label="Secondary" />
68
- <DatametriaChip variant="success" label="Success" />
69
- <DatametriaChip variant="error" label="Error" />
70
- <DatametriaChip variant="warning" label="Warning" />
71
- </div>
72
- </section>
73
-
74
- <section>
75
- <h2>Toast Variants</h2>
76
- <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
77
- <DatametriaToast variant="primary" message="Primary toast" :model-value="true" />
78
- <DatametriaToast variant="success" message="Success toast" :model-value="true" />
79
- <DatametriaToast variant="error" message="Error toast" :model-value="true" />
80
- <DatametriaToast variant="warning" message="Warning toast" :model-value="true" />
81
- <DatametriaToast variant="info" message="Info toast" :model-value="true" />
82
- </div>
83
- </section>
84
-
85
- <section>
86
- <h2>Navbar Variants</h2>
87
- <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
88
- <DatametriaNavbar variant="primary" brand="Primary Navbar" />
89
- <DatametriaNavbar variant="light" brand="Light Navbar" />
90
- <DatametriaNavbar variant="dark" brand="Dark Navbar" />
91
- <DatametriaNavbar variant="transparent" brand="Transparent Navbar" />
92
- </div>
93
- </section>
94
- </div>
95
- `
1
+ import DatametriaButton from '../components/DatametriaButton.vue'
2
+ import DatametriaAlert from '../components/DatametriaAlert.vue'
3
+ import DatametriaBadge from '../components/DatametriaBadge.vue'
4
+ import DatametriaChip from '../components/DatametriaChip.vue'
5
+ import DatametriaToast from '../components/DatametriaToast.vue'
6
+ import DatametriaNavbar from '../components/DatametriaNavbar.vue'
7
+
8
+ export default {
9
+ title: 'Design System/Variants',
10
+ parameters: {
11
+ docs: {
12
+ description: {
13
+ component: 'Showcase of all component variants with primary variant standardization'
14
+ }
15
+ }
16
+ }
17
+ }
18
+
19
+ export const AllVariants = () => ({
20
+ components: {
21
+ DatametriaButton,
22
+ DatametriaAlert,
23
+ DatametriaBadge,
24
+ DatametriaChip,
25
+ DatametriaToast,
26
+ DatametriaNavbar
27
+ },
28
+ template: `
29
+ <div style="padding: 2rem; space-y: 2rem;">
30
+ <section>
31
+ <h2>Button Variants</h2>
32
+ <div style="display: flex; gap: 1rem; margin: 1rem 0;">
33
+ <DatametriaButton variant="primary">Primary</DatametriaButton>
34
+ <DatametriaButton variant="secondary">Secondary</DatametriaButton>
35
+ <DatametriaButton variant="outline">Outline</DatametriaButton>
36
+ <DatametriaButton variant="ghost">Ghost</DatametriaButton>
37
+ </div>
38
+ </section>
39
+
40
+ <section>
41
+ <h2>Alert Variants</h2>
42
+ <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
43
+ <DatametriaAlert variant="primary" message="Primary alert message" />
44
+ <DatametriaAlert variant="success" message="Success alert message" />
45
+ <DatametriaAlert variant="error" message="Error alert message" />
46
+ <DatametriaAlert variant="warning" message="Warning alert message" />
47
+ <DatametriaAlert variant="info" message="Info alert message" />
48
+ </div>
49
+ </section>
50
+
51
+ <section>
52
+ <h2>Badge Variants</h2>
53
+ <div style="display: flex; gap: 1rem; margin: 1rem 0;">
54
+ <DatametriaBadge variant="primary" label="Primary" />
55
+ <DatametriaBadge variant="secondary" label="Secondary" />
56
+ <DatametriaBadge variant="success" label="Success" />
57
+ <DatametriaBadge variant="error" label="Error" />
58
+ <DatametriaBadge variant="warning" label="Warning" />
59
+ <DatametriaBadge variant="info" label="Info" />
60
+ </div>
61
+ </section>
62
+
63
+ <section>
64
+ <h2>Chip Variants</h2>
65
+ <div style="display: flex; gap: 1rem; margin: 1rem 0;">
66
+ <DatametriaChip variant="primary" label="Primary" />
67
+ <DatametriaChip variant="secondary" label="Secondary" />
68
+ <DatametriaChip variant="success" label="Success" />
69
+ <DatametriaChip variant="error" label="Error" />
70
+ <DatametriaChip variant="warning" label="Warning" />
71
+ </div>
72
+ </section>
73
+
74
+ <section>
75
+ <h2>Toast Variants</h2>
76
+ <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
77
+ <DatametriaToast variant="primary" message="Primary toast" :model-value="true" />
78
+ <DatametriaToast variant="success" message="Success toast" :model-value="true" />
79
+ <DatametriaToast variant="error" message="Error toast" :model-value="true" />
80
+ <DatametriaToast variant="warning" message="Warning toast" :model-value="true" />
81
+ <DatametriaToast variant="info" message="Info toast" :model-value="true" />
82
+ </div>
83
+ </section>
84
+
85
+ <section>
86
+ <h2>Navbar Variants</h2>
87
+ <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
88
+ <DatametriaNavbar variant="primary" brand="Primary Navbar" />
89
+ <DatametriaNavbar variant="light" brand="Light Navbar" />
90
+ <DatametriaNavbar variant="dark" brand="Dark Navbar" />
91
+ <DatametriaNavbar variant="transparent" brand="Transparent Navbar" />
92
+ </div>
93
+ </section>
94
+ </div>
95
+ `
96
96
  })