index.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _utils = require("../utils");
  6. var _event = require("../utils/dom/event");
  7. var _portal = require("../mixins/portal");
  8. var _bindEvent = require("../mixins/bind-event");
  9. var _Key = _interopRequireDefault(require("./Key"));
  10. var _createNamespace = (0, _utils.createNamespace)('number-keyboard'),
  11. createComponent = _createNamespace[0],
  12. bem = _createNamespace[1];
  13. var _default = createComponent({
  14. mixins: [(0, _portal.PortalMixin)(), (0, _bindEvent.BindEventMixin)(function (bind) {
  15. if (this.hideOnClickOutside) {
  16. bind(document.body, 'touchstart', this.onBlur);
  17. }
  18. })],
  19. model: {
  20. event: 'update:value'
  21. },
  22. props: {
  23. show: Boolean,
  24. title: String,
  25. zIndex: [Number, String],
  26. randomKeyOrder: Boolean,
  27. closeButtonText: String,
  28. deleteButtonText: String,
  29. closeButtonLoading: Boolean,
  30. theme: {
  31. type: String,
  32. default: 'default'
  33. },
  34. value: {
  35. type: String,
  36. default: ''
  37. },
  38. extraKey: {
  39. type: [String, Array],
  40. default: ''
  41. },
  42. maxlength: {
  43. type: [Number, String],
  44. default: Number.MAX_VALUE
  45. },
  46. transition: {
  47. type: Boolean,
  48. default: true
  49. },
  50. showDeleteKey: {
  51. type: Boolean,
  52. default: true
  53. },
  54. hideOnClickOutside: {
  55. type: Boolean,
  56. default: true
  57. },
  58. safeAreaInsetBottom: {
  59. type: Boolean,
  60. default: true
  61. }
  62. },
  63. watch: {
  64. show: function show(val) {
  65. if (!this.transition) {
  66. this.$emit(val ? 'show' : 'hide');
  67. }
  68. }
  69. },
  70. computed: {
  71. keys: function keys() {
  72. if (this.theme === 'custom') {
  73. return this.genCustomKeys();
  74. }
  75. return this.genDefaultKeys();
  76. }
  77. },
  78. methods: {
  79. genBasicKeys: function genBasicKeys() {
  80. var keys = [];
  81. for (var i = 1; i <= 9; i++) {
  82. keys.push({
  83. text: i
  84. });
  85. }
  86. if (this.randomKeyOrder) {
  87. keys.sort(function () {
  88. return Math.random() > 0.5 ? 1 : -1;
  89. });
  90. }
  91. return keys;
  92. },
  93. genDefaultKeys: function genDefaultKeys() {
  94. return [].concat(this.genBasicKeys(), [{
  95. text: this.extraKey,
  96. type: 'extra'
  97. }, {
  98. text: 0
  99. }, {
  100. text: this.showDeleteKey ? this.deleteButtonText : '',
  101. type: this.showDeleteKey ? 'delete' : ''
  102. }]);
  103. },
  104. genCustomKeys: function genCustomKeys() {
  105. var keys = this.genBasicKeys();
  106. var extraKey = this.extraKey;
  107. var extraKeys = Array.isArray(extraKey) ? extraKey : [extraKey];
  108. if (extraKeys.length === 1) {
  109. keys.push({
  110. text: 0,
  111. wider: true
  112. }, {
  113. text: extraKeys[0],
  114. type: 'extra'
  115. });
  116. } else if (extraKeys.length === 2) {
  117. keys.push({
  118. text: extraKeys[0],
  119. type: 'extra'
  120. }, {
  121. text: 0
  122. }, {
  123. text: extraKeys[1],
  124. type: 'extra'
  125. });
  126. }
  127. return keys;
  128. },
  129. onBlur: function onBlur() {
  130. this.show && this.$emit('blur');
  131. },
  132. onClose: function onClose() {
  133. this.$emit('close');
  134. this.onBlur();
  135. },
  136. onAnimationEnd: function onAnimationEnd() {
  137. this.$emit(this.show ? 'show' : 'hide');
  138. },
  139. onPress: function onPress(text, type) {
  140. if (text === '') {
  141. if (type === 'extra') {
  142. this.onBlur();
  143. }
  144. return;
  145. }
  146. var value = this.value;
  147. if (type === 'delete') {
  148. this.$emit('delete');
  149. this.$emit('update:value', value.slice(0, value.length - 1));
  150. } else if (type === 'close') {
  151. this.onClose();
  152. } else if (value.length < this.maxlength) {
  153. this.$emit('input', text);
  154. this.$emit('update:value', value + text);
  155. }
  156. },
  157. genTitle: function genTitle() {
  158. var h = this.$createElement;
  159. var title = this.title,
  160. theme = this.theme,
  161. closeButtonText = this.closeButtonText;
  162. var titleLeft = this.slots('title-left');
  163. var showClose = closeButtonText && theme === 'default';
  164. var showTitle = title || showClose || titleLeft;
  165. if (!showTitle) {
  166. return;
  167. }
  168. return h("div", {
  169. "class": bem('header')
  170. }, [titleLeft && h("span", {
  171. "class": bem('title-left')
  172. }, [titleLeft]), title && h("h2", {
  173. "class": bem('title')
  174. }, [title]), showClose && h("button", {
  175. "attrs": {
  176. "type": "button"
  177. },
  178. "class": bem('close'),
  179. "on": {
  180. "click": this.onClose
  181. }
  182. }, [closeButtonText])]);
  183. },
  184. genKeys: function genKeys() {
  185. var _this = this;
  186. var h = this.$createElement;
  187. return this.keys.map(function (key) {
  188. return h(_Key.default, {
  189. "key": key.text,
  190. "attrs": {
  191. "text": key.text,
  192. "type": key.type,
  193. "wider": key.wider,
  194. "color": key.color
  195. },
  196. "on": {
  197. "press": _this.onPress
  198. }
  199. }, [key.type === 'delete' && _this.slots('delete'), key.type === 'extra' && _this.slots('extra-key')]);
  200. });
  201. },
  202. genSidebar: function genSidebar() {
  203. var h = this.$createElement;
  204. if (this.theme === 'custom') {
  205. return h("div", {
  206. "class": bem('sidebar')
  207. }, [this.showDeleteKey && h(_Key.default, {
  208. "attrs": {
  209. "large": true,
  210. "text": this.deleteButtonText,
  211. "type": "delete"
  212. },
  213. "on": {
  214. "press": this.onPress
  215. }
  216. }, [this.slots('delete')]), h(_Key.default, {
  217. "attrs": {
  218. "large": true,
  219. "text": this.closeButtonText,
  220. "type": "close",
  221. "color": "blue",
  222. "loading": this.closeButtonLoading
  223. },
  224. "on": {
  225. "press": this.onPress
  226. }
  227. })]);
  228. }
  229. }
  230. },
  231. render: function render() {
  232. var h = arguments[0];
  233. var Title = this.genTitle();
  234. return h("transition", {
  235. "attrs": {
  236. "name": this.transition ? 'van-slide-up' : ''
  237. }
  238. }, [h("div", {
  239. "directives": [{
  240. name: "show",
  241. value: this.show
  242. }],
  243. "style": {
  244. zIndex: this.zIndex
  245. },
  246. "class": bem({
  247. unfit: !this.safeAreaInsetBottom,
  248. 'with-title': Title
  249. }),
  250. "on": {
  251. "touchstart": _event.stopPropagation,
  252. "animationend": this.onAnimationEnd,
  253. "webkitAnimationEnd": this.onAnimationEnd
  254. }
  255. }, [Title, h("div", {
  256. "class": bem('body')
  257. }, [h("div", {
  258. "class": bem('keys')
  259. }, [this.genKeys()]), this.genSidebar()])])]);
  260. }
  261. });
  262. exports.default = _default;