vxe-pc-ui 4.18.2 → 4.18.4

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

@@ -4,8 +4,9 @@ import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getFuncText, getText } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
+import { toCssUnit } from '../../ui/src/dom'
 
-import type { VxePasswordInputConstructor, VxePasswordInputEmits, PasswordInputReactData, PasswordInputMethods, VxePasswordInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf } from '../../../types'
+import type { VxePasswordInputConstructor, VxePasswordInputEmits, PasswordInputReactData, PasswordInputMethods, VxePasswordInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeComponentStyleType } from '../../../types'
 
 export default defineVxeComponent({
   name: 'VxePasswordInput',
@@ -41,6 +42,7 @@ export default 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,15 @@ export default defineVxeComponent({
       return inputValue
     })
 
+    const computeCurrStyle = computed(() => {
+      const { width } = props
+      const stys: VxeComponentStyleType = {}
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
+      return stys
+    })
+
     const dispatchEvent = (type: ValueOf<VxePasswordInputEmits>, params: Record<string, any>, evnt: Event | null) => {
       emit(type, createEvent(evnt, { $passwordInput: $xePasswordInput }, params))
     }
@@ -386,6 +397,7 @@ export default defineVxeComponent({
           class: ['vxe-password-input--readonly', className]
         }, getText(inputValue))
       }
+      const currStyle = computeCurrStyle.value
       const vSize = computeSize.value
       const inputType = computeInputType.value
       const inpPlaceholder = computeInpPlaceholder.value
@@ -405,6 +417,7 @@ export default defineVxeComponent({
           'is--active': isActivated,
           'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
         }],
+        style: currStyle,
         spellcheck: false
       }, [
         prefix || renderEmptyElement($xePasswordInput),

package/packages/select/src/select.ts

@@ -118,6 +118,7 @@ export default 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
@@ -372,6 +373,15 @@ export default defineVxeComponent({
       return XEUtils.toNumber(props.multiCharOverflow)
     })
 
+    const computeCurrStyle = computed(() => {
+      const { width } = props
+      const stys: VxeComponentStyleType = {}
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
+      return stys
+    })
+
     const computePopupWrapperStyle = computed(() => {
       const popupOpts = computePopupOpts.value
       const { height, width } = popupOpts
@@ -1617,14 +1627,7 @@ export default defineVxeComponent({
       const btnTransfer = computeBtnTransfer.value
       const formReadonly = computeFormReadonly.value
       const inpPlaceholder = computeInpPlaceholder.value
-      const popupWrapperStyle = computePopupWrapperStyle.value
-      const popupOpts = computePopupOpts.value
-      const { appendTo } = popupOpts
       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,
@@ -1640,7 +1643,15 @@ export default defineVxeComponent({
           }, selectLabel)
         ])
       }
+      const currStyle = computeCurrStyle.value
       const selectVals = computeSelectVals.value
+      const popupWrapperStyle = computePopupWrapperStyle.value
+      const popupOpts = computePopupOpts.value
+      const headerSlot = slots.header
+      const footerSlot = slots.footer
+      const prefixSlot = slots.prefix
+      const { appendTo } = popupOpts
+      const ppClassName = popupOpts.className || props.popupClassName
       return h('div', {
         ref: refElem,
         class: ['vxe-select', className ? (XEUtils.isFunction(className) ? className({ $select: $xeSelect }) : className) : '', {
@@ -1650,7 +1661,8 @@ export default defineVxeComponent({
           'is--filter': filterable,
           'is--loading': loading,
           'is--active': isActivated
-        }]
+        }],
+        style: currStyle
       }, [
         h('div', {
           class: 'vxe-select-slots',

package/packages/space/src/space.ts

@@ -18,6 +18,7 @@ export default 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
@@ -81,8 +82,8 @@ export default defineVxeComponent({
       refElem
     }
 
-    const computeWrapperStyle = computed(() => {
-      const { align, gap } = props
+    const computeCurrStyle = computed(() => {
+      const { align, gap, width } = props
       const stys: VxeComponentStyleType = {}
       let rowGap: string | number = ''
       let columGap: string | number = ''
@@ -98,6 +99,9 @@ export default defineVxeComponent({
           columGap = gap.columGap || ''
         }
       }
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
       if (align) {
         stys['align-items'] = align
       }
@@ -180,7 +184,7 @@ export default defineVxeComponent({
 
     const renderVN = () => {
       const { vertical, wrap, className, fill, itemWidth, itemMinWidth, itemMaxWidth } = props
-      const wrapperStyle = computeWrapperStyle.value
+      const currStyle = computeCurrStyle.value
       const vSize = computeSize.value
       return h('div', {
         ref: refElem,
@@ -191,7 +195,7 @@ export default defineVxeComponent({
           'is--fill': fill,
           'is--width': itemWidth || itemMinWidth || itemMaxWidth
         }],
-        style: wrapperStyle
+        style: currStyle
       }, renderItems())
     }
 

package/packages/ui/index.ts

@@ -529,7 +529,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

@@ -89,6 +89,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 {
     /**
@@ -187,6 +190,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

@@ -28,6 +28,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
@@ -90,6 +91,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

@@ -31,6 +31,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
@@ -150,6 +151,7 @@ export interface VxeDatePickerProps {
   modelValue?: 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

@@ -33,6 +33,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
@@ -135,6 +136,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

@@ -27,6 +27,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
@@ -107,6 +108,7 @@ export type VxeIconPickerProps = {
    * @deprecated
    */
   popupClassName?: VxeIconPickerPropTypes.PopupClassName
+  width?: VxeIconPickerPropTypes.Width
   readonly?: VxeIconPickerPropTypes.Readonly
   disabled?: VxeIconPickerPropTypes.Disabled
   icons?: VxeIconPickerPropTypes.Icons

package/types/components/input.d.ts

@@ -28,6 +28,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
@@ -99,6 +100,10 @@ export interface VxeInputProps {
   modelValue?: 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

@@ -28,6 +28,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'
@@ -129,6 +130,10 @@ export interface VxeNumberInputProps {
   modelValue?: 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

@@ -28,6 +28,7 @@ export namespace VxePasswordInputPropTypes {
   export type Immediate = boolean
   export type ClassName = string
   export type InputClassName = string
+  export type Width = string | number
   export type Name = string
   export type Clearable = boolean
   export type Readonly = boolean
@@ -54,6 +55,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

@@ -51,6 +51,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
@@ -223,6 +224,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

@@ -25,6 +25,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
@@ -44,6 +45,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