fix: v-model misunderstanding

src/components/CvDropdown/CvDropdown.stories.mdx

@@ -49,7 +49,7 @@ const defaultTemplate = `
 <cv-dropdown
   :light="light"
   :placeholder="placeholder"
-  :value="value"
+  :modelValue="modelValue"
   :up="up"
   :inline="inline"
   :helper-text="helperText"
@@ -71,7 +71,7 @@ const defaultTemplate = `
 const slotsTemplate = `
 <div :style="{width: '300px'}">
 <cv-dropdown
-  v-model:value="myValue"
+  v-model="myValue"
   :light="light"
   :placeholder="placeholder"
   :up="up"
@@ -101,7 +101,7 @@ const itemsTemplate = `
 <cv-dropdown
   :light="light"
   :placeholder="placeholder"
-  :value="value"
+  :modelValue="modelValue"
   :up="up"
   :inline="inline"
   :helper-text="helperText"
@@ -119,7 +119,7 @@ const itemsTemplate = `
 const vmodelTemplate = `
 <div :style="{width: '300px'}">
 <cv-dropdown
-  v-model:value="myValue"
+  v-model="myValue"
   :label="label"
   :placeholder="placeholder"
   @change="onChange">
@@ -151,10 +151,7 @@ Notes:
 
 - You can place a Dropdown inline with other content by using the inline variant
   Migration notes:
-
-- The `v-model` is different in Vue 3 than Vue 2. You can still specify the `v-model=something` to control the visibility but
-  if you specify it like this you will see a deprecation message in the log. Please use `v-model:value=something` instead.
-- Add the `size` option to match Carbon React
+- Added the `size` option to match Carbon React
 - Added the `warningMessage` option to match Carbon React
 
 <Canvas>
@@ -168,21 +165,16 @@ Notes:
           'template',
           'change',
           'update:modelValue',
-          'update:value',
           'helper-text',
           'invalid-message',
           'warning-message',
           'internal-caption',
-          'modelValue',
         ],
       },
       docs: { source: { code: defaultTemplate } },
     }}
     args={{
       template: defaultTemplate,
-      props: {
-        modelValue: undefined,
-      },
       label: 'Characters',
       placeholder: 'Choose an ally',
       helperText: 'May the force be with you',
@@ -273,7 +265,6 @@ Notes:
           'template',
           'change',
           'update:modelValue',
-          'update:value',
           'helper-text',
           'invalid-message',
           'warning-message',
@@ -316,32 +307,7 @@ Notes:
     name="v-model"
     parameters={{
       controls: {
-        exclude: [
-          'props',
-          'default',
-          'template',
-          'change',
-          'update:modelValue',
-          'update:value',
-          'helper-text',
-          'invalid-message',
-          'warning-message',
-          'internal-caption',
-          'modelValue',
-          'ariaLabel',
-          'disabled',
-          'formItem',
-          'helperText',
-          'hideSelected',
-          'inline',
-          'invalidMessage',
-          'items',
-          'label',
-          'placeholder',
-          'size',
-          'up',
-          'value',
-          'warningMessage',
+        include: [
         ],
       },
       docs: { source: { code: vmodelTemplate } },
@@ -367,32 +333,7 @@ Notes:
     name="skeleton"
     parameters={{
       controls: {
-        exclude: [
-          'props',
-          'default',
-          'template',
-          'change',
-          'update:modelValue',
-          'update:value',
-          'helper-text',
-          'invalid-message',
-          'warning-message',
-          'internal-caption',
-          'modelValue',
-          'ariaLabel',
-          'disabled',
-          'formItem',
-          'helperText',
-          'hideSelected',
-          'invalidMessage',
-          'items',
-          'label',
-          'placeholder',
-          'size',
-          'up',
-          'value',
-          'warningMessage',
-          'inline',
+        include: [
         ],
       },
       docs: { source: { code: skeletonTemplate } },

src/components/CvDropdown/CvDropdown.vue

@@ -228,25 +228,15 @@ const props = defineProps({
    * Specify the direction of the dropdown. Can be either true (top) or (false) bottom.
    */
   up: { type: Boolean, default: false },
-  /**
-   * Render with a value already selected. Available as `v-model:value`.
-   */
-  value: { type: String, default: undefined },
   /**
    * Provide the text that is displayed and put the control in warning state
    */
   warningMessage: { type: String, default: undefined },
   /**
-   * @deprecated - use v-model:value
+   * Render with a value already selected. Available as `v-model`.
    */
   modelValue: {
     type: String,
-    validator: val => {
-      console.warn(
-        `v-model for cv-dropdown is deprecated. Specify "v-model:value" instead [${val}]`
-      );
-      return true;
-    },
     default: undefined,
   },
 
@@ -255,7 +245,7 @@ const props = defineProps({
 });
 const uid = useCvId(props, true);
 const isLight = useIsLight(props);
-const dataValue = ref(props.value);
+const dataValue = ref(props.modelValue);
 provide('dropdown-selected', dataValue);
 const focusItem = ref(undefined);
 provide('dropdown-focus', focusItem);
@@ -287,16 +277,15 @@ const isWarning = computed(() => {
 });
 onMounted(checkSlots);
 onUpdated(checkSlots);
-const emit = defineEmits(['update:value', 'update:modelValue', 'change']);
+const emit = defineEmits(['update:modelValue', 'change']);
 watch(
-  () => props.value,
+  () => props.modelValue,
   () => {
-    dataValue.value = props.value;
+    dataValue.value = props.modelValue;
   }
 );
 watch(dataValue, () => {
   emit('change', dataValue.value);
-  emit('update:value', dataValue.value);
   emit('update:modelValue', dataValue.value);
 });
 watch(open, () => {

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

src/components/CvMultiSelect/CvMultiSelect.vue

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