vxe-pc-ui 3.18.2 → 3.18.4

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

@@ -3,6 +3,7 @@ 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';
 export default {
     name: 'VxePasswordInput',
     mixins: [
@@ -44,6 +45,7 @@ export default {
             type: String,
             default: () => getConfig().passwordInput.inputClassName
         },
+        width: [String, Number],
         size: {
             type: String,
             default: () => getConfig().passwordInput.size || getConfig().size
@@ -153,6 +155,16 @@ export default {
             const { editable } = props;
             const formReadonly = $xePasswordInput.computeFormReadonly;
             return formReadonly || !editable;
+        },
+        computeCurrStyle() {
+            const $xePasswordInput = this;
+            const props = $xePasswordInput;
+            const { width } = props;
+            const stys = {};
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            return stys;
         } }),
     methods: {
         //
@@ -413,6 +425,7 @@ export default {
                     class: ['vxe-password-input--readonly', className]
                 }, getText(inputValue));
             }
+            const currStyle = $xePasswordInput.computeCurrStyle;
             const vSize = $xePasswordInput.computeSize;
             const inputType = $xePasswordInput.computeInputType;
             const inpPlaceholder = $xePasswordInput.computeInpPlaceholder;
@@ -432,6 +445,7 @@ export default {
                         'is--active': isActivated,
                         'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
                     }],
+                style: currStyle,
                 attrs: {
                     spellcheck: false
                 }

package/es/select/src/select.js

@@ -111,6 +111,7 @@ export default {
          * @deprecated
          */
         popupClassName: [String, Function],
+        width: [String, Number],
         max: {
             type: [String, Number],
             default: null
@@ -372,6 +373,16 @@ export default {
             const props = $xeSelect;
             return XEUtils.toNumber(props.multiCharOverflow);
         },
+        computeCurrStyle() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const { width } = props;
+            const stys = {};
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            return stys;
+        },
         computePopupWrapperStyle() {
             const $xeSelect = this;
             const popupOpts = $xeSelect.computePopupOpts;
@@ -1793,13 +1804,7 @@ export default {
             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',
@@ -1817,7 +1822,14 @@ export default {
                     }, 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) : '', {
@@ -1827,7 +1839,8 @@ export default {
                         'is--filter': filterable,
                         'is--loading': loading,
                         'is--active': isActivated
-                    }]
+                    }],
+                style: currStyle
             }, [
                 h('div', {
                     class: 'vxe-select-slots',

package/es/space/src/space.js

@@ -18,6 +18,7 @@ export default {
             type: Boolean,
             default: () => getConfig().space.wrap
         },
+        width: [Number, String],
         gap: {
             type: [Number, String, Array, Object],
             default: () => getConfig().space.gap
@@ -73,10 +74,10 @@ export default {
             reactData
         };
     },
-    computed: Object.assign(Object.assign({}, {}), { computeWrapperStyle() {
+    computed: Object.assign(Object.assign({}, {}), { computeCurrStyle() {
             const $xeSpace = this;
             const props = $xeSpace;
-            const { align, gap } = props;
+            const { align, gap, width } = props;
             const stys = {};
             let rowGap = '';
             let columGap = '';
@@ -94,6 +95,9 @@ export default {
                     columGap = gap.columGap || '';
                 }
             }
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
             if (align) {
                 stys['align-items'] = align;
             }
@@ -158,7 +162,7 @@ export default {
             const $xeSpace = this;
             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',
@@ -169,7 +173,7 @@ export default {
                         'is--fill': fill,
                         'is--width': itemWidth || itemMinWidth || itemMaxWidth
                     }],
-                style: wrapperStyle
+                style: currStyle
             }, $xeSpace.renderItems(h));
         }
     },