panelRender.js 6.4 KB

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