@carbon/vue 2.45.1 → 3.0.4-alpha.0

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

@@ -0,0 +1,304 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { CvDataTable } from '.';
+import CvDataTableHeading from './CvDataTableHeading.vue';
+import CvDataTableRow from "./CvDataTableRow.vue";
+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 { action } from '@storybook/addon-actions';
+import { Terminal16 as CompileIcon, Debug16 as DebugIcon, Chip16 as EmbedIcon,
+  TrashCan16 as TrashCanIcon} from '@carbon/icons-vue'
+const testData = [
+  { name:"Java", year:1995, oo:"Yes", purpose:"Applications", standard:"Java Language Specification", desc: "As of September 2022, Java 19 is the latest version, while Java 17, 11 and 8 are the current long-term support (LTS) versions."},
+  { name:"COBOL", year:1959, oo:"Yes", purpose:"Business applications", standard:"COBOL 2014", desc: "COBOL statements have an English-like syntax, which was designed to be self-documenting and highly readable."},
+  { name:"Pascal", year:1970, oo:"No", purpose:"Applications", standard:"None", desc: "Pascal was developed on the pattern of the ALGOL 60 language."},
+  { name:"Ada", year:1980, oo:"Yes", purpose:"US DoD projects", standard:"Ada 2012 TC1", desc: "Ada was named after Ada Lovelace (1815–1852), who has been credited as the first computer programmer."},
+  { name:"BASIC", year:1964, oo:"No", purpose:"Education", standard:"ANSI", desc: "BASIC declined in popularity in the 1990s"},
+  { name:"C++", year:1985, oo:"Yes", purpose:"Systems programming", standard:"ISO/IEC 2017", desc: "C++ is standardized by the International Organization for Standardization (ISO), with the latest standard version ratified and published by ISO in December 2020 as ISO/IEC 14882:2020 (informally known as C++20)."},
+  { 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."},
+  { 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++."},
+];
+
+<Meta title={`${sbCompPrefix}/CvDataTable`} component={CvDataTable} />
+
+export const Template = args => ({
+// Components used in your story `template` are defined in the `components` object
+components: {
+  CvDataTable,
+  CvDataTableHeading,
+  CvDataTableRow,
+  CvDataTableCell,
+  CvDataTableAction,
+  CompileIcon,
+  DebugIcon,
+  EmbedIcon,
+  CvButton,
+  CvDataTableSkeleton,
+},
+// The story's `args` need to be mapped into the template through the `setup()` method
+setup() {
+  return {
+    args: {...args,
+      useActions: undefined,
+      useBatchActions: undefined,
+      useHelperTextSlot: undefined,
+      template: undefined},
+    trashIcon: TrashCanIcon,
+    onSort: action('sort'),
+    onSearch: action('search'),
+    onRowSelectChange: action('row-select-change'),
+    onRowSelectChanges: action('row-select-changes'),
+    onOverflowMenuClick: action('overflow-menu-click'),
+    onRowExpanded: action('row-expanded'),
+    onPagination: action('pagination'),
+    onAction1: action('compile'),
+    onAction2: action('debug'),
+    onAction3: action('firmware'),
+    onDelete: action('delete'),
+    useActions: args.useActions,
+    useBatchActions: args.useBatchActions,
+    useHelperTextSlot: args.useHelperTextSlot,
+    skeletonRows: args.skeletonRows,
+    skeletonCols: args.skeletonCols,
+    skeletonTitle: args.title,
+    skeletonHelper: args.helperText,
+    testData
+    };
+},
+// And then the `args` are bound to your component with `v-bind="args"`
+template: args.template,
+});
+const defaultTemplate = `
+<cv-data-table
+  @search="onSearch"
+  @sort="onSort"
+  @row-select-change="onRowSelectChange"
+  @row-select-changes="onRowSelectChanges"
+  @overflow-menu-click="onOverflowMenuClick"
+  @row-expanded="onRowExpanded"
+  @pagination="onPagination"
+  v-bind="args"
+  >
+  <template v-if="useBatchActions" v-slot:batch-actions>
+    <cv-button :icon="trashIcon" @click="onDelete">Delete</cv-button>
+  </template>
+  <template v-if="useActions" v-slot:actions>
+    <cv-data-table-action @click="onAction1" aria-label="compile" alt="compile">
+      <compile-icon>
+        <title>Compile</title>
+      </compile-icon>
+    </cv-data-table-action>
+    <cv-data-table-action @click="onAction2" aria-label="debug" alt="debug">
+      <debug-icon>
+        <title>Debug</title>
+      </debug-icon>
+    </cv-data-table-action>
+    <cv-data-table-action @click="onAction3" aria-label="firmware" alt="firmware">
+      <embed-icon>
+        <title>Install Firmware</title>
+      </embed-icon>
+    </cv-data-table-action>
+  </template>
+  <template v-slot: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" />
+  </template>
+  <template v-slot:data>
+    <cv-data-table-row v-for="row in testData" :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>
+      <cv-data-table-cell>{{row.purpose}}</cv-data-table-cell>
+      <cv-data-table-cell>{{row.standard}}</cv-data-table-cell>
+      <!-- Add optional expanding data here -->
+    </cv-data-table-row>
+  </template>
+</cv-data-table>
+`;
+const expandingRowsTemplate = defaultTemplate.replace(
+  "<!-- Add optional expanding data here -->",
+  `<template v-slot:expandedContent>{{row.desc}}</template>`)
+  .replace('@search="onSearch"', '')
+const skeletonTemplate = `
+<cv-data-table-skeleton
+  :columns="skeletonCols"
+  :rows="skeletonRows"
+  :title="skeletonTitle"
+  :helperText="skeletonHelper">
+</cv-data-table-skeleton>
+`;
+
+# CvDataTable
+
+**Usage:**
+- Sorting, filtering and pagination are the responsibility of the component user. This component raises events to facilitate this.
+- The search bar appears only if the search event is listened for.
+
+**Row attributes:**
+- aria-label-for-batch-checkbox: Aria label for batch checkbox. default 'Select row N for batch action'.
+- 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
+
+**Migration notes:**
+
+- Default batch cancel label changed from "cancel" to "Cancel"
+- The sort event now returns an additional value "name" for example
+`{index: "1", order: "ascending", name: "year"}`. You can set the name value as a property on the
+`cv-data-table-heading` element
+- The `search` emit is not defined on the component and so your IDE likely will not suggest a type-ahead
+completion for it. See [discussion](https://github.com/vuejs/core/issues/3432) for the reason for this. The
+`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.
+
+<Canvas>
+  <Story
+    name="Default"
+    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'
+        ] },
+      docs: { source: { code: defaultTemplate.replace('v-bind="args"', '') } },
+    }}
+    args={{
+      template: defaultTemplate,
+      title: 'Table title: Programming Languages',
+      helperText: 'Table helper text',
+      useActions: false,
+      useBatchActions: false,
+    }}
+    argTypes={{
+      rowSize: { control: 'select', default: 'lg', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+      rowsSelected: { control: 'multi-select',  options: ['Java', 'COBOL', 'C++'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <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',
+        ] },
+      docs: { source: { code: expandingRowsTemplate.replace('v-bind="args"', '') } },
+    }}
+    args={{
+      template: expandingRowsTemplate,
+      title: 'Table with expanding rows',
+      helperText: 'Click row to expand',
+      useActions: false,
+      useBatchActions: false,
+    }}
+    argTypes={{
+      rowSize: { control: 'select', default: 'standard', options: ['compact', 'short', 'standard', 'tall'] },
+      rowsSelected: { control: 'multi-select',  options: ['Java', 'COBOL', 'C++'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# CvDataTableSkeleton
+
+<Canvas>
+  <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"', '') } },
+    }}
+    args={{
+      template: skeletonTemplate,
+      title: 'Table title',
+      helperText: 'Data has been requested...',
+      skeletonRows: 5,
+      skeletonCols: 5,
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>