@carbon/vue 2.39.0 → 2.40.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.40.0
+
+feat: CvFileUploader mark dropped files of the wrong type as invalid
+feat: CvInlineNotification add ability to hide close button
+feat: CvToastNotification add ability to hide close button
+
 ## 2.39.0
 
 feat: emit event on progress step click

package/dist/carbon-vue.common.js

@@ -9475,17 +9475,17 @@ var ErrorFilled20 = Object(_utils_e280d4a4_js__WEBPACK_IMPORTED_MODULE_0__[/* c
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"474a3f54-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/cv-file-uploader/cv-file-uploader.vue?vue&type=template&id=73e9f6bf&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"474a3f54-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/cv-file-uploader/cv-file-uploader.vue?vue&type=template&id=0c045fc0&
 var render = function () {
 var _obj;
 var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('cv-form-item',{staticClass:"cv-file-uploader"},[_c('p',{class:(_vm.carbonPrefix + "--file--label")},[_vm._v(_vm._s(_vm.label))]),_c('p',{class:(_vm.carbonPrefix + "--label-description")},[_vm._v(_vm._s(_vm.helperText))]),_c('div',{class:(_vm.carbonPrefix + "--file"),attrs:{"data-file":""}},[_c('label',{ref:"focusTarget",class:[
-        ( _obj = {}, _obj[(_vm.carbonPrefix + "--file-browse-btn")] = _vm.kind !== 'button', _obj[(_vm.carbonPrefix + "--btn")] = _vm.kind === 'button', _obj[(_vm.carbonPrefix + "--btn--primary")] = _vm.kind === 'button', _obj ) ],attrs:{"for":_vm.uid,"role":"button","tabindex":"0"},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();return _vm.onShow()},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }$event.preventDefault();}],"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }$event.preventDefault();return _vm.onShow()}}},[_c('cv-wrapper',{class:(_vm.carbonPrefix + "--file__drop-container" + _vm.allowDropClass),attrs:{"tag-type":_vm.kind !== 'button' ? 'div' : '',"data-file-drop-container":""},on:{"dragover":_vm.onDragEvent,"dragleave":_vm.onDragEvent,"drop":_vm.onDragEvent}},[_vm._t("drop-target",[_vm._v(_vm._s(_vm.internalDropTargetLabel))]),(_vm.kind !== 'button')?_c('input',_vm._g(_vm._b({ref:"file-input",class:(_vm.carbonPrefix + "--file-input"),attrs:{"type":"file","id":_vm.uid,"data-file-uploader":"","data-target":"[data-file-container]"}},'input',_vm.$attrs,false),_vm.inputListeners)):_vm._e()],2)],1),(_vm.kind === 'button')?_c('input',_vm._g(_vm._b({ref:"file-input",class:(_vm.carbonPrefix + "--file-input"),attrs:{"type":"file","id":_vm.uid,"data-file-uploader":"","data-target":"[data-file-container]"}},'input',_vm.$attrs,false),_vm.inputListeners)):_vm._e(),_c('div',{class:(_vm.carbonPrefix + "--file-container"),attrs:{"data-file-container":""}},_vm._l((_vm.internalFiles),function(file,index){return _c('div',{key:index,class:_vm.isInvalid(index)
+        ( _obj = {}, _obj[(_vm.carbonPrefix + "--file-browse-btn")] = _vm.kind !== 'button', _obj[(_vm.carbonPrefix + "--btn")] = _vm.kind === 'button', _obj[(_vm.carbonPrefix + "--btn--primary")] = _vm.kind === 'button', _obj ) ],attrs:{"for":_vm.uid,"role":"button","tabindex":"0"},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();return _vm.onShow()},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }$event.preventDefault();}],"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }$event.preventDefault();return _vm.onShow()}}},[_c('cv-wrapper',{class:(_vm.carbonPrefix + "--file__drop-container" + _vm.allowDropClass),attrs:{"tag-type":_vm.kind !== 'button' ? 'div' : '',"data-file-drop-container":""},on:{"dragover":_vm.onDragEvent,"dragleave":_vm.onDragEvent,"drop":_vm.onDragEvent}},[_vm._t("drop-target",[_vm._v(_vm._s(_vm.internalDropTargetLabel))]),(_vm.kind !== 'button')?_c('input',_vm._g(_vm._b({ref:"file-input",class:(_vm.carbonPrefix + "--file-input"),attrs:{"type":"file","accept":_vm.accept,"id":_vm.uid,"data-file-uploader":"","data-target":"[data-file-container]"}},'input',_vm.$attrs,false),_vm.inputListeners)):_vm._e()],2)],1),(_vm.kind === 'button')?_c('input',_vm._g(_vm._b({ref:"file-input",class:(_vm.carbonPrefix + "--file-input"),attrs:{"type":"file","accept":_vm.accept,"id":_vm.uid,"data-file-uploader":"","data-target":"[data-file-container]"}},'input',_vm.$attrs,false),_vm.inputListeners)):_vm._e(),_c('div',{class:(_vm.carbonPrefix + "--file-container"),attrs:{"data-file-container":""}},_vm._l((_vm.internalFiles),function(file,index){return _c('div',{key:index,class:_vm.isInvalid(index)
             ? (_vm.carbonPrefix + "--file__selected-file--invalid__wrapper")
             : (_vm.carbonPrefix + "--file__selected-file")},[_c('cv-wrapper',{class:(_vm.carbonPrefix + "--file__selected-file " + _vm.carbonPrefix + "--file__selected-file--invalid"),attrs:{"tag-type":_vm.isInvalid(index) ? 'div' : ''}},[_c('p',{class:(_vm.carbonPrefix + "--file-filename"),attrs:{"title":file.file.name}},[_vm._v(_vm._s(file.file.name))]),_c('span',{class:(_vm.carbonPrefix + "--file__state-container"),style:(_vm.stateStyleOverides),attrs:{"data-for":_vm.uid,"data-test":file.state}},[(file.state === 'uploading')?_c('div',{class:(_vm.carbonPrefix + "--inline-loading__animation")},[_c('div',{class:(_vm.carbonPrefix + "--loading " + _vm.carbonPrefix + "--loading--small"),attrs:{"data-inline-loading-spinner":""}},[_c('svg',{class:(_vm.carbonPrefix + "--loading__svg"),attrs:{"viewBox":"-75 -75 150 150"}},[_c('circle',{class:(_vm.carbonPrefix + "--loading__background"),attrs:{"cx":"0","cy":"0","r":"37.5"}}),_c('circle',{class:(_vm.carbonPrefix + "--loading__stroke"),attrs:{"cx":"0","cy":"0","r":"37.5"}})])])]):_vm._e(),(file.state === 'complete')?_c('CheckmarkFilled16',{class:(_vm.carbonPrefix + "--file-complete")}):_vm._e(),(_vm.isInvalid(index))?_c('WarningFilled16',{class:(_vm.carbonPrefix + "--file--invalid")}):_vm._e(),(_vm.removable)?_c('button',{class:(_vm.carbonPrefix + "--file-close"),attrs:{"type":"button","alt":_vm.removeAriaLabel,"arial-label":_vm.removeAriaLabel},on:{"click":function($event){return _vm.remove(index)}}},[_c('Close16')],1):_vm._e()],1),(_vm.isInvalid(index))?_c('div',{class:(_vm.carbonPrefix + "--form-requirement")},[_c('div',{class:(_vm.carbonPrefix + "--form-requirement__title")},[_vm._v("\n              "+_vm._s(file.invalidMessageTitle || 'Invalid file')+"\n            ")]),_c('p',{class:(_vm.carbonPrefix + "--form-requirement__supplement")},[_vm._v(_vm._s(file.invalidMessage))])]):_vm._e()])],1)}),0)])])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/cv-file-uploader/cv-file-uploader.vue?vue&type=template&id=73e9f6bf&
+// CONCATENATED MODULE: ./src/components/cv-file-uploader/cv-file-uploader.vue?vue&type=template&id=0c045fc0&
 
 // EXTERNAL MODULE: ./src/mixins/index.js + 7 modules
 var mixins = __webpack_require__("1b62");
@@ -9620,6 +9620,8 @@ var consts = __webpack_require__("4352");
 //
 //
 //
+//
+//
 
 
 
@@ -9651,6 +9653,7 @@ var consts = __webpack_require__("4352");
     },
     label: String,
     helperText: String,
+    accept: String,
     initialStateUploading: Boolean,
     removable: Boolean,
     buttonLabel: {
@@ -9721,12 +9724,19 @@ var consts = __webpack_require__("4352");
     },
     addFiles(files) {
       for (const file of files) {
-        this.internalFiles.push({
+        const internalFile = {
           state: this.initialStateUploading ? consts["b" /* STATES */].UPLOADING : consts["b" /* 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);
     },
@@ -9752,32 +9762,55 @@ var consts = __webpack_require__("4352");
       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') >= 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 (Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') === -1) {
+        return;
+      }
+
+      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);
+        }
+        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');
         }
-        if (evt.type === 'drop') {
-          evt.preventDefault();
-          this.addFiles(evt.dataTransfer.files);
-          this.allowDrop = false;
+        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.`,
+          };
         }
       }
     },
@@ -14761,17 +14794,17 @@ var Close20 = Object(_utils_e280d4a4_js__WEBPACK_IMPORTED_MODULE_0__[/* c */ "a"
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"474a3f54-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/cv-toast-notification/cv-toast-notification.vue?vue&type=template&id=8e281c86&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"474a3f54-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/cv-toast-notification/cv-toast-notification.vue?vue&type=template&id=48c07dad&
 var render = function () {
 var _obj;
 var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g({class:[
     ("cv-notifiation " + _vm.carbonPrefix + "--toast-notification"),
     (_vm.carbonPrefix + "--toast-notification--" + (_vm.kind.toLowerCase())),
-    ( _obj = {}, _obj[(_vm.carbonPrefix + "--toast-notification--low-contrast")] = _vm.lowContrast, _obj ) ],attrs:{"data-notification":"","role":_vm.isAlert ? 'alert' : undefined,"aria-live":!_vm.isAlert ? 'polite' : false}},_vm.$listeners),[_c(_vm.icon,{tag:"component",class:(_vm.carbonPrefix + "--toast-notification__icon")}),_c('div',{class:(_vm.carbonPrefix + "--toast-notification__details")},[_c('h3',{class:(_vm.carbonPrefix + "--toast-notification__title")},[_vm._v(_vm._s(_vm.title))]),_c('p',{class:(_vm.carbonPrefix + "--toast-notification__subtitle"),domProps:{"innerHTML":_vm._s(_vm.subTitle)}}),_c('p',{class:(_vm.carbonPrefix + "--toast-notification__caption"),domProps:{"innerHTML":_vm._s(_vm.caption)}})]),_c('button',{class:(_vm.carbonPrefix + "--toast-notification__close-button"),attrs:{"aria-label":_vm.closeAriaLabel,"type":"button","data-notification-btn":""},on:{"click":function($event){return _vm.$emit('close')}}},[_c('Close20',{class:(_vm.carbonPrefix + "--toast-notification__close-icon")})],1)],1)}
+    ( _obj = {}, _obj[(_vm.carbonPrefix + "--toast-notification--low-contrast")] = _vm.lowContrast, _obj ) ],attrs:{"data-notification":"","role":_vm.isAlert ? 'alert' : undefined,"aria-live":!_vm.isAlert ? 'polite' : false}},_vm.$listeners),[_c(_vm.icon,{tag:"component",class:(_vm.carbonPrefix + "--toast-notification__icon")}),_c('div',{class:(_vm.carbonPrefix + "--toast-notification__details")},[_c('h3',{class:(_vm.carbonPrefix + "--toast-notification__title")},[_vm._v(_vm._s(_vm.title))]),_c('p',{class:(_vm.carbonPrefix + "--toast-notification__subtitle"),domProps:{"innerHTML":_vm._s(_vm.subTitle)}}),_c('p',{class:(_vm.carbonPrefix + "--toast-notification__caption"),domProps:{"innerHTML":_vm._s(_vm.caption)}})]),(!_vm.hideCloseButton)?_c('button',{class:(_vm.carbonPrefix + "--toast-notification__close-button"),attrs:{"aria-label":_vm.closeAriaLabel,"type":"button","data-notification-btn":""},on:{"click":function($event){return _vm.$emit('close')}}},[_c('Close20',{class:(_vm.carbonPrefix + "--toast-notification__close-icon")})],1):_vm._e()],1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/cv-toast-notification/cv-toast-notification.vue?vue&type=template&id=8e281c86&
+// CONCATENATED MODULE: ./src/components/cv-toast-notification/cv-toast-notification.vue?vue&type=template&id=48c07dad&
 
 // EXTERNAL MODULE: ./src/mixins/index.js + 7 modules
 var mixins = __webpack_require__("1b62");
@@ -14822,6 +14855,7 @@ var information_filled_20 = __webpack_require__("92ca");
 //
 //
 //
+//
 
 
 
@@ -14837,6 +14871,7 @@ var information_filled_20 = __webpack_require__("92ca");
   props: {
     caption: String,
     closeAriaLabel: { type: String, default: 'Dismiss notification' },
+    hideCloseButton: Boolean,
     kind: {
       type: String,
       default: 'info',
@@ -15715,7 +15750,7 @@ exports.createSVGComponent = createSVGComponent;
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"474a3f54-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/cv-inline-notification/cv-inline-notification.vue?vue&type=template&id=3d6f3254&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"474a3f54-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/cv-inline-notification/cv-inline-notification.vue?vue&type=template&id=a9ac2754&
 var render = function () {
 var _obj;
 var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g({class:[
@@ -15726,11 +15761,11 @@ var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_
       (_vm.carbonPrefix + "--inline-notification__action-button"),
       (_vm.carbonPrefix + "--btn"),
       (_vm.carbonPrefix + "--btn--sm"),
-      (_vm.carbonPrefix + "--btn--ghost") ],attrs:{"type":"button"},on:{"click":function($event){return _vm.$emit('action')}}},[_vm._v("\n    "+_vm._s(_vm.actionLabel)+"\n  ")]):_vm._e(),_c('button',{class:(_vm.carbonPrefix + "--inline-notification__close-button"),attrs:{"type":"button","aria-label":_vm.closeAriaLabel,"data-notification-btn":""},on:{"click":function($event){return _vm.$emit('close')}}},[_c('Close20',{class:(_vm.carbonPrefix + "--inline-notification__close-icon")})],1)])}
+      (_vm.carbonPrefix + "--btn--ghost") ],attrs:{"type":"button"},on:{"click":function($event){return _vm.$emit('action')}}},[_vm._v("\n    "+_vm._s(_vm.actionLabel)+"\n  ")]):_vm._e(),(!_vm.hideCloseButton)?_c('button',{class:(_vm.carbonPrefix + "--inline-notification__close-button"),attrs:{"type":"button","aria-label":_vm.closeAriaLabel,"data-notification-btn":""},on:{"click":function($event){return _vm.$emit('close')}}},[_c('Close20',{class:(_vm.carbonPrefix + "--inline-notification__close-icon")})],1):_vm._e()])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/cv-inline-notification/cv-inline-notification.vue?vue&type=template&id=3d6f3254&
+// CONCATENATED MODULE: ./src/components/cv-inline-notification/cv-inline-notification.vue?vue&type=template&id=a9ac2754&
 
 // EXTERNAL MODULE: ./src/mixins/index.js + 7 modules
 var mixins = __webpack_require__("1b62");
@@ -15798,6 +15833,7 @@ var information_filled_20 = __webpack_require__("92ca");
 //
 //
 //
+//
 
 
 
@@ -15819,6 +15855,7 @@ var information_filled_20 = __webpack_require__("92ca");
       validator: val => ['error', 'info', 'warning', 'success'].includes(val),
     },
     lowContrast: Boolean,
+    hideCloseButton: Boolean,
   },
   computed: {
     icon() {