@expcat/tigercat-vue 2.1.1 → 2.1.3

package/dist/chunk-QZLOF36M.mjs

@@ -1,354 +0,0 @@
-// src/components/Anchor.ts
-import {
-  defineComponent,
-  h,
-  ref,
-  computed,
-  provide,
-  inject,
-  onMounted,
-  onBeforeUnmount,
-  watch,
-  nextTick,
-  reactive
-} from "vue";
-import {
-  classNames,
-  coerceClassValue,
-  mergeStyleValues,
-  getAnchorWrapperClasses,
-  getAnchorInkContainerClasses,
-  getAnchorInkActiveClasses,
-  getAnchorLinkClasses,
-  getAnchorLinkListClasses,
-  createAnchorObserver,
-  createProgrammaticScrollLock,
-  scrollToAnchor
-} from "@expcat/tigercat-core";
-var AnchorContextKey = /* @__PURE__ */ Symbol("AnchorContext");
-var AnchorLink = defineComponent({
-  name: "TigerAnchorLink",
-  inheritAttrs: false,
-  props: {
-    /**
-     * Target anchor ID (with #)
-     */
-    href: {
-      type: String,
-      required: true
-    },
-    /**
-     * Link title/text
-     */
-    title: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Link target attribute
-     */
-    target: {
-      type: String,
-      default: void 0
-    },
-    className: {
-      type: String,
-      default: void 0
-    }
-  },
-  setup(props, { slots, attrs }) {
-    const anchorContext = inject(AnchorContextKey, null);
-    onMounted(() => {
-      anchorContext?.registerLink(props.href);
-    });
-    watch(
-      () => props.href,
-      (next, prev) => {
-        anchorContext?.unregisterLink(prev);
-        anchorContext?.registerLink(next);
-      }
-    );
-    onBeforeUnmount(() => {
-      anchorContext?.unregisterLink(props.href);
-    });
-    const handleClick = (event) => {
-      event.preventDefault();
-      anchorContext?.handleLinkClick(props.href, event);
-    };
-    const linkClasses = computed(() => {
-      const isActive = anchorContext?.activeLink === props.href;
-      return classNames(
-        getAnchorLinkClasses(isActive, props.className),
-        coerceClassValue(attrs.class)
-      );
-    });
-    return () => {
-      const slotContent = slots.default?.();
-      const hasNestedLinks = slotContent && Array.isArray(slotContent) && slotContent.some(
-        (vnode) => vnode.type && vnode.type.name === "TigerAnchorLink"
-      );
-      if (hasNestedLinks) {
-        return h("div", { class: "anchor-link-wrapper" }, [
-          h(
-            "a",
-            {
-              ...attrs,
-              href: props.href,
-              target: props.target,
-              class: linkClasses.value,
-              "data-anchor-href": props.href,
-              onClick: handleClick
-            },
-            props.title
-          ),
-          h("div", { class: "pl-3 mt-1 space-y-1" }, slotContent)
-        ]);
-      }
-      const content = slotContent ?? props.title;
-      return h(
-        "a",
-        {
-          ...attrs,
-          href: props.href,
-          target: props.target,
-          class: linkClasses.value,
-          "data-anchor-href": props.href,
-          onClick: handleClick
-        },
-        content
-      );
-    };
-  }
-});
-var Anchor = defineComponent({
-  name: "TigerAnchor",
-  inheritAttrs: false,
-  props: {
-    /**
-     * Whether to fix the anchor to the viewport
-     * @default true
-     */
-    affix: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Anchor detection boundary in pixels
-     * @default 5
-     */
-    bounds: {
-      type: Number,
-      default: 5
-    },
-    /**
-     * Offset from top of viewport when fixed
-     * @default 0
-     */
-    offsetTop: {
-      type: Number,
-      default: 0
-    },
-    /**
-     * Whether to show ink indicator when in fixed mode
-     * @default false
-     */
-    showInkInFixed: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Offset when scrolling to target anchor
-     */
-    targetOffset: {
-      type: Number,
-      default: void 0
-    },
-    /**
-     * Custom function to determine current active anchor
-     */
-    getCurrentAnchor: {
-      type: Function,
-      default: void 0
-    },
-    /**
-     * Get the scroll container
-     * @default () => window
-     */
-    getContainer: {
-      type: Function,
-      default: () => window
-    },
-    /**
-     * Direction of the anchor navigation
-     * @default 'vertical'
-     */
-    direction: {
-      type: String,
-      default: "vertical"
-    },
-    className: {
-      type: String,
-      default: void 0
-    },
-    style: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["click", "change"],
-  setup(props, { slots, emit, attrs }) {
-    const activeLink = ref("");
-    const links = ref([]);
-    const anchorRef = ref(null);
-    const inkRef = ref(null);
-    const getContainer = () => props.getContainer();
-    const scrollLock = createProgrammaticScrollLock(getContainer);
-    const scrollOffset = computed(() => props.targetOffset ?? props.offsetTop);
-    const registerLink = (href) => {
-      if (href && !links.value.includes(href)) {
-        links.value = [...links.value, href];
-      }
-    };
-    const unregisterLink = (href) => {
-      links.value = links.value.filter((l) => l !== href);
-    };
-    let stopObserver = null;
-    const setupObserver = () => {
-      stopObserver?.();
-      const container = getContainer();
-      const root = container === window ? null : container;
-      stopObserver = createAnchorObserver(links.value, {
-        offsetTop: scrollOffset.value,
-        bounds: props.bounds,
-        root,
-        onChange: (newActiveLink) => {
-          if (scrollLock.isLocked()) return;
-          const finalActiveLink = props.getCurrentAnchor ? props.getCurrentAnchor(newActiveLink) : newActiveLink;
-          if (finalActiveLink !== activeLink.value) {
-            activeLink.value = finalActiveLink;
-            emit("change", finalActiveLink);
-          }
-        }
-      });
-    };
-    const scrollTo = (href) => {
-      scrollToAnchor(href, getContainer(), scrollOffset.value);
-    };
-    const handleLinkClick = (href, event) => {
-      emit("click", event, href);
-      scrollLock.lock();
-      activeLink.value = href;
-      scrollTo(href);
-    };
-    const updateInkPosition = () => {
-      if (!inkRef.value || !anchorRef.value || !activeLink.value) {
-        return;
-      }
-      const activeLinkElement = anchorRef.value.querySelector(
-        `[data-anchor-href="${activeLink.value}"]`
-      );
-      if (!activeLinkElement) {
-        return;
-      }
-      const anchorRect = anchorRef.value.getBoundingClientRect();
-      const linkRect = activeLinkElement.getBoundingClientRect();
-      if (props.direction === "vertical") {
-        inkRef.value.style.top = `${linkRect.top - anchorRect.top}px`;
-        inkRef.value.style.height = `${linkRect.height}px`;
-      } else {
-        inkRef.value.style.left = `${linkRect.left - anchorRect.left}px`;
-        inkRef.value.style.width = `${linkRect.width}px`;
-      }
-    };
-    watch(activeLink, () => {
-      updateInkPosition();
-    });
-    watch(() => props.direction, updateInkPosition);
-    onMounted(() => {
-      nextTick(() => {
-        setupObserver();
-        setTimeout(updateInkPosition, 0);
-      });
-    });
-    watch([links, scrollOffset, () => props.getContainer, () => props.bounds], () => {
-      nextTick(() => setupObserver());
-    });
-    onBeforeUnmount(() => {
-      stopObserver?.();
-      scrollLock.dispose();
-    });
-    const wrapperClasses = computed(() => {
-      return classNames(
-        getAnchorWrapperClasses(props.affix, props.className),
-        coerceClassValue(attrs.class)
-      );
-    });
-    const inkContainerClasses = computed(() => {
-      return getAnchorInkContainerClasses(props.direction);
-    });
-    const inkActiveClasses = computed(() => {
-      return getAnchorInkActiveClasses(props.direction);
-    });
-    const linkListClasses = computed(() => {
-      return getAnchorLinkListClasses(props.direction);
-    });
-    const showInk = computed(() => !props.affix || props.showInkInFixed);
-    const wrapperStyle = computed(() => {
-      const baseStyle = {};
-      if (props.affix && props.offsetTop > 0) {
-        baseStyle.top = `${props.offsetTop}px`;
-      }
-      return mergeStyleValues(attrs.style, props.style, baseStyle);
-    });
-    const contextValue = reactive({
-      activeLink: "",
-      direction: props.direction,
-      registerLink,
-      unregisterLink,
-      handleLinkClick,
-      scrollTo
-    });
-    watch([activeLink, () => props.direction], ([newActive, newDir]) => {
-      contextValue.activeLink = newActive;
-      contextValue.direction = newDir;
-    });
-    provide(AnchorContextKey, contextValue);
-    return () => {
-      const inkIndicator = showInk.value ? [
-        h("div", { class: inkContainerClasses.value }, [
-          h("div", {
-            ref: inkRef,
-            class: inkActiveClasses.value
-          })
-        ])
-      ] : [];
-      return h(
-        "div",
-        {
-          ...attrs,
-          ref: anchorRef,
-          class: wrapperClasses.value,
-          style: wrapperStyle.value
-        },
-        [
-          ...inkIndicator,
-          h(
-            "div",
-            {
-              class: linkListClasses.value
-            },
-            slots.default?.()
-          )
-        ]
-      );
-    };
-  }
-});
-var Anchor_default = Anchor;
-
-export {
-  AnchorContextKey,
-  AnchorLink,
-  Anchor,
-  Anchor_default
-};