@expcat/tigercat-vue 2.0.19 → 2.1.1

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-7W3NALIL.mjs → chunk-3FPS7XVB.mjs}

@@ -114,46 +114,45 @@ var Affix = defineComponent({
     return () => {
       const attrsRecord = attrs;
       const children = slots.default?.();
+      const useBottom = props.offsetBottom !== void 0;
       const sentinel = h("div", {
         ref: sentinelRef,
         "aria-hidden": "true",
         style: { display: "block", width: "0", height: "0", pointerEvents: "none" }
       });
       if (state.value.affixed) {
-        return h("div", [
-          sentinel,
-          // placeholder reserves layout space
-          h("div", {
-            style: {
-              width: `${originalRect.value?.width ?? 0}px`,
-              height: `${originalRect.value?.height ?? 0}px`
-            }
-          }),
-          h(
-            "div",
-            {
-              ref: wrapperRef,
-              ...attrs,
-              class: classNames(props.className, coerceClassValue(attrsRecord.class)),
-              style: mergeStyleValues(state.value.style, props.style)
-            },
-            children
-          )
-        ]);
-      }
-      return h("div", [
-        sentinel,
-        h(
+        const placeholder = h("div", {
+          style: {
+            width: `${originalRect.value?.width ?? 0}px`,
+            height: `${originalRect.value?.height ?? 0}px`
+          }
+        });
+        const content2 = h(
           "div",
           {
             ref: wrapperRef,
             ...attrs,
             class: classNames(props.className, coerceClassValue(attrsRecord.class)),
-            style: mergeStyleValues(attrsRecord.style, props.style)
+            style: mergeStyleValues(state.value.style, props.style)
           },
           children
-        )
-      ]);
+        );
+        return h(
+          "div",
+          useBottom ? [placeholder, content2, sentinel] : [sentinel, placeholder, content2]
+        );
+      }
+      const content = h(
+        "div",
+        {
+          ref: wrapperRef,
+          ...attrs,
+          class: classNames(props.className, coerceClassValue(attrsRecord.class)),
+          style: mergeStyleValues(attrsRecord.style, props.style)
+        },
+        children
+      );
+      return h("div", useBottom ? [content, sentinel] : [sentinel, content]);
     };
   }
 });

package/dist/{chunk-2OI6GWOT.mjs → chunk-3KAHJF7D.mjs}

@@ -243,18 +243,19 @@ var Textarea = defineComponent({
           onBlur: handleBlur
         })
       ];
-      if (props.showCount) {
-        const countText = props.maxLength ? `${currentLength.value}/${props.maxLength}` : `${currentLength.value}`;
-        children.push(
-          h(
-            "div",
-            {
-              class: "mt-1 text-sm text-gray-500 text-right"
-            },
-            countText
-          )
-        );
+      if (!props.showCount) {
+        return children[0];
       }
+      const countText = props.maxLength ? `${currentLength.value}/${props.maxLength}` : `${currentLength.value}`;
+      children.push(
+        h(
+          "div",
+          {
+            class: "mt-1 text-sm text-gray-500 text-right"
+          },
+          countText
+        )
+      );
       return h("div", { class: "w-full" }, children);
     };
   }