index.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. import _mergeJSXProps2 from "@vue/babel-helper-vue-jsx-merge-props";
  2. import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
  3. import _extends from "@babel/runtime/helpers/esm/extends";
  4. import Icon from '../icon';
  5. import Cell from '../cell';
  6. import { cellProps } from '../cell/shared';
  7. import { use, isObj, isDef, isIOS } from '../utils';
  8. import { preventDefault } from '../utils/event';
  9. import { getRootScrollTop } from '../utils/scroll';
  10. import { isNumber } from '../utils/validate/number';
  11. var _use = use('field'),
  12. sfc = _use[0],
  13. bem = _use[1];
  14. export default sfc({
  15. inheritAttrs: false,
  16. props: _extends({}, cellProps, {
  17. error: Boolean,
  18. leftIcon: String,
  19. rightIcon: String,
  20. readonly: Boolean,
  21. clearable: Boolean,
  22. labelWidth: [String, Number],
  23. labelAlign: String,
  24. inputAlign: String,
  25. onIconClick: Function,
  26. autosize: [Boolean, Object],
  27. errorMessage: String,
  28. errorMessageAlign: String,
  29. type: {
  30. type: String,
  31. "default": 'text'
  32. }
  33. }),
  34. data: function data() {
  35. return {
  36. focused: false
  37. };
  38. },
  39. watch: {
  40. value: function value() {
  41. this.$nextTick(this.adjustSize);
  42. }
  43. },
  44. mounted: function mounted() {
  45. this.format();
  46. this.$nextTick(this.adjustSize);
  47. },
  48. computed: {
  49. showClear: function showClear() {
  50. return this.clearable && this.focused && this.value !== '' && isDef(this.value) && !this.readonly;
  51. },
  52. listeners: function listeners() {
  53. return _extends({}, this.$listeners, {
  54. input: this.onInput,
  55. keypress: this.onKeypress,
  56. focus: this.onFocus,
  57. blur: this.onBlur
  58. });
  59. },
  60. labelStyle: function labelStyle() {
  61. var labelWidth = this.labelWidth;
  62. if (labelWidth) {
  63. var width = isNumber(String(labelWidth)) ? labelWidth + "px" : labelWidth;
  64. return {
  65. maxWidth: width,
  66. minWidth: width
  67. };
  68. }
  69. }
  70. },
  71. methods: {
  72. focus: function focus() {
  73. this.$refs.input && this.$refs.input.focus();
  74. },
  75. blur: function blur() {
  76. this.$refs.input && this.$refs.input.blur();
  77. },
  78. // native maxlength not work when type = number
  79. format: function format(target) {
  80. if (target === void 0) {
  81. target = this.$refs.input;
  82. }
  83. var _target = target,
  84. value = _target.value;
  85. var maxlength = this.$attrs.maxlength;
  86. if (this.type === 'number' && isDef(maxlength) && value.length > maxlength) {
  87. value = value.slice(0, maxlength);
  88. target.value = value;
  89. }
  90. return value;
  91. },
  92. onInput: function onInput(event) {
  93. this.$emit('input', this.format(event.target));
  94. },
  95. onFocus: function onFocus(event) {
  96. this.focused = true;
  97. this.$emit('focus', event); // hack for safari
  98. /* istanbul ignore if */
  99. if (this.readonly) {
  100. this.blur();
  101. }
  102. },
  103. onBlur: function onBlur(event) {
  104. this.focused = false;
  105. this.$emit('blur', event); // Hack for iOS12 page scroll
  106. // https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800
  107. /* istanbul ignore next */
  108. if (isIOS()) {
  109. window.scrollTo(0, getRootScrollTop());
  110. }
  111. },
  112. onClickLeftIcon: function onClickLeftIcon() {
  113. this.$emit('click-left-icon');
  114. },
  115. onClickRightIcon: function onClickRightIcon() {
  116. // compatible old version
  117. this.$emit('click-icon');
  118. this.$emit('click-right-icon');
  119. this.onIconClick && this.onIconClick();
  120. },
  121. onClear: function onClear(event) {
  122. preventDefault(event);
  123. this.$emit('input', '');
  124. this.$emit('clear');
  125. },
  126. onKeypress: function onKeypress(event) {
  127. if (this.type === 'number') {
  128. var keyCode = event.keyCode;
  129. var allowPoint = String(this.value).indexOf('.') === -1;
  130. var isValidKey = keyCode >= 48 && keyCode <= 57 || keyCode === 46 && allowPoint || keyCode === 45;
  131. if (!isValidKey) {
  132. preventDefault(event);
  133. }
  134. } // trigger blur after click keyboard search button
  135. /* istanbul ignore next */
  136. if (this.type === 'search' && event.keyCode === 13) {
  137. this.blur();
  138. }
  139. this.$emit('keypress', event);
  140. },
  141. adjustSize: function adjustSize() {
  142. var input = this.$refs.input;
  143. if (!(this.type === 'textarea' && this.autosize) || !input) {
  144. return;
  145. }
  146. input.style.height = 'auto';
  147. var height = input.scrollHeight;
  148. if (isObj(this.autosize)) {
  149. var _this$autosize = this.autosize,
  150. maxHeight = _this$autosize.maxHeight,
  151. minHeight = _this$autosize.minHeight;
  152. if (maxHeight) {
  153. height = Math.min(height, maxHeight);
  154. }
  155. if (minHeight) {
  156. height = Math.max(height, minHeight);
  157. }
  158. }
  159. if (height) {
  160. input.style.height = height + 'px';
  161. }
  162. },
  163. renderInput: function renderInput() {
  164. var h = this.$createElement;
  165. var inputProps = {
  166. ref: 'input',
  167. "class": bem('control', this.inputAlign),
  168. domProps: {
  169. value: this.value
  170. },
  171. attrs: _extends({}, this.$attrs, {
  172. readonly: this.readonly
  173. }),
  174. on: this.listeners
  175. };
  176. if (this.type === 'textarea') {
  177. return h("textarea", _mergeJSXProps([{}, inputProps]));
  178. }
  179. return h("input", _mergeJSXProps2([{
  180. "attrs": {
  181. "type": this.type
  182. }
  183. }, inputProps]));
  184. },
  185. renderLeftIcon: function renderLeftIcon() {
  186. var h = this.$createElement;
  187. var showLeftIcon = this.slots('left-icon') || this.leftIcon;
  188. if (showLeftIcon) {
  189. return h("div", {
  190. "class": bem('left-icon'),
  191. "on": {
  192. "click": this.onClickLeftIcon
  193. }
  194. }, [this.slots('left-icon') || h(Icon, {
  195. "attrs": {
  196. "name": this.leftIcon
  197. }
  198. })]);
  199. }
  200. },
  201. renderRightIcon: function renderRightIcon() {
  202. var h = this.$createElement;
  203. var slots = this.slots;
  204. var showRightIcon = slots('right-icon') || slots('icon') || this.rightIcon || this.icon;
  205. if (showRightIcon) {
  206. return h("div", {
  207. "class": bem('right-icon'),
  208. "on": {
  209. "click": this.onClickRightIcon
  210. }
  211. }, [slots('right-icon') || slots('icon') || h(Icon, {
  212. "attrs": {
  213. "name": this.rightIcon || this.icon
  214. }
  215. })]);
  216. }
  217. }
  218. },
  219. render: function render(h) {
  220. var _bem;
  221. var slots = this.slots,
  222. labelAlign = this.labelAlign;
  223. var scopedSlots = {
  224. icon: this.renderLeftIcon
  225. };
  226. if (slots('label')) {
  227. scopedSlots.title = function () {
  228. return slots('label');
  229. };
  230. }
  231. return h(Cell, {
  232. "attrs": {
  233. "icon": this.leftIcon,
  234. "size": this.size,
  235. "title": this.label,
  236. "center": this.center,
  237. "border": this.border,
  238. "isLink": this.isLink,
  239. "required": this.required,
  240. "titleStyle": this.labelStyle,
  241. "titleClass": bem('label', labelAlign)
  242. },
  243. "class": bem((_bem = {
  244. error: this.error,
  245. disabled: this.$attrs.disabled
  246. }, _bem["label-" + labelAlign] = labelAlign, _bem['min-height'] = this.type === 'textarea' && !this.autosize, _bem)),
  247. "scopedSlots": scopedSlots
  248. }, [h("div", {
  249. "class": bem('body')
  250. }, [this.renderInput(), this.showClear && h(Icon, {
  251. "attrs": {
  252. "name": "clear"
  253. },
  254. "class": bem('clear'),
  255. "on": {
  256. "touchstart": this.onClear
  257. }
  258. }), this.renderRightIcon(), slots('button') && h("div", {
  259. "class": bem('button')
  260. }, [slots('button')])]), this.errorMessage && h("div", {
  261. "class": bem('error-message', this.errorMessageAlign)
  262. }, [this.errorMessage])]);
  263. }
  264. });