vxe-pc-ui 3.14.17 → 3.14.19

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

@@ -5,13 +5,13 @@ import { getConfig, getI18n, getIcon, globalEvents, createEvent, globalMixins, r
 import { getEventTargetNode, updatePanelPlacement, toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { deNodeValue } from '../../tree/src/util'
-import { errLog } from '../../ui/src/log'
+import { warnLog, errLog } from '../../ui/src/log'
 import VxeInputComponent from '../../input'
 import VxeButtonComponent from '../../button'
 import VxeTreeComponent from '../../tree'
 import { getSlotVNs } from '../../ui/src/vn'
 
-import type { TreeSelectReactData, VxeTreeSelectEmits, TreeSelectInternalData, VxeComponentSizeType, VxeButtonDefines, VxeTreeDefines, ValueOf, VxeComponentStyleType, VxeTreeSelectPropTypes, VxeFormDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeInputConstructor, VxeTreeConstructor } from '../../../types'
+import type { TreeSelectReactData, VxeTreeSelectEmits, TreeSelectInternalData, VxeComponentSizeType, VxeButtonDefines, VxeInputDefines, VxeTreeDefines, ValueOf, VxeComponentStyleType, VxeTreeSelectPropTypes, VxeFormDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeInputConstructor, VxeTreeConstructor } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 function getOptUniqueId () {
@@ -95,10 +95,26 @@ export default /* define-vxe-component start */ defineVxeComponent({
     treeConfig: Object as PropType<VxeTreeSelectPropTypes.TreeConfig>,
     menuConfig: Object as PropType<VxeTreeSelectPropTypes.MenuConfig>,
     virtualYConfig: Object as PropType<VxeTreeSelectPropTypes.VirtualYConfig>,
+    /**
+     * 已废弃，被 checked-closable, clear-closable 替换
+     * @deprecated
+     */
     autoClose: {
       type: Boolean as PropType<VxeTreeSelectPropTypes.AutoClose>,
       default: () => getConfig().treeSelect.autoClose
     },
+    checkedClosable: {
+      type: Boolean as PropType<VxeTreeSelectPropTypes.CheckedClosable>,
+      default: () => getConfig().treeSelect.checkedClosable
+    },
+    clearClosable: {
+      type: Boolean as PropType<VxeTreeSelectPropTypes.ClearClosable>,
+      default: () => getConfig().treeSelect.clearClosable
+    },
+    showCloseButton: {
+      type: Boolean as PropType<VxeTreeSelectPropTypes.ShowCloseButton>,
+      default: () => getConfig().treeSelect.showCloseButton
+    },
     showTotalButoon: {
       type: Boolean as PropType<VxeTreeSelectPropTypes.ShowTotalButoon>,
       default: () => getConfig().treeSelect.showTotalButoon
@@ -517,9 +533,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }, 10)
         $xeTreeSelect.updateZindex()
         $xeTreeSelect.updatePlacement()
+        $xeTreeSelect.dispatchEvent('visible-change', { visible: true }, null)
       }
     },
-    hideOptionPanel () {
+    hideOptionPanel (evnt?: Event) {
       const $xeTreeSelect = this
       const reactData = $xeTreeSelect.reactData
       const internalData = $xeTreeSelect.internalData
@@ -528,6 +545,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       internalData.hpTimeout = setTimeout(() => {
         reactData.isAniVisible = false
       }, 350)
+      $xeTreeSelect.dispatchEvent('visible-change', { visible: false }, evnt || null)
     },
     changeEvent (evnt: Event, selectValue: any, node: any) {
       const $xeTreeSelect = this
@@ -551,26 +569,27 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeTreeSelect.changeEvent(evnt, selectValue, null)
       $xeTreeSelect.dispatchEvent('clear', { value: selectValue }, evnt)
     },
-    clearEvent  (params: any, evnt: Event) {
+    clearEvent  (params: VxeInputDefines.ClearEventParams) {
       const $xeTreeSelect = this
 
-      $xeTreeSelect.clearValueEvent(evnt, null)
-      $xeTreeSelect.hideOptionPanel()
+      const { $event } = params
+      $xeTreeSelect.clearValueEvent($event, null)
+      $xeTreeSelect.hideOptionPanel($event)
     },
     allCheckedPanelEvent (params: VxeButtonDefines.ClickEventParams) {
       const $xeTreeSelect = this
       const props = $xeTreeSelect
 
       const { $event } = params
-      const { multiple, autoClose } = props
+      const { multiple, autoClose, checkedClosable } = props
       const $tree = $xeTreeSelect.$refs.refTree as VxeTreeConstructor
       if (multiple) {
         if ($tree) {
           $tree.setAllCheckboxNode(true).then(({ checkNodeKeys, checkNodes }) => {
             $xeTreeSelect.changeEvent($event, checkNodeKeys, checkNodes[0])
             $xeTreeSelect.dispatchEvent('all-change', { value: checkNodeKeys }, $event)
-            if (autoClose) {
-              $xeTreeSelect.hideOptionPanel()
+            if (XEUtils.isBoolean(autoClose) ? autoClose : checkedClosable) {
+              $xeTreeSelect.hideOptionPanel($event)
             }
           })
         }
@@ -581,19 +600,25 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeTreeSelect
 
       const { $event } = params
-      const { multiple, autoClose } = props
+      const { multiple, autoClose, clearClosable } = props
       const $tree = $xeTreeSelect.$refs.refTree as VxeTreeConstructor
       if ($tree) {
         const value = multiple ? [] : null
         $tree.clearCheckboxNode().then(() => {
-          if (autoClose) {
-            $xeTreeSelect.hideOptionPanel()
+          if (XEUtils.isBoolean(autoClose) ? autoClose : clearClosable) {
+            $xeTreeSelect.hideOptionPanel($event)
           }
         })
         $xeTreeSelect.changeEvent($event, value, null)
         $xeTreeSelect.dispatchEvent('clear', { value }, $event)
       }
     },
+    closePanelEvent (params: VxeButtonDefines.ClickEventParams) {
+      const $xeTreeSelect = this
+
+      const { $event } = params
+      $xeTreeSelect.hideOptionPanel($event)
+    },
     allExpandPanelEvent () {
       const $xeTreeSelect = this
 
@@ -622,7 +647,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           if (getEventTargetNode(evnt, panelElem).flag) {
             $xeTreeSelect.updatePlacement()
           } else {
-            $xeTreeSelect.hideOptionPanel()
+            $xeTreeSelect.hideOptionPanel(evnt)
           }
         }
       }
@@ -638,17 +663,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
         const panelElem = $xeTreeSelect.$refs.refOptionPanel as HTMLElement
         reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
         if (visiblePanel && !reactData.isActivated) {
-          $xeTreeSelect.hideOptionPanel()
+          $xeTreeSelect.hideOptionPanel(evnt)
         }
       }
     },
-    handleGlobalBlurEvent () {
+    handleGlobalBlurEvent (evnt: Event) {
       const $xeTreeSelect = this
       const reactData = $xeTreeSelect.reactData
 
       const { visiblePanel, isActivated } = reactData
       if (visiblePanel) {
-        $xeTreeSelect.hideOptionPanel()
+        $xeTreeSelect.hideOptionPanel(evnt)
       }
       if (isActivated) {
         reactData.isActivated = false
@@ -747,7 +772,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         reactData.triggerFocusPanel = false
       } else {
         if (reactData.visiblePanel) {
-          $xeTreeSelect.hideOptionPanel()
+          $xeTreeSelect.hideOptionPanel($event)
         } else {
           $xeTreeSelect.showOptionPanel()
         }
@@ -769,7 +794,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { value, $event, node } = params
       $xeTreeSelect.changeEvent($event, value, node)
-      $xeTreeSelect.hideOptionPanel()
+      $xeTreeSelect.hideOptionPanel($event)
     },
     checkboxChangeEvent (params: VxeTreeDefines.CheckboxChangeEventParams) {
       const $xeTreeSelect = this
@@ -792,7 +817,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const slots = $xeTreeSelect.$scopedSlots
       const reactData = $xeTreeSelect.reactData
 
-      const { className, value: modelValue, multiple, options, loading, menuConfig, filterable, showTotalButoon, showCheckedButoon, showClearButton, showExpandButton } = props
+      const { className, value: modelValue, multiple, options, loading, menuConfig, filterable, showTotalButoon, showCheckedButoon, showClearButton, showExpandButton, showCloseButton } = props
       const { initialized, isActivated, isAniVisible, visiblePanel, searchValue } = reactData
       const vSize = $xeTreeSelect.computeSize
       const isDisabled = $xeTreeSelect.computeIsDisabled
@@ -923,7 +948,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                     })
                   ])
                   : renderEmptyElement($xeTreeSelect),
-                showTotalButoon || (showCheckedButoon && multiple) || showClearButton || showExpandButton || headerSlot
+                (showCheckedButoon && multiple) || showClearButton || showExpandButton || headerSlot
                   ? h('div', {
                     class: 'vxe-tree-select--panel-header'
                   }, headerSlot
@@ -1053,7 +1078,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                     })
                   ])
                 ]),
-                footerSlot || showTotalButoon
+                footerSlot || showTotalButoon || (showCloseButton && multiple)
                   ? h('div', {
                     class: 'vxe-tree-select--panel-footer'
                   }, footerSlot
@@ -1066,6 +1091,21 @@ export default /* define-vxe-component start */ defineVxeComponent({
                             ? h('div', {
                               class: 'vxe-tree-select--total-btns'
                             }, getI18n('vxe.treeSelect.total', [selectVals.length]))
+                            : renderEmptyElement($xeTreeSelect),
+                          showCloseButton && multiple
+                            ? h('div', {
+                              class: 'vxe-tree-select--oper-btns'
+                            }, [
+                              h(VxeButtonComponent, {
+                                props: {
+                                  content: getI18n('vxe.select.close'),
+                                  mode: 'text'
+                                },
+                                on: {
+                                  click: $xeTreeSelect.closePanelEvent
+                                }
+                              })
+                            ])
                             : renderEmptyElement($xeTreeSelect)
                         ])
                       ])
@@ -1090,7 +1130,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
   },
   mounted () {
     const $xeTreeSelect = this
+    const props = $xeTreeSelect
 
+    if (XEUtils.isBoolean(props.autoClose)) {
+      warnLog('vxe.error.delProp', ['auto-close', 'checked-closable | clear-closable'])
+    }
     globalEvents.on($xeTreeSelect, 'mousewheel', $xeTreeSelect.handleGlobalMousewheelEvent)
     globalEvents.on($xeTreeSelect, 'mousedown', $xeTreeSelect.handleGlobalMousedownEvent)
     globalEvents.on($xeTreeSelect, 'blur', $xeTreeSelect.handleGlobalBlurEvent)

package/packages/ui/index.ts

@@ -323,6 +323,14 @@ setConfig({
   segmented: {},
   select: {
     multiCharOverflow: 8,
+    radioConfig: {
+      showIcon: true,
+      trigger: 'option'
+    },
+    checkboxConfig: {
+      showIcon: true,
+      trigger: 'option'
+    },
     remoteConfig: {
       enabled: true,
       autoLoad: true
@@ -417,7 +425,7 @@ setConfig({
     }
   },
   treeSelect: {
-    autoClose: true,
+    autoClose: null as any,
     virtualYConfig: {
       enabled: true,
       gt: 0,

package/styles/components/select.scss

@@ -85,20 +85,28 @@
   display: flex;
   flex-direction: row;
 }
-.vxe-select--header-total {
+
+.vxe-select--header-button,
+.vxe-select--footer-button {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  justify-content: center;
+  white-space: nowrap;
+}
+.vxe-select--total-btns {
+  padding-left: var(--vxe-ui-current-padding);
   flex-shrink: 0;
-  padding-left: 0.8em;
 }
-.vxe-select--header-btns {
+.vxe-select--oper-btns {
   display: flex;
   flex-direction: row;
   flex-grow: 1;
   justify-content: right;
 }
+.vxe-select--footer-button {
+  display: flex;
+  flex-direction: row;
+}
+
 
 .vxe-select--panel-header {
   border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -133,11 +141,9 @@
 }
 .vxe-select-option {
   position: relative;
+  flex-direction: row;
+  display: flex;
   padding: 0 0.6em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   user-select: none;
   cursor: pointer;
   &.is--add {
@@ -156,7 +162,7 @@
   }
   &:not(.is--disabled) {
     &.is--hover {
-      background-color: var(--vxe-ui-base-hover-background-color);
+      background-color: var(--vxe-ui-select-option-hover-background-color);
     }
   }
   &.is--disabled {
@@ -170,6 +176,12 @@
   cursor: default;
 }
 
+.vxe-select-option--label {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .vxe-select-option--add-icon {
   display: none;
   position: absolute;
@@ -177,6 +189,15 @@
   right: 0.6em;
 }
 
+.vxe-select-option--checkbox {
+  padding-right: 0.4em;
+  @include baseMixin.createCheckboxIcon();
+}
+.vxe-select-option--radio {
+  padding-right: 0.4em;
+  @include baseMixin.createRadioIcon();
+}
+
 .vxe-select--search-icon {
   margin-right: 0.5em;
 }
@@ -202,6 +223,15 @@
   }
 }
 
+.vxe-select,
+.vxe-select--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-select--panel {
   .vxe-select-option {
     height: var(--vxe-ui-select-option-height-default);

package/styles/components/tree-select.scss

@@ -74,6 +74,13 @@
 }
 .vxe-tree-select--total-btns {
   padding-left: var(--vxe-ui-current-padding);
+  flex-shrink: 0;
+}
+.vxe-tree-select--oper-btns {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: right;
 }
 .vxe-tree-select--footer-button,
 .vxe-tree-select--selected-btns,

package/styles/theme/dark.scss

@@ -96,6 +96,9 @@
   /*switch*/
   --vxe-ui-switch-close-background-color: #4C4D4F;
   
+  /*select*/
+  --vxe-ui-select-option-hover-background-color: #262727;
+
   /*upload*/
   --vxe-ui-upload-drag-over-background-color:rgba(48, 48, 0, 0.8);
 

package/styles/theme/light.scss

@@ -94,6 +94,9 @@
 
   /*switch*/
   --vxe-ui-switch-close-background-color: #{light_variable.$vxe-ui-switch-close-background-color};
+  
+  /*select*/
+  --vxe-ui-select-option-hover-background-color: #{light_variable.$vxe-ui-select-option-hover-background-color};
 
   /*upload*/
   --vxe-ui-upload-drag-over-background-color:#{light_variable.$vxe-ui-upload-drag-over-background-color};

package/styles/variable.scss

@@ -88,6 +88,9 @@ $vxe-ui-list-design-table-header-background-color: #f8f8f9 !default;
 /*switch*/
 $vxe-ui-switch-close-background-color: rgba(0,0,0,0.35) !default;
 
+/*select*/
+$vxe-ui-select-option-hover-background-color: #f5f7fa !default;
+
 /*upload*/
 $vxe-ui-upload-drag-over-background-color:rgba(255,255,200,0.8) !default;
 

package/types/components/select.d.ts

@@ -36,6 +36,9 @@ export namespace VxeSelectPropTypes {
   export type Readonly = boolean
   export type Loading = boolean
   export type Disabled = boolean
+  export type CheckedClosable = boolean
+  export type ClearClosable = boolean
+  export type ShowCloseButton = boolean
   export type ShowTotalButoon = boolean
   export type ShowCheckedButoon = boolean
   export type ShowClearButton = boolean
@@ -63,6 +66,16 @@ export namespace VxeSelectPropTypes {
     label?: string
     key?: string
   }
+  export type ShowRadio = boolean
+  export interface RadioConfig {
+    showIcon?: boolean
+    trigger?: '' | 'default' | 'icon' | 'option'
+  }
+  export type ShowCheckbox = boolean
+  export interface CheckboxConfig {
+    showIcon?: boolean
+    trigger?: '' | 'default' | 'icon' | 'option'
+  }
   export type Filterable = boolean
   export type FilterMethod = (params: {
     $select: VxeSelectConstructor
@@ -187,6 +200,9 @@ export interface VxeSelectProps {
   readonly?: VxeSelectPropTypes.Readonly
   loading?: VxeSelectPropTypes.Loading
   disabled?: VxeSelectPropTypes.Disabled
+  checkedClosable?: VxeSelectPropTypes.CheckedClosable
+  clearClosable?: VxeSelectPropTypes.ClearClosable
+  showCloseButton?: VxeSelectPropTypes.ShowCloseButton
   showTotalButoon?: VxeSelectPropTypes.ShowTotalButoon
   showCheckedButoon?: VxeSelectPropTypes.ShowCheckedButoon
   showClearButton?: VxeSelectPropTypes.ShowClearButton
@@ -208,6 +224,10 @@ export interface VxeSelectProps {
   optionGroupProps?: VxeSelectPropTypes.OptionGroupProps
   optionConfig?: VxeSelectPropTypes.OptionConfig
   emptyText?: VxeSelectPropTypes.EmptyText
+  showRadio?: VxeSelectPropTypes.ShowRadio
+  radioConfig?: VxeSelectPropTypes.RadioConfig
+  showCheckbox?: VxeSelectPropTypes.ShowCheckbox
+  checkboxConfig?: VxeSelectPropTypes.CheckboxConfig
   /**
    * 是否启用本地筛选
    */

package/types/components/table.d.ts

@@ -408,6 +408,10 @@ export namespace VxeTablePropTypes {
      * 分组列展示方式
      */
     mode?: 'column' | 'default' | '' | null
+    /**
+     * 显示位置
+     */
+    placement?: 'left' | 'right' | 'top' | 'bottom' | 'default' | '' | null
     /**
      * 按指定字段对数据进行分组
      */

package/types/components/tree-select.d.ts

@@ -29,7 +29,14 @@ export namespace VxeTreeSelectPropTypes {
   export type Readonly = boolean
   export type Loading = boolean
   export type Disabled = boolean
+  /**
+   * 已废弃，被 CheckedClosable, ClearClosable 替换
+   * @deprecated
+   */
   export type AutoClose = boolean
+  export type CheckedClosable = boolean
+  export type ClearClosable = boolean
+  export type ShowCloseButton = boolean
   export type ShowTotalButoon = boolean
   export type ShowCheckedButoon = boolean
   export type ShowExpandButton = boolean
@@ -146,7 +153,14 @@ export interface VxeTreeSelectProps<D = any> {
   readonly?: VxeTreeSelectPropTypes.Readonly
   loading?: VxeTreeSelectPropTypes.Loading
   disabled?: VxeTreeSelectPropTypes.Disabled
+  /**
+   * 已废弃，被 checked-closable, clear-closable 替换
+   * @deprecated
+   */
   autoClose?: VxeTreeSelectPropTypes.AutoClose
+  checkedClosable?: VxeTreeSelectPropTypes.CheckedClosable
+  clearClosable?: VxeTreeSelectPropTypes.ClearClosable
+  showCloseButton?: VxeTreeSelectPropTypes.ShowCloseButton
   showTotalButoon?: VxeTreeSelectPropTypes.ShowTotalButoon
   showCheckedButoon?: VxeTreeSelectPropTypes.ShowCheckedButoon
   showClearButton?: VxeTreeSelectPropTypes.ShowClearButton
@@ -230,7 +244,8 @@ export type VxeTreeSelectEmits = [
   'blur',
   'focus',
   'click',
-  'node-click'
+  'node-click',
+  'visible-change'
 ]
 
 export namespace VxeTreeSelectDefines {
@@ -250,6 +265,9 @@ export namespace VxeTreeSelectDefines {
   export interface FocusEventParams extends TreeSelectEventParams { }
   export interface BlurEventParams extends TreeSelectEventParams { }
   export interface ClickEventParams extends TreeSelectEventParams { }
+  export interface VisibleChangeEventParams extends TreeSelectEventParams {
+    visible: boolean
+  }
 }
 
 export interface VxeTreeSelectEventProps<D = any> {
@@ -258,6 +276,7 @@ export interface VxeTreeSelectEventProps<D = any> {
   onFocus?: VxeTreeSelectEvents.Focus
   onBlur?: VxeTreeSelectEvents.Blur
   onClick?: VxeTreeSelectEvents.Click
+  onVisibleChange?: VxeTreeSelectEvents.VisibleChange
 }
 
 export interface VxeTreeSelectListeners<D = any> {
@@ -266,6 +285,7 @@ export interface VxeTreeSelectListeners<D = any> {
   focus?: VxeTreeSelectEvents.Focus
   blur?: VxeTreeSelectEvents.Blur
   click?: VxeTreeSelectEvents.Click
+  visibleChange?: VxeTreeSelectEvents.VisibleChange
 }
 
 export namespace VxeTreeSelectEvents {
@@ -274,6 +294,7 @@ export namespace VxeTreeSelectEvents {
   export type Focus = (params: VxeTreeSelectDefines.FocusEventParams) => void
   export type Blur = (params: VxeTreeSelectDefines.BlurEventParams) => void
   export type Click = (params: VxeTreeSelectDefines.ClickEventParams) => void
+  export type VisibleChange = (params: VxeTreeSelectDefines.VisibleChangeEventParams) => void
 }
 
 export namespace VxeTreeSelectSlotTypes {