vxe-pc-ui 3.0.0 → 3.0.2

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

@@ -0,0 +1,402 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _utils = require("../../ui/src/utils");
+var _vn = require("../..//ui/src/vn");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _default2 = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxePasswordInput',
+  mixins: [_ui.globalMixins.sizeMixin],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: String,
+    name: String,
+    clearable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().passwordInput.clearable;
+      }
+    },
+    readonly: Boolean,
+    disabled: Boolean,
+    maxLength: [String, Number],
+    placeholder: String,
+    autoComplete: {
+      type: String,
+      default: 'off'
+    },
+    className: String,
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().passwordInput.size || (0, _ui.getConfig)().size;
+      }
+    },
+    prefixIcon: String,
+    suffixIcon: String,
+    // 已废弃
+    autocomplete: String
+  },
+  inject: {
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      showPwd: false,
+      isActivated: false,
+      inputValue: ''
+    };
+    return {
+      xID: xID,
+      reactData: reactData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeIsClearable: function computeIsClearable() {
+      var $xePasswordInput = this;
+      var props = $xePasswordInput;
+      return props.clearable;
+    },
+    computeInpReadonly: function computeInpReadonly() {
+      var $xePasswordInput = this;
+      var props = $xePasswordInput;
+      var readonly = props.readonly;
+      return readonly;
+    },
+    computeInpPlaceholder: function computeInpPlaceholder() {
+      var $xePasswordInput = this;
+      var props = $xePasswordInput;
+      var placeholder = props.placeholder;
+      if (placeholder) {
+        return (0, _utils.getFuncText)(placeholder);
+      }
+      var globalPlaceholder = (0, _ui.getConfig)().passwordInput.placeholder;
+      if (globalPlaceholder) {
+        return (0, _utils.getFuncText)(globalPlaceholder);
+      }
+      return (0, _ui.getI18n)('vxe.base.pleaseInput');
+    },
+    computeInputType: function computeInputType() {
+      var $xePasswordInput = this;
+      var reactData = $xePasswordInput.reactData;
+      var showPwd = reactData.showPwd;
+      if (showPwd) {
+        return 'text';
+      }
+      return 'password';
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xePasswordInput = this;
+      $xePasswordInput.$emit(type, (0, _ui.createEvent)(evnt, {
+        $passwordInput: $xePasswordInput
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeModal = this;
+      $xeModal.$emit('modelValue', value);
+    },
+    focus: function focus() {
+      var $xePasswordInput = this;
+      var reactData = $xePasswordInput.reactData;
+      var inputElem = $xePasswordInput.$refs.refInputTarget;
+      reactData.isActivated = true;
+      inputElem.focus();
+      return $xePasswordInput.$nextTick();
+    },
+    blur: function blur() {
+      var $xePasswordInput = this;
+      var reactData = $xePasswordInput.reactData;
+      var inputElem = $xePasswordInput.$refs.refInputTarget;
+      inputElem.blur();
+      reactData.isActivated = false;
+      return $xePasswordInput.$nextTick();
+    },
+    select: function select() {
+      var $xePasswordInput = this;
+      var reactData = $xePasswordInput.reactData;
+      var inputElem = $xePasswordInput.$refs.refInputTarget;
+      inputElem.select();
+      reactData.isActivated = false;
+      return $xePasswordInput.$nextTick();
+    },
+    triggerEvent: function triggerEvent(evnt) {
+      var $xePasswordInput = this;
+      var reactData = $xePasswordInput.reactData;
+      var inputValue = reactData.inputValue;
+      $xePasswordInput.dispatchEvent(evnt.type, {
+        value: inputValue
+      }, evnt);
+    },
+    emitInputEvent: function emitInputEvent(value, evnt) {
+      var $xePasswordInput = this;
+      var reactData = $xePasswordInput.reactData;
+      reactData.inputValue = value;
+      $xePasswordInput.dispatchEvent('input', {
+        value: value
+      }, evnt);
+    },
+    inputEvent: function inputEvent(evnt) {
+      var $xePasswordInput = this;
+      var inputElem = evnt.target;
+      var value = inputElem.value;
+      $xePasswordInput.emitInputEvent(value, evnt);
+    },
+    handleChange: function handleChange(value, evnt) {
+      var $xePasswordInput = this;
+      var props = $xePasswordInput;
+      var reactData = $xePasswordInput.reactData;
+      var $xeForm = $xePasswordInput.$xeForm;
+      var formItemInfo = $xePasswordInput.formItemInfo;
+      reactData.inputValue = value;
+      $xePasswordInput.emitModel(value);
+      $xePasswordInput.dispatchEvent('input', {
+        value: value
+      }, evnt);
+      if (_xeUtils.default.toValueString(props.value) !== value) {
+        $xePasswordInput.dispatchEvent('change', {
+          value: value
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+        }
+      }
+    },
+    changeEvent: function changeEvent(evnt) {
+      var $xePasswordInput = this;
+      var reactData = $xePasswordInput.reactData;
+      var $xeForm = $xePasswordInput.$xeForm;
+      var formItemInfo = $xePasswordInput.formItemInfo;
+      $xePasswordInput.triggerEvent(evnt);
+      var inputValue = reactData.inputValue;
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, inputValue);
+      }
+    },
+    focusEvent: function focusEvent(evnt) {
+      var $xePasswordInput = this;
+      var reactData = $xePasswordInput.reactData;
+      reactData.isActivated = true;
+      $xePasswordInput.triggerEvent(evnt);
+    },
+    blurEvent: function blurEvent(evnt) {
+      var $xePasswordInput = this;
+      var reactData = $xePasswordInput.reactData;
+      var inputValue = reactData.inputValue;
+      $xePasswordInput.dispatchEvent('blur', {
+        value: inputValue
+      }, evnt);
+    },
+    passwordToggleEvent: function passwordToggleEvent(evnt) {
+      var $xePasswordInput = this;
+      var props = $xePasswordInput;
+      var reactData = $xePasswordInput.reactData;
+      var readonly = props.readonly,
+        disabled = props.disabled;
+      var showPwd = reactData.showPwd;
+      if (!disabled && !readonly) {
+        reactData.showPwd = !showPwd;
+      }
+      $xePasswordInput.dispatchEvent('toggle-visible', {
+        visible: reactData.showPwd
+      }, evnt);
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xePasswordInput = this;
+      $xePasswordInput.triggerEvent(evnt);
+    },
+    clearValueEvent: function clearValueEvent(evnt, value) {
+      var $xePasswordInput = this;
+      $xePasswordInput.focus();
+      $xePasswordInput.handleChange('', evnt);
+      $xePasswordInput.dispatchEvent('clear', {
+        value: value
+      }, evnt);
+    },
+    clickSuffixEvent: function clickSuffixEvent(evnt) {
+      var $xePasswordInput = this;
+      var props = $xePasswordInput;
+      var reactData = $xePasswordInput.reactData;
+      var disabled = props.disabled;
+      if (!disabled) {
+        var inputValue = reactData.inputValue;
+        $xePasswordInput.dispatchEvent('suffix-click', {
+          value: inputValue
+        }, evnt);
+      }
+    },
+    clickPrefixEvent: function clickPrefixEvent(evnt) {
+      var $xePasswordInput = this;
+      var props = $xePasswordInput;
+      var reactData = $xePasswordInput.reactData;
+      var disabled = props.disabled;
+      if (!disabled) {
+        var inputValue = reactData.inputValue;
+        $xePasswordInput.dispatchEvent('prefix-click', {
+          value: inputValue
+        }, evnt);
+      }
+    },
+    //
+    // Render
+    //
+    renderPasswordIcon: function renderPasswordIcon(h) {
+      var $xePasswordInput = this;
+      var reactData = $xePasswordInput.reactData;
+      var showPwd = reactData.showPwd;
+      return h('div', {
+        class: 'password-input--control-icon',
+        on: {
+          click: $xePasswordInput.passwordToggleEvent
+        }
+      }, [h('i', {
+        class: ['password-input--password-icon', showPwd ? (0, _ui.getIcon)().PASSWORD_INPUT_SHOW_PWD : (0, _ui.getIcon)().PASSWORD_INPUT_HIDE_PWD]
+      })]);
+    },
+    renderPrefixIcon: function renderPrefixIcon(h) {
+      var $xePasswordInput = this;
+      var props = $xePasswordInput;
+      var slots = $xePasswordInput.$scopedSlots;
+      var prefixIcon = props.prefixIcon;
+      var prefixSlot = slots.prefix;
+      return prefixSlot || prefixIcon ? h('div', {
+        class: 'password-input--prefix',
+        on: {
+          click: $xePasswordInput.clickPrefixEvent
+        }
+      }, [h('div', {
+        class: 'password-input--prefix-icon'
+      }, prefixSlot ? (0, _vn.getSlotVNs)(prefixSlot({})) : [h('i', {
+        class: prefixIcon
+      })])]) : null;
+    },
+    renderSuffixIcon: function renderSuffixIcon(h) {
+      var $xePasswordInput = this;
+      var props = $xePasswordInput;
+      var slots = $xePasswordInput.$scopedSlots;
+      var reactData = $xePasswordInput.reactData;
+      var disabled = props.disabled,
+        suffixIcon = props.suffixIcon;
+      var inputValue = reactData.inputValue;
+      var suffixSlot = slots.suffix;
+      var isClearable = $xePasswordInput.computeIsClearable;
+      return isClearable || suffixSlot || suffixIcon ? h('div', {
+        class: ['password-input--suffix', {
+          'is--clear': isClearable && !disabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue))
+        }]
+      }, [isClearable ? h('div', {
+        class: 'password-input--clear-icon',
+        on: {
+          click: $xePasswordInput.clearValueEvent
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().INPUT_CLEAR
+      })]) : (0, _ui.renderEmptyElement)($xePasswordInput), $xePasswordInput.renderExtraSuffixIcon(h), suffixSlot || suffixIcon ? h('div', {
+        class: 'password-input--suffix-icon',
+        on: {
+          click: $xePasswordInput.clickSuffixEvent
+        }
+      }, suffixSlot ? (0, _vn.getSlotVNs)(suffixSlot({})) : [h('i', {
+        class: suffixIcon
+      })]) : (0, _ui.renderEmptyElement)($xePasswordInput)]) : null;
+    },
+    renderExtraSuffixIcon: function renderExtraSuffixIcon(h) {
+      var $xePasswordInput = this;
+      return $xePasswordInput.renderPasswordIcon(h);
+    },
+    renderVN: function renderVN(h) {
+      var $xePasswordInput = this;
+      var props = $xePasswordInput;
+      var reactData = $xePasswordInput.reactData;
+      var className = props.className,
+        name = props.name,
+        disabled = props.disabled,
+        readonly = props.readonly,
+        autocomplete = props.autocomplete,
+        autoComplete = props.autoComplete,
+        maxLength = props.maxLength;
+      var inputValue = reactData.inputValue,
+        isActivated = reactData.isActivated;
+      var vSize = $xePasswordInput.computeSize;
+      var inpReadonly = $xePasswordInput.computeInpReadonly;
+      var inputType = $xePasswordInput.computeInputType;
+      var inpPlaceholder = $xePasswordInput.computeInpPlaceholder;
+      var isClearable = $xePasswordInput.computeIsClearable;
+      var prefix = $xePasswordInput.renderPrefixIcon(h);
+      var suffix = $xePasswordInput.renderSuffixIcon(h);
+      return h('div', {
+        ref: 'refElem',
+        class: ['password-input', className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--prefix', !!prefix), 'is--suffix', !!suffix), 'is--readonly', readonly), 'is--disabled', disabled), 'is--active', isActivated), 'show--clear', isClearable && !disabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue)))],
+        attrs: {
+          spellcheck: false
+        }
+      }, [prefix || (0, _ui.renderEmptyElement)($xePasswordInput), h('div', {
+        class: 'password-input--wrapper'
+      }, [h('input', {
+        ref: 'refInputTarget',
+        class: 'password-input--inner',
+        domProps: {
+          value: inputValue
+        },
+        attrs: {
+          name: name,
+          type: inputType,
+          placeholder: inpPlaceholder,
+          readonly: inpReadonly,
+          disabled: disabled,
+          autocomplete: autocomplete || autoComplete,
+          maxlength: maxLength
+        },
+        on: {
+          click: $xePasswordInput.clickEvent,
+          input: $xePasswordInput.inputEvent,
+          change: $xePasswordInput.changeEvent,
+          focus: $xePasswordInput.focusEvent,
+          blur: $xePasswordInput.blurEvent
+        }
+      })]), suffix || (0, _ui.renderEmptyElement)($xePasswordInput)]);
+    }
+  },
+  watch: {
+    value: function value(val) {
+      var $xePasswordInput = this;
+      var reactData = $xePasswordInput.reactData;
+      reactData.inputValue = val;
+    }
+  },
+  created: function created() {
+    var $xePasswordInput = this;
+    var props = $xePasswordInput;
+    var reactData = $xePasswordInput.reactData;
+    reactData.inputValue = props.value;
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});

package/lib/password-input/src/password-input.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_vn=require("../..//ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _defineProperty(e,t,i){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var i=e[Symbol.toPrimitive];if(void 0===i)return("string"===t?String:Number)(e);i=i.call(e,t||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxePasswordInput",mixins:[_ui.globalMixins.sizeMixin],model:{prop:"value",event:"modelValue"},props:{value:String,name:String,clearable:{type:Boolean,default:function(){return(0,_ui.getConfig)().passwordInput.clearable}},readonly:Boolean,disabled:Boolean,maxLength:[String,Number],placeholder:String,autoComplete:{type:String,default:"off"},className:String,size:{type:String,default:function(){return(0,_ui.getConfig)().passwordInput.size||(0,_ui.getConfig)().size}},prefixIcon:String,suffixIcon:String,autocomplete:String},inject:{$xeForm:{default:null},formItemInfo:{from:"xeFormItemInfo",default:null}},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{showPwd:!1,isActivated:!1,inputValue:""}}},computed:Object.assign(Object.assign({},{}),{computeIsClearable:function(){return this.clearable},computeInpReadonly:function(){return this.readonly},computeInpPlaceholder:function(){var e=this.placeholder;return(e=e||(0,_ui.getConfig)().passwordInput.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseInput")},computeInputType:function(){return this.reactData.showPwd?"text":"password"}}),methods:{dispatchEvent:function(e,t,i){this.$emit(e,(0,_ui.createEvent)(i,{$passwordInput:this},t))},emitModel:function(e){this.$emit("modelValue",e)},focus:function(){var e=this,t=e.reactData,i=e.$refs.refInputTarget;return t.isActivated=!0,i.focus(),e.$nextTick()},blur:function(){var e=this,t=e.reactData;return e.$refs.refInputTarget.blur(),t.isActivated=!1,e.$nextTick()},select:function(){var e=this,t=e.reactData;return e.$refs.refInputTarget.select(),t.isActivated=!1,e.$nextTick()},triggerEvent:function(e){var t=this.reactData.inputValue;this.dispatchEvent(e.type,{value:t},e)},emitInputEvent:function(e,t){this.reactData.inputValue=e,this.dispatchEvent("input",{value:e},t)},inputEvent:function(e){var t=e.target.value;this.emitInputEvent(t,e)},handleChange:function(e,t){var i=this,n=i,r=i.reactData,a=i.$xeForm,u=i.formItemInfo;r.inputValue=e,i.emitModel(e),i.dispatchEvent("input",{value:e},t),_xeUtils.default.toValueString(n.value)!==e&&(i.dispatchEvent("change",{value:e},t),a)&&u&&a.triggerItemEvent(t,u.itemConfig.field,e)},changeEvent:function(e){var t=this.reactData,i=this.$xeForm,n=this.formItemInfo,t=(this.triggerEvent(e),t.inputValue);i&&n&&i.triggerItemEvent(e,n.itemConfig.field,t)},focusEvent:function(e){this.reactData.isActivated=!0,this.triggerEvent(e)},blurEvent:function(e){var t=this.reactData.inputValue;this.dispatchEvent("blur",{value:t},e)},passwordToggleEvent:function(e){var t=this.reactData,i=this.readonly,n=this.disabled,r=t.showPwd;n||i||(t.showPwd=!r),this.dispatchEvent("toggle-visible",{visible:t.showPwd},e)},clickEvent:function(e){this.triggerEvent(e)},clearValueEvent:function(e,t){this.focus(),this.handleChange("",e),this.dispatchEvent("clear",{value:t},e)},clickSuffixEvent:function(e){var t=this.reactData;this.disabled||(t=t.inputValue,this.dispatchEvent("suffix-click",{value:t},e))},clickPrefixEvent:function(e){var t=this.reactData;this.disabled||(t=t.inputValue,this.dispatchEvent("prefix-click",{value:t},e))},renderPasswordIcon:function(e){var t=this.reactData.showPwd;return e("div",{class:"password-input--control-icon",on:{click:this.passwordToggleEvent}},[e("i",{class:["password-input--password-icon",t?(0,_ui.getIcon)().PASSWORD_INPUT_SHOW_PWD:(0,_ui.getIcon)().PASSWORD_INPUT_HIDE_PWD]})])},renderPrefixIcon:function(e){var t=this.$scopedSlots,i=this.prefixIcon,t=t.prefix;return t||i?e("div",{class:"password-input--prefix",on:{click:this.clickPrefixEvent}},[e("div",{class:"password-input--prefix-icon"},t?(0,_vn.getSlotVNs)(t({})):[e("i",{class:i})])]):null},renderSuffixIcon:function(e){var t=this,i=t.$scopedSlots,n=t.disabled,r=t.suffixIcon,a=t.reactData.inputValue,i=i.suffix,u=t.computeIsClearable;return u||i||r?e("div",{class:["password-input--suffix",{"is--clear":u&&!n&&!(""===a||_xeUtils.default.eqNull(a))}]},[u?e("div",{class:"password-input--clear-icon",on:{click:t.clearValueEvent}},[e("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]):(0,_ui.renderEmptyElement)(t),t.renderExtraSuffixIcon(e),i||r?e("div",{class:"password-input--suffix-icon",on:{click:t.clickSuffixEvent}},i?(0,_vn.getSlotVNs)(i({})):[e("i",{class:r})]):(0,_ui.renderEmptyElement)(t)]):null},renderExtraSuffixIcon:function(e){return this.renderPasswordIcon(e)},renderVN:function(e){var t=this,i=t.reactData,n=t.className,r=t.name,a=t.disabled,u=t.readonly,o=t.autocomplete,s=t.autoComplete,c=t.maxLength,l=i.inputValue,i=i.isActivated,p=t.computeSize,f=t.computeInpReadonly,d=t.computeInputType,v=t.computeInpPlaceholder,h=t.computeIsClearable,m=t.renderPrefixIcon(e),g=t.renderSuffixIcon(e);return e("div",{ref:"refElem",class:["password-input",n,_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"size--".concat(p),p),"is--prefix",!!m),"is--suffix",!!g),"is--readonly",u),"is--disabled",a),"is--active",i),"show--clear",h&&!a&&!(""===l||_xeUtils.default.eqNull(l)))],attrs:{spellcheck:!1}},[m||(0,_ui.renderEmptyElement)(t),e("div",{class:"password-input--wrapper"},[e("input",{ref:"refInputTarget",class:"password-input--inner",domProps:{value:l},attrs:{name:r,type:d,placeholder:v,readonly:f,disabled:a,autocomplete:o||s,maxlength:c},on:{click:t.clickEvent,input:t.inputEvent,change:t.changeEvent,focus:t.focusEvent,blur:t.blurEvent}})]),g||(0,_ui.renderEmptyElement)(t)])}},watch:{value:function(e){this.reactData.inputValue=e}},created:function(){this.reactData.inputValue=this.value},render:function(e){return this.renderVN(e)}});

package/lib/password-input/style/index.js

@@ -0,0 +1 @@
+require('./style.css')