@imaginario27/air-ui-ds 1.13.9 → 1.13.10

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 (10) hide show
  1. package/components/drawers/Drawer.vue +5 -0
  2. package/components/dropdowns/DropdownSelect.vue +5 -1
  3. package/components/dropzone/Dropzone.vue +10 -0
  4. package/components/forms/fields/SearchField.vue +5 -1
  5. package/components/layouts/headers/CompactHeader.vue +18 -2
  6. package/components/modals/ModalDialog.vue +5 -1
  7. package/components/navigation/nav-sidebar/NavSidebar.vue +20 -8
  8. package/components/pagination/SimplePagination.vue +12 -2
  9. package/components/tables/TableHeaderCell.vue +6 -1
  10. package/package.json +1 -1
package/components/drawers/Drawer.vue CHANGED
@@ -72,6 +72,7 @@
72
72
  v-if="hasCloseButton"
73
73
  :icon="buttonCloseIcon"
74
74
  :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
75
+ :ariaLabel="closeAriaLabel"
75
76
  @click="close"
76
77
  />
77
78
  </div>
@@ -142,6 +143,10 @@ const props = defineProps({
142
143
  overlayClass: String as PropType<string>,
143
144
  headerClass: String as PropType<string>,
144
145
  titleClass: String as PropType<string>,
146
+ closeAriaLabel: {
147
+ type: String as PropType<string>,
148
+ default: 'Close',
149
+ },
145
150
  })
146
151
 
147
152
  // Emits
package/components/dropdowns/DropdownSelect.vue CHANGED
@@ -111,7 +111,7 @@
111
111
  :size="ButtonSize.SM"
112
112
  :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE"
113
113
  icon="mdi:close-circle"
114
- ariaLabel="Clear selection"
114
+ :ariaLabel="clearSelectionAriaLabel"
115
115
  @click="selected = []"
116
116
  />
117
117
 
@@ -305,6 +305,10 @@ const props = defineProps({
305
305
  type: String as PropType<string>,
306
306
  default: 'Loading options...',
307
307
  },
308
+ clearSelectionAriaLabel: {
309
+ type: String as PropType<string>,
310
+ default: 'Clear selection',
311
+ },
308
312
  })
309
313
 
310
314
  // Emits
package/components/dropzone/Dropzone.vue CHANGED
@@ -176,6 +176,7 @@
176
176
  :styleType="retryButtonStyleType"
177
177
  :class="retryButtonClass"
178
178
  :iconClass="normalizedRetryIconClass"
179
+ :ariaLabel="retryAriaLabel"
179
180
  @click.stop="retryUpload(file)"
180
181
  />
181
182
 
@@ -186,6 +187,7 @@
186
187
  :styleType="removeButtonStyleType"
187
188
  :class="removeButtonClass"
188
189
  :iconClass="normalizedRemoveIconClass"
190
+ :ariaLabel="removeAriaLabel"
189
191
  @click.stop="removeFile(file)"
190
192
  />
191
193
  </div>
@@ -447,6 +449,14 @@ const props = defineProps({
447
449
  fileItemClass: String as PropType<string>,
448
450
  fileNameClass: String as PropType<string>,
449
451
  fileMetaClass: String as PropType<string>,
452
+ retryAriaLabel: {
453
+ type: String as PropType<string>,
454
+ default: 'Retry upload',
455
+ },
456
+ removeAriaLabel: {
457
+ type: String as PropType<string>,
458
+ default: 'Remove file',
459
+ },
450
460
  })
451
461
 
452
462
  const emit = defineEmits([
package/components/forms/fields/SearchField.vue CHANGED
@@ -72,7 +72,7 @@
72
72
  :size="ButtonSize.SM"
73
73
  :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE"
74
74
  icon="mdi:close-circle"
75
- ariaLabel="Clear search"
75
+ :ariaLabel="clearAriaLabel"
76
76
  @click="clearField"
77
77
  />
78
78
  </div>
@@ -138,6 +138,10 @@ const props = defineProps({
138
138
  default: false,
139
139
  },
140
140
  inputCustomClass: String as PropType<string>,
141
+ clearAriaLabel: {
142
+ type: String as PropType<string>,
143
+ default: 'Clear search',
144
+ },
141
145
  })
142
146
 
143
147
  // States
package/components/layouts/headers/CompactHeader.vue CHANGED
@@ -36,6 +36,7 @@
36
36
  >
37
37
  <ActionIconButton
38
38
  :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
39
+ :ariaLabel="isMobileSidebarOpen ? sidebarCloseAriaLabel : sidebarOpenAriaLabel"
39
40
  :class="['shadow-sm', !isMobile && 'hidden']"
40
41
  @click="toggleMobileSidebar"
41
42
  />
@@ -43,7 +44,7 @@
43
44
 
44
45
  <slot name="header-logo" />
45
46
 
46
- <template
47
+ <template
47
48
  v-if="
48
49
  showMobileSidebarToggle
49
50
  && sidebarTogglePosition === SidebarTogglePosition.LOGO_RIGHT_SIDE
@@ -51,6 +52,7 @@
51
52
  >
52
53
  <ActionIconButton
53
54
  :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
55
+ :ariaLabel="isMobileSidebarOpen ? sidebarCloseAriaLabel : sidebarOpenAriaLabel"
54
56
  :class="['shadow-sm', !isMobile && 'hidden']"
55
57
  @click="toggleMobileSidebar"
56
58
  />
@@ -119,6 +121,7 @@
119
121
  <template #activator>
120
122
  <ActionIconButton
121
123
  icon="mdi:menu"
124
+ :ariaLabel="mobileMenuAriaLabel"
122
125
  class="shadow-sm"
123
126
  />
124
127
  </template>
@@ -154,8 +157,9 @@
154
157
  && sidebarTogglePosition === SidebarTogglePosition.RIGHT_SIDE
155
158
  "
156
159
  >
157
- <ActionIconButton
160
+ <ActionIconButton
158
161
  :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
162
+ :ariaLabel="isMobileSidebarOpen ? sidebarCloseAriaLabel : sidebarOpenAriaLabel"
159
163
  class="lg:hidden shadow-sm"
160
164
  @click="toggleMobileSidebar"
161
165
  />
@@ -243,6 +247,18 @@ const props = defineProps({
243
247
  default: 'min-w-[280px]'
244
248
  },
245
249
  headerClass: String as PropType<string>,
250
+ sidebarOpenAriaLabel: {
251
+ type: String as PropType<string>,
252
+ default: 'Open sidebar',
253
+ },
254
+ sidebarCloseAriaLabel: {
255
+ type: String as PropType<string>,
256
+ default: 'Close sidebar',
257
+ },
258
+ mobileMenuAriaLabel: {
259
+ type: String as PropType<string>,
260
+ default: 'Open mobile menu',
261
+ },
246
262
  })
247
263
 
248
264
  // Composables
package/components/modals/ModalDialog.vue CHANGED
@@ -58,7 +58,7 @@
58
58
  :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
59
59
  :size="ButtonSize.MD"
60
60
  icon="mdi:close"
61
- ariaLabel="Close"
61
+ :ariaLabel="closeAriaLabel"
62
62
  class="absolute top-4 right-4 z-10"
63
63
  @click="closeModal"
64
64
  />
@@ -105,6 +105,10 @@ const props = defineProps({
105
105
  },
106
106
  id: String as PropType<string>,
107
107
  ariaLabelledby: String as PropType<string>,
108
+ closeAriaLabel: {
109
+ type: String as PropType<string>,
110
+ default: 'Close',
111
+ },
108
112
  })
109
113
 
110
114
  // Emits
package/components/navigation/nav-sidebar/NavSidebar.vue CHANGED
@@ -28,21 +28,21 @@
28
28
  >
29
29
  <div class="flex gap-2">
30
30
  <!-- Mobile sidebar toggler -->
31
- <ActionIconButton
31
+ <ActionIconButton
32
32
  v-if="showMobileSidebarClose && isMobile && !isCollapsed"
33
33
  :icon="mobileSidebarCloseIcon"
34
34
  class="flex"
35
35
  :size="ButtonSize.SM"
36
- aria-label="Close sidebar"
36
+ :ariaLabel="closeSidebarAriaLabel"
37
37
  @click="toggleMobileSidebar()"
38
38
  />
39
39
 
40
40
  <!-- Collapse toggle button -->
41
- <ActionIconButton
41
+ <ActionIconButton
42
42
  v-if="showCollapseToggle && collapseTogglePosition === Position.TOP && !isCollapsed"
43
43
  :icon="expandedStateIcon"
44
44
  :size="ButtonSize.SM"
45
- aria-label="Collapse sidebar"
45
+ :ariaLabel="collapseSidebarAriaLabel"
46
46
  @click="toggleSidebarState(sidebarId)"
47
47
  />
48
48
  </div>
@@ -63,12 +63,12 @@
63
63
  }"
64
64
  >
65
65
  <!-- Collapse toggle item shown only in collapsed state -->
66
- <ActionIconButton
66
+ <ActionIconButton
67
67
  v-if="showCollapseToggle && collapseTogglePosition === Position.TOP && isCollapsed"
68
68
  :icon="collapsedStateIcon"
69
69
  :size="ButtonSize.SM"
70
70
  class="mb-2"
71
- aria-label="Expand sidebar"
71
+ :ariaLabel="expandSidebarAriaLabel"
72
72
  @click="toggleSidebarState(sidebarId)"
73
73
  />
74
74
 
@@ -151,14 +151,14 @@
151
151
  </NavSidebarMenu>
152
152
 
153
153
  <!-- Collapse toggle button at bottom -->
154
- <ActionIconButton
154
+ <ActionIconButton
155
155
  v-if="showCollapseToggle && collapseTogglePosition === Position.BOTTOM"
156
156
  :icon="isCollapsed ? collapsedStateIcon : expandedStateIcon"
157
157
  :size="ButtonSize.SM"
158
158
  :class="[
159
159
  isCollapsed ? '' : 'absolute right-3 bottom-3'
160
160
  ]"
161
- :aria-label="isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
161
+ :ariaLabel="isCollapsed ? expandSidebarAriaLabel : collapseSidebarAriaLabel"
162
162
  @click="toggleSidebarState(sidebarId)"
163
163
  />
164
164
 
@@ -342,6 +342,18 @@ const props = defineProps({
342
342
  type: [String, Object] as PropType<PrefetchOnStrategy>,
343
343
  default: PrefetchOn.VISIBILITY,
344
344
  },
345
+ closeSidebarAriaLabel: {
346
+ type: String as PropType<string>,
347
+ default: 'Close sidebar',
348
+ },
349
+ collapseSidebarAriaLabel: {
350
+ type: String as PropType<string>,
351
+ default: 'Collapse sidebar',
352
+ },
353
+ expandSidebarAriaLabel: {
354
+ type: String as PropType<string>,
355
+ default: 'Expand sidebar',
356
+ },
345
357
  })
346
358
 
347
359
  // States
package/components/pagination/SimplePagination.vue CHANGED
@@ -1,9 +1,10 @@
1
1
  <template>
2
2
  <nav class="flex items-center justify-center gap-2">
3
- <ActionIconButton
3
+ <ActionIconButton
4
4
  icon="mdi:chevron-left"
5
5
  :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
6
6
  :disabled="modelValue === 1"
7
+ :ariaLabel="previousPageAriaLabel"
7
8
  :class="[
8
9
  'bg-transparent',
9
10
  modelValue > 1 && 'hover:border border-border-default',
@@ -13,10 +14,11 @@
13
14
  <p class="text-sm">
14
15
  {{ computedResultsText }}
15
16
  </p>
16
- <ActionIconButton
17
+ <ActionIconButton
17
18
  icon="mdi:chevron-right"
18
19
  :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
19
20
  :disabled="modelValue === totalPages"
21
+ :ariaLabel="nextPageAriaLabel"
20
22
  :class="[
21
23
  'bg-transparent',
22
24
  modelValue < totalPages && 'hover:border border-border-default',
@@ -54,6 +56,14 @@ const props = defineProps({
54
56
  type: String as PropType<string>,
55
57
  default: 'Showing {total} result',
56
58
  },
59
+ previousPageAriaLabel: {
60
+ type: String as PropType<string>,
61
+ default: 'Previous page',
62
+ },
63
+ nextPageAriaLabel: {
64
+ type: String as PropType<string>,
65
+ default: 'Next page',
66
+ },
57
67
  })
58
68
 
59
69
  // Emits
package/components/tables/TableHeaderCell.vue CHANGED
@@ -9,11 +9,12 @@
9
9
  <div class="w-full flex items-center gap-2">
10
10
  <slot />
11
11
 
12
- <ActionIconButton
12
+ <ActionIconButton
13
13
  v-if="sorteable && scope === TableHeaderCellScope.COL"
14
14
  :size="ButtonSize.XS"
15
15
  :icon="sortAsc ? 'mdi:arrow-up' : 'mdi:arrow-down'"
16
16
  :styleType="sortKey === columnKey ? ButtonStyleType.NEUTRAL_FILLED : ButtonStyleType.NEUTRAL_OUTLINED"
17
+ :ariaLabel="sortAriaLabel"
17
18
  @click="onToggleSort && onToggleSort()"
18
19
  />
19
20
  </div>
@@ -52,6 +53,10 @@ const props = defineProps({
52
53
  default: false,
53
54
  },
54
55
  to: String as PropType<string>,
56
+ sortAriaLabel: {
57
+ type: String as PropType<string>,
58
+ default: 'Toggle sort',
59
+ },
55
60
  })
56
61
 
57
62
  // Computed classes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@imaginario27/air-ui-ds",
3
- "version": "1.13.9",
3
+ "version": "1.13.10",
4
4
  "author": "imaginario27",
5
5
  "type": "module",
6
6
  "homepage": "https://air-ui.netlify.app/",