@carbon/vue 2.38.2 → 2.39.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.38.2",
+  "version": "2.39.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -75,5 +75,5 @@
     "eslint-plugin-prettier": "^3.3.1",
     "vue-template-compiler": "^2.6.12"
   },
-  "gitHead": "c45d0c681318b80b76204d9ba4596ffebb3b6bec"
+  "gitHead": "f0b00ac6c8bfaf0f92bebd7776fa5c507d86a7e2"
 }

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

@@ -85,80 +85,86 @@
         </div>
       </section>
 
-      <table
-        :class="[
-          `${carbonPrefix}--data-table`,
-          {
-            [`${carbonPrefix}--data-table--${rowSize} `]: !(rowSize.length === 0 || rowSize === 'standard'),
-            [`${carbonPrefix}--data-table--zebra `]: zebra,
-            [`${carbonPrefix}--data-table--no-border `]: borderless,
-            [`${carbonPrefix}--skeleton `]: skeleton,
-            [`${carbonPrefix}--data-table--sort `]: isSortable,
-          },
-        ]"
-      >
-        <thead>
-          <tr>
-            <th
-              v-if="hasExpandables"
-              :class="`${carbonPrefix}--table-expand`"
-              :data-previous-value="dataExpandAll ? 'collapsed' : 'expanded'"
-            >
-              <button
-                v-if="hasExpandAll"
-                :class="`${carbonPrefix}--table-expand__button`"
-                @click="toggleExpandAll"
-                type="button"
-                :aria-label="dataExpandAll ? collapseAllAriaLabel : expandAllAriaLabel"
-              >
-                <ChevronRight16 :class="`${carbonPrefix}--table-expand__svg`" />
-              </button>
-            </th>
-            <th v-if="hasBatchActions" :class="`${carbonPrefix}--table-column-checkbox`">
-              <cv-checkbox
-                :form-item="false"
-                value="headingCheck"
-                v-model="headingChecked"
-                @change="onHeadingCheckChange"
-                :label="selectAllAriaLabel"
-                hideLabel
-              />
-            </th>
-            <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>
+      <div :class="`${carbonPrefix}--data-table-content`">
+        <cv-wrapper :tagType="stickyHeader ? section : ''" :class="`${carbonPrefix}--data-table_inner-container`">
+          <table
+            :class="[
+              `${carbonPrefix}--data-table`,
+              {
+                [`${carbonPrefix}--data-table--${rowSize} `]: !(rowSize.length === 0 || rowSize === 'standard'),
+                [`${carbonPrefix}--data-table--zebra `]: zebra,
+                [`${carbonPrefix}--data-table--sticky-header `]: stickyHeader,
+                [`${carbonPrefix}--data-table--no-border `]: borderless,
+                [`${carbonPrefix}--skeleton `]: skeleton,
+                [`${carbonPrefix}--data-table--sort `]: isSortable,
+                [`${carbonPrefix}--data-table--static `]: staticWidth,
+              },
+            ]"
+          >
+            <thead>
+              <tr>
+                <th
+                  v-if="hasExpandables"
+                  :class="`${carbonPrefix}--table-expand`"
+                  :data-previous-value="dataExpandAll ? 'collapsed' : 'expanded'"
+                >
+                  <button
+                    v-if="hasExpandAll"
+                    :class="`${carbonPrefix}--table-expand__button`"
+                    @click="toggleExpandAll"
+                    type="button"
+                    :aria-label="dataExpandAll ? collapseAllAriaLabel : expandAllAriaLabel"
+                  >
+                    <ChevronRight16 :class="`${carbonPrefix}--table-expand__svg`" />
+                  </button>
+                </th>
+                <th v-if="hasBatchActions" :class="`${carbonPrefix}--table-column-checkbox`">
+                  <cv-checkbox
+                    :form-item="false"
+                    value="headingCheck"
+                    v-model="headingChecked"
+                    @change="onHeadingCheckChange"
+                    :label="selectAllAriaLabel"
+                    hideLabel
+                  />
+                </th>
+                <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>
 
-        <cv-wrapper :tag-type="hasExpandables ? '' : 'tbody'">
-          <slot name="data">
-            <cv-data-table-row
-              v-for="(row, rowIndex) in data"
-              :key="`row:${rowIndex}`"
-              :value="`${rowIndex}`"
-              ref="dataRows"
-              :overflow-menu="overflowMenu"
-            >
-              <cv-data-table-cell
-                v-for="(cell, colIndex) in row"
-                :key="`cell:${colIndex}:${rowIndex}`"
-                :style="dataStyle(colIndex)"
-              >
-                <cv-wrapper :tag-type="skeleton ? 'span' : ''">{{ cell }}</cv-wrapper>
-              </cv-data-table-cell>
-            </cv-data-table-row>
-          </slot>
+            <cv-wrapper :tag-type="hasExpandables ? '' : 'tbody'">
+              <slot name="data">
+                <cv-data-table-row
+                  v-for="(row, rowIndex) in data"
+                  :key="`row:${rowIndex}`"
+                  :value="`${rowIndex}`"
+                  ref="dataRows"
+                  :overflow-menu="overflowMenu"
+                >
+                  <cv-data-table-cell
+                    v-for="(cell, colIndex) in row"
+                    :key="`cell:${colIndex}:${rowIndex}`"
+                    :style="dataStyle(colIndex)"
+                  >
+                    <cv-wrapper :tag-type="skeleton ? 'span' : ''">{{ cell }}</cv-wrapper>
+                  </cv-data-table-cell>
+                </cv-data-table-row>
+              </slot>
+            </cv-wrapper>
+          </table>
         </cv-wrapper>
-      </table>
+      </div>
     </div>
     <cv-pagination
       v-if="pagination"
@@ -231,11 +237,13 @@ export default {
     columns: Array,
     data: Array,
     zebra: Boolean,
+    stickyHeader: Boolean,
     rowsSelected: { type: Array, default: () => [] },
     helperText: { type: String, default: undefined },
     expandingSearch: { type: Boolean, default: true },
     skeleton: Boolean,
     hasExpandAll: Boolean,
+    staticWidth: Boolean,
   },
   model: {
     prop: 'rows-selected',
@@ -507,6 +515,7 @@ export default {
       } else {
         this.dataExpandAll = false;
       }
+      this.$emit('row-expanded', row);
     },
   },
 };

package/src/components/cv-progress/cv-progress-step.vue

@@ -18,6 +18,7 @@
       :class="[`${carbonPrefix}--progress-label`, { [`${carbonPrefix}--progress-label-overflow`]: showOverflow }]"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
+      @click="$emit('step-clicked', $event)"
       ref="label"
     >
       {{ label }}

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

@@ -11,6 +11,7 @@
         :label="step"
         :complete="initialStep > index"
         ref="steps"
+        @step-clicked="$emit('step-clicked', $event)"
       />
     </slot>
   </ul>