@carbon/vue 3.0.9 → 3.0.11

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

@@ -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,17 +151,9 @@ const props = defineProps({
   /**
    * Optionally provide the default value of the `<input>`
    */
-  value: String,
-  /**
-   * @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
@@ -172,10 +164,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,
@@ -183,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;
   }
 );
 
@@ -203,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/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>

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CvSlider should match snapshot 1`] = `
-<div class="cv-slider bx--form-item"><label for="abc" class="bx--label" id="abc-label" style="display: none;"></label>
+<div class="cv-slider bx--form-item"><label id="abc-label" for="abc" class="bx--label" style="display: none;"></label>
   <div class="bx--slider-container"><span class="bx--slider__range-label">0</span>
     <div class="bx--slider" data-slider="" data-slider-input-box="#slider-input-box">
       <div class="bx--slider__track"></div>

package/src/components/CvStructuredList/CvStructuredListItem.vue

@@ -4,7 +4,7 @@
     v-bind="$attrs"
     class="cv-structured-list-item"
     :value="value"
-    :modelValue="modelValue"
+    :model-value="modelValue"
   >
     <slot></slot>
   </component>
@@ -30,8 +30,8 @@ defineProps({
   },
 });
 
-const selectable = inject('selectable');
-const change = inject('change');
+const selectable = inject('selectable', false);
+const change = inject('change', () => {});
 const emit = defineEmits(['change']);
 
 provide('onRadioItemChange', clickedItemCvId => {

package/src/components/CvStructuredList/CvStructuredListItemSelectable.vue

@@ -11,8 +11,8 @@
     <slot></slot>
     <input
       v-bind="$attrs"
-      tabindex="-1"
       :id="cvId"
+      tabindex="-1"
       :class="`${carbonPrefix}--structured-list-input`"
       :checked="isChecked"
       :value="value"

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredListItem.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CvStructuredListItem should render correctly when \`value\` is default 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test"></cv-structured-list-item-standard-stub>`;
+exports[`CvStructuredListItem should render correctly when \`value\` is default 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" model-value="test"></cv-structured-list-item-standard-stub>`;
 
-exports[`CvStructuredListItem should render correctly when \`value\` is set 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test" value="strictured list item value test"></cv-structured-list-item-standard-stub>`;
+exports[`CvStructuredListItem should render correctly when \`value\` is set 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" model-value="test" value="strictured list item value test"></cv-structured-list-item-standard-stub>`;
 
-exports[`CvStructuredListItem should render correctly when slot is specified 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test"></cv-structured-list-item-standard-stub>`;
+exports[`CvStructuredListItem should render correctly when slot is specified 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" model-value="test"></cv-structured-list-item-standard-stub>`;

package/src/components/CvSvg/__tests__/_TestIcon.vue

@@ -1,6 +1,6 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="root">
-    <g fill-rule="evenodd" id="g">
+  <svg id="root" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <g id="g" fill-rule="evenodd">
       <path
         id="path"
         d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"

package/src/components/CvTabs/CvTab.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    :class="`cv-tab ${carbonPrefix}--tab-content`"
     :id="uid"
+    :class="`cv-tab ${carbonPrefix}--tab-content`"
     role="tabpanel"
     :aria-labelledby="`${uid}-link`"
     :aria-hidden="!dataSelected ? 'true' : 'false'"

package/src/components/CvTabs/CvTabs.vue

@@ -16,6 +16,7 @@
       @keydown.left.prevent.stop="onLeft"
     >
       <button
+        ref="elLeftOverflow"
         aria-hidden="true"
         aria-label="scroll left"
         :class="[
@@ -25,12 +26,11 @@
               leftOverflowNavButtonHidden,
           },
         ]"
+        tabIndex="-1"
+        type="button"
         @click.stop.prevent="e => onOverflowClick(e, { direction: -1 })"
         @mousedown.stop.prevent="e => onOverflowMouseDown(e, { direction: -1 })"
         @mouseup.stop.prevent="onOverflowMouseUp"
-        tabIndex="-1"
-        type="button"
-        ref="elLeftOverflow"
       >
         <ChevronLeft16 />
       </button>
@@ -40,9 +40,9 @@
       />
 
       <ul
+        ref="elTabList"
         :class="`${carbonPrefix}--tabs--scrollable__nav`"
         role="tablist"
-        ref="elTabList"
       >
         <li
           v-for="tab in tabs"
@@ -65,16 +65,16 @@
           role="presentation"
         >
           <button
+            :id="`${tab.uid}-link`"
+            ref="elLink"
             :class="`${carbonPrefix}--tabs--scrollable__nav-link`"
             role="tab"
             :aria-controls="tab.uid"
-            :aria-disabled="disabledTabs.has(tab.uid)"
+            :aria-disabled="disabledTabs.has(tab.uid) || null"
             :aria-selected="selectedId === tab.uid"
-            :id="`${tab.uid}-link`"
-            @click="onTabClick(tab.uid)"
-            ref="elLink"
             :tabindex="selectedId === tab.uid ? 0 : -1"
             type="button"
+            @click="onTabClick(tab.uid)"
           >
             <slot :name="tab.uid" v-bind="tab">
               {{ tab.label }}
@@ -88,6 +88,7 @@
         :class="`${carbonPrefix}--tabs__overflow-indicator--right`"
       />
       <button
+        ref="elRightOverflow"
         aria-hidden="true"
         aria-label="scroll right"
         :class="[
@@ -97,12 +98,11 @@
               rightOverflowNavButtonHidden,
           },
         ]"
+        tabIndex="-1"
+        type="button"
         @click="e => onOverflowClick(e, { direction: 1 })"
         @mousedown="e => onOverflowMouseDown(e, { direction: 1 })"
         @mouseup="onOverflowMouseUp"
-        tabIndex="-1"
-        type="button"
-        ref="elRightOverflow"
       >
         <ChevronRight16 />
       </button>
@@ -136,7 +136,7 @@ const props = defineProps({
   /**
    * @deprecated not used in component
    */
-  leftOverflowIconButtonProps: Object,
+  leftOverflowIconButtonProps: { type: Object, default: undefined },
   /**
    * This is an edge use case. By default, if no tab is explicitly selected, the first non-disabled tab is selected.
    */
@@ -144,7 +144,7 @@ const props = defineProps({
   /**
    * @deprecated not used in component
    */
-  rightOverflowIconButtonProps: Object,
+  rightOverflowIconButtonProps: { type: Object, default: undefined },
   /**
    * @deprecated not used in component
    */

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

@@ -7,18 +7,18 @@ 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 class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-1" aria-disabled="false" aria-selected="true" id="tab-1-link" 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 class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-2" aria-disabled="false" aria-selected="false" id="tab-2-link" 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 class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-3" aria-disabled="false" aria-selected="false" id="tab-3-link" 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>
       </svg></button>
   </div>
   <div class="cv-tabs__panels">
-    <div class="cv-tab bx--tab-content" id="tab-1" role="tabpanel" aria-labelledby="tab-1-link" aria-hidden="false">Tab 1 content</div>
-    <div class="cv-tab bx--tab-content" id="tab-2" role="tabpanel" aria-labelledby="tab-2-link" aria-hidden="true" hidden="">Tab 2 content</div>
-    <div class="cv-tab bx--tab-content" id="tab-3" role="tabpanel" aria-labelledby="tab-3-link" aria-hidden="true" hidden="">Tab 3 content</div>
+    <div id="tab-1" class="cv-tab bx--tab-content" role="tabpanel" aria-labelledby="tab-1-link" aria-hidden="false">Tab 1 content</div>
+    <div id="tab-2" class="cv-tab bx--tab-content" role="tabpanel" aria-labelledby="tab-2-link" aria-hidden="true" hidden="">Tab 2 content</div>
+    <div id="tab-3" class="cv-tab bx--tab-content" role="tabpanel" aria-labelledby="tab-3-link" aria-hidden="true" hidden="">Tab 3 content</div>
   </div>
 </div>
 `;

package/src/components/CvTag/CvTag.stories.js

@@ -10,7 +10,7 @@ export default {
   title: `${sbCompPrefix}/CvTag`,
   component: CvTag,
   argTypes: {
-    kind: { control: { type: 'select', options: tagKinds } },
+    kind: { control: 'select', options: tagKinds },
   },
 };
 

package/src/components/CvTag/CvTag.vue

@@ -8,8 +8,8 @@
       v-if="filter"
       :class="`${carbonPrefix}--tag__close-icon`"
       :aria-label="clearAriaLabel"
-      @click.stop.prevent="onRemove"
       :disabled="disabled"
+      @click.stop.prevent="onRemove"
     >
       <Close16 />
     </button>

package/src/components/CvTextArea/CvTextArea.vue

@@ -14,16 +14,16 @@
     </label>
     <div
       :class="`${carbonPrefix}--text-area__wrapper`"
-      :data-invalid="isInvalid"
+      :data-invalid="isInvalid || null"
     >
       <WarningFilled16
         v-if="isInvalid"
         :class="`${carbonPrefix}--text-area__invalid-icon`"
       />
       <textarea
-        :aria-invalid="isInvalid"
-        :aria-describedby="isInvalid ? errorId : undefined"
         :id="cvId"
+        :aria-invalid="isInvalid || null"
+        :aria-describedby="isInvalid ? errorId : undefined"
         :class="[
           `${carbonPrefix}--text-area`,
           {
@@ -66,12 +66,12 @@ const props = defineProps({
   helperText: { type: String, default: undefined },
   hideLabel: { type: Boolean, default: false },
   invalidMessage: { type: String, default: undefined },
-  label: String,
-  modelValue: String,
+  label: { type: String, default: undefined },
+  modelValue: { type: String, default: undefined },
   ...propsCvId,
   ...propsTheme,
 });
-
+defineEmits(['update:modelValue']);
 const cvId = useCvId(props);
 
 // DOM