vxe-pc-ui 3.14.38 → 3.14.40

package/packages/tree-select/src/tree-select.ts

@@ -235,12 +235,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeDrawer = $xeTreeSelect.$xeDrawer
       const $xeForm = $xeTreeSelect.$xeForm
 
-      const { transfer } = props
       const popupOpts = $xeTreeSelect.computePopupOpts as VxeTreeSelectPropTypes.PopupConfig
-      if (XEUtils.isBoolean(popupOpts.transfer)) {
-        return popupOpts.transfer
+      const { transfer } = popupOpts
+      if (XEUtils.isBoolean(transfer)) {
+        return transfer
       }
-      if (transfer === null) {
+      if (props.transfer === null) {
         const globalTransfer = getConfig().treeSelect.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
@@ -249,7 +249,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           return true
         }
       }
-      return transfer
+      return props.transfer
     },
     computePopupOpts () {
       const $xeTreeSelect = this
@@ -357,17 +357,24 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const treeOpts = $xeTreeSelect.computeTreeOpts as VxeTreeSelectPropTypes.TreeConfig
       return Object.assign({}, treeOpts.filterConfig, props.filterConfig)
     },
+    computeSelectVals () {
+      const $xeTreeSelect = this
+      const props = $xeTreeSelect
+
+      const { value: modelValue } = props
+      return XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue])
+    },
     computeSelectLabel () {
       const $xeTreeSelect = this
       const props = $xeTreeSelect
       const reactData = ($xeTreeSelect as any).reactData as TreeSelectReactData
       const internalData = ($xeTreeSelect as any).internalData as TreeSelectInternalData
 
-      const { value: modelValue, showFullLabel } = props
+      const { showFullLabel } = props
       const { fullOptFlag, lazyOptFlag } = reactData
       const { fullNodeMaps, lazyNodeMaps } = internalData
       const labelField = $xeTreeSelect.computeLabelField as string
-      const selectVals = XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue])
+      const selectVals = $xeTreeSelect.computeSelectVals as any[]
       return selectVals.map(val => {
         const cacheItem = fullNodeMaps[val]
         if (fullOptFlag && cacheItem) {
@@ -457,12 +464,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
           nodeid = getOptUniqueId()
         }
         if (keyMaps[nodeid]) {
-          errLog('vxe.error.repeatKey', [`[tree-select] ${nodeKeyField}`, nodeid])
+          errLog('vxe.error.repeatKey', [nodeKeyField, nodeid])
         }
         keyMaps[nodeid] = true
         const value = item[valueField]
         if (nodeMaps[value]) {
-          errLog('vxe.error.repeatKey', [`[tree-select] ${valueField}`, value])
+          errLog('vxe.error.repeatKey', [valueField, value])
         }
         nodeMaps[value] = {
           item,
@@ -470,7 +477,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           items,
           parent: parentItem,
           nodes,
-          fullLabel: nodes.map(item => item[labelField]).join((separator || '/') + ' ')
+          fullLabel: nodes.map(item => item[labelField]).join((separator || ' / '))
         }
       }
       if (optList) {
@@ -555,7 +562,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       handleStyle()
       return $xeTreeSelect.$nextTick().then(handleStyle)
     },
-    showOptionPanel  () {
+    showOptionPanel (evnt?: Event) {
       const $xeTreeSelect = this
       const props = $xeTreeSelect
       const reactData = $xeTreeSelect.reactData
@@ -593,7 +600,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }, 10)
         $xeTreeSelect.updateZindex()
         $xeTreeSelect.updatePlacement()
-        $xeTreeSelect.dispatchEvent('visible-change', { visible: true }, null)
+        $xeTreeSelect.dispatchEvent('visible-change', { visible: true }, evnt || null)
       }
     },
     hideOptionPanel (evnt?: Event) {
@@ -648,7 +655,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           $tree.setAllCheckboxNode(true).then(({ checkNodeKeys, checkNodes }) => {
             $xeTreeSelect.changeEvent($event, checkNodeKeys, checkNodes[0])
             $xeTreeSelect.dispatchEvent('all-change', { value: checkNodeKeys }, $event)
-            if (XEUtils.isBoolean(autoClose) ? autoClose : checkedClosable) {
+            if (XEUtils.isBoolean(checkedClosable) ? checkedClosable : autoClose) {
               $xeTreeSelect.hideOptionPanel($event)
             }
           })
@@ -665,7 +672,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if ($tree) {
         const value = multiple ? [] : null
         $tree.clearCheckboxNode().then(() => {
-          if (XEUtils.isBoolean(autoClose) ? autoClose : clearClosable) {
+          if (XEUtils.isBoolean(clearClosable) ? clearClosable : autoClose) {
             $xeTreeSelect.hideOptionPanel($event)
           }
         })
@@ -775,7 +782,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if (!isDisabled) {
         if (!reactData.visiblePanel) {
           reactData.triggerFocusPanel = true
-          $xeTreeSelect.showOptionPanel()
+          $xeTreeSelect.showOptionPanel(evnt)
           setTimeout(() => {
             reactData.triggerFocusPanel = false
           }, 150)
@@ -834,7 +841,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         if (reactData.visiblePanel) {
           $xeTreeSelect.hideOptionPanel($event)
         } else {
-          $xeTreeSelect.showOptionPanel()
+          $xeTreeSelect.showOptionPanel($event)
         }
       }
     },

package/packages/ui/index.ts

@@ -70,7 +70,10 @@ setConfig({
   },
   carouselItem: {},
   cascader: {
-    autoClose: true
+    showFullLabel: true,
+    treeConfig: {
+      showIcon: true
+    }
   },
   checkbox: {},
   checkboxButton: {},
@@ -425,7 +428,6 @@ setConfig({
     }
   },
   treeSelect: {
-    autoClose: null as any,
     // separator: '/',
     virtualYConfig: {
       enabled: true,
@@ -701,7 +703,12 @@ setIcon({
 
   // context-menu
   CONTEXT_MENU_OPTION_LOADING: iconPrefix + 'spinner roll',
-  CONTEXT_MENU_CHILDREN: iconPrefix + 'arrow-right'
+  CONTEXT_MENU_CHILDREN: iconPrefix + 'arrow-right',
+
+  // cascader
+  CASCADER_NODE_OPEN: iconPrefix + 'arrow-right',
+  CASCADER_NODE_CLOSE: iconPrefix + 'arrow-right',
+  CASCADER_NODE_LOADED: iconPrefix + 'spinner roll'
 })
 
 export * from '@vxe-ui/core'

package/packages/ui/src/dom.ts

@@ -169,8 +169,9 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
   defaultPlacement?: '' | 'top' | 'bottom' | null
   teleportTo?: boolean
   marginSize?: number
+  isMinWidth?: boolean
 }) {
-  const { placement, defaultPlacement, teleportTo, marginSize } = Object.assign({ teleportTo: false, marginSize: 18 }, options)
+  const { placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({ teleportTo: false, marginSize: 18, isMinWidth: true }, options)
   let panelPlacement: 'top' | 'bottom' = 'bottom'
   let top: number | '' = ''
   let bottom: number | '' = ''
@@ -238,7 +239,7 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
       } else if (!placement) {
         // 如果下面不够放，则向上
         top = targetHeight
-        if (targetRect.top + targetRect.height + marginSize > visibleHeight) {
+        if (targetRect.top + targetHeight + panelHeight + marginSize > visibleHeight) {
           // 如果上面不够放，则向下（优先）
           if (targetRect.top - targetHeight - panelHeight > marginSize) {
             panelPlacement = 'top'
@@ -264,7 +265,7 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
     if (XEUtils.isNumber(right)) {
       stys.right = toCssUnit(right)
     }
-    if (XEUtils.isNumber(minWidth)) {
+    if (isMinWidth && XEUtils.isNumber(minWidth)) {
       stys.minWidth = toCssUnit(minWidth)
     }
   }

package/styles/components/cascader.scss

@@ -7,13 +7,14 @@
   width: 180px;
   color: var(--vxe-ui-font-color);
   text-align: left;
+  --vxe-ui-cascader-chunk-size: 1;
   & > .vxe-input {
     .vxe-input--inner {
       cursor: pointer;
     }
   }
   &.is--filterable {
-    .vxe-cascader-tree--wrapper {
+    .vxe-cascader-chunk--wrapper {
       padding-top: 0;
     }
     .vxe-cascader--panel-header {
@@ -56,35 +57,46 @@
 
 .vxe-cascader--panel {
   pointer-events: none;
-  @include placement.createPlacementPanel();
+  @include placement.createPlacementPanel(var(--vxe-ui-cascader-node-width));
 }
 
 .vxe-cascader--panel-search {
   display: block;
+  padding: var(--vxe-ui-current-padding);
+  width: calc(var(--vxe-ui-cascader-node-width) * var(--vxe-ui-cascader-chunk-size));
   .vxe-cascader-search--input {
     width: 100%;
   }
 }
 
-.vxe-cascader--header-button {
+.vxe-cascader--header-button,
+.vxe-cascader--footer-button {
   display: flex;
   flex-direction: row;
   white-space: nowrap;
 }
-.vxe-cascader--header-total {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
+.vxe-cascader--total-btns {
+  padding-left: var(--vxe-ui-current-padding);
   flex-shrink: 0;
-  padding-left: 0.8em;
 }
-.vxe-cascader--header-btns {
+.vxe-cascader--oper-btns {
   display: flex;
   flex-direction: row;
   flex-grow: 1;
   justify-content: right;
 }
+.vxe-cascader--footer-button,
+.vxe-cascader--selected-btns,
+.vxe-cascader--expand-btns {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+.vxe-cascader--selected-btns {
+  & + .vxe-cascader--expand-btns {
+    padding-left: 2.2em;
+  }
+}
 
 .vxe-cascader--panel-wrapper {
   display: flex;
@@ -97,14 +109,6 @@
   pointer-events: auto;
 }
 
-.vxe-cascader--panel-search {
-  display: block;
-  padding: var(--vxe-ui-layout-padding-default);
-  .vxe-cascader-search--input {
-    width: 100%;
-  }
-}
-
 .vxe-cascader--panel-header {
   border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
 }
@@ -118,12 +122,103 @@
   padding: 4px 0;
 }
 
-.vxe-cascader-tree--wrapper {
+.vxe-cascader--checkbox-option {
+  padding-right: 0.4em;
+  @include baseMixin.createCheckboxIcon();
+}
+.vxe-cascader--radio-option {
+  padding-right: 0.4em;
+  @include baseMixin.createRadioIcon();
+}
+
+.vxe-cascader--panel-body {
+  border-top: 1px solid var(--vxe-ui-base-popup-border-color)
+}
+
+.vxe-cascader-chunk--wrapper {
   position: relative;
-  overflow: auto;
-  padding: var(--vxe-ui-layout-padding-default);
+  display: flex;
+  flex-direction: row;
   outline: 0;
 }
+.vxe-cascader-chunk--item-wrapper {
+  flex-shrink: 0;
+  border-left: 1px solid var(--vxe-ui-base-popup-border-color);
+  padding: var(--vxe-ui-current-padding) 0;
+  &:first-child {
+    border-left: 0;
+  }
+  .vxe-list {
+    .vxe-list--virtual-wrapper {
+      height: var(--vxe-ui-cascader-chunk-height);
+      width: var(--vxe-ui-cascader-node-width);
+      overflow-x: hidden;
+      overflow-y: hidden;
+      &:hover {
+        overflow-y: auto;
+      }
+    }
+    .vxe-list--body {
+      width: var(--vxe-ui-cascader-node-width);
+    }
+  }
+}
+.vxe-cascader-chunk--node-item {
+  display: flex;
+  flex-direction: row;
+  height: var(--vxe-ui-cascader-node-height);
+  line-height: var(--vxe-ui-cascader-node-height);
+  padding: 0 calc(var(--vxe-ui-current-padding) + 18px) 0 var(--vxe-ui-current-padding);
+  cursor: pointer;
+  &:hover {
+    background-color: var(--vxe-ui-cascader-node-hover-background-color);
+  }
+  &.is--current,
+  &.is--expand {
+    font-weight: 700;
+  }
+  &.is--current {
+    background-color: var(--vxe-ui-cascader-node-current-background-color);
+  }
+  &.is-checkbox--indeterminate {
+    color: var(--vxe-ui-cascader-node-checkbox-indeterminate-color);
+  }
+  &.is-radio--checked,
+  &.is-checkbox--checked {
+    color: var(--vxe-ui-cascader-node-checkbox-checked-color);
+  }
+}
+.vxe-cascader-chunk--node-item-inner {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  flex-grow: 1;
+}
+.vxe-cascader-chunk--node-item-title {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vxe-cascader-chunk--node-item-switcher {
+  user-select: none;
+  flex-shrink: 0;
+  width: 1em;
+  position: relative;
+  .vxe-cascader--node-item-icon > i {
+    display: inline-block;
+    @include baseMixin.createAnimationTransition(transform, .2s);
+  }
+}
+
+.vxe-cascader,
+.vxe-cascader--panel {
+  --vxe-ui-current-padding: var(--vxe-ui-layout-padding-default);
+  &.size--small,
+  &.size--mini {
+    --vxe-ui-current-padding: var(--vxe-ui-layout-padding-half);
+  }
+}
 
 .vxe-cascader,
 .vxe-cascader--panel {

package/styles/components/list.scss

@@ -7,7 +7,8 @@
   direction: ltr;
   .vxe-list--virtual-wrapper {
     position: relative;
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: auto;
     outline: 0;
   }
   .vxe-list--y-space {

package/styles/components/splitter.scss

@@ -280,7 +280,9 @@
   &.is--hidden,
   &.is--width, 
   &.is--height {
-    flex-shrink: 0;
+    &:not(.is--fill) {
+      flex-shrink: 0;
+    }
   }
   &.is--border {
     & > .vxe-splitter-panel--wrapper {

package/styles/components/tree-select.scss

@@ -61,6 +61,7 @@
 
 .vxe-tree-select--panel-search {
   display: block;
+  padding: var(--vxe-ui-current-padding);
   .vxe-tree-select-search--input {
     width: 100%;
   }
@@ -106,14 +107,6 @@
   pointer-events: auto;
 }
 
-.vxe-tree-select--panel-search {
-  display: block;
-  padding: var(--vxe-ui-current-padding);
-  .vxe-tree-select-search--input {
-    width: 100%;
-  }
-}
-
 .vxe-tree-select--panel-header {
   border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
 }

package/styles/helpers/placement.scss

@@ -1,6 +1,6 @@
 @use './baseMixin.scss';
 
-@mixin createPlacementPanel {
+@mixin createPlacementPanel($minWidth: 100%) {
   display: none;
   position: absolute;
   left: 0;
@@ -8,7 +8,7 @@
   color: var(--vxe-ui-font-color);
   text-align: left;
   &:not(.is--transfer) {
-    min-width: 100%;
+    min-width: $minWidth;
   }
   &.is--transfer {
     position: fixed;

package/styles/theme/base.scss

@@ -214,4 +214,11 @@
   /*backtop*/
   --vxe-ui-backtop-right: 2em;
   --vxe-ui-backtop-bottom: 2em;
+
+  /*cascader*/
+  --vxe-ui-cascader-chunk-height: 12em;
+  --vxe-ui-cascader-node-width: 12em;
+  --vxe-ui-cascader-node-height: 2em;
+  --vxe-ui-cascader-node-checkbox-indeterminate-color: inherit;
+  --vxe-ui-cascader-node-checkbox-checked-color: var(--vxe-ui-font-primary-color);
 }

package/styles/theme/dark.scss

@@ -119,4 +119,13 @@
   --vxe-ui-splitter-handle-button-background-color: #9f9f9f;
   --vxe-ui-splitter-handle-bar-background-color: #444444;
   --vxe-ui-splitter-handle-bar-hover-background-color: #606060;
+
+  /*cascader*/
+  --vxe-ui-cascader-node-hover-background-color: #262727;
+  --vxe-ui-cascader-node-radio-checked-background-color: #604820;
+  --vxe-ui-cascader-node-hover-radio-checked-background-color: #6e5326;
+  --vxe-ui-cascader-node-checkbox-checked-background-color: #604820;
+  --vxe-ui-cascader-node-hover-checkbox-checked-background-color: #6e5326;
+  --vxe-ui-cascader-node-current-background-color: #18222c;
+  --vxe-ui-cascader-node-hover-current-background-color: #262727;
 }

package/styles/theme/light.scss

@@ -118,4 +118,13 @@
   --vxe-ui-splitter-handle-button-background-color: #{light_variable.$vxe-ui-splitter-handle-button-background-color};
   --vxe-ui-splitter-handle-bar-background-color: #{light_variable.$vxe-ui-splitter-handle-bar-background-color};
   --vxe-ui-splitter-handle-bar-hover-background-color: #{light_variable.$vxe-ui-splitter-handle-bar-hover-background-color};
+
+  /*cascader*/
+  --vxe-ui-cascader-node-hover-background-color: #{light_variable.$vxe-ui-cascader-node-hover-background-color};
+  --vxe-ui-cascader-node-radio-checked-background-color: #{light_variable.$vxe-ui-cascader-node-radio-checked-background-color};
+  --vxe-ui-cascader-node-hover-radio-checked-background-color: #{light_variable.$vxe-ui-cascader-node-hover-radio-checked-background-color};
+  --vxe-ui-cascader-node-checkbox-checked-background-color: #{light_variable.$vxe-ui-cascader-node-checkbox-checked-background-color};
+  --vxe-ui-cascader-node-hover-checkbox-checked-background-color: #{light_variable.$vxe-ui-cascader-node-hover-checkbox-checked-background-color};
+  --vxe-ui-cascader-node-current-background-color: #{light_variable.$vxe-ui-cascader-node-current-background-color};
+  --vxe-ui-cascader-node-hover-current-background-color: #{light_variable.$vxe-ui-cascader-node-hover-current-background-color};
 }

package/styles/variable.scss

@@ -112,3 +112,11 @@ $vxe-ui-splitter-handle-button-background-color: #8b8b8b;
 $vxe-ui-splitter-handle-bar-background-color: #e2e2e3;
 $vxe-ui-splitter-handle-bar-hover-background-color: #d8d8d8;
 
+/*cascader*/
+$vxe-ui-cascader-node-hover-background-color: #f5f7fa !default;
+$vxe-ui-cascader-node-radio-checked-background-color: #fff3e0 !default;
+$vxe-ui-cascader-node-hover-radio-checked-background-color: #ffebbc !default;
+$vxe-ui-cascader-node-checkbox-checked-background-color: #fff3e0 !default;
+$vxe-ui-cascader-node-hover-checkbox-checked-background-color: #ffebbc !default;
+$vxe-ui-cascader-node-current-background-color: #e6f7ff !default;
+$vxe-ui-cascader-node-hover-current-background-color: #d7effb !default;