vxe-pc-ui 4.18.2 → 4.18.4

package/es/number-input/src/number-input.js

@@ -4,7 +4,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui';
 import { getFuncText, eqEmptyValue, isEnableConf, getText } from '../../ui/src/utils';
 import { createComponentLog } from '../../ui/src/log';
-import { hasClass, getEventTargetNode, hasControlKey } from '../../ui/src/dom';
+import { hasClass, getEventTargetNode, hasControlKey, toCssUnit } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
 import { handleNumber, toFloatValueFixed } from './util';
 const { errLog } = createComponentLog('number-input');
@@ -57,6 +57,7 @@ export default defineVxeComponent({
             type: String,
             default: () => getConfig().numberInput.inputClassName
         },
+        width: [String, Number],
         size: {
             type: String,
             default: () => getConfig().numberInput.size || getConfig().size
@@ -324,6 +325,14 @@ export default defineVxeComponent({
             const { inputClassName } = props;
             return 'vxe-number-input--input' + (inputClassName ? (' ' + inputClassName) : '');
         });
+        const computeCurrStyle = computed(() => {
+            const { width } = props;
+            const stys = {};
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            return stys;
+        });
         const refMaps = {
             refElem,
             refInput: refInputTarget
@@ -1065,6 +1074,7 @@ export default defineVxeComponent({
                     class: ['vxe-number-input--readonly', `type--${type}`, className]
                 }, numLabel);
             }
+            const currStyle = computeCurrStyle.value;
             const inputReadonly = computeInputReadonly.value;
             const isClearable = computeIsClearable.value;
             const isControls = isEnableConf(controlOpts) && (controls === false ? controls : showButton);
@@ -1080,6 +1090,7 @@ export default defineVxeComponent({
                         'is--active': isActivated,
                         'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
                     }],
+                style: currStyle,
                 spellcheck: false,
                 onMouseenter: mouseenterEvent,
                 onMouseleave: mouseleaveEvent

package/es/password-input/src/password-input.js

@@ -4,6 +4,7 @@ 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';
 export default defineVxeComponent({
     name: 'VxePasswordInput',
     props: {
@@ -38,6 +39,7 @@ export default defineVxeComponent({
             type: String,
             default: () => getConfig().passwordInput.inputClassName
         },
+        width: [String, Number],
         size: {
             type: String,
             default: () => getConfig().passwordInput.size || getConfig().size
@@ -152,6 +154,14 @@ export default defineVxeComponent({
             const { inputValue } = reactData;
             return inputValue;
         });
+        const computeCurrStyle = computed(() => {
+            const { width } = props;
+            const stys = {};
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            return stys;
+        });
         const dispatchEvent = (type, params, evnt) => {
             emit(type, createEvent(evnt, { $passwordInput: $xePasswordInput }, params));
         };
@@ -349,6 +359,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;
@@ -368,6 +379,7 @@ export default defineVxeComponent({
                         'is--active': isActivated,
                         'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
                     }],
+                style: currStyle,
                 spellcheck: false
             }, [
                 prefix || renderEmptyElement($xePasswordInput),

package/es/select/src/select.js

@@ -105,6 +105,7 @@ export default defineVxeComponent({
          * @deprecated
          */
         popupClassName: [String, Function],
+        width: [String, Number],
         max: {
             type: [String, Number],
             default: null
@@ -330,6 +331,14 @@ export default defineVxeComponent({
         const computeMultiMaxCharNum = computed(() => {
             return XEUtils.toNumber(props.multiCharOverflow);
         });
+        const computeCurrStyle = computed(() => {
+            const { width } = props;
+            const stys = {};
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            return stys;
+        });
         const computePopupWrapperStyle = computed(() => {
             const popupOpts = computePopupOpts.value;
             const { height, width } = popupOpts;
@@ -1511,14 +1520,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,
@@ -1534,7 +1536,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) : '', {
@@ -1544,7 +1554,8 @@ export default defineVxeComponent({
                         'is--filter': filterable,
                         'is--loading': loading,
                         'is--active': isActivated
-                    }]
+                    }],
+                style: currStyle
             }, [
                 h('div', {
                     class: 'vxe-select-slots',

package/es/space/src/space.js

@@ -15,6 +15,7 @@ export default defineVxeComponent({
             type: Boolean,
             default: () => getConfig().space.wrap
         },
+        width: [Number, String],
         gap: {
             type: [Number, String, Array, Object],
             default: () => getConfig().space.gap
@@ -72,8 +73,8 @@ export default defineVxeComponent({
         const refMaps = {
             refElem
         };
-        const computeWrapperStyle = computed(() => {
-            const { align, gap } = props;
+        const computeCurrStyle = computed(() => {
+            const { align, gap, width } = props;
             const stys = {};
             let rowGap = '';
             let columGap = '';
@@ -91,6 +92,9 @@ export default defineVxeComponent({
                     columGap = gap.columGap || '';
                 }
             }
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
             if (align) {
                 stys['align-items'] = align;
             }
@@ -158,7 +162,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,
@@ -169,7 +173,7 @@ export default defineVxeComponent({
                         'is--fill': fill,
                         'is--width': itemWidth || itemMinWidth || itemMaxWidth
                     }],
-                style: wrapperStyle
+                style: currStyle
             }, renderItems());
         };
         $xeSpace.renderVN = renderVN;