@carbon/vue 2.38.0 → 2.40.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.0",
+  "version": "2.40.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -75,5 +75,5 @@
     "eslint-plugin-prettier": "^3.3.1",
     "vue-template-compiler": "^2.6.12"
   },
-  "gitHead": "378e7d5498d39f70b26badc2155e8e9ba4d71269"
+  "gitHead": "1db5405c2ab7fb83019637657bc637f2fc011848"
 }

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"
@@ -231,11 +237,13 @@ export default {
     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',
@@ -507,6 +515,7 @@ export default {
       } else {
         this.dataExpandAll = false;
       }
+      this.$emit('row-expanded', row);
     },
   },
 };

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"
         >
@@ -279,7 +279,7 @@ export default {
       this.onFooterButtonClick('primary-click', ev);
     },
     onSecondaryClick(ev) {
-      this.onFooterButtonClick('primary-click', ev);
+      this.onFooterButtonClick('secondary-click', ev);
     },
     onOtherBtnClick(ev) {
       this.onFooterButtonClick('other-btn-click', ev);

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-toast-notification/cv-toast-notification.vue

@@ -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',