@vxe-ui/plugin-render-element 3.0.0 → 3.0.2

package/src/index.ts

@@ -1,76 +1,85 @@
-import { defineTableRender } from './table'
-import { defineFormRender } from './form'
-
-import type { VxeUIPluginObject, VxeGlobalInterceptorHandles } from 'vxe-pc-ui'
-
-// eslint-disable-next-line no-unused-vars
-let ElementPlus: any
-
-/**
- * 检查触发源是否属于目标节点
- */
-function getEventTargetNode (evnt: any, container: HTMLElement, className: string) {
-  let targetElem
-  let target = evnt.target
-  while (target && target.nodeType && target !== document) {
-    if (className && target.className && target.className.split && target.className.split(' ').indexOf(className) > -1) {
-      targetElem = target
-    } else if (target === container) {
-      return { flag: className ? !!targetElem : true, container, targetElem: targetElem }
-    }
-    target = target.parentNode
-  }
-  return { flag: false }
-}
-
-/**
- * 事件兼容性处理
- */
-function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearFilterParams | VxeGlobalInterceptorHandles.InterceptorClearEditParams | VxeGlobalInterceptorHandles.InterceptorClearAreasParams) {
-  const { $event } = params
-  const bodyElem = document.body
-  if (
-    // 远程搜索
-    getEventTargetNode($event, bodyElem, 'el-autocomplete-suggestion').flag ||
-    // 下拉框
-    getEventTargetNode($event, bodyElem, 'el-select-dropdown').flag ||
-    // 级联
-    getEventTargetNode($event, bodyElem, 'el-cascader__dropdown').flag ||
-    getEventTargetNode($event, bodyElem, 'el-cascader-menus').flag ||
-    // 日期
-    getEventTargetNode($event, bodyElem, 'el-time-panel').flag ||
-    getEventTargetNode($event, bodyElem, 'el-picker-panel').flag ||
-    // 颜色
-    getEventTargetNode($event, bodyElem, 'el-color-dropdown').flag
-  ) {
-    return false
-  }
-}
-
-export const VxeUIPluginRenderElement: VxeUIPluginObject = {
-  install (VxeUI, options?: {
-    ElementPlus?: any
-  }) {
-    ElementPlus = options ? options.ElementPlus : {}
-
-    // 检查版本
-    if (!/^(3)\./.test(VxeUI.uiVersion)) {
-      console.error('[plugin-render-element 3.x] Version 3.x is required')
-    }
-
-    defineTableRender(VxeUI)
-    defineFormRender(VxeUI)
-
-    VxeUI.interceptor.add('event.clearFilter', handleClearEvent)
-    VxeUI.interceptor.add('event.clearEdit', handleClearEvent)
-    VxeUI.interceptor.add('event.clearAreas', handleClearEvent)
-    // 兼容老版本
-    VxeUI.interceptor.add('event.clearActived', handleClearEvent)
-  }
-}
-
-if (typeof window !== 'undefined' && window.VxeUI && window.VxeUI.use) {
-  window.VxeUI.use(VxeUIPluginRenderElement)
-}
-
-export default VxeUIPluginRenderElement
+import { defineTableRender } from './table'
+import { defineFormRender } from './form'
+
+import type { VxeUIPluginObject, VxeGlobalInterceptorHandles } from 'vxe-pc-ui'
+
+// eslint-disable-next-line no-unused-vars
+let ElementPlus: any
+
+function getEventTarget (evnt: Event) {
+  const target = evnt.target as HTMLElement | null
+  if (target && (target as any).shadowRoot && evnt.composed) {
+    return evnt.composedPath()[0] as HTMLElement || target
+  }
+  return target
+}
+
+/**
+ * 检查触发源是否属于目标节点
+ */
+function getEventTargetNode (evnt: any, container: HTMLElement, className: string) {
+  let targetElem
+  let target = getEventTarget(evnt)
+  const rootEl = document.documentElement || document.querySelector('html')
+  while (target && target.nodeType && target !== rootEl) {
+    if (className && target.className && target.className.split && target.className.split(' ').indexOf(className) > -1) {
+      targetElem = target
+    } else if (target === container) {
+      return { flag: className ? !!targetElem : true, container, targetElem: targetElem }
+    }
+    target = target.parentElement
+  }
+  return { flag: false }
+}
+
+/**
+ * 事件兼容性处理
+ */
+function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearFilterParams | VxeGlobalInterceptorHandles.InterceptorClearEditParams | VxeGlobalInterceptorHandles.InterceptorClearAreasParams) {
+  const { $event } = params
+  const bodyElem = document.body
+  if (
+    // 远程搜索
+    getEventTargetNode($event, bodyElem, 'el-autocomplete-suggestion').flag ||
+    // 下拉框
+    getEventTargetNode($event, bodyElem, 'el-select-dropdown').flag ||
+    // 级联
+    getEventTargetNode($event, bodyElem, 'el-cascader__dropdown').flag ||
+    getEventTargetNode($event, bodyElem, 'el-cascader-menus').flag ||
+    // 日期
+    getEventTargetNode($event, bodyElem, 'el-time-panel').flag ||
+    getEventTargetNode($event, bodyElem, 'el-picker-panel').flag ||
+    // 颜色
+    getEventTargetNode($event, bodyElem, 'el-color-dropdown').flag
+  ) {
+    return false
+  }
+}
+
+export const VxeUIPluginRenderElement: VxeUIPluginObject = {
+  install (VxeUI, options?: {
+    ElementPlus?: any
+  }) {
+    ElementPlus = options ? options.ElementPlus : {}
+
+    // 检查版本
+    if (!/^(3)\./.test(VxeUI.uiVersion)) {
+      console.error('[VUE_APP_VXE_PLUGIN_VERSION] Requires VUE_APP_VXE_TABLE_VERSION+ version. VUE_APP_VXE_PLUGIN_DESCRIBE')
+    }
+
+    defineTableRender(VxeUI)
+    defineFormRender(VxeUI)
+
+    VxeUI.interceptor.add('event.clearFilter', handleClearEvent)
+    VxeUI.interceptor.add('event.clearEdit', handleClearEvent)
+    VxeUI.interceptor.add('event.clearAreas', handleClearEvent)
+    // 兼容老版本
+    VxeUI.interceptor.add('event.clearActived', handleClearEvent)
+  }
+}
+
+if (typeof window !== 'undefined' && window.VxeUI && window.VxeUI.use) {
+  window.VxeUI.use(VxeUIPluginRenderElement)
+}
+
+export default VxeUIPluginRenderElement