@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/chunk-EXQSRZJX.mjs

@@ -0,0 +1,315 @@
+import { h, defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue';
+import { icon20ViewBox, chevronDownSolidIcon20PathD, closeSolidIcon20PathD, getAllTreeSelectKeys, getTreeSelectDisplayLabel, filterTreeSelectNodes, flattenTreeSelectNodes, classNames, treeSelectBaseClasses, coerceClassValue, getTreeSelectTriggerClasses, treeSelectDropdownClasses, treeSelectSearchClasses, getTreeSelectNodeClasses, chevronRightSolidIcon20PathD, treeSelectEmptyClasses } from '@expcat/tigercat-core';
+
+// src/components/TreeSelect.ts
+var treeSelectInstanceId = 0;
+var ChevronDownIcon = h(
+  "svg",
+  {
+    class: "w-4 h-4 transition-transform",
+    viewBox: icon20ViewBox,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  [
+    h("path", {
+      d: chevronDownSolidIcon20PathD,
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var ClearIcon = h(
+  "svg",
+  {
+    class: "w-4 h-4",
+    viewBox: icon20ViewBox,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  [
+    h("path", {
+      d: closeSolidIcon20PathD,
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var TreeSelect = defineComponent({
+  name: "TigerTreeSelect",
+  props: {
+    modelValue: {
+      type: [String, Number, Array],
+      default: void 0
+    },
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: "Please select"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    showSearch: {
+      type: Boolean,
+      default: false
+    },
+    notFoundText: {
+      type: String,
+      default: "No data"
+    },
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const instanceId = ++treeSelectInstanceId;
+    const listboxId = `tiger-treeselect-listbox-${instanceId}`;
+    const isOpen = ref(false);
+    const searchQuery = ref("");
+    const containerRef = ref(null);
+    const expandedKeys = ref(
+      props.defaultExpandAll ? new Set(getAllTreeSelectKeys(props.treeData)) : /* @__PURE__ */ new Set()
+    );
+    const displayLabel = computed(() => getTreeSelectDisplayLabel(props.treeData, props.modelValue));
+    const showClearButton = computed(
+      () => props.clearable && !props.disabled && props.modelValue !== void 0 && (Array.isArray(props.modelValue) ? props.modelValue.length > 0 : props.modelValue !== "")
+    );
+    const matchedKeys = computed(() => {
+      if (!searchQuery.value) return null;
+      return filterTreeSelectNodes(props.treeData, searchQuery.value);
+    });
+    const effectiveExpandedKeys = computed(() => {
+      if (matchedKeys.value) {
+        return matchedKeys.value;
+      }
+      return expandedKeys.value;
+    });
+    const flatNodes = computed(
+      () => flattenTreeSelectNodes(props.treeData, effectiveExpandedKeys.value)
+    );
+    const visibleNodes = computed(() => {
+      if (!matchedKeys.value) return flatNodes.value;
+      return flatNodes.value.filter((f) => matchedKeys.value.has(f.node.key));
+    });
+    function openDropdown() {
+      if (props.disabled) return;
+      isOpen.value = true;
+    }
+    function closeDropdown() {
+      isOpen.value = false;
+      searchQuery.value = "";
+    }
+    function toggleDropdown() {
+      if (isOpen.value) closeDropdown();
+      else openDropdown();
+    }
+    function toggleExpand(key) {
+      const next = new Set(expandedKeys.value);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      expandedKeys.value = next;
+    }
+    function isSelected(key) {
+      if (props.multiple && Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(key);
+      }
+      return props.modelValue === key;
+    }
+    function handleNodeSelect(node) {
+      if (node.disabled) return;
+      if (props.multiple) {
+        const current = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
+        const idx = current.indexOf(node.key);
+        if (idx >= 0) {
+          current.splice(idx, 1);
+        } else {
+          current.push(node.key);
+        }
+        emit("update:modelValue", current);
+        emit("change", current);
+      } else {
+        emit("update:modelValue", node.key);
+        emit("change", node.key);
+        closeDropdown();
+      }
+    }
+    function handleClear(e) {
+      e.stopPropagation();
+      const val = props.multiple ? [] : void 0;
+      emit("update:modelValue", val);
+      emit("change", val);
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeDropdown();
+      } else if ((e.key === "Enter" || e.key === " ") && !isOpen.value) {
+        e.preventDefault();
+        openDropdown();
+      }
+    }
+    function handleClickOutside(e) {
+      if (containerRef.value && !containerRef.value.contains(e.target)) {
+        closeDropdown();
+      }
+    }
+    watch(isOpen, (val) => {
+      if (val) {
+        document.addEventListener("click", handleClickOutside);
+      } else {
+        document.removeEventListener("click", handleClickOutside);
+      }
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    return () => {
+      const containerClasses = classNames(treeSelectBaseClasses, coerceClassValue(attrs.class));
+      return h("div", { ref: containerRef, class: containerClasses }, [
+        // Trigger
+        h(
+          "button",
+          {
+            type: "button",
+            class: getTreeSelectTriggerClasses(props.size, props.disabled, isOpen.value),
+            role: "combobox",
+            "aria-expanded": String(isOpen.value),
+            "aria-haspopup": "listbox",
+            "aria-controls": isOpen.value ? listboxId : void 0,
+            disabled: props.disabled,
+            onClick: toggleDropdown,
+            onKeydown: handleKeyDown
+          },
+          [
+            h(
+              "span",
+              {
+                class: classNames(
+                  "flex-1 truncate",
+                  !displayLabel.value ? "text-[var(--tiger-treeselect-placeholder,var(--tiger-text-muted,#9ca3af))]" : ""
+                )
+              },
+              displayLabel.value || props.placeholder
+            ),
+            // Clear or chevron
+            showClearButton.value ? h(
+              "span",
+              {
+                class: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
+                "aria-label": "Clear selection",
+                onClick: handleClear
+              },
+              [ClearIcon]
+            ) : h(
+              "span",
+              {
+                class: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-text-muted,#9ca3af)] pointer-events-none"
+              },
+              [ChevronDownIcon]
+            )
+          ]
+        ),
+        // Dropdown
+        isOpen.value ? h(
+          "div",
+          {
+            id: listboxId,
+            role: "listbox",
+            class: treeSelectDropdownClasses
+          },
+          [
+            // Search
+            props.showSearch ? h("input", {
+              type: "text",
+              class: treeSelectSearchClasses,
+              placeholder: "Search...",
+              value: searchQuery.value,
+              "aria-label": "Search tree",
+              onInput: (e) => {
+                searchQuery.value = e.target.value;
+              }
+            }) : null,
+            // Tree nodes
+            visibleNodes.value.length > 0 ? visibleNodes.value.map((flatNode) => {
+              const { node, level, hasChildren, isExpanded } = flatNode;
+              const selected = isSelected(node.key);
+              const indent = level * 20;
+              return h(
+                "div",
+                {
+                  key: node.key,
+                  role: "option",
+                  "aria-selected": selected,
+                  "aria-disabled": node.disabled,
+                  class: getTreeSelectNodeClasses(selected, !!node.disabled, props.size),
+                  style: { paddingLeft: `${indent + 8}px` },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleNodeSelect(node);
+                  }
+                },
+                [
+                  // Expand toggle
+                  hasChildren ? h(
+                    "span",
+                    {
+                      class: classNames(
+                        "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
+                        isExpanded ? "rotate-90" : ""
+                      ),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        toggleExpand(node.key);
+                      }
+                    },
+                    [
+                      h(
+                        "svg",
+                        {
+                          class: "w-3 h-3",
+                          viewBox: icon20ViewBox,
+                          fill: "currentColor"
+                        },
+                        [
+                          h("path", {
+                            d: chevronRightSolidIcon20PathD,
+                            "fill-rule": "evenodd",
+                            "clip-rule": "evenodd"
+                          })
+                        ]
+                      )
+                    ]
+                  ) : h("span", { class: "w-4 mr-1" }),
+                  // Label
+                  h("span", { class: "flex-1 truncate" }, node.label)
+                ]
+              );
+            }) : h("div", { class: treeSelectEmptyClasses }, props.notFoundText)
+          ]
+        ) : null
+      ]);
+    };
+  }
+});
+var TreeSelect_default = TreeSelect;
+
+export { TreeSelect, TreeSelect_default };

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;