@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/{chunk-P47EXOAW.mjs → chunk-M6PEW6V5.mjs}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-D6MR5YRE.mjs';
+import { Button } from './chunk-M7JUNLA7.mjs';
 import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, h, Teleport } from 'vue';
 import { getModalContentClasses, getModalContainerClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, classNames, coerceClassValue, mergeStyleValues, modalHeaderClasses, modalTitleClasses, resolveLocaleText, modalCloseButtonClasses, modalBodyClasses, modalFooterClasses, modalWrapperClasses, modalMaskClasses, getFocusableElements, getFocusTrapNavigation } from '@expcat/tigercat-core';
 
@@ -9,10 +9,10 @@ var Modal = defineComponent({
   inheritAttrs: false,
   props: {
     /**
-     * Whether the modal is visible
+     * Whether the modal is open
      * @default false
      */
-    visible: {
+    open: {
       type: Boolean,
       default: false
     },
@@ -24,6 +24,13 @@ var Modal = defineComponent({
       type: String,
       default: "md"
     },
+    /**
+     * Custom width (overrides size)
+     */
+    width: {
+      type: [String, Number],
+      default: void 0
+    },
     /**
      * Modal title
      */
@@ -140,28 +147,54 @@ var Modal = defineComponent({
     disableTeleport: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Whether the modal is draggable by its header
+     * @default false
+     */
+    draggable: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["update:visible", "close", "cancel", "ok"],
+  emits: ["update:open", "close", "cancel", "ok"],
   setup(props, { slots, emit, attrs }) {
     const instanceId = ref(createModalId());
-    const hasBeenOpened = ref(props.visible);
+    const hasBeenOpened = ref(props.open);
     const dialogRef = ref(null);
     const closeButtonRef = ref(null);
     const previousActiveElement = ref(null);
+    const dragOffset = ref({ x: 0, y: 0 });
+    const isDragging = ref(false);
+    const dragStart = ref({ x: 0, y: 0 });
+    const handleDragMouseDown = (e) => {
+      if (!props.draggable) return;
+      isDragging.value = true;
+      dragStart.value = { x: e.clientX - dragOffset.value.x, y: e.clientY - dragOffset.value.y };
+      const onMouseMove = (ev) => {
+        dragOffset.value = { x: ev.clientX - dragStart.value.x, y: ev.clientY - dragStart.value.y };
+      };
+      const onMouseUp = () => {
+        isDragging.value = false;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
     const titleId = computed(() => `${instanceId.value}-title`);
     const shouldRender = computed(() => {
-      if (props.visible) return true;
+      if (props.open) return true;
       if (props.destroyOnClose) return false;
       return hasBeenOpened.value;
     });
     const handleClose = () => {
-      emit("update:visible", false);
+      emit("update:open", false);
       emit("cancel");
     };
     const handleOk = () => {
       emit("ok");
-      emit("update:visible", false);
+      emit("update:open", false);
     };
     const handleMaskClick = (event) => {
       if (props.maskClosable && event.target === event.currentTarget) {
@@ -169,11 +202,11 @@ var Modal = defineComponent({
       }
     };
     const handleKeyDown = (event) => {
-      if (event.key === "Escape" && props.visible) {
+      if (event.key === "Escape" && props.open) {
         handleClose();
         return;
       }
-      if (event.key === "Tab" && props.visible && dialogRef.value) {
+      if (event.key === "Tab" && props.open && dialogRef.value) {
         const focusables = getFocusableElements(dialogRef.value);
         const result = getFocusTrapNavigation(event, focusables, document.activeElement);
         if (result.shouldHandle && result.next) {
@@ -189,7 +222,7 @@ var Modal = defineComponent({
       document.removeEventListener("keydown", handleKeyDown);
     });
     watch(
-      () => props.visible,
+      () => props.open,
       async (nextVisible) => {
         if (nextVisible) {
           hasBeenOpened.value = true;
@@ -201,6 +234,7 @@ var Modal = defineComponent({
         } else {
           emit("close");
           previousActiveElement.value?.focus?.();
+          dragOffset.value = { x: 0, y: 0 };
         }
       }
     );
@@ -238,33 +272,47 @@ var Modal = defineComponent({
       const ariaLabelledbyFromAttrs = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
       const ariaLabelledby = ariaLabelledbyFromAttrs ?? (props.title || slots.title ? titleId.value : void 0);
       const mergedClass = classNames(contentClasses.value, coerceClassValue(attrs.class));
-      const mergedStyle = mergeStyleValues(attrs.style, props.style);
-      const header = props.title || slots.title || props.closable ? h("div", { class: modalHeaderClasses }, [
-        props.title || slots.title ? h(
-          "h3",
-          {
-            id: titleId.value,
-            class: modalTitleClasses
-          },
-          slots.title ? slots.title() : props.title
-        ) : null,
-        props.closable ? h(
-          "button",
-          {
-            type: "button",
-            class: modalCloseButtonClasses,
-            onClick: handleClose,
-            "aria-label": resolveLocaleText(
-              "Close",
-              props.closeAriaLabel,
-              props.locale?.modal?.closeAriaLabel,
-              props.locale?.common?.closeText
-            ),
-            ref: closeButtonRef
-          },
-          CloseIcon
-        ) : null
-      ]) : null;
+      const widthStyle = props.width ? {
+        width: typeof props.width === "number" ? `${props.width}px` : props.width,
+        maxWidth: "100%"
+      } : void 0;
+      const mergedStyle = mergeStyleValues(attrs.style, props.style, widthStyle);
+      const dragStyle = props.draggable && (dragOffset.value.x !== 0 || dragOffset.value.y !== 0) ? { transform: `translate(${dragOffset.value.x}px, ${dragOffset.value.y}px)` } : void 0;
+      const finalStyle = mergeStyleValues(mergedStyle, dragStyle);
+      const header = props.title || slots.title || props.closable ? h(
+        "div",
+        {
+          class: modalHeaderClasses,
+          onMousedown: props.draggable ? handleDragMouseDown : void 0,
+          style: props.draggable ? "cursor: grab; user-select: none" : void 0
+        },
+        [
+          props.title || slots.title ? h(
+            "h3",
+            {
+              id: titleId.value,
+              class: modalTitleClasses
+            },
+            slots.title ? slots.title() : props.title
+          ) : null,
+          props.closable ? h(
+            "button",
+            {
+              type: "button",
+              class: modalCloseButtonClasses,
+              onClick: handleClose,
+              "aria-label": resolveLocaleText(
+                "Close",
+                props.closeAriaLabel,
+                props.locale?.modal?.closeAriaLabel,
+                props.locale?.common?.closeText
+              ),
+              ref: closeButtonRef
+            },
+            CloseIcon
+          ) : null
+        ]
+      ) : null;
       const body = slots.default ? h("div", { class: modalBodyClasses }, slots.default()) : null;
       const footer = slots.footer ? h(
         "div",
@@ -301,8 +349,8 @@ var Modal = defineComponent({
         {
           class: modalWrapperClasses,
           style: { zIndex: props.zIndex },
-          hidden: !props.visible,
-          "aria-hidden": !props.visible ? "true" : void 0,
+          hidden: !props.open,
+          "aria-hidden": !props.open ? "true" : void 0,
           "data-tiger-modal-root": ""
         },
         [
@@ -323,7 +371,7 @@ var Modal = defineComponent({
                 {
                   ...forwardedAttrs,
                   class: mergedClass,
-                  style: mergedStyle,
+                  style: finalStyle,
                   role: "dialog",
                   "aria-modal": "true",
                   "aria-labelledby": ariaLabelledby,

package/dist/{chunk-D6MR5YRE.mjs → chunk-M7JUNLA7.mjs}

@@ -1,5 +1,5 @@
 import { h, defineComponent, computed } from 'vue';
-import { getSpinnerSVG, normalizeSvgAttrs, classNames, buttonBaseClasses, getButtonVariantClasses, buttonSizeClasses, buttonDisabledClasses, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
+import { getSpinnerSVG, normalizeSvgAttrs, buttonDangerClasses, getButtonVariantClasses, classNames, buttonBaseClasses, buttonSizeClasses, buttonDisabledClasses, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
 
 // src/components/Button.ts
 var spinnerSvg = getSpinnerSVG("spinner");
@@ -47,14 +47,26 @@ var Button = defineComponent({
      * Whether the button should take full width of its parent
      */
     block: Boolean,
+    /**
+     * Icon position relative to button text
+     * @default 'left'
+     */
+    iconPosition: {
+      type: String,
+      default: "left"
+    },
     /**
      * HTML button type
      * @default 'button'
      */
-    type: {
+    htmlType: {
       type: String,
       default: "button"
     },
+    /**
+     * Whether to apply danger/destructive styling
+     */
+    danger: Boolean,
     className: {
       type: String,
       default: void 0
@@ -67,9 +79,10 @@ var Button = defineComponent({
   emits: ["click"],
   setup(props, { slots, emit, attrs }) {
     const buttonClasses = computed(() => {
+      const variantClasses = props.danger ? buttonDangerClasses[props.variant] ?? buttonDangerClasses.primary : getButtonVariantClasses(props.variant);
       return classNames(
         buttonBaseClasses,
-        getButtonVariantClasses(props.variant),
+        variantClasses,
         buttonSizeClasses[props.size],
         (props.disabled || props.loading) && buttonDisabledClasses,
         props.block && "w-full",
@@ -80,6 +93,13 @@ var Button = defineComponent({
     const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
     return () => {
       const isDisabled = props.disabled || props.loading;
+      const iconIsRight = props.iconPosition === "right";
+      const loadingNode = props.loading ? h(
+        "span",
+        { class: iconIsRight ? "ml-2 order-1" : "mr-2" },
+        slots["loading-icon"] ? slots["loading-icon"]() : LoadingSpinner
+      ) : null;
+      const iconNode = !props.loading && slots.icon ? h("span", { class: iconIsRight ? "ml-2 order-1" : "mr-2" }, slots.icon()) : null;
       return h(
         "button",
         {
@@ -89,17 +109,10 @@ var Button = defineComponent({
           "aria-busy": attrs["aria-busy"] ?? (props.loading ? "true" : void 0),
           "aria-disabled": attrs["aria-disabled"] ?? (isDisabled ? "true" : void 0),
           disabled: isDisabled,
-          type: props.type,
+          type: props.htmlType,
           onClick: isDisabled ? void 0 : (event) => emit("click", event)
         },
-        [
-          props.loading && h(
-            "span",
-            { class: "mr-2" },
-            slots["loading-icon"] ? slots["loading-icon"]() : LoadingSpinner
-          ),
-          slots.default?.()
-        ]
+        [loadingNode, iconNode, slots.default?.()]
       );
     };
   }

package/dist/chunk-MADOTDW7.mjs

@@ -0,0 +1,129 @@
+import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount, h } from 'vue';
+import { watermarkDefaults, resolveWatermarkFont, getWatermarkOverlayStyle, mergeStyleValues, classNames, watermarkWrapperClasses, coerceClassValue, renderWatermarkCanvas } from '@expcat/tigercat-core';
+
+// src/components/Watermark.ts
+var Watermark = defineComponent({
+  name: "TigerWatermark",
+  inheritAttrs: false,
+  props: {
+    content: {
+      type: [String, Array],
+      default: void 0
+    },
+    image: {
+      type: String,
+      default: void 0
+    },
+    width: { type: Number, default: watermarkDefaults.width },
+    height: { type: Number, default: watermarkDefaults.height },
+    rotate: { type: Number, default: watermarkDefaults.rotate },
+    zIndex: { type: Number, default: watermarkDefaults.zIndex },
+    gapX: { type: Number, default: watermarkDefaults.gapX },
+    gapY: { type: Number, default: watermarkDefaults.gapY },
+    offsetX: { type: Number, default: watermarkDefaults.offsetX },
+    offsetY: { type: Number, default: watermarkDefaults.offsetY },
+    font: {
+      type: Object,
+      default: void 0
+    },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const base64 = ref();
+    const resolvedFont = computed(() => resolveWatermarkFont(props.font));
+    const generate = () => {
+      if (props.image) {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          const dpr = window.devicePixelRatio || 1;
+          canvas.width = props.width * dpr;
+          canvas.height = props.height * dpr;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) return;
+          ctx.scale(dpr, dpr);
+          ctx.translate(props.width / 2, props.height / 2);
+          ctx.rotate(props.rotate * Math.PI / 180);
+          ctx.translate(-props.width / 2, -props.height / 2);
+          ctx.drawImage(img, 0, 0, props.width, props.height);
+          base64.value = canvas.toDataURL();
+        };
+        img.src = props.image;
+      } else {
+        base64.value = renderWatermarkCanvas({
+          content: props.content,
+          width: props.width,
+          height: props.height,
+          rotate: props.rotate,
+          font: resolvedFont.value
+        });
+      }
+    };
+    onMounted(generate);
+    watch(
+      () => [props.content, props.image, props.width, props.height, props.rotate, props.font],
+      generate
+    );
+    const wrapperRef = ref(null);
+    let observer;
+    onMounted(() => {
+      if (typeof MutationObserver === "undefined" || !wrapperRef.value) return;
+      observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of Array.from(m.removedNodes)) {
+            if (node.dataset?.watermark === "true") {
+              generate();
+              return;
+            }
+          }
+        }
+      });
+      observer.observe(wrapperRef.value, { childList: true });
+    });
+    onBeforeUnmount(() => observer?.disconnect());
+    const overlayStyle = computed(
+      () => getWatermarkOverlayStyle({
+        base64Url: base64.value,
+        width: props.width,
+        height: props.height,
+        gapX: props.gapX,
+        gapY: props.gapY,
+        offsetX: props.offsetX,
+        offsetY: props.offsetY,
+        zIndex: props.zIndex
+      })
+    );
+    return () => {
+      const attrsRecord = attrs;
+      return h(
+        "div",
+        {
+          ...attrs,
+          ref: wrapperRef,
+          class: classNames(
+            watermarkWrapperClasses,
+            props.className,
+            coerceClassValue(attrsRecord.class)
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style)
+        },
+        [
+          slots.default?.(),
+          h("div", {
+            "data-watermark": "true",
+            "aria-hidden": "true",
+            style: overlayStyle.value
+          })
+        ]
+      );
+    };
+  }
+});
+var Watermark_default = Watermark;
+
+export { Watermark, Watermark_default };

package/dist/{chunk-N3T6BQGK.js → chunk-MI5EG5QX.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk6MJBCXPO_js = require('./chunk-6MJBCXPO.js');
+var chunkPUALBK3Y_js = require('./chunk-PUALBK3Y.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -48,7 +48,7 @@ var DropdownItem = vue.defineComponent({
     const attrsRecord = attrs;
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
-    const context = vue.inject(chunk6MJBCXPO_js.DropdownContextKey, null);
+    const context = vue.inject(chunkPUALBK3Y_js.DropdownContextKey, null);
     const handleClick = (event) => {
       if (props.disabled) {
         event.preventDefault();
@@ -80,6 +80,7 @@ var DropdownItem = vue.defineComponent({
           type: "button",
           class: itemClasses.value,
           role: "menuitem",
+          tabindex: -1,
           "aria-disabled": props.disabled,
           disabled: props.disabled,
           onClick: handleClick,

package/dist/{chunk-QERCB3HM.mjs → chunk-MKLJ2LJW.mjs}

@@ -1,4 +1,4 @@
-import { FormContextKey } from './chunk-5XY7MXWC.mjs';
+import { FormContextKey } from './chunk-WNF7XUX4.mjs';
 import { defineComponent, inject, computed, ref, watch, onUnmounted, isVNode, cloneVNode, h } from 'vue';
 import { getFieldError, getFormItemClasses, getFormItemLabelClasses, getFormItemContentClasses, classNames, getFormItemErrorClasses, getFormItemFieldClasses, getFormItemAsteriskClasses } from '@expcat/tigercat-core';
 
@@ -63,6 +63,14 @@ var FormItem = defineComponent({
      */
     size: {
       type: String
+    },
+    /**
+     * Error display mode
+     * @default 'inline'
+     */
+    errorDisplayMode: {
+      type: String,
+      default: "inline"
     }
   },
   setup(props, { slots }) {
@@ -264,7 +272,7 @@ var FormItem = defineComponent({
       const contentElement = h(
         "div",
         {
-          class: contentClasses.value
+          class: classNames(contentClasses.value, props.errorDisplayMode === "popup" && "relative")
         },
         [
           h(
@@ -286,7 +294,13 @@ var FormItem = defineComponent({
             {
               id: hasError.value ? errorId : void 0,
               role: hasError.value ? "alert" : void 0,
-              class: errorClasses.value,
+              class: props.errorDisplayMode === "block" ? classNames(
+                "mt-1 p-2 rounded bg-red-50 border border-red-200 text-red-600 text-sm",
+                !hasError.value && "hidden"
+              ) : props.errorDisplayMode === "popup" ? classNames(
+                "absolute z-10 mt-1 px-2 py-1 rounded bg-red-600 text-white text-xs shadow-lg",
+                !hasError.value && "hidden"
+              ) : errorClasses.value,
               "aria-hidden": hasError.value ? void 0 : "true"
             },
             hasError.value ? errorMessage.value : ""

package/dist/chunk-MNH3KNSN.js

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