index.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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/event");
  7. var _Key = _interopRequireDefault(require("./Key"));
  8. var _use = (0, _utils.use)('number-keyboard'),
  9. sfc = _use[0],
  10. bem = _use[1],
  11. t = _use[2];
  12. var CLOSE_KEY_TYPE = ['blue', 'big'];
  13. var DELETE_KEY_TYPE = ['delete', 'big', 'gray'];
  14. var _default = sfc({
  15. props: {
  16. show: Boolean,
  17. title: String,
  18. closeButtonText: String,
  19. deleteButtonText: String,
  20. safeAreaInsetBottom: Boolean,
  21. theme: {
  22. type: String,
  23. "default": 'default'
  24. },
  25. extraKey: {
  26. type: String,
  27. "default": ''
  28. },
  29. zIndex: {
  30. type: Number,
  31. "default": 100
  32. },
  33. transition: {
  34. type: Boolean,
  35. "default": true
  36. },
  37. showDeleteKey: {
  38. type: Boolean,
  39. "default": true
  40. },
  41. hideOnClickOutside: {
  42. type: Boolean,
  43. "default": true
  44. }
  45. },
  46. mounted: function mounted() {
  47. this.handler(true);
  48. },
  49. destroyed: function destroyed() {
  50. this.handler(false);
  51. },
  52. activated: function activated() {
  53. this.handler(true);
  54. },
  55. deactivated: function deactivated() {
  56. this.handler(false);
  57. },
  58. watch: {
  59. show: function show() {
  60. if (!this.transition) {
  61. this.$emit(this.show ? 'show' : 'hide');
  62. }
  63. }
  64. },
  65. computed: {
  66. keys: function keys() {
  67. var keys = [];
  68. for (var i = 1; i <= 9; i++) {
  69. keys.push({
  70. text: i
  71. });
  72. }
  73. switch (this.theme) {
  74. case 'default':
  75. keys.push({
  76. text: this.extraKey,
  77. type: ['gray']
  78. }, {
  79. text: 0
  80. }, {
  81. text: this.deleteText,
  82. type: ['gray', 'delete']
  83. });
  84. break;
  85. case 'custom':
  86. keys.push({
  87. text: 0,
  88. type: ['middle']
  89. }, {
  90. text: this.extraKey
  91. });
  92. break;
  93. }
  94. return keys;
  95. },
  96. deleteText: function deleteText() {
  97. return this.deleteButtonText || t('delete');
  98. }
  99. },
  100. methods: {
  101. handler: function handler(action) {
  102. /* istanbul ignore if */
  103. if (this.$isServer) {
  104. return;
  105. }
  106. if (action !== this.handlerStatus && this.hideOnClickOutside) {
  107. this.handlerStatus = action;
  108. document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur);
  109. }
  110. },
  111. onBlur: function onBlur() {
  112. this.$emit('blur');
  113. },
  114. onClose: function onClose() {
  115. this.$emit('close');
  116. this.onBlur();
  117. },
  118. onAnimationEnd: function onAnimationEnd() {
  119. this.$emit(this.show ? 'show' : 'hide');
  120. },
  121. onPress: function onPress(text) {
  122. if (text === '') {
  123. return;
  124. }
  125. if (text === this.deleteText) {
  126. this.$emit('delete');
  127. } else if (text === this.closeButtonText) {
  128. this.onClose();
  129. } else {
  130. this.$emit('input', text);
  131. }
  132. }
  133. },
  134. render: function render(h) {
  135. var title = this.title,
  136. theme = this.theme,
  137. onPress = this.onPress,
  138. closeButtonText = this.closeButtonText;
  139. var titleLeftSlot = this.slots('title-left');
  140. var showTitleClose = closeButtonText && theme === 'default';
  141. var showTitle = title || showTitleClose || titleLeftSlot;
  142. return h("transition", {
  143. "attrs": {
  144. "name": this.transition ? 'van-slide-up' : ''
  145. }
  146. }, [h("div", {
  147. "directives": [{
  148. name: "show",
  149. value: this.show
  150. }],
  151. "style": {
  152. zIndex: this.zIndex
  153. },
  154. "class": bem([theme, {
  155. 'safe-area-inset-bottom': this.safeAreaInsetBottom
  156. }]),
  157. "on": {
  158. "touchstart": _event.stopPropagation,
  159. "animationend": this.onAnimationEnd,
  160. "webkitAnimationEnd": this.onAnimationEnd
  161. }
  162. }, [showTitle && h("div", {
  163. "class": [bem('title'), 'van-hairline--top']
  164. }, [titleLeftSlot && h("span", {
  165. "class": bem('title-left')
  166. }, [titleLeftSlot]), title && h("span", [title]), showTitleClose && h("span", {
  167. "class": bem('close'),
  168. "on": {
  169. "click": this.onClose
  170. }
  171. }, [closeButtonText])]), h("div", {
  172. "class": bem('body')
  173. }, [this.keys.map(function (key) {
  174. return h(_Key["default"], {
  175. "key": key.text,
  176. "attrs": {
  177. "text": key.text,
  178. "type": key.type
  179. },
  180. "on": {
  181. "press": onPress
  182. }
  183. });
  184. })]), theme === 'custom' && h("div", {
  185. "class": bem('sidebar')
  186. }, [h(_Key["default"], {
  187. "attrs": {
  188. "text": this.deleteText,
  189. "type": DELETE_KEY_TYPE
  190. },
  191. "on": {
  192. "press": onPress
  193. }
  194. }), h(_Key["default"], {
  195. "attrs": {
  196. "text": closeButtonText,
  197. "type": CLOSE_KEY_TYPE
  198. },
  199. "on": {
  200. "press": onPress
  201. }
  202. })])])]);
  203. }
  204. });
  205. exports["default"] = _default;