@carbon/vue 3.0.9 → 3.0.11

package/src/components/CvDataTable/CvDataTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="tableStyle" class="cv-data-table" :id="uid">
+  <div :id="uid" :style="tableStyle" class="cv-data-table">
     <div
       :class="[
         `${carbonPrefix}--data-table-container`,
@@ -10,7 +10,7 @@
       ]"
     >
       <div v-if="hasTableHeader" :class="`${carbonPrefix}--data-table-header`">
-        <h4 :class="`${carbonPrefix}--data-table-header__title`" v-if="title">
+        <h4 v-if="title" :class="`${carbonPrefix}--data-table-header__title`">
           {{ title }}
         </h4>
         <p
@@ -22,8 +22,8 @@
       </div>
       <section v-if="hasToolbar" :class="`${carbonPrefix}--table-toolbar`">
         <div
-          :aria-hidden="!batchActive"
           v-show="hasBatchActions"
+          :aria-hidden="`${!batchActive}`"
           :class="[
             `${carbonPrefix}--batch-actions`,
             { [`${carbonPrefix}--batch-actions--active`]: batchActive },
@@ -44,7 +44,7 @@
               <span data-items-selected>
                 <slot
                   name="items-selected"
-                  v-bind:scope="{ count: dataRowsSelected.length }"
+                  :scope="{ count: dataRowsSelected.length }"
                   >{{ dataRowsSelected.length }} items selected</slot
                 >
               </span>
@@ -54,6 +54,7 @@
         <div :class="`${carbonPrefix}--toolbar-content`">
           <div
             v-if="onSearch"
+            ref="searchContainer"
             :aria-labelledby="`${uid}-search`"
             :class="[
               `${carbonPrefix}--search `,
@@ -67,9 +68,8 @@
               },
             ]"
             role="search"
-            ref="searchContainer"
           >
-            <div :class="`${carbonPrefix}--search-magnifier`" ref="magnifier">
+            <div ref="magnifier" :class="`${carbonPrefix}--search-magnifier`">
               <Search16 :class="`${carbonPrefix}--search-magnifier-icon`" />
             </div>
             <label
@@ -79,14 +79,14 @@
               >{{ searchLabel }}</label
             >
             <input
+              :id="`searchbox-${uid}`"
+              ref="search"
+              v-model="searchValue"
               :class="`${carbonPrefix}--search-input`"
               type="text"
-              :id="`searchbox-${uid}`"
               role="searchbox"
               :placeholder="searchPlaceholder"
               :aria-labelledby="`searchbox-${uid}`"
-              ref="search"
-              v-model="searchValue"
               @input="onInternalSearch"
               @click="checkSearchExpand(true)"
               @keydown.esc.prevent="checkSearchExpand(false)"
@@ -103,8 +103,8 @@
               ]"
               :title="searchClearLabel"
               :aria-label="searchClearLabel"
-              @click="onClearClick"
               type="button"
+              @click="onClearClick"
             >
               <Close16 />
             </button>
@@ -141,11 +141,11 @@
                   <button
                     v-if="hasExpandAll"
                     :class="`${carbonPrefix}--table-expand__button`"
-                    @click="toggleExpandAll"
                     type="button"
                     :aria-label="
                       dataExpandAll ? collapseAllAriaLabel : expandAllAriaLabel
                     "
+                    @click="toggleExpandAll"
                   >
                     <ChevronRight16
                       :class="`${carbonPrefix}--table-expand__svg`"
@@ -158,12 +158,12 @@
                   :class="`${carbonPrefix}--table-column-checkbox`"
                 >
                   <cv-checkbox
+                    v-model="headingChecked"
                     :form-item="false"
                     value="headingCheck"
-                    v-model="headingChecked"
-                    @change="onHeadingCheckChange"
                     :label="selectAllAriaLabel"
-                    hideLabel
+                    hide-label
+                    @change="onHeadingCheckChange"
                   />
                 </th>
                 <slot name="headings">
@@ -186,8 +186,8 @@
                 <cv-data-table-row
                   v-for="(row, rowIndex) in data"
                   :key="`row:${rowIndex}`"
-                  :value="`${rowIndex}`"
                   ref="dataRows"
+                  :value="`${rowIndex}`"
                   :overflow-menu="overflowMenu"
                 >
                   <cv-data-table-cell
@@ -212,12 +212,12 @@
       :number-of-items="internalNumberOfItems"
       @change="$emit('pagination', $event)"
     >
-      <template v-slot:range-text="{ scope }">
-        <slot name="range-text" v-bind:scope="scope" />
+      <template #range-text="{ scope }">
+        <slot name="range-text" :scope="scope" />
       </template>
 
-      <template v-slot:of-n-pages="{ scope }">
-        <slot name="of-n-pages" v-bind:scope="scope"></slot>
+      <template #of-n-pages="{ scope }">
+        <slot name="of-n-pages" :scope="scope"></slot>
       </template>
     </cv-pagination>
   </div>
@@ -316,7 +316,7 @@ const props = defineProps({
    * can be sorted
    */
   sortable: { type: Boolean, default: false },
-  title: String,
+  title: { type: String, default: undefined },
   /**
    * An array containing a list of columns
    * - Columns can be string labels or objects
@@ -326,11 +326,11 @@ const props = defineProps({
    *   - Optionally a dataStyle object to be applied to the data in the column.
    *   - Optionally a sortable property - if any column sets this to true then only columns with sortable set to true are sortable. NOTE: table sortable property not required.
    */
-  columns: Array,
+  columns: { type: Array, default: () => [] },
   /**
    * Two-dimensional array of strings.
    */
-  data: Array,
+  data: { type: Array, default: () => [] },
   /**
    * the table striped
    */
@@ -351,7 +351,7 @@ const props = defineProps({
    * Use a width of 'auto' instead of 100%
    */
   staticWidth: { type: Boolean, default: false },
-  onSearch: { type: Function },
+  onSearch: { type: Function, default: undefined },
   ...propsCvId,
 });
 const uid = useCvId(props, true);
@@ -554,7 +554,8 @@ const clearSearchVisible = ref(false);
 function onClearClick() {
   searchValue.value = '';
   clearSearchVisible.value = false;
-  emit('search', searchValue.value);
+  // eslint-disable-next-line vue/require-explicit-emits
+  emit('search', searchValue.value); // see comment above in defineEmits
   nextTick(() => {
     search.value?.focus();
   });
@@ -608,22 +609,23 @@ function onMenuItemClick(val) {
 }
 function onInternalSearch() {
   clearSearchVisible.value = searchValue.value.length > 0;
+  // eslint-disable-next-line vue/require-explicit-emits
   emit('search', searchValue.value);
 }
 function onSort(payload) {
-  const { heading, val } = payload;
+  const { heading, value } = payload;
   const headings = store.headings(uid);
   let index;
   for (let colIndex in headings) {
     const column = headings[colIndex];
     if (column.id === heading.id) {
-      store.updateHeading(uid, { ...column, order: val });
+      store.updateHeading(uid, { ...column, order: value });
       index = colIndex;
     } else {
       store.updateHeading(uid, { ...column, order: 'none' });
     }
   }
-  emit('sort', { index, order: val, name: heading.name });
+  emit('sort', { index, order: value, name: heading.name });
 }
 
 // are all rows expanded

package/src/components/CvDataTable/CvDataTableHeading.vue

@@ -1,13 +1,13 @@
 <template>
   <th
-    :aria-sort="internalOrder"
-    :style="skeleton && headingStyle"
     :id="cvId"
     ref="el"
+    :aria-sort="internalOrder"
+    :style="skeleton && headingStyle"
   >
     <button
-      type="button"
       v-if="sortable"
+      type="button"
       :class="[
         `${carbonPrefix}--table-sort`,
         {
@@ -17,8 +17,8 @@
             internalOrder === 'ascending',
         },
       ]"
-      @click="onSortClick"
       :style="headingStyle"
+      @click="onSortClick"
     >
       <component
         :is="headingLabelTag"
@@ -30,8 +30,8 @@
       <Arrows16 :class="`${carbonPrefix}--table-sort__icon-unsorted`" />
     </button>
     <component
-      v-else
       :is="headingLabelTag"
+      v-else
       :class="`${carbonPrefix}--table-header-label`"
       :style="headingStyle"
     >
@@ -56,13 +56,13 @@ const nextOrder = {
   none: 'ascending',
 };
 const props = defineProps({
-  dataStyle: Object,
-  heading: String,
-  name: String,
+  dataStyle: { type: Object, default: undefined },
+  heading: { type: String, default: undefined },
+  name: { type: String, default: undefined },
   sortable: Boolean,
   order: { type: String, default: 'none' },
   skeleton: Boolean,
-  headingStyle: Object,
+  headingStyle: { type: Object, default: undefined },
   ...propsCvId,
 });
 const cvId = useCvId(props, true);

package/src/components/CvDataTable/CvDataTableRow.vue

@@ -1,17 +1,17 @@
 <template>
   <tbody
     v-if="dataSomeExpandingRows"
-    class="cv-data-table-row cv-data-table-row--expandable"
     :id="cvId"
+    class="cv-data-table-row cv-data-table-row--expandable"
   >
     <cv-data-table-row-inner
       ref="row"
-      :rowId="cvId"
+      :row-id="cvId"
       v-bind="$attrs"
       :expanding-row="dataExpandable"
+      :expanded="dataExpanded"
       @expanded-change="onExpandedChange"
       @checked-change="onCheckedChange"
-      :expanded="dataExpanded"
     >
       <slot />
     </cv-data-table-row-inner>
@@ -29,11 +29,11 @@
   </tbody>
   <cv-data-table-row-inner
     v-else
-    ref="row"
     v-bind="$attrs"
-    class="cv-data-table-row"
     :id="cvId"
-    :rowId="cvId"
+    ref="row"
+    class="cv-data-table-row"
+    :row-id="cvId"
     @checked-change="onCheckedChange"
   >
     <slot />

package/src/components/CvDataTable/CvDataTableSkeleton.vue

@@ -1,14 +1,14 @@
 <template>
   <cv-data-table skeleton :data="data" :columns="cols" v-bind="$attrs">
-    <template v-if="hasHelperText" v-slot:helper-text>
+    <template v-if="hasHelperText" #helper-text>
       <slot name="helper-text" />
     </template>
 
-    <template v-if="hasBatchActions" v-slot:batch-actions>
+    <template v-if="hasBatchActions" #batch-actions>
       <slot name="batch-actions" />
     </template>
 
-    <template v-if="hasActions" v-slot:actions>
+    <template v-if="hasActions" #actions>
       <slot name="actions" />
     </template>
   </cv-data-table>

package/src/components/CvDataTable/_CvDataTableRowInner.vue

@@ -15,9 +15,9 @@
       <button
         v-if="expandingRow"
         :class="`${carbonPrefix}--table-expand__button`"
-        @click="toggleExpand"
         type="button"
         :aria-label="dataExpanded ? ariaLabelCollapseRow : ariaLabelExpandRow"
+        @click="toggleExpand"
       >
         <ChevronRight16 :class="`${carbonPrefix}--table-expand__svg`" />
       </button>
@@ -28,16 +28,16 @@
       :class="`${carbonPrefix}--table-column-checkbox`"
     >
       <cv-checkbox
+        ref="rowChecked"
+        v-model="dataChecked"
         :form-item="false"
         :value="value"
         :inline="true"
-        v-model="dataChecked"
-        @change="onChange"
-        ref="rowChecked"
         :label="
           ariaLabelForBatchCheckbox || `Select row ${value} for batch action`
         "
-        hideLabel
+        hide-label
+        @change="onChange"
       />
     </td>
     <slot />
@@ -71,15 +71,15 @@ import store from './cvDataTableStore';
 import { getBus } from '../../global/component-utils/event-bus';
 
 const props = defineProps({
-  ariaLabelForBatchCheckbox: String,
+  ariaLabelForBatchCheckbox: { type: String, default: undefined },
   checked: Boolean,
   expanded: Boolean,
   expandingRow: Boolean,
   ariaLabelExpandRow: { type: String, default: 'Expand current row' },
   ariaLabelCollapseRow: { type: String, default: 'Collapse current row' },
-  overflowMenu: Array,
-  value: String,
-  rowId: String,
+  overflowMenu: { type: Array, default: () => [] },
+  value: { type: String, default: undefined },
+  rowId: { type: String, default: undefined },
 });
 
 const dataSomeExpandingRows = computed(() => {

package/src/components/CvDatePicker/CvDatePicker.vue

@@ -1,10 +1,12 @@
 <template>
   <cv-wrapper
+    :id="cvId"
     :tag-type="formItem ? 'div' : ''"
     :class="`cv-date-picker ${carbonPrefix}--form-item`"
-    :id="cvId"
   >
     <div
+      :id="formItem ? undefined : cvId"
+      ref="dateWrapper"
       :data-date-picker="['single', 'range'].includes(getKind)"
       :data-date-picker-type="getKind"
       :class="[
@@ -15,8 +17,6 @@
           'cv-date-picker': !formItem,
         },
       ]"
-      ref="dateWrapper"
-      :id="formItem ? undefined : cvId"
     >
       <div
         :class="{
@@ -36,6 +36,7 @@
         </label>
         <div :class="`${carbonPrefix}--date-picker-input__wrapper`">
           <input
+            :id="`${cvId}-input-1`"
             ref="date"
             type="text"
             data-date-picker-input
@@ -43,7 +44,6 @@
             :data-invalid="isInvalid || null"
             :disabled="disabled"
             :data-date-picker-input-from="getKind === 'range'"
-            :id="`${cvId}-input-1`"
             :class="`${carbonPrefix}--date-picker__input`"
             :pattern="pattern"
             :placeholder="placeholder"
@@ -57,7 +57,7 @@
           />
         </div>
 
-        <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
+        <div v-if="isInvalid" :class="`${carbonPrefix}--form-requirement`">
           <slot name="invalid-message">{{ invalidMessage }}</slot>
         </div>
       </div>
@@ -82,6 +82,7 @@
           @click="calendar.open()"
         >
           <input
+            :id="`${cvId}-input-2`"
             ref="todate"
             type="text"
             data-date-picker-input
@@ -89,7 +90,6 @@
             :data-date-picker-input-to="kind === 'range'"
             :data-invalid="isInvalid || null"
             :disabled="disabled"
-            :id="`${cvId}-input-2`"
             :class="`${carbonPrefix}--date-picker__input`"
             :pattern="pattern"
             :placeholder="placeholder"
@@ -100,7 +100,7 @@
             data-date-picker-icon
           />
         </div>
-        <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
+        <div v-if="isInvalid" :class="`${carbonPrefix}--form-requirement`">
           <span id="invalid-message-placeholder"></span>
         </div>
       </div>
@@ -142,12 +142,12 @@ const isLight = useIsLight(props);
 let calendar;
 
 const props = defineProps({
-  modelValue: [String, Object, Array, Date],
+  modelValue: { type: [String, Object, Array, Date], default: undefined },
   dateLabel: { type: String, default: undefined },
   dateEndLabel: { type: String, default: 'End date' },
   invalid: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
-  invalidMessage: { type: String },
+  invalidMessage: { type: String, default: undefined },
   pattern: { type: String, default: '\\d{1,2}/\\d{1,2}/\\d{4}' },
   placeholder: { type: String, default: 'mm/dd/yyyy' },
   calOptions: {
@@ -164,7 +164,7 @@ const props = defineProps({
     default: 'simple',
     validator: val => ['short', 'simple', 'single', 'range'].includes(val),
   },
-  value: [String, Object, Array, Date],
+  value: { type: [String, Object, Array, Date], default: undefined },
   ...propsCvId,
   ...propsCvTheme,
 });

package/src/components/CvDatePicker/CvDatePickerSkeleton.vue

@@ -1,10 +1,12 @@
 <template>
   <cv-wrapper
+    :id="cvId"
     :tag-type="formItem ? 'div' : ''"
     :class="`cv-date-picker ${carbonPrefix}--form-item`"
-    :id="cvId"
   >
     <div
+      :id="formItem ? undefined : cvId"
+      ref="dateWrapper"
       :data-date-picker="['single', 'range'].includes(getKind)"
       :data-date-picker-type="getKind"
       :class="[
@@ -14,8 +16,6 @@
           'cv-date-picker': !formItem,
         },
       ]"
-      ref="dateWrapper"
-      :id="formItem ? undefined : cvId"
     >
       <div
         class="inputWrapper"

package/src/components/CvDropdown/CvDropdown.stories.mdx

@@ -49,7 +49,7 @@ const defaultTemplate = `
 <cv-dropdown
   :light="light"
   :placeholder="placeholder"
-  :value="value"
+  :modelValue="modelValue"
   :up="up"
   :inline="inline"
   :helper-text="helperText"
@@ -71,7 +71,7 @@ const defaultTemplate = `
 const slotsTemplate = `
 <div :style="{width: '300px'}">
 <cv-dropdown
-  v-model:value="myValue"
+  v-model="myValue"
   :light="light"
   :placeholder="placeholder"
   :up="up"
@@ -101,7 +101,7 @@ const itemsTemplate = `
 <cv-dropdown
   :light="light"
   :placeholder="placeholder"
-  :value="value"
+  :modelValue="modelValue"
   :up="up"
   :inline="inline"
   :helper-text="helperText"
@@ -119,7 +119,7 @@ const itemsTemplate = `
 const vmodelTemplate = `
 <div :style="{width: '300px'}">
 <cv-dropdown
-  v-model:value="myValue"
+  v-model="myValue"
   :label="label"
   :placeholder="placeholder"
   @change="onChange">
@@ -151,10 +151,7 @@ Notes:
 
 - You can place a Dropdown inline with other content by using the inline variant
   Migration notes:
-
-- The `v-model` is different in Vue 3 than Vue 2. You can still specify the `v-model=something` to control the visibility but
-  if you specify it like this you will see a deprecation message in the log. Please use `v-model:value=something` instead.
-- Add the `size` option to match Carbon React
+- Added the `size` option to match Carbon React
 - Added the `warningMessage` option to match Carbon React
 
 <Canvas>
@@ -168,21 +165,16 @@ Notes:
           'template',
           'change',
           'update:modelValue',
-          'update:value',
           'helper-text',
           'invalid-message',
           'warning-message',
           'internal-caption',
-          'modelValue',
         ],
       },
       docs: { source: { code: defaultTemplate } },
     }}
     args={{
       template: defaultTemplate,
-      props: {
-        modelValue: undefined,
-      },
       label: 'Characters',
       placeholder: 'Choose an ally',
       helperText: 'May the force be with you',
@@ -273,7 +265,6 @@ Notes:
           'template',
           'change',
           'update:modelValue',
-          'update:value',
           'helper-text',
           'invalid-message',
           'warning-message',
@@ -316,32 +307,7 @@ Notes:
     name="v-model"
     parameters={{
       controls: {
-        exclude: [
-          'props',
-          'default',
-          'template',
-          'change',
-          'update:modelValue',
-          'update:value',
-          'helper-text',
-          'invalid-message',
-          'warning-message',
-          'internal-caption',
-          'modelValue',
-          'ariaLabel',
-          'disabled',
-          'formItem',
-          'helperText',
-          'hideSelected',
-          'inline',
-          'invalidMessage',
-          'items',
-          'label',
-          'placeholder',
-          'size',
-          'up',
-          'value',
-          'warningMessage',
+        include: [
         ],
       },
       docs: { source: { code: vmodelTemplate } },
@@ -367,32 +333,7 @@ Notes:
     name="skeleton"
     parameters={{
       controls: {
-        exclude: [
-          'props',
-          'default',
-          'template',
-          'change',
-          'update:modelValue',
-          'update:value',
-          'helper-text',
-          'invalid-message',
-          'warning-message',
-          'internal-caption',
-          'modelValue',
-          'ariaLabel',
-          'disabled',
-          'formItem',
-          'helperText',
-          'hideSelected',
-          'invalidMessage',
-          'items',
-          'label',
-          'placeholder',
-          'size',
-          'up',
-          'value',
-          'warningMessage',
-          'inline',
+        include: [
         ],
       },
       docs: { source: { code: skeletonTemplate } },