@carbon/vue 3.0.9 → 3.0.10

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "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",
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "build": "vue-cli-service build --target lib --name carbon-vue-3 ./src/index.js --no-clean",
     "lint": "vue-cli-service lint",
-    "ci-check": "yarn format:diff && yarn test && yarn build",
+    "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",
     "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}/**'",
@@ -20,8 +22,7 @@
     "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",
-    "a11test": "node -v"
+    "test": "vue-cli-service test:unit --no-coverage"
   },
   "workspaces": [
     "storybook"
@@ -50,6 +51,7 @@
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.2.4",
     "@vue/vue3-jest": "^27.0.0",
+    "accessibility-checker": "^3.1.59",
     "babel-core": "^6.26.3",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.3.0",
@@ -74,6 +76,7 @@
     "stylelint-config-property-sort-order-smacss": "^9.0.0",
     "stylelint-config-sass-guidelines": "^9.0.1",
     "vue": "^3.3.4",
+    "vue-docgen-web-types": "^0.1.8",
     "vue-loader": "^17.0.1",
     "webpack": "^5.75.0"
   },
@@ -83,9 +86,9 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/vue3-essential",
       "eslint:recommended",
-      "@vue/prettier"
+      "plugin:vue/vue3-recommended",
+      "plugin:prettier-vue/recommended"
     ],
     "rules": {
       "no-console": [
@@ -145,41 +148,6 @@
     "last 2 versions",
     "not dead"
   ],
-  "jest": {
-    "collectCoverage": true,
-    "collectCoverageFrom": [
-      "src/*/**/*.{js,vue}",
-      "!**/node_modules/**",
-      "!**/*.stories.js",
-      "!**/*.spec.js",
-      "!**/*.test.js"
-    ],
-    "coverageThreshold": {
-      "global": {
-        "branches": 100,
-        "functions": 100,
-        "lines": 100,
-        "statements": 0
-      }
-    },
-    "preset": "@vue/cli-plugin-unit-jest",
-    "transform": {
-      "^.+\\.vue$": "@vue/vue3-jest",
-      "^.+\\js$": "babel-jest"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!@carbon)"
-    ],
-    "moduleFileExtensions": [
-      "vue",
-      "js",
-      "json",
-      "jsx",
-      "ts",
-      "tsx",
-      "node"
-    ]
-  },
   "directories": {
     "src": "src",
     "test": "__tests__"
@@ -206,5 +174,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "746ba85d1d2060314ea9bb7f8ae9c45783572efc"
+  "gitHead": "337cb41677bb308c20c43938f3485faaf7db87c0"
 }

package/src/components/CvAccordion/CvAccordionItem.vue

@@ -14,8 +14,8 @@
     @animationend="onAnimationEnd"
   >
     <button
-      :disabled="disabled"
       ref="button"
+      :disabled="disabled"
       type="button"
       :class="`${carbonPrefix}--accordion__heading`"
       :aria-expanded="isOpen ? 'true' : 'false'"

package/src/components/CvButton/CvButton.stories.js

@@ -48,7 +48,7 @@ export default {
   },
 };
 
-const template = `<cv-button @click="onClick" v-bind="args">{{slotArgs.default}}</cv-button>`;
+const template = `<cv-button @click="onClick" aria-label="button story" v-bind="args">{{slotArgs.default}}</cv-button>`;
 const Template = (argsIn, { argTypes }) => {
   let { args, slotArgs } = splitSlotArgs(argsIn, ['default']);
   args = { ...args, icon: icons[args.icon] };

package/src/components/CvButton/CvButton.vue

@@ -27,8 +27,7 @@ const { disabled, icon, kind, size } = commonCvButtonProps;
 
 export default {
   name: 'CvButton',
-  components: { CvSvg },
-  emits: ['click'], // emitted to allow testing of click
+  components: { CvSvg }, // emitted to allow testing of click
   props: {
     // Docgen comments added for storybook doc page
     /**
@@ -52,6 +51,7 @@ export default {
      */
     skeleton: Boolean,
   },
+  emits: ['click'],
   setup(props) {
     const { buttonClasses } = useCvButtonCommon(
       props.kind,

package/src/components/CvButton/CvIconButton.stories.js

@@ -6,6 +6,7 @@ import {
   storybookControlsFromProps,
   storyParametersObject,
 } from '../../global/storybook-utils';
+import { TipAlignments } from '../CvTooltip/consts.js';
 import { sbBtnPrefix } from './sbBtnPrefix';
 
 import { props as commonCvButtonProps } from './CvButtonCommon';
@@ -32,28 +33,24 @@ export default {
   component: CvIconButton,
   argTypes: {
     ...storybookControlsFromProps(commonCvButtonProps),
-    /**
-     * \@carbon/icons-vue icon, href, svg or symbol
-     */
     icon: {
-      control: {
-        type: 'select',
-        options: Object.keys(icons),
-      },
+      control: 'select',
+      options: Object.keys(icons),
     },
-    /**
-     * Carbon button kind
-     */
     kind: {
-      control: { type: 'select', options: buttonKinds },
-      defaultValue: CvIconButton.props.kind.default,
+      control: 'select',
+      options: buttonKinds,
+      default: CvIconButton.props.kind.default,
     },
-    /**
-     * Size of the button
-     */
     size: {
-      control: { type: 'select', options: buttonSizes },
-      defaultValue: CvIconButton.props.size.default,
+      control: 'select',
+      options: buttonSizes,
+      default: CvIconButton.props.size.default,
+    },
+    tipAlignment: {
+      control: 'select',
+      options: Object.values(TipAlignments),
+      default: CvIconButton.props.tipAlignment.default,
     },
   },
 };

package/src/components/CvButton/CvIconButton.vue

@@ -13,7 +13,7 @@
     <span :class="`${carbonPrefix}--assistive-text`">{{ label }}</span>
 
     <slot name="icon">
-      <cv-svg :svg="icon" :class="`${carbonPrefix}--btn__icon`" />
+      <cv-svg alt="" :svg="icon" :class="`${carbonPrefix}--btn__icon`" />
     </slot>
   </button>
 </template>
@@ -24,14 +24,14 @@ import {
   props as commonCvButtonProps,
   useCvButtonCommon,
 } from './CvButtonCommon';
+import { TipAlignments } from '../CvTooltip/consts.js';
 import CvSvg from '../CvSvg/_CvSvg.vue';
 
 const { disabled, icon, kind, size } = commonCvButtonProps;
 
 export default {
   name: 'CvIconButton',
-  components: { CvSvg },
-  emits: ['click'], // emitted to allow testing of click
+  components: { CvSvg }, // emitted to allow testing of click
   props: {
     // Docgen comments added for storybook doc page
     /**
@@ -39,7 +39,7 @@ export default {
      */
     disabled,
     /**
-     * \@carbon/icons-vue icon, href, svg or symbol
+     * @carbon/icons-vue icon, href, svg or symbol
      */
     icon,
     /**
@@ -47,9 +47,9 @@ export default {
      */
     kind,
     /**
-     * label displayed as a tooltip for the icon
+     * label displayed as a tooltip for the icon. This is required for accessibility.
      */
-    label: { type: String, default: undefined },
+    label: { type: String, default: undefined, required: true },
     /**
      * Size of the button
      */
@@ -68,9 +68,10 @@ export default {
     tipAlignment: {
       type: String,
       default: 'center',
-      validator: val => ['start', 'center', 'end'].includes(val),
+      validator: val => Object.values(TipAlignments).includes(val),
     },
   },
+  emits: ['click'],
   setup(props) {
     const { buttonClasses } = useCvButtonCommon(
       props.kind,

package/src/components/CvCheckbox/CvCheckbox.vue

@@ -7,17 +7,18 @@
     ]"
   >
     <input
-      ref="input"
       v-bind="$attrs"
+      :id="cvId"
+      ref="input"
       type="checkbox"
       :class="`${carbonPrefix}--checkbox`"
       :checked="isChecked === true"
       :aria-checked="`${isChecked}`"
+      :value="value"
+      :disabled="disabled || null"
       @focus="onFocus"
       @blur="onBlur"
       @change="onChange"
-      :value="value"
-      :id="cvId"
     /><label
       :for="cvId"
       :class="[

package/src/components/CvCodeSnippet/CvCodeSnippet.vue

@@ -17,6 +17,11 @@ import CviCodeSnippetMultiline from './_CviCodeSnippetMultiline.vue';
 
 export default {
   name: 'CvCodeSnippet',
+  components: {
+    CviCodeSnippetInline,
+    CviCodeSnippetOneline,
+    CviCodeSnippetMultiline,
+  },
   props: {
     /** Type of code snippet */
     kind: {
@@ -90,11 +95,6 @@ export default {
       default: 16,
     },
   },
-  components: {
-    CviCodeSnippetInline,
-    CviCodeSnippetOneline,
-    CviCodeSnippetMultiline,
-  },
   emits: [
     /** Emitted when user uses the copy function */
     'copy',

package/src/components/CvCodeSnippet/_CviCodeSnippetInline.vue

@@ -5,10 +5,10 @@
   <cvi-copy-button
     v-else
     :class="classes"
-    @copy="handleCopy"
     :feedback="copyFeedback"
     :feedback-timeout="copyFeedbackTimeout"
     :aria-describedby="codeId"
+    @copy="handleCopy"
   >
     <code :id="codeId" ref="text"><slot /></code>
   </cvi-copy-button>
@@ -21,6 +21,7 @@ import { useCvId } from '../../use';
 import CviCopyButton from '../CvCopyButton/_CviCopyButton.vue';
 
 export default {
+  components: { CviCopyButton },
   props: {
     /** Text shown to user when copying code */
     copyFeedback: {
@@ -44,7 +45,6 @@ export default {
     },
   },
   emits: ['copy'],
-  components: { CviCopyButton },
   setup(props, { emit }) {
     const codeId = useCvId();
     const classes = computed(() => [

package/src/components/CvCodeSnippet/_CviCodeSnippetMultiline.vue

@@ -32,8 +32,8 @@
       :feedback="copyFeedback"
       :feedback-timeout="copyFeedbackTimeout"
       :icon-description="ariaLabel"
-      @copy="handleCopy"
       :disabled="disabled"
+      @copy="handleCopy"
     />
     <cv-button
       v-if="showMoreLessButton"
@@ -67,6 +67,11 @@ import { ChevronDown16 } from '@carbon/icons-vue';
 const ROW_HEIGHT_IN_PX = 16;
 
 export default {
+  components: {
+    CvCopyButton,
+    CvButton,
+    ChevronDown16,
+  },
   props: {
     /** Text shown to user when copying code */
     copyFeedback: {
@@ -135,11 +140,6 @@ export default {
     },
   },
   emits: ['copy'],
-  components: {
-    CvCopyButton,
-    CvButton,
-    ChevronDown16,
-  },
   setup: (props, { emit }) => {
     const {
       minCollapsedNumberOfRows: minCollapsed,

package/src/components/CvCodeSnippet/_CviCodeSnippetOneline.vue

@@ -11,11 +11,11 @@
     ]"
   >
     <div
+      ref="container"
       role="textbox"
       :tabindex="disabled ? -1 : 0"
       :class="`${carbonPrefix}--snippet-container`"
       :aria-label="ariaLabel || 'code-snippet'"
-      ref="container"
     >
       <pre><code ref="text"><slot /></code></pre>
     </div>
@@ -32,8 +32,8 @@
       :feedback="copyFeedback"
       :feedback-timeout="copyFeedbackTimeout"
       :icon-description="ariaLabel"
-      @copy="handleCopy"
       :disabled="disabled"
+      @copy="handleCopy"
     />
   </div>
 </template>
@@ -45,6 +45,7 @@ import { useElementHasOverflow } from '../../use/overflow';
 import CvCopyButton from '../CvCopyButton/CvCopyButton.vue';
 
 export default {
+  components: { CvCopyButton },
   props: {
     /** Text shown to user when copying code */
     copyFeedback: {
@@ -83,7 +84,6 @@ export default {
     },
   },
   emits: ['copy'],
-  components: { CvCopyButton },
   setup: (props, { emit }) => {
     const text = ref(null);
     const container = ref(null);

package/src/components/CvComboBox/CvComboBox.vue

@@ -26,7 +26,7 @@
           [`${carbonPrefix}--list-box--disabled`]: disabled,
         },
       ]"
-      :data-invalid="isInvalid ? 'true' : undefined"
+      :data-invalid="isInvalid || null"
       v-bind="$attrs"
       @keydown.down.prevent="onDown"
       @keydown.up.prevent="onUp"
@@ -35,6 +35,7 @@
       @click="onClick"
     >
       <div
+        ref="button"
         role="button"
         aria-haspopup="true"
         :aria-expanded="open ? 'true' : 'false'"
@@ -44,10 +45,10 @@
         tabindex="-1"
         :aria-label="open ? 'close menu' : 'open menu'"
         data-toggle="true"
-        ref="button"
       >
         <input
           ref="input"
+          v-model="filter"
           :class="[
             `${carbonPrefix}--text-input`,
             {
@@ -63,7 +64,6 @@
           autocomplete="off"
           :disabled="disabled"
           :placeholder="label"
-          v-model="filter"
           @input="onInput"
           @focus="inputFocus"
           @click.stop.prevent="inputClick"
@@ -107,13 +107,14 @@
       <div
         v-show="open"
         :id="cvId"
+        ref="list"
         :class="[`${carbonPrefix}--list-box__menu`]"
         role="listbox"
-        ref="list"
       >
         <div
           v-for="(item, index) in dataOptions"
           :key="`combo-box-${index}`"
+          ref="option"
           :class="[
             `${carbonPrefix}--list-box__menu-item`,
             {
@@ -121,7 +122,6 @@
                 highlighted === item.value,
             },
           ]"
-          ref="option"
           role="option"
           @click.stop.prevent="onItemClick(item.value)"
           @mousemove="onMousemove(item.value)"
@@ -172,9 +172,9 @@ const props = defineProps({
   isLight: { type: Boolean, default: false },
   autoFilter: { type: Boolean, default: false },
   autoHighlight: { type: Boolean, default: false },
-  value: { type: String },
-  highlight: { type: String },
-  modelValue: { type: String },
+  value: { type: String, default: undefined },
+  highlight: { type: String, default: undefined },
+  modelValue: { type: String, default: undefined },
   options: {
     type: Array,
     required: true,

package/src/components/CvContentSwitcher/CvContentSwitcher.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    :id="cvId"
     :class="[
       `cv-content-switcher ${carbonPrefix}--content-switcher`,
       {
@@ -8,7 +9,6 @@
       },
     ]"
     role="tablist"
-    :id="cvId"
   >
     <slot></slot>
   </div>

package/src/components/CvContentSwitcher/CvContentSwitcherButton.vue

@@ -11,6 +11,7 @@
 -->
 <template>
   <button
+    :id="cvId"
     type="button"
     role="tab"
     class="cv-content-switcher-button"
@@ -22,7 +23,6 @@
     ]"
     :data-target="contentSelector"
     :aria-selected="isSelected ? 'true' : 'false'"
-    :id="cvId"
     @click="open"
   >
     <CvSvg

package/src/components/CvCopyButton/CvCopyButton.vue

@@ -18,6 +18,7 @@ import CviCopyButton from './_CviCopyButton.vue';
 
 export default {
   name: 'CvCopyButton',
+  components: { CviCopyButton, Copy16 },
   props: {
     /** Text shown when button is clicked */
     feedback: {
@@ -39,7 +40,6 @@ export default {
     /** Emitted when user clicks on the button */
     'copy',
   ],
-  components: { CviCopyButton, Copy16 },
   setup: () => ({ carbonPrefix }),
 };
 </script>

package/src/components/CvCopyButton/_CviCopyButton.vue

@@ -8,10 +8,10 @@
         [`${carbonPrefix}--copy-btn--${activeAnimation}`]: isAnimating,
       },
     ]"
-    @click="handleClick"
-    @animationend="handleAnimationEnd"
     aria-live="polite"
     :aria-label="feedback"
+    @click="handleClick"
+    @animationend="handleAnimationEnd"
   >
     <slot />
     {{ feedback }}