Skip to content

Commit 7948e3b

Browse files
davidnixondavidnixon
authored
Merge pull request #1701 from davidnixon/feat-nuxt-friendly
fix: make ids consistent for Nuxt
2 parents c1fae2c + d6964cc commit 7948e3b

File tree

8 files changed

+48
-31
lines changed

8 files changed

+48
-31
lines changed

‎src/components/CvAccordion/CvAccordionItem.vue‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<li
3+
data-allow-mismatch="children"
34
data-accordion-item
45
class="cv-accordion-item"
56
:class="[
67
`${carbonPrefix}--accordion__item`,
7-
88
{
99
[`${carbonPrefix}--accordion__item--disabled`]: disabled,
1010
[`${carbonPrefix}--accordion__item--active`]: isOpen,
@@ -23,17 +23,11 @@
2323
@click.prevent.stop="onClick"
2424
>
2525
<ChevronRight16 :class="`${carbonPrefix}--accordion__arrow`" />
26-
2726
<p :class="`${carbonPrefix}--accordion__title`">
28-
<!-- @slot title of the accordion item -->
29-
3027
<slot name="title"></slot>
3128
</p>
3229
</button>
33-
3430
<div :id="cvId" :class="`${carbonPrefix}--accordion__content`">
35-
<!-- @slot content of accordion item -->
36-
3731
<slot name="content"></slot>
3832
</div>
3933
</li>

‎src/components/CvDataTable/CvDataTable.vue‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div :id="uid" :style="tableStyle" class="cv-data-table">
2+
<div :id="cvId" :style="tableStyle" class="cv-data-table">
33
<div
44
:class="[
55
`${carbonPrefix}--data-table-container`,
@@ -55,7 +55,7 @@
5555
<div
5656
v-if="onSearch"
5757
ref="searchContainer"
58-
:aria-labelledby="`${uid}-search`"
58+
:aria-labelledby="`${cvId}-search`"
5959
:class="[
6060
`${carbonPrefix}--search `,
6161
{
@@ -73,20 +73,20 @@
7373
<Search16 :class="`${carbonPrefix}--search-magnifier-icon`" />
7474
</div>
7575
<label
76-
:id="`${uid}-search`"
77-
:for="`searchbox-${uid}`"
76+
:id="`${cvId}-search`"
77+
:for="`searchbox-${cvId}`"
7878
:class="`${carbonPrefix}--label`"
7979
>{{ searchLabel }}</label
8080
>
8181
<input
82-
:id="`searchbox-${uid}`"
82+
:id="`searchbox-${cvId}`"
8383
ref="search"
8484
v-model="searchValue"
8585
:class="`${carbonPrefix}--search-input`"
8686
type="text"
8787
role="searchbox"
8888
:placeholder="searchPlaceholder"
89-
:aria-labelledby="`searchbox-${uid}`"
89+
:aria-labelledby="`searchbox-${cvId}`"
9090
@input="onInternalSearch"
9191
@click="checkSearchExpand(true)"
9292
@keydown.esc.prevent="checkSearchExpand(false)"
@@ -160,6 +160,7 @@
160160
<cv-checkbox-skeleton v-if="isSkeleton" />
161161
<cv-checkbox
162162
v-else
163+
:id="`${cvId}-headingCheck`"
163164
v-model="headingChecked"
164165
:form-item="false"
165166
value="headingCheck"
@@ -187,6 +188,7 @@
187188
<slot name="data">
188189
<cv-data-table-row
189190
v-for="(row, rowIndex) in data"
191+
:id="`${cvId}-${rowIndex}`"
190192
:key="`row:${rowIndex}`"
191193
ref="dataRows"
192194
:value="`${rowIndex}`"
@@ -211,6 +213,7 @@
211213
<cv-pagination
212214
v-if="pagination"
213215
v-bind="internalPagination"
216+
:id="`${cvId}-pagination`"
214217
:number-of-items="internalNumberOfItems"
215218
@change="$emit('pagination', $event)"
216219
>
@@ -343,7 +346,7 @@ const props = defineProps({
343346
onSearch: { type: Function, default: undefined },
344347
...propsCvId,
345348
});
346-
const uid = useCvId(props, true);
349+
const cvId = useCvId(props, true);
347350
348351
const isSkeleton = ref(props.skeleton);
349352
provide('is-skeleton', isSkeleton);
@@ -361,12 +364,16 @@ const search = ref(null);
361364
/** @type {Ref<Set<String>>} */
362365
const expandingRowIds = ref(new Set());
363366
provide('expanding-row-ids', expandingRowIds);
367+
368+
const tableExpandable = ref(props.expandable);
369+
provide('table-expandable', tableExpandable);
364370
onMounted(() => {
365371
if (props.expandable) expandingRowIds.value.add('table-expand-row');
366372
});
367373
watch(
368374
() => props.expandable,
369375
() => {
376+
tableExpandable.value = props.expandable;
370377
if (props.expandable) expandingRowIds.value.add('table-expand-row');
371378
else expandingRowIds.value.delete('table-expand-row');
372379
}

‎src/components/CvDataTable/CvDataTableRow.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<template>
22
<tbody
3-
v-if="dataSomeExpandingRows"
3+
v-if="tableExpandable"
44
:id="cvId"
55
class="cv-data-table-row cv-data-table-row--expandable"
66
>
77
<cv-data-table-row-inner
8+
:id="`${cvId}-ri`"
89
ref="row"
910
:row-id="cvId"
1011
v-bind="$attrs"
@@ -75,9 +76,11 @@ watch(
7576
() => (rowValue.value = props.value)
7677
);
7778
79+
/** @type {Ref<boolean>} */
80+
const tableExpandable = inject('table-expandable', ref(false));
7881
/** @type {Ref<Set<String>>} */
7982
const expandingRowIds = inject('expanding-row-ids', ref(new Set()));
80-
const dataExpandable = ref(false);
83+
const dataExpandable = ref(tableExpandable.value);
8184
watch(dataExpandable, value => {
8285
if (value && !expandingRowIds.value.has('table-expand-row')) {
8386
console.warn(
@@ -87,9 +90,6 @@ watch(dataExpandable, value => {
8790
if (dataExpandable.value) expandingRowIds.value.add(cvId.value);
8891
else expandingRowIds.value?.delete(cvId.value);
8992
});
90-
const dataSomeExpandingRows = computed(() => {
91-
return expandingRowIds.value?.size > 0;
92-
});
9393
const attrs = useAttrs();
9494
const rowIds = inject('row-ids', ref(new Set()));
9595
const expandedRowIds = inject('expanded-row-ids', ref(new Set()));

‎src/components/CvDataTable/_CvDataTableRowInner.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
<cv-checkbox-skeleton v-if="isSkeleton" />
3030
<cv-checkbox
3131
v-else
32+
:id="`${cvId}-row-checked`"
3233
ref="rowChecked"
3334
v-model="dataChecked"
3435
:form-item="false"
@@ -43,7 +44,10 @@
4344
</td>
4445
<slot />
4546
<td v-if="hasOverflowMenu" :class="`${carbonPrefix}--table-column-menu`">
46-
<cv-overflow-menu v-bind="overflowMenuOptions">
47+
<cv-overflow-menu
48+
v-bind="overflowMenuOptions"
49+
:id="`${cvId}-overflow-menu`"
50+
>
4751
<cv-overflow-menu-item
4852
v-for="(item, index) in overflowMenuButtons"
4953
:key="`${index}`"
@@ -75,7 +79,9 @@ import {
7579
useSlots,
7680
watch,
7781
inject,
82+
useAttrs,
7883
} from 'vue';
84+
import { useCvId } from '../../use/cvId';
7985
8086
const props = defineProps({
8187
ariaLabelForBatchCheckbox: { type: String, default: undefined },
@@ -89,6 +95,9 @@ const props = defineProps({
8995
rowId: { type: String, default: undefined },
9096
});
9197
98+
const attrs = useAttrs();
99+
const cvId = useCvId(attrs, true);
100+
92101
const isSkeleton = inject('is-skeleton', ref(false));
93102
/** @type {Ref<UnwrapRef<Set<>>>} */
94103
const expandingRowIds = inject('expanding-row-ids', ref(new Set()));

‎src/components/CvMultiSelect/CvMultiSelect.vue‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@
1616
>
1717
<label
1818
v-if="title"
19-
:id="`${uid}-label`"
19+
:id="`${cvId}-label`"
2020
:class="[
2121
`${carbonPrefix}--label`,
2222
{ [`${carbonPrefix}--label--disabled`]: disabled },
2323
]"
2424
>{{ title }}</label
2525
>
2626
<div
27-
:aria-labelledby="`${uid}-label`"
27+
:aria-labelledby="`${cvId}-label`"
2828
role="listbox"
2929
tabindex="-1"
3030
:class="[
@@ -68,8 +68,8 @@
6868
:aria-disabled="disabled || null"
6969
aria-haspopup="listbox"
7070
:aria-expanded="data.open ? 'true' : 'false'"
71-
:aria-owns="uid"
72-
:aria-controls="uid"
71+
:aria-owns="cvId"
72+
:aria-controls="cvId"
7373
tabindex="0"
7474
:aria-label="data.open ? 'close menu' : 'open menu'"
7575
data-toggle="true"
@@ -105,7 +105,7 @@
105105
!internalFilter || internalFilter.length === 0,
106106
},
107107
]"
108-
:aria-controls="uid"
108+
:aria-controls="cvId"
109109
aria-autocomplete="list"
110110
role="combobox"
111111
:aria-expanded="data.open ? 'true' : 'false'"
@@ -141,9 +141,9 @@
141141
</button>
142142

143143
<div
144-
:id="uid"
144+
:id="cvId"
145145
ref="elList"
146-
:aria-labelledby="`${uid}-label`"
146+
:aria-labelledby="`${cvId}-label`"
147147
:class="`${carbonPrefix}--list-box__menu`"
148148
role="listbox"
149149
>
@@ -168,6 +168,7 @@
168168
:title="item.label"
169169
>
170170
<cv-checkbox
171+
:id="`${cvId}-cb-${item.value}`"
171172
v-model="data.selectedItems"
172173
tabindex="-1"
173174
:form-item="false"
@@ -359,7 +360,7 @@ const props = defineProps({
359360
...propsCvId,
360361
...propsTheme,
361362
});
362-
const uid = useCvId(props, true);
363+
const cvId = useCvId(props, true);
363364
const isLight = useIsLight(props);
364365
365366
const data = reactive({

‎src/components/CvPagination/CvPagination.stories.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const Template = args => ({
3030
const defaultTemplate = `
3131
<cv-pagination
3232
@change="onChange"
33+
id="pagination-story"
3334
:backward-text="backwardText"
3435
:forward-text="forwardText"
3536
:page-number-label="pageNumberLabel"

‎src/components/CvPagination/CvPagination.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<div :class="`cv-pagination ${carbonPrefix}--pagination`" data-pagination>
33
<div :class="`${carbonPrefix}--pagination__left`">
44
<cv-select
5+
:id="`${cvId}-select-page-size`"
56
ref="pageSizeSelect"
67
:class="`${carbonPrefix}--select__item-count`"
78
:label="pageSizesLabel"
@@ -29,6 +30,7 @@
2930
<div :class="`${carbonPrefix}--pagination__right`">
3031
<cv-select
3132
v-if="numberOfItems !== Infinity"
33+
:id="`${cvId}-select-page`"
3234
ref="pageSelect"
3335
:class="`${carbonPrefix}--select__page-number`"
3436
:label="pageNumberLabel"
@@ -82,10 +84,11 @@
8284

8385
<script setup>
8486
import { carbonPrefix } from '../../global/settings';
85-
import { computed, nextTick, onMounted, ref, watch } from 'vue';
87+
import { computed, nextTick, onMounted, ref, useAttrs, watch } from 'vue';
8688
import { CaretLeft16, CaretRight16 } from '@carbon/icons-vue';
8789
import CvSelect from '../CvSelect';
8890
import CvSelectOption from '../CvSelect/CvSelectOption.vue';
91+
import { useCvId } from '../../use/cvId';
8992
9093
const emit = defineEmits(['change']);
9194
@@ -101,6 +104,8 @@ const props = defineProps({
101104
page: { type: Number, default: undefined },
102105
pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
103106
});
107+
const attrs = useAttrs();
108+
const cvId = useCvId(attrs, true);
104109
105110
const firstItem = ref(1);
106111
const pageValue = ref(1);

‎vue.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ module.exports = {
88
assetFilter: function (assetFilename) {
99
return assetFilename.endsWith('min.js');
1010
},
11-
maxEntrypointSize: 300000,
12-
maxAssetSize: 300000,
11+
maxEntrypointSize: 600000,
12+
maxAssetSize: 600000,
1313
},
1414
},
1515
chainWebpack: config => {

0 commit comments

Comments
 (0)