@carbon/vue 3.0.9 → 3.0.11

package/src/components/CvDropdown/CvDropdown.vue

@@ -59,7 +59,7 @@
             [`${carbonPrefix}--dropdown--inline`]: inline,
           },
         ]"
-        :data-invalid="data.isInvalid"
+        :data-invalid="data.isInvalid || null"
         :data-value="dataValue"
         data-dropdown
         v-bind="$attrs"
@@ -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`"
@@ -115,12 +115,9 @@
           tabindex="-1"
         >
           <slot>
-            <cv-dropdown-item
-              v-for="item in items"
-              v-bind:key="item"
-              :value="item"
-              >{{ item }}</cv-dropdown-item
-            >
+            <cv-dropdown-item v-for="item in items" :key="item" :value="item">{{
+              item
+            }}</cv-dropdown-item>
           </slot>
         </ul>
       </div>
@@ -132,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 },
@@ -205,11 +202,12 @@ const props = defineProps({
       }
       return arr;
     },
+    default: () => [],
   },
   /**
    * Generic label that will be used as the textual representation of what this field is for
    */
-  label: String,
+  label: { type: String, default: undefined },
   /**
    * Value shown when nothing has been selected
    */
@@ -230,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: String,
   /**
    * 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,
   },
 
@@ -257,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);
@@ -289,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

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

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/CvFileUploader.vue

@@ -89,7 +89,7 @@
         :key="item.file.name"
         :item="item"
         :removable="removable"
-        :removeAriaLabel="removeAriaLabel"
+        :remove-aria-label="removeAriaLabel"
         @remove="onItemRemove(index)"
       />
     </div>
@@ -111,7 +111,7 @@ import {
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
-  accept: String,
+  accept: { type: String, default: undefined },
   buttonKind: commonCvButtonProps.kind,
   buttonLabel: {
     type: String,
@@ -129,8 +129,8 @@ const props = defineProps({
   buttonSize: commonCvButtonProps.size,
   clearOnReselect: Boolean,
   disabled: Boolean,
-  dropTargetLabel: String,
-  helperText: String,
+  dropTargetLabel: { type: String, default: undefined },
+  helperText: { type: String, default: undefined },
   initialStateUploading: Boolean,
   kind: {
     type: String,
@@ -145,10 +145,10 @@ const props = defineProps({
       return true;
     },
   },
-  label: String,
-  modelValue: Array,
+  label: { type: String, default: undefined },
+  modelValue: { type: Array, default: () => [] },
   removable: Boolean,
-  removeAriaLabel: String,
+  removeAriaLabel: { type: String, default: undefined },
   ...cvIdProps,
 });
 

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"
@@ -80,7 +81,7 @@ import Close16 from '@carbon/icons-vue/es/close/16';
 const emit = defineEmits(['remove']);
 
 const props = defineProps({
-  item: Object,
+  item: { type: Object, default: () => Object() },
   removable: Boolean,
   removeAriaLabel: { type: String, default: 'Remove selected file' },
 });

package/src/components/CvForm/CvFormGroup.vue

@@ -4,7 +4,7 @@
       `cv-form-group ${carbonPrefix}--fieldset`,
       { [`${carbonPrefix}--fieldset--no-margin`]: noMargin },
     ]"
-    :data-invalid="invalid"
+    :data-invalid="invalid || null"
   >
     <legend :class="`${carbonPrefix}--label`">
       <slot name="label"></slot>
@@ -21,7 +21,7 @@ import { carbonPrefix } from '../../global/settings';
 
 defineProps({
   invalid: Boolean,
-  message: String,
+  message: { type: String, default: undefined },
   noMargin: Boolean,
 });
 </script>

package/src/components/CvGrid/CvColumn.vue

@@ -13,22 +13,27 @@ const props = defineProps({
   sm: {
     type: [Boolean, Number, Object],
     validator: value => columnValidator('sm', value),
+    default: false,
   },
   md: {
     type: [Boolean, Number, Object],
     validator: value => columnValidator('md', value),
+    default: false,
   },
   lg: {
     type: [Boolean, Number, Object],
     validator: value => columnValidator('lg', value),
+    default: false,
   },
   xlg: {
     type: [Boolean, Number, Object],
     validator: value => columnValidator('xlg', value),
+    default: false,
   },
   max: {
     type: [Boolean, Number, Object],
     validator: value => columnValidator('max', value),
+    default: false,
   },
 });
 const classes = computed(() => {

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>
 
@@ -28,7 +33,7 @@ import {
 } from '../../use/cvLink';
 
 const props = defineProps({
-  icon: { type: [String, Object] },
+  icon: { type: [String, Object], default: undefined },
   inline: Boolean,
   visited: Boolean,
   ...linkPropsDefinition,

package/src/components/CvLoading/CvLoading.stories.js

@@ -26,7 +26,7 @@ export default {
 const template = `<div>
 <div class="loading-story">
 <cv-loading @loading-end="onLoadingEnd" v-bind="args" :active="isActive"/>
-</divclass>
+</div>
 <button @click="makeActive" :disabled="isActive" style="margin-top: 2rem;">{{buttonLabel}}</button>
 </div>`;
 let hidden = ref(true);

package/src/components/CvLoading/CvLoading.vue

@@ -6,6 +6,7 @@
   >
     <div
       v-bind="$attrs"
+      ref="loading"
       data-loading
       :class="{
         'cv-loading': !overlay,
@@ -13,12 +14,11 @@
         [`${carbonPrefix}--loading--stop`]: (!active && stopping) || stopped,
         [`${carbonPrefix}--loading--small`]: small,
       }"
-      ref="loading"
       aria-atomic="true"
       :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/CvModal/CvModal.vue

@@ -1,9 +1,9 @@
 <template>
   <Teleport to="body" :disabled="disableTeleport">
     <div
+      :id="uid"
       ref="el"
       data-modal
-      :id="uid"
       :class="[
         `cv-modal ${carbonPrefix}--modal`,
         {
@@ -12,24 +12,24 @@
         },
       ]"
       tabindex="-1"
+      v-bind="$attrs"
       @keydown.esc.prevent="onEsc"
       @click.self="onExternalClick"
-      v-bind="$attrs"
     >
       <div
+        v-bind="dialogAttrs"
+        ref="modalDialog"
         :class="[
           `${carbonPrefix}--modal-container`,
           {
             [`${carbonPrefix}--modal-container--${internalSize}`]: internalSize,
           },
         ]"
-        v-bind="dialogAttrs"
         :aria-label="ariaLabel"
-        ref="modalDialog"
       >
         <div
-          class="cv-modal__before-content"
           ref="beforeContent"
+          class="cv-modal__before-content"
           tabindex="0"
           style="position: absolute; height: 1px; width: 1px; left: -9999px"
           role="separator"
@@ -44,28 +44,29 @@
             <slot name="title">Modal Title</slot>
           </p>
           <button
+            ref="closeBtn"
             :class="`${carbonPrefix}--modal-close`"
             type="button"
-            @click="onClose"
-            ref="closeBtn"
             :aria-label="closeAriaLabel"
+            @click="onClose"
           >
             <Close16 :class="`${carbonPrefix}--modal-close__icon`" />
           </button>
         </div>
 
         <div
+          ref="content"
           :class="[
             `${carbonPrefix}--modal-content`,
             { [`${carbonPrefix}--modal-content--with-form`]: hasFormContent },
           ]"
-          ref="content"
           :tabindex="data.scrollable ? 0 : undefined"
         >
           <slot name="content"></slot>
         </div>
 
         <cv-button-set
+          v-if="data.hasFooter"
           :class="[
             `${carbonPrefix}--modal-footer`,
             {
@@ -73,40 +74,39 @@
                 data.hasPrimary && data.hasSecondary && data.hasOtherBtn,
             },
           ]"
-          v-if="data.hasFooter"
         >
           <cv-button
+            v-if="data.hasOtherBtn"
+            ref="otherBtn"
             type="button"
             kind="secondary"
             @click="onOtherBtnClick"
-            v-if="data.hasOtherBtn"
-            ref="otherBtn"
           >
             <slot name="other-button">Other button</slot>
           </cv-button>
           <cv-button
+            v-if="data.hasSecondary"
+            ref="secondaryBtn"
             type="button"
             kind="secondary"
             @click="onSecondaryClick"
-            v-if="data.hasSecondary"
-            ref="secondaryBtn"
           >
             <slot name="secondary-button">Secondary button</slot>
           </cv-button>
           <cv-button
+            v-if="data.hasPrimary"
+            ref="primary"
             :disabled="primaryButtonDisabled"
             type="button"
             :kind="primaryKind"
             @click="onPrimaryClick"
-            v-if="data.hasPrimary"
-            ref="primary"
           >
             <slot name="primary-button">Primary button</slot>
           </cv-button>
         </cv-button-set>
         <div
-          class="cv-modal__after-content"
           ref="afterContent"
+          class="cv-modal__after-content"
           tabindex="0"
           style="position: absolute; height: 1px; width: 1px; left: -9999px"
           role="separator"
@@ -201,9 +201,9 @@ const props = defineProps({
   disableTeleport: { type: Boolean, default: false },
 
   // Listeners
-  onPrimaryClick: { type: Function },
-  onSecondaryClick: { type: Function },
-  onOtherBtnClick: { type: Function },
+  onPrimaryClick: { type: Function, default: undefined },
+  onSecondaryClick: { type: Function, default: undefined },
+  onOtherBtnClick: { type: Function, default: undefined },
 
   ...propsCvId,
 });