@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-EZXW4HIZ.mjs

@@ -0,0 +1,149 @@
+import { defineComponent, ref, computed, h } from 'vue';
+import { getMonthDays, classNames, getCalendarContainerClasses, coerceClassValue, calendarHeaderClasses, calendarNavButtonClasses, calendarTitleClasses, MONTHS, getCalendarMonthClasses, WEEKDAYS, calendarWeekdayClasses, isSameDay, getCalendarDayClasses } from '@expcat/tigercat-core';
+
+// src/components/Calendar.ts
+var Calendar = defineComponent({
+  name: "TigerCalendar",
+  props: {
+    modelValue: { type: Date, default: void 0 },
+    mode: { type: String, default: "month" },
+    fullscreen: { type: Boolean, default: false },
+    disabledDate: { type: Function, default: void 0 }
+  },
+  emits: ["update:modelValue", "change", "panel-change"],
+  setup(props, { emit, attrs }) {
+    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);
+    }
+    return () => {
+      const containerClass = classNames(
+        getCalendarContainerClasses(!!props.fullscreen),
+        coerceClassValue(attrs.class)
+      );
+      const header = h("div", { class: calendarHeaderClasses }, [
+        h(
+          "button",
+          {
+            type: "button",
+            class: calendarNavButtonClasses,
+            "aria-label": props.mode === "month" ? "Previous month" : "Previous year",
+            onClick: props.mode === "month" ? prevMonth : prevYear
+          },
+          "\u2039"
+        ),
+        h(
+          "span",
+          { class: calendarTitleClasses },
+          props.mode === "month" ? `${MONTHS[viewMonth.value]} ${viewYear.value}` : `${viewYear.value}`
+        ),
+        h(
+          "button",
+          {
+            type: "button",
+            class: calendarNavButtonClasses,
+            "aria-label": props.mode === "month" ? "Next month" : "Next year",
+            onClick: props.mode === "month" ? nextMonth : nextYear
+          },
+          "\u203A"
+        )
+      ]);
+      let body;
+      if (props.mode === "year") {
+        body = h(
+          "div",
+          { class: "grid grid-cols-3 gap-2" },
+          MONTHS.map(
+            (m, i) => h(
+              "div",
+              {
+                key: i,
+                class: getCalendarMonthClasses(viewMonth.value === i),
+                onClick: () => selectMonth(i)
+              },
+              m
+            )
+          )
+        );
+      } else {
+        const weekdayRow = h(
+          "div",
+          { class: "grid grid-cols-7" },
+          WEEKDAYS.map((wd) => h("div", { key: wd, class: calendarWeekdayClasses }, wd))
+        );
+        const dayGrid = h(
+          "div",
+          { class: "grid grid-cols-7" },
+          days.value.map((date, i) => {
+            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);
+            return h(
+              "div",
+              {
+                key: i,
+                class: "flex items-center justify-center py-0.5"
+              },
+              [
+                h(
+                  "div",
+                  {
+                    class: getCalendarDayClasses(
+                      isSelected,
+                      isTodayDate,
+                      isCurrentMonth,
+                      isDisabled
+                    ),
+                    onClick: () => selectDay(date)
+                  },
+                  date.getDate()
+                )
+              ]
+            );
+          })
+        );
+        body = h("div", {}, [weekdayRow, dayGrid]);
+      }
+      return h("div", { class: containerClass, role: "group" }, [header, body]);
+    };
+  }
+});
+var Calendar_default = Calendar;
+
+export { Calendar, Calendar_default };

package/dist/chunk-FIV4PKWT.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/QRCode.ts
+var QRCode = vue.defineComponent({
+  name: "TigerQRCode",
+  props: {
+    value: { type: String, required: true },
+    size: { type: Number, default: 128 },
+    color: { type: String, default: "#000000" },
+    bgColor: { type: String, default: "#ffffff" },
+    level: { type: String, default: "M" },
+    status: { type: String, default: "active" }
+  },
+  emits: ["refresh"],
+  setup(props, { emit, attrs }) {
+    const matrix = vue.computed(() => tigercatCore.generateQRMatrix(props.value));
+    const moduleSize = vue.computed(() => {
+      const mLen = matrix.value.length;
+      return props.size / mLen;
+    });
+    return () => {
+      const containerClass = tigercatCore.classNames(tigercatCore.qrcodeContainerClasses, tigercatCore.coerceClassValue(attrs.class));
+      const mSize = moduleSize.value;
+      const modules = matrix.value;
+      const rects = modules.flatMap(
+        (row, r) => row.map(
+          (cell, c) => cell ? vue.h("rect", {
+            key: `${r}-${c}`,
+            x: c * mSize,
+            y: r * mSize,
+            width: mSize,
+            height: mSize,
+            fill: props.color
+          }) : null
+        ).filter(Boolean)
+      );
+      const svg = vue.h(
+        "svg",
+        {
+          width: props.size,
+          height: props.size,
+          viewBox: `0 0 ${props.size} ${props.size}`,
+          xmlns: "http://www.w3.org/2000/svg",
+          role: "img",
+          "aria-label": "QR Code"
+        },
+        [vue.h("rect", { width: props.size, height: props.size, fill: props.bgColor }), ...rects]
+      );
+      const children = [svg];
+      if (props.status === "expired") {
+        children.push(
+          vue.h("div", { class: tigercatCore.qrcodeOverlayClasses }, [
+            vue.h("span", { class: tigercatCore.qrcodeExpiredTextClasses }, "QR code expired"),
+            vue.h(
+              "span",
+              {
+                class: tigercatCore.qrcodeRefreshClasses,
+                onClick: () => emit("refresh")
+              },
+              "Refresh"
+            )
+          ])
+        );
+      }
+      if (props.status === "loading") {
+        children.push(
+          vue.h("div", { class: tigercatCore.qrcodeOverlayClasses }, [
+            vue.h("span", { class: "text-sm text-gray-500" }, "Loading...")
+          ])
+        );
+      }
+      return vue.h(
+        "div",
+        {
+          class: containerClass,
+          style: { width: `${props.size}px`, height: `${props.size}px` }
+        },
+        children
+      );
+    };
+  }
+});
+var QRCode_default = QRCode;
+
+exports.QRCode = QRCode;
+exports.QRCode_default = QRCode_default;

package/dist/chunk-FOF7UBMU.js

@@ -0,0 +1,180 @@
+'use strict';
+
+var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
+var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
+var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
+var chunkEPE6OOV7_js = require('./chunk-EPE6OOV7.js');
+var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var SunburstChart = vue.defineComponent({
+  name: "TigerSunburstChart",
+  props: {
+    width: { type: Number, default: 320 },
+    height: { type: Number, default: 320 },
+    padding: { type: [Number, Object], default: 24 },
+    data: { type: Array, required: true },
+    innerRadiusRatio: { type: Number, default: 0 },
+    showLabels: { type: Boolean, default: true },
+    colors: { type: Array },
+    // Interaction
+    hoverable: { type: Boolean, default: false },
+    hoveredIndex: { type: Number, default: void 0 },
+    activeOpacity: { type: Number, default: 1 },
+    inactiveOpacity: { type: Number, default: 0.25 },
+    selectable: { type: Boolean, default: false },
+    selectedIndex: { type: Number, default: void 0 },
+    // Legend
+    showLegend: { type: Boolean, default: false },
+    legendPosition: { type: String, default: "bottom" },
+    legendMarkerSize: { type: Number, default: 10 },
+    legendGap: { type: Number, default: 8 },
+    // Tooltip
+    showTooltip: { type: Boolean, default: true },
+    tooltipFormatter: {
+      type: Function
+    },
+    // a11y
+    title: { type: String },
+    desc: { type: String },
+    className: { type: String }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "arc-click", "arc-hover"],
+  setup(props, { emit }) {
+    const {
+      tooltipPosition,
+      resolvedHoveredIndex,
+      activeIndex,
+      handleMouseEnter,
+      handleMouseMove,
+      handleMouseLeave,
+      handleClick,
+      handleLegendClick,
+      handleLegendHover,
+      handleLegendLeave,
+      wrapperClasses
+    } = chunkFLAJKB2O_js.useChartInteraction({
+      hoverable: vue.computed(() => props.hoverable),
+      hoveredIndexProp: () => props.hoveredIndex,
+      selectable: vue.computed(() => props.selectable),
+      selectedIndexProp: () => props.selectedIndex,
+      activeOpacity: vue.computed(() => props.activeOpacity),
+      inactiveOpacity: vue.computed(() => props.inactiveOpacity),
+      legendPosition: vue.computed(() => props.legendPosition),
+      emit,
+      getData: (index) => {
+        const arc = arcs.value[index];
+        return arc ? { label: arc.label, value: arc.value } : {};
+      },
+      eventNames: { hover: "arc-hover", click: "arc-click" }
+    });
+    const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
+    const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
+    const outerRadius = vue.computed(() => Math.min(innerRect.value.width, innerRect.value.height) / 2);
+    const innerRadius = vue.computed(
+      () => outerRadius.value * Math.max(0, Math.min(1, props.innerRadiusRatio))
+    );
+    const cx = vue.computed(() => innerRect.value.width / 2);
+    const cy = vue.computed(() => innerRect.value.height / 2);
+    const arcs = vue.computed(
+      () => tigercatCore.computeSunburstArcs(props.data, {
+        cx: cx.value,
+        cy: cy.value,
+        innerRadius: innerRadius.value,
+        outerRadius: outerRadius.value,
+        colors: palette.value
+      })
+    );
+    const rootArcs = vue.computed(() => arcs.value.filter((a) => a.depth === 0));
+    const legendItems = vue.computed(
+      () => tigercatCore.buildChartLegendItems({
+        data: rootArcs.value,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        getLabel: (d) => d.label,
+        getColor: (d) => d.color
+      })
+    );
+    const tooltipContent = vue.computed(
+      () => tigercatCore.resolveChartTooltipContent(
+        resolvedHoveredIndex.value,
+        arcs.value,
+        void 0,
+        (arc) => `${arc.label}: ${arc.value}`
+      )
+    );
+    return () => {
+      const interactive = props.hoverable || props.selectable;
+      const chart = vue.h(
+        chunkFCV4ML6I_js.ChartCanvas,
+        {
+          width: props.width,
+          height: props.height,
+          padding: props.padding,
+          title: props.title,
+          desc: props.desc,
+          className: tigercatCore.classNames(props.className)
+        },
+        {
+          default: () => vue.h(
+            chunkHBFFINAI_js.ChartSeries,
+            { data: arcs.value, type: "sunburst" },
+            {
+              default: () => arcs.value.map((arc) => {
+                const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex.value, {
+                  activeOpacity: props.activeOpacity,
+                  inactiveOpacity: props.inactiveOpacity
+                });
+                return vue.h("path", {
+                  key: `arc-${arc.index}`,
+                  d: arc.path,
+                  fill: arc.color,
+                  opacity,
+                  stroke: "#ffffff",
+                  "stroke-width": 1,
+                  class: tigercatCore.classNames(interactive && "cursor-pointer"),
+                  style: { transition: "opacity 0.2s ease-out" },
+                  tabindex: props.selectable ? 0 : void 0,
+                  role: props.selectable ? "button" : "img",
+                  "aria-label": arc.label,
+                  onMouseenter: (e) => handleMouseEnter(arc.index, e),
+                  onMousemove: handleMouseMove,
+                  onMouseleave: handleMouseLeave,
+                  onClick: () => handleClick(arc.index)
+                });
+              })
+            }
+          )
+        }
+      );
+      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
+        content: tooltipContent.value,
+        visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        x: tooltipPosition.value.x,
+        y: tooltipPosition.value.y
+      }) : null;
+      if (!props.showLegend) {
+        return vue.h("div", { class: "inline-block relative" }, [chart, tooltip]);
+      }
+      return vue.h("div", { class: wrapperClasses.value }, [
+        chart,
+        vue.h(chunkBKTQ6RWR_js.ChartLegend, {
+          items: legendItems.value,
+          position: props.legendPosition,
+          markerSize: props.legendMarkerSize,
+          gap: props.legendGap,
+          interactive,
+          onItemClick: handleLegendClick,
+          onItemHover: handleLegendHover,
+          onItemLeave: handleLegendLeave
+        }),
+        tooltip
+      ]);
+    };
+  }
+});
+var SunburstChart_default = SunburstChart;
+
+exports.SunburstChart = SunburstChart;
+exports.SunburstChart_default = SunburstChart_default;

package/dist/{chunk-SKV2HHBC.js → chunk-FUGSQXFR.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkOOKS4KMK_js = require('./chunk-OOKS4KMK.js');
+var chunkJCMGBKS6_js = require('./chunk-JCMGBKS6.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -62,6 +62,13 @@ var Alert = vue.defineComponent({
       type: String,
       default: "Close alert"
     },
+    /**
+     * Auto-close duration in milliseconds. 0 or undefined to disable.
+     */
+    duration: {
+      type: Number,
+      default: void 0
+    },
     /**
      * Additional CSS classes
      */
@@ -75,6 +82,22 @@ var Alert = vue.defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    /**
+     * Whether to display as full-width banner
+     * @since 0.9.0
+     */
+    banner: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether to show countdown progress bar
+     * @since 0.9.0
+     */
+    showCountdown: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["close"],
@@ -86,7 +109,8 @@ var Alert = vue.defineComponent({
         tigercatCore.alertBaseClasses,
         tigercatCore.alertSizeClasses[props.size],
         colorScheme.value.bg,
-        colorScheme.value.border
+        colorScheme.value.border,
+        props.banner && tigercatCore.alertBannerClasses
       )
     );
     const iconClasses = vue.computed(
@@ -112,6 +136,28 @@ var Alert = vue.defineComponent({
         visible.value = false;
       }
     };
+    let autoCloseTimer;
+    const countdownProgress = vue.ref(100);
+    let countdownInterval;
+    vue.onMounted(() => {
+      if (props.duration && props.duration > 0 && props.closable) {
+        autoCloseTimer = setTimeout(() => {
+          visible.value = false;
+          emit("close", new MouseEvent("click"));
+        }, props.duration);
+        if (props.showCountdown) {
+          const startTime = Date.now();
+          countdownInterval = setInterval(() => {
+            const elapsed = Date.now() - startTime;
+            countdownProgress.value = Math.max(0, 100 - elapsed / props.duration * 100);
+          }, 50);
+        }
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      if (autoCloseTimer) clearTimeout(autoCloseTimer);
+      if (countdownInterval) clearInterval(countdownInterval);
+    });
     return () => {
       if (!visible.value) {
         return null;
@@ -123,7 +169,11 @@ var Alert = vue.defineComponent({
       if (props.showIcon) {
         const iconPath = tigercatCore.getAlertIconPath(props.type);
         children.push(
-          vue.h("div", { class: tigercatCore.alertIconContainerClasses }, chunkOOKS4KMK_js.createStatusIcon(iconPath, iconClasses.value))
+          vue.h(
+            "div",
+            { class: tigercatCore.alertIconContainerClasses },
+            chunkJCMGBKS6_js.createStatusIcon(iconPath, iconClasses.value)
+          )
         );
       }
       const contentChildren = [];
@@ -157,10 +207,20 @@ var Alert = vue.defineComponent({
               "aria-label": props.closeAriaLabel,
               type: "button"
             },
-            chunkOOKS4KMK_js.createStatusIcon(tigercatCore.alertCloseIconPath, "h-4 w-4")
+            chunkJCMGBKS6_js.createStatusIcon(tigercatCore.alertCloseIconPath, "h-4 w-4")
           )
         );
       }
+      if (props.showCountdown && props.duration && props.duration > 0 && props.closable) {
+        children.push(
+          vue.h("div", { class: tigercatCore.alertCountdownContainerClasses }, [
+            vue.h("div", {
+              class: tigercatCore.classNames(tigercatCore.alertCountdownBarClasses, tigercatCore.alertCountdownColorClasses[props.type]),
+              style: { width: `${countdownProgress.value}%` }
+            })
+          ])
+        );
+      }
       return vue.h(
         "div",
         {

package/dist/chunk-G3SWTL27.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var chunkJCMGBKS6_js = require('./chunk-JCMGBKS6.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var Result = vue.defineComponent({
+  name: "TigerResult",
+  inheritAttrs: false,
+  props: {
+    status: {
+      type: String,
+      default: "info"
+    },
+    title: {
+      type: String,
+      default: void 0
+    },
+    subTitle: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const colors = vue.computed(() => tigercatCore.getResultColorScheme(props.status));
+    const iconPath = vue.computed(() => tigercatCore.getResultIconPath(props.status));
+    const httpLabel = vue.computed(() => tigercatCore.getResultHttpLabel(props.status));
+    const iconContainerClasses = vue.computed(
+      () => tigercatCore.classNames(tigercatCore.resultIconContainerBaseClasses, colors.value.iconBg)
+    );
+    const iconSvgClasses = vue.computed(() => tigercatCore.classNames(tigercatCore.resultIconClasses, colors.value.iconColor));
+    const titleCls = vue.computed(() => tigercatCore.classNames(tigercatCore.resultTitleClasses, colors.value.titleColor));
+    return () => {
+      const attrsRecord = attrs;
+      const children = [];
+      if (slots.icon) {
+        children.push(vue.h("div", { class: iconContainerClasses.value }, slots.icon()));
+      } else {
+        const iconContent = [];
+        if (httpLabel.value) {
+          iconContent.push(
+            vue.h(
+              "span",
+              {
+                class: tigercatCore.classNames("text-5xl font-bold", colors.value.iconColor)
+              },
+              httpLabel.value
+            )
+          );
+        } else {
+          iconContent.push(chunkJCMGBKS6_js.createStatusIcon(iconPath.value, iconSvgClasses.value));
+        }
+        children.push(vue.h("div", { class: iconContainerClasses.value }, iconContent));
+      }
+      if (props.title || slots.title) {
+        children.push(
+          vue.h("div", { class: titleCls.value }, slots.title ? slots.title() : props.title)
+        );
+      }
+      if (props.subTitle || slots.subTitle) {
+        children.push(
+          vue.h(
+            "div",
+            { class: tigercatCore.resultSubTitleClasses },
+            slots.subTitle ? slots.subTitle() : props.subTitle
+          )
+        );
+      }
+      if (slots.extra) {
+        children.push(vue.h("div", { class: tigercatCore.resultExtraClasses }, slots.extra()));
+      }
+      if (slots.default) {
+        children.push(vue.h("div", { class: "mt-6 w-full" }, slots.default()));
+      }
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          class: tigercatCore.classNames(
+            tigercatCore.resultBaseClasses,
+            props.className,
+            tigercatCore.coerceClassValue(attrsRecord.class)
+          ),
+          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style),
+          role: "status"
+        },
+        children
+      );
+    };
+  }
+});
+var Result_default = Result;
+
+exports.Result = Result;
+exports.Result_default = Result_default;