| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 | "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.default = void 0;var _utils = require("../utils");var _event = require("../utils/dom/event");var _portal = require("../mixins/portal");var _bindEvent = require("../mixins/bind-event");var _Key = _interopRequireDefault(require("./Key"));var _createNamespace = (0, _utils.createNamespace)('number-keyboard'),    createComponent = _createNamespace[0],    bem = _createNamespace[1];var _default = createComponent({  mixins: [(0, _portal.PortalMixin)(), (0, _bindEvent.BindEventMixin)(function (bind) {    if (this.hideOnClickOutside) {      bind(document.body, 'touchstart', this.onBlur);    }  })],  model: {    event: 'update:value'  },  props: {    show: Boolean,    title: String,    zIndex: [Number, String],    randomKeyOrder: Boolean,    closeButtonText: String,    deleteButtonText: String,    closeButtonLoading: Boolean,    theme: {      type: String,      default: 'default'    },    value: {      type: String,      default: ''    },    extraKey: {      type: [String, Array],      default: ''    },    maxlength: {      type: [Number, String],      default: Number.MAX_VALUE    },    transition: {      type: Boolean,      default: true    },    showDeleteKey: {      type: Boolean,      default: true    },    hideOnClickOutside: {      type: Boolean,      default: true    },    safeAreaInsetBottom: {      type: Boolean,      default: true    }  },  watch: {    show: function show(val) {      if (!this.transition) {        this.$emit(val ? 'show' : 'hide');      }    }  },  computed: {    keys: function keys() {      if (this.theme === 'custom') {        return this.genCustomKeys();      }      return this.genDefaultKeys();    }  },  methods: {    genBasicKeys: function genBasicKeys() {      var keys = [];      for (var i = 1; i <= 9; i++) {        keys.push({          text: i        });      }      if (this.randomKeyOrder) {        keys.sort(function () {          return Math.random() > 0.5 ? 1 : -1;        });      }      return keys;    },    genDefaultKeys: function genDefaultKeys() {      return [].concat(this.genBasicKeys(), [{        text: this.extraKey,        type: 'extra'      }, {        text: 0      }, {        text: this.showDeleteKey ? this.deleteButtonText : '',        type: this.showDeleteKey ? 'delete' : ''      }]);    },    genCustomKeys: function genCustomKeys() {      var keys = this.genBasicKeys();      var extraKey = this.extraKey;      var extraKeys = Array.isArray(extraKey) ? extraKey : [extraKey];      if (extraKeys.length === 1) {        keys.push({          text: 0,          wider: true        }, {          text: extraKeys[0],          type: 'extra'        });      } else if (extraKeys.length === 2) {        keys.push({          text: extraKeys[0],          type: 'extra'        }, {          text: 0        }, {          text: extraKeys[1],          type: 'extra'        });      }      return keys;    },    onBlur: function onBlur() {      this.show && this.$emit('blur');    },    onClose: function onClose() {      this.$emit('close');      this.onBlur();    },    onAnimationEnd: function onAnimationEnd() {      this.$emit(this.show ? 'show' : 'hide');    },    onPress: function onPress(text, type) {      if (text === '') {        if (type === 'extra') {          this.onBlur();        }        return;      }      var value = this.value;      if (type === 'delete') {        this.$emit('delete');        this.$emit('update:value', value.slice(0, value.length - 1));      } else if (type === 'close') {        this.onClose();      } else if (value.length < this.maxlength) {        this.$emit('input', text);        this.$emit('update:value', value + text);      }    },    genTitle: function genTitle() {      var h = this.$createElement;      var title = this.title,          theme = this.theme,          closeButtonText = this.closeButtonText;      var titleLeft = this.slots('title-left');      var showClose = closeButtonText && theme === 'default';      var showTitle = title || showClose || titleLeft;      if (!showTitle) {        return;      }      return h("div", {        "class": bem('header')      }, [titleLeft && h("span", {        "class": bem('title-left')      }, [titleLeft]), title && h("h2", {        "class": bem('title')      }, [title]), showClose && h("button", {        "attrs": {          "type": "button"        },        "class": bem('close'),        "on": {          "click": this.onClose        }      }, [closeButtonText])]);    },    genKeys: function genKeys() {      var _this = this;      var h = this.$createElement;      return this.keys.map(function (key) {        return h(_Key.default, {          "key": key.text,          "attrs": {            "text": key.text,            "type": key.type,            "wider": key.wider,            "color": key.color          },          "on": {            "press": _this.onPress          }        }, [key.type === 'delete' && _this.slots('delete'), key.type === 'extra' && _this.slots('extra-key')]);      });    },    genSidebar: function genSidebar() {      var h = this.$createElement;      if (this.theme === 'custom') {        return h("div", {          "class": bem('sidebar')        }, [this.showDeleteKey && h(_Key.default, {          "attrs": {            "large": true,            "text": this.deleteButtonText,            "type": "delete"          },          "on": {            "press": this.onPress          }        }, [this.slots('delete')]), h(_Key.default, {          "attrs": {            "large": true,            "text": this.closeButtonText,            "type": "close",            "color": "blue",            "loading": this.closeButtonLoading          },          "on": {            "press": this.onPress          }        })]);      }    }  },  render: function render() {    var h = arguments[0];    var Title = this.genTitle();    return h("transition", {      "attrs": {        "name": this.transition ? 'van-slide-up' : ''      }    }, [h("div", {      "directives": [{        name: "show",        value: this.show      }],      "style": {        zIndex: this.zIndex      },      "class": bem({        unfit: !this.safeAreaInsetBottom,        'with-title': Title      }),      "on": {        "touchstart": _event.stopPropagation,        "animationend": this.onAnimationEnd,        "webkitAnimationEnd": this.onAnimationEnd      }    }, [Title, h("div", {      "class": bem('body')    }, [h("div", {      "class": bem('keys')    }, [this.genKeys()]), this.genSidebar()])])]);  }});exports.default = _default;
 |