Skip to content

Commit

Permalink
Merge pull request #971 from 3YOURMIND/refactor-kotti-table-components
Browse files Browse the repository at this point in the history
refactor(KtTable): use composition API for Table*Cell files
  • Loading branch information
Isokaeder committed Jul 22, 2024
2 parents b3ee2bf + 7df5485 commit 9fd5c3f
Show file tree
Hide file tree
Showing 14 changed files with 243 additions and 135 deletions.
1 change: 1 addition & 0 deletions packages/documentation/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"exclude": ["node_modules"],
"include": ["./**/*.ts", "./**/*.js", "./**/*.vue"],
"vueCompilerOptions": {
"skipTemplateCodegen": true,
"strictTemplates": true,
"target": 2.7
}
Expand Down
2 changes: 1 addition & 1 deletion packages/kotti-ui/source/kotti-table/KtTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/kotti-ui/source/kotti-table/KtTableColumn.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 } : {}),
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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',
Expand Down
75 changes: 39 additions & 36 deletions packages/kotti-ui/source/kotti-table/components/TableHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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))"
Expand All @@ -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 },
Expand All @@ -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),
Expand All @@ -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>
Expand Down
52 changes: 37 additions & 15 deletions packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
Original file line number Diff line number Diff line change
@@ -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,
}),
],
)
},
}
})
Loading

0 comments on commit 9fd5c3f

Please sign in to comment.