refactor(KtTable): use composition API for Table*Cell files

packages/documentation/tsconfig.json

@@ -23,6 +23,7 @@
 	"exclude": ["node_modules"],
 	"include": ["./**/*.ts", "./**/*.js", "./**/*.vue"],
 	"vueCompilerOptions": {
+		"skipTemplateCodegen": true,
 		"strictTemplates": true,
 		"target": 2.7
 	}

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

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

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',

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>

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,
+					}),
+				],
+			)
 	},
-}
+})