index.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
  2. // Utils
  3. import { createNamespace, addUnit } from '../utils';
  4. import { emit, inherit } from '../utils/functional';
  5. import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant'; // Types
  6. var _createNamespace = createNamespace('password-input'),
  7. createComponent = _createNamespace[0],
  8. bem = _createNamespace[1];
  9. function PasswordInput(h, props, slots, ctx) {
  10. var _ref2;
  11. var mask = props.mask,
  12. value = props.value,
  13. length = props.length,
  14. gutter = props.gutter,
  15. focused = props.focused,
  16. errorInfo = props.errorInfo;
  17. var info = errorInfo || props.info;
  18. var Points = [];
  19. for (var i = 0; i < length; i++) {
  20. var _ref;
  21. var _char = value[i];
  22. var showBorder = i !== 0 && !gutter;
  23. var showCursor = focused && i === value.length;
  24. var style = void 0;
  25. if (i !== 0 && gutter) {
  26. style = {
  27. marginLeft: addUnit(gutter)
  28. };
  29. }
  30. Points.push(h("li", {
  31. "class": [(_ref = {}, _ref[BORDER_LEFT] = showBorder, _ref), bem('item', {
  32. focus: showCursor
  33. })],
  34. "style": style
  35. }, [mask ? h("i", {
  36. "style": {
  37. visibility: _char ? 'visible' : 'hidden'
  38. }
  39. }) : _char, showCursor && h("div", {
  40. "class": bem('cursor')
  41. })]));
  42. }
  43. return h("div", {
  44. "class": bem()
  45. }, [h("ul", _mergeJSXProps([{
  46. "class": [bem('security'), (_ref2 = {}, _ref2[BORDER_SURROUND] = !gutter, _ref2)],
  47. "on": {
  48. "touchstart": function touchstart(event) {
  49. event.stopPropagation();
  50. emit(ctx, 'focus', event);
  51. }
  52. }
  53. }, inherit(ctx, true)]), [Points]), info && h("div", {
  54. "class": bem(errorInfo ? 'error-info' : 'info')
  55. }, [info])]);
  56. }
  57. PasswordInput.props = {
  58. info: String,
  59. gutter: [Number, String],
  60. focused: Boolean,
  61. errorInfo: String,
  62. mask: {
  63. type: Boolean,
  64. default: true
  65. },
  66. value: {
  67. type: String,
  68. default: ''
  69. },
  70. length: {
  71. type: [Number, String],
  72. default: 6
  73. }
  74. };
  75. export default createComponent(PasswordInput);