@carbon/vue 2.38.1 → 2.42.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "2.38.1",
+  "version": "2.42.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -64,16 +64,16 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.27.0",
+    "@carbon/icons-vue": "10.41.0",
     "@carbon/telemetry": "^0.0.0-alpha.6",
-    "carbon-components": "10.30.0",
+    "carbon-components": "10.46.0",
     "flatpickr": "4.6.9",
-    "vue": "^2.6.12"
+    "vue": "^2.6.14"
   },
   "devDependencies": {
     "@vue/cli-service": "^3.11.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.6.14"
   },
-  "gitHead": "064eba8435b5ad7c556b1eaf406c7753c0c0105e"
+  "gitHead": "ab0c2e9ac8f61f208d73291274108ce5c25cb527"
 }

package/src/components/cv-button/cv-icon-button.vue

@@ -29,7 +29,7 @@ export default {
   mixins: [buttonMixin, carbonPrefixMixin],
   components: { CvSvg },
   props: {
-    label: { type: String, default: undefined },
+    label: { type: String, required: true },
     selected: Boolean,
     tipPosition: {
       type: String,

package/src/components/cv-data-table/cv-data-table.vue

@@ -85,80 +85,86 @@
         </div>
       </section>
 
-      <table
-        :class="[
-          `${carbonPrefix}--data-table`,
-          {
-            [`${carbonPrefix}--data-table--${rowSize} `]: !(rowSize.length === 0 || rowSize === 'standard'),
-            [`${carbonPrefix}--data-table--zebra `]: zebra,
-            [`${carbonPrefix}--data-table--no-border `]: borderless,
-            [`${carbonPrefix}--skeleton `]: skeleton,
-            [`${carbonPrefix}--data-table--sort `]: isSortable,
-          },
-        ]"
-      >
-        <thead>
-          <tr>
-            <th
-              v-if="hasExpandables"
-              :class="`${carbonPrefix}--table-expand`"
-              :data-previous-value="dataExpandAll ? 'collapsed' : 'expanded'"
-            >
-              <button
-                v-if="hasExpandAll"
-                :class="`${carbonPrefix}--table-expand__button`"
-                @click="toggleExpandAll"
-                type="button"
-                :aria-label="dataExpandAll ? collapseAllAriaLabel : expandAllAriaLabel"
-              >
-                <ChevronRight16 :class="`${carbonPrefix}--table-expand__svg`" />
-              </button>
-            </th>
-            <th v-if="hasBatchActions" :class="`${carbonPrefix}--table-column-checkbox`">
-              <cv-checkbox
-                :form-item="false"
-                value="headingCheck"
-                v-model="headingChecked"
-                @change="onHeadingCheckChange"
-                :label="selectAllAriaLabel"
-                hideLabel
-              />
-            </th>
-            <slot name="headings">
-              <cv-data-table-heading
-                v-for="(column, index) in columns"
-                :key="`${index}:${column}`"
-                :heading="columnHeading(column)"
-                :sortable="isColSortable(column)"
-                :order="column.order"
-                :heading-style="headingStyle(column)"
-                :skeleton="skeleton"
-              />
-            </slot>
-            <th v-if="hasOverflowMenu"></th>
-          </tr>
-        </thead>
+      <div :class="`${carbonPrefix}--data-table-content`">
+        <cv-wrapper :tagType="stickyHeader ? section : ''" :class="`${carbonPrefix}--data-table_inner-container`">
+          <table
+            :class="[
+              `${carbonPrefix}--data-table`,
+              {
+                [`${carbonPrefix}--data-table--${rowSize} `]: !(rowSize.length === 0 || rowSize === 'standard'),
+                [`${carbonPrefix}--data-table--zebra `]: zebra,
+                [`${carbonPrefix}--data-table--sticky-header `]: stickyHeader,
+                [`${carbonPrefix}--data-table--no-border `]: borderless,
+                [`${carbonPrefix}--skeleton `]: skeleton,
+                [`${carbonPrefix}--data-table--sort `]: isSortable,
+                [`${carbonPrefix}--data-table--static `]: staticWidth,
+              },
+            ]"
+          >
+            <thead>
+              <tr>
+                <th
+                  v-if="hasExpandables"
+                  :class="`${carbonPrefix}--table-expand`"
+                  :data-previous-value="dataExpandAll ? 'collapsed' : 'expanded'"
+                >
+                  <button
+                    v-if="hasExpandAll"
+                    :class="`${carbonPrefix}--table-expand__button`"
+                    @click="toggleExpandAll"
+                    type="button"
+                    :aria-label="dataExpandAll ? collapseAllAriaLabel : expandAllAriaLabel"
+                  >
+                    <ChevronRight16 :class="`${carbonPrefix}--table-expand__svg`" />
+                  </button>
+                </th>
+                <th v-if="hasBatchActions" :class="`${carbonPrefix}--table-column-checkbox`">
+                  <cv-checkbox
+                    :form-item="false"
+                    value="headingCheck"
+                    v-model="headingChecked"
+                    @change="onHeadingCheckChange"
+                    :label="selectAllAriaLabel"
+                    hideLabel
+                  />
+                </th>
+                <slot name="headings">
+                  <cv-data-table-heading
+                    v-for="(column, index) in columns"
+                    :key="`${index}:${column}`"
+                    :heading="columnHeading(column)"
+                    :sortable="isColSortable(column)"
+                    :order="column.order"
+                    :heading-style="headingStyle(column)"
+                    :skeleton="skeleton"
+                  />
+                </slot>
+                <th v-if="hasOverflowMenu"></th>
+              </tr>
+            </thead>
 
-        <cv-wrapper :tag-type="hasExpandables ? '' : 'tbody'">
-          <slot name="data">
-            <cv-data-table-row
-              v-for="(row, rowIndex) in data"
-              :key="`row:${rowIndex}`"
-              :value="`${rowIndex}`"
-              ref="dataRows"
-              :overflow-menu="overflowMenu"
-            >
-              <cv-data-table-cell
-                v-for="(cell, colIndex) in row"
-                :key="`cell:${colIndex}:${rowIndex}`"
-                :style="dataStyle(colIndex)"
-              >
-                <cv-wrapper :tag-type="skeleton ? 'span' : ''">{{ cell }}</cv-wrapper>
-              </cv-data-table-cell>
-            </cv-data-table-row>
-          </slot>
+            <cv-wrapper :tag-type="hasExpandables ? '' : 'tbody'">
+              <slot name="data">
+                <cv-data-table-row
+                  v-for="(row, rowIndex) in data"
+                  :key="`row:${rowIndex}`"
+                  :value="`${rowIndex}`"
+                  ref="dataRows"
+                  :overflow-menu="overflowMenu"
+                >
+                  <cv-data-table-cell
+                    v-for="(cell, colIndex) in row"
+                    :key="`cell:${colIndex}:${rowIndex}`"
+                    :style="dataStyle(colIndex)"
+                  >
+                    <cv-wrapper :tag-type="skeleton ? 'span' : ''">{{ cell }}</cv-wrapper>
+                  </cv-data-table-cell>
+                </cv-data-table-row>
+              </slot>
+            </cv-wrapper>
+          </table>
         </cv-wrapper>
-      </table>
+      </div>
     </div>
     <cv-pagination
       v-if="pagination"
@@ -226,16 +232,19 @@ export default {
     searchLabel: { type: String, default: 'Search' },
     searchPlaceholder: { type: String, default: 'Search' },
     searchClearLabel: { type: String, default: 'Clear search' },
+    initialSearchValue: { type: String, default: '' },
     sortable: Boolean,
     title: String,
     columns: Array,
     data: Array,
     zebra: Boolean,
+    stickyHeader: Boolean,
     rowsSelected: { type: Array, default: () => [] },
     helperText: { type: String, default: undefined },
     expandingSearch: { type: Boolean, default: true },
     skeleton: Boolean,
     hasExpandAll: Boolean,
+    staticWidth: Boolean,
   },
   model: {
     prop: 'rows-selected',
@@ -250,7 +259,7 @@ export default {
       batchActive: false,
       headingChecked: false,
       dataRowsSelected: this.rowsSelected,
-      searchValue: '',
+      searchValue: this.initialSearchValue,
       clearSearchVisible: false,
       searchActive: false,
       registeredRows: [],
@@ -507,6 +516,7 @@ export default {
       } else {
         this.dataExpandAll = false;
       }
+      this.$emit('row-expanded', row);
     },
   },
 };

package/src/components/cv-date-picker/cv-date-picker.vue

@@ -81,16 +81,6 @@ import { uidMixin, themeMixin, carbonPrefixMixin } from '../../mixins';
 import Calendar16 from '@carbon/icons-vue/es/calendar/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
 
-// Weekdays shorthand for english locale
-l10n.en.weekdays.shorthand.forEach((day, index) => {
-  const currentDay = l10n.en.weekdays.shorthand;
-  if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
-    currentDay[index] = 'Th';
-  } else {
-    currentDay[index] = currentDay[index].charAt(0);
-  }
-});
-
 export default {
   name: 'CvDatePicker',
   mixins: [uidMixin, themeMixin, carbonPrefixMixin],
@@ -338,6 +328,17 @@ export default {
       this.$refs.todate.click();
     },
   },
+  created() {
+    // Weekdays shorthand for english locale
+    l10n.en.weekdays.shorthand.forEach((day, index) => {
+      const currentDay = l10n.en.weekdays.shorthand;
+      if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
+        currentDay[index] = 'Th';
+      } else {
+        currentDay[index] = currentDay[index].charAt(0);
+      }
+    });
+  },
   mounted() {
     this.initFlatpickr();
     this.checkSlots();

package/src/components/cv-file-uploader/cv-file-uploader.vue

@@ -32,6 +32,7 @@
             v-if="kind !== 'button'"
             v-bind="$attrs"
             type="file"
+            :accept="accept"
             :class="`${carbonPrefix}--file-input`"
             :id="uid"
             data-file-uploader
@@ -45,6 +46,7 @@
         v-if="kind === 'button'"
         v-bind="$attrs"
         type="file"
+        :accept="accept"
         :class="`${carbonPrefix}--file-input`"
         :id="uid"
         data-file-uploader
@@ -140,6 +142,7 @@ export default {
     },
     label: String,
     helperText: String,
+    accept: String,
     initialStateUploading: Boolean,
     removable: Boolean,
     buttonLabel: {
@@ -210,12 +213,19 @@ export default {
     },
     addFiles(files) {
       for (const file of files) {
-        this.internalFiles.push({
+        const internalFile = {
           state: this.initialStateUploading ? STATES.UPLOADING : STATES.NONE,
           file,
           invalidMessageTitle: '',
           invalidMessage: '',
-        });
+        };
+
+        if (file.messageBundle) {
+          internalFile.invalidMessageTitle = file.messageBundle.invalidMessageTitle;
+          internalFile.invalidMessage = file.messageBundle.invalidMessage;
+          delete file.messageBundle;
+        }
+        this.internalFiles.push(internalFile);
       }
       this.$emit('change', this.internalFiles);
     },
@@ -241,32 +251,55 @@ export default {
       this.internalFiles[index].invalidMessage = message;
     },
     onDragEvent(evt) {
-      // NOTE: Validation of dragged files is not currently done.
-      // It may be possible to do this here or defer to the caller.
-      // It is certainly possible for the user to remove files after they are dropped.
+      if (Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') === -1) {
+        return;
+      }
 
-      if (Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') >= 0) {
-        if (evt.type === 'dragover') {
-          evt.preventDefault();
-          const dropEffect = 'copy';
-          if (Array.isArray(evt.dataTransfer.types)) {
-            try {
-              // IE11 throws a "permission denied" error accessing `.effectAllowed`
-              evt.dataTransfer.effectAllowed = dropEffect;
-            } catch (e) {
-              // ignore
-            }
+      if (evt.type === 'dragleave') {
+        this.allowDrop = false;
+        return;
+      }
+
+      if (evt.type === 'dragover') {
+        evt.preventDefault();
+        const dropEffect = 'copy';
+        if (Array.isArray(evt.dataTransfer.types)) {
+          try {
+            // IE11 throws a "permission denied" error accessing `.effectAllowed`
+            evt.dataTransfer.effectAllowed = dropEffect;
+          } catch (e) {
+            // ignore
           }
-          evt.dataTransfer.dropEffect = dropEffect;
-          this.allowDrop = true;
         }
-        if (evt.type === 'dragleave') {
-          this.allowDrop = false;
+        evt.dataTransfer.dropEffect = dropEffect;
+        this.allowDrop = true;
+      }
+
+      if (evt.type === 'drop') {
+        evt.preventDefault();
+        if (this.accept) {
+          this.markInvalidFileTypes(evt.dataTransfer.files);
         }
-        if (evt.type === 'drop') {
-          evt.preventDefault();
-          this.addFiles(evt.dataTransfer.files);
-          this.allowDrop = false;
+        this.addFiles(evt.dataTransfer.files);
+        this.allowDrop = false;
+      }
+    },
+    markInvalidFileTypes(files) {
+      const isFileAllowed = file => {
+        const extension = '.' + file.name.split('.').pop();
+        const allowed = this.accept.split(',').map(x => x.trim());
+        if (allowed.includes('.jpg')) {
+          allowed.push('.jpeg');
+        }
+        return allowed.includes(file.type) || allowed.includes(extension);
+      };
+
+      for (const file of files) {
+        if (!isFileAllowed(file)) {
+          file.messageBundle = {
+            invalidMessageTitle: 'Invalid file type',
+            invalidMessage: `"${file.name}" does not have a valid file type.`,
+          };
         }
       }
     },

package/src/components/cv-inline-notification/cv-inline-notification.vue

@@ -34,6 +34,7 @@
       {{ actionLabel }}
     </button>
     <button
+      v-if="!hideCloseButton"
       type="button"
       :aria-label="closeAriaLabel"
       data-notification-btn
@@ -66,6 +67,7 @@ export default {
       validator: val => ['error', 'info', 'warning', 'success'].includes(val),
     },
     lowContrast: Boolean,
+    hideCloseButton: Boolean,
   },
   computed: {
     icon() {

package/src/components/cv-modal/cv-modal.vue

@@ -71,7 +71,7 @@
           :disabled="primaryButtonDisabled"
           type="button"
           :kind="primaryKind"
-          @click="() => onPrimaryClick"
+          @click="onPrimaryClick"
           v-if="hasPrimary"
           ref="primary"
         >

package/src/components/cv-multi-select/cv-multi-select.vue

@@ -131,6 +131,7 @@
               :name="item.name"
               :data-test="item.name"
               :label="item.label"
+              :disabled="item.disabled"
               style="pointer-events: none;"
             />
           </div>
@@ -407,7 +408,9 @@ export default {
     onEnter() {
       if (this.open) {
         this.onItemClick(this.highlighted);
-        this.$refs.input.focus();
+        if (this.$refs.input) {
+          this.$refs.input.focus();
+        }
         this.filter = '';
 
         this.doOpen(false);
@@ -446,17 +449,20 @@ export default {
       this.highlighted = val;
     },
     onItemClick(val) {
-      const index = this.dataValue.findIndex(item => val === item);
-      if (index > -1) {
-        this.dataValue.splice(index, 1);
-      } else {
-        this.dataValue.push(val);
-      }
-      if (this.selectionFeedback === selectionFeedbackOptions[TOP]) {
-        this.updateOptions();
+      const option = this.options.find(item => item.value === val);
+      if (option && !option.disabled) {
+        const index = this.dataValue.findIndex(item => val === item);
+        if (index > -1) {
+          this.dataValue.splice(index, 1);
+        } else {
+          this.dataValue.push(val);
+        }
+        if (this.selectionFeedback === selectionFeedbackOptions[TOP]) {
+          this.updateOptions();
+        }
+        this.$refs.button.focus();
+        this.$emit('change', this.dataValue);
       }
-      this.$refs.button.focus();
-      this.$emit('change', this.dataValue);
     },
     inputClick() {
       if (!this.open) {

package/src/components/cv-progress/cv-progress-step.vue

@@ -18,6 +18,7 @@
       :class="[`${carbonPrefix}--progress-label`, { [`${carbonPrefix}--progress-label-overflow`]: showOverflow }]"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
+      @click="$emit('step-clicked', $event)"
       ref="label"
     >
       {{ label }}

package/src/components/cv-progress/cv-progress.vue

@@ -11,6 +11,7 @@
         :label="step"
         :complete="initialStep > index"
         ref="steps"
+        @step-clicked="$emit('step-clicked', $event)"
       />
     </slot>
   </ul>

package/src/components/cv-tabs/cv-tabs.vue

@@ -196,7 +196,7 @@ export default {
     },
     doScrollIntoView(index) {
       const tab = this.$refs.link[index];
-      const scrollContainer = tab.parentNode ? tab.parentNode.parentNode : null;
+      const scrollContainer = tab && tab.parentNode ? tab.parentNode.parentNode : null;
       let newScrollLeft;
 
       if (tab && scrollContainer) {

package/src/components/cv-toast-notification/cv-toast-notification.vue

@@ -2,7 +2,7 @@
   <div
     data-notification
     :class="[
-      `cv-notifiation ${carbonPrefix}--toast-notification`,
+      `cv-notification ${carbonPrefix}--toast-notification`,
       `${carbonPrefix}--toast-notification--${kind.toLowerCase()}`,
       { [`${carbonPrefix}--toast-notification--low-contrast`]: lowContrast },
     ]"
@@ -17,6 +17,7 @@
       <p :class="`${carbonPrefix}--toast-notification__caption`" v-html="caption"></p>
     </div>
     <button
+      v-if="!hideCloseButton"
       :aria-label="closeAriaLabel"
       type="button"
       data-notification-btn
@@ -43,6 +44,7 @@ export default {
   props: {
     caption: String,
     closeAriaLabel: { type: String, default: 'Dismiss notification' },
+    hideCloseButton: Boolean,
     kind: {
       type: String,
       default: 'info',