vxe-pc-ui 4.14.39 → 4.14.40

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 | '' = ''
@@ -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;