@carbon/vue 3.0.21 → 3.0.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.21",
+  "version": "3.0.23",
   "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",
@@ -51,7 +51,7 @@
     "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
     "@vue/compiler-sfc": "^3.3.4",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/test-utils": "^2.2.4",
     "@vue/vue3-jest": "^27.0.0",
     "accessibility-checker": "^3.1.59",
@@ -61,17 +61,17 @@
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.7.2",
     "eslint": "^8.28.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-vue": "^8.7.1",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
     "lerna": "^6.5.1",
-    "lint-staged": "^12.5.0",
+    "lint-staged": "^15.2.10",
     "postcss": "^8.4.19",
-    "postcss-loader": "^6.2.1",
+    "postcss-loader": "^8.1.1",
     "prettier": "^2.8.0",
     "sass": "^1.56.1",
-    "sass-loader": "^12.6.0",
+    "sass-loader": "^16.0.2",
     "storybook": "^6.5.13",
     "style-loader": "^3.3.1",
     "stylelint": "^14.15.0",
@@ -170,7 +170,10 @@
   },
   "lint-staged": {
     "*.{scss,css,js,md,vue}": [
-      "yarn format:staged"
+      "prettier --write"
+    ],
+    "*.{js,vue}": [
+      "eslint --fix --max-warnings 0"
     ]
   },
   "repository": {

package/src/components/CvAspectRatio/CvAspectRatio.stories.js

@@ -1,15 +1,12 @@
 import { h } from 'vue';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 import { CvAspectRatio, CvAspectRatioConsts } from '.';
 
 import './CvAspectRatio.stories.scss';
 
 export default {
-  title: `${sbCompPrefix}/CvAspectRatio`,
+  title: 'Component/CvAspectRatio',
   component: CvAspectRatio,
   decorators: [
     story => h('div', { class: 'aspect-ratio-story' }, story().render()),

package/src/components/CvBreadcrumb/CvBreadcrumb.stories.js

@@ -5,13 +5,10 @@ import {
   CvBreadcrumbSkeletonItem,
 } from '.';
 
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 export default {
-  title: `${sbCompPrefix}/CvBreadcrumb`,
+  title: 'Component/CvBreadcrumb',
   component: CvBreadcrumb,
   argTypes: {
     ariaLabel: {

package/src/components/CvButton/CvButton.stories.js

@@ -2,12 +2,10 @@ import { action } from '@storybook/addon-actions';
 import { CvButton } from './';
 import { buttonKinds, buttonSizes } from './consts';
 import {
-  sbCompPrefix,
   splitSlotArgs,
   storybookControlsFromProps,
   storyParametersObject,
 } from '../../global/storybook-utils';
-import { sbBtnPrefix } from './sbBtnPrefix';
 import { props as commonCvButtonProps } from './CvButtonCommon';
 import {
   Bee20,
@@ -28,7 +26,7 @@ const icons = {
 };
 
 export default {
-  title: `${sbCompPrefix}/${sbBtnPrefix}/CvButton`,
+  title: 'Component/CvButton',
   component: CvButton,
   argTypes: {
     ...storybookControlsFromProps(commonCvButtonProps),

package/src/components/CvButton/CvButtonSet.stories.js

@@ -1,13 +1,9 @@
 import { CvButtonSet, CvButton } from './';
 
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
-import { sbBtnPrefix } from './sbBtnPrefix';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 export default {
-  title: `${sbCompPrefix}/${sbBtnPrefix}/CvButtonSet`,
+  title: 'Component/CvButtonSet',
   component: CvButtonSet,
 };
 

package/src/components/CvButton/CvButtonSkeleton.stories.js

@@ -1,16 +1,14 @@
 import { CvButtonSkeleton } from '.';
 import { buttonSizes } from './consts.js';
 import {
-  sbCompPrefix,
   storybookControlsFromProps,
   storyParametersObject,
 } from '../../global/storybook-utils';
-import { sbBtnPrefix } from './sbBtnPrefix';
 
 import { props as commonCvButtonProps } from './CvButtonCommon';
 
 export default {
-  title: `${sbCompPrefix}/${sbBtnPrefix}/CvButtonSkeleton`,
+  title: 'Component/CvButtonSkeleton',
   component: CvButtonSkeleton,
   argTypes: {
     ...storybookControlsFromProps({ size: commonCvButtonProps.size }),

package/src/components/CvButton/CvIconButton.stories.js

@@ -2,12 +2,10 @@ import { action } from '@storybook/addon-actions';
 import { CvIconButton } from './';
 import { buttonKinds, buttonSizes } from './consts.js';
 import {
-  sbCompPrefix,
   storybookControlsFromProps,
   storyParametersObject,
 } from '../../global/storybook-utils';
 import { TipAlignments } from '../CvTooltip/consts.js';
-import { sbBtnPrefix } from './sbBtnPrefix';
 
 import { props as commonCvButtonProps } from './CvButtonCommon';
 import {
@@ -29,7 +27,7 @@ const icons = {
 };
 
 export default {
-  title: `${sbCompPrefix}/${sbBtnPrefix}/CvIconButton`,
+  title: 'Component/CvIconButton',
   component: CvIconButton,
   argTypes: {
     ...storybookControlsFromProps(commonCvButtonProps),

package/src/components/CvCheckbox/CvCheckbox.stories.js

@@ -1,5 +1,4 @@
 import {
-  sbCompPrefix,
   storybookControlsFromProps,
   storyParametersObject,
 } from '../../global/storybook-utils';
@@ -10,7 +9,7 @@ import { props as propsCvCheck } from '../../use/cvCheck';
 import { ref } from 'vue';
 
 export default {
-  title: `${sbCompPrefix}/CvCheckbox`,
+  title: 'Component/CvCheckbox',
   component: CvCheckbox,
   argTypes: {
     ...storybookControlsFromProps(propsCvCheck),

package/src/components/CvCodeSnippet/CvCodeSnippet.stories.js

@@ -1,6 +1,5 @@
 import { carbonPrefix } from '../../global/settings';
 import {
-  sbCompPrefix,
   splitSlotArgs,
   storyParametersObject,
 } from '../../global/storybook-utils';
@@ -12,7 +11,7 @@ import CvCodeSnippetConsts from './consts';
 import './CvCodeSnippet.stories.scss';
 
 export default {
-  title: `${sbCompPrefix}/CvCodeSnippet`,
+  title: 'Component/CvCodeSnippet',
   component: CvCodeSnippet,
   argTypes: {
     default: { control: { type: 'text' } },

package/src/components/CvComboBox/CvComboBox.stories.js

@@ -1,7 +1,4 @@
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 import { CvComboBox } from '.';
 import { action } from '@storybook/addon-actions';
@@ -41,7 +38,7 @@ const initArgs = {
 };
 
 export default {
-  title: `${sbCompPrefix}/CvComboBox`,
+  title: 'Component/CvComboBox',
   component: CvComboBox,
   parameters: {
     a11y: {

package/src/components/CvCopyButton/CvCopyButton.stories.js

@@ -1,13 +1,10 @@
 import CvCopyButton from '.';
 
 import { action } from '@storybook/addon-actions';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 export default {
-  title: `${sbCompPrefix}/CvCopyButton`,
+  title: 'Component/CvCopyButton',
   component: CvCopyButton,
   argTypes: {},
 };

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

@@ -44,6 +44,7 @@ function searchTestData(opts) {
   else testData.value = originalTestData.value.filter(data => data.name.indexOf(opts) > -1)
   return sortTestData(sortOpts.value)
 }
+const selectedRows = ref(["COBOL"])
 
 <Meta title={`${sbCompPrefix}/CvDataTable`} component={CvDataTable} />
 
@@ -75,6 +76,7 @@ setup() {
     onRowSelectChange: action('row-select-change'),
     onRowSelectChanges: action('row-select-changes'),
     onOverflowMenuClick: action('overflow-menu-click'),
+    onVmodel: action('v-model'),
     onRowExpanded: action('row-expanded'),
     onPagination: action('pagination'),
     onAction1: action('compile'),
@@ -84,13 +86,15 @@ setup() {
     useActions: args.useActions,
     useBatchActions: args.useBatchActions,
     useHelperTextSlot: args.useHelperTextSlot,
+    usePagination: args.usePagination,
     skeletonRows: args.skeletonRows,
     skeletonCols: args.skeletonCols,
     skeletonTitle: args.title,
     skeletonHelper: args.helperText,
     testData,
     originalTestData,
-    searchOpts
+    searchOpts,
+    selectedRows
     };
 },
 // And then the `args` are bound to your component with `v-bind="args"`
@@ -105,6 +109,7 @@ const defaultTemplate = `
   @overflow-menu-click="onOverflowMenuClick"
   @row-expanded="onRowExpanded"
   @pagination="onPagination"
+  :pagination="usePagination"
   :initialSearchValue="searchOpts"
   >
   <template v-if="useBatchActions" #batch-actions>
@@ -128,14 +133,14 @@ const defaultTemplate = `
     </cv-data-table-action>
   </template>
   <template #headings>
-    <cv-data-table-heading heading="Name" name="name" sortable/>
-    <cv-data-table-heading heading="Year" name="year" sortable/>
-    <cv-data-table-heading heading="Object Oriented"/>
-    <cv-data-table-heading heading="Purpose" />
-    <cv-data-table-heading heading="Standard" />
+    <cv-data-table-heading id="sb-name" heading="Name" name="name" sortable order="ascending"/>
+    <cv-data-table-heading id="sb-year" heading="Year" name="year" sortable/>
+    <cv-data-table-heading id="sb-oo" heading="Object Oriented"/>
+    <cv-data-table-heading id="sb-purpose" heading="Purpose" />
+    <cv-data-table-heading id="sb-standard" heading="Standard" />
   </template>
   <template #data>
-    <cv-data-table-row v-for="row in testData" :key="row.name" :value="row.name">
+    <cv-data-table-row v-for="row in testData" :id="row.name" :key="row.name" :value="row.name">
       <cv-data-table-cell>{{row.name}}</cv-data-table-cell>
       <cv-data-table-cell>{{row.year}}</cv-data-table-cell>
       <cv-data-table-cell>{{row.oo}}</cv-data-table-cell>
@@ -149,7 +154,7 @@ const defaultTemplate = `
 const expandingRowsTemplate = defaultTemplate.replace(
   "<!-- Add optional expanding data here -->",
   `<template #expandedContent>{{row.desc}}</template>`)
-  .replace('@search="onSearch"', '')
+  .replace('@search="onSearch"', ':expandable="true"')
   .replace('testData', 'originalTestData')
 const skeletonTemplate = `
 <cv-data-table-skeleton
@@ -169,6 +174,17 @@ const skeletonTemplate = `
   </template>
 </cv-data-table-skeleton>
 `;
+const vModelTemplate = defaultTemplate
+  .replace('@search="onSearch"', 'v-model:rows-selected="selectedRows"')
+  .replace('@row-select-change="onRowSelectChange"', '@update:rows-selected="onVmodel"')
+  .replace('@row-select-changes="onRowSelectChanges"','')
+  .replace('testData', 'originalTestData') + `
+<div style="margin-top:1rem; background-color: #888888;  padding:1rem"><div style="font-size: 150%">Sample interaction</div>
+<select name="programming-languages" id="programming-languages" v-model="selectedRows" multiple>
+  <option v-for="l in originalTestData" :id="l.name" :key="l.name" :value="l.name">{{l.name}}</option>
+</select>
+<div>selections: {{ selectedRows }} </div>
+</div>`
 
 # CvDataTable
 
@@ -197,6 +213,7 @@ const skeletonTemplate = `
   }
   ```
 - The search bar appears only if the search event is listened for.
+- If your table has expanding rows, you MUST set the `expandable` property on CvTable to `true`. `<cv-table :expandable="true" ...`
 
 **Row attributes:**
 - aria-label-for-batch-checkbox: Aria label for batch checkbox. default 'Select row N for batch action'.
@@ -251,10 +268,12 @@ when no items were select, please now use the new property `stickyBatchActive`.
       helperText: 'Table helper text',
       useActions: false,
       useBatchActions: false,
+      usePagination: true
     }}
     argTypes={{
       rowSize: { control: 'select', default: 'lg', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
       rowsSelected: { control: 'multi-select',  options: ['Java', 'COBOL', 'C++'] },
+      useBatchActions: { description: "To use batch actions you should assign a usable `id` to each row. i.e. `<cv-data-table-row :id=\"item.id\" ...` This `id` value is passed to the row selection events." }
     }}
   >
     {Template.bind({})}
@@ -265,34 +284,17 @@ when no items were select, please now use the new property `stickyBatchActive`.
   <Story
     name="Expanding rows"
     parameters={{
-      controls: { exclude: ['default',
-          'template',
-          'overflow-menu-click',
-          'pagination',
-          'row-expanded',
-          'row-select-change',
-          'row-select-changes',
-          'search',
-          'sort',
-          'actions',
-          'batch-actions',
-          'data',
-          'headings',
-          'helper-text',
-          'items-selected',
-          'of-n-pages',
-          'range-text',
-          'skeleton',
-          'update:rowsSelected',
-        ] },
+      controls: { include: [ "helperText", "title", "hasExpandAll"] },
       docs: { source: { code: storySourceCode(expandingRowsTemplate, Template.args) } },
     }}
     args={{
       template: expandingRowsTemplate,
-      title: 'Table with expanding rows',
+      title: 'Table with expanding rows - NOTE: expandable property must be set to true',
       helperText: 'Click row to expand',
       useActions: false,
       useBatchActions: false,
+      usePagination: true,
+      expandable: true
     }}
     argTypes={{
       rowSize: { control: 'select', default: 'standard', options: ['compact', 'short', 'standard', 'tall'] },
@@ -319,7 +321,36 @@ when no items were select, please now use the new property `stickyBatchActive`.
       skeletonRows: 5,
       skeletonCols: 5,
       useBatchActions: false,
-      useActions: false
+      useActions: false,
+      usePagination: true
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+
+# Using v-model selected rows
+If you are using the selected rows for batch actions or any other purpose, you should assign usable values to the rows.
+  It is these values that are included in the selected rows events and in the selected rows v-model. Set the v-model on the
+  cv-table like `<cv-table v-model:rows-selected="selectedRows" ...`
+
+<Canvas>
+  <Story
+    name="v-model Selected Rows"
+    parameters={{
+      controls: { include: [ ] },
+      docs: { source: { code: storySourceCode(vModelTemplate, Template.args) } },
+    }}
+    args={{
+      template: vModelTemplate,
+      title: 'v-model example',
+      helperText: 'select rows to see updates',
+      useBatchActions: true,
+      useActions: false,
+      usePagination: false
     }}
     argTypes={{
     }}