vxe-table 4.23.8 → 4.23.9

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

@@ -1,201 +1,272 @@
-import { h, Teleport, inject, ref, Ref } from 'vue'
-import { defineVxeComponent } from '../../../ui/src/comp'
-import XEUtils from 'xe-utils'
-import { VxeUI } from '@vxe-ui/core'
-import { getFuncText } from '../../../ui/src/utils'
-import { getSlotVNs } from '../../../ui/src/vn'
-
-import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods } from '../../../../types'
-
-const { getIcon, getI18n, renderEmptyElement } = VxeUI
-
-export default defineVxeComponent({
-  name: 'VxeTableMenuPanel',
-  setup (props, context) {
-    const xID = XEUtils.uniqueId()
-
-    const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
-
-    const { reactData: tableReactData } = $xeTable
-
-    const refElem = ref() as Ref<HTMLDivElement>
-
-    const refMaps = {
-      refElem
-    }
-
-    const $xeMenuPanel: any = {
-      xID,
-      props,
-      context,
-      getRefMaps: () => refMaps
-    }
-
-    const renderVN = () => {
-      const { ctxMenuStore } = tableReactData
-      const { computeMenuOpts } = $xeTable.getComputeMaps()
-      const menuOpts = computeMenuOpts.value
-      const { transfer, destroyOnClose, className } = menuOpts
-      const { visible, list } = ctxMenuStore
-
-      return h(Teleport, {
-        to: 'body',
-        disabled: !transfer
-      }, [
-        h('div', {
-          ref: refElem,
-          class: ['vxe-table--context-menu-wrapper', className, {
-            'is--visible': visible
-          }],
-          style: ctxMenuStore.style
-        }, (destroyOnClose ? visible : true)
-          ? list.map((options, gIndex) => {
-            return options.every(item => item.visible === false)
-              ? renderEmptyElement($xeTable)
-              : h('ul', {
-                class: 'vxe-table--context-menu-group-wrapper',
-                key: gIndex
-              }, options.map((item, index) => {
-                const { children, loading } = item
-                const hasChildMenus = children && children.some((child) => child.visible !== false)
-                const prefixOpts = Object.assign({}, item.prefixConfig)
-                const prefixIcon = prefixOpts.icon || item.prefixIcon
-                const suffixOpts = Object.assign({}, item.suffixConfig)
-                const suffixIcon = suffixOpts.icon || item.suffixIcon
-                const menuContent = getFuncText(item.name)
-                return item.visible === false
-                  ? renderEmptyElement($xeTable)
-                  : h('li', {
-                    class: ['vxe-table--context-menu--option', item.className, {
-                      'link--loading': loading,
-                      'link--disabled': item.disabled,
-                      'link--active': item === ctxMenuStore.selected
-                    }],
-                    key: `${gIndex}_${index}`
-                  }, [
-                    h('a', {
-                      class: 'vxe-context-menu--link',
-                      onClick (evnt: Event) {
-                        $xeTable.ctxMenuLinkEvent(evnt, item)
-                      },
-                      onMouseover (evnt: Event) {
-                        $xeTable.ctxMenuMouseoverEvent(evnt, item)
-                      },
-                      onMouseout (evnt: Event) {
-                        $xeTable.ctxMenuMouseoutEvent(evnt, item)
-                      }
-                    }, [
-                      h('div', {
-                        class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
-                      }, [
-                        loading
-                          ? h('span', {
-                            class: getIcon('TABLE_MENU_OPTION_LOADING')
-                          })
-                          : (prefixIcon && XEUtils.isFunction(prefixIcon)
-                              ? h('span', {}, getSlotVNs(prefixIcon({})))
-                              : h('span', {}, [
-                                h('i', {
-                                  class: prefixIcon
-                                })
-                              ])),
-                        prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
-                      ]),
-                      h('div', {
-                        class: 'vxe-context-menu--link-content',
-                        title: menuContent
-                      }, loading ? getI18n('vxe.table.menuLoading') : menuContent),
-                      h('div', {
-                        class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
-                      }, [
-                        suffixIcon && XEUtils.isFunction(suffixIcon)
-                          ? h('span', {}, getSlotVNs(suffixIcon({})))
-                          : h('i', {
-                            class: suffixIcon || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
-                          }),
-                        suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)
-                      ])
-                    ]),
-                    hasChildMenus && children
-                      ? h('ul', {
-                        class: ['vxe-table--context-menu-clild-wrapper', {
-                          'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
-                        }]
-                      }, children.map((child, cIndex) => {
-                        const { loading: childLoading } = child
-                        const childPrefixOpts = Object.assign({}, child.prefixConfig)
-                        const childPrefixIcon = childPrefixOpts.icon || child.prefixIcon
-                        const childSuffixOpts = Object.assign({}, child.suffixConfig)
-                        const childSuffixIcon = childSuffixOpts.icon || child.suffixIcon
-                        const childMenuContent = getFuncText(child.name)
-                        return child.visible === false
-                          ? null
-                          : h('li', {
-                            class: ['vxe-table--context-menu--option', child.className, {
-                              'link--loading': childLoading,
-                              'link--disabled': child.disabled,
-                              'link--active': child === ctxMenuStore.selectChild
-                            }],
-                            key: `${gIndex}_${index}_${cIndex}`
-                          }, [
-                            h('a', {
-                              class: 'vxe-context-menu--link',
-                              onClick (evnt: Event) {
-                                $xeTable.ctxMenuLinkEvent(evnt, child)
-                              },
-                              onMouseover (evnt: Event) {
-                                $xeTable.ctxMenuMouseoverEvent(evnt, item, child)
-                              },
-                              onMouseout (evnt: Event) {
-                                $xeTable.ctxMenuMouseoutEvent(evnt, item)
-                              }
-                            }, [
-                              h('div', {
-                                class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
-                              }, [
-                                child.loading
-                                  ? h('span', {
-                                    class: getIcon('TABLE_MENU_OPTION_LOADING')
-                                  })
-                                  : (childPrefixIcon && XEUtils.isFunction(childPrefixIcon)
-                                      ? h('span', {}, getSlotVNs(childPrefixIcon({})))
-                                      : h('span', {}, [
-                                        h('i', {
-                                          class: childPrefixIcon
-                                        })
-                                      ])),
-                                childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
-                              ]),
-                              h('div', {
-                                class: 'vxe-context-menu--link-content',
-                                title: childMenuContent
-                              }, childLoading ? getI18n('vxe.table.menuLoading') : childMenuContent),
-                              h('div', {
-                                class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
-                              }, [
-                                childSuffixIcon && XEUtils.isFunction(childSuffixIcon)
-                                  ? h('span', {}, getSlotVNs(childSuffixIcon({})))
-                                  : h('i', {
-                                    class: childSuffixIcon
-                                  }),
-                                childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)
-                              ])
-                            ])
-                          ])
-                      }))
-                      : null
-                  ])
-              }))
-          })
-          : [])
-      ])
-    }
-
-    $xeMenuPanel.renderVN = renderVN
-
-    return $xeMenuPanel
-  },
-  render () {
-    return this.renderVN()
-  }
-})
+import { h, Teleport, inject, ref, Ref } from 'vue'
+import { defineVxeComponent } from '../../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { VxeUI } from '@vxe-ui/core'
+import { getFuncText } from '../../../ui/src/utils'
+import { getSlotVNs } from '../../../ui/src/vn'
+
+import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods } from '../../../../types'
+
+const { getIcon, getI18n, renderEmptyElement } = VxeUI
+
+export default defineVxeComponent({
+  name: 'VxeTableMenuPanel',
+  setup(props, context) {
+    const xID = XEUtils.uniqueId()
+
+    const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
+
+    const { reactData: tableReactData } = $xeTable
+
+    const refElem = ref() as Ref<HTMLDivElement>
+
+    const refMaps = {
+      refElem
+    }
+
+    const $xeMenuPanel: any = {
+      xID,
+      props,
+      context,
+      getRefMaps: () => refMaps
+    }
+
+    const renderVN = () => {
+      const { ctxMenuStore } = tableReactData
+      const { computeMenuOpts } = $xeTable.getComputeMaps()
+      const menuOpts = computeMenuOpts.value
+      const { transfer, destroyOnClose, className } = menuOpts
+      const { visible, list } = ctxMenuStore
+
+      return h(
+        Teleport,
+        {
+          to: 'body',
+          disabled: !transfer
+        },
+        [
+          h(
+            'div',
+            {
+              ref: refElem,
+              class: [
+                'vxe-table--context-menu-wrapper',
+                className,
+                {
+                  'is--visible': visible
+                }
+              ],
+              style: ctxMenuStore.style
+            },
+            (destroyOnClose ? visible : true)
+              ? list.map((options, gIndex) => {
+                return options.every((item) => item.visible === false)
+                  ? renderEmptyElement($xeTable)
+                  : h(
+                    'ul',
+                    {
+                      class: 'vxe-table--context-menu-group-wrapper',
+                      key: gIndex
+                    },
+                    options.map((item, index) => {
+                      const { children, loading } = item
+                      const hasChildMenus = children && children.some((child) => child.visible !== false)
+                      const prefixOpts = Object.assign({}, item.prefixConfig)
+                      const prefixIcon = prefixOpts.icon || item.prefixIcon
+                      const suffixOpts = Object.assign({}, item.suffixConfig)
+                      const suffixIcon = suffixOpts.icon || item.suffixIcon
+                      const menuContent = getFuncText(item.name)
+                      return item.visible === false
+                        ? renderEmptyElement($xeTable)
+                        : h(
+                          'li',
+                          {
+                            class: [
+                              'vxe-table--context-menu--option',
+                              item.className,
+                              {
+                                'link--loading': loading,
+                                'link--disabled': item.disabled,
+                                'link--active': item === ctxMenuStore.selected
+                              }
+                            ],
+                            key: `${gIndex}_${index}`
+                          },
+                          [
+                            h(
+                              'a',
+                              {
+                                class: 'vxe-context-menu--link',
+                                onClick(evnt: Event) {
+                                  $xeTable.ctxMenuLinkEvent(evnt, item)
+                                },
+                                onMouseover(evnt: Event) {
+                                  $xeTable.ctxMenuMouseoverEvent(evnt, item)
+                                },
+                                onMouseout(evnt: Event) {
+                                  $xeTable.ctxMenuMouseoutEvent(evnt, item)
+                                }
+                              },
+                              [
+                                h(
+                                  'div',
+                                  {
+                                    class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
+                                  },
+                                  [
+                                    loading
+                                      ? h('span', {
+                                        class: getIcon('TABLE_MENU_OPTION_LOADING')
+                                      })
+                                      : prefixIcon && XEUtils.isFunction(prefixIcon)
+                                        ? h('span', {}, getSlotVNs(prefixIcon({})))
+                                        : h('span', {}, [
+                                          h('i', {
+                                            class: prefixIcon
+                                          })
+                                        ]),
+                                    prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
+                                  ]
+                                ),
+                                h(
+                                  'div',
+                                  {
+                                    class: 'vxe-context-menu--link-content',
+                                    title: menuContent
+                                  },
+                                  loading ? getI18n('vxe.table.menuLoading') : menuContent
+                                ),
+                                h(
+                                  'div',
+                                  {
+                                    class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
+                                  },
+                                  [
+                                    suffixIcon && XEUtils.isFunction(suffixIcon)
+                                      ? h('span', {}, getSlotVNs(suffixIcon({})))
+                                      : h('i', {
+                                        class: suffixIcon || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
+                                      }),
+                                    suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)
+                                  ]
+                                )
+                              ]
+                            ),
+                            hasChildMenus && children
+                              ? h(
+                                'ul',
+                                {
+                                  class: [
+                                    'vxe-table--context-menu-clild-wrapper',
+                                    {
+                                      'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
+                                    }
+                                  ]
+                                },
+                                children.map((child, cIndex) => {
+                                  const { loading: childLoading } = child
+                                  const childPrefixOpts = Object.assign({}, child.prefixConfig)
+                                  const childPrefixIcon = childPrefixOpts.icon || child.prefixIcon
+                                  const childSuffixOpts = Object.assign({}, child.suffixConfig)
+                                  const childSuffixIcon = childSuffixOpts.icon || child.suffixIcon
+                                  const childMenuContent = getFuncText(child.name)
+                                  return child.visible === false
+                                    ? null
+                                    : h(
+                                      'li',
+                                      {
+                                        class: [
+                                          'vxe-table--context-menu--option',
+                                          child.className,
+                                          {
+                                            'link--loading': childLoading,
+                                            'link--disabled': child.disabled,
+                                            'link--active': child === ctxMenuStore.selectChild
+                                          }
+                                        ],
+                                        key: `${gIndex}_${index}_${cIndex}`
+                                      },
+                                      [
+                                        h(
+                                          'a',
+                                          {
+                                            class: 'vxe-context-menu--link',
+                                            onClick(evnt: Event) {
+                                              $xeTable.ctxMenuLinkEvent(evnt, child)
+                                            },
+                                            onMouseover(evnt: Event) {
+                                              $xeTable.ctxMenuMouseoverEvent(evnt, item, child)
+                                            },
+                                            onMouseout(evnt: Event) {
+                                              $xeTable.ctxMenuMouseoutEvent(evnt, item)
+                                            }
+                                          },
+                                          [
+                                            h(
+                                              'div',
+                                              {
+                                                class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
+                                              },
+                                              [
+                                                child.loading
+                                                  ? h('span', {
+                                                    class: getIcon('TABLE_MENU_OPTION_LOADING')
+                                                  })
+                                                  : childPrefixIcon && XEUtils.isFunction(childPrefixIcon)
+                                                    ? h('span', {}, getSlotVNs(childPrefixIcon({})))
+                                                    : h('span', {}, [
+                                                      h('i', {
+                                                        class: childPrefixIcon
+                                                      })
+                                                    ]),
+                                                childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
+                                              ]
+                                            ),
+                                            h(
+                                              'div',
+                                              {
+                                                class: 'vxe-context-menu--link-content',
+                                                title: childMenuContent
+                                              },
+                                              childLoading ? getI18n('vxe.table.menuLoading') : childMenuContent
+                                            ),
+                                            h(
+                                              'div',
+                                              {
+                                                class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
+                                              },
+                                              [
+                                                childSuffixIcon && XEUtils.isFunction(childSuffixIcon)
+                                                  ? h('span', {}, getSlotVNs(childSuffixIcon({})))
+                                                  : h('i', {
+                                                    class: childSuffixIcon
+                                                  }),
+                                                childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)
+                                              ]
+                                            )
+                                          ]
+                                        )
+                                      ]
+                                    )
+                                })
+                              )
+                              : null
+                          ]
+                        )
+                    })
+                  )
+              })
+              : []
+          )
+        ]
+      )
+    }
+
+    $xeMenuPanel.renderVN = renderVN
+
+    return $xeMenuPanel
+  },
+  render() {
+    return this.renderVN()
+  }
+})