PasswordInput.mjs 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. import { createVNode as _createVNode } from "vue";
  2. import { defineComponent } from "vue";
  3. import { addUnit, truthProp, numericProp, BORDER_LEFT, makeStringProp, BORDER_SURROUND, createNamespace, makeNumericProp } from "../utils/index.mjs";
  4. const [name, bem] = createNamespace("password-input");
  5. const passwordInputProps = {
  6. info: String,
  7. mask: truthProp,
  8. value: makeStringProp(""),
  9. gutter: numericProp,
  10. length: makeNumericProp(6),
  11. focused: Boolean,
  12. errorInfo: String
  13. };
  14. var stdin_default = defineComponent({
  15. name,
  16. props: passwordInputProps,
  17. emits: ["focus"],
  18. setup(props, {
  19. emit
  20. }) {
  21. const onTouchStart = (event) => {
  22. event.stopPropagation();
  23. emit("focus", event);
  24. };
  25. const renderPoints = () => {
  26. const Points = [];
  27. const {
  28. mask,
  29. value,
  30. length,
  31. gutter,
  32. focused
  33. } = props;
  34. for (let i = 0; i < length; i++) {
  35. const char = value[i];
  36. const showBorder = i !== 0 && !gutter;
  37. const showCursor = focused && i === value.length;
  38. let style;
  39. if (i !== 0 && gutter) {
  40. style = {
  41. marginLeft: addUnit(gutter)
  42. };
  43. }
  44. Points.push(_createVNode("li", {
  45. "class": [{
  46. [BORDER_LEFT]: showBorder
  47. }, bem("item", {
  48. focus: showCursor
  49. })],
  50. "style": style
  51. }, [mask ? _createVNode("i", {
  52. "style": {
  53. visibility: char ? "visible" : "hidden"
  54. }
  55. }, null) : char, showCursor && _createVNode("div", {
  56. "class": bem("cursor")
  57. }, null)]));
  58. }
  59. return Points;
  60. };
  61. return () => {
  62. const info = props.errorInfo || props.info;
  63. return _createVNode("div", {
  64. "class": bem()
  65. }, [_createVNode("ul", {
  66. "class": [bem("security"), {
  67. [BORDER_SURROUND]: !props.gutter
  68. }],
  69. "onTouchstartPassive": onTouchStart
  70. }, [renderPoints()]), info && _createVNode("div", {
  71. "class": bem(props.errorInfo ? "error-info" : "info")
  72. }, [info])]);
  73. };
  74. }
  75. });
  76. export {
  77. stdin_default as default
  78. };