From 30e2e0b186fdebd881dbfd3b0405c9bb6bb0fa38 Mon Sep 17 00:00:00 2001 From: wangyupei <2311595895@qq.com> Date: Thu, 24 Mar 2022 18:31:28 +0800 Subject: [PATCH] =?UTF-8?q?feat(Table):=20=E4=BF=AE=E6=94=B9Table=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84=E5=92=8C=E9=83=A8?= =?UTF-8?q?=E5=88=86API=E6=96=87=E6=A1=A3=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/table/index.ts | 12 +-- .../body/body-types.ts} | 0 .../table/src/{ => components}/body/body.scss | 2 +- .../table/src/{ => components}/body/body.tsx | 51 +++++---- .../src/{ => components}/body/use-body.ts | 4 +- .../{ => components}/colgroup/colgroup.tsx | 16 ++- .../column/column-types.ts} | 33 +++--- .../src/{ => components}/column/column.tsx | 21 ++-- .../src/{ => components}/column/use-column.ts | 4 +- .../{header => components}/filter/filter.scss | 0 .../{header => components}/filter/filter.tsx | 56 +++++----- .../{header => components}/filter/index.ts | 0 .../table/src/{ => components}/fix-header.tsx | 0 .../src/{ => components}/header/header.scss | 2 +- .../src/{ => components}/header/header.tsx | 68 ++++++------ .../{ => components}/header/header.type.ts | 0 .../src/{ => components}/header/use-header.ts | 20 ++-- .../src/{ => components}/normal-header.tsx | 0 .../src/{header => components}/sort/index.ts | 0 .../src/{header => components}/sort/sort.scss | 0 .../devui/table/src/components/sort/sort.tsx | 68 ++++++++++++ .../table/src/{ => composable}/use-table.ts | 11 +- .../devui/table/src/header/sort/sort.tsx | 69 ------------ .../devui-vue/devui/table/src/store/index.ts | 4 +- .../devui-vue/devui/table/src/table-types.ts | 100 ++++++++++++++++-- packages/devui-vue/devui/table/src/table.tsx | 12 +-- .../devui-vue/devui/table/src/table.type.ts | 94 ---------------- .../devui-vue/docs/components/table/index.md | 48 ++++----- 28 files changed, 332 insertions(+), 363 deletions(-) rename packages/devui-vue/devui/table/src/{body/body.type.ts => components/body/body-types.ts} (100%) rename packages/devui-vue/devui/table/src/{ => components}/body/body.scss (92%) rename packages/devui-vue/devui/table/src/{ => components}/body/body.tsx (61%) rename packages/devui-vue/devui/table/src/{ => components}/body/use-body.ts (58%) rename packages/devui-vue/devui/table/src/{ => components}/colgroup/colgroup.tsx (63%) rename packages/devui-vue/devui/table/src/{column/column.type.ts => components/column/column-types.ts} (94%) rename packages/devui-vue/devui/table/src/{ => components}/column/column.tsx (63%) rename packages/devui-vue/devui/table/src/{ => components}/column/use-column.ts (94%) rename packages/devui-vue/devui/table/src/{header => components}/filter/filter.scss (100%) rename packages/devui-vue/devui/table/src/{header => components}/filter/filter.tsx (64%) rename packages/devui-vue/devui/table/src/{header => components}/filter/index.ts (100%) rename packages/devui-vue/devui/table/src/{ => components}/fix-header.tsx (100%) rename packages/devui-vue/devui/table/src/{ => components}/header/header.scss (94%) rename packages/devui-vue/devui/table/src/{ => components}/header/header.tsx (52%) rename packages/devui-vue/devui/table/src/{ => components}/header/header.type.ts (100%) rename packages/devui-vue/devui/table/src/{ => components}/header/use-header.ts (57%) rename packages/devui-vue/devui/table/src/{ => components}/normal-header.tsx (100%) rename packages/devui-vue/devui/table/src/{header => components}/sort/index.ts (100%) rename packages/devui-vue/devui/table/src/{header => components}/sort/sort.scss (100%) create mode 100644 packages/devui-vue/devui/table/src/components/sort/sort.tsx rename packages/devui-vue/devui/table/src/{ => composable}/use-table.ts (85%) delete mode 100644 packages/devui-vue/devui/table/src/header/sort/sort.tsx delete mode 100644 packages/devui-vue/devui/table/src/table.type.ts diff --git a/packages/devui-vue/devui/table/index.ts b/packages/devui-vue/devui/table/index.ts index 48ab1d538c..e8ff93eaea 100644 --- a/packages/devui-vue/devui/table/index.ts +++ b/packages/devui-vue/devui/table/index.ts @@ -1,11 +1,6 @@ import type { App } from 'vue'; import Table from './src/table'; -import Column from './src/column/column'; - -Table.install = function (app: App): void { - app.component(Table.name, Table); - app.component(Column.name, Column); -}; +import Column from './src/components/column/column'; export { Table, Column }; @@ -14,6 +9,7 @@ export default { category: '数据展示', status: '10%', install(app: App): void { - app.use(Table as any); - } + app.component(Table.name, Table); + app.component(Column.name, Column); + }, }; diff --git a/packages/devui-vue/devui/table/src/body/body.type.ts b/packages/devui-vue/devui/table/src/components/body/body-types.ts similarity index 100% rename from packages/devui-vue/devui/table/src/body/body.type.ts rename to packages/devui-vue/devui/table/src/components/body/body-types.ts diff --git a/packages/devui-vue/devui/table/src/body/body.scss b/packages/devui-vue/devui/table/src/components/body/body.scss similarity index 92% rename from packages/devui-vue/devui/table/src/body/body.scss rename to packages/devui-vue/devui/table/src/components/body/body.scss index cc3c558f18..4dc8d1a6fb 100644 --- a/packages/devui-vue/devui/table/src/body/body.scss +++ b/packages/devui-vue/devui/table/src/components/body/body.scss @@ -1,4 +1,4 @@ -@import '../../../styles-var/devui-var.scss'; +@import '../../../../styles-var/devui-var.scss'; .devui-tbody { tr { diff --git a/packages/devui-vue/devui/table/src/body/body.tsx b/packages/devui-vue/devui/table/src/components/body/body.tsx similarity index 61% rename from packages/devui-vue/devui/table/src/body/body.tsx rename to packages/devui-vue/devui/table/src/components/body/body.tsx index 8a1d9c8a8e..af6349e5a8 100644 --- a/packages/devui-vue/devui/table/src/body/body.tsx +++ b/packages/devui-vue/devui/table/src/components/body/body.tsx @@ -1,38 +1,38 @@ import { defineComponent, inject, computed, PropType, toRef } from 'vue'; -import { TABLE_TOKEN } from '../table.type'; -import { Checkbox } from '../../../checkbox'; +import { TABLE_TOKEN } from '../../table-types'; +import { Checkbox } from '../../../../checkbox'; import './body.scss'; -import { Column } from '../column/column.type'; -import { useFixedColumn } from '../use-table'; +import { Column } from '../column/column-types'; +import { useFixedColumn } from '../../composable/use-table'; export default defineComponent({ name: 'DTableBody', setup() { const table = inject(TABLE_TOKEN); - const { - _data: data, - _columns: columns, - _checkList: checkList, - isFixedLeft - } = table.store.states; + const { _data: data, _columns: columns, _checkList: checkList, isFixedLeft } = table.store.states; // 移动到行上是否高亮 const hoverEnabled = computed(() => table.props.rowHoveredHighlight); // 行前的 checkbox - const tdAttrs = computed(() => isFixedLeft.value ? ({ - class: 'devui-sticky-cell left', - style: 'left:0;' - }) : null); - const renderCheckbox = (index: number) => table.props.checkable ? ( - - - - ) : null; + const tdAttrs = computed(() => + isFixedLeft.value + ? { + class: 'devui-sticky-cell left', + style: 'left:0;', + } + : null + ); + const renderCheckbox = (index: number) => + table.props.checkable ? ( + + + + ) : null; return () => ( - + {data.value.map((row, rowIndex) => { return ( @@ -45,21 +45,20 @@ export default defineComponent({ })} ); - } + }, }); - const TD = defineComponent({ props: { column: { - type: Object as PropType + type: Object as PropType, }, row: { - type: Object + type: Object, }, index: { type: Number, - } + }, }, setup(props: { column: Column; row: any; index: number }) { const column = toRef(props, 'column'); @@ -72,5 +71,5 @@ const TD = defineComponent({ {column.value.renderCell(props.row, props.index)} ); - } + }, }); diff --git a/packages/devui-vue/devui/table/src/body/use-body.ts b/packages/devui-vue/devui/table/src/components/body/use-body.ts similarity index 58% rename from packages/devui-vue/devui/table/src/body/use-body.ts rename to packages/devui-vue/devui/table/src/components/body/use-body.ts index d12cc220fb..7a66b98a06 100644 --- a/packages/devui-vue/devui/table/src/body/use-body.ts +++ b/packages/devui-vue/devui/table/src/components/body/use-body.ts @@ -1,6 +1,6 @@ import { computed, ComputedRef } from 'vue'; -import { Column } from '../column/column.type'; -import { TableBodyPropsTypes } from './body.type'; +import { Column } from '../column/column-types'; +import { TableBodyPropsTypes } from './body-types'; interface Data { rowColumns: ComputedRef<(Record & { columns: Column[] })[]>; diff --git a/packages/devui-vue/devui/table/src/colgroup/colgroup.tsx b/packages/devui-vue/devui/table/src/components/colgroup/colgroup.tsx similarity index 63% rename from packages/devui-vue/devui/table/src/colgroup/colgroup.tsx rename to packages/devui-vue/devui/table/src/components/colgroup/colgroup.tsx index fe4b6d7c90..8efbb71ba9 100644 --- a/packages/devui-vue/devui/table/src/colgroup/colgroup.tsx +++ b/packages/devui-vue/devui/table/src/components/colgroup/colgroup.tsx @@ -1,22 +1,20 @@ import { inject, defineComponent } from 'vue'; -import { TABLE_TOKEN } from '../table.type'; +import { TABLE_TOKEN } from '../../table-types'; export default defineComponent({ name: 'DColGroup', setup() { const parent = inject(TABLE_TOKEN); - const columns = parent.store.states._columns; - return () => ( - parent.props.tableLayout === 'fixed' ? ( + const columns = parent?.store.states._columns; + return () => + parent?.props.tableLayout === 'fixed' ? ( {/* 如果是 checkable，那么需要指定 col */} {parent.props.checkable ? : null} - {columns.value.map((column, index) => { + {columns?.value.map((column, index) => { return ; })} - ) : null - - ); - } + ) : null; + }, }); diff --git a/packages/devui-vue/devui/table/src/column/column.type.ts b/packages/devui-vue/devui/table/src/components/column/column-types.ts similarity index 94% rename from packages/devui-vue/devui/table/src/column/column.type.ts rename to packages/devui-vue/devui/table/src/components/column/column-types.ts index 5e900f4a0e..667aba4859 100644 --- a/packages/devui-vue/devui/table/src/column/column.type.ts +++ b/packages/devui-vue/devui/table/src/components/column/column-types.ts @@ -1,5 +1,16 @@ import { PropType, ExtractPropTypes, VNode, Slot } from 'vue'; +export type Formatter = (row: T, cellValue: R, index: number) => VNode[]; + +export type CompareFn = (field: string, a: T, b: T) => boolean; + +export interface FilterConfig { + id: number | string; + name: string; + value: any; + checked?: boolean; +} + export const TableColumnProps = { header: { type: String, @@ -22,27 +33,27 @@ export const TableColumnProps = { }, order: { type: Number, - default: 0 + default: 0, }, sortable: { type: Boolean, - default: false + default: false, }, compareFn: { type: Function as PropType, - default: (field: string, a: any, b: any): boolean => a[field] < b[field] + default: (field: string, a: any, b: any): boolean => a[field] < b[field], }, filterable: { type: Boolean, - default: false + default: false, }, filterMultiple: { type: Boolean, - default: false + default: false, }, filterList: { type: Array as PropType, - default: [] + default: [], }, fixedLeft: { type: String, @@ -54,10 +65,6 @@ export const TableColumnProps = { export type TableColumnPropsTypes = ExtractPropTypes; -export type Formatter = (row: T, cellValue: R, index: number) => VNode[]; - -export type CompareFn = (field: string, a: T, b: T) => boolean; - export type FilterResults = (string | number)[]; export interface CustomFilterProps { @@ -67,12 +74,6 @@ export interface CustomFilterProps { export type CustomFilterSlot = (props: CustomFilterProps) => VNode[]; -export interface FilterConfig { - id: number | string; - name: string; - value: any; - checked?: boolean; -} export interface Column = any> { field?: string; width?: number; diff --git a/packages/devui-vue/devui/table/src/column/column.tsx b/packages/devui-vue/devui/table/src/components/column/column.tsx similarity index 63% rename from packages/devui-vue/devui/table/src/column/column.tsx rename to packages/devui-vue/devui/table/src/components/column/column.tsx index 62f7be7ce5..8195cc45ea 100644 --- a/packages/devui-vue/devui/table/src/column/column.tsx +++ b/packages/devui-vue/devui/table/src/components/column/column.tsx @@ -1,10 +1,6 @@ import { inject, defineComponent, onBeforeUnmount, onMounted, toRefs, watch } from 'vue'; -import { - Column, - TableColumnProps, - TableColumnPropsTypes, -} from './column.type'; -import { TABLE_TOKEN } from '../table.type'; +import { TableColumnProps, TableColumnPropsTypes } from './column-types'; +import { TABLE_TOKEN } from '../../table-types'; import { createColumn } from './use-column'; export default defineComponent({ @@ -21,14 +17,17 @@ export default defineComponent({ const parent = inject(TABLE_TOKEN); onMounted(() => { - parent.store.insertColumn(column); - watch(() => column.order, () => { - parent.store.sortColumn(); - }); + parent?.store.insertColumn(column); + watch( + () => column.order, + () => { + parent?.store.sortColumn(); + } + ); }); onBeforeUnmount(() => { - parent.store.removeColumn(column); + parent?.store.removeColumn(column); }); }, render() { diff --git a/packages/devui-vue/devui/table/src/column/use-column.ts b/packages/devui-vue/devui/table/src/components/column/use-column.ts similarity index 94% rename from packages/devui-vue/devui/table/src/column/use-column.ts rename to packages/devui-vue/devui/table/src/components/column/use-column.ts index df395ba058..24592c1680 100644 --- a/packages/devui-vue/devui/table/src/column/use-column.ts +++ b/packages/devui-vue/devui/table/src/components/column/use-column.ts @@ -1,6 +1,6 @@ import { watch, reactive, onBeforeMount, ToRefs, Slots, h } from 'vue'; -import { Column, TableColumnPropsTypes } from './column.type'; -import { formatWidth, formatMinWidth } from '../utils'; +import { Column, TableColumnPropsTypes } from './column-types'; +import { formatWidth, formatMinWidth } from '../../utils'; function defaultRenderHeader(this: Column) { return h('span', { class: 'title' }, this.header); diff --git a/packages/devui-vue/devui/table/src/header/filter/filter.scss b/packages/devui-vue/devui/table/src/components/filter/filter.scss similarity index 100% rename from packages/devui-vue/devui/table/src/header/filter/filter.scss rename to packages/devui-vue/devui/table/src/components/filter/filter.scss diff --git a/packages/devui-vue/devui/table/src/header/filter/filter.tsx b/packages/devui-vue/devui/table/src/components/filter/filter.tsx similarity index 64% rename from packages/devui-vue/devui/table/src/header/filter/filter.tsx rename to packages/devui-vue/devui/table/src/components/filter/filter.tsx index 4bc23008b4..f6228e0843 100644 --- a/packages/devui-vue/devui/table/src/header/filter/filter.tsx +++ b/packages/devui-vue/devui/table/src/components/filter/filter.tsx @@ -1,30 +1,29 @@ import { defineComponent, PropType, ref, computed } from 'vue'; -import { CustomFilterSlot, FilterConfig, FilterResults } from '../../column/column.type'; +import { CustomFilterSlot, FilterConfig, FilterResults } from '../column/column-types'; import { Dropdown } from '../../../../dropdown'; import { Checkbox } from '../../../../checkbox'; import './filter.scss'; - export const Filter = defineComponent({ props: { modelValue: { type: Array as PropType, - default: [] + default: [], }, 'onUpdate:modelValue': { - type: Function as PropType<(v: FilterResults) => void> + type: Function as PropType<(v: FilterResults) => void>, }, customTemplate: { - type: Function as PropType + type: Function as PropType, }, filterList: { type: Array as PropType, - required: true + required: true, }, filterMultiple: { type: Boolean, - default: true + default: true, }, }, emits: ['update:modelValue'], @@ -35,40 +34,36 @@ export const Filter = defineComponent({ const onUpdateChecked = (config: FilterConfig, value: boolean) => { const checkedList = props.modelValue; const update = props['onUpdate:modelValue']; - const contained = !!checkedList.find(item => item === config.value); + const contained = !!checkedList.find((item) => item === config.value); if (value && !contained) { update?.([...checkedList, config.value]); } else if (!value && contained) { - update?.(checkedList.filter(item => config.value !== item)); + update?.(checkedList.filter((item) => config.value !== item)); } - } + }; // 单选逻辑 const updateSingleChecked = (config: FilterConfig) => { props['onUpdate:modelValue']?.([config.value]); - } - + }; const dropdownContent = computed(() => { const checkedList = props.modelValue; - const isContained = (config: FilterConfig) => !!checkedList.find(item => item === config.value); + const isContained = (config: FilterConfig) => !!checkedList.find((item) => item === config.value); return () => ( -
    +
      {props.filterList.map((item, index) => { return (
    • 0 ? 'margin-top:10px' : ''}> {props.filterMultiple ? ( - onUpdateChecked(item, value)} - > + onUpdateChecked(item, value)}> {item.name} ) : ( updateSingleChecked(item)}>{item.name} )}
      • - ) + ); })}
    ); @@ -78,25 +73,24 @@ export const Filter = defineComponent({ - + width='16px' + height='16px' + viewBox='0 0 16 16' + version='1.1' + xmlns='http://www.w3.org/2000/svg' + xmlns:xlink='http://www.w3.org/1999/xlink'> + - + - + {props.customTemplate?.({ value: props.modelValue, onChange: props['onUpdate:modelValue'] }) ?? dropdownContent.value()} - ) - } + ); + }, }); diff --git a/packages/devui-vue/devui/table/src/header/filter/index.ts b/packages/devui-vue/devui/table/src/components/filter/index.ts similarity index 100% rename from packages/devui-vue/devui/table/src/header/filter/index.ts rename to packages/devui-vue/devui/table/src/components/filter/index.ts diff --git a/packages/devui-vue/devui/table/src/fix-header.tsx b/packages/devui-vue/devui/table/src/components/fix-header.tsx similarity index 100% rename from packages/devui-vue/devui/table/src/fix-header.tsx rename to packages/devui-vue/devui/table/src/components/fix-header.tsx diff --git a/packages/devui-vue/devui/table/src/header/header.scss b/packages/devui-vue/devui/table/src/components/header/header.scss similarity index 94% rename from packages/devui-vue/devui/table/src/header/header.scss rename to packages/devui-vue/devui/table/src/components/header/header.scss index 5de47eb30e..4b2e43ec34 100644 --- a/packages/devui-vue/devui/table/src/header/header.scss +++ b/packages/devui-vue/devui/table/src/components/header/header.scss @@ -1,4 +1,4 @@ -@import '../../../styles-var/devui-var.scss'; +@import '../../../../styles-var/devui-var.scss'; .devui-thead { tr { diff --git a/packages/devui-vue/devui/table/src/header/header.tsx b/packages/devui-vue/devui/table/src/components/header/header.tsx similarity index 52% rename from packages/devui-vue/devui/table/src/header/header.tsx rename to packages/devui-vue/devui/table/src/components/header/header.tsx index b8ef672ec9..01d56859c0 100644 --- a/packages/devui-vue/devui/table/src/header/header.tsx +++ b/packages/devui-vue/devui/table/src/components/header/header.tsx @@ -1,45 +1,41 @@ import { defineComponent, inject, computed, PropType, toRefs } from 'vue'; -import { TABLE_TOKEN } from '../table.type'; -import { Column } from '../column/column.type'; +import { TABLE_TOKEN } from '../../table-types'; +import { Column } from '../column/column-types'; -import { Checkbox } from '../../../checkbox'; -import { Sort } from './sort'; -import { Filter } from './filter'; +import { Checkbox } from '../../../../checkbox'; +import { Sort } from '../sort'; +import { Filter } from '../filter'; import './header.scss'; import '../body/body.scss'; import { useFliter, useSort } from './use-header'; -import { useFixedColumn } from '../use-table'; - +import { useFixedColumn } from '../../composable/use-table'; export default defineComponent({ name: 'DTableHeader', setup() { const table = inject(TABLE_TOKEN); - const { - _checkAll: checkAll, - _halfChecked: halfChecked, - _columns: columns, - isFixedLeft - } = table.store.states; + const { _checkAll: checkAll, _halfChecked: halfChecked, _columns: columns, isFixedLeft } = table.store.states; - const thAttrs = computed(() => isFixedLeft.value ? ({ - class: 'devui-sticky-cell left', - style: 'left:0;' - }) : null); - const checkbox = computed(() => table.props.checkable ? ( - - - - ) : null); + const thAttrs = computed(() => + isFixedLeft.value + ? { + class: 'devui-sticky-cell left', + style: 'left:0;', + } + : null + ); + const checkbox = computed(() => + table.props.checkable ? ( + + + + ) : null + ); return () => { return ( - + {checkbox.value} {columns.value.map((column, index) => ( @@ -49,15 +45,15 @@ export default defineComponent({ ); }; - } + }, }); const Th = defineComponent({ props: { column: { type: Object as PropType, - required: true - } + required: true, + }, }, setup(props: { column: Column }) { const table = inject(TABLE_TOKEN); @@ -74,16 +70,14 @@ const Th = defineComponent({ return () => ( -
    +
    {props.column.renderHeader()} - {props.column.filterable && } + {props.column.filterable && ( + + )}
    {props.column.sortable && } ); - } + }, }); diff --git a/packages/devui-vue/devui/table/src/header/header.type.ts b/packages/devui-vue/devui/table/src/components/header/header.type.ts similarity index 100% rename from packages/devui-vue/devui/table/src/header/header.type.ts rename to packages/devui-vue/devui/table/src/components/header/header.type.ts diff --git a/packages/devui-vue/devui/table/src/header/use-header.ts b/packages/devui-vue/devui/table/src/components/header/use-header.ts similarity index 57% rename from packages/devui-vue/devui/table/src/header/use-header.ts rename to packages/devui-vue/devui/table/src/components/header/use-header.ts index 3ddffdd8c8..f9145ec5b0 100644 --- a/packages/devui-vue/devui/table/src/header/use-header.ts +++ b/packages/devui-vue/devui/table/src/components/header/use-header.ts @@ -1,16 +1,20 @@ import { ref, watch, Ref, shallowRef } from 'vue'; -import { Column, FilterResults } from '../column/column.type'; -import { TableStore } from '../store'; -import { SortDirection } from '../table.type'; +import { Column, FilterResults } from '../column/column-types'; +import { TableStore } from '../../store'; +import { SortDirection } from '../../table-types'; export const useSort = (store: TableStore, column: Ref): Ref => { // 排序功能 const directionRef = ref('DESC'); - watch([directionRef, column], ([direction, column]) => { - if (column.sortable) { - store.sortData(column.field, direction, column.compareFn); - } - }, { immediate: true }); + watch( + [directionRef, column], + ([direction, column]) => { + if (column.sortable) { + store.sortData(column.field, direction, column.compareFn); + } + }, + { immediate: true } + ); return directionRef; }; diff --git a/packages/devui-vue/devui/table/src/normal-header.tsx b/packages/devui-vue/devui/table/src/components/normal-header.tsx similarity index 100% rename from packages/devui-vue/devui/table/src/normal-header.tsx rename to packages/devui-vue/devui/table/src/components/normal-header.tsx diff --git a/packages/devui-vue/devui/table/src/header/sort/index.ts b/packages/devui-vue/devui/table/src/components/sort/index.ts similarity index 100% rename from packages/devui-vue/devui/table/src/header/sort/index.ts rename to packages/devui-vue/devui/table/src/components/sort/index.ts diff --git a/packages/devui-vue/devui/table/src/header/sort/sort.scss b/packages/devui-vue/devui/table/src/components/sort/sort.scss similarity index 100% rename from packages/devui-vue/devui/table/src/header/sort/sort.scss rename to packages/devui-vue/devui/table/src/components/sort/sort.scss diff --git a/packages/devui-vue/devui/table/src/components/sort/sort.tsx b/packages/devui-vue/devui/table/src/components/sort/sort.tsx new file mode 100644 index 0000000000..a1b7862ba0 --- /dev/null +++ b/packages/devui-vue/devui/table/src/components/sort/sort.tsx @@ -0,0 +1,68 @@ +import { defineComponent, PropType } from 'vue'; +import { SortDirection } from '../../table-types'; +import './sort.scss'; + +export const Sort = defineComponent({ + props: { + modelValue: { + type: String as PropType, + default: '', + }, + 'onUpdate:modelValue': { + type: Function as PropType<(v: SortDirection) => void>, + }, + }, + emits: ['update:modelValue'], + setup(props, ctx) { + const changeDirection = () => { + let direction = ''; + if (props.modelValue === 'ASC') { + direction = 'DESC'; + } else if (props.modelValue === 'DESC') { + direction = ''; + } else { + direction = 'ASC'; + } + ctx.emit('update:modelValue', direction); + }; + + return () => ( + + + + + + + + + + + + + + + + + + + + ); + }, +}); diff --git a/packages/devui-vue/devui/table/src/use-table.ts b/packages/devui-vue/devui/table/src/composable/use-table.ts similarity index 85% rename from packages/devui-vue/devui/table/src/use-table.ts rename to packages/devui-vue/devui/table/src/composable/use-table.ts index 2d19e4fb2f..43fdfdaaed 100644 --- a/packages/devui-vue/devui/table/src/use-table.ts +++ b/packages/devui-vue/devui/table/src/composable/use-table.ts @@ -1,6 +1,6 @@ import { computed, ComputedRef, CSSProperties, Ref, ToRefs } from 'vue'; -import { Column } from './column/column.type'; -import { TablePropsTypes } from './table.type'; +import { Column } from '../components/column/column-types'; +import { TablePropsTypes } from '../table-types'; interface TableConfig { classes: ComputedRef>; @@ -12,18 +12,17 @@ export function useTable(props: TablePropsTypes): TableConfig { 'devui-table': true, 'devui-table-striped': props.striped, 'header-bg': props.headerBg, - 'table-layout-auto': props.tableLayout === 'auto' + 'table-layout-auto': props.tableLayout === 'auto', })); const style: ComputedRef = computed(() => ({ maxHeight: props.maxHeight, maxWidth: props.maxWidth, height: props.tableHeight, - width: props.tableWidth + width: props.tableWidth, })); return { classes, style }; } - export const useFixedColumn = (column: Ref): ToRefs<{ stickyCell: string; offsetStyle: string }> => { const stickyCell = computed(() => { const col = column.value; @@ -52,6 +51,6 @@ export const useFixedColumn = (column: Ref): ToRefs<{ stickyCell: string return { stickyCell, - offsetStyle + offsetStyle, }; }; diff --git a/packages/devui-vue/devui/table/src/header/sort/sort.tsx b/packages/devui-vue/devui/table/src/header/sort/sort.tsx deleted file mode 100644 index 5ceadb53cd..0000000000 --- a/packages/devui-vue/devui/table/src/header/sort/sort.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { defineComponent, PropType } from 'vue'; -import { SortDirection } from '../../table.type'; -import './sort.scss'; - - -export const Sort = defineComponent({ - props: { - modelValue: { - type: String as PropType, - default: '' - }, - 'onUpdate:modelValue': { - type: Function as PropType<(v: SortDirection) => void> - } - }, - emits: ['update:modelValue'], - setup(props, ctx) { - const changeDirection = () => { - let direction = ''; - if (props.modelValue === 'ASC') { - direction = 'DESC'; - } else if (props.modelValue === 'DESC') { - direction = ''; - } else { - direction = 'ASC'; - } - ctx.emit('update:modelValue', direction); - } - - return () => ( - - - - - - - - - - - - - - - - - - - - ); - } -}) \ No newline at end of file diff --git a/packages/devui-vue/devui/table/src/store/index.ts b/packages/devui-vue/devui/table/src/store/index.ts index 9d96d00a86..a175f7d09f 100644 --- a/packages/devui-vue/devui/table/src/store/index.ts +++ b/packages/devui-vue/devui/table/src/store/index.ts @@ -1,6 +1,6 @@ import { watch, Ref, ref, computed } from 'vue'; -import { Column, CompareFn, FilterResults } from '../column/column.type'; -import { SortDirection } from '../table.type'; +import { Column, CompareFn, FilterResults } from '../components/column/column-types'; +import { SortDirection } from '../table-types'; export interface TableStore> { states: { _data: Ref; diff --git a/packages/devui-vue/devui/table/src/table-types.ts b/packages/devui-vue/devui/table/src/table-types.ts index c54e6b81e3..c17bb0ae35 100644 --- a/packages/devui-vue/devui/table/src/table-types.ts +++ b/packages/devui-vue/devui/table/src/table-types.ts @@ -1,14 +1,94 @@ -import type { PropType, ExtractPropTypes } from 'vue'; +import { PropType, ExtractPropTypes, ComponentInternalInstance, InjectionKey } from 'vue'; +import { TableStore } from './store'; -type TableData = Array<{ - [key: string]: any; -}>; +export type TableSize = 'sm' | 'md' | 'lg'; -export const tableProps = { +export const TableProps = { data: { - type: Array as PropType, - required: true, - } -} as const; + type: Array as PropType[]>, + default: [], + }, + striped: { + type: Boolean, + default: false, + }, + scrollable: { + type: Boolean, + default: false, + }, + maxWidth: { + type: String, + }, + maxHeight: { + type: String, + }, + tableWidth: { + type: String, + }, + tableHeight: { + type: String, + }, + size: { + type: String as PropType, + validator(value: string): boolean { + return value === 'sm' || value === 'md' || value === 'lg'; + }, + }, + rowHoveredHighlight: { + type: Boolean, + default: true, + }, + fixHeader: { + type: Boolean, + default: false, + }, + checkable: { + type: Boolean, + default: true, + }, + tableLayout: { + type: String as PropType<'fixed' | 'auto'>, + default: 'auto', + validator(v: string) { + return v === 'fixed' || v === 'auto'; + }, + }, + showLoading: { + type: Boolean, + default: false, + }, + headerBg: { + type: Boolean, + default: false, + }, +}; -export type TableProps = ExtractPropTypes; +export type TablePropsTypes = ExtractPropTypes; + +export interface Table> extends ComponentInternalInstance { + store: TableStore; + props: TablePropsTypes; +} + +// export interface TableCheckStatusArg { +// pageAllChecked?: boolean; // 全选 +// pageHalfChecked?: boolean; // 半选 +// } + +// export interface RowToggleStatusEventArg { +// rowItem: any; // 行数据 +// open: boolean; // 子表格是否展开 +// } + +export interface TableMethods> { + getCheckedRows(): T[]; + // setRowCheckStatus(arg: TableCheckStatusArg): void + // setTableCheckStatus(arg: RowToggleStatusEventArg): void + // setRowChildToggleStatus(): void + // setTableChildrenToggleStatus(): void + // cancelEditingStatus(): void +} + +export const TABLE_TOKEN: InjectionKey = Symbol(); + +export type SortDirection = 'ASC' | 'DESC' | ''; diff --git a/packages/devui-vue/devui/table/src/table.tsx b/packages/devui-vue/devui/table/src/table.tsx index 3cb5b8ae19..bb091d4fdc 100644 --- a/packages/devui-vue/devui/table/src/table.tsx +++ b/packages/devui-vue/devui/table/src/table.tsx @@ -1,16 +1,16 @@ import { provide, defineComponent, getCurrentInstance, computed, toRef } from 'vue'; -import { Table, TableProps, TablePropsTypes, TABLE_TOKEN } from './table.type'; -import { useTable } from './use-table'; +import { Table, TableProps, TablePropsTypes, TABLE_TOKEN } from './table-types'; +import { useTable } from './composable/use-table'; import { createStore } from './store'; -import FixHeader from './fix-header'; -import NormalHeader from './normal-header'; +import FixHeader from './components/fix-header'; +import NormalHeader from './components/normal-header'; import { Loading } from '../../loading'; import './table.scss'; export default defineComponent({ name: 'DTable', directives: { - dLoading: Loading + dLoading: Loading, }, props: TableProps, setup(props: TablePropsTypes, ctx) { @@ -29,7 +29,7 @@ export default defineComponent({ return () => (
    - {ctx.slots.default()} + {ctx.slots.default?.()} {props.fixHeader ? ( ) : ( diff --git a/packages/devui-vue/devui/table/src/table.type.ts b/packages/devui-vue/devui/table/src/table.type.ts deleted file mode 100644 index e02ae30b9b..0000000000 --- a/packages/devui-vue/devui/table/src/table.type.ts +++ /dev/null @@ -1,94 +0,0 @@ -import { PropType, ExtractPropTypes, ComponentInternalInstance, InjectionKey } from 'vue'; -import { TableStore } from './store'; - -export type TableSize = 'sm' | 'md' | 'lg'; - -export const TableProps = { - data: { - type: Array as PropType[]>, - default: [], - }, - striped: { - type: Boolean, - default: false, - }, - scrollable: { - type: Boolean, - default: false - }, - maxWidth: { - type: String, - }, - maxHeight: { - type: String, - }, - tableWidth: { - type: String, - }, - tableHeight: { - type: String, - }, - size: { - type: String as PropType, - validator(value: string): boolean { - return value === 'sm' || value === 'md' || value === 'lg'; - } - }, - rowHoveredHighlight: { - type: Boolean, - default: true - }, - fixHeader: { - type: Boolean, - default: false - }, - checkable: { - type: Boolean, - default: true - }, - tableLayout: { - type: String as PropType<'fixed' | 'auto'>, - default: 'auto', - validator(v: string) { - return v === 'fixed' || v === 'auto'; - } - }, - showLoading: { - type: Boolean, - default: false - }, - headerBg: { - type: Boolean, - default: false - } -}; - -export type TablePropsTypes = ExtractPropTypes; - -export interface Table> extends ComponentInternalInstance { - store: TableStore; - props: TablePropsTypes; -} - -// export interface TableCheckStatusArg { -// pageAllChecked?: boolean; // 全选 -// pageHalfChecked?: boolean; // 半选 -// } - -// export interface RowToggleStatusEventArg { -// rowItem: any; // 行数据 -// open: boolean; // 子表格是否展开 -// } - -export interface TableMethods> { - getCheckedRows(): T[]; - // setRowCheckStatus(arg: TableCheckStatusArg): void - // setTableCheckStatus(arg: RowToggleStatusEventArg): void - // setRowChildToggleStatus(): void - // setTableChildrenToggleStatus(): void - // cancelEditingStatus(): void -} - -export const TABLE_TOKEN: InjectionKey
    = Symbol(); - -export type SortDirection = 'ASC' | 'DESC' | ''; diff --git a/packages/devui-vue/docs/components/table/index.md b/packages/devui-vue/docs/components/table/index.md index f255895f1b..73e23e56e6 100644 --- a/packages/devui-vue/docs/components/table/index.md +++ b/packages/devui-vue/docs/components/table/index.md @@ -304,35 +304,35 @@ export default defineComponent({ ### d-table 参数 -| 参数 | 类型 | 默认值 | 说明 | -| --------------------- | ------------------- | --------- | ------------------------------- | -| data | `Array` | `[]` | 显示的数据 | -| striped | `Boolean` | `false` | 是否显示斑马纹间隔 | -| max-width | `String` | ` ` | 表格最大宽度 | -| max-height | `Boolean` | ` ` | 表格最大高度 | -| table-width | `String` | ` ` | 表格宽度 | -| table-height | `String` | ` ` | 表格高度 | -| row-hovered-highlight | `Boolean` | `true` | 鼠标在该行上时，高亮该行 | -| fix-header | `Boolean` | `false` | 固定头部 | -| checkable | `Boolean` | `false` | 在每行的第一列展示一个 checkbox | -| show-loading | `Boolean` | `false` | 显示加载动画 | -| header-bg | `Boolean` | `false` | 头部背景 | -| table-layout | `'fixed' \| 'auto'` | `'fixed'` | 表格布局，可选值为'auto' | +| 参数 | 类型 | 默认值 | 说明 | +| :-------------------- | :------------------ | :------ | :------------------------------ | +| data | `Array` | [] | 显示的数据 | +| striped | `Boolean` | false | 是否显示斑马纹间隔 | +| max-width | `String` | -- | 表格最大宽度 | +| max-height | `Boolean` | -- | 表格最大高度 | +| table-width | `String` | -- | 表格宽度 | +| table-height | `String` | -- | 表格高度 | +| row-hovered-highlight | `Boolean` | true | 鼠标在该行上时，高亮该行 | +| fix-header | `Boolean` | false | 固定头部 | +| checkable | `Boolean` | false | 在每行的第一列展示一个 checkbox | +| show-loading | `Boolean` | false | 显示加载动画 | +| header-bg | `Boolean` | false | 头部背景 | +| table-layout | `'fixed' \| 'auto'` | 'fixed' | 表格布局，可选值为'auto' | ### d-column 参数 -| 参数 | 类型 | 默认值 | 说明 | -| --------- | ---------------------------------------- | -------------------------------------- | ------------------------------ | -| header | `String` | `-` | 对应列的标题 | -| field | `String` | `-` | 对应列内容的字段名 | -| width | `String \| Number` | `-` | 对应列的宽度，单位`px` | -| min-width | `String \| Number` | `-` | 对应列的最小宽度，单位`px` | -| sortable | `Boolean` | `false` | 对行数据按照该列的顺序进行排序 | -| formatter | `Function` | ` ` | 对应列的所有单元格的格式 | -| compareFn | `(field: string, a: T, b: T) => boolean` | `(field, a, b) => a[field] > b[field]` | 用于排序的比较函数 | +| 参数 | 类型 | 默认值 | 说明 | +| :-------- | :--------------------------------------- | :----------------------------------- | :----------------------------- | +| header | `String` | -- | 对应列的标题 | +| field | `String` | -- | 对应列内容的字段名 | +| width | `String \| Number` | -- | 对应列的宽度，单位`px` | +| min-width | `String \| Number` | -- | 对应列的最小宽度，单位`px` | +| sortable | `Boolean` | false | 对行数据按照该列的顺序进行排序 | +| formatter | `Function` | -- | 对应列的所有单元格的格式 | +| compareFn | `(field: string, a: T, b: T) => boolean` | (field, a, b) => a[field] > b[field] | 用于排序的比较函数 | ### d-column 插槽 | 名称 | 说明 | -| ------- | ---------------------- | +| :------ | :--------------------- | | default | 默认插槽，自定义列内容 |