vxe-pc-ui 3.18.2 → 3.18.4

package/packages/password-input/src/password-input.ts

@@ -4,8 +4,9 @@ import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, createEvent, globalMixins, renderEmptyElement } from '../../ui'
 import { getFuncText, getText } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
+import { toCssUnit } from '../../ui/src/dom'
 
-import type { VxePasswordInputEmits, VxeComponentSizeType, PasswordInputReactData, ValueOf, VxePasswordInputPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+import type { VxePasswordInputEmits, VxeComponentSizeType, PasswordInputReactData, ValueOf, VxePasswordInputPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, VxeComponentStyleType } from '../../../types'
 
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxePasswordInput',
@@ -48,6 +49,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: String as PropType<VxePasswordInputPropTypes.InputClassName>,
       default: () => getConfig().passwordInput.inputClassName
     },
+    width: [String, Number] as PropType<VxePasswordInputPropTypes.Width>,
     size: {
       type: String as PropType<VxePasswordInputPropTypes.Size>,
       default: () => getConfig().passwordInput.size || getConfig().size
@@ -171,6 +173,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { editable } = props
       const formReadonly = $xePasswordInput.computeFormReadonly
       return formReadonly || !editable
+    },
+    computeCurrStyle () {
+      const $xePasswordInput = this
+      const props = $xePasswordInput
+
+      const { width } = props
+      const stys: VxeComponentStyleType = {}
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
+      return stys
     }
   },
   methods: {
@@ -451,6 +464,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           class: ['vxe-password-input--readonly', className]
         }, getText(inputValue))
       }
+      const currStyle = $xePasswordInput.computeCurrStyle
       const vSize = $xePasswordInput.computeSize
       const inputType = $xePasswordInput.computeInputType
       const inpPlaceholder = $xePasswordInput.computeInpPlaceholder
@@ -470,6 +484,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           'is--active': isActivated,
           'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
         }],
+        style: currStyle,
         attrs: {
           spellcheck: false
         }

package/packages/select/src/select.ts

@@ -125,6 +125,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
      * @deprecated
      */
     popupClassName: [String, Function] as PropType<VxeSelectPropTypes.PopupClassName>,
+    width: [String, Number] as PropType<VxeSelectPropTypes.Width>,
     max: {
       type: [String, Number] as PropType<VxeSelectPropTypes.Max>,
       default: null
@@ -424,6 +425,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       return XEUtils.toNumber(props.multiCharOverflow)
     },
+    computeCurrStyle () {
+      const $xeSelect = this
+      const props = $xeSelect
+
+      const { width } = props
+      const stys: VxeComponentStyleType = {}
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
+      return stys
+    },
     computePopupWrapperStyle () {
       const $xeSelect = this
 
@@ -1904,13 +1916,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const btnTransfer = $xeSelect.computeBtnTransfer
       const formReadonly = $xeSelect.computeFormReadonly
       const inpPlaceholder = $xeSelect.computeInpPlaceholder
-      const popupOpts = $xeSelect.computePopupOpts
-      const popupWrapperStyle = $xeSelect.computePopupWrapperStyle
       const defaultSlot = slots.default
-      const headerSlot = slots.header
-      const footerSlot = slots.footer
-      const prefixSlot = slots.prefix
-      const ppClassName = popupOpts.className || props.popupClassName
       if (formReadonly) {
         return h('div', {
           ref: 'refElem',
@@ -1928,7 +1934,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
           }, selectLabel)
         ])
       }
+      const currStyle = $xeSelect.computeCurrStyle
       const selectVals = $xeSelect.computeSelectVals
+      const popupOpts = $xeSelect.computePopupOpts
+      const popupWrapperStyle = $xeSelect.computePopupWrapperStyle
+      const headerSlot = slots.header
+      const footerSlot = slots.footer
+      const prefixSlot = slots.prefix
+      const ppClassName = popupOpts.className || props.popupClassName
       return h('div', {
         ref: 'refElem',
         class: ['vxe-select', className ? (XEUtils.isFunction(className) ? className({ $select: $xeSelect }) : className) : '', {
@@ -1938,7 +1951,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
           'is--filter': filterable,
           'is--loading': loading,
           'is--active': isActivated
-        }]
+        }],
+        style: currStyle
       }, [
         h('div', {
           class: 'vxe-select-slots',

package/packages/space/src/space.ts

@@ -22,6 +22,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: Boolean as PropType<VxeSpacePropTypes.Wrap>,
       default: () => getConfig().space.wrap
     },
+    width: [Number, String] as PropType<VxeSpacePropTypes.Width>,
     gap: {
       type: [Number, String, Array, Object] as PropType<VxeSpacePropTypes.Gap>,
       default: () => getConfig().space.gap
@@ -82,11 +83,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
       computePermissionInfo(): VxeComponentPermissionInfo
       computeSize(): VxeComponentSizeType
     }),
-    computeWrapperStyle () {
+    computeCurrStyle () {
       const $xeSpace = this
       const props = $xeSpace
 
-      const { align, gap } = props
+      const { align, gap, width } = props
       const stys: VxeComponentStyleType = {}
       let rowGap: string | number = ''
       let columGap: string | number = ''
@@ -102,6 +103,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
           columGap = gap.columGap || ''
         }
       }
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
       if (align) {
         stys['align-items'] = align
       }
@@ -174,7 +178,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeSpace
 
       const { vertical, wrap, className, fill, itemWidth, itemMinWidth, itemMaxWidth } = props
-      const wrapperStyle = $xeSpace.computeWrapperStyle
+      const currStyle = $xeSpace.computeCurrStyle
       const vSize = $xeSpace.computeSize
       return h('div', {
         ref: 'refElem',
@@ -185,7 +189,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           'is--fill': fill,
           'is--width': itemWidth || itemMinWidth || itemMaxWidth
         }],
-        style: wrapperStyle
+        style: currStyle
       }, $xeSpace.renderItems(h))
     }
   },

package/packages/ui/index.ts

@@ -528,7 +528,8 @@ setIcon({
   LOADING: iconPrefix + 'spinner roll vxe-loading--default-icon',
 
   // button
-  BUTTON_DROPDOWN: iconPrefix + 'arrow-down',
+  BUTTON_DROPDOWN_OPEN: iconPrefix + 'arrow-down rotate180',
+  BUTTON_DROPDOWN_CLOSE: iconPrefix + 'arrow-down',
   BUTTON_LOADING: iconPrefix + 'spinner roll',
   BUTTON_TOOLTIP_ICON: iconPrefix + 'question-circle-fill',
 

package/styles/components/button.scss

@@ -291,13 +291,10 @@
         }
       }
     }
-    .vxe-button--dropdown-arrow {
-      transform: rotate(180deg);
-    }
   }
 }
 
-.vxe-button--dropdown-arrow {
+.vxe-button--dropdown-icon {
   display: inline-block;
   font-size: 12px;
   margin-left: 4px;

package/types/components/button.d.ts

@@ -81,6 +81,9 @@ export namespace VxeButtonPropTypes {
   export type SuffixTooltip = VxeTooltipDefines.TooltipHelperOption
 
   export type ShowDropdownIcon = boolean
+  export type DropdownOpenIcon = string
+  export type DropdownCloseIcon = string
+
   export type DestroyOnClose = boolean
   export interface PopupConfig {
     /**
@@ -179,6 +182,8 @@ export interface VxeButtonProps {
   prefixTooltip?: VxeButtonPropTypes.PrefixTooltip
   suffixTooltip?: VxeButtonPropTypes.SuffixTooltip
   showDropdownIcon?: VxeButtonPropTypes.ShowDropdownIcon
+  dropdownOpenIcon?: VxeButtonPropTypes.DropdownOpenIcon
+  dropdownCloseIcon?: VxeButtonPropTypes.DropdownCloseIcon
   /**
    * 在下拉面板关闭时销毁内容
    */

package/types/components/color-picker.d.ts

@@ -21,6 +21,7 @@ export namespace VxeColorPickerPropTypes {
   export type Type = 'rgb' | 'hex'
   export type ClassName = string | ((params: { $colorPicker: VxeColorPickerConstructor }) => string)
   export type PopupClassName = string | ((params: {$colorPicker: VxeColorPickerConstructor }) => string)
+  export type Width = string | number
   export type Colors = string[] | {
     label?: string
     value: string
@@ -83,6 +84,7 @@ export interface VxeColorPickerProps {
   type?: VxeColorPickerPropTypes.Type
   className?: VxeColorPickerPropTypes.ClassName
   popupClassName?: VxeColorPickerPropTypes.PopupClassName
+  width?: VxeColorPickerPropTypes.Width
   colors?: VxeColorPickerPropTypes.Colors
   showAlpha?: VxeColorPickerPropTypes.ShowAlpha
   showEyeDropper?: VxeColorPickerPropTypes.ShowEyeDropper

package/types/components/date-picker.d.ts

@@ -23,6 +23,7 @@ export namespace VxeDatePickerPropTypes {
   export type ModelValue = string | number | Date | null
   export type ClassName = string
   export type InputClassName = string
+  export type Width = string | number
   export type Immediate = boolean
   export type Name = string
   export type Type = VxeDatePanelPropTypes.Type
@@ -142,6 +143,7 @@ export interface VxeDatePickerProps {
   value?: VxeDatePickerPropTypes.ModelValue
   className?: VxeDatePickerPropTypes.ClassName
   inputClassName?: VxeDatePickerPropTypes.InputClassName
+  width?: VxeDatePickerPropTypes.Width
   immediate?: VxeDatePickerPropTypes.Immediate
   name?: VxeDatePickerPropTypes.Name
   type?: VxeDatePickerPropTypes.Type

package/types/components/date-range-picker.d.ts

@@ -25,6 +25,7 @@ export namespace VxeDateRangePickerPropTypes {
   export type EndValue = string | number | Date | null
   export type ClassName = string
   export type InputClassName = string
+  export type Width = string | number
   export type Immediate = boolean
   export type Name = string
   export type Type = VxeDatePanelPropTypes.Type
@@ -127,6 +128,7 @@ export interface VxeDateRangePickerProps {
   endValue?: VxeDateRangePickerPropTypes.EndValue
   className?: VxeDateRangePickerPropTypes.ClassName
   inputClassName?: VxeDateRangePickerPropTypes.InputClassName
+  width?: VxeDateRangePickerPropTypes.Width
   immediate?: VxeDateRangePickerPropTypes.Immediate
   name?: VxeDateRangePickerPropTypes.Name
   type?: VxeDateRangePickerPropTypes.Type

package/types/components/icon-picker.d.ts

@@ -20,6 +20,7 @@ export namespace VxeIconPickerPropTypes {
   export type ModelValue = string | null
   export type Placeholder = string
   export type Size = VxeComponentSizeType
+  export type Width = string | number
   export type ClassName = string | ((params: { $iconPicker: VxeIconPickerConstructor }) => string)
   /**
    * 已废弃，请使用 PopupConfig.className
@@ -100,6 +101,7 @@ export interface VxeIconPickerProps {
    * @deprecated
    */
   popupClassName?: VxeIconPickerPropTypes.PopupClassName
+  width?: VxeIconPickerPropTypes.Width
   readonly?: VxeIconPickerPropTypes.Readonly
   disabled?: VxeIconPickerPropTypes.Disabled
   icons?: VxeIconPickerPropTypes.Icons

package/types/components/input.d.ts

@@ -20,6 +20,7 @@ export namespace VxeInputPropTypes {
   export type ModelValue = string | number | Date | undefined | null
   export type ClassName = string
   export type InputClassName = string
+  export type Width = string | number
   export type Immediate = boolean
   export type Name = string
   export type Title = string
@@ -91,6 +92,10 @@ export interface VxeInputProps {
   value?: VxeInputPropTypes.ModelValue
   className?: VxeInputPropTypes.ClassName
   inputClassName?: VxeInputPropTypes.InputClassName
+  /**
+   * 宽度
+   */
+  width?: VxeInputPropTypes.Width
   immediate?: VxeInputPropTypes.Immediate
   name?: VxeInputPropTypes.Name
   title?: VxeInputPropTypes.Title

package/types/components/number-input.d.ts

@@ -21,6 +21,7 @@ export namespace VxeNumberInputPropTypes {
   export type ModelValue = string | number | null
   export type ClassName = string
   export type InputClassName = string
+  export type Width = string | number
   export type Immediate = boolean
   export type Name = string
   export type Type = 'number' | 'integer' | 'float' | 'amount'
@@ -122,6 +123,10 @@ export interface VxeNumberInputProps {
   value?: VxeNumberInputPropTypes.ModelValue
   className?: VxeNumberInputPropTypes.ClassName
   inputClassName?: VxeNumberInputPropTypes.InputClassName
+  /**
+   * 宽度
+   */
+  width?: VxeNumberInputPropTypes.Width
   immediate?: VxeNumberInputPropTypes.Immediate
   name?: VxeNumberInputPropTypes.Name
   type?: VxeNumberInputPropTypes.Type

package/types/components/password-input.d.ts

@@ -21,6 +21,7 @@ export namespace VxePasswordInputPropTypes {
   export type Immediate = boolean
   export type InputClassName = string
   export type ClassName = string
+  export type Width = string | number
   export type Name = string
   export type Clearable = boolean
   export type Readonly = boolean
@@ -47,6 +48,10 @@ export interface VxePasswordInputProps {
   immediate?: VxePasswordInputPropTypes.Immediate
   className?: VxePasswordInputPropTypes.ClassName
   inputClassName?: VxePasswordInputPropTypes.InputClassName
+  /**
+   * 宽度
+   */
+  width?: VxePasswordInputPropTypes.Width
   name?: VxePasswordInputPropTypes.Name
   clearable?: VxePasswordInputPropTypes.Clearable
   readonly?: VxePasswordInputPropTypes.Readonly

package/types/components/select.d.ts

@@ -44,6 +44,7 @@ export namespace VxeSelectPropTypes {
   export type ShowCheckedButton = boolean
   export type ShowClearButton = boolean
   export type ClassName = string | ((params: { $select: VxeSelectConstructor }) => string)
+  export type Width = string | number
   /**
    * 已废弃，请使用 PopupConfig.className
    * @deprecated
@@ -216,6 +217,10 @@ export interface VxeSelectProps {
   showCheckedButton?: VxeSelectPropTypes.ShowCheckedButton
   showClearButton?: VxeSelectPropTypes.ShowClearButton
   className?: VxeSelectPropTypes.ClassName
+  /**
+   * 宽度
+   */
+  width?: VxeSelectPropTypes.Width
   /**
    * 已废弃，请使用 popup-config.className
    * @deprecated

package/types/components/space.d.ts

@@ -18,6 +18,7 @@ export interface VxeSpacePrivateRef extends SpacePrivateRef { }
 export namespace VxeSpacePropTypes {
   export type Size = VxeComponentSizeType
   export type Wrap = boolean
+  export type Width = string | number
   export type Gap = number | string | number[] | VxeSpaceDefines.GapObj
   export type Vertical = boolean
   export type ClassName = string
@@ -37,6 +38,10 @@ export interface VxeSpaceProps {
    * 是否自动换行
    */
   wrap?: VxeSpacePropTypes.Wrap
+  /**
+   * 宽度
+   */
+  width?: VxeSpacePropTypes.Width
   /**
    * 自定义间距
    */

package/types/ui/global-icon.d.ts

@@ -68,7 +68,8 @@ declare module '@vxe-ui/core' {
     LOADING?: string
 
     // button
-    BUTTON_DROPDOWN?: string
+    BUTTON_DROPDOWN_OPEN?: string
+    BUTTON_DROPDOWN_CLOSE?: string
     BUTTON_LOADING?: string
     BUTTON_TOOLTIP_ICON?: string