@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-KPWSO25U.mjs

@@ -0,0 +1,139 @@
+// src/components/Badge.ts
+import { defineComponent, computed, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  getBadgeVariantClasses,
+  badgeBaseClasses,
+  badgeSizeClasses,
+  dotSizeClasses,
+  badgeTypeClasses,
+  badgeWrapperClasses,
+  badgePositionClasses,
+  resolveBadgeContent,
+  warnStandaloneBadgeChildren
+} from "@expcat/tigercat-core";
+var Badge = defineComponent({
+  name: "TigerBadge",
+  inheritAttrs: false,
+  props: {
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    variant: {
+      type: String,
+      default: "danger"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    type: {
+      type: String,
+      default: "number"
+    },
+    content: {
+      type: [Number, String],
+      default: void 0
+    },
+    max: {
+      type: Number,
+      default: 99
+    },
+    showZero: {
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: String,
+      default: "top-right"
+    },
+    standalone: {
+      type: Boolean,
+      default: true
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const resolved = computed(
+      () => resolveBadgeContent({
+        type: props.type,
+        content: props.content,
+        max: props.max,
+        showZero: props.showZero
+      })
+    );
+    const isDot = computed(() => resolved.value.kind === "dot");
+    const isHidden = computed(() => resolved.value.kind === "hidden");
+    const badgeClasses = computed(
+      () => classNames(
+        badgeBaseClasses,
+        getBadgeVariantClasses(props.variant),
+        isDot.value ? dotSizeClasses[props.size] : badgeSizeClasses[props.size],
+        badgeTypeClasses[props.type],
+        !props.standalone && badgePositionClasses[props.position]
+      )
+    );
+    return () => {
+      const defaultSlot = slots.default?.() ?? [];
+      warnStandaloneBadgeChildren(defaultSlot.length > 0, props.standalone);
+      const attrsRecord = attrs;
+      const ariaLabel = attrsRecord["aria-label"];
+      const ariaLabelledby = attrsRecord["aria-labelledby"];
+      const ariaHidden = attrsRecord["aria-hidden"];
+      const userNamed = Boolean(ariaLabel || ariaLabelledby);
+      const hideFromAT = ariaHidden ?? (!userNamed && (isDot.value || !props.standalone));
+      const {
+        class: attrsClass,
+        style: attrsStyle,
+        "aria-label": _ariaLabel,
+        "aria-labelledby": _ariaLabelledby,
+        "aria-hidden": _ariaHidden,
+        ...restAttrs
+      } = attrsRecord;
+      const badgeElement = isHidden.value ? null : h(
+        "span",
+        {
+          ...props.standalone ? restAttrs : void 0,
+          class: classNames(
+            badgeClasses.value,
+            props.standalone && props.className,
+            props.standalone && coerceClassValue(attrsClass)
+          ),
+          style: props.standalone ? mergeStyleValues(attrsStyle, props.style) : void 0,
+          "aria-hidden": hideFromAT ? true : ariaHidden,
+          "aria-label": hideFromAT ? void 0 : ariaLabel,
+          "aria-labelledby": hideFromAT ? void 0 : ariaLabelledby
+        },
+        resolved.value.kind === "text" ? resolved.value.value : void 0
+      );
+      if (props.standalone) {
+        return badgeElement;
+      }
+      return h(
+        "span",
+        {
+          ...restAttrs,
+          class: classNames(badgeWrapperClasses, props.className, coerceClassValue(attrsClass)),
+          style: mergeStyleValues(attrsStyle, props.style)
+        },
+        [...defaultSlot, badgeElement]
+      );
+    };
+  }
+});
+var Badge_default = Badge;
+
+export {
+  Badge,
+  Badge_default
+};

package/dist/{chunk-FISKCPTN.mjs → chunk-L5ZHCFHX.mjs}

@@ -1,9 +1,12 @@
 import {
   createStatusIcon
-} from "./chunk-2TNZ4JNT.mjs";
+} from "./chunk-5VSSB4QF.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Alert.ts
-import { defineComponent, computed, h, ref, onMounted, onBeforeUnmount } from "vue";
+import { defineComponent, computed, h, watch, onBeforeUnmount } from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -16,19 +19,26 @@ import {
   alertDescriptionSizeClasses,
   alertCloseButtonBaseClasses,
   alertIconContainerClasses,
-  alertContentClasses,
+  getAlertContentClasses,
   getAlertIconPath,
   alertCloseIconPath,
   alertBannerClasses,
   alertCountdownContainerClasses,
   alertCountdownBarClasses,
   alertCountdownColorClasses,
+  resolveAlertRole,
+  getAlertLabels,
+  mergeTigerLocale,
   mergeStyleValues
 } from "@expcat/tigercat-core";
 var Alert = defineComponent({
   name: "TigerAlert",
   inheritAttrs: false,
   props: {
+    locale: {
+      type: Object,
+      default: void 0
+    },
     /**
      * Alert type (determines icon and color scheme)
      * @default 'info'
@@ -76,20 +86,28 @@ var Alert = defineComponent({
       default: false
     },
     /**
-     * Accessible label for the close button (when `closable` is true)
-     * @default 'Close alert'
+     * Accessible label for the close button (when `closable` is true).
+     * Defaults to ConfigProvider locale `alert.closeAriaLabel`.
      */
     closeAriaLabel: {
       type: String,
-      default: "Close alert"
+      default: void 0
     },
     /**
      * Auto-close duration in milliseconds. 0 or undefined to disable.
+     * Independent of `closable`.
      */
     duration: {
       type: Number,
       default: void 0
     },
+    /**
+     * When `false`, the alert is not rendered. Closing never hides internally.
+     */
+    open: {
+      type: Boolean,
+      default: void 0
+    },
     /**
      * Additional CSS classes
      */
@@ -121,9 +139,12 @@ var Alert = defineComponent({
       default: false
     }
   },
-  emits: ["close"],
+  emits: ["close", "update:open"],
   setup(props, { slots, emit, attrs }) {
-    const visible = ref(true);
+    const config = useTigerConfig();
+    const labels = computed(
+      () => getAlertLabels(mergeTigerLocale(config.value.locale, props.locale))
+    );
     const colorScheme = computed(() => getAlertTypeClasses(props.type, defaultAlertThemeColors));
     const alertClasses = computed(
       () => classNames(
@@ -151,42 +172,44 @@ var Alert = defineComponent({
         colorScheme.value.focus
       )
     );
-    const handleClose = (event) => {
-      emit("close", event);
-      if (!event.defaultPrevented) {
-        visible.value = false;
+    let autoCloseTimer;
+    const clearTimer = () => {
+      if (autoCloseTimer) {
+        clearTimeout(autoCloseTimer);
+        autoCloseTimer = void 0;
       }
     };
-    let autoCloseTimer;
-    const countdownProgress = ref(100);
-    let countdownInterval;
-    onMounted(() => {
-      if (props.duration && props.duration > 0 && props.closable) {
-        const duration = props.duration;
-        autoCloseTimer = setTimeout(() => {
-          visible.value = false;
-          emit("close", new MouseEvent("click"));
-        }, duration);
-        if (props.showCountdown) {
-          const startTime = Date.now();
-          countdownInterval = setInterval(() => {
-            const elapsed = Date.now() - startTime;
-            countdownProgress.value = Math.max(0, 100 - elapsed / duration * 100);
-          }, 50);
+    const requestClose = (event) => {
+      emit("close", event);
+      emit("update:open", false);
+      clearTimer();
+    };
+    const handleClose = (event) => {
+      event.stopPropagation();
+      requestClose(event);
+    };
+    watch(
+      () => [props.duration, props.open],
+      () => {
+        clearTimer();
+        if (props.open === false) return;
+        if (props.duration && props.duration > 0) {
+          autoCloseTimer = setTimeout(() => {
+            requestClose(new Event("close", { cancelable: true }));
+          }, props.duration);
         }
-      }
-    });
-    onBeforeUnmount(() => {
-      if (autoCloseTimer) clearTimeout(autoCloseTimer);
-      if (countdownInterval) clearInterval(countdownInterval);
-    });
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(clearTimer);
     return () => {
-      if (!visible.value) {
+      if (props.open === false) {
         return null;
       }
       const attrsRecord = attrs;
       const attrsClass = attrsRecord.class;
       const attrsStyle = attrsRecord.style;
+      const attrsRole = attrsRecord.role;
       const children = [];
       if (props.showIcon) {
         const iconPath = getAlertIconPath(props.type);
@@ -194,17 +217,24 @@ var Alert = defineComponent({
           h(
             "div",
             { class: alertIconContainerClasses },
-            createStatusIcon(iconPath, iconClasses.value)
+            createStatusIcon(iconPath, iconClasses.value, {
+              "aria-hidden": "true",
+              focusable: "false"
+            })
           )
         );
       }
       const contentChildren = [];
-      if (props.title || slots.title) {
+      const hasTitle = !!(props.title || slots.title);
+      const hasDescription = !!(props.description || slots.description);
+      const hasDefault = !!slots.default;
+      const defaultSlot = hasDefault ? slots.default?.() : void 0;
+      if (hasTitle) {
         contentChildren.push(
           h("div", { class: titleClasses.value }, slots.title ? slots.title() : props.title)
         );
       }
-      if (props.description || slots.description) {
+      if (hasDescription) {
         contentChildren.push(
           h(
             "div",
@@ -213,11 +243,17 @@ var Alert = defineComponent({
           )
         );
       }
-      if (!props.title && !props.description && !slots.title && !slots.description && slots.default) {
-        contentChildren.push(h("div", { class: titleClasses.value }, slots.default()));
+      if (hasDefault) {
+        contentChildren.push(
+          h(
+            "div",
+            { class: hasTitle || hasDescription ? descriptionClasses.value : titleClasses.value },
+            defaultSlot
+          )
+        );
       }
       if (contentChildren.length > 0) {
-        children.push(h("div", { class: alertContentClasses }, contentChildren));
+        children.push(h("div", { class: getAlertContentClasses(props.showIcon) }, contentChildren));
       }
       if (props.closable) {
         children.push(
@@ -226,30 +262,35 @@ var Alert = defineComponent({
             {
               class: closeButtonClasses.value,
               onClick: handleClose,
-              "aria-label": props.closeAriaLabel,
+              "aria-label": props.closeAriaLabel ?? labels.value.closeAriaLabel,
               type: "button"
             },
-            createStatusIcon(alertCloseIconPath, "h-4 w-4")
+            createStatusIcon(alertCloseIconPath, "h-4 w-4", {
+              "aria-hidden": "true",
+              focusable: "false"
+            })
           )
         );
       }
-      if (props.showCountdown && props.duration && props.duration > 0 && props.closable) {
+      if (props.showCountdown && props.duration && props.duration > 0) {
         children.push(
           h("div", { class: alertCountdownContainerClasses }, [
             h("div", {
               class: classNames(alertCountdownBarClasses, alertCountdownColorClasses[props.type]),
-              style: { width: `${countdownProgress.value}%` }
+              style: { animationDuration: `${props.duration}ms` }
             })
           ])
         );
       }
+      const hasContent = hasTitle || hasDescription || hasDefault;
+      const role = typeof attrsRole === "string" ? attrsRole : resolveAlertRole(props.type, hasContent);
       return h(
         "div",
         {
           ...attrs,
           class: classNames(alertClasses.value, props.className, coerceClassValue(attrsClass)),
           style: mergeStyleValues(attrsStyle, props.style),
-          role: "alert"
+          role
         },
         children
       );