primevue 3.48.0 → 3.49.0

package/inputotp/InputOtp.vue

@@ -0,0 +1,201 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <template v-for="i in length" :key="i">
+            <slot :events="getTemplateEvents(i - 1)" :attrs="getTemplateAttrs(i - 1)" :index="i">
+                <OtpInputText
+                    :value="tokens[i - 1]"
+                    :type="inputType"
+                    :class="cx('input')"
+                    :inputmode="inputMode"
+                    :variant="variant"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :invalid="invalid"
+                    :tabindex="tabindex"
+                    :unstyled="unstyled"
+                    @input="onInput($event, i - 1)"
+                    @focus="onFocus($event)"
+                    @blur="onBlur($event)"
+                    @paste="onPaste($event)"
+                    @keydown="onKeyDown($event)"
+                    :pt="ptm('input')"
+                />
+            </slot>
+        </template>
+    </div>
+</template>
+
+<script>
+import InputText from 'primevue/inputtext';
+import BaseInputOtp from './BaseInputOtp.vue';
+
+export default {
+    name: 'InputOtp',
+    extends: BaseInputOtp,
+    inheritAttrs: false,
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    data() {
+        return {
+            tokens: []
+        };
+    },
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(newValue) {
+                this.tokens = newValue ? newValue.split('') : new Array(this.length);
+            }
+        }
+    },
+    methods: {
+        getTemplateAttrs(index) {
+            return {
+                value: this.tokens[index]
+            };
+        },
+        getTemplateEvents(index) {
+            return {
+                input: (event) => this.onInput(event, index),
+                keydown: (event) => this.onKeyDown(event),
+                focus: (event) => this.onFocus(event),
+                blur: (event) => this.onBlur(event),
+                paste: (event) => this.onPaste(event)
+            };
+        },
+        getPTOptions(key) {
+            const _ptm = key === 'root' ? this.ptmi : this.ptm;
+
+            return _ptm(key, {
+                context: {
+                    checked: this.checked,
+                    disabled: this.disabled
+                }
+            });
+        },
+        onInput(event, index) {
+            this.tokens[index] = event.target.value;
+            this.updateModel(event);
+
+            if (event.inputType === 'deleteContentBackward') {
+                this.moveToPrev(event);
+            } else if (event.inputType === 'insertText' || event.inputType === 'deleteContentForward') {
+                this.moveToNext(event);
+            }
+        },
+        updateModel(event) {
+            const newValue = this.tokens.join('');
+
+            this.$emit('update:modelValue', newValue);
+            this.$emit('change', {
+                originalEvent: event,
+                value: newValue
+            });
+        },
+        moveToPrev(event) {
+            let prevInput = this.findPrevInput(event.target);
+
+            if (prevInput) {
+                prevInput.focus();
+                prevInput.select();
+            }
+        },
+        moveToNext(event) {
+            let nextInput = this.findNextInput(event.target);
+
+            if (nextInput) {
+                nextInput.focus();
+                nextInput.select();
+            }
+        },
+        findNextInput(element) {
+            let nextElement = element.nextElementSibling;
+
+            if (!nextElement) return;
+
+            return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement);
+        },
+        findPrevInput(element) {
+            let prevElement = element.previousElementSibling;
+
+            if (!prevElement) return;
+
+            return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement);
+        },
+        onFocus(event) {
+            event.target.select();
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.$emit('blur', event);
+        },
+        onKeyDown(event) {
+            const keyCode = event.keyCode;
+
+            switch (keyCode) {
+                case 37:
+                    this.moveToPrev(event);
+                    event.preventDefault();
+
+                    break;
+
+                case 38:
+                case 40:
+                    event.preventDefault();
+
+                    break;
+
+                case 8:
+                    if (event.target.value.length === 0) {
+                        this.moveToPrev(event);
+                        event.preventDefault();
+                    }
+
+                    break;
+
+                case 40:
+                    event.preventDefault();
+
+                    break;
+
+                case 39:
+                    this.moveToNext(event);
+                    event.preventDefault();
+
+                    break;
+
+                default:
+                    if (this.integerOnly && !(event.keyCode >= 48 && event.keyCode <= 57)) {
+                        event.preventDefault();
+                    }
+
+                    break;
+            }
+        },
+        onPaste(event) {
+            let paste = event.clipboardData.getData('text');
+
+            if (paste.length) {
+                let pastedCode = paste.substring(0, this.length + 1);
+
+                if (!this.isIntegerOnly || !isNaN(pastedCode)) {
+                    this.tokens = pastedCode.split('');
+                    this.updateModel(event);
+                }
+            }
+
+            event.preventDefault();
+        }
+    },
+    computed: {
+        inputMode() {
+            return this.integerOnly ? 'number' : 'text';
+        },
+        inputType() {
+            return this.mask ? 'password' : 'text';
+        }
+    },
+    components: {
+        OtpInputText: InputText
+    }
+};
+</script>

package/inputotp/inputotp.cjs.js

@@ -0,0 +1,265 @@
+'use strict';
+
+var InputText = require('primevue/inputtext');
+var BaseComponent = require('primevue/basecomponent');
+var InputOtpStyle = require('primevue/inputotp/style');
+var vue = require('vue');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var InputText__default = /*#__PURE__*/_interopDefaultLegacy(InputText);
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+var InputOtpStyle__default = /*#__PURE__*/_interopDefaultLegacy(InputOtpStyle);
+
+var script$1 = {
+  name: 'BaseInputOtp',
+  "extends": BaseComponent__default["default"],
+  props: {
+    modelValue: {
+      type: null,
+      "default": false
+    },
+    invalid: {
+      type: Boolean,
+      "default": false
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    readonly: {
+      type: Boolean,
+      "default": false
+    },
+    variant: {
+      type: String,
+      "default": null
+    },
+    tabindex: {
+      type: Number,
+      "default": null
+    },
+    length: {
+      type: Number,
+      "default": 4
+    },
+    mask: {
+      type: Boolean,
+      "default": false
+    },
+    integerOnly: {
+      type: Boolean,
+      "default": false
+    }
+  },
+  style: InputOtpStyle__default["default"],
+  provide: function provide() {
+    return {
+      $parentInstance: this
+    };
+  }
+};
+
+var script = {
+  name: 'InputOtp',
+  "extends": script$1,
+  inheritAttrs: false,
+  emits: ['update:modelValue', 'change', 'focus', 'blur'],
+  data: function data() {
+    return {
+      tokens: []
+    };
+  },
+  watch: {
+    modelValue: {
+      immediate: true,
+      handler: function handler(newValue) {
+        this.tokens = newValue ? newValue.split('') : new Array(this.length);
+      }
+    }
+  },
+  methods: {
+    getTemplateAttrs: function getTemplateAttrs(index) {
+      return {
+        value: this.tokens[index]
+      };
+    },
+    getTemplateEvents: function getTemplateEvents(index) {
+      var _this = this;
+      return {
+        input: function input(event) {
+          return _this.onInput(event, index);
+        },
+        keydown: function keydown(event) {
+          return _this.onKeyDown(event);
+        },
+        focus: function focus(event) {
+          return _this.onFocus(event);
+        },
+        blur: function blur(event) {
+          return _this.onBlur(event);
+        },
+        paste: function paste(event) {
+          return _this.onPaste(event);
+        }
+      };
+    },
+    getPTOptions: function getPTOptions(key) {
+      var _ptm = key === 'root' ? this.ptmi : this.ptm;
+      return _ptm(key, {
+        context: {
+          checked: this.checked,
+          disabled: this.disabled
+        }
+      });
+    },
+    onInput: function onInput(event, index) {
+      this.tokens[index] = event.target.value;
+      this.updateModel(event);
+      if (event.inputType === 'deleteContentBackward') {
+        this.moveToPrev(event);
+      } else if (event.inputType === 'insertText' || event.inputType === 'deleteContentForward') {
+        this.moveToNext(event);
+      }
+    },
+    updateModel: function updateModel(event) {
+      var newValue = this.tokens.join('');
+      this.$emit('update:modelValue', newValue);
+      this.$emit('change', {
+        originalEvent: event,
+        value: newValue
+      });
+    },
+    moveToPrev: function moveToPrev(event) {
+      var prevInput = this.findPrevInput(event.target);
+      if (prevInput) {
+        prevInput.focus();
+        prevInput.select();
+      }
+    },
+    moveToNext: function moveToNext(event) {
+      var nextInput = this.findNextInput(event.target);
+      if (nextInput) {
+        nextInput.focus();
+        nextInput.select();
+      }
+    },
+    findNextInput: function findNextInput(element) {
+      var nextElement = element.nextElementSibling;
+      if (!nextElement) return;
+      return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement);
+    },
+    findPrevInput: function findPrevInput(element) {
+      var prevElement = element.previousElementSibling;
+      if (!prevElement) return;
+      return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement);
+    },
+    onFocus: function onFocus(event) {
+      event.target.select();
+      this.$emit('focus', event);
+    },
+    onBlur: function onBlur(event) {
+      this.$emit('blur', event);
+    },
+    onKeyDown: function onKeyDown(event) {
+      var keyCode = event.keyCode;
+      switch (keyCode) {
+        case 37:
+          this.moveToPrev(event);
+          event.preventDefault();
+          break;
+        case 38:
+        case 40:
+          event.preventDefault();
+          break;
+        case 8:
+          if (event.target.value.length === 0) {
+            this.moveToPrev(event);
+            event.preventDefault();
+          }
+          break;
+        case 40:
+          event.preventDefault();
+          break;
+        case 39:
+          this.moveToNext(event);
+          event.preventDefault();
+          break;
+        default:
+          if (this.integerOnly && !(event.keyCode >= 48 && event.keyCode <= 57)) {
+            event.preventDefault();
+          }
+          break;
+      }
+    },
+    onPaste: function onPaste(event) {
+      var paste = event.clipboardData.getData('text');
+      if (paste.length) {
+        var pastedCode = paste.substring(0, this.length + 1);
+        if (!this.isIntegerOnly || !isNaN(pastedCode)) {
+          this.tokens = pastedCode.split('');
+          this.updateModel(event);
+        }
+      }
+      event.preventDefault();
+    }
+  },
+  computed: {
+    inputMode: function inputMode() {
+      return this.integerOnly ? 'number' : 'text';
+    },
+    inputType: function inputType() {
+      return this.mask ? 'password' : 'text';
+    }
+  },
+  components: {
+    OtpInputText: InputText__default["default"]
+  }
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_OtpInputText = vue.resolveComponent("OtpInputText");
+  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    "class": _ctx.cx('root')
+  }, _ctx.ptmi('root')), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.length, function (i) {
+    return vue.renderSlot(_ctx.$slots, "default", {
+      key: i,
+      events: $options.getTemplateEvents(i - 1),
+      attrs: $options.getTemplateAttrs(i - 1),
+      index: i
+    }, function () {
+      return [vue.createVNode(_component_OtpInputText, {
+        value: $data.tokens[i - 1],
+        type: $options.inputType,
+        "class": vue.normalizeClass(_ctx.cx('input')),
+        inputmode: $options.inputMode,
+        variant: _ctx.variant,
+        readonly: _ctx.readonly,
+        disabled: _ctx.disabled,
+        invalid: _ctx.invalid,
+        tabindex: _ctx.tabindex,
+        unstyled: _ctx.unstyled,
+        onInput: function onInput($event) {
+          return $options.onInput($event, i - 1);
+        },
+        onFocus: _cache[0] || (_cache[0] = function ($event) {
+          return $options.onFocus($event);
+        }),
+        onBlur: _cache[1] || (_cache[1] = function ($event) {
+          return $options.onBlur($event);
+        }),
+        onPaste: _cache[2] || (_cache[2] = function ($event) {
+          return $options.onPaste($event);
+        }),
+        onKeydown: _cache[3] || (_cache[3] = function ($event) {
+          return $options.onKeyDown($event);
+        }),
+        pt: _ctx.ptm('input')
+      }, null, 8, ["value", "type", "class", "inputmode", "variant", "readonly", "disabled", "invalid", "tabindex", "unstyled", "onInput", "pt"])];
+    });
+  }), 128))], 16);
+}
+
+script.render = render;
+
+module.exports = script;

package/inputotp/inputotp.cjs.min.js

@@ -0,0 +1 @@
+"use strict";var e=require("primevue/inputtext"),t=require("primevue/basecomponent"),n=require("primevue/inputotp/style"),o=require("vue");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=u(e),r={name:"InputOtp",extends:{name:"BaseInputOtp",extends:u(t).default,props:{modelValue:{type:null,default:!1},invalid:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},variant:{type:String,default:null},tabindex:{type:Number,default:null},length:{type:Number,default:4},mask:{type:Boolean,default:!1},integerOnly:{type:Boolean,default:!1}},style:u(n).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:modelValue","change","focus","blur"],data:function(){return{tokens:[]}},watch:{modelValue:{immediate:!0,handler:function(e){this.tokens=e?e.split(""):new Array(this.length)}}},methods:{getTemplateAttrs:function(e){return{value:this.tokens[e]}},getTemplateEvents:function(e){var t=this;return{input:function(n){return t.onInput(n,e)},keydown:function(e){return t.onKeyDown(e)},focus:function(e){return t.onFocus(e)},blur:function(e){return t.onBlur(e)},paste:function(e){return t.onPaste(e)}}},getPTOptions:function(e){return("root"===e?this.ptmi:this.ptm)(e,{context:{checked:this.checked,disabled:this.disabled}})},onInput:function(e,t){this.tokens[t]=e.target.value,this.updateModel(e),"deleteContentBackward"===e.inputType?this.moveToPrev(e):"insertText"!==e.inputType&&"deleteContentForward"!==e.inputType||this.moveToNext(e)},updateModel:function(e){var t=this.tokens.join("");this.$emit("update:modelValue",t),this.$emit("change",{originalEvent:e,value:t})},moveToPrev:function(e){var t=this.findPrevInput(e.target);t&&(t.focus(),t.select())},moveToNext:function(e){var t=this.findNextInput(e.target);t&&(t.focus(),t.select())},findNextInput:function(e){var t=e.nextElementSibling;if(t)return"INPUT"===t.nodeName?t:this.findNextInput(t)},findPrevInput:function(e){var t=e.previousElementSibling;if(t)return"INPUT"===t.nodeName?t:this.findPrevInput(t)},onFocus:function(e){e.target.select(),this.$emit("focus",e)},onBlur:function(e){this.$emit("blur",e)},onKeyDown:function(e){switch(e.keyCode){case 37:this.moveToPrev(e),e.preventDefault();break;case 38:case 40:case 40:e.preventDefault();break;case 8:0===e.target.value.length&&(this.moveToPrev(e),e.preventDefault());break;case 39:this.moveToNext(e),e.preventDefault();break;default:!this.integerOnly||e.keyCode>=48&&e.keyCode<=57||e.preventDefault()}},onPaste:function(e){var t=e.clipboardData.getData("text");if(t.length){var n=t.substring(0,this.length+1);this.isIntegerOnly&&isNaN(n)||(this.tokens=n.split(""),this.updateModel(e))}e.preventDefault()}},computed:{inputMode:function(){return this.integerOnly?"number":"text"},inputType:function(){return this.mask?"password":"text"}},components:{OtpInputText:i.default}};r.render=function(e,t,n,u,i,r){var a=o.resolveComponent("OtpInputText");return o.openBlock(),o.createElementBlock("div",o.mergeProps({class:e.cx("root")},e.ptmi("root")),[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.length,(function(n){return o.renderSlot(e.$slots,"default",{key:n,events:r.getTemplateEvents(n-1),attrs:r.getTemplateAttrs(n-1),index:n},(function(){return[o.createVNode(a,{value:i.tokens[n-1],type:r.inputType,class:o.normalizeClass(e.cx("input")),inputmode:r.inputMode,variant:e.variant,readonly:e.readonly,disabled:e.disabled,invalid:e.invalid,tabindex:e.tabindex,unstyled:e.unstyled,onInput:function(e){return r.onInput(e,n-1)},onFocus:t[0]||(t[0]=function(e){return r.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return r.onBlur(e)}),onPaste:t[2]||(t[2]=function(e){return r.onPaste(e)}),onKeydown:t[3]||(t[3]=function(e){return r.onKeyDown(e)}),pt:e.ptm("input")},null,8,["value","type","class","inputmode","variant","readonly","disabled","invalid","tabindex","unstyled","onInput","pt"])]}))})),128))],16)},module.exports=r;