@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-3G7QYQYL.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Stepper.ts
+var Stepper = vue.defineComponent({
+  name: "TigerStepper",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    min: { type: Number, default: -Infinity },
+    max: { type: Number, default: Infinity },
+    step: { type: Number, default: 1 },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    precision: { type: Number, default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    function setValue(v) {
+      const clamped = tigercatCore.clampStepperValue(v, props.min, props.max, props.precision);
+      emit("update:modelValue", clamped);
+      emit("change", clamped);
+    }
+    function decrement() {
+      if (props.disabled) return;
+      setValue(props.modelValue - props.step);
+    }
+    function increment() {
+      if (props.disabled) return;
+      setValue(props.modelValue + props.step);
+    }
+    function handleInput(e) {
+      const val = Number(e.target.value);
+      if (!Number.isNaN(val)) setValue(val);
+    }
+    const icon = (d) => vue.h(
+      "svg",
+      {
+        class: "w-4 h-4",
+        viewBox: tigercatCore.stepperIconViewBox,
+        fill: "currentColor"
+      },
+      [vue.h("path", { d, "fill-rule": "evenodd", "clip-rule": "evenodd" })]
+    );
+    return () => {
+      const atMin = props.modelValue <= props.min;
+      const atMax = props.modelValue >= props.max;
+      return vue.h(
+        "div",
+        {
+          class: tigercatCore.classNames(tigercatCore.stepperBaseClasses, tigercatCore.coerceClassValue(attrs.class)),
+          role: "group",
+          "aria-label": "Stepper"
+        },
+        [
+          vue.h(
+            "button",
+            {
+              type: "button",
+              class: tigercatCore.getStepperButtonClasses(props.size, props.disabled || atMin, "left"),
+              disabled: props.disabled || atMin,
+              "aria-label": "Decrease",
+              onClick: decrement
+            },
+            [icon(tigercatCore.minusPathD)]
+          ),
+          vue.h("input", {
+            type: "text",
+            class: tigercatCore.getStepperInputClasses(props.size),
+            value: props.precision !== void 0 ? props.modelValue.toFixed(props.precision) : String(props.modelValue),
+            disabled: props.disabled,
+            "aria-label": "Value",
+            onChange: handleInput
+          }),
+          vue.h(
+            "button",
+            {
+              type: "button",
+              class: tigercatCore.getStepperButtonClasses(props.size, props.disabled || atMax, "right"),
+              disabled: props.disabled || atMax,
+              "aria-label": "Increase",
+              onClick: increment
+            },
+            [icon(tigercatCore.plusPathD)]
+          )
+        ]
+      );
+    };
+  }
+});
+var Stepper_default = Stepper;
+
+exports.Stepper = Stepper;
+exports.Stepper_default = Stepper_default;

package/dist/{chunk-D5CR2P7K.mjs → chunk-3ICMBQPM.mjs}

@@ -1,8 +1,10 @@
 import { DropdownMenu } from './chunk-AN3HKOCS.mjs';
 import { useVueFloating, useVueClickOutside, useVueEscapeKey } from './chunk-CU4M5ABS.mjs';
-import { defineComponent, onMounted, ref, computed, watch, onBeforeUnmount, provide, h } from 'vue';
-import { injectDropdownStyles, classNames, getDropdownContainerClasses, coerceClassValue, mergeStyleValues, getDropdownTriggerClasses, DROPDOWN_ENTER_CLASS, getTransformOrigin, getDropdownChevronClasses, DROPDOWN_CHEVRON_PATH } from '@expcat/tigercat-core';
+import { defineComponent, onMounted, ref, computed, watch, onBeforeUnmount, provide, h, nextTick } from 'vue';
+import { injectDropdownStyles, classNames, getDropdownContainerClasses, coerceClassValue, mergeStyleValues, getDropdownTriggerClasses, DROPDOWN_ENTER_CLASS, getTransformOrigin, getDropdownChevronClasses, DROPDOWN_CHEVRON_PATH, restoreFocus, handleMenuNavigation, captureActiveElement, focusFirstMenuItem } from '@expcat/tigercat-core';
 
+var dropdownIdCounter = 0;
+var createDropdownMenuId = () => `tiger-dropdown-menu-${++dropdownIdCounter}`;
 var DropdownContextKey = /* @__PURE__ */ Symbol("DropdownContext");
 var Dropdown = defineComponent({
   name: "TigerDropdown",
@@ -41,17 +43,17 @@ var Dropdown = defineComponent({
       default: false
     },
     /**
-     * Whether the dropdown is visible (controlled mode)
+     * Whether the dropdown is open (controlled mode)
      */
-    visible: {
+    open: {
       type: Boolean,
       default: void 0
     },
     /**
-     * Default visibility (uncontrolled mode)
+     * Default open state (uncontrolled mode)
      * @default false
      */
-    defaultVisible: {
+    defaultOpen: {
       type: Boolean,
       default: false
     },
@@ -83,26 +85,41 @@ var Dropdown = defineComponent({
       default: void 0
     }
   },
-  emits: ["update:visible", "visible-change"],
+  emits: ["update:open", "open-change"],
   setup(props, { slots, emit, attrs }) {
     const attrsRecord = attrs;
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
     onMounted(() => injectDropdownStyles());
-    const internalVisible = ref(props.defaultVisible);
+    const menuId = createDropdownMenuId();
+    const previousActiveElement = ref(null);
+    const internalVisible = ref(props.defaultOpen);
     const currentVisible = computed(
-      () => props.visible !== void 0 ? props.visible : internalVisible.value
+      () => props.open !== void 0 ? props.open : internalVisible.value
     );
     const containerRef = ref(null);
     const triggerRef = ref(null);
     const floatingRef = ref(null);
     const setVisible = (visible) => {
       if (props.disabled && visible) return;
-      if (props.visible === void 0) {
+      if (visible && !currentVisible.value) {
+        previousActiveElement.value = captureActiveElement();
+      }
+      if (props.open === void 0) {
         internalVisible.value = visible;
       }
-      emit("update:visible", visible);
-      emit("visible-change", visible);
+      emit("update:open", visible);
+      emit("open-change", visible);
+      if (visible) {
+        nextTick(() => {
+          if (floatingRef.value) {
+            focusFirstMenuItem(floatingRef.value);
+          }
+        });
+      } else {
+        restoreFocus(previousActiveElement.value);
+        previousActiveElement.value = null;
+      }
     };
     const handleItemClick = () => {
       if (props.closeOnClick) setVisible(false);
@@ -122,6 +139,11 @@ var Dropdown = defineComponent({
       if (props.trigger !== "click") return;
       setVisible(!currentVisible.value);
     };
+    const handleMenuKeyDown = (event) => {
+      if (floatingRef.value) {
+        handleMenuNavigation(floatingRef.value, event);
+      }
+    };
     const {
       x,
       y,
@@ -227,7 +249,8 @@ var Dropdown = defineComponent({
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           "aria-haspopup": "menu",
-          "aria-expanded": currentVisible.value
+          "aria-expanded": currentVisible.value,
+          "aria-controls": currentVisible.value ? menuId : void 0
         },
         [triggerNode, chevronNode]
       ) : null;
@@ -239,9 +262,18 @@ var Dropdown = defineComponent({
           style: menuWrapperStyles.value,
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
+          onKeydown: handleMenuKeyDown,
           hidden: !currentVisible.value
         },
-        menuNode
+        [
+          h(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            menuNode.type,
+            { ...menuNode.props || {}, id: menuId },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            menuNode.children
+          )
+        ]
       ) : null;
       const {
         class: _class,

package/dist/chunk-3MC45EXP.mjs

@@ -0,0 +1,86 @@
+import { defineComponent, computed, h } from 'vue';
+import { generateQRMatrix, classNames, qrcodeContainerClasses, coerceClassValue, qrcodeOverlayClasses, qrcodeExpiredTextClasses, qrcodeRefreshClasses } from '@expcat/tigercat-core';
+
+// src/components/QRCode.ts
+var QRCode = 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 = computed(() => generateQRMatrix(props.value));
+    const moduleSize = computed(() => {
+      const mLen = matrix.value.length;
+      return props.size / mLen;
+    });
+    return () => {
+      const containerClass = classNames(qrcodeContainerClasses, coerceClassValue(attrs.class));
+      const mSize = moduleSize.value;
+      const modules = matrix.value;
+      const rects = modules.flatMap(
+        (row, r) => row.map(
+          (cell, c) => cell ? h("rect", {
+            key: `${r}-${c}`,
+            x: c * mSize,
+            y: r * mSize,
+            width: mSize,
+            height: mSize,
+            fill: props.color
+          }) : null
+        ).filter(Boolean)
+      );
+      const svg = 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"
+        },
+        [h("rect", { width: props.size, height: props.size, fill: props.bgColor }), ...rects]
+      );
+      const children = [svg];
+      if (props.status === "expired") {
+        children.push(
+          h("div", { class: qrcodeOverlayClasses }, [
+            h("span", { class: qrcodeExpiredTextClasses }, "QR code expired"),
+            h(
+              "span",
+              {
+                class: qrcodeRefreshClasses,
+                onClick: () => emit("refresh")
+              },
+              "Refresh"
+            )
+          ])
+        );
+      }
+      if (props.status === "loading") {
+        children.push(
+          h("div", { class: qrcodeOverlayClasses }, [
+            h("span", { class: "text-sm text-gray-500" }, "Loading...")
+          ])
+        );
+      }
+      return h(
+        "div",
+        {
+          class: containerClass,
+          style: { width: `${props.size}px`, height: `${props.size}px` }
+        },
+        children
+      );
+    };
+  }
+});
+var QRCode_default = QRCode;
+
+export { QRCode, QRCode_default };

package/dist/{chunk-HTMTOXUO.mjs → chunk-3PQ2I5IQ.mjs}

@@ -1,6 +1,6 @@
-import { Modal } from './chunk-P47EXOAW.mjs';
+import { Modal } from './chunk-M6PEW6V5.mjs';
 import { ImageCropper } from './chunk-T77L326M.mjs';
-import { Button } from './chunk-D6MR5YRE.mjs';
+import { Button } from './chunk-M7JUNLA7.mjs';
 import { defineComponent, ref, computed, h } from 'vue';
 import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, coerceClassValue, mergeStyleValues, uploadPlusIconPath, modalFooterClasses } from '@expcat/tigercat-core';
 
@@ -151,13 +151,13 @@ var CropUpload = defineComponent({
       const modal = h(
         Modal,
         {
-          visible: modalVisible.value,
+          open: modalVisible.value,
           size: "lg",
           title: props.modalTitle,
           closable: true,
           maskClosable: false,
           showDefaultFooter: false,
-          "onUpdate:visible": (val) => {
+          "onUpdate:open": (val) => {
             if (!val) handleCancel();
           }
         },
@@ -167,7 +167,7 @@ var CropUpload = defineComponent({
             src: imageSrc.value,
             ...props.cropperProps
           }) : null,
-          footer: ({ cancel }) => h("div", { class: modalFooterClasses }, [
+          footer: ({ cancel: _cancel }) => h("div", { class: modalFooterClasses }, [
             h(Button, { variant: "secondary", onClick: handleCancel }, { default: () => "\u53D6\u6D88" }),
             h(
               Button,

package/dist/chunk-43BLH7DE.js

@@ -0,0 +1,154 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/ColorPicker.ts
+var ColorPicker = vue.defineComponent({
+  name: "TigerColorPicker",
+  props: {
+    modelValue: { type: String, default: "#2563eb" },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    showAlpha: { type: Boolean, default: false },
+    format: { type: String, default: "hex" },
+    presets: { type: Array, default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const isOpen = vue.ref(false);
+    const containerRef = vue.ref(null);
+    const inputValue = vue.ref(props.modelValue);
+    const hsv = vue.computed(() => {
+      const rgb = tigercatCore.hexToRgb(props.modelValue);
+      return tigercatCore.rgbToHsv(rgb.r, rgb.g, rgb.b);
+    });
+    vue.watch(
+      () => props.modelValue,
+      (v) => {
+        inputValue.value = v;
+      }
+    );
+    function togglePanel() {
+      if (props.disabled) return;
+      isOpen.value = !isOpen.value;
+    }
+    function closePanel() {
+      isOpen.value = false;
+    }
+    function handleHueChange(e) {
+      const hue = Number(e.target.value);
+      const { r, g, b } = tigercatCore.hsvToRgb(hue, hsv.value.s, hsv.value.v);
+      const hex = tigercatCore.rgbToHex(r, g, b);
+      emit("update:modelValue", hex);
+      emit("change", hex);
+    }
+    function handleInputChange(e) {
+      const val = e.target.value;
+      inputValue.value = val;
+      if (tigercatCore.isValidHex(val)) {
+        const hex = val.startsWith("#") ? val : `#${val}`;
+        emit("update:modelValue", hex);
+        emit("change", hex);
+      }
+    }
+    function handlePresetClick(color) {
+      emit("update:modelValue", color);
+      emit("change", color);
+    }
+    function handleClickOutside(e) {
+      if (containerRef.value && !containerRef.value.contains(e.target)) {
+        closePanel();
+      }
+    }
+    vue.watch(isOpen, (val) => {
+      if (val) document.addEventListener("click", handleClickOutside);
+      else document.removeEventListener("click", handleClickOutside);
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    return () => vue.h(
+      "div",
+      {
+        ref: containerRef,
+        class: tigercatCore.classNames(tigercatCore.colorPickerBaseClasses, tigercatCore.coerceClassValue(attrs.class))
+      },
+      [
+        // Color trigger swatch
+        vue.h("div", {
+          class: tigercatCore.getColorPickerTriggerClasses(props.size, props.disabled),
+          style: { backgroundColor: props.modelValue },
+          role: "button",
+          "aria-label": "Pick color",
+          tabindex: 0,
+          onClick: togglePanel
+        }),
+        // Panel
+        isOpen.value ? vue.h("div", { class: tigercatCore.colorPickerPanelClasses }, [
+          // Hue slider
+          vue.h("div", { class: "mb-2" }, [
+            vue.h(
+              "label",
+              { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
+              "Hue"
+            ),
+            vue.h("input", {
+              type: "range",
+              min: 0,
+              max: 360,
+              value: hsv.value.h,
+              class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
+              "aria-label": "Hue",
+              onInput: handleHueChange
+            })
+          ]),
+          // Hex input
+          vue.h("div", { class: "mb-2" }, [
+            vue.h(
+              "label",
+              { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
+              "Hex"
+            ),
+            vue.h("input", {
+              type: "text",
+              class: tigercatCore.colorPickerInputClasses,
+              value: inputValue.value,
+              "aria-label": "Color value",
+              onInput: handleInputChange
+            })
+          ]),
+          // Preview
+          vue.h("div", { class: "flex items-center gap-2 mb-2" }, [
+            vue.h("div", {
+              class: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
+              style: { backgroundColor: props.modelValue },
+              "aria-label": "Color preview"
+            }),
+            vue.h(
+              "span",
+              { class: "text-xs font-mono text-[var(--tiger-text,#111827)]" },
+              props.modelValue
+            )
+          ]),
+          // Presets
+          props.presets && props.presets.length > 0 ? vue.h("div", { class: "flex flex-wrap gap-1" }, [
+            ...props.presets.map(
+              (color) => vue.h("div", {
+                key: color,
+                class: tigercatCore.colorPickerPresetClasses,
+                style: { backgroundColor: color },
+                "aria-label": `Select ${color}`,
+                onClick: () => handlePresetClick(color)
+              })
+            )
+          ]) : null
+        ]) : null
+      ]
+    );
+  }
+});
+var ColorPicker_default = ColorPicker;
+
+exports.ColorPicker = ColorPicker;
+exports.ColorPicker_default = ColorPicker_default;

package/dist/{chunk-GWJSBFLF.js → chunk-46XPSPG4.js}

@@ -31,13 +31,12 @@ var Descriptions = vue.defineComponent({
       default: false
     },
     /**
-     * Number of columns per row
+     * Number of columns per row (number or responsive object)
      * @default 3
      */
     column: {
-      type: Number,
-      default: 3,
-      validator: (value) => value > 0
+      type: [Number, Object],
+      default: 3
     },
     /**
      * Descriptions size
@@ -94,6 +93,22 @@ var Descriptions = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
+    const windowWidth = vue.ref(typeof window !== "undefined" ? window.innerWidth : 1024);
+    let onResize;
+    if (typeof window !== "undefined" && typeof props.column === "object") {
+      onResize = () => {
+        windowWidth.value = window.innerWidth;
+      };
+    }
+    vue.onMounted(() => {
+      if (onResize) window.addEventListener("resize", onResize);
+    });
+    vue.onUnmounted(() => {
+      if (onResize) window.removeEventListener("resize", onResize);
+    });
+    const effectiveColumn = vue.computed(() => {
+      return tigercatCore.resolveResponsiveValue(props.column, windowWidth.value, 3);
+    });
     const descriptionsClasses = vue.computed(() => {
       return tigercatCore.getDescriptionsClasses(props.size);
     });
@@ -118,7 +133,7 @@ var Descriptions = vue.defineComponent({
       if (items.length === 0 && !slots.default) {
         return null;
       }
-      const rows = tigercatCore.groupItemsIntoRows(items, props.column);
+      const rows = tigercatCore.groupItemsIntoRows(items, effectiveColumn.value);
       return vue.h("table", { class: tableClasses.value }, [
         vue.h(
           "tbody",
@@ -130,7 +145,7 @@ var Descriptions = vue.defineComponent({
     function renderRow(rowItems) {
       const cells = [];
       rowItems.forEach((item) => {
-        const span = Math.min(item.span || 1, props.column);
+        const span = Math.min(item.span || 1, effectiveColumn.value);
         const labelClass = tigercatCore.classNames(
           tigercatCore.getDescriptionsLabelClasses(props.bordered, props.size, props.layout),
           item.labelClassName