@carbon/vue 3.0.20 → 3.0.22

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.19",
+  "version": "3.0.21",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1342,8 +1342,18 @@
           "name": "CvDataTableRow",
           "description": "",
           "attributes": [
+            {
+              "name": "value",
+              "description": "The value associated with the input (required for tables with batch actions)",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
             {
               "name": "expanded",
+              "description": "This row will be initially expanded",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1504,6 +1514,9 @@
           "events": [
             {
               "name": "update:modelValue"
+            },
+            {
+              "name": "dateChange"
             }
           ],
           "slots": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.20",
+  "version": "3.0.22",
   "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",
@@ -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",
     "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",

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,12 +9,12 @@ import { props as propsCvCheck } from '../../use/cvCheck';
 import { ref } from 'vue';
 
 export default {
-  title: `${sbCompPrefix}/CvCheckbox`,
+  title: 'Component/CvCheckbox',
   component: CvCheckbox,
   argTypes: {
     ...storybookControlsFromProps(propsCvCheck),
     value: {
-      type: 'string',
+      type: { raw: 'string', required: true },
       description:
         'The value associated with the input (this is also the value that is sent on submit)',
       table: {
@@ -68,6 +67,7 @@ const Template = args => {
 
 export const Default = Template.bind({});
 Default.args = { label: 'checkbox', value: 'check-1' };
+Default.parameters = { controls: { sort: 'requiredFirst' } };
 Default.parameters = storyParametersObject(
   Default.parameters,
   template,
@@ -81,7 +81,7 @@ const templateVModel = `<div>
 </cv-checkbox>
 <div style="margin-top:1rem; background-color: #888888;  padding:1rem"><div style="font-size: 150%">Sample interaction</div>
 <label for="checkbox">V-model: Check 1:</label>
-<input id="checkbox" type="checkbox" @change="(ev) => {modelValue = ev.currentTarget.checked}" />
+<input id="checkbox" type="checkbox" v-model="modelValue" />
 <div>Checked: <span style="font-weight: bold;">{{modelValue}}</span></div>
 </div>
 </div>
@@ -103,6 +103,7 @@ vModel.args = {
   label: 'checkbox',
   value: 'check-1',
 };
+vModel.parameters = { controls: { sort: 'requiredFirst' } };
 vModel.parameters = storyParametersObject(
   vModel.parameters,
   templateVModel,

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

@@ -21,8 +21,10 @@ const testData = ref([
   { index:"6", name:"Fortran", year:1957, oo:"No", purpose:"Engineering applications", standard:"ANSI", desc: "Fortran was originally developed by IBM in the 1950s for scientific and engineering applications, and subsequently came to dominate scientific computing."},
   { index:"7", name:"Go", year:2009, oo:"Maybe", purpose:"Networked applications", standard:"Go Spec", desc: "Go's designers were primarily motivated by their shared dislike of C++."},
 ]);
+const sortOpts = ref({index: "0", order: "none", name: "name"})
 function sortTestData(opts) {
   action('sort')(opts)
+  sortOpts.value = opts
   if (opts.order === 'none')
     return testData.value.sort((a, b) => a.index.localeCompare(b.index, 'en', { sensitivity: 'base' }));
   let direction = 1
@@ -32,6 +34,17 @@ function sortTestData(opts) {
   else if (opts.name === 'year')
     return testData.value.sort((a, b) => direction * (a.year - b.year));
 }
+// duplicate the test data
+const originalTestData = ref(JSON.parse(JSON.stringify(testData.value)))
+const searchOpts = ref("")
+function searchTestData(opts) {
+  action('search')(opts)
+  searchOpts.value = opts
+  if (!opts) testData.value = JSON.parse(JSON.stringify(originalTestData.value))
+  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} />
 
@@ -59,10 +72,11 @@ setup() {
       template: undefined},
     trashIcon: TrashCanIcon,
     onSort: sortTestData,
-    onSearch: action('search'),
+    onSearch: searchTestData,
     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'),
@@ -72,11 +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,
+    selectedRows
     };
 },
 // And then the `args` are bound to your component with `v-bind="args"`
@@ -91,6 +109,8 @@ const defaultTemplate = `
   @overflow-menu-click="onOverflowMenuClick"
   @row-expanded="onRowExpanded"
   @pagination="onPagination"
+  :pagination="usePagination"
+  :initialSearchValue="searchOpts"
   >
   <template v-if="useBatchActions" #batch-actions>
     <cv-button :icon="trashIcon" @click="onDelete">Delete</cv-button>
@@ -113,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>
@@ -135,6 +155,7 @@ const expandingRowsTemplate = defaultTemplate.replace(
   "<!-- Add optional expanding data here -->",
   `<template #expandedContent>{{row.desc}}</template>`)
   .replace('@search="onSearch"', '')
+  .replace('testData', 'originalTestData')
 const skeletonTemplate = `
 <cv-data-table-skeleton
   :columns="skeletonCols"
@@ -153,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
 
@@ -160,7 +192,10 @@ const skeletonTemplate = `
 - Sorting, filtering and pagination are the responsibility of the component user. This component raises events to facilitate this.
   For example the test data is sorted like this but this is very specific to this data. Users will need to provide their own sort and filtering.
   ```javascript
+  // sort example
+  const sortOpts = ref({index: "0", order: "none", name: "name"})
   function sortTestData(opts) {
+    sortOpts.value = opts // remember this so it can be used in filtering
     if (opts.order === 'none')
       return testData.value.sort((a, b) => a.index.localeCompare(b.index, 'en', { sensitivity: 'base' }));
     let direction = 1
@@ -170,6 +205,12 @@ const skeletonTemplate = `
     else if (opts.name === 'year')
       return testData.value.sort((a, b) => direction * (a.year - b.year));
   }
+  // filter example
+  function searchTestData(opts) {
+    if (!opts) testData.value = allData.value
+    else testData.value = allData.value.filter(data => data.name.indexOf(opts) > -1)
+    return sortTestData(sortOpts.value)
+  }
   ```
 - The search bar appears only if the search event is listened for.
 
@@ -178,6 +219,7 @@ const skeletonTemplate = `
 - aria-label-expand-row: Aria label for expanding row expansion button. default: 'Expand current row'
 - aria-label-collapse-row: Aria label for expanding row collapse button. default: 'Collapse current row'
 - expanded: initial state of the expanded row
+- value: this is the value assign to the checkbox for tables with batch actions.
 
 **Migration notes:**
 
@@ -190,9 +232,6 @@ completion for it. See [discussion](https://github.com/vuejs/core/issues/3432) f
 `search` emit is still emitted it is just not defined directly on the component.
 - The React does not seem to have an "autoWidth" property. It is still supported here but likely the better choice is `staticWidth`.
 - Row sizes in the React component are 'xs', 'sm', 'md', 'lg', & 'xl'. The rowSizes from Vue2 are still supported.
-- 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`.
 
@@ -228,10 +267,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({})}
@@ -245,7 +286,6 @@ when no items were select, please now use the new property `stickyBatchActive`.
       controls: { exclude: ['default',
           'template',
           'overflow-menu-click',
-          'pagination',
           'row-expanded',
           'row-select-change',
           'row-select-changes',
@@ -270,6 +310,7 @@ when no items were select, please now use the new property `stickyBatchActive`.
       helperText: 'Click row to expand',
       useActions: false,
       useBatchActions: false,
+      usePagination: true
     }}
     argTypes={{
       rowSize: { control: 'select', default: 'standard', options: ['compact', 'short', 'standard', 'tall'] },
@@ -296,7 +337,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={{
     }}