From 7df5485bf265e50db0ac6dec8a66a7ffd2997d69 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Fri, 19 Jul 2024 16:22:55 +0200
Subject: [PATCH] refactor(KtTable): use composition API for Table*Cell files

---
 packages/documentation/tsconfig.json          |   1 +
 .../kotti-ui/source/kotti-table/KtTable.vue   |   2 +-
 .../source/kotti-table/KtTableColumn.ts       |   4 +-
 .../components/TableBodyEmptyRow.ts           |   6 +-
 .../kotti-table/components/TableHeader.vue    |  75 ++++----
 .../kotti-table/components/TableHeaderCell.ts |  52 ++++--
 .../kotti-table/components/TableRowCell.ts    | 165 ++++++++++--------
 .../kotti-ui/source/kotti-table/constants.ts  |  43 ++++-
 .../kotti-ui/source/kotti-table/mixins.ts     |   2 +-
 packages/kotti-ui/source/kotti-table/types.ts |  12 +-
 packages/kotti-ui/source/types/kotti.ts       |   2 +
 packages/kotti-ui/source/types/typed-emit.ts  |   6 +
 packages/kotti-ui/tsconfig.json               |   7 +-
 tsconfig.json                                 |   1 +
 14 files changed, 243 insertions(+), 135 deletions(-)
 create mode 100644 packages/kotti-ui/source/types/typed-emit.ts

diff --git a/packages/documentation/tsconfig.json b/packages/documentation/tsconfig.json
index 5a757fac82..305e74b490 100644
--- a/packages/documentation/tsconfig.json
+++ b/packages/documentation/tsconfig.json
@@ -23,6 +23,7 @@
 	"exclude": ["node_modules"],
 	"include": ["./**/*.ts", "./**/*.js", "./**/*.vue"],
 	"vueCompilerOptions": {
+		"skipTemplateCodegen": true,
 		"strictTemplates": true,
 		"target": 2.7
 	}
diff --git a/packages/kotti-ui/source/kotti-table/KtTable.vue b/packages/kotti-ui/source/kotti-table/KtTable.vue
index eedd7cf560..b56ee51201 100644
--- a/packages/kotti-ui/source/kotti-table/KtTable.vue
+++ b/packages/kotti-ui/source/kotti-table/KtTable.vue
@@ -69,7 +69,7 @@ export default {
 	},
 	provide() {
 		return {
-			[KT_TABLE]: this,
+			[KT_TABLE as symbol]: this,
 			// @ts-expect-error store will exist at runtime
 			[KT_STORE]: this.store,
 			// @ts-expect-error layout will exist at runtime
diff --git a/packages/kotti-ui/source/kotti-table/KtTableColumn.ts b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
index a451941019..1ed104bd69 100644
--- a/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
+++ b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
@@ -99,7 +99,7 @@ export const KtTableColumn: any = {
 		this.columnConfig = createColumn(this)
 	},
 	mounted(): void {
-		const columnIndex = this[KT_TABLE].$children.indexOf(this)
+		const columnIndex = this[KT_TABLE as symbol].$children.indexOf(this)
 		this[KT_STORE].commit('insertColumn', {
 			column: this.columnConfig,
 			...(columnIndex !== -1 ? { index: columnIndex } : {}),
@@ -120,7 +120,7 @@ function createColumn(column: any = {}) {
 	let columnId = column.id
 	if (!columnId) {
 		// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-		columnId = `${_self[KT_TABLE].tableId}_column_${columnIdSeed}`
+		columnId = `${_self[KT_TABLE as symbol].tableId}_column_${columnIdSeed}`
 		columnIdSeed++
 	}
 	// eslint-disable-next-line no-param-reassign
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts b/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
index b1779bb618..8113aba0b0 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
@@ -1,13 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { CreateElement, VNode } from 'vue'
 import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableBodyEmptyRow = {
+export const TableBodyEmptyRow: any = {
 	name: 'TableBodyEmptyRow',
 	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
 	render(h: CreateElement): VNode {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const { colSpan, render } = this as any
+		const { colSpan, render } = this
 		return h('tr', {}, [
 			h(
 				'td',
diff --git a/packages/kotti-ui/source/kotti-table/components/TableHeader.vue b/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
index f4c082a7bd..737557d176 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
+++ b/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
@@ -30,16 +30,7 @@
 				@dragstart="dragStart($event, column)"
 				@drop="drop($event, column)"
 			>
-				<div
-					:class="[
-						'kt-table__cell',
-						'kt-table__header-cell',
-						column.headerCellClass,
-					]"
-					:data-prop="column.prop"
-				>
-					<TableHeaderCell v-bind="{ column, columnIndex }" />
-				</div>
+				<TableHeaderCell v-bind="{ column, columnIndex }" />
 				<div v-if="useQuickSortControl" class="kt-table__controls">
 					<div
 						v-if="useQuickSortControl && (canSort(column) || isSorted(column))"
@@ -60,14 +51,15 @@
 </template>
 
 <script lang="ts">
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
 import { KottiTable } from '../types'
 
 import { TableHeaderCell } from './TableHeaderCell'
 
-export default {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const KtTableHeader: any = {
 	name: 'KtTableHeader',
 	components: { TableHeaderCell },
 	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
@@ -78,61 +70,64 @@ export default {
 		}
 	},
 	computed: {
-		isAllRowsDisabled() {
+		isAllRowsDisabled(): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].state.isAllRowsDisabled
 		},
-		isAllSelected() {
+		isAllSelected(): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].state.isAllSelected
 		},
-		tableColumns() {
+		tableColumns(): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].state.columns
 		},
-		hasActions() {
+		hasActions(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].hasActions
 		},
-		isDraggable() {
+		isDraggable(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].useColumnDragToOrder
 		},
-		isDraggingColumn() {
+		isDraggingColumn(): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			return Boolean(this.draggingColumn)
 		},
-		isExpandable() {
+		isExpandable(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].isExpandable
 		},
-		isSelectable() {
+		isSelectable(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].isSelectable
 		},
-		useQuickSortControl() {
+		useQuickSortControl(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].useQuickSortControl
 		},
-		tableHeaderClass() {
+		tableHeaderClass(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return ['table-header-row', this[KT_TABLE].headerClass]
 		},
 	},
 	methods: {
-		handleSelectAll(_event: unknown) {
+		handleSelectAll(_event: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			this[KT_STORE].commit('toggleAllSelection')
 		},
-		handleThClick(column: unknown) {
+		handleThClick(column: unknown): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			if (this.useQuickSortControl && this.canSort(column)) {
 				this.changeSort(column)
 			}
 		},
-		getThClasses(column: any) {
+		getThClasses(column: any): any {
 			return [
 				{
 					['drag-over']: this.isDraggedOver(column),
 					sortable: this.canSort(column),
+					// @ts-expect-error vue's type resolution is broken for this file
 					dragging: this.isDraggable,
 					sorted: this.isSorted(column),
 					clickable: this.canSort(column),
@@ -142,52 +137,60 @@ export default {
 				column.thClass,
 			]
 		},
-		getThStyle(column: any) {
+		getThStyle(column: any): any {
 			return {
 				textAlign: column.align || KottiTable.Column.Align.LEFT,
 				width: column.width || 'auto',
 			}
 		},
-		canSort(column: unknown) {
+		canSort(column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('canSort', column)
 		},
-		isSorted(column: unknown) {
+		isSorted(column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('isSorted', column)
 		},
-		changeSort(column: unknown) {
+		changeSort(column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			this[KT_STORE].commit('sort', { column })
 		},
-		isSortedByAsc(column: unknown) {
+		isSortedByAsc(column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('isSortedByAsc', column)
 		},
-		isSortedByDsc(column: unknown) {
+		isSortedByDsc(column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('isSortedByDsc', column)
 		},
-		dragStart(_event: unknown, column: any) {
+		dragStart(_event: unknown, column: any): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			this.draggingColumn = column
 		},
-		dragEnter(_event: unknown, column: any) {
+		dragEnter(_event: unknown, column: any): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			this.columnDragOver = column
 		},
-		dragEnd() {
+		dragEnd(): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			this.columnDragOver = null
 		},
-		isDraggedOver(column: unknown) {
+		isDraggedOver(column: unknown): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			return column === this.columnDragOver && this.draggingColumn !== column
 		},
-		drop(_event: unknown, column: unknown) {
+		drop(_event: unknown, column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			this[KT_STORE].commit('orderBefore', this.draggingColumn, column)
+			// @ts-expect-error vue's type resolution is broken for this file
 			this.draggingColumn = null
+			// @ts-expect-error vue's type resolution is broken for this file
 			this.columnDragOver = null
 		},
 	},
 }
+
+export default KtTableHeader
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts b/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
index 5ccd3070db..5cc3f6ebf8 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
@@ -1,19 +1,41 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import type { CreateElement, VNode } from 'vue'
+import { defineComponent, h } from 'vue'
+import type { PropType } from 'vue'
+import type { KottiTable } from '../types'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableHeaderCell = {
+export const TableHeaderCell = defineComponent({
 	name: 'TableHeaderCell',
-	functional: true,
-	props: ['column', 'columnIndex'],
-	render(h: CreateElement, context: any): VNode {
-		const { column, columnIndex } = context.props
-		return column.renderHeader(h, {
-			column,
-			value: column.label,
-			columnIndex,
-		})
+	props: {
+		column: {
+			required: true,
+			type: Object as PropType<KottiTable.Column.PropsInternal>,
+		},
+		columnIndex: {
+			required: true,
+			type: Number,
+		},
+	},
+	setup(props) {
+		return () =>
+			h(
+				'div',
+				{
+					class: [
+						'kt-table__cell',
+						'kt-table__header-cell',
+						props.column.headerCellClass,
+					],
+					attrs: {
+						'data-prop': props.column.prop,
+					},
+				},
+				[
+					props.column.renderHeader(h, {
+						column: props.column,
+						columnIndex: props.columnIndex,
+						value: props.column.label,
+					}),
+				],
+			)
 	},
-}
+})
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
index 67c9d654a0..1cd2a111dc 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
@@ -1,95 +1,116 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import property from 'lodash/property.js'
+import type { PropType } from 'vue'
+import { computed, defineComponent, h, inject } from 'vue'
 
 import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
-import type { CreateElement } from 'vue'
+import { type KottiTable } from '../types'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableRowCell: any = {
+export const TableRowCell = defineComponent({
 	name: 'TableRowCell',
 	props: {
-		column: Object,
-		row: Object,
-		columnIndex: Number,
-		rowIndex: Number,
-	},
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	computed: {
-		value(): unknown {
-			// @ts-expect-error column and row will exist at runtime
-			return property(this.column.prop)(this.row)
+		column: {
+			required: true,
+			type: Object as PropType<KottiTable.Column.PropsInternal>,
+		},
+		columnIndex: {
+			required: true,
+			type: Number,
 		},
-		_tdClasses(): [unknown, unknown] {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return [this[KT_TABLE].tdClasses, this.column.tdClass]
+		row: {
+			required: true,
+			type: Object as PropType<KottiTable.Row.Props>,
 		},
-		_cellClass(): [unknown, unknown] {
-			// @ts-expect-error column will exist at runtime
-			return ['kt-table__cell', this.column.cellClass]
+		rowIndex: {
+			required: true,
+			type: Number,
 		},
-		_tdStyles(): unknown {
-			// @ts-expect-error column will exist at runtime
-			const { column } = this
+	},
+	setup(props) {
+		const tableState = inject(KT_TABLE)
+		const tableStore = inject(KT_STORE)
+		const tableLayout = inject(KT_LAYOUT)
+
+		if (!tableState || !tableStore || !tableLayout)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const value = computed(() => property(props.column.prop)(props.row))
+		const _tdClasses = computed(() => [
+			tableState.tdClasses,
+			props.column.tdClass,
+		])
+		const _cellClass = computed(() => [
+			'kt-table__cell',
+			props.column.cellClass,
+		])
+		const _tdStyles = computed(() => {
+			const { column } = props
 			return {
+				// @ts-expect-error not clear where styles is coming from, will fix later
 				...column.styles,
 				...(column.align ? { textAlign: column.align } : {}),
 				...(column.width ? { width: column.width } : {}),
 				...(column.maxWidth ? { maxWidth: column.maxWidth } : {}),
 				...(column.minWidth ? { minWidth: column.minWidth } : {}),
 			}
-		},
-	},
-	methods: {
-		cellClick($event: MouseEvent, data: any) {
+		})
+
+		const cellClick = (
+			$event: MouseEvent,
+			data: {
+				value: unknown
+				column: KottiTable.Column.PropsInternal
+				columnIndex: number
+				row: KottiTable.Row.Props
+				rowIndex: number
+			},
+		) => {
 			if (data.column.disableRowClick) {
 				$event.stopPropagation()
 			}
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			this[KT_TABLE].$emit('cellClick', data)
-		},
-	},
-	render(h: CreateElement) {
-		const {
-			column,
-			row,
-			rowIndex,
-			columnIndex,
-			cellClick,
-			_cellClass,
-			_tdClasses,
-			_tdStyles,
-			value,
-		} = this
-		return h(
-			'td',
-			{
-				class: _tdClasses,
-				on: {
-					click: ($event: MouseEvent) =>
-						cellClick($event, { value, column, row, columnIndex, rowIndex }),
-				},
-				style: _tdStyles,
-			},
-			[
-				h(
-					'div',
-					{
-						class: _cellClass,
-						attrs: {
-							'data-prop': column.prop,
+			tableState.$emit('cellClick', data)
+		}
+
+		return () =>
+			h(
+				'td',
+				{
+					class: _tdClasses,
+					on: {
+						click: ($event: MouseEvent) => {
+							cellClick($event, {
+								column: props.column,
+								columnIndex: props.columnIndex,
+								row: props.row,
+								rowIndex: props.rowIndex,
+								value: value.value,
+							})
 						},
 					},
-					[
-						column.renderCell(h, {
-							column,
-							row,
-							value,
-							columnIndex,
-							rowIndex,
-						}),
-					],
-				),
-			],
-		)
+					style: _tdStyles.value,
+				},
+				[
+					h(
+						'div',
+						{
+							class: _cellClass,
+							attrs: {
+								'data-prop': props.column.prop,
+							},
+						},
+						[
+							props.column.renderCell(h, {
+								column: props.column,
+								row: props.row,
+								value: value.value,
+								columnIndex: props.columnIndex,
+								rowIndex: props.rowIndex,
+							}),
+						],
+					),
+				],
+			)
 	},
-}
+})
diff --git a/packages/kotti-ui/source/kotti-table/constants.ts b/packages/kotti-ui/source/kotti-table/constants.ts
index dae223bb07..92fa2d09f2 100644
--- a/packages/kotti-ui/source/kotti-table/constants.ts
+++ b/packages/kotti-ui/source/kotti-table/constants.ts
@@ -1,11 +1,50 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import type { CreateElement } from 'vue'
+import type { CreateElement, InjectionKey } from 'vue'
+
+import type { KottiTable } from './types'
+import type { TypedEmit } from '../types/typed-emit'
 
 export const IS_ASC = /ascending|^1/
 export const IS_DSC = /descending|^-1/
 
-export const KT_TABLE = 'KT_TABLE'
+interface KottiTableContext {
+	$emit: TypedEmit<{
+		activateRow: unknown
+		cellClick: {
+			column: KottiTable.Column.PropsInternal
+			columnIndex: number
+			row: KottiTable.Row.Props
+			rowIndex: number
+			value: unknown
+		}
+		columnsChange: unknown
+		expand: unknown
+		expandChange: unknown
+		hiddenChange: unknown
+		orderChange: unknown
+		rowBlur: unknown
+		rowClick: unknown
+		rowFocus: unknown
+		select: unknown
+		selectAll: unknown
+		selectionChange: unknown
+		sortChange: unknown
+	}>
+	tdClasses: string | string[] | null
+}
+
+/**
+ * HACK: This is a string type-masquerading as a symbol, because
+ *   - using a string works perfectly fine at runtime
+ *   - an InjectionKey needs to be a symbol
+ *   - using a Symbol will produce strange runtime issues
+ *
+ * Plan for now: probably this needs to be done for the other injection keys as well.
+ * At a later stage of refactoring the table to composition API we can probably use actual symbols
+ */
+export const KT_TABLE: InjectionKey<KottiTableContext> =
+	'KT_TABLE' as unknown as symbol
 export const KT_STORE = 'KT_STORE'
 export const KT_LAYOUT = 'KT_LAYOUT'
 export const KT_TABLE_STATE_PROVIDER = 'KT_TABLE_STATE_PROVIDER'
diff --git a/packages/kotti-ui/source/kotti-table/mixins.ts b/packages/kotti-ui/source/kotti-table/mixins.ts
index 1cbd1288c0..3df37b90ce 100644
--- a/packages/kotti-ui/source/kotti-table/mixins.ts
+++ b/packages/kotti-ui/source/kotti-table/mixins.ts
@@ -3,7 +3,7 @@ import { KT_STORE, KT_TABLE_STATE_PROVIDER, KT_TABLE } from './constants'
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const TableColumnsStateMixin = {
 	inject: {
-		[KT_TABLE]: { default: false },
+		[KT_TABLE as symbol]: { default: false },
 		[KT_STORE]: { default: false },
 		[KT_TABLE_STATE_PROVIDER]: {
 			default: {
diff --git a/packages/kotti-ui/source/kotti-table/types.ts b/packages/kotti-ui/source/kotti-table/types.ts
index 96edfcef1a..7419d98738 100644
--- a/packages/kotti-ui/source/kotti-table/types.ts
+++ b/packages/kotti-ui/source/kotti-table/types.ts
@@ -1,4 +1,4 @@
-import type { CreateElement, VNode } from 'vue'
+import type { CreateElement, VNode, VNodeChildren } from 'vue'
 
 export module KottiTable {
 	export module Column {
@@ -28,7 +28,7 @@ export module KottiTable {
 			| 0
 
 		export interface Context {
-			column: Column.Props
+			column: Column.PropsInternal
 			columnIndex: number
 			row: Row.Props
 			rowIndex: number
@@ -97,6 +97,14 @@ export module KottiTable {
 			) => VNode
 		}
 
+		export type PropsInternal = Omit<Props, 'renderCell' | 'renderHeader'> & {
+			renderCell: (h: CreateElement, data: Context) => VNodeChildren
+			renderHeader: (
+				h: CreateElement,
+				data: Pick<Context, 'column' | 'columnIndex' | 'value'>,
+			) => VNodeChildren
+		}
+
 		export module Slots {
 			export type Default = Context
 
diff --git a/packages/kotti-ui/source/types/kotti.ts b/packages/kotti-ui/source/types/kotti.ts
index 2e05fe6da9..5ee72e74e9 100644
--- a/packages/kotti-ui/source/types/kotti.ts
+++ b/packages/kotti-ui/source/types/kotti.ts
@@ -8,6 +8,8 @@
 import type { ZodSchema } from 'zod'
 
 export * from './decimal-separator'
+export * from './typed-emit'
+
 export { KottiAccordion as Accordion } from '../kotti-accordion/types'
 export { KottiActionbar as Actionbar } from '../kotti-actionbar/types'
 export { KottiAvatar as Avatar } from '../kotti-avatar/types'
diff --git a/packages/kotti-ui/source/types/typed-emit.ts b/packages/kotti-ui/source/types/typed-emit.ts
new file mode 100644
index 0000000000..236394b76e
--- /dev/null
+++ b/packages/kotti-ui/source/types/typed-emit.ts
@@ -0,0 +1,6 @@
+export type TypedEmit<EVENTS extends Record<string, unknown>> = <
+	KEY extends keyof EVENTS,
+>(
+	key: KEY,
+	payload: EVENTS[KEY],
+) => void
diff --git a/packages/kotti-ui/tsconfig.json b/packages/kotti-ui/tsconfig.json
index d79b3267c3..2e69c4b5e4 100644
--- a/packages/kotti-ui/tsconfig.json
+++ b/packages/kotti-ui/tsconfig.json
@@ -51,5 +51,10 @@
 		{
 			"path": "../yoco"
 		}
-	]
+	],
+	"vueCompilerOptions": {
+		"skipTemplateCodegen": true,
+		"strictTemplates": true,
+		"target": 2.7
+	}
 }
diff --git a/tsconfig.json b/tsconfig.json
index b95173aae4..4d59a857d0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
 		"strict": true
 	},
 	"vueCompilerOptions": {
+		"skipTemplateCodegen": true,
 		"strictTemplates": true,
 		"target": 2.7
 	}