sapit-ui-plus/lib/js/SAnchor.js

import { defineComponent as q, shallowRef as Y, reactive as le, getCurrentInstance as ge, computed as F, watch as V, onMounted as G, onUpdated as se, onUnmounted as me, createVNode as w, provide as ve, inject as xe, nextTick as ae, onBeforeUnmount as ce, ref as U, openBlock as ke, createBlock as ye } from "vue";
import { w as J, a as W, s as Ce, g as fe, m as ue, b as Se, u as X, c as D, o as Te, R as we, _ as z, d as N, r as $e, t as Ae, i as be, e as Be, f as Ie, h as Q, j as Pe, P as Ee, k as Le, l as _e } from "./index2.js";
import { g as Ne, s as ze } from "./scrollTo.js";
function Z(e) {
  let t;
  const o = (i) => () => {
    t = null, e(...i);
  }, r = function() {
    if (t == null) {
      for (var i = arguments.length, u = new Array(i), f = 0; f < i; f++)
        u[f] = arguments[f];
      t = J(o(u));
    }
  };
  return r.cancel = () => {
    J.cancel(t), t = null;
  }, r;
}
function M(e) {
  return e !== window ? e.getBoundingClientRect() : {
    top: 0,
    bottom: window.innerHeight
  };
}
function ee(e, t, o) {
  if (o !== void 0 && t.top > e.top - o)
    return `${o + t.top}px`;
}
function te(e, t, o) {
  if (o !== void 0 && t.bottom < e.bottom + o) {
    const r = window.innerHeight - t.bottom;
    return `${o + r}px`;
  }
}
const de = ["resize", "scroll", "touchstart", "touchmove", "touchend", "pageshow", "load"];
let H = [];
function ne(e, t) {
  if (!e) return;
  let o = H.find((r) => r.target === e);
  o ? o.affixList.push(t) : (o = {
    target: e,
    affixList: [t],
    eventHandlers: {}
  }, H.push(o), de.forEach((r) => {
    o.eventHandlers[r] = W(e, r, () => {
      o.affixList.forEach((i) => {
        const {
          lazyUpdatePosition: u
        } = i.exposed;
        u();
      }, (r === "touchstart" || r === "touchmove") && Ce ? {
        passive: !0
      } : !1);
    });
  }));
}
function oe(e) {
  const t = H.find((o) => {
    const r = o.affixList.some((i) => i === e);
    return r && (o.affixList = o.affixList.filter((i) => i !== e)), r;
  });
  t && t.affixList.length === 0 && (H = H.filter((o) => o !== t), de.forEach((o) => {
    const r = t.eventHandlers[o];
    r && r.remove && r.remove();
  }));
}
const Oe = (e) => {
  const {
    componentCls: t
  } = e;
  return {
    [t]: {
      position: "fixed",
      zIndex: e.zIndexPopup
    }
  };
}, Re = fe("Affix", (e) => {
  const t = ue(e, {
    zIndexPopup: e.zIndexBase + 10
  });
  return [Oe(t)];
});
function De() {
  return typeof window != "undefined" ? window : null;
}
var R;
(function(e) {
  e[e.None = 0] = "None", e[e.Prepare = 1] = "Prepare";
})(R || (R = {}));
const Fe = () => ({
  /**
   * 距离窗口顶部达到指定偏移量后触发
   */
  offsetTop: Number,
  /** 距离窗口底部达到指定偏移量后触发 */
  offsetBottom: Number,
  /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
  target: {
    type: Function,
    default: De
  },
  prefixCls: String,
  /** 固定状态改变时触发的回调函数 */
  onChange: Function,
  onTestUpdatePosition: Function
}), He = q({
  compatConfig: {
    MODE: 3
  },
  name: "AAffix",
  inheritAttrs: !1,
  props: Fe(),
  setup(e, t) {
    let {
      slots: o,
      emit: r,
      expose: i,
      attrs: u
    } = t;
    const f = Y(), C = Y(), g = le({
      affixStyle: void 0,
      placeholderStyle: void 0,
      status: R.None,
      lastAffix: !1,
      prevTarget: null,
      timeout: null
    }), I = ge(), $ = F(() => e.offsetBottom === void 0 && e.offsetTop === void 0 ? 0 : e.offsetTop), S = F(() => e.offsetBottom), y = () => {
      const {
        status: a,
        lastAffix: d
      } = g, {
        target: A
      } = e;
      if (a !== R.Prepare || !C.value || !f.value || !A)
        return;
      const B = A();
      if (!B)
        return;
      const m = {
        status: R.None
      }, n = M(f.value);
      if (n.top === 0 && n.left === 0 && n.width === 0 && n.height === 0)
        return;
      const l = M(B), p = ee(n, l, $.value), k = te(n, l, S.value);
      if (!(n.top === 0 && n.left === 0 && n.width === 0 && n.height === 0)) {
        if (p !== void 0) {
          const c = `${n.width}px`, h = `${n.height}px`;
          m.affixStyle = {
            position: "fixed",
            top: p,
            width: c,
            height: h
          }, m.placeholderStyle = {
            width: c,
            height: h
          };
        } else if (k !== void 0) {
          const c = `${n.width}px`, h = `${n.height}px`;
          m.affixStyle = {
            position: "fixed",
            bottom: k,
            width: c,
            height: h
          }, m.placeholderStyle = {
            width: c,
            height: h
          };
        }
        m.lastAffix = !!m.affixStyle, d !== m.lastAffix && r("change", m.lastAffix), N(g, m);
      }
    }, s = () => {
      N(g, {
        status: R.Prepare,
        affixStyle: void 0,
        placeholderStyle: void 0
      }), process.env.NODE_ENV === "test" && r("testUpdatePosition");
    }, v = Z(() => {
      s();
    }), x = Z(() => {
      const {
        target: a
      } = e, {
        affixStyle: d
      } = g;
      if (a && d) {
        const A = a();
        if (A && f.value) {
          const B = M(A), m = M(f.value), n = ee(m, B, $.value), l = te(m, B, S.value);
          if (n !== void 0 && d.top === n || l !== void 0 && d.bottom === l)
            return;
        }
      }
      s();
    });
    i({
      updatePosition: v,
      lazyUpdatePosition: x
    }), V(() => e.target, (a) => {
      const d = (a == null ? void 0 : a()) || null;
      g.prevTarget !== d && (oe(I), d && (ne(d, I), v()), g.prevTarget = d);
    }), V(() => [e.offsetTop, e.offsetBottom], v), G(() => {
      const {
        target: a
      } = e;
      a && (g.timeout = setTimeout(() => {
        ne(a(), I), v();
      }));
    }), se(() => {
      y();
    }), me(() => {
      clearTimeout(g.timeout), oe(I), v.cancel(), x.cancel();
    });
    const {
      prefixCls: E
    } = X("affix", e), [b, L] = Re(E);
    return () => {
      var a;
      const {
        affixStyle: d,
        placeholderStyle: A,
        status: B
      } = g, m = D({
        [E.value]: d,
        [L.value]: !0
      }), n = Te(e, ["prefixCls", "offsetTop", "offsetBottom", "target", "onChange", "onTestUpdatePosition"]);
      return b(w(we, {
        onResize: v
      }, {
        default: () => [w("div", z(z(z({}, n), u), {}, {
          ref: f,
          "data-measure-status": B
        }), [d && w("div", {
          style: A,
          "aria-hidden": "true"
        }, null), w("div", {
          class: m,
          ref: C,
          style: d
        }, [(a = o.default) === null || a === void 0 ? void 0 : a.call(o)])])]
      }));
    };
  }
}), Me = Se(He);
function j() {
}
const he = Symbol("anchorContextKey"), je = (e) => {
  ve(he, e);
}, Ue = () => xe(he, {
  registerLink: j,
  unregisterLink: j,
  scrollTo: j,
  activeLink: F(() => ""),
  handleClick: j,
  direction: F(() => "vertical")
}), Ve = (e) => {
  const {
    componentCls: t,
    holderOffsetBlock: o,
    motionDurationSlow: r,
    lineWidthBold: i,
    colorPrimary: u,
    lineType: f,
    colorSplit: C
  } = e;
  return {
    [`${t}-wrapper`]: {
      marginBlockStart: -o,
      paddingBlockStart: o,
      // delete overflow: auto
      // overflow: 'auto',
      backgroundColor: "transparent",
      [t]: N(N({}, $e(e)), {
        position: "relative",
        paddingInlineStart: i,
        [`${t}-link`]: {
          paddingBlock: e.anchorPaddingBlock,
          paddingInline: `${e.anchorPaddingInline}px 0`,
          "&-title": N(N({}, Ae), {
            position: "relative",
            display: "block",
            marginBlockEnd: e.anchorTitleBlock,
            color: e.colorText,
            transition: `all ${e.motionDurationSlow}`,
            "&:only-child": {
              marginBlockEnd: 0
            }
          }),
          [`&-active > ${t}-link-title`]: {
            color: e.colorPrimary
          },
          // link link
          [`${t}-link`]: {
            paddingBlock: e.anchorPaddingBlockSecondary
          }
        }
      }),
      [`&:not(${t}-wrapper-horizontal)`]: {
        [t]: {
          "&::before": {
            position: "absolute",
            left: {
              _skip_check_: !0,
              value: 0
            },
            top: 0,
            height: "100%",
            borderInlineStart: `${i}px ${f} ${C}`,
            content: '" "'
          },
          [`${t}-ink`]: {
            position: "absolute",
            left: {
              _skip_check_: !0,
              value: 0
            },
            display: "none",
            transform: "translateY(-50%)",
            transition: `top ${r} ease-in-out`,
            width: i,
            backgroundColor: u,
            [`&${t}-ink-visible`]: {
              display: "inline-block"
            }
          }
        }
      },
      [`${t}-fixed ${t}-ink ${t}-ink`]: {
        display: "none"
      }
    }
  };
}, We = (e) => {
  const {
    componentCls: t,
    motionDurationSlow: o,
    lineWidthBold: r,
    colorPrimary: i
  } = e;
  return {
    [`${t}-wrapper-horizontal`]: {
      position: "relative",
      "&::before": {
        position: "absolute",
        left: {
          _skip_check_: !0,
          value: 0
        },
        right: {
          _skip_check_: !0,
          value: 0
        },
        bottom: 0,
        borderBottom: `1px ${e.lineType} ${e.colorSplit}`,
        content: '" "'
      },
      [t]: {
        overflowX: "scroll",
        position: "relative",
        display: "flex",
        scrollbarWidth: "none",
        "&::-webkit-scrollbar": {
          display: "none"
          /* Safari and Chrome */
        },
        [`${t}-link:first-of-type`]: {
          paddingInline: 0
        },
        [`${t}-ink`]: {
          position: "absolute",
          bottom: 0,
          transition: `left ${o} ease-in-out, width ${o} ease-in-out`,
          height: r,
          backgroundColor: i
        }
      }
    }
  };
}, qe = fe("Anchor", (e) => {
  const {
    fontSize: t,
    fontSizeLG: o,
    padding: r,
    paddingXXS: i
  } = e, u = ue(e, {
    holderOffsetBlock: i,
    anchorPaddingBlock: i,
    anchorPaddingBlockSecondary: i / 2,
    anchorPaddingInline: r,
    anchorTitleBlock: t / 14 * 3,
    anchorBallSize: o / 2
  });
  return [Ve(u), We(u)];
}), Ge = () => ({
  prefixCls: String,
  href: String,
  title: Be(),
  target: String,
  /* private use  */
  customTitleProps: Ie()
}), pe = q({
  compatConfig: {
    MODE: 3
  },
  name: "AAnchorLink",
  inheritAttrs: !1,
  props: be(Ge(), {
    href: "#"
  }),
  slots: Object,
  setup(e, t) {
    let {
      slots: o,
      attrs: r
    } = t, i = null;
    const {
      handleClick: u,
      scrollTo: f,
      unregisterLink: C,
      registerLink: g,
      activeLink: I
    } = Ue(), {
      prefixCls: $
    } = X("anchor", e), S = (y) => {
      const {
        href: s
      } = e;
      u(y, {
        title: i,
        href: s
      }), f(s);
    };
    return V(() => e.href, (y, s) => {
      ae(() => {
        C(s), g(y);
      });
    }), G(() => {
      g(e.href);
    }), ce(() => {
      C(e.href);
    }), () => {
      var y;
      const {
        href: s,
        target: v,
        title: x = o.title,
        customTitleProps: E = {}
      } = e, b = $.value;
      i = typeof x == "function" ? x(E) : x;
      const L = I.value === s, a = D(`${b}-link`, {
        [`${b}-link-active`]: L
      }, r.class), d = D(`${b}-link-title`, {
        [`${b}-link-title-active`]: L
      });
      return w("div", z(z({}, r), {}, {
        class: a
      }), [w("a", {
        class: d,
        href: s,
        title: typeof i == "string" ? i : "",
        target: v,
        onClick: S
      }, [o.customTitle ? o.customTitle(E) : i]), (y = o.default) === null || y === void 0 ? void 0 : y.call(o)]);
    };
  }
});
function Xe() {
  return window;
}
function ie(e, t) {
  if (!e.getClientRects().length)
    return 0;
  const o = e.getBoundingClientRect();
  return o.width || o.height ? t === window ? (t = e.ownerDocument.documentElement, o.top - t.clientTop) : o.top - t.getBoundingClientRect().top : o.top;
}
const re = /#([\S ]+)$/, Ke = () => ({
  prefixCls: String,
  offsetTop: Number,
  bounds: Number,
  affix: {
    type: Boolean,
    default: !0
  },
  showInkInFixed: {
    type: Boolean,
    default: !1
  },
  getContainer: Function,
  wrapperClass: String,
  wrapperStyle: {
    type: Object,
    default: void 0
  },
  getCurrentAnchor: Function,
  targetOffset: Number,
  items: Pe(),
  direction: Ee.oneOf(["vertical", "horizontal"]).def("vertical"),
  onChange: Function,
  onClick: Function
}), _ = q({
  compatConfig: {
    MODE: 3
  },
  name: "AAnchor",
  inheritAttrs: !1,
  props: Ke(),
  setup(e, t) {
    let {
      emit: o,
      attrs: r,
      slots: i,
      expose: u
    } = t;
    var f;
    const {
      prefixCls: C,
      getTargetContainer: g,
      direction: I
    } = X("anchor", e), $ = F(() => {
      var n;
      return (n = e.direction) !== null && n !== void 0 ? n : "vertical";
    });
    process.env.NODE_ENV !== "production" && Q(e.items && typeof i.default != "function", "Anchor", "`Anchor children` is deprecated. Please use `items` instead."), process.env.NODE_ENV !== "production" && Q(!($.value === "horizontal" && (!((f = e.items) === null || f === void 0) && f.some((n) => "children" in n))), "Anchor", "`Anchor items#children` is not supported when `Anchor` direction is horizontal.");
    const S = U(null), y = U(), s = le({
      links: [],
      scrollContainer: null,
      scrollEvent: null,
      animating: !1
    }), v = U(null), x = F(() => {
      const {
        getContainer: n
      } = e;
      return n || (g == null ? void 0 : g.value) || Xe;
    }), E = function() {
      let n = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0, l = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 5;
      const p = [], k = x.value();
      return s.links.forEach((c) => {
        const h = re.exec(c.toString());
        if (!h)
          return;
        const T = document.getElementById(h[1]);
        if (T) {
          const P = ie(T, k);
          P < n + l && p.push({
            link: c,
            top: P
          });
        }
      }), p.length ? p.reduce((h, T) => T.top > h.top ? T : h).link : "";
    }, b = (n) => {
      const {
        getCurrentAnchor: l
      } = e;
      v.value !== n && (v.value = typeof l == "function" ? l(n) : n, o("change", n));
    }, L = (n) => {
      const {
        offsetTop: l,
        targetOffset: p
      } = e;
      b(n);
      const k = re.exec(n);
      if (!k)
        return;
      const c = document.getElementById(k[1]);
      if (!c)
        return;
      const h = x.value(), T = Ne(h), P = ie(c, h);
      let O = T + P;
      O -= p !== void 0 ? p : l || 0, s.animating = !0, ze(O, {
        callback: () => {
          s.animating = !1;
        },
        getContainer: x.value
      });
    };
    u({
      scrollTo: L
    });
    const a = () => {
      if (s.animating)
        return;
      const {
        offsetTop: n,
        bounds: l,
        targetOffset: p
      } = e, k = E(p !== void 0 ? p : n || 0, l);
      b(k);
    }, d = () => {
      const n = y.value.querySelector(`.${C.value}-link-title-active`);
      if (n && S.value) {
        const l = $.value === "horizontal";
        S.value.style.top = l ? "" : `${n.offsetTop + n.clientHeight / 2}px`, S.value.style.height = l ? "" : `${n.clientHeight}px`, S.value.style.left = l ? `${n.offsetLeft}px` : "", S.value.style.width = l ? `${n.clientWidth}px` : "", l && Le(n, {
          scrollMode: "if-needed",
          block: "nearest"
        });
      }
    };
    je({
      registerLink: (n) => {
        s.links.includes(n) || s.links.push(n);
      },
      unregisterLink: (n) => {
        const l = s.links.indexOf(n);
        l !== -1 && s.links.splice(l, 1);
      },
      activeLink: v,
      scrollTo: L,
      handleClick: (n, l) => {
        o("click", n, l);
      },
      direction: $
    }), G(() => {
      ae(() => {
        const n = x.value();
        s.scrollContainer = n, s.scrollEvent = W(s.scrollContainer, "scroll", a), a();
      });
    }), ce(() => {
      s.scrollEvent && s.scrollEvent.remove();
    }), se(() => {
      if (s.scrollEvent) {
        const n = x.value();
        s.scrollContainer !== n && (s.scrollContainer = n, s.scrollEvent.remove(), s.scrollEvent = W(s.scrollContainer, "scroll", a), a());
      }
      d();
    });
    const A = (n) => Array.isArray(n) ? n.map((l) => {
      const {
        children: p,
        key: k,
        href: c,
        target: h,
        class: T,
        style: P,
        title: O
      } = l;
      return w(pe, {
        key: k,
        href: c,
        target: h,
        class: T,
        style: P,
        title: O,
        customTitleProps: l
      }, {
        default: () => [$.value === "vertical" ? A(p) : null],
        customTitle: i.customTitle
      });
    }) : null, [B, m] = qe(C);
    return () => {
      var n;
      const {
        offsetTop: l,
        affix: p,
        showInkInFixed: k
      } = e, c = C.value, h = D(`${c}-ink`, {
        [`${c}-ink-visible`]: v.value
      }), T = D(m.value, e.wrapperClass, `${c}-wrapper`, {
        [`${c}-wrapper-horizontal`]: $.value === "horizontal",
        [`${c}-rtl`]: I.value === "rtl"
      }), P = D(c, {
        [`${c}-fixed`]: !p && !k
      }), O = N({
        maxHeight: l ? `calc(100vh - ${l}px)` : "100vh"
      }, e.wrapperStyle), K = w("div", {
        class: T,
        style: O,
        ref: y
      }, [w("div", {
        class: P
      }, [w("span", {
        class: h,
        ref: S
      }, null), Array.isArray(e.items) ? A(e.items) : (n = i.default) === null || n === void 0 ? void 0 : n.call(i)])]);
      return B(p ? w(Me, z(z({}, r), {}, {
        offsetTop: l,
        target: x.value
      }), {
        default: () => [K]
      }) : K);
    };
  }
});
_.Link = pe;
_.install = function(e) {
  return e.component(_.name, _), e.component(_.Link.name, _.Link), e;
};
const Ye = {
  name: "SAnchor",
  data() {
    return {
      anchors: []
    };
  },
  methods: {
    /** 锚点 */
    getItemAnchor() {
      const e = document.querySelectorAll(
        ".s-collapses .s-collapses-item .s-collapses-item-title"
      );
      e.length > 0 && e.forEach((t) => {
        this.anchors.push({
          el: t,
          key: t.id,
          href: `#${t.id}`,
          title: t.firstChild.innerText
        });
      });
    },
    initRightNav() {
      this.getItemAnchor();
      let e = setTimeout(() => {
        this.anchors = [], this.getItemAnchor(), clearTimeout(e), e = null;
      }, 500);
    },
    handleAnchorClick(e, t) {
      var r;
      e.preventDefault();
      const o = this.anchors.find((i) => i.href === t.href);
      this.anchorId = o.href, (r = o == null ? void 0 : o.el) == null || r.scrollIntoView({ block: "start", behavior: "smooth" });
    },
    formatName(e) {
      const t = (e + "").trim();
      return t && t.length > 8 ? t.slice(0, 8) + "..." : t;
    },
    getContainer() {
      return document.getElementById("form-container");
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initRightNav();
    });
  }
};
function Je(e, t, o, r, i, u) {
  const f = _;
  return ke(), ye(f, {
    affix: !1,
    showInkInFixed: "",
    targetOffset: 10,
    getContainer: u.getContainer,
    onClick: u.handleAnchorClick,
    items: i.anchors
  }, null, 8, ["getContainer", "onClick", "items"]);
}
const tt = /* @__PURE__ */ _e(Ye, [["render", Je]]);
export {
  tt as default
};