@king-design/intact 3.5.1 → 3.6.0-beta.0

package/es/components/tour/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tour';
+export * from './step';

package/es/components/tour/index.js

@@ -0,0 +1,2 @@
+export * from './tour';
+export * from './step';

package/es/components/tour/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/es/components/tour/index.spec.js

@@ -0,0 +1,356 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import BasicDemo from '~/components/tour/demos/basic';
+import DeclarativeDemo from '~/components/tour/demos/declarative';
+import ClosableDemo from '~/components/tour/demos/closable';
+import CustomTextDemo from '~/components/tour/demos/customText';
+import BeforeChangeDemo from '~/components/tour/demos/beforeChange';
+import EventsDemo from '~/components/tour/demos/events';
+import MaskClosableDemo from '~/components/tour/demos/maskClosable';
+import NotargetDemo from '~/components/tour/demos/notarget';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+describe('Tour', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('should show and hide tour correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _context, _context2;
+    var _mount, instance, element, tourContent, buttons, startBtn, indicator, nextBtn, updatedContent, doneBtn;
+    return _regeneratorRuntime.wrap(function _callee$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+          tourContent = getElement('.k-tour-step');
+          expect(tourContent).to.be.undefined;
+          buttons = element.querySelectorAll('.k-btn');
+          startBtn = _findInstanceProperty(_context = _Array$from(buttons)).call(_context, function (btn) {
+            var _btn$textContent;
+            return (_btn$textContent = btn.textContent) == null ? void 0 : _includesInstanceProperty(_btn$textContent).call(_btn$textContent, '启动引导');
+          });
+          startBtn.click();
+          _context3.next = 8;
+          return wait();
+        case 8:
+          tourContent = getElement('.k-tour-step');
+          expect(tourContent).to.exist;
+          expect(tourContent.querySelector('.k-tour-step-title').textContent).to.eql('第一步');
+          indicator = tourContent.querySelector('.k-tour-step-indicator');
+          expect(_trimInstanceProperty(_context2 = indicator.textContent).call(_context2)).to.eql('1 / 2');
+          nextBtn = tourContent.querySelector('.k-tour-step-buttons .k-primary');
+          nextBtn.click();
+          _context3.next = 17;
+          return wait();
+        case 17:
+          updatedContent = getElement('.k-tour-step');
+          expect(updatedContent.querySelector('.k-tour-step-title').textContent).to.eql('第二步');
+          doneBtn = updatedContent.querySelector('.k-tour-step-buttons .k-primary');
+          doneBtn.click();
+          _context3.next = 23;
+          return wait();
+        case 23:
+          expect(getElement('.k-tour-step')).to.be.undefined;
+        case 24:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee);
+  })));
+  it('should work with declarative TourStep components', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _context4;
+    var _mount2, instance, element, buttons, startBtn, tourContent, nextBtn, updatedContent;
+    return _regeneratorRuntime.wrap(function _callee2$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _mount2 = mount(DeclarativeDemo), instance = _mount2[0], element = _mount2[1];
+          buttons = element.querySelectorAll('.k-btn');
+          startBtn = _findInstanceProperty(_context4 = _Array$from(buttons)).call(_context4, function (btn) {
+            var _btn$textContent2;
+            return (_btn$textContent2 = btn.textContent) == null ? void 0 : _includesInstanceProperty(_btn$textContent2).call(_btn$textContent2, '启动引导');
+          });
+          startBtn.click();
+          _context5.next = 6;
+          return wait(50);
+        case 6:
+          tourContent = getElement('.k-tour-step');
+          expect(tourContent).to.exist;
+          expect(tourContent.querySelector('.k-tour-step-title').textContent).to.eql('第一步');
+          expect(tourContent.querySelector('.k-tour-step-body').textContent).to.include('子组件方式的第一步');
+          nextBtn = tourContent.querySelector('.k-tour-step-buttons .k-primary');
+          nextBtn.click();
+          _context5.next = 14;
+          return wait(50);
+        case 14:
+          updatedContent = getElement('.k-tour-step');
+          expect(updatedContent.querySelector('.k-tour-step-title').textContent).to.eql('第二步');
+          expect(updatedContent.querySelector('.k-tour-step-body').textContent).to.include('子组件方式的第二步');
+        case 17:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee2);
+  })));
+  it('should handle closable property correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _context6;
+    var _mount3, instance, element, buttons, startBtn, tourContent, closeIcon;
+    return _regeneratorRuntime.wrap(function _callee3$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _mount3 = mount(ClosableDemo), instance = _mount3[0], element = _mount3[1];
+          buttons = element.querySelectorAll('.k-btn');
+          startBtn = _findInstanceProperty(_context6 = _Array$from(buttons)).call(_context6, function (btn) {
+            var _btn$textContent3;
+            return (_btn$textContent3 = btn.textContent) == null ? void 0 : _includesInstanceProperty(_btn$textContent3).call(_btn$textContent3, '启动引导');
+          });
+          startBtn.click();
+          _context7.next = 6;
+          return wait(50);
+        case 6:
+          instance.set('closable', true);
+          _context7.next = 9;
+          return wait(50);
+        case 9:
+          tourContent = getElement('.k-tour-step');
+          expect(tourContent).to.exist;
+          closeIcon = tourContent.querySelector('.k-tour-step-close');
+          expect(closeIcon).to.be.null;
+        case 13:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee3);
+  })));
+  it('should handle beforeChange correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _context8;
+    var _mount4, instance, element, buttons, startBtn, tourContent, nextBtn, input;
+    return _regeneratorRuntime.wrap(function _callee4$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          _mount4 = mount(BeforeChangeDemo), instance = _mount4[0], element = _mount4[1];
+          buttons = element.querySelectorAll('.k-btn');
+          startBtn = _findInstanceProperty(_context8 = _Array$from(buttons)).call(_context8, function (btn) {
+            var _btn$textContent4;
+            return (_btn$textContent4 = btn.textContent) == null ? void 0 : _includesInstanceProperty(_btn$textContent4).call(_btn$textContent4, '启动引导');
+          });
+          startBtn.click();
+          _context9.next = 6;
+          return wait();
+        case 6:
+          expect(instance.get('currentStep')).to.eql(0);
+          tourContent = getElement('.k-tour-step');
+          nextBtn = tourContent.querySelector('.k-tour-step-buttons .k-primary');
+          nextBtn.click();
+          _context9.next = 12;
+          return wait();
+        case 12:
+          expect(instance.get('currentStep')).to.eql(1);
+          tourContent = getElement('.k-tour-step');
+          nextBtn = tourContent.querySelector('.k-tour-step-buttons .k-primary');
+          nextBtn.click();
+          _context9.next = 18;
+          return wait();
+        case 18:
+          expect(instance.get('currentStep')).to.eql(2);
+          tourContent = getElement('.k-tour-step');
+          nextBtn = tourContent.querySelector('.k-tour-step-buttons .k-primary');
+          nextBtn.click();
+          _context9.next = 24;
+          return wait();
+        case 24:
+          input = element.querySelector('.step3-input .k-input-inner');
+          input.value = 'next';
+          dispatchEvent(input, 'input');
+          _context9.next = 29;
+          return wait();
+        case 29:
+          tourContent = getElement('.k-tour-step');
+          nextBtn = tourContent.querySelector('.k-tour-step-buttons .k-primary');
+          nextBtn.click();
+          _context9.next = 34;
+          return wait();
+        case 34:
+          console.log('currentStep', instance.get('currentStep'));
+          expect(instance.get('currentStep')).to.eql(3);
+        case 36:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee4);
+  })));
+  it('should trigger events correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _context10;
+    var _mount5, instance, element, prevSpy, nextSpy, finishSpy, buttons, startBtn, tourContent, nextBtn, prevBtn, doneBtn;
+    return _regeneratorRuntime.wrap(function _callee5$(_context11) {
+      while (1) switch (_context11.prev = _context11.next) {
+        case 0:
+          _mount5 = mount(EventsDemo), instance = _mount5[0], element = _mount5[1];
+          prevSpy = sinon.spy(instance, 'handlePrev');
+          nextSpy = sinon.spy(instance, 'handleNext');
+          finishSpy = sinon.spy(instance, 'handleFinish');
+          buttons = element.querySelectorAll('.k-btn');
+          startBtn = _findInstanceProperty(_context10 = _Array$from(buttons)).call(_context10, function (btn) {
+            var _btn$textContent5;
+            return (_btn$textContent5 = btn.textContent) == null ? void 0 : _includesInstanceProperty(_btn$textContent5).call(_btn$textContent5, '开始引导');
+          });
+          startBtn.click();
+          _context11.next = 9;
+          return wait();
+        case 9:
+          tourContent = getElement('.k-tour-step');
+          nextBtn = tourContent.querySelector('.k-tour-step-buttons .k-primary');
+          nextBtn.click();
+          _context11.next = 14;
+          return wait();
+        case 14:
+          expect(nextSpy.callCount).to.eql(1);
+          prevBtn = getElement('.k-tour-step').querySelector('.k-tour-step-buttons .k-btn:not(.k-primary)');
+          prevBtn.click();
+          _context11.next = 19;
+          return wait();
+        case 19:
+          expect(prevSpy.callCount).to.eql(1);
+          nextBtn.click();
+          _context11.next = 23;
+          return wait();
+        case 23:
+          nextBtn.click();
+          _context11.next = 26;
+          return wait();
+        case 26:
+          doneBtn = getElement('.k-tour-step').querySelector('.k-tour-step-buttons .k-primary');
+          doneBtn.click();
+          _context11.next = 30;
+          return wait();
+        case 30:
+          console.log('finishSpy.callCount', finishSpy.callCount);
+          expect(finishSpy.callCount).to.eql(0);
+        case 32:
+        case "end":
+          return _context11.stop();
+      }
+    }, _callee5);
+  })));
+  it('should handle maskClosable correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _context12;
+    var _mount6, instance, element, buttons, startBtn, highlight;
+    return _regeneratorRuntime.wrap(function _callee6$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
+        case 0:
+          _mount6 = mount(MaskClosableDemo), instance = _mount6[0], element = _mount6[1];
+          buttons = element.querySelectorAll('.k-btn');
+          startBtn = _findInstanceProperty(_context12 = _Array$from(buttons)).call(_context12, function (btn) {
+            var _btn$textContent6;
+            return (_btn$textContent6 = btn.textContent) == null ? void 0 : _includesInstanceProperty(_btn$textContent6).call(_btn$textContent6, '启动引导');
+          });
+          startBtn.click();
+          _context13.next = 6;
+          return wait(50);
+        case 6:
+          highlight = getElement('.k-tour-target-highlight');
+          expect(highlight).to.exist;
+          dispatchEvent(document, 'click');
+          _context13.next = 11;
+          return wait(50);
+        case 11:
+          expect(getElement('.k-tour-step')).to.be.undefined;
+          startBtn.click();
+          _context13.next = 15;
+          return wait(50);
+        case 15:
+          instance.set('maskClosable', false);
+          _context13.next = 18;
+          return wait(50);
+        case 18:
+          dispatchEvent(document, 'click');
+          _context13.next = 21;
+          return wait(50);
+        case 21:
+          expect(getElement('.k-tour-step')).to.exist;
+        case 22:
+        case "end":
+          return _context13.stop();
+      }
+    }, _callee6);
+  })));
+  it('should handle custom text correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _context14;
+    var _mount7, instance, element, buttons, startBtn;
+    return _regeneratorRuntime.wrap(function _callee7$(_context15) {
+      while (1) switch (_context15.prev = _context15.next) {
+        case 0:
+          _mount7 = mount(CustomTextDemo), instance = _mount7[0], element = _mount7[1];
+          buttons = element.querySelectorAll('.k-btn');
+          startBtn = _findInstanceProperty(_context14 = _Array$from(buttons)).call(_context14, function (btn) {
+            var _btn$textContent7;
+            return (_btn$textContent7 = btn.textContent) == null ? void 0 : _includesInstanceProperty(_btn$textContent7).call(_btn$textContent7, '启动引导');
+          });
+          startBtn.click();
+          _context15.next = 6;
+          return wait(50);
+        case 6:
+          expect(element.innerHTML).to.matchSnapshot();
+        case 7:
+        case "end":
+          return _context15.stop();
+      }
+    }, _callee7);
+  })));
+  it('should handle target correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var _mount8, instance, element, btn;
+    return _regeneratorRuntime.wrap(function _callee8$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 0:
+          _mount8 = mount(NotargetDemo), instance = _mount8[0], element = _mount8[1];
+          btn = element.querySelector('.k-btn');
+          btn.click();
+          _context16.next = 5;
+          return wait(50);
+        case 5:
+          expect(element.innerHTML).to.matchSnapshot();
+        case 6:
+        case "end":
+          return _context16.stop();
+      }
+    }, _callee8);
+  })));
+  // it('should handle theme correctly', async () => {
+  //     interface DemoProps {
+  //         theme: string;
+  //         tourData: any[];
+  //     }
+  //     class Demo extends Component<DemoProps> {
+  //         static template = `
+  //             const { Tour } = this;
+  //             <div>
+  //                 <Tour
+  //                     data={this.get('tourData')}
+  //                     visible={true}
+  //                     theme={this.get('theme')}
+  //                 />
+  //             </div>
+  //         `;
+  //         Tour = Tour;
+  //         static defaults() {
+  //             return {
+  //                 theme: 'dark',
+  //                 tourData: [
+  //                     {
+  //                         target: 'body',
+  //                         title: '主题测试',
+  //                         content: '测试深色主题'
+  //                     }
+  //                 ]
+  //             } as DemoProps;
+  //         }
+  //     }
+  //     const [instance, element] = mount(Demo);
+  //     await wait(50);
+  //     expect(element.innerHTML).to.matchSnapshot();
+  //     instance.set('theme', 'light');
+  //     await wait(50);
+  //     expect(element.innerHTML).to.matchSnapshot();
+  // });
+});

package/es/components/tour/step.d.ts

@@ -0,0 +1,23 @@
+import { Component, TypeDefs, VNode, Children } from 'intact';
+export interface TourStepProps {
+    title?: string | VNode;
+    content?: Children;
+    target?: string | HTMLElement;
+    position?: string | any;
+    nextText?: string;
+    prevText?: string;
+}
+export interface TourStepEvents {
+}
+export interface TourStepBlocks {
+    header: null;
+    content: null;
+    footer: null;
+}
+export declare class TourStep extends Component<TourStepProps, TourStepEvents, TourStepBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<TourStepProps>>;
+    static defaults: () => Partial<TourStepProps>;
+    private config;
+    getTarget(): HTMLElement | null;
+}

package/es/components/tour/step.js

@@ -0,0 +1,46 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, VNode } from 'intact';
+import template from './step.vdt';
+import { useConfigContext } from '../config';
+var typeDefs = {
+  title: [String, VNode],
+  content: [String, VNode, Array],
+  target: [String, Object],
+  position: [String, Object],
+  nextText: String,
+  prevText: String
+};
+var defaults = function defaults() {
+  return {
+    position: 'bottom',
+    nextText: '下一步',
+    prevText: '上一步'
+  };
+};
+export var TourStep = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(TourStep, _Component);
+  function TourStep() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    return _this;
+  }
+  var _proto = TourStep.prototype;
+  _proto.getTarget = function getTarget() {
+    var target = this.get('target');
+    if (!target) return null;
+    if (typeof target === 'string') {
+      return document.querySelector(target);
+    }
+    return target;
+  };
+  return TourStep;
+}(Component);
+TourStep.template = template;
+TourStep.typeDefs = typeDefs;
+TourStep.defaults = defaults;

package/es/components/tour/step.vdt.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, createTextVNode as _$ct } from 'intact';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { makeStyles } from './styles';
+import { TourContext } from './tour';
+import { getRestProps } from '../utils';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj,
+    _this = this;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+  var _this$get = this.get(),
+    title = _this$get.title,
+    content = _this$get.content,
+    className = _this$get.className,
+    _children = _this$get.children,
+    nextText = _this$get.nextText,
+    prevText = _this$get.prevText;
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tour-step"] = true, _classNameObj[className] = className, _classNameObj);
+  return _$cc(TourContext.Consumer, {
+    'children': function children(_ref) {
+      var value = _ref.value,
+        total = _ref.total,
+        doneText = _ref.doneText,
+        onPrev = _ref.onPrev,
+        onNext = _ref.onNext,
+        onFinish = _ref.onFinish,
+        closable = _ref.closable;
+      var isFirst = value === 0;
+      var isLast = value === total - 1;
+      var showHeader = !!title;
+      var displayIndex = value + 1;
+      return _$cv('div', _extends({
+        'className': _$cn(classNameObj)
+      }, getRestProps(_this)), [null, !!title || $blocks.header ? _$ce(2, 'div', [_$ce(2, 'div', (_$blocks['header'] = function ($super) {
+        return title;
+      }, __$blocks['header'] = function ($super, data) {
+        var block = $blocks['header'];
+        var callBlock = function callBlock() {
+          return _$blocks['header'].call($this, $super, data);
+        };
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['header'](_$no)), 0, _$cn(k + "-tour-step-title")), !closable ? _$ce(2, 'div', _$cc(Icon, {
+        'className': _$cn(k + "-icon-close")
+      }), 2, _$cn(k + "-tour-step-close"), {
+        'ev-click': onFinish
+      }) : undefined], 0, _$cn(k + "-tour-step-header")) : undefined, null, _$ce(2, 'div', _children || content, 0, _$cn(k + "-tour-step-body")), null, _$ce(2, 'div', (_$blocks['footer'] = function ($super) {
+        return [_$ce(2, 'div', [displayIndex, _$ct(' / '), total], 0, _$cn(k + "-tour-step-indicator")), _$ce(2, 'div', [!isFirst ? _$cc(Button, {
+          'size': 'small',
+          'type': 'secondary',
+          'ev-click': onPrev,
+          'children': prevText
+        }) : undefined, _$cc(Button, {
+          'size': 'small',
+          'type': 'primary',
+          'ev-click': isLast ? onFinish : onNext,
+          'children': isLast ? doneText : nextText
+        })], 0, _$cn(k + "-tour-step-buttons"))];
+      }, __$blocks['footer'] = function ($super, data) {
+        var block = $blocks['footer'];
+        var callBlock = function callBlock() {
+          return _$blocks['footer'].call($this, $super, data);
+        };
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['footer'](_$no)), 0, _$cn(k + "-tour-step-footer"))]);
+    }
+  });
+}
+;

package/es/components/tour/styles.d.ts

@@ -0,0 +1,7 @@
+export type Theme = 'dark' | 'light';
+export declare const themes: Theme[];
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export default makeStyles;

package/es/components/tour/styles.js

@@ -0,0 +1,84 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _Object$keys from "@babel/runtime-corejs3/core-js/object/keys";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import { cache } from '../utils';
+var defaults = {
+  minWidth: '280px',
+  maxWidth: '400px',
+  gap: '8px',
+  get color() {
+    return theme.color.text;
+  },
+  bgColor: '#fff',
+  padding: {
+    body: '16px',
+    header: '12px 16px',
+    footer: '12px 16px'
+  },
+  fontSize: {
+    title: '16px',
+    content: '12px'
+  },
+  border: '1px solid var(--kui-color-border)',
+  arrow: {
+    size: '8px',
+    offset: '10px',
+    borderColor: 'rgba(221, 221, 221, .5)'
+  },
+  mask: {
+    color: 'rgba(0, 0, 0, 0.5)',
+    targetPadding: '8px',
+    targetBorderRadius: '4px'
+  },
+  // dark
+  dark: {
+    get bgColor() {
+      return theme.color.title;
+    },
+    color: '#fff',
+    get arrowBorderColor() {
+      return theme.color.title;
+    }
+  }
+};
+var tour;
+setDefault(function () {
+  tour = deepDefaults(theme, {
+    tour: defaults
+  }).tour;
+  makeStyles == null || makeStyles.clearCache();
+});
+export var themes = ['dark', 'light'];
+var directionMap = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+export var makeStyles = cache(function makeStyles(k) {
+  var arrowLong = tour.arrow.size;
+  var arrowShort = "calc(" + arrowLong + " - 1px)";
+  return /*#__PURE__*/css(".", k, "-tour{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none;}.", k, "-tour-target-highlight{position:fixed;box-shadow:0 0 0 9999px ", tour.mask.color, ";border-radius:", tour.mask.targetBorderRadius, ";z-index:999;pointer-events:none;transition:all 0.3s ease;&.", k, "-hoverable{pointer-events:auto;cursor:pointer;&:hover{box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.65);&:after{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid rgba(255, 255, 255, 0.5);border-radius:", tour.mask.targetBorderRadius, ";animation:pulse 1.5s infinite;}}}}@keyframes pulse{0%{transform:scale(1);opacity:0.8;}50%{transform:scale(1.05);opacity:0.5;}100%{transform:scale(1);opacity:0.8;}}.", k, "-tour-step-wrapper{position:absolute;z-index:1000;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));pointer-events:auto;&.", k, "-tour-centered{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%, -50%)!important;}}.", k, "-tour-step{background:#fff;border-radius:4px;padding:0;min-width:240px;max-width:400px;position:relative;}.", k, "-tour-step-container{display:flex;flex-direction:column;}.", k, "-tour-step-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 8px;border-bottom:1px solid #f0f0f0;}.", k, "-tour-step-title{font-weight:500;font-size:16px;color:#262626;}.", k, "-tour-step-close{cursor:pointer;color:#999;&:hover{color:#666;}}.", k, "-tour-step-body{font-size:", tour.fontSize.content, ";padding:16px;color:#595959;}.", k, "-tour-step-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 16px 16px;}.", k, "-tour-step-indicator{color:#8c8c8c;}.", k, "-tour-step-buttons{display:flex;gap:8px;}.", k, "-tour-arrow{pointer-events:none;&:before,&{position:absolute;display:block;border-style:solid;border-color:transparent;}&:before{content:' ';}&.", k, "-top,&.", k, "-bottom{&:before,&{border-width:", arrowLong, " ", arrowShort, ";}&:before{left:calc(-1 * ", arrowShort, ");}}&.", k, "-top{top:calc(-2 * ", arrowLong, ");&:before{top:calc(-", arrowLong, " + 1px);}}&.", k, "-bottom{bottom:calc(-2 * ", arrowLong, ");&:before{bottom:calc(-", arrowLong, " + 1px);}}&.", k, "-left,&.", k, "-right{&:before,&{border-width:", arrowShort, " ", arrowLong, ";}&:before{top:calc(-1 * ", arrowShort, ");}}&.", k, "-left{left:calc(-2 * ", arrowLong, ");&:before{left:calc(-", arrowLong, " + 1px);}}&.", k, "-right{right:calc(-2 * ", arrowLong, ");&:before{right:calc(-", arrowLong, " + 1px);}}}", _mapInstanceProperty(themes).call(themes, function (theme) {
+    var _context;
+    var borderColor;
+    var bgColor;
+    var color;
+    if (theme === 'dark') {
+      borderColor = tour.dark.arrowBorderColor;
+      bgColor = tour.dark.bgColor;
+      color = tour.dark.color;
+    } else {
+      borderColor = tour.arrow.borderColor;
+      bgColor = tour.bgColor;
+      color = tour.color;
+    }
+    return /*#__PURE__*/css("&.", k, "-", theme, "{background:", bgColor, ";color:", color, ";.", k, "-tour-step-wrapper .", k, "-tour-arrow{", _mapInstanceProperty(_context = _Object$keys(directionMap)).call(_context, function (direction) {
+      var borderDirection = directionMap[direction];
+      return /*#__PURE__*/css("&.", k, "-", direction, "{&:before{border-", borderDirection, "-color:", bgColor, ";}}");
+    }), ";}}");
+  }), ";");
+});
+// 让样式能被导入
+export default makeStyles;