@carbon/vue 3.0.22 → 3.0.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.22",
+  "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",
@@ -66,7 +66,7 @@
     "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": "^8.1.1",
     "prettier": "^2.8.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/CvDataTable/CvDataTable.stories.mdx

@@ -154,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
@@ -213,6 +213,7 @@ const vModelTemplate = defaultTemplate
   }
   ```
 - 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'.
@@ -283,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',
-          '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
+      usePagination: true,
+      expandable: true
     }}
     argTypes={{
       rowSize: { control: 'select', default: 'standard', options: ['compact', 'short', 'standard', 'tall'] },

package/src/components/CvDataTable/CvDataTable.vue

@@ -132,7 +132,7 @@
             <thead>
               <tr>
                 <th
-                  v-if="hasExpandingRows"
+                  v-if="expandable"
                   :class="`${carbonPrefix}--table-expand`"
                   :data-previous-value="
                     dataExpandAll ? 'collapsed' : 'expanded'
@@ -183,7 +183,7 @@
               </tr>
             </thead>
 
-            <component :is="hasExpandingRows ? Empty : 'tbody'">
+            <component :is="expandable ? Empty : 'tbody'">
               <slot name="data">
                 <cv-data-table-row
                   v-for="(row, rowIndex) in data"
@@ -360,11 +360,7 @@ const search = ref(null);
 
 /** @type {Ref<Set<String>>} */
 const expandingRowIds = ref(new Set());
-const hasExpandingRows = computed(() => {
-  return expandingRowIds.value.size > 0;
-});
 provide('expanding-row-ids', expandingRowIds);
-provide('has-expanding-rows', hasExpandingRows);
 onMounted(() => {
   if (props.expandable) expandingRowIds.value.add('table-expand-row');
 });

package/src/components/CvDataTable/CvDataTableRow.vue

@@ -78,7 +78,12 @@ watch(
 /** @type {Ref<Set<String>>} */
 const expandingRowIds = inject('expanding-row-ids', ref(new Set()));
 const dataExpandable = ref(false);
-watch(dataExpandable, () => {
+watch(dataExpandable, value => {
+  if (value && !expandingRowIds.value.has('table-expand-row')) {
+    console.warn(
+      `row ${cvId.value} is expandable but the expandable property is not set to true on the table`
+    );
+  }
   if (dataExpandable.value) expandingRowIds.value.add(cvId.value);
   else expandingRowIds.value?.delete(cvId.value);
 });

package/src/components/CvUIShell/CvContent.stories.js

@@ -0,0 +1,22 @@
+import { storyParametersObject } from '../../global/storybook-utils';
+import CvContent from './CvContent.vue';
+
+export default {
+  title: 'Component/ui-select/CvContent',
+  component: CvContent,
+  argTypes: {},
+};
+
+const template = `<cv-content>Hello main</cv-content>`;
+const Template = () => {
+  return {
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

package/src/components/CvUIShell/CvContent.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+defineProps({
+  tagType: { type: String, default: 'main' },
+});
+</script>
+
+<template>
+  <component :is="tagType" :class="`${carbonPrefix}--content`">
+    <slot />
+  </component>
+</template>
+
+<style scoped lang="scss"></style>

package/src/index.js

@@ -138,6 +138,7 @@ export { default as CvToggle } from './components/CvToggle/CvToggle.vue';
 export { default as CvDefinitionTooltip } from './components/CvTooltip/CvDefinitionTooltip.vue';
 export { default as CvInteractiveTooltip } from './components/CvTooltip/CvInteractiveTooltip.vue';
 export { default as CvTooltip } from './components/CvTooltip/CvTooltip.vue';
+export { default as CvContent } from './components/CvUIShell/CvContent.vue';
 export { default as CvHeader } from './components/CvUIShell/CvHeader.vue';
 export { default as CvHeaderGlobalAction } from './components/CvUIShell/CvHeaderGlobalAction.vue';
 export { default as CvHeaderMenu } from './components/CvUIShell/CvHeaderMenu.vue';

package/telemetry.yml

@@ -2,7 +2,7 @@
 
 version: 1
 projectId: 084968c7-d247-4ddb-bc07-cbdbe57fdd43
-endpoint: https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics
+endpoint: https://www-api.ibm.com/ibm-telemetry/v1/telemetry
 collect:
   npm:
     dependencies: null