@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-RSBAFDUA.mjs → chunk-GWNXDOIG.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, h } from 'vue';
-import { getFixedVirtualRange, classNames, virtualListContainerClasses, coerceClassValue, virtualListInnerClasses } from '@expcat/tigercat-core';
+import { variableSizeStrategy, dynamicSizeStrategy, fixedSizeStrategy, classNames, virtualListContainerClasses, coerceClassValue, virtualListInnerClasses } from '@expcat/tigercat-core';
 
 // src/components/VirtualList.ts
 var VirtualList = defineComponent({
@@ -7,6 +7,15 @@ var VirtualList = defineComponent({
   props: {
     itemCount: { type: Number, default: 0 },
     itemHeight: { type: Number, default: 40 },
+    estimatedItemHeight: { type: Number, default: void 0 },
+    getItemHeight: {
+      type: Function,
+      default: void 0
+    },
+    sizeStrategy: {
+      type: Object,
+      default: void 0
+    },
     height: { type: Number, default: 400 },
     overscan: { type: Number, default: 5 }
   },
@@ -14,11 +23,20 @@ var VirtualList = defineComponent({
   setup(props, { emit, attrs, slots }) {
     const scrollTop = ref(0);
     const containerRef = ref(null);
+    const strategy = computed(() => {
+      if (props.sizeStrategy) return props.sizeStrategy;
+      if (props.getItemHeight) {
+        return variableSizeStrategy(props.getItemHeight, props.itemCount);
+      }
+      if (props.estimatedItemHeight !== void 0) {
+        return dynamicSizeStrategy(props.estimatedItemHeight, props.itemCount);
+      }
+      return fixedSizeStrategy(props.itemHeight);
+    });
     const range = computed(
-      () => getFixedVirtualRange(
+      () => strategy.value.getRange(
         scrollTop.value,
         props.height,
-        props.itemHeight,
         props.itemCount,
         props.overscan
       )
@@ -30,9 +48,11 @@ var VirtualList = defineComponent({
       }
     }
     return () => {
-      const { startIndex, endIndex, offsetTop, totalHeight } = range.value;
+      const { startIndex, endIndex, totalHeight } = range.value;
+      const currentStrategy = strategy.value;
       const items = [];
       for (let i = startIndex; i <= endIndex; i++) {
+        const itemH = currentStrategy.getItemHeight(i);
         const slotContent = slots.default?.({ index: i });
         items.push(
           h(
@@ -40,7 +60,7 @@ var VirtualList = defineComponent({
             {
               key: i,
               style: {
-                height: `${props.itemHeight}px`,
+                height: `${itemH}px`,
                 width: "100%"
               }
             },
@@ -48,6 +68,7 @@ var VirtualList = defineComponent({
           )
         );
       }
+      const offsetTop = startIndex >= 0 ? currentStrategy.getItemOffset(startIndex) : 0;
       return h(
         "div",
         {

package/dist/{chunk-FLAJKB2O.js → chunk-GZK6R2E3.js}

@@ -12,6 +12,12 @@ function useChartInteraction(options) {
   const localHoveredIndex = vue.ref(null);
   const localSelectedIndex = vue.ref(null);
   const tooltipPosition = vue.ref({ x: 0, y: 0 });
+  const tooltipScheduler = tigercatCore.createChartPointerMoveScheduler({
+    onPositionChange: (position) => {
+      tooltipPosition.value = position;
+    }
+  });
+  vue.onScopeDispose(() => tooltipScheduler.cancel());
   const resolvedHoveredIndex = vue.computed(() => {
     const prop = options.hoveredIndexProp?.();
     return prop !== void 0 ? prop : localHoveredIndex.value;
@@ -45,9 +51,10 @@ function useChartInteraction(options) {
     }
   };
   const handleMouseMove = (event) => {
-    tooltipPosition.value = { x: event.clientX, y: event.clientY };
+    tooltipScheduler.schedule({ x: event.clientX, y: event.clientY });
   };
   const handleMouseLeave = () => {
+    tooltipScheduler.cancel();
     if (!unref(options.hoverable)) return;
     if (options.hoveredIndexProp?.() === void 0) {
       localHoveredIndex.value = null;

package/dist/{chunk-T77L326M.mjs → chunk-H2BH6TJN.mjs}

@@ -157,6 +157,51 @@ var ImageCropper = defineComponent({
       document.addEventListener("touchmove", onTouchMove, { passive: false });
       document.addEventListener("touchend", onTouchEnd);
     };
+    const updateCropRect = (nextRect) => {
+      cropRect.value = nextRect;
+      emit("crop-change", cropRect.value);
+    };
+    const getKeyboardDelta = (e) => {
+      const step = e.shiftKey ? 10 : 1;
+      switch (e.key) {
+        case "ArrowLeft":
+          return { dx: -step, dy: 0 };
+        case "ArrowRight":
+          return { dx: step, dy: 0 };
+        case "ArrowUp":
+          return { dx: 0, dy: -step };
+        case "ArrowDown":
+          return { dx: 0, dy: step };
+        default:
+          return null;
+      }
+    };
+    const handleMoveKeyDown = (e) => {
+      const delta = getKeyboardDelta(e);
+      if (!delta) return;
+      e.preventDefault();
+      updateCropRect(
+        moveCropRect(cropRect.value, delta.dx, delta.dy, displayWidth.value, displayHeight.value)
+      );
+    };
+    const handleResizeKeyDown = (e, handle) => {
+      const delta = getKeyboardDelta(e);
+      if (!delta) return;
+      e.preventDefault();
+      updateCropRect(
+        resizeCropRect(
+          cropRect.value,
+          handle,
+          delta.dx,
+          delta.dy,
+          displayWidth.value,
+          displayHeight.value,
+          props.aspectRatio,
+          props.minWidth,
+          props.minHeight
+        )
+      );
+    };
     const getCropResult = () => {
       return new Promise((resolve, reject) => {
         if (!imageRef.value) {
@@ -280,8 +325,12 @@ var ImageCropper = defineComponent({
           width: `${cr.width}px`,
           height: `${cr.height}px`
         },
+        role: "button",
+        tabindex: 0,
+        "aria-label": "Move crop area",
         onMousedown: (e) => handleMouseDown(e, "move"),
-        onTouchstart: (e) => handleTouchStart(e, "move")
+        onTouchstart: (e) => handleTouchStart(e, "move"),
+        onKeydown: handleMoveKeyDown
       });
       const guideLines = props.guides ? [
         // Horizontal lines
@@ -342,8 +391,12 @@ var ImageCropper = defineComponent({
         return h("div", {
           class: getCropperHandleClasses(handle),
           style: pos,
+          role: "button",
+          tabindex: 0,
+          "aria-label": `Resize crop area ${handle}`,
           onMousedown: (e) => handleMouseDown(e, "resize", handle),
-          onTouchstart: (e) => handleTouchStart(e, "resize", handle)
+          onTouchstart: (e) => handleTouchStart(e, "resize", handle),
+          onKeydown: (e) => handleResizeKeyDown(e, handle)
         });
       });
       return h(

package/dist/chunk-H4F4G2E4.mjs

@@ -0,0 +1,74 @@
+import { defineComponent, h } from 'vue';
+import { getSegmentedContainerStyle, classNames, getSegmentedContainerClasses, coerceClassValue, getSegmentedIndicatorStyle, getSegmentedIndicatorClasses, getSegmentedOptionClasses } from '@expcat/tigercat-core';
+
+// src/components/Segmented.ts
+var Segmented = defineComponent({
+  name: "TigerSegmented",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    block: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    function handleSelect(option) {
+      if (option.disabled || props.disabled) return;
+      if (option.value === props.modelValue) return;
+      emit("update:modelValue", option.value);
+      emit("change", option.value);
+    }
+    return () => h(
+      "div",
+      {
+        class: classNames(
+          getSegmentedContainerClasses(props.size, props.block),
+          coerceClassValue(attrs.class)
+        ),
+        style: getSegmentedContainerStyle(props.options.length),
+        role: "radiogroup"
+      },
+      [
+        h("div", {
+          "data-tiger-segmented-indicator": "true",
+          "aria-hidden": "true",
+          class: getSegmentedIndicatorClasses(props.size),
+          style: getSegmentedIndicatorStyle(
+            props.options.findIndex((opt) => opt.value === props.modelValue),
+            props.options.length,
+            props.size
+          )
+        }),
+        ...props.options.map((opt) => {
+          const selected = opt.value === props.modelValue;
+          const isDisabled = !!opt.disabled || props.disabled;
+          return h(
+            "label",
+            {
+              key: opt.value,
+              class: classNames(
+                getSegmentedOptionClasses(props.size, selected, isDisabled),
+                props.block ? "flex-1 text-center" : ""
+              ),
+              role: "radio",
+              "aria-checked": selected,
+              "aria-disabled": isDisabled,
+              onClick: () => handleSelect(opt)
+            },
+            [h("span", null, opt.label)]
+          );
+        })
+      ]
+    );
+  }
+});
+var Segmented_default = Segmented;
+
+export { Segmented, Segmented_default };

package/dist/{chunk-QDFUM2QT.js → chunk-HU2XBA2A.js}

@@ -34,7 +34,7 @@ var DatePicker = vue.defineComponent({
      * Example: 'zh-CN', 'en-US'
      */
     locale: {
-      type: String
+      type: [String, Object]
     },
     /**
      * UI labels for i18n.
@@ -221,7 +221,8 @@ var DatePicker = vue.defineComponent({
     const calendarDays = vue.computed(() => {
       return tigercatCore.getCalendarDays(viewingYear.value, viewingMonth.value);
     });
-    const dayNames = vue.computed(() => tigercatCore.getShortDayNames(props.locale));
+    const localeCode = vue.computed(() => tigercatCore.getDatePickerLocaleCode(props.locale));
+    const dayNames = vue.computed(() => tigercatCore.getShortDayNames(localeCode.value));
     const labels = vue.computed(() => tigercatCore.getDatePickerLabels(props.locale, props.labels));
     const emitValue = (value) => {
       emit("update:modelValue", value);
@@ -534,7 +535,7 @@ var DatePicker = vue.defineComponent({
                 vue.h(
                   "div",
                   { class: tigercatCore.datePickerMonthYearClasses },
-                  tigercatCore.formatMonthYear(viewingYear.value, viewingMonth.value, props.locale)
+                  tigercatCore.formatMonthYear(viewingYear.value, viewingMonth.value, localeCode.value)
                 ),
                 vue.h(
                   "button",

package/dist/{chunk-JM3ZZYTE.mjs → chunk-I34OWAAY.mjs}

@@ -1,6 +1,6 @@
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
-import { defineComponent, computed, h } from 'vue';
-import { getChartInnerRect, valueToGaugeAngle, computeGaugeTicks, createGaugeArcPath, createGaugeNeedlePath, classNames, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { ChartCanvas } from './chunk-W5RZPTFD.mjs';
+import { defineComponent, computed, ref, watch, onBeforeUnmount, h } from 'vue';
+import { getChartInnerRect, getGaugeGradientPrefix, valueToGaugeAngle, createGaugeAnimation, computeGaugeTicks, createGaugeArcPath, createGaugeNeedlePath, classNames, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 
 var GaugeChart = defineComponent({
   name: "TigerGaugeChart",
@@ -23,6 +23,7 @@ var GaugeChart = defineComponent({
     },
     trackColor: { type: String, default: "var(--tiger-border,#e5e7eb)" },
     color: { type: String, default: "var(--tiger-primary,#2563eb)" },
+    gradient: { type: Boolean, default: false },
     // a11y
     title: { type: String },
     desc: { type: String },
@@ -33,9 +34,26 @@ var GaugeChart = defineComponent({
     const radius = computed(() => Math.min(innerRect.value.width, innerRect.value.height) / 2 - 4);
     const cx = computed(() => innerRect.value.width / 2);
     const cy = computed(() => innerRect.value.height / 2);
-    const needleAngle = computed(
+    const gradientPrefix = getGaugeGradientPrefix();
+    const valueGradientId = `${gradientPrefix}-value`;
+    const targetAngle = computed(
       () => valueToGaugeAngle(props.value, props.min, props.max, props.startAngle, props.endAngle)
     );
+    const animatedAngle = ref(targetAngle.value);
+    let animCtrl = null;
+    watch(targetAngle, (to, from) => {
+      animCtrl?.stop();
+      animCtrl = createGaugeAnimation({
+        from,
+        to,
+        onUpdate: (v) => {
+          animatedAngle.value = v;
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      animCtrl?.stop();
+    });
     const ticks = computed(
       () => props.showTicks ? computeGaugeTicks(
         cx.value,
@@ -54,7 +72,7 @@ var GaugeChart = defineComponent({
       const cY = cy.value;
       const aw = props.arcWidth;
       const trackPath = createGaugeArcPath(c, cY, r, props.startAngle, props.endAngle, aw);
-      const valuePath = needleAngle.value > props.startAngle ? createGaugeArcPath(c, cY, r, props.startAngle, needleAngle.value, aw) : null;
+      const valuePath = animatedAngle.value > props.startAngle ? createGaugeArcPath(c, cY, r, props.startAngle, animatedAngle.value, aw) : null;
       const segmentArcs = props.segments?.map((seg, i) => {
         const sStart = valueToGaugeAngle(
           seg.range[0],
@@ -77,7 +95,7 @@ var GaugeChart = defineComponent({
           "stroke-width": 0
         });
       }) ?? [];
-      const needlePath = createGaugeNeedlePath(c, cY, r - aw - 6, needleAngle.value);
+      const needlePath = createGaugeNeedlePath(c, cY, r - aw - 6, animatedAngle.value);
       const formattedValue = props.valueFormatter ? props.valueFormatter(props.value) : `${props.value}`;
       return h(
         ChartCanvas,
@@ -91,6 +109,23 @@ var GaugeChart = defineComponent({
         },
         {
           default: () => [
+            // Gradient defs (opt-in, only when gradient mode is on and value arc renders)
+            props.gradient && !props.segments && valuePath ? h("defs", {}, [
+              h(
+                "linearGradient",
+                {
+                  id: valueGradientId,
+                  x1: 0,
+                  y1: 0,
+                  x2: 0,
+                  y2: 1
+                },
+                [
+                  h("stop", { offset: "0%", "stop-color": props.color, "stop-opacity": 1 }),
+                  h("stop", { offset: "100%", "stop-color": props.color, "stop-opacity": 0.55 })
+                ]
+              )
+            ]) : null,
             // Track
             h("path", {
               d: trackPath,
@@ -101,9 +136,8 @@ var GaugeChart = defineComponent({
             ...props.segments ? segmentArcs : valuePath ? [
               h("path", {
                 d: valuePath,
-                fill: props.color,
-                "stroke-width": 0,
-                style: { transition: "all 0.3s ease-out" }
+                fill: props.gradient ? `url(#${valueGradientId})` : props.color,
+                "stroke-width": 0
               })
             ] : [],
             // Ticks
@@ -134,8 +168,7 @@ var GaugeChart = defineComponent({
             // Needle
             h("path", {
               d: needlePath,
-              fill: "var(--tiger-text,#374151)",
-              style: { transition: "all 0.3s ease-out" }
+              fill: "var(--tiger-text,#374151)"
             }),
             // Center dot
             h("circle", {
@@ -150,7 +183,7 @@ var GaugeChart = defineComponent({
               {
                 x: c,
                 y: cY + r * 0.35,
-                class: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold",
+                class: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold tabular-nums",
                 "text-anchor": "middle",
                 "dominant-baseline": "middle"
               },

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,