@carbon/vue 3.0.14 → 3.0.16

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.13",
+  "version": "3.0.15",
   "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"
@@ -1086,7 +1090,7 @@
             },
             {
               "name": "zebra",
-              "description": "the table striped",
+              "description": "`true` to use Zebra style striping.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1111,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"
@@ -1121,6 +1135,7 @@
             },
             {
               "name": "expandingSearch",
+              "description": "Animate the search bar opening",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1129,6 +1144,7 @@
             },
             {
               "name": "skeleton",
+              "description": "Show table loading / skeleton state",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1137,6 +1153,7 @@
             },
             {
               "name": "hasExpandAll",
+              "description": "Should the expand all button be available",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1154,6 +1171,7 @@
             },
             {
               "name": "onSearch",
+              "description": "User defined search action",
               "value": {
                 "kind": "expression",
                 "type": "func"
@@ -4740,7 +4758,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "'red'"
+              "default": "undefined"
             },
             {
               "name": "filter",

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.14",
+  "version": "3.0.16",
   "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 && ibmtelemetry --config=telemetry.yml",
-    "prepack": "pinst --disable",
-    "postpack": "pinst --enable",
+    "postinstall": "npx ibmtelemetry --config=telemetry.yml || true",
+    "pack_postinstall": "echo removed by packrat.js",
+    "prepack": "node packrat.js --disable",
+    "postpack": "node packrat.js --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}/**'",
@@ -22,14 +24,15 @@
     "lint:es": "eslint src/**/*.{js,vue}",
     "lint:style": "vue-cli-service lint:style",
     "serve:storybook": "cd ./storybook && yarn run serve",
-    "test": "vue-cli-service test:unit --no-coverage"
+    "test": "vue-cli-service test:unit --no-coverage",
+    "dev_postinstall": "node devPreinstall.js && node .storybook/postinstall.js"
   },
   "workspaces": [
     "storybook"
   ],
   "dependencies": {
     "@carbon/icons-vue": "^10.60.0",
-    "@ibm/telemetry-js": "^1.2.1",
+    "@ibm/telemetry-js": "^1.5.1",
     "@vueuse/core": "^4.11.2",
     "carbon-components": "^10.58.5",
     "eslint-plugin-prettier-vue": "^4.2.0",
@@ -41,6 +44,7 @@
     "@babel/eslint-parser": "^7.17.0",
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
+    "@npmcli/package-json": "^5.1.0",
     "@testing-library/dom": "^8.19.0",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^6.6.1",
@@ -65,7 +69,6 @@
     "jest": "^27.5.1",
     "lerna": "^6.5.1",
     "lint-staged": "^12.5.0",
-    "pinst": "^3.0.0",
     "postcss": "^8.4.19",
     "postcss-loader": "^6.2.1",
     "prettier": "^2.8.0",
@@ -176,5 +179,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "dd069f41ff788b4698a23fe9bfbc12874be40843"
+  "gitHead": "64dbb4ba7ebb1c2a27ce3888aa5b7d1526b9c05c"
 }

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`,

package/src/components/CvCheckbox/CvCheckbox.vue

@@ -80,10 +80,10 @@ const props = defineProps({
 // Track focus
 let hasFocus = ref(false);
 function onFocus() {
-  hasFocus = true;
+  hasFocus.value = true;
 }
 function onBlur() {
-  hasFocus = false;
+  hasFocus.value = false;
 }
 
 const cvId = useCvId(props);

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"
   >

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={{
     }}

package/src/components/CvDataTable/CvDataTable.vue

@@ -157,7 +157,9 @@
                   v-if="hasBatchActions"
                   :class="`${carbonPrefix}--table-column-checkbox`"
                 >
+                  <cv-checkbox-skeleton v-if="isSkeleton" />
                   <cv-checkbox
+                    v-else
                     v-model="headingChecked"
                     :form-item="false"
                     value="headingCheck"
@@ -229,7 +231,7 @@ import CvDataTableHeading from './CvDataTableHeading.vue';
 import CvDataTableRow from './CvDataTableRow.vue';
 import CvDataTableCell from './CvDataTableCell.vue';
 import CvButton from '../CvButton';
-import CvCheckbox from '../CvCheckbox';
+import { CvCheckbox, CvCheckboxSkeleton } from '../CvCheckbox';
 import CvPagination from '../CvPagination';
 import Search16 from '@carbon/icons-vue/es/search/16';
 import Close16 from '@carbon/icons-vue/es/close/16';
@@ -254,37 +256,31 @@ import store from './cvDataTableStore';
 import Empty from '../CvEmpty/_CvEmpty.vue';
 
 const props = defineProps({
+  /** Arial label for the action bar. */
   actionBarAriaLabel: { type: String, default: 'Table Action Bar' },
+  /** Arial label for the "collapse all" button in tables with expandable rows". */
   collapseAllAriaLabel: { type: String, default: 'Collapse all rows' },
+  /** Arial label for the "expand all" button in tables with expandable rows". */
   expandAllAriaLabel: { type: String, default: 'Expand all rows' },
+  /** Arial label for the "select all" button in tables with selectable rows". */
   selectAllAriaLabel: { type: String, default: 'Select all rows' },
-  /**
-   * Table will size use auto sizing
-   */
+  /** Table will size use auto sizing */
   autoWidth: { type: Boolean, default: false },
-  /**
-   * Label for the button to cancel batch actions
-   */
+  /** Label for the button to cancel batch actions */
   batchCancelLabel: { type: String, default: 'Cancel' },
-  /**
-   * Table will have no border
-   */
+  /** Table will have no border */
   borderless: { type: Boolean, default: false },
   /**
    * An array of overflow menu labels. On click CvDataTable will raise an 'overflow-menu-click' event passing an object containing menuIndex, menuLabel and rowValue
    * - As part of the array pass an object containing props for the overflowMenu. E.g. { label: 'Overflow menu', tipAlignment: 'end', tipPosition: 'top' },
    */
   overflowMenu: { type: [Boolean, Array], default: () => [] },
-  /**
-   * can be set to true or an object containing camel case props for a CvPagination component
-   */
+  /** can be set to true or an object containing camel case props for a CvPagination component */
   pagination: {
     type: [Boolean, Object],
     default: false,
   },
-  /**
-   * 'compact', 'small', or 'tall'
-   */
+  /** 'compact', 'small', or 'tall' */
   rowSize: {
     type: String,
     default: 'lg',
@@ -310,13 +306,9 @@ const props = defineProps({
   searchLabel: { type: String, default: 'Search' },
   searchPlaceholder: { type: String, default: 'Search' },
   searchClearLabel: { type: String, default: 'Clear search' },
-  /**
-   * Set text in search bar on table generation
-   */
+  /** Set text in search bar on table generation */
   initialSearchValue: { type: String, default: '' },
-  /**
-   * can be sorted
-   */
+  /** can be sorted */
   sortable: { type: Boolean, default: false },
   /** Table will have expandable rows */
   expandable: { type: Boolean, default: false },
@@ -331,35 +323,39 @@ const props = defineProps({
    *   - Optionally a sortable property - if any column sets this to true then only columns with sortable set to true are sortable. NOTE: table sortable property not required.
    */
   columns: { type: Array, default: () => [] },
-  /**
-   * Two-dimensional array of strings.
-   */
+  /** Two-dimensional array of strings. */
   data: { type: Array, default: () => [] },
-  /**
-   * the table striped
-   */
+  /** `true` to use Zebra style striping. */
   zebra: { type: Boolean, default: false },
-  /**
-   * Specify whether the header should be sticky. Still experimental: may not work with every combination of table props.
-   */
+  /** Specify whether the header should be sticky. Still experimental: may not work with every combination of table props. */
   stickyHeader: { type: Boolean, default: false },
-  /**
-   * An array containing the selected row values. Supports v-model via the row-select-changes event.
-   */
+  /** An array containing the selected row values. Supports v-model via the row-select-changes event. */
   rowsSelected: { type: Array, default: () => [] },
+  /** Normally batch actions are hidden if no items are selected. Set this to true to always show batch actions */
+  stickyBatchActive: { type: Boolean, default: false },
+  /** subtext on the table */
   helperText: { type: String, default: undefined },
+  /** Animate the search bar opening */
   expandingSearch: { type: Boolean, default: true },
+  /** Show table loading / skeleton state */
   skeleton: { type: Boolean, default: false },
+  /** Should the expand all button be available */
   hasExpandAll: { type: Boolean, default: false },
-  /**
-   * Use a width of 'auto' instead of 100%
-   */
+  /** Use a width of 'auto' instead of 100% */
   staticWidth: { type: Boolean, default: false },
+  /** User defined search action */
   onSearch: { type: Function, default: undefined },
   ...propsCvId,
 });
 const uid = useCvId(props, true);
 
+const isSkeleton = ref(props.skeleton);
+provide('is-skeleton', isSkeleton);
+watch(
+  () => props.skeleton,
+  () => (isSkeleton.value = props.skeleton)
+);
+
 let bus = undefined;
 onBeforeMount(() => {
   bus = getBus(uid.value);
@@ -419,12 +415,12 @@ onUpdated(checkSlots);
 
 const hasActions = ref(false);
 const hasToolbar = ref(false);
-const hasBatchActions = computed(() => {
-  return store.hasBatchActions(uid);
-});
+const hasBatchActions = ref(false);
+provide('has-batch-actions', hasBatchActions);
+
 function checkSlots() {
   // NOTE: slots is not reactive so needs to be managed on updated
-  store.setBatchActions(uid, !!slots['batch-actions']);
+  hasBatchActions.value = !!slots['batch-actions'];
   hasActions.value = !!slots.actions;
   hasToolbar.value = !!(
     slots.actions ||
@@ -531,7 +527,14 @@ function checkSearchExpand(force) {
 }
 
 const dataRowsSelected = ref(props.rowsSelected);
-const batchActive = ref(false);
+const batchActive = computed(() => {
+  return (
+    props.stickyBatchActive ||
+    dataRowsSelected.value.length > 0 ||
+    headingChecked.value
+  );
+});
+
 const headingChecked = ref(false);
 
 watch(
@@ -555,7 +558,6 @@ function updateRowsSelected() {
     }
   }
   headingChecked.value = dataRowsSelected.value.length === rows.length;
-  batchActive.value = dataRowsSelected.value.length > 0;
 }
 
 const emit = defineEmits([
@@ -581,7 +583,6 @@ function onClearClick() {
 }
 function onHeadingCheckChange() {
   // check /uncheck all children
-  batchActive.value = headingChecked.value;
   dataRowsSelected.value = [];
   const rows = store.rows(uid);
   for (const child of rows) {
@@ -617,7 +618,6 @@ function onRowCheckChange(payload) {
   dataRowsSelected.value = Array.from(modelSet);
   const rows = store.rows(uid);
   headingChecked.value = dataRowsSelected.value.length === rows.length;
-  batchActive.value = dataRowsSelected.value.length > 0;
 
   emit('row-select-change', { value, selected: checked });
   emit('row-select-changes', dataRowsSelected.value);

package/src/components/CvDataTable/_CvDataTableRowInner.vue

@@ -26,7 +26,9 @@
       v-if="hasBatchActions"
       :class="`${carbonPrefix}--table-column-checkbox`"
     >
+      <cv-checkbox-skeleton v-if="isSkeleton" />
       <cv-checkbox
+        v-else
         ref="rowChecked"
         v-model="dataChecked"
         :form-item="false"
@@ -35,7 +37,7 @@
         :label="
           ariaLabelForBatchCheckbox || `Select row ${value} for batch action`
         "
-        hide-label
+        :hide-label="true"
         @change="onChange"
       />
     </td>
@@ -61,7 +63,7 @@
 
 <script setup>
 import { carbonPrefix } from '../../global/settings';
-import CvCheckbox from '../CvCheckbox';
+import { CvCheckbox, CvCheckboxSkeleton } from '../CvCheckbox';
 import CvOverflowMenu from '../CvOverflowMenu';
 import CvOverflowMenuItem from '../CvOverflowMenu/CvOverflowMenuItem.vue';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
@@ -89,6 +91,7 @@ const props = defineProps({
   rowId: { type: String, default: undefined },
 });
 
+const isSkeleton = inject('is-skeleton', ref(false));
 /** @type {Ref<UnwrapRef<Set<>>>} */
 const expandingRowIds = inject('expanding-row-ids', ref(new Set()));
 const dataSomeExpandingRows = computed(() => {
@@ -132,9 +135,7 @@ onMounted(() => {
     bus = getBus(parent);
   } else console.warn('data table not found');
 });
-const hasBatchActions = computed(() => {
-  return store.hasBatchActions(parent);
-});
+const hasBatchActions = inject('has-batch-actions', ref(false));
 
 function onMenuItemClick(val) {
   bus.emit('cv:click', val);