Dialog.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default
  21. });
  22. module.exports = __toCommonJS(stdin_exports);
  23. var import_vue = require("vue");
  24. var import_vue2 = require("vue");
  25. var import_utils = require("../utils");
  26. var import_shared = require("../popup/shared");
  27. var import_popup = require("../popup");
  28. var import_button = require("../button");
  29. var import_action_bar = require("../action-bar");
  30. var import_action_bar_button = require("../action-bar-button");
  31. const [name, bem, t] = (0, import_utils.createNamespace)("dialog");
  32. const dialogProps = (0, import_utils.extend)({}, import_shared.popupSharedProps, {
  33. title: String,
  34. theme: String,
  35. width: import_utils.numericProp,
  36. message: [String, Function],
  37. callback: Function,
  38. allowHtml: Boolean,
  39. className: import_utils.unknownProp,
  40. transition: (0, import_utils.makeStringProp)("van-dialog-bounce"),
  41. messageAlign: String,
  42. closeOnPopstate: import_utils.truthProp,
  43. showCancelButton: Boolean,
  44. cancelButtonText: String,
  45. cancelButtonColor: String,
  46. cancelButtonDisabled: Boolean,
  47. confirmButtonText: String,
  48. confirmButtonColor: String,
  49. confirmButtonDisabled: Boolean,
  50. showConfirmButton: import_utils.truthProp,
  51. closeOnClickOverlay: Boolean
  52. });
  53. const popupInheritKeys = [...import_shared.popupSharedPropKeys, "transition", "closeOnPopstate"];
  54. var stdin_default = (0, import_vue2.defineComponent)({
  55. name,
  56. props: dialogProps,
  57. emits: ["confirm", "cancel", "keydown", "update:show"],
  58. setup(props, {
  59. emit,
  60. slots
  61. }) {
  62. const root = (0, import_vue2.ref)();
  63. const loading = (0, import_vue2.reactive)({
  64. confirm: false,
  65. cancel: false
  66. });
  67. const updateShow = (value) => emit("update:show", value);
  68. const close = (action) => {
  69. var _a;
  70. updateShow(false);
  71. (_a = props.callback) == null ? void 0 : _a.call(props, action);
  72. };
  73. const getActionHandler = (action) => () => {
  74. if (!props.show) {
  75. return;
  76. }
  77. emit(action);
  78. if (props.beforeClose) {
  79. loading[action] = true;
  80. (0, import_utils.callInterceptor)(props.beforeClose, {
  81. args: [action],
  82. done() {
  83. close(action);
  84. loading[action] = false;
  85. },
  86. canceled() {
  87. loading[action] = false;
  88. }
  89. });
  90. } else {
  91. close(action);
  92. }
  93. };
  94. const onCancel = getActionHandler("cancel");
  95. const onConfirm = getActionHandler("confirm");
  96. const onKeydown = (0, import_vue2.withKeys)((event) => {
  97. var _a, _b;
  98. if (event.target !== ((_b = (_a = root.value) == null ? void 0 : _a.popupRef) == null ? void 0 : _b.value)) {
  99. return;
  100. }
  101. const onEventType = {
  102. Enter: props.showConfirmButton ? onConfirm : import_utils.noop,
  103. Escape: props.showCancelButton ? onCancel : import_utils.noop
  104. };
  105. onEventType[event.key]();
  106. emit("keydown", event);
  107. }, ["enter", "esc"]);
  108. const renderTitle = () => {
  109. const title = slots.title ? slots.title() : props.title;
  110. if (title) {
  111. return (0, import_vue.createVNode)("div", {
  112. "class": bem("header", {
  113. isolated: !props.message && !slots.default
  114. })
  115. }, [title]);
  116. }
  117. };
  118. const renderMessage = (hasTitle) => {
  119. const {
  120. message,
  121. allowHtml,
  122. messageAlign
  123. } = props;
  124. const classNames = bem("message", {
  125. "has-title": hasTitle,
  126. [messageAlign]: messageAlign
  127. });
  128. const content = (0, import_utils.isFunction)(message) ? message() : message;
  129. if (allowHtml && typeof content === "string") {
  130. return (0, import_vue.createVNode)("div", {
  131. "class": classNames,
  132. "innerHTML": content
  133. }, null);
  134. }
  135. return (0, import_vue.createVNode)("div", {
  136. "class": classNames
  137. }, [content]);
  138. };
  139. const renderContent = () => {
  140. if (slots.default) {
  141. return (0, import_vue.createVNode)("div", {
  142. "class": bem("content")
  143. }, [slots.default()]);
  144. }
  145. const {
  146. title,
  147. message,
  148. allowHtml
  149. } = props;
  150. if (message) {
  151. const hasTitle = !!(title || slots.title);
  152. return (0, import_vue.createVNode)("div", {
  153. "key": allowHtml ? 1 : 0,
  154. "class": bem("content", {
  155. isolated: !hasTitle
  156. })
  157. }, [renderMessage(hasTitle)]);
  158. }
  159. };
  160. const renderButtons = () => (0, import_vue.createVNode)("div", {
  161. "class": [import_utils.BORDER_TOP, bem("footer")]
  162. }, [props.showCancelButton && (0, import_vue.createVNode)(import_button.Button, {
  163. "size": "large",
  164. "text": props.cancelButtonText || t("cancel"),
  165. "class": bem("cancel"),
  166. "style": {
  167. color: props.cancelButtonColor
  168. },
  169. "loading": loading.cancel,
  170. "disabled": props.cancelButtonDisabled,
  171. "onClick": onCancel
  172. }, null), props.showConfirmButton && (0, import_vue.createVNode)(import_button.Button, {
  173. "size": "large",
  174. "text": props.confirmButtonText || t("confirm"),
  175. "class": [bem("confirm"), {
  176. [import_utils.BORDER_LEFT]: props.showCancelButton
  177. }],
  178. "style": {
  179. color: props.confirmButtonColor
  180. },
  181. "loading": loading.confirm,
  182. "disabled": props.confirmButtonDisabled,
  183. "onClick": onConfirm
  184. }, null)]);
  185. const renderRoundButtons = () => (0, import_vue.createVNode)(import_action_bar.ActionBar, {
  186. "class": bem("footer")
  187. }, {
  188. default: () => [props.showCancelButton && (0, import_vue.createVNode)(import_action_bar_button.ActionBarButton, {
  189. "type": "warning",
  190. "text": props.cancelButtonText || t("cancel"),
  191. "class": bem("cancel"),
  192. "color": props.cancelButtonColor,
  193. "loading": loading.cancel,
  194. "disabled": props.cancelButtonDisabled,
  195. "onClick": onCancel
  196. }, null), props.showConfirmButton && (0, import_vue.createVNode)(import_action_bar_button.ActionBarButton, {
  197. "type": "danger",
  198. "text": props.confirmButtonText || t("confirm"),
  199. "class": bem("confirm"),
  200. "color": props.confirmButtonColor,
  201. "loading": loading.confirm,
  202. "disabled": props.confirmButtonDisabled,
  203. "onClick": onConfirm
  204. }, null)]
  205. });
  206. const renderFooter = () => {
  207. if (slots.footer) {
  208. return slots.footer();
  209. }
  210. return props.theme === "round-button" ? renderRoundButtons() : renderButtons();
  211. };
  212. return () => {
  213. const {
  214. width,
  215. title,
  216. theme,
  217. message,
  218. className
  219. } = props;
  220. return (0, import_vue.createVNode)(import_popup.Popup, (0, import_vue.mergeProps)({
  221. "ref": root,
  222. "role": "dialog",
  223. "class": [bem([theme]), className],
  224. "style": {
  225. width: (0, import_utils.addUnit)(width)
  226. },
  227. "tabindex": 0,
  228. "aria-labelledby": title || message,
  229. "onKeydown": onKeydown,
  230. "onUpdate:show": updateShow
  231. }, (0, import_utils.pick)(props, popupInheritKeys)), {
  232. default: () => [renderTitle(), renderContent(), renderFooter()]
  233. });
  234. };
  235. }
  236. });