diff --git a/src/components/CvDropdown/CvDropdown.stories.mdx b/src/components/CvDropdown/CvDropdown.stories.mdx index 2bc7366e2..f213c21fe 100644 --- a/src/components/CvDropdown/CvDropdown.stories.mdx +++ b/src/components/CvDropdown/CvDropdown.stories.mdx @@ -49,7 +49,7 @@ const defaultTemplate = ` @@ -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 @@ -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 } }, diff --git a/src/components/CvDropdown/CvDropdown.vue b/src/components/CvDropdown/CvDropdown.vue index 5ab861b46..ba2486004 100644 --- a/src/components/CvDropdown/CvDropdown.vue +++ b/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, () => { diff --git a/src/components/CvMultiSelect/CvMultiSelect.stories.mdx b/src/components/CvMultiSelect/CvMultiSelect.stories.mdx index 3f04f568d..668bd94f8 100644 --- a/src/components/CvMultiSelect/CvMultiSelect.stories.mdx +++ b/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" >
-
v-model:value
+
v-model
@@ -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. 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({ diff --git a/src/components/CvSearch/CvSearch.stories.mdx b/src/components/CvSearch/CvSearch.stories.mdx index 551919ef0..87e1ec61d 100644 --- a/src/components/CvSearch/CvSearch.stories.mdx +++ b/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 = `
-
v-model value: {{ myValue }}
+
v-model: {{ myValue }}
@@ -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. @@ -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. - ` */ - 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 = '';