@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-JSERNUJX.mjs → chunk-W2OCMRRH.mjs}

@@ -1,7 +1,7 @@
+import { createStatusIconWithLoading, createStatusIcon } from './chunk-7RRA3TIG.mjs';
 import { ref, defineComponent, computed, h, Teleport, TransitionGroup, createApp } from 'vue';
-import { classNames, messageContainerBaseClasses, messagePositionClasses, getMessageTypeClasses, defaultMessageThemeColors, messageBaseClasses, getMessageIconPath, messageIconClasses, messageContentClasses, messageCloseButtonClasses, messageLoadingSpinnerClasses, icon24ViewBox, icon24StrokeWidth, icon24PathStrokeLinejoin, icon24PathStrokeLinecap, messageCloseIconPath, isBrowser } from '@expcat/tigercat-core';
+import { classNames, messageContainerBaseClasses, messagePositionClasses, getMessageTypeClasses, defaultMessageThemeColors, messageBaseClasses, getMessageIconPath, messageIconClasses, messageLoadingSpinnerClasses, messageContentClasses, messageCloseButtonClasses, messageCloseIconPath, isBrowser, normalizeStringOption } from '@expcat/tigercat-core';
 
-// src/components/Message.ts
 var MESSAGE_CONTAINER_ID = "tiger-message-container";
 var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
 var MESSAGE_CONTAINER_ROOT_ID = `${MESSAGE_CONTAINER_ID}-root`;
@@ -12,27 +12,6 @@ var containerApp = null;
 function getNextInstanceId() {
   return ++instanceIdCounter;
 }
-function createIcon(path, className, isLoading = false) {
-  const iconClass = classNames(className, isLoading ? messageLoadingSpinnerClasses : "");
-  return h(
-    "svg",
-    {
-      class: iconClass,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: icon24ViewBox,
-      stroke: "currentColor",
-      "stroke-width": String(icon24StrokeWidth)
-    },
-    [
-      h("path", {
-        "stroke-linecap": icon24PathStrokeLinecap,
-        "stroke-linejoin": icon24PathStrokeLinejoin,
-        d: path
-      })
-    ]
-  );
-}
 var MessageContainer = defineComponent({
   name: "TigerMessageContainer",
   props: {
@@ -45,16 +24,6 @@ var MessageContainer = defineComponent({
     const containerClasses = computed(() => {
       return classNames(messageContainerBaseClasses, messagePositionClasses[props.position]);
     });
-    const removeMessage2 = (id) => {
-      const index = messageInstances.value.findIndex((msg) => msg.id === id);
-      if (index !== -1) {
-        const instance = messageInstances.value[index];
-        messageInstances.value.splice(index, 1);
-        if (instance.onClose) {
-          instance.onClose();
-        }
-      }
-    };
     const renderMessageItem = (message) => {
       const colorScheme = getMessageTypeClasses(message.type, defaultMessageThemeColors);
       const messageClasses = classNames(
@@ -69,7 +38,12 @@ var MessageContainer = defineComponent({
       const a11yRole = message.type === "error" ? "alert" : "status";
       const ariaLive = message.type === "error" ? "assertive" : "polite";
       const children = [
-        createIcon(iconPath, iconClass, message.type === "loading"),
+        createStatusIconWithLoading(
+          iconPath,
+          iconClass,
+          message.type === "loading",
+          messageLoadingSpinnerClasses
+        ),
         h("div", { class: messageContentClasses }, message.content)
       ];
       if (message.closable) {
@@ -78,11 +52,11 @@ var MessageContainer = defineComponent({
             "button",
             {
               class: messageCloseButtonClasses,
-              onClick: () => removeMessage2(message.id),
+              onClick: () => removeMessage(message.id),
               "aria-label": MESSAGE_CLOSE_ARIA_LABEL,
               type: "button"
             },
-            createIcon(messageCloseIconPath, "w-4 h-4")
+            createStatusIcon(messageCloseIconPath, "w-4 h-4")
           )
         );
       }
@@ -193,50 +167,29 @@ function clearAll() {
   }
 }
 function normalizeOptions(options) {
-  if (typeof options === "string") {
-    return { content: options };
-  }
-  return options;
+  return normalizeStringOption(options, "content");
 }
 var Message = {
-  /**
-   * Show an info message
-   */
   info(options) {
     const config = normalizeOptions(options);
     return addMessage({ ...config, type: "info" });
   },
-  /**
-   * Show a success message
-   */
   success(options) {
     const config = normalizeOptions(options);
     return addMessage({ ...config, type: "success" });
   },
-  /**
-   * Show a warning message
-   */
   warning(options) {
     const config = normalizeOptions(options);
     return addMessage({ ...config, type: "warning" });
   },
-  /**
-   * Show an error message
-   */
   error(options) {
     const config = normalizeOptions(options);
     return addMessage({ ...config, type: "error" });
   },
-  /**
-   * Show a loading message
-   */
   loading(options) {
     const config = normalizeOptions(options);
     return addMessage({ ...config, type: "loading", duration: 0 });
   },
-  /**
-   * Clear all messages
-   */
   clear() {
     clearAll();
   }

package/dist/{chunk-RBZ7ADKL.js → chunk-W36SYMVH.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk2ONL76L4_js = require('./chunk-2ONL76L4.js');
+var chunkDELTFEEJ_js = require('./chunk-DELTFEEJ.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -147,27 +147,16 @@ var Modal = vue.defineComponent({
   emits: ["update:visible", "close", "cancel", "ok"],
   setup(props, { slots, emit, attrs }) {
     const instanceId = vue.ref(createModalId());
-    const hasBeenOpened = vue.ref(false);
+    const hasBeenOpened = vue.ref(props.visible);
     const dialogRef = vue.ref(null);
     const closeButtonRef = vue.ref(null);
     const previousActiveElement = vue.ref(null);
     const titleId = vue.computed(() => `${instanceId.value}-title`);
     const shouldRender = vue.computed(() => {
-      if (props.visible) {
-        hasBeenOpened.value = true;
-        return true;
-      }
+      if (props.visible) return true;
       if (props.destroyOnClose) return false;
       return hasBeenOpened.value;
     });
-    vue.watch(
-      () => props.visible,
-      (newVal) => {
-        if (!newVal) {
-          emit("close");
-        }
-      }
-    );
     const handleClose = () => {
       emit("update:visible", false);
       emit("cancel");
@@ -205,14 +194,16 @@ var Modal = vue.defineComponent({
       () => props.visible,
       async (nextVisible) => {
         if (nextVisible) {
+          hasBeenOpened.value = true;
           const active = document.activeElement;
           previousActiveElement.value = active instanceof HTMLElement ? active : null;
           await vue.nextTick();
           const el = closeButtonRef.value ?? dialogRef.value;
           el?.focus?.();
-          return;
+        } else {
+          emit("close");
+          previousActiveElement.value?.focus?.();
         }
-        previousActiveElement.value?.focus?.();
       }
     );
     const contentClasses = vue.computed(() => {
@@ -283,7 +274,7 @@ var Modal = vue.defineComponent({
         slots.footer({ ok: handleOk, cancel: handleClose })
       ) : props.showDefaultFooter ? vue.h("div", { class: tigercatCore.modalFooterClasses, "data-tiger-modal-footer": "" }, [
         vue.h(
-          chunk2ONL76L4_js.Button,
+          chunkDELTFEEJ_js.Button,
           { variant: "secondary", onClick: handleClose },
           {
             default: () => tigercatCore.resolveLocaleText(
@@ -295,7 +286,7 @@ var Modal = vue.defineComponent({
           }
         ),
         vue.h(
-          chunk2ONL76L4_js.Button,
+          chunkDELTFEEJ_js.Button,
           { onClick: handleOk },
           {
             default: () => tigercatCore.resolveLocaleText(

package/dist/{chunk-ZAEX6EMJ.js → chunk-WC4B72TZ.js}

@@ -69,46 +69,30 @@ var Input = vue.defineComponent({
      * Whether the input is required
      */
     required: Boolean,
-    /**
-     * Maximum length
-     */
-    maxLength: {
-      type: Number
-    },
-    /**
-     * Minimum length
-     */
-    minLength: {
-      type: Number
-    },
-    /**
-     * Input name attribute
-     */
-    name: {
-      type: String
-    },
-    /**
-     * Input id attribute
-     */
-    id: {
-      type: String
-    },
-    /**
-     * Autocomplete attribute
-     */
-    autoComplete: {
-      type: String
-    },
+    /** Maximum length */
+    maxLength: Number,
+    /** Minimum length */
+    minLength: Number,
+    /** Input name attribute */
+    name: String,
+    /** Input id attribute */
+    id: String,
+    /** Autocomplete attribute */
+    autoComplete: String,
     /**
      * Whether to autofocus on mount
      */
     autoFocus: Boolean,
     /**
-     * Additional CSS classes
+     * Internal shake trigger counter (used by FormItem)
+     * @internal
      */
-    className: {
-      type: String
+    _shakeTrigger: {
+      type: Number,
+      default: void 0
     },
+    /** Additional CSS classes */
+    className: String,
     /**
      * Inline styles
      */
@@ -126,8 +110,8 @@ var Input = vue.defineComponent({
   setup(props, { emit, attrs, slots }) {
     tigercatCore.injectShakeStyle();
     const inputRef = vue.ref(null);
+    const wrapperRef = vue.ref(null);
     const localValue = vue.ref(props.modelValue ?? "");
-    const isShaking = vue.ref(false);
     vue.watch(
       () => props.modelValue,
       (newValue) => {
@@ -137,16 +121,16 @@ var Input = vue.defineComponent({
         }
       }
     );
-    vue.watch(
-      () => props.status,
-      (newStatus) => {
-        if (newStatus === "error") {
-          isShaking.value = true;
-        }
+    vue.watch([() => props.status, () => props._shakeTrigger], ([newStatus]) => {
+      if (newStatus === "error" && wrapperRef.value) {
+        const el = wrapperRef.value;
+        el.classList.remove(tigercatCore.SHAKE_CLASS);
+        void el.offsetWidth;
+        el.classList.add(tigercatCore.SHAKE_CLASS);
       }
-    );
+    });
     const handleAnimationEnd = () => {
-      isShaking.value = false;
+      wrapperRef.value?.classList.remove(tigercatCore.SHAKE_CLASS);
     };
     const hasPrefix = vue.computed(() => !!slots.prefix || !!props.prefix);
     const hasSuffix = vue.computed(() => !!slots.suffix || !!props.suffix);
@@ -159,12 +143,9 @@ var Input = vue.defineComponent({
         hasSuffix: hasSuffix.value
       })
     );
-    const getInputValue = (target) => {
-      return props.type === "number" ? Number.isNaN(target.valueAsNumber) ? target.value : target.valueAsNumber : target.value;
-    };
     const handleInput = (event) => {
       const target = event.target;
-      const value = getInputValue(target);
+      const value = tigercatCore.parseInputValue(target, props.type);
       localValue.value = value;
       emit("update:modelValue", value);
       emit("input", event);
@@ -177,12 +158,8 @@ var Input = vue.defineComponent({
       return vue.h(
         "div",
         {
-          class: tigercatCore.classNames(
-            tigercatCore.getInputWrapperClasses(),
-            props.className,
-            tigercatCore.coerceClassValue(attrClass),
-            isShaking.value && tigercatCore.SHAKE_CLASS
-          ),
+          ref: wrapperRef,
+          class: tigercatCore.classNames(tigercatCore.getInputWrapperClasses(), props.className, tigercatCore.coerceClassValue(attrClass)),
           style: [attrStyle, props.style],
           onAnimationend: handleAnimationEnd
         },

package/dist/{chunk-R2DKSTP4.js → chunk-WCZGYU7M.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk5XW532JA_js = require('./chunk-5XW532JA.js');
+var chunkNOTJRUAK_js = require('./chunk-NOTJRUAK.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -67,7 +67,7 @@ var StepsItem = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const stepsContext = vue.inject(chunk5XW532JA_js.StepsContextKey, {
+    const stepsContext = vue.inject(chunkNOTJRUAK_js.StepsContextKey, {
       current: 0,
       status: "process",
       direction: "horizontal",
@@ -75,9 +75,6 @@ var StepsItem = vue.defineComponent({
       simple: false,
       clickable: false
     });
-    const attrsRecord = attrs;
-    const attrsClass = attrsRecord.class;
-    const attrsStyle = attrsRecord.style;
     const stepStatus = vue.computed(() => {
       return tigercatCore.calculateStepStatus(
         props.stepIndex,
@@ -88,9 +85,9 @@ var StepsItem = vue.defineComponent({
     });
     const itemClasses = vue.computed(() => {
       return tigercatCore.classNames(
-        tigercatCore.getStepItemClasses(stepsContext.direction, props.isLast, stepsContext.simple),
+        tigercatCore.getStepItemClasses(stepsContext.direction, props.isLast),
         props.className,
-        tigercatCore.coerceClassValue(attrsClass)
+        tigercatCore.coerceClassValue(attrs.class)
       );
     });
     const iconClasses = vue.computed(() => {
@@ -103,10 +100,10 @@ var StepsItem = vue.defineComponent({
       );
     });
     const tailClasses = vue.computed(() => {
-      return tigercatCore.getStepTailClasses(stepsContext.direction, stepStatus.value, props.isLast);
+      return tigercatCore.getStepTailClasses(stepsContext.direction, stepStatus.value, props.isLast, stepsContext.size, stepsContext.simple);
     });
     const contentClasses = vue.computed(() => {
-      return tigercatCore.getStepContentClasses(stepsContext.direction, stepsContext.simple);
+      return tigercatCore.getStepContentClasses(stepsContext.direction);
     });
     const titleClasses = vue.computed(() => {
       return tigercatCore.getStepTitleClasses(
@@ -132,27 +129,7 @@ var StepsItem = vue.defineComponent({
         return vue.h("div", { class: iconClasses.value }, props.icon);
       }
       if (stepStatus.value === "finish") {
-        return vue.h(
-          "div",
-          { class: iconClasses.value },
-          vue.h(
-            "svg",
-            {
-              class: tigercatCore.stepFinishIconSvgClasses,
-              fill: "none",
-              stroke: "currentColor",
-              viewBox: tigercatCore.stepFinishIconViewBox,
-              "aria-hidden": "true",
-              focusable: "false"
-            },
-            vue.h("path", {
-              "stroke-linecap": tigercatCore.stepFinishIconPathStrokeLinecap,
-              "stroke-linejoin": tigercatCore.stepFinishIconPathStrokeLinejoin,
-              "stroke-width": tigercatCore.stepFinishIconPathStrokeWidth,
-              d: tigercatCore.stepFinishIconPathD
-            })
-          )
-        );
+        return vue.h("div", { class: iconClasses.value, "aria-hidden": "true" }, tigercatCore.stepFinishChar);
       }
       return vue.h("div", { class: iconClasses.value }, String(props.stepIndex + 1));
     };
@@ -186,13 +163,13 @@ var StepsItem = vue.defineComponent({
       }
       return vue.h("div", { class: contentClasses.value }, children);
     };
-    const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrsStyle, props.style));
+    const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style));
     return () => {
       const {
         class: _class,
         style: _style,
         ...restAttrs
-      } = attrsRecord;
+      } = attrs;
       if (stepsContext.direction === "vertical") {
         return vue.h(
           "li",

package/dist/{chunk-SKUTVXHP.js → chunk-WEFQCJAG.js}

@@ -62,15 +62,12 @@ var Card = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const cardClasses = vue.computed(() => {
-      return tigercatCore.classNames(
+    const cardClasses = vue.computed(
+      () => tigercatCore.classNames(
         tigercatCore.getCardClasses(props.variant, props.hoverable),
         !props.cover && tigercatCore.cardSizeClasses[props.size]
-      );
-    });
-    const bodyClasses = vue.computed(() => {
-      return tigercatCore.classNames(tigercatCore.cardBodyClasses, props.cover && tigercatCore.cardSizeClasses[props.size]);
-    });
+      )
+    );
     const sectionSizeClass = vue.computed(() => props.cover ? tigercatCore.cardSizeClasses[props.size] : void 0);
     const getSectionClasses = (baseClasses) => tigercatCore.classNames(baseClasses, sectionSizeClass.value);
     return () => {
@@ -93,7 +90,7 @@ var Card = vue.defineComponent({
             })
           ]) : null,
           slots.header ? vue.h("div", { class: getSectionClasses(tigercatCore.cardHeaderClasses) }, slots.header()) : null,
-          slots.default ? vue.h("div", { class: bodyClasses.value }, slots.default()) : null,
+          slots.default ? vue.h("div", { class: sectionSizeClass.value }, slots.default()) : null,
           slots.footer ? vue.h("div", { class: getSectionClasses(tigercatCore.cardFooterClasses) }, slots.footer()) : null,
           slots.actions ? vue.h(
             "div",

package/dist/chunk-WIPPSHI6.mjs

@@ -0,0 +1,111 @@
+import { useVueFloating, useVueClickOutside, useVueEscapeKey } from './chunk-CU4M5ABS.mjs';
+import { ref, computed, watch, onBeforeUnmount } from 'vue';
+import { getTransformOrigin, buildTriggerHandlerMap } from '@expcat/tigercat-core';
+
+function useFloatingPopup(options) {
+  const { props, emit, multiTrigger = true } = options;
+  const internalVisible = ref(props.visible ?? props.defaultVisible ?? false);
+  const isControlled = computed(() => props.visible !== void 0);
+  watch(
+    () => props.visible,
+    (next) => {
+      if (next !== void 0) internalVisible.value = next;
+    }
+  );
+  const currentVisible = computed(
+    () => isControlled.value ? Boolean(props.visible) : internalVisible.value
+  );
+  const setVisible = (next) => {
+    if (props.disabled && next) return;
+    if (!isControlled.value) internalVisible.value = next;
+    emit("update:visible", next);
+    emit("visible-change", next);
+  };
+  const containerRef = ref(null);
+  const triggerRef = ref(null);
+  const floatingRef = ref(null);
+  const {
+    x,
+    y,
+    placement: actualPlacement
+  } = useVueFloating({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: currentVisible,
+    placement: props.placement ?? "top",
+    offset: props.offset ?? 8
+  });
+  let outsideClickCleanup;
+  let escapeKeyCleanup;
+  const effectiveTrigger = computed(
+    () => multiTrigger ? props.trigger ?? "click" : "click"
+  );
+  watch(
+    [currentVisible, effectiveTrigger],
+    ([visible, trigger]) => {
+      outsideClickCleanup?.();
+      escapeKeyCleanup?.();
+      outsideClickCleanup = void 0;
+      escapeKeyCleanup = void 0;
+      if (visible && trigger === "click") {
+        outsideClickCleanup = useVueClickOutside({
+          enabled: currentVisible,
+          containerRef,
+          onOutsideClick: () => setVisible(false),
+          defer: true
+        });
+      }
+      if (visible && trigger !== "manual") {
+        escapeKeyCleanup = useVueEscapeKey({
+          enabled: currentVisible,
+          onEscape: () => setVisible(false)
+        });
+      }
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => {
+    outsideClickCleanup?.();
+    escapeKeyCleanup?.();
+  });
+  const floatingStyles = computed(() => ({
+    position: "absolute",
+    left: `${x.value}px`,
+    top: `${y.value}px`,
+    transformOrigin: getTransformOrigin(actualPlacement.value),
+    zIndex: 1e3
+  }));
+  const handleToggle = () => {
+    if (!props.disabled) setVisible(!currentVisible.value);
+  };
+  const handleShow = () => {
+    if (!props.disabled) setVisible(true);
+  };
+  const handleHide = () => {
+    if (!props.disabled) setVisible(false);
+  };
+  const triggerHandlers = computed(() => {
+    if (!multiTrigger) {
+      return { onClick: handleToggle };
+    }
+    return buildTriggerHandlerMap(
+      effectiveTrigger.value,
+      { toggle: handleToggle, show: handleShow, hide: handleHide },
+      "vue"
+    );
+  });
+  return {
+    currentVisible,
+    setVisible,
+    containerRef,
+    triggerRef,
+    floatingRef,
+    x,
+    y,
+    actualPlacement,
+    floatingStyles,
+    triggerHandlers
+  };
+}
+
+export { useFloatingPopup };

package/dist/{chunk-3JWW6FIN.mjs → chunk-WMM3FR3W.mjs}

@@ -158,7 +158,6 @@ var Upload = defineComponent({
   setup(props, { emit, slots, attrs }) {
     const inputRef = ref(null);
     const isDragging = ref(false);
-    const attrsRecord = attrs;
     const spinnerSvg = getSpinnerSVG("spinner");
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
@@ -347,7 +346,7 @@ var Upload = defineComponent({
         "button",
         {
           type: "button",
-          class: getUploadButtonClasses(props.drag, props.disabled),
+          class: getUploadButtonClasses(props.disabled),
           onClick: handleClick,
           disabled: props.disabled,
           "aria-label": labels.value.buttonAriaLabel
@@ -611,8 +610,12 @@ var Upload = defineComponent({
         "div",
         {
           ...attrs,
-          class: classNames("tiger-upload", props.className, coerceClassValue(attrsRecord.class)),
-          style: mergeStyleValues(attrsRecord.style, props.style)
+          class: classNames(
+            "tiger-upload",
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          style: mergeStyleValues(attrs.style, props.style)
         },
         [renderInput(), renderUploadButton(), renderFileList()]
       );

package/dist/{chunk-U65XZCPB.js → chunk-WPIDP6IG.js}

@@ -120,20 +120,6 @@ var Avatar = vue.defineComponent({
           ]
         );
       }
-      if (displayText.value) {
-        return vue.h(
-          "span",
-          {
-            ...baseSpanProps,
-            ...isDecorative ? { "aria-hidden": true } : {
-              role: "img",
-              "aria-label": computedLabel,
-              "aria-labelledby": ariaLabelledbyProp
-            }
-          },
-          displayText.value
-        );
-      }
       return vue.h(
         "span",
         {
@@ -144,7 +130,7 @@ var Avatar = vue.defineComponent({
             "aria-labelledby": ariaLabelledbyProp
           }
         },
-        slots.default ? slots.default() : void 0
+        displayText.value || slots.default?.()
       );
     };
   }