Dialog.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
  6. var _utils = require("../utils");
  7. var _constant = require("../utils/constant");
  8. var _popup = require("../mixins/popup");
  9. var _button = _interopRequireDefault(require("../button"));
  10. var _goodsAction = _interopRequireDefault(require("../goods-action"));
  11. var _goodsActionButton = _interopRequireDefault(require("../goods-action-button"));
  12. var _createNamespace = (0, _utils.createNamespace)('dialog'),
  13. createComponent = _createNamespace[0],
  14. bem = _createNamespace[1],
  15. t = _createNamespace[2];
  16. var _default = createComponent({
  17. mixins: [(0, _popup.PopupMixin)()],
  18. props: {
  19. title: String,
  20. theme: String,
  21. width: [Number, String],
  22. message: String,
  23. className: null,
  24. callback: Function,
  25. beforeClose: Function,
  26. messageAlign: String,
  27. cancelButtonText: String,
  28. cancelButtonColor: String,
  29. confirmButtonText: String,
  30. confirmButtonColor: String,
  31. showCancelButton: Boolean,
  32. overlay: {
  33. type: Boolean,
  34. default: true
  35. },
  36. allowHtml: {
  37. type: Boolean,
  38. default: true
  39. },
  40. transition: {
  41. type: String,
  42. default: 'van-dialog-bounce'
  43. },
  44. showConfirmButton: {
  45. type: Boolean,
  46. default: true
  47. },
  48. closeOnPopstate: {
  49. type: Boolean,
  50. default: true
  51. },
  52. closeOnClickOverlay: {
  53. type: Boolean,
  54. default: false
  55. }
  56. },
  57. data: function data() {
  58. return {
  59. loading: {
  60. confirm: false,
  61. cancel: false
  62. }
  63. };
  64. },
  65. methods: {
  66. onClickOverlay: function onClickOverlay() {
  67. this.handleAction('overlay');
  68. },
  69. handleAction: function handleAction(action) {
  70. var _this = this;
  71. this.$emit(action); // show not trigger close event when hidden
  72. if (!this.value) {
  73. return;
  74. }
  75. if (this.beforeClose) {
  76. this.loading[action] = true;
  77. this.beforeClose(action, function (state) {
  78. if (state !== false && _this.loading[action]) {
  79. _this.onClose(action);
  80. }
  81. _this.loading.confirm = false;
  82. _this.loading.cancel = false;
  83. });
  84. } else {
  85. this.onClose(action);
  86. }
  87. },
  88. onClose: function onClose(action) {
  89. this.close();
  90. if (this.callback) {
  91. this.callback(action);
  92. }
  93. },
  94. onOpened: function onOpened() {
  95. var _this2 = this;
  96. this.$emit('opened');
  97. this.$nextTick(function () {
  98. var _this2$$refs$dialog;
  99. (_this2$$refs$dialog = _this2.$refs.dialog) == null ? void 0 : _this2$$refs$dialog.focus();
  100. });
  101. },
  102. onClosed: function onClosed() {
  103. this.$emit('closed');
  104. },
  105. onKeydown: function onKeydown(event) {
  106. var _this3 = this;
  107. if (event.key === 'Escape' || event.key === 'Enter') {
  108. // skip keyboard events of child elements
  109. if (event.target !== this.$refs.dialog) {
  110. return;
  111. }
  112. var onEventType = {
  113. Enter: this.showConfirmButton ? function () {
  114. return _this3.handleAction('confirm');
  115. } : _utils.noop,
  116. Escape: this.showCancelButton ? function () {
  117. return _this3.handleAction('cancel');
  118. } : _utils.noop
  119. };
  120. onEventType[event.key]();
  121. this.$emit('keydown', event);
  122. }
  123. },
  124. genRoundButtons: function genRoundButtons() {
  125. var _this4 = this;
  126. var h = this.$createElement;
  127. return h(_goodsAction.default, {
  128. "class": bem('footer')
  129. }, [this.showCancelButton && h(_goodsActionButton.default, {
  130. "attrs": {
  131. "size": "large",
  132. "type": "warning",
  133. "text": this.cancelButtonText || t('cancel'),
  134. "color": this.cancelButtonColor,
  135. "loading": this.loading.cancel
  136. },
  137. "class": bem('cancel'),
  138. "on": {
  139. "click": function click() {
  140. _this4.handleAction('cancel');
  141. }
  142. }
  143. }), this.showConfirmButton && h(_goodsActionButton.default, {
  144. "attrs": {
  145. "size": "large",
  146. "type": "danger",
  147. "text": this.confirmButtonText || t('confirm'),
  148. "color": this.confirmButtonColor,
  149. "loading": this.loading.confirm
  150. },
  151. "class": bem('confirm'),
  152. "on": {
  153. "click": function click() {
  154. _this4.handleAction('confirm');
  155. }
  156. }
  157. })]);
  158. },
  159. genButtons: function genButtons() {
  160. var _this5 = this,
  161. _ref;
  162. var h = this.$createElement;
  163. var multiple = this.showCancelButton && this.showConfirmButton;
  164. return h("div", {
  165. "class": [_constant.BORDER_TOP, bem('footer')]
  166. }, [this.showCancelButton && h(_button.default, {
  167. "attrs": {
  168. "size": "large",
  169. "loading": this.loading.cancel,
  170. "text": this.cancelButtonText || t('cancel'),
  171. "nativeType": "button"
  172. },
  173. "class": bem('cancel'),
  174. "style": {
  175. color: this.cancelButtonColor
  176. },
  177. "on": {
  178. "click": function click() {
  179. _this5.handleAction('cancel');
  180. }
  181. }
  182. }), this.showConfirmButton && h(_button.default, {
  183. "attrs": {
  184. "size": "large",
  185. "loading": this.loading.confirm,
  186. "text": this.confirmButtonText || t('confirm'),
  187. "nativeType": "button"
  188. },
  189. "class": [bem('confirm'), (_ref = {}, _ref[_constant.BORDER_LEFT] = multiple, _ref)],
  190. "style": {
  191. color: this.confirmButtonColor
  192. },
  193. "on": {
  194. "click": function click() {
  195. _this5.handleAction('confirm');
  196. }
  197. }
  198. })]);
  199. },
  200. genContent: function genContent(hasTitle, messageSlot) {
  201. var h = this.$createElement;
  202. if (messageSlot) {
  203. return h("div", {
  204. "class": bem('content')
  205. }, [messageSlot]);
  206. }
  207. var message = this.message,
  208. messageAlign = this.messageAlign;
  209. if (message) {
  210. var _bem, _domProps;
  211. var data = {
  212. class: bem('message', (_bem = {
  213. 'has-title': hasTitle
  214. }, _bem[messageAlign] = messageAlign, _bem)),
  215. domProps: (_domProps = {}, _domProps[this.allowHtml ? 'innerHTML' : 'textContent'] = message, _domProps)
  216. };
  217. return h("div", {
  218. "class": bem('content', {
  219. isolated: !hasTitle
  220. })
  221. }, [h("div", (0, _babelHelperVueJsxMergeProps.default)([{}, data]))]);
  222. }
  223. }
  224. },
  225. render: function render() {
  226. var h = arguments[0];
  227. if (!this.shouldRender) {
  228. return;
  229. }
  230. var message = this.message;
  231. var messageSlot = this.slots();
  232. var title = this.slots('title') || this.title;
  233. var Title = title && h("div", {
  234. "class": bem('header', {
  235. isolated: !message && !messageSlot
  236. })
  237. }, [title]);
  238. return h("transition", {
  239. "attrs": {
  240. "name": this.transition
  241. },
  242. "on": {
  243. "afterEnter": this.onOpened,
  244. "afterLeave": this.onClosed
  245. }
  246. }, [h("div", {
  247. "directives": [{
  248. name: "show",
  249. value: this.value
  250. }],
  251. "attrs": {
  252. "role": "dialog",
  253. "aria-labelledby": this.title || message,
  254. "tabIndex": 0
  255. },
  256. "class": [bem([this.theme]), this.className],
  257. "style": {
  258. width: (0, _utils.addUnit)(this.width)
  259. },
  260. "ref": "dialog",
  261. "on": {
  262. "keydown": this.onKeydown
  263. }
  264. }, [Title, this.genContent(title, messageSlot), this.theme === 'round-button' ? this.genRoundButtons() : this.genButtons()])]);
  265. }
  266. });
  267. exports.default = _default;