@varlet/ui 2.20.1 → 2.20.2

package/es/index-bar/IndexBar.mjs

@@ -0,0 +1,222 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { computed, defineComponent, ref, watch, onBeforeUnmount, onDeactivated, onActivated } from "vue";
+import {
+  isPlainObject,
+  toNumber,
+  doubleRaf,
+  requestAnimationFrame,
+  getRect,
+  getScrollLeft,
+  getScrollTop,
+  call
+} from "@varlet/shared";
+import { easeInOutCubic } from "../utils/shared.mjs";
+import { getParentScroller, scrollTo as varScrollTo, toPxNum } from "../utils/elements.mjs";
+import { useIndexAnchors } from "./provide.mjs";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { onSmartMounted } from "@varlet/use";
+const { name, n, classes } = createNamespace("index-bar");
+import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = ["onClick"];
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n()),
+      ref: "barEl"
+    },
+    [
+      _renderSlot(_ctx.$slots, "default"),
+      _createElementVNode(
+        "ul",
+        {
+          class: _normalizeClass(_ctx.n("anchor-list")),
+          style: _normalizeStyle({ zIndex: _ctx.toNumber(_ctx.zIndex) + 2, display: _ctx.hideList ? "none" : "block" })
+        },
+        [
+          (_openBlock(true), _createElementBlock(
+            _Fragment,
+            null,
+            _renderList(_ctx.anchorNameList, (anchorName) => {
+              return _openBlock(), _createElementBlock("li", {
+                key: anchorName,
+                class: _normalizeClass(_ctx.classes(_ctx.n("anchor-item"), [_ctx.active === anchorName, _ctx.n("anchor-item--active")])),
+                style: _normalizeStyle({ color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : void 0 }),
+                onClick: ($event) => _ctx.anchorClick({ anchorName, manualCall: true })
+              }, _toDisplayString(anchorName), 15, _hoisted_1);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        6
+        /* CLASS, STYLE */
+      )
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const clickedName = ref("");
+    const barEl = ref(null);
+    const anchorNameList = ref([]);
+    const active = ref();
+    const sticky = computed(() => props2.sticky);
+    const cssMode = computed(() => props2.stickyCssMode || props2.cssMode);
+    const stickyOffsetTop = computed(() => toPxNum(props2.stickyOffsetTop));
+    const zIndex = computed(() => props2.zIndex);
+    const { length, indexAnchors, bindIndexAnchors } = useIndexAnchors();
+    let scroller = null;
+    let isDeactivated = false;
+    const indexBarProvider = {
+      active,
+      sticky,
+      cssMode,
+      stickyOffsetTop,
+      zIndex
+    };
+    watch(
+      () => length.value,
+      () => __async(this, null, function* () {
+        yield doubleRaf();
+        indexAnchors.forEach(({ name: name2, setOwnTop }) => {
+          if (name2.value)
+            anchorNameList.value.push(name2.value);
+          setOwnTop();
+        });
+      })
+    );
+    onSmartMounted(() => __async(this, null, function* () {
+      yield setScroller();
+      addScrollerListener();
+    }));
+    onBeforeUnmount(removeScrollerListener);
+    onDeactivated(() => {
+      isDeactivated = true;
+      removeScrollerListener();
+    });
+    onActivated(() => {
+      if (!isDeactivated || active.value === void 0)
+        return;
+      anchorClick({
+        anchorName: active.value,
+        options: { event: false }
+      });
+      isDeactivated = false;
+    });
+    bindIndexAnchors(indexBarProvider);
+    function emitEvent(anchor, options) {
+      const anchorName = isPlainObject(anchor) ? anchor.name.value : anchor;
+      if (anchorName === active.value || anchorName === void 0)
+        return;
+      active.value = anchorName;
+      if ((options == null ? void 0 : options.event) !== false) {
+        call(props2.onChange, anchorName);
+      }
+    }
+    function getOffsetTop() {
+      const { top: parentTop } = getRect(scroller);
+      const { top: targetTop } = getRect(barEl.value);
+      const scrollTop = getScrollTop(scroller);
+      return scrollTop - parentTop + targetTop;
+    }
+    function handleScroll() {
+      const scrollTop = getScrollTop(scroller);
+      const scrollHeight = scroller === window ? document.body.scrollHeight : scroller.scrollHeight;
+      const offsetTop = getOffsetTop();
+      indexAnchors.forEach((anchor, index) => {
+        const anchorTop = anchor.ownTop.value;
+        const top = scrollTop - anchorTop + stickyOffsetTop.value - offsetTop;
+        const distance = index === indexAnchors.length - 1 ? scrollHeight : indexAnchors[index + 1].ownTop.value - anchor.ownTop.value;
+        anchor.setDisabled(true);
+        if (top >= 0 && top < distance && clickedName.value === "") {
+          anchor.setDisabled(false);
+          emitEvent(anchor);
+        }
+      });
+    }
+    function anchorClick(_0) {
+      return __async(this, arguments, function* ({ anchorName, manualCall = false, options }) {
+        if (manualCall) {
+          call(props2.onClick, anchorName);
+        }
+        if (anchorName === active.value && !isDeactivated) {
+          return;
+        }
+        const indexAnchor = indexAnchors.find(({ name: name2 }) => anchorName === name2.value);
+        if (!indexAnchor) {
+          return;
+        }
+        const offsetTop = getOffsetTop();
+        const top = indexAnchor.ownTop.value - stickyOffsetTop.value + offsetTop;
+        const left = getScrollLeft(scroller);
+        clickedName.value = anchorName;
+        emitEvent(anchorName, options);
+        yield varScrollTo(scroller, {
+          left,
+          top,
+          animation: easeInOutCubic,
+          duration: toNumber(props2.duration)
+        });
+        yield doubleRaf();
+        clickedName.value = "";
+      });
+    }
+    function setScroller() {
+      return __async(this, null, function* () {
+        yield doubleRaf();
+        scroller = getParentScroller(barEl.value);
+      });
+    }
+    function addScrollerListener() {
+      scroller.addEventListener("scroll", handleScroll);
+    }
+    function removeScrollerListener() {
+      scroller.removeEventListener("scroll", handleScroll);
+    }
+    function scrollTo(index, options) {
+      requestAnimationFrame(() => anchorClick({ anchorName: index, options }));
+    }
+    return {
+      barEl,
+      active,
+      zIndex,
+      anchorNameList,
+      n,
+      classes,
+      toNumber,
+      scrollTo,
+      anchorClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/index-bar/index.mjs

@@ -0,0 +1,12 @@
+import IndexBar from "./IndexBar.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as indexBarProps } from "./props.mjs";
+withInstall(IndexBar);
+withPropsDefaultsSetter(IndexBar, indexBarProps);
+const _IndexBarComponent = IndexBar;
+var stdin_default = IndexBar;
+export {
+  _IndexBarComponent,
+  stdin_default as default,
+  indexBarProps
+};

package/es/index-bar/indexBar.css

@@ -0,0 +1 @@
+:root { --index-bar-list-right: 0; --index-bar-list-top: 50%; --index-bar-list-left: auto; --index-bar-list-bottom: auto; --index-bar-list-transform: translate(0, -50%); --index-bar-list-item-font-size: var(--font-size-xs); --index-bar-list-item-color: var(--color-primary); --index-bar-list-item-active-color: var(--color-danger); --index-bar-list-item-height: 14px; --index-bar-list-item-padding: 0 10px;}.var-index-bar { position: relative;}.var-index-bar__anchor-list { position: fixed; right: var(--index-bar-list-right); top: var(--index-bar-list-top); left: var(--index-bar-list-left); bottom: var(--index-bar-list-bottom); transform: var(--index-bar-list-transform); list-style: none; padding: 0; margin: 0;}.var-index-bar__anchor-item { font-size: var(--index-bar-list-item-font-size); display: flex; align-items: center; height: var(--index-bar-list-item-height); justify-content: center; padding: var(--index-bar-list-item-padding); color: var(--index-bar-list-item-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-index-bar__anchor-item--active { color: var(--index-bar-list-item-active-color);}

package/es/index-bar/props.mjs

@@ -0,0 +1,29 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  sticky: {
+    type: Boolean,
+    default: true
+  },
+  stickyOffsetTop: {
+    type: [String, Number],
+    default: 0
+  },
+  /** @deprecated Use stickyCssMode to instead. */
+  cssMode: Boolean,
+  stickyCssMode: Boolean,
+  hideList: Boolean,
+  zIndex: {
+    type: [Number, String],
+    default: 1
+  },
+  highlightColor: String,
+  duration: {
+    type: [Number, String],
+    default: 0
+  },
+  onClick: defineListenerProp(),
+  onChange: defineListenerProp()
+};
+export {
+  props
+};

package/es/index-bar/provide.mjs

@@ -0,0 +1,16 @@
+import { useChildren } from "@varlet/use";
+const INDEX_BAR_BIND_INDEX_ANCHOR_KEY = Symbol("INDEX_BAR_BIND_INDEX_ANCHOR_KEY");
+function useIndexAnchors() {
+  const { bindChildren, length, childProviders } = useChildren(
+    INDEX_BAR_BIND_INDEX_ANCHOR_KEY
+  );
+  return {
+    length,
+    indexAnchors: childProviders,
+    bindIndexAnchors: bindChildren
+  };
+}
+export {
+  INDEX_BAR_BIND_INDEX_ANCHOR_KEY,
+  useIndexAnchors
+};

package/es/index-bar/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../indexBar.css'
+import '../IndexBarSfc.css'