@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-HXHMGLWX.js → chunk-ROKUXJBS.js}

@@ -1,9 +1,9 @@
 'use strict';
 
+var chunkOOKS4KMK_js = require('./chunk-OOKS4KMK.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/Notification.ts
 var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
 var NOTIFICATION_CLOSE_ARIA_LABEL = "Close notification";
 var IS_TEST_ENV = typeof process !== "undefined" && process.env?.NODE_ENV === "test";
@@ -29,28 +29,6 @@ var updateCallbacks = {
 function getNextInstanceId() {
   return ++instanceIdCounter;
 }
-function createIcon(path, className) {
-  return vue.h(
-    "svg",
-    {
-      class: className,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: tigercatCore.icon24ViewBox,
-      stroke: "currentColor",
-      "stroke-width": String(tigercatCore.icon24StrokeWidth),
-      "aria-hidden": "true",
-      focusable: "false"
-    },
-    [
-      vue.h("path", {
-        "stroke-linecap": tigercatCore.icon24PathStrokeLinecap,
-        "stroke-linejoin": tigercatCore.icon24PathStrokeLinejoin,
-        d: path
-      })
-    ]
-  );
-}
 function getContainerRootId(position) {
   return `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}-root`;
 }
@@ -78,10 +56,7 @@ var NotificationContainer = vue.defineComponent({
       )
     );
     const renderNotificationItem = (notification2) => {
-      const colorScheme = tigercatCore.getNotificationTypeClasses(
-        notification2.type,
-        tigercatCore.defaultNotificationThemeColors
-      );
+      const colorScheme = tigercatCore.getNotificationTypeClasses(notification2.type);
       const notificationClasses = tigercatCore.classNames(
         tigercatCore.notificationBaseClasses,
         colorScheme.bg,
@@ -113,7 +88,7 @@ var NotificationContainer = vue.defineComponent({
         );
       }
       const children = [
-        createIcon(iconPath, iconClass),
+        chunkOOKS4KMK_js.createStatusIcon(iconPath, iconClass, { "aria-hidden": "true", focusable: "false" }),
         vue.h("div", { class: tigercatCore.notificationContentClasses }, contentChildren)
       ];
       if (notification2.closable) {
@@ -129,7 +104,7 @@ var NotificationContainer = vue.defineComponent({
               "aria-label": NOTIFICATION_CLOSE_ARIA_LABEL,
               type: "button"
             },
-            createIcon(tigercatCore.notificationCloseIconPath, tigercatCore.notificationCloseIconClasses)
+            chunkOOKS4KMK_js.createStatusIcon(tigercatCore.notificationCloseIconPath, tigercatCore.notificationCloseIconClasses, { "aria-hidden": "true", focusable: "false" })
           )
         );
       }
@@ -216,10 +191,7 @@ function destroyContainer(position) {
   }
   updateCallbacks[position] = null;
   if (tigercatCore.isBrowser()) {
-    const rootEl = document.getElementById(rootId);
-    if (rootEl?.parentNode) {
-      rootEl.parentNode.removeChild(rootEl);
-    }
+    document.getElementById(rootId)?.remove();
   }
 }
 function addNotification(config) {
@@ -254,9 +226,7 @@ function removeNotification(id, position) {
   if (index !== -1) {
     const instance = instances[index];
     instances.splice(index, 1);
-    if (instance.onClose) {
-      instance.onClose();
-    }
+    instance.onClose?.();
   }
   updateCallbacks[position]?.();
   if (notificationInstancesByPosition[position].length === 0) {
@@ -266,65 +236,41 @@ function removeNotification(id, position) {
 function clearAll(position) {
   if (position) {
     notificationInstancesByPosition[position].forEach((instance) => {
-      if (instance.onClose) {
-        instance.onClose();
-      }
+      instance.onClose?.();
     });
     notificationInstancesByPosition[position] = [];
-    updateCallbacks[position]?.();
     destroyContainer(position);
   } else {
     Object.keys(notificationInstancesByPosition).forEach((pos) => {
       const p = pos;
       notificationInstancesByPosition[p].forEach((instance) => {
-        if (instance.onClose) {
-          instance.onClose();
-        }
+        instance.onClose?.();
       });
       notificationInstancesByPosition[p] = [];
-      updateCallbacks[p]?.();
       destroyContainer(p);
     });
   }
 }
 function normalizeOptions(options) {
-  if (typeof options === "string") {
-    return { title: options };
-  }
-  return options;
+  return tigercatCore.normalizeStringOption(options, "title");
 }
 var notification = {
-  /**
-   * Show an info notification
-   */
   info(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "info" });
   },
-  /**
-   * Show a success notification
-   */
   success(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "success" });
   },
-  /**
-   * Show a warning notification
-   */
   warning(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "warning" });
   },
-  /**
-   * Show an error notification
-   */
   error(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "error" });
   },
-  /**
-   * Clear all notifications
-   */
   clear(position) {
     clearAll(position);
   }

package/dist/{chunk-IE57VDN4.js → chunk-RY2I56HB.js}

@@ -23,61 +23,34 @@ var Icon = vue.defineComponent({
     color: {
       type: String,
       default: "currentColor"
-    },
-    /**
-     * Additional CSS classes
-     */
-    className: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Custom styles for the wrapper
-     */
-    style: {
-      type: Object,
-      default: void 0
     }
   },
   setup(props, { slots, attrs }) {
-    const wrapperClasses = vue.computed(() => {
-      return tigercatCore.classNames(tigercatCore.iconWrapperClasses, tigercatCore.coerceClassValue(attrs.class), props.className);
-    });
-    const svgBaseClasses = vue.computed(() => {
-      return tigercatCore.classNames(tigercatCore.iconSvgBaseClasses, tigercatCore.iconSizeClasses[props.size]);
-    });
-    const wrapperStyle = vue.computed(() => {
-      return {
-        ...attrs.style,
-        ...props.style ?? {},
-        color: props.color
-      };
-    });
+    const wrapperClasses = vue.computed(
+      () => tigercatCore.classNames(tigercatCore.iconWrapperClasses, tigercatCore.coerceClassValue(attrs.class))
+    );
+    const svgClasses = vue.computed(() => tigercatCore.classNames(tigercatCore.iconSvgBaseClasses, tigercatCore.iconSizeClasses[props.size]));
     return () => {
       const defaultSlot = slots.default?.();
-      const ariaLabel = attrs["aria-label"];
-      const ariaLabelledBy = attrs["aria-labelledby"];
-      const hasExplicitRole = attrs.role != null;
-      const isDecorative = ariaLabel == null && ariaLabelledBy == null && !hasExplicitRole;
+      const isDecorative = attrs["aria-label"] == null && attrs["aria-labelledby"] == null && attrs.role == null;
       const children = (defaultSlot ?? []).map((node) => {
         if (node && typeof node === "object" && node.type === "svg") {
           const svgNode = node;
           const svgProps = svgNode.props ?? {};
-          const svgChildren = svgNode.children === null ? void 0 : svgNode.children;
           return vue.h(
             "svg",
             {
               ...svgProps,
-              class: tigercatCore.classNames(svgBaseClasses.value, tigercatCore.coerceClassValue(svgProps.class)),
+              class: tigercatCore.classNames(svgClasses.value, tigercatCore.coerceClassValue(svgProps.class)),
               xmlns: svgProps.xmlns ?? tigercatCore.SVG_DEFAULT_XMLNS,
               viewBox: svgProps.viewBox ?? tigercatCore.SVG_DEFAULT_VIEWBOX_24,
               fill: svgProps.fill ?? tigercatCore.SVG_DEFAULT_FILL,
               stroke: svgProps.stroke ?? tigercatCore.SVG_DEFAULT_STROKE,
-              "stroke-width": svgProps["stroke-width"] ?? "2",
-              "stroke-linecap": svgProps["stroke-linecap"] ?? "round",
-              "stroke-linejoin": svgProps["stroke-linejoin"] ?? "round"
+              "stroke-width": svgProps["stroke-width"] ?? tigercatCore.iconSvgDefaultStrokeWidth,
+              "stroke-linecap": svgProps["stroke-linecap"] ?? tigercatCore.iconSvgDefaultStrokeLinecap,
+              "stroke-linejoin": svgProps["stroke-linejoin"] ?? tigercatCore.iconSvgDefaultStrokeLinejoin
             },
-            svgChildren
+            svgNode.children === null ? void 0 : svgNode.children
           );
         }
         return node;
@@ -87,7 +60,7 @@ var Icon = vue.defineComponent({
         {
           ...attrs,
           class: wrapperClasses.value,
-          style: wrapperStyle.value,
+          style: { ...attrs.style, color: props.color },
           ...isDecorative ? { "aria-hidden": "true" } : { role: attrs.role ?? "img" }
         },
         children

package/dist/{chunk-3F2QHERR.js → chunk-S4GFEADD.js}

@@ -1,9 +1,17 @@
 'use strict';
 
-var chunkQIS3MLLN_js = require('./chunk-QIS3MLLN.js');
+var chunkATOLZW76_js = require('./chunk-ATOLZW76.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
+function mergeAriaDescribedBy(existing, next) {
+  if (!existing) return next;
+  if (!next) return existing;
+  const parts = new Set(
+    `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
+  );
+  return Array.from(parts).join(" ");
+}
 var formItemIdCounter = 0;
 var FormItem = vue.defineComponent({
   name: "TigerFormItem",
@@ -60,9 +68,11 @@ var FormItem = vue.defineComponent({
     }
   },
   setup(props, { slots }) {
-    const formContextRef = vue.inject(chunkQIS3MLLN_js.FormContextKey, null);
+    const formContextRef = vue.inject(chunkATOLZW76_js.FormContextKey, null);
     const formContext = vue.computed(() => formContextRef?.value ?? null);
     const errorMessage = vue.ref("");
+    const shakeTrigger = vue.ref(0);
+    const prevFormError = vue.ref("");
     const instanceId = ++formItemIdCounter;
     const baseId = `tiger-form-item-${instanceId}`;
     const labelId = `${baseId}-label`;
@@ -118,8 +128,12 @@ var FormItem = vue.defineComponent({
       () => formContext.value?.errors,
       (errors) => {
         if (props.name && errors) {
-          const error = tigercatCore.getFieldError(props.name, errors);
-          errorMessage.value = error || "";
+          const error = tigercatCore.getFieldError(props.name, errors) || "";
+          errorMessage.value = error;
+          if (error && error !== prevFormError.value) {
+            shakeTrigger.value++;
+          }
+          prevFormError.value = error;
         }
       },
       { deep: true, immediate: true }
@@ -197,27 +211,11 @@ var FormItem = vue.defineComponent({
     });
     const contentClasses = vue.computed(() => tigercatCore.getFormItemContentClasses(labelPosition.value));
     const errorClasses = vue.computed(() => {
-      return tigercatCore.classNames(
-        tigercatCore.getFormItemErrorClasses(actualSize.value),
-        hasError.value && "tiger-form-item__error--show"
-      );
+      return tigercatCore.classNames(tigercatCore.getFormItemErrorClasses(actualSize.value), hasError.value && "opacity-100");
     });
-    const fieldClasses = vue.computed(() => tigercatCore.getFormItemFieldClasses());
-    const asteriskClasses = vue.computed(() => tigercatCore.getFormItemAsteriskClasses());
-    const asteriskStyle = vue.computed(() => tigercatCore.getFormItemAsteriskStyle());
+    const fieldClasses = tigercatCore.getFormItemFieldClasses();
+    const asteriskClasses = tigercatCore.getFormItemAsteriskClasses();
     return () => {
-      const mergeAriaDescribedBy = (existing, next) => {
-        if (!existing) {
-          return next;
-        }
-        if (!next) {
-          return existing;
-        }
-        const parts = new Set(
-          `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
-        );
-        return Array.from(parts).join(" ");
-      };
       const defaultSlot = slots.default?.() ?? [];
       const only = defaultSlot.length === 1 ? defaultSlot[0] : void 0;
       const isSingleVNode = only != null && vue.isVNode(only);
@@ -234,36 +232,22 @@ var FormItem = vue.defineComponent({
         }
         const vnode = only;
         const existingProps = vnode.props ?? {};
-        const existingOnBlur = existingProps.onBlur;
-        const existingOnFocusout = existingProps.onFocusout;
-        const existingOnInput = existingProps.onInput;
-        const existingOnChange = existingProps.onChange;
+        const isNativeElement = typeof vnode.type === "string";
         const merged = vue.cloneVNode(
           vnode,
           {
             id: effectiveFieldId,
+            status: !isNativeElement && hasError.value ? "error" : existingProps.status,
+            errorMessage: !isNativeElement && hasError.value && !props.showMessage ? errorMessage.value : existingProps.errorMessage,
+            _shakeTrigger: !isNativeElement && hasError.value ? shakeTrigger.value : void 0,
             "aria-invalid": hasError.value ? "true" : existingProps["aria-invalid"],
             "aria-required": isRequired.value ? "true" : existingProps["aria-required"],
             "aria-describedby": mergeAriaDescribedBy(
               existingProps["aria-describedby"],
               describedById.value
             ),
-            onBlur: (event) => {
-              existingOnBlur?.(event);
-              handleBlur();
-            },
-            onFocusout: (event) => {
-              existingOnFocusout?.(event);
-              handleBlur();
-            },
-            onInput: (event) => {
-              existingOnInput?.(event);
-              handleChange();
-            },
-            onChange: (event) => {
-              existingOnChange?.(event);
-              handleChange();
-            }
+            onFocusout: handleBlur,
+            onInput: handleChange
           },
           true
         );
@@ -277,10 +261,7 @@ var FormItem = vue.defineComponent({
           id: labelId,
           for: effectiveFieldId
         },
-        [
-          isRequired.value && vue.h("span", { class: asteriskClasses.value, style: asteriskStyle.value }, "*"),
-          props.label
-        ]
+        [isRequired.value && vue.h("span", { class: asteriskClasses }, "*"), props.label]
       ) : null;
       const contentElement = vue.h(
         "div",
@@ -291,26 +272,26 @@ var FormItem = vue.defineComponent({
           vue.h(
             "div",
             {
-              class: fieldClasses.value,
+              class: fieldClasses,
               role: "group",
               "aria-labelledby": props.label ? labelId : void 0,
               "aria-describedby": describedById.value,
               "aria-invalid": hasError.value ? "true" : void 0,
               "aria-required": isRequired.value ? "true" : void 0,
               onFocusout: isSingleVNode ? void 0 : handleBlur,
-              onInput: isSingleVNode ? void 0 : handleChange,
-              onChange: isSingleVNode ? void 0 : handleChange
+              onInput: isSingleVNode ? void 0 : handleChange
             },
             fieldChildren
           ),
-          props.showMessage && hasError.value && vue.h(
+          props.showMessage && vue.h(
             "div",
             {
-              id: errorId,
-              role: "alert",
-              class: errorClasses.value
+              id: hasError.value ? errorId : void 0,
+              role: hasError.value ? "alert" : void 0,
+              class: errorClasses.value,
+              "aria-hidden": hasError.value ? void 0 : "true"
             },
-            errorMessage.value
+            hasError.value ? errorMessage.value : ""
           )
         ]
       );

package/dist/{chunk-GGV4STQD.js → chunk-SKV2HHBC.js}

@@ -1,29 +1,9 @@
 'use strict';
 
+var chunkOOKS4KMK_js = require('./chunk-OOKS4KMK.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/Alert.ts
-function createIcon(path, className) {
-  return vue.h(
-    "svg",
-    {
-      class: className,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: tigercatCore.icon24ViewBox,
-      stroke: "currentColor",
-      "stroke-width": String(tigercatCore.icon24StrokeWidth)
-    },
-    [
-      vue.h("path", {
-        "stroke-linecap": tigercatCore.icon24PathStrokeLinecap,
-        "stroke-linejoin": tigercatCore.icon24PathStrokeLinejoin,
-        d: path
-      })
-    ]
-  );
-}
 var Alert = vue.defineComponent({
   name: "TigerAlert",
   inheritAttrs: false,
@@ -143,7 +123,7 @@ var Alert = vue.defineComponent({
       if (props.showIcon) {
         const iconPath = tigercatCore.getAlertIconPath(props.type);
         children.push(
-          vue.h("div", { class: tigercatCore.alertIconContainerClasses }, createIcon(iconPath, iconClasses.value))
+          vue.h("div", { class: tigercatCore.alertIconContainerClasses }, chunkOOKS4KMK_js.createStatusIcon(iconPath, iconClasses.value))
         );
       }
       const contentChildren = [];
@@ -177,7 +157,7 @@ var Alert = vue.defineComponent({
               "aria-label": props.closeAriaLabel,
               type: "button"
             },
-            createIcon(tigercatCore.alertCloseIconPath, "h-4 w-4")
+            chunkOOKS4KMK_js.createStatusIcon(tigercatCore.alertCloseIconPath, "h-4 w-4")
           )
         );
       }

package/dist/{chunk-FJ2ZZHIW.js → chunk-SLYUQ67P.js}

@@ -127,23 +127,26 @@ var Slider = vue.defineComponent({
         }
       }
     );
-    const normalizeValue = (val) => tigercatCore.sliderNormalizeValue(val, props.min, props.max, props.step);
     const getPercentage = (val) => tigercatCore.sliderGetPercentage(val, props.min, props.max);
-    const getValueFromPosition = (clientX, trackElement2) => {
-      const rect = trackElement2.getBoundingClientRect();
-      const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-      const rawValue = props.min + percentage * (props.max - props.min);
-      return normalizeValue(rawValue);
+    const getValueFromPosition = (clientX, el) => {
+      const rect = el.getBoundingClientRect();
+      return tigercatCore.sliderGetValueFromPosition(
+        clientX - rect.left,
+        rect.width,
+        props.min,
+        props.max,
+        props.step
+      );
     };
     const updateValue = (newValue) => {
       internalValue.value = newValue;
       emit("update:value", newValue);
       emit("change", newValue);
     };
-    const handleMove = (event, trackElement2) => {
+    const handleMove = (event, el) => {
       if (props.disabled || !isDragging.value) return;
       const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
-      const newValue = getValueFromPosition(clientX, trackElement2);
+      const newValue = getValueFromPosition(clientX, el);
       if (props.range && Array.isArray(internalValue.value)) {
         const [minVal, maxVal] = internalValue.value;
         if (activeThumb.value === "min") {
@@ -167,9 +170,7 @@ var Slider = vue.defineComponent({
       activeThumb.value = null;
       showTooltip.value = false;
     };
-    const trackStyles = vue.computed(() => {
-      return tigercatCore.getSliderTrackClasses(props.size, props.disabled);
-    });
+    const trackClasses = vue.computed(() => tigercatCore.getSliderTrackClasses(props.size, props.disabled));
     const rangeStyles = vue.computed(() => {
       if (props.range && Array.isArray(internalValue.value)) {
         const [minVal, maxVal] = internalValue.value;
@@ -187,12 +188,8 @@ var Slider = vue.defineComponent({
         };
       }
     });
-    const thumbClasses_computed = vue.computed(() => {
-      return tigercatCore.getSliderThumbClasses(props.size, props.disabled);
-    });
-    const tooltipClasses_computed = vue.computed(() => {
-      return tigercatCore.getSliderTooltipClasses(props.size);
-    });
+    const thumbClasses = vue.computed(() => tigercatCore.getSliderThumbClasses(props.size, props.disabled));
+    const tooltipClasses = vue.computed(() => tigercatCore.getSliderTooltipClasses(props.size));
     const handleTrackMouseMove = (e) => {
       if (trackElement.value) handleMove(e, trackElement.value);
     };
@@ -213,12 +210,6 @@ var Slider = vue.defineComponent({
         });
       }
     });
-    vue.onBeforeUnmount(() => {
-      document.removeEventListener("mousemove", handleTrackMouseMove);
-      document.removeEventListener("mouseup", handleEnd);
-      document.removeEventListener("touchmove", handleTrackTouchMove);
-      document.removeEventListener("touchend", handleEnd);
-    });
     return () => {
       const ariaLabel = attrs["aria-label"];
       const ariaLabelledby = attrs["aria-labelledby"];
@@ -244,7 +235,7 @@ var Slider = vue.defineComponent({
         return vue.h(
           "div",
           {
-            class: thumbClasses_computed.value,
+            class: thumbClasses.value,
             style: { left: `${left}%` },
             tabindex: props.disabled ? -1 : 0,
             role: "slider",
@@ -287,7 +278,7 @@ var Slider = vue.defineComponent({
               }
             }
           },
-          showThumbTooltip && props.tooltip ? vue.h("div", { class: tooltipClasses_computed.value }, value.toString()) : void 0
+          showThumbTooltip && props.tooltip ? vue.h("div", { class: tooltipClasses.value }, value.toString()) : void 0
         );
       };
       const createMarks = () => {
@@ -326,7 +317,7 @@ var Slider = vue.defineComponent({
             "div",
             {
               ref: trackElement,
-              class: trackStyles.value,
+              class: trackClasses.value,
               onClick: (e) => {
                 if (props.disabled || !trackElement.value) return;
                 const newValue = getValueFromPosition(e.clientX, trackElement.value);

package/dist/{chunk-LGKMVPIB.js → chunk-SWOQMMOT.js}

@@ -32,23 +32,22 @@ var Footer = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const attrsRecord = attrs;
     const footerClasses = vue.computed(
-      () => tigercatCore.classNames(tigercatCore.layoutFooterClasses, props.className, tigercatCore.coerceClassValue(attrsRecord.class))
+      () => tigercatCore.classNames(
+        tigercatCore.layoutFooterClasses,
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    return () => vue.h(
+      "footer",
+      {
+        ...attrs,
+        class: footerClasses.value,
+        style: tigercatCore.mergeStyleValues(props.style, { height: props.height })
+      },
+      slots.default?.()
     );
-    return () => {
-      return vue.h(
-        "footer",
-        {
-          ...attrs,
-          class: footerClasses.value,
-          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style, {
-            height: props.height
-          })
-        },
-        slots.default?.()
-      );
-    };
   }
 });
 var Footer_default = Footer;