@carbon/vue 3.0.9-alpha.0 → 3.0.10

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.vue

@@ -59,7 +59,7 @@
             [`${carbonPrefix}--dropdown--inline`]: inline,
           },
         ]"
-        :data-invalid="data.isInvalid"
+        :data-invalid="data.isInvalid || null"
         :data-value="dataValue"
         data-dropdown
         v-bind="$attrs"
@@ -115,12 +115,9 @@
           tabindex="-1"
         >
           <slot>
-            <cv-dropdown-item
-              v-for="item in items"
-              v-bind:key="item"
-              :value="item"
-              >{{ item }}</cv-dropdown-item
-            >
+            <cv-dropdown-item v-for="item in items" :key="item" :value="item">{{
+              item
+            }}</cv-dropdown-item>
           </slot>
         </ul>
       </div>
@@ -205,11 +202,12 @@ const props = defineProps({
       }
       return arr;
     },
+    default: () => [],
   },
   /**
    * Generic label that will be used as the textual representation of what this field is for
    */
-  label: String,
+  label: { type: String, default: undefined },
   /**
    * Value shown when nothing has been selected
    */
@@ -233,7 +231,7 @@ const props = defineProps({
   /**
    * Render with a value already selected. Available as `v-model:value`.
    */
-  value: String,
+  value: { type: String, default: undefined },
   /**
    * Provide the text that is displayed and put the control in warning state
    */

package/src/components/CvDropdown/CvDropdownItem.vue

@@ -20,10 +20,10 @@
     role="menuitem"
   >
     <a
+      ref="link"
       :aria-checked="dataSelected"
       :class="`${carbonPrefix}--dropdown-link`"
       href="javascript:void(0)"
-      ref="link"
       role="menuitemradio"
       tabindex="-1"
     >

package/src/components/CvFileUploader/CvFileUploader.stories.mdx

@@ -48,7 +48,7 @@ const skeletonTemplate = `
   </div>
 `;
 
-export const args = {
+export const argTypes = {
   // attributes
   multiple: {
     type: 'boolean',
@@ -61,6 +61,7 @@ export const args = {
   // props
   accept: {
     type: 'string',
+    defaultValue: '.jpg,.png',
     table: {
       type: { summary: 'string' },
       category: 'props',
@@ -106,6 +107,14 @@ export const args = {
     },
     description: 'Reset file list when files are added',
   },
+  disabled: {
+    type: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+      category: 'props',
+    },
+    description: 'Disables input',
+  },
   dropTargetLabel: {
     type: 'string',
     table: {
@@ -122,6 +131,14 @@ export const args = {
     },
     description: 'Helper text positioned below label',
   },
+  initialStateUploading: {
+    type: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+      category: 'props',
+    },
+    description: 'Set "UPLOADING" state to new files',
+  },
   kind: {
     type: 'string',
     control: 'select',
@@ -235,7 +252,7 @@ Migration notes:
       helperText: 'Select the files you want to upload',
       removable: true,
     }}
-    argTypes={args}
+    argTypes={argTypes}
   >
     {Template.bind({})}
   </Story>
@@ -263,11 +280,12 @@ Migration notes:
       helperText: 'Select the files you want to upload',
       kind: KINDS.BUTTON,
       removable: true,
+      dropTargetLabel: 'Add file',
     }}
     argTypes={{
-      ...args,
+      ...argTypes,
       kind: {
-        ...args.kind,
+        ...argTypes.kind,
         control: 'none',
       },
     }}
@@ -299,9 +317,9 @@ Migration notes:
       removable: true,
     }}
     argTypes={{
-      ...args,
+      ...argTypes,
       kind: {
-        ...args.kind,
+        ...argTypes.kind,
         control: 'none',
       },
     }}