vxe-pc-ui 0.0.2 → 0.1.0

package/lib/switch/src/switch.js

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _globalStore = _interopRequireDefault(require("../../ui/src/globalStore"));
+var _size = require("../../hooks/size");
+var _utils = require("../../ui/src/utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxeSwitch',
+  props: {
+    modelValue: [String, Number, Boolean],
+    disabled: Boolean,
+    size: {
+      type: String,
+      default: () => _globalStore.default.switch.size || _globalStore.default.size
+    },
+    openLabel: String,
+    closeLabel: String,
+    openValue: {
+      type: [String, Number, Boolean],
+      default: true
+    },
+    closeValue: {
+      type: [String, Number, Boolean],
+      default: false
+    },
+    openIcon: String,
+    closeIcon: String
+  },
+  emits: ['update:modelValue', 'change', 'focus', 'blur'],
+  setup(props, context) {
+    const {
+      emit
+    } = context;
+    const $xeform = (0, _vue.inject)('$xeForm', null);
+    const $xeformiteminfo = (0, _vue.inject)('$xeFormItemInfo', null);
+    const xID = _xeUtils.default.uniqueId();
+    const computeSize = (0, _size.useSize)(props);
+    const reactData = (0, _vue.reactive)({
+      isActivated: false,
+      hasAnimat: false,
+      offsetLeft: 0
+    });
+    const $xeswitch = {
+      xID,
+      props,
+      context,
+      reactData
+    };
+    const refButton = (0, _vue.ref)();
+    let switchMethods = {};
+    const computeOnShowLabel = (0, _vue.computed)(() => {
+      return (0, _utils.getFuncText)(props.openLabel);
+    });
+    const computeOffShowLabel = (0, _vue.computed)(() => {
+      return (0, _utils.getFuncText)(props.closeLabel);
+    });
+    const computeIsChecked = (0, _vue.computed)(() => {
+      return props.modelValue === props.openValue;
+    });
+    let _atimeout;
+    const clickEvent = evnt => {
+      if (!props.disabled) {
+        const isChecked = computeIsChecked.value;
+        clearTimeout(_atimeout);
+        const value = isChecked ? props.closeValue : props.openValue;
+        reactData.hasAnimat = true;
+        emit('update:modelValue', value);
+        switchMethods.dispatchEvent('change', {
+          value
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value);
+        }
+        _atimeout = setTimeout(() => {
+          reactData.hasAnimat = false;
+        }, 400);
+      }
+    };
+    const focusEvent = evnt => {
+      reactData.isActivated = true;
+      switchMethods.dispatchEvent('focus', {
+        value: props.modelValue
+      }, evnt);
+    };
+    const blurEvent = evnt => {
+      reactData.isActivated = false;
+      switchMethods.dispatchEvent('blur', {
+        value: props.modelValue
+      }, evnt);
+    };
+    switchMethods = {
+      dispatchEvent(type, params, evnt) {
+        emit(type, Object.assign({
+          $switch: $xeswitch,
+          $event: evnt
+        }, params));
+      },
+      focus() {
+        const btnElem = refButton.value;
+        reactData.isActivated = true;
+        btnElem.focus();
+        return (0, _vue.nextTick)();
+      },
+      blur() {
+        const btnElem = refButton.value;
+        btnElem.blur();
+        reactData.isActivated = false;
+        return (0, _vue.nextTick)();
+      }
+    };
+    Object.assign($xeswitch, switchMethods);
+    const renderVN = () => {
+      const {
+        disabled,
+        openIcon,
+        closeIcon
+      } = props;
+      const isChecked = computeIsChecked.value;
+      const vSize = computeSize.value;
+      const onShowLabel = computeOnShowLabel.value;
+      const offShowLabel = computeOffShowLabel.value;
+      return (0, _vue.h)('div', {
+        class: ['vxe-switch', isChecked ? 'is--on' : 'is--off', {
+          [`size--${vSize}`]: vSize,
+          'is--disabled': disabled,
+          'is--animat': reactData.hasAnimat
+        }]
+      }, [(0, _vue.h)('button', {
+        ref: refButton,
+        class: 'vxe-switch--button',
+        type: 'button',
+        disabled,
+        onClick: clickEvent,
+        onFocus: focusEvent,
+        onBlur: blurEvent
+      }, [(0, _vue.h)('span', {
+        class: 'vxe-switch--label vxe-switch--label-on'
+      }, [openIcon ? (0, _vue.h)('i', {
+        class: ['vxe-switch--label-icon', openIcon]
+      }) : (0, _vue.createCommentVNode)(), onShowLabel]), (0, _vue.h)('span', {
+        class: 'vxe-switch--label vxe-switch--label-off'
+      }, [closeIcon ? (0, _vue.h)('i', {
+        class: ['vxe-switch--label-icon', closeIcon]
+      }) : (0, _vue.createCommentVNode)(), offShowLabel]), (0, _vue.h)('span', {
+        class: 'vxe-switch--icon'
+      })])]);
+    };
+    $xeswitch.renderVN = renderVN;
+    return $xeswitch;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/switch/src/switch.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_globalStore=_interopRequireDefault(require("../../ui/src/globalStore")),_size=require("../../hooks/size"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeSwitch",props:{modelValue:[String,Number,Boolean],disabled:Boolean,size:{type:String,default:()=>_globalStore.default.switch.size||_globalStore.default.size},openLabel:String,closeLabel:String,openValue:{type:[String,Number,Boolean],default:!0},closeValue:{type:[String,Number,Boolean],default:!1},openIcon:String,closeIcon:String},emits:["update:modelValue","change","focus","blur"],setup(o,e){const l=e["emit"],u=(0,_vue.inject)("$xeForm",null),a=(0,_vue.inject)("$xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();const n=(0,_size.useSize)(o),r=(0,_vue.reactive)({isActivated:!1,hasAnimat:!1,offsetLeft:0}),i={xID:t,props:o,context:e,reactData:r},c=(0,_vue.ref)();let s={};const v=(0,_vue.computed)(()=>(0,_utils.getFuncText)(o.openLabel)),d=(0,_vue.computed)(()=>(0,_utils.getFuncText)(o.closeLabel)),_=(0,_vue.computed)(()=>o.modelValue===o.openValue);let p;const b=e=>{var t;o.disabled||(t=_.value,clearTimeout(p),t=t?o.closeValue:o.openValue,r.hasAnimat=!0,l("update:modelValue",t),s.dispatchEvent("change",{value:t},e),u&&a&&u.triggerItemEvent(e,a.itemConfig.field,t),p=setTimeout(()=>{r.hasAnimat=!1},400))},f=e=>{r.isActivated=!0,s.dispatchEvent("focus",{value:o.modelValue},e)},m=e=>{r.isActivated=!1,s.dispatchEvent("blur",{value:o.modelValue},e)};s={dispatchEvent(e,t,u){l(e,Object.assign({$switch:i,$event:u},t))},focus(){var e=c.value;return r.isActivated=!0,e.focus(),(0,_vue.nextTick)()},blur(){return c.value.blur(),(r.isActivated=!1,_vue.nextTick)()}},Object.assign(i,s);return i.renderVN=()=>{var{disabled:e,openIcon:t,closeIcon:u}=o,l=_.value,a=n.value,i=v.value,s=d.value;return(0,_vue.h)("div",{class:["vxe-switch",l?"is--on":"is--off",{["size--"+a]:a,"is--disabled":e,"is--animat":r.hasAnimat}]},[(0,_vue.h)("button",{ref:c,class:"vxe-switch--button",type:"button",disabled:e,onClick:b,onFocus:f,onBlur:m},[(0,_vue.h)("span",{class:"vxe-switch--label vxe-switch--label-on"},[t?(0,_vue.h)("i",{class:["vxe-switch--label-icon",t]}):(0,_vue.createCommentVNode)(),i]),(0,_vue.h)("span",{class:"vxe-switch--label vxe-switch--label-off"},[u?(0,_vue.h)("i",{class:["vxe-switch--label-icon",u]}):(0,_vue.createCommentVNode)(),s]),(0,_vue.h)("span",{class:"vxe-switch--icon"})])])},i},render(){return this.renderVN()}});

package/lib/switch/style/index.js

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

package/lib/switch/style/style.css

@@ -0,0 +1,97 @@
+.vxe-switch {
+  display: inline-block;
+  color: var(--vxe-font-color);
+  vertical-align: middle;
+  padding: 0.4em;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  text-align: center;
+}
+.vxe-switch.is--animat .vxe-switch--button {
+  transition: border-color 0.3s, background-color 0.3s;
+}
+.vxe-switch.is--animat .vxe-switch--icon {
+  transition: all 0.3s;
+}
+.vxe-switch.is--on .vxe-switch--button {
+  padding-right: 1.7em;
+  background-color: var(--vxe-ui-switch-open-background-color);
+}
+.vxe-switch.is--on .vxe-switch--icon {
+  left: 100%;
+  transform: translateX(-1.4em);
+}
+.vxe-switch.is--off .vxe-switch--button {
+  padding-left: 1.7em;
+  background-color: var(--vxe-ui-switch-close-background-color);
+}
+.vxe-switch.is--off .vxe-switch--icon {
+  left: 0.2em;
+  transform: translateX(0);
+}
+.vxe-switch.is--on .vxe-switch--label-off, .vxe-switch.is--off .vxe-switch--label-on {
+  height: 0;
+  visibility: hidden;
+  overflow: hidden;
+}
+.vxe-switch.is--on .vxe-switch--label, .vxe-switch.is--off .vxe-switch--label {
+  opacity: 1;
+}
+.vxe-switch:not(.is--disabled) .vxe-switch--button {
+  cursor: pointer;
+}
+.vxe-switch:not(.is--disabled) .vxe-switch--button:focus {
+  box-shadow: 0 0 0.4em 0 var(--vxe-primary-color);
+}
+.vxe-switch.is--disabled .vxe-switch--button {
+  cursor: no-drop;
+}
+.vxe-switch.is--disabled.is--on .vxe-switch--button {
+  background-color: var(--vxe-primary-lighten-color);
+}
+.vxe-switch.is--disabled.is--off .vxe-switch--button {
+  background-color: var(--vxe-ui-switch-disabled-background-color);
+}
+.vxe-switch .vxe-switch--button {
+  display: block;
+  position: relative;
+  height: 1.6em;
+  line-height: 1;
+  min-width: 3.2em;
+  padding: 0 0.6em;
+  border-radius: 1em;
+  border: 0;
+  outline: 0;
+}
+.vxe-switch .vxe-switch--label {
+  opacity: 0;
+  display: block;
+  color: var(--vxe-ui-switch-font-color);
+  font-size: 0.8em;
+}
+.vxe-switch .vxe-switch--icon {
+  position: absolute;
+  top: 0.2em;
+  left: 0;
+  width: 1.2em;
+  height: 1.2em;
+  border-radius: 50%;
+  background-color: var(--vxe-ui-switch-icon-background-color);
+}
+.vxe-switch .vxe-switch--label-icon {
+  margin-right: 0.25em;
+}
+
+.vxe-switch {
+  font-size: var(--vxe-font-size);
+}
+.vxe-switch.size--medium {
+  font-size: var(--vxe-font-size-medium);
+}
+.vxe-switch.size--small {
+  font-size: var(--vxe-font-size-small);
+}
+.vxe-switch.size--mini {
+  font-size: var(--vxe-font-size-mini);
+}

package/lib/switch/style/style.min.css

@@ -0,0 +1 @@
+.vxe-switch{display:inline-block;color:var(--vxe-font-color);vertical-align:middle;padding:.4em;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-align:center}.vxe-switch.is--animat .vxe-switch--button{transition:border-color .3s,background-color .3s}.vxe-switch.is--animat .vxe-switch--icon{transition:all .3s}.vxe-switch.is--on .vxe-switch--button{padding-right:1.7em;background-color:var(--vxe-ui-switch-open-background-color)}.vxe-switch.is--on .vxe-switch--icon{left:100%;transform:translateX(-1.4em)}.vxe-switch.is--off .vxe-switch--button{padding-left:1.7em;background-color:var(--vxe-ui-switch-close-background-color)}.vxe-switch.is--off .vxe-switch--icon{left:.2em;transform:translateX(0)}.vxe-switch.is--off .vxe-switch--label-on,.vxe-switch.is--on .vxe-switch--label-off{height:0;visibility:hidden;overflow:hidden}.vxe-switch.is--off .vxe-switch--label,.vxe-switch.is--on .vxe-switch--label{opacity:1}.vxe-switch:not(.is--disabled) .vxe-switch--button{cursor:pointer}.vxe-switch:not(.is--disabled) .vxe-switch--button:focus{box-shadow:0 0 .4em 0 var(--vxe-primary-color)}.vxe-switch.is--disabled .vxe-switch--button{cursor:no-drop}.vxe-switch.is--disabled.is--on .vxe-switch--button{background-color:var(--vxe-primary-lighten-color)}.vxe-switch.is--disabled.is--off .vxe-switch--button{background-color:var(--vxe-ui-switch-disabled-background-color)}.vxe-switch .vxe-switch--button{display:block;position:relative;height:1.6em;line-height:1;min-width:3.2em;padding:0 .6em;border-radius:1em;border:0;outline:0}.vxe-switch .vxe-switch--label{opacity:0;display:block;color:var(--vxe-ui-switch-font-color);font-size:.8em}.vxe-switch .vxe-switch--icon{position:absolute;top:.2em;left:0;width:1.2em;height:1.2em;border-radius:50%;background-color:var(--vxe-ui-switch-icon-background-color)}.vxe-switch .vxe-switch--label-icon{margin-right:.25em}.vxe-switch{font-size:var(--vxe-font-size)}.vxe-switch.size--medium{font-size:var(--vxe-font-size-medium)}.vxe-switch.size--small{font-size:var(--vxe-font-size-small)}.vxe-switch.size--mini{font-size:var(--vxe-font-size-mini)}

package/lib/textarea/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VxeTextarea = exports.Textarea = void 0;
+var _textarea = _interopRequireDefault(require("./src/textarea"));
+var _dynamics = require("../dynamics");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const VxeTextarea = exports.VxeTextarea = Object.assign(_textarea.default, {
+  install: function (app) {
+    app.component(_textarea.default.name, _textarea.default);
+  }
+});
+const Textarea = exports.Textarea = VxeTextarea;
+_dynamics.dynamicApp.component(_textarea.default.name, _textarea.default);
+var _default = exports.default = VxeTextarea;

package/lib/textarea/index.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.VxeTextarea=exports.Textarea=void 0;var _textarea=_interopRequireDefault(require("./src/textarea")),_dynamics=require("../dynamics");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeTextarea=exports.VxeTextarea=Object.assign(_textarea.default,{install:function(e){e.component(_textarea.default.name,_textarea.default)}}),Textarea=exports.Textarea=VxeTextarea;_dynamics.dynamicApp.component(_textarea.default.name,_textarea.default);var _default=exports.default=VxeTextarea;

package/lib/textarea/src/textarea.js

@@ -0,0 +1,298 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _globalStore = _interopRequireDefault(require("../../ui/src/globalStore"));
+var _utils = require("../../ui/src/utils");
+var _i18n = require("../../ui/src/i18n");
+var _size = require("../../hooks/size");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+let autoTxtElem;
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxeTextarea',
+  props: {
+    modelValue: [String, Number],
+    className: String,
+    immediate: {
+      type: Boolean,
+      default: true
+    },
+    name: String,
+    readonly: Boolean,
+    disabled: Boolean,
+    placeholder: {
+      type: String,
+      default: () => _xeUtils.default.eqNull(_globalStore.default.textarea.placeholder) ? (0, _i18n.getI18n)('vxe.base.pleaseInput') : _globalStore.default.textarea.placeholder
+    },
+    maxlength: [String, Number],
+    rows: {
+      type: [String, Number],
+      default: 2
+    },
+    cols: {
+      type: [String, Number],
+      default: null
+    },
+    showWordCount: Boolean,
+    countMethod: Function,
+    autosize: [Boolean, Object],
+    form: String,
+    resize: {
+      type: String,
+      default: () => _globalStore.default.textarea.resize
+    },
+    size: {
+      type: String,
+      default: () => _globalStore.default.textarea.size || _globalStore.default.size
+    }
+  },
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'click', 'change', 'focus', 'blur'],
+  setup(props, context) {
+    const {
+      emit
+    } = context;
+    const $xeform = (0, _vue.inject)('$xeForm', null);
+    const $xeformiteminfo = (0, _vue.inject)('$xeFormItemInfo', null);
+    const xID = _xeUtils.default.uniqueId();
+    const computeSize = (0, _size.useSize)(props);
+    const reactData = (0, _vue.reactive)({
+      inputValue: props.modelValue
+    });
+    const refElem = (0, _vue.ref)();
+    const refTextarea = (0, _vue.ref)();
+    const refMaps = {
+      refElem,
+      refTextarea
+    };
+    const $xetextarea = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps
+    };
+    let textareaMethods = {};
+    const computeInputCount = (0, _vue.computed)(() => {
+      return _xeUtils.default.getSize(reactData.inputValue);
+    });
+    const computeIsCountError = (0, _vue.computed)(() => {
+      const inputCount = computeInputCount.value;
+      return props.maxlength && inputCount > _xeUtils.default.toNumber(props.maxlength);
+    });
+    const computeSizeOpts = (0, _vue.computed)(() => {
+      return Object.assign({
+        minRows: 1,
+        maxRows: 10
+      }, _globalStore.default.textarea.autosize, props.autosize);
+    });
+    const updateAutoTxt = () => {
+      const {
+        size,
+        autosize
+      } = props;
+      const {
+        inputValue
+      } = reactData;
+      if (autosize) {
+        if (!autoTxtElem) {
+          autoTxtElem = document.createElement('div');
+        }
+        if (!autoTxtElem.parentNode) {
+          document.body.appendChild(autoTxtElem);
+        }
+        const textElem = refTextarea.value;
+        const textStyle = getComputedStyle(textElem);
+        autoTxtElem.className = ['vxe-textarea--autosize', size ? `size--${size}` : ''].join(' ');
+        autoTxtElem.style.width = `${textElem.clientWidth}px`;
+        autoTxtElem.style.padding = textStyle.padding;
+        autoTxtElem.innerText = ('' + (inputValue || '　')).replace(/\n$/, '\n　');
+      }
+    };
+    const handleResize = () => {
+      if (props.autosize) {
+        (0, _vue.nextTick)(() => {
+          const sizeOpts = computeSizeOpts.value;
+          const {
+            minRows,
+            maxRows
+          } = sizeOpts;
+          const textElem = refTextarea.value;
+          const sizeHeight = autoTxtElem.clientHeight;
+          const textStyle = getComputedStyle(textElem);
+          const lineHeight = _xeUtils.default.toNumber(textStyle.lineHeight);
+          const paddingTop = _xeUtils.default.toNumber(textStyle.paddingTop);
+          const paddingBottom = _xeUtils.default.toNumber(textStyle.paddingBottom);
+          const borderTopWidth = _xeUtils.default.toNumber(textStyle.borderTopWidth);
+          const borderBottomWidth = _xeUtils.default.toNumber(textStyle.borderBottomWidth);
+          const intervalHeight = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;
+          const rowNum = (sizeHeight - intervalHeight) / lineHeight;
+          const textRows = rowNum && /[0-9]/.test('' + rowNum) ? rowNum : Math.floor(rowNum) + 1;
+          let vaildRows = textRows;
+          if (textRows < minRows) {
+            vaildRows = minRows;
+          } else if (textRows > maxRows) {
+            vaildRows = maxRows;
+          }
+          textElem.style.height = `${vaildRows * lineHeight + intervalHeight}px`;
+        });
+      }
+    };
+    const triggerEvent = evnt => {
+      const value = reactData.inputValue;
+      $xetextarea.dispatchEvent(evnt.type, {
+        value
+      }, evnt);
+    };
+    const emitUpdate = (value, evnt) => {
+      reactData.inputValue = value;
+      emit('update:modelValue', value);
+      if (_xeUtils.default.toValueString(props.modelValue) !== value) {
+        textareaMethods.dispatchEvent('change', {
+          value
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value);
+        }
+      }
+    };
+    const inputEvent = evnt => {
+      const {
+        immediate
+      } = props;
+      const textElem = evnt.target;
+      const value = textElem.value;
+      reactData.inputValue = value;
+      if (immediate) {
+        emitUpdate(value, evnt);
+      }
+      $xetextarea.dispatchEvent('input', {
+        value
+      }, evnt);
+      handleResize();
+    };
+    const changeEvent = evnt => {
+      const {
+        immediate
+      } = props;
+      if (immediate) {
+        triggerEvent(evnt);
+      } else {
+        emitUpdate(reactData.inputValue, evnt);
+      }
+    };
+    const blurEvent = evnt => {
+      const {
+        immediate
+      } = props;
+      const {
+        inputValue
+      } = reactData;
+      if (!immediate) {
+        emitUpdate(inputValue, evnt);
+      }
+      $xetextarea.dispatchEvent('blur', {
+        value: inputValue
+      }, evnt);
+    };
+    textareaMethods = {
+      dispatchEvent(type, params, evnt) {
+        emit(type, Object.assign({
+          $textarea: $xetextarea,
+          $event: evnt
+        }, params));
+      },
+      focus() {
+        const textElem = refTextarea.value;
+        textElem.focus();
+        return (0, _vue.nextTick)();
+      },
+      blur() {
+        const textElem = refTextarea.value;
+        textElem.blur();
+        return (0, _vue.nextTick)();
+      }
+    };
+    Object.assign($xetextarea, textareaMethods);
+    (0, _vue.watch)(() => props.modelValue, val => {
+      reactData.inputValue = val;
+      updateAutoTxt();
+    });
+    (0, _vue.nextTick)(() => {
+      const {
+        autosize
+      } = props;
+      if (autosize) {
+        updateAutoTxt();
+        handleResize();
+      }
+    });
+    const renderVN = () => {
+      const {
+        className,
+        resize,
+        placeholder,
+        disabled,
+        maxlength,
+        autosize,
+        showWordCount,
+        countMethod,
+        rows,
+        cols
+      } = props;
+      const {
+        inputValue
+      } = reactData;
+      const vSize = computeSize.value;
+      const isCountError = computeIsCountError.value;
+      const inputCount = computeInputCount.value;
+      return (0, _vue.h)('div', {
+        ref: refElem,
+        class: ['vxe-textarea', className, {
+          [`size--${vSize}`]: vSize,
+          'is--autosize': autosize,
+          'is--count': showWordCount,
+          'is--disabled': disabled,
+          'def--rows': !_xeUtils.default.eqNull(rows),
+          'def--cols': !_xeUtils.default.eqNull(cols)
+        }]
+      }, [(0, _vue.h)('textarea', {
+        ref: refTextarea,
+        class: 'vxe-textarea--inner',
+        value: inputValue,
+        name: props.name,
+        placeholder: placeholder ? (0, _utils.getFuncText)(placeholder) : null,
+        maxlength,
+        readonly: props.readonly,
+        disabled,
+        rows,
+        cols,
+        style: resize ? {
+          resize
+        } : null,
+        onInput: inputEvent,
+        onChange: changeEvent,
+        onKeydown: triggerEvent,
+        onKeyup: triggerEvent,
+        onClick: triggerEvent,
+        onFocus: triggerEvent,
+        onBlur: blurEvent
+      }), showWordCount ? (0, _vue.h)('span', {
+        class: ['vxe-textarea--count', {
+          'is--error': isCountError
+        }]
+      }, countMethod ? `${countMethod({
+        value: inputValue
+      })}` : `${inputCount}${maxlength ? `/${maxlength}` : ''}`) : null]);
+    };
+    $xetextarea.renderVN = renderVN;
+    return $xetextarea;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/textarea/src/textarea.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_globalStore=_interopRequireDefault(require("../../ui/src/globalStore")),_utils=require("../../ui/src/utils"),_i18n=require("../../ui/src/i18n"),_size=require("../../hooks/size");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let autoTxtElem;var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTextarea",props:{modelValue:[String,Number],className:String,immediate:{type:Boolean,default:!0},name:String,readonly:Boolean,disabled:Boolean,placeholder:{type:String,default:()=>_xeUtils.default.eqNull(_globalStore.default.textarea.placeholder)?(0,_i18n.getI18n)("vxe.base.pleaseInput"):_globalStore.default.textarea.placeholder},maxlength:[String,Number],rows:{type:[String,Number],default:2},cols:{type:[String,Number],default:null},showWordCount:Boolean,countMethod:Function,autosize:[Boolean,Object],form:String,resize:{type:String,default:()=>_globalStore.default.textarea.resize},size:{type:String,default:()=>_globalStore.default.textarea.size||_globalStore.default.size}},emits:["update:modelValue","input","keydown","keyup","click","change","focus","blur"],setup(v,e){const l=e["emit"],a=(0,_vue.inject)("$xeForm",null),u=(0,_vue.inject)("$xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();const x=(0,_size.useSize)(v),_=(0,_vue.reactive)({inputValue:v.modelValue}),f=(0,_vue.ref)(),g=(0,_vue.ref)(),r={refElem:f,refTextarea:g},i={xID:t,props:v,context:e,reactData:_,getRefMaps:()=>r};let o;const h=(0,_vue.computed)(()=>_xeUtils.default.getSize(_.inputValue)),b=(0,_vue.computed)(()=>{var e=h.value;return v.maxlength&&e>_xeUtils.default.toNumber(v.maxlength)}),n=(0,_vue.computed)(()=>Object.assign({minRows:1,maxRows:10},_globalStore.default.textarea.autosize,v.autosize)),s=()=>{var e,{size:t,autosize:a}=v,l=_["inputValue"];a&&((autoTxtElem=autoTxtElem||document.createElement("div")).parentNode||document.body.appendChild(autoTxtElem),a=g.value,e=getComputedStyle(a),autoTxtElem.className=["vxe-textarea--autosize",t?"size--"+t:""].join(" "),autoTxtElem.style.width=a.clientWidth+"px",autoTxtElem.style.padding=e.padding,autoTxtElem.innerText=(""+(l||"　")).replace(/\n$/,"\n　"))},d=()=>{v.autosize&&(0,_vue.nextTick)(()=>{var{minRows:e,maxRows:t}=n.value,a=g.value,l=autoTxtElem.clientHeight,u=getComputedStyle(a),r=_xeUtils.default.toNumber(u.lineHeight),u=_xeUtils.default.toNumber(u.paddingTop)+_xeUtils.default.toNumber(u.paddingBottom)+_xeUtils.default.toNumber(u.borderTopWidth)+_xeUtils.default.toNumber(u.borderBottomWidth),l=(l-u)/r,l=l&&/[0-9]/.test(""+l)?l:Math.floor(l)+1;let i=l;l<e?i=e:t<l&&(i=t),a.style.height=i*r+u+"px"})},z=e=>{var t=_.inputValue;i.dispatchEvent(e.type,{value:t},e)},m=(e,t)=>{_.inputValue=e,l("update:modelValue",e),_xeUtils.default.toValueString(v.modelValue)!==e&&(o.dispatchEvent("change",{value:e},t),a)&&u&&a.triggerItemEvent(t,u.itemConfig.field,e)},S=e=>{var t=v["immediate"],a=e.target.value;_.inputValue=a,t&&m(a,e),i.dispatchEvent("input",{value:a},e),d()},y=e=>{var t=v["immediate"];t?z(e):m(_.inputValue,e)},V=e=>{var t=v["immediate"],a=_["inputValue"];t||m(a,e),i.dispatchEvent("blur",{value:a},e)};o={dispatchEvent(e,t,a){l(e,Object.assign({$textarea:i,$event:a},t))},focus(){return g.value.focus(),(0,_vue.nextTick)()},blur(){return g.value.blur(),(0,_vue.nextTick)()}},Object.assign(i,o),(0,_vue.watch)(()=>v.modelValue,e=>{_.inputValue=e,s()}),(0,_vue.nextTick)(()=>{var e=v["autosize"];e&&(s(),d())});return i.renderVN=()=>{var{className:e,resize:t,placeholder:a,disabled:l,maxlength:u,autosize:r,showWordCount:i,countMethod:o,rows:n,cols:s}=v,d=_["inputValue"],m=x.value,p=b.value,c=h.value;return(0,_vue.h)("div",{ref:f,class:["vxe-textarea",e,{["size--"+m]:m,"is--autosize":r,"is--count":i,"is--disabled":l,"def--rows":!_xeUtils.default.eqNull(n),"def--cols":!_xeUtils.default.eqNull(s)}]},[(0,_vue.h)("textarea",{ref:g,class:"vxe-textarea--inner",value:d,name:v.name,placeholder:a?(0,_utils.getFuncText)(a):null,maxlength:u,readonly:v.readonly,disabled:l,rows:n,cols:s,style:t?{resize:t}:null,onInput:S,onChange:y,onKeydown:z,onKeyup:z,onClick:z,onFocus:z,onBlur:V}),i?(0,_vue.h)("span",{class:["vxe-textarea--count",{"is--error":p}]},o?""+o({value:d}):c+(u?"/"+u:"")):null])},i},render(){return this.renderVN()}});

package/lib/textarea/style/index.js

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