@carbon/vue 3.0.10 → 3.0.12

package/src/components/CvNotification/CvInlineNotificationTemplate.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title,  Primary, Stories } from '@storybook/addon-docs';
+
+<Meta isTemplate />
+
+<Title />
+
+Migration notes:
+
+- **Breaking**. The `subTitle` property no longer renders html. Please use the `subtitle` slot instead.
+- The `title` content can now be provided in the `title` slot.
+
+<Primary />
+
+<Controls />
+
+<Stories />

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/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

@@ -6,7 +6,7 @@
       `cv-progress-step ${carbonPrefix}--progress-step`,
       `${carbonPrefix}--progress-step--${internalState}`,
     ]"
-    :aria-disabled="disabled"
+    :aria-disabled="disabled || null"
   >
     <button
       type="button"

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

@@ -25,7 +25,7 @@ export const Template = args => ({
       clearAriaLabel: args.clearAriaLabel,
       formItem: args.formItem,
       expandable: args.expandable,
-      value: args.value,
+      modelValue: args.modelValue,
       myValue: myValue,
       onInput: action('input'),
     };
@@ -40,7 +40,7 @@ const defaultTemplate = `
   :disabled="disabled"
   :size="size"
   :expandable="expandable"
-  :value="value"
+  :modelValue="modelValue"
   :form-item="formItem"
   :aria-label="ariaLabel"
   :clear-aria-label="clearAriaLabel"
@@ -51,7 +51,7 @@ const defaultTemplate = `
 const vModelTemplate = `
 <div>
   <cv-search
-    v-model:value="myValue"
+    v-model="myValue"
     :light="light"
     :label="label"
     :placeholder="placeholder"
@@ -64,7 +64,7 @@ const vModelTemplate = `
     >
   </cv-search>
   <div style="margin-top:1rem; background-color: #888888;  padding:1rem">
-    <div style="padding:1rem">v-model value: {{ myValue }}</div>
+    <div style="padding:1rem">v-model: {{ myValue }}</div>
     <input type="search" v-model="myValue"/>
   </div>
 </div>
@@ -74,8 +74,6 @@ const vModelTemplate = `
 
 Migration notes:
 
-- The `v-model` is different in Vue 3 than Vue 2. If you specify it you will see an error deprecation message in the log.
-  Please use `v-model:value=something` instead.
 - The "toolbar" mode is removed in this version. Please use the `expandable` mode instead.
 
 <Canvas>
@@ -85,10 +83,8 @@ Migration notes:
       controls: {
         exclude: [
           'input',
-          'modelValue',
           'template',
           'update:modelValue',
-          'update:value',
           'large',
           'small',
           'toolbarAriaLabel',
@@ -122,9 +118,6 @@ Migration notes:
 
 # v-model
 
-- The `v-model` is different in Vue 3 than Vue 2.If you specify it you will see an error deprecation message in the log.
-  Please use `v-model:value=something` instead.
-
 <Canvas>
   <Story
     name="v-model"
@@ -132,10 +125,8 @@ Migration notes:
       controls: {
         exclude: [
           'input',
-          'modelValue',
           'template',
           'update:modelValue',
-          'update:value',
           'large',
           'small',
           'toolbarAriaLabel',

package/src/components/CvSearch/CvSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="formItem ? 'div' : CvEmpty"
-    :class="`cv-search ${carbonPrefix}--form-item`"
+    :class="[`cv-search`, `${carbonPrefix}--form-item`, $attrs.class]"
   >
     <div
       ref="elSearch"
@@ -151,17 +151,9 @@ const props = defineProps({
   /**
    * Optionally provide the default value of the `<input>`
    */
-  value: { type: String, default: undefined },
-  /**
-   * @deprecated use value
-   */
   modelValue: {
     type: String,
     default: undefined,
-    validator: () => {
-      console.warn('Deprecated: use v-model:value instead');
-      return true;
-    },
   },
   /**
    * Provide an optional placeholder text for the Search. Note: if the label and placeholder differ, VoiceOver on Mac will read both
@@ -184,14 +176,14 @@ const props = defineProps({
 const uid = useCvId(props, true);
 const isLight = useIsLight(props);
 
-const clearVisible = ref(props.value ? props.value.length : false);
-const internalSearchText = ref(props.value || props.modelValue);
+const clearVisible = ref(props.modelValue ? props.modelValue.length : false);
+const internalSearchText = ref(props.modelValue);
 const searchActive = ref(false);
 watch(
-  () => props.value,
+  () => props.modelValue,
   () => {
-    clearVisible.value = props.value ? props.value.length : false;
-    internalSearchText.value = props.value;
+    clearVisible.value = props.modelValue ? props.modelValue.length : false;
+    internalSearchText.value = props.modelValue;
   }
 );
 
@@ -204,14 +196,10 @@ const internalAriaLabelBy = computed(() => {
   else return undefined;
 });
 
-const emit = defineEmits(['input', 'update:value', 'update:modelValue']);
+const emit = defineEmits(['input', 'update:modelValue']);
 watch(internalSearchText, () => {
   emit('input', internalSearchText.value);
-  emit('update:value', internalSearchText.value);
-  if (props.modelValue) {
-    console.warn('Deprecated: use v-model:value instead');
-    emit('update:modelValue', internalSearchText.value);
-  }
+  emit('update:modelValue', internalSearchText.value);
 });
 function onClearClick() {
   internalSearchText.value = '';

package/src/components/CvTabs/CvTabs.vue

@@ -70,8 +70,8 @@
             :class="`${carbonPrefix}--tabs--scrollable__nav-link`"
             role="tab"
             :aria-controls="tab.uid"
-            :aria-disabled="disabledTabs.has(tab.uid)"
-            :aria-selected="selectedId === tab.uid"
+            :aria-disabled="disabledTabs.has(tab.uid) || null"
+            :aria-selected="`${selectedId === tab.uid}`"
             :tabindex="selectedId === tab.uid ? 0 : -1"
             type="button"
             @click="onTabClick(tab.uid)"
@@ -187,7 +187,7 @@ function maybeSelectFirstTab() {
   if (index > -1) selectedId.value = tabs.value[index].uid;
 }
 onMounted(maybeSelectFirstTab);
-watch(tabs, maybeSelectFirstTab);
+watch(tabs, maybeSelectFirstTab, { deep: true });
 watch(selectedId, () => {
   nextTick(() => {
     doTabClick(selectedId.value);

package/src/components/CvTabs/__tests__/__snapshots__/CvTabs.spec.js.snap

@@ -7,9 +7,9 @@ exports[`CvTabs CvTabs - test slotted tab buttons to match snapshot 1`] = `
       </svg></button>
     <!--v-if-->
     <ul class="bx--tabs--scrollable__nav" role="tablist">
-      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item bx--tabs__nav-item--selected bx--tabs--scrollable__nav-item--selected" role="presentation"><button id="tab-1-link" class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-1" aria-disabled="false" aria-selected="true" tabindex="0" type="button">Hello <strong style="color: red;">(*)</strong></button></li>
-      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button id="tab-2-link" class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-2" aria-disabled="false" aria-selected="false" tabindex="-1" type="button">Origin<strong style="color: orange;">(!)</strong></button></li>
-      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button id="tab-3-link" class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-3" aria-disabled="false" aria-selected="false" tabindex="-1" type="button">Tab 3 label</button></li>
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item bx--tabs__nav-item--selected bx--tabs--scrollable__nav-item--selected" role="presentation"><button id="tab-1-link" class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-1" aria-selected="true" tabindex="0" type="button">Hello <strong style="color: red;">(*)</strong></button></li>
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button id="tab-2-link" class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-2" aria-selected="false" tabindex="-1" type="button">Origin<strong style="color: orange;">(!)</strong></button></li>
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button id="tab-3-link" class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-3" aria-selected="false" tabindex="-1" type="button">Tab 3 label</button></li>
     </ul>
     <!--v-if--><button aria-hidden="true" aria-label="scroll right" class="bx--tab--overflow-nav-button--hidden" tabindex="-1" type="button"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
         <path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path>

package/src/components/CvTooltip/CvInteractiveTooltip.vue

@@ -24,7 +24,7 @@
     <div
       :id="cvId"
       ref="popup"
-      :aria-hidden="!dataVisible"
+      :aria-hidden="`${!dataVisible}`"
       :data-floating-menu-direction="direction"
       :class="[
         `${carbonPrefix}--tooltip`,