@expcat/tigercat-vue 2.1.2 → 2.1.4

package/README.md

@@ -35,25 +35,25 @@ import { ConfigProvider, Button } from '@expcat/tigercat-vue'
 
 ## Components
 
-172 public component entries across 9 categories. The authoritative list with
-import subpaths lives in
-[component-index.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/component-index.md)
-(generated); the table below is only a sampler.
-
-| Category       | Count | Examples                                                      |
-| -------------- | ----- | ------------------------------------------------------------- |
-| **Basic**      | 30    | Button, Alert, Avatar, Badge, Icon, Tag, Text, Result, QRCode |
-| **Form**       | 31    | Input, Select, DatePicker, Form, Upload, InputOTP, TagsInput  |
-| **Layout**     | 19    | Card, Row/Col, Layout, List, Descriptions, Skeleton, Space    |
-| **Navigation** | 33    | Menu, Tabs, Breadcrumb, Pagination, Steps, Dropdown, Tree     |
-| **Feedback**   | 13    | Modal, Drawer, Message, Popover, Tooltip, Progress, Tour      |
-| **Data**       | 7     | Table, Calendar, Collapse, Timeline, DataExport               |
-| **Charts**     | 20    | BarChart, LineChart, PieChart, RadarChart, GaugeChart, Gantt  |
-| **Advanced**   | 12    | VirtualTable, VirtualList, RichTextEditor, CodeEditor         |
-| **Composite**  | 7     | DataTableWithToolbar, ChatWindow, FormWizard, TaskBoard       |
-
-`Message` and `notification` are also available as imperative command APIs from
-the package root; `notification` is a command API, not a component.
+Sampler: Button, Avatar, Badge, Input, Select, DatePicker, Form, Card, Layout, Menu, Tabs, Modal, Drawer, Table, BarChart, LineChart, VirtualTable, RichTextEditor, DataTableWithToolbar, ChatWindow. The generated catalog with import subpaths is
+[component-index.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/component-index.md).
+
+`Message`, `notification`, and `LoadingBar` are root command APIs;
+[command-apis.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/command-apis.md).
+`notification` is not a component.
+
+## Composables
+
+`useFormController`, `useDrag`, and `useChartInteraction`. Signatures are listed
+in
+[api-summary.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/shared/api-summary.md).
+
+## Next
+
+- Install, compatibility, and MCP client config:
+  [root README](https://github.com/expcat/Tigercat/blob/main/README.md)
+- Agent docs:
+  [SKILL.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/SKILL.md)
 
 ## License
 

package/dist/chunk-2EOVE7AX.mjs

@@ -0,0 +1,398 @@
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
+import {
+  createStatusIcon
+} from "./chunk-5VSSB4QF.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueBodyScrollLock,
+  useVueEscapeKey,
+  useVueFocusTrap,
+  useVueOverlayPortalTarget
+} from "./chunk-VFRB5L7W.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Tour.ts
+import {
+  defineComponent,
+  computed,
+  h,
+  ref,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  onUnmounted,
+  useId
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  tourPopoverClasses,
+  tourTitleClasses,
+  tourDescriptionClasses,
+  tourFooterClasses,
+  tourIndicatorClasses,
+  tourCloseButtonClasses,
+  tourMaskClasses,
+  tourPrevButtonGapClass,
+  resolveTourTarget,
+  scrollTourTargetIntoView,
+  getTourRectFromElement,
+  getTourSizeFromElement,
+  getTourPopoverStyle,
+  getTourMaskHoleStyle,
+  resolveTourNav,
+  getTourStepContext,
+  shouldLockTourOverlay,
+  tourNextEvents,
+  tourPrevEvents,
+  tourCloseEvents,
+  shouldCloseOnMaskClick,
+  getTourLabels,
+  closeIconPathD,
+  mergeTigerLocale,
+  captureActiveElement,
+  focusFirst,
+  restoreFocus
+} from "@expcat/tigercat-core";
+var Tour = defineComponent({
+  name: "TigerTour",
+  inheritAttrs: false,
+  props: {
+    steps: {
+      type: Array,
+      required: true
+    },
+    loadSteps: {
+      type: Function,
+      default: void 0
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    current: {
+      type: Number,
+      default: void 0
+    },
+    nextText: { type: String, default: void 0 },
+    prevText: { type: String, default: void 0 },
+    finishText: { type: String, default: void 0 },
+    closable: { type: Boolean, default: true },
+    maskClosable: { type: Boolean, default: true },
+    keyboard: { type: Boolean, default: true },
+    showIndicators: { type: Boolean, default: true },
+    locale: { type: Object, default: void 0 },
+    className: { type: String, default: void 0 },
+    style: { type: Object, default: void 0 }
+  },
+  emits: ["update:open", "update:current", "close", "finish", "change"],
+  setup(props, { emit, attrs, slots, expose }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(
+      () => getTourLabels(mergedLocale.value, {
+        nextText: props.nextText,
+        prevText: props.prevText,
+        finishText: props.finishText
+      })
+    );
+    const internalStep = ref(0);
+    const resolvedSteps = ref(props.steps);
+    const currentStep = computed(() => props.current ?? internalStep.value);
+    const nav = computed(() => resolveTourNav(resolvedSteps.value, currentStep.value));
+    const ctx = computed(() => getTourStepContext(nav.value));
+    const step = computed(() => ctx.value?.step);
+    const visible = computed(() => shouldLockTourOverlay(props.open, Boolean(step.value)));
+    const targetRect = ref();
+    const popoverSize = ref();
+    const rootRef = ref(null);
+    const popoverRef = ref(null);
+    const closeButtonRef = ref(null);
+    const { anchorRef, target: portalTarget } = useVueOverlayPortalTarget();
+    const instanceId = `tiger-tour-${useId()}`;
+    const titleId = `${instanceId}-title`;
+    const descriptionId = `${instanceId}-description`;
+    let previousActiveElement = null;
+    let loadGeneration = 0;
+    let resizeObserver;
+    const updateRect = () => {
+      if (!props.open || !step.value) {
+        targetRect.value = void 0;
+        return;
+      }
+      const targetEl = resolveTourTarget(step.value.target);
+      if (targetEl) {
+        scrollTourTargetIntoView(targetEl);
+        targetRect.value = getTourRectFromElement(targetEl);
+      } else {
+        targetRect.value = void 0;
+      }
+      const size = getTourSizeFromElement(popoverRef.value);
+      if (size) popoverSize.value = size;
+    };
+    const loadResolvedSteps = async () => {
+      const generation = ++loadGeneration;
+      if (!props.loadSteps) {
+        resolvedSteps.value = props.steps;
+        return;
+      }
+      try {
+        const next2 = await props.loadSteps();
+        if (generation === loadGeneration) resolvedSteps.value = next2;
+      } catch {
+      }
+    };
+    watch(
+      () => props.steps,
+      (next2) => {
+        if (!props.loadSteps) resolvedSteps.value = next2;
+      }
+    );
+    watch(
+      () => props.open,
+      (open) => {
+        if (open) {
+          if (props.current === void 0) internalStep.value = 0;
+          previousActiveElement = captureActiveElement();
+          void loadResolvedSteps();
+        } else {
+          restoreFocus(previousActiveElement);
+          previousActiveElement = null;
+          internalStep.value = 0;
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => [props.open, currentStep.value, step.value, step.value?.target],
+      () => {
+        if (props.open) updateRect();
+      },
+      { immediate: true }
+    );
+    const bindObservers = () => {
+      resizeObserver?.disconnect();
+      resizeObserver = void 0;
+      if (!visible.value || typeof ResizeObserver !== "function") return;
+      resizeObserver = new ResizeObserver(() => updateRect());
+      if (popoverRef.value) resizeObserver.observe(popoverRef.value);
+      const targetEl = resolveTourTarget(step.value?.target);
+      if (targetEl) resizeObserver.observe(targetEl);
+    };
+    const onViewportChange = () => {
+      if (props.open) updateRect();
+    };
+    onMounted(() => {
+      window.addEventListener("resize", onViewportChange);
+      window.addEventListener("scroll", onViewportChange, true);
+      bindObservers();
+    });
+    onBeforeUnmount(() => {
+      loadGeneration += 1;
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", onViewportChange);
+      window.removeEventListener("scroll", onViewportChange, true);
+    });
+    onUnmounted(() => {
+      restoreFocus(previousActiveElement);
+      previousActiveElement = null;
+    });
+    watch(
+      visible,
+      (isVisible) => {
+        if (!isVisible) return;
+        nextTick(() => {
+          updateRect();
+          bindObservers();
+          focusFirst([closeButtonRef.value, popoverRef.value]);
+        });
+      },
+      { immediate: true, flush: "post" }
+    );
+    const applyNavEvents = (events) => {
+      for (const event of events) {
+        if (event.type === "change") {
+          internalStep.value = event.index;
+          emit("update:current", event.index);
+          emit("change", event.index);
+        } else if (event.type === "finish") {
+          emit("finish");
+        } else if (event.type === "close") {
+          emit("close");
+        } else {
+          emit("update:open", event.open);
+        }
+      }
+    };
+    const next = () => applyNavEvents(tourNextEvents(nav.value));
+    const prev = () => applyNavEvents(tourPrevEvents(nav.value));
+    const close = () => applyNavEvents(tourCloseEvents());
+    const overlayEnabled = computed(() => visible.value);
+    const escapeEnabled = computed(() => visible.value && props.keyboard);
+    const detachEscape = useVueEscapeKey({
+      enabled: escapeEnabled,
+      onEscape: close,
+      layerRef: rootRef
+    });
+    onBeforeUnmount(detachEscape);
+    useVueBodyScrollLock(overlayEnabled);
+    useVueFocusTrap({ enabled: overlayEnabled, containerRef: rootRef, inert: true });
+    expose({ close });
+    return () => {
+      const anchor = h("span", { ref: anchorRef, hidden: true });
+      if (!visible.value || !step.value || !ctx.value) return anchor;
+      const current = ctx.value;
+      const placement = current.step.placement ?? "bottom";
+      const showMask = current.step.mask !== false;
+      const popoverStyle = mergeStyleValues(
+        getTourPopoverStyle(targetRect.value, popoverSize.value, placement),
+        attrs.style,
+        props.style
+      );
+      const hasTitle = Boolean(slots.title || current.step.title);
+      const hasDescription = Boolean(slots.description || current.step.description);
+      const ariaLabelledbyFromAttrs = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
+      const ariaLabelFromAttrs = typeof attrs["aria-label"] === "string" ? attrs["aria-label"] : void 0;
+      const ariaDescribedbyFromAttrs = typeof attrs["aria-describedby"] === "string" ? attrs["aria-describedby"] : void 0;
+      const children = [];
+      if (showMask) {
+        children.push(
+          h("div", {
+            class: tourMaskClasses,
+            "data-tiger-tour-mask": "",
+            "aria-hidden": "true",
+            style: targetRect.value ? getTourMaskHoleStyle(targetRect.value) : void 0,
+            onClick: (event) => {
+              if (shouldCloseOnMaskClick(event, props.maskClosable)) close();
+            }
+          })
+        );
+      }
+      const popoverChildren = [];
+      if (props.closable) {
+        popoverChildren.push(
+          h(
+            "button",
+            {
+              ref: closeButtonRef,
+              class: tourCloseButtonClasses,
+              type: "button",
+              "aria-label": labels.value.closeAriaLabel,
+              onClick: close
+            },
+            createStatusIcon(closeIconPathD, "h-4 w-4", {
+              "aria-hidden": "true",
+              focusable: "false"
+            })
+          )
+        );
+      }
+      if (hasTitle) {
+        const titleNode = slots.title?.(current) ?? current.step.title;
+        popoverChildren.push(h("div", { id: titleId, class: tourTitleClasses }, titleNode));
+      }
+      if (hasDescription) {
+        const descriptionNode = slots.description?.(current) ?? current.step.description;
+        popoverChildren.push(
+          h("div", { id: descriptionId, class: tourDescriptionClasses }, descriptionNode)
+        );
+      }
+      if (slots.content) popoverChildren.push(slots.content(current));
+      if (slots.default) popoverChildren.push(slots.default(current));
+      if (slots.footer) {
+        popoverChildren.push(slots.footer(current));
+      } else {
+        const footerChildren = [];
+        if (props.showIndicators) {
+          footerChildren.push(
+            h(
+              "span",
+              { class: tourIndicatorClasses, "aria-live": "polite" },
+              `${current.position + 1} / ${current.total}`
+            )
+          );
+        }
+        const buttons = [];
+        if (!nav.value.isFirst) {
+          buttons.push(
+            h(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: "secondary",
+                className: tourPrevButtonGapClass,
+                onClick: prev
+              },
+              { default: () => labels.value.prevText }
+            )
+          );
+        }
+        buttons.push(
+          h(
+            Button,
+            { type: "button", size: "sm", onClick: next },
+            { default: () => nav.value.isLast ? labels.value.finishText : labels.value.nextText }
+          )
+        );
+        footerChildren.push(h("div", { class: "flex items-center" }, buttons));
+        popoverChildren.push(h("div", { class: tourFooterClasses }, footerChildren));
+      }
+      const {
+        class: _className,
+        style: _style,
+        role: _role,
+        tabindex: _tabIndex,
+        ...restAttrs
+      } = attrs;
+      children.push(
+        h(
+          "div",
+          {
+            ...restAttrs,
+            ref: popoverRef,
+            class: classNames(tourPopoverClasses, props.className, coerceClassValue(attrs.class)),
+            style: popoverStyle,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": ariaLabelledbyFromAttrs ?? (hasTitle ? titleId : void 0),
+            "aria-label": ariaLabelFromAttrs ?? (hasTitle ? void 0 : labels.value.dialogAriaLabel),
+            "aria-describedby": ariaDescribedbyFromAttrs ?? (hasDescription ? descriptionId : void 0),
+            tabindex: -1,
+            "data-tiger-tour": ""
+          },
+          popoverChildren
+        )
+      );
+      children.push(h("div", { class: "contents", "data-tiger-overlay-host": "" }));
+      return [
+        anchor,
+        renderVueOverlayTeleport(
+          h(
+            "div",
+            {
+              ref: rootRef,
+              class: "contents",
+              "data-tiger-overlay-layer": "",
+              "data-tiger-tour-root": ""
+            },
+            children
+          ),
+          portalTarget.value
+        )
+      ];
+    };
+  }
+});
+var Tour_default = Tour;
+
+export {
+  Tour,
+  Tour_default
+};

package/dist/{chunk-3MO7A4GU.mjs → chunk-2HP6DX7Q.mjs}

@@ -1,13 +1,18 @@
 // src/components/Link.ts
 import { defineComponent, computed, h } from "vue";
 import {
-  classNames,
-  getLinkVariantClasses,
   getSecureRel,
-  linkBaseClasses,
-  linkDisabledClasses,
-  linkSizeClasses
+  resolveLinkClasses
 } from "@expcat/tigercat-core";
+function callListener(listener, event) {
+  if (typeof listener === "function") {
+    listener(event);
+    return;
+  }
+  if (Array.isArray(listener)) {
+    for (const item of listener) callListener(item, event);
+  }
+}
 var Link = defineComponent({
   name: "TigerLink",
   inheritAttrs: false,
@@ -31,9 +36,9 @@ var Link = defineComponent({
     target: {
       type: String
     },
-    /** Auto-set to 'noopener noreferrer' when target="_blank" */
+    /** `_blank` always merges noopener noreferrer into rel */
     rel: { type: String },
-    /** @default true */
+    /** Underline at rest. @default true */
     underline: {
       type: Boolean,
       default: true
@@ -44,13 +49,12 @@ var Link = defineComponent({
   },
   setup(props, { slots, emit, attrs }) {
     const linkClasses = computed(
-      () => classNames(
-        linkBaseClasses,
-        getLinkVariantClasses(props.variant, void 0, { disabled: props.disabled }),
-        linkSizeClasses[props.size],
-        props.underline && "hover:underline",
-        props.disabled && linkDisabledClasses
-      )
+      () => resolveLinkClasses({
+        variant: props.variant,
+        size: props.size,
+        underline: props.underline,
+        disabled: props.disabled
+      })
     );
     const computedRel = computed(() => getSecureRel(props.target, props.rel));
     const handleClick = (event) => {
@@ -65,14 +69,16 @@ var Link = defineComponent({
       if (props.disabled && (event.key === "Enter" || event.key === " ")) {
         event.preventDefault();
         event.stopPropagation();
+        return;
       }
+      callListener(attrs.onKeydown, event);
     };
     return () => h(
       "a",
       {
         ...attrs,
         class: [linkClasses.value, attrs.class],
-        href: props.disabled ? void 0 : props.href,
+        href: props.href,
         target: props.target,
         rel: computedRel.value,
         "aria-disabled": props.disabled ? "true" : void 0,

package/dist/{chunk-BC74Z6IG.mjs → chunk-2J6F4OVC.mjs}

@@ -4,44 +4,32 @@ import {
   classNames,
   coerceClassValue,
   getLayoutHeaderClasses,
+  injectLayoutGridStyles,
   mergeStyleValues
 } from "@expcat/tigercat-core";
 var Header = defineComponent({
   name: "TigerHeader",
   inheritAttrs: false,
   props: {
-    /**
-     * Additional CSS classes
-     */
     className: {
       type: String,
       default: void 0
     },
-    /**
-     * Header visual style.
-     * @default 'default'
-     */
     variant: {
       type: String,
       default: "default"
     },
-    /**
-     * Header height (CSS value)
-     * @default '64px'
-     */
     height: {
       type: String,
-      default: "64px"
+      default: void 0
     },
-    /**
-     * Custom styles
-     */
     style: {
       type: Object,
       default: void 0
     }
   },
   setup(props, { slots, attrs }) {
+    injectLayoutGridStyles();
     const headerClasses = computed(
       () => classNames(
         getLayoutHeaderClasses(props.variant),
@@ -54,7 +42,7 @@ var Header = defineComponent({
       {
         ...attrs,
         class: headerClasses.value,
-        style: mergeStyleValues(props.style, { height: props.height })
+        style: mergeStyleValues(props.style, props.height ? { height: props.height } : void 0)
       },
       slots.default?.()
     );

package/dist/{chunk-QZRSFGZZ.mjs → chunk-35JLHFUT.mjs}

@@ -1,13 +1,15 @@
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Code.ts
 import { computed, defineComponent, h, onBeforeUnmount, ref } from "vue";
 import {
   coerceClassValue,
+  codeBlockCopyStatusLiveClasses,
   codeBlockPreClasses,
   copyTextToClipboard,
+  createCopyStatusReset,
   getCodeBlockContainerClasses,
   getCodeBlockCopyButtonClasses,
   getCodeLabels,
@@ -60,7 +62,9 @@ var Code = defineComponent({
   setup(props, { emit, attrs }) {
     const config = useTigerConfig();
     const copyStatus = ref("idle");
-    const timerRef = ref(null);
+    const reset = createCopyStatusReset((status) => {
+      copyStatus.value = status;
+    });
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labels = computed(() => getCodeLabels(mergedLocale.value, props.labels));
     const resolvedCopyLabel = computed(
@@ -77,6 +81,7 @@ var Code = defineComponent({
       if (copyStatus.value === "copied") return resolvedCopiedLabel.value;
       return resolvedCopyLabel.value;
     });
+    const liveText = computed(() => copyStatus.value === "idle" ? "" : buttonLabel.value);
     const containerClasses = computed(() => {
       const attrsRecord = attrs;
       return getCodeBlockContainerClasses(props.className, coerceClassValue(attrsRecord.class));
@@ -84,29 +89,18 @@ var Code = defineComponent({
     const copyButtonClasses = computed(() => {
       return getCodeBlockCopyButtonClasses(copyStatus.value);
     });
-    const clearTimer = () => {
-      if (timerRef.value != null) {
-        window.clearTimeout(timerRef.value);
-        timerRef.value = null;
-      }
-    };
     const handleCopy = async () => {
       if (!props.copyable) return;
       const ok = await copyTextToClipboard(props.code);
-      clearTimer();
       if (ok) {
-        copyStatus.value = "copied";
+        reset.schedule("copied");
         emit("copy", props.code);
       } else {
-        copyStatus.value = "failed";
+        reset.schedule("failed");
       }
-      timerRef.value = window.setTimeout(() => {
-        copyStatus.value = "idle";
-        timerRef.value = null;
-      }, 1500);
     };
     onBeforeUnmount(() => {
-      clearTimer();
+      reset.dispose();
     });
     return () => h(
       "div",
@@ -122,10 +116,17 @@ var Code = defineComponent({
           {
             type: "button",
             class: copyButtonClasses.value,
-            onClick: handleCopy,
-            "aria-label": buttonLabel.value
+            onClick: handleCopy
           },
           buttonLabel.value
+        ) : null,
+        props.copyable ? h(
+          "span",
+          {
+            class: codeBlockCopyStatusLiveClasses,
+            "aria-live": "polite"
+          },
+          liveText.value
         ) : null
       ]
     );