vxe-pc-ui 4.17.1 → 4.17.2

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

@@ -1,8 +1,8 @@
-import { h, ref, computed, reactive, inject, nextTick, watch } from 'vue';
+import { h, ref, computed, reactive, inject, nextTick, watch, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, getIcon, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui';
-import { getFuncText } from '../../ui/src/utils';
+import { getFuncText, getText } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
 export default defineVxeComponent({
     name: 'VxePasswordInput',
@@ -40,6 +40,10 @@ export default defineVxeComponent({
             type: Boolean,
             default: () => getConfig().passwordInput.controls
         },
+        editable: {
+            type: Boolean,
+            default: true
+        },
         // 已废弃
         autocomplete: String
     },
@@ -80,14 +84,9 @@ export default defineVxeComponent({
             reactData,
             getRefMaps: () => refMaps
         };
-        let passwordInputMethods = {};
         const computeIsClearable = computed(() => {
             return props.clearable;
         });
-        const computeInpReadonly = computed(() => {
-            const { readonly } = props;
-            return readonly;
-        });
         const computeInpPlaceholder = computed(() => {
             const { placeholder } = props;
             if (placeholder) {
@@ -99,6 +98,32 @@ export default defineVxeComponent({
             }
             return getI18n('vxe.base.pleaseInput');
         });
+        const computeFormReadonly = computed(() => {
+            if (getConfig().inputReadonly === 'obsolete') {
+                if ($xeForm) {
+                    return $xeForm.props.readonly;
+                }
+                return false;
+            }
+            const { readonly } = props;
+            if (readonly === null) {
+                if ($xeForm) {
+                    return $xeForm.props.readonly;
+                }
+                return false;
+            }
+            return readonly;
+        });
+        const computeIsDisabled = computed(() => {
+            const { disabled } = props;
+            if (disabled === null) {
+                if ($xeForm) {
+                    return $xeForm.props.disabled;
+                }
+                return false;
+            }
+            return disabled;
+        });
         const computeInputType = computed(() => {
             const { showPwd } = reactData;
             if (showPwd) {
@@ -110,9 +135,28 @@ export default defineVxeComponent({
             const { immediate } = props;
             return immediate;
         });
+        const computeInputReadonly = computed(() => {
+            const { editable } = props;
+            const formReadonly = computeFormReadonly.value;
+            return formReadonly || !editable;
+        });
+        const computeDomValue = computed(() => {
+            const { inputValue } = reactData;
+            return inputValue;
+        });
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $passwordInput: $xePasswordInput }, params));
+        };
+        const updateDomValue = () => {
+            const domValue = computeDomValue.value;
+            const inputElem = refInputTarget.value;
+            if (inputElem) {
+                inputElem.value = XEUtils.eqNull(domValue) ? '' : ('' + domValue);
+            }
+        };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
-            passwordInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
+            dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
         const emitInputEvent = (value, evnt) => {
             const inpImmediate = computeInpImmediate.value;
@@ -121,7 +165,7 @@ export default defineVxeComponent({
                 handleChange(value, evnt);
             }
             else {
-                passwordInputMethods.dispatchEvent('input', { value }, evnt);
+                dispatchEvent('input', { value }, evnt);
             }
         };
         const inputEvent = (evnt) => {
@@ -132,9 +176,9 @@ export default defineVxeComponent({
         const handleChange = (value, evnt) => {
             reactData.inputValue = value;
             emit('update:modelValue', value);
-            passwordInputMethods.dispatchEvent('input', { value }, evnt);
+            dispatchEvent('input', { value }, evnt);
             if (XEUtils.toValueString(props.modelValue) !== value) {
-                passwordInputMethods.dispatchEvent('change', { value }, evnt);
+                dispatchEvent('change', { value }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -143,7 +187,7 @@ export default defineVxeComponent({
         };
         const changeEvent = (evnt) => {
             triggerEvent(evnt);
-            $xePasswordInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, reactData.inputValue);
@@ -157,19 +201,20 @@ export default defineVxeComponent({
             const { inputValue } = reactData;
             const value = inputValue;
             reactData.isActivated = false;
-            $xePasswordInput.dispatchEvent('blur', { value }, evnt);
+            dispatchEvent('blur', { value }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
             }
         };
         const passwordToggleEvent = (evnt) => {
-            const { readonly, disabled } = props;
             const { showPwd } = reactData;
-            if (!disabled && !readonly) {
+            const isDisabled = computeIsDisabled.value;
+            const formReadonly = computeFormReadonly.value;
+            if (!isDisabled && !formReadonly) {
                 reactData.showPwd = !showPwd;
             }
-            $xePasswordInput.dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt);
+            dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt);
         };
         const clickEvent = (evnt) => {
             triggerEvent(evnt);
@@ -177,23 +222,45 @@ export default defineVxeComponent({
         const clearValueEvent = (evnt, value) => {
             focus();
             handleChange('', evnt);
-            $xePasswordInput.dispatchEvent('clear', { value }, evnt);
-            $xePasswordInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('clear', { value }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
-            const { disabled } = props;
-            if (!disabled) {
+            const isDisabled = computeIsDisabled.value;
+            if (!isDisabled) {
                 const { inputValue } = reactData;
-                $xePasswordInput.dispatchEvent('suffix-click', { value: inputValue }, evnt);
+                dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         };
         const clickPrefixEvent = (evnt) => {
-            const { disabled } = props;
-            if (!disabled) {
+            const isDisabled = computeIsDisabled.value;
+            if (!isDisabled) {
                 const { inputValue } = reactData;
-                $xePasswordInput.dispatchEvent('prefix-click', { value: inputValue }, evnt);
+                dispatchEvent('prefix-click', { value: inputValue }, evnt);
             }
         };
+        const passwordInputMethods = {
+            dispatchEvent,
+            focus() {
+                const inputElem = refInputTarget.value;
+                reactData.isActivated = true;
+                inputElem.focus();
+                return nextTick();
+            },
+            blur() {
+                const inputElem = refInputTarget.value;
+                inputElem.blur();
+                reactData.isActivated = false;
+                return nextTick();
+            },
+            select() {
+                const inputElem = refInputTarget.value;
+                inputElem.select();
+                reactData.isActivated = false;
+                return nextTick();
+            }
+        };
+        Object.assign($xePasswordInput, passwordInputMethods);
         const renderPasswordIcon = () => {
             const { showPwd } = reactData;
             return h('div', {
@@ -226,14 +293,15 @@ export default defineVxeComponent({
                 : null;
         };
         const renderSuffixIcon = () => {
-            const { disabled, suffixIcon, controls } = props;
+            const { suffixIcon, controls } = props;
             const { inputValue } = reactData;
-            const suffixSlot = slots.suffix;
+            const isDisabled = computeIsDisabled.value;
             const isClearable = computeIsClearable.value;
+            const suffixSlot = slots.suffix;
             return isClearable || controls || suffixSlot || suffixIcon
                 ? h('div', {
                     class: ['vxe-password-input--suffix', {
-                            'is--clear': isClearable && !disabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+                            'is--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
                         }]
                 }, [
                     isClearable
@@ -262,41 +330,22 @@ export default defineVxeComponent({
                 ])
                 : null;
         };
-        passwordInputMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $passwordInput: $xePasswordInput }, params));
-            },
-            focus() {
-                const inputElem = refInputTarget.value;
-                reactData.isActivated = true;
-                inputElem.focus();
-                return nextTick();
-            },
-            blur() {
-                const inputElem = refInputTarget.value;
-                inputElem.blur();
-                reactData.isActivated = false;
-                return nextTick();
-            },
-            select() {
-                const inputElem = refInputTarget.value;
-                inputElem.select();
-                reactData.isActivated = false;
-                return nextTick();
-            }
-        };
-        Object.assign($xePasswordInput, passwordInputMethods);
-        watch(() => props.modelValue, (val) => {
-            reactData.inputValue = val;
-        });
         const renderVN = () => {
-            const { className, inputClassName, name, disabled, readonly, autocomplete, autoComplete, maxLength } = props;
+            const { className, inputClassName, name, readonly, autocomplete, autoComplete, maxLength } = props;
             const { inputValue, isActivated } = reactData;
+            const isDisabled = computeIsDisabled.value;
+            const formReadonly = computeFormReadonly.value;
+            if (formReadonly) {
+                return h('div', {
+                    ref: refElem,
+                    class: ['vxe-password-input--readonly', className]
+                }, getText(inputValue));
+            }
             const vSize = computeSize.value;
-            const inpReadonly = computeInpReadonly.value;
             const inputType = computeInputType.value;
             const inpPlaceholder = computeInpPlaceholder.value;
             const isClearable = computeIsClearable.value;
+            const inputReadonly = computeInputReadonly.value;
             const prefix = renderPrefixIcon();
             const suffix = renderSuffixIcon();
             return h('div', {
@@ -306,9 +355,9 @@ export default defineVxeComponent({
                         'is--prefix': !!prefix,
                         'is--suffix': !!suffix,
                         'is--readonly': readonly,
-                        'is--disabled': disabled,
+                        'is--disabled': isDisabled,
                         'is--active': isActivated,
-                        'show--clear': isClearable && !disabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+                        'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
                     }],
                 spellcheck: false
             }, [
@@ -319,12 +368,11 @@ export default defineVxeComponent({
                     h('input', {
                         ref: refInputTarget,
                         class: 'vxe-password-input--inner' + (inputClassName ? (' ' + inputClassName) : ''),
-                        value: inputValue,
                         name,
                         type: inputType,
                         placeholder: inpPlaceholder,
-                        readonly: inpReadonly,
-                        disabled,
+                        readonly: inputReadonly,
+                        disabled: isDisabled,
                         autocomplete: autocomplete || autoComplete,
                         maxlength: maxLength,
                         onClick: clickEvent,
@@ -337,6 +385,25 @@ export default defineVxeComponent({
                 suffix || renderEmptyElement($xePasswordInput)
             ]);
         };
+        watch(() => props.modelValue, (val) => {
+            reactData.inputValue = val;
+        });
+        const rDvFlag = ref(0);
+        watch(computeFormReadonly, () => {
+            rDvFlag.value++;
+        });
+        watch(computeDomValue, () => {
+            rDvFlag.value++;
+        });
+        watch(rDvFlag, () => {
+            updateDomValue();
+            nextTick(() => {
+                updateDomValue();
+            });
+        });
+        onMounted(() => {
+            updateDomValue();
+        });
         $xePasswordInput.renderVN = renderVN;
         return $xePasswordInput;
     },

package/es/password-input/style.css

@@ -23,6 +23,11 @@
   --vxe-ui-password-input-current-height: var(--vxe-ui-input-height-mini);
 }
 
+.vxe-password-input--readonly {
+  color: var(--vxe-ui-font-color);
+  display: inline-flex;
+}
+
 .vxe-password-input--wrapper {
   flex-grow: 1;
   overflow: hidden;

package/es/password-input/style.min.css

@@ -1 +1 @@
-.vxe-password-input{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-default)}.vxe-password-input.size--xlarge{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-xlarge)}.vxe-password-input.size--large{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-large)}.vxe-password-input.size--medium{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-medium)}.vxe-password-input.size--small{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-small)}.vxe-password-input.size--mini{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-mini)}.vxe-password-input--wrapper{flex-grow:1;overflow:hidden}.vxe-password-input--inner{display:block;width:100%;height:100%;outline:0;margin:0;font-size:inherit;font-family:inherit;line-height:inherit;padding:0 .5em;color:var(--vxe-ui-font-color);border:0;border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);box-shadow:none}.vxe-password-input--inner[disabled]{cursor:not-allowed;color:var(--vxe-ui-font-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-password-input--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-password-input--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-password-input--inner::-webkit-autofill{background-color:var(--vxe-ui-layout-background-color)}.vxe-password-input.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-password-input.is--disabled .vxe-password-input--clear-icon,.vxe-password-input.is--disabled .vxe-password-input--control-icon,.vxe-password-input.is--disabled .vxe-password-input--prefix,.vxe-password-input.is--disabled .vxe-password-input--suffix{cursor:not-allowed}.vxe-password-input.is--disabled .vxe-password-input--prefix,.vxe-password-input.is--disabled .vxe-password-input--suffix{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-password-input{display:inline-flex;flex-direction:row;position:relative;border-radius:var(--vxe-ui-base-border-radius);width:180px;border:1px solid var(--vxe-ui-input-border-color)}.vxe-password-input.is--active{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-password-input.show--clear:hover .vxe-password-input--clear-icon{display:block}.vxe-password-input--prefix,.vxe-password-input--suffix{display:flex;flex-direction:row;align-items:center;flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-password-input--prefix{border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-password-input--suffix{border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-password-input--clear-icon,.vxe-password-input--control-icon,.vxe-password-input--prefix-icon,.vxe-password-input--suffix-icon{color:var(--vxe-ui-input-placeholder-color)}.vxe-password-input--prefix-icon{padding-left:.5em}.vxe-password-input--clear-icon,.vxe-password-input--control-icon,.vxe-password-input--suffix-icon{padding-right:.5em}.vxe-password-input--clear-icon,.vxe-password-input--control-icon{height:100%;cursor:pointer}.vxe-password-input--clear-icon{display:none}.vxe-password-input--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-password-input--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-password-input--number-btn{height:50%;display:flex;align-items:center;justify-content:center}.vxe-password-input--number-btn:hover{color:var(--vxe-ui-font-color)}.vxe-password-input--number-btn:active{color:var(--vxe-ui-font-primary-color)}.vxe-password-input--number-icon{display:flex;flex-direction:column;height:100%}.vxe-password-input--number-icon .vxe-password-input--number-btn.is--disabled{cursor:no-drop;color:var(--vxe-ui-font-disabled-color)}.vxe-password-input--count{flex-shrink:0;color:var(--vxe-ui-input-count-color);background-color:var(--vxe-ui-layout-background-color);padding-right:.6em}.vxe-password-input--count.is--error{color:var(--vxe-ui-input-count-error-color)}.vxe-password-input.is--left .vxe-password-input--inner{text-align:left}.vxe-password-input.is--center .vxe-password-input--inner{text-align:center}.vxe-password-input.is--right .vxe-password-input--inner{text-align:right}.vxe-password-input--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);font-size:var(--vxe-ui-font-size-default);text-align:left}.vxe-password-input--panel:not(.is--transfer){min-width:100%}.vxe-password-input--panel.is--transfer{position:fixed}.vxe-password-input--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden;transform-style:preserve-3d}.vxe-password-input--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-password-input--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-password-input{font-size:var(--vxe-ui-password-input-current-font-size);height:var(--vxe-ui-password-input-current-height);line-height:var(--vxe-ui-password-input-current-height)}
+.vxe-password-input{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-default)}.vxe-password-input.size--xlarge{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-xlarge)}.vxe-password-input.size--large{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-large)}.vxe-password-input.size--medium{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-medium)}.vxe-password-input.size--small{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-small)}.vxe-password-input.size--mini{--vxe-ui-password-input-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-password-input-current-height:var(--vxe-ui-input-height-mini)}.vxe-password-input--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-password-input--wrapper{flex-grow:1;overflow:hidden}.vxe-password-input--inner{display:block;width:100%;height:100%;outline:0;margin:0;font-size:inherit;font-family:inherit;line-height:inherit;padding:0 .5em;color:var(--vxe-ui-font-color);border:0;border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);box-shadow:none}.vxe-password-input--inner[disabled]{cursor:not-allowed;color:var(--vxe-ui-font-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-password-input--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-password-input--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-password-input--inner::-webkit-autofill{background-color:var(--vxe-ui-layout-background-color)}.vxe-password-input.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-password-input.is--disabled .vxe-password-input--clear-icon,.vxe-password-input.is--disabled .vxe-password-input--control-icon,.vxe-password-input.is--disabled .vxe-password-input--prefix,.vxe-password-input.is--disabled .vxe-password-input--suffix{cursor:not-allowed}.vxe-password-input.is--disabled .vxe-password-input--prefix,.vxe-password-input.is--disabled .vxe-password-input--suffix{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-password-input{display:inline-flex;flex-direction:row;position:relative;border-radius:var(--vxe-ui-base-border-radius);width:180px;border:1px solid var(--vxe-ui-input-border-color)}.vxe-password-input.is--active{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-password-input.show--clear:hover .vxe-password-input--clear-icon{display:block}.vxe-password-input--prefix,.vxe-password-input--suffix{display:flex;flex-direction:row;align-items:center;flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-password-input--prefix{border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-password-input--suffix{border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-password-input--clear-icon,.vxe-password-input--control-icon,.vxe-password-input--prefix-icon,.vxe-password-input--suffix-icon{color:var(--vxe-ui-input-placeholder-color)}.vxe-password-input--prefix-icon{padding-left:.5em}.vxe-password-input--clear-icon,.vxe-password-input--control-icon,.vxe-password-input--suffix-icon{padding-right:.5em}.vxe-password-input--clear-icon,.vxe-password-input--control-icon{height:100%;cursor:pointer}.vxe-password-input--clear-icon{display:none}.vxe-password-input--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-password-input--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-password-input--number-btn{height:50%;display:flex;align-items:center;justify-content:center}.vxe-password-input--number-btn:hover{color:var(--vxe-ui-font-color)}.vxe-password-input--number-btn:active{color:var(--vxe-ui-font-primary-color)}.vxe-password-input--number-icon{display:flex;flex-direction:column;height:100%}.vxe-password-input--number-icon .vxe-password-input--number-btn.is--disabled{cursor:no-drop;color:var(--vxe-ui-font-disabled-color)}.vxe-password-input--count{flex-shrink:0;color:var(--vxe-ui-input-count-color);background-color:var(--vxe-ui-layout-background-color);padding-right:.6em}.vxe-password-input--count.is--error{color:var(--vxe-ui-input-count-error-color)}.vxe-password-input.is--left .vxe-password-input--inner{text-align:left}.vxe-password-input.is--center .vxe-password-input--inner{text-align:center}.vxe-password-input.is--right .vxe-password-input--inner{text-align:right}.vxe-password-input--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);font-size:var(--vxe-ui-font-size-default);text-align:left}.vxe-password-input--panel:not(.is--transfer){min-width:100%}.vxe-password-input--panel.is--transfer{position:fixed}.vxe-password-input--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden;transform-style:preserve-3d}.vxe-password-input--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-password-input--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-password-input{font-size:var(--vxe-ui-password-input-current-font-size);height:var(--vxe-ui-password-input-current-height);line-height:var(--vxe-ui-password-input-current-height)}