@carbon/vue 2.25.0-canary.0 → 2.26.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.25.0-canary.0",
+  "version": "2.26.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": "a177ab894e5ed3e32c1c538f8e6ffad34ff12019"
+  "gitHead": "5bcf4d93005e113e5501524d339f0907f57f1758"
 }

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

@@ -9,7 +9,8 @@
   <li
     data-accordion-item
     class="cv-accordion-item bx--accordion__item"
-    :class="{ 'bx--accordion__item--active': dataOpen }"
+    :class="itemClasses"
+    @animationend="onAnimationEnd"
   >
     <button
       type="button"
@@ -50,6 +51,7 @@ export default {
   },
   data() {
     return {
+      animation: '',
       dataOpen: false,
     };
   },
@@ -58,6 +60,7 @@ export default {
   },
   methods: {
     toggle(force) {
+      this.animation = this.dataOpen ? 'collapsing' : 'expanding';
       const newValue = typeof force === 'boolean' ? !!force : !this.dataOpen;
       const change = this.dataOpen !== undefined && newValue !== this.dataOpen;
 
@@ -66,6 +69,21 @@ export default {
         this.$parent.$emit('cv:change', this);
       }
     },
+    onAnimationEnd() {
+      this.animation = '';
+    },
+  },
+  computed: {
+    itemClasses() {
+      const classes = [];
+      if (this.dataOpen) {
+        classes.push('bx--accordion__item--active');
+      }
+      if (this.animation) {
+        classes.push(`bx--accordion__item--${this.animation}`);
+      }
+      return classes.join(' ');
+    },
   },
 };
 </script>

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

@@ -71,7 +71,7 @@ export default {
           classes.push(`${carbonSettings.prefix}--btn--field`);
         }
 
-        return classes;
+        return classes.join(' ');
       };
     },
   },

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

@@ -27,13 +27,13 @@ export default {
   },
   computed: {
     buttonClasses() {
-      return this.buttonClassOpts({ iconOnly: true });
+      return `${this.buttonClassOpts({ iconOnly: true })}${this.tipClasses}`;
     },
     tipClasses() {
       const tipPosition = this.tipPosition || 'bottom';
       const tipAlignment = this.tipAlignment || 'center';
       if (this.label) {
-        return `${this.carbonPrefix}--tooltip__trigger ${this.carbonPrefix}--tooltip--a11y ${this.carbonPrefix}--tooltip--${tipPosition} ${this.carbonPrefix}--tooltip--align-${tipAlignment}`;
+        return ` ${this.carbonPrefix}--tooltip__trigger ${this.carbonPrefix}--tooltip--a11y ${this.carbonPrefix}--tooltip--${tipPosition} ${this.carbonPrefix}--tooltip--align-${tipAlignment}`;
       } else {
         return '';
       }

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

@@ -15,6 +15,7 @@
       :class="{
         '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,
       }"
       :data-invalid="isInvalid"

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

@@ -1,5 +1,5 @@
 <template>
-  <th :aria-sort="sortOrder" :style="skeleton && headingStyle">
+  <th :aria-sort="internalOrder" :style="skeleton && headingStyle">
     <button
       type="button"
       v-if="sortable"
@@ -7,13 +7,15 @@
       @click="onSortClick"
       :style="headingStyle"
     >
-      <cv-wrapper :tag-type="headingLabelTag" class="bx--table-header-label">{{ heading }}</cv-wrapper>
+      <cv-wrapper :tag-type="headingLabelTag" class="bx--table-header-label">
+        <slot>{{ heading }}</slot>
+      </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" :style="headingStyle">{{
-      heading
-    }}</cv-wrapper>
+    <cv-wrapper v-else :tag-type="headingLabelTag" class="bx--table-header-label" :style="headingStyle">
+      <slot>{{ heading }}</slot>
+    </cv-wrapper>
   </th>
 </template>
 
@@ -21,8 +23,9 @@
 import ArrowDown16 from '@carbon/icons-vue/es/arrow--down/16';
 import Arrows16 from '@carbon/icons-vue/es/arrows/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
+import uidMixin from '../../mixins/uid-mixin';
 
-const nextSortOrder = {
+const nextOrder = {
   ascending: 'descending',
   descending: 'none',
   none: 'ascending',
@@ -31,37 +34,64 @@ const nextSortOrder = {
 export default {
   name: 'CvDataTableHeading',
   components: { ArrowDown16, Arrows16, CvWrapper },
+  mixins: [uidMixin],
   props: {
-    heading: { type: String, required: true },
+    dataStyle: Object,
+    heading: String,
     sortable: Boolean,
     order: { type: String, default: 'none' },
     skeleton: Boolean,
     headingStyle: Object,
   },
+  data() {
+    return {
+      dataOrder: this.order,
+    };
+  },
+  mounted() {
+    this.$_CvDataTableHeading = true; // for use by parent with $children
+    this.$parent.$emit('cv:mounted', this);
+  },
+  beforeDestroy() {
+    this.$parent.$emit('cv:beforeDestroy', this);
+  },
+  watch: {
+    order() {
+      this.dataOrder = this.order;
+    },
+  },
   computed: {
-    sortOrder() {
-      if (this.order !== 'ascending' && this.order !== 'descending') {
-        return 'none';
-      } else {
-        return this.order;
-      }
+    internalOrder: {
+      get() {
+        if (this.dataOrder !== 'ascending' && this.dataOrder !== 'descending') {
+          return 'none';
+        } else {
+          return this.dataOrder;
+        }
+      },
+      set(val) {
+        if (['ascending', 'descending', 'none'].includes(val)) {
+          this.dataOrder = val;
+        }
+      },
     },
     sortText() {
-      return this.sortOrder !== 'descending'
+      return this.internalOrder !== 'descending'
         ? 'Sort rows by this header in descending order'
         : 'Sort rows by this header in ascending order';
     },
     orderClass() {
       let result = '';
-      if (this.sortOrder === 'descending') {
+      if (this.internalOrder === 'descending') {
         result = 'bx--table-sort--active';
-      } else if (this.sortOrder === 'ascending') {
+      } else if (this.internalOrder === 'ascending') {
         result = 'bx--table-sort--active bx--table-sort--ascending';
       }
       return result;
     },
     headingLabelTag() {
-      return this.heading.length === 0 || !this.skeleton ? 'span' : '';
+      // no tag if non-blank skeleton
+      return this.skeleton && this.heading && this.heading.length > 0 ? '' : 'span';
     },
   },
   model: {
@@ -70,7 +100,7 @@ export default {
   },
   methods: {
     onSortClick() {
-      this.$emit('sort', nextSortOrder[this.sortOrder]);
+      this.$parent.$emit('cv:sort', this, nextOrder[this.internalOrder]);
     },
   },
 };

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

@@ -9,10 +9,8 @@
       </div>
 
       <section v-if="hasToolbar" class="bx--table-toolbar">
-        <div v-if="batchActive" :style="{ minHeight: '48px', maxWidth: '0' }" />
-
         <div
-          v-if="hasBatchActions"
+          v-show="hasBatchActions"
           class="bx--batch-actions"
           :class="{ 'bx--batch-actions--active': batchActive }"
           :aria-label="actionBarAriaLabel"
@@ -34,7 +32,7 @@
           </div>
         </div>
 
-        <div v-if="(hasActions || $listeners.search) && !batchActive" class="bx--toolbar-content">
+        <div class="bx--toolbar-content">
           <div
             v-if="$listeners.search"
             :class="{
@@ -113,16 +111,17 @@
                 @change="onHeadingCheckChange"
               />
             </th>
-            <cv-data-table-heading
-              v-for="(column, index) in dataColumns"
-              :key="`${index}:${column}`"
-              :heading="columnHeading(column)"
-              :sortable="isColSortable(column)"
-              :order="column.order"
-              @sort="val => onSort(index, val)"
-              :heading-style="headingStyle(index)"
-              :skeleton="skeleton"
-            />
+            <slot name="headings">
+              <cv-data-table-heading
+                v-for="(column, index) in columns"
+                :key="`${index}:${column}`"
+                :heading="columnHeading(column)"
+                :sortable="isColSortable(column)"
+                :order="column.order"
+                :heading-style="headingStyle(column)"
+                :skeleton="skeleton"
+              />
+            </slot>
             <th v-if="hasOverflowMenu"></th>
           </tr>
         </thead>
@@ -148,7 +147,6 @@
         </cv-wrapper>
       </table>
     </div>
-
     <cv-pagination
       v-if="pagination"
       v-bind="internalPagination"
@@ -167,7 +165,7 @@
 </template>
 
 <script>
-import CvDataTableHeading from './_cv-data-table-heading';
+import CvDataTableHeading from './cv-data-table-heading';
 import CvDataTableRow from './cv-data-table-row';
 import CvDataTableCell from './cv-data-table-cell';
 import CvButton from '../cv-button/cv-button';
@@ -216,7 +214,7 @@ export default {
     searchClearLabel: { type: String, default: 'Clear search' },
     sortable: Boolean,
     title: String,
-    columns: { type: Array, required: true },
+    columns: Array,
     data: Array,
     zebra: Boolean,
     rowsSelected: { type: Array, default: () => [] },
@@ -231,13 +229,6 @@ export default {
   },
   data() {
     return {
-      dataColumns: this.isSortable
-        ? this.columns.map(item => ({
-            label: item.label ? item.label : item,
-            order: 'none',
-            sortable: item.sortable,
-          }))
-        : this.columns,
       hasBatchActions: false,
       hasActions: false,
       hasToolbar: false,
@@ -249,16 +240,11 @@ export default {
       clearSearchVisible: false,
       searchActive: false,
       registeredRows: [],
+      registeredHeadings: [],
       dataExpandAll: false,
     };
   },
   watch: {
-    sortable() {
-      this.watchColumns();
-    },
-    columns() {
-      this.watchColumns();
-    },
     rowsSelected() {
       this.updateRowsSelected();
     },
@@ -267,9 +253,9 @@ export default {
     // add these on created otherwise cv:mounted is too late.
     this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
     this.$on('cv:beforeDestroy', srcComponent => this.onCvBeforeDestroy(srcComponent));
+    this.$on('cv:sort', (srcComponent, value) => this.onSort(srcComponent, value));
   },
   mounted() {
-    this.watchColumns();
     this.updateRowsSelected();
     this.checkSlots();
   },
@@ -288,7 +274,7 @@ export default {
     },
     isSortable() {
       // is any column sortable
-      return this.sortable || this.columns.some(column => column.sortable);
+      return this.sortable || this.registeredHeadings.some(column => column.sortable);
     },
     isColSortable() {
       return col => {
@@ -336,10 +322,10 @@ export default {
       return `${sizeClass}${zebraClass}${borderlessClass}${skeletonClass}${sortableClass}`.trim();
     },
     headingStyle() {
-      return index => this.dataColumns[index].headingStyle;
+      return col => (typeof col === 'object' ? col.headingStyle : {});
     },
     dataStyle() {
-      return index => this.dataColumns[index].dataStyle;
+      return index => (this.columns && this.columns[index] && this.columns[index].dataStyle) || {};
     },
     selectedRows() {
       return this.dataRowsSelected;
@@ -353,20 +339,36 @@ export default {
       this.hasToolbar = !!(this.$slots.actions || this.$listeners.search || this.$slots['batch-actions']);
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
-    onCvMount(row) {
-      this.registeredRows.push(row);
-      if (this.registeredRows.filter(item => item.uid === row.uid).length > 1) {
-        console.error(
-          `CvDataTable: Duplicate ID specified for CvDataTableRow, this may cause issues. {id: ${row.id}, value: ${row.value}}`
-        );
+    onCvMount(thing) {
+      if (thing.$_CvDataTableHeading) {
+        this.registeredHeadings = this.$children.filter(item => item.$_CvDataTableHeading);
+        const heading = thing;
+        if (this.registeredHeadings.filter(item => item.uid === heading.uid).length > 1) {
+          console.error(
+            `CvDataTable: Duplicate ID specified for CvDataTableHeading, this may cause issues. {id: ${heading.id}}`
+          );
+        }
+      } else {
+        const row = thing;
+        this.registeredRows.push(row);
+        if (this.registeredRows.filter(item => item.uid === row.uid).length > 1) {
+          console.error(
+            `CvDataTable: Duplicate ID specified for CvDataTableRow, this may cause issues. {id: ${row.id}, value: ${row.value}}`
+          );
+        }
+        row.$on('cv:expanded-change', this.onCvExpandedChange);
+        this.updateSomeExpandingRows();
       }
-      row.$on('cv:expanded-change', this.onCvExpandedChange);
-      this.updateSomeExpandingRows();
     },
-    onCvBeforeDestroy(row) {
-      const index = this.registeredRows.findIndex(item => row.uid === item.uid);
-      this.registeredRows.splice(index, 1);
-      this.updateSomeExpandingRows();
+    onCvBeforeDestroy(thing) {
+      if (thing.$_CvDataTableHeading) {
+        this.registeredHeadings = this.$children.filter(item => item.$_CvDataTableHeading);
+      } else {
+        const row = thing;
+        const index = this.registeredRows.findIndex(item => row.uid === item.uid);
+        this.registeredRows.splice(index, 1);
+        this.updateSomeExpandingRows();
+      }
     },
     checkSearchFocus(ev) {
       if (!this.$refs.searchContainer.contains(ev.relatedTarget)) {
@@ -455,25 +457,21 @@ export default {
     onMenuItemClick(val) {
       this.$emit('overflow-menu-click', val);
     },
-    watchColumns() {
-      this.dataColumns = this.isSortable
-        ? this.columns.map(item => ({
-            ...item,
-            label: item.label ? item.label : item,
-            order: 'none',
-            sortable: item.sortable,
-          }))
-        : this.columns;
-    },
     onSearch() {
       this.clearSearchVisible = this.searchValue.length > 0;
       this.$emit('search', this.searchValue);
     },
-    onSort(index, val) {
-      for (let column of this.dataColumns) {
-        column.order = 'none';
+    onSort(srcComponent, val) {
+      let index;
+      for (let colIndex in this.registeredHeadings) {
+        const column = this.registeredHeadings[colIndex];
+        if (column.uid === srcComponent.uid) {
+          column.internalOrder = val;
+          index = colIndex;
+        } else {
+          column.internalOrder = 'none';
+        }
       }
-      this.dataColumns[index].order = val;
       this.$emit('sort', { index, order: val });
     },
     updateSomeExpandingRows() {

package/src/components/cv-data-table/index.js

@@ -2,6 +2,7 @@ import CvDataTableAction from './cv-data-table-action';
 import CvDataTableCell from './cv-data-table-cell';
 import CvDataTableRow from './cv-data-table-row';
 import CvDataTable from './cv-data-table';
+import CvDataTableHeading from './cv-data-table-heading';
 import CvDataTableSkeleton from './cv-data-table-skeleton';
 
-export { CvDataTable, CvDataTableRow, CvDataTableCell, CvDataTableAction, CvDataTableSkeleton };
+export { CvDataTable, CvDataTableRow, CvDataTableCell, CvDataTableAction, CvDataTableHeading, CvDataTableSkeleton };

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

@@ -124,6 +124,8 @@ export default {
   name: 'CvPagination',
   components: { CvSelect, CvSelectOption, CaretLeft16, CaretRight16 },
   props: {
+    backwardsButtonDisabled: Boolean,
+    forwardsButtonDisabled: Boolean,
     backwardText: { type: String, default: 'Prev page' },
     forwardText: { type: String, default: 'Next page' },
     pageNumberLabel: { type: String, default: 'Page number:' },
@@ -173,10 +175,10 @@ export default {
   },
   computed: {
     noWayBack() {
-      return this.pageValue === 1;
+      return this.backwardsButtonDisabled || this.pageValue === 1;
     },
     noWayForward() {
-      return this.pageValue === this.pageCount;
+      return this.forwardsButtonDisabled || this.pageValue === this.pageCount;
     },
     ofNPagesProps() {
       return {

package/src/index.js

@@ -39,6 +39,7 @@ import {
   CvDataTableCell,
   CvDataTableAction,
   CvDataTableSkeleton,
+  CvDataTableHeading,
 } from './components/cv-data-table';
 import { CvDatePicker } from './components/cv-date-picker';
 import { CvDropdown, CvDropdownItem, CvDropdownSkeleton } from './components/cv-dropdown';
@@ -107,7 +108,7 @@ export { CvCheckbox, CvCheckboxSkeleton };
 export { CvCodeSnippet, CvCodeSnippetSkeleton };
 export { CvComboBox };
 export { CvContentSwitcher, CvContentSwitcherButton, CvContentSwitcherContent };
-export { CvDataTable, CvDataTableRow, CvDataTableCell, CvDataTableAction, CvDataTableSkeleton };
+export { CvDataTable, CvDataTableRow, CvDataTableCell, CvDataTableAction, CvDataTableSkeleton, CvDataTableHeading };
 export { CvDatePicker };
 export { CvDropdown, CvDropdownItem, CvDropdownSkeleton };
 export { CvFileUploader, CvFileUploaderSkeleton };