@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-TG4PXQKX.mjs → chunk-J73M5UTG.mjs}

@@ -1,7 +1,8 @@
-import { BreadcrumbContextKey } from './chunk-U6WHPSWN.mjs';
-import { defineComponent, inject, computed, h } from 'vue';
-import { getBreadcrumbItemClasses, getBreadcrumbLinkClasses, getBreadcrumbSeparatorClasses, getSeparatorContent } from '@expcat/tigercat-core';
+import { defineComponent, inject, computed, h, provide } from 'vue';
+import { getBreadcrumbItemClasses, getBreadcrumbLinkClasses, getBreadcrumbSeparatorClasses, getSeparatorContent, classNames, breadcrumbContainerClasses } from '@expcat/tigercat-core';
 
+// src/components/Breadcrumb.ts
+var BreadcrumbContextKey = /* @__PURE__ */ Symbol("BreadcrumbContext");
 var BreadcrumbItem = defineComponent({
   name: "TigerBreadcrumbItem",
   props: {
@@ -76,8 +77,8 @@ var BreadcrumbItem = defineComponent({
       return getBreadcrumbSeparatorClasses();
     });
     const separatorContent = computed(() => {
-      const sep = props.separator !== void 0 ? props.separator : breadcrumbContext.separator;
-      return getSeparatorContent(sep);
+      const separator = props.separator !== void 0 ? props.separator : breadcrumbContext.separator;
+      return getSeparatorContent(separator);
     });
     const handleClick = (event) => {
       if (!props.current) {
@@ -132,6 +133,81 @@ var BreadcrumbItem = defineComponent({
     };
   }
 });
-var BreadcrumbItem_default = BreadcrumbItem;
+var Breadcrumb = defineComponent({
+  name: "TigerBreadcrumb",
+  props: {
+    /**
+     * Custom separator between breadcrumb items
+     * @default '/'
+     */
+    separator: {
+      type: String,
+      default: "/"
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Extra content aligned to the end of the breadcrumb
+     */
+    extra: {
+      type: null,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const extraContent = computed(() => {
+      const slotValue = slots.extra?.();
+      if (slotValue && slotValue.length > 0) return slotValue;
+      if (props.extra != null) return props.extra;
+      return null;
+    });
+    const containerClasses = computed(() => {
+      return classNames(breadcrumbContainerClasses, extraContent.value && "w-full", props.className);
+    });
+    provide(BreadcrumbContextKey, {
+      separator: props.separator
+    });
+    return () => {
+      return h(
+        "nav",
+        {
+          "aria-label": "Breadcrumb",
+          ...attrs,
+          class: [containerClasses.value, attrs.class],
+          style: [props.style, attrs.style]
+        },
+        [
+          h(
+            "ol",
+            {
+              class: "flex items-center flex-wrap gap-2"
+            },
+            slots.default?.()
+          ),
+          extraContent.value ? h(
+            "div",
+            {
+              class: "ml-auto flex items-center"
+            },
+            extraContent.value
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var Breadcrumb_default = Breadcrumb;
 
-export { BreadcrumbItem, BreadcrumbItem_default };
+export { Breadcrumb, BreadcrumbContextKey, BreadcrumbItem, Breadcrumb_default };

package/dist/{chunk-RQREJGY3.js → chunk-JACGMHFI.js}

@@ -1,19 +1,19 @@
 'use strict';
 
-var chunkTHEYWGOT_js = require('./chunk-THEYWGOT.js');
+var chunkNJLNZ73T_js = require('./chunk-NJLNZ73T.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
 var DONUT_PALETTE = [
-  "#5470c6",
-  "#91cc75",
-  "#fac858",
-  "#ee6666",
-  "#73c0de",
-  "#3ba272",
-  "#fc8452",
-  "#9a60b4",
-  "#ea7ccc"
+  "var(--tiger-chart-1,#5470c6)",
+  "var(--tiger-chart-2,#91cc75)",
+  "var(--tiger-chart-3,#fac858)",
+  "var(--tiger-chart-4,#ee6666)",
+  "var(--tiger-chart-5,#73c0de)",
+  "var(--tiger-chart-6,#3ba272)",
+  "var(--tiger-chart-1,#fc8452)",
+  "var(--tiger-chart-2,#9a60b4)",
+  "var(--tiger-chart-3,#ea7ccc)"
 ];
 var DonutChart = vue.defineComponent({
   name: "TigerDonutChart",
@@ -133,7 +133,7 @@ var DonutChart = vue.defineComponent({
     },
     borderColor: {
       type: String,
-      default: "#ffffff"
+      default: "var(--tiger-surface,#ffffff)"
     },
     hoverOffset: {
       type: Number,
@@ -157,6 +157,11 @@ var DonutChart = vue.defineComponent({
     animated: {
       type: Boolean,
       default: false
+    },
+    // Visual modes (forwarded to PieChart, opt-in per PR-19k(b6/b7))
+    gradient: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "slice-click", "slice-hover"],
@@ -206,7 +211,7 @@ var DonutChart = vue.defineComponent({
       emit("slice-hover", datum, index);
     };
     return () => {
-      const pie = vue.h(chunkTHEYWGOT_js.PieChart, {
+      const pie = vue.h(chunkNJLNZ73T_js.PieChart, {
         width: props.width,
         height: props.height,
         padding: props.padding,
@@ -224,6 +229,7 @@ var DonutChart = vue.defineComponent({
         borderColor: props.borderColor,
         hoverOffset: props.hoverOffset,
         shadow: props.shadow,
+        gradient: props.gradient,
         hoverable: props.hoverable,
         hoveredIndex: props.hoveredIndex,
         activeOpacity: props.activeOpacity,
@@ -254,7 +260,13 @@ var DonutChart = vue.defineComponent({
             transform: "translate(-50%, -50%)",
             textAlign: "center",
             pointerEvents: "none",
-            lineHeight: "1.3"
+            lineHeight: "1.3",
+            padding: "var(--tiger-chart-donut-center-padding, 0)",
+            borderRadius: "var(--tiger-radius-pill, 9999px)",
+            background: "var(--tiger-chart-donut-center-bg, transparent)",
+            boxShadow: "var(--tiger-chart-donut-center-shadow, none)",
+            backdropFilter: "var(--tiger-chart-donut-center-backdrop, none)",
+            WebkitBackdropFilter: "var(--tiger-chart-donut-center-backdrop, none)"
           },
           "data-donut-center": "true"
         },

package/dist/{chunk-IVTBNUKQ.js → chunk-JDCVS4SJ.js}

@@ -7,15 +7,16 @@ var vue = require('vue');
 function useVueClickOutside({
   enabled,
   containerRef,
+  refs,
   onOutsideClick,
   defer = false
 }) {
   let timer;
   const handler = (event) => {
     if (!enabled.value) return;
-    const container = containerRef.value;
-    if (!container) return;
-    if (tigercatCore.isEventOutside(event, [container])) {
+    const elements = refs?.length ? refs.map((ref2) => ref2?.value) : [containerRef?.value];
+    if (!elements.some(Boolean)) return;
+    if (tigercatCore.isEventOutside(event, elements)) {
       onOutsideClick();
     }
   };
@@ -41,6 +42,39 @@ function useVueEscapeKey({ enabled, onEscape }) {
   document.addEventListener("keydown", handler);
   return () => document.removeEventListener("keydown", handler);
 }
+function useVueBodyScrollLock(enabled) {
+  vue.watch(
+    enabled,
+    (isEnabled, _prevEnabled, onCleanup) => {
+      if (!isEnabled) return;
+      const unlock = tigercatCore.lockBodyScroll();
+      onCleanup(() => unlock());
+    },
+    { immediate: true }
+  );
+}
+function renderVueBodyTeleport(children, disabled = false) {
+  return vue.h(vue.Teleport, { to: "body", disabled }, children);
+}
+function useVueFocusTrap({ enabled, containerRef }) {
+  vue.watch(
+    [enabled, containerRef],
+    ([isEnabled, container], _previous, onCleanup) => {
+      if (!isEnabled || !container) return;
+      const handler = (event) => {
+        const focusables = tigercatCore.getFocusableElements(container);
+        const activeElement = container.ownerDocument?.activeElement ?? document.activeElement;
+        const navigation = tigercatCore.getFocusTrapNavigation(event, focusables, activeElement);
+        if (!navigation.shouldHandle || !navigation.next) return;
+        event.preventDefault();
+        navigation.next.focus();
+      };
+      container.addEventListener("keydown", handler);
+      onCleanup(() => container.removeEventListener("keydown", handler));
+    },
+    { immediate: true, flush: "post" }
+  );
+}
 function useVueFloating(options) {
   const {
     referenceRef,
@@ -113,6 +147,9 @@ function useVueFloating(options) {
   };
 }
 
+exports.renderVueBodyTeleport = renderVueBodyTeleport;
+exports.useVueBodyScrollLock = useVueBodyScrollLock;
 exports.useVueClickOutside = useVueClickOutside;
 exports.useVueEscapeKey = useVueEscapeKey;
 exports.useVueFloating = useVueFloating;
+exports.useVueFocusTrap = useVueFocusTrap;

package/dist/{chunk-BFS7XO3E.js → chunk-JFIVDZFK.js}

@@ -161,12 +161,16 @@ var TreeSelect = vue.defineComponent({
       emit("change", val);
     }
     function handleKeyDown(e) {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        closeDropdown();
-      } else if ((e.key === "Enter" || e.key === " ") && !isOpen.value) {
-        e.preventDefault();
+      const action = tigercatCore.getPickerTriggerKeyAction(e.key, isOpen.value);
+      if (action === "none") return;
+      e.preventDefault();
+      if (action === "toggle") {
+        if (isOpen.value) closeDropdown();
+        else openDropdown();
+      } else if (action === "open") {
         openDropdown();
+      } else if (action === "close") {
+        closeDropdown();
       }
     }
     function handleClickOutside(e) {
@@ -193,10 +197,7 @@ var TreeSelect = vue.defineComponent({
           {
             type: "button",
             class: tigercatCore.getTreeSelectTriggerClasses(props.size, props.disabled, isOpen.value),
-            role: "combobox",
-            "aria-expanded": String(isOpen.value),
-            "aria-haspopup": "listbox",
-            "aria-controls": isOpen.value ? listboxId : void 0,
+            ...tigercatCore.getPickerComboboxAria({ expanded: isOpen.value, listboxId }),
             disabled: props.disabled,
             onClick: toggleDropdown,
             onKeydown: handleKeyDown
@@ -234,8 +235,7 @@ var TreeSelect = vue.defineComponent({
         isOpen.value ? vue.h(
           "div",
           {
-            id: listboxId,
-            role: "listbox",
+            ...tigercatCore.getPickerListboxAria({ id: listboxId }),
             class: tigercatCore.treeSelectDropdownClasses
           },
           [
@@ -259,9 +259,7 @@ var TreeSelect = vue.defineComponent({
                 "div",
                 {
                   key: node.key,
-                  role: "option",
-                  "aria-selected": selected,
-                  "aria-disabled": node.disabled,
+                  ...tigercatCore.getPickerOptionAria({ selected, disabled: !!node.disabled }),
                   class: tigercatCore.getTreeSelectNodeClasses(selected, !!node.disabled, props.size),
                   style: { paddingLeft: `${indent + 8}px` },
                   onClick: (e) => {

package/dist/{chunk-UPPRQ3ZS.js → chunk-JKZ5ZRDG.js}

@@ -36,42 +36,34 @@ var Watermark = vue.defineComponent({
   },
   setup(props, { slots, attrs }) {
     const base64 = vue.ref();
+    const wrapperRef = vue.ref(null);
+    let renderController;
     const resolvedFont = vue.computed(() => tigercatCore.resolveWatermarkFont(props.font));
     const generate = () => {
-      if (props.image) {
-        const img = new Image();
-        img.crossOrigin = "anonymous";
-        img.onload = () => {
-          const canvas = document.createElement("canvas");
-          const dpr = window.devicePixelRatio || 1;
-          canvas.width = props.width * dpr;
-          canvas.height = props.height * dpr;
-          const ctx = canvas.getContext("2d");
-          if (!ctx) return;
-          ctx.scale(dpr, dpr);
-          ctx.translate(props.width / 2, props.height / 2);
-          ctx.rotate(props.rotate * Math.PI / 180);
-          ctx.translate(-props.width / 2, -props.height / 2);
-          ctx.drawImage(img, 0, 0, props.width, props.height);
-          base64.value = canvas.toDataURL();
-        };
-        img.src = props.image;
-      } else {
-        base64.value = tigercatCore.renderWatermarkCanvas({
+      renderController?.render();
+    };
+    vue.onMounted(() => {
+      if (!wrapperRef.value) return;
+      renderController = tigercatCore.createWatermarkRenderController({
+        getRenderOptions: () => ({
           content: props.content,
+          image: props.image,
           width: props.width,
           height: props.height,
           rotate: props.rotate,
           font: resolvedFont.value
-        });
-      }
-    };
-    vue.onMounted(generate);
+        }),
+        onRender: (base64Url) => {
+          base64.value = base64Url;
+        }
+      });
+      renderController.observe(wrapperRef.value);
+      renderController.render();
+    });
     vue.watch(
       () => [props.content, props.image, props.width, props.height, props.rotate, props.font],
       generate
     );
-    const wrapperRef = vue.ref(null);
     let observer;
     vue.onMounted(() => {
       if (typeof MutationObserver === "undefined" || !wrapperRef.value) return;
@@ -87,7 +79,11 @@ var Watermark = vue.defineComponent({
       });
       observer.observe(wrapperRef.value, { childList: true });
     });
-    vue.onBeforeUnmount(() => observer?.disconnect());
+    vue.onBeforeUnmount(() => {
+      observer?.disconnect();
+      renderController?.disconnect();
+      renderController = void 0;
+    });
     const overlayStyle = vue.computed(
       () => tigercatCore.getWatermarkOverlayStyle({
         base64Url: base64.value,

package/dist/{chunk-7VSD3NPI.js → chunk-JTTSX3NM.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
+var chunk5436FG3B_js = require('./chunk-5436FG3B.js');
+var chunkJDCVS4SJ_js = require('./chunk-JDCVS4SJ.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -199,29 +200,19 @@ var Modal = vue.defineComponent({
       emit("update:open", false);
     };
     const handleMaskClick = (event) => {
-      if (props.maskClosable && event.target === event.currentTarget) {
+      if (tigercatCore.shouldCloseOnMaskClick(event, props.maskClosable)) {
         handleClose();
       }
     };
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape" && props.open) {
-        handleClose();
-        return;
-      }
-      if (event.key === "Tab" && props.open && dialogRef.value) {
-        const focusables = tigercatCore.getFocusableElements(dialogRef.value);
-        const result = tigercatCore.getFocusTrapNavigation(event, focusables, document.activeElement);
-        if (result.shouldHandle && result.next) {
-          event.preventDefault();
-          result.next.focus();
-        }
-      }
-    };
+    const overlayOpen = vue.computed(() => props.open);
+    let cleanupEscape;
+    chunkJDCVS4SJ_js.useVueBodyScrollLock(overlayOpen);
+    chunkJDCVS4SJ_js.useVueFocusTrap({ enabled: overlayOpen, containerRef: dialogRef });
     vue.onMounted(() => {
-      document.addEventListener("keydown", handleKeyDown);
+      cleanupEscape = chunkJDCVS4SJ_js.useVueEscapeKey({ enabled: overlayOpen, onEscape: handleClose });
     });
     vue.onBeforeUnmount(() => {
-      document.removeEventListener("keydown", handleKeyDown);
+      cleanupEscape?.();
     });
     vue.watch(
       () => props.open,
@@ -322,7 +313,7 @@ var Modal = vue.defineComponent({
         slots.footer({ ok: handleOk, cancel: handleClose })
       ) : props.showDefaultFooter ? vue.h("div", { class: tigercatCore.modalFooterClasses, "data-tiger-modal-footer": "" }, [
         vue.h(
-          chunkU7CCKZAG_js.Button,
+          chunk5436FG3B_js.Button,
           { variant: "secondary", onClick: handleClose },
           {
             default: () => tigercatCore.resolveLocaleText(
@@ -334,7 +325,7 @@ var Modal = vue.defineComponent({
           }
         ),
         vue.h(
-          chunkU7CCKZAG_js.Button,
+          chunk5436FG3B_js.Button,
           { onClick: handleOk },
           {
             default: () => tigercatCore.resolveLocaleText(
@@ -387,7 +378,7 @@ var Modal = vue.defineComponent({
           )
         ]
       );
-      return vue.h(vue.Teleport, { to: "body", disabled: props.disableTeleport }, [renderedWrapper]);
+      return chunkJDCVS4SJ_js.renderVueBodyTeleport([renderedWrapper], props.disableTeleport);
     };
   }
 });

package/dist/{chunk-MX2KCWM2.js → chunk-K3CIXMN4.js}

@@ -47,6 +47,7 @@ var Splitter = vue.defineComponent({
     const draggingIndex = vue.ref(-1);
     const startPos = vue.ref(0);
     const startSizes = vue.ref([]);
+    let dragSession = null;
     vue.watch(
       () => props.sizes,
       (newSizes) => {
@@ -78,19 +79,41 @@ var Splitter = vue.defineComponent({
     );
     const getMins = () => paneSizes.value.map(() => props.min);
     const getMaxes = () => paneSizes.value.map(() => props.max);
+    const cleanupDragSession = () => {
+      dragSession?.dispose();
+      dragSession = null;
+    };
     const onMouseDown = (index, e) => {
       if (props.disabled) return;
       e.preventDefault();
+      cleanupDragSession();
       draggingIndex.value = index;
       startPos.value = props.direction === "horizontal" ? e.clientX : e.clientY;
       startSizes.value = [...paneSizes.value];
       emit("resize-start", { index, sizes: [...paneSizes.value] });
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      dragSession = tigercatCore.createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget?.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          applyDragResize(currentX, currentY);
+        },
+        onEnd: ({ currentX, currentY }) => {
+          applyDragResize(currentX, currentY);
+          if (draggingIndex.value >= 0) {
+            emit("resize-end", {
+              index: draggingIndex.value,
+              sizes: [...paneSizes.value]
+            });
+          }
+          draggingIndex.value = -1;
+          dragSession = null;
+        }
+      });
     };
-    const onMouseMove = (e) => {
+    const applyDragResize = (currentX, currentY) => {
       if (draggingIndex.value < 0) return;
-      const currentPos = props.direction === "horizontal" ? e.clientX : e.clientY;
+      const currentPos = props.direction === "horizontal" ? currentX : currentY;
       const delta = currentPos - startPos.value;
       const newSizes = tigercatCore.resizePanes(
         startSizes.value,
@@ -105,20 +128,8 @@ var Splitter = vue.defineComponent({
         emit("resize", { index: draggingIndex.value, sizes: newSizes });
       }
     };
-    const onMouseUp = () => {
-      if (draggingIndex.value >= 0) {
-        emit("resize-end", {
-          index: draggingIndex.value,
-          sizes: [...paneSizes.value]
-        });
-      }
-      draggingIndex.value = -1;
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    };
     vue.onBeforeUnmount(() => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+      cleanupDragSession();
     });
     return () => {
       const children = slots.default?.() || [];

package/dist/{chunk-RDV4BMTK.js → chunk-KOI6AQ5H.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var chunk6DP7XE77_js = require('./chunk-6DP7XE77.js');
+var chunkCRGGJKV2_js = require('./chunk-CRGGJKV2.js');
 var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/ImageGroup.ts
-chunk6DP7XE77_js.init_ImagePreview();
 var IMAGE_GROUP_INJECTION_KEY = "tiger-image-group";
 var ImageGroup = vue.defineComponent({
   name: "TigerImageGroup",
@@ -18,15 +17,12 @@ var ImageGroup = vue.defineComponent({
     const previewIndex = vue.ref(0);
     const context = {
       register(src) {
-        const idx = images.value.length;
-        images.value.push(src);
-        return idx;
+        const result = tigercatCore.registerImageGroupItem(images.value, src);
+        images.value = result.items;
+        return result.index;
       },
       unregister(src) {
-        const idx = images.value.indexOf(src);
-        if (idx > -1) {
-          images.value.splice(idx, 1);
-        }
+        images.value = tigercatCore.unregisterImageGroupItem(images.value, src);
       },
       openPreview(index) {
         if (!props.preview) return;
@@ -41,7 +37,7 @@ var ImageGroup = vue.defineComponent({
     });
     return () => {
       const children = slots.default?.();
-      const preview = props.preview ? vue.h(chunk6DP7XE77_js.ImagePreview, {
+      const preview = props.preview ? vue.h(chunkCRGGJKV2_js.ImagePreview, {
         open: previewVisible.value,
         images: images.value,
         currentIndex: previewIndex.value,
@@ -53,7 +49,7 @@ var ImageGroup = vue.defineComponent({
           previewIndex.value = val;
         }
       }) : null;
-      return vue.h("div", { class: "tiger-image-group", role: "group" }, [children, preview]);
+      return vue.h("div", { class: tigercatCore.getImageGroupClasses(), role: "group" }, [children, preview]);
     };
   }
 });

package/dist/{chunk-AAO2B46J.js → chunk-KVJKG4D3.js}

@@ -1,9 +1,9 @@
 'use strict';
 
+var chunkEHBPMUT2_js = require('./chunk-EHBPMUT2.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/List.ts
 var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
 var LoadingSpinner = () => {
   return vue.h(
@@ -83,6 +83,35 @@ var List = vue.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
      */
@@ -328,6 +357,23 @@ var List = vue.defineComponent({
           items
         );
       }
+      if (props.virtual) {
+        return vue.h(
+          chunkEHBPMUT2_js.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() {