vxe-pc-ui 4.11.30 → 4.11.32

package/packages/language/fr-FR.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Deuxième'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/hu-HU.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Második'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/hy-AM.ts

@@ -106,7 +106,7 @@ export default {
       allChecked: '全选',
       total: '{0} / {1}',
       search: '搜索',
-      loadingText: '加载中',
+      loadingText: '加载中...',
       emptyText: '暂无数据',
       maxOpt: '最大可选择的数量不能超过 {0} 个',
       overSizeErr: '已超出最大可选数量 {0} 个，超出部分将被忽略！',
@@ -539,6 +539,9 @@ export default {
         ss: '秒'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/id-ID.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Kedua'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/it-IT.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Secondo'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/ja-JP.ts

@@ -539,6 +539,9 @@ export default {
         ss: '2番'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/ko-KR.ts

@@ -539,6 +539,9 @@ export default {
         ss: '두번째'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/ms-MY.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Kedua'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/nb-NO.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Sekund'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/pt-BR.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Segundo'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/ru-RU.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Второй'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/th-TH.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'ที่สอง'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/ug-CN.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'سېكۇنت'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/uk-UA.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Другий'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/uz-UZ.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Ikkinchi'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/vi-VN.ts

@@ -539,6 +539,9 @@ export default {
         ss: 'Thứ hai'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/zh-CHT.ts

@@ -539,6 +539,9 @@ export default {
         ss: '秒'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/language/zh-CN.ts

@@ -106,7 +106,7 @@ export default {
       allChecked: '全选',
       total: '{0} / {1}',
       search: '搜索',
-      loadingText: '加载中',
+      loadingText: '加载中...',
       emptyText: '暂无数据',
       maxSize: '最大可选择的数量不能超过 {0} 个',
       overSizeErr: '已超出最大可选数量 {0} 个，超出部分将被忽略！',
@@ -539,6 +539,9 @@ export default {
         ss: '秒'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',

package/packages/print/src/print.ts

@@ -47,6 +47,10 @@ export default defineVxeComponent({
       type: String as PropType<VxePrintPropTypes.CustomStyle>,
       default: () => getConfig().print.customStyle
     },
+    styleUrls: {
+      type: Array as PropType<VxePrintPropTypes.StyleUrls>,
+      default: () => getConfig().print.styleUrls
+    },
     beforeMethod: Function as PropType<VxePrintPropTypes.BeforeMethod>
   },
   emits: [] as VxePrintEmits,
@@ -85,8 +89,27 @@ export default defineVxeComponent({
     const printMethods: PrintMethods = {
       dispatchEvent,
       print () {
+        const { align, title, headerAlign, footerAlign, showPageNumber, customLayout, pageBreaks, content, headerHtml, footerHtml, leftHtml, rightHtml, showAllPageTitle, pageStyle, customStyle, styleUrls, beforeMethod } = props
         const elem = refElem.value
-        return printHtml(Object.assign({}, props, {
+        return printHtml(Object.assign({}, {
+          align,
+          title,
+          headerAlign,
+          footerAlign,
+          showPageNumber,
+          customLayout,
+          pageBreaks,
+          content,
+          headerHtml,
+          footerHtml,
+          leftHtml,
+          rightHtml,
+          showAllPageTitle,
+          pageStyle,
+          customStyle,
+          styleUrls,
+          beforeMethod
+        }, {
           _pageBreaks: !!reactData.staticPageBreaks.length,
           html: trimHtml(elem ? elem.outerHTML : '') || props.html || props.content || ''
         }))

package/packages/print/src/util.ts

@@ -97,8 +97,15 @@ function parsePageStyle (val?: VxePrintPropTypes.PageStyle) {
   }
 }
 
+function createCssLink (urls?: string[]) {
+  if (urls) {
+    return urls.map(url => `<link rel="stylesheet" href="${url}">`).join('\n')
+  }
+  return ''
+}
+
 function createHtmlPage (opts: VxePrintProps & { _pageBreaks: boolean }, printHtml: string): string {
-  const { pageStyle, customStyle } = opts
+  const { pageStyle, customStyle, styleUrls } = opts
   const pageStyObj = parsePageStyle(pageStyle)
   const headStyOpts = pageStyObj.header
   const titStyOpts = pageStyObj.title
@@ -110,6 +117,7 @@ function createHtmlPage (opts: VxePrintProps & { _pageBreaks: boolean }, printHt
     '<head>',
     '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">',
     `<title>${opts.title || ''}</title>`,
+    createCssLink(styleUrls),
     `<style media="print">@page{size:auto;${isPbMode ? 'margin: 0mm;' : ''}}</style>`,
     `<style>body{font-size:${pageStyObj.fontSize || '14px'};color:${pageStyObj.color || defaultFontColor};text-align:${pageStyObj.textAlign || 'left'};}</style>`,
     '<style>',

package/packages/tree/src/tree.ts

@@ -1,4 +1,4 @@
-import { ref, h, reactive, PropType, computed, VNode, watch, onUnmounted, nextTick, onMounted } from 'vue'
+import { ref, h, reactive, PropType, computed, VNode, watch, onBeforeUnmount, nextTick, onMounted, provide } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { VxeUI, getI18n, createEvent, getIcon, getConfig, useSize, globalEvents, globalResize, renderEmptyElement } from '../../ui'
 import { calcTreeLine, enNodeValue, deNodeValue } from './util'
@@ -7,8 +7,9 @@ import { getCrossTreeDragNodeInfo } from './store'
 import XEUtils from 'xe-utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode } from '../../ui/src/dom'
+import { isEnableConf } from '../../ui/src/utils'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
-import VxeLoadingComponent from '../../loading/src/loading'
+import VxeLoadingComponent from '../../loading'
 
 import type { TreeReactData, VxeTreeEmits, VxeTreePropTypes, TreeInternalData, TreePrivateRef, VxeTreeDefines, VxeTreePrivateComputed, TreePrivateMethods, TreeMethods, ValueOf, VxeTreeConstructor, VxeTreePrivateMethods } from '../../../types'
 
@@ -51,6 +52,25 @@ function createInternalData (): TreeInternalData {
   }
 }
 
+function createReactData ():TreeReactData {
+  return {
+    parentHeight: 0,
+    customHeight: 0,
+    customMinHeight: 0,
+    customMaxHeight: 0,
+    currentNode: null,
+    scrollYLoad: false,
+    bodyHeight: 0,
+    topSpaceHeight: 0,
+    selectRadioKey: null,
+    treeList: [],
+    updateExpandedFlag: 1,
+    updateCheckboxFlag: 1,
+    dragNode: null,
+    dragTipText: ''
+  }
+}
+
 // let crossTreeDragNodeObj: {
 //   $oldTree: VxeTreeConstructor & VxeTreePrivateMethods
 //   $newTree: (VxeTreeConstructor & VxeTreePrivateMethods) | null
@@ -150,6 +170,7 @@ export default defineVxeComponent({
       default: () => getConfig().tree.drag
     },
     dragConfig: Object as PropType<VxeTreePropTypes.DragConfig>,
+    menuConfig: Object as PropType<VxeTreePropTypes.MenuConfig>,
     showIcon: {
       type: Boolean as PropType<VxeTreePropTypes.ShowIcon>,
       default: true
@@ -188,7 +209,10 @@ export default defineVxeComponent({
     'scroll',
     'node-dragstart',
     'node-dragover',
-    'node-dragend'
+    'node-dragend',
+    'node-expand',
+    'node-menu',
+    'menu-click'
   ] as VxeTreeEmits,
   setup (props, context) {
     const { emit, slots } = context
@@ -208,24 +232,8 @@ export default defineVxeComponent({
 
     const crossTreeDragNodeInfo = getCrossTreeDragNodeInfo()
 
-    const reactData = reactive<TreeReactData>({
-      parentHeight: 0,
-      customHeight: 0,
-      customMinHeight: 0,
-      customMaxHeight: 0,
-      currentNode: null,
-      scrollYLoad: false,
-      bodyHeight: 0,
-      topSpaceHeight: 0,
-      selectRadioKey: enNodeValue(props.checkNodeKey),
-      treeList: [],
-      updateExpandedFlag: 1,
-      updateCheckboxFlag: 1,
-      dragNode: null,
-      dragTipText: ''
-    })
-
     const internalData = createInternalData()
+    const reactData = reactive(createReactData())
 
     const refMaps: TreePrivateRef = {
       refElem
@@ -302,6 +310,10 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().tree.dragConfig, props.dragConfig)
     })
 
+    const computeMenuOpts = computed(() => {
+      return Object.assign({}, getConfig().tree.menuConfig, props.menuConfig)
+    })
+
     const computeTreeStyle = computed(() => {
       const { customHeight, customMinHeight, customMaxHeight } = reactData
       const stys: Record<string, string> = {}
@@ -978,6 +990,33 @@ export default defineVxeComponent({
       dispatchEvent('node-dblclick', { node }, evnt)
     }
 
+    const handleContextmenuEvent = (evnt: MouseEvent, node: any) => {
+      const { menuConfig } = props
+      const isRowCurrent = computeIsRowCurrent.value
+      const menuOpts = computeMenuOpts.value
+      if (menuConfig ? isEnableConf(menuOpts) : menuOpts.enabled) {
+        const { options, visibleMethod } = menuOpts
+        if (!visibleMethod || visibleMethod({ $tree: $xeTree, options, node })) {
+          if (isRowCurrent) {
+            changeCurrentEvent(evnt, node)
+          } else if (reactData.currentNode) {
+            reactData.currentNode = null
+          }
+          if (VxeUI.contextMenu) {
+            VxeUI.contextMenu.openByEvent(evnt, {
+              options,
+              events: {
+                optionClick (eventParams) {
+                  dispatchEvent('menu-click', Object.assign({ node }, eventParams), eventParams.$event)
+                }
+              }
+            })
+          }
+        }
+      }
+      dispatchEvent('node-menu', { node }, evnt)
+    }
+
     const handleAsyncTreeExpandChilds = (node: any) => {
       const checkboxOpts = computeCheckboxOpts.value
       const { loadMethod } = props
@@ -2386,6 +2425,7 @@ export default defineVxeComponent({
         onDragstart?: any
         onDragend?: any
         onDragover?: any
+        onContextmenu?: any
       } = {
         onMousedown (evnt: MouseEvent) {
           handleNodeMousedownEvent(evnt, node)
@@ -2396,6 +2436,9 @@ export default defineVxeComponent({
         },
         onDblclick (evnt: MouseEvent) {
           handleNodeDblclickEvent(evnt, node)
+        },
+        onContextmenu (evnt: MouseEvent) {
+          handleContextmenuEvent(evnt, node)
         }
       }
       // 拖拽行事件
@@ -2667,7 +2710,7 @@ export default defineVxeComponent({
     })
 
     onMounted(() => {
-      const { transform, drag } = props
+      const { transform, drag, menuConfig } = props
       const dragOpts = computeDragOpts.value
       if (drag && !transform) {
         errLog('vxe.error.notSupportProp', ['drag', 'transform=false', 'transform=true'])
@@ -2675,6 +2718,10 @@ export default defineVxeComponent({
       if (dragOpts.isCrossTreeDrag) {
         errLog('vxe.error.notProp', ['drag-config.isCrossTreeDrag'])
       }
+      const VxeUIContextMenu = VxeUI.getComponent('VxeContextMenu')
+      if (menuConfig && !VxeUIContextMenu) {
+        errLog('vxe.error.reqComp', ['vxe-context-menu'])
+      }
       if (props.autoResize) {
         const el = refElem.value
         const parentEl = getParentElem()
@@ -2695,19 +2742,23 @@ export default defineVxeComponent({
       globalEvents.on($xeTree, 'resize', handleGlobalResizeEvent)
     })
 
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       const { resizeObserver } = internalData
       if (resizeObserver) {
         resizeObserver.disconnect()
       }
       globalEvents.off($xeTree, 'resize')
+      XEUtils.assign(reactData, createReactData())
       XEUtils.assign(internalData, createInternalData())
     })
 
+    reactData.selectRadioKey = enNodeValue(props.checkNodeKey)
     loadData(props.data || [])
 
     $xeTree.renderVN = renderVN
 
+    provide('$xeTree', $xeTree)
+
     return $xeTree
   },
   render () {

package/packages/ui/index.ts

@@ -46,7 +46,8 @@ setConfig({
     },
     suffixTooltip: {
       enterable: true
-    }
+    },
+    showDropdownIcon: true
   },
   buttonGroup: {},
   calendar: {
@@ -79,6 +80,7 @@ setConfig({
     }
   },
   collapsePane: {},
+  contextMenu: {},
   countdown: {},
   colorPicker: {
     type: 'rgb',
@@ -672,7 +674,11 @@ setIcon({
   SPLIT_RIGHT_ACTION: iconPrefix + 'arrow-right',
 
   // backtop
-  BACKTOP_TOP: iconPrefix + 'top'
+  BACKTOP_TOP: iconPrefix + 'top',
+
+  // context-menu
+  CONTEXT_MENU_OPTION_LOADING: iconPrefix + 'spinner roll',
+  CONTEXT_MENU_CHILDREN: iconPrefix + 'arrow-right'
 })
 
 export * from '@vxe-ui/core'

package/styles/all.scss

@@ -22,6 +22,7 @@
 @use './components/collapse.scss';
 @use './components/collapse-pane.scss';
 @use './components/color-picker.scss';
+@use './components/context-menu.scss';
 @use './components/countdown.scss';
 @use './components/date-panel.scss';
 @use './components/date-picker.scss';

package/styles/components/backtop.scss

@@ -43,7 +43,7 @@ $backtopThemeList: (
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   background-color: var(--vxe-ui-layout-background-color);
-  border-radius: var(--vxe-ui-base-border-radius);;
+  border-radius: var(--vxe-ui-base-border-radius);
   transition: all 0.3s;
   cursor: pointer;
   box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);

package/styles/components/context-menu.scss

@@ -0,0 +1,113 @@
+.vxe-context-menu {
+  display: none;
+  top: 0;
+  left: 0;
+  user-select: none;
+  &.is--visible {
+    display: block;
+  }
+  &.is--fixed {
+    position: fixed;
+  }
+  &.is--absolute {
+    position: absolute;
+  }
+  &.cp--left {
+    .vxe-context-menu--children-wrapper {
+      left: calc(-100% + 2px);
+    }
+  }
+  &.cp--right {
+    .vxe-context-menu--children-wrapper {
+      left: calc(100% - 2px);
+    }
+  }
+}
+
+.vxe-context-menu--group-wrapper {
+  border-top: 1px solid var(--vxe-ui-base-popup-border-color);
+  &:first-child {
+    border: 0;
+  }
+}
+
+.vxe-context-menu--wrapper,
+.vxe-context-menu--children-wrapper {
+  padding: 0;
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  background-color: var(--vxe-ui-layout-background-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+  box-shadow: 0 0 12px 0 rgba(0,0,0,0.3);
+}
+
+.vxe-context-menu--children-wrapper {
+  display: none;
+  position: absolute;
+  transform: translateY(-5px);
+}
+
+.vxe-context-menu--item-wrapper {
+  position: relative;
+  min-width: 12em;
+  max-width: 20em;
+  user-select: none;
+  &.is--active {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+}
+.vxe-context-menu--first-item {
+  &.is--active {
+    .vxe-context-menu--children-wrapper {
+      display: block;
+    }
+  }
+}
+
+.vxe-context-menu--item-inner {
+  height: var(--vxe-ui-context-menu-option-height);
+  display: flex;
+  align-items: center;
+  padding: 0 0.8em;
+  cursor: pointer;
+  &.is--loading {
+    opacity: 0.5;
+    cursor: progress;
+  }
+  &.is--disabled {
+    color: var(--vxe-ui-font-disabled-color);
+    cursor: no-drop;
+  }
+}
+
+.vxe-context-menu--item-prefix {
+  min-width: 1em;
+  text-align: center;
+}
+.vxe-context-menu--item-prefix,
+.vxe-context-menu--item-suffix {
+  flex-shrink: 0;
+  font-size: 0.9em;
+}
+.vxe-context-menu--item-label {
+  font-size: 0.9em;
+  padding: 0 0.5em;
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vxe-context-menu {
+  font-size: var(--vxe-ui-font-size-default);
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+  }
+}

package/styles/theme/base.scss

@@ -203,4 +203,7 @@
   /*segmented*/
   --vxe-ui-segmented-item-background-color: rgba(0, 0, 0, 0.05);
   --vxe-ui-segmented-item-hover-background-color: rgba(0, 0, 0, 0.06);
+
+  /*context-menu*/
+  --vxe-ui-context-menu-option-height: 2em;
 }

package/types/all.d.ts

@@ -23,6 +23,7 @@ import VxeCol from './components/col'
 import VxeCollapse from './components/collapse'
 import VxeCollapsePane from './components/collapse-pane'
 import VxeColorPicker from './components/color-picker'
+import VxeContextMenu from './components/context-menu'
 import VxeCountdown from './components/countdown'
 import VxeDatePanel from './components/date-panel'
 import VxeDatePicker from './components/date-picker'
@@ -134,6 +135,7 @@ interface AllComponents {
   VxeCollapse: typeof VxeCollapse
   VxeCollapsePane: typeof VxeCollapsePane
   VxeColorPicker: typeof VxeColorPicker
+  VxeContextMenu: typeof VxeContextMenu
   VxeCountdown: typeof VxeCountdown
   VxeDatePanel: typeof VxeDatePanel
   VxeDatePicker: typeof VxeDatePicker
@@ -254,6 +256,7 @@ export * from './components/col'
 export * from './components/collapse'
 export * from './components/collapse-pane'
 export * from './components/color-picker'
+export * from './components/context-menu'
 export * from './components/countdown'
 export * from './components/date-panel'
 export * from './components/date-picker'