diff --git a/packages/pro/config/src/defaultConfig.ts b/packages/pro/config/src/defaultConfig.ts index 4743e1fa6..3508f28e2 100644 --- a/packages/pro/config/src/defaultConfig.ts +++ b/packages/pro/config/src/defaultConfig.ts @@ -30,6 +30,8 @@ export const defaultConfig: ProGlobalConfig = { }, table: { layoutTool: { + changeSize: false, + resetable: false, searchable: false, }, }, diff --git a/packages/pro/config/src/types.ts b/packages/pro/config/src/types.ts index fe95c909b..694a34d96 100644 --- a/packages/pro/config/src/types.ts +++ b/packages/pro/config/src/types.ts @@ -73,6 +73,8 @@ export interface ProTableConfig { // @deprecated please use `columnIndexable` of TableConfig instead' columnIndexable?: Omit layoutTool: { + changeSize: boolean + resetable: boolean searchable: boolean } } diff --git a/packages/pro/table/docs/Api.zh.md b/packages/pro/table/docs/Api.zh.md index aa9ea8cfc..9773b8265 100644 --- a/packages/pro/table/docs/Api.zh.md +++ b/packages/pro/table/docs/Api.zh.md @@ -75,5 +75,10 @@ export type ProTableColumn = | 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 | | --- | --- | --- | --- | --- | --- | | `v-model:searchValue` | 搜索的文本 | `string` | - | - | - | -| `placeholder` | 搜索框的占位符 | `string` | ✅ | - | 通过 locale 全局配置 | -| `searchable` | 是否开启搜索功能 | `boolean` | ✅ | - | - | +| `v-model:visible` | 浮层的显示隐藏 | `boolean` | - | - | - | +| `changeSize` | 是否支持修改表格的尺寸 | `boolean` | `true` | ✅ |- | +| `className` | 自定义浮层的 `class` | `string` | - | - |- | +| `placeholder` | 搜索框的占位符 | `string` | `搜索关键字` | ✅ | 通过 locale 全局配置 | +| `resetable` | 是否支持重置布局设置 | `boolean` | `true` | ✅ |- | +| `searchable` | 是否开启搜索功能 | `boolean` | `false` | ✅ | - | +| `onReset` | 点击重置按钮后的回调 | `(evt: MouseEvent) => boolean \| void` | - | - | 返回 `false` 会阻止组件内部的重置操作 | diff --git a/packages/pro/table/src/ProTable.tsx b/packages/pro/table/src/ProTable.tsx index 5c5c95dbb..e452482cb 100644 --- a/packages/pro/table/src/ProTable.tsx +++ b/packages/pro/table/src/ProTable.tsx @@ -9,7 +9,7 @@ import { computed, defineComponent, provide, ref, watch } from 'vue' -import { isString } from 'lodash-es' +import { isObject, isString } from 'lodash-es' import { type VirtualScrollToOptions } from '@idux/cdk/scroll' import { useState } from '@idux/cdk/utils' @@ -44,7 +44,6 @@ export default defineComponent({ provide(proTableToken, { props, - slots, config, locale, mergedPrefixCls, @@ -59,10 +58,12 @@ export default defineComponent({ }) const renderLayoutTool = () => { - if (!props.layoutTool) { + const { layoutTool } = props + if (!layoutTool) { return null } - return + const toolProps = isObject(layoutTool) ? layoutTool : undefined + return } const renderToolbar = () => { diff --git a/packages/pro/table/src/ProTableLayoutTool.tsx b/packages/pro/table/src/ProTableLayoutTool.tsx index 6cca4e3ac..04d9f88de 100644 --- a/packages/pro/table/src/ProTableLayoutTool.tsx +++ b/packages/pro/table/src/ProTableLayoutTool.tsx @@ -5,7 +5,7 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import { defineComponent, inject, normalizeClass } from 'vue' +import { computed, defineComponent, inject, normalizeClass } from 'vue' import { IxIcon } from '@idux/components/icon' import { IxPopover } from '@idux/components/popover' @@ -27,7 +27,11 @@ export default defineComponent({ name: 'IxProTableLayoutTool', props: proTableLayoutToolProps, setup(props, { slots }) { - const { locale, mergedPrefixCls, mergedSize, setMergedSize } = inject(proTableToken)! + const { config, locale, mergedPrefixCls, mergedSize, setMergedSize } = inject(proTableToken)! + + const mergedChangeSize = computed(() => props.changeSize ?? config.layoutTool.changeSize) + const mergedResetable = computed(() => props.resetable ?? config.layoutTool.resetable) + const mergedSearchable = computed(() => props.searchable ?? config.layoutTool.searchable) return () => { const prefixCls = `${mergedPrefixCls.value}-layout-tool` @@ -49,14 +53,32 @@ export default defineComponent({ /> ) } - const suffixNode = ( + const suffixNode = mergedChangeSize.value ? ( {renderIcon('sm')} {renderIcon('md')} {renderIcon('lg')} - ) - const popoverHeader = { title: layoutLocale.title, suffix: suffixNode } + ) : undefined + + const contentProps = { + placeholder: props.placeholder, + resetable: mergedResetable.value, + searchable: mergedSearchable.value, + searchValue: props.searchValue, + 'onUpdate:searchValue': props['onUpdate:searchValue'], + onReset: props.onReset, + } + const popoverProps = { + class: normalizeClass([prefixCls, props.className]), + header: { title: layoutLocale.title, suffix: suffixNode }, + offset: defaultOffset, + placement: 'bottomEnd', + showArrow: false, + trigger: 'click', + visible: props.visible, + 'onUpdate:visible': props['onUpdate:visible'], + } as const return ( )), - content: () => , + content: () => , }} - class={prefixCls} - header={popoverHeader} - offset={defaultOffset} - placement="bottomEnd" - showArrow={false} - trigger="click" - > + {...popoverProps} + /> ) } }, diff --git a/packages/pro/table/src/contents/LayoutToolContent.tsx b/packages/pro/table/src/contents/LayoutToolContent.tsx index 23395828d..3124c2896 100644 --- a/packages/pro/table/src/contents/LayoutToolContent.tsx +++ b/packages/pro/table/src/contents/LayoutToolContent.tsx @@ -7,30 +7,20 @@ import { computed, defineComponent, inject, normalizeClass } from 'vue' -import { isObject } from 'lodash-es' - -import { useControlledProp } from '@idux/cdk/utils' +import { callEmit, useControlledProp } from '@idux/cdk/utils' import { ɵInput } from '@idux/components/_private/input' import { IxButton } from '@idux/components/button' import { IxCheckbox } from '@idux/components/checkbox' import LayoutToolTree from './LayoutToolTree' import { proTableToken } from '../token' -import { type ProTableColumn, proTableLayoutToolProps } from '../types' +import { type ProTableColumn, proTableLayoutToolContentProps } from '../types' export default defineComponent({ - props: proTableLayoutToolProps, + props: proTableLayoutToolContentProps, setup(props) { - const { - props: tableProps, - config, - locale, - mergedPrefixCls, - mergedColumns, - setMergedColumns, - mergedColumnMap, - resetColumns, - } = inject(proTableToken)! + const { locale, mergedPrefixCls, mergedColumns, setMergedColumns, mergedColumnMap, resetColumns } = + inject(proTableToken)! // 判断是否有子节点,处理tree展开节点样式 const hasChildren = computed(() => mergedColumns.value.length !== mergedColumnMap.value.size) @@ -38,11 +28,6 @@ export default defineComponent({ // 只需要判断第一层的即可 const hiddenColumns = computed(() => mergedColumns.value.filter(column => column.visible === false)) - const mergedSearchable = computed( - () => - props.searchable ?? - (isObject(tableProps.layoutTool) ? tableProps.layoutTool.searchable : config.layoutTool.searchable), - ) const [searchValue, setSearchValue] = useControlledProp(props, 'searchValue') const handleInput = (evt: Event) => { @@ -50,6 +35,11 @@ export default defineComponent({ setSearchValue(inputValue) } + const handleReset = (evt: MouseEvent) => { + const result = callEmit(props.onReset, evt) + result !== false && resetColumns() + } + const handleCheckAll = (checked: boolean) => { loopColumns(mergedColumns.value, column => { // undefined or true @@ -101,7 +91,7 @@ export default defineComponent({ const _searchValue = searchValue.value return (
- {mergedSearchable.value && ( + {props.searchable && (
<ɵInput placeholder={props.placeholder ?? placeholder} @@ -114,9 +104,11 @@ export default defineComponent({ )}
- - {reset} - + {props.resetable && ( + + {reset} + + )}
{hasStartFixed && ( diff --git a/packages/pro/table/src/token.ts b/packages/pro/table/src/token.ts index a45df44a1..ca31b7792 100644 --- a/packages/pro/table/src/token.ts +++ b/packages/pro/table/src/token.ts @@ -9,11 +9,10 @@ import type { ColumnsContext } from './composables/useColumns' import type { ProTableProps } from './types' import type { ProTableConfig } from '@idux/pro/config' import type { ProLocale } from '@idux/pro/locales' -import type { ComputedRef, InjectionKey, Slots } from 'vue' +import type { ComputedRef, InjectionKey } from 'vue' export interface ProTableContext extends ColumnsContext { props: ProTableProps - slots: Slots config: ProTableConfig locale: ProLocale mergedPrefixCls: ComputedRef diff --git a/packages/pro/table/src/types.ts b/packages/pro/table/src/types.ts index 1eed0f1ee..cfd91d0d5 100644 --- a/packages/pro/table/src/types.ts +++ b/packages/pro/table/src/types.ts @@ -42,11 +42,17 @@ export type ProTableComponent = DefineComponent< export type ProTableInstance = InstanceType> export const proTableLayoutToolProps = { + changeSize: { type: Boolean, default: undefined }, + className: { type: String, default: undefined }, placeholder: { type: String, default: undefined }, + resetable: { type: Boolean, default: undefined }, searchable: { type: Boolean, default: undefined }, searchValue: { type: String, default: undefined }, + visible: { type: Boolean, default: undefined }, 'onUpdate:searchValue': [Function, Array] as PropType void>>, + 'onUpdate:visible': [Function, Array] as PropType void>>, + onReset: [Function, Array] as PropType boolean | void>>, } as const export type ProTableLayoutToolProps = ExtractInnerPropTypes @@ -101,3 +107,14 @@ export type ProTableColumnResizable = { minWidth?: number | string resizable?: boolean } + +// private +export const proTableLayoutToolContentProps = { + placeholder: { type: String, default: undefined }, + resetable: { type: Boolean, required: true }, + searchable: { type: Boolean, required: true }, + searchValue: { type: String, default: undefined }, + + 'onUpdate:searchValue': [Function, Array] as PropType void>>, + onReset: [Function, Array] as PropType boolean | void>>, +} as const