@expcat/tigercat-vue 2.0.4 → 2.1.0

package/README.md

@@ -17,7 +17,7 @@ pnpm add @expcat/tigercat-vue
 npm install @expcat/tigercat-vue
 ```
 
-**Requirements:** Vue ≥3.3, Tailwind CSS ≥3.4
+**Requirements:** Vue 3.x, Tailwind CSS 4.x, Node.js ≥22.13.0
 
 ## Quick Start
 
@@ -35,15 +35,25 @@ import { ConfigProvider, Button } from '@expcat/tigercat-vue'
 
 ## Components
 
-| Category       | Components                                                                            |
-| -------------- | ------------------------------------------------------------------------------------- |
-| **Basic**      | Alert, Avatar, Badge, Button, Code, Divider, Icon, Link, Tag, Text                    |
-| **Form**       | Input, Select, Checkbox, Radio, Switch, Slider, DatePicker, TimePicker, Upload, Form  |
-| **Layout**     | Card, Container, Grid (Row/Col), Layout, List, Descriptions, Skeleton, Space          |
-| **Navigation** | Menu, Tabs, Breadcrumb, Pagination, Steps, Dropdown, Tree                             |
-| **Feedback**   | Modal, Drawer, Message, Notification, Loading, Popconfirm, Popover, Tooltip, Progress |
-| **Data**       | Table, Timeline                                                                       |
-| **Charts**     | BarChart, LineChart, AreaChart, PieChart, DonutChart, RadarChart, ScatterChart        |
+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.
 
 ## License
 

package/dist/chunk-26QCTL2E.mjs

@@ -0,0 +1,180 @@
+// src/components/Masonry.ts
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  watch
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  computeMasonryColumnHeights,
+  distributeMasonryItems,
+  getMasonryColumnClasses,
+  getMasonryColumnStyle,
+  getMasonryGapStyle,
+  getMasonryItemClasses,
+  getMasonryRootClasses,
+  isBrowser,
+  moduloDistributeMasonryItems,
+  observeScrollAreaSize,
+  readMasonryItemHeight,
+  resolveMasonryColumnCount,
+  resolveMasonryGap,
+  mergeStyleValues,
+  MASONRY_DEFAULT_COLUMNS,
+  MASONRY_DEFAULT_GAP
+} from "@expcat/tigercat-core";
+function vnodeSignature(vnodes) {
+  return vnodes.map((vnode, index) => `${index}:${String(vnode.key ?? "")}`).join("\0");
+}
+function sameHeights(previous, next) {
+  return previous.length === next.length && previous.every((height, index) => height === next[index]);
+}
+var Masonry = defineComponent({
+  name: "TigerMasonry",
+  inheritAttrs: false,
+  props: {
+    columns: {
+      type: [Number, Object],
+      default: MASONRY_DEFAULT_COLUMNS
+    },
+    gap: {
+      type: [Number, Object],
+      default: MASONRY_DEFAULT_GAP
+    },
+    className: { type: String, default: void 0 },
+    columnClassName: { type: String, default: void 0 },
+    itemClassName: { type: String, default: void 0 }
+  },
+  emits: ["layout"],
+  setup(props, { slots, emit, attrs, expose }) {
+    const itemElements = /* @__PURE__ */ new Map();
+    const heights = shallowRef([]);
+    const distribution = shallowRef([]);
+    const childrenSignature = shallowRef("");
+    const windowWidth = ref(isBrowser() ? window.innerWidth : 1024);
+    let lastSignature = "";
+    let stopObserving = null;
+    let disposed = false;
+    const columnCount = computed(() => resolveMasonryColumnCount(props.columns, windowWidth.value));
+    const gap = computed(() => resolveMasonryGap(props.gap, windowWidth.value));
+    function setItemRef(index, el) {
+      if (el instanceof HTMLElement) {
+        itemElements.set(index, el);
+        return;
+      }
+      const current = itemElements.get(index);
+      if (!current || !current.isConnected) {
+        itemElements.delete(index);
+      }
+    }
+    function emitLayout(nextDistribution) {
+      const detail = {
+        columnCount: columnCount.value,
+        columnHeights: computeMasonryColumnHeights(heights.value, nextDistribution, gap.value)
+      };
+      emit("layout", detail);
+    }
+    function redistribute() {
+      const next = distributeMasonryItems(heights.value, columnCount.value);
+      distribution.value = next;
+      emitLayout(next);
+    }
+    function relayout() {
+      const indices = Array.from(itemElements.keys());
+      const maxIndex = indices.length > 0 ? Math.max(...indices) : -1;
+      const nextHeights = [];
+      for (let index = 0; index <= maxIndex; index++) {
+        const element = itemElements.get(index);
+        nextHeights.push(element ? readMasonryItemHeight(element) : 0);
+      }
+      const countChanged = nextHeights.length !== heights.value.length;
+      if (!countChanged && sameHeights(heights.value, nextHeights)) return;
+      heights.value = nextHeights;
+      redistribute();
+    }
+    function handleResize() {
+      windowWidth.value = window.innerWidth;
+    }
+    const isResponsive = () => typeof props.columns === "object" || typeof props.gap === "object";
+    onMounted(() => {
+      if (isResponsive()) window.addEventListener("resize", handleResize);
+      relayout();
+    });
+    onBeforeUnmount(() => {
+      disposed = true;
+      window.removeEventListener("resize", handleResize);
+      stopObserving?.();
+      stopObserving = null;
+      itemElements.clear();
+    });
+    watch(childrenSignature, () => {
+      void nextTick(relayout);
+    });
+    watch([columnCount, gap], redistribute);
+    watch([distribution, childrenSignature], () => {
+      void nextTick(() => {
+        if (disposed) return;
+        stopObserving?.();
+        stopObserving = observeScrollAreaSize(Array.from(itemElements.values()), relayout);
+      });
+    });
+    expose({
+      relayout,
+      getColumnCount: () => columnCount.value
+    });
+    return () => {
+      const vnodes = (slots.default?.() ?? []).filter((vnode) => vnode);
+      const signature = vnodeSignature(vnodes);
+      if (signature !== lastSignature) {
+        lastSignature = signature;
+        childrenSignature.value = signature;
+      }
+      const activeDistribution = distribution.value.length > 0 && heights.value.length === vnodes.length ? distribution.value : moduloDistributeMasonryItems(vnodes.length, columnCount.value);
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(getMasonryRootClasses(props.className), coerceClassValue(attrs.class)),
+          style: mergeStyleValues(getMasonryGapStyle(gap.value), attrs.style),
+          "data-masonry": ""
+        },
+        activeDistribution.map(
+          (indices, columnIndex) => h(
+            "div",
+            {
+              key: `column-${columnIndex}`,
+              class: getMasonryColumnClasses(props.columnClassName),
+              style: getMasonryColumnStyle(gap.value),
+              "data-masonry-column": columnIndex
+            },
+            indices.map(
+              (index) => h(
+                "div",
+                {
+                  key: `item-${index}`,
+                  class: getMasonryItemClasses(props.itemClassName),
+                  "data-masonry-item": index,
+                  ref: (el) => setItemRef(index, el)
+                },
+                vnodes[index]
+              )
+            )
+          )
+        )
+      );
+    };
+  }
+});
+var Masonry_default = Masonry;
+
+export {
+  Masonry,
+  Masonry_default
+};

package/dist/{chunk-GS4SV2HK.mjs → chunk-32X54QKW.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-U6OGGZBY.mjs";
 import {
   List
-} from "./chunk-KOG3HKOF.mjs";
+} from "./chunk-6AMWX5K4.mjs";
 import {
   Button
 } from "./chunk-YZBQ6IR7.mjs";

package/dist/chunk-3ONCXHE5.mjs

@@ -0,0 +1,184 @@
+// src/components/Marquee.ts
+import { defineComponent, h, ref } from "vue";
+import {
+  composeComponentClasses,
+  getMarqueeContentClasses,
+  getMarqueeRootClasses,
+  getMarqueeTrackClasses,
+  getMarqueeTrackStyle,
+  injectMarqueeStyles,
+  isMarqueeFocusInside,
+  isMarqueePaused,
+  mergeStyleValues,
+  resolveMarqueeAriaLabel,
+  resolveMarqueeDirection,
+  resolveMarqueePauseOnHover,
+  resolveMarqueeRepeat
+} from "@expcat/tigercat-core";
+var Marquee = defineComponent({
+  name: "TigerMarquee",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Scroll direction
+     * @default 'left'
+     */
+    direction: {
+      type: String,
+      default: "left"
+    },
+    /**
+     * Time for one full loop, in milliseconds
+     * @default 20000
+     */
+    duration: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Pause looping while hovered or while focus is inside the region
+     * @default true
+     */
+    pauseOnHover: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Gap between items and between duplicated copies.
+     * A number is pixels; a string is a CSS length.
+     * @default 16
+     */
+    gap: {
+      type: [Number, String],
+      default: void 0
+    },
+    /**
+     * How many copies of the content to render for a seamless loop.
+     * Values below 2 skip looping and show a single static copy.
+     * @default 2
+     */
+    repeat: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Accessible name for the region
+     * @default 'Scrolling content'
+     */
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    injectMarqueeStyles();
+    const hovered = ref(false);
+    const focused = ref(false);
+    function callAttrHandler(handler, event) {
+      if (typeof handler === "function") {
+        const listener = handler;
+        listener(event);
+      }
+    }
+    return () => {
+      const attrsRecord = attrs;
+      const direction = resolveMarqueeDirection(props.direction);
+      const pauseOnHover = resolveMarqueePauseOnHover(props.pauseOnHover);
+      const copies = resolveMarqueeRepeat(props.repeat);
+      const paused = isMarqueePaused({
+        pauseOnHover,
+        hovered: hovered.value,
+        focused: focused.value
+      });
+      const attrAriaLabel = typeof attrsRecord["aria-label"] === "string" ? attrsRecord["aria-label"] : void 0;
+      const ariaLabel = resolveMarqueeAriaLabel(attrAriaLabel ?? props.ariaLabel);
+      const contentCopies = Array.from({ length: copies }, (_, index) => {
+        const clone = index > 0;
+        return h(
+          "div",
+          {
+            class: getMarqueeContentClasses({ direction, clone }),
+            "data-marquee-content": "",
+            ...clone ? { "data-marquee-clone": "", "aria-hidden": "true" } : {}
+          },
+          slots.default?.()
+        );
+      });
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: composeComponentClasses(
+            getMarqueeRootClasses({
+              direction,
+              pauseOnHover,
+              repeat: copies,
+              className: props.className
+            }),
+            attrsRecord.class
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          role: "region",
+          "aria-label": ariaLabel,
+          "data-marquee": "",
+          "data-marquee-direction": direction,
+          "data-marquee-paused": paused ? "true" : "false",
+          "data-marquee-pause-on-hover": pauseOnHover ? "true" : "false",
+          onMouseenter: (event) => {
+            if (pauseOnHover) hovered.value = true;
+            callAttrHandler(attrsRecord.onMouseenter, event);
+          },
+          onMouseleave: (event) => {
+            if (pauseOnHover) hovered.value = false;
+            callAttrHandler(attrsRecord.onMouseleave, event);
+          },
+          onFocusin: (event) => {
+            if (pauseOnHover) focused.value = true;
+            callAttrHandler(attrsRecord.onFocusin, event);
+          },
+          onFocusout: (event) => {
+            if (pauseOnHover && !isMarqueeFocusInside(event.currentTarget, event.relatedTarget)) {
+              focused.value = false;
+            }
+            callAttrHandler(attrsRecord.onFocusout, event);
+          }
+        },
+        [
+          h(
+            "div",
+            {
+              class: getMarqueeTrackClasses(direction),
+              style: getMarqueeTrackStyle({
+                duration: props.duration,
+                gap: props.gap,
+                repeat: copies
+              }),
+              "data-marquee-track": ""
+            },
+            contentCopies
+          )
+        ]
+      );
+    };
+  }
+});
+var Marquee_default = Marquee;
+
+export {
+  Marquee,
+  Marquee_default
+};

package/dist/{chunk-KOG3HKOF.mjs → chunk-6AMWX5K4.mjs}

@@ -449,10 +449,7 @@ var List = defineComponent({
       const paginationConfig = props.pagination;
       const paginationLabels = getPaginationLabels(mergedLocale.value);
       const localeCode = mergedLocale.value?.locale;
-      const { simple, showQuickJumper } = resolvePaginationDisplayMode(
-        totalPages,
-        paginationConfig
-      );
+      const { simple, showQuickJumper } = resolvePaginationDisplayMode(totalPages, paginationConfig);
       const totalText = paginationConfig.totalText ?? ((value, range) => formatPaginationTotal(paginationLabels.totalText, value, range, localeCode));
       const pageIndicatorText = (current, pages) => formatPaginationPageIndicator(
         paginationLabels.pageIndicatorText,