@carbon/vue 3.0.9 → 3.0.11

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

@@ -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"
@@ -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"
@@ -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,24 +341,17 @@ const props = defineProps({
   /**
    * Provide text to be used in a <label> element that is tied to the multiselect via ARIA attributes.
    */
-  title: String,
-  /***
-   * Allow users to pass in arbitrary items from their collection that are pre-selected
-   */
-  value: { type: Array, default: () => [] },
+  title: { type: String, default: undefined },
   /**
    * 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({

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.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { CvProgress, CvProgressStep } from '.';
+import { CvProgress, CvProgressStep, CvProgressSkeleton } from '.';
 import { Time20 as TimeIcon } from '@carbon/icons-vue';
 // noinspection ES6PreferShortImport
 import { sbCompPrefix } from '../../global/storybook-utils';
@@ -13,6 +13,7 @@ export const Template = args => ({
     CvProgress,
     CvProgressStep,
     TimeIcon,
+    CvProgressSkeleton
   },
   // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
@@ -106,6 +107,7 @@ const slotTemplate = `
     </cv-progress-step>
   </cv-progress>
 `;
+const skeletonTemplate = `<cv-progress-skeleton :vertical="vertical" />`;
 
 # CvProgress
 
@@ -200,3 +202,23 @@ Use `cv-progress-step` for more control over the display.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+# Skeleton
+
+<Canvas>
+  <Story
+    name="skeleton"
+    parameters={{
+      controls: {
+        include: ['vertical']
+      },
+      docs: { source: { code: skeletonTemplate } },
+    }}
+    args={{
+      template: skeletonTemplate,
+      vertical: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

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

@@ -0,0 +1,37 @@
+<template>
+  <ul
+    :class="[
+      `${carbonPrefix}--progress`,
+      `${carbonPrefix}--skeleton`,
+      { [`${carbonPrefix}--progress--vertical`]: vertical },
+    ]"
+  >
+    <li
+      v-for="n in 4"
+      :key="n"
+      :class="[
+        `${carbonPrefix}--progress-step`,
+        `${carbonPrefix}--progress-step--incomplete`,
+      ]"
+    >
+      <div
+        :class="[
+          `${carbonPrefix}--progress-step-button`,
+          `${carbonPrefix}--progress-step-button--unclickable`,
+        ]"
+      >
+        <CircleDash16 />
+        <p :class="[`${carbonPrefix}--progress-label`]" />
+        <span :class="[`${carbonPrefix}--progress-line`]" />
+      </div>
+    </li>
+  </ul>
+</template>
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { CircleDash16 } from '@carbon/icons-vue';
+
+defineProps({
+  vertical: { type: Boolean, default: false },
+});
+</script>

package/src/components/CvProgress/CvProgressStep.vue

@@ -1,12 +1,12 @@
 <!--suppress HtmlUnknownTag -->
 <template>
   <li
+    :id="uid"
     :class="[
       `cv-progress-step ${carbonPrefix}--progress-step`,
       `${carbonPrefix}--progress-step--${internalState}`,
     ]"
-    :id="uid"
-    :aria-disabled="disabled"
+    :aria-disabled="disabled || null"
   >
     <button
       type="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/CvProgress/index.js

@@ -1,4 +1,6 @@
 import CvProgress from './CvProgress.vue';
 import CvProgressStep from './CvProgressStep.vue';
 
-export { CvProgress, CvProgressStep };
+import CvProgressSkeleton from './CvProgressSkeleton.vue';
+
+export { CvProgress, CvProgressStep, CvProgressSkeleton };

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,