@carbon/vue 2.39.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.39.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": "f0b00ac6c8bfaf0f92bebd7776fa5c507d86a7e2"
+  "gitHead": "1db5405c2ab7fb83019637657bc637f2fc011848"
 }

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