@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/{chunk-3WM7WK7E.js → chunk-GJFT5IQR.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkBFNHRBWN_js = require('./chunk-BFNHRBWN.js');
+var chunk2WZGK7XJ_js = require('./chunk-2WZGK7XJ.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -9,10 +9,10 @@ var Popover = vue.defineComponent({
   name: "TigerPopover",
   inheritAttrs: false,
   props: {
-    /** Whether the popover is visible (controlled mode) */
-    visible: { type: Boolean, default: void 0 },
-    /** Default visibility (uncontrolled mode) */
-    defaultVisible: { type: Boolean, default: false },
+    /** Whether the popover is open (controlled mode) */
+    open: { type: Boolean, default: void 0 },
+    /** Default open state (uncontrolled mode) */
+    defaultOpen: { type: Boolean, default: false },
     /** Popover title text */
     title: { type: String, default: void 0 },
     /** Popover content text */
@@ -31,7 +31,7 @@ var Popover = vue.defineComponent({
     className: { type: String, default: void 0 },
     style: { type: [String, Object, Array], default: void 0 }
   },
-  emits: ["update:visible", "visible-change"],
+  emits: ["update:open", "open-change"],
   setup(props, { slots, emit, attrs }) {
     const attrsRecord = attrs;
     const {
@@ -41,7 +41,7 @@ var Popover = vue.defineComponent({
       floatingRef,
       floatingStyles,
       triggerHandlers
-    } = chunkBFNHRBWN_js.useFloatingPopup({ props, emit });
+    } = chunk2WZGK7XJ_js.useFloatingPopup({ props, emit });
     const popoverId = createPopoverId();
     const titleId = `${popoverId}-title`;
     const contentId = `${popoverId}-content`;
@@ -82,35 +82,31 @@ var Popover = vue.defineComponent({
             defaultSlot
           ),
           // Floating content
-          currentVisible.value ? vue.h(
-            "div",
-            { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false },
-            [
-              vue.h(
-                "div",
-                {
-                  id: popoverId,
-                  role: "dialog",
-                  "aria-modal": "false",
-                  "aria-labelledby": hasTitle ? titleId : void 0,
-                  "aria-describedby": hasContent ? contentId : void 0,
-                  class: contentClasses.value
-                },
-                [
-                  hasTitle && vue.h(
-                    "div",
-                    { id: titleId, class: tigercatCore.POPOVER_TITLE_CLASSES },
-                    slots.title ? slots.title() : props.title
-                  ),
-                  hasContent && vue.h(
-                    "div",
-                    { id: contentId, class: tigercatCore.POPOVER_TEXT_CLASSES },
-                    slots.content ? slots.content() : props.content
-                  )
-                ].filter(Boolean)
-              )
-            ]
-          ) : null
+          currentVisible.value ? vue.h("div", { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false }, [
+            vue.h(
+              "div",
+              {
+                id: popoverId,
+                role: "dialog",
+                "aria-modal": "false",
+                "aria-labelledby": hasTitle ? titleId : void 0,
+                "aria-describedby": hasContent ? contentId : void 0,
+                class: contentClasses.value
+              },
+              [
+                hasTitle && vue.h(
+                  "div",
+                  { id: titleId, class: tigercatCore.POPOVER_TITLE_CLASSES },
+                  slots.title ? slots.title() : props.title
+                ),
+                hasContent && vue.h(
+                  "div",
+                  { id: contentId, class: tigercatCore.POPOVER_TEXT_CLASSES },
+                  slots.content ? slots.content() : props.content
+                )
+              ].filter(Boolean)
+            )
+          ]) : null
         ]
       );
     };

package/dist/chunk-GMYSHJCU.mjs

@@ -0,0 +1,143 @@
+import { defineComponent, ref, computed, h } from 'vue';
+import { calculateVirtualRange, classNames, getVirtualTableContainerClasses, coerceClassValue, virtualTableHeaderCellClasses, virtualTableHeaderClasses, getVirtualRowKey, virtualTableCellClasses, getVirtualTableRowClasses, virtualTableEmptyClasses, virtualTableLoadingClasses } from '@expcat/tigercat-core';
+
+// src/components/VirtualTable.ts
+var VirtualTable = 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 = ref(null);
+    const scrollTop = ref(0);
+    const range = computed(
+      () => calculateVirtualRange(
+        scrollTop.value,
+        props.height,
+        props.data.length,
+        props.rowHeight,
+        props.overscan
+      )
+    );
+    const visibleData = computed(() => props.data.slice(range.value.start, range.value.end));
+    function onScroll() {
+      if (containerRef.value) {
+        scrollTop.value = containerRef.value.scrollTop;
+      }
+    }
+    const containerClasses = computed(
+      () => classNames(
+        getVirtualTableContainerClasses(props.bordered, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    const selectedSet = computed(() => new Set(props.selectedKeys));
+    return () => {
+      const headerCells = props.columns.map(
+        (col) => h(
+          "th",
+          {
+            key: col.key,
+            class: virtualTableHeaderCellClasses,
+            style: col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0
+          },
+          col.title ?? ""
+        )
+      );
+      const headerRow = h("tr", {}, headerCells);
+      const thead = h(
+        "thead",
+        { class: props.stickyHeader ? virtualTableHeaderClasses : void 0 },
+        [headerRow]
+      );
+      const rows = visibleData.value.map((row, localIdx) => {
+        const globalIdx = range.value.start + localIdx;
+        const key = getVirtualRowKey(
+          row,
+          globalIdx,
+          props.rowKey
+        );
+        const isSelected = selectedSet.value.has(key);
+        const cells = props.columns.map(
+          (col) => h(
+            "td",
+            {
+              key: col.key,
+              class: virtualTableCellClasses
+            },
+            String(row[col.key] ?? "")
+          )
+        );
+        return h(
+          "tr",
+          {
+            key,
+            class: getVirtualTableRowClasses(globalIdx, props.striped, isSelected),
+            onClick: () => {
+              emit("row-click", row, globalIdx);
+              if (props.selectable) emit("select", key, row, globalIdx);
+            }
+          },
+          cells
+        );
+      });
+      const topSpacer = 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 ? h("tr", {
+        key: "__bottom-spacer",
+        style: { height: `${bottomHeight}px` },
+        "aria-hidden": true
+      }) : null;
+      const tbody = h("tbody", {}, [topSpacer, ...rows, bottomSpacer]);
+      const table = h("table", { class: "w-full table-fixed" }, [thead, tbody]);
+      const emptyEl = props.data.length === 0 && !props.loading ? h("div", { class: virtualTableEmptyClasses }, props.emptyText) : null;
+      const loadingEl = props.loading ? h("div", { class: virtualTableLoadingClasses }, "Loading...") : null;
+      return 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;
+
+export { VirtualTable, VirtualTable_default };

package/dist/{chunk-U7MDGSCQ.mjs → chunk-HKYYO326.mjs}

@@ -68,6 +68,15 @@ var Tabs = defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * Whether to lazily render tab panes (only render when first activated)
+     * @default false
+     * @since 0.6.0
+     */
+    lazy: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Additional CSS classes
      */
@@ -132,6 +141,9 @@ var Tabs = defineComponent({
       get destroyInactiveTabPane() {
         return props.destroyInactiveTabPane;
       },
+      get lazy() {
+        return props.lazy;
+      },
       idBase,
       handleTabClick,
       handleTabClose

package/dist/chunk-HRIKUP6R.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Affix.ts
+var Affix = vue.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 = vue.ref(null);
+    const placeholderRef = vue.ref(null);
+    const state = vue.ref({ affixed: false, style: {} });
+    const originalRect = vue.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 = tigercatCore.resolveAffixTarget(props.target);
+      const containerRect = resolved.getRect();
+      const newState = tigercatCore.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;
+    vue.onMounted(() => {
+      const resolved = tigercatCore.resolveAffixTarget(props.target);
+      scrollTarget = resolved.element;
+      scrollTarget.addEventListener("scroll", update, { passive: true });
+      window.addEventListener("resize", update, { passive: true });
+      update();
+    });
+    vue.onBeforeUnmount(() => {
+      scrollTarget?.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    });
+    return () => {
+      const attrsRecord = attrs;
+      const children = slots.default?.();
+      if (state.value.affixed) {
+        return vue.h("div", { ref: placeholderRef }, [
+          vue.h("div", {
+            style: {
+              width: `${originalRect.value?.width ?? 0}px`,
+              height: `${originalRect.value?.height ?? 0}px`
+            }
+          }),
+          vue.h(
+            "div",
+            {
+              ref: wrapperRef,
+              ...attrs,
+              class: tigercatCore.classNames(props.className, tigercatCore.coerceClassValue(attrsRecord.class)),
+              style: tigercatCore.mergeStyleValues(state.value.style, props.style)
+            },
+            children
+          )
+        ]);
+      }
+      return vue.h(
+        "div",
+        {
+          ref: wrapperRef,
+          ...attrs,
+          class: tigercatCore.classNames(props.className, tigercatCore.coerceClassValue(attrsRecord.class)),
+          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style)
+        },
+        children
+      );
+    };
+  }
+});
+var Affix_default = Affix;
+
+exports.Affix = Affix;
+exports.Affix_default = Affix_default;

package/dist/chunk-HSXB2ASL.mjs

@@ -0,0 +1,265 @@
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, h } from 'vue';
+import { imageViewerCounterClasses, imageViewerCloseBtnClasses, imageViewerIcons, classNames, imageViewerNavBtnClasses, imageViewerImgClasses, imageViewerToolbarBtnClasses, imageViewerToolbarClasses, imageViewerBackdropClasses, coerceClassValue, clampZoom, normalizeRotation } from '@expcat/tigercat-core';
+
+// src/components/ImageViewer.ts
+function createSvgIcon(pathD, label) {
+  return h(
+    "svg",
+    {
+      class: "w-5 h-5",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "aria-label": label
+    },
+    [h("path", { d: pathD })]
+  );
+}
+var ImageViewer = defineComponent({
+  name: "TigerImageViewer",
+  inheritAttrs: false,
+  props: {
+    images: {
+      type: Array,
+      required: true
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    currentIndex: {
+      type: Number,
+      default: 0
+    },
+    zoomable: {
+      type: Boolean,
+      default: true
+    },
+    rotatable: {
+      type: Boolean,
+      default: true
+    },
+    showNav: {
+      type: Boolean,
+      default: true
+    },
+    showCounter: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    minZoom: {
+      type: Number,
+      default: 0.5
+    },
+    maxZoom: {
+      type: Number,
+      default: 3
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:open", "update:currentIndex", "close"],
+  setup(props, { emit, attrs }) {
+    const index = ref(props.currentIndex);
+    const zoom = ref(1);
+    const rotation = ref(0);
+    watch(
+      () => props.currentIndex,
+      (val) => {
+        index.value = val;
+      }
+    );
+    const handleClose = () => {
+      emit("update:open", false);
+      emit("close");
+    };
+    const handlePrev = () => {
+      index.value = (index.value - 1 + props.images.length) % props.images.length;
+      zoom.value = 1;
+      rotation.value = 0;
+      emit("update:currentIndex", index.value);
+    };
+    const handleNext = () => {
+      index.value = (index.value + 1) % props.images.length;
+      zoom.value = 1;
+      rotation.value = 0;
+      emit("update:currentIndex", index.value);
+    };
+    const handleZoomIn = () => {
+      zoom.value = clampZoom(zoom.value + 0.25, props.minZoom, props.maxZoom);
+    };
+    const handleZoomOut = () => {
+      zoom.value = clampZoom(zoom.value - 0.25, props.minZoom, props.maxZoom);
+    };
+    const handleRotateLeft = () => {
+      rotation.value = normalizeRotation(rotation.value - 90);
+    };
+    const handleRotateRight = () => {
+      rotation.value = normalizeRotation(rotation.value + 90);
+    };
+    const handleKeydown = (e) => {
+      if (!props.open) return;
+      switch (e.key) {
+        case "Escape":
+          handleClose();
+          break;
+        case "ArrowLeft":
+          handlePrev();
+          break;
+        case "ArrowRight":
+          handleNext();
+          break;
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("keydown", handleKeydown);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("keydown", handleKeydown);
+    });
+    return () => {
+      if (!props.open || props.images.length === 0) return null;
+      const children = [];
+      if (props.showCounter && props.images.length > 1) {
+        children.push(
+          h(
+            "div",
+            { class: imageViewerCounterClasses },
+            `${index.value + 1} / ${props.images.length}`
+          )
+        );
+      }
+      children.push(
+        h(
+          "button",
+          {
+            class: imageViewerCloseBtnClasses,
+            onClick: handleClose,
+            "aria-label": "Close",
+            type: "button"
+          },
+          createSvgIcon(imageViewerIcons.close, "Close")
+        )
+      );
+      if (props.showNav && props.images.length > 1) {
+        children.push(
+          h(
+            "button",
+            {
+              class: classNames(imageViewerNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              "aria-label": "Previous image",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.prev, "Previous")
+          ),
+          h(
+            "button",
+            {
+              class: classNames(imageViewerNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              "aria-label": "Next image",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.next, "Next")
+          )
+        );
+      }
+      children.push(
+        h("img", {
+          class: imageViewerImgClasses,
+          src: props.images[index.value],
+          alt: `Image ${index.value + 1}`,
+          style: {
+            transform: `scale(${zoom.value}) rotate(${rotation.value}deg)`
+          },
+          draggable: false
+        })
+      );
+      const toolbarButtons = [];
+      if (props.zoomable) {
+        toolbarButtons.push(
+          h(
+            "button",
+            {
+              class: imageViewerToolbarBtnClasses,
+              onClick: handleZoomOut,
+              "aria-label": "Zoom out",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.zoomOut, "Zoom out")
+          ),
+          h(
+            "button",
+            {
+              class: imageViewerToolbarBtnClasses,
+              onClick: handleZoomIn,
+              "aria-label": "Zoom in",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.zoomIn, "Zoom in")
+          )
+        );
+      }
+      if (props.rotatable) {
+        toolbarButtons.push(
+          h(
+            "button",
+            {
+              class: imageViewerToolbarBtnClasses,
+              onClick: handleRotateLeft,
+              "aria-label": "Rotate left",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.rotateLeft, "Rotate left")
+          ),
+          h(
+            "button",
+            {
+              class: imageViewerToolbarBtnClasses,
+              onClick: handleRotateRight,
+              "aria-label": "Rotate right",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.rotateRight, "Rotate right")
+          )
+        );
+      }
+      if (toolbarButtons.length > 0) {
+        children.push(h("div", { class: imageViewerToolbarClasses }, toolbarButtons));
+      }
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(
+            imageViewerBackdropClasses,
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Image viewer",
+          onClick: (e) => {
+            if (props.maskClosable && e.target === e.currentTarget) {
+              handleClose();
+            }
+          }
+        },
+        children
+      );
+    };
+  }
+});
+var ImageViewer_default = ImageViewer;
+
+export { ImageViewer, ImageViewer_default };