@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/chunk-QYSFZA5V.js

@@ -0,0 +1,353 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Anchor.ts
+
+
+
+
+
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var AnchorContextKey = /* @__PURE__ */ Symbol("AnchorContext");
+var AnchorLink = _vue.defineComponent.call(void 0, {
+  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 = _vue.inject.call(void 0, AnchorContextKey, null);
+    _vue.onMounted.call(void 0, () => {
+      _optionalChain([anchorContext, 'optionalAccess', _ => _.registerLink, 'call', _2 => _2(props.href)]);
+    });
+    _vue.onBeforeUnmount.call(void 0, () => {
+      _optionalChain([anchorContext, 'optionalAccess', _3 => _3.unregisterLink, 'call', _4 => _4(props.href)]);
+    });
+    const handleClick = (event) => {
+      event.preventDefault();
+      _optionalChain([anchorContext, 'optionalAccess', _5 => _5.handleLinkClick, 'call', _6 => _6(props.href, event)]);
+    };
+    const linkClasses = _vue.computed.call(void 0, () => {
+      const isActive = _optionalChain([anchorContext, 'optionalAccess', _7 => _7.activeLink]) === props.href;
+      return _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getAnchorLinkClasses.call(void 0, isActive, props.className),
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      );
+    });
+    return () => {
+      const slotContent = _optionalChain([slots, 'access', _8 => _8.default, 'optionalCall', _9 => _9()]);
+      const hasNestedLinks = slotContent && Array.isArray(slotContent) && slotContent.some(
+        (vnode) => vnode.type && vnode.type.name === "TigerAnchorLink"
+      );
+      if (hasNestedLinks) {
+        return _vue.h.call(void 0, "div", { class: "anchor-link-wrapper" }, [
+          _vue.h.call(void 0, 
+            "a",
+            {
+              ...attrs,
+              href: props.href,
+              target: props.target,
+              class: linkClasses.value,
+              "data-anchor-href": props.href,
+              onClick: handleClick
+            },
+            props.title
+          ),
+          _vue.h.call(void 0, "div", { class: "pl-3 mt-1 space-y-1" }, slotContent)
+        ]);
+      }
+      const content = _nullishCoalesce(slotContent, () => ( props.title));
+      return _vue.h.call(void 0, 
+        "a",
+        {
+          ...attrs,
+          href: props.href,
+          target: props.target,
+          class: linkClasses.value,
+          "data-anchor-href": props.href,
+          onClick: handleClick
+        },
+        content
+      );
+    };
+  }
+});
+var Anchor = _vue.defineComponent.call(void 0, {
+  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 = _vue.ref.call(void 0, "");
+    const links = _vue.ref.call(void 0, []);
+    const anchorRef = _vue.ref.call(void 0, null);
+    const inkRef = _vue.ref.call(void 0, null);
+    const isScrolling = _vue.ref.call(void 0, false);
+    let scrollTimeoutId = null;
+    const getContainer = () => props.getContainer();
+    const scrollOffset = _vue.computed.call(void 0, () => _nullishCoalesce(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 = () => {
+      _optionalChain([stopObserver, 'optionalCall', _10 => _10()]);
+      const container = getContainer();
+      const root = container === window ? null : container;
+      stopObserver = _tigercatcore.createAnchorObserver.call(void 0, links.value, {
+        offsetTop: scrollOffset.value,
+        root,
+        onChange: (newActiveLink) => {
+          if (isScrolling.value) return;
+          const finalActiveLink = props.getCurrentAnchor ? props.getCurrentAnchor(newActiveLink) : newActiveLink;
+          if (finalActiveLink !== activeLink.value) {
+            activeLink.value = finalActiveLink;
+            emit("change", finalActiveLink);
+          }
+        }
+      });
+    };
+    const scrollTo = (href) => {
+      _tigercatcore.scrollToAnchor.call(void 0, href, getContainer(), scrollOffset.value);
+    };
+    const handleLinkClick = (href, event) => {
+      emit("click", event, href);
+      isScrolling.value = true;
+      activeLink.value = href;
+      scrollTo(href);
+      if (scrollTimeoutId !== null) clearTimeout(scrollTimeoutId);
+      scrollTimeoutId = setTimeout(() => {
+        isScrolling.value = false;
+        scrollTimeoutId = null;
+      }, 500);
+    };
+    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`;
+      }
+    };
+    _vue.watch.call(void 0, activeLink, () => {
+      updateInkPosition();
+    });
+    _vue.watch.call(void 0, () => props.direction, updateInkPosition);
+    _vue.onMounted.call(void 0, () => {
+      _vue.nextTick.call(void 0, () => {
+        setupObserver();
+        setTimeout(updateInkPosition, 0);
+      });
+    });
+    _vue.watch.call(void 0, [links, scrollOffset, () => props.getContainer], () => {
+      _vue.nextTick.call(void 0, () => setupObserver());
+    });
+    _vue.onBeforeUnmount.call(void 0, () => {
+      _optionalChain([stopObserver, 'optionalCall', _11 => _11()]);
+      if (scrollTimeoutId !== null) {
+        clearTimeout(scrollTimeoutId);
+      }
+    });
+    const wrapperClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getAnchorWrapperClasses.call(void 0, props.affix, props.className),
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      );
+    });
+    const inkContainerClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getAnchorInkContainerClasses.call(void 0, props.direction);
+    });
+    const inkActiveClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getAnchorInkActiveClasses.call(void 0, props.direction);
+    });
+    const linkListClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getAnchorLinkListClasses.call(void 0, props.direction);
+    });
+    const showInk = _vue.computed.call(void 0, () => !props.affix || props.showInkInFixed);
+    const wrapperStyle = _vue.computed.call(void 0, () => {
+      const baseStyle = {};
+      if (props.affix && props.offsetTop > 0) {
+        baseStyle.top = `${props.offsetTop}px`;
+      }
+      return _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style, baseStyle);
+    });
+    const contextValue = _vue.reactive.call(void 0, {
+      activeLink: "",
+      direction: props.direction,
+      registerLink,
+      unregisterLink,
+      handleLinkClick,
+      scrollTo
+    });
+    _vue.watch.call(void 0, [activeLink, () => props.direction], ([newActive, newDir]) => {
+      contextValue.activeLink = newActive;
+      contextValue.direction = newDir;
+    });
+    _vue.provide.call(void 0, AnchorContextKey, contextValue);
+    return () => {
+      const inkIndicator = showInk.value ? [
+        _vue.h.call(void 0, "div", { class: inkContainerClasses.value }, [
+          _vue.h.call(void 0, "div", {
+            ref: inkRef,
+            class: inkActiveClasses.value
+          })
+        ])
+      ] : [];
+      return _vue.h.call(void 0, 
+        "div",
+        {
+          ...attrs,
+          ref: anchorRef,
+          class: wrapperClasses.value,
+          style: wrapperStyle.value
+        },
+        [
+          ...inkIndicator,
+          _vue.h.call(void 0, 
+            "div",
+            {
+              class: linkListClasses.value
+            },
+            _optionalChain([slots, 'access', _12 => _12.default, 'optionalCall', _13 => _13()])
+          )
+        ]
+      );
+    };
+  }
+});
+var Anchor_default = Anchor;
+
+
+
+
+
+
+exports.AnchorContextKey = AnchorContextKey; exports.AnchorLink = AnchorLink; exports.Anchor = Anchor; exports.Anchor_default = Anchor_default;

package/dist/chunk-QZ5OPNL4.mjs

@@ -0,0 +1,88 @@
+// src/components/Statistic.ts
+import { defineComponent, h, ref, computed, watch, onBeforeUnmount } from "vue";
+import {
+  statisticBaseClasses,
+  getStatisticTitleClasses,
+  getStatisticValueClasses,
+  statisticPrefixClasses,
+  statisticSuffixClasses,
+  formatStatisticValue,
+  canAnimateStatisticValue,
+  createStatisticNumberAnimation,
+  classNames,
+  coerceClassValue
+} from "@expcat/tigercat-core";
+var Statistic = defineComponent({
+  name: "TigerStatistic",
+  props: {
+    title: { type: String, default: void 0 },
+    value: { type: [String, Number], default: void 0 },
+    precision: { type: Number, default: void 0 },
+    prefix: { type: String, default: void 0 },
+    suffix: { type: String, default: void 0 },
+    groupSeparator: { type: Boolean, default: false },
+    animated: { type: Boolean, default: false },
+    animationDuration: { type: Number, default: void 0 },
+    size: { type: String, default: "md" }
+  },
+  setup(props, { attrs }) {
+    const initialValue = props.animated && canAnimateStatisticValue(props.value) ? 0 : props.value;
+    const displayValue = ref(initialValue);
+    const currentNumber = ref(canAnimateStatisticValue(initialValue) ? initialValue : 0);
+    let controller = null;
+    const stopAnimation = () => {
+      controller?.stop();
+      controller = null;
+    };
+    watch(
+      () => [props.value, props.animated, props.animationDuration],
+      () => {
+        stopAnimation();
+        if (!props.animated || !canAnimateStatisticValue(props.value)) {
+          displayValue.value = props.value;
+          if (canAnimateStatisticValue(props.value)) currentNumber.value = props.value;
+          return;
+        }
+        controller = createStatisticNumberAnimation({
+          from: currentNumber.value,
+          to: props.value,
+          duration: props.animationDuration,
+          onUpdate: (next) => {
+            currentNumber.value = next;
+            displayValue.value = next;
+          },
+          onComplete: () => {
+            currentNumber.value = props.value;
+            displayValue.value = props.value;
+            controller = null;
+          }
+        });
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(stopAnimation);
+    const formatted = computed(
+      () => formatStatisticValue(displayValue.value, props.precision, props.groupSeparator)
+    );
+    return () => h(
+      "div",
+      {
+        class: classNames(statisticBaseClasses, coerceClassValue(attrs.class))
+      },
+      [
+        props.title ? h("div", { class: getStatisticTitleClasses(props.size) }, props.title) : null,
+        h("div", { class: getStatisticValueClasses(props.size) }, [
+          props.prefix ? h("span", { class: statisticPrefixClasses }, props.prefix) : null,
+          h("span", null, formatted.value),
+          props.suffix ? h("span", { class: statisticSuffixClasses }, props.suffix) : null
+        ])
+      ]
+    );
+  }
+});
+var Statistic_default = Statistic;
+
+export {
+  Statistic,
+  Statistic_default
+};

package/dist/{chunk-DU2NXX75.mjs → chunk-R2HO74FE.mjs}

@@ -1,7 +1,10 @@
-import { ref, computed } from 'vue';
-import { classNames, getChartElementOpacity } from '@expcat/tigercat-core';
-
 // src/composables/useChartInteraction.ts
+import { ref, computed, getCurrentScope, onScopeDispose } from "vue";
+import {
+  classNames,
+  createChartPointerMoveScheduler,
+  getChartElementOpacity
+} from "@expcat/tigercat-core";
 function unref(value) {
   return value?.value !== void 0 ? value.value : value;
 }
@@ -10,6 +13,14 @@ function useChartInteraction(options) {
   const localHoveredIndex = ref(null);
   const localSelectedIndex = ref(null);
   const tooltipPosition = ref({ x: 0, y: 0 });
+  const tooltipScheduler = createChartPointerMoveScheduler({
+    onPositionChange: (position) => {
+      tooltipPosition.value = position;
+    }
+  });
+  if (getCurrentScope()) {
+    onScopeDispose(() => tooltipScheduler.cancel());
+  }
   const resolvedHoveredIndex = computed(() => {
     const prop = options.hoveredIndexProp?.();
     return prop !== void 0 ? prop : localHoveredIndex.value;
@@ -43,9 +54,10 @@ function useChartInteraction(options) {
     }
   };
   const handleMouseMove = (event) => {
-    tooltipPosition.value = { x: event.clientX, y: event.clientY };
+    tooltipScheduler.schedule({ x: event.clientX, y: event.clientY });
   };
   const handleMouseLeave = () => {
+    tooltipScheduler.cancel();
     if (!unref(options.hoverable)) return;
     if (options.hoveredIndexProp?.() === void 0) {
       localHoveredIndex.value = null;
@@ -121,4 +133,6 @@ function useChartInteraction(options) {
   };
 }
 
-export { useChartInteraction };
+export {
+  useChartInteraction
+};

package/dist/chunk-RDJZOMI6.js

@@ -0,0 +1,84 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/Segmented.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var Segmented = _vue.defineComponent.call(void 0, {
+  name: "TigerSegmented",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    block: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    function handleSelect(option) {
+      if (option.disabled || props.disabled) return;
+      if (option.value === props.modelValue) return;
+      emit("update:modelValue", option.value);
+      emit("change", option.value);
+    }
+    return () => _vue.h.call(void 0, 
+      "div",
+      {
+        class: _tigercatcore.classNames.call(void 0, 
+          _tigercatcore.getSegmentedContainerClasses.call(void 0, props.size, props.block),
+          _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+        ),
+        style: _tigercatcore.getSegmentedContainerStyle.call(void 0, props.options.length),
+        role: "radiogroup"
+      },
+      [
+        _vue.h.call(void 0, "div", {
+          "data-tiger-segmented-indicator": "true",
+          "aria-hidden": "true",
+          class: _tigercatcore.getSegmentedIndicatorClasses.call(void 0, props.size),
+          style: _tigercatcore.getSegmentedIndicatorStyle.call(void 0, 
+            props.options.findIndex((opt) => opt.value === props.modelValue),
+            props.options.length,
+            props.size
+          )
+        }),
+        ...props.options.map((opt) => {
+          const selected = opt.value === props.modelValue;
+          const isDisabled = !!opt.disabled || props.disabled;
+          return _vue.h.call(void 0, 
+            "label",
+            {
+              key: opt.value,
+              class: _tigercatcore.classNames.call(void 0, 
+                _tigercatcore.getSegmentedOptionClasses.call(void 0, props.size, selected, isDisabled),
+                props.block ? "flex-1 text-center" : ""
+              ),
+              role: "radio",
+              "aria-checked": selected,
+              "aria-disabled": isDisabled,
+              onClick: () => handleSelect(opt)
+            },
+            [_vue.h.call(void 0, "span", null, opt.label)]
+          );
+        })
+      ]
+    );
+  }
+});
+var Segmented_default = Segmented;
+
+
+
+
+exports.Segmented = Segmented; exports.Segmented_default = Segmented_default;