panelRender.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import { computed, defineComponent, toRefs } from 'vue';
  4. import classNames from '../_util/classNames';
  5. import { isFunction } from '../_util/util';
  6. import CloseOutlined from "@ant-design/icons-vue/es/icons/CloseOutlined";
  7. import { tourStepProps } from './interface';
  8. import LocaleReceiver from '../locale/LocaleReceiver';
  9. import Button from '../button';
  10. import defaultLocale from '../locale/en_US';
  11. const panelRender = defineComponent({
  12. name: 'ATourPanel',
  13. inheritAttrs: false,
  14. props: tourStepProps(),
  15. setup(props, _ref) {
  16. let {
  17. attrs,
  18. slots
  19. } = _ref;
  20. const {
  21. current,
  22. total
  23. } = toRefs(props);
  24. const isLastStep = computed(() => current.value === total.value - 1);
  25. const prevBtnClick = e => {
  26. var _a;
  27. const prevButtonProps = props.prevButtonProps;
  28. (_a = props.onPrev) === null || _a === void 0 ? void 0 : _a.call(props, e);
  29. if (typeof (prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.onClick) === 'function') {
  30. prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.onClick();
  31. }
  32. };
  33. const nextBtnClick = e => {
  34. var _a, _b;
  35. const nextButtonProps = props.nextButtonProps;
  36. if (isLastStep.value) {
  37. (_a = props.onFinish) === null || _a === void 0 ? void 0 : _a.call(props, e);
  38. } else {
  39. (_b = props.onNext) === null || _b === void 0 ? void 0 : _b.call(props, e);
  40. }
  41. if (typeof (nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.onClick) === 'function') {
  42. nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.onClick();
  43. }
  44. };
  45. return () => {
  46. const {
  47. prefixCls,
  48. title,
  49. onClose,
  50. cover,
  51. description,
  52. type: stepType,
  53. arrow
  54. } = props;
  55. const prevButtonProps = props.prevButtonProps;
  56. const nextButtonProps = props.nextButtonProps;
  57. let headerNode;
  58. if (title) {
  59. headerNode = _createVNode("div", {
  60. "class": `${prefixCls}-header`
  61. }, [_createVNode("div", {
  62. "class": `${prefixCls}-title`
  63. }, [title])]);
  64. }
  65. let descriptionNode;
  66. if (description) {
  67. descriptionNode = _createVNode("div", {
  68. "class": `${prefixCls}-description`
  69. }, [description]);
  70. }
  71. let coverNode;
  72. if (cover) {
  73. coverNode = _createVNode("div", {
  74. "class": `${prefixCls}-cover`
  75. }, [cover]);
  76. }
  77. let mergeIndicatorNode;
  78. if (slots.indicatorsRender) {
  79. mergeIndicatorNode = slots.indicatorsRender({
  80. current: current.value,
  81. total
  82. });
  83. } else {
  84. mergeIndicatorNode = [...Array.from({
  85. length: total.value
  86. }).keys()].map((stepItem, index) => _createVNode("span", {
  87. "key": stepItem,
  88. "class": classNames(index === current.value && `${prefixCls}-indicator-active`, `${prefixCls}-indicator`)
  89. }, null));
  90. }
  91. const mainBtnType = stepType === 'primary' ? 'default' : 'primary';
  92. const secondaryBtnProps = {
  93. type: 'default',
  94. ghost: stepType === 'primary'
  95. };
  96. return _createVNode(LocaleReceiver, {
  97. "componentName": "Tour",
  98. "defaultLocale": defaultLocale.Tour
  99. }, {
  100. default: contextLocale => {
  101. var _a;
  102. return _createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  103. "class": classNames(stepType === 'primary' ? `${prefixCls}-primary` : '', attrs.class, `${prefixCls}-content`)
  104. }), [arrow && _createVNode("div", {
  105. "class": `${prefixCls}-arrow`,
  106. "key": "arrow"
  107. }, null), _createVNode("div", {
  108. "class": `${prefixCls}-inner`
  109. }, [_createVNode(CloseOutlined, {
  110. "class": `${prefixCls}-close`,
  111. "onClick": onClose
  112. }, null), coverNode, headerNode, descriptionNode, _createVNode("div", {
  113. "class": `${prefixCls}-footer`
  114. }, [total.value > 1 && _createVNode("div", {
  115. "class": `${prefixCls}-indicators`
  116. }, [mergeIndicatorNode]), _createVNode("div", {
  117. "class": `${prefixCls}-buttons`
  118. }, [current.value !== 0 ? _createVNode(Button, _objectSpread(_objectSpread(_objectSpread({}, secondaryBtnProps), prevButtonProps), {}, {
  119. "onClick": prevBtnClick,
  120. "size": "small",
  121. "class": classNames(`${prefixCls}-prev-btn`, prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.className)
  122. }), {
  123. default: () => [isFunction(prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.children) ? prevButtonProps.children() : (_a = prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.children) !== null && _a !== void 0 ? _a : contextLocale.Previous]
  124. }) : null, _createVNode(Button, _objectSpread(_objectSpread({
  125. "type": mainBtnType
  126. }, nextButtonProps), {}, {
  127. "onClick": nextBtnClick,
  128. "size": "small",
  129. "class": classNames(`${prefixCls}-next-btn`, nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.className)
  130. }), {
  131. default: () => [isFunction(nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.children) ? nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.children() : isLastStep.value ? contextLocale.Finish : contextLocale.Next]
  132. })])])])]);
  133. }
  134. });
  135. };
  136. }
  137. });
  138. export default panelRender;