@carbon/vue 3.0.9-alpha.0 → 3.0.10

package/src/components/CvFileUploader/CvFileUploader.vue

@@ -1,11 +1,28 @@
 <template>
   <cv-form-item class="cv-file-uploader">
-    <p :class="`${carbonPrefix}--file--label`">{{ label }}</p>
-    <p :class="`${carbonPrefix}--label-description`">{{ helperText }}</p>
+    <p
+      :class="[
+        `${carbonPrefix}--file--label`,
+        { [`${carbonPrefix}--file--label--disabled`]: disabled },
+      ]"
+    >
+      {{ label }}
+    </p>
+    <p
+      :class="[
+        `${carbonPrefix}--label-description`,
+        { [`${carbonPrefix}--label-description--disabled`]: disabled },
+      ]"
+    >
+      {{ helperText }}
+    </p>
     <div v-if="kind === 'button'" :class="`${carbonPrefix}--file`" data-file>
       <label
         :for="cvId"
-        :class="buttonClasses"
+        :class="[
+          buttonClasses,
+          { [`${carbonPrefix}--btn--disabled`]: disabled },
+        ]"
         tabindex="0"
         @keydown.enter.prevent="onKeyHit"
         @keydown.space.prevent="onKeyHit"
@@ -17,6 +34,7 @@
         ref="fileInput"
         :class="`${carbonPrefix}--file-input`"
         :accept="accept"
+        :disabled="disabled"
         type="file"
         v-bind="$attrs"
         data-file-uploader
@@ -34,8 +52,10 @@
             `${carbonPrefix}--file-browse-btn`,
             `${carbonPrefix}--file__drop-container`,
             {
-              [`${carbonPrefix}--file__drop-container--drag-over`]: allowDrop,
+              [`${carbonPrefix}--file__drop-container--drag-over`]:
+                allowDrop && !disabled,
             },
+            { [`${carbonPrefix}--file-browse-btn--disabled`]: disabled },
           ]"
           @dragover="onDragEvent"
           @dragleave="onDragEvent"
@@ -50,6 +70,7 @@
           ref="fileInput"
           :class="`${carbonPrefix}--file-input`"
           :accept="accept"
+          :disabled="disabled"
           type="file"
           v-bind="$attrs"
           tabindex="-1"
@@ -68,7 +89,7 @@
         :key="item.file.name"
         :item="item"
         :removable="removable"
-        :removeAriaLabel="removeAriaLabel"
+        :remove-aria-label="removeAriaLabel"
         @remove="onItemRemove(index)"
       />
     </div>
@@ -90,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,
@@ -107,8 +128,10 @@ const props = defineProps({
   },
   buttonSize: commonCvButtonProps.size,
   clearOnReselect: Boolean,
-  dropTargetLabel: String,
-  helperText: String,
+  disabled: Boolean,
+  dropTargetLabel: { type: String, default: undefined },
+  helperText: { type: String, default: undefined },
+  initialStateUploading: Boolean,
   kind: {
     type: String,
     default: KINDS.DRAG_TARGET,
@@ -122,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,
 });
 
@@ -178,7 +201,7 @@ function addFiles(files) {
     const newFile = createInternalFile(internalFile?.file || file);
 
     if (internalFile) {
-      internalFile.state = newFile.initialState;
+      internalFile.state = newFile.state;
       internalFile.invalidMessageTitle = newFile.invalidMessageTitle;
       internalFile.invalidMessage = newFile.invalidMessage;
     } else {
@@ -216,6 +239,11 @@ function onChange(ev) {
 }
 
 function onDragEvent(evt) {
+  if (props.disabled) {
+    evt.preventDefault();
+    return;
+  }
+
   if (Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') === -1) {
     return;
   }
@@ -249,7 +277,7 @@ function onDragEvent(evt) {
 
 function onItemRemove(index) {
   internalFiles.value.splice(index, 1);
-  emit('update:modelValue', this.internalFiles);
+  emit('update:modelValue', internalFiles.value);
 }
 
 function onKeyHit() {
@@ -262,20 +290,31 @@ onMounted(() => {
 });
 
 // exposed methods
+function clear() {
+  internalFiles.value = [];
+  emit('update:modelValue', internalFiles.value);
+}
+
+function remove(index) {
+  onItemRemove(index);
+}
+
+function setInvalidMessage(index, message) {
+  internalFiles.value[index].invalidMessage = message;
+}
+
+function setState(index, state) {
+  if ([STATES.COMPLETE, STATES.UPLOADING, STATES.NONE].includes(state)) {
+    internalFiles.value[index].state = state;
+  }
+}
+
+// exposing methods
 defineExpose({
-  setState(index, state) {
-    if ([STATES.COMPLETE, STATES.UPLOADING, STATES.NONE].includes(state)) {
-      internalFiles.value[index].state = state;
-    }
-  },
-  clear() {
-    internalFiles.value = [];
-    emit('update:modelValue', internalFiles);
-  },
-  setInvalidMessage(index, message) {
-    internalFiles.value[index].invalidMessage = message;
-  },
-  remove: onItemRemove,
+  clear,
+  remove,
+  setInvalidMessage,
+  setState,
 });
 </script>
 

package/src/components/CvFileUploader/CvFileUploaderItem.vue

@@ -80,7 +80,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

@@ -28,7 +28,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,7 +14,6 @@
         [`${carbonPrefix}--loading--stop`]: (!active && stopping) || stopped,
         [`${carbonPrefix}--loading--small`]: small,
       }"
-      ref="loading"
       aria-atomic="true"
       :aria-labelledby="cvId"
       aria-live="assertive"

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,
 });

package/src/components/CvMultiSelect/CvMultiSelect.vue

@@ -45,7 +45,7 @@
           [`${carbonPrefix}--combo-box`]: isFilterable,
         },
       ]"
-      :data-invalid="data.isInvalid ? true : undefined"
+      :data-invalid="data.isInvalid || null"
       v-bind="$attrs"
       @keydown.down.prevent="onDown"
       @keydown.up.prevent="onUp"
@@ -150,8 +150,8 @@
         <div
           v-for="(item, index) in data.options"
           ref="elOption"
-          role="menuitem"
           :key="`multi-select-${index}`"
+          role="menuitem"
           :class="[
             `${carbonPrefix}--list-box__menu-item`,
             {
@@ -281,7 +281,7 @@ const props = defineProps({
   /**
    * The value of an option to initially highlight
    */
-  highlight: String,
+  highlight: { type: String, default: undefined },
   /**
    * Specify 'true' to create an inline multi-select.
    */
@@ -341,7 +341,7 @@ const props = defineProps({
   /**
    * Provide text to be used in a <label> element that is tied to the multiselect via ARIA attributes.
    */
-  title: String,
+  title: { type: String, default: undefined },
   /***
    * Allow users to pass in arbitrary items from their collection that are pre-selected
    */

package/src/components/CvNotification/CvToastNotification.stories.js

@@ -8,20 +8,17 @@ export default {
   component: CvToastNotification,
   argTypes: {
     kind: {
-      control: {
-        type: 'select',
-        options: CvNotificationConsts.notificationKinds,
-      },
-      defaultValue: CvNotificationConsts.notificationKinds[0],
+      control: 'select',
+      options: CvNotificationConsts.notificationKinds,
       table: {
         defaultValue: {
-          summary: `"${CvNotificationConsts.notificationKinds[0]}"`,
+          summary: `"${CvToastNotification.props.kind.default}"`,
         },
       },
     },
     title: {
-      control: { type: 'text' },
-      defaultValue: 'Notification title',
+      control: 'text',
+      default: 'Notification title',
       table: {
         defaultValue: {
           summary: `"${CvToastNotification.props.title.default}"`,
@@ -29,8 +26,8 @@ export default {
       },
     },
     subTitle: {
-      control: { type: 'text' },
-      defaultValue: 'Subtitle text goes here.',
+      control: 'text',
+      default: 'Subtitle text goes here.',
       table: {
         defaultValue: {
           summary: `"${CvToastNotification.props.subTitle.default}"`,
@@ -38,8 +35,8 @@ export default {
       },
     },
     caption: {
-      control: { type: 'text' },
-      defaultValue: '00:00:00 AM',
+      control: 'text',
+      default: '00:00:00 AM',
       table: {
         defaultValue: {
           summary: `"${CvToastNotification.props.caption.default}"`,
@@ -47,8 +44,8 @@ export default {
       },
     },
     closeAriaLabel: {
-      control: { type: 'text' },
-      defaultValue: CvToastNotification.props.closeAriaLabel.default,
+      control: 'text',
+      default: CvToastNotification.props.closeAriaLabel.default,
       table: {
         defaultValue: {
           summary: `"${CvToastNotification.props.closeAriaLabel.default}"`,
@@ -56,7 +53,7 @@ export default {
       },
     },
     lowContrast: {
-      control: { type: 'boolean' },
+      control: 'boolean',
     },
     // slots
     default: {

package/src/components/CvNotification/CvToastNotification.vue

@@ -56,7 +56,7 @@ export default {
       type: String,
       default: '',
     },
-    /** Notification sub title (supports HTML) */
+    /** Notification subtitle (supports HTML) */
     subTitle: {
       type: String,
       default: '',

package/src/components/CvNumberInput/CvNumberInput.vue

@@ -13,7 +13,7 @@
           [`cv-number-input`]: !formItem,
         },
       ]"
-      :data-invalid="dataInvalidAttributeValue"
+      :data-invalid="isInvalid || null"
     >
       <label
         v-show="label || slots['label']"
@@ -32,10 +32,10 @@
         ]"
       >
         <input
+          :id="cvId"
           ref="input"
           v-model="internalValue"
-          :id="cvId"
-          :data-invalid="dataInvalidAttributeValue"
+          :data-invalid="isInvalid || null"
           type="number"
           v-bind="$attrs"
           :disabled="disabled"
@@ -159,9 +159,6 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue']);
 const cvId = useCvId(props);
 const { isInvalid, isWarn, isHelper, isLight } = useCvInputHelpers(props);
-const dataInvalidAttributeValue = computed(() =>
-  isInvalid.value ? true : undefined
-);
 
 const iconClasses = computed(() => {
   const classes = [];

package/src/components/CvOverflowMenu/CvOverflowMenu.vue

@@ -1,11 +1,13 @@
 <template>
   <div
-    data-overflow-menu
-    :class="`cv-overflow-menu ${carbonPrefix}--overflow-menu`"
     :id="uid"
     ref="el"
+    data-overflow-menu
+    :class="`cv-overflow-menu ${carbonPrefix}--overflow-menu`"
   >
     <button
+      :id="`${uid}-trigger`"
+      ref="trigger"
       :class="[
         `${carbonPrefix}--overflow-menu__trigger ${carbonPrefix}--tooltip__trigger`,
         `${carbonPrefix}--tooltip--a11y`,
@@ -20,15 +22,13 @@
       :aria-expanded="open ? 'true' : 'false'"
       :aria-controls="`${uid}-menu`"
       :aria-labelledby="`${uid}`"
-      :id="`${uid}-trigger`"
-      ref="trigger"
       @click="doToggle"
       @keydown.space.prevent
       @keyup.space.prevent="doToggle"
       @keydown.enter.prevent="doToggle"
       @keydown.tab="onOverflowMenuTab"
     >
-      <span :class="`${carbonPrefix}--assistive-text`" v-if="label">{{
+      <span v-if="label" :class="`${carbonPrefix}--assistive-text`">{{
         label
       }}</span>
 
@@ -40,6 +40,8 @@
     </button>
     <Teleport to="body">
       <div
+        :id="`${uid}-menu`"
+        ref="popup"
         :class="[
           `${carbonPrefix}--overflow-menu-options`,
           {
@@ -48,16 +50,14 @@
           },
         ]"
         tabindex="-1"
-        ref="popup"
         :aria-labelledby="`${uid}-trigger`"
-        :id="`${uid}-menu`"
         :style="{ left: left + 'px', top: top + 'px' }"
         @focusout="checkFocusOut"
         @mousedown.prevent="preventFocusOut"
       >
         <div
-          class="cv-overflow-menu__before-content"
           ref="beforeContent"
+          class="cv-overflow-menu__before-content"
           tabindex="0"
           style="position: absolute; height: 1px; width: 1px; left: -9999px"
           @focus="focusBeforeContent"
@@ -66,8 +66,8 @@
           <slot></slot>
         </ul>
         <div
-          class="cv-overflow-menu__after-content"
           ref="afterContent"
+          class="cv-overflow-menu__after-content"
           tabindex="0"
           style="position: absolute; height: 1px; width: 1px; left: -9999px"
           @focus="focusAfterContent"
@@ -86,7 +86,7 @@ const props = defineProps({
   /**
    * assistive text shown as a tooltip
    */
-  label: String,
+  label: { type: String, default: undefined },
   /**
    * moves caret from right to left of popup menu
    */
@@ -105,6 +105,7 @@ const props = defineProps({
       return value && value.left !== undefined && value.top !== undefined;
       // value.hasOwnProperty('left') && value.hasOwnProperty('top');
     },
+    default: undefined,
   },
   /**
    * top, left, right(default) or bottom

package/src/components/CvOverflowMenu/CvOverflowMenuItem.vue

@@ -1,5 +1,6 @@
 <template>
   <li
+    ref="el"
     :class="[
       `cv-overflow-menu-item ${carbonPrefix}--overflow-menu-options__option`,
       {
@@ -8,7 +9,6 @@
       },
     ]"
     @keydown.esc.prevent="onEsc"
-    ref="el"
   >
     <button
       type="button"