Dialog.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  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. dialogProps: () => dialogProps
  22. });
  23. module.exports = __toCommonJS(stdin_exports);
  24. var import_vue = 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. keyboardEnabled: import_utils.truthProp
  53. });
  54. const popupInheritKeys = [...import_shared.popupSharedPropKeys, "transition", "closeOnPopstate"];
  55. var stdin_default = (0, import_vue.defineComponent)({
  56. name,
  57. props: dialogProps,
  58. emits: ["confirm", "cancel", "keydown", "update:show"],
  59. setup(props, {
  60. emit,
  61. slots
  62. }) {
  63. const root = (0, import_vue.ref)();
  64. const loading = (0, import_vue.reactive)({
  65. confirm: false,
  66. cancel: false
  67. });
  68. const updateShow = (value) => emit("update:show", value);
  69. const close = (action) => {
  70. var _a;
  71. updateShow(false);
  72. (_a = props.callback) == null ? void 0 : _a.call(props, action);
  73. };
  74. const getActionHandler = (action) => () => {
  75. if (!props.show) {
  76. return;
  77. }
  78. emit(action);
  79. if (props.beforeClose) {
  80. loading[action] = true;
  81. (0, import_utils.callInterceptor)(props.beforeClose, {
  82. args: [action],
  83. done() {
  84. close(action);
  85. loading[action] = false;
  86. },
  87. canceled() {
  88. loading[action] = false;
  89. }
  90. });
  91. } else {
  92. close(action);
  93. }
  94. };
  95. const onCancel = getActionHandler("cancel");
  96. const onConfirm = getActionHandler("confirm");
  97. const onKeydown = (0, import_vue.withKeys)((event) => {
  98. var _a, _b;
  99. if (!props.keyboardEnabled) {
  100. return;
  101. }
  102. if (event.target !== ((_b = (_a = root.value) == null ? void 0 : _a.popupRef) == null ? void 0 : _b.value)) {
  103. return;
  104. }
  105. const onEventType = {
  106. Enter: props.showConfirmButton ? onConfirm : import_utils.noop,
  107. Escape: props.showCancelButton ? onCancel : import_utils.noop
  108. };
  109. onEventType[event.key]();
  110. emit("keydown", event);
  111. }, ["enter", "esc"]);
  112. const renderTitle = () => {
  113. const title = slots.title ? slots.title() : props.title;
  114. if (title) {
  115. return (0, import_vue.createVNode)("div", {
  116. "class": bem("header", {
  117. isolated: !props.message && !slots.default
  118. })
  119. }, [title]);
  120. }
  121. };
  122. const renderMessage = (hasTitle) => {
  123. const {
  124. message,
  125. allowHtml,
  126. messageAlign
  127. } = props;
  128. const classNames = bem("message", {
  129. "has-title": hasTitle,
  130. [messageAlign]: messageAlign
  131. });
  132. const content = (0, import_utils.isFunction)(message) ? message() : message;
  133. if (allowHtml && typeof content === "string") {
  134. return (0, import_vue.createVNode)("div", {
  135. "class": classNames,
  136. "innerHTML": content
  137. }, null);
  138. }
  139. return (0, import_vue.createVNode)("div", {
  140. "class": classNames
  141. }, [content]);
  142. };
  143. const renderContent = () => {
  144. if (slots.default) {
  145. return (0, import_vue.createVNode)("div", {
  146. "class": bem("content")
  147. }, [slots.default()]);
  148. }
  149. const {
  150. title,
  151. message,
  152. allowHtml
  153. } = props;
  154. if (message) {
  155. const hasTitle = !!(title || slots.title);
  156. return (0, import_vue.createVNode)("div", {
  157. "key": allowHtml ? 1 : 0,
  158. "class": bem("content", {
  159. isolated: !hasTitle
  160. })
  161. }, [renderMessage(hasTitle)]);
  162. }
  163. };
  164. const renderButtons = () => (0, import_vue.createVNode)("div", {
  165. "class": [import_utils.BORDER_TOP, bem("footer")]
  166. }, [props.showCancelButton && (0, import_vue.createVNode)(import_button.Button, {
  167. "size": "large",
  168. "text": props.cancelButtonText || t("cancel"),
  169. "class": bem("cancel"),
  170. "style": {
  171. color: props.cancelButtonColor
  172. },
  173. "loading": loading.cancel,
  174. "disabled": props.cancelButtonDisabled,
  175. "onClick": onCancel
  176. }, null), props.showConfirmButton && (0, import_vue.createVNode)(import_button.Button, {
  177. "size": "large",
  178. "text": props.confirmButtonText || t("confirm"),
  179. "class": [bem("confirm"), {
  180. [import_utils.BORDER_LEFT]: props.showCancelButton
  181. }],
  182. "style": {
  183. color: props.confirmButtonColor
  184. },
  185. "loading": loading.confirm,
  186. "disabled": props.confirmButtonDisabled,
  187. "onClick": onConfirm
  188. }, null)]);
  189. const renderRoundButtons = () => (0, import_vue.createVNode)(import_action_bar.ActionBar, {
  190. "class": bem("footer")
  191. }, {
  192. default: () => [props.showCancelButton && (0, import_vue.createVNode)(import_action_bar_button.ActionBarButton, {
  193. "type": "warning",
  194. "text": props.cancelButtonText || t("cancel"),
  195. "class": bem("cancel"),
  196. "color": props.cancelButtonColor,
  197. "loading": loading.cancel,
  198. "disabled": props.cancelButtonDisabled,
  199. "onClick": onCancel
  200. }, null), props.showConfirmButton && (0, import_vue.createVNode)(import_action_bar_button.ActionBarButton, {
  201. "type": "danger",
  202. "text": props.confirmButtonText || t("confirm"),
  203. "class": bem("confirm"),
  204. "color": props.confirmButtonColor,
  205. "loading": loading.confirm,
  206. "disabled": props.confirmButtonDisabled,
  207. "onClick": onConfirm
  208. }, null)]
  209. });
  210. const renderFooter = () => {
  211. if (slots.footer) {
  212. return slots.footer();
  213. }
  214. return props.theme === "round-button" ? renderRoundButtons() : renderButtons();
  215. };
  216. return () => {
  217. const {
  218. width,
  219. title,
  220. theme,
  221. message,
  222. className
  223. } = props;
  224. return (0, import_vue.createVNode)(import_popup.Popup, (0, import_vue.mergeProps)({
  225. "ref": root,
  226. "role": "dialog",
  227. "class": [bem([theme]), className],
  228. "style": {
  229. width: (0, import_utils.addUnit)(width)
  230. },
  231. "tabindex": 0,
  232. "aria-labelledby": title || message,
  233. "onKeydown": onKeydown,
  234. "onUpdate:show": updateShow
  235. }, (0, import_utils.pick)(props, popupInheritKeys)), {
  236. default: () => [renderTitle(), renderContent(), renderFooter()]
  237. });
  238. };
  239. }
  240. });