PasswordInput.mjs 2.1 KB

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