@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/{chunk-HXLCWM2J.mjs → chunk-I6E3GY64.mjs}

@@ -1,6 +1,6 @@
 import { createFilledIcon } from './chunk-2TNZ4JNT.mjs';
 import { defineComponent, ref, computed, watch, nextTick, onBeforeUnmount, h } from 'vue';
-import { CalendarIconPath, CloseIconPath, ChevronLeftIconPath, ChevronRightIconPath, parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, classNames, datePickerBaseClasses, coerceClassValue, mergeStyleValues, getDatePickerInputClasses, getDatePickerIconButtonClasses, datePickerInputWrapperClasses, datePickerClearButtonClasses, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, datePickerMonthYearClasses, formatMonthYear, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterButtonClasses, datePickerFooterClasses, isDateInRange } from '@expcat/tigercat-core';
+import { CalendarIconPath, CloseIconPath, ChevronLeftIconPath, ChevronRightIconPath, parseDate, formatDate, getCalendarDays, getDatePickerLocaleCode, getShortDayNames, getDatePickerLabels, classNames, datePickerBaseClasses, coerceClassValue, mergeStyleValues, getDatePickerInputClasses, getDatePickerIconButtonClasses, datePickerInputWrapperClasses, datePickerClearButtonClasses, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, datePickerMonthYearClasses, formatMonthYear, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterButtonClasses, datePickerFooterClasses, isDateInRange } from '@expcat/tigercat-core';
 
 var CalendarIcon = createFilledIcon(CalendarIconPath, "w-5 h-5");
 var CloseIcon = createFilledIcon(CloseIconPath, "w-4 h-4");
@@ -32,7 +32,7 @@ var DatePicker = defineComponent({
      * Example: 'zh-CN', 'en-US'
      */
     locale: {
-      type: String
+      type: [String, Object]
     },
     /**
      * UI labels for i18n.
@@ -219,7 +219,8 @@ var DatePicker = defineComponent({
     const calendarDays = computed(() => {
       return getCalendarDays(viewingYear.value, viewingMonth.value);
     });
-    const dayNames = computed(() => getShortDayNames(props.locale));
+    const localeCode = computed(() => getDatePickerLocaleCode(props.locale));
+    const dayNames = computed(() => getShortDayNames(localeCode.value));
     const labels = computed(() => getDatePickerLabels(props.locale, props.labels));
     const emitValue = (value) => {
       emit("update:modelValue", value);
@@ -532,7 +533,7 @@ var DatePicker = defineComponent({
                 h(
                   "div",
                   { class: datePickerMonthYearClasses },
-                  formatMonthYear(viewingYear.value, viewingMonth.value, props.locale)
+                  formatMonthYear(viewingYear.value, viewingMonth.value, localeCode.value)
                 ),
                 h(
                   "button",

package/dist/{chunk-MYFQ3B2D.mjs → chunk-IFD7PZDO.mjs}

@@ -1,9 +1,9 @@
-import { useChartInteraction } from './chunk-DU2NXX75.mjs';
-import { ChartLegend } from './chunk-F5HOHSFH.mjs';
+import { useChartInteraction } from './chunk-N4GS2LSN.mjs';
+import { ChartLegend } from './chunk-VVS2CQS4.mjs';
 import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
-import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
+import { ChartTooltip } from './chunk-OK4PVFQG.mjs';
 import { ChartAxis } from './chunk-ZWVA7HT3.mjs';
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { ChartCanvas } from './chunk-W5RZPTFD.mjs';
 import { ChartGrid } from './chunk-MI6TL3CQ.mjs';
 import { defineComponent, computed, h } from 'vue';
 import { getBarGradientPrefix, getChartInnerRect, createBandScale, getNumberExtent, createLinearScale, resolveChartPalette, clampBarWidth, ensureBarMinHeight, buildChartLegendItems, resolveChartTooltipContent, defaultXYTooltipFormatter, getBarValueLabelY, barValueLabelInsideClasses, barValueLabelClasses, classNames, barAnimatedTransition } from '@expcat/tigercat-core';
@@ -400,7 +400,7 @@ var BarChart = defineComponent({
                       "transition-[opacity,filter] duration-200",
                       (props.hoverable || props.selectable) && "cursor-pointer hover:brightness-110"
                     ),
-                    style: props.animated ? barAnimatedTransition : void 0,
+                    style: props.animated ? `rx:var(--tiger-chart-bar-radius,${props.barRadius}px);ry:var(--tiger-chart-bar-radius,${props.barRadius}px);${barAnimatedTransition}` : `rx:var(--tiger-chart-bar-radius,${props.barRadius}px);ry:var(--tiger-chart-bar-radius,${props.barRadius}px)`,
                     tabindex: props.selectable ? 0 : void 0,
                     role: props.selectable ? "button" : "img",
                     "aria-label": bar.datum.label ?? String(bar.datum.x),

package/dist/{chunk-NHCCPMLC.mjs → chunk-IV4HFG36.mjs}

@@ -1,5 +1,5 @@
-import { defineComponent, computed, ref, h } from 'vue';
-import { getPaginationLabels, getTotalPages, validateCurrentPage, getPageRange, classNames, getPaginationContainerClasses, coerceClassValue, mergeStyleValues, defaultTotalText, getTotalTextClasses, getPaginationButtonBaseClasses, getSizeTextClasses, getPageNumbers, getPaginationEllipsisClasses, formatPageAriaLabel, getPaginationButtonActiveClasses, getPageSizeSelectorClasses, getQuickJumperInputClasses } from '@expcat/tigercat-core';
+import { defineComponent, ref, watch, computed, onBeforeUnmount, h } from 'vue';
+import { getImmediateTigerLocale, isLazyTigerLocale, resolveTigerLocale, getPaginationLabels, createPaginationIdleValidationScheduler, getTotalPages, validateCurrentPage, getPageRange, classNames, getPaginationContainerClasses, coerceClassValue, mergeStyleValues, defaultTotalText, getTotalTextClasses, getPaginationButtonBaseClasses, getSizeTextClasses, getPageNumbers, getPaginationEllipsisClasses, formatPageAriaLabel, getPaginationButtonActiveClasses, getPageSizeSelectorClasses, getQuickJumperInputClasses, getValidatedPaginationJumperValue, getPaginationJumperPage } from '@expcat/tigercat-core';
 
 // src/components/Pagination.ts
 var Pagination = defineComponent({
@@ -148,6 +148,10 @@ var Pagination = defineComponent({
      * Locale configuration for i18n support
      */
     locale: {
+      type: [Object, Function],
+      default: void 0
+    },
+    quickJumperValidation: {
       type: Object,
       default: void 0
     }
@@ -157,10 +161,46 @@ var Pagination = defineComponent({
     const attrsRecord = attrs;
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
-    const labels = computed(() => getPaginationLabels(props.locale));
+    const resolvedLocale = ref(
+      getImmediateTigerLocale(props.locale)
+    );
+    let localeResolveId = 0;
+    let disposed = false;
+    watch(
+      () => props.locale,
+      (locale) => {
+        const resolveId = ++localeResolveId;
+        const immediateLocale = getImmediateTigerLocale(locale);
+        resolvedLocale.value = immediateLocale;
+        if (!isLazyTigerLocale(locale)) return;
+        resolveTigerLocale(locale).then((nextLocale) => {
+          if (!disposed && resolveId === localeResolveId) {
+            resolvedLocale.value = nextLocale;
+          }
+        }).catch(() => {
+          if (!disposed && resolveId === localeResolveId) {
+            resolvedLocale.value = immediateLocale;
+          }
+        });
+      },
+      { immediate: true }
+    );
+    const labels = computed(() => getPaginationLabels(resolvedLocale.value));
     const internalCurrent = ref(props.defaultCurrent);
     const internalPageSize = ref(props.defaultPageSize);
     const quickJumperValue = ref("");
+    let quickJumperValidationScheduler = createPaginationIdleValidationScheduler(props.quickJumperValidation);
+    watch(
+      () => props.quickJumperValidation,
+      (options) => {
+        quickJumperValidationScheduler.cancel();
+        quickJumperValidationScheduler = createPaginationIdleValidationScheduler(options);
+      }
+    );
+    onBeforeUnmount(() => {
+      disposed = true;
+      quickJumperValidationScheduler.cancel();
+    });
     const currentPage = computed(() => {
       return props.current !== void 0 ? props.current : internalCurrent.value;
     });
@@ -210,12 +250,19 @@ var Pagination = defineComponent({
       }
     };
     const handleQuickJumperSubmit = () => {
-      const page = parseInt(quickJumperValue.value, 10);
-      if (!isNaN(page)) {
+      quickJumperValidationScheduler.cancel();
+      const page = getPaginationJumperPage(quickJumperValue.value, totalPages.value);
+      if (page !== null) {
         handlePageChange(page);
       }
       quickJumperValue.value = "";
     };
+    const handleQuickJumperInput = (value) => {
+      quickJumperValue.value = value;
+      quickJumperValidationScheduler.schedule(() => {
+        quickJumperValue.value = getValidatedPaginationJumperValue(value, totalPages.value);
+      });
+    };
     const handleQuickJumperKeypress = (event) => {
       if (event.key === "Enter") {
         handleQuickJumperSubmit();
@@ -278,11 +325,7 @@ var Pagination = defineComponent({
         getPageNumbers(page, pages, props.showLessItems).forEach((pageNum) => {
           if (pageNum === "...") {
             elements.push(
-              h(
-                "span",
-                { class: getPaginationEllipsisClasses(size), "aria-hidden": "true" },
-                "..."
-              )
+              h("span", { class: getPaginationEllipsisClasses(size), "aria-hidden": "true" }, "...")
             );
           } else {
             const isActive = pageNum === page;
@@ -340,9 +383,7 @@ var Pagination = defineComponent({
       }
       if (props.showQuickJumper) {
         const sizeText = getSizeTextClasses(size);
-        elements.push(
-          h("span", { class: classNames("ml-2", sizeText) }, labels.value.jumpToText)
-        );
+        elements.push(h("span", { class: classNames("ml-2", sizeText) }, labels.value.jumpToText));
         elements.push(
           h("input", {
             type: "number",
@@ -350,7 +391,7 @@ var Pagination = defineComponent({
             disabled: props.disabled,
             value: quickJumperValue.value,
             onInput: (e) => {
-              quickJumperValue.value = e.target.value;
+              handleQuickJumperInput(e.target.value);
             },
             onKeydown: handleQuickJumperKeypress,
             min: 1,

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);
     };
   }
 });