@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/chunk-UT6T25YJ.js

@@ -0,0 +1,159 @@
+'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 sentinelRef = vue.ref(null);
+    const state = vue.ref({ affixed: false, style: {} });
+    const originalRect = vue.ref(
+      null
+    );
+    const recalcStyle = (affixed) => {
+      const el = wrapperRef.value;
+      if (!el) return;
+      if (!state.value.affixed) {
+        const rect = el.getBoundingClientRect();
+        originalRect.value = {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        };
+      }
+      if (!originalRect.value) return;
+      const resolved = tigercatCore.resolveAffixTarget(props.target);
+      const containerRect = resolved.getRect();
+      if (!affixed) {
+        if (state.value.affixed) {
+          state.value = { affixed: false, style: {} };
+          emit("change", false);
+        }
+        return;
+      }
+      const next = tigercatCore.calculateAffixState(
+        // Force the calc into the affix branch by lifting the element above the threshold
+        {
+          top: -1,
+          left: originalRect.value.left,
+          width: originalRect.value.width,
+          height: originalRect.value.height
+        },
+        containerRect,
+        props.offsetBottom !== void 0 ? void 0 : props.offsetTop,
+        props.offsetBottom,
+        props.zIndex
+      );
+      if (!next.affixed) {
+        if (state.value.affixed) {
+          state.value = { affixed: false, style: {} };
+          emit("change", false);
+        }
+        return;
+      }
+      const wasAffixed = state.value.affixed;
+      state.value = next;
+      if (!wasAffixed) emit("change", true);
+    };
+    let stopObserver = null;
+    let resizeObserver = null;
+    const setupObserver = () => {
+      stopObserver?.();
+      const sentinel = sentinelRef.value;
+      if (!sentinel) return;
+      const resolved = tigercatCore.resolveAffixTarget(props.target);
+      const root = resolved.element === window ? null : resolved.element;
+      stopObserver = tigercatCore.createAffixObserver(sentinel, {
+        offsetTop: props.offsetTop,
+        offsetBottom: props.offsetBottom,
+        root,
+        onToggle: (affixed) => recalcStyle(affixed)
+      });
+    };
+    const onResize = () => {
+      if (state.value.affixed) recalcStyle(true);
+    };
+    vue.onMounted(() => {
+      setupObserver();
+      if (typeof ResizeObserver !== "undefined" && wrapperRef.value) {
+        resizeObserver = new ResizeObserver(() => onResize());
+        resizeObserver.observe(wrapperRef.value);
+      }
+      window.addEventListener("resize", onResize, { passive: true });
+    });
+    vue.watch(
+      () => [props.target, props.offsetTop, props.offsetBottom],
+      () => setupObserver()
+    );
+    vue.onBeforeUnmount(() => {
+      stopObserver?.();
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", onResize);
+    });
+    return () => {
+      const attrsRecord = attrs;
+      const children = slots.default?.();
+      const sentinel = vue.h("div", {
+        ref: sentinelRef,
+        "aria-hidden": "true",
+        style: { display: "block", width: "0", height: "0", pointerEvents: "none" }
+      });
+      if (state.value.affixed) {
+        return vue.h("div", [
+          sentinel,
+          // placeholder reserves layout space
+          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", [
+        sentinel,
+        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-HK2TAPQX.js → chunk-UUJ7A3CN.js}

@@ -73,6 +73,9 @@ var InputNumber = vue.defineComponent({
   setup(props, { emit, attrs }) {
     const inputRef = vue.ref(null);
     const focused = vue.ref(false);
+    const repeatController = tigercatCore.createRafRepeatActionController();
+    let repeatValue = null;
+    let suppressNextClick = false;
     const displayValue = vue.ref("");
     function toDisplayValue(val) {
       if (val === null || val === void 0) return "";
@@ -115,10 +118,10 @@ var InputNumber = vue.defineComponent({
       emit("change", finalVal);
       displayValue.value = toDisplayValue(finalVal);
     }
-    function handleStep(direction) {
-      if (props.disabled || props.readonly) return;
+    function handleStep(direction, baseValue = currentValue.value) {
+      if (props.disabled || props.readonly) return baseValue ?? null;
       const next = tigercatCore.stepValue(
-        currentValue.value,
+        baseValue,
         props.step,
         direction,
         props.min,
@@ -126,6 +129,35 @@ var InputNumber = vue.defineComponent({
         props.precision
       );
       commitValue(next);
+      return next;
+    }
+    function handleStepClick(direction) {
+      if (suppressNextClick) {
+        suppressNextClick = false;
+        return;
+      }
+      handleStep(direction);
+    }
+    function startStepRepeat(direction) {
+      return (event) => {
+        event.preventDefault();
+        if (props.disabled || props.readonly) return;
+        if (direction === "down" && tigercatCore.isAtMin(currentValue.value, props.min)) return;
+        if (direction === "up" && tigercatCore.isAtMax(currentValue.value, props.max)) return;
+        suppressNextClick = true;
+        repeatValue = currentValue.value;
+        repeatController.start(() => {
+          const baseValue = repeatValue;
+          const nextValue = handleStep(direction, baseValue);
+          repeatValue = nextValue;
+          if (nextValue === baseValue) {
+            repeatController.stop();
+          }
+        });
+      };
+    }
+    function stopStepRepeat() {
+      repeatController.stop();
     }
     function handleInput(e) {
       const target = e.target;
@@ -180,6 +212,7 @@ var InputNumber = vue.defineComponent({
         inputRef.value.focus();
       }
     });
+    vue.onBeforeUnmount(() => repeatController.stop());
     return () => {
       const children = [];
       if (props.controls && props.controlsPosition === "both") {
@@ -192,8 +225,11 @@ var InputNumber = vue.defineComponent({
               "aria-label": "Decrease",
               class: tigercatCore.getInputNumberSideButtonClasses("left", props.disabled || atMin.value),
               disabled: props.disabled || atMin.value,
-              onMousedown: (e) => e.preventDefault(),
-              onClick: () => handleStep("down")
+              onPointerdown: startStepRepeat("down"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
+              onClick: () => handleStepClick("down")
             },
             [
               vue.h(
@@ -244,8 +280,11 @@ var InputNumber = vue.defineComponent({
               "aria-label": "Increase",
               class: tigercatCore.getInputNumberSideButtonClasses("right", props.disabled || atMax.value),
               disabled: props.disabled || atMax.value,
-              onMousedown: (e) => e.preventDefault(),
-              onClick: () => handleStep("up")
+              onPointerdown: startStepRepeat("up"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
+              onClick: () => handleStepClick("up")
             },
             [
               vue.h(
@@ -275,8 +314,11 @@ var InputNumber = vue.defineComponent({
                 "aria-label": "Increase",
                 class: tigercatCore.getInputNumberStepButtonClasses("up", props.disabled || atMax.value),
                 disabled: props.disabled || atMax.value,
-                onMousedown: (e) => e.preventDefault(),
-                onClick: () => handleStep("up")
+                onPointerdown: startStepRepeat("up"),
+                onPointerup: stopStepRepeat,
+                onPointerleave: stopStepRepeat,
+                onPointercancel: stopStepRepeat,
+                onClick: () => handleStepClick("up")
               },
               [
                 vue.h(
@@ -299,8 +341,11 @@ var InputNumber = vue.defineComponent({
                 "aria-label": "Decrease",
                 class: tigercatCore.getInputNumberStepButtonClasses("down", props.disabled || atMin.value),
                 disabled: props.disabled || atMin.value,
-                onMousedown: (e) => e.preventDefault(),
-                onClick: () => handleStep("down")
+                onPointerdown: startStepRepeat("down"),
+                onPointerup: stopStepRepeat,
+                onPointerleave: stopStepRepeat,
+                onPointercancel: stopStepRepeat,
+                onClick: () => handleStepClick("down")
               },
               [
                 vue.h(

package/dist/{chunk-EZ6GXQMP.mjs → chunk-UYN5WLHQ.mjs}

@@ -1,8 +1,7 @@
-import { TabPane } from './chunk-ZXR4DAAO.mjs';
-import { Tabs } from './chunk-HKYYO326.mjs';
-import { List } from './chunk-XNORTTVQ.mjs';
-import { Button } from './chunk-M7JUNLA7.mjs';
-import { Loading } from './chunk-Q6OYCTQO.mjs';
+import { Tabs, TabPane } from './chunk-UCDB56MB.mjs';
+import { List } from './chunk-V667FK4C.mjs';
+import { Button } from './chunk-UM5GGKIX.mjs';
+import { Loading } from './chunk-PCUUTKQZ.mjs';
 import { Text } from './chunk-6V7XCCXN.mjs';
 import { Card } from './chunk-KOTSKHPQ.mjs';
 import { defineComponent, computed, ref, watch, h } from 'vue';
@@ -141,7 +140,7 @@ var NotificationCenter = defineComponent({
       },
       { immediate: true }
     );
-    const currentGroup = computed(() => {
+    computed(() => {
       const groups = resolvedGroups.value;
       if (groups.length === 0) return void 0;
       const activeKey = currentGroupKey.value;
@@ -151,7 +150,6 @@ var NotificationCenter = defineComponent({
       );
       return matchedIndex >= 0 ? groups[matchedIndex] : groups[0];
     });
-    computed(() => currentGroup.value?.items ?? []);
     const readStateOverrides = ref(/* @__PURE__ */ new Map());
     const applyReadOverrides = (items) => {
       if (!props.manageReadState || readStateOverrides.value.size === 0) return items;
@@ -199,6 +197,20 @@ var NotificationCenter = defineComponent({
       });
     };
     const hasUnread = computed(() => effectiveCurrentGroupItems.value.some((item) => !item.read));
+    const groupTabData = computed(
+      () => resolvedGroups.value.map((group, index) => {
+        const effectiveGroup = effectiveGroups.value.find(
+          (eg, ei) => getGroupKey(eg, ei) === getGroupKey(group, index)
+        );
+        const groupItems = effectiveGroup?.items ?? group.items;
+        const unreadCount = groupItems.filter((item) => !item.read).length;
+        const labelBase = group.title || String(group.key ?? index);
+        const label = unreadCount > 0 ? `${labelBase} (${unreadCount})` : labelBase;
+        const filteredItems = filterItems(groupItems);
+        return { key: getGroupKey(group, index), label, filteredItems };
+      })
+    );
+    const filteredFlatItems = computed(() => filterItems(effectiveItems.value));
     const wrapperClasses = computed(
       () => classNames(
         "tiger-notification-center",
@@ -253,7 +265,7 @@ var NotificationCenter = defineComponent({
       return h(
         "div",
         {
-          class: "inline-flex self-start rounded-md border border-[var(--tiger-border,#e5e7eb)] overflow-hidden"
+          class: "inline-flex self-start rounded-[var(--tiger-radius-sm,0.375rem)] border border-[var(--tiger-border,#e5e7eb)] overflow-hidden"
         },
         options.map(
           (option) => h(
@@ -349,30 +361,23 @@ var NotificationCenter = defineComponent({
         onChange: handleGroupChange
       },
       {
-        default: () => resolvedGroups.value.map((group, index) => {
-          const effectiveGroup = effectiveGroups.value.find(
-            (eg, ei) => getGroupKey(eg, ei) === getGroupKey(group, index)
-          );
-          const groupItems = effectiveGroup?.items ?? group.items;
-          const unreadCount = groupItems.filter((item) => !item.read).length;
-          const labelBase = group.title || String(group.key ?? index);
-          const label = unreadCount > 0 ? `${labelBase} (${unreadCount})` : labelBase;
-          return h(
+        default: () => groupTabData.value.map(
+          (tab) => h(
             TabPane,
             {
-              key: getGroupKey(group, index),
-              tabKey: getGroupKey(group, index),
-              label
+              key: tab.key,
+              tabKey: tab.key,
+              label: tab.label
             },
             {
               default: () => h(
                 "div",
                 { class: "max-h-[380px] overflow-y-auto" },
-                renderList(filterItems(groupItems))
+                renderList(tab.filteredItems)
               )
             }
-          );
-        })
+          )
+        )
       }
     );
     return () => {
@@ -404,14 +409,17 @@ var NotificationCenter = defineComponent({
       const content = props.loading ? h("div", { class: "flex items-center justify-center py-12" }, [
         h(Loading, { text: props.loadingText })
       ]) : resolvedGroups.value.length > 0 ? h("div", { class: "-mx-4 -mb-4" }, [renderTabs()]) : h("div", { class: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto" }, [
-        renderList(filterItems(effectiveItems.value))
+        renderList(filteredFlatItems.value)
       ]);
+      const ariaLabel = attrs["aria-label"] ?? (attrs["aria-labelledby"] ? void 0 : props.title);
       return h(
         "div",
         {
           ...attrs,
           class: wrapperClasses.value,
           style: wrapperStyle.value,
+          role: attrs.role ?? "region",
+          "aria-label": ariaLabel,
           "data-tiger-notification-center": true
         },
         [

package/dist/{chunk-KFE7T7CN.js → chunk-V32X2OEO.js}

@@ -9,7 +9,10 @@ var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
 var MESSAGE_CONTAINER_ROOT_ID = `${MESSAGE_CONTAINER_ID}-root`;
 var messageInstances = vue.ref([]);
 var instanceIdCounter = 0;
-var IS_TEST_ENV = typeof process !== "undefined" && process.env?.NODE_ENV === "test";
+var IS_TEST_ENV = (() => {
+  const proc = globalThis.process;
+  return typeof proc !== "undefined" && proc.env?.NODE_ENV === "test";
+})();
 var containerApp = null;
 function getNextInstanceId() {
   return ++instanceIdCounter;

package/dist/{chunk-YFD6RD7P.mjs → chunk-V55ZONWZ.mjs}

@@ -1,6 +1,6 @@
-import { useVueEscapeKey } from './chunk-CU4M5ABS.mjs';
-import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, h, Teleport } from 'vue';
-import { captureActiveElement, focusFirst, restoreFocus, ANIMATION_DURATION_MS, classNames, getDrawerContainerClasses, getDrawerMaskClasses, getDrawerPanelClasses, coerceClassValue, mergeStyleValues, getDrawerHeaderClasses, getDrawerBodyClasses, getDrawerFooterClasses, getDrawerCloseButtonClasses, getDrawerTitleClasses, resolveLocaleText, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, getFocusableElements, getFocusTrapNavigation } from '@expcat/tigercat-core';
+import { useVueBodyScrollLock, useVueFocusTrap, useVueEscapeKey, renderVueBodyTeleport } from './chunk-7RIWAO2A.mjs';
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, h } from 'vue';
+import { captureActiveElement, focusFirst, restoreFocus, ANIMATION_DURATION_MS, classNames, getDrawerContainerClasses, getDrawerMaskClasses, getDrawerPanelClasses, coerceClassValue, mergeStyleValues, getDrawerHeaderClasses, getDrawerBodyClasses, getDrawerFooterClasses, getDrawerCloseButtonClasses, getDrawerTitleClasses, resolveLocaleText, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, shouldCloseOnMaskClick } from '@expcat/tigercat-core';
 
 var drawerIdCounter = 0;
 var createDrawerId = () => `tiger-drawer-${++drawerIdCounter}`;
@@ -153,33 +153,22 @@ var Drawer = defineComponent({
       emit("close");
     };
     const handleMaskClick = (event) => {
-      if (!props.maskClosable) return;
-      if (event.target === event.currentTarget) {
+      if (shouldCloseOnMaskClick(event, props.maskClosable)) {
         handleClose();
       }
     };
     const escapeEnabled = computed(() => props.open);
     let cleanupEscape;
-    const handleKeyDown = (event) => {
-      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) {
-          event.preventDefault();
-          result.next.focus();
-        }
-      }
-    };
+    useVueBodyScrollLock(escapeEnabled);
+    useVueFocusTrap({ enabled: escapeEnabled, containerRef: dialogRef });
     onMounted(() => {
       cleanupEscape = useVueEscapeKey({
         enabled: escapeEnabled,
         onEscape: handleClose
       });
-      document.addEventListener("keydown", handleKeyDown);
     });
     onBeforeUnmount(() => {
       cleanupEscape?.();
-      document.removeEventListener("keydown", handleKeyDown);
     });
     watch(
       () => props.open,
@@ -312,7 +301,7 @@ var Drawer = defineComponent({
         },
         [mask, panel]
       );
-      return h(Teleport, { to: "body", disabled: props.disableTeleport }, [root]);
+      return renderVueBodyTeleport([root], props.disableTeleport);
     };
   }
 });

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

@@ -1,7 +1,7 @@
+import { VirtualList } from './chunk-GWNXDOIG.mjs';
 import { defineComponent, getCurrentInstance, computed, ref, h } from 'vue';
 import { getSpinnerSVG, paginateData, calculatePagination, classNames, getListClasses, listSizeClasses, listGridContainerClasses, getGridColumnClasses, listWrapperClasses, mergeStyleValues, coerceClassValue, listLoadingOverlayClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getListHeaderFooterClasses, listEmptyStateClasses, getLoadingOverlaySpinnerClasses, normalizeSvgAttrs, getListItemClasses, listItemAvatarClasses, listItemTitleClasses, listItemDescriptionClasses, listItemContentClasses, listItemMetaClasses, listItemExtraClasses } from '@expcat/tigercat-core';
 
-// src/components/List.ts
 var spinnerSvg = getSpinnerSVG("spinner");
 var LoadingSpinner = () => {
   return h(
@@ -81,6 +81,35 @@ var List = defineComponent({
     grid: {
       type: Object
     },
+    /**
+     * Enable fixed-height virtual rendering via VirtualList.
+     * Virtual mode applies to the current paginated data window and is ignored for grid lists.
+     */
+    virtual: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Virtual viewport height in pixels.
+     */
+    virtualHeight: {
+      type: Number,
+      default: 400
+    },
+    /**
+     * Fixed virtual item height in pixels.
+     */
+    virtualItemHeight: {
+      type: Number,
+      default: 40
+    },
+    /**
+     * Number of extra virtual items to render above/below the viewport.
+     */
+    virtualOverscan: {
+      type: Number,
+      default: 5
+    },
     /**
      * Function to get item key
      */
@@ -326,6 +355,23 @@ var List = defineComponent({
           items
         );
       }
+      if (props.virtual) {
+        return h(
+          VirtualList,
+          {
+            itemCount: paginatedData.value.length,
+            itemHeight: props.virtualItemHeight,
+            height: props.virtualHeight,
+            overscan: props.virtualOverscan
+          },
+          {
+            default: ({ index }) => {
+              const item = paginatedData.value[index];
+              return item ? renderListItem(item, index) : null;
+            }
+          }
+        );
+      }
       return items;
     }
     function renderPagination() {