v3-pin-input/dist/pin-input.es.js

``` npm install v3-pin-input --save ```

import { openBlock as c, createElementBlock as d, createElementVNode as f, resolveComponent as p, Fragment as F, renderList as m, createBlock as _, withKeys as a } from "vue";
const h = (t, e) => {
  const s = t.__vccOpts || t;
  for (const [o, r] of e)
    s[o] = r;
  return s;
}, v = {
  name: "field",
  emits: ["onChange", "onFocus"],
  props: {
    isFocus: Boolean,
    value: String,
    hidden: Boolean
  },
  watch: {
    isFocus(t, e) {
      t && !e && this.setFocus();
    }
  },
  mounted() {
    this.isFocus && this.setFocus();
  },
  methods: {
    setFocus() {
      this.$refs.input.focus(), this.$refs.input.select();
    },
    onFocus() {
      this.$refs.input.select(), this.$emit("onFocus");
    },
    onChange(t) {
      const e = t.target.value.slice(-1);
      this.$refs.input.value = e, this.$emit("onChange", e);
    }
  },
  computed: {
    getType() {
      return this.hidden ? "password" : "number";
    }
  }
}, g = { class: "sv-pin__filed-wrapper" }, w = ["type", "value"];
function C(t, e, s, o, r, n) {
  return c(), d("label", g, [
    f("input", {
      ref: "input",
      type: n.getType,
      value: s.value,
      class: "sv-pin__filed",
      onInput: e[0] || (e[0] = (...i) => n.onChange && n.onChange(...i)),
      onFocus: e[1] || (e[1] = (...i) => n.onFocus && n.onFocus(...i))
    }, null, 40, w)
  ]);
}
const y = /* @__PURE__ */ h(v, [["render", C]]);
const A = {
  name: "pin-input",
  components: { Field: y },
  props: {
    defaultValue: [String, Number],
    count: Number,
    hidden: Boolean
  },
  emits: ["onChange", "onError"],
  data() {
    return {
      controller: [],
      numActiveField: 0
    };
  },
  watch: {
    defaultValue(t) {
      t || this.setDefaultController();
    }
  },
  mounted() {
    this.setDefaultController();
  },
  methods: {
    setDefaultController() {
      this.controller = new Array(this.count).fill(""), (this.defaultValue || this.defaultValue === 0) && (String(this.defaultValue).split("").slice(0, this.count).reverse().forEach((e, s) => {
        const o = this.controller.length - (s + 1);
        this.controller[o] = e;
      }), this.updateController());
    },
    isFocus(t) {
      return t - 1 === this.numActiveField;
    },
    onChangeInputField(t, e) {
      this.controller[t] = e, this.updateController(), this.nextField();
    },
    onFocusField(t) {
      this.numActiveField = t;
    },
    prevField() {
      this.numActiveField > 0 && this.numActiveField--;
    },
    nextField() {
      this.numActiveField < this.count - 1 && this.numActiveField++;
    },
    downArrowLeft() {
      setTimeout(() => {
        this.prevField();
      });
    },
    downArrowRight() {
      setTimeout(() => {
        this.nextField();
      });
    },
    clearField(t) {
      t.preventDefault(), this.controller[this.numActiveField] = "", this.updateController(), this.prevField();
    },
    onPaste(t) {
      t.preventDefault();
      let e = (t.clipboardData || window.clipboardData).getData("text");
      Number(e) ? (this.controller.forEach((s, o) => {
        e && o === this.numActiveField && (this.controller[this.numActiveField] = e[0], e = e.slice(1), this.nextField());
      }), this.updateController()) : this.$emit("onError", "Некорректный ввод");
    },
    updateController() {
      let t = this.controller.map((e) => e === "" ? "0" : e).join("");
      this.$emit("onChange", t);
    }
  }
}, V = { class: "sv-pin" };
function x(t, e, s, o, r, n) {
  const i = p("field");
  return c(), d("div", V, [
    (c(!0), d(F, null, m(s.count, (l) => (c(), _(i, {
      key: l,
      isFocus: n.isFocus(l),
      value: r.controller[l - 1],
      hidden: s.hidden,
      onOnFocus: (u) => n.onFocusField(l - 1),
      onOnChange: (u) => n.onChangeInputField(l - 1, u),
      onKeydown: [
        e[0] || (e[0] = a((u) => n.clearField(u), ["delete"])),
        a(n.downArrowLeft, ["arrow-left"]),
        a(n.downArrowRight, ["arrow-right"])
      ],
      onPaste: n.onPaste
    }, null, 8, ["isFocus", "value", "hidden", "onOnFocus", "onOnChange", "onKeydown", "onPaste"]))), 128))
  ]);
}
const D = /* @__PURE__ */ h(A, [["render", x]]), E = {
  install: (t) => {
    t.component("PinInput", D);
  }
};
export {
  E as default
};