vxe-table 4.23.8 → 4.23.9

package/packages/table/module/filter/panel.ts

@@ -1,304 +1,368 @@
-import { h, ref, computed, inject, Teleport, PropType } from 'vue'
-import { defineVxeComponent } from '../../../ui/src/comp'
-import { VxeUI } from '@vxe-ui/core'
-import { formatText, isEnableConf } from '../../../ui/src/utils'
-import { getPropClass } from '../../../ui/src/dom'
-import { getSlotVNs } from '../../../ui/src/vn'
-import { createComponentLog } from '../../../ui/src/log'
-import XEUtils from 'xe-utils'
-
-import type { VxeGlobalRendererOptions } from 'vxe-pc-ui'
-import type { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods, VxeColumnPropTypes, VxeTableDefines } from '../../../../types'
-
-const { warnLog } = createComponentLog('table')
-
-const { getI18n, getIcon, renderer, renderEmptyElement } = VxeUI
-
-export default defineVxeComponent({
-  name: 'VxeTableFilterPanel',
-  props: {
-    filterStore: {
-      type: Object as PropType<VxeTableDefines.FilterStoreObj>,
-      default: () => ({} as VxeTableDefines.FilterStoreObj)
-    }
-  },
-  setup (props, context) {
-    const xID = XEUtils.uniqueId()
-
-    const VxeUIScrollbarComponent = VxeUI.getComponent('VxeScrollbar')
-
-    const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
-    const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable
-    const { computeFilterOpts, computeRendererOpts } = getComputeMaps()
-
-    const refElem = ref<HTMLDivElement>()
-
-    const refMaps = {
-      refElem
-    }
-
-    const $xeFilterPanel: any = {
-      xID,
-      props,
-      context,
-      getRefMaps: () => refMaps
-    }
-
-    const computeHasCheckOption = computed(() => {
-      const { filterStore } = props
-      const { column } = filterStore
-      return column && column.filters && column.filters.some((option) => option.checked)
-    })
-
-    // 全部筛选事件
-    const filterCheckAllEvent = (evnt: Event, value: any) => {
-      const { filterStore } = props
-      const { column } = filterStore
-      if (column && column.filters) {
-        column.filters.forEach((option: any) => {
-          option._checked = value
-          option.checked = value
-        })
-      }
-      filterStore.isAllSelected = value
-      filterStore.isIndeterminate = false
-    }
-
-    /*************************
-     * Publish methods
-     *************************/
-    // 确认筛选
-    const confirmFilter = (evnt: Event) => {
-      const { filterStore } = props
-      if (!evnt) {
-        warnLog('vxe.error.delFunc', ['confirmFilter', 'saveFilterPanelByEvent'])
-      }
-      $xeTable.handleFilterConfirmFilter(evnt || new Event('click'), filterStore.column || null)
-    }
-
-    // （单选）筛选发生改变
-    const changeRadioOption = (evnt: Event, checked: boolean, item: any) => {
-      $xeTable.handleFilterChangeRadioOption(evnt, checked, item)
-    }
-
-    /**
-     * 重置筛选
-     * 当筛选面板中的重置按钮被按下时触发
-     * @param {Event} evnt 事件
-     */
-    const resetFilter = (evnt: Event) => {
-      const { filterStore } = props
-      $xeTable.handleFilterResetFilter(evnt, filterStore.column || null)
-    }
-
-    // （多选）筛选发生改变
-    const changeMultipleOption = (evnt: Event, checked: boolean, item: any) => {
-      $xeTable.handleFilterChangeMultipleOption(evnt, checked, item)
-    }
-
-    // 筛选发生改变
-    const changeOption = (evnt: Event, checked: boolean, item: any) => {
-      $xeTable.handleFilterChangeOption(evnt, checked, item)
-    }
-
-    const changeAllOption = (evnt: Event, checked: boolean) => {
-      const { filterStore } = props
-      const { column } = filterStore
-      if (column && column.filterMultiple) {
-        filterCheckAllEvent(evnt, checked)
-      } else {
-        resetFilter(evnt)
-      }
-    }
-    /*************************
-     * Publish methods
-     *************************/
-
-    const filterPanelMethods = {
-      changeRadioOption,
-      changeMultipleOption,
-      changeAllOption,
-      changeOption,
-      confirmFilter,
-      resetFilter
-    }
-    Object.assign($xeFilterPanel, filterPanelMethods)
-
-    const renderOptions = (filterRender: VxeColumnPropTypes.FilterRender | null, compConf: VxeGlobalRendererOptions | null) => {
-      const { filterStore } = props
-      const { column } = filterStore
-      if (!column) {
-        return []
-      }
-      const filterOpts = computeFilterOpts.value
-      const { useScrollbar } = filterOpts
-      const { filterMultiple, filters, slots } = column
-      const filterOptions = (filters || []) as VxeTableDefines.FilterOption[]
-      const filterSlot = slots ? slots.filter : null
-      const params = Object.assign({}, tableInternalData._currFilterParams, { option: filterOptions[0], $panel: $xeFilterPanel, $table: $xeTable })
-      const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null
-      if (filterSlot) {
-        return [
-          h('div', {
-            class: 'vxe-table--filter-template'
-          }, $xeTable.callSlot(filterSlot, params))
-        ]
-      } else if (filterRender && rtFilter) {
-        return [
-          h('div', {
-            class: 'vxe-table--filter-template'
-          }, getSlotVNs(rtFilter(filterRender, params)))
-        ]
-      }
-      const isAllChecked = filterMultiple ? filterStore.isAllSelected : !filterOptions.some((item) => item._checked)
-      const isAllIndeterminate = filterMultiple && filterStore.isIndeterminate
-
-      const optVNs = filterOptions.map((item: any) => {
-        const isChecked = item._checked
-        const isIndeterminate = false
-        return h('div', {
-          class: ['vxe-table--filter-option', {
-            'is--checked': item._checked
-          }],
-          title: item.label,
-          onClick: (evnt: MouseEvent) => {
-            changeOption(evnt, !item._checked, item)
-          }
-        }, (filterMultiple
-          ? [
-              h('span', {
-                class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-              })
-            ]
-          : []).concat([
-          h('span', {
-            class: 'vxe-checkbox--label'
-          }, formatText(item.label, 1))
-        ]))
-      })
-
-      return [
-        h('div', {
-          class: 'vxe-table--filter-header'
-        }, [
-          h('div', {
-            class: ['vxe-table--filter-option', {
-              'is--checked': isAllChecked,
-              'is--indeterminate': isAllIndeterminate
-            }],
-            title: getI18n(filterMultiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter'),
-            onClick: (evnt: MouseEvent) => {
-              changeAllOption(evnt, !filterStore.isAllSelected)
-            }
-          }, (filterMultiple
-            ? [
-                h('span', {
-                  class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                })
-              ]
-            : []).concat([
-            h('span', {
-              class: 'vxe-checkbox--label'
-            }, getI18n('vxe.table.allFilter'))
-          ]))
-        ]),
-        useScrollbar
-          ? h(VxeUIScrollbarComponent, {
-            class: 'vxe-table--scrollbar-filter-body',
-            viewClassName: 'vxe-table--scrollbar-filter-body-view'
-          }, {
-            default: () => optVNs
-          })
-          : h('div', {
-            class: 'vxe-table--filter-body'
-          }, optVNs)
-      ]
-    }
-
-    const renderFooters = () => {
-      const { filterStore } = props
-      const { column } = filterStore
-      if (!column) {
-        return []
-      }
-      const filterOpts = computeFilterOpts.value
-      const rendererOpts = computeRendererOpts.value
-      const hasCheckOption = computeHasCheckOption.value
-      const { filterRender, filterMultiple } = column
-      const { confirmButtonText, resetButtonText, showFooter } = filterOpts
-      const compConf = filterRender && isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null
-      const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate
-      let showFlFoot = !!filterMultiple
-      if (XEUtils.isBoolean(showFooter)) {
-        showFlFoot = showFooter
-      } else if (compConf) {
-        showFlFoot = !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false)
-      }
-      return showFlFoot
-        ? [
-            h('div', {
-              class: 'vxe-table--filter-footer'
-            }, [
-              h('button', {
-                class: {
-                  'is--disabled': isDisabled
-                },
-                disabled: isDisabled,
-                onClick: confirmFilter
-              }, confirmButtonText || getI18n('vxe.table.confirmFilter')),
-              h('button', {
-                onClick: resetFilter
-              }, resetButtonText || getI18n('vxe.table.resetFilter'))
-            ])
-          ]
-        : []
-    }
-
-    const renderVN = () => {
-      const { filterStore } = props
-      const { initStore } = tableReactData
-      const { visible, column } = filterStore
-      if (!column) {
-        return renderEmptyElement($xeFilterPanel)
-      }
-      const rendererOpts = computeRendererOpts.value
-      const filterRender = column ? column.filterRender : null
-      const compConf = filterRender && isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null
-      const filterClassName = compConf ? (compConf.tableFilterClassName || compConf.filterClassName) : ''
-      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable })
-      const tableProps = $xeTable.props
-      const { computeSize } = $xeTable.getComputeMaps()
-      const vSize = computeSize.value
-      const filterOpts = computeFilterOpts.value
-      const { transfer, destroyOnClose, className } = filterOpts
-      return h(Teleport, {
-        to: 'body',
-        disabled: !transfer
-      }, [
-        h('div', {
-          ref: refElem,
-          class: [
-            'vxe-table--filter-wrapper',
-            'filter--prevent-default',
-            className,
-            getPropClass(filterClassName, params),
-            {
-              [`size--${vSize}`]: vSize,
-              'is--animat': tableProps.animat,
-              'is--multiple': column.filterMultiple,
-              'is--active': visible
-            }
-          ],
-          style: filterStore.style
-        }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : [])
-      ])
-    }
-
-    $xeFilterPanel.renderVN = renderVN
-
-    return $xeFilterPanel
-  },
-  render () {
-    return this.renderVN()
-  }
-})
+import { h, ref, computed, inject, Teleport, PropType } from 'vue'
+import { defineVxeComponent } from '../../../ui/src/comp'
+import { VxeUI } from '@vxe-ui/core'
+import { formatText, isEnableConf } from '../../../ui/src/utils'
+import { getPropClass } from '../../../ui/src/dom'
+import { getSlotVNs } from '../../../ui/src/vn'
+import { createComponentLog } from '../../../ui/src/log'
+import XEUtils from 'xe-utils'
+
+import type { VxeGlobalRendererOptions } from 'vxe-pc-ui'
+import type { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods, VxeColumnPropTypes, VxeTableDefines } from '../../../../types'
+
+const { warnLog } = createComponentLog('table')
+
+const { getI18n, getIcon, renderer, renderEmptyElement } = VxeUI
+
+export default defineVxeComponent({
+  name: 'VxeTableFilterPanel',
+  props: {
+    filterStore: {
+      type: Object as PropType<VxeTableDefines.FilterStoreObj>,
+      default: () => ({}) as VxeTableDefines.FilterStoreObj
+    }
+  },
+  setup(props, context) {
+    const xID = XEUtils.uniqueId()
+
+    const VxeUIScrollbarComponent = VxeUI.getComponent('VxeScrollbar')
+
+    const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
+    const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable
+    const { computeFilterOpts, computeRendererOpts } = getComputeMaps()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const refMaps = {
+      refElem
+    }
+
+    const $xeFilterPanel: any = {
+      xID,
+      props,
+      context,
+      getRefMaps: () => refMaps
+    }
+
+    const computeHasCheckOption = computed(() => {
+      const { filterStore } = props
+      const { column } = filterStore
+      return column && column.filters && column.filters.some((option) => option.checked)
+    })
+
+    // 全部筛选事件
+    const filterCheckAllEvent = (evnt: Event, value: any) => {
+      const { filterStore } = props
+      const { column } = filterStore
+      if (column && column.filters) {
+        column.filters.forEach((option: any) => {
+          option._checked = value
+          option.checked = value
+        })
+      }
+      filterStore.isAllSelected = value
+      filterStore.isIndeterminate = false
+    }
+
+    /*************************
+     * Publish methods
+     *************************/
+    // 确认筛选
+    const confirmFilter = (evnt: Event) => {
+      const { filterStore } = props
+      if (!evnt) {
+        warnLog('vxe.error.delFunc', ['confirmFilter', 'saveFilterPanelByEvent'])
+      }
+      $xeTable.handleFilterConfirmFilter(evnt || new Event('click'), filterStore.column || null)
+    }
+
+    // （单选）筛选发生改变
+    const changeRadioOption = (evnt: Event, checked: boolean, item: any) => {
+      $xeTable.handleFilterChangeRadioOption(evnt, checked, item)
+    }
+
+    /**
+     * 重置筛选
+     * 当筛选面板中的重置按钮被按下时触发
+     * @param {Event} evnt 事件
+     */
+    const resetFilter = (evnt: Event) => {
+      const { filterStore } = props
+      $xeTable.handleFilterResetFilter(evnt, filterStore.column || null)
+    }
+
+    // （多选）筛选发生改变
+    const changeMultipleOption = (evnt: Event, checked: boolean, item: any) => {
+      $xeTable.handleFilterChangeMultipleOption(evnt, checked, item)
+    }
+
+    // 筛选发生改变
+    const changeOption = (evnt: Event, checked: boolean, item: any) => {
+      $xeTable.handleFilterChangeOption(evnt, checked, item)
+    }
+
+    const changeAllOption = (evnt: Event, checked: boolean) => {
+      const { filterStore } = props
+      const { column } = filterStore
+      if (column && column.filterMultiple) {
+        filterCheckAllEvent(evnt, checked)
+      } else {
+        resetFilter(evnt)
+      }
+    }
+    /*************************
+     * Publish methods
+     *************************/
+
+    const filterPanelMethods = {
+      changeRadioOption,
+      changeMultipleOption,
+      changeAllOption,
+      changeOption,
+      confirmFilter,
+      resetFilter
+    }
+    Object.assign($xeFilterPanel, filterPanelMethods)
+
+    const renderOptions = (filterRender: VxeColumnPropTypes.FilterRender | null, compConf: VxeGlobalRendererOptions | null) => {
+      const { filterStore } = props
+      const { column } = filterStore
+      if (!column) {
+        return []
+      }
+      const filterOpts = computeFilterOpts.value
+      const { useScrollbar } = filterOpts
+      const { filterMultiple, filters, slots } = column
+      const filterOptions = (filters || []) as VxeTableDefines.FilterOption[]
+      const filterSlot = slots ? slots.filter : null
+      const params = Object.assign({}, tableInternalData._currFilterParams, { option: filterOptions[0], $panel: $xeFilterPanel, $table: $xeTable })
+      const rtFilter = compConf ? compConf.renderTableFilter || compConf.renderFilter : null
+      if (filterSlot) {
+        return [
+          h(
+            'div',
+            {
+              class: 'vxe-table--filter-template'
+            },
+            $xeTable.callSlot(filterSlot, params)
+          )
+        ]
+      } else if (filterRender && rtFilter) {
+        return [
+          h(
+            'div',
+            {
+              class: 'vxe-table--filter-template'
+            },
+            getSlotVNs(rtFilter(filterRender, params))
+          )
+        ]
+      }
+      const isAllChecked = filterMultiple ? filterStore.isAllSelected : !filterOptions.some((item) => item._checked)
+      const isAllIndeterminate = filterMultiple && filterStore.isIndeterminate
+
+      const optVNs = filterOptions.map((item: any) => {
+        const isChecked = item._checked
+        const isIndeterminate = false
+        return h(
+          'div',
+          {
+            class: [
+              'vxe-table--filter-option',
+              {
+                'is--checked': item._checked
+              }
+            ],
+            title: item.label,
+            onClick: (evnt: MouseEvent) => {
+              changeOption(evnt, !item._checked, item)
+            }
+          },
+          (filterMultiple
+            ? [
+                h('span', {
+                  class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+                })
+              ]
+            : []
+          ).concat([
+            h(
+              'span',
+              {
+                class: 'vxe-checkbox--label'
+              },
+              formatText(item.label, 1)
+            )
+          ])
+        )
+      })
+
+      return [
+        h(
+          'div',
+          {
+            class: 'vxe-table--filter-header'
+          },
+          [
+            h(
+              'div',
+              {
+                class: [
+                  'vxe-table--filter-option',
+                  {
+                    'is--checked': isAllChecked,
+                    'is--indeterminate': isAllIndeterminate
+                  }
+                ],
+                title: getI18n(filterMultiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter'),
+                onClick: (evnt: MouseEvent) => {
+                  changeAllOption(evnt, !filterStore.isAllSelected)
+                }
+              },
+              (filterMultiple
+                ? [
+                    h('span', {
+                      class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+                    })
+                  ]
+                : []
+              ).concat([
+                h(
+                  'span',
+                  {
+                    class: 'vxe-checkbox--label'
+                  },
+                  getI18n('vxe.table.allFilter')
+                )
+              ])
+            )
+          ]
+        ),
+        useScrollbar
+          ? h(
+            VxeUIScrollbarComponent,
+            {
+              class: 'vxe-table--scrollbar-filter-body',
+              viewClassName: 'vxe-table--scrollbar-filter-body-view'
+            },
+            {
+              default: () => optVNs
+            }
+          )
+          : h(
+            'div',
+            {
+              class: 'vxe-table--filter-body'
+            },
+            optVNs
+          )
+      ]
+    }
+
+    const renderFooters = () => {
+      const { filterStore } = props
+      const { column } = filterStore
+      if (!column) {
+        return []
+      }
+      const filterOpts = computeFilterOpts.value
+      const rendererOpts = computeRendererOpts.value
+      const hasCheckOption = computeHasCheckOption.value
+      const { filterRender, filterMultiple } = column
+      const { confirmButtonText, resetButtonText, showFooter } = filterOpts
+      const compConf = filterRender && isEnableConf(filterRender) && filterRender.name ? rendererOpts[filterRender.name] || renderer.get(filterRender.name) : null
+      const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate
+      let showFlFoot = !!filterMultiple
+      if (XEUtils.isBoolean(showFooter)) {
+        showFlFoot = showFooter
+      } else if (compConf) {
+        showFlFoot = !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false)
+      }
+      return showFlFoot
+        ? [
+            h(
+              'div',
+              {
+                class: 'vxe-table--filter-footer'
+              },
+              [
+                h(
+                  'button',
+                  {
+                    class: {
+                      'is--disabled': isDisabled
+                    },
+                    disabled: isDisabled,
+                    onClick: confirmFilter
+                  },
+                  confirmButtonText || getI18n('vxe.table.confirmFilter')
+                ),
+                h(
+                  'button',
+                  {
+                    onClick: resetFilter
+                  },
+                  resetButtonText || getI18n('vxe.table.resetFilter')
+                )
+              ]
+            )
+          ]
+        : []
+    }
+
+    const renderVN = () => {
+      const { filterStore } = props
+      const { initStore } = tableReactData
+      const { visible, column } = filterStore
+      if (!column) {
+        return renderEmptyElement($xeFilterPanel)
+      }
+      const rendererOpts = computeRendererOpts.value
+      const filterRender = column ? column.filterRender : null
+      const compConf = filterRender && isEnableConf(filterRender) && filterRender.name ? rendererOpts[filterRender.name] || renderer.get(filterRender.name) : null
+      const filterClassName = compConf ? compConf.tableFilterClassName || compConf.filterClassName : ''
+      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable })
+      const tableProps = $xeTable.props
+      const { computeSize } = $xeTable.getComputeMaps()
+      const vSize = computeSize.value
+      const filterOpts = computeFilterOpts.value
+      const { transfer, destroyOnClose, className } = filterOpts
+      return h(
+        Teleport,
+        {
+          to: 'body',
+          disabled: !transfer
+        },
+        [
+          h(
+            'div',
+            {
+              ref: refElem,
+              class: [
+                'vxe-table--filter-wrapper',
+                'filter--prevent-default',
+                className,
+                getPropClass(filterClassName, params),
+                {
+                  [`size--${vSize}`]: vSize,
+                  'is--animat': tableProps.animat,
+                  'is--multiple': column.filterMultiple,
+                  'is--active': visible
+                }
+              ],
+              style: filterStore.style
+            },
+            initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : []
+          )
+        ]
+      )
+    }
+
+    $xeFilterPanel.renderVN = renderVN
+
+    return $xeFilterPanel
+  },
+  render() {
+    return this.renderVN()
+  }
+})