ActionSheet.mjs 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
  2. import { nextTick, defineComponent } from "vue";
  3. import { pick, extend, truthProp, makeArrayProp, makeStringProp, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
  4. import { Icon } from "../icon/index.mjs";
  5. import { Popup } from "../popup/index.mjs";
  6. import { Loading } from "../loading/index.mjs";
  7. import { popupSharedProps, popupSharedPropKeys } from "../popup/shared.mjs";
  8. const [name, bem] = createNamespace("action-sheet");
  9. const actionSheetProps = extend({}, popupSharedProps, {
  10. title: String,
  11. round: truthProp,
  12. actions: makeArrayProp(),
  13. closeIcon: makeStringProp("cross"),
  14. closeable: truthProp,
  15. cancelText: String,
  16. description: String,
  17. closeOnPopstate: truthProp,
  18. closeOnClickAction: Boolean,
  19. safeAreaInsetBottom: truthProp
  20. });
  21. const popupInheritKeys = [...popupSharedPropKeys, "round", "closeOnPopstate", "safeAreaInsetBottom"];
  22. var stdin_default = defineComponent({
  23. name,
  24. props: actionSheetProps,
  25. emits: ["select", "cancel", "update:show"],
  26. setup(props, {
  27. slots,
  28. emit
  29. }) {
  30. const updateShow = (show) => emit("update:show", show);
  31. const onCancel = () => {
  32. updateShow(false);
  33. emit("cancel");
  34. };
  35. const renderHeader = () => {
  36. if (props.title) {
  37. return _createVNode("div", {
  38. "class": bem("header")
  39. }, [props.title, props.closeable && _createVNode(Icon, {
  40. "name": props.closeIcon,
  41. "class": [bem("close"), HAPTICS_FEEDBACK],
  42. "onClick": onCancel
  43. }, null)]);
  44. }
  45. };
  46. const renderCancel = () => {
  47. if (slots.cancel || props.cancelText) {
  48. return [_createVNode("div", {
  49. "class": bem("gap")
  50. }, null), _createVNode("button", {
  51. "type": "button",
  52. "class": bem("cancel"),
  53. "onClick": onCancel
  54. }, [slots.cancel ? slots.cancel() : props.cancelText])];
  55. }
  56. };
  57. const renderActionContent = (action, index) => {
  58. if (action.loading) {
  59. return _createVNode(Loading, {
  60. "class": bem("loading-icon")
  61. }, null);
  62. }
  63. if (slots.action) {
  64. return slots.action({
  65. action,
  66. index
  67. });
  68. }
  69. return [_createVNode("span", {
  70. "class": bem("name")
  71. }, [action.name]), action.subname && _createVNode("div", {
  72. "class": bem("subname")
  73. }, [action.subname])];
  74. };
  75. const renderAction = (action, index) => {
  76. const {
  77. color,
  78. loading,
  79. callback,
  80. disabled,
  81. className
  82. } = action;
  83. const onClick = () => {
  84. if (disabled || loading) {
  85. return;
  86. }
  87. if (callback) {
  88. callback(action);
  89. }
  90. if (props.closeOnClickAction) {
  91. updateShow(false);
  92. }
  93. nextTick(() => emit("select", action, index));
  94. };
  95. return _createVNode("button", {
  96. "type": "button",
  97. "style": {
  98. color
  99. },
  100. "class": [bem("item", {
  101. loading,
  102. disabled
  103. }), className],
  104. "onClick": onClick
  105. }, [renderActionContent(action, index)]);
  106. };
  107. const renderDescription = () => {
  108. if (props.description || slots.description) {
  109. const content = slots.description ? slots.description() : props.description;
  110. return _createVNode("div", {
  111. "class": bem("description")
  112. }, [content]);
  113. }
  114. };
  115. return () => _createVNode(Popup, _mergeProps({
  116. "class": bem(),
  117. "position": "bottom",
  118. "onUpdate:show": updateShow
  119. }, pick(props, popupInheritKeys)), {
  120. default: () => {
  121. var _a;
  122. return [renderHeader(), renderDescription(), _createVNode("div", {
  123. "class": bem("content")
  124. }, [props.actions.map(renderAction), (_a = slots.default) == null ? void 0 : _a.call(slots)]), renderCancel()];
  125. }
  126. });
  127. }
  128. });
  129. export {
  130. stdin_default as default
  131. };