@carbon/vue 2.26.0 → 2.27.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.26.0",
+  "version": "2.27.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -73,5 +73,5 @@
     "eslint-plugin-prettier": "^3.1.1",
     "vue-template-compiler": "^2.6.10"
   },
-  "gitHead": "5bcf4d93005e113e5501524d339f0907f57f1758"
+  "gitHead": "48ffc15e8d83bb013b01139b1d88d4b542895796"
 }

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

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import CvFeedbackButton from './_cv-feedback-button';
+import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 import themeMixin from '../../mixins/theme-mixin';
 
 export default {

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

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import CvFeedbackButton from './_cv-feedback-button';
+import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 import CvButton from '../cv-button/cv-button';
 
 import Copy16 from '@carbon/icons-vue/es/copy/16';

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

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import CvFeedbackButton from './_cv-feedback-button';
+import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 
 import Copy16 from '@carbon/icons-vue/es/copy/16';
 

package/src/components/cv-combo-box/cv-combo-box.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="cv-combo-box bx--list-box__wrapper" @focusout="onFocusOut">
-    <label v-if="title" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': $attrs.disabled }">
-      {{ title }}
-    </label>
+    <label v-if="title" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': disabled }">{{ title }}</label>
 
-    <div v-if="isHelper" class="bx--form__helper-text" :class="{ 'bx--form__helper-text--disabled': $attrs.disabled }">
+    <div v-if="isHelper" class="bx--form__helper-text" :class="{ 'bx--form__helper-text--disabled': disabled }">
       <slot name="helper-text">{{ helperText }}</slot>
     </div>
 
@@ -16,10 +14,10 @@
         'bx--list-box--light': theme === 'light',
         'bx--combo-box--expanded': open,
         'bx--list-box--expanded': open,
-        'bx--combo-box--disabled bx--list-box--disabled': $attrs.disabled,
+        'bx--combo-box--disabled bx--list-box--disabled': disabled,
       }"
       :data-invalid="isInvalid"
-      v-bind="$attrs"
+      v-bind="$attr"
       @keydown.down.prevent="onDown"
       @keydown.up.prevent="onUp"
       @keydown.enter.prevent="onEnter"
@@ -46,8 +44,10 @@
           :aria-controls="uid"
           aria-autocomplete="list"
           role="combobox"
+          :aria-disabled="disabled"
           :aria-expanded="open"
           autocomplete="off"
+          :disabled="disabled"
           :placeholder="label"
           v-model="filter"
           @input="onInput"
@@ -109,6 +109,7 @@ export default {
   props: {
     autoFilter: Boolean,
     autoHighlight: Boolean,
+    disabled: Boolean,
     invalidMessage: { type: String, default: undefined },
     helperText: { type: String, default: undefined },
     title: String,
@@ -209,6 +210,7 @@ export default {
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
     clearFilter() {
+      if (this.disabled) return;
       this.internalUpdateValue('');
       this.filter = '';
       this.$refs.input.focus();
@@ -280,6 +282,7 @@ export default {
       }
     },
     onInput() {
+      if (this.disabled) return;
       this.doOpen(true);
 
       this.updateOptions();
@@ -289,6 +292,7 @@ export default {
       this.open = newVal;
     },
     onDown() {
+      if (this.disabled) return;
       if (!this.open) {
         this.doOpen(true);
       } else {
@@ -296,15 +300,18 @@ export default {
       }
     },
     onUp() {
+      if (this.disabled) return;
       if (this.open) {
         this.doMove(true);
       }
     },
     onEsc() {
+      if (this.disabled) return;
       this.doOpen(false);
       this.$el.focus();
     },
     onEnter() {
+      if (this.disabled) return;
       this.doOpen(!this.open);
       if (!this.open) {
         this.onItemClick(this.highlighted);
@@ -312,6 +319,7 @@ export default {
       }
     },
     onClick() {
+      if (this.disabled) return;
       this.doOpen(!this.open);
       if (this.open) {
         this.$refs.input.focus();
@@ -340,17 +348,20 @@ export default {
       }
     },
     onItemClick(val) {
+      if (this.disabled) return;
       this.internalUpdateValue(val);
       this.$refs.input.focus();
       this.open = false; // close after user makes a selection
       this.$emit('change', this.dataValue);
     },
     inputClick() {
+      if (this.disabled) return;
       if (!this.open) {
         this.doOpen(true);
       }
     },
     inputFocus() {
+      if (this.disabled) return;
       this.doOpen(true);
     },
   },

package/src/components/cv-data-table/_cv-data-table-row-inner.vue

@@ -16,14 +16,15 @@
         v-model="dataChecked"
         @change="onChange"
         ref="rowChecked"
-        :aria-label="ariaLabelForBatchCheckbox || `Select row ${value} for batch action`"
+        :label="ariaLabelForBatchCheckbox || `Select row ${value} for batch action`"
+        hideLabel
       />
     </td>
     <slot />
     <td v-if="hasOverflowMenu" class="bx--table-column-menu">
-      <cv-overflow-menu flip-menu>
+      <cv-overflow-menu v-bind="overflowMenuOptions">
         <cv-overflow-menu-item
-          v-for="(item, index) in overflowMenu"
+          v-for="(item, index) in overflowMenuButtons"
           :key="`${index}`"
           @click="
             onMenuItemClick({
@@ -96,6 +97,14 @@ export default {
     isChecked() {
       return this.dataChecked;
     },
+    overflowMenuButtons() {
+      return this.overflowMenu.filter(item => typeof item === 'string');
+    },
+    overflowMenuOptions() {
+      const incomingOptions = this.overflowMenu.find(item => typeof item === 'object') || {};
+      const defaultOptions = { flipMenu: true, label: 'Row overflow menu', tipPosition: 'left' };
+      return { ...defaultOptions, ...incomingOptions };
+    },
   },
   methods: {
     checkSlots() {

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

@@ -109,6 +109,8 @@
                 value="headingCheck"
                 v-model="headingChecked"
                 @change="onHeadingCheckChange"
+                :label="selectAllAriaLabel"
+                hideLabel
               />
             </th>
             <slot name="headings">
@@ -140,7 +142,7 @@
                 :key="`cell:${colIndex}:${rowIndex}`"
                 :style="dataStyle(colIndex)"
               >
-                <cv-wrapper :tag-type="skeleton && rowIndex < 1 ? 'span' : ''">{{ cell }}</cv-wrapper>
+                <cv-wrapper :tag-type="skeleton ? 'span' : ''">{{ cell }}</cv-wrapper>
               </cv-data-table-cell>
             </cv-data-table-row>
           </slot>
@@ -151,6 +153,7 @@
       v-if="pagination"
       v-bind="internalPagination"
       :number-of-items="internalNumberOfItems"
+      :actual-items-on-page="this.registeredRows.length"
       @change="$emit('pagination', $event)"
     >
       <template v-slot:range-text="{ scope }">
@@ -196,6 +199,7 @@ export default {
     actionBarAriaLabel: { type: String, default: 'Table Action Bar' },
     collapseAllAriaLabel: { type: String, default: 'Collapse all rows' },
     expandAllAriaLabel: { type: String, default: 'Expand all rows' },
+    selectAllAriaLabel: { type: String, default: 'Select all rows' },
     autoWidth: Boolean,
     batchCancelLabel: { type: String, default: 'cancel' },
     borderless: Boolean,

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

@@ -22,9 +22,9 @@
       :class="{ 'bx--dropdown__wrapper--inline': inline, 'cv-dropdown': !formItem }"
       :style="wrapperStyleOverride"
     >
-      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">
-        {{ label }}
-      </span>
+      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">{{
+        label
+      }}</span>
 
       <div
         v-if="!inline && isHelper"
@@ -58,10 +58,12 @@
       >
         <button
           class="bx--dropdown-text"
+          :aria-disabled="disabled"
           aria-haspopup="true"
           :aria-expanded="open"
           :aria-controls="`${uid}-menu`"
-          :aria-labelledby="`${uid}-label ${uid}-value`"
+          :aria-labelledby="ariaLabeledBy"
+          :disabled="disabled"
           type="button"
         >
           <WarningFilled16 v-if="isInvalid && inline" class="bx--dropdown__invalid-icon" />
@@ -161,6 +163,13 @@ export default {
     },
   },
   computed: {
+    ariaLabeledBy() {
+      if (this.label) {
+        return `${this.uid}-label ${this.uid}-value`;
+      } else {
+        return `${this.uid}-value`;
+      }
+    },
     internalCaption() {
       if (this.selectedChild) {
         return this.selectedChild.internalContent;

package/src/components/{cv-code-snippet → cv-feedback-button}/_cv-feedback-button.vue

@@ -1,5 +1,6 @@
 <template>
   <button
+    aria-label="ariaLabel"
     type="button"
     class="cv-feedback-button"
     v-bind="$attrs"
@@ -27,6 +28,7 @@ export default {
   name: 'cvFeedbackButton',
   inheritAttrs: false,
   props: {
+    ariaLabel: { type: String, default: 'Feedback button' },
     feedback: { type: String, required: true },
     inline: Boolean,
     timeout: { type: Number, default: 2000 },

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

@@ -131,6 +131,7 @@ export default {
     pageNumberLabel: { type: String, default: 'Page number:' },
     pageSizesLabel: { type: String, default: 'Items per page:' },
     numberOfItems: { type: Number, default: Infinity },
+    actualItemsOnPage: { type: Number, default: Infinity },
     page: Number,
     pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
   },
@@ -164,7 +165,9 @@ export default {
       this.pageValue = newPageValue(this.page, this.pageCount);
       this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
     },
-    pageSizes() {
+    pageSizes(a, b) {
+      if (!a.some(item => !b.includes(item))) return; // /possible issue when pageSizes defined in DOM
+
       this.pageSizeValue = newPageSizeValue(this.pageSizes);
       this.pageCount = newPageCount(this.numberOfItems, this.pageSizeValue);
       this.pages = newPagesArray(this.pageCount);
@@ -197,7 +200,10 @@ export default {
     rangeProps() {
       return {
         start: Math.min(this.firstItem, this.numberOfItems),
-        end: Math.min(this.firstItem + parseInt(this.pageSizeValue, 10) - 1, this.numberOfItems),
+        end: Math.min(
+          this.firstItem + Math.min(parseInt(this.pageSizeValue, 10), this.actualItemsOnPage) - 1,
+          this.numberOfItems
+        ),
         items: this.numberOfItems,
       };
     },

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

@@ -16,7 +16,13 @@
     @keyup.space.prevent="$emit('remove')"
   >
     <span class="bx--tag__label">{{ label }}</span>
-    <button v-if="isFilter" class="bx--tag__close-icon" :aria-label="clearAriaLabel" @click.stop.prevent="onRemove">
+    <button
+      v-if="isFilter"
+      class="bx--tag__close-icon"
+      :aria-label="clearAriaLabel"
+      @click.stop.prevent="onRemove"
+      :disabled="disabled"
+    >
       <Close16 />
     </button>
   </span>