@expcat/tigercat-vue 1.1.0 → 1.2.0

package/dist/chunk-HU2XBA2A.js

@@ -1,673 +0,0 @@
-'use strict';
-
-var chunkJCMGBKS6_js = require('./chunk-JCMGBKS6.js');
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
-
-var CalendarIcon = chunkJCMGBKS6_js.createFilledIcon(tigercatCore.CalendarIconPath, "w-5 h-5");
-var CloseIcon = chunkJCMGBKS6_js.createFilledIcon(tigercatCore.CloseIconPath, "w-4 h-4");
-var ChevronLeftIcon = chunkJCMGBKS6_js.createFilledIcon(tigercatCore.ChevronLeftIconPath, "w-5 h-5");
-var ChevronRightIcon = chunkJCMGBKS6_js.createFilledIcon(tigercatCore.ChevronRightIconPath, "w-5 h-5");
-var isDateLike = (value) => value === null || value instanceof Date || typeof value === "string";
-var isModelValue = (value) => {
-  if (isDateLike(value)) return true;
-  if (Array.isArray(value) && value.length === 2) {
-    return isDateLike(value[0]) && isDateLike(value[1]);
-  }
-  return false;
-};
-var DatePicker = vue.defineComponent({
-  name: "TigerDatePicker",
-  inheritAttrs: false,
-  props: {
-    /**
-     * Enable range selection (start/end).
-     * When true, v-model uses a tuple: [start, end].
-     * @default false
-     */
-    range: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Locale used for month/day names in the calendar UI.
-     * Example: 'zh-CN', 'en-US'
-     */
-    locale: {
-      type: [String, Object]
-    },
-    /**
-     * UI labels for i18n.
-     */
-    labels: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Selected date value (for v-model)
-     */
-    modelValue: {
-      type: [Date, String, Array, null],
-      default: null
-    },
-    /**
-     * Date picker size
-     * @default 'md'
-     */
-    size: {
-      type: String,
-      default: "md"
-    },
-    /**
-     * Date format string
-     * @default 'yyyy-MM-dd'
-     */
-    format: {
-      type: String,
-      default: "yyyy-MM-dd"
-    },
-    /**
-     * Placeholder text
-     */
-    placeholder: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Whether the date picker is disabled
-     * @default false
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Whether the date picker is readonly
-     * @default false
-     */
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Whether the date picker is required
-     * @default false
-     */
-    required: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Minimum selectable date
-     */
-    minDate: {
-      type: [Date, String, null],
-      default: null
-    },
-    /**
-     * Maximum selectable date
-     */
-    maxDate: {
-      type: [Date, String, null],
-      default: null
-    },
-    /**
-     * Show clear button
-     * @default true
-     */
-    clearable: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Input name attribute
-     */
-    name: {
-      type: String
-    },
-    /**
-     * Input id attribute
-     */
-    id: {
-      type: String
-    },
-    /**
-     * Additional CSS classes
-     */
-    className: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Custom styles
-     */
-    style: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Shortcut presets for quick date selection
-     */
-    shortcuts: {
-      type: Array,
-      default: void 0
-    }
-  },
-  emits: {
-    /**
-     * Emitted when date changes (for v-model)
-     */
-    "update:modelValue": (value) => {
-      return isModelValue(value);
-    },
-    /**
-     * Emitted when date changes
-     */
-    change: (value) => {
-      return isModelValue(value);
-    },
-    /**
-     * Emitted when clear button is clicked
-     */
-    clear: () => true
-  },
-  setup(props, { emit, attrs }) {
-    const isOpen = vue.ref(false);
-    const calendarRef = vue.ref(null);
-    const inputWrapperRef = vue.ref(null);
-    const inputRef = vue.ref(null);
-    const activeDateIso = vue.ref(null);
-    const pendingFocusIso = vue.ref(null);
-    const restoreFocusEl = vue.ref(null);
-    const isRangeMode = vue.computed(() => props.range);
-    const selectedDate = vue.computed(() => {
-      if (isRangeMode.value) return null;
-      return tigercatCore.parseDate(props.modelValue);
-    });
-    const selectedRange = vue.computed(() => {
-      if (!isRangeMode.value) return [null, null];
-      const raw = props.modelValue;
-      if (!raw || !Array.isArray(raw)) return [null, null];
-      return [tigercatCore.parseDate(raw[0]), tigercatCore.parseDate(raw[1])];
-    });
-    const minDateParsed = vue.computed(() => tigercatCore.parseDate(props.minDate));
-    const maxDateParsed = vue.computed(() => tigercatCore.parseDate(props.maxDate));
-    const viewingMonth = vue.ref(
-      (selectedDate.value ?? selectedRange.value[0])?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth()
-    );
-    const viewingYear = vue.ref(
-      (selectedDate.value ?? selectedRange.value[0])?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()
-    );
-    const displayValue = vue.computed(() => {
-      if (!isRangeMode.value) {
-        return selectedDate.value ? tigercatCore.formatDate(selectedDate.value, props.format) : "";
-      }
-      const [start, end] = selectedRange.value;
-      const startText = start ? tigercatCore.formatDate(start, props.format) : "";
-      const endText = end ? tigercatCore.formatDate(end, props.format) : "";
-      if (!startText && !endText) return "";
-      if (startText && endText) return `${startText} - ${endText}`;
-      return startText ? `${startText} - ` : ` - ${endText}`;
-    });
-    const placeholderText = vue.computed(
-      () => props.placeholder ?? (props.range ? "Select date range" : "Select date")
-    );
-    const showClearButton = vue.computed(() => {
-      if (!props.clearable || props.disabled || props.readonly) return false;
-      if (!isRangeMode.value) return selectedDate.value !== null;
-      const [start, end] = selectedRange.value;
-      return start !== null || end !== null;
-    });
-    const calendarDays = vue.computed(() => {
-      return tigercatCore.getCalendarDays(viewingYear.value, viewingMonth.value);
-    });
-    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);
-      emit("change", value);
-    };
-    const addDays = (date, days) => {
-      const next = new Date(date);
-      next.setDate(next.getDate() + days);
-      return next;
-    };
-    const focusDateButtonByIso = (iso) => {
-      const button = calendarRef.value?.querySelector(
-        `button[data-date="${iso}"]`
-      );
-      if (!button || button.disabled) return false;
-      button.focus();
-      activeDateIso.value = iso;
-      return true;
-    };
-    const getFirstEnabledIsoInView = () => {
-      for (const date of calendarDays.value) {
-        if (!date) continue;
-        const iso = tigercatCore.formatDate(date, "yyyy-MM-dd");
-        if (!isDateDisabled(date)) return iso;
-      }
-      return null;
-    };
-    const getPreferredFocusIso = () => {
-      const focusDate = isRangeMode.value ? selectedRange.value[0] ?? selectedRange.value[1] : selectedDate.value;
-      if (focusDate) return tigercatCore.formatDate(focusDate, "yyyy-MM-dd");
-      const today = tigercatCore.normalizeDate(/* @__PURE__ */ new Date());
-      if (tigercatCore.isDateInRange(today, minDateParsed.value, maxDateParsed.value)) {
-        return tigercatCore.formatDate(today, "yyyy-MM-dd");
-      }
-      return getFirstEnabledIsoInView();
-    };
-    const restoreFocus = () => {
-      const target = restoreFocusEl.value ?? inputRef.value;
-      if (!target) return;
-      if (typeof target.focus === "function") {
-        target.focus();
-      }
-    };
-    const moveFocus = async (deltaDays) => {
-      const activeEl = document.activeElement;
-      const currentIso = activeEl?.getAttribute("data-date") ?? activeDateIso.value ?? null;
-      const baseIso = currentIso ?? getPreferredFocusIso();
-      if (!baseIso) return;
-      const baseDate = tigercatCore.parseDate(baseIso);
-      if (!baseDate) return;
-      let candidate = addDays(baseDate, deltaDays);
-      for (let attempts = 0; attempts < 42; attempts++) {
-        const iso = tigercatCore.formatDate(candidate, "yyyy-MM-dd");
-        const el = calendarRef.value?.querySelector(
-          `button[data-date="${iso}"]`
-        );
-        if (el && !el.disabled) {
-          el.focus();
-          activeDateIso.value = iso;
-          return;
-        }
-        if (!el) {
-          pendingFocusIso.value = iso;
-          viewingYear.value = candidate.getFullYear();
-          viewingMonth.value = candidate.getMonth();
-          activeDateIso.value = iso;
-          await vue.nextTick();
-          if (pendingFocusIso.value) {
-            const nextIso = pendingFocusIso.value;
-            pendingFocusIso.value = null;
-            if (focusDateButtonByIso(nextIso)) return;
-          }
-          const fallback = getFirstEnabledIsoInView();
-          if (fallback) focusDateButtonByIso(fallback);
-          return;
-        }
-        candidate = addDays(candidate, deltaDays);
-      }
-    };
-    const handleCalendarKeyDown = async (event) => {
-      if (!isOpen.value) return;
-      switch (event.key) {
-        case "Escape": {
-          event.preventDefault();
-          closeCalendar();
-          return;
-        }
-        case "ArrowRight": {
-          event.preventDefault();
-          await moveFocus(1);
-          return;
-        }
-        case "ArrowLeft": {
-          event.preventDefault();
-          await moveFocus(-1);
-          return;
-        }
-        case "ArrowDown": {
-          event.preventDefault();
-          await moveFocus(7);
-          return;
-        }
-        case "ArrowUp": {
-          event.preventDefault();
-          await moveFocus(-7);
-          return;
-        }
-        case "Enter":
-        case " ": {
-          const activeEl = document.activeElement;
-          if (activeEl?.tagName === "BUTTON" && activeEl.dataset.date) {
-            event.preventDefault();
-            if (!activeEl.disabled) activeEl.click();
-          }
-          return;
-        }
-      }
-    };
-    function toggleCalendar() {
-      if (!props.disabled && !props.readonly) {
-        isOpen.value = !isOpen.value;
-        if (isOpen.value) {
-          restoreFocusEl.value = inputRef.value ?? null;
-          const baseDate = selectedDate.value ?? selectedRange.value[0];
-          if (baseDate) {
-            viewingMonth.value = baseDate.getMonth();
-            viewingYear.value = baseDate.getFullYear();
-          }
-        }
-      }
-    }
-    function closeCalendar() {
-      isOpen.value = false;
-    }
-    function setToday() {
-      selectDate(/* @__PURE__ */ new Date());
-    }
-    function handleShortcut(shortcut) {
-      const val = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
-      emitValue(val);
-      closeCalendar();
-    }
-    function selectDate(date) {
-      if (!date) return;
-      const normalizedDate = tigercatCore.normalizeDate(date);
-      if (!tigercatCore.isDateInRange(normalizedDate, minDateParsed.value, maxDateParsed.value)) {
-        return;
-      }
-      if (!isRangeMode.value) {
-        emitValue(normalizedDate);
-        closeCalendar();
-        return;
-      }
-      const [start, end] = selectedRange.value;
-      if (!start || start && end) {
-        emitValue([normalizedDate, null]);
-        return;
-      }
-      emitValue([start, normalizedDate < start ? start : normalizedDate]);
-    }
-    function clearDate(event) {
-      event.stopPropagation();
-      emitValue(!isRangeMode.value ? null : [null, null]);
-      emit("clear");
-    }
-    function previousMonth() {
-      if (viewingMonth.value === 0) {
-        viewingMonth.value = 11;
-        viewingYear.value--;
-      } else {
-        viewingMonth.value--;
-      }
-    }
-    function nextMonth() {
-      if (viewingMonth.value === 11) {
-        viewingMonth.value = 0;
-        viewingYear.value++;
-      } else {
-        viewingMonth.value++;
-      }
-    }
-    function isDateDisabled(date) {
-      if (!date) return true;
-      return !tigercatCore.isDateInRange(date, minDateParsed.value, maxDateParsed.value);
-    }
-    function isCurrentMonth(date) {
-      if (!date) return false;
-      return date.getMonth() === viewingMonth.value;
-    }
-    function handleClickOutside(event) {
-      if (calendarRef.value && inputWrapperRef.value && !calendarRef.value.contains(event.target) && !inputWrapperRef.value.contains(event.target)) {
-        closeCalendar();
-      }
-    }
-    function handleInputClick() {
-      toggleCalendar();
-    }
-    vue.watch(isOpen, (newValue) => {
-      if (newValue) {
-        document.addEventListener("click", handleClickOutside);
-        const preferred = pendingFocusIso.value ?? getPreferredFocusIso();
-        pendingFocusIso.value = null;
-        vue.nextTick().then(() => {
-          if (preferred && focusDateButtonByIso(preferred)) return;
-          const fallback = getFirstEnabledIsoInView();
-          if (fallback) focusDateButtonByIso(fallback);
-        });
-      } else {
-        document.removeEventListener("click", handleClickOutside);
-        vue.nextTick().then(() => {
-          restoreFocus();
-        });
-      }
-    });
-    vue.onBeforeUnmount(() => {
-      document.removeEventListener("click", handleClickOutside);
-    });
-    const rootClass = vue.computed(
-      () => tigercatCore.classNames(tigercatCore.datePickerBaseClasses, props.className, tigercatCore.coerceClassValue(attrs.class))
-    );
-    const rootStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style));
-    const forwardedAttrs = vue.computed(() => {
-      const { class: _class, style: _style, ...rest } = attrs ?? {};
-      return rest;
-    });
-    return () => {
-      const inputClasses = tigercatCore.getDatePickerInputClasses(props.size, props.disabled || props.readonly);
-      const iconButtonClasses = tigercatCore.getDatePickerIconButtonClasses(props.size);
-      return vue.h(
-        "div",
-        {
-          ...forwardedAttrs.value,
-          class: rootClass.value,
-          style: rootStyle.value
-        },
-        [
-          // Input wrapper
-          vue.h(
-            "div",
-            {
-              ref: inputWrapperRef,
-              class: tigercatCore.datePickerInputWrapperClasses
-            },
-            [
-              // Input field for date display
-              vue.h("input", {
-                ref: inputRef,
-                type: "text",
-                class: inputClasses,
-                value: displayValue.value,
-                placeholder: placeholderText.value,
-                disabled: props.disabled,
-                readonly: true,
-                // Always readonly to prevent manual text input and ensure date selection via calendar only
-                required: props.required,
-                name: props.name,
-                id: props.id,
-                onClick: handleInputClick,
-                "aria-label": placeholderText.value
-              }),
-              // Clear button
-              showClearButton.value && vue.h(
-                "button",
-                {
-                  type: "button",
-                  class: tigercatCore.datePickerClearButtonClasses,
-                  onClick: clearDate,
-                  "aria-label": labels.value.clearDate
-                },
-                CloseIcon
-              ),
-              // Calendar icon button
-              vue.h(
-                "button",
-                {
-                  type: "button",
-                  class: iconButtonClasses,
-                  disabled: props.disabled || props.readonly,
-                  onClick: toggleCalendar,
-                  "aria-label": labels.value.toggleCalendar
-                },
-                CalendarIcon
-              )
-            ]
-          ),
-          // Calendar dropdown
-          isOpen.value && vue.h(
-            "div",
-            {
-              ref: calendarRef,
-              class: tigercatCore.datePickerCalendarClasses,
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-label": labels.value.calendar,
-              onKeydown: handleCalendarKeyDown
-            },
-            [
-              // Calendar header
-              vue.h("div", { class: tigercatCore.datePickerCalendarHeaderClasses }, [
-                vue.h(
-                  "button",
-                  {
-                    type: "button",
-                    class: tigercatCore.datePickerNavButtonClasses,
-                    onClick: previousMonth,
-                    "aria-label": labels.value.previousMonth
-                  },
-                  ChevronLeftIcon
-                ),
-                vue.h(
-                  "div",
-                  { class: tigercatCore.datePickerMonthYearClasses },
-                  tigercatCore.formatMonthYear(viewingYear.value, viewingMonth.value, localeCode.value)
-                ),
-                vue.h(
-                  "button",
-                  {
-                    type: "button",
-                    class: tigercatCore.datePickerNavButtonClasses,
-                    onClick: nextMonth,
-                    "aria-label": labels.value.nextMonth
-                  },
-                  ChevronRightIcon
-                )
-              ]),
-              // Day names header
-              vue.h("div", { class: tigercatCore.datePickerCalendarGridClasses, role: "row" }, [
-                ...dayNames.value.map(
-                  (day) => vue.h(
-                    "div",
-                    {
-                      class: tigercatCore.datePickerDayNameClasses,
-                      key: day,
-                      role: "columnheader"
-                    },
-                    day
-                  )
-                )
-              ]),
-              // Calendar grid
-              (() => {
-                const [rangeStart, rangeEnd] = selectedRange.value;
-                const normStart = rangeStart ? tigercatCore.normalizeDate(rangeStart) : null;
-                const normEnd = rangeEnd ? tigercatCore.normalizeDate(rangeEnd) : null;
-                const isSelectingEnd = isRangeMode.value && Boolean(rangeStart) && !rangeEnd;
-                return vue.h(
-                  "div",
-                  {
-                    class: tigercatCore.datePickerCalendarGridClasses,
-                    role: "grid",
-                    "aria-rowcount": 6,
-                    "aria-colcount": 7
-                  },
-                  [
-                    ...calendarDays.value.map((date, index) => {
-                      if (!date) return null;
-                      const normDate = tigercatCore.normalizeDate(date);
-                      const isRangeStart = isRangeMode.value && rangeStart ? tigercatCore.isSameDay(date, rangeStart) : false;
-                      const isRangeEnd = isRangeMode.value && rangeEnd ? tigercatCore.isSameDay(date, rangeEnd) : false;
-                      const isInRange = isRangeMode.value && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
-                      const isSelected = !isRangeMode.value ? selectedDate.value ? tigercatCore.isSameDay(date, selectedDate.value) : false : isRangeStart || isRangeEnd;
-                      const isCurrentMonthDay = isCurrentMonth(date);
-                      const isTodayDay = tigercatCore.isToday(date);
-                      const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
-                      const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
-                      const iso = tigercatCore.formatDate(date, "yyyy-MM-dd");
-                      return vue.h(
-                        "button",
-                        {
-                          key: index,
-                          type: "button",
-                          class: tigercatCore.getDatePickerDayCellClasses(
-                            isCurrentMonthDay,
-                            isSelected,
-                            isTodayDay,
-                            isDisabled,
-                            Boolean(isInRange),
-                            Boolean(isRangeStart),
-                            Boolean(isRangeEnd)
-                          ),
-                          disabled: isDisabled,
-                          onClick: () => selectDate(date),
-                          role: "gridcell",
-                          "data-date": iso,
-                          onFocus: () => {
-                            activeDateIso.value = iso;
-                          },
-                          tabindex: activeDateIso.value === iso && !isDisabled ? 0 : -1,
-                          "aria-label": iso,
-                          "aria-selected": isSelected,
-                          "aria-current": isTodayDay ? "date" : void 0
-                        },
-                        date.getDate()
-                      );
-                    })
-                  ]
-                );
-              })(),
-              // Shortcuts panel
-              props.shortcuts?.length ? vue.h(
-                "div",
-                {
-                  class: "flex flex-wrap gap-1 px-3 py-2 border-t border-[var(--tiger-border,#e5e7eb)]"
-                },
-                props.shortcuts.map(
-                  (sc) => vue.h(
-                    "button",
-                    {
-                      type: "button",
-                      class: tigercatCore.datePickerFooterButtonClasses,
-                      onClick: () => handleShortcut(sc)
-                    },
-                    sc.label
-                  )
-                )
-              ) : null,
-              // Footer (range mode only)
-              isRangeMode.value ? vue.h("div", { class: tigercatCore.datePickerFooterClasses }, [
-                vue.h(
-                  "button",
-                  {
-                    type: "button",
-                    class: tigercatCore.datePickerFooterButtonClasses,
-                    onClick: setToday
-                  },
-                  labels.value.today
-                ),
-                vue.h(
-                  "button",
-                  {
-                    type: "button",
-                    class: tigercatCore.datePickerFooterButtonClasses,
-                    onClick: closeCalendar
-                  },
-                  labels.value.ok
-                )
-              ]) : null
-            ]
-          )
-        ]
-      );
-    };
-  }
-});
-var DatePicker_default = DatePicker;
-
-exports.DatePicker = DatePicker;
-exports.DatePicker_default = DatePicker_default;