@expcat/tigercat-vue 0.4.3 → 1.0.4

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;

package/dist/{chunk-7J44XQKW.mjs → chunk-YFD6RD7P.mjs}

@@ -9,10 +9,10 @@ var Drawer = defineComponent({
   inheritAttrs: false,
   props: {
     /**
-     * Whether the drawer is visible
+     * Whether the drawer is open
      * @default false
      */
-    visible: {
+    open: {
       type: Boolean,
       default: false
     },
@@ -32,6 +32,13 @@ var Drawer = defineComponent({
       type: String,
       default: "md"
     },
+    /**
+     * Custom width/height (overrides size)
+     */
+    width: {
+      type: [String, Number],
+      default: void 0
+    },
     /**
      * Drawer title
      */
@@ -125,7 +132,7 @@ var Drawer = defineComponent({
       default: false
     }
   },
-  emits: ["update:visible", "close", "after-enter", "after-leave"],
+  emits: ["update:open", "close", "after-enter", "after-leave"],
   setup(props, { slots, emit, attrs }) {
     const instanceId = ref(createDrawerId());
     const hasBeenOpened = ref(false);
@@ -134,7 +141,7 @@ var Drawer = defineComponent({
     const previousActiveElement = ref(null);
     const titleId = computed(() => `${instanceId.value}-title`);
     const shouldRender = computed(() => {
-      if (props.visible) {
+      if (props.open) {
         hasBeenOpened.value = true;
         return true;
       }
@@ -142,7 +149,7 @@ var Drawer = defineComponent({
       return hasBeenOpened.value;
     });
     const handleClose = () => {
-      emit("update:visible", false);
+      emit("update:open", false);
       emit("close");
     };
     const handleMaskClick = (event) => {
@@ -151,10 +158,10 @@ var Drawer = defineComponent({
         handleClose();
       }
     };
-    const escapeEnabled = computed(() => props.visible);
+    const escapeEnabled = computed(() => props.open);
     let cleanupEscape;
     const handleKeyDown = (event) => {
-      if (event.key === "Tab" && props.visible && dialogRef.value) {
+      if (event.key === "Tab" && props.open && dialogRef.value) {
         const focusables = getFocusableElements(dialogRef.value);
         const result = getFocusTrapNavigation(event, focusables, document.activeElement);
         if (result.shouldHandle && result.next) {
@@ -175,7 +182,7 @@ var Drawer = defineComponent({
       document.removeEventListener("keydown", handleKeyDown);
     });
     watch(
-      () => props.visible,
+      () => props.open,
       async (nextVisible) => {
         if (nextVisible) {
           previousActiveElement.value = captureActiveElement();
@@ -187,7 +194,7 @@ var Drawer = defineComponent({
       }
     );
     watch(
-      () => props.visible,
+      () => props.open,
       (nextVisible, prevVisible, onCleanup) => {
         if (nextVisible === prevVisible || typeof prevVisible === "undefined" && !nextVisible)
           return;
@@ -207,16 +214,20 @@ var Drawer = defineComponent({
       const ariaLabelledby = ariaLabelledbyFromAttrs ?? (props.title || slots.header ? titleId.value : void 0);
       const containerClasses = classNames(
         getDrawerContainerClasses(),
-        !props.visible && "pointer-events-none"
+        !props.open && "pointer-events-none"
       );
-      const maskClasses = getDrawerMaskClasses(props.visible);
+      const maskClasses = getDrawerMaskClasses(props.open);
       const panelClasses = classNames(
-        getDrawerPanelClasses(props.placement, props.visible, props.size),
+        getDrawerPanelClasses(props.placement, props.open, props.size),
         "flex flex-col",
         props.className,
         coerceClassValue(attrs.class)
       );
-      const mergedStyle = mergeStyleValues(attrs.style, props.style);
+      const isHorizontal = props.placement === "left" || props.placement === "right";
+      const widthStyle = props.width ? {
+        [isHorizontal ? "width" : "height"]: typeof props.width === "number" ? `${props.width}px` : props.width
+      } : void 0;
+      const mergedStyle = mergeStyleValues(attrs.style, props.style, widthStyle);
       const headerClasses = getDrawerHeaderClasses();
       const bodyClasses = getDrawerBodyClasses(props.bodyClassName);
       const footerClasses = getDrawerFooterClasses();
@@ -295,8 +306,8 @@ var Drawer = defineComponent({
         {
           class: containerClasses,
           style: { zIndex: props.zIndex },
-          hidden: !props.visible,
-          "aria-hidden": !props.visible ? "true" : void 0,
+          hidden: !props.open,
+          "aria-hidden": !props.open ? "true" : void 0,
           "data-tiger-drawer-root": ""
         },
         [mask, panel]

package/dist/{chunk-MB7W46IY.mjs → chunk-YH7N5GZF.mjs}

@@ -1,4 +1,4 @@
-import { init_ImagePreview, ImagePreview_exports } from './chunk-MMQ34S5M.mjs';
+import { init_ImagePreview, ImagePreview_exports } from './chunk-ZUVR5UZL.mjs';
 import { __toCommonJS } from './chunk-53M2BTB5.mjs';
 import { defineComponent, ref, inject, onMounted, onBeforeUnmount, computed, h } from 'vue';
 import { classNames, imageBaseClasses, imagePreviewCursorClass, coerceClassValue, toCSSSize, mergeStyleValues, getImageImgClasses, imageErrorClasses, imageErrorIconPath, imageLoadingClasses } from '@expcat/tigercat-core';
@@ -22,7 +22,7 @@ var Image = defineComponent({
       default: void 0
     }
   },
-  emits: ["load", "error", "preview-visible-change"],
+  emits: ["load", "error", "preview-open-change", "preview-visible-change"],
   setup(props, { slots, emit, attrs }) {
     const loading = ref(true);
     const error = ref(false);
@@ -156,11 +156,12 @@ var Image = defineComponent({
       const previewEl = !group && previewVisible.value && props.src ? (() => {
         const { ImagePreview } = (init_ImagePreview(), __toCommonJS(ImagePreview_exports));
         return h(ImagePreview, {
-          visible: previewVisible.value,
+          open: previewVisible.value,
           images: [props.src],
           currentIndex: 0,
-          "onUpdate:visible": (val) => {
+          "onUpdate:open": (val) => {
             previewVisible.value = val;
+            emit("preview-open-change", val);
             emit("preview-visible-change", val);
           }
         });

package/dist/chunk-YUEBMBOH.mjs

@@ -0,0 +1,103 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, h } from 'vue';
+import { resolveAffixTarget, mergeStyleValues, classNames, coerceClassValue, calculateAffixState } from '@expcat/tigercat-core';
+
+// src/components/Affix.ts
+var Affix = defineComponent({
+  name: "TigerAffix",
+  inheritAttrs: false,
+  props: {
+    offsetTop: { type: Number, default: 0 },
+    offsetBottom: { type: Number, default: void 0 },
+    target: { type: String, default: void 0 },
+    zIndex: { type: Number, default: 10 },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["change"],
+  setup(props, { slots, emit, attrs }) {
+    const wrapperRef = ref(null);
+    const placeholderRef = ref(null);
+    const state = ref({ affixed: false, style: {} });
+    const originalRect = ref(
+      null
+    );
+    const update = () => {
+      if (!wrapperRef.value) return;
+      const el = state.value.affixed && placeholderRef.value ? placeholderRef.value : wrapperRef.value;
+      const rect = el.getBoundingClientRect();
+      if (!originalRect.value || !state.value.affixed) {
+        originalRect.value = {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        };
+      }
+      const resolved = resolveAffixTarget(props.target);
+      const containerRect = resolved.getRect();
+      const newState = calculateAffixState(
+        originalRect.value,
+        containerRect,
+        props.offsetBottom !== void 0 ? void 0 : props.offsetTop,
+        props.offsetBottom,
+        props.zIndex
+      );
+      if (newState.affixed !== state.value.affixed) {
+        emit("change", newState.affixed);
+      }
+      state.value = newState;
+    };
+    let scrollTarget = null;
+    onMounted(() => {
+      const resolved = resolveAffixTarget(props.target);
+      scrollTarget = resolved.element;
+      scrollTarget.addEventListener("scroll", update, { passive: true });
+      window.addEventListener("resize", update, { passive: true });
+      update();
+    });
+    onBeforeUnmount(() => {
+      scrollTarget?.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    });
+    return () => {
+      const attrsRecord = attrs;
+      const children = slots.default?.();
+      if (state.value.affixed) {
+        return h("div", { ref: placeholderRef }, [
+          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",
+        {
+          ref: wrapperRef,
+          ...attrs,
+          class: classNames(props.className, coerceClassValue(attrsRecord.class)),
+          style: mergeStyleValues(attrsRecord.style, props.style)
+        },
+        children
+      );
+    };
+  }
+});
+var Affix_default = Affix;
+
+export { Affix, Affix_default };

package/dist/{chunk-CWDBL5YC.mjs → chunk-YYRJA6VQ.mjs}

@@ -1,8 +1,8 @@
-import { Table } from './chunk-BS52UCMT.mjs';
-import { Select } from './chunk-GALASVSG.mjs';
+import { Table } from './chunk-HTG6ISVH.mjs';
+import { Select } from './chunk-QNODDATK.mjs';
 import { Pagination } from './chunk-NHCCPMLC.mjs';
-import { Input } from './chunk-VURU7TLN.mjs';
-import { Button } from './chunk-D6MR5YRE.mjs';
+import { Input } from './chunk-2WJADO6O.mjs';
+import { Button } from './chunk-M7JUNLA7.mjs';
 import { defineComponent, ref, getCurrentInstance, watch, computed, h } from 'vue';
 import { classNames, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
 
@@ -104,13 +104,13 @@ var DataTableWithToolbar = defineComponent({
     }
   },
   emits: {
-    "search-change": (value) => true,
-    search: (value) => true,
-    "filters-change": (filters) => true,
-    "bulk-action": (action, keys) => true,
-    "selection-change": (keys) => true,
-    "page-change": (current, pageSize) => true,
-    "page-size-change": (current, pageSize) => true
+    "search-change": (_value) => true,
+    search: (_value) => true,
+    "filters-change": (_filters) => true,
+    "bulk-action": (_action, _keys) => true,
+    "selection-change": (_keys) => true,
+    "page-change": (_current, _pageSize) => true,
+    "page-size-change": (_current, _pageSize) => true
   },
   setup(props, { attrs, emit }) {
     const internalSearch = ref(props.toolbar?.defaultSearchValue ?? "");
@@ -336,6 +336,7 @@ var DataTableWithToolbar = defineComponent({
         },
         [
           renderToolbar(),
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           h(Table, tableProps),
           showPagination ? h(Pagination, {
             ...props.pagination,