@expcat/tigercat-vue 1.5.0 → 2.0.0-preview.1

package/dist/{chunk-6CS3EEQU.mjs → chunk-BNNTDSLJ.mjs}

@@ -11,6 +11,7 @@ import {
   computed,
   ref,
   provide,
+  inject,
   reactive,
   h,
   onBeforeUnmount,
@@ -27,6 +28,7 @@ import {
   getDropdownTriggerClasses,
   getDropdownChevronClasses,
   getDropdownMenuClasses,
+  getDropdownItemClasses,
   getTransformOrigin,
   injectDropdownStyles,
   FLOATING_OVERLAY_Z_INDEX,
@@ -83,6 +85,86 @@ var DropdownMenu = defineComponent({
 var dropdownIdCounter = 0;
 var createDropdownMenuId = () => `tiger-dropdown-menu-${++dropdownIdCounter}`;
 var DropdownContextKey = /* @__PURE__ */ Symbol("DropdownContext");
+var DropdownItem = defineComponent({
+  name: "TigerDropdownItem",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the item is divided from previous item
+     * @default false
+     */
+    divided: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(props, { slots, emit, attrs }) {
+    const attrsRecord = attrs;
+    const attrsClass = attrsRecord.class;
+    const attrsStyle = attrsRecord.style;
+    const context = inject(DropdownContextKey, null);
+    const handleClick = (event) => {
+      if (props.disabled) {
+        event.preventDefault();
+        return;
+      }
+      emit("click", event);
+      if (context?.closeOnClick) {
+        context.handleItemClick();
+      }
+    };
+    const itemClasses = computed(() => {
+      return classNames(
+        getDropdownItemClasses(props.disabled, props.divided),
+        props.className,
+        coerceClassValue(attrsClass)
+      );
+    });
+    const mergedStyle = computed(() => mergeStyleValues(attrsStyle, props.style));
+    return () => {
+      const {
+        class: _class,
+        style: _style,
+        ...restAttrs
+      } = attrsRecord;
+      return h(
+        "button",
+        {
+          ...restAttrs,
+          type: "button",
+          class: itemClasses.value,
+          role: "menuitem",
+          tabindex: -1,
+          "aria-disabled": props.disabled,
+          disabled: props.disabled,
+          onClick: handleClick,
+          style: mergedStyle.value
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
 var Dropdown = defineComponent({
   name: "TigerDropdown",
   inheritAttrs: false,
@@ -396,6 +478,7 @@ var Dropdown_default = Dropdown;
 export {
   DropdownMenu,
   DropdownContextKey,
+  DropdownItem,
   Dropdown,
   Dropdown_default
 };

package/dist/{chunk-5CHHWMES.mjs → chunk-DOVBKVTB.mjs}

@@ -1,6 +1,6 @@
 import {
   Modal
-} from "./chunk-3VFZB5ZK.mjs";
+} from "./chunk-IQNZ4UEA.mjs";
 import {
   ImageCropper
 } from "./chunk-4IZUJJUO.mjs";

package/dist/chunk-ESBUNMIG.mjs

@@ -0,0 +1,49 @@
+// src/components/NotificationRoot.ts
+var notificationModulePromise = null;
+function loadNotificationModule() {
+  notificationModulePromise ??= import("./components/Notification.mjs");
+  return notificationModulePromise;
+}
+function forwardNotification(method, options) {
+  let closeNotification = null;
+  let requestedClose = false;
+  void loadNotificationModule().then(({ notification: notification2 }) => {
+    const close = notification2[method](options);
+    if (requestedClose) {
+      close();
+    } else {
+      closeNotification = close;
+    }
+  });
+  return () => {
+    if (closeNotification) {
+      closeNotification();
+      closeNotification = null;
+    } else {
+      requestedClose = true;
+    }
+  };
+}
+var notification = {
+  success(options) {
+    return forwardNotification("success", options);
+  },
+  warning(options) {
+    return forwardNotification("warning", options);
+  },
+  error(options) {
+    return forwardNotification("error", options);
+  },
+  info(options) {
+    return forwardNotification("info", options);
+  },
+  clear(position) {
+    void loadNotificationModule().then(({ notification: notification2 }) => {
+      notification2.clear(position);
+    });
+  }
+};
+
+export {
+  notification
+};

package/dist/{chunk-KJ6VISRW.mjs → chunk-EUSODI5E.mjs}

@@ -1,6 +1,6 @@
 import {
   useFloatingPopup
-} from "./chunk-M4EP4OVR.mjs";
+} from "./chunk-KE6RGD4Y.mjs";
 import {
   renderVueBodyTeleport
 } from "./chunk-BDTPFPSB.mjs";

package/dist/{chunk-LHOSPU6V.mjs → chunk-FDKJOVXG.mjs}

@@ -154,10 +154,10 @@ var Drawer = defineComponent({
       default: false
     },
     /**
-     * When destroyOnClose is true, wait for leave animation before unmounting.
+     * When destroyOnClose is true, wait for the close animation before unmounting.
      * @default false
      */
-    destroyOnCloseAfterLeave: {
+    deferDestroyOnClose: {
       type: Boolean,
       default: false
     },
@@ -211,18 +211,9 @@ var Drawer = defineComponent({
     labels: {
       type: Object,
       default: void 0
-    },
-    /**
-     * Disable teleport (useful for testing)
-     * @default false
-     * @internal
-     */
-    disableTeleport: {
-      type: Boolean,
-      default: false
     }
   },
-  emits: ["update:open", "close", "after-enter", "after-leave"],
+  emits: ["update:open", "close", "after-enter", "after-close"],
   setup(props, { slots, emit, attrs }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
@@ -241,7 +232,7 @@ var Drawer = defineComponent({
         return true;
       }
       if (props.destroyOnClose) {
-        return props.destroyOnCloseAfterLeave ? deferredRendered.value : false;
+        return props.deferDestroyOnClose ? deferredRendered.value : false;
       }
       return hasBeenOpened.value;
     });
@@ -305,7 +296,7 @@ var Drawer = defineComponent({
           focusFirst([closeButtonRef.value, dialogRef.value]);
           return;
         }
-        if (props.destroyOnClose && !props.destroyOnCloseAfterLeave) {
+        if (props.destroyOnClose && !props.deferDestroyOnClose) {
           deferredRendered.value = false;
         }
         restoreFocus(previousActiveElement.value);
@@ -317,8 +308,8 @@ var Drawer = defineComponent({
         if (nextVisible === prevVisible || typeof prevVisible === "undefined" && !nextVisible)
           return;
         const timer = window.setTimeout(() => {
-          emit(nextVisible ? "after-enter" : "after-leave");
-          if (!nextVisible && props.destroyOnClose && props.destroyOnCloseAfterLeave) {
+          emit(nextVisible ? "after-enter" : "after-close");
+          if (!nextVisible && props.destroyOnClose && props.deferDestroyOnClose) {
             deferredRendered.value = false;
           }
         }, ANIMATION_DURATION_MS);
@@ -433,13 +424,13 @@ var Drawer = defineComponent({
         {
           class: containerClasses,
           style: { zIndex: props.zIndex },
-          hidden: !props.open && !(props.destroyOnClose && props.destroyOnCloseAfterLeave),
+          hidden: !props.open && !(props.destroyOnClose && props.deferDestroyOnClose),
           "aria-hidden": !props.open ? "true" : void 0,
           "data-tiger-drawer-root": ""
         },
         [mask, panel]
       );
-      return renderVueBodyTeleport([root], props.disableTeleport);
+      return renderVueBodyTeleport([root]);
     };
   }
 });

package/dist/{chunk-LHZ5MRFQ.mjs → chunk-FHJ3R57L.mjs}

@@ -1,15 +1,9 @@
 import {
   useChartInteraction
-} from "./chunk-R2HO74FE.mjs";
-import {
-  ChartLegend
-} from "./chunk-HLPSHCXO.mjs";
-import {
-  ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
+} from "./chunk-PE5OA4YG.mjs";
 import {
   ChartTooltip
-} from "./chunk-G2LB4QCL.mjs";
+} from "./chunk-SPFL55TF.mjs";
 import {
   ChartAxis
 } from "./chunk-ZWVA7HT3.mjs";
@@ -19,6 +13,12 @@ import {
 import {
   ChartGrid
 } from "./chunk-MI6TL3CQ.mjs";
+import {
+  ChartLegend
+} from "./chunk-HLPSHCXO.mjs";
+import {
+  ChartSeries
+} from "./chunk-2ZUEXCVJ.mjs";
 
 // src/components/BarChart.ts
 import { defineComponent, computed, h, useId } from "vue";
@@ -451,7 +451,7 @@ var BarChart = defineComponent({
       );
       const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
         content: tooltipContent.value,
-        visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;

package/dist/{chunk-PMN2MQ26.mjs → chunk-FIVVKBBF.mjs}

@@ -1,9 +1,9 @@
 import {
   useChartInteraction
-} from "./chunk-R2HO74FE.mjs";
+} from "./chunk-PE5OA4YG.mjs";
 import {
   ChartTooltip
-} from "./chunk-G2LB4QCL.mjs";
+} from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
 } from "./chunk-W5RZPTFD.mjs";
@@ -285,7 +285,7 @@ var HeatmapChart = defineComponent({
       );
       const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
         content: tooltipContent.value,
-        visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;

package/dist/{chunk-JGW7R7AZ.mjs → chunk-G7MOTNJO.mjs}

@@ -1,18 +1,18 @@
 import {
   useChartInteraction
-} from "./chunk-R2HO74FE.mjs";
+} from "./chunk-PE5OA4YG.mjs";
+import {
+  ChartTooltip
+} from "./chunk-SPFL55TF.mjs";
+import {
+  ChartCanvas
+} from "./chunk-W5RZPTFD.mjs";
 import {
   ChartLegend
 } from "./chunk-HLPSHCXO.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
-import {
-  ChartTooltip
-} from "./chunk-G2LB4QCL.mjs";
-import {
-  ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
 
 // src/components/TreeMapChart.ts
 import { defineComponent, computed, h, useId } from "vue";
@@ -221,7 +221,7 @@ var TreeMapChart = defineComponent({
       );
       const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
         content: tooltipContent.value,
-        visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;

package/dist/{chunk-WSUCJHJX.mjs → chunk-GAEO66NY.mjs}

@@ -1,9 +1,9 @@
 import {
   ImagePreview
-} from "./chunk-WWB7VKKH.mjs";
+} from "./chunk-36WSYHJU.mjs";
 import {
   useFloatingPopup
-} from "./chunk-M4EP4OVR.mjs";
+} from "./chunk-KE6RGD4Y.mjs";
 import {
   renderVueBodyTeleport
 } from "./chunk-BDTPFPSB.mjs";

package/dist/chunk-GMIKUE67.mjs

@@ -0,0 +1,201 @@
+import {
+  createStatusIcon
+} from "./chunk-2TNZ4JNT.mjs";
+
+// src/components/NotificationContainer.ts
+import { computed, defineComponent, h, Teleport, TransitionGroup } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getNotificationIconPath,
+  getNotificationTypeClasses,
+  notificationActionButtonClasses,
+  notificationActionButtonTypeClasses,
+  notificationActionsClasses,
+  notificationBaseClasses,
+  notificationCloseButtonClasses,
+  notificationCloseIconClasses,
+  notificationCloseIconPath,
+  notificationContainerBaseClasses,
+  notificationContentClasses,
+  notificationDescriptionClasses,
+  notificationIconClasses,
+  notificationPositionClasses,
+  notificationTitleClasses
+} from "@expcat/tigercat-core";
+var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
+var NOTIFICATION_CLOSE_ARIA_LABEL = "Close notification";
+var IS_TEST_ENV = (() => {
+  const proc = globalThis.process;
+  return typeof proc !== "undefined" && proc.env?.NODE_ENV === "test";
+})();
+var NotificationContainer = /* @__PURE__ */ defineComponent({
+  name: "TigerNotificationContainer",
+  inheritAttrs: false,
+  props: {
+    position: {
+      type: String,
+      default: "top-right"
+    },
+    notifications: {
+      type: Array,
+      default: () => []
+    },
+    onClose: Function
+  },
+  setup(props, { attrs }) {
+    const containerClasses = computed(
+      () => classNames(
+        notificationContainerBaseClasses,
+        notificationPositionClasses[props.position],
+        coerceClassValue(attrs.class)
+      )
+    );
+    const renderNotificationItem = (notification) => {
+      const colorScheme = getNotificationTypeClasses(notification.type);
+      const notificationClasses = classNames(
+        notificationBaseClasses,
+        colorScheme.bg,
+        colorScheme.border,
+        notification.className
+      );
+      const iconPath = notification.icon || getNotificationIconPath(notification.type);
+      const iconClass = classNames(notificationIconClasses, colorScheme.icon);
+      const a11yRole = notification.type === "error" ? "alert" : "status";
+      const ariaLive = notification.type === "error" ? "assertive" : "polite";
+      const contentChildren = [
+        h(
+          "div",
+          {
+            class: classNames(notificationTitleClasses, colorScheme.titleText)
+          },
+          notification.title
+        )
+      ];
+      if (notification.description) {
+        contentChildren.push(
+          h(
+            "div",
+            {
+              class: classNames(notificationDescriptionClasses, colorScheme.descriptionText)
+            },
+            notification.description
+          )
+        );
+      }
+      if (notification.actions?.length) {
+        contentChildren.push(
+          h(
+            "div",
+            { class: notificationActionsClasses },
+            notification.actions.map(
+              (action) => h(
+                "button",
+                {
+                  key: action.key ?? action.label,
+                  class: classNames(
+                    notificationActionButtonClasses,
+                    notificationActionButtonTypeClasses[action.type ?? "default"]
+                  ),
+                  type: "button",
+                  disabled: action.disabled,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    action.onClick?.({
+                      id: notification.id,
+                      close: () => props.onClose?.(notification.id)
+                    });
+                    if (action.closeOnClick) {
+                      props.onClose?.(notification.id);
+                    }
+                  }
+                },
+                action.label
+              )
+            )
+          )
+        );
+      }
+      const children = [
+        createStatusIcon(iconPath, iconClass, { "aria-hidden": "true", focusable: "false" }),
+        h("div", { class: notificationContentClasses }, contentChildren)
+      ];
+      if (notification.closable) {
+        children.push(
+          h(
+            "button",
+            {
+              class: notificationCloseButtonClasses,
+              onClick: (e) => {
+                e.stopPropagation();
+                props.onClose?.(notification.id);
+              },
+              "aria-label": NOTIFICATION_CLOSE_ARIA_LABEL,
+              type: "button"
+            },
+            createStatusIcon(notificationCloseIconPath, notificationCloseIconClasses, {
+              "aria-hidden": "true",
+              focusable: "false"
+            })
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          key: notification.id,
+          class: notificationClasses,
+          role: a11yRole,
+          "aria-live": ariaLive,
+          "aria-atomic": "true",
+          onClick: notification.onClick,
+          onKeydown: (e) => {
+            if (!notification.onClick) return;
+            const key = e.key;
+            if (key === "Enter" || key === " ") {
+              e.preventDefault();
+              notification.onClick();
+            }
+          },
+          tabindex: notification.onClick ? 0 : void 0,
+          style: notification.onClick ? "cursor: pointer;" : void 0,
+          "data-tiger-notification": "",
+          "data-tiger-notification-type": notification.type,
+          "data-tiger-notification-id": String(notification.id)
+        },
+        children
+      );
+    };
+    return () => h(
+      Teleport,
+      { to: "body" },
+      h(
+        "div",
+        {
+          ...attrs,
+          class: containerClasses.value,
+          id: `${NOTIFICATION_CONTAINER_ID_PREFIX}-${props.position}`,
+          "aria-live": "polite",
+          "aria-relevant": "additions",
+          "data-tiger-notification-container": "",
+          "data-tiger-notification-position": props.position
+        },
+        IS_TEST_ENV ? props.notifications.map(renderNotificationItem) : h(
+          TransitionGroup,
+          {
+            name: "notification",
+            tag: "div",
+            class: "flex flex-col gap-3"
+          },
+          () => props.notifications.map(renderNotificationItem)
+        )
+      )
+    );
+  }
+});
+var NotificationContainer_default = NotificationContainer;
+
+export {
+  NotificationContainer,
+  NotificationContainer_default
+};

package/dist/chunk-GTFAC625.mjs

@@ -0,0 +1,120 @@
+import {
+  createStatusIcon,
+  createStatusIconWithLoading
+} from "./chunk-2TNZ4JNT.mjs";
+
+// src/components/MessageContainer.ts
+import { computed, defineComponent, h, Teleport, TransitionGroup } from "vue";
+import {
+  classNames,
+  defaultMessageThemeColors,
+  getMessageIconPath,
+  getMessageTypeClasses,
+  messageBaseClasses,
+  messageCloseButtonClasses,
+  messageCloseIconPath,
+  messageContainerBaseClasses,
+  messageContentClasses,
+  messageIconClasses,
+  messageLoadingSpinnerClasses,
+  messagePositionClasses
+} from "@expcat/tigercat-core";
+var MESSAGE_CONTAINER_ID = "tiger-message-container";
+var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
+var IS_TEST_ENV = (() => {
+  const proc = globalThis.process;
+  return typeof proc !== "undefined" && proc.env?.NODE_ENV === "test";
+})();
+var MessageContainer = /* @__PURE__ */ defineComponent({
+  name: "TigerMessageContainer",
+  props: {
+    position: {
+      type: String,
+      default: "top"
+    },
+    messages: {
+      type: Array,
+      default: () => []
+    },
+    onClose: Function
+  },
+  setup(props) {
+    const containerClasses = computed(() => {
+      return classNames(messageContainerBaseClasses, messagePositionClasses[props.position]);
+    });
+    const renderMessageItem = (message) => {
+      const colorScheme = getMessageTypeClasses(message.type, defaultMessageThemeColors);
+      const messageClasses = classNames(
+        messageBaseClasses,
+        colorScheme.bg,
+        colorScheme.border,
+        colorScheme.text,
+        message.className
+      );
+      const iconPath = message.icon || getMessageIconPath(message.type);
+      const iconClass = classNames(messageIconClasses, colorScheme.icon);
+      const a11yRole = message.type === "error" ? "alert" : "status";
+      const ariaLive = message.type === "error" ? "assertive" : "polite";
+      const children = [
+        createStatusIconWithLoading(
+          iconPath,
+          iconClass,
+          message.type === "loading",
+          messageLoadingSpinnerClasses
+        ),
+        h("div", { class: messageContentClasses }, message.content)
+      ];
+      if (message.closable) {
+        children.push(
+          h(
+            "button",
+            {
+              class: messageCloseButtonClasses,
+              onClick: () => props.onClose?.(message.id),
+              "aria-label": MESSAGE_CLOSE_ARIA_LABEL,
+              type: "button"
+            },
+            createStatusIcon(messageCloseIconPath, "w-4 h-4")
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          key: message.id,
+          class: messageClasses,
+          role: a11yRole,
+          "aria-live": ariaLive,
+          "aria-atomic": "true",
+          "aria-busy": message.type === "loading" ? "true" : void 0,
+          "data-tiger-message": "",
+          "data-tiger-message-type": message.type,
+          "data-tiger-message-id": String(message.id)
+        },
+        children
+      );
+    };
+    return () => h(
+      Teleport,
+      { to: "body" },
+      h(
+        "div",
+        {
+          class: containerClasses.value,
+          id: props.position === "top" ? MESSAGE_CONTAINER_ID : `${MESSAGE_CONTAINER_ID}-${props.position}`,
+          "aria-live": "polite",
+          "aria-relevant": "additions",
+          "data-tiger-message-position": props.position,
+          "data-tiger-message-container": ""
+        },
+        IS_TEST_ENV ? props.messages.map(renderMessageItem) : h(TransitionGroup, { name: "message" }, () => props.messages.map(renderMessageItem))
+      )
+    );
+  }
+});
+var MessageContainer_default = MessageContainer;
+
+export {
+  MessageContainer,
+  MessageContainer_default
+};