@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/{chunk-HXLCWM2J.mjs → chunk-3A7H2CTW.mjs}

@@ -1,7 +1,47 @@
-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 {
+  createFilledIcon
+} from "./chunk-2TNZ4JNT.mjs";
 
+// src/components/DatePicker.ts
+import { defineComponent, computed, ref, nextTick, h, watch, onBeforeUnmount } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  parseDate,
+  formatDate,
+  formatMonthYear,
+  isSameDay,
+  isDateInRange,
+  getCalendarDays,
+  getShortDayNames,
+  isToday as isTodayUtil,
+  normalizeDate,
+  datePickerBaseClasses,
+  datePickerInputWrapperClasses,
+  getDatePickerInputClasses,
+  getDatePickerIconButtonClasses,
+  datePickerCalendarClasses,
+  datePickerMobileWheelClasses,
+  datePickerMobileWheelGridClasses,
+  datePickerMobileWheelSelectClasses,
+  datePickerCalendarHeaderClasses,
+  datePickerNavButtonClasses,
+  datePickerMonthYearClasses,
+  datePickerCalendarGridClasses,
+  datePickerDayNameClasses,
+  getDatePickerDayCellClasses,
+  datePickerClearButtonClasses,
+  datePickerFooterClasses,
+  datePickerFooterButtonClasses,
+  CalendarIconPath,
+  CloseIconPath,
+  ChevronLeftIconPath,
+  ChevronRightIconPath,
+  getDatePickerLocaleCode,
+  getDatePickerLabels,
+  getLocaleDirection
+} from "@expcat/tigercat-core";
 var CalendarIcon = createFilledIcon(CalendarIconPath, "w-5 h-5");
 var CloseIcon = createFilledIcon(CloseIconPath, "w-4 h-4");
 var ChevronLeftIcon = createFilledIcon(ChevronLeftIconPath, "w-5 h-5");
@@ -32,7 +72,7 @@ var DatePicker = defineComponent({
      * Example: 'zh-CN', 'en-US'
      */
     locale: {
-      type: String
+      type: [String, Object]
     },
     /**
      * UI labels for i18n.
@@ -172,9 +212,11 @@ var DatePicker = defineComponent({
   setup(props, { emit, attrs }) {
     const isOpen = ref(false);
     const calendarRef = ref(null);
+    const mobileCalendarRef = ref(null);
     const inputWrapperRef = ref(null);
     const inputRef = ref(null);
     const activeDateIso = ref(null);
+    const activeRangePart = ref("start");
     const pendingFocusIso = ref(null);
     const restoreFocusEl = ref(null);
     const isRangeMode = computed(() => props.range);
@@ -190,6 +232,7 @@ var DatePicker = defineComponent({
     });
     const minDateParsed = computed(() => parseDate(props.minDate));
     const maxDateParsed = computed(() => parseDate(props.maxDate));
+    const localeCode = computed(() => getDatePickerLocaleCode(props.locale));
     const viewingMonth = ref(
       (selectedDate.value ?? selectedRange.value[0])?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth()
     );
@@ -198,11 +241,11 @@ var DatePicker = defineComponent({
     );
     const displayValue = computed(() => {
       if (!isRangeMode.value) {
-        return selectedDate.value ? formatDate(selectedDate.value, props.format) : "";
+        return selectedDate.value ? formatDate(selectedDate.value, props.format, localeCode.value) : "";
       }
       const [start, end] = selectedRange.value;
-      const startText = start ? formatDate(start, props.format) : "";
-      const endText = end ? formatDate(end, props.format) : "";
+      const startText = start ? formatDate(start, props.format, localeCode.value) : "";
+      const endText = end ? formatDate(end, props.format, localeCode.value) : "";
       if (!startText && !endText) return "";
       if (startText && endText) return `${startText} - ${endText}`;
       return startText ? `${startText} - ` : ` - ${endText}`;
@@ -219,8 +262,25 @@ var DatePicker = defineComponent({
     const calendarDays = computed(() => {
       return getCalendarDays(viewingYear.value, viewingMonth.value);
     });
-    const dayNames = computed(() => getShortDayNames(props.locale));
+    const dayNames = computed(() => getShortDayNames(localeCode.value));
+    const isRtl = computed(() => getLocaleDirection(localeCode.value) === "rtl");
+    const previousMonthIcon = computed(() => isRtl.value ? ChevronRightIcon : ChevronLeftIcon);
+    const nextMonthIcon = computed(() => isRtl.value ? ChevronLeftIcon : ChevronRightIcon);
     const labels = computed(() => getDatePickerLabels(props.locale, props.labels));
+    const mobileDate = computed(() => {
+      if (!isRangeMode.value) return selectedDate.value ?? normalizeDate(/* @__PURE__ */ new Date());
+      const [start, end] = selectedRange.value;
+      return (activeRangePart.value === "start" ? start : end) ?? start ?? end ?? normalizeDate(/* @__PURE__ */ new Date());
+    });
+    const mobileYears = computed(() => {
+      const baseYear = mobileDate.value.getFullYear();
+      return Array.from({ length: 101 }, (_, index) => baseYear - 50 + index);
+    });
+    const mobileDays = computed(() => {
+      const date = mobileDate.value;
+      const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+      return Array.from({ length: daysInMonth }, (_, index) => index + 1);
+    });
     const emitValue = (value) => {
       emit("update:modelValue", value);
       emit("change", value);
@@ -260,6 +320,7 @@ var DatePicker = defineComponent({
       const target = restoreFocusEl.value ?? inputRef.value;
       if (!target) return;
       if (typeof target.focus === "function") {
+        ;
         target.focus();
       }
     };
@@ -380,6 +441,31 @@ var DatePicker = defineComponent({
       }
       emitValue([start, normalizedDate < start ? start : normalizedDate]);
     }
+    function commitMobileDate(date) {
+      const normalized = normalizeDate(date);
+      if (!isDateInRange(normalized, minDateParsed.value, maxDateParsed.value)) return;
+      viewingYear.value = normalized.getFullYear();
+      viewingMonth.value = normalized.getMonth();
+      if (!isRangeMode.value) {
+        emitValue(normalized);
+        return;
+      }
+      const [start, end] = selectedRange.value;
+      if (activeRangePart.value === "start") {
+        emitValue([normalized, end && end < normalized ? normalized : end]);
+        activeRangePart.value = "end";
+        return;
+      }
+      emitValue([start ?? normalized, start && normalized < start ? start : normalized]);
+    }
+    function updateMobileDate(part, value) {
+      const base = mobileDate.value;
+      const nextYear = part === "year" ? value : base.getFullYear();
+      const nextMonth2 = part === "month" ? value : base.getMonth();
+      const maxDay = new Date(nextYear, nextMonth2 + 1, 0).getDate();
+      const nextDay = Math.min(part === "day" ? value : base.getDate(), maxDay);
+      commitMobileDate(new Date(nextYear, nextMonth2, nextDay));
+    }
     function clearDate(event) {
       event.stopPropagation();
       emitValue(!isRangeMode.value ? null : [null, null]);
@@ -410,7 +496,7 @@ var DatePicker = defineComponent({
       return date.getMonth() === viewingMonth.value;
     }
     function handleClickOutside(event) {
-      if (calendarRef.value && inputWrapperRef.value && !calendarRef.value.contains(event.target) && !inputWrapperRef.value.contains(event.target)) {
+      if (inputWrapperRef.value && !calendarRef.value?.contains(event.target) && !mobileCalendarRef.value?.contains(event.target) && !inputWrapperRef.value.contains(event.target)) {
         closeCalendar();
       }
     }
@@ -506,6 +592,86 @@ var DatePicker = defineComponent({
             ]
           ),
           // Calendar dropdown
+          isOpen.value && h(
+            "div",
+            {
+              ref: mobileCalendarRef,
+              class: datePickerMobileWheelClasses,
+              role: "group",
+              "aria-label": labels.value.calendar
+            },
+            [
+              isRangeMode.value ? h("div", { class: "mb-3 flex items-center gap-2" }, [
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    class: datePickerFooterButtonClasses,
+                    "aria-selected": activeRangePart.value === "start",
+                    onClick: () => activeRangePart.value = "start"
+                  },
+                  "Start"
+                ),
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    class: datePickerFooterButtonClasses,
+                    "aria-selected": activeRangePart.value === "end",
+                    onClick: () => activeRangePart.value = "end"
+                  },
+                  "End"
+                )
+              ]) : null,
+              h("div", { class: datePickerMobileWheelGridClasses }, [
+                h(
+                  "select",
+                  {
+                    class: datePickerMobileWheelSelectClasses,
+                    value: mobileDate.value.getFullYear(),
+                    "aria-label": "Year",
+                    onChange: (event) => updateMobileDate("year", Number(event.target.value))
+                  },
+                  mobileYears.value.map((year) => h("option", { value: year }, year))
+                ),
+                h(
+                  "select",
+                  {
+                    class: datePickerMobileWheelSelectClasses,
+                    value: mobileDate.value.getMonth(),
+                    "aria-label": "Month",
+                    onChange: (event) => updateMobileDate("month", Number(event.target.value))
+                  },
+                  Array.from(
+                    { length: 12 },
+                    (_, month) => h("option", { value: month }, month + 1)
+                  )
+                ),
+                h(
+                  "select",
+                  {
+                    class: datePickerMobileWheelSelectClasses,
+                    value: mobileDate.value.getDate(),
+                    "aria-label": "Day",
+                    onChange: (event) => updateMobileDate("day", Number(event.target.value))
+                  },
+                  mobileDays.value.map((day) => h("option", { value: day }, day))
+                )
+              ]),
+              h("div", { class: "mt-4 flex justify-end gap-2" }, [
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    class: datePickerFooterButtonClasses,
+                    "aria-label": `Mobile ${labels.value.ok}`,
+                    onClick: closeCalendar
+                  },
+                  labels.value.ok
+                )
+              ])
+            ]
+          ),
           isOpen.value && h(
             "div",
             {
@@ -527,12 +693,12 @@ var DatePicker = defineComponent({
                     onClick: previousMonth,
                     "aria-label": labels.value.previousMonth
                   },
-                  ChevronLeftIcon
+                  previousMonthIcon.value
                 ),
                 h(
                   "div",
                   { class: datePickerMonthYearClasses },
-                  formatMonthYear(viewingYear.value, viewingMonth.value, props.locale)
+                  formatMonthYear(viewingYear.value, viewingMonth.value, localeCode.value)
                 ),
                 h(
                   "button",
@@ -542,7 +708,7 @@ var DatePicker = defineComponent({
                     onClick: nextMonth,
                     "aria-label": labels.value.nextMonth
                   },
-                  ChevronRightIcon
+                  nextMonthIcon.value
                 )
               ]),
               // Day names header
@@ -582,7 +748,7 @@ var DatePicker = defineComponent({
                       const isInRange = isRangeMode.value && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
                       const isSelected = !isRangeMode.value ? selectedDate.value ? isSameDay(date, selectedDate.value) : false : isRangeStart || isRangeEnd;
                       const isCurrentMonthDay = isCurrentMonth(date);
-                      const isTodayDay = isToday(date);
+                      const isTodayDay = isTodayUtil(date);
                       const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
                       const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
                       const iso = formatDate(date, "yyyy-MM-dd");
@@ -666,4 +832,7 @@ var DatePicker = defineComponent({
 });
 var DatePicker_default = DatePicker;
 
-export { DatePicker, DatePicker_default };
+export {
+  DatePicker,
+  DatePicker_default
+};

package/dist/chunk-3G4VPV4D.mjs

@@ -1,7 +1,20 @@
-import { defineComponent, ref, computed, h } from 'vue';
-import { classNames, tagBaseClasses, getTagVariantClasses, tagSizeClasses, defaultTagThemeColors, tagCloseButtonBaseClasses, mergeStyleValues, coerceClassValue, icon24ViewBox, icon24StrokeWidth, tagCloseIconPath, icon24PathStrokeLinejoin, icon24PathStrokeLinecap } from '@expcat/tigercat-core';
-
 // src/components/Tag.ts
+import { defineComponent, computed, h, ref } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getTagVariantClasses,
+  defaultTagThemeColors,
+  icon24PathStrokeLinecap,
+  icon24PathStrokeLinejoin,
+  icon24StrokeWidth,
+  icon24ViewBox,
+  mergeStyleValues,
+  tagBaseClasses,
+  tagSizeClasses,
+  tagCloseButtonBaseClasses,
+  tagCloseIconPath
+} from "@expcat/tigercat-core";
 var CloseIcon = () => h(
   "svg",
   {
@@ -129,4 +142,7 @@ var Tag = defineComponent({
 });
 var Tag_default = Tag;
 
-export { Tag, Tag_default };
+export {
+  Tag,
+  Tag_default
+};

package/dist/chunk-3MC45EXP.mjs

@@ -1,7 +1,13 @@
-import { defineComponent, computed, h } from 'vue';
-import { generateQRMatrix, classNames, qrcodeContainerClasses, coerceClassValue, qrcodeOverlayClasses, qrcodeExpiredTextClasses, qrcodeRefreshClasses } from '@expcat/tigercat-core';
-
 // src/components/QRCode.ts
+import { defineComponent, h, computed } from "vue";
+import { classNames, coerceClassValue } from "@expcat/tigercat-core";
+import {
+  qrcodeContainerClasses,
+  qrcodeOverlayClasses,
+  qrcodeExpiredTextClasses,
+  qrcodeRefreshClasses,
+  generateQRMatrix
+} from "@expcat/tigercat-core";
 var QRCode = defineComponent({
   name: "TigerQRCode",
   props: {
@@ -83,4 +89,7 @@ var QRCode = defineComponent({
 });
 var QRCode_default = QRCode;
 
-export { QRCode, QRCode_default };
+export {
+  QRCode,
+  QRCode_default
+};

package/dist/chunk-3QV2D54H.js

@@ -1,10 +1,26 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var chunkFC7RXQTM_js = require('./chunk-FC7RXQTM.js');
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
+var _chunkFC7RXQTMjs = require('./chunk-FC7RXQTM.js');
 
-var Radio = vue.defineComponent({
+// src/components/Radio.ts
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var Radio = _vue.defineComponent.call(void 0, {
   name: "TigerRadio",
   inheritAttrs: false,
   props: {
@@ -73,46 +89,46 @@ var Radio = vue.defineComponent({
     "update:checked": (value) => typeof value === "boolean"
   },
   setup(props, { slots, emit, attrs }) {
-    const instance = vue.getCurrentInstance();
-    const groupContextRef = vue.inject(chunkFC7RXQTM_js.RadioGroupKey, null);
-    const groupContext = vue.computed(() => groupContextRef?.value);
-    const internalChecked = vue.ref(props.defaultChecked);
-    const isCheckedControlled = vue.computed(() => {
-      const rawProps = instance?.vnode.props;
+    const instance = _vue.getCurrentInstance.call(void 0, );
+    const groupContextRef = _vue.inject.call(void 0, _chunkFC7RXQTMjs.RadioGroupKey, null);
+    const groupContext = _vue.computed.call(void 0, () => _optionalChain([groupContextRef, 'optionalAccess', _ => _.value]));
+    const internalChecked = _vue.ref.call(void 0, props.defaultChecked);
+    const isCheckedControlled = _vue.computed.call(void 0, () => {
+      const rawProps = _optionalChain([instance, 'optionalAccess', _2 => _2.vnode, 'access', _3 => _3.props]);
       return !!rawProps && Object.prototype.hasOwnProperty.call(rawProps, "checked");
     });
-    const isInGroup = vue.computed(() => !!groupContext.value);
-    const actualSize = vue.computed(() => props.size || groupContext.value?.size || "md");
-    const actualDisabled = vue.computed(() => {
+    const isInGroup = _vue.computed.call(void 0, () => !!groupContext.value);
+    const actualSize = _vue.computed.call(void 0, () => props.size || _optionalChain([groupContext, 'access', _4 => _4.value, 'optionalAccess', _5 => _5.size]) || "md");
+    const actualDisabled = _vue.computed.call(void 0, () => {
       if (props.disabled !== void 0) return props.disabled;
-      return groupContext.value?.disabled || false;
+      return _optionalChain([groupContext, 'access', _6 => _6.value, 'optionalAccess', _7 => _7.disabled]) || false;
     });
-    const actualName = vue.computed(() => props.name || groupContext.value?.name);
-    const isChecked = vue.computed(() => {
+    const actualName = _vue.computed.call(void 0, () => props.name || _optionalChain([groupContext, 'access', _8 => _8.value, 'optionalAccess', _9 => _9.name]));
+    const isChecked = _vue.computed.call(void 0, () => {
       if (isCheckedControlled.value) return props.checked;
-      if (isInGroup.value) return groupContext.value?.value === props.value;
+      if (isInGroup.value) return _optionalChain([groupContext, 'access', _10 => _10.value, 'optionalAccess', _11 => _11.value]) === props.value;
       return internalChecked.value;
     });
-    const radioClasses = vue.computed(
-      () => tigercatCore.getRadioVisualClasses({
+    const radioClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.getRadioVisualClasses.call(void 0, {
         size: actualSize.value,
         checked: !!isChecked.value,
         disabled: actualDisabled.value,
-        colors: tigercatCore.defaultRadioColors
+        colors: _tigercatcore.defaultRadioColors
       })
     );
-    const dotClasses = vue.computed(
-      () => tigercatCore.getRadioDotClasses({
+    const dotClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.getRadioDotClasses.call(void 0, {
         size: actualSize.value,
         checked: !!isChecked.value,
-        colors: tigercatCore.defaultRadioColors
+        colors: _tigercatcore.defaultRadioColors
       })
     );
-    const labelClasses = vue.computed(
-      () => tigercatCore.getRadioLabelClasses({
+    const labelClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.getRadioLabelClasses.call(void 0, {
         size: actualSize.value,
         disabled: actualDisabled.value,
-        colors: tigercatCore.defaultRadioColors
+        colors: _tigercatcore.defaultRadioColors
       })
     );
     const handleChange = (event) => {
@@ -138,13 +154,13 @@ var Radio = vue.defineComponent({
     };
     return () => {
       const rootStyle = [attrs.style, props.style];
-      const rootClass = tigercatCore.classNames(
-        tigercatCore.radioRootBaseClasses,
+      const rootClass = _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.radioRootBaseClasses,
         props.className,
-        tigercatCore.coerceClassValue(attrs.class)
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       );
       const { class: _class, style: _style, ...restAttrs } = attrs;
-      return vue.h(
+      return _vue.h.call(void 0, 
         "label",
         {
           class: rootClass,
@@ -152,7 +168,7 @@ var Radio = vue.defineComponent({
         },
         [
           // Hidden native radio input
-          vue.h("input", {
+          _vue.h.call(void 0, "input", {
             ...restAttrs,
             type: "radio",
             class: "sr-only peer",
@@ -164,20 +180,20 @@ var Radio = vue.defineComponent({
             onKeydown: handleKeyDown
           }),
           // Custom radio visual
-          vue.h(
+          _vue.h.call(void 0, 
             "span",
             {
               class: radioClasses.value,
               "aria-hidden": "true"
             },
             [
-              vue.h("span", {
+              _vue.h.call(void 0, "span", {
                 class: dotClasses.value
               })
             ]
           ),
           // Label content
-          slots.default && vue.h("span", { class: labelClasses.value }, slots.default())
+          slots.default && _vue.h.call(void 0, "span", { class: labelClasses.value }, slots.default())
         ]
       );
     };
@@ -185,5 +201,7 @@ var Radio = vue.defineComponent({
 });
 var Radio_default = Radio;
 
-exports.Radio = Radio;
-exports.Radio_default = Radio_default;
+
+
+
+exports.Radio = Radio; exports.Radio_default = Radio_default;

package/dist/{chunk-QDNTISP7.mjs → chunk-3W4CM7KO.mjs}

@@ -1,10 +1,27 @@
-import { StepsItem } from './chunk-BQEVLY2O.mjs';
-import { Steps } from './chunk-7UU4PULK.mjs';
-import { useTigerConfig } from './chunk-XP5M2GK7.mjs';
-import { Button } from './chunk-M7JUNLA7.mjs';
-import { defineComponent, computed, ref, watch, h } from 'vue';
-import { mergeTigerLocale, getFormWizardLabels, classNames, coerceClassValue, mergeStyleValues, resolveLocaleText } from '@expcat/tigercat-core';
+import {
+  Steps,
+  StepsItem
+} from "./chunk-PUSTYAMS.mjs";
+import {
+  useTigerConfig
+} from "./chunk-VG6E4NX6.mjs";
+import {
+  Button
+} from "./chunk-UM5GGKIX.mjs";
 
+// src/components/FormWizard.ts
+import { defineComponent, computed, ref, watch, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  getFormWizardLabels,
+  mergeTigerLocale,
+  resolveLocaleText,
+  clampStepIndex,
+  findNextUnskippedStep,
+  runStepValidation
+} from "@expcat/tigercat-core";
 var FormWizard = defineComponent({
   name: "TigerFormWizard",
   inheritAttrs: false,
@@ -105,7 +122,7 @@ var FormWizard = defineComponent({
     const currentStep = computed(() => props.steps[currentIndex.value]);
     const wrapperClasses = computed(
       () => classNames(
-        "tiger-form-wizard w-full rounded-lg border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-sm overflow-hidden",
+        "tiger-form-wizard w-full rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-sm overflow-hidden",
         props.className,
         coerceClassValue(attrs.class)
       )
@@ -113,12 +130,8 @@ var FormWizard = defineComponent({
     const wrapperStyle = computed(
       () => mergeStyleValues(attrs.style, props.style)
     );
-    const clampIndex = (next) => {
-      const max = Math.max(totalCount.value - 1, 0);
-      return Math.min(Math.max(next, 0), max);
-    };
     const setCurrent = (next) => {
-      const clamped = clampIndex(next);
+      const clamped = clampStepIndex(next, totalCount.value);
       const prev = currentIndex.value;
       if (props.current === void 0) {
         innerCurrent.value = clamped;
@@ -129,25 +142,8 @@ var FormWizard = defineComponent({
         props.autoSave(clamped, props.steps[clamped]);
       }
     };
-    const runBeforeNext = async () => {
-      if (!props.beforeNext || !currentStep.value) {
-        return true;
-      }
-      const result = await props.beforeNext(currentIndex.value, currentStep.value, props.steps);
-      if (result === true) {
-        return true;
-      }
-      return false;
-    };
-    const findNextUnskipped = (from, direction) => {
-      let idx = from;
-      while (idx >= 0 && idx < totalCount.value) {
-        const step = props.steps[idx];
-        if (!step?.disabled && !step?.skipCondition?.()) return idx;
-        idx += direction;
-      }
-      return currentIndex.value;
-    };
+    const runBeforeNext = () => runStepValidation(currentIndex.value, currentStep.value, props.steps, props.beforeNext);
+    const findNextUnskipped = (from, direction) => findNextUnskippedStep(from, direction, props.steps, currentIndex.value);
     const handlePrev = () => {
       if (currentIndex.value <= 0) return;
       const target = findNextUnskipped(currentIndex.value - 1, -1);
@@ -267,4 +263,7 @@ var FormWizard = defineComponent({
 });
 var FormWizard_default = FormWizard;
 
-export { FormWizard, FormWizard_default };
+export {
+  FormWizard,
+  FormWizard_default
+};