Merge pull request #972 from 3YOURMIND/refactor-kotti-row-modifiers

refactor(KtTable): use Composition API for TableBody*Row components

packages/documentation/pages/usage/components/table.vue

@@ -768,6 +768,9 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
 	</div>
 </KtTable>
 </div>
+<div slot="vue">
+<KtTable :rows="emptyRows" :columns="columnsDefault" emptyText="Custom empty via prop"/>
+</div>
 
 <div slot="style">
 

packages/kotti-ui/package.json

@@ -96,5 +96,5 @@
 	"style": "./dist/style.css",
 	"type": "module",
 	"types": "./dist/index.d.ts",
-	"version": "6.0.1"
+	"version": "6.1.0"
 }

packages/kotti-ui/source/kotti-table/KtTable.vue

@@ -214,7 +214,14 @@ export default {
 			return Boolean(this.$scopedSlots.actions || this.renderActions)
 		},
 		_renderExpand() {
-			return (h: CreateElement, rowData: any) => {
+			return (
+				h: CreateElement,
+				rowData: {
+					data: KottiTable.Row.Props
+					row: KottiTable.Row.Props
+					rowIndex: number
+				},
+			) => {
 				if (this.renderExpand) return this.renderExpand(h, rowData)
 
 				// @ts-expect-error $slots will exist at runtime

packages/kotti-ui/source/kotti-table/KtTableColumn.ts

@@ -100,15 +100,15 @@ export const KtTableColumn: any = {
 	},
 	mounted(): void {
 		const columnIndex = this[KT_TABLE as symbol].$children.indexOf(this)
-		this[KT_STORE].commit('insertColumn', {
+		this[KT_STORE as any].commit('insertColumn', {
 			column: this.columnConfig,
 			...(columnIndex !== -1 ? { index: columnIndex } : {}),
 		})
 	},
 	destroyed(): void {
 		if (!this.$parent) return
 		this.columnConfig &&
-			this[KT_STORE].commit('removeColumn', this.columnConfig)
+			this[KT_STORE as any].commit('removeColumn', this.columnConfig)
 	},
 	render: (): null => null,
 	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },

packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts

@@ -1,32 +1,30 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CreateElement, VNode } from 'vue'
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+import { computed, defineComponent, h, inject } from 'vue'
+import { KT_TABLE } from '../constants'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableBodyEmptyRow: any = {
+export const TableBodyEmptyRow = defineComponent({
 	name: 'TableBodyEmptyRow',
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	render(h: CreateElement): VNode {
-		const { colSpan, render } = this
-		return h('tr', {}, [
-			h(
-				'td',
-				{
-					domProps: { colSpan },
-					class: 'kt-table__no-row',
-				},
-				[h('span', { class: 'kt-table__empty-text' }, [render(h)])],
-			),
-		])
-	},
-	computed: {
-		colSpan(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].colSpan
-		},
-		render(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE]._renderEmpty
-		},
+	setup() {
+		const tableState = inject(KT_TABLE)
+
+		if (!tableState)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const colSpan = computed(() => tableState.colSpan)
+		const render = computed(() => tableState._renderEmpty)
+
+		return () =>
+			h('tr', {}, [
+				h(
+					'td',
+					{
+						domProps: { colSpan: colSpan.value },
+						class: 'kt-table__no-row',
+					},
+					[h('span', { class: 'kt-table__empty-text' }, [render.value(h)])],
+				),
+			])
 	},
-}
+})

packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.ts

@@ -1,43 +1,50 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CreateElement, VNode } from 'vue'
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+import { computed, defineComponent, h, inject, type PropType } from 'vue'
+import { KT_TABLE, KT_STORE } from '../constants'
+import type { KottiTable } from '../types'
 
-export const TableBodyExpandRow: any = {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const TableBodyExpandRow = defineComponent({
 	name: 'TableBodyExpandRow',
 	props: {
-		row: Object,
-		rowIndex: Number,
+		row: {
+			type: Object as PropType<KottiTable.Row.Props>,
+			required: true,
+		},
+		rowIndex: {
+			type: Number,
+			required: true,
+		},
 	},
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	render(h: CreateElement): VNode {
-		const { isExpanded, row, rowIndex, colSpan, renderExpand } = this
-		return (
-			isExpanded &&
+	setup(props) {
+		const tableState = inject(KT_TABLE)
+		const tableStore = inject(KT_STORE)
+
+		if (!tableState || !tableStore)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const colSpan = computed(() => tableState.colSpan)
+		const isExpanded = computed(() => tableStore.get('isExpanded', props.row))
+		const render = computed(() => tableState._renderExpand)
+
+		return () =>
+			isExpanded.value &&
 			h('tr', {}, [
 				h(
 					'td',
 					{
-						attrs: { colSpan },
+						attrs: { colSpan: colSpan.value },
 						class: 'kt-table__expanded-cell',
 					},
-					[renderExpand?.(h, { row, data: row, rowIndex })],
+					[
+						render.value(h, {
+							row: props.row,
+							data: props.row,
+							rowIndex: props.rowIndex,
+						}),
+					],
 				),
 			])
-		)
-	},
-	computed: {
-		colSpan(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].colSpan
-		},
-		isExpanded(): unknown {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].get('isExpanded', this.row)
-		},
-		renderExpand(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE]._renderExpand
-		},
 	},
-}
+})

packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.ts

@@ -1,33 +1,31 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CreateElement } from 'vue'
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+import { computed, defineComponent, h, inject } from 'vue'
+import { KT_TABLE } from '../constants'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableBodyLoadingRow: any = {
+export const TableBodyLoadingRow: any = defineComponent({
 	name: 'TableBodyLoadingRow',
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	computed: {
-		colSpan(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].colSpan
-		},
-		render(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE]._renderLoading
-		},
-	},
-	render(h: CreateElement) {
-		const { colSpan, render } = this
+	setup() {
+		const tableState = inject(KT_TABLE)
+
+		if (!tableState)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const colSpan = computed(() => tableState.colSpan)
+		const render = computed(() => tableState._renderLoading)
 
-		return h('tr', {}, [
-			h(
-				'td',
-				{
-					attrs: { colSpan },
-					class: 'kt-table__loader',
-				},
-				[render(h)],
-			),
-		])
+		return () =>
+			h('tr', {}, [
+				h(
+					'td',
+					{
+						attrs: { colSpan: colSpan.value },
+						class: 'kt-table__loader',
+					},
+					[render.value(h)],
+				),
+			])
 	},
-}
+})

packages/kotti-ui/source/kotti-table/constants.ts

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import type { CreateElement, InjectionKey } from 'vue'
+import type { CreateElement, InjectionKey, VNodeChildren } from 'vue'
 
 import type { KottiTable } from './types'
 import type { TypedEmit } from '../types/typed-emit'
+import type { TableStore } from './logic/store'
 
 export const IS_ASC = /ascending|^1/
 export const IS_DSC = /descending|^-1/
@@ -31,6 +32,17 @@ interface KottiTableContext {
 		selectionChange: unknown
 		sortChange: unknown
 	}>
+	_renderEmpty: (h: CreateElement) => VNodeChildren
+	_renderExpand: (
+		h: CreateElement,
+		payload: {
+			data: KottiTable.Row.Props
+			row: KottiTable.Row.Props
+			rowIndex: number
+		},
+	) => VNodeChildren
+	_renderLoading: (h: CreateElement) => VNodeChildren
+	colSpan: number
 	tdClasses: string | string[] | null
 }
 
@@ -45,7 +57,8 @@ interface KottiTableContext {
  */
 export const KT_TABLE: InjectionKey<KottiTableContext> =
 	'KT_TABLE' as unknown as symbol
-export const KT_STORE = 'KT_STORE'
+export const KT_STORE: InjectionKey<TableStore> =
+	'KT_STORE' as unknown as symbol
 export const KT_LAYOUT = 'KT_LAYOUT'
 export const KT_TABLE_STATE_PROVIDER = 'KT_TABLE_STATE_PROVIDER'
 export const COLUMN_TYPE = Symbol('kt-table-column')

packages/kotti-ui/source/kotti-table/mixins.ts

@@ -4,7 +4,7 @@ import { KT_STORE, KT_TABLE_STATE_PROVIDER, KT_TABLE } from './constants'
 export const TableColumnsStateMixin = {
 	inject: {
 		[KT_TABLE as symbol]: { default: false },
-		[KT_STORE]: { default: false },
+		[KT_STORE as symbol]: { default: false },
 		[KT_TABLE_STATE_PROVIDER]: {
 			default: {
 				get store(): void {