Merge 328f953 into 42b408b

packages/pro/config/src/defaultConfig.ts

@@ -30,6 +30,8 @@ export const defaultConfig: ProGlobalConfig = {
   },
   table: {
     layoutTool: {
+      changeSize: false,
+      resetable: false,
       searchable: false,
     },
   },

packages/pro/config/src/types.ts

@@ -73,6 +73,8 @@ export interface ProTableConfig {
   // @deprecated please use `columnIndexable` of TableConfig instead'
   columnIndexable?: Omit<ProTableColumnIndexable, 'type'>
   layoutTool: {
+    changeSize: boolean
+    resetable: boolean
     searchable: boolean
   }
 }

packages/pro/table/docs/Api.zh.md

@@ -75,5 +75,10 @@ export type ProTableColumn<T = any, V = any, CT = 'input'> =
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `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` 会阻止组件内部的重置操作 |

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 <ProTableLayoutTool />
+      const toolProps = isObject(layoutTool) ? layoutTool : undefined
+      return <ProTableLayoutTool {...toolProps} />
     }
 
     const renderToolbar = () => {

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 ? (
         <IxSpace>
           {renderIcon('sm')}
           {renderIcon('md')}
           {renderIcon('lg')}
         </IxSpace>
-      )
-      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 (
         <IxPopover
@@ -68,15 +90,10 @@ export default defineComponent({
                   <IxIcon name="ellipsis" />
                 </span>
               )),
-            content: () => <LayoutToolContent {...props} />,
+            content: () => <LayoutToolContent {...contentProps} />,
           }}
-          class={prefixCls}
-          header={popoverHeader}
-          offset={defaultOffset}
-          placement="bottomEnd"
-          showArrow={false}
-          trigger="click"
-        ></IxPopover>
+          {...popoverProps}
+        />
       )
     }
   },

packages/pro/table/src/contents/LayoutToolContent.tsx

@@ -7,49 +7,39 @@
 
 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)
 
     // 只需要判断第一层的即可
     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) => {
       const inputValue = (evt.target as HTMLInputElement).value
       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 (
         <div class={classes}>
-          {mergedSearchable.value && (
+          {props.searchable && (
             <div class={`${prefixCls}-search-wrapper`}>
               <ɵInput
                 placeholder={props.placeholder ?? placeholder}
@@ -114,9 +104,11 @@ export default defineComponent({
           )}
           <div class={`${prefixCls}-select-wrapper`}>
             <IxCheckbox checked={checked} indeterminate={indeterminate} label={all} onChange={handleCheckAll} />
-            <IxButton size="sm" mode="link" onClick={resetColumns}>
-              {reset}
-            </IxButton>
+            {props.resetable && (
+              <IxButton size="sm" mode="link" onClick={handleReset}>
+                {reset}
+              </IxButton>
+            )}
           </div>
           <div class={`${prefixCls}-tree-wrapper`}>
             {hasStartFixed && (

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<string>

packages/pro/table/src/types.ts

@@ -42,11 +42,17 @@ export type ProTableComponent = DefineComponent<
 export type ProTableInstance = InstanceType<DefineComponent<ProTableProps, ProTableBindings>>
 
 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<MaybeArray<(searchValue: string) => void>>,
+  'onUpdate:visible': [Function, Array] as PropType<MaybeArray<(visible: boolean) => void>>,
+  onReset: [Function, Array] as PropType<MaybeArray<(evt: MouseEvent) => boolean | void>>,
 } as const
 
 export type ProTableLayoutToolProps = ExtractInnerPropTypes<typeof proTableLayoutToolProps>
@@ -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<MaybeArray<(searchValue: string) => void>>,
+  onReset: [Function, Array] as PropType<MaybeArray<(evt: MouseEvent) => boolean | void>>,
+} as const