@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/{chunk-H2SX7D23.mjs → chunk-S77CILEG.mjs}

@@ -1,14 +1,23 @@
 import {
   createStatusIcon
-} from "./chunk-2TNZ4JNT.mjs";
+} from "./chunk-5VSSB4QF.mjs";
+import {
+  renderVueBodyTeleport
+} from "./chunk-VFRB5L7W.mjs";
+import {
+  getGlobalTigerLocale,
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/NotificationContainer.ts
-import { computed, defineComponent, h, Teleport, TransitionGroup } from "vue";
+import { computed, defineComponent, h } from "vue";
 import {
   classNames,
   coerceClassValue,
+  getNotificationCloseAriaLabel,
   getNotificationIconPath,
   getNotificationTypeClasses,
+  getToastItemRole,
   notificationActionButtonClasses,
   notificationActionButtonTypeClasses,
   notificationActionsClasses,
@@ -21,14 +30,9 @@ import {
   notificationDescriptionClasses,
   notificationIconClasses,
   notificationPositionClasses,
-  notificationTitleClasses
+  notificationTitleClasses,
+  shouldHandleToastSurfaceEvent
 } 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,
@@ -41,13 +45,24 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
       type: Array,
       default: () => []
     },
-    onClose: Function
+    className: {
+      type: String,
+      default: void 0
+    },
+    portal: {
+      type: Boolean,
+      default: true
+    }
   },
-  setup(props, { attrs }) {
+  emits: ["close"],
+  setup(props, { attrs, emit }) {
+    const config = useTigerConfig();
+    const locale = computed(() => config.value.locale ?? getGlobalTigerLocale());
     const containerClasses = computed(
       () => classNames(
         notificationContainerBaseClasses,
         notificationPositionClasses[props.position],
+        props.className,
         coerceClassValue(attrs.class)
       )
     );
@@ -61,14 +76,13 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
       );
       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 a11yRole = getToastItemRole(notification.type);
+      const closeLabel = getNotificationCloseAriaLabel(locale.value, notification.closeAriaLabel);
+      const close = () => emit("close", notification.id);
       const contentChildren = [
         h(
           "div",
-          {
-            class: classNames(notificationTitleClasses, colorScheme.titleText)
-          },
+          { class: classNames(notificationTitleClasses, colorScheme.titleText) },
           notification.title
         )
       ];
@@ -76,9 +90,7 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
         contentChildren.push(
           h(
             "div",
-            {
-              class: classNames(notificationDescriptionClasses, colorScheme.descriptionText)
-            },
+            { class: classNames(notificationDescriptionClasses, colorScheme.descriptionText) },
             notification.description
           )
         );
@@ -99,15 +111,13 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
                   ),
                   type: "button",
                   disabled: action.disabled,
-                  onClick: (e) => {
-                    e.stopPropagation();
+                  onClick: (event) => {
+                    event.stopPropagation();
                     action.onClick?.({
                       id: notification.id,
-                      close: () => props.onClose?.(notification.id)
+                      close
                     });
-                    if (action.closeOnClick) {
-                      props.onClose?.(notification.id);
-                    }
+                    if (action.closeOnClick) close();
                   }
                 },
                 action.label
@@ -126,11 +136,11 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
             "button",
             {
               class: notificationCloseButtonClasses,
-              onClick: (e) => {
-                e.stopPropagation();
-                props.onClose?.(notification.id);
+              onClick: (event) => {
+                event.stopPropagation();
+                close();
               },
-              "aria-label": notification.closeAriaLabel ?? NOTIFICATION_CLOSE_ARIA_LABEL,
+              "aria-label": closeLabel,
               type: "button"
             },
             createStatusIcon(notificationCloseIconPath, notificationCloseIconClasses, {
@@ -146,18 +156,11 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
           key: notification.id,
           class: notificationClasses,
           role: a11yRole,
-          "aria-live": ariaLive,
-          "aria-atomic": "true",
-          onClick: notification.onClick,
-          onKeydown: (e) => {
+          onClick: (event) => {
             if (!notification.onClick) return;
-            const key = e.key;
-            if (key === "Enter" || key === " ") {
-              e.preventDefault();
-              notification.onClick();
-            }
+            if (!shouldHandleToastSurfaceEvent(event)) return;
+            notification.onClick();
           },
-          tabindex: notification.onClick ? 0 : void 0,
           style: notification.onClick ? "cursor: pointer;" : void 0,
           "data-tiger-notification": "",
           "data-tiger-notification-type": notification.type,
@@ -166,31 +169,19 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
         children
       );
     };
-    return () => h(
-      Teleport,
-      { to: "body" },
-      h(
+    return () => {
+      const node = 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)
-        )
-      )
-    );
+        props.notifications.map(renderNotificationItem)
+      );
+      return props.portal ? renderVueBodyTeleport(node) : node;
+    };
   }
 });
 var NotificationContainer_default = NotificationContainer;

package/dist/chunk-SEVE2FQJ.mjs

@@ -0,0 +1,287 @@
+import {
+  usePopup
+} from "./chunk-OZZKYZD6.mjs";
+import {
+  assignOverlayTriggerRef,
+  renderOverlayTrigger,
+  resolveOverlayTriggerElement
+} from "./chunk-CMYPAPF2.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueFocusTrap
+} from "./chunk-VFRB5L7W.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Popconfirm.ts
+import { defineComponent, computed, h, nextTick, ref, useId, watch } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getArrowStyles,
+  getOverlayTriggerAria,
+  getPopconfirmIconPath,
+  getPopconfirmContainerClasses,
+  getPopconfirmTriggerClasses,
+  getPopconfirmContentClasses,
+  getPopconfirmTitleClasses,
+  getPopconfirmDescriptionClasses,
+  getPopconfirmIconClasses,
+  getPopconfirmArrowClasses,
+  getPopconfirmButtonsClasses,
+  mergeStyleValues,
+  popconfirmIconPathStrokeLinecap,
+  popconfirmIconPathStrokeLinejoin,
+  popconfirmIconStrokeWidth,
+  popconfirmIconViewBox,
+  resolveLocaleText
+} from "@expcat/tigercat-core";
+var renderPopconfirmIcon = (iconType) => h(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: popconfirmIconViewBox,
+    "stroke-width": String(popconfirmIconStrokeWidth),
+    stroke: "currentColor"
+  },
+  [
+    h("path", {
+      "stroke-linecap": popconfirmIconPathStrokeLinecap,
+      "stroke-linejoin": popconfirmIconPathStrokeLinejoin,
+      d: getPopconfirmIconPath(iconType)
+    })
+  ]
+);
+var Popconfirm = defineComponent({
+  name: "TigerPopconfirm",
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    title: { type: String, default: void 0 },
+    description: { type: String, default: void 0 },
+    icon: {
+      type: String,
+      default: "warning"
+    },
+    showIcon: { type: Boolean, default: true },
+    okText: { type: String, default: void 0 },
+    cancelText: { type: String, default: void 0 },
+    okType: { type: String, default: "primary" },
+    placement: { type: String, default: "top" },
+    offset: { type: Number, default: 8 },
+    disabled: { type: Boolean, default: false },
+    asChild: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: { type: [String, Object, Array], default: void 0 }
+  },
+  emits: ["update:open", "open-change", "confirm", "cancel"],
+  setup(props, { slots, emit, attrs }) {
+    const config = useTigerConfig();
+    const arrowRef = ref(null);
+    const cancelRef = ref(null);
+    const confirming = ref(false);
+    const {
+      currentVisible,
+      setVisible,
+      containerRef,
+      triggerRef,
+      floatingRef,
+      closeAndRestoreFocus,
+      floatingStyles,
+      floatingClasses,
+      positioned,
+      overlayTarget,
+      actualPlacement,
+      arrowX,
+      arrowY
+    } = usePopup({ props, emit, multiTrigger: false, arrowRef });
+    useVueFocusTrap({ enabled: currentVisible, containerRef: floatingRef });
+    watch(currentVisible, (visible) => {
+      if (!visible) {
+        confirming.value = false;
+        return;
+      }
+      nextTick(() => {
+        resolveOverlayTriggerElement(cancelRef.value)?.focus();
+      });
+    });
+    const popconfirmId = `tiger-popconfirm-${useId()}`;
+    const titleId = `${popconfirmId}-title`;
+    const descriptionId = `${popconfirmId}-description`;
+    const resolvedTitle = computed(
+      () => resolveLocaleText(
+        "Are you sure you want to continue?",
+        props.title,
+        config.value.locale?.common?.confirmTitle
+      )
+    );
+    const resolvedOkText = computed(
+      () => resolveLocaleText("OK", props.okText, config.value.locale?.common?.okText)
+    );
+    const resolvedCancelText = computed(
+      () => resolveLocaleText("Cancel", props.cancelText, config.value.locale?.common?.cancelText)
+    );
+    const handleConfirm = () => {
+      emit("confirm");
+      closeAndRestoreFocus();
+    };
+    const handleCancel = () => {
+      if (confirming.value) return;
+      emit("cancel");
+      closeAndRestoreFocus();
+    };
+    const containerClasses = computed(
+      () => classNames(
+        getPopconfirmContainerClasses(),
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const triggerClasses = computed(() => getPopconfirmTriggerClasses(props.disabled));
+    const iconClasses = computed(() => getPopconfirmIconClasses(props.icon));
+    const arrowClasses = getPopconfirmArrowClasses();
+    const contentClasses = getPopconfirmContentClasses();
+    const titleClasses = getPopconfirmTitleClasses();
+    const descriptionClasses = getPopconfirmDescriptionClasses();
+    const buttonsClasses = getPopconfirmButtonsClasses();
+    const arrowStyle = computed(
+      () => getArrowStyles(actualPlacement.value, { x: arrowX.value, y: arrowY.value })
+    );
+    return () => {
+      const triggerSlot = slots.trigger?.({ open: currentVisible.value });
+      const defaultSlot = triggerSlot ?? slots.default?.();
+      if (!defaultSlot || defaultSlot.length === 0) return null;
+      const {
+        class: _class,
+        style: _style,
+        title: _title,
+        onConfirm: _onConfirm,
+        ...restAttrs
+      } = attrs;
+      const describedBy = props.description || slots.description ? descriptionId : void 0;
+      const triggerAria = getOverlayTriggerAria({
+        kind: "dialog",
+        open: currentVisible.value,
+        controlsId: popconfirmId,
+        disabled: props.disabled
+      });
+      const trigger = renderOverlayTrigger({
+        asChild: props.asChild,
+        child: defaultSlot.length === 1 ? defaultSlot[0] : defaultSlot,
+        setTriggerRef: (el) => assignOverlayTriggerRef(triggerRef, el),
+        className: props.asChild ? void 0 : triggerClasses.value,
+        disabled: props.disabled,
+        preventDefaultOnClick: true,
+        aria: triggerAria,
+        handlers: {
+          onClick: () => {
+            if (props.disabled) return;
+            setVisible(!currentVisible.value);
+          }
+        }
+      });
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          ref: containerRef,
+          class: containerClasses.value,
+          style: mergeStyleValues(props.style)
+        },
+        [
+          trigger,
+          renderVueOverlayTeleport(
+            h(
+              "div",
+              {
+                ref: floatingRef,
+                class: floatingClasses.value,
+                style: floatingStyles.value,
+                "data-positioned": positioned.value,
+                hidden: !currentVisible.value,
+                "aria-hidden": !currentVisible.value
+              },
+              [
+                h("div", { class: "relative" }, [
+                  h("div", {
+                    ref: arrowRef,
+                    class: arrowClasses,
+                    style: arrowStyle.value,
+                    "aria-hidden": "true"
+                  }),
+                  h(
+                    "div",
+                    {
+                      id: popconfirmId,
+                      role: "dialog",
+                      "aria-modal": "false",
+                      tabindex: -1,
+                      "aria-labelledby": titleId,
+                      "aria-describedby": describedBy,
+                      class: contentClasses
+                    },
+                    [
+                      h("div", { class: "flex items-start" }, [
+                        props.showIcon ? h("div", { class: iconClasses.value, "aria-hidden": "true" }, [
+                          renderPopconfirmIcon(props.icon)
+                        ]) : null,
+                        h("div", { class: "flex-1" }, [
+                          h(
+                            "div",
+                            { id: titleId, class: titleClasses },
+                            slots.title ? slots.title() : resolvedTitle.value
+                          ),
+                          props.description || slots.description ? h(
+                            "div",
+                            { id: descriptionId, class: descriptionClasses },
+                            slots.description ? slots.description() : props.description
+                          ) : null
+                        ])
+                      ]),
+                      h("div", { class: buttonsClasses }, [
+                        h(
+                          Button,
+                          {
+                            ref: cancelRef,
+                            size: "sm",
+                            variant: "outline",
+                            onClick: handleCancel
+                          },
+                          { default: () => resolvedCancelText.value }
+                        ),
+                        h(
+                          Button,
+                          {
+                            size: "sm",
+                            variant: "primary",
+                            danger: props.okType === "danger",
+                            loading: confirming.value,
+                            onClick: () => void handleConfirm()
+                          },
+                          { default: () => resolvedOkText.value }
+                        )
+                      ])
+                    ]
+                  )
+                ])
+              ]
+            ),
+            overlayTarget.value
+          )
+        ]
+      );
+    };
+  }
+});
+var Popconfirm_default = Popconfirm;
+
+export {
+  Popconfirm,
+  Popconfirm_default
+};