ActionSheet.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  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. actionSheetProps: () => actionSheetProps,
  21. default: () => stdin_default
  22. });
  23. module.exports = __toCommonJS(stdin_exports);
  24. var import_vue = require("vue");
  25. var import_utils = require("../utils");
  26. var import_icon = require("../icon");
  27. var import_popup = require("../popup");
  28. var import_loading = require("../loading");
  29. var import_shared = require("../popup/shared");
  30. const [name, bem] = (0, import_utils.createNamespace)("action-sheet");
  31. const actionSheetProps = (0, import_utils.extend)({}, import_shared.popupSharedProps, {
  32. title: String,
  33. round: import_utils.truthProp,
  34. actions: (0, import_utils.makeArrayProp)(),
  35. closeIcon: (0, import_utils.makeStringProp)("cross"),
  36. closeable: import_utils.truthProp,
  37. cancelText: String,
  38. description: String,
  39. closeOnPopstate: import_utils.truthProp,
  40. closeOnClickAction: Boolean,
  41. safeAreaInsetBottom: import_utils.truthProp
  42. });
  43. const popupInheritKeys = [...import_shared.popupSharedPropKeys, "round", "closeOnPopstate", "safeAreaInsetBottom"];
  44. var stdin_default = (0, import_vue.defineComponent)({
  45. name,
  46. props: actionSheetProps,
  47. emits: ["select", "cancel", "update:show"],
  48. setup(props, {
  49. slots,
  50. emit
  51. }) {
  52. const updateShow = (show) => emit("update:show", show);
  53. const onCancel = () => {
  54. updateShow(false);
  55. emit("cancel");
  56. };
  57. const renderHeader = () => {
  58. if (props.title) {
  59. return (0, import_vue.createVNode)("div", {
  60. "class": bem("header")
  61. }, [props.title, props.closeable && (0, import_vue.createVNode)(import_icon.Icon, {
  62. "name": props.closeIcon,
  63. "class": [bem("close"), import_utils.HAPTICS_FEEDBACK],
  64. "onClick": onCancel
  65. }, null)]);
  66. }
  67. };
  68. const renderCancel = () => {
  69. if (slots.cancel || props.cancelText) {
  70. return [(0, import_vue.createVNode)("div", {
  71. "class": bem("gap")
  72. }, null), (0, import_vue.createVNode)("button", {
  73. "type": "button",
  74. "class": bem("cancel"),
  75. "onClick": onCancel
  76. }, [slots.cancel ? slots.cancel() : props.cancelText])];
  77. }
  78. };
  79. const renderIcon = (action) => {
  80. if (action.icon) {
  81. return (0, import_vue.createVNode)(import_icon.Icon, {
  82. "class": bem("item-icon"),
  83. "name": action.icon
  84. }, null);
  85. }
  86. };
  87. const renderActionContent = (action, index) => {
  88. if (action.loading) {
  89. return (0, import_vue.createVNode)(import_loading.Loading, {
  90. "class": bem("loading-icon")
  91. }, null);
  92. }
  93. if (slots.action) {
  94. return slots.action({
  95. action,
  96. index
  97. });
  98. }
  99. return [(0, import_vue.createVNode)("span", {
  100. "class": bem("name")
  101. }, [action.name]), action.subname && (0, import_vue.createVNode)("div", {
  102. "class": bem("subname")
  103. }, [action.subname])];
  104. };
  105. const renderAction = (action, index) => {
  106. const {
  107. color,
  108. loading,
  109. callback,
  110. disabled,
  111. className
  112. } = action;
  113. const onClick = () => {
  114. if (disabled || loading) {
  115. return;
  116. }
  117. if (callback) {
  118. callback(action);
  119. }
  120. if (props.closeOnClickAction) {
  121. updateShow(false);
  122. }
  123. (0, import_vue.nextTick)(() => emit("select", action, index));
  124. };
  125. return (0, import_vue.createVNode)("button", {
  126. "type": "button",
  127. "style": {
  128. color
  129. },
  130. "class": [bem("item", {
  131. loading,
  132. disabled
  133. }), className],
  134. "onClick": onClick
  135. }, [renderIcon(action), renderActionContent(action, index)]);
  136. };
  137. const renderDescription = () => {
  138. if (props.description || slots.description) {
  139. const content = slots.description ? slots.description() : props.description;
  140. return (0, import_vue.createVNode)("div", {
  141. "class": bem("description")
  142. }, [content]);
  143. }
  144. };
  145. return () => (0, import_vue.createVNode)(import_popup.Popup, (0, import_vue.mergeProps)({
  146. "class": bem(),
  147. "position": "bottom",
  148. "onUpdate:show": updateShow
  149. }, (0, import_utils.pick)(props, popupInheritKeys)), {
  150. default: () => {
  151. var _a;
  152. return [renderHeader(), renderDescription(), (0, import_vue.createVNode)("div", {
  153. "class": bem("content")
  154. }, [props.actions.map(renderAction), (_a = slots.default) == null ? void 0 : _a.call(slots)]), renderCancel()];
  155. }
  156. });
  157. }
  158. });