refactor!: make all events camelcase and drop deprecated events

.eslintrc.json

@@ -35,6 +35,7 @@
 			{
 				"ignore": ["\\?raw$"]
 			}
-		]
+		],
+		"vue/custom-event-name-casing": "error"
 	}
 }

CHANGELOG.md

@@ -112,6 +112,15 @@ The `nativeType` property was removed in favor of `type`.
 <NcButton type="submit" variant="primary">Submit</NcButton>
 ```
 
+#### Event names
+To have a consistent naming for custom event the following events were deprecated
+and now are removed in favor of a new consistent event name:
+
+     Component |       Old event |       New event
+---------------|-----------------|----------------
+`NcAppContent` |   `resize:list` |   `resizeList`
+  `NcRichText` | `interact:todo` | `interactTodo`
+
 #### Mixins are removed
 Mixins only work in Options API and are in general not recommended by Vue anymore:
 

src/components/NcAppContent/NcAppContent.vue

@@ -270,8 +270,7 @@ export default {
 
 	emits: [
 		'update:showDetails',
-		'resize-list',
-		'resize:list',
+		'resizeList',
 	],
 
 	setup() {
@@ -411,14 +410,8 @@ export default {
 			this.listPaneSize = listPaneSize
 			/**
 			 * Emitted when the list pane is resized by the user
-			 *
-			 * @deprecated listen on `resize-list` instead
 			 */
-			this.$emit('resize:list', { size: listPaneSize })
-			/**
-			 * Emitted when the list pane is resized by the user
-			 */
-			this.$emit('resize-list', { size: listPaneSize })
+			this.$emit('resizeList', { size: listPaneSize })
 			console.debug('AppContent pane config', listPaneSize)
 		},
 

src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue

@@ -128,7 +128,7 @@ export default {
 		},
 	},
 
-	emits: ['new-item'],
+	emits: ['newItem'],
 
 	data() {
 		return {
@@ -150,7 +150,7 @@ export default {
 			this.newItemActive = false
 		},
 		handleNewItemDone() {
-			this.$emit('new-item', this.newItemValue)
+			this.$emit('newItem', this.newItemValue)
 			this.newItemValue = ''
 			this.newItemActive = false
 		},

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -920,14 +920,14 @@ export default {
 		'close',
 		'closed',
 		'opened',
-		// 'figure-click', not emitted on purpose to make "hasFigureClickListener" work
+		// 'figureClick', not emitted on purpose to make "hasFigureClickListener" work
 		'update:active',
 		'update:name',
 		'update:nameEditable',
 		'update:open',
 		'update:starred',
-		'submit-name',
-		'dismiss-editing',
+		'submitName',
+		'dismissEditing',
 	],
 
 	setup() {
@@ -1112,7 +1112,7 @@ export default {
 			 * @type {Event}
 			 */
 			// eslint-disable-next-line vue/require-explicit-emits
-			this.$emit('figure-click', e)
+			this.$emit('figureClick', e)
 		},
 
 		/**
@@ -1212,7 +1212,7 @@ export default {
 			 *
 			 * @type {Event}
 			 */
-			this.$emit('submit-name', event)
+			this.$emit('submitName', event)
 		},
 		onDismissEditing() {
 			// Disable editing
@@ -1222,7 +1222,7 @@ export default {
 			 *
 			 * @type {Event}
 			 */
-			this.$emit('dismiss-editing')
+			this.$emit('dismissEditing')
 		},
 		onUpdateActive(activeTab) {
 			/**

src/components/NcAppSidebarTab/NcAppSidebarTab.vue

@@ -62,7 +62,7 @@ export default {
 	},
 
 	emits: [
-		'bottom-reached',
+		'bottomReached',
 		'scroll',
 	],
 
@@ -99,7 +99,7 @@ export default {
 				 *
 				 * @property {Event} event Native scroll event
 				 */
-				this.$emit('bottom-reached', event)
+				this.$emit('bottomReached', event)
 			}
 			/**
 			 * @property {Event} event Native scroll event

src/components/NcCollectionList/NcCollectionListItem.vue

@@ -94,7 +94,10 @@ export default {
 		},
 	},
 
-	emits: ['remove-resource', 'rename-collection'],
+	emits: [
+		'removeResource',
+		'renameCollection',
+	],
 
 	data() {
 		return {
@@ -152,7 +155,7 @@ export default {
 		},
 
 		removeResource(collection, resource) {
-			this.$emit('remove-resource', {
+			this.$emit('removeResource', {
 				collectionId: collection.id,
 				resourceType: resource.type,
 				resourceId: resource.id,
@@ -165,7 +168,7 @@ export default {
 
 		renameCollection() {
 			if (this.newName) {
-				this.$emit('rename-collection', {
+				this.$emit('renameCollection', {
 					collectionId: this.collection.id,
 					name: this.newName,
 				})

src/components/NcContent/NcContent.vue

@@ -77,7 +77,7 @@ import contentSvg from './content-selected.svg?raw'
 import navigationSvg from './navigation-selected.svg?raw'
 /* eslint-enable import/no-unresolved */
 
-defineProps<{
+const props = defineProps<{
 	/**
 	 * The application name to use.
 	 * This is used to scope all content (content, sidebar, navigation) to the application.
@@ -94,6 +94,7 @@ defineSlots<{
 
 provide('NcContent:setHasAppNavigation', setAppNavigation)
 provide('NcContent:selector', '#content-vue')
+provide('appName', computed(() => props.appName))
 
 const isMobile = useIsMobile()
 

src/components/NcEmojiPicker/NcEmojiPicker.vue

@@ -313,7 +313,7 @@ export default {
 	},
 	emits: [
 		'select',
-		'select-data',
+		'selectData',
 		'unselect',
 	],
 
@@ -391,7 +391,7 @@ export default {
 			/**
 			 * Emits a object with more data about the picked emoji
 			 */
-			this.$emit('select-data', emojiObject)
+			this.$emit('selectData', emojiObject)
 
 			if (this.closeOnSelect) {
 				this.open = false

src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue

@@ -123,8 +123,8 @@ export default {
 	},
 
 	emits: [
-		'has-error',
-		'has-resources',
+		'hasError',
+		'hasResources',
 	],
 
 	data() {
@@ -201,15 +201,15 @@ export default {
 			 *
 			 * @type {boolean}
 			 */
-			this.$emit('has-error', Boolean(error))
+			this.$emit('hasError', Boolean(error))
 		},
 		resources(resources) {
 			/**
 			 * Emitted when the resources value changes
 			 *
 			 * @type {boolean}
 			 */
-			this.$emit('has-resources', resources.length > 0)
+			this.$emit('hasResources', resources.length > 0)
 		},
 	},
 

src/components/NcRichContenteditable/NcRichContenteditable.vue

@@ -412,10 +412,10 @@ export default {
 	},
 
 	emits: [
-		'submit',
 		'paste',
 		'update:modelValue',
-		'smart-picker-submit',
+		'smartPickerSubmit',
+		'submit',
 	],
 
 	setup() {
@@ -669,7 +669,7 @@ export default {
 						result,
 						insertText: true,
 					}
-					this.$emit('smart-picker-submit', eventData)
+					this.$emit('smartPickerSubmit', eventData)
 					if (eventData.insertText) {
 						const newElem = document.createTextNode(result)
 						tmpElem.replaceWith(newElem)

src/components/NcRichText/NcReferencePicker/NcProviderList.vue

@@ -60,7 +60,7 @@ export default {
 		LinkVariantIcon,
 	},
 	emits: [
-		'select-provider',
+		'selectProvider',
 		'submit',
 	],
 	data() {
@@ -96,7 +96,7 @@ export default {
 				if (p.isLink) {
 					this.$emit('submit', p.title)
 				} else {
-					this.$emit('select-provider', p)
+					this.$emit('selectProvider', p)
 				}
 				this.selectedProvider = null
 			}

src/components/NcRichText/NcReferencePicker/NcReferencePicker.vue

@@ -83,9 +83,9 @@ export default {
 	},
 	emits: [
 		'cancel',
-		'cancel-raw-link',
-		'cancel-search',
-		'provider-selected',
+		'cancelRawLink',
+		'cancelSearch',
+		'providerSelected',
 		'submit',
 	],
 	data() {
@@ -134,7 +134,7 @@ export default {
 		},
 		onProviderSelected(provider) {
 			this.selectedProvider = provider
-			this.$emit('provider-selected', provider)
+			this.$emit('providerSelected', provider)
 			this.$nextTick(() => {
 				this.$refs['url-input']?.focus()
 			})
@@ -143,11 +143,11 @@ export default {
 			this.deselectProvider()
 		},
 		cancelSearch() {
-			this.$emit('cancel-search', this.selectedProvider?.title)
+			this.$emit('cancelSearch', this.selectedProvider?.title)
 			this.deselectProvider()
 		},
 		cancelRawLinkInput() {
-			this.$emit('cancel-raw-link', this.selectedProvider?.title)
+			this.$emit('cancelRawLink', this.selectedProvider?.title)
 			this.deselectProvider()
 		},
 		cancelProviderSelection() {
@@ -162,7 +162,7 @@ export default {
 		},
 		deselectProvider() {
 			this.selectedProvider = null
-			this.$emit('provider-selected', null)
+			this.$emit('providerSelected', null)
 			setTimeout(() => {
 				this.$refs['provider-list']?.focus()
 			}, 300)

src/components/NcRichText/NcRichText.vue

@@ -392,8 +392,7 @@ export default {
 		},
 	},
 	emits: [
-		'interact-todo',
-		'interact:todo',
+		'interactTodo',
 	],
 
 	data() {
@@ -532,14 +531,8 @@ export default {
 							'onUpdate:modelValue': () => {
 								/**
 								 * Emitted when a todo-list entry was interacted with
-								 *
-								 * @deprecated listen on the `interact-todo` instead
 								 */
-								this.$emit('interact:todo', id)
-								/**
-								 * Emitted when a todo-list entry was interacted with
-								 */
-								this.$emit('interact-todo', id)
+								this.$emit('interactTodo', id)
 							},
 						}, { default: () => labelParts })
 

tests/unit/components/NcRichText/NcRichText.spec.js

@@ -208,7 +208,7 @@ describe('Foo', () => {
 		const checkbox = wrapper.findComponent({ name: 'NcCheckboxRadioSwitch' })
 		expect(checkbox.exists()).toBeTruthy()
 		await checkbox.vm.$emit('update:modelValue', true)
-		expect(wrapper.emitted()['interact:todo']).toBeTruthy()
+		expect(wrapper.emitted().interactTodo).toBeTruthy()
 	})
 
 	it('properly defines syntax in code blocks and highlights it', async () => {