fix: standardize on cvId and suffixes

Author: davidnixon

src/components/CvDataTable/CvDataTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="uid" :style="tableStyle" class="cv-data-table">
+  <div :id="cvId" :style="tableStyle" class="cv-data-table">
     <div
       :class="[
         `${carbonPrefix}--data-table-container`,
@@ -55,7 +55,7 @@
           <div
             v-if="onSearch"
             ref="searchContainer"
-            :aria-labelledby="`${uid}-search`"
+            :aria-labelledby="`${cvId}-search`"
             :class="[
               `${carbonPrefix}--search `,
               {
@@ -73,20 +73,20 @@
               <Search16 :class="`${carbonPrefix}--search-magnifier-icon`" />
             </div>
             <label
-              :id="`${uid}-search`"
-              :for="`searchbox-${uid}`"
+              :id="`${cvId}-search`"
+              :for="`searchbox-${cvId}`"
               :class="`${carbonPrefix}--label`"
               >{{ searchLabel }}</label
             >
             <input
-              :id="`searchbox-${uid}`"
+              :id="`searchbox-${cvId}`"
               ref="search"
               v-model="searchValue"
               :class="`${carbonPrefix}--search-input`"
               type="text"
               role="searchbox"
               :placeholder="searchPlaceholder"
-              :aria-labelledby="`searchbox-${uid}`"
+              :aria-labelledby="`searchbox-${cvId}`"
               @input="onInternalSearch"
               @click="checkSearchExpand(true)"
               @keydown.esc.prevent="checkSearchExpand(false)"
@@ -160,7 +160,7 @@
                   <cv-checkbox-skeleton v-if="isSkeleton" />
                   <cv-checkbox
                     v-else
-                    :id="`col-cb-${uid}`"
+                    :id="`${cvId}-headingCheck`"
                     v-model="headingChecked"
                     :form-item="false"
                     value="headingCheck"
@@ -188,7 +188,7 @@
               <slot name="data">
                 <cv-data-table-row
                   v-for="(row, rowIndex) in data"
-                  :id="`${uid}-${rowIndex}`"
+                  :id="`${cvId}-${rowIndex}`"
                   :key="`row:${rowIndex}`"
                   ref="dataRows"
                   :value="`${rowIndex}`"
@@ -213,7 +213,7 @@
     <cv-pagination
       v-if="pagination"
       v-bind="internalPagination"
-      :id="`pagination-${uid}`"
+      :id="`${cvId}-pagination`"
       :number-of-items="internalNumberOfItems"
       @change="$emit('pagination', $event)"
     >
@@ -346,7 +346,7 @@ const props = defineProps({
   onSearch: { type: Function, default: undefined },
   ...propsCvId,
 });
-const uid = useCvId(props, true);
+const cvId = useCvId(props, true);
 
 const isSkeleton = ref(props.skeleton);
 provide('is-skeleton', isSkeleton);

src/components/CvDataTable/_CvDataTableRowInner.vue

@@ -29,7 +29,7 @@
       <cv-checkbox-skeleton v-if="isSkeleton" />
       <cv-checkbox
         v-else
-        :id="`row-checked-${id}`"
+        :id="`${cvId}-row-checked`"
         ref="rowChecked"
         v-model="dataChecked"
         :form-item="false"
@@ -44,7 +44,10 @@
     </td>
     <slot />
     <td v-if="hasOverflowMenu" :class="`${carbonPrefix}--table-column-menu`">
-      <cv-overflow-menu v-bind="overflowMenuOptions" :id="`om-${id}`">
+      <cv-overflow-menu
+        v-bind="overflowMenuOptions"
+        :id="`${cvId}-overflow-menu`"
+      >
         <cv-overflow-menu-item
           v-for="(item, index) in overflowMenuButtons"
           :key="`${index}`"
@@ -93,7 +96,7 @@ const props = defineProps({
 });
 
 const attrs = useAttrs();
-const id = useCvId(attrs, true);
+const cvId = useCvId(attrs, true);
 
 const isSkeleton = inject('is-skeleton', ref(false));
 /** @type {Ref<UnwrapRef<Set<>>>} */

src/components/CvMultiSelect/CvMultiSelect.vue

@@ -16,15 +16,15 @@
   >
     <label
       v-if="title"
-      :id="`${uid}-label`"
+      :id="`${cvId}-label`"
       :class="[
         `${carbonPrefix}--label`,
         { [`${carbonPrefix}--label--disabled`]: disabled },
       ]"
       >{{ title }}</label
     >
     <div
-      :aria-labelledby="`${uid}-label`"
+      :aria-labelledby="`${cvId}-label`"
       role="listbox"
       tabindex="-1"
       :class="[
@@ -68,8 +68,8 @@
         :aria-disabled="disabled || null"
         aria-haspopup="listbox"
         :aria-expanded="data.open ? 'true' : 'false'"
-        :aria-owns="uid"
-        :aria-controls="uid"
+        :aria-owns="cvId"
+        :aria-controls="cvId"
         tabindex="0"
         :aria-label="data.open ? 'close menu' : 'open menu'"
         data-toggle="true"
@@ -105,7 +105,7 @@
                   !internalFilter || internalFilter.length === 0,
               },
             ]"
-            :aria-controls="uid"
+            :aria-controls="cvId"
             aria-autocomplete="list"
             role="combobox"
             :aria-expanded="data.open ? 'true' : 'false'"
@@ -141,9 +141,9 @@
       </button>
 
       <div
-        :id="uid"
+        :id="cvId"
         ref="elList"
-        :aria-labelledby="`${uid}-label`"
+        :aria-labelledby="`${cvId}-label`"
         :class="`${carbonPrefix}--list-box__menu`"
         role="listbox"
       >
@@ -168,7 +168,7 @@
             :title="item.label"
           >
             <cv-checkbox
-              :id="`${uid}-cb-${item.value}`"
+              :id="`${cvId}-cb-${item.value}`"
               v-model="data.selectedItems"
               tabindex="-1"
               :form-item="false"
@@ -360,7 +360,7 @@ const props = defineProps({
   ...propsCvId,
   ...propsTheme,
 });
-const uid = useCvId(props, true);
+const cvId = useCvId(props, true);
 const isLight = useIsLight(props);
 
 const data = reactive({

src/components/CvPagination/CvPagination.vue

@@ -2,7 +2,7 @@
   <div :class="`cv-pagination ${carbonPrefix}--pagination`" data-pagination>
     <div :class="`${carbonPrefix}--pagination__left`">
       <cv-select
-        :id="`${id}-select-page-size`"
+        :id="`${cvId}-select-page-size`"
         ref="pageSizeSelect"
         :class="`${carbonPrefix}--select__item-count`"
         :label="pageSizesLabel"
@@ -30,7 +30,7 @@
     <div :class="`${carbonPrefix}--pagination__right`">
       <cv-select
         v-if="numberOfItems !== Infinity"
-        :id="`${id}-select-page`"
+        :id="`${cvId}-select-page`"
         ref="pageSelect"
         :class="`${carbonPrefix}--select__page-number`"
         :label="pageNumberLabel"
@@ -105,7 +105,7 @@ const props = defineProps({
   pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
 });
 const attrs = useAttrs();
-const id = useCvId(attrs, true);
+const cvId = useCvId(attrs, true);
 
 const firstItem = ref(1);
 const pageValue = ref(1);