@carbon/vue 3.0.13 → 3.0.15

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.12",
+  "version": "3.0.14",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -923,6 +923,7 @@
           "attributes": [
             {
               "name": "actionBarAriaLabel",
+              "description": "Arial label for the action bar.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -931,6 +932,7 @@
             },
             {
               "name": "collapseAllAriaLabel",
+              "description": "Arial label for the \"collapse all\" button in tables with expandable rows\".",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -939,6 +941,7 @@
             },
             {
               "name": "expandAllAriaLabel",
+              "description": "Arial label for the \"expand all\" button in tables with expandable rows\".",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -947,6 +950,7 @@
             },
             {
               "name": "selectAllAriaLabel",
+              "description": "Arial label for the \"select all\" button in tables with selectable rows\".",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1049,6 +1053,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "expandable",
+              "description": "Table will have expandable rows",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "title",
               "value": {
@@ -1077,7 +1090,7 @@
             },
             {
               "name": "zebra",
-              "description": "the table striped",
+              "description": "`true` to use Zebra style striping.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1102,8 +1115,18 @@
               },
               "default": "[]"
             },
+            {
+              "name": "stickyBatchActive",
+              "description": "Normally batch actions are hidden if no items are selected. Set this to true to always show batch actions",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "helperText",
+              "description": "subtext on the table",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1112,6 +1135,7 @@
             },
             {
               "name": "expandingSearch",
+              "description": "Animate the search bar opening",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1120,6 +1144,7 @@
             },
             {
               "name": "skeleton",
+              "description": "Show table loading / skeleton state",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1128,6 +1153,7 @@
             },
             {
               "name": "hasExpandAll",
+              "description": "Should the expand all button be available",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1145,6 +1171,7 @@
             },
             {
               "name": "onSearch",
+              "description": "User defined search action",
               "value": {
                 "kind": "expression",
                 "type": "func"
@@ -4731,7 +4758,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "'red'"
+              "default": "undefined"
             },
             {
               "name": "filter",

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.13",
+  "version": "3.0.15",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
   "packageManager": "yarn@3.2.0",
   "main": "dist/carbon-vue-3.umd.min.js",
   "types": "src/index.d.ts",
   "web-types": "dist/web-types.json",
   "scripts": {
-    "_postinstall": "node prepare.js && node .storybook/postinstall.js",
+    "_postinstall": "node prepare.js && node .storybook/postinstall.js && ibmtelemetry --config=telemetry.yml",
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "build": "vue-cli-service build --target lib --name carbon-vue-3 ./src/index.js --no-clean",
     "lint": "vue-cli-service lint",
     "build-web-types": "vue-docgen-web-types --outFile dist/web-types.json",
-    "ci-check": "yarn format:diff && yarn test && yarn build && yarn build-web-types",
+    "add-components-exports": "node addNamedComponentExports.js",
+    "ci-check": "yarn add-components-exports && yarn format:diff && yarn test && yarn build && yarn build-web-types",
     "format": "prettier --write '**/*.{scss,css,js,md,vue}' '!**/{build,es,lib,storybook,ts,umd,.coverage}/**'",
     "format:diff": "prettier --list-different '**/*.{scss,css,js,md,vue}' '!**/{dist,storybook-static,.coverage}/**'",
     "format:staged": "prettier --write '**/*.{scss,css,js,md,vue}' '!**/{dist,storybook-static,.coverage}/**'",
@@ -29,6 +30,7 @@
   ],
   "dependencies": {
     "@carbon/icons-vue": "^10.60.0",
+    "@ibm/telemetry-js": "^1.2.1",
     "@vueuse/core": "^4.11.2",
     "carbon-components": "^10.58.5",
     "eslint-plugin-prettier-vue": "^4.2.0",
@@ -157,7 +159,8 @@
   },
   "files": [
     "/dist",
-    "/src"
+    "/src",
+    "telemetry.yml"
   ],
   "commitlint": {
     "extends": [
@@ -174,5 +177,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "44c7e6ba63dee51b7f6426b46283b40deaed413c"
+  "gitHead": "42b70938c7b033489892a7f7b27e2b1a8ba1e3d9"
 }

package/src/components/CvAccordion/CvAccordion.stories.mdx

@@ -13,6 +13,11 @@ const open = ref({
   accItem3: false,
   accItem4: false,
 });
+const disabledItems = ref(new Set())
+function onToggleEpisode3(){
+  if (disabledItems.value.has(3)) disabledItems.value.delete(3)
+  else disabledItems.value.add(3)
+}
 
 <Meta title={`${sbCompPrefix}/CvAccordion`} component={CvAccordion} />
 
@@ -24,19 +29,23 @@ export const Template = args => ({
       align: alignConsts[alignConsts.$labels[args.align]],
       size: sizeConsts[sizeConsts.$labels[args.size]],
       onChange: action('change'),
+      disabledItems,
+      onToggleEpisode3,
       open,
     };
   },
   template: args.template,
 });
 const template = `<cv-accordion @change="onChange" :align="align" :size="size">
-  <cv-accordion-item v-for="n in 4" :key="\`acc-item-\${n}\`" :id="n % 2 ? \`acc-item-\${n}\` : ''">
+  <cv-accordion-item v-for="n in 4" :key="\`acc-item-\${n}\`" :id="n % 2 ? \`acc-item-\${n}\` : ''" :disabled="disabledItems.has(n)">
     <template v-slot:title>Episode {{n}} </template>
     <template v-slot:content>
       <p>Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? R2! R2-D2, where are you? At last! Where have you been? They're heading in this direction.</p>
     </template>
   </cv-accordion-item>
-</cv-accordion>`;
+</cv-accordion>
+<div><button @click="onToggleEpisode3">Disable Episode 3</button></div>
+`;
 const Default = Template.bind({});
 Default.args = {};
 Default.parameters = storyParametersObject(

package/src/components/CvAccordion/CvAccordionItem.vue

@@ -15,7 +15,7 @@
   >
     <button
       ref="button"
-      :disabled="disabled"
+      :disabled="disabled || null"
       type="button"
       :class="`${carbonPrefix}--accordion__heading`"
       :aria-expanded="isOpen ? 'true' : 'false'"

package/src/components/CvBreadcrumb/CvBreadcrumb.vue

@@ -1,6 +1,7 @@
 <template>
   <nav :aria-label="ariaLabel">
     <ol
+      class="cv-breadcrumb"
       :class="[
         `${carbonPrefix}--breadcrumb`,
         { [`${carbonPrefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash },

package/src/components/CvBreadcrumb/CvBreadcrumbItem.vue

@@ -1,5 +1,6 @@
 <template>
   <li
+    class="cv-breadcrumb-item"
     :class="[
       `${carbonPrefix}--breadcrumb-item`,
       { [`${carbonPrefix}--breadcrumb-item--current`]: isCurrentPage },

package/src/components/CvButton/CvButton.vue

@@ -1,5 +1,6 @@
 <template>
   <button
+    class="cv-button"
     :class="buttonClasses"
     :disabled="disabled || skeleton"
     @click="$emit('click', $event)"

package/src/components/CvButton/CvButtonSet.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    class="cv-button-set"
     :class="[
       `${carbonPrefix}--btn-set`,
       { [`${carbonPrefix}--btn-set--stacked`]: stacked },

package/src/components/CvButton/CvIconButton.vue

@@ -1,5 +1,6 @@
 <template>
   <button
+    class="cv-button"
     :class="[
       buttonClasses,
       `${carbonPrefix}--tooltip__trigger`,
@@ -7,7 +8,7 @@
       `${carbonPrefix}--tooltip--${tipPosition || 'bottom'}`,
       `${carbonPrefix}--tooltip--align-${tipAlignment || 'center'}`,
     ]"
-    :disabled="disabled"
+    :disabled="disabled || null"
     @click="$emit('click', $event)"
   >
     <span :class="`${carbonPrefix}--assistive-text`">{{ label }}</span>

package/src/components/CvCheckbox/CvCheckbox.vue

@@ -2,8 +2,9 @@
   <div
     class="cv-checkbox"
     :class="[
-      `${carbonPrefix}--checkbox--${inline ? 'inline' : 'wrapper'}`,
       { [`${carbonPrefix}--form-item`]: formItem },
+      { [`${carbonPrefix}--checkbox--inline`]: inline },
+      { [`${carbonPrefix}--checkbox-wrapper`]: !inline },
     ]"
   >
     <input

package/src/components/CvCodeSnippet/CvCodeSnippet.vue

@@ -1,7 +1,12 @@
 <template>
-  <component :is="component" v-bind="subProps" @copy="handleCopy"
-    ><slot
-  /></component>
+  <component
+    :is="component"
+    v-bind="subProps"
+    class="cv-code-snippet"
+    @copy="handleCopy"
+  >
+    <slot />
+  </component>
 </template>
 
 <script>

package/src/components/CvCodeSnippet/_CviCodeSnippetInline.vue

@@ -48,6 +48,7 @@ export default {
   setup(props, { emit }) {
     const codeId = useCvId();
     const classes = computed(() => [
+      'cv-code-snippet-inline',
       `${carbonPrefix}--snippet`,
       `${carbonPrefix}--snippet--inline`,
       {

package/src/components/CvCodeSnippet/_CviCodeSnippetMultiline.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    class="cv-code-snippet-multiline"
     :class="[
       `${carbonPrefix}--snippet`,
       `${carbonPrefix}--snippet--multi`,

package/src/components/CvCodeSnippet/_CviCodeSnippetOneline.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    class="cv-code-snippet-oneline"
     :class="[
       `${carbonPrefix}--snippet`,
       `${carbonPrefix}--snippet--single`,

package/src/components/CvComboBox/CvComboBox.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    class="cv-combo-box"
     :class="`${carbonPrefix}--list-box__wrapper`"
     @focusout="onFocusOut"
   >
@@ -62,7 +63,7 @@
           :aria-disabled="disabled || null"
           :aria-expanded="open ? 'true' : 'false'"
           autocomplete="off"
-          :disabled="disabled"
+          :disabled="disabled || null"
           :placeholder="label"
           @input="onInput"
           @focus="inputFocus"

package/src/components/CvDataTable/CvDataTable.stories.mdx

@@ -6,7 +6,7 @@ import CvDataTableCell from "./CvDataTableCell.vue";
 import CvDataTableAction from "./CvDataTableAction.vue";
 import CvDataTableSkeleton from "./CvDataTableSkeleton.vue";
 import CvButton from '../CvButton/CvButton.vue'
-import { sbCompPrefix } from '../../global/storybook-utils';
+import { sbCompPrefix, storySourceCode } from '../../global/storybook-utils';
 import { action } from '@storybook/addon-actions';
 import { Terminal16 as CompileIcon, Debug16 as DebugIcon, Chip16 as EmbedIcon,
   TrashCan16 as TrashCanIcon} from '@carbon/icons-vue'
@@ -76,14 +76,14 @@ setup() {
     skeletonCols: args.skeletonCols,
     skeletonTitle: args.title,
     skeletonHelper: args.helperText,
-    testData
+    testData,
     };
 },
 // And then the `args` are bound to your component with `v-bind="args"`
 template: args.template,
 });
 const defaultTemplate = `
-<cv-data-table
+<cv-data-table v-bind="args"
   @search="onSearch"
   @sort="onSort"
   @row-select-change="onRowSelectChange"
@@ -91,12 +91,11 @@ const defaultTemplate = `
   @overflow-menu-click="onOverflowMenuClick"
   @row-expanded="onRowExpanded"
   @pagination="onPagination"
-  v-bind="args"
   >
-  <template v-if="useBatchActions" v-slot:batch-actions>
+  <template v-if="useBatchActions" #batch-actions>
     <cv-button :icon="trashIcon" @click="onDelete">Delete</cv-button>
   </template>
-  <template v-if="useActions" v-slot:actions>
+  <template v-if="useActions" #actions>
     <cv-data-table-action @click="onAction1" aria-label="compile" alt="compile">
       <compile-icon>
         <title>Compile</title>
@@ -142,6 +141,16 @@ const skeletonTemplate = `
   :rows="skeletonRows"
   :title="skeletonTitle"
   :helperText="skeletonHelper">
+  <template v-if="useBatchActions" #batch-actions>
+    <cv-button :icon="trashIcon" @click="onDelete">Delete</cv-button>
+  </template>
+  <template v-if="useActions" #actions>
+    <cv-data-table-action @click="onAction1" aria-label="compile" alt="compile">
+      <compile-icon>
+        <title>Compile</title>
+      </compile-icon>
+    </cv-data-table-action>
+  </template>
 </cv-data-table-skeleton>
 `;
 
@@ -184,6 +193,8 @@ completion for it. See [discussion](https://github.com/vuejs/core/issues/3432) f
 - The Vue 3 implementation uses an internal store to manage the state of the table. You can see updates
 to the state by setting the debug variable in the local storage. `localStorage.debug="cv:data-table-store"`
 and then reloading the page.
+- If you were using something like `this.$refs.tableEditPath.batchActive = true` to force batch actions to show even
+when no items were select, please now use the new property `stickyBatchActive`.
 
 <Canvas>
   <Story
@@ -206,9 +217,10 @@ and then reloading the page.
           'items-selected',
           'of-n-pages',
           'range-text',
-          'skeleton'
+          'skeleton',
+          'update:rowsSelected',
         ] },
-      docs: { source: { code: defaultTemplate.replace('v-bind="args"', '') } },
+      docs: { source: { code: storySourceCode(defaultTemplate, Template.args) } },
     }}
     args={{
       template: defaultTemplate,
@@ -248,8 +260,9 @@ and then reloading the page.
           'of-n-pages',
           'range-text',
           'skeleton',
+          'update:rowsSelected',
         ] },
-      docs: { source: { code: expandingRowsTemplate.replace('v-bind="args"', '') } },
+      docs: { source: { code: storySourceCode(expandingRowsTemplate, Template.args) } },
     }}
     args={{
       template: expandingRowsTemplate,
@@ -273,46 +286,8 @@ and then reloading the page.
   <Story
     name="Skeleton"
     parameters={{
-      controls: { exclude: [
-          'template',
-          'actionBarAriaLabel',
-          'autoWidth',
-          'batchCancelLabel',
-          'borderless',
-          'collapseAllAriaLabel',
-          'expandAllAriaLabel',
-          'expandingSearch',
-          'hasExpandAll',
-          'initialSearchValue',
-          'overflowMenu',
-          'rowSize',
-          'rowsSelected',
-          'searchClearLabel',
-          'searchLabel',
-          'searchPlaceholder',
-          'selectAllAriaLabel',
-          'skeleton',
-          'sortable',
-          'staticWidth',
-          'stickyHeader',
-          'zebra',
-          'overflow-menu-click',
-          'pagination',
-          'row-expanded',
-          'actions',
-          'batch-actions',
-          'data',
-          'headings',
-          'row-select-change',
-          'row-select-changes',
-          'sort',
-          'helper-text',
-          'items-selected',
-          'of-n-pages',
-          'range-text',
-          'columns'
-        ] },
-      docs: { source: { code: skeletonTemplate.replace('v-bind="args"', '') } },
+      controls: { include: [ 'skeletonCols', 'skeletonRows', 'title', 'helperText', 'useBatchActions', 'useActions'] },
+      docs: { source: { code: storySourceCode(skeletonTemplate, Template.args) } },
     }}
     args={{
       template: skeletonTemplate,
@@ -320,6 +295,8 @@ and then reloading the page.
       helperText: 'Data has been requested...',
       skeletonRows: 5,
       skeletonCols: 5,
+      useBatchActions: false,
+      useActions: false
     }}
     argTypes={{
     }}