@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/chunk-XFZZWZ6Q.js

@@ -0,0 +1,149 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Resizable.ts
+var Resizable = vue.defineComponent({
+  name: "TigerResizable",
+  props: {
+    defaultWidth: { type: Number, default: void 0 },
+    defaultHeight: { type: Number, default: void 0 },
+    minWidth: { type: Number, default: 0 },
+    minHeight: { type: Number, default: 0 },
+    maxWidth: { type: Number, default: void 0 },
+    maxHeight: { type: Number, default: void 0 },
+    handles: {
+      type: Array,
+      default: () => [...tigercatCore.defaultResizeHandles]
+    },
+    axis: {
+      type: String,
+      default: "both"
+    },
+    disabled: { type: Boolean, default: false },
+    lockAspectRatio: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["resize-start", "resize", "resize-end"],
+  setup(props, { slots, emit, attrs }) {
+    const width = vue.ref(props.defaultWidth);
+    const height = vue.ref(props.defaultHeight);
+    const draggingHandle = vue.ref(null);
+    const startMouseX = vue.ref(0);
+    const startMouseY = vue.ref(0);
+    const startWidth = vue.ref(0);
+    const startHeight = vue.ref(0);
+    const containerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.resizableBaseClasses,
+        "group/resizable",
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = vue.computed(() => {
+      const s = {};
+      if (width.value != null) s.width = `${width.value}px`;
+      if (height.value != null) s.height = `${height.value}px`;
+      return s;
+    });
+    const onMouseDown = (handle, e) => {
+      if (props.disabled) return;
+      e.preventDefault();
+      draggingHandle.value = handle;
+      startMouseX.value = e.clientX;
+      startMouseY.value = e.clientY;
+      startWidth.value = width.value ?? 0;
+      startHeight.value = height.value ?? 0;
+      emit("resize-start", {
+        width: startWidth.value,
+        height: startHeight.value,
+        handle,
+        deltaX: 0,
+        deltaY: 0
+      });
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+    const onMouseMove = (e) => {
+      if (!draggingHandle.value) return;
+      const mouseDeltaX = e.clientX - startMouseX.value;
+      const mouseDeltaY = e.clientY - startMouseY.value;
+      const { deltaWidth, deltaHeight } = tigercatCore.calculateResizeDelta(
+        draggingHandle.value,
+        mouseDeltaX,
+        mouseDeltaY,
+        props.axis
+      );
+      let newW = startWidth.value + deltaWidth;
+      let newH = startHeight.value + deltaHeight;
+      if (props.lockAspectRatio) {
+        const ar = tigercatCore.applyAspectRatio(newW, newH, startWidth.value, startHeight.value);
+        newW = ar.width;
+        newH = ar.height;
+      }
+      const clamped = tigercatCore.clampDimensions(
+        newW,
+        newH,
+        props.minWidth,
+        props.minHeight,
+        props.maxWidth,
+        props.maxHeight
+      );
+      width.value = clamped.width;
+      height.value = clamped.height;
+      emit("resize", {
+        width: clamped.width,
+        height: clamped.height,
+        handle: draggingHandle.value,
+        deltaX: clamped.width - startWidth.value,
+        deltaY: clamped.height - startHeight.value
+      });
+    };
+    const onMouseUp = () => {
+      if (draggingHandle.value) {
+        emit("resize-end", {
+          width: width.value ?? 0,
+          height: height.value ?? 0,
+          handle: draggingHandle.value,
+          deltaX: (width.value ?? 0) - startWidth.value,
+          deltaY: (height.value ?? 0) - startHeight.value
+        });
+      }
+      draggingHandle.value = null;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    });
+    return () => {
+      const handleNodes = props.handles.map(
+        (pos) => vue.h("div", {
+          class: tigercatCore.getResizableHandleClasses(pos, draggingHandle.value === pos, props.disabled),
+          "data-handle": pos,
+          onMousedown: (e) => onMouseDown(pos, e)
+        })
+      );
+      return vue.h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: { ...containerStyle.value, ...props.style },
+          "data-resizable": ""
+        },
+        [...slots.default?.() || [], ...handleNodes]
+      );
+    };
+  }
+});
+var Resizable_default = Resizable;
+
+exports.Resizable = Resizable;
+exports.Resizable_default = Resizable_default;

package/dist/{chunk-WEFQCJAG.js → chunk-XGXGAK27.js}

@@ -32,6 +32,14 @@ var Card = vue.defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * Card layout direction
+     * @default 'vertical'
+     */
+    direction: {
+      type: String,
+      default: "vertical"
+    },
     /**
      * Cover image URL
      */
@@ -65,9 +73,11 @@ var Card = vue.defineComponent({
     const cardClasses = vue.computed(
       () => tigercatCore.classNames(
         tigercatCore.getCardClasses(props.variant, props.hoverable),
+        tigercatCore.cardDirectionClasses[props.direction],
         !props.cover && tigercatCore.cardSizeClasses[props.size]
       )
     );
+    const isHorizontal = vue.computed(() => props.direction === "horizontal");
     const sectionSizeClass = vue.computed(() => props.cover ? tigercatCore.cardSizeClasses[props.size] : void 0);
     const getSectionClasses = (baseClasses) => tigercatCore.classNames(baseClasses, sectionSizeClass.value);
     return () => {
@@ -86,19 +96,27 @@ var Card = vue.defineComponent({
             vue.h("img", {
               src: props.cover,
               alt: props.coverAlt,
-              class: tigercatCore.cardCoverClasses
+              class: tigercatCore.classNames(
+                tigercatCore.cardCoverClasses,
+                isHorizontal.value && "h-full w-48 object-cover"
+              )
             })
           ]) : null,
-          slots.header ? vue.h("div", { class: getSectionClasses(tigercatCore.cardHeaderClasses) }, slots.header()) : null,
-          slots.default ? vue.h("div", { class: sectionSizeClass.value }, slots.default()) : null,
-          slots.footer ? vue.h("div", { class: getSectionClasses(tigercatCore.cardFooterClasses) }, slots.footer()) : null,
-          slots.actions ? vue.h(
-            "div",
-            {
-              class: getSectionClasses(tigercatCore.classNames(tigercatCore.cardActionsClasses, tigercatCore.cardFooterClasses))
-            },
-            slots.actions()
-          ) : null
+          (() => {
+            const bodyChildren = [
+              slots.header ? vue.h("div", { class: getSectionClasses(tigercatCore.cardHeaderClasses) }, slots.header()) : null,
+              slots.default ? vue.h("div", { class: sectionSizeClass.value }, slots.default()) : null,
+              slots.footer ? vue.h("div", { class: getSectionClasses(tigercatCore.cardFooterClasses) }, slots.footer()) : null,
+              slots.actions ? vue.h(
+                "div",
+                {
+                  class: getSectionClasses(tigercatCore.classNames(tigercatCore.cardActionsClasses, tigercatCore.cardFooterClasses))
+                },
+                slots.actions()
+              ) : null
+            ];
+            return isHorizontal.value ? vue.h("div", { class: tigercatCore.cardHorizontalBodyClasses }, bodyChildren) : bodyChildren;
+          })()
         ]
       );
     };

package/dist/{chunk-EVOLGCGW.mjs → chunk-XNORTTVQ.mjs}

@@ -108,9 +108,16 @@ var List = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    /**
+     * Whether list items are draggable for reorder
+     */
+    draggable: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["item-click", "page-change"],
+  emits: ["item-click", "page-change", "reorder"],
   setup(props, { emit, slots, attrs }) {
     const instance = getCurrentInstance();
     const hasItemClickListener = computed(() => {
@@ -124,6 +131,28 @@ var List = defineComponent({
     const currentPageSize = ref(
       props.pagination && typeof props.pagination === "object" ? props.pagination.pageSize || 10 : 10
     );
+    const dragIndex = ref(null);
+    function handleDragStart(index) {
+      dragIndex.value = index;
+    }
+    function handleDragOver(e) {
+      e.preventDefault();
+    }
+    function handleDrop(index) {
+      if (dragIndex.value === null || dragIndex.value === index) {
+        dragIndex.value = null;
+        return;
+      }
+      const from = dragIndex.value;
+      dragIndex.value = null;
+      const items = [...props.dataSource];
+      const [moved] = items.splice(from, 1);
+      items.splice(index, 0, moved);
+      emit("reorder", items, from, index);
+    }
+    function handleDragEnd() {
+      dragIndex.value = null;
+    }
     const paginatedData = computed(() => {
       if (props.pagination === false) {
         return props.dataSource;
@@ -200,9 +229,20 @@ var List = defineComponent({
     function getItemAttrs(item, index, itemClasses) {
       const key = getItemKey(item, index);
       const clickable = hasItemClickListener.value;
+      const draggableAttrs = props.draggable ? {
+        draggable: true,
+        onDragstart: () => handleDragStart(index),
+        onDragover: handleDragOver,
+        onDrop: () => handleDrop(index),
+        onDragend: handleDragEnd
+      } : {};
       return {
         key,
-        class: classNames(itemClasses, clickable && "cursor-pointer"),
+        class: classNames(
+          itemClasses,
+          clickable && "cursor-pointer",
+          props.draggable && "cursor-grab"
+        ),
         role: "listitem",
         tabindex: clickable ? 0 : void 0,
         onClick: () => handleItemClick(item, index),
@@ -211,7 +251,8 @@ var List = defineComponent({
             e.preventDefault();
             handleItemClick(item, index);
           }
-        } : void 0
+        } : void 0,
+        ...draggableAttrs
       };
     }
     function renderListItem(item, index) {

package/dist/{chunk-TRDG56CB.mjs → chunk-XP5M2GK7.mjs}

@@ -1,5 +1,5 @@
-import { defineComponent, computed, provide, inject } from 'vue';
-import { mergeTigerLocale } from '@expcat/tigercat-core';
+import { defineComponent, computed, watch, provide, inject } from 'vue';
+import { mergeTigerLocale, ThemeManager } from '@expcat/tigercat-core';
 
 // src/components/ConfigProvider.ts
 var TigerConfigKey = /* @__PURE__ */ Symbol("TigerConfig");
@@ -15,15 +15,39 @@ var ConfigProvider = defineComponent({
     locale: {
       type: Object,
       default: void 0
+    },
+    theme: {
+      type: String,
+      default: void 0
+    },
+    colorScheme: {
+      type: String,
+      default: void 0
     }
   },
   setup(props, { slots }) {
     const parent = useTigerConfig();
     const merged = computed(() => {
       return {
-        locale: mergeTigerLocale(parent.value.locale, props.locale)
+        locale: mergeTigerLocale(parent.value.locale, props.locale),
+        theme: props.theme ?? parent.value.theme,
+        colorScheme: props.colorScheme ?? parent.value.colorScheme
       };
     });
+    watch(
+      () => merged.value.theme,
+      (name) => {
+        if (name) ThemeManager.setTheme(name);
+      },
+      { immediate: true }
+    );
+    watch(
+      () => merged.value.colorScheme,
+      (scheme) => {
+        if (scheme) ThemeManager.setColorScheme(scheme);
+      },
+      { immediate: true }
+    );
     provide(TigerConfigKey, merged);
     return () => slots.default?.();
   }

package/dist/chunk-XQKIMRRF.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/VirtualTable.ts
+var VirtualTable = vue.defineComponent({
+  name: "TigerVirtualTable",
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    rowHeight: { type: Number, default: 48 },
+    height: { type: Number, default: 400 },
+    overscan: { type: Number, default: 5 },
+    stickyHeader: { type: Boolean, default: true },
+    rowKey: {
+      type: [String, Function],
+      default: void 0
+    },
+    loading: { type: Boolean, default: false },
+    emptyText: { type: String, default: "No data" },
+    selectable: { type: Boolean, default: false },
+    selectedKeys: {
+      type: Array,
+      default: () => []
+    },
+    striped: { type: Boolean, default: false },
+    bordered: { type: Boolean, default: false },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["row-click", "select"],
+  setup(props, { emit, attrs }) {
+    const containerRef = vue.ref(null);
+    const scrollTop = vue.ref(0);
+    const range = vue.computed(
+      () => tigercatCore.calculateVirtualRange(
+        scrollTop.value,
+        props.height,
+        props.data.length,
+        props.rowHeight,
+        props.overscan
+      )
+    );
+    const visibleData = vue.computed(() => props.data.slice(range.value.start, range.value.end));
+    function onScroll() {
+      if (containerRef.value) {
+        scrollTop.value = containerRef.value.scrollTop;
+      }
+    }
+    const containerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.getVirtualTableContainerClasses(props.bordered, props.className),
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const selectedSet = vue.computed(() => new Set(props.selectedKeys));
+    return () => {
+      const headerCells = props.columns.map(
+        (col) => vue.h(
+          "th",
+          {
+            key: col.key,
+            class: tigercatCore.virtualTableHeaderCellClasses,
+            style: col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0
+          },
+          col.title ?? ""
+        )
+      );
+      const headerRow = vue.h("tr", {}, headerCells);
+      const thead = vue.h(
+        "thead",
+        { class: props.stickyHeader ? tigercatCore.virtualTableHeaderClasses : void 0 },
+        [headerRow]
+      );
+      const rows = visibleData.value.map((row, localIdx) => {
+        const globalIdx = range.value.start + localIdx;
+        const key = tigercatCore.getVirtualRowKey(
+          row,
+          globalIdx,
+          props.rowKey
+        );
+        const isSelected = selectedSet.value.has(key);
+        const cells = props.columns.map(
+          (col) => vue.h(
+            "td",
+            {
+              key: col.key,
+              class: tigercatCore.virtualTableCellClasses
+            },
+            String(row[col.key] ?? "")
+          )
+        );
+        return vue.h(
+          "tr",
+          {
+            key,
+            class: tigercatCore.getVirtualTableRowClasses(globalIdx, props.striped, isSelected),
+            onClick: () => {
+              emit("row-click", row, globalIdx);
+              if (props.selectable) emit("select", key, row, globalIdx);
+            }
+          },
+          cells
+        );
+      });
+      const topSpacer = vue.h("tr", {
+        key: "__top-spacer",
+        style: { height: `${range.value.offsetTop}px` },
+        "aria-hidden": true
+      });
+      const bottomHeight = range.value.totalHeight - range.value.end * props.rowHeight;
+      const bottomSpacer = bottomHeight > 0 ? vue.h("tr", {
+        key: "__bottom-spacer",
+        style: { height: `${bottomHeight}px` },
+        "aria-hidden": true
+      }) : null;
+      const tbody = vue.h("tbody", {}, [topSpacer, ...rows, bottomSpacer]);
+      const table = vue.h("table", { class: "w-full table-fixed" }, [thead, tbody]);
+      const emptyEl = props.data.length === 0 && !props.loading ? vue.h("div", { class: tigercatCore.virtualTableEmptyClasses }, props.emptyText) : null;
+      const loadingEl = props.loading ? vue.h("div", { class: tigercatCore.virtualTableLoadingClasses }, "Loading...") : null;
+      return vue.h(
+        "div",
+        {
+          ref: containerRef,
+          class: containerClasses.value,
+          style: { height: `${props.height}px` },
+          onScroll,
+          role: "grid",
+          "aria-rowcount": props.data.length
+        },
+        [table, emptyEl, loadingEl]
+      );
+    };
+  }
+});
+var VirtualTable_default = VirtualTable;
+
+exports.VirtualTable = VirtualTable;
+exports.VirtualTable_default = VirtualTable_default;

package/dist/chunk-XTMGF5YP.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/PrintLayout.ts
+var PrintLayout = vue.defineComponent({
+  name: "TigerPrintLayout",
+  inheritAttrs: false,
+  props: {
+    pageSize: {
+      type: String,
+      default: "A4"
+    },
+    orientation: {
+      type: String,
+      default: "portrait"
+    },
+    showHeader: {
+      type: Boolean,
+      default: false
+    },
+    showFooter: {
+      type: Boolean,
+      default: false
+    },
+    headerText: {
+      type: String,
+      default: void 0
+    },
+    footerText: {
+      type: String,
+      default: void 0
+    },
+    showPageBreaks: {
+      type: Boolean,
+      default: true
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const classes = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.getPrintLayoutClasses(props.pageSize, props.orientation, props.className),
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    return () => {
+      const children = [];
+      if (props.showHeader && (props.headerText || slots.header)) {
+        children.push(
+          vue.h(
+            "div",
+            { class: tigercatCore.printLayoutHeaderClasses },
+            slots.header ? slots.header() : props.headerText
+          )
+        );
+      }
+      children.push(vue.h("div", { class: "tiger-print-content" }, slots.default?.()));
+      if (props.showFooter && (props.footerText || slots.footer)) {
+        children.push(
+          vue.h(
+            "div",
+            { class: tigercatCore.printLayoutFooterClasses },
+            slots.footer ? slots.footer() : props.footerText
+          )
+        );
+      }
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          class: classes.value
+        },
+        children
+      );
+    };
+  }
+});
+var PrintPageBreak = vue.defineComponent({
+  name: "TigerPrintPageBreak",
+  setup(_, { attrs }) {
+    return () => vue.h("div", {
+      ...attrs,
+      class: tigercatCore.classNames(tigercatCore.printLayoutPageBreakClasses, "print:break-before-page"),
+      "aria-hidden": "true"
+    });
+  }
+});
+var PrintLayout_default = PrintLayout;
+
+exports.PrintLayout = PrintLayout;
+exports.PrintLayout_default = PrintLayout_default;
+exports.PrintPageBreak = PrintPageBreak;