@carbon/vue 2.39.0 → 2.43.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.43.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -64,16 +64,16 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.27.0",
-    "@carbon/telemetry": "^0.0.0-alpha.6",
-    "carbon-components": "10.30.0",
+    "@carbon/icons-vue": "10.49.1",
+    "@carbon/telemetry": "^0.1.0",
+    "carbon-components": "10.56.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": "f0b00ac6c8bfaf0f92bebd7776fa5c507d86a7e2"
+  "gitHead": "fead16d4b7d1f363f99c49aaeb614749ddf128ec"
 }

package/src/components/cv-accordion/cv-accordion-skeleton.vue

@@ -31,7 +31,7 @@ export default {
     size: {
       type: String,
       default: '',
-      validator: val => ['sm', 'xl', ''].includes(val),
+      validator: val => ['sm', 'md', 'lg', 'xl', ''].includes(val),
     },
   },
   mixins: [carbonPrefixMixin],

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

@@ -23,7 +23,7 @@ export default {
     size: {
       type: String,
       default: '',
-      validator: val => ['sm', 'xl', ''].includes(val),
+      validator: val => ['sm', 'md', 'lg', 'xl', ''].includes(val),
     },
   },
   mixins: [carbonPrefixMixin],

package/src/components/cv-aspect-ratio/cv-aspect-ratio.vue

@@ -4,6 +4,8 @@
 
 <script>
 import { carbonPrefixMixin } from '../../mixins';
+
+export const ratios = ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'];
 export default {
   name: 'CvAspectRatio',
   mixins: [carbonPrefixMixin],
@@ -11,8 +13,7 @@ export default {
     ratio: {
       type: String,
       validator: val => {
-        const options = ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'];
-        const result = options.includes(val);
+        const result = ratios.includes(val);
         if (!result) {
           console.warn(`Invalid options supplied to "CvAspectRation"-"${val}".`);
         }

package/src/components/cv-aspect-ratio/index.js

@@ -1,2 +1,2 @@
-import CvAspectRatio from './cv-aspect-ratio';
-export { CvAspectRatio };
+import CvAspectRatio, { ratios } from './cv-aspect-ratio';
+export { CvAspectRatio, ratios };

package/src/components/cv-breadcrumb/cv-breadcrumb-skeleton.vue

@@ -1,5 +1,11 @@
 <template>
-  <nav :class="`${carbonPrefix}--breadcrumb ${carbonPrefix}--skeleton`" :aria-label="ariaLabel">
+  <nav
+    :class="[
+      `${carbonPrefix}--breadcrumb ${carbonPrefix}--skeleton`,
+      { [`${carbonPrefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash },
+    ]"
+    :aria-label="ariaLabel"
+  >
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
@@ -18,6 +24,7 @@ export default {
   },
   props: {
     ariaLabel: { type: String, default: 'breadcrumb' },
+    noTrailingSlash: Boolean,
   },
 };
 </script>

package/src/components/cv-button/button-mixin.js

@@ -13,6 +13,7 @@ export default {
       },
     },
     iconHref: {
+      deprecated: true,
       type: String,
       default: undefined,
       validator(val) {
@@ -29,6 +30,7 @@ export default {
         ['', 'primary', 'secondary', 'tertiary', 'ghost', 'danger', 'danger--ghost', 'danger--tertiary'].includes(val),
     },
     small: {
+      deprecated: true,
       type: Boolean,
       default: undefined,
       validator(val) {
@@ -56,7 +58,8 @@ export default {
     buttonClassOpts() {
       return (opts = {}) => {
         const classes = [`${carbonSettings.prefix}--btn`];
-        const lowerCaseKind = this.kind.toLowerCase();
+        // ensure lower case and default to primary
+        const _kind = this.kind ? this.kind.toLowerCase() : 'primary';
 
         if (opts.skeleton) {
           classes.push(`${carbonSettings.prefix}--skeleton`);
@@ -64,13 +67,13 @@ export default {
 
         if (opts.iconOnly) {
           classes.push(`${carbonSettings.prefix}--btn--icon-only`);
-          if (this.selected && lowerCaseKind === 'ghost') {
+          if (this.selected && _kind === 'ghost') {
             classes.push(`${carbonSettings.prefix}--btn--selected`);
           }
         }
 
-        if (this.kind && !opts.skeleton) {
-          classes.push(`${carbonSettings.prefix}--btn--${lowerCaseKind}`);
+        if (_kind && !opts.skeleton) {
+          classes.push(`${carbonSettings.prefix}--btn--${_kind}`);
         }
 
         let size = this.size ? this.size : this.small && 'sm';

package/src/components/cv-button/consts.js

@@ -0,0 +1,14 @@
+export const buttonKinds = [
+  '',
+  'primary',
+  'secondary',
+  'tertiary',
+  'ghost',
+  'danger',
+  'danger--ghost',
+  'danger--tertiary',
+];
+export const buttonSizes = ['', 'default', 'field', 'small', 'sm', 'lg', 'xl'];
+
+const CvButtonConsts = { buttonKinds, buttonSizes };
+export default CvButtonConsts;

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

@@ -34,7 +34,7 @@ export default {
     tipPosition: {
       type: String,
       default: 'bottom',
-      validator: val => ['top', 'left', 'bottom', 'right'.includes(val)],
+      validator: val => ['top', 'left', 'bottom', 'right'].includes(val),
     },
     tipAlignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
   },

package/src/components/cv-code-snippet/cv-code-snippet-skeleton.vue

@@ -19,7 +19,7 @@ export default {
   name: 'CvCodeSnippetSkeleton',
   mixins: [carbonPrefixMixin],
   props: {
-    kind: { type: String, default: 'oneline' },
+    kind: { type: String, default: 'oneline', validator: val => ['multiline', 'oneline'].includes(val) },
   },
   computed: {
     multi() {

package/src/components/cv-code-snippet/cv-code-snippet.vue

@@ -14,7 +14,7 @@
     <!-- textarea cannot be fully hidden for clipboard to work -->
     <textarea
       class="cv-code-snippet__clippy"
-      style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"
+      style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden"
       aria-hidden="true"
       ref="clippy"
     ></textarea>

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

@@ -28,7 +28,7 @@
 
 <script>
 import ArrowDown16 from '@carbon/icons-vue/es/arrow--down/16';
-import Arrows16 from '@carbon/icons-vue/es/arrows/16';
+import Arrows16 from '@carbon/icons-vue/es/arrows--vertical/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
 import { uidMixin, carbonPrefixMixin } from '../../mixins';
 

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

@@ -1,6 +1,6 @@
 <template>
   <cv-data-table skeleton :data="data" :columns="cols" v-on="$listeners" v-bind="$attrs">
-    <template v-if="hasBatchActions" slot="helper-text">
+    <template v-if="hasHelperText" slot="helper-text">
       <slot name="helper-text" />
     </template>
 
@@ -29,7 +29,6 @@ export default {
   },
   props: {
     columns: { type: [Array, Number], default: DEFAULTS.COLS },
-    hasExpandables: Boolean,
     rows: { type: Number, default: DEFAULTS.ROWS },
   },
   data() {

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

@@ -232,6 +232,7 @@ 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,
@@ -258,7 +259,7 @@ export default {
       batchActive: false,
       headingChecked: false,
       dataRowsSelected: this.rowsSelected,
-      searchValue: '',
+      searchValue: this.initialSearchValue,
       clearSearchVisible: false,
       searchActive: false,
       registeredRows: [],

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-feedback-button/_cv-feedback-button.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    aria-label="ariaLabel"
+    :aria-label="ariaLabel"
     type="button"
     class="cv-feedback-button"
     v-bind="$attrs"

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,11 +142,13 @@ export default {
     },
     label: String,
     helperText: String,
+    accept: String,
     initialStateUploading: Boolean,
     removable: Boolean,
     buttonLabel: {
       type: String,
       default: undefined,
+      deprecated: true,
       validator: val => {
         if (val !== undefined && process.env.NODE_ENV === 'development') {
           console.warn('CvFileUploader: button-label prop deprecated in favour of drop-target-label');
@@ -210,13 +214,30 @@ export default {
     },
     addFiles(files) {
       for (const file of files) {
-        this.internalFiles.push({
-          state: this.initialStateUploading ? STATES.UPLOADING : STATES.NONE,
-          file,
-          invalidMessageTitle: '',
-          invalidMessage: '',
-        });
+        const internalFile = this.internalFiles.find(item => item.file.name === file.name);
+
+        if (internalFile) {
+          internalFile.state = this.initialStateUploading ? STATES.UPLOADING : STATES.NONE;
+          internalFile.invalidMessageTitle = '';
+          internalFile.invalidMessage = '';
+        } else {
+          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);
+        }
       }
+      // clear input we do not need to maintain it
+      this.$refs['file-input'].value = '';
       this.$emit('change', this.internalFiles);
     },
     onChange(ev) {
@@ -241,32 +262,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 (evt.type === 'dragleave') {
+        this.allowDrop = false;
+        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 === '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.`,
+          };
         }
       }
     },

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

@@ -40,6 +40,7 @@ export default {
     active: {
       type: Boolean,
       default: undefined,
+      deprecated: true,
       validator: val => {
         if (val !== undefined && process.env.NODE_ENV === 'development') {
           console.warn('CvInlineLoading: active prop deprecated in favour of state prop');

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

@@ -4,7 +4,13 @@
     v-on="$listeners"
     v-bind="linkProps"
     class="cv-link"
-    :class="[`${carbonPrefix}--link`, { [`${carbonPrefix}--link--inline`]: inline }]"
+    :class="[
+      `${carbonPrefix}--link`,
+      {
+        [`${carbonPrefix}--link--disabled`]: disabled,
+        [`${carbonPrefix}--link--inline`]: inline,
+      },
+    ]"
   >
     <slot></slot>
   </component>
@@ -17,6 +23,7 @@ export default {
   name: 'CvLink',
   mixins: [linkMixin, carbonPrefixMixin],
   props: {
+    disabled: Boolean,
     inline: Boolean,
   },
 };

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

@@ -5,7 +5,7 @@
       :class="{
         'cv-loading': !overlay,
         [`${carbonPrefix}--loading`]: active || stopping,
-        [`${carbonPrefix}--loading--stop`]: !active && stopping,
+        [`${carbonPrefix}--loading--stop`]: (!active && stopping) || stopped,
         [`${carbonPrefix}--loading--small`]: small,
       }"
       ref="loading"
@@ -55,6 +55,7 @@ export default {
   },
   data() {
     return {
+      stopped: false,
       stopping: false,
     };
   },
@@ -69,10 +70,12 @@ export default {
         this.$refs.loading.removeEventListener('animationend', this.onEnd);
 
         this.stopping = false;
+        this.stopped = true;
         this.$emit('loading-end');
       }
     },
     onActiveUpdate(newValue) {
+      this.stopped = false;
       this.stopping = !newValue;
       if (!newValue) {
         this.$refs.loading.addEventListener('animationend', this.onEnd);

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) {