@datametria/vue-components 1.1.3 → 1.2.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 (18) hide show
  1. package/README.md +81 -14
  2. package/dist/index.es.js +843 -812
  3. package/dist/index.umd.js +6 -6
  4. package/dist/vue-components.css +1 -1
  5. package/package.json +3 -3
  6. package/src/components/DatametriaAlert.vue +137 -123
  7. package/src/components/DatametriaBadge.vue +98 -90
  8. package/src/components/DatametriaButton.vue +165 -157
  9. package/src/components/DatametriaChip.vue +149 -149
  10. package/src/components/DatametriaNavbar.vue +252 -227
  11. package/src/components/DatametriaToast.vue +176 -163
  12. package/src/components/__tests__/DatametriaAlert.test.js +36 -0
  13. package/src/components/__tests__/DatametriaBadge.test.js +30 -0
  14. package/src/components/__tests__/DatametriaButton.test.js +31 -0
  15. package/src/components/__tests__/DatametriaChip.test.js +39 -0
  16. package/src/components/__tests__/DatametriaNavbar.test.js +49 -0
  17. package/src/components/__tests__/DatametriaToast.test.js +49 -0
  18. package/src/stories/Variants.stories.js +96 -0
package/src/components/DatametriaChip.vue CHANGED
@@ -1,149 +1,149 @@
1
- <template>
2
- <div
3
- class="dm-chip"
4
- :class="[`dm-chip--${variant}`, { 'dm-chip--clickable': clickable }]"
5
- :role="clickable ? 'button' : undefined"
6
- :tabindex="clickable ? 0 : undefined"
7
- @click="handleClick"
8
- @keydown.enter="handleClick"
9
- @keydown.space.prevent="handleClick"
10
- >
11
- <span v-if="$slots.icon" class="dm-chip__icon">
12
- <slot name="icon"></slot>
13
- </span>
14
- <span class="dm-chip__label">
15
- <slot>{{ label }}</slot>
16
- </span>
17
- <button
18
- v-if="closable"
19
- class="dm-chip__close"
20
- @click.stop="handleClose"
21
- aria-label="Remover"
22
- type="button"
23
- >×</button>
24
- </div>
25
- </template>
26
-
27
- <script setup lang="ts">
28
- interface Props {
29
- label?: string
30
- variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default'
31
- closable?: boolean
32
- clickable?: boolean
33
- }
34
-
35
- withDefaults(defineProps<Props>(), {
36
- variant: 'default',
37
- closable: false,
38
- clickable: false
39
- })
40
-
41
- const emit = defineEmits<{
42
- click: []
43
- close: []
44
- }>()
45
-
46
- const handleClick = () => {
47
- emit('click')
48
- }
49
-
50
- const handleClose = () => {
51
- emit('close')
52
- }
53
- </script>
54
-
55
- <style scoped>
56
- .dm-chip {
57
- display: inline-flex;
58
- 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;
64
- user-select: none;
65
- transition: var(--dm-transition);
66
- }
67
-
68
- .dm-chip--clickable {
69
- cursor: pointer;
70
- }
71
-
72
- .dm-chip--clickable:hover {
73
- opacity: 0.8;
74
- }
75
-
76
- .dm-chip--clickable:focus-visible {
77
- outline: var(--dm-focus-ring);
78
- outline-offset: 2px;
79
- }
80
-
81
- .dm-chip--default {
82
- background: var(--dm-gray-200);
83
- color: var(--dm-gray-900);
84
- }
85
-
86
- .dm-chip--primary {
87
- background: var(--dm-primary-light, rgba(0, 114, 206, 0.1));
88
- color: var(--dm-primary);
89
- }
90
-
91
- .dm-chip--secondary {
92
- background: var(--dm-secondary-light, rgba(75, 0, 120, 0.1));
93
- color: var(--dm-secondary);
94
- }
95
-
96
- .dm-chip--success {
97
- background: var(--dm-success-light, rgba(34, 197, 94, 0.1));
98
- color: var(--dm-success);
99
- }
100
-
101
- .dm-chip--warning {
102
- background: var(--dm-warning-light, rgba(251, 191, 36, 0.2));
103
- color: var(--dm-warning-dark, #92400e);
104
- }
105
-
106
- .dm-chip--error {
107
- background: var(--dm-error-light, rgba(239, 68, 68, 0.1));
108
- color: var(--dm-error);
109
- }
110
-
111
- .dm-chip__icon {
112
- display: flex;
113
- align-items: center;
114
- font-size: 16px;
115
- }
116
-
117
- .dm-chip__label {
118
- line-height: 1.5;
119
- }
120
-
121
- .dm-chip__close {
122
- display: flex;
123
- align-items: center;
124
- justify-content: center;
125
- width: 20px;
126
- height: 20px;
127
- border: none;
128
- background: transparent;
129
- color: inherit;
130
- font-size: 20px;
131
- line-height: 1;
132
- cursor: pointer;
133
- opacity: 0.6;
134
- transition: var(--dm-transition);
135
- padding: 0;
136
- margin: 0;
137
- }
138
-
139
- .dm-chip__close:hover {
140
- opacity: 1;
141
- }
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
- </style>
1
+ <template>
2
+ <div
3
+ class="dm-chip"
4
+ :class="[`dm-chip--${variant}`, { 'dm-chip--clickable': clickable }]"
5
+ :role="clickable ? 'button' : undefined"
6
+ :tabindex="clickable ? 0 : undefined"
7
+ @click="handleClick"
8
+ @keydown.enter="handleClick"
9
+ @keydown.space.prevent="handleClick"
10
+ >
11
+ <span v-if="$slots.icon" class="dm-chip__icon">
12
+ <slot name="icon"></slot>
13
+ </span>
14
+ <span class="dm-chip__label">
15
+ <slot>{{ label }}</slot>
16
+ </span>
17
+ <button
18
+ v-if="closable"
19
+ class="dm-chip__close"
20
+ @click.stop="handleClose"
21
+ aria-label="Remover"
22
+ type="button"
23
+ >×</button>
24
+ </div>
25
+ </template>
26
+
27
+ <script setup lang="ts">
28
+ interface Props {
29
+ label?: string
30
+ variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error'
31
+ closable?: boolean
32
+ clickable?: boolean
33
+ }
34
+
35
+ const props = withDefaults(defineProps<Props>(), {
36
+ variant: 'primary',
37
+ closable: false,
38
+ clickable: false
39
+ })
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
+
49
+ const emit = defineEmits<{
50
+ click: []
51
+ close: []
52
+ }>()
53
+
54
+ const handleClick = () => {
55
+ emit('click')
56
+ }
57
+
58
+ const handleClose = () => {
59
+ emit('close')
60
+ }
61
+ </script>
62
+
63
+ <style scoped>
64
+ .dm-chip {
65
+ display: inline-flex;
66
+ align-items: center;
67
+ gap: var(--dm-space-2);
68
+ padding: var(--dm-space-2) var(--dm-space-3);
69
+ border-radius: 16px;
70
+ font-size: var(--dm-text-sm);
71
+ font-weight: 500;
72
+ user-select: none;
73
+ transition: var(--dm-transition);
74
+ }
75
+
76
+ .dm-chip--clickable {
77
+ cursor: pointer;
78
+ }
79
+
80
+ .dm-chip--clickable:hover {
81
+ opacity: 0.8;
82
+ }
83
+
84
+ .dm-chip--clickable:focus-visible {
85
+ outline: var(--dm-focus-ring);
86
+ outline-offset: 2px;
87
+ }
88
+
89
+
90
+
91
+ .dm-chip--primary {
92
+ background: var(--dm-primary-light, rgba(0, 114, 206, 0.1));
93
+ color: var(--dm-primary);
94
+ }
95
+
96
+ .dm-chip--secondary {
97
+ background: var(--dm-secondary-light, rgba(75, 0, 120, 0.1));
98
+ color: var(--dm-secondary);
99
+ }
100
+
101
+ .dm-chip--success {
102
+ background: var(--dm-success-light, rgba(34, 197, 94, 0.1));
103
+ color: var(--dm-success);
104
+ }
105
+
106
+ .dm-chip--warning {
107
+ background: var(--dm-warning-light, rgba(251, 191, 36, 0.2));
108
+ color: var(--dm-warning-dark, #92400e);
109
+ }
110
+
111
+ .dm-chip--error {
112
+ background: var(--dm-error-light, rgba(239, 68, 68, 0.1));
113
+ color: var(--dm-error);
114
+ }
115
+
116
+ .dm-chip__icon {
117
+ display: flex;
118
+ align-items: center;
119
+ font-size: 16px;
120
+ }
121
+
122
+ .dm-chip__label {
123
+ line-height: 1.5;
124
+ }
125
+
126
+ .dm-chip__close {
127
+ display: flex;
128
+ align-items: center;
129
+ justify-content: center;
130
+ width: 20px;
131
+ height: 20px;
132
+ border: none;
133
+ background: transparent;
134
+ color: inherit;
135
+ font-size: 20px;
136
+ line-height: 1;
137
+ cursor: pointer;
138
+ opacity: 0.6;
139
+ transition: var(--dm-transition);
140
+ padding: 0;
141
+ margin: 0;
142
+ }
143
+
144
+ .dm-chip__close:hover {
145
+ opacity: 1;
146
+ }
147
+
148
+
149
+ </style>