mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-12 12:25:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(data-table): remove provider(reactive) pattern

Browse Source
This commit is contained in:
07akioni 2021-04-20 23:08:51 +08:00
parent 3581c3570f
commit d9b50209bd
15 changed files with 307 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/data-table/src/DataTable.tsx
View File

@ -6,7 +6,6 @@ import {
provide, provide,
PropType, PropType,
ExtractPropTypes, ExtractPropTypes,
reactive,
toRef, toRef,
CSSProperties CSSProperties
} from 'vue' } from 'vue'
@ -220,17 +219,16 @@ export default defineComponent({
mergedClsPrefix mergedClsPrefix
) )
const mainTableInstRef = ref<MainTableRef | null>(null) const mainTableInstRef = ref<MainTableRef | null>(null)
const { rows, cols, dataRelatedCols } = useGroupHeader(props) const { rowsRef, colsRef, dataRelatedColsRef } = useGroupHeader(props)
const { const {
treeMate: treeMateRef, treeMateRef,
mergedCurrentPage: mergedCurrentPageRef, mergedCurrentPageRef,
paginatedData: paginatedDataRef, paginatedDataRef,
selectionColumn: selectionColumnRef, selectionColumnRef,
hoverKey, hoverKeyRef,
currentPage, mergedPaginationRef,
mergedPagination, mergedFilterStateRef,
mergedFilterState, mergedSortStateRef,
mergedSortState,
doUpdateFilters, doUpdateFilters,
doUpdateSorter, doUpdateSorter,
filter, filter,
@ -239,22 +237,22 @@ export default defineComponent({
clearFilters, clearFilters,
page, page,
sort sort
} = useTableData(props, { dataRelatedCols }) } = useTableData(props, { dataRelatedColsRef })
const { const {
doCheckAll, doCheckAll,
doUncheckAll, doUncheckAll,
doUpdateCheckedRowKeys, doUpdateCheckedRowKeys,
someRowsChecked, someRowsCheckedRef,
allRowsChecked, allRowsCheckedRef,
mergedCheckedRowKeys mergedCheckedRowKeysRef
} = useCheck(props, { } = useCheck(props, {
selectionColumnRef, selectionColumnRef,
treeMateRef, treeMateRef,
paginatedDataRef paginatedDataRef
}) })
const { const {
mergedExpandedRowKeys, mergedExpandedRowKeysRef,
renderExpand, renderExpandRef,
doUpdateExpandedRowKeys doUpdateExpandedRowKeys
} = useExpand(props) } = useExpand(props)
const { const {
@ -262,73 +260,70 @@ export default defineComponent({
handleTableHeaderScroll, handleTableHeaderScroll,
deriveActiveRightFixedColumn, deriveActiveRightFixedColumn,
deriveActiveLeftFixedColumn, deriveActiveLeftFixedColumn,
leftActiveFixedColKey, leftActiveFixedColKeyRef,
rightActiveFixedColKey, rightActiveFixedColKeyRef,
leftFixedColumns, leftFixedColumnsRef,
rightFixedColumns, rightFixedColumnsRef,
fixedColumnLeftMap, fixedColumnLeftMapRef,
fixedColumnRightMap fixedColumnRightMapRef
} = useScroll(props, { } = useScroll(props, {
mainTableInstRef, mainTableInstRef,
mergedCurrentPageRef mergedCurrentPageRef
}) })
const { locale } = useLocale('DataTable') const { locale } = useLocale('DataTable')
provide( provide(dataTableInjectionKey, {
dataTableInjectionKey, hoverKeyRef,
reactive({ mergedClsPrefixRef: mergedClsPrefix,
hoverKey, treeMateRef,
mergedClsPrefix, mergedThemeRef: themeRef,
treeMate: treeMateRef, scrollXRef: computed(() => props.scrollX),
mergedTheme: themeRef, rowsRef,
scrollX: computed(() => props.scrollX), colsRef,
rows, paginatedDataRef,
cols, leftActiveFixedColKeyRef,
paginatedData: paginatedDataRef, rightActiveFixedColKeyRef,
leftActiveFixedColKey, leftFixedColumnsRef,
rightActiveFixedColKey, rightFixedColumnsRef,
leftFixedColumns, fixedColumnLeftMapRef,
rightFixedColumns, fixedColumnRightMapRef,
fixedColumnLeftMap, mergedCurrentPageRef,
fixedColumnRightMap, someRowsCheckedRef,
currentPage, allRowsCheckedRef,
someRowsChecked, mergedSortStateRef,
allRowsChecked, mergedFilterStateRef,
mergedSortState, loadingRef: toRef(props, 'loading'),
mergedFilterState, rowClassNameRef: toRef(props, 'rowClassName'),
loading: toRef(props, 'loading'), mergedCheckedRowKeysRef,
rowClassName: toRef(props, 'rowClassName'), mergedExpandedRowKeysRef,
mergedCheckedRowKeys, localeRef: locale,
mergedExpandedRowKeys, rowKeyRef: toRef(props, 'rowKey'),
locale, renderExpandRef,
rowKey: toRef(props, 'rowKey'), checkOptionsRef: computed(() => {
checkOptions: computed(() => { const { value: selectionColumn } = selectionColumnRef
const { value: selectionColumn } = selectionColumnRef return selectionColumn?.options
return selectionColumn?.options }),
}), filterMenuCssVarsRef: computed(() => {
filterMenuCssVars: computed(() => { const {
const { self: { actionDividerColor, actionPadding, actionButtonMargin }
self: { actionDividerColor, actionPadding, actionButtonMargin } } = themeRef.value
} = themeRef.value // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions return {
return { '--action-padding': actionPadding,
'--action-padding': actionPadding, '--action-button-margin': actionButtonMargin,
'--action-button-margin': actionButtonMargin, '--action-divider-color': actionDividerColor
'--action-divider-color': actionDividerColor } as CSSProperties
} as CSSProperties }),
}), deriveActiveRightFixedColumn,
renderExpand, deriveActiveLeftFixedColumn,
deriveActiveRightFixedColumn, doUpdateFilters,
deriveActiveLeftFixedColumn, doUpdateSorter,
doUpdateFilters, doUpdateCheckedRowKeys,
doUpdateSorter, doCheckAll,
doUpdateCheckedRowKeys, doUncheckAll,
doCheckAll, doUpdateExpandedRowKeys,
doUncheckAll, handleTableHeaderScroll,
doUpdateExpandedRowKeys, handleTableBodyScroll
handleTableHeaderScroll, })
handleTableBodyScroll
})
)
const exposedMethods: DataTableInst = { const exposedMethods: DataTableInst = {
filter, filter,
filters, filters,
@ -344,7 +339,7 @@ export default defineComponent({
paginatedData: paginatedDataRef, paginatedData: paginatedDataRef,
mergedBordered, mergedBordered,
mergedBottomBordered: mergedBottomBorderedRef, mergedBottomBordered: mergedBottomBorderedRef,
mergedPagination, mergedPagination: mergedPaginationRef,
...exposedMethods, ...exposedMethods,
cssVars: computed(() => { cssVars: computed(() => {
const { size } = props const { size } = props

25
src/data-table/src/HeaderButton/FilterButton.tsx
View File

@ -38,12 +38,16 @@ export default defineComponent({
}, },
setup (props) { setup (props) {
const { NConfigProvider } = useConfig() const { NConfigProvider } = useConfig()
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion const {
const NDataTable = inject(dataTableInjectionKey)! mergedThemeRef,
mergedClsPrefixRef,
mergedFilterStateRef,
filterMenuCssVarsRef,
doUpdateFilters
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
} = inject(dataTableInjectionKey)!
const showPopoverRef = ref(false) const showPopoverRef = ref(false)
const filterStateRef = computed(() => { const filterStateRef = mergedFilterStateRef
return NDataTable.mergedFilterState
})
const filterMultipleRef = computed(() => { const filterMultipleRef = computed(() => {
return props.column.filterMultiple !== false return props.column.filterMultiple !== false
}) })
@ -77,7 +81,7 @@ export default defineComponent({
props.column.key, props.column.key,
mergedFilterValue mergedFilterValue
) )
NDataTable.doUpdateFilters(nextFilterState, props.column) doUpdateFilters(nextFilterState, props.column)
} }
function handleFilterMenuCancel (): void { function handleFilterMenuCancel (): void {
showPopoverRef.value = false showPopoverRef.value = false
@ -86,20 +90,21 @@ export default defineComponent({
showPopoverRef.value = false showPopoverRef.value = false
} }
return { return {
NDataTable, mergedTheme: mergedThemeRef,
mergedClsPrefix: mergedClsPrefixRef,
active: activeRef, active: activeRef,
showPopover: showPopoverRef, showPopover: showPopoverRef,
mergedRenderFilter: mergedRenderFilterRef, mergedRenderFilter: mergedRenderFilterRef,
filterMultiple: filterMultipleRef, filterMultiple: filterMultipleRef,
mergedFilterValue: mergedFilterValueRef, mergedFilterValue: mergedFilterValueRef,
filterMenuCssVars: filterMenuCssVarsRef,
handleFilterChange, handleFilterChange,
handleFilterMenuConfirm, handleFilterMenuConfirm,
handleFilterMenuCancel handleFilterMenuCancel
} }
}, },
render () { render () {
const { NDataTable } = this const { mergedTheme, mergedClsPrefix } = this
const { mergedTheme, mergedClsPrefix } = NDataTable
return ( return (
<NPopover <NPopover
show={this.showPopover} show={this.showPopover}
@ -142,7 +147,7 @@ export default defineComponent({
renderFilterMenu() renderFilterMenu()
) : ( ) : (
<NDataTableFilterMenu <NDataTableFilterMenu
style={NDataTable.filterMenuCssVars} style={this.filterMenuCssVars}
radioGroupName={String(this.column.key)} radioGroupName={String(this.column.key)}
multiple={this.filterMultiple} multiple={this.filterMultiple}
value={this.mergedFilterValue} value={this.mergedFilterValue}

15
src/data-table/src/HeaderButton/FilterMenu.tsx
View File

@ -52,8 +52,12 @@ export default defineComponent({
} }
}, },
setup (props) { setup (props) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion const {
const NDataTable = inject(dataTableInjectionKey)! mergedClsPrefixRef,
mergedThemeRef,
localeRef
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
} = inject(dataTableInjectionKey)!
// to be compared with changed value // to be compared with changed value
// const initialValueRef = ref(props.value) // const initialValueRef = ref(props.value)
const temporalValueRef = ref(props.value) const temporalValueRef = ref(props.value)
@ -109,7 +113,9 @@ export default defineComponent({
props.onClear() props.onClear()
} }
return { return {
NDataTable, mergedClsPrefix: mergedClsPrefixRef,
mergedTheme: mergedThemeRef,
locale: localeRef,
checkboxGroupValue: checkboxGroupValueRef, checkboxGroupValue: checkboxGroupValueRef,
radioGroupValue: radioGroupValueRef, radioGroupValue: radioGroupValueRef,
handleChange, handleChange,
@ -118,8 +124,7 @@ export default defineComponent({
} }
}, },
render () { render () {
const { NDataTable } = this const { mergedTheme, locale, mergedClsPrefix } = this
const { mergedTheme, locale, mergedClsPrefix } = NDataTable
return ( return (
<div class={`${mergedClsPrefix}-data-table-filter-menu`}> <div class={`${mergedClsPrefix}-data-table-filter-menu`}>
<NScrollbar> <NScrollbar>

16
src/data-table/src/HeaderButton/SortButton.tsx
View File

@ -16,10 +16,10 @@ export default defineComponent({
setup (props) { setup (props) {
const { NConfigProvider } = useConfig() const { NConfigProvider } = useConfig()
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const NDataTable = inject(dataTableInjectionKey)! const { mergedSortStateRef, mergedClsPrefixRef } = inject(
const sortStateRef = computed(() => { dataTableInjectionKey
return NDataTable.mergedSortState )!
}) const sortStateRef = mergedSortStateRef
const activeRef = computed(() => { const activeRef = computed(() => {
const { value } = sortStateRef const { value } = sortStateRef
if (value) return value.columnKey === props.column.key if (value) return value.columnKey === props.column.key
@ -37,18 +37,14 @@ export default defineComponent({
) )
}) })
return { return {
NDataTable, mergedClsPrefix: mergedClsPrefixRef,
active: activeRef, active: activeRef,
mergedSortOrder: mergedSortOrderRef, mergedSortOrder: mergedSortOrderRef,
mergedRenderSorter: mergedRenderSorterRef mergedRenderSorter: mergedRenderSorterRef
} }
}, },
render () { render () {
const { const { mergedRenderSorter, mergedSortOrder, mergedClsPrefix } = this
mergedRenderSorter,
mergedSortOrder,
NDataTable: { mergedClsPrefix }
} = this
return mergedRenderSorter ? ( return mergedRenderSorter ? (
<RenderSorter render={mergedRenderSorter} order={mergedSortOrder} /> <RenderSorter render={mergedRenderSorter} order={mergedSortOrder} />
) : ( ) : (

23
src/data-table/src/MainTable.tsx
View File

@ -20,13 +20,15 @@ export default defineComponent({
} }
}, },
setup (props) { setup (props) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const NDataTable = inject(dataTableInjectionKey)!
const { const {
mergedClsPrefixRef,
rightFixedColumnsRef,
leftFixedColumnsRef,
deriveActiveLeftFixedColumn, deriveActiveLeftFixedColumn,
deriveActiveRightFixedColumn deriveActiveRightFixedColumn,
} = NDataTable handleTableHeaderScroll
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
} = inject(dataTableInjectionKey)!
let tableWidth: number = 0 let tableWidth: number = 0
const bodyMaxHeightRef = ref<number | undefined>(undefined) const bodyMaxHeightRef = ref<number | undefined>(undefined)
@ -35,9 +37,8 @@ export default defineComponent({
const headerInstRef = ref<MainTableHeaderRef | null>(null) const headerInstRef = ref<MainTableHeaderRef | null>(null)
const bodyInstRef = ref<MainTableBodyRef | null>(null) const bodyInstRef = ref<MainTableBodyRef | null>(null)
const { rightFixedColumns, leftFixedColumns } = NDataTable
const fixedStateInitializedRef = ref( const fixedStateInitializedRef = ref(
!(leftFixedColumns.length || rightFixedColumns.length) !(leftFixedColumnsRef.value.length || rightFixedColumnsRef.value.length)
) )
const bodyStyleRef = computed(() => { const bodyStyleRef = computed(() => {
@ -58,7 +59,7 @@ export default defineComponent({
function handleHeaderScroll (e: Event): void { function handleHeaderScroll (e: Event): void {
deriveActiveRightFixedColumn(e.target as HTMLElement, tableWidth) deriveActiveRightFixedColumn(e.target as HTMLElement, tableWidth)
deriveActiveLeftFixedColumn(e.target as HTMLElement, tableWidth) deriveActiveLeftFixedColumn(e.target as HTMLElement, tableWidth)
NDataTable.handleTableHeaderScroll(e) handleTableHeaderScroll(e)
} }
function getHeaderElement (): HTMLElement | null { function getHeaderElement (): HTMLElement | null {
const { value } = headerInstRef const { value } = headerInstRef
@ -91,7 +92,7 @@ export default defineComponent({
getHeaderElement getHeaderElement
} }
return { return {
NDataTable, mergedClsPrefix: mergedClsPrefixRef,
headerInstRef, headerInstRef,
bodyInstRef, bodyInstRef,
bodyStyle: bodyStyleRef, bodyStyle: bodyStyleRef,
@ -102,9 +103,7 @@ export default defineComponent({
} }
}, },
render () { render () {
const { const { mergedClsPrefix } = this
NDataTable: { mergedClsPrefix }
} = this
return ( return (
<div <div
class={[ class={[

70
src/data-table/src/TableParts/Body.tsx
View File

@ -11,23 +11,38 @@ import ExpandTrigger from './ExpandTrigger'
export default defineComponent({ export default defineComponent({
name: 'DataTableBody', name: 'DataTableBody',
setup () { setup () {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion const {
const NDataTable = inject(dataTableInjectionKey)! treeMateRef,
mergedCheckedRowKeysRef,
mergedExpandedRowKeysRef,
mergedClsPrefixRef,
mergedThemeRef,
scrollXRef,
colsRef,
paginatedDataRef,
fixedColumnLeftMapRef,
fixedColumnRightMapRef,
mergedCurrentPageRef,
rowClassNameRef,
leftActiveFixedColKeyRef,
rightActiveFixedColKeyRef,
renderExpandRef,
hoverKeyRef,
doUpdateExpandedRowKeys,
handleTableBodyScroll,
doUpdateCheckedRowKeys
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
} = inject(dataTableInjectionKey)!
const scrollbarInstRef = ref<ScrollbarInst | null>(null) const scrollbarInstRef = ref<ScrollbarInst | null>(null)
function handleCheckboxUpdateChecked ( function handleCheckboxUpdateChecked (
tmNode: TmNode, tmNode: TmNode,
checked: boolean checked: boolean
): void { ): void {
NDataTable.doUpdateCheckedRowKeys( doUpdateCheckedRowKeys(
checked (checked ? treeMateRef.value.check : treeMateRef.value.uncheck)(
? NDataTable.treeMate.check( tmNode.key,
tmNode.key, mergedCheckedRowKeysRef.value
NDataTable.mergedCheckedRowKeys ).checkedKeys
).checkedKeys
: NDataTable.treeMate.uncheck(
tmNode.key,
NDataTable.mergedCheckedRowKeys
).checkedKeys
) )
} }
function getScrollContainer (): HTMLElement | null { function getScrollContainer (): HTMLElement | null {
@ -36,10 +51,10 @@ export default defineComponent({
return null return null
} }
function handleScroll (event: Event): void { function handleScroll (event: Event): void {
NDataTable.handleTableBodyScroll(event) handleTableBodyScroll(event)
} }
function handleUpdateExpanded (key: RowKey): void { function handleUpdateExpanded (key: RowKey): void {
const { mergedExpandedRowKeys, doUpdateExpandedRowKeys } = NDataTable const { value: mergedExpandedRowKeys } = mergedExpandedRowKeysRef
const index = mergedExpandedRowKeys.indexOf(key) const index = mergedExpandedRowKeys.indexOf(key)
const nextExpandedKeys = Array.from(mergedExpandedRowKeys) const nextExpandedKeys = Array.from(mergedExpandedRowKeys)
if (~index) { if (~index) {
@ -50,8 +65,22 @@ export default defineComponent({
doUpdateExpandedRowKeys(nextExpandedKeys) doUpdateExpandedRowKeys(nextExpandedKeys)
} }
return { return {
NDataTable,
scrollbarInstRef, scrollbarInstRef,
mergedClsPrefix: mergedClsPrefixRef,
mergedTheme: mergedThemeRef,
scrollX: scrollXRef,
cols: colsRef,
paginatedData: paginatedDataRef,
fixedColumnLeftMap: fixedColumnLeftMapRef,
fixedColumnRightMap: fixedColumnRightMapRef,
currentPage: mergedCurrentPageRef,
mergedCheckedRowKeys: mergedCheckedRowKeysRef,
rowClassName: rowClassNameRef,
leftActiveFixedColKey: leftActiveFixedColKeyRef,
rightActiveFixedColKey: rightActiveFixedColKeyRef,
renderExpand: renderExpandRef,
mergedExpandedRowKeys: mergedExpandedRowKeysRef,
hoverKey: hoverKeyRef,
getScrollContainer, getScrollContainer,
handleScroll, handleScroll,
handleCheckboxUpdateChecked, handleCheckboxUpdateChecked,
@ -59,8 +88,7 @@ export default defineComponent({
} }
}, },
render () { render () {
const { NDataTable, handleScroll } = this const { mergedTheme, scrollX, mergedClsPrefix, handleScroll } = this
const { mergedTheme, scrollX, mergedClsPrefix } = NDataTable
return ( return (
<NScrollbar <NScrollbar
ref="scrollbarInstRef" ref="scrollbarInstRef"
@ -94,7 +122,7 @@ export default defineComponent({
rightActiveFixedColKey, rightActiveFixedColKey,
renderExpand, renderExpand,
mergedExpandedRowKeys mergedExpandedRowKeys
} = NDataTable } = this
const { length: colCount } = cols const { length: colCount } = cols
const { length: rowCount } = paginatedData const { length: rowCount } = paginatedData
const { handleCheckboxUpdateChecked, handleUpdateExpanded } = this const { handleCheckboxUpdateChecked, handleUpdateExpanded } = this
@ -144,7 +172,7 @@ export default defineComponent({
} }
} }
} }
const hoverKey = isCrossRowTd ? NDataTable.hoverKey : null const hoverKey = isCrossRowTd ? this.hoverKey : null
return ( return (
<td <td
key={colKey} key={colKey}
@ -216,7 +244,7 @@ export default defineComponent({
const row = ( const row = (
<tr <tr
onMouseenter={() => { onMouseenter={() => {
NDataTable.hoverKey = rowKey this.hoverKey = rowKey
}} }}
key={rowKey} key={rowKey}
class={[ class={[
@ -259,7 +287,7 @@ export default defineComponent({
ref="body" ref="body"
class={`${mergedClsPrefix}-data-table-table`} class={`${mergedClsPrefix}-data-table-table`}
onMouseleave={() => { onMouseleave={() => {
NDataTable.hoverKey = null this.hoverKey = null
}} }}
> >
<colgroup> <colgroup>

29
src/data-table/src/TableParts/CheckMenu.tsx
View File

@ -68,25 +68,36 @@ function createDropdownOptions (
export default defineComponent({ export default defineComponent({
name: 'DataTableCheckMenu', name: 'DataTableCheckMenu',
props: {
clsPrefix: {
type: String,
required: true
}
},
setup () { setup () {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion const {
const NDataTable = inject(dataTableInjectionKey)! checkOptionsRef,
const { doCheckAll, doUncheckAll } = NDataTable doCheckAll,
doUncheckAll
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
} = inject(dataTableInjectionKey)!
return { return {
handleSelect: createSelectHandler( handleSelect: computed(() =>
NDataTable.checkOptions, createSelectHandler(checkOptionsRef.value, doCheckAll, doUncheckAll)
doCheckAll,
doUncheckAll
), ),
options: computed(() => createDropdownOptions(NDataTable.checkOptions)) options: computed(() => createDropdownOptions(checkOptionsRef.value))
} }
}, },
render () { render () {
const { clsPrefix } = this
return ( return (
<NDropdown options={this.options} onSelect={this.handleSelect}> <NDropdown options={this.options} onSelect={this.handleSelect}>
{{ {{
default: () => ( default: () => (
<NBaseIcon clsPrefix="n" class="n-data-table-check-extra"> <NBaseIcon
clsPrefix={clsPrefix}
class={`${clsPrefix}-data-table-check-extra`}
>
{{ {{
default: () => <ChevronDownIcon /> default: () => <ChevronDownIcon />
}} }}

83
src/data-table/src/TableParts/Header.tsx
View File

@ -33,13 +33,31 @@ export default defineComponent({
onScroll: Function as PropType<(e: Event) => void> onScroll: Function as PropType<(e: Event) => void>
}, },
setup () { setup () {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion const {
const NDataTable = inject(dataTableInjectionKey)! mergedClsPrefixRef,
scrollXRef,
fixedColumnLeftMapRef,
fixedColumnRightMapRef,
mergedCurrentPageRef,
allRowsCheckedRef,
someRowsCheckedRef,
leftActiveFixedColKeyRef,
rightActiveFixedColKeyRef,
rowsRef,
colsRef,
mergedThemeRef,
checkOptionsRef,
mergedSortStateRef,
doUpdateSorter,
doUncheckAll,
doCheckAll
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
} = inject(dataTableInjectionKey)!
function handleCheckboxUpdateChecked (): void { function handleCheckboxUpdateChecked (): void {
if (NDataTable.someRowsChecked || NDataTable.allRowsChecked) { if (someRowsCheckedRef.value || allRowsCheckedRef.value) {
NDataTable.doUncheckAll() doUncheckAll()
} else { } else {
NDataTable.doCheckAll() doCheckAll()
} }
} }
function handleColHeaderClick ( function handleColHeaderClick (
@ -48,43 +66,48 @@ export default defineComponent({
): void { ): void {
if (happensIn(e, 'dataTableFilter')) return if (happensIn(e, 'dataTableFilter')) return
if (!isColumnSortable(column)) return if (!isColumnSortable(column)) return
const activeSorter = NDataTable.mergedSortState const activeSorter = mergedSortStateRef.value
const nextSorter = createNextSorter(column, activeSorter) const nextSorter = createNextSorter(column, activeSorter)
NDataTable.doUpdateSorter(nextSorter) doUpdateSorter(nextSorter)
} }
return { return {
NDataTable, mergedClsPrefix: mergedClsPrefixRef,
headerStyle: { scrollX: scrollXRef,
overflow: 'scroll' fixedColumnLeftMap: fixedColumnLeftMapRef,
}, fixedColumnRightMap: fixedColumnRightMapRef,
currentPage: mergedCurrentPageRef,
allRowsChecked: allRowsCheckedRef,
someRowsChecked: someRowsCheckedRef,
leftActiveFixedColKey: leftActiveFixedColKeyRef,
rightActiveFixedColKey: rightActiveFixedColKeyRef,
rows: rowsRef,
cols: colsRef,
mergedTheme: mergedThemeRef,
checkOptions: checkOptionsRef,
handleCheckboxUpdateChecked, handleCheckboxUpdateChecked,
handleColHeaderClick handleColHeaderClick
} }
}, },
render () { render () {
const { const {
NDataTable: { mergedClsPrefix,
mergedClsPrefix, scrollX,
scrollX, fixedColumnLeftMap,
fixedColumnLeftMap, fixedColumnRightMap,
fixedColumnRightMap, currentPage,
currentPage, allRowsChecked,
allRowsChecked, someRowsChecked,
someRowsChecked, leftActiveFixedColKey,
leftActiveFixedColKey, rightActiveFixedColKey,
rightActiveFixedColKey, rows,
rows, cols,
cols, mergedTheme,
mergedTheme, checkOptions,
checkOptions
},
headerStyle,
handleColHeaderClick, handleColHeaderClick,
handleCheckboxUpdateChecked handleCheckboxUpdateChecked
} = this } = this
return ( return (
<div <div
style={headerStyle}
class={`${mergedClsPrefix}-data-table-base-table-header`} class={`${mergedClsPrefix}-data-table-base-table-header`}
onScroll={this.onScroll} onScroll={this.onScroll}
> >
@ -154,7 +177,9 @@ export default defineComponent({
indeterminate={someRowsChecked} indeterminate={someRowsChecked}
onUpdateChecked={handleCheckboxUpdateChecked} onUpdateChecked={handleCheckboxUpdateChecked}
/> />
{checkOptions ? <CheckMenu /> : null} {checkOptions ? (
<CheckMenu clsPrefix={mergedClsPrefix} />
) : null}
</> </>
) : column.ellipsis === true || ) : column.ellipsis === true ||
(column.ellipsis && !column.ellipsis.tooltip) ? ( (column.ellipsis && !column.ellipsis.tooltip) ? (

58
src/data-table/src/interface.ts
View File

@ -1,5 +1,5 @@
import { TreeNode, TreeMate } from 'treemate' import { TreeNode, TreeMate } from 'treemate'
import { CSSProperties, InjectionKey, VNodeChild } from 'vue' import { CSSProperties, InjectionKey, Ref, VNodeChild } from 'vue'
import { EllipsisProps } from '../../ellipsis/src/Ellipsis' import { EllipsisProps } from '../../ellipsis/src/Ellipsis'
import { NLocale } from '../../locales' import { NLocale } from '../../locales'
import { MergedTheme } from '../../_mixins' import { MergedTheme } from '../../_mixins'
@ -134,35 +134,35 @@ export type DataTableCheckOptions = Array<
| { label: string, key: string | number, onSelect: () => void } | { label: string, key: string | number, onSelect: () => void }
> >
export interface DataTableInjection { export interface DataTableInjection {
checkOptions: DataTableCheckOptions | undefined checkOptionsRef: Ref<DataTableCheckOptions | undefined>
hoverKey: RowKey | null hoverKeyRef: Ref<RowKey | null>
mergedClsPrefix: string mergedClsPrefixRef: Ref<string>
mergedTheme: MergedTheme<DataTableTheme> mergedThemeRef: Ref<MergedTheme<DataTableTheme>>
scrollX: string | number | undefined scrollXRef: Ref<string | number | undefined>
rows: RowItem[][] rowsRef: Ref<RowItem[][]>
cols: ColItem[] colsRef: Ref<ColItem[]>
treeMate: TreeMate<RowData> treeMateRef: Ref<TreeMate<RowData>>
paginatedData: TmNode[] paginatedDataRef: Ref<TmNode[]>
leftFixedColumns: TableColumns leftFixedColumnsRef: Ref<TableColumns>
rightFixedColumns: TableColumns rightFixedColumnsRef: Ref<TableColumns>
leftActiveFixedColKey: ColumnKey | null leftActiveFixedColKeyRef: Ref<ColumnKey | null>
rightActiveFixedColKey: ColumnKey | null rightActiveFixedColKeyRef: Ref<ColumnKey | null>
fixedColumnLeftMap: Record<ColumnKey, number | undefined> fixedColumnLeftMapRef: Ref<Record<ColumnKey, number | undefined>>
fixedColumnRightMap: Record<ColumnKey, number | undefined> fixedColumnRightMapRef: Ref<Record<ColumnKey, number | undefined>>
currentPage: number mergedCurrentPageRef: Ref<number>
someRowsChecked: boolean someRowsCheckedRef: Ref<boolean>
allRowsChecked: boolean allRowsCheckedRef: Ref<boolean>
mergedSortState: SortState | null mergedSortStateRef: Ref<SortState | null>
mergedFilterState: FilterState mergedFilterStateRef: Ref<FilterState>
loading: boolean loadingRef: Ref<boolean>
rowClassName: string | CreateRowClassName | undefined rowClassNameRef: Ref<string | CreateRowClassName | undefined>
mergedCheckedRowKeys: RowKey[] mergedCheckedRowKeysRef: Ref<RowKey[]>
locale: NLocale['DataTable'] localeRef: Ref<NLocale['DataTable']>
filterMenuCssVars: CSSProperties filterMenuCssVarsRef: Ref<CSSProperties>
mergedExpandedRowKeys: RowKey[] mergedExpandedRowKeysRef: Ref<RowKey[]>
renderExpand: undefined | RenderExpand rowKeyRef: Ref<CreateRowKey | undefined>
renderExpandRef: Ref<undefined | RenderExpand>
doUpdateExpandedRowKeys: (keys: RowKey[]) => void doUpdateExpandedRowKeys: (keys: RowKey[]) => void
rowKey: CreateRowKey | undefined
doUpdateFilters: ( doUpdateFilters: (
filters: FilterState, filters: FilterState,
sourceColumn?: TableBaseColumn sourceColumn?: TableBaseColumn

11
src/data-table/src/styles/index.cssr.ts
View File

@ -269,11 +269,12 @@ export default c([
fixedColumnStyle fixedColumnStyle
]) ])
]), ]),
cB('data-table-base-table-header', { cB('data-table-base-table-header', `
flexShrink: 0, overflow: scroll;
transition: 'border-color .3s var(--bezier)', flex-shrink: 0;
scrollbarWidth: 'none' transition: border-color .3s var(--bezier);
}, [ scrollbar-width: none;
`, [
c('&::-webkit-scrollbar', { c('&::-webkit-scrollbar', {
width: 0, width: 0,
height: 0 height: 0

6
src/data-table/src/use-check.ts
View File

@ -90,9 +90,9 @@ export function useCheck (
) )
} }
return { return {
mergedCheckedRowKeys: mergedCheckedRowKeysRef, mergedCheckedRowKeysRef,
someRowsChecked: someRowsCheckedRef, someRowsCheckedRef,
allRowsChecked: allRowsCheckedRef, allRowsCheckedRef,
doUpdateCheckedRowKeys, doUpdateCheckedRowKeys,
doCheckAll, doCheckAll,
doUncheckAll doUncheckAll

6
src/data-table/src/use-expand.ts
View File

@ -21,7 +21,7 @@ export function useExpand (props: DataTableSetupProps) {
}) })
const uncontrolledExpandedRowKeysRef = ref(props.defaultExpandedRowKeys) const uncontrolledExpandedRowKeysRef = ref(props.defaultExpandedRowKeys)
const controlledExpandedRowKeysRef = toRef(props, 'expandedRowKeys') const controlledExpandedRowKeysRef = toRef(props, 'expandedRowKeys')
const mergedExpandedRowKeys = useMergedState( const mergedExpandedRowKeysRef = useMergedState(
controlledExpandedRowKeysRef, controlledExpandedRowKeysRef,
uncontrolledExpandedRowKeysRef uncontrolledExpandedRowKeysRef
) )
@ -39,8 +39,8 @@ export function useExpand (props: DataTableSetupProps) {
uncontrolledExpandedRowKeysRef.value = expandedKeys uncontrolledExpandedRowKeysRef.value = expandedKeys
} }
return { return {
mergedExpandedRowKeys: mergedExpandedRowKeys, mergedExpandedRowKeysRef,
renderExpand: renderExpandRef, renderExpandRef,
doUpdateExpandedRowKeys doUpdateExpandedRowKeys
} }
} }

12
src/data-table/src/use-group-header.ts
View File

@ -119,16 +119,16 @@ function getRowsAndCols (
export function useGroupHeader ( export function useGroupHeader (
props: DataTableSetupProps props: DataTableSetupProps
): { ): {
rows: ComputedRef<RowItem[][]> rowsRef: ComputedRef<RowItem[][]>
cols: ComputedRef<ColItem[]> colsRef: ComputedRef<ColItem[]>
dataRelatedCols: ComputedRef< dataRelatedColsRef: ComputedRef<
Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn> Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>
> >
} { } {
const rowsAndCols = computed(() => getRowsAndCols(props.columns)) const rowsAndCols = computed(() => getRowsAndCols(props.columns))
return { return {
rows: computed(() => rowsAndCols.value.rows), rowsRef: computed(() => rowsAndCols.value.rows),
cols: computed(() => rowsAndCols.value.cols), colsRef: computed(() => rowsAndCols.value.cols),
dataRelatedCols: computed(() => rowsAndCols.value.dataRelatedCols) dataRelatedColsRef: computed(() => rowsAndCols.value.dataRelatedCols)
} }
} }

12
src/data-table/src/use-scroll.ts
View File

@ -169,12 +169,12 @@ export function useScroll (
}) })
return { return {
styleScrollXRef, styleScrollXRef,
fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnLeftMapRef,
fixedColumnRightMap: fixedColumnRightMapRef, fixedColumnRightMapRef,
leftFixedColumns: leftFixedColumnsRef, leftFixedColumnsRef,
rightFixedColumns: rightFixedColumnsRef, rightFixedColumnsRef,
leftActiveFixedColKey: leftActiveFixedColKeyRef, leftActiveFixedColKeyRef,
rightActiveFixedColKey: rightActiveFixedColKeyRef, rightActiveFixedColKeyRef,
deriveActiveRightFixedColumn, deriveActiveRightFixedColumn,
deriveActiveLeftFixedColumn, deriveActiveLeftFixedColumn,
handleTableBodyScroll, handleTableBodyScroll,

29
src/data-table/src/use-table-data.ts
View File

@ -26,9 +26,9 @@ import { call, warn } from '../../_utils'
export function useTableData ( export function useTableData (
props: DataTableSetupProps, props: DataTableSetupProps,
{ {
dataRelatedCols dataRelatedColsRef
}: { }: {
dataRelatedCols: ComputedRef< dataRelatedColsRef: ComputedRef<
Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn> Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>
> >
} }
@ -44,7 +44,7 @@ export function useTableData (
const uncontrolledCurrentPageRef = ref(1) const uncontrolledCurrentPageRef = ref(1)
const uncontrolledPageSizeRef = ref(10) const uncontrolledPageSizeRef = ref(10)
dataRelatedCols.value.forEach((column) => { dataRelatedColsRef.value.forEach((column) => {
if (column.sorter !== undefined) { if (column.sorter !== undefined) {
uncontrolledSortStateRef.value = { uncontrolledSortStateRef.value = {
columnKey: column.key, columnKey: column.key,
@ -102,7 +102,7 @@ export function useTableData (
const mergedSortStateRef = computed<SortState | null>(() => { const mergedSortStateRef = computed<SortState | null>(() => {
// If one of the columns's sort order is false or 'ascend' or 'descend', // If one of the columns's sort order is false or 'ascend' or 'descend',
// the table's controll functionality should work in controlled manner. // the table's controll functionality should work in controlled manner.
const columnsWithControlledSortOrder = dataRelatedCols.value.filter( const columnsWithControlledSortOrder = dataRelatedColsRef.value.filter(
(column) => (column) =>
column.type !== 'selection' && column.type !== 'selection' &&
column.sorter !== undefined && column.sorter !== undefined &&
@ -132,7 +132,7 @@ export function useTableData (
}) })
const mergedFilterStateRef = computed<FilterState>(() => { const mergedFilterStateRef = computed<FilterState>(() => {
const columnsWithControlledFilter = dataRelatedCols.value.filter( const columnsWithControlledFilter = dataRelatedColsRef.value.filter(
(column) => { (column) => {
return ( return (
column.filterOptionValues !== undefined || column.filterOptionValues !== undefined ||
@ -346,7 +346,7 @@ export function useTableData (
if (!columnKey) { if (!columnKey) {
clearSorter() clearSorter()
} else { } else {
const columnToSort = dataRelatedCols.value.find( const columnToSort = dataRelatedColsRef.value.find(
(column) => (column) =>
column.type !== 'selection' && column.type !== 'selection' &&
column.type !== 'expand' && column.type !== 'expand' &&
@ -383,15 +383,14 @@ export function useTableData (
} }
} }
return { return {
treeMate: treeMateRef, treeMateRef,
mergedCurrentPage: mergedCurrentPageRef, mergedCurrentPageRef,
mergedPagination: mergedPaginationRef, mergedPaginationRef,
paginatedData: paginatedDataRef, paginatedDataRef,
currentPage: mergedCurrentPageRef, mergedFilterStateRef,
mergedFilterState: mergedFilterStateRef, mergedSortStateRef: mergedSortStateRef,
mergedSortState: mergedSortStateRef, hoverKeyRef: ref<RowKey | null>(null),
hoverKey: ref<RowKey | null>(null), selectionColumnRef,
selectionColumn: selectionColumnRef,
doUpdateFilters, doUpdateFilters,
doUpdateSorter, doUpdateSorter,
doUpdatePageSize, doUpdatePageSize,