@carbon/vue 3.0.12 → 3.0.13

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -13,27 +13,27 @@
           "attributes": [
             {
               "name": "align",
-              "description": "optional align, defaults to 'end'",
+              "description": "Specify the alignment of the accordion heading title and chevron.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "null"
+              "default": "''"
             },
             {
               "name": "size",
-              "description": "optional size setting",
+              "description": "Specify the size of the Accordion",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "null"
+              "default": "''"
             }
           ],
           "events": [
             {
               "name": "change",
-              "description": "Triggers when the clear button is pressed on a filter CvTag"
+              "description": "Triggers when state of an accordion item changes"
             }
           ],
           "slots": [
@@ -52,7 +52,7 @@
           "attributes": [
             {
               "name": "disabled",
-              "description": "disables this accodion item",
+              "description": "disables this accordion item",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -60,13 +60,18 @@
             },
             {
               "name": "open",
-              "description": "initial open state of the accordion item",
+              "description": "open state of the accordion item. available as a v-model",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               }
             }
           ],
+          "events": [
+            {
+              "name": "update:open"
+            }
+          ],
           "slots": [
             {
               "name": "title",
@@ -346,6 +351,7 @@
             },
             {
               "name": "label",
+              "required": true,
               "description": "Provide a label to provide a description of the Checkbox input that you are exposing to the user",
               "value": {
                 "kind": "expression",
@@ -1381,6 +1387,7 @@
             },
             {
               "name": "dateLabel",
+              "description": "Date picker label",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1389,22 +1396,16 @@
             },
             {
               "name": "dateEndLabel",
+              "description": "Date picker end label (when using kind=\"range\")",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
               "default": "'End date'"
             },
-            {
-              "name": "invalid",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "disabled",
+              "description": "If true, the date picker will be disabled",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1413,6 +1414,7 @@
             },
             {
               "name": "invalidMessage",
+              "description": "Date picker text on invalid value",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1421,6 +1423,7 @@
             },
             {
               "name": "pattern",
+              "description": "Regex pattern used for form validation, default \\d{1,2}/\\d{1,2}/\\d{4}",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1429,6 +1432,7 @@
             },
             {
               "name": "placeholder",
+              "description": "Date picker input placeholder, shown when date picker is empty. Default 'mm/dd/yyyy'",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -1437,6 +1441,7 @@
             },
             {
               "name": "calOptions",
+              "description": "You can pass flatpickr options through this prop.\n   See https://flatpickr.js.org/options/ for more details.\n   Some of the options is not supported (for example, onChange, onReady, mode, nextArrow, prevArrow).\n   Also, you have to pass dateFormat field in calOptions object if you use it.",
               "value": {
                 "kind": "expression",
                 "type": "object"
@@ -1453,6 +1458,7 @@
             },
             {
               "name": "kind",
+              "description": "Date picker kind (also known as mode in flatpickr options).\n   Possible values: 'short', 'simple', 'single', 'range'",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -3598,11 +3604,12 @@
             },
             {
               "name": "label",
+              "required": true,
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "undefined"
+              "default": "null"
             },
             {
               "name": "value",
@@ -3650,6 +3657,22 @@
                 "kind": "expression",
                 "type": "boolean"
               }
+            },
+            {
+              "name": "legendText",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "hideLegend",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
             }
           ],
           "events": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.12",
+  "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": "f685b28f8725fb4f61078e347e394ea08e4c0b5c"
+  "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
    */