chore(eslint-config): activate 'vue/require-explicit-emits' rule

Co-Authored-By: Florian Wendelborn <[email protected]>
3YOURMIND · May 31, 2024 · 2ed14f3 · 2ed14f3
1 parent e6924cf
commit 2ed14f3
Show file tree

Hide file tree

Showing 63 changed files with 105 additions and 5 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -42,7 +42,13 @@ const config = tseslint.config(
 	 * @see {@link https://eslint.org/docs/latest/use/configure/ignore#ignoring-files}
 	 */
 	{
-		ignores: ['**/dist/**', '**/.nuxt/**', '**/.turbo/**', '**/*.js'],
+		ignores: [
+			'**/dist/**',
+			'**/.nuxt/**',
+			'**/.turbo/**',
+			'**/*.js',
+			'**/vite.config.ts.timestamp-*', // used by vite to interpret vite.config.ts
+		],
 	},
 	...eslintConfig3YD.configs.global,
 	{

diff --git a/packages/documentation/components/ComponentInfo.vue b/packages/documentation/components/ComponentInfo.vue
@@ -125,11 +125,27 @@
 				</tbody>
 			</table>
 		</KtHeading>
+
+		<KtHeading
+			v-if="component.emits && component.emits.length > 0"
+			text="Emits"
+			:toggleStatus="showEmits"
+			toggleCloseText="Hide"
+			toggleText="Show"
+			type="toggle"
+			@toggle="showEmits = !showEmits"
+		>
+			<div style="display: flex; flex-wrap: wrap; gap: 4px">
+				<template v-for="emit in component.emits">
+					<code :key="emit" v-text="`@${emit}`" />
+				</template>
+			</div>
+		</KtHeading>
 	</div>
 </template>
 
 <script lang="ts">
-import { Kotti } from '@3yourmind/kotti-ui'
+import { KtHeading, Kotti } from '@3yourmind/kotti-ui'
 import { Yoco } from '@3yourmind/yoco'
 import { Dashes } from '@metatypes/typography'
 import castArray from 'lodash/castArray'
@@ -150,11 +166,13 @@ export default defineComponent({
 	name: 'ComponentInfo',
 	components: {
 		ComponentInfoSlots,
+		KtHeading,
 	},
 	props: {
 		component: {
 			required: true,
 			type: Object as PropType<{
+				emits?: string[]
 				meta: Kotti.Meta
 				name: string
 				props?: Record<string, unknown>
@@ -266,6 +284,7 @@ export default defineComponent({
 
 				return result
 			}),
+			showEmits: ref(false),
 			showProps: ref(false),
 			stringifyPropDefault: (
 				// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents

diff --git a/packages/eslint-config/source/index.ts b/packages/eslint-config/source/index.ts
@@ -466,6 +466,7 @@ export default {
 				'vue/no-useless-v-bind': 'warn',
 				'vue/require-component-is': 'error',
 				'vue/require-default-prop': 'off', // disabled because it doesn’t handle boolean props correctly
+				'vue/require-explicit-emits': 'error',
 			},
 		}),
 	},

diff --git a/packages/kotti-ui/source/kotti-accordion/KtAccordion.vue b/packages/kotti-ui/source/kotti-accordion/KtAccordion.vue
@@ -34,6 +34,7 @@ const ANIMATION_DURATION = 300
 export default defineComponent({
 	name: 'KtAccordion',
 	props: makeProps(KottiAccordion.propsSchema),
+	emits: ['update:isClosed'],
 	setup(props, { emit }) {
 		const contentInnerRef = ref<HTMLElement | null>(null)
 

diff --git a/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue b/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue
@@ -31,6 +31,7 @@ import { KottiAvatar } from './types'
 export default defineComponent({
 	name: 'KtAvatar',
 	props: makeProps(KottiAvatar.propsSchema),
+	emits: ['click'],
 	setup(props, { emit, slots }) {
 		const avatarFallback = ref(true)
 

diff --git a/packages/kotti-ui/source/kotti-banner/KtBanner.vue b/packages/kotti-ui/source/kotti-banner/KtBanner.vue
@@ -33,6 +33,7 @@ export default defineComponent({
 		KtButton,
 	},
 	props: makeProps(KottiBanner.propsSchema),
+	emits: ['click'],
 	setup(props, { slots }) {
 		const translations = useTranslationNamespace('KtBanner')
 

diff --git a/packages/kotti-ui/source/kotti-button/KtButton.vue b/packages/kotti-ui/source/kotti-button/KtButton.vue
@@ -28,6 +28,7 @@ import { KottiButton } from './types'
 export default defineComponent({
 	name: 'KtButton',
 	props: makeProps(KottiButton.propsSchema),
+	emits: ['click', 'update:toggleStatus'],
 	setup(props, { emit, slots }) {
 		const helpTextContentRef = ref<Element | null>(null)
 		const helpTextTriggerRef = ref<Element | null>(null)

diff --git a/packages/kotti-ui/source/kotti-button/KtSplitButton.vue b/packages/kotti-ui/source/kotti-button/KtSplitButton.vue
@@ -58,6 +58,7 @@ export default defineComponent({
 		ActionsItem,
 	},
 	props: makeProps(KottiSplitButton.propsSchema),
+	emits: ['click'],
 	setup(props, { emit }) {
 		const { isTippyOpen, setIsTippyOpen, tippyContentRef, tippyTriggerRef } =
 			useActionsTippy({

diff --git a/packages/kotti-ui/source/kotti-button/components/ActionsItem.vue b/packages/kotti-ui/source/kotti-button/components/ActionsItem.vue
@@ -35,6 +35,7 @@ const propsSchema = KottiSplitButton.actionSchema.extend({
 export default defineComponent({
 	name: 'SplitButtonActionsItem',
 	props: makeProps(propsSchema),
+	emits: ['click', 'updateIndexInFocus'],
 	setup(props, { emit }) {
 		const itemRef = ref<HTMLButtonElement | null>(null)
 

diff --git a/packages/kotti-ui/source/kotti-card/KtCard.vue b/packages/kotti-ui/source/kotti-card/KtCard.vue
@@ -43,6 +43,7 @@ export default defineComponent({
 	name: 'KtCard',
 	components: { KtButton },
 	props: makeProps(KottiCard.propsSchema),
+	emits: ['click', 'clickOnPrimaryButton', 'clickOnSecondaryButton'],
 	setup(props, { emit }) {
 		const hasActions = computed(
 			() =>

diff --git a/packages/kotti-ui/source/kotti-comment/KtComment.vue b/packages/kotti-ui/source/kotti-comment/KtComment.vue
@@ -56,6 +56,7 @@ export default defineComponent({
 		KtCommentInput,
 	},
 	props: makeProps(KottiComment.propsSchema),
+	emits: ['add', 'delete', 'edit'],
 	setup(props, { emit }) {
 		const translations = useTranslationNamespace('KtComment')
 

diff --git a/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue b/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue
@@ -28,6 +28,7 @@ export default defineComponent({
 		CommentTextArea,
 	},
 	props: makeProps(KottiCommentInput.propsSchema),
+	emits: ['add', 'cancel'],
 	setup(props, { emit }) {
 		// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 		const localIsInternal = ref<KottiComment.PropsInternal['isInternal']>(

diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentActions.vue b/packages/kotti-ui/source/kotti-comment/components/CommentActions.vue
@@ -40,6 +40,7 @@ import { KottiComment } from '../types'
 export default defineComponent({
 	name: 'CommentActions',
 	props: makeProps(KottiComment.Actions.schema),
+	emits: ['delete', 'reply', 'update:isEditing'],
 	setup(_, { emit }) {
 		const translations = useTranslationNamespace('KtComment')
 

diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentEntry.vue b/packages/kotti-ui/source/kotti-comment/components/CommentEntry.vue
@@ -52,6 +52,7 @@ export default defineComponent({
 		CommentInlineEdit,
 	},
 	props: makeProps(KottiComment.Entry.schema),
+	emits: ['delete', 'edit', 'reply'],
 	setup(props, { emit }) {
 		const isEditing = ref(false)
 

diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue b/packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue
@@ -41,6 +41,7 @@ export default defineComponent({
 		CommentTextArea,
 	},
 	props: makeProps(KottiComment.InlineEdit.schema),
+	emits: ['edit', 'update:isEditing'],
 	setup(props, { emit }) {
 		const localMessage =
 			ref<KottiComment.InlineEdit.PropsInternal['message']>('')

diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentTextArea.vue b/packages/kotti-ui/source/kotti-comment/components/CommentTextArea.vue
@@ -69,6 +69,7 @@ import { KottiComment } from '../types'
 export default defineComponent({
 	name: 'CommentTextArea',
 	props: makeProps(KottiComment.TextArea.schema),
+	emits: ['cancel', 'confirm', 'input', 'toggleInternal'],
 	setup(props, { emit }) {
 		const translations = useTranslationNamespace('KtComment')
 

diff --git a/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue b/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
@@ -31,6 +31,7 @@ import { KottiDrawer } from './types'
 export default defineComponent({
 	name: 'KtDrawer',
 	props: makeProps(KottiDrawer.propsSchema),
+	emits: ['close'],
 	setup(props, { emit }) {
 		const isExpanded = ref(false)
 

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUploadRemote.vue b/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUploadRemote.vue
@@ -89,6 +89,7 @@ export default defineComponent({
 		TakePhoto,
 	},
 	props: makeProps(KottiFieldFileUploadRemote.propsSchema),
+	emits: ['input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldFileUploadRemote.ValueInternal>({
 			emit,

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/ActionButton.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/ActionButton.vue
@@ -13,6 +13,7 @@ import { Shared } from '../types'
 export default defineComponent({
 	name: 'ActionButton',
 	props: makeProps(Shared.ActionButton.schema),
+	emits: ['click'],
 	setup(props) {
 		return {
 			classes: computed(() => ({

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/DropArea.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/DropArea.vue
@@ -69,6 +69,7 @@ import { isSelectingMultipleFilesWhenNotAllowed } from '../validators'
 export default defineComponent({
 	name: 'DropArea',
 	props: makeProps(Shared.DropArea.schema),
+	emits: ['addFiles'],
 	setup(props, { emit }) {
 		const translations = useTranslationNamespace('KtFieldFileUpload')
 

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/FileItem.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/FileItem.vue
@@ -47,6 +47,7 @@ export default defineComponent({
 		ItemLayout,
 	},
 	props: makeProps(KottiFieldFileUpload.FileItem.schema),
+	emits: ['remove'],
 	setup(props, { emit }) {
 		const translations = useTranslationNamespace('KtFieldFileUpload')
 

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/PreUploadedFileItem.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/PreUploadedFileItem.vue
@@ -51,6 +51,7 @@ export default defineComponent({
 		ItemLayout,
 	},
 	props: makeProps(KottiFieldFileUpload.FileItem.schema),
+	emits: ['remove'],
 	setup(props, { emit }) {
 		const translations = useTranslationNamespace('KtFieldFileUpload')
 

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/TakePhoto/Capture.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/TakePhoto/Capture.vue
@@ -70,6 +70,7 @@ enum State {
 export default defineComponent({
 	name: 'CapturePhoto',
 	props: makeProps(Shared.TakePhoto.captureSchema),
+	emits: ['capture', 'close', 'error'],
 	setup(_, { emit }) {
 		const translations = useTranslationNamespace('KtFieldFileUpload')
 

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/TakePhoto/Error.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/TakePhoto/Error.vue
@@ -34,6 +34,7 @@ import { Shared } from '../../types'
 export default defineComponent({
 	name: 'ErrorViewer',
 	props: makeProps(Shared.TakePhoto.errorSchema),
+	emits: ['close', 'retry'],
 	setup(props) {
 		const translations = useTranslationNamespace('KtFieldFileUpload')
 

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/TakePhoto/Review.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/TakePhoto/Review.vue
@@ -42,6 +42,7 @@ import { Shared } from '../../types'
 export default defineComponent({
 	name: 'ReviewPhoto',
 	props: makeProps(Shared.TakePhoto.reviewSchema),
+	emits: ['accept', 'close', 'reject'],
 	setup() {
 		const translations = useTranslationNamespace('KtFieldFileUpload')
 

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/TakePhoto/TakePhoto.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/TakePhoto/TakePhoto.vue
@@ -58,6 +58,7 @@ export default defineComponent({
 		ReviewPhoto,
 	},
 	props: makeProps(Shared.TakePhoto.schema),
+	emits: ['addFiles'],
 	setup(props, { emit }) {
 		const translations = useTranslationNamespace('KtFieldFileUpload')
 

diff --git a/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue b/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue
@@ -68,6 +68,7 @@ export default defineComponent({
 		EditIcon,
 	},
 	props: makeProps(KottiFieldInlineEdit.propsSchema),
+	emits: ['confirm', 'input'],
 	setup(props, { emit }) {
 		const { forceUpdate, forceUpdateKey } = useForceUpdate()
 		const translations = useTranslationNamespace('KtFieldInlineEdit')

diff --git a/packages/kotti-ui/source/kotti-field-inline-edit/components/ConfirmButton.vue b/packages/kotti-ui/source/kotti-field-inline-edit/components/ConfirmButton.vue
@@ -17,6 +17,7 @@ export default defineComponent({
 		tabIndex: { type: Number, default: 0 },
 		dataTest: { type: String, default: null },
 	},
+	emits: ['confirm'],
 	setup(props, { emit }) {
 		return {
 			buttonProps: computed(() => ({

diff --git a/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue b/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue
@@ -90,6 +90,7 @@ export default defineComponent({
 		KtField,
 	},
 	props: makeProps(KottiFieldNumber.propsSchema),
+	emits: ['blur', 'input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldNumber.Value>({
 			emit,

diff --git a/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue b/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue
@@ -23,6 +23,7 @@ export default defineComponent({
 	name: 'KtFieldPassword',
 	components: { KtField },
 	props: makeProps(KottiFieldPassword.propsSchema),
+	emits: ['input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldPassword.Value>({
 			emit,

diff --git a/packages/kotti-ui/source/kotti-field-radio-group/KtFieldRadioGroup.vue b/packages/kotti-ui/source/kotti-field-radio-group/KtFieldRadioGroup.vue
@@ -67,6 +67,7 @@ export default defineComponent({
 		KtField,
 	},
 	props: makeProps(KottiFieldRadioGroup.propsSchema),
+	emits: ['input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldRadioGroup.Value>({
 			emit,

diff --git a/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue b/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue
@@ -30,6 +30,7 @@ export default defineComponent({
 		isDropdownOpen: { required: true, type: Boolean },
 		showClear: { required: true, type: Boolean },
 	},
+	emits: ['update:isDropdownOpen'],
 	setup(props, { emit }) {
 		return {
 			containerClasses: computed(() => [

diff --git a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
@@ -132,6 +132,7 @@ export default defineComponent({
 		KtTag,
 	},
 	props: makeProps(propsSchema),
+	emits: ['emit', 'input'],
 	setup(props, { emit: rawEmit }) {
 		const emit = (event: string, payload: unknown) => {
 			rawEmit('emit', { event, payload })

diff --git a/packages/kotti-ui/source/kotti-field-select/components/Options.vue b/packages/kotti-ui/source/kotti-field-select/components/Options.vue
@@ -97,6 +97,7 @@ export default defineComponent({
 		FieldSelectOptionsItem,
 	},
 	props: makeProps(propsSchema),
+	emits: ['close', 'input'],
 	setup(props, { emit }) {
 		const translations = useTranslationNamespace('KtFieldSelects')
 

diff --git a/packages/kotti-ui/source/kotti-field-select/components/OptionsItem.vue b/packages/kotti-ui/source/kotti-field-select/components/OptionsItem.vue
@@ -29,6 +29,7 @@ const propsSchema = z.object({
 export default defineComponent({
 	name: 'FieldSelectOptionsItem',
 	props: makeProps(propsSchema),
+	emits: ['click', 'scrollTo'],
 	setup(props, { emit }) {
 		const optionRef = ref<HTMLDivElement | null>(null)
 

diff --git a/packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue b/packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue
@@ -50,6 +50,7 @@ export default defineComponent({
 		KtField,
 	},
 	props: makeProps(KottiFieldTextArea.propsSchema),
+	emits: ['input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldTextArea.Value>({
 			emit,

diff --git a/packages/kotti-ui/source/kotti-field-text/KtFieldText.vue b/packages/kotti-ui/source/kotti-field-text/KtFieldText.vue
@@ -25,6 +25,7 @@ export default defineComponent({
 		KtField,
 	},
 	props: makeProps(KottiFieldText.propsSchema),
+	emits: ['input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldText.Value>({
 			emit,

diff --git a/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggle.vue b/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggle.vue
@@ -61,6 +61,7 @@ export default defineComponent({
 		ToggleInner,
 	},
 	props: makeProps(KottiFieldToggle.propsSchema),
+	emits: ['input'],
 	setup(props, { emit, slots }) {
 		const field = useField<KottiFieldToggle.Value>({
 			emit,

diff --git a/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggleGroup.vue b/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggleGroup.vue
@@ -52,6 +52,7 @@ export default defineComponent({
 		ToggleInner,
 	},
 	props: makeProps(KottiFieldToggleGroup.propsSchema),
+	emits: ['input'],
 	setup(props, { emit }) {
 		const field = useField<KottiFieldToggleGroup.Value>({
 			emit,

diff --git a/packages/kotti-ui/source/kotti-field-toggle/components/ToggleInner.vue b/packages/kotti-ui/source/kotti-field-toggle/components/ToggleInner.vue
@@ -41,6 +41,7 @@ export default defineComponent({
 		type: { default: 'checkbox', type: String },
 		value: { default: null, type: Boolean as PropType<boolean | null> },
 	},
+	emits: ['input'],
 	setup(props, { emit }) {
 		return {
 			onInput: (event: Event) => {

diff --git a/packages/kotti-ui/source/kotti-field/KtField.vue b/packages/kotti-ui/source/kotti-field/KtField.vue
@@ -148,6 +148,7 @@ export default defineComponent({
 		isRange: { default: false, type: Boolean },
 		useFieldset: { default: false, type: Boolean },
 	},
+	emits: ['click', 'mousedown'],
 	setup(props) {
 		const inputId = computed(() =>
 			props.isRange

diff --git a/packages/kotti-ui/source/kotti-field/types.ts b/packages/kotti-ui/source/kotti-field/types.ts
@@ -1,5 +1,5 @@
 import { yocoIconSchema } from '@3yourmind/yoco'
-import type { Ref, SetupContext } from 'vue'
+import type { Ref } from 'vue'
 import { z } from 'zod'
 
 import type { ReplaceRecordType } from '../types/utilities'
@@ -55,7 +55,7 @@ export module KottiField {
 
 	export module Hook {
 		export interface Parameters<DATA_TYPE> {
-			emit: SetupContext['emit']
+			emit: (name: 'input', ...args: unknown[]) => void
 
 			/**
 			 * Useful for checking validation on required fields