@carbon/vue 3.0.9 → 3.0.10

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"

package/src/components/CvPagination/CvPagination.vue

@@ -2,12 +2,12 @@
   <div :class="`cv-pagination ${carbonPrefix}--pagination`" data-pagination>
     <div :class="`${carbonPrefix}--pagination__left`">
       <cv-select
+        ref="pageSizeSelect"
         :class="`${carbonPrefix}--select__item-count`"
         :label="pageSizesLabel"
         inline
-        ref="pageSizeSelect"
-        @change="onPageSizeChange"
         :value="`${pageSizeValue}`"
+        @change="onPageSizeChange"
       >
         <cv-select-option
           v-for="(size, index) in pageSizes"
@@ -21,23 +21,21 @@
 
       <span :class="`${carbonPrefix}--pagination__text`">
         <span data-displayed-item-range>
-          <slot name="range-text" v-bind:scope="rangeProps">{{
-            rangeText
-          }}</slot>
+          <slot name="range-text" :scope="rangeProps">{{ rangeText }}</slot>
         </span>
       </span>
     </div>
 
     <div :class="`${carbonPrefix}--pagination__right`">
       <cv-select
+        v-if="numberOfItems !== Infinity"
+        ref="pageSelect"
         :class="`${carbonPrefix}--select__page-number`"
         :label="pageNumberLabel"
         inline
-        hideLabel
-        ref="pageSelect"
-        @change="onPageChange"
+        hide-label
         :value="`${pageValue}`"
-        v-if="numberOfItems !== Infinity"
+        @change="onPageChange"
       >
         <cv-select-option
           v-for="pageNumber in pages"
@@ -48,9 +46,7 @@
         >
       </cv-select>
       <span :class="`${carbonPrefix}--pagination__text`">
-        <slot name="of-n-pages" v-bind:scope="ofNPagesProps">{{
-          pageOfPages
-        }}</slot>
+        <slot name="of-n-pages" :scope="ofNPagesProps">{{ pageOfPages }}</slot>
       </span>
 
       <button
@@ -61,8 +57,8 @@
         ]"
         data-page-backward
         :aria-label="backwardText"
-        @click="onPrevPage"
         :disabled="noWayBack"
+        @click="onPrevPage"
       >
         <CaretLeft16 :class="`${carbonPrefix}--pagination__button-icon`" />
       </button>
@@ -75,8 +71,8 @@
         ]"
         data-page-forward
         :aria-label="forwardText"
-        @click="onNextPage"
         :disabled="noWayForward"
+        @click="onNextPage"
       >
         <CaretRight16 :class="`${carbonPrefix}--pagination__button-icon`" />
       </button>
@@ -102,7 +98,7 @@ const props = defineProps({
   pageSizesLabel: { type: String, default: 'Items per page:' },
   numberOfItems: { type: Number, default: Infinity },
   actualItemsOnPage: { type: Number, default: Infinity },
-  page: Number,
+  page: { type: Number, default: undefined },
   pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
 });
 

package/src/components/CvProgress/CvProgress.vue

@@ -34,7 +34,7 @@ const props = defineProps({
   /**
    * An array of labels for the steps. Use `cv-progress-step` components for more control over the step logic.
    */
-  steps: Array,
+  steps: { type: Array, default: () => [] },
   /**
    * Determines whether the ProgressIndicator should be rendered vertically.
    */

package/src/components/CvProgress/CvProgressStep.vue

@@ -1,11 +1,11 @@
 <!--suppress HtmlUnknownTag -->
 <template>
   <li
+    :id="uid"
     :class="[
       `cv-progress-step ${carbonPrefix}--progress-step`,
       `${carbonPrefix}--progress-step--${internalState}`,
     ]"
-    :id="uid"
     :aria-disabled="disabled"
   >
     <button
@@ -62,12 +62,12 @@ const STEP_INCOMPLETE = 'incomplete';
 const STEP_DISABLED = 'disabled';
 
 const props = defineProps({
-  additionalInfo: String,
-  description: String,
+  additionalInfo: { type: String, default: undefined },
+  description: { type: String, default: undefined },
   disabled: Boolean,
   invalid: Boolean,
-  label: String,
-  tipText: String,
+  label: { type: String, default: undefined },
+  tipText: { type: String, default: undefined },
   complete: Boolean,
   ...propsCvId,
 });

package/src/components/CvRadioButton/CvRadioButton.vue

@@ -8,9 +8,9 @@
     <input
       v-bind="$attrs"
       :id="cvId"
+      ref="input"
       :checked="isChecked"
       :class="`${carbonPrefix}--radio-button`"
-      ref="input"
       type="radio"
       :value="value"
       @change="onChange"
@@ -33,9 +33,9 @@ import { carbonPrefix } from '../../global/settings';
 import { useCvId, propsCvId, useMethods, useRadio } from '../../use';
 
 const props = defineProps({
-  modelValue: String,
+  modelValue: { type: String, default: undefined },
   checked: Boolean,
-  label: String,
+  label: { type: String, default: undefined },
   value: { type: String, required: true },
   hideLabel: Boolean,
   labelLeft: Boolean,

package/src/components/CvSearch/CvSearch.vue

@@ -4,6 +4,7 @@
     :class="`cv-search ${carbonPrefix}--form-item`"
   >
     <div
+      ref="elSearch"
       :aria-label="internalAriaLabel"
       :aria-labelledby="internalAriaLabelBy"
       :class="[
@@ -18,7 +19,6 @@
         },
       ]"
       role="search"
-      ref="elSearch"
     >
       <div
         :class="`${carbonPrefix}--search-magnifier`"
@@ -33,20 +33,20 @@
       }}</label>
 
       <input
-        role="searchbox"
         :id="uid"
-        :class="`${carbonPrefix}--search-input`"
         v-bind="$attrs"
+        ref="elInput"
         v-model="internalSearchText"
-        @input="onInput"
+        role="searchbox"
+        :class="`${carbonPrefix}--search-input`"
         type="text"
-        ref="elInput"
         :placeholder="placeholder"
         :aria-labelledby="uid"
+        :disabled="disabled ? 'true' : undefined"
+        @input="onInput"
         @blur="checkFocus"
         @click="toggleActive"
         @keydown.esc="onClearClick"
-        :disabled="disabled ? 'true' : undefined"
       />
 
       <button
@@ -111,7 +111,7 @@ const props = defineProps({
   /**
    * Provide the label text for the Search icon
    */
-  label: String,
+  label: { type: String, default: undefined },
   /**
    * Specify the search size ('sm', 'md', 'lg', 'xl')
    */
@@ -151,7 +151,7 @@ const props = defineProps({
   /**
    * Optionally provide the default value of the `<input>`
    */
-  value: String,
+  value: { type: String, default: undefined },
   /**
    * @deprecated use value
    */
@@ -172,10 +172,11 @@ const props = defineProps({
    */
   toolbarAriaLabel: {
     type: String,
-    validator: () => {
-      console.warn('Deprecated: probably you want expandable=true');
+    validator: s => {
+      if (s) console.warn('Deprecated: probably you want expandable=true');
       return true;
     },
+    default: undefined,
   },
   ...propsTheme,
   ...propsCvId,

package/src/components/CvSelect/CvSelect.vue

@@ -37,7 +37,7 @@
       >
         <div
           :class="`${carbonPrefix}--select-input__wrapper`"
-          :data-invalid="isInvalid ? true : undefined"
+          :data-invalid="isInvalid || null"
         >
           <select
             v-bind="$attrs"

package/src/components/CvSlider/CvSlider.vue

@@ -2,12 +2,12 @@
   <div :class="`cv-slider ${carbonPrefix}--form-item`">
     <label
       v-show="label"
+      :id="labelId"
       :for="cvId"
       :class="[
         `${carbonPrefix}--label`,
         { [`${carbonPrefix}--label--disabled`]: disabled },
       ]"
-      :id="labelId"
     >
       {{ label }}
     </label>
@@ -26,9 +26,9 @@
         data-slider-input-box="#slider-input-box"
       >
         <div
+          ref="track"
           :class="`${carbonPrefix}--slider__track`"
           @click="onTrackClick"
-          ref="track"
         ></div>
 
         <div
@@ -37,6 +37,7 @@
         ></div>
 
         <div
+          ref="thumb"
           :class="[
             `${carbonPrefix}--slider__thumb`,
             {
@@ -46,7 +47,6 @@
           tabindex="0"
           :aria-labelledby="labelId"
           :style="`left: ${percentage};`"
-          ref="thumb"
           @keydown.up.right.prevent="onUp"
           @keydown.down.left.prevent="onDown"
           @mousedown="onStartDrag"
@@ -54,12 +54,12 @@
 
         <input
           :id="cvId"
+          ref="range"
           :class="`${carbonPrefix}--slider__input`"
           type="range"
           :step="step"
           :min="min"
           :max="max"
-          ref="range"
         />
       </div>
 
@@ -68,18 +68,18 @@
       </span>
 
       <input
+        ref="inputBox"
+        v-model="internalValue"
         type="string"
         :class="[
           `${carbonPrefix}--text-input ${carbonPrefix}--slider-text-input`,
           { [`${carbonPrefix}--text-input--light`]: isLight },
         ]"
         :placeholder="min"
-        v-model="internalValue"
+        :disabled="disabled"
         @change="onChange"
-        ref="inputBox"
         @keydown.up.prevent="onUp"
         @keydown.down.prevent="onDown"
-        :disabled="disabled"
       />
     </div>
   </div>