@carbon/vue 3.0.11 → 3.0.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.11",
+  "version": "3.0.13",
   "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",
@@ -174,5 +174,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "1a9b7dd369e0985937b5b1efcc1dea6ce9ce40a5"
+  "gitHead": "44c7e6ba63dee51b7f6426b46283b40deaed413c"
 }

package/src/components/CvAccordion/CvAccordion.stories.mdx

@@ -0,0 +1,153 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { action } from '@storybook/addon-actions';
+import { CvAccordion, CvAccordionItem } from '.';
+import { alignConsts, sizeConsts } from './consts';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { ref } from 'vue';
+const open = ref({
+  accItem1: false,
+  accItem2: false,
+  accItem3: false,
+  accItem4: false,
+});
+
+<Meta title={`${sbCompPrefix}/CvAccordion`} component={CvAccordion} />
+
+export const Template = args => ({
+  components: { CvAccordion, CvAccordionItem },
+  setup() {
+    return {
+      ...args,
+      align: alignConsts[alignConsts.$labels[args.align]],
+      size: sizeConsts[sizeConsts.$labels[args.size]],
+      onChange: action('change'),
+      open,
+    };
+  },
+  template: args.template,
+});
+const template = `<cv-accordion @change="onChange" :align="align" :size="size">
+  <cv-accordion-item v-for="n in 4" :key="\`acc-item-\${n}\`" :id="n % 2 ? \`acc-item-\${n}\` : ''">
+    <template v-slot:title>Episode {{n}} </template>
+    <template v-slot:content>
+      <p>Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? R2! R2-D2, where are you? At last! Where have you been? They're heading in this direction.</p>
+    </template>
+  </cv-accordion-item>
+</cv-accordion>`;
+const Default = Template.bind({});
+Default.args = {};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+const templateVModel = `
+<div>
+  <cv-accordion @change="onChange" :align="align" :size="size">
+  <cv-accordion-item v-for="n in 4" :key="\`acc-item-\${n}\`" :id="\`accItem\${n}\`" v-model:open="open[\`accItem\${n}\`]">
+    <template #title>Episode {{n}} </template>
+    <template #content>
+      <p>Give us a few minutes to lock it down. Large leak...very dangerous. Who is this? What's your operating number? Boring conversation anyway. Luke! We're going to have company! Aren't you a little short to be a stormtrooper? What? Oh...the uniform.</p>
+    </template>
+  </cv-accordion-item>
+  </cv-accordion>
+<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" v-model="open.accItem1"/>
+<span>Checked: <span style="font-weight: bold;">{{open.accItem1}}</span></span><br/>
+<label for="checkbox">V-model: Check 2:</label>
+<input id="checkbox" type="checkbox" v-model="open.accItem2"/>
+<span>Checked: <span style="font-weight: bold;">{{open.accItem2}}</span></span><br/>
+<label for="checkbox">V-model: Check 3:</label>
+<input id="checkbox" type="checkbox" v-model="open.accItem3"/>
+<span>Checked: <span style="font-weight: bold;">{{open.accItem3}}</span></span><br/>
+<label for="checkbox">V-model: Check 4:</label>
+<input id="checkbox" type="checkbox" v-model="open.accItem4"/>
+<span>Checked: <span style="font-weight: bold;">{{open.accItem4}}</span></span>
+</div>
+</div>
+`;
+
+# CvAccordion
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      docs: { source: { code: template } },
+      controls: {
+        include: ['align', 'size'],
+      },
+    }}
+    args={{
+      template: template,
+    }}
+    argTypes={{
+      align: {
+        control: 'select',
+        options: Object.keys(alignConsts.$labels),
+      },
+      size: {
+        control: 'select',
+        options: Object.keys(sizeConsts.$labels),
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# Control open state with v-model
+
+- Notes: The Vue 2 component does not support v-model. One interesting implementation using this would be to create an
+  "auto close" component such that opening one section closes other sections.
+
+```javascript
+// example auto close
+// <cv-accordion @change="onAutoClose">
+const open = ref({
+  accItem1: false,
+  accItem2: false,
+  accItem3: false,
+  accItem4: false,
+});
+function autoClose(ev) {
+  if (ev.change.open) {
+    for (let state in open.value) {
+      if (state !== ev.change.id) open.value[state] = false;
+    }
+  }
+}
+```
+
+<Canvas>
+  <Story
+    name="v-model"
+    parameters={{
+      docs: { source: { code: templateVModel } },
+      controls: {
+        include: ['align', 'size'],
+      },
+    }}
+    args={{
+      template: templateVModel,
+    }}
+    argTypes={{
+      align: {
+        control: 'select',
+        default: 'end',
+        options: Object.keys(alignConsts.$labels),
+      },
+      size: {
+        control: 'select',
+        default: 'md',
+        options: Object.keys(sizeConsts.$labels),
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvAccordion/CvAccordion.vue

@@ -26,26 +26,26 @@ import { alignConsts, sizeConsts } from './consts';
 
 defineProps({
   /**
-   * optional align, defaults to 'end'
+   * Specify the alignment of the accordion heading title and chevron.
    */
   align: {
     type: String,
-    default: null,
+    default: '',
     validator: val => alignConsts.includes(val),
   },
   /**
-   * optional size setting
+   * Specify the size of the Accordion
    */
   size: {
     type: String,
-    default: null,
+    default: '',
     validator: val => sizeConsts.includes(val),
   },
 });
 
 const emit = defineEmits({
   /**
-   * Triggers when the clear button is pressed on a filter CvTag
+   * Triggers when state of an accordion item changes
    */
   change: payload => {
     return (
@@ -83,6 +83,19 @@ provide('registerItem', (itemCvId, item) => {
 provide('deregisterItem', itemCvId => {
   items.delete(itemCvId);
 });
+
+/**
+ * @typedef {Object} AccordionChangeElement
+ * @property {string} id
+ * @property {boolean} open
+ */
+
+/**
+ * @typedef {Object} AccordionChangeEvent
+ * @property {AccordionChangeElement} change
+ * @property {Array<AccordionChangeElement>} state
+ * @param ev
+ */
 provide('onAccItemChange', (clickedItemCvId, open) => {
   items.get(clickedItemCvId).open = open;
   emit('change', {

package/src/components/CvAccordion/CvAccordionItem.vue

@@ -46,18 +46,18 @@ export default {
 </script>
 
 <script setup>
-import { onMounted, onBeforeUnmount, inject, ref } from 'vue';
+import { onMounted, onBeforeUnmount, inject, ref, watch } from 'vue';
 import { carbonPrefix } from '../../global/settings';
 import { useCvId, props as propsCvId } from '../../use/cvId';
 import { ChevronRight16 } from '@carbon/icons-vue/';
 
 const props = defineProps({
   /**
-   * disables this accodion item
+   * disables this accordion item
    */
   disabled: Boolean,
   /**
-   * initial open state of the accordion item
+   * open state of the accordion item. available as a v-model
    */
   open: Boolean,
   ...propsCvId,
@@ -66,10 +66,21 @@ const props = defineProps({
 // Accordion methods
 const registerItem = inject('registerItem', () => {});
 const deregisterItem = inject('deregisterItem', () => {});
-const onAccItemChagne = inject('onAccItemChange', () => {});
+const onAccItemChange = inject(
+  'onAccItemChange',
+  (clickedItemCvId, open) => {}
+);
+
+const emit = defineEmits(['update:open']);
+watch(
+  () => props.open,
+  () => {
+    if (props.open !== isOpen.value) toggleOpen(props.open);
+  }
+);
 
 // Accordion item methods
-const cvId = useCvId(props);
+const cvId = useCvId(props, true);
 const isOpen = ref(props.open);
 const animation = ref('');
 
@@ -77,8 +88,9 @@ const toggleOpen = force => {
   const newValue = typeof force !== 'undefined' ? force : !isOpen.value;
 
   animation.value = newValue ? 'expanding' : 'collapsing';
+  if (newValue !== props.open) emit('update:open', newValue);
+  if (isOpen.value !== newValue) onAccItemChange(cvId.value, newValue);
   isOpen.value = newValue;
-  onAccItemChagne(cvId.value, newValue);
 };
 
 const onClick = () => {

package/src/components/CvAccordion/consts.js

@@ -1,16 +1,15 @@
-export const alignConsts = [null, 'start', 'end', ''];
+export const alignConsts = ['', 'start', 'end'];
 alignConsts.$labels = {
-  'Not supplied': 0,
-  Start: 1,
-  End: 2,
-  'Empty string': 3,
+  'Default (end)': 0,
+  'Start (start)': 1,
+  'End (end)': 2,
 };
-export const sizeConsts = [null, 'sm', 'xl', ''];
+export const sizeConsts = ['', 'sm', 'md', 'xl'];
 sizeConsts.$labels = {
-  'Not supplied': 0,
+  'Default (md)': 0,
   'Small (sm)': 1,
-  'Large (xl)': 2,
-  'Empty string': 3,
+  'Medium (md)': 2,
+  'Extra large (xl)': 3,
 };
 
 const CvAccordionConsts = { alignConsts, sizeConsts };

package/src/components/CvCheckbox/CvCheckbox.vue

@@ -13,7 +13,6 @@
       type="checkbox"
       :class="`${carbonPrefix}--checkbox`"
       :checked="isChecked === true"
-      :aria-checked="`${isChecked}`"
       :value="value"
       :disabled="disabled || null"
       @focus="onFocus"
@@ -55,7 +54,12 @@ const props = defineProps({
   /**
    * Provide a label to provide a description of the Checkbox input that you are exposing to the user
    */
-  label: { type: String, default: null },
+  label: {
+    type: String,
+    default: null,
+    required: true,
+    validator: label => !!label.length,
+  },
   /**
    * Specify whether the "bx--form-item" style should be applied
    */

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

@@ -10,16 +10,28 @@ 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++."},
-];
+import { ref } from 'vue';
+const testData = ref([
+  { index:"0", 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."},
+  { index:"1", 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."},
+  { index:"2", name:"Pascal", year:1970, oo:"No", purpose:"Applications", standard:"None", desc: "Pascal was developed on the pattern of the ALGOL 60 language."},
+  { index:"3", 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."},
+  { index:"4", name:"BASIC", year:1964, oo:"No", purpose:"Education", standard:"ANSI", desc: "BASIC declined in popularity in the 1990s"},
+  { index:"5", 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)."},
+  { 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++."},
+]);
+function sortTestData(opts) {
+  action('sort')(opts)
+  if (opts.order === 'none')
+    return testData.value.sort((a, b) => a.index.localeCompare(b.index, 'en', { sensitivity: 'base' }));
+  let direction = 1
+  if (opts.order === 'descending') direction = -1
+  if (opts.name === 'name')
+    return testData.value.sort((a, b) => direction * a.name.localeCompare(b.name, 'en', { sensitivity: 'base' }));
+  else if (opts.name === 'year')
+    return testData.value.sort((a, b) => direction * (a.year - b.year));
+}
 
 <Meta title={`${sbCompPrefix}/CvDataTable`} component={CvDataTable} />
 
@@ -46,7 +58,7 @@ setup() {
       useHelperTextSlot: undefined,
       template: undefined},
     trashIcon: TrashCanIcon,
-    onSort: action('sort'),
+    onSort: sortTestData,
     onSearch: action('search'),
     onRowSelectChange: action('row-select-change'),
     onRowSelectChanges: action('row-select-changes'),
@@ -101,14 +113,14 @@ const defaultTemplate = `
       </embed-icon>
     </cv-data-table-action>
   </template>
-  <template v-slot:headings>
+  <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" />
   </template>
-  <template v-slot:data>
+  <template #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>
@@ -122,7 +134,7 @@ const defaultTemplate = `
 `;
 const expandingRowsTemplate = defaultTemplate.replace(
   "<!-- Add optional expanding data here -->",
-  `<template v-slot:expandedContent>{{row.desc}}</template>`)
+  `<template #expandedContent>{{row.desc}}</template>`)
   .replace('@search="onSearch"', '')
 const skeletonTemplate = `
 <cv-data-table-skeleton
@@ -137,6 +149,19 @@ const skeletonTemplate = `
 
 **Usage:**
 - 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
+  function sortTestData(opts) {
+    if (opts.order === 'none')
+      return testData.value.sort((a, b) => a.index.localeCompare(b.index, 'en', { sensitivity: 'base' }));
+    let direction = 1
+    if (opts.order === 'descending') direction = -1
+    if (opts.name === 'name')
+      return testData.value.sort((a, b) => direction * a.name.localeCompare(b.name, 'en', { sensitivity: 'base' }));
+    else if (opts.name === 'year')
+      return testData.value.sort((a, b) => direction * (a.year - b.year));
+  }
+  ```
 - The search bar appears only if the search event is listened for.
 
 **Row attributes:**

package/src/components/CvDataTable/CvDataTableHeading.vue

@@ -127,11 +127,9 @@ const internalOrder = computed(() => {
     return undefined;
   }
   const heading = store.findHeading(parent, cvId);
-  if (heading?.order !== 'ascending' && heading?.order !== 'descending') {
-    return 'none';
-  } else {
-    return heading?.order;
-  }
+  if (['ascending', 'descending', 'none'].includes(heading?.order))
+    return heading.order;
+  else return 'none';
 });
 
 const headingLabelTag = computed(() => {