@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-XCIQNTJN.mjs

@@ -0,0 +1,418 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Calendar.ts
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  nextTick,
+  useId
+} from "vue";
+import { classNames, coerceClassValue } from "@expcat/tigercat-core";
+import {
+  calendarGridClasses,
+  calendarHeaderClasses,
+  calendarNavButtonClasses,
+  calendarTitleClasses,
+  calendarWeekdayClasses,
+  chunkDaysIntoWeeks,
+  chunkMonths,
+  followCalendarValue,
+  formatCalendarDayLabel,
+  formatCalendarDayNumber,
+  formatMonthYear,
+  getCalendarContainerClasses,
+  getCalendarDayClasses,
+  getCalendarDayKeyAction,
+  getCalendarLabels,
+  getCalendarMonthClasses,
+  getCalendarMonthKeyAction,
+  getInitialCalendarView,
+  getLocaleDirection,
+  getMonthDays,
+  getShortDayNames,
+  getShortMonthNames,
+  getWeekStartsOn,
+  isCalendarDateDisabled,
+  isCalendarMonthDisabled,
+  isSameDay,
+  mergeTigerLocale,
+  mergeStyleValues,
+  moveCalendarDayFocus,
+  moveCalendarMonthFocus,
+  panelDate,
+  resolveCalendarRovingIso,
+  resolveCalendarRovingMonth,
+  selectCalendarDay,
+  selectCalendarMonth,
+  shiftCalendarMonth,
+  shiftCalendarYear,
+  toCalendarDate,
+  toIsoDate
+} from "@expcat/tigercat-core";
+var Calendar = defineComponent({
+  name: "TigerCalendar",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [Date, String, null],
+      default: void 0
+    },
+    defaultValue: {
+      type: [Date, String, null],
+      default: void 0
+    },
+    mode: { type: String, default: void 0 },
+    defaultMode: { type: String, default: "month" },
+    fullscreen: { type: Boolean, default: false },
+    disabledDate: { type: Function, default: void 0 },
+    weekStartsOn: { type: Number, default: void 0 },
+    now: { type: Date, default: void 0 },
+    rangeValue: {
+      type: Array,
+      default: void 0
+    },
+    locale: { type: Object, default: void 0 },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "update:mode", "change", "panel-change"],
+  setup(props, { emit, attrs, expose }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const localeCode = computed(() => mergedLocale.value?.locale);
+    const dir = computed(() => getLocaleDirection(mergedLocale.value));
+    const labels = computed(() => getCalendarLabels(mergedLocale.value));
+    const weekStartsOn = computed(() => props.weekStartsOn ?? getWeekStartsOn(localeCode.value));
+    const weekdayNames = computed(() => getShortDayNames(localeCode.value, weekStartsOn.value));
+    const monthNames = computed(() => getShortMonthNames(localeCode.value));
+    const clientNow = ref(null);
+    onMounted(() => {
+      if (!props.now) clientNow.value = /* @__PURE__ */ new Date();
+    });
+    const today = computed(() => props.now ?? clientNow.value);
+    const innerSelected = ref(toCalendarDate(props.defaultValue) ?? null);
+    const selected = computed(
+      () => props.modelValue !== void 0 ? toCalendarDate(props.modelValue) : innerSelected.value
+    );
+    const innerMode = ref(props.defaultMode ?? "month");
+    const mode = computed(() => props.mode ?? innerMode.value);
+    const view = ref(getInitialCalendarView(selected.value, today.value ?? props.now));
+    const followedYmd = ref(selected.value ? toIsoDate(selected.value) : null);
+    watch(
+      () => selected.value ? toIsoDate(selected.value) : null,
+      (ymd) => {
+        const next = followCalendarValue(view.value, selected.value, followedYmd.value);
+        followedYmd.value = ymd;
+        if (next) view.value = next;
+      }
+    );
+    const days = computed(
+      () => getMonthDays(view.value.viewYear, view.value.viewMonth, weekStartsOn.value)
+    );
+    const weeks = computed(() => chunkDaysIntoWeeks(days.value));
+    const monthRows = computed(() => chunkMonths(monthNames.value));
+    function emitPanel(nextView, nextMode) {
+      emit("panel-change", panelDate(nextView), nextMode);
+    }
+    function navigate(nextView) {
+      view.value = nextView;
+      emitPanel(nextView, mode.value);
+    }
+    function commitSelected(date) {
+      if (props.modelValue === void 0) innerSelected.value = date;
+      emit("update:modelValue", date);
+      emit("change", date);
+    }
+    function selectDay(date) {
+      const result = selectCalendarDay(date, props.disabledDate);
+      if (!result) return;
+      const next = toCalendarDate(result.iso);
+      if (!next) return;
+      view.value = { viewYear: result.viewYear, viewMonth: result.viewMonth };
+      commitSelected(next);
+    }
+    function selectMonth(monthIdx) {
+      const result = selectCalendarMonth(view.value.viewYear, monthIdx, props.disabledDate);
+      if (!result) return;
+      view.value = { viewYear: view.value.viewYear, viewMonth: monthIdx };
+      if (props.mode === void 0) innerMode.value = "month";
+      emit("update:mode", "month");
+      commitSelected(result.date);
+      emit("panel-change", result.date, "month");
+    }
+    function toggleMode() {
+      const next = mode.value === "month" ? "year" : "month";
+      if (props.mode === void 0) innerMode.value = next;
+      emit("update:mode", next);
+      emitPanel(view.value, next);
+    }
+    const dayGridEl = ref(null);
+    const monthGridEl = ref(null);
+    const rootEl = ref(null);
+    const activeIso = ref(null);
+    const activeMonthIdx = ref(null);
+    const titleId = useId();
+    function handleDayGridKeyDown(event) {
+      const action = getCalendarDayKeyAction(event.key, dir.value, event.altKey);
+      if (action.kind === "none") return;
+      event.preventDefault();
+      const roving = resolveCalendarRovingIso({
+        days: days.value,
+        selected: selected.value,
+        today: today.value,
+        view: view.value,
+        disabledDate: props.disabledDate,
+        activeIso: activeIso.value
+      });
+      const currentIso = event.target.getAttribute("data-date") ?? roving;
+      if (!currentIso) return;
+      const result = moveCalendarDayFocus({
+        currentIso,
+        kind: action.kind,
+        delta: action.delta,
+        weekStartsOn: weekStartsOn.value,
+        disabledDate: props.disabledDate
+      });
+      if (!result) return;
+      activeIso.value = result.iso;
+      if (result.viewYear !== view.value.viewYear || result.viewMonth !== view.value.viewMonth) {
+        navigate({ viewYear: result.viewYear, viewMonth: result.viewMonth });
+        nextTick(() => {
+          dayGridEl.value?.querySelector(`button[data-date="${result.iso}"]`)?.focus();
+        });
+        return;
+      }
+      dayGridEl.value?.querySelector(`button[data-date="${result.iso}"]`)?.focus();
+    }
+    function handleMonthKeyDown(event, idx) {
+      const action = getCalendarMonthKeyAction(event.key, dir.value);
+      if (action.kind === "none") return;
+      event.preventDefault();
+      const next = moveCalendarMonthFocus({
+        current: idx,
+        kind: action.kind,
+        delta: action.delta,
+        viewYear: view.value.viewYear,
+        disabledDate: props.disabledDate
+      });
+      if (next == null) return;
+      activeMonthIdx.value = next;
+      monthGridEl.value?.querySelectorAll('button[role="gridcell"]')[next]?.focus();
+    }
+    expose({
+      focus: () => {
+        const iso = resolveCalendarRovingIso({
+          days: days.value,
+          selected: selected.value,
+          today: today.value,
+          view: view.value,
+          disabledDate: props.disabledDate,
+          activeIso: activeIso.value
+        });
+        const el = iso ? dayGridEl.value?.querySelector(`button[data-date="${iso}"]`) : null;
+        (el ?? rootEl.value)?.focus?.();
+      }
+    });
+    return () => {
+      const attrRecord = attrs;
+      const containerClass = classNames(
+        getCalendarContainerClasses(!!props.fullscreen),
+        props.className,
+        coerceClassValue(attrRecord.class)
+      );
+      const title = mode.value === "month" ? formatMonthYear(view.value.viewYear, view.value.viewMonth, localeCode.value) : `${view.value.viewYear}`;
+      const prevLabel = mode.value === "month" ? labels.value.previousMonth : labels.value.previousYear;
+      const nextLabel = mode.value === "month" ? labels.value.nextMonth : labels.value.nextYear;
+      const prevChar = dir.value === "rtl" ? "\u203A" : "\u2039";
+      const nextChar = dir.value === "rtl" ? "\u2039" : "\u203A";
+      const rovingDayIso = resolveCalendarRovingIso({
+        days: days.value,
+        selected: selected.value,
+        today: today.value,
+        view: view.value,
+        disabledDate: props.disabledDate,
+        activeIso: activeIso.value
+      });
+      const rovingMonthIdx = resolveCalendarRovingMonth({
+        viewMonth: view.value.viewMonth,
+        viewYear: view.value.viewYear,
+        disabledDate: props.disabledDate,
+        activeMonthIdx: activeMonthIdx.value
+      });
+      const rangeStart = props.rangeValue?.[0] ?? null;
+      const rangeEnd = props.rangeValue?.[1] ?? null;
+      const header = h("div", { class: calendarHeaderClasses }, [
+        h(
+          "button",
+          {
+            type: "button",
+            class: calendarNavButtonClasses,
+            "aria-label": prevLabel,
+            onClick: () => navigate(
+              mode.value === "month" ? shiftCalendarMonth(view.value, -1) : shiftCalendarYear(view.value, -1)
+            )
+          },
+          prevChar
+        ),
+        h(
+          "button",
+          {
+            type: "button",
+            id: titleId,
+            class: calendarTitleClasses,
+            onClick: toggleMode
+          },
+          title
+        ),
+        h(
+          "button",
+          {
+            type: "button",
+            class: calendarNavButtonClasses,
+            "aria-label": nextLabel,
+            onClick: () => navigate(
+              mode.value === "month" ? shiftCalendarMonth(view.value, 1) : shiftCalendarYear(view.value, 1)
+            )
+          },
+          nextChar
+        )
+      ]);
+      let body;
+      if (mode.value === "year") {
+        body = h(
+          "div",
+          {
+            class: "grid grid-cols-1 gap-2",
+            role: "grid",
+            "aria-colcount": 3,
+            "aria-labelledby": titleId,
+            ref: monthGridEl
+          },
+          monthRows.value.map(
+            (row, ri) => h(
+              "div",
+              { key: ri, class: "grid grid-cols-3 gap-2", role: "row" },
+              row.map((name, ci) => {
+                const i = ri * 3 + ci;
+                const isDisabled = isCalendarMonthDisabled(
+                  view.value.viewYear,
+                  i,
+                  props.disabledDate
+                );
+                return h(
+                  "button",
+                  {
+                    key: i,
+                    type: "button",
+                    role: "gridcell",
+                    "aria-selected": view.value.viewMonth === i,
+                    disabled: isDisabled,
+                    tabindex: rovingMonthIdx === i && !isDisabled ? 0 : -1,
+                    class: getCalendarMonthClasses({
+                      isSelected: view.value.viewMonth === i,
+                      isDisabled,
+                      isActive: activeMonthIdx.value === i
+                    }),
+                    onClick: () => selectMonth(i),
+                    onFocus: () => activeMonthIdx.value = i,
+                    onKeydown: (event) => handleMonthKeyDown(event, i)
+                  },
+                  name
+                );
+              })
+            )
+          )
+        );
+      } else {
+        const weekdayRow = h(
+          "div",
+          { class: calendarGridClasses, role: "row" },
+          weekdayNames.value.map(
+            (wd) => h("div", { key: wd, class: calendarWeekdayClasses, role: "columnheader" }, wd)
+          )
+        );
+        const weekRows = weeks.value.map(
+          (week, wi) => h(
+            "div",
+            { key: wi, class: calendarGridClasses, role: "row" },
+            week.map((date) => {
+              const iso = toIsoDate(date);
+              const isCurrentMonth = date.getMonth() === view.value.viewMonth;
+              const isSelected = selected.value ? isSameDay(date, selected.value) : false;
+              const isRangeStart = rangeStart ? isSameDay(date, rangeStart) : false;
+              const isRangeEnd = rangeEnd ? isSameDay(date, rangeEnd) : false;
+              const isInRange = Boolean(
+                rangeStart && rangeEnd && date >= rangeStart && date <= rangeEnd && !isRangeStart && !isRangeEnd
+              );
+              const isTodayDate = today.value ? isSameDay(date, today.value) : false;
+              const isDisabled = isCalendarDateDisabled(date, props.disabledDate);
+              return h(
+                "button",
+                {
+                  key: iso,
+                  type: "button",
+                  role: "gridcell",
+                  "data-date": iso,
+                  "aria-label": formatCalendarDayLabel(date, localeCode.value),
+                  "aria-selected": isSelected || isRangeStart || isRangeEnd,
+                  "aria-current": isTodayDate ? "date" : void 0,
+                  disabled: isDisabled,
+                  tabindex: rovingDayIso === iso && !isDisabled ? 0 : -1,
+                  class: getCalendarDayClasses({
+                    isSelected,
+                    isToday: isTodayDate,
+                    isCurrentMonth,
+                    isDisabled,
+                    isActive: activeIso.value === iso,
+                    isInRange,
+                    isRangeStart,
+                    isRangeEnd
+                  }),
+                  onClick: () => selectDay(date),
+                  onFocus: () => activeIso.value = iso
+                },
+                formatCalendarDayNumber(date, localeCode.value)
+              );
+            })
+          )
+        );
+        body = h(
+          "div",
+          {
+            role: "grid",
+            "aria-rowcount": 7,
+            "aria-colcount": 7,
+            "aria-labelledby": titleId,
+            ref: dayGridEl,
+            onKeydown: handleDayGridKeyDown
+          },
+          [weekdayRow, ...weekRows]
+        );
+      }
+      const { class: _class, style: attrStyle, ...restAttrs } = attrRecord;
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          ref: rootEl,
+          dir: dir.value,
+          class: containerClass,
+          style: mergeStyleValues(attrStyle),
+          "data-tiger": "calendar"
+        },
+        [header, body]
+      );
+    };
+  }
+});
+var Calendar_default = Calendar;
+
+export {
+  Calendar,
+  Calendar_default
+};

package/dist/chunk-XEOI2KHJ.mjs

@@ -0,0 +1,233 @@
+import {
+  Modal
+} from "./chunk-4RJPEIBE.mjs";
+import {
+  ImageCropper
+} from "./chunk-7WK6OSB5.mjs";
+import {
+  Icon
+} from "./chunk-OGKNRXUA.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/CropUpload.ts
+import { defineComponent, h, ref, computed, onBeforeUnmount, inject, useId } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  createCropUploadSession,
+  formatBytes,
+  getCropUploadTriggerClasses,
+  getImageEditorLabels,
+  handleUploadDragLeave,
+  handleUploadDragOver,
+  handleUploadDrop,
+  interpolateUploadLabel,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  withCropFile
+} from "@expcat/tigercat-core";
+var CropUpload = defineComponent({
+  name: "TigerCropUpload",
+  inheritAttrs: false,
+  props: {
+    locale: { type: Object, default: void 0 },
+    accept: { type: String, default: "image/*" },
+    disabled: { type: Boolean, default: false },
+    maxSize: { type: Number, default: void 0 },
+    cropperProps: {
+      type: Object,
+      default: void 0
+    },
+    modalTitle: { type: String, default: void 0 },
+    modalWidth: { type: Number, default: 520 },
+    className: { type: String, default: void 0 },
+    style: { type: Object, default: void 0 }
+  },
+  emits: ["crop-complete", "error"],
+  setup(props, { slots, emit, attrs, expose }) {
+    const config = useTigerConfig();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getImageEditorLabels(mergedLocale.value));
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const autoId = useId();
+    const triggerId = computed(() => formItemControl?.id.value ?? `tiger-crop-upload-${autoId}`);
+    const inputId = computed(() => `${triggerId.value}-input`);
+    const fileInputRef = ref(null);
+    const triggerRef = ref(null);
+    const cropperRef = ref(null);
+    const isDragging = ref(false);
+    const sessionState = ref({
+      generation: 0,
+      modalOpen: false,
+      imageSrc: "",
+      originalFile: null,
+      cropperReady: false,
+      cropping: false
+    });
+    const session = createCropUploadSession({
+      getAccept: () => props.accept,
+      getMaxSize: () => props.maxSize,
+      getSizeError: (limit) => interpolateUploadLabel(labels.value.fileTooLargeText, { maxSize: formatBytes(limit) }),
+      getTypeError: () => labels.value.fileTypeRejectedText,
+      onState: (state) => {
+        sessionState.value = state;
+      },
+      onError: (error) => emit("error", error)
+    });
+    onBeforeUnmount(() => session.dispose());
+    expose({
+      focus: () => triggerRef.value?.focus?.()
+    });
+    const handleFiles = (file) => {
+      if (effectiveDisabled.value) return;
+      session.selectFile(file);
+      if (fileInputRef.value) fileInputRef.value.value = "";
+    };
+    const handleConfirm = async () => {
+      if (!session.beginCrop()) return;
+      try {
+        const raw = await cropperRef.value?.getCropResult();
+        if (!raw) {
+          session.endCrop();
+          return;
+        }
+        const originalName = session.getState().originalFile?.name ?? raw.file.name;
+        const result = withCropFile(raw, originalName);
+        emit("crop-complete", result);
+        formItemControl?.onChange(result.file);
+        session.close();
+      } catch (error) {
+        emit("error", error);
+        session.endCrop();
+      }
+    };
+    const handleCancel = () => session.close();
+    return () => {
+      const forwarded = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const cropper = props.cropperProps ?? {};
+      const { onReady: userReady, locale: cropperLocale, ...restCropper } = cropper;
+      const trigger = h(
+        "label",
+        {
+          ...forwarded,
+          ref: triggerRef,
+          id: triggerId.value,
+          for: effectiveDisabled.value ? void 0 : inputId.value,
+          class: getCropUploadTriggerClasses(
+            effectiveDisabled.value,
+            classNames(props.className, coerceClassValue(attrs.class))
+          ),
+          style: mergeStyleValues(attrs.style, props.style),
+          "aria-disabled": effectiveDisabled.value || void 0,
+          "aria-describedby": mergeAriaDescribedBy(
+            typeof forwarded["aria-describedby"] === "string" ? forwarded["aria-describedby"] : void 0,
+            formItemControl?.describedBy.value
+          ),
+          "aria-label": slots.default ? void 0 : labels.value.selectImageAriaLabel,
+          onDragover: (event) => {
+            const result = handleUploadDragOver(event, effectiveDisabled.value);
+            if (result.handled) isDragging.value = result.isDragging;
+          },
+          onDragleave: (event) => {
+            const result = handleUploadDragLeave(
+              event,
+              effectiveDisabled.value,
+              event.currentTarget
+            );
+            if (result.handled) isDragging.value = result.isDragging;
+          },
+          onDrop: (event) => {
+            const result = handleUploadDrop(event, effectiveDisabled.value);
+            if (!result.handled) return;
+            isDragging.value = false;
+            handleFiles(result.files[0]);
+          }
+        },
+        slots.default ? slots.default() : [
+          h(Icon, { name: "plus", class: "w-5 h-5", "aria-hidden": true }),
+          h("span", null, labels.value.selectImageText)
+        ]
+      );
+      return h("div", { class: "tiger-crop-upload inline-block" }, [
+        h("input", {
+          ref: fileInputRef,
+          id: inputId.value,
+          type: "file",
+          accept: props.accept,
+          disabled: effectiveDisabled.value,
+          class: "sr-only",
+          tabindex: -1,
+          onChange: (event) => handleFiles(event.target.files?.[0])
+        }),
+        trigger,
+        h(
+          Modal,
+          {
+            open: sessionState.value.modalOpen,
+            width: props.modalWidth,
+            title: props.modalTitle ?? labels.value.cropModalTitle,
+            closable: true,
+            maskClosable: false,
+            destroyOnClose: true,
+            onClose: handleCancel,
+            "onUpdate:open": (open) => {
+              if (!open) handleCancel();
+            }
+          },
+          {
+            default: () => sessionState.value.imageSrc ? h(ImageCropper, {
+              ref: cropperRef,
+              src: sessionState.value.imageSrc,
+              locale: props.locale ?? cropperLocale,
+              ...restCropper,
+              onReady: () => {
+                session.markReady();
+                userReady?.();
+              },
+              onError: (error) => session.markLoadError(error)
+            }) : null,
+            footer: () => h("div", { class: "flex items-center justify-end gap-3" }, [
+              h(
+                Button,
+                { variant: "secondary", onClick: handleCancel },
+                { default: () => labels.value.cropCancelText }
+              ),
+              h(
+                Button,
+                {
+                  onClick: handleConfirm,
+                  loading: sessionState.value.cropping,
+                  disabled: !sessionState.value.cropperReady
+                },
+                { default: () => labels.value.cropConfirmText }
+              )
+            ])
+          }
+        )
+      ]);
+    };
+  }
+});
+var CropUpload_default = CropUpload;
+
+export {
+  CropUpload,
+  CropUpload_default
+};