Merge pull request #1165 from nextcloud-libraries/feat/1001/nc-vue-deprecations-pt3

feat(nextcloud-vue-plugin): deprecate NcPopover props

Author: susnux

lib/plugins/nextcloud-vue/rules/no-deprecated-props.test.ts

@@ -26,7 +26,6 @@ describe('no-deprecated-props', () => {
 	})
 
 	test('no-deprecated-props if library is not in use', () => {
-		console.log('only ttests')
 		vol.fromNestedJSON({
 			'/a': {
 				'package.json': '{"name": "my-app","version": "0.1.0"}',
@@ -283,6 +282,11 @@ describe('no-deprecated-props', () => {
 					filename: '/a/src/component.vue',
 					errors: [{ messageId: 'useNcSelectUsersInstead' }],
 				},
+				{
+					code: '<template><NcPopover :close-on-click-outside="false" /></template>',
+					filename: '/a/src/component.vue',
+					errors: [{ messageId: 'useNoCloseOnClickOutsideInstead' }],
+				},
 				{
 					code: '<template><NcTextField trailing-button-icon="arrowRight" /></template>',
 					filename: '/a/src/component.vue',
@@ -305,6 +309,54 @@ describe('no-deprecated-props', () => {
 					filename: '/a/src/component.vue',
 					errors: [{ messageId: 'removeExact' }],
 				},
+				{
+					code: '<template><NcCheckboxRadioSwitch checked /></template>',
+					filename: '/a/src/component.vue',
+					errors: [{ messageId: 'useModelValueInsteadChecked' }],
+					output: '<template><NcCheckboxRadioSwitch model-value /></template>',
+				},
+				{
+					code: '<template><NcCheckboxRadioSwitch :checked="isChecked" /></template>',
+					filename: '/a/src/component.vue',
+					errors: [{ messageId: 'useModelValueInsteadChecked' }],
+					output: '<template><NcCheckboxRadioSwitch :model-value="isChecked" /></template>',
+				},
+				{
+					code: '<template><NcCheckboxRadioSwitch :checked.sync="isChecked" /></template>',
+					filename: '/a/src/component.vue',
+					errors: [{ messageId: 'useModelValueInsteadChecked' }],
+					output: '<template><NcCheckboxRadioSwitch v-model="isChecked" /></template>',
+				},
+				{
+					code: '<template><NcCheckboxRadioSwitch v-model:checked="isChecked" /></template>',
+					filename: '/a/src/component.vue',
+					errors: [{ messageId: 'useModelValueInsteadChecked' }],
+					output: '<template><NcCheckboxRadioSwitch v-model="isChecked" /></template>',
+				},
+				{
+					code: '<template><NcTextField value="input" /></template>',
+					filename: '/a/src/component.vue',
+					errors: [{ messageId: 'useModelValueInsteadValue' }],
+					output: '<template><NcTextField model-value="input" /></template>',
+				},
+				{
+					code: '<template><NcTextField :value="input" /></template>',
+					filename: '/a/src/component.vue',
+					errors: [{ messageId: 'useModelValueInsteadValue' }],
+					output: '<template><NcTextField :model-value="input" /></template>',
+				},
+				{
+					code: '<template><NcTextField :value.sync="input" /></template>',
+					filename: '/a/src/component.vue',
+					errors: [{ messageId: 'useModelValueInsteadValue' }],
+					output: '<template><NcTextField v-model="input" /></template>',
+				},
+				{
+					code: '<template><NcTextField v-model:value="input" /></template>',
+					filename: '/a/src/component.vue',
+					errors: [{ messageId: 'useModelValueInsteadValue' }],
+					output: '<template><NcTextField v-model="input" /></template>',
+				},
 			],
 		})
 	})

lib/plugins/nextcloud-vue/rules/no-deprecated-props.ts

@@ -26,6 +26,7 @@ export default {
 			useLocaleInstead: 'Using `lang` is deprecated - use `locale` instead',
 			useTypeDateRangeInstead: 'Using `range` is deprecated - use `type` with `date-range` or `datetime-range` instead',
 			useNoCloseInstead: 'Using `can-close` is deprecated - use `no-close` instead',
+			useNoCloseOnClickOutsideInstead: 'Using `close-on-click-outside` is deprecated - use `no-close-on-click-outside` instead',
 			useDisableSwipeForModalInstead: 'Using `enable-swipe` is deprecated - use `disable-swipe` instead',
 			useNoFocusTrapInstead: 'Using `focus-trap` is deprecated - use `no-focus-trap` instead',
 			useKeepOpenInstead: 'Using `close-on-select` is deprecated - use `keep-open` instead',
@@ -35,13 +36,16 @@ export default {
 			removeLimitWidth: 'Using `limit-width` is deprecated - remove prop from components, otherwise root element will inherit incorrect attribute.',
 			removeExact: 'Using `exact` is deprecated - consult Vue Router documentation for alternatives.',
 			useCloseButtonOutsideInstead: 'Using `close-button-contained` is deprecated - use `close-button-outside` instead',
+			useModelValueInsteadChecked: 'Using `checked` is deprecated - use `model-value` or `v-model` instead',
+			useModelValueInsteadValue: 'Using `value` is deprecated - use `model-value` or `v-model` instead',
 		},
 	},
 
 	create(context) {
 		const versionSatisfies = createLibVersionValidator(context)
 		const isVue3Valid = versionSatisfies('9.0.0') // #6651
 		const isAriaHiddenValid = versionSatisfies('8.2.0') // #4835
+		const isModelValueValid = versionSatisfies('8.20.0') // #6172
 		const isDisableSwipeValid = versionSatisfies('8.23.0') // #6452
 		const isVariantTypeValid = versionSatisfies('8.24.0') // #6472
 		const isDefaultBooleanFalseValid = versionSatisfies('8.24.0') // #6656
@@ -246,6 +250,18 @@ export default {
 				})
 			},
 
+			'VElement[name="ncpopover"] VAttribute:has(VIdentifier[name="close-on-click-outside"])': function(node) {
+				if (!isVue3Valid) {
+					// Do not throw for v8.X.X
+					return
+				}
+
+				context.report({
+					node,
+					messageId: 'useNoCloseOnClickOutsideInstead',
+				})
+			},
+
 			'VElement[name="ncmodal"] VAttribute:has(VIdentifier[name="enable-swipe"])': function(node) {
 				if (!isDisableSwipeValid) {
 					context.report({ node, messageId: 'outdatedVueLibrary' })
@@ -371,6 +387,84 @@ export default {
 					messageId: 'removeExact',
 				})
 			},
+
+			'VElement VAttribute:has(VIdentifier[name="checked"])': function(node) {
+				if (![
+					'ncactioncheckbox',
+					'ncactionradio',
+					'nccheckboxradioswitch',
+				].includes(node.parent.parent.name)) {
+					return
+				}
+
+				if (!isModelValueValid) {
+					context.report({ node, messageId: 'outdatedVueLibrary' })
+					return
+				}
+
+				context.report({
+					node,
+					messageId: 'useModelValueInsteadChecked',
+					fix: (fixer) => {
+						if (node.key.type === 'VIdentifier') {
+							return fixer.replaceTextRange(node.key.range, 'model-value')
+						} else if (node.key.type === 'VDirectiveKey') {
+							if (node.key.name.name === 'model') {
+								return fixer.replaceTextRange(node.key.range, 'v-model')
+							} else if (node.key.modifiers.some((m) => m.name === 'sync')) {
+								return fixer.replaceTextRange(node.key.range, 'v-model')
+							} else {
+								return fixer.replaceTextRange(node.key.argument.range, 'model-value')
+							}
+						}
+					},
+				})
+			},
+
+			'VElement VAttribute:has(VIdentifier[name="value"])': function(node) {
+				if (![
+					'ncactioninput',
+					'ncactiontexteditable',
+					'nccolorpicker',
+					'ncdatetimepicker',
+					'ncdatetimepickernative',
+					'ncinputfield',
+					'nctextfield',
+					'ncpasswordfield',
+					'ncrichcontenteditable',
+					'ncselecttags',
+					'ncselect',
+					'ncsettingsinputtext',
+					'ncsettingsselectgroup',
+					'nctextarea',
+					'nctimezonepicker',
+				].includes(node.parent.parent.name)) {
+					return
+				}
+
+				if (!isModelValueValid) {
+					context.report({ node, messageId: 'outdatedVueLibrary' })
+					return
+				}
+
+				context.report({
+					node,
+					messageId: 'useModelValueInsteadValue',
+					fix: (fixer) => {
+						if (node.key.type === 'VIdentifier') {
+							return fixer.replaceTextRange(node.key.range, 'model-value')
+						} else if (node.key.type === 'VDirectiveKey') {
+							if (node.key.name.name === 'model') {
+								return fixer.replaceTextRange(node.key.range, 'v-model')
+							} else if (node.key.modifiers.some((m) => m.name === 'sync')) {
+								return fixer.replaceTextRange(node.key.range, 'v-model')
+							} else {
+								return fixer.replaceTextRange(node.key.argument.range, 'model-value')
+							}
+						}
+					},
+				})
+			},
 		})
 	},
 } satisfies Rule.RuleModule