@carbon/vue 3.0.10 → 3.0.11

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.10",
+  "version": "3.0.11",
   "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",
+    "_postinstall": "node prepare.js && node .storybook/postinstall.js",
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "build": "vue-cli-service build --target lib --name carbon-vue-3 ./src/index.js --no-clean",
@@ -174,5 +174,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "337cb41677bb308c20c43938f3485faaf7db87c0"
+  "gitHead": "1a9b7dd369e0985937b5b1efcc1dea6ce9ce40a5"
 }

package/src/components/CvComboBox/CvComboBox.vue

@@ -59,7 +59,7 @@
           :aria-controls="cvId"
           aria-autocomplete="list"
           role="combobox"
-          :aria-disabled="disabled"
+          :aria-disabled="disabled || null"
           :aria-expanded="open ? 'true' : 'false'"
           autocomplete="off"
           :disabled="disabled"

package/src/components/CvDataTable/CvDataTable.vue

@@ -23,7 +23,7 @@
       <section v-if="hasToolbar" :class="`${carbonPrefix}--table-toolbar`">
         <div
           v-show="hasBatchActions"
-          :aria-hidden="!batchActive"
+          :aria-hidden="`${!batchActive}`"
           :class="[
             `${carbonPrefix}--batch-actions`,
             { [`${carbonPrefix}--batch-actions--active`]: batchActive },

package/src/components/CvDropdown/CvDropdown.stories.mdx

@@ -49,7 +49,7 @@ const defaultTemplate = `
 <cv-dropdown
   :light="light"
   :placeholder="placeholder"
-  :value="value"
+  :modelValue="modelValue"
   :up="up"
   :inline="inline"
   :helper-text="helperText"
@@ -71,7 +71,7 @@ const defaultTemplate = `
 const slotsTemplate = `
 <div :style="{width: '300px'}">
 <cv-dropdown
-  v-model:value="myValue"
+  v-model="myValue"
   :light="light"
   :placeholder="placeholder"
   :up="up"
@@ -101,7 +101,7 @@ const itemsTemplate = `
 <cv-dropdown
   :light="light"
   :placeholder="placeholder"
-  :value="value"
+  :modelValue="modelValue"
   :up="up"
   :inline="inline"
   :helper-text="helperText"
@@ -119,7 +119,7 @@ const itemsTemplate = `
 const vmodelTemplate = `
 <div :style="{width: '300px'}">
 <cv-dropdown
-  v-model:value="myValue"
+  v-model="myValue"
   :label="label"
   :placeholder="placeholder"
   @change="onChange">
@@ -151,10 +151,7 @@ Notes:
 
 - You can place a Dropdown inline with other content by using the inline variant
   Migration notes:
-
-- The `v-model` is different in Vue 3 than Vue 2. You can still specify the `v-model=something` to control the visibility but
-  if you specify it like this you will see a deprecation message in the log. Please use `v-model:value=something` instead.
-- Add the `size` option to match Carbon React
+- Added the `size` option to match Carbon React
 - Added the `warningMessage` option to match Carbon React
 
 <Canvas>
@@ -168,21 +165,16 @@ Notes:
           'template',
           'change',
           'update:modelValue',
-          'update:value',
           'helper-text',
           'invalid-message',
           'warning-message',
           'internal-caption',
-          'modelValue',
         ],
       },
       docs: { source: { code: defaultTemplate } },
     }}
     args={{
       template: defaultTemplate,
-      props: {
-        modelValue: undefined,
-      },
       label: 'Characters',
       placeholder: 'Choose an ally',
       helperText: 'May the force be with you',
@@ -273,7 +265,6 @@ Notes:
           'template',
           'change',
           'update:modelValue',
-          'update:value',
           'helper-text',
           'invalid-message',
           'warning-message',
@@ -316,32 +307,7 @@ Notes:
     name="v-model"
     parameters={{
       controls: {
-        exclude: [
-          'props',
-          'default',
-          'template',
-          'change',
-          'update:modelValue',
-          'update:value',
-          'helper-text',
-          'invalid-message',
-          'warning-message',
-          'internal-caption',
-          'modelValue',
-          'ariaLabel',
-          'disabled',
-          'formItem',
-          'helperText',
-          'hideSelected',
-          'inline',
-          'invalidMessage',
-          'items',
-          'label',
-          'placeholder',
-          'size',
-          'up',
-          'value',
-          'warningMessage',
+        include: [
         ],
       },
       docs: { source: { code: vmodelTemplate } },
@@ -367,32 +333,7 @@ Notes:
     name="skeleton"
     parameters={{
       controls: {
-        exclude: [
-          'props',
-          'default',
-          'template',
-          'change',
-          'update:modelValue',
-          'update:value',
-          'helper-text',
-          'invalid-message',
-          'warning-message',
-          'internal-caption',
-          'modelValue',
-          'ariaLabel',
-          'disabled',
-          'formItem',
-          'helperText',
-          'hideSelected',
-          'invalidMessage',
-          'items',
-          'label',
-          'placeholder',
-          'size',
-          'up',
-          'value',
-          'warningMessage',
-          'inline',
+        include: [
         ],
       },
       docs: { source: { code: skeletonTemplate } },

package/src/components/CvDropdown/CvDropdown.vue

@@ -73,7 +73,7 @@
         <button
           ref="button"
           :aria-controls="`${uid}-menu`"
-          :aria-disabled="disabled"
+          :aria-disabled="disabled || null"
           :aria-expanded="open ? 'true' : 'false'"
           :aria-labelledby="ariaLabeledBy"
           :class="`${carbonPrefix}--list-box__field`"
@@ -129,7 +129,7 @@
       </div>
       <div
         v-else-if="data.isHelper"
-        :aria-disabled="disabled"
+        :aria-disabled="disabled || null"
         :class="[
           `${carbonPrefix}--form__helper-text`,
           { [`${carbonPrefix}--form__helper-text--disabled`]: disabled },
@@ -228,25 +228,15 @@ const props = defineProps({
    * Specify the direction of the dropdown. Can be either true (top) or (false) bottom.
    */
   up: { type: Boolean, default: false },
-  /**
-   * Render with a value already selected. Available as `v-model:value`.
-   */
-  value: { type: String, default: undefined },
   /**
    * Provide the text that is displayed and put the control in warning state
    */
   warningMessage: { type: String, default: undefined },
   /**
-   * @deprecated - use v-model:value
+   * Render with a value already selected. Available as `v-model`.
    */
   modelValue: {
     type: String,
-    validator: val => {
-      console.warn(
-        `v-model for cv-dropdown is deprecated. Specify "v-model:value" instead [${val}]`
-      );
-      return true;
-    },
     default: undefined,
   },
 
@@ -255,7 +245,7 @@ const props = defineProps({
 });
 const uid = useCvId(props, true);
 const isLight = useIsLight(props);
-const dataValue = ref(props.value);
+const dataValue = ref(props.modelValue);
 provide('dropdown-selected', dataValue);
 const focusItem = ref(undefined);
 provide('dropdown-focus', focusItem);
@@ -287,16 +277,15 @@ const isWarning = computed(() => {
 });
 onMounted(checkSlots);
 onUpdated(checkSlots);
-const emit = defineEmits(['update:value', 'update:modelValue', 'change']);
+const emit = defineEmits(['update:modelValue', 'change']);
 watch(
-  () => props.value,
+  () => props.modelValue,
   () => {
-    dataValue.value = props.value;
+    dataValue.value = props.modelValue;
   }
 );
 watch(dataValue, () => {
   emit('change', dataValue.value);
-  emit('update:value', dataValue.value);
   emit('update:modelValue', dataValue.value);
 });
 watch(open, () => {

package/src/components/CvDropdown/CvDropdownItem.vue

@@ -21,7 +21,7 @@
   >
     <a
       ref="link"
-      :aria-checked="dataSelected"
+      :aria-checked="`${dataSelected}`"
       :class="`${carbonPrefix}--dropdown-link`"
       href="javascript:void(0)"
       role="menuitemradio"

package/src/components/CvFileUploader/CvFileUploader.stories.mdx

@@ -1,9 +1,9 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { sbCompPrefix } from '../../global/storybook-utils';
 import { CvFileUploader, CvFileUploaderSkeleton } from '.';
-import { KINDS } from './const';
+import { KINDS, STATES } from './const';
 import { action } from '@storybook/addon-actions';
-import { nextTick, ref } from 'vue';
+import { nextTick, ref, watch, onMounted } from 'vue';
 import { Add16 } from '@carbon/icons-vue';
 import { buttonKinds, buttonSizes } from '../CvButton/consts';
 
@@ -16,7 +16,57 @@ export const Template = args => ({
     Add16
   },
   setup() {
+    const fileUploader = ref(null);
+    const files = ref(storage.files);
+    // exposed methods handlers
+    function clear() {
+      if (args.clear && args.clear > storage.clearCount) {
+        storage.clearCount = args.clear;
+        fileUploader.value.clear();
+        action('cv-file-uploader clear')()
+      }
+    }
+    function remove() {
+      if (args.remove && args.remove > storage.removeCount && files.value.length > 0) {
+        const randomIndex = Math.floor(Math.random() * files.value.length);
+        storage.removeCount = args.remove;
+        fileUploader.value.remove(randomIndex);
+        action('cv-file-uploader remove')(randomIndex)
+      }
+    }
+    function setInvalidMessage(index) {
+      if (files.value[index].invalidMessage !== args.setInvalidMessage) {
+        fileUploader.value.setInvalidMessage(index, args.setInvalidMessage);
+        action('cv-file-uploader setInvalidMessage')(index, args.setInvalidMessage);
+      }
+    }
+    function setState(index) {
+      const newState = setStateOptionMap[args.setState];
+      if (files.value[index].state !== newState) {
+        fileUploader.value.setState(index, newState);
+        action('cv-file-uploader setState')(index, newState);
+      }
+    }
+    // exposed methods setState & setInvalidMessage handler
+    function changeFiles() {
+      const callbacks = [
+        typeof args.setState === 'string' ? setState : null,
+        typeof args.setInvalidMessage === 'string' ? setInvalidMessage : null,
+      ];
+      files.value.forEach((_, index) => callbacks.forEach(callback => callback && callback(index)));
+    }
+    watch(() => files.value, (newValue) => {
+      storage.files = newValue;
+      changeFiles();
+    }, { deep: true });
+    onMounted(() => {
+      clear();
+      remove();
+      changeFiles();
+    });
     return {
+      fileUploader,
+      files,
       slotContent: args.slot,
       args: {
         ...args,
@@ -26,9 +76,19 @@ export const Template = args => ({
   },
   template: args.template,
 });
+const storage = {
+  files: [],
+  clearCount: 0,
+  removeCount: 0,
+};
+const setStateOptionMap = {
+  [`Set files status to: None`]: STATES.NONE,
+  [`Set files status to: Complete (${STATES.COMPLETE})`]: STATES.COMPLETE,
+  [`Set files status to: Uploading (${STATES.UPLOADING})`]: STATES.UPLOADING,
+};
 const defaultTemplate = `
   <div style="display: inline-flex; align-items: flex-start;">
-    <cv-file-uploader v-bind="args" />
+    <cv-file-uploader v-bind="args" ref="fileUploader" v-model="files" />
   </div>
 `;
 const slotTemplate = `
@@ -178,7 +238,8 @@ export const argTypes = {
   },
   // exposed methods
   clear: {
-    control: 'none',
+    control: 'button',
+    buttonLabel: 'Clear',
     type: 'function',
     table: {
       type: { summary: '() => void' },
@@ -187,7 +248,8 @@ export const argTypes = {
     description: 'Clear file list',
   },
   remove: {
-    control: 'none',
+    control: 'button',
+    buttonLabel: 'Remove a random file',
     type: 'function',
     table: {
       type: { summary: '(index: number) => void' },
@@ -195,23 +257,24 @@ export const argTypes = {
     },
     description: 'Removes an individual file',
   },
-  setState: {
-    control: 'none',
+  setInvalidMessage: {
+    control: 'text',
     type: 'function',
     table: {
-      type: { summary: '(index: number, state: string) => void' },
+      type: { summary: '(index: number, invalidMessage: string) => void' },
       category: 'exposed methods',
     },
-    description: 'Update the "state" field of a file. State must be `""`, `complete` or `loading`',
+    description: 'Update the "invalidMessage" field of a file.',
   },
-  setInvalidMessage: {
-    control: 'none',
+  setState: {
+    control: 'select',
+    options: Object.keys(setStateOptionMap),
     type: 'function',
     table: {
-      type: { summary: '(index: number, invalidMessage: string) => void' },
+      type: { summary: '(index: number, state: string) => void' },
       category: 'exposed methods',
     },
-    description: 'Update the "invalidMessage" field of a file.',
+    description: 'Update the "state" field of a file. State must be `""`, `complete` or `uploading`',
   },
   // slots
   'drop-target': {
@@ -258,6 +321,8 @@ Migration notes:
   </Story>
 </Canvas>
 
+<ArgsTable story="Default" />
+
 # CvFileUploader Button
 
 <Canvas>

package/src/components/CvFileUploader/CvFileUploaderItem.vue

@@ -9,8 +9,12 @@
       {{ item.file?.name }}
     </p>
     <span :class="`${carbonPrefix}--file__state-container`">
+      <WarningFilled16
+        v-if="isInvalid"
+        :class="`${carbonPrefix}--file--invalid`"
+      />
       <div
-        v-if="item.state === 'uploading'"
+        v-if="!isInvalid && item.state === 'uploading'"
         :class="`${carbonPrefix}--inline-loading__animation`"
       >
         <div
@@ -37,15 +41,12 @@
         </div>
       </div>
       <CheckmarkFilled16
-        v-if="item.state === 'complete'"
+        v-else-if="!isInvalid && item.state === 'complete'"
         :class="`${carbonPrefix}--file-complete`"
       />
-      <WarningFilled16
-        v-if="isInvalid"
-        :class="`${carbonPrefix}--file--invalid`"
-      />
+      <!-- "edit" state at react -->
       <button
-        v-if="removable"
+        v-else-if="removable"
         type="button"
         :class="`${carbonPrefix}--file-close`"
         :alt="removeAriaLabel"

package/src/components/CvLink/CvLink.vue

@@ -14,7 +14,12 @@
     ]"
   >
     <slot></slot>
-    <CvSvg v-if="icon" :class="`${carbonPrefix}--link__icon`" :svg="icon" />
+    <CvSvg
+      v-if="icon"
+      :class="`${carbonPrefix}--link__icon`"
+      :svg="icon"
+      alt=""
+    />
   </component>
 </template>
 

package/src/components/CvLoading/CvLoading.vue

@@ -18,7 +18,7 @@
       :aria-labelledby="cvId"
       aria-live="assertive"
       role="progressbar"
-      :aria-busy="active || stopping"
+      :aria-busy="`${active || stopping}`"
     >
       <label :id="cvId" :class="`${carbonPrefix}--visually-hidden`">
         {{ description }}

package/src/components/CvMultiSelect/CvMultiSelect.stories.mdx

@@ -58,7 +58,7 @@ export const Template = args => ({
       title: args.title,
       label: args.label,
       highlight: args.highlight,
-      value: args.value,
+      modelValue: args.modelValue,
       selectionFeedback: args.selectionFeedback,
       filterable: args.filterable,
       light: args.light,
@@ -70,7 +70,7 @@ export const Template = args => ({
       myValue: myValue,
       onChange: action('change'),
       onFilter: action('filter'),
-      onVmodel: action('update:value'),
+      onVmodel: action('update:modelValue'),
     };
   },
   template: args.template,
@@ -93,7 +93,7 @@ const defaultTemplate = `
   :options="options"
   :selectionFeedback="selectionFeedback"
   :title="title"
-  :value="value"
+  :modelValue="modelValue"
   :warningMessage="warningMessage"
   @change="onChange"
   @filter="onFilter"
@@ -123,13 +123,13 @@ const vModelTemplate = `
   :label="label"
   :options="options"
   :title="title"
-  v-model:value="myValue"
+  v-model="myValue"
   @change="onChange"
   @filter="onFilter"
   >
   </cv-multi-select>
   <div style="margin-top:2rem">
-    <div>v-model:value</div>
+    <div>v-model</div>
     <select name="cars" id="cars" v-model="myValue" multiple>
       <option v-for="opt in options" :key="opt.value" :value="opt.value">{{opt.value}}</option>
     </select>
@@ -147,8 +147,6 @@ Migration notes:
 - Added the `warningMessage` option to match Carbon React
 - Setting `autoFilter` to true now implies `filterable`. Previous versions required `filterable` to
   be explicitly set to `true` for `autoFilter` to work properly.
-- The `v-model` is different in Vue 3 than Vue 2.If you specify it you will see a error deprecation message in the log.
-  Please use `v-model:value=something` instead.
 
 <Canvas>
   <Story
@@ -160,10 +158,8 @@ Migration notes:
           'filter',
           'helper-text',
           'invalid-message',
-          'modelValue',
           'template',
           'update:modelValue',
-          'update:value',
           'warning-message',
         ],
       },
@@ -210,7 +206,7 @@ Migration notes:
         control: 'inline-radio',
         options: [],
       },
-      value: {
+      modelValue: {
         control: 'multi-select',
         options: pkdValues,
       },
@@ -242,15 +238,13 @@ Migration notes:
           'invalid-message',
           'invalidMessage',
           'light',
-          'modelValue',
           'options',
           'selectionFeedback',
           'template',
           'update:modelValue',
-          'update:value',
-          'value',
           'warning-message',
           'warningMessage',
+          'modelValue'
         ],
       },
       docs: { source: { code: slotsTemplate } },
@@ -272,8 +266,6 @@ Migration notes:
 
 # v-model
 
-Note: Specifying `v-model="something"` will not work. Use `v-model:value=something` instead.
-
 <Canvas>
   <Story
     name="v-model"
@@ -300,8 +292,6 @@ Note: Specifying `v-model="something"` will not work. Use `v-model:value=somethi
           'selectionFeedback',
           'template',
           'update:modelValue',
-          'update:value',
-          'value',
           'warning-message',
           'warningMessage',
         ],
@@ -322,7 +312,7 @@ Note: Specifying `v-model="something"` will not work. Use `v-model:value=somethi
         control: 'inline-radio',
         options: [],
       },
-      value: {
+      modelValue: {
         control: 'multi-select',
         options: pkdValues,
       },

package/src/components/CvMultiSelect/CvMultiSelect.vue

@@ -65,7 +65,7 @@
         ref="elButton"
         type="button"
         :class="`${carbonPrefix}--list-box__field`"
-        :aria-disabled="disabled"
+        :aria-disabled="disabled || null"
         aria-haspopup="listbox"
         :aria-expanded="data.open ? 'true' : 'false'"
         :aria-owns="uid"
@@ -342,23 +342,16 @@ const props = defineProps({
    * Provide text to be used in a <label> element that is tied to the multiselect via ARIA attributes.
    */
   title: { type: String, default: undefined },
-  /***
-   * Allow users to pass in arbitrary items from their collection that are pre-selected
-   */
-  value: { type: Array, default: () => [] },
   /**
    * Provide the text that is displayed and put the control in warning state
    */
   warningMessage: { type: String, default: undefined },
+  /***
+   * Allow users to pass in arbitrary items from their collection that are pre-selected
+   */
   modelValue: {
     type: Array,
-    validator: val => {
-      console.error(
-        `v-model for cv-multi-select is deprecated. Specify "v-model:value" instead [${val}]`
-      );
-      return true;
-    },
-    default: undefined,
+    default: () => [],
   },
   ...propsCvId,
   ...propsTheme,
@@ -379,13 +372,15 @@ const data = reactive({
   isWarning: false,
   isInvalid: false,
 });
-const emit = defineEmits(['update:value', 'change', 'filter']);
+const emit = defineEmits(['update:modelValue', 'change', 'filter']);
 watch(
   () => data.selectedItems,
   () => {
-    if (JSON.stringify(data.selectedItems) !== JSON.stringify(props.value)) {
+    if (
+      JSON.stringify(data.selectedItems) !== JSON.stringify(props.modelValue)
+    ) {
       emit('change', data.selectedItems);
-      emit('update:value', data.selectedItems);
+      emit('update:modelValue', data.selectedItems);
     }
   },
   {
@@ -409,7 +404,7 @@ const isFilterable = computed(() => {
 });
 
 function updateSelectedItems() {
-  data.selectedItems = props.value.filter(
+  data.selectedItems = props.modelValue.filter(
     /***
      * @param {string} item
      * @returns {boolean}
@@ -431,7 +426,7 @@ onUpdated(checkSlots);
 onMounted(updateOptions);
 onMounted(updateSelectedItems);
 
-watch(() => props.value, updateSelectedItems);
+watch(() => props.modelValue, updateSelectedItems);
 watch(() => props.options, updateOptions);
 watch(() => props.selectionFeedback, updateOptions);
 
@@ -462,7 +457,7 @@ const highlighted = computed({
   },
 });
 onMounted(() => {
-  highlighted.value = props.value ? props.value : props.highlight; // override highlight with value if provided
+  highlighted.value = props.modelValue ? props.modelValue : props.highlight; // override highlight with modelValue if provided
 });
 
 const internalFilter = computed({