@expcat/tigercat-vue 0.4.2 → 1.0.0

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-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-LGRUMMOG.js → chunk-3YWYAQR6.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkWV3Y45YK_js = require('./chunk-WV3Y45YK.js');
-var chunkHNQZ5JRB_js = require('./chunk-HNQZ5JRB.js');
+var chunkUG6XPJ2N_js = require('./chunk-UG6XPJ2N.js');
+var chunkPBWSBNDS_js = require('./chunk-PBWSBNDS.js');
 var chunkAGAJJYP2_js = require('./chunk-AGAJJYP2.js');
-var chunkWC4B72TZ_js = require('./chunk-WC4B72TZ.js');
-var chunkDELTFEEJ_js = require('./chunk-DELTFEEJ.js');
+var chunkBYNMOQBB_js = require('./chunk-BYNMOQBB.js');
+var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -212,7 +212,7 @@ var DataTableWithToolbar = vue.defineComponent({
             "div",
             { class: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[320px]" },
             [
-              vue.h(chunkWC4B72TZ_js.Input, {
+              vue.h(chunkBYNMOQBB_js.Input, {
                 type: "search",
                 size: "sm",
                 modelValue: searchValue.value,
@@ -225,7 +225,7 @@ var DataTableWithToolbar = vue.defineComponent({
                 }
               }),
               showButton ? vue.h(
-                chunkDELTFEEJ_js.Button,
+                chunkU7CCKZAG_js.Button,
                 {
                   size: "sm",
                   variant: "primary",
@@ -245,7 +245,7 @@ var DataTableWithToolbar = vue.defineComponent({
           const clearable = filter.clearable !== false;
           leftNodes.push(
             vue.h("div", { class: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]" }, [
-              vue.h(chunkHNQZ5JRB_js.Select, {
+              vue.h(chunkPBWSBNDS_js.Select, {
                 size: "sm",
                 options: filter.options.map((opt) => ({
                   label: opt.label,
@@ -276,7 +276,7 @@ var DataTableWithToolbar = vue.defineComponent({
         (props.toolbar?.bulkActions ?? []).forEach((action) => {
           bulkChildren.push(
             vue.h(
-              chunkDELTFEEJ_js.Button,
+              chunkU7CCKZAG_js.Button,
               {
                 key: action.key,
                 size: "sm",
@@ -338,7 +338,7 @@ var DataTableWithToolbar = vue.defineComponent({
         },
         [
           renderToolbar(),
-          vue.h(chunkWV3Y45YK_js.Table, tableProps),
+          vue.h(chunkUG6XPJ2N_js.Table, tableProps),
           showPagination ? vue.h(chunkAGAJJYP2_js.Pagination, {
             ...props.pagination,
             onChange: (current, pageSize) => emit("page-change", current, pageSize),

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

package/dist/chunk-4BMFV4CH.mjs

@@ -0,0 +1,204 @@
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, h } from 'vue';
+import { defaultToolbar, isContentEmpty, sanitizeHtml, classNames, getRichTextContainerClasses, coerceClassValue, getEditorAreaClasses, parseHeight, richTextToolbarClasses, getToolbarButtonClasses, isInlineFormat, richTextPlaceholderClasses, mapToolbarAction, isValidUrl, findHotkeyMatch } from '@expcat/tigercat-core';
+
+// src/components/RichTextEditor.ts
+var RichTextEditor = defineComponent({
+  name: "TigerRichTextEditor",
+  props: {
+    value: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "" },
+    placeholder: { type: String, default: void 0 },
+    mode: {
+      type: String,
+      default: "html"
+    },
+    toolbar: {
+      type: Array,
+      default: void 0
+    },
+    height: {
+      type: [Number, String],
+      default: 300
+    },
+    readOnly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["update:value", "change"],
+  setup(props, { emit, attrs }) {
+    const editorRef = ref(null);
+    const internalValue = ref(props.defaultValue || "");
+    const activeFormats = ref(/* @__PURE__ */ new Set());
+    const isControlled = computed(() => props.value !== void 0);
+    const currentContent = computed(() => isControlled.value ? props.value : internalValue.value);
+    const toolbarButtons = computed(() => props.toolbar ?? defaultToolbar);
+    const isEmpty = computed(() => isContentEmpty(currentContent.value));
+    watch(
+      () => props.value,
+      (newVal) => {
+        if (newVal !== void 0 && editorRef.value) {
+          const sanitized = sanitizeHtml(newVal);
+          if (editorRef.value.innerHTML !== sanitized) {
+            editorRef.value.innerHTML = sanitized;
+          }
+        }
+      }
+    );
+    onMounted(() => {
+      if (editorRef.value) {
+        const initial = sanitizeHtml(currentContent.value);
+        if (initial) {
+          editorRef.value.innerHTML = initial;
+        }
+      }
+    });
+    function updateActiveFormats() {
+      if (typeof document === "undefined") return;
+      const next = /* @__PURE__ */ new Set();
+      if (document.queryCommandState("bold")) next.add("bold");
+      if (document.queryCommandState("italic")) next.add("italic");
+      if (document.queryCommandState("underline")) next.add("underline");
+      if (document.queryCommandState("strikeThrough")) next.add("strikethrough");
+      if (document.queryCommandState("insertUnorderedList")) next.add("bulletList");
+      if (document.queryCommandState("insertOrderedList")) next.add("orderedList");
+      activeFormats.value = next;
+    }
+    function execAction(actionName) {
+      if (props.readOnly || props.disabled) return;
+      editorRef.value?.focus();
+      const mapping = mapToolbarAction(actionName);
+      if (mapping) {
+        document.execCommand(mapping.command, false, mapping.argument);
+        handleInput();
+        updateActiveFormats();
+        return;
+      }
+      if (actionName === "codeBlock") {
+        document.execCommand("formatBlock", false, "PRE");
+        handleInput();
+        return;
+      }
+      if (actionName === "link") {
+        const url = typeof window !== "undefined" ? window.prompt("Enter URL:") : null;
+        if (url && isValidUrl(url)) {
+          document.execCommand("createLink", false, url);
+          handleInput();
+        }
+        return;
+      }
+      if (actionName === "image") {
+        const url = typeof window !== "undefined" ? window.prompt("Enter image URL:") : null;
+        if (url && isValidUrl(url)) {
+          document.execCommand("insertImage", false, url);
+          handleInput();
+        }
+      }
+    }
+    function handleInput() {
+      if (!editorRef.value) return;
+      const html = editorRef.value.innerHTML;
+      const sanitized = sanitizeHtml(html);
+      if (!isControlled.value) {
+        internalValue.value = sanitized;
+      }
+      emit("update:value", sanitized);
+      emit("change", sanitized);
+    }
+    function handleKeydown(e) {
+      const match = findHotkeyMatch(toolbarButtons.value, e);
+      if (match) {
+        e.preventDefault();
+        execAction(match);
+      }
+    }
+    let selectionHandler = null;
+    onMounted(() => {
+      if (typeof document !== "undefined") {
+        selectionHandler = updateActiveFormats;
+        document.addEventListener("selectionchange", selectionHandler);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (selectionHandler && typeof document !== "undefined") {
+        document.removeEventListener("selectionchange", selectionHandler);
+      }
+    });
+    const containerClasses = computed(
+      () => classNames(
+        getRichTextContainerClasses(props.disabled, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    const editorAreaClasses = computed(() => getEditorAreaClasses(props.readOnly));
+    const containerStyle = computed(() => {
+      const ht = parseHeight(props.height);
+      if (!ht) return void 0;
+      return { height: ht };
+    });
+    return () => {
+      const toolbarEl = h(
+        "div",
+        {
+          class: richTextToolbarClasses,
+          role: "toolbar",
+          "aria-label": "Text formatting"
+        },
+        toolbarButtons.value.map(
+          (btn) => h(
+            "button",
+            {
+              key: btn.name,
+              type: "button",
+              class: getToolbarButtonClasses(activeFormats.value.has(btn.name)),
+              title: btn.tooltip ?? btn.label,
+              "aria-label": btn.label,
+              "aria-pressed": isInlineFormat(btn.name) ? activeFormats.value.has(btn.name) : void 0,
+              disabled: props.disabled || props.readOnly,
+              onClick: (e) => {
+                e.preventDefault();
+                execAction(btn.name);
+              }
+            },
+            btn.label
+          )
+        )
+      );
+      const editorEl = h("div", {
+        ref: editorRef,
+        class: editorAreaClasses.value,
+        contenteditable: !(props.readOnly || props.disabled),
+        role: "textbox",
+        "aria-multiline": true,
+        "aria-readonly": props.readOnly || void 0,
+        "aria-disabled": props.disabled || void 0,
+        "aria-placeholder": props.placeholder,
+        "data-placeholder": props.placeholder,
+        onInput: handleInput,
+        onKeydown: handleKeydown
+      });
+      const placeholderEl = isEmpty.value && props.placeholder ? h(
+        "div",
+        {
+          class: `${richTextPlaceholderClasses} absolute top-0 left-0 p-4 pointer-events-none text-sm`,
+          "aria-hidden": true
+        },
+        props.placeholder
+      ) : null;
+      const editorWrapper = h("div", { class: "relative flex-1 overflow-hidden" }, [
+        editorEl,
+        placeholderEl
+      ]);
+      return h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: containerStyle.value
+        },
+        [toolbarEl, editorWrapper]
+      );
+    };
+  }
+});
+var RichTextEditor_default = RichTextEditor;
+
+export { RichTextEditor, RichTextEditor_default };