@carbon/vue 3.0.21 → 3.0.22

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.20",
+  "version": "3.0.21",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.21",
+  "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,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>
@@ -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
 
@@ -251,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({})}
@@ -268,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',
@@ -293,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'] },
@@ -319,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={{
     }}

package/src/components/CvDataTable/CvDataTable.vue

@@ -236,11 +236,9 @@ import CvPagination from '../CvPagination';
 import Search16 from '@carbon/icons-vue/es/search/16';
 import Close16 from '@carbon/icons-vue/es/close/16';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
-import { getBus, removeBus } from '../../global/component-utils/event-bus';
 import {
   computed,
   nextTick,
-  onBeforeMount,
   onMounted,
   onUnmounted,
   onUpdated,
@@ -251,8 +249,6 @@ import {
   provide,
 } from 'vue';
 import { props as propsCvId, useCvId } from '../../use/cvId';
-//TODO: Remove this store and replace with provide/inject
-import store from './cvDataTableStore';
 import Empty from '../CvEmpty/_CvEmpty.vue';
 
 const props = defineProps({
@@ -356,20 +352,6 @@ watch(
   () => (isSkeleton.value = props.skeleton)
 );
 
-let bus = undefined;
-onBeforeMount(() => {
-  bus = getBus(uid.value);
-  bus.on('cv:check-change', onRowCheckChange);
-  bus.on('cv:click', onMenuItemClick);
-  bus.on('cv:sort', onSort);
-  bus.on('cv:expanded-change', onCvExpandedChange);
-  store.addTable(uid);
-});
-onUnmounted(() => {
-  removeBus(uid.value);
-  store.removeTable(uid.value);
-});
-
 watch(() => props.rowsSelected, updateRowsSelected);
 
 const searchContainer = ref(null);
@@ -393,6 +375,7 @@ watch(
     else expandingRowIds.value.delete('table-expand-row');
   }
 );
+const clearSearchVisible = ref(false);
 
 onMounted(() => {
   if (searchContainer.value) {
@@ -416,6 +399,8 @@ onUpdated(checkSlots);
 const hasActions = ref(false);
 const hasToolbar = ref(false);
 const hasBatchActions = ref(false);
+const isHelper = ref(false);
+
 provide('has-batch-actions', hasBatchActions);
 
 function checkSlots() {
@@ -442,9 +427,11 @@ function columnHeading(c) {
   }
 }
 
+const sortableHeadings = ref(new Set());
+provide('sortableHeadings', sortableHeadings);
 const isSortable = computed(() => {
   // is any column sortable
-  return props.sortable || store.someSortableHeadings(uid.value);
+  return props.sortable || sortableHeadings.value.size > 0;
 });
 
 function isColSortable(c) {
@@ -453,7 +440,6 @@ function isColSortable(c) {
   return (col && col.sortable) || props.sortable;
 }
 
-const isHelper = ref(false);
 const hasTableHeader = computed(() => {
   return props.title || isHelper.value;
 });
@@ -482,13 +468,15 @@ const internalPagination = computed(() => {
   return false;
 });
 
-const registeredRows = ref([]);
+const rowIds = ref(new Set());
+provide('row-ids', rowIds);
+
 const internalNumberOfItems = computed(() => {
   const internal = internalPagination.value;
   if (internal.numberOfItems !== undefined) {
     return internal.numberOfItems;
   } else {
-    return registeredRows.value.length;
+    return rowIds.value.size;
   }
 });
 
@@ -527,38 +515,29 @@ function checkSearchExpand(force) {
 }
 
 const dataRowsSelected = ref(props.rowsSelected);
-const batchActive = computed(() => {
-  return (
-    props.stickyBatchActive ||
-    dataRowsSelected.value.length > 0 ||
-    headingChecked.value
-  );
-});
+provide('rows-selected', dataRowsSelected);
 
 const headingChecked = ref(false);
-
 watch(
-  () => store.state[uid.value],
+  () => dataRowsSelected,
   () => {
-    const rows = store.rows(uid);
     headingChecked.value =
-      rows.length > 0 && dataRowsSelected.value.length === rows.length;
+      rowIds.value.size > 0 &&
+      dataRowsSelected.value.length === rowIds.value.size;
   },
   { deep: true }
 );
+
+const batchActive = computed(() => {
+  return (
+    props.stickyBatchActive ||
+    dataRowsSelected.value.length > 0 ||
+    headingChecked.value
+  );
+});
+
 function updateRowsSelected() {
-  dataRowsSelected.value = [];
-  const rows = store.rows(uid);
-  for (const i in rows) {
-    let child = rows[i];
-    const checked = props.rowsSelected.includes(child.value);
-    store.updateRow(uid, { id: child.id, isChecked: checked });
-
-    if (checked) {
-      dataRowsSelected.value.push(child.value);
-    }
-  }
-  headingChecked.value = dataRowsSelected.value.length === rows.length;
+  dataRowsSelected.value = [...props.rowsSelected];
 }
 
 const emit = defineEmits([
@@ -572,7 +551,6 @@ const emit = defineEmits([
   'pagination',
 ]);
 const searchValue = ref(props.initialSearchValue);
-const clearSearchVisible = ref(false);
 function onClearClick() {
   searchValue.value = '';
   clearSearchVisible.value = false;
@@ -584,87 +562,83 @@ function onClearClick() {
 }
 function onHeadingCheckChange() {
   // check /uncheck all children
-  dataRowsSelected.value = [];
-  const rows = store.rows(uid);
-  for (const child of rows) {
-    if (headingChecked.value) {
-      dataRowsSelected.value.push(child.value);
-    }
-
-    if (child.isChecked !== headingChecked.value) {
-      store.updateRow(uid, { id: child.id, isChecked: headingChecked.value });
-
-      emit('row-select-change', {
-        value: child.value,
-        selected: headingChecked.value,
-      });
-    }
-  }
-  emit('row-select-changes', dataRowsSelected.value);
-  emit('update:rowsSelected', dataRowsSelected.value);
+  if (headingChecked.value) dataRowsSelected.value = [...rowIds.value];
+  else dataRowsSelected.value = [];
 }
 function deselect() {
   headingChecked.value = false;
   onHeadingCheckChange();
 }
-function onRowCheckChange(payload) {
-  const { value, checked } = payload;
-  let modelSet = new Set(dataRowsSelected.value);
-
-  if (!checked) {
-    modelSet.delete(value);
-  } else {
-    modelSet.add(value);
-  }
-  dataRowsSelected.value = Array.from(modelSet);
-  const rows = store.rows(uid);
-  headingChecked.value = dataRowsSelected.value.length === rows.length;
 
+const previousEmit = ref([...props.rowsSelected]);
+watch(
+  dataRowsSelected,
+  () => {
+    // was tempted to use Set.symmetricDifference but support for that was only
+    // add in Feb/June 2024
+    const diff = dataRowsSelected.value
+      .filter(x => !previousEmit.value.includes(x))
+      .concat(
+        previousEmit.value.filter(x => !dataRowsSelected.value.includes(x))
+      );
+    if (diff.length > 0) {
+      emit('row-select-changes', dataRowsSelected.value);
+      emit('update:rowsSelected', dataRowsSelected.value);
+      previousEmit.value = [...dataRowsSelected.value];
+    }
+  },
+  { deep: true }
+);
+function onRowCheckChange(value, checked) {
   emit('row-select-change', { value, selected: checked });
-  emit('row-select-changes', dataRowsSelected.value);
-  emit('update:rowsSelected', dataRowsSelected.value);
 }
+provide('cv:check-change', onRowCheckChange);
+
 function onMenuItemClick(val) {
   emit('overflow-menu-click', val);
 }
+provide('cv:click', onMenuItemClick);
+
 function onInternalSearch() {
   clearSearchVisible.value = searchValue.value.length > 0;
   // eslint-disable-next-line vue/require-explicit-emits
   emit('search', searchValue.value);
 }
+
+const headingIds = ref(new Set());
+provide('heading-ids', headingIds);
+const currentSortHeadingId = ref(null);
+provide('current-sort-heading-id', currentSortHeadingId);
 function onSort(payload) {
   const { heading, value } = payload;
-  const headings = store.headings(uid);
-  let index;
-  for (let colIndex in headings) {
-    const column = headings[colIndex];
-    if (column.id === heading.id) {
-      store.updateHeading(uid, { ...column, order: value });
-      index = colIndex;
-    } else {
-      store.updateHeading(uid, { ...column, order: 'none' });
-    }
-  }
+  const headings = Array.from(headingIds.value);
+  currentSortHeadingId.value = heading.id;
+  const index = headings.indexOf(heading.id);
   emit('sort', { index, order: value, name: heading.name });
 }
+provide('cv:sort', onSort);
 
 // are all rows expanded
-const dataExpandAll = computed(() => {
-  return store.allExpandedRows(uid);
-});
+/** @type {Ref<Set<String>>} */
+const expandedRowIds = ref(new Set());
+provide('expanded-row-ids', expandedRowIds);
+
+const dataExpandAll = computed(
+  () => expandedRowIds.value.size === rowIds.value.size
+);
 function toggleExpandAll() {
   const toggle = !dataExpandAll.value;
-  const rows = store.rows(uid);
-  for (const row of rows) {
-    store.updateRow(uid, { id: row.id, isExpanded: toggle });
-  }
+  if (toggle) {
+    rowIds.value.forEach(rowId => expandedRowIds.value.add(rowId));
+  } else expandedRowIds.value.clear();
 }
 
 /**
  * A child row is changed
- * @param {{kind:string, uid:string, value:string, isExpanded:boolean}} row
+ * @param {{id:string, value:string, expandable:string, isExpanded:boolean, isChecked:boolean}} row
  */
 function onCvExpandedChange(row) {
   emit('row-expanded', row);
 }
+provide('cv:expanded-change', onCvExpandedChange);
 </script>