@expcat/tigercat-vue 1.4.0 → 2.0.0-preview.1

package/dist/chunk-V5ANPH5R.mjs

@@ -0,0 +1,341 @@
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
+
+// src/components/Calendar.ts
+import { defineComponent, h, ref, computed, nextTick } from "vue";
+import { classNames, coerceClassValue } from "@expcat/tigercat-core";
+import {
+  getCalendarContainerClasses,
+  calendarHeaderClasses,
+  calendarNavButtonClasses,
+  calendarTitleClasses,
+  calendarWeekdayClasses,
+  getCalendarDayClasses,
+  getCalendarMonthClasses,
+  isSameDay,
+  getMonthDays,
+  getShortDayNames,
+  getShortMonthNames,
+  formatMonthYear,
+  formatDate,
+  parseDate,
+  addDays,
+  getCalendarLabels,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+var Calendar = defineComponent({
+  name: "TigerCalendar",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Date, default: void 0 },
+    mode: { type: String, default: "month" },
+    fullscreen: { type: Boolean, default: false },
+    disabledDate: { type: Function, default: void 0 },
+    locale: { type: Object, default: void 0 },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "change", "panel-change"],
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const localeCode = computed(() => mergedLocale.value?.locale);
+    const labels = computed(() => getCalendarLabels(mergedLocale.value));
+    const weekdayNames = computed(() => getShortDayNames(localeCode.value));
+    const monthNames = computed(() => getShortMonthNames(localeCode.value));
+    const today = /* @__PURE__ */ new Date();
+    const viewYear = ref(props.modelValue?.getFullYear() ?? today.getFullYear());
+    const viewMonth = ref(props.modelValue?.getMonth() ?? today.getMonth());
+    const days = computed(() => getMonthDays(viewYear.value, viewMonth.value));
+    function prevMonth() {
+      if (viewMonth.value === 0) {
+        viewMonth.value = 11;
+        viewYear.value--;
+      } else {
+        viewMonth.value--;
+      }
+      emit("panel-change", new Date(viewYear.value, viewMonth.value, 1), props.mode);
+    }
+    function nextMonth() {
+      if (viewMonth.value === 11) {
+        viewMonth.value = 0;
+        viewYear.value++;
+      } else {
+        viewMonth.value++;
+      }
+      emit("panel-change", new Date(viewYear.value, viewMonth.value, 1), props.mode);
+    }
+    function prevYear() {
+      viewYear.value--;
+      emit("panel-change", new Date(viewYear.value, viewMonth.value, 1), props.mode);
+    }
+    function nextYear() {
+      viewYear.value++;
+      emit("panel-change", new Date(viewYear.value, viewMonth.value, 1), props.mode);
+    }
+    function selectDay(date) {
+      if (props.disabledDate?.(date)) return;
+      emit("update:modelValue", date);
+      emit("change", date);
+    }
+    function selectMonth(monthIdx) {
+      viewMonth.value = monthIdx;
+      emit("panel-change", new Date(viewYear.value, monthIdx, 1), props.mode);
+    }
+    const dayGridEl = ref(null);
+    const monthGridEl = ref(null);
+    const activeIso = ref(null);
+    const activeMonthIdx = ref(null);
+    const toIso = (d) => formatDate(d, "yyyy-MM-dd");
+    function getDefaultDayIso() {
+      const v = props.modelValue;
+      if (v && v.getFullYear() === viewYear.value && v.getMonth() === viewMonth.value)
+        return toIso(v);
+      if (today.getFullYear() === viewYear.value && today.getMonth() === viewMonth.value)
+        return toIso(today);
+      return toIso(new Date(viewYear.value, viewMonth.value, 1));
+    }
+    function navigate(y, m) {
+      viewYear.value = y;
+      viewMonth.value = m;
+      emit("panel-change", new Date(y, m, 1), props.mode);
+    }
+    function focusDayIso(iso) {
+      const el = dayGridEl.value?.querySelector(`button[data-date="${iso}"]`);
+      if (el && !el.disabled) {
+        el.focus();
+        activeIso.value = iso;
+        return true;
+      }
+      return false;
+    }
+    function moveDayFocus(deltaDays) {
+      const activeEl = document.activeElement;
+      const currentIso = activeEl?.getAttribute("data-date") ?? activeIso.value ?? getDefaultDayIso();
+      const base = parseDate(currentIso);
+      if (!base) return;
+      let candidate = addDays(base, deltaDays);
+      for (let attempts = 0; attempts < 42; attempts++) {
+        const iso = toIso(candidate);
+        const el = dayGridEl.value?.querySelector(`button[data-date="${iso}"]`);
+        if (el && !el.disabled) {
+          el.focus();
+          activeIso.value = iso;
+          return;
+        }
+        if (!el) {
+          activeIso.value = iso;
+          navigate(candidate.getFullYear(), candidate.getMonth());
+          nextTick(() => {
+            dayGridEl.value?.querySelector(`button[data-date="${iso}"]`)?.focus();
+          });
+          return;
+        }
+        candidate = addDays(candidate, deltaDays);
+      }
+    }
+    function handleDayGridKeyDown(e) {
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          moveDayFocus(-1);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          moveDayFocus(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          moveDayFocus(-7);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          moveDayFocus(7);
+          break;
+        case "Home":
+          e.preventDefault();
+          focusDayIso(toIso(new Date(viewYear.value, viewMonth.value, 1)));
+          break;
+        case "End":
+          e.preventDefault();
+          focusDayIso(toIso(new Date(viewYear.value, viewMonth.value + 1, 0)));
+          break;
+        case "Enter":
+        case " ": {
+          const activeEl = document.activeElement;
+          const iso = activeEl?.getAttribute("data-date");
+          if (iso) {
+            e.preventDefault();
+            const d = parseDate(iso);
+            if (d) selectDay(d);
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    }
+    function focusMonthIdx(idx) {
+      const els = monthGridEl.value?.querySelectorAll('button[role="gridcell"]');
+      els?.[idx]?.focus();
+      activeMonthIdx.value = idx;
+    }
+    function handleMonthKeyDown(e, idx) {
+      let target = idx;
+      switch (e.key) {
+        case "ArrowRight":
+          target = Math.min(11, idx + 1);
+          break;
+        case "ArrowLeft":
+          target = Math.max(0, idx - 1);
+          break;
+        case "ArrowDown":
+          target = Math.min(11, idx + 3);
+          break;
+        case "ArrowUp":
+          target = Math.max(0, idx - 3);
+          break;
+        case "Home":
+          target = 0;
+          break;
+        case "End":
+          target = 11;
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          selectMonth(idx);
+          return;
+        default:
+          return;
+      }
+      e.preventDefault();
+      focusMonthIdx(target);
+    }
+    return () => {
+      const containerClass = classNames(
+        getCalendarContainerClasses(!!props.fullscreen),
+        props.className,
+        coerceClassValue(attrs.class)
+      );
+      const header = h("div", { class: calendarHeaderClasses }, [
+        h(
+          "button",
+          {
+            type: "button",
+            class: calendarNavButtonClasses,
+            "aria-label": props.mode === "month" ? labels.value.previousMonth : labels.value.previousYear,
+            onClick: props.mode === "month" ? prevMonth : prevYear
+          },
+          "\u2039"
+        ),
+        h(
+          "span",
+          { class: calendarTitleClasses },
+          props.mode === "month" ? formatMonthYear(viewYear.value, viewMonth.value, localeCode.value) : `${viewYear.value}`
+        ),
+        h(
+          "button",
+          {
+            type: "button",
+            class: calendarNavButtonClasses,
+            "aria-label": props.mode === "month" ? labels.value.nextMonth : labels.value.nextYear,
+            onClick: props.mode === "month" ? nextMonth : nextYear
+          },
+          "\u203A"
+        )
+      ]);
+      const rovingDayIso = activeIso.value ?? getDefaultDayIso();
+      const rovingMonthIdx = activeMonthIdx.value ?? viewMonth.value;
+      let body;
+      if (props.mode === "year") {
+        const monthRows = [];
+        for (let i = 0; i < monthNames.value.length; i += 3)
+          monthRows.push(monthNames.value.slice(i, i + 3));
+        body = h(
+          "div",
+          { class: "grid grid-cols-1 gap-2", role: "grid", ref: monthGridEl },
+          monthRows.map(
+            (row, ri) => h(
+              "div",
+              { key: ri, class: "grid grid-cols-3 gap-2", role: "row" },
+              row.map((m, ci) => {
+                const i = ri * 3 + ci;
+                return h(
+                  "button",
+                  {
+                    key: i,
+                    type: "button",
+                    role: "gridcell",
+                    "aria-selected": viewMonth.value === i,
+                    tabindex: rovingMonthIdx === i ? 0 : -1,
+                    class: getCalendarMonthClasses(viewMonth.value === i),
+                    onClick: () => selectMonth(i),
+                    onFocus: () => activeMonthIdx.value = i,
+                    onKeydown: (e) => handleMonthKeyDown(e, i)
+                  },
+                  m
+                );
+              })
+            )
+          )
+        );
+      } else {
+        const weekdayRow = h(
+          "div",
+          { class: "grid grid-cols-7", role: "row" },
+          weekdayNames.value.map(
+            (wd) => h("div", { key: wd, class: calendarWeekdayClasses, role: "columnheader" }, wd)
+          )
+        );
+        const weeks = [];
+        for (let i = 0; i < days.value.length; i += 7) weeks.push(days.value.slice(i, i + 7));
+        const weekRows = weeks.map(
+          (week, wi) => h(
+            "div",
+            { key: wi, class: "grid grid-cols-7", role: "row", onKeydown: handleDayGridKeyDown },
+            week.map((date) => {
+              const isCurrentMonth = date.getMonth() === viewMonth.value;
+              const isSelected = props.modelValue ? isSameDay(date, props.modelValue) : false;
+              const isTodayDate = isSameDay(date, today);
+              const isDisabled = !!props.disabledDate?.(date);
+              const iso = toIso(date);
+              return h(
+                "button",
+                {
+                  key: iso,
+                  type: "button",
+                  role: "gridcell",
+                  "data-date": iso,
+                  "aria-label": iso,
+                  "aria-selected": isSelected,
+                  "aria-current": isTodayDate ? "date" : void 0,
+                  disabled: isDisabled,
+                  tabindex: rovingDayIso === iso && !isDisabled ? 0 : -1,
+                  class: classNames(
+                    getCalendarDayClasses(isSelected, isTodayDate, isCurrentMonth, isDisabled),
+                    "justify-self-center my-0.5"
+                  ),
+                  onClick: () => selectDay(date),
+                  onFocus: () => activeIso.value = iso
+                },
+                date.getDate()
+              );
+            })
+          )
+        );
+        body = h("div", { role: "grid", "aria-rowcount": 7, "aria-colcount": 7, ref: dayGridEl }, [
+          weekdayRow,
+          ...weekRows
+        ]);
+      }
+      return h("div", { ...attrs, class: containerClass, role: "group" }, [header, body]);
+    };
+  }
+});
+var Calendar_default = Calendar;
+
+export {
+  Calendar,
+  Calendar_default
+};

package/dist/{chunk-AZ6SASY5.mjs → chunk-V5ZEPAWV.mjs}

@@ -1,3 +1,9 @@
+import {
+  renderVueBodyTeleport,
+  useVueBodyScrollLock,
+  useVueEscapeKey,
+  useVueFocusTrap
+} from "./chunk-BDTPFPSB.mjs";
 import {
   createStatusIcon
 } from "./chunk-2TNZ4JNT.mjs";
@@ -12,9 +18,9 @@ import {
   h,
   ref,
   watch,
+  nextTick,
   onMounted,
-  onBeforeUnmount,
-  Teleport
+  onBeforeUnmount
 } from "vue";
 import {
   classNames,
@@ -30,9 +36,12 @@ import {
   getActiveTourSteps,
   getCurrentActiveTourStep,
   getActiveTourStepPosition,
+  getTourLabels,
   closeIconPathD,
   mergeTigerLocale,
-  resolveLocaleText
+  captureActiveElement,
+  focusFirst,
+  restoreFocus
 } from "@expcat/tigercat-core";
 var Tour = defineComponent({
   name: "TigerTour",
@@ -66,14 +75,12 @@ var Tour = defineComponent({
   setup(props, { emit }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const nextLabel = computed(
-      () => resolveLocaleText("Next", props.nextText, mergedLocale.value?.formWizard?.nextText)
-    );
-    const prevLabel = computed(
-      () => resolveLocaleText("Previous", props.prevText, mergedLocale.value?.formWizard?.prevText)
-    );
-    const finishLabel = computed(
-      () => resolveLocaleText("Finish", props.finishText, mergedLocale.value?.formWizard?.finishText)
+    const labels = computed(
+      () => getTourLabels(mergedLocale.value, {
+        nextText: props.nextText,
+        prevText: props.prevText,
+        finishText: props.finishText
+      })
     );
     const internalStep = ref(0);
     const resolvedSteps = ref(props.steps);
@@ -88,6 +95,9 @@ var Tour = defineComponent({
     const step = computed(() => activeStepInfo.value?.step);
     const targetRect = ref();
     const popoverRef = ref(null);
+    const closeButtonRef = ref(null);
+    const openRef = computed(() => props.open);
+    let previousActiveElement = null;
     const updateRect = () => {
       if (step.value?.target) {
         targetRect.value = getTourTargetRect(step.value.target);
@@ -164,6 +174,24 @@ var Tour = defineComponent({
       emit("close");
       emit("update:open", false);
     };
+    const detachEscape = useVueEscapeKey({ enabled: openRef, onEscape: close });
+    onBeforeUnmount(detachEscape);
+    useVueBodyScrollLock(openRef);
+    useVueFocusTrap({ enabled: openRef, containerRef: popoverRef });
+    watch(
+      openRef,
+      (open) => {
+        if (open) {
+          previousActiveElement = captureActiveElement();
+          nextTick(() => {
+            focusFirst([closeButtonRef.value, popoverRef.value]);
+          });
+        } else {
+          restoreFocus(previousActiveElement);
+        }
+      },
+      { immediate: true }
+    );
     return () => {
       if (!props.open || !step.value) return null;
       const placement = step.value.placement ?? "bottom";
@@ -209,9 +237,10 @@ var Tour = defineComponent({
           h(
             "button",
             {
+              ref: closeButtonRef,
               class: tourCloseButtonClasses,
               type: "button",
-              "aria-label": "Close tour",
+              "aria-label": labels.value.closeAriaLabel,
               onClick: close
             },
             createStatusIcon(closeIconPathD, "h-4 w-4")
@@ -244,7 +273,7 @@ var Tour = defineComponent({
               class: "px-3 py-1.5 text-sm rounded-md border border-[var(--tiger-border,#e5e7eb)] text-[var(--tiger-text,#111827)] hover:bg-[var(--tiger-surface-muted,#f9fafb)] transition-colors mr-2",
               onClick: prev
             },
-            prevLabel.value
+            labels.value.prevText
           )
         );
       }
@@ -256,7 +285,7 @@ var Tour = defineComponent({
             class: "px-3 py-1.5 text-sm rounded-md bg-[var(--tiger-primary,#2563eb)] text-white hover:bg-[var(--tiger-primary-hover,#1d4ed8)] transition-colors",
             onClick: next
           },
-          isLast ? finishLabel.value : nextLabel.value
+          isLast ? labels.value.finishText : labels.value.nextText
         )
       );
       footerChildren.push(h("div", { class: "flex items-center" }, buttons));
@@ -274,7 +303,7 @@ var Tour = defineComponent({
           popoverChildren
         )
       );
-      return h(Teleport, { to: "body" }, children);
+      return renderVueBodyTeleport(children);
     };
   }
 });

package/dist/{chunk-2R5HISQA.mjs → chunk-VCCK4CDT.mjs}

@@ -9,7 +9,8 @@ import {
   getSliderTooltipClasses,
   sliderGetPercentage,
   sliderGetValueFromPosition,
-  sliderGetKeyboardValue
+  sliderGetKeyboardValue,
+  sliderResolveMarks
 } from "@expcat/tigercat-core";
 var Slider = defineComponent({
   name: "TigerSlider",
@@ -290,7 +291,8 @@ var Slider = defineComponent({
       };
       const createMarks = () => {
         if (!props.marks) return null;
-        const marks = typeof props.marks === "boolean" ? {} : props.marks;
+        const marks = sliderResolveMarks(props.marks, props.min, props.max);
+        if (Object.keys(marks).length === 0) return null;
         return h(
           "div",
           { class: "absolute w-full top-full mt-2" },

package/dist/{chunk-WZRC7PJH.mjs → chunk-VFUBOKGT.mjs}

@@ -54,11 +54,11 @@ import {
   timePickerFooterClasses,
   timePickerFooterButtonClasses,
   focusTimePickerOption,
-  ClockIconPath,
-  TimePickerCloseIconPath
+  clockSolidIcon20PathD,
+  closeSolidIcon20PathD
 } from "@expcat/tigercat-core";
-var ClockIcon = createFilledIcon(ClockIconPath, "w-5 h-5");
-var CloseIcon = createFilledIcon(TimePickerCloseIconPath, "w-4 h-4");
+var ClockIcon = createFilledIcon(clockSolidIcon20PathD, "w-5 h-5");
+var CloseIcon = createFilledIcon(closeSolidIcon20PathD, "w-4 h-4");
 var TimePicker = defineComponent({
   name: "TigerTimePicker",
   inheritAttrs: false,
@@ -397,7 +397,13 @@ var TimePicker = defineComponent({
       updateTime();
     }
     function updateTime() {
-      if (!isTimeInRange(selectedHours.value, selectedMinutes.value, props.minTime, props.maxTime)) {
+      if (!isTimeInRange(
+        selectedHours.value,
+        selectedMinutes.value,
+        props.minTime,
+        props.maxTime,
+        selectedSeconds.value
+      )) {
         return;
       }
       let timeString = formatTime(
@@ -474,10 +480,31 @@ var TimePicker = defineComponent({
     }
     function isHourDisabled(hour) {
       const hours24 = props.format === "12" ? to24HourFormat(hour, selectedPeriod.value) : hour;
-      return !isTimeInRange(hours24, selectedMinutes.value, props.minTime, props.maxTime);
+      return !isTimeInRange(
+        hours24,
+        selectedMinutes.value,
+        props.minTime,
+        props.maxTime,
+        selectedSeconds.value
+      );
     }
     function isMinuteDisabled(minute) {
-      return !isTimeInRange(selectedHours.value, minute, props.minTime, props.maxTime);
+      return !isTimeInRange(
+        selectedHours.value,
+        minute,
+        props.minTime,
+        props.maxTime,
+        selectedSeconds.value
+      );
+    }
+    function isSecondDisabled(second) {
+      return !isTimeInRange(
+        selectedHours.value,
+        selectedMinutes.value,
+        props.minTime,
+        props.maxTime,
+        second
+      );
     }
     function handleClickOutside(event) {
       if (panelRef.value && inputWrapperRef.value && !panelRef.value.contains(event.target) && !inputWrapperRef.value.contains(event.target)) {
@@ -643,7 +670,11 @@ var TimePicker = defineComponent({
                   onChange: (event) => selectSecond(Number(event.target.value))
                 },
                 secondsList.value.map(
-                  (second) => h("option", { value: second }, padTwo(second))
+                  (second) => h(
+                    "option",
+                    { value: second, disabled: isSecondDisabled(second) },
+                    padTwo(second)
+                  )
                 )
               ),
               props.format === "12" && h(
@@ -732,12 +763,14 @@ var TimePicker = defineComponent({
                   { class: timePickerColumnListClasses },
                   secondsList.value.map((second) => {
                     const isSelected = selectedSeconds.value === second;
+                    const isDisabled = isSecondDisabled(second);
                     return h(
                       "button",
                       {
                         key: second,
                         type: "button",
-                        class: getTimePickerItemClasses(isSelected, false),
+                        class: getTimePickerItemClasses(isSelected, isDisabled),
+                        disabled: isDisabled,
                         onClick: () => selectSecond(second),
                         "data-tiger-timepicker-unit": "second",
                         "aria-label": getTimePickerOptionAriaLabel(

package/dist/{chunk-XMGNMKWW.mjs → chunk-VMYV5EWI.mjs}

@@ -1,6 +1,6 @@
 import {
   useFloatingPopup
-} from "./chunk-M4EP4OVR.mjs";
+} from "./chunk-KE6RGD4Y.mjs";
 import {
   renderVueBodyTeleport
 } from "./chunk-BDTPFPSB.mjs";
@@ -91,6 +91,7 @@ var Popconfirm = defineComponent({
       containerRef,
       triggerRef,
       floatingRef,
+      closeAndRestoreFocus,
       floatingStyles,
       actualPlacement
     } = useFloatingPopup({ props, emit, multiTrigger: false });
@@ -99,11 +100,11 @@ var Popconfirm = defineComponent({
     const descriptionId = `${popconfirmId}-description`;
     const handleConfirm = () => {
       emit("confirm");
-      setVisible(false);
+      closeAndRestoreFocus();
     };
     const handleCancel = () => {
       emit("cancel");
-      setVisible(false);
+      closeAndRestoreFocus();
     };
     const handleTriggerClick = () => {
       if (props.disabled) return;