@rainbow-oh/yee-c 0.2.0 → 0.4.0

package/dist/esm/Tour/demo/scroll.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Tour/demo/scroll.js

@@ -0,0 +1,58 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, Space, Tour } from "../..";
+import React, { useRef, useState } from 'react';
+export default (function () {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var farRef = useRef(null);
+  return /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical",
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, "\u5F00\u59CB\u5F15\u5BFC\uFF08\u81EA\u52A8\u6EDA\u52A8\u5B9A\u4F4D\uFF09"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 600,
+      padding: 24,
+      background: 'var(--yee-color-bg-layout)',
+      borderRadius: 8,
+      color: '#999'
+    }
+  }, "\u2193 \u76EE\u6807\u5728\u4E0B\u65B9\uFF0C\u5207\u6362\u6B65\u9AA4\u65F6\u5F15\u5BFC\u4F1A\u81EA\u52A8\u6EDA\u52A8\u5B9A\u4F4D"), /*#__PURE__*/React.createElement("div", {
+    ref: farRef,
+    style: {
+      display: 'inline-block'
+    }
+  }, /*#__PURE__*/React.createElement(Button, null, "\u8FDC\u5904\u7684\u76EE\u6807")), /*#__PURE__*/React.createElement(Tour, {
+    open: open,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    onFinish: function onFinish() {
+      return setOpen(false);
+    },
+    steps: [{
+      target: function target() {
+        return farRef.current;
+      },
+      title: '滚动定位',
+      description: '切换到这一步时，目标会自动滚动到视口内。'
+    }, {
+      target: '#tour-nonexistent-target',
+      title: '目标不存在',
+      description: '找不到目标元素时，卡片居中显示（无高亮）。'
+    }]
+  }));
+});

package/dist/esm/Tour/index.d.ts

@@ -0,0 +1,3 @@
+import InternalTour from './tour';
+export type { TourProps, TourStep, TourTarget, TourSemanticDOM, } from './interface';
+export default InternalTour;

package/dist/esm/Tour/index.js

@@ -0,0 +1,2 @@
+import InternalTour from "./tour";
+export default InternalTour;

package/dist/esm/Tour/interface.d.ts

@@ -0,0 +1,118 @@
+/// <reference types="react" />
+import type { Placement } from '../Trigger/interface';
+import type { DataAttributeProps } from '../utils/types';
+export type TourTarget = (() => HTMLElement | null) | string | HTMLElement;
+export type TourSemanticDOM = 'highlight' | 'content' | 'header' | 'body' | 'footer';
+export interface TourStep {
+    /**
+     * The element to highlight, supports a finder function, a CSS selector string, or an HTMLElement
+     */
+    target: TourTarget;
+    /**
+     * Card title
+     */
+    title?: React.ReactNode;
+    /**
+     * Card description
+     */
+    description?: React.ReactNode;
+    /**
+     * Card placement relative to the highlighted target
+     * @default 'bottom'
+     */
+    placement?: Placement;
+    /**
+     * Whether to show the card arrow
+     */
+    arrow?: boolean;
+    /**
+     * Custom step class name
+     */
+    className?: string;
+}
+export interface TourProps extends DataAttributeProps {
+    /**
+     * Custom prefix class name
+     */
+    prefixCls?: string;
+    /**
+     * Custom root class name
+     */
+    className?: string;
+    /**
+     * Custom root style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Semantic structure class names
+     */
+    classNames?: Partial<Record<TourSemanticDOM, string>>;
+    /**
+     * Semantic structure styles
+     */
+    styles?: Partial<Record<TourSemanticDOM, React.CSSProperties>>;
+    /**
+     * Whether the tour is visible (controlled)
+     */
+    open: boolean;
+    /**
+     * Tour steps
+     */
+    steps: TourStep[];
+    /**
+     * Controlled current step index
+     */
+    current?: number;
+    /**
+     * Default current step index
+     */
+    defaultCurrent?: number;
+    /**
+     * Callback when the tour is closed / skipped
+     */
+    onClose?: () => void;
+    /**
+     * Callback when all steps are finished
+     */
+    onFinish?: () => void;
+    /**
+     * Callback when current step changes
+     */
+    onChange?: (current: number) => void;
+    /**
+     * Default card placement relative to the highlighted target
+     * @default 'bottom'
+     */
+    placement?: Placement;
+    /**
+     * Whether to show the card arrow by default
+     */
+    arrow?: boolean;
+    /**
+     * Whether to show the mask layer (highlight cutout + click lock)
+     * @default true
+     */
+    mask?: boolean;
+    /**
+     * Whether the close button is shown at the top-right of the card
+     * @default true
+     */
+    closable?: boolean;
+    /**
+     * Custom close icon
+     */
+    closeIcon?: React.ReactNode;
+    /**
+     * Whether clicking the mask closes the tour
+     * @default false
+     */
+    maskClosable?: boolean;
+    /**
+     * Custom step indicators renderer, receives (current, total)
+     */
+    indicatorsRender?: (current: number, total: number) => React.ReactNode;
+    /**
+     * Options passed to target.scrollIntoView on each step
+     */
+    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
+}

package/dist/esm/Tour/interface.js

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

package/dist/esm/Tour/style/index.less

@@ -0,0 +1,103 @@
+@pls: .yee-tour;
+
+@{pls} {
+  position: fixed;
+  inset: 0;
+  z-index: var(--yee-tour-mask-z-index);
+  pointer-events: none;
+
+  // ① click-intercept layer (box-shadow receives no pointer events, so a
+  //    transparent full-screen layer is needed to lock interaction + carry maskClosable)
+  &-mask {
+    position: absolute;
+    inset: 0;
+    pointer-events: auto;
+    background-color: transparent;
+
+    // No target to cut out → the mask itself becomes the full-screen dim layer.
+    &-full {
+      background-color: var(--yee-tour-mask-color);
+    }
+  }
+
+  // ② highlight cutout via a huge box-shadow; top/left/width/height come from
+  //    motion inline styles, position/shape/visuals from here
+  &-highlight {
+    position: fixed;
+    box-sizing: border-box;
+    border-radius: var(--yee-tour-highlight-border-radius);
+    box-shadow: 0 0 0 9999px var(--yee-tour-mask-color);
+    z-index: 1;
+    pointer-events: none;
+  }
+}
+
+// card
+.yee-tour-content {
+  position: fixed;
+  z-index: 2;
+  pointer-events: auto;
+  box-sizing: border-box;
+  width: var(--yee-tour-content-width);
+  max-width: calc(100vw - 48px);
+  padding: var(--yee-tour-content-padding);
+  background-color: var(--yee-tour-content-bg-color);
+  border-radius: var(--yee-tour-content-border-radius);
+  box-shadow: var(--yee-tour-content-box-shadow);
+
+  .yee-tour-close {
+    position: absolute;
+    top: var(--yee-tour-close-top);
+    inset-inline-end: var(--yee-tour-close-right);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--yee-tour-close-color);
+    cursor: pointer;
+    opacity: 0.55;
+    transition: opacity var(--yee-tour-transition-duration) linear;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .yee-tour-header {
+    margin-bottom: var(--yee-tour-header-margin-bottom);
+    padding-inline-end: var(--yee-tour-close-size);
+    color: var(--yee-tour-title-color);
+    font-size: var(--yee-tour-title-font-size);
+    font-weight: var(--yee-tour-title-font-weight);
+    line-height: var(--yee-tour-title-line-height);
+  }
+
+  .yee-tour-body {
+    color: var(--yee-tour-description-color);
+    font-size: var(--yee-tour-description-font-size);
+    line-height: var(--yee-tour-description-line-height);
+  }
+
+  .yee-tour-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--yee-tour-button-gap);
+    margin-top: var(--yee-tour-footer-margin-top);
+  }
+
+  .yee-tour-indicators {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--yee-tour-indicator-gap);
+  }
+
+  .yee-tour-buttons {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--yee-tour-button-gap);
+    margin-left: auto;
+  }
+}

package/dist/esm/Tour/tour.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TourProps } from './interface';
+import './style/index.less';
+declare const Tour: React.FC<TourProps>;
+export default Tour;