@carbon/vue 2.23.0-canary.0 → 2.23.1

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.23.0-canary.0",
+  "version": "2.23.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -73,5 +73,5 @@
     "eslint-plugin-prettier": "^3.1.1",
     "vue-template-compiler": "^2.6.10"
   },
-  "gitHead": "3d4153ed4048ee0dad2507d53fa3a82fea0763e3"
+  "gitHead": "b83ca8b2c7be451e477f6e661f12a135a301c826"
 }

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

@@ -1,5 +1,18 @@
 <template>
   <div class="cv-checkbox bx--checkbox-wrapper" :class="{ 'bx--form-item': formItem }">
+    <input
+      ref="input"
+      v-bind="$attrs"
+      v-on="inputListeners"
+      class="bx--checkbox"
+      type="checkbox"
+      :checked="isChecked === true"
+      :aria-checked="`${isChecked}`"
+      @focus="onFocus"
+      @blur="onBlur"
+      :value="value"
+      :id="uid"
+    />
     <label
       :class="[
         'bx--checkbox-label',
@@ -10,32 +23,25 @@
       ]"
       :data-contained-checkbox-state="isChecked"
       :data-contained-checkbox-disabled="$attrs.disabled"
+      :for="uid"
     >
-      <input
-        ref="input"
-        v-bind="$attrs"
-        v-on="inputListeners"
-        class="bx--checkbox"
-        type="checkbox"
-        :checked="isChecked === true"
-        :aria-checked="`${isChecked}`"
-        @focus="onFocus"
-        @blur="onBlur"
-        :value="value"
-      />
-      {{ label }}
+      <span class="bx--checkbox-label-text" :class="{ 'bx--visually-hidden': hideLabel }">
+        {{ label }}
+      </span>
     </label>
   </div>
 </template>
 
 <script>
 import checkMixin from '../../mixins/check-mixin';
+import uidMixin from '../../mixins/uid-mixin';
 
 export default {
   name: 'CvCheckbox',
-  mixins: [checkMixin],
+  mixins: [checkMixin, uidMixin],
   inheritAttrs: false,
   props: {
+    hideLabel: Boolean,
     label: String,
     mixed: Boolean,
     formItem: { type: Boolean, default: true },

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

@@ -13,7 +13,7 @@
       <Copy16 class="bx--snippet__icon" />
     </cv-feedback-button>
 
-    <cv-button type="button" kind="ghost" small class="bx--snippet-btn--expand" @click="toggleExpand">
+    <cv-button type="button" kind="ghost" size="small" class="bx--snippet-btn--expand" @click="toggleExpand">
       <span class="bx--snippet-btn--text">{{ expandButtonText }}</span>
       <ChevronDown16 class="bx--icon-chevron--down" />
     </cv-button>

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

@@ -1,11 +1,19 @@
 <template>
-  <th :aria-sort="sortOrder">
-    <button type="button" v-if="sortable" :class="['bx--table-sort', orderClass]" @click="onSortClick">
+  <th :aria-sort="sortOrder" :style="skeleton && headingStyle">
+    <button
+      type="button"
+      v-if="sortable"
+      :class="['bx--table-sort', orderClass]"
+      @click="onSortClick"
+      :style="headingStyle"
+    >
       <cv-wrapper :tag-type="headingLabelTag" class="bx--table-header-label">{{ heading }}</cv-wrapper>
       <ArrowDown16 class="bx--table-sort__icon" />
       <Arrows16 class="bx--table-sort__icon-unsorted" />
     </button>
-    <cv-wrapper v-else :tag-type="headingLabelTag" class="bx--table-header-label">{{ heading }}</cv-wrapper>
+    <cv-wrapper v-else :tag-type="headingLabelTag" class="bx--table-header-label" :style="headingStyle">{{
+      heading
+    }}</cv-wrapper>
   </th>
 </template>
 
@@ -28,6 +36,7 @@ export default {
     sortable: Boolean,
     order: { type: String, default: 'none' },
     skeleton: Boolean,
+    headingStyle: Object,
   },
   computed: {
     sortOrder() {

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

@@ -10,7 +10,14 @@
       </button>
     </td>
     <td v-if="hasBatchActions" class="bx--table-column-checkbox">
-      <cv-checkbox :form-item="false" :value="value" v-model="dataChecked" @change="onChange" ref="rowChecked" />
+      <cv-checkbox
+        :form-item="false"
+        :value="value"
+        v-model="dataChecked"
+        @change="onChange"
+        ref="rowChecked"
+        :aria-label="ariaLabelForBatchCheckbox || `Select row ${value} for batch action`"
+      />
     </td>
     <slot />
     <td v-if="hasOverflowMenu" class="bx--table-column-menu">
@@ -42,6 +49,7 @@ export default {
   name: 'CvDataTableRowInner',
   components: { CvCheckbox, CvOverflowMenu, CvOverflowMenuItem, ChevronRight16 },
   props: {
+    ariaLabelForBatchCheckbox: String,
     checked: Boolean,
     expanded: Boolean,
     expandingRow: Boolean,

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

@@ -19,7 +19,9 @@
         >
           <div class="bx--action-list">
             <slot name="batch-actions" />
-            <cv-button class="bx--batch-summary__cancel" small @click="deselect">{{ batchCancelLabel }}</cv-button>
+            <cv-button class="bx--batch-summary__cancel" size="small" @click="deselect">{{
+              batchCancelLabel
+            }}</cv-button>
           </div>
           <div class="bx--batch-summary">
             <p class="bx--batch-summary__para">
@@ -114,11 +116,11 @@
             <cv-data-table-heading
               v-for="(column, index) in dataColumns"
               :key="`${index}:${column}`"
-              :heading="column.label ? column.label : column"
-              :sortable="isSortable(column)"
+              :heading="columnHeading(column)"
+              :sortable="isColSortable(column)"
               :order="column.order"
               @sort="val => onSort(index, val)"
-              :style="headingStyle(index)"
+              :heading-style="headingStyle(index)"
               :skeleton="skeleton"
             />
             <th v-if="hasOverflowMenu"></th>
@@ -275,15 +277,25 @@ export default {
     this.checkSlots();
   },
   computed: {
-    isSortable() {
+    columnHeading() {
       return col => {
-        if (col && this.columns.some(column => column.sortable)) {
-          return col.sortable;
+        if (typeof col === 'object') {
+          return col.label || '';
         } else {
-          return this.sortable || this.columns.some(column => column.sortable);
+          return col;
         }
       };
     },
+    isSortable() {
+      // is any column sortable
+      return this.sortable || this.columns.some(column => column.sortable);
+    },
+    isColSortable() {
+      return col => {
+        // is specific column or all sortable
+        return (col && col.sortable) || this.sortable;
+      };
+    },
     hasTableHeader() {
       return this.title || this.isHelper;
     },
@@ -441,6 +453,7 @@ export default {
     watchColumns() {
       this.dataColumns = this.isSortable
         ? this.columns.map(item => ({
+            ...item,
             label: item.label ? item.label : item,
             order: 'none',
             sortable: item.sortable,

package/src/components/cv-overflow-menu/cv-overflow-menu.vue

@@ -157,20 +157,22 @@ export default {
       if (this.open) {
         const menuPosition = this.$el.getBoundingClientRect();
         return this.$nextTick(() => {
+          const pixelsScrolledX = window.scrollX || window.pageXOffset;
+          const pixelsScrolledY = window.scrollY || window.pageYOffset;
           if (this.flipMenu) {
             this.left =
               menuPosition.left +
               this.offsetLeft -
               this.$refs.popup.offsetWidth +
               this.$el.offsetWidth +
-              window.scrollX;
+              pixelsScrolledX;
           } else {
-            this.left = menuPosition.left + this.offsetLeft + window.scrollX;
+            this.left = menuPosition.left + this.offsetLeft + pixelsScrolledX;
           }
           if (this.up) {
-            this.top = menuPosition.top + this.offsetTop - this.$refs.popup.offsetHeight + window.scrollY;
+            this.top = menuPosition.top + this.offsetTop - this.$refs.popup.offsetHeight + pixelsScrolledY;
           } else {
-            this.top = menuPosition.bottom + this.offsetTop + window.scrollY;
+            this.top = menuPosition.bottom + this.offsetTop + pixelsScrolledY;
           }
         });
       }

package/src/components/cv-tooltip/cv-interactive-tooltip.vue

@@ -119,28 +119,30 @@ export default {
     },
     position() {
       const menuPosition = this.$refs.trigger.getBoundingClientRect();
+      const pixelsScrolledX = window.scrollX || window.pageXOffset;
+      const pixelsScrolledY = window.scrollY || window.pageYOffset;
 
       if (this.direction === 'top' || this.direction === 'bottom') {
         this.left =
           menuPosition.left +
           0.5 +
           (this.$refs.trigger.offsetWidth - this.$refs.popup.offsetWidth) / 2 +
-          window.scrollX;
+          pixelsScrolledX;
 
         if (this.direction === 'bottom') {
-          this.top = menuPosition.bottom + 10 + window.scrollY;
+          this.top = menuPosition.bottom + 10 + pixelsScrolledY;
         } else {
-          this.top = menuPosition.top - 15 - this.$refs.popup.offsetHeight + window.scrollY;
+          this.top = menuPosition.top - 15 - this.$refs.popup.offsetHeight + pixelsScrolledY;
         }
       } else {
         this.top =
           menuPosition.top +
           (this.$refs.trigger.offsetHeight - 0.5 - this.$refs.popup.offsetHeight) / 2 +
-          window.scrollY;
+          pixelsScrolledY;
         if (this.direction === 'left') {
-          this.left = menuPosition.left - 10 - this.$refs.popup.offsetWidth + window.scrollX;
+          this.left = menuPosition.left - 10 - this.$refs.popup.offsetWidth + pixelsScrolledX;
         } else {
-          this.left = menuPosition.right + 15 + window.scrollX;
+          this.left = menuPosition.right + 15 + pixelsScrolledX;
         }
       }
     },

package/src/components/cv-ui-shell/cv-header-panel.vue

@@ -3,6 +3,7 @@
     class="cv-header-panel bx--header-panel"
     :class="{ 'bx--header-panel--expanded': panelExpanded }"
     :aria-hidden="!panelExpanded"
+    :id="id"
     @focusout="onFocusout"
     @mousedown="onMouseDown"
   >

package/src/components/cv-ui-shell/cv-side-nav.vue

@@ -8,6 +8,7 @@
       'bx--side-nav--ux': isChildOfHeader,
     }"
     :aria-hidden="!panelExpanded && !fixed"
+    :id="id"
     @focusout="onFocusout"
     @mousedown="onMouseDown"
   >