@expcat/tigercat-vue 2.1.1 → 2.1.3

package/dist/components/Message.mjs

@@ -1,20 +1,19 @@
 import {
   MessageContainer
-} from "../chunk-BGGHSTMP.mjs";
-import "../chunk-2TNZ4JNT.mjs";
-import {
-  getGlobalTigerLocale
-} from "../chunk-TGXBCKOU.mjs";
+} from "../chunk-AJTD3TMG.mjs";
+import "../chunk-5VSSB4QF.mjs";
+import "../chunk-Y63TRXZO.mjs";
+import "../chunk-4GOTWNOO.mjs";
 
 // src/components/Message.ts
-import { createApp, defineComponent, h, ref } from "vue";
+import { createApp, defineComponent, h, onBeforeUnmount, shallowRef } from "vue";
 import {
-  createInstanceCounter,
+  createImperativeHost,
+  createToastQueue,
   isBrowser,
-  normalizeStringOption
+  normalizeStringOption,
+  resolveMessageDuration
 } from "@expcat/tigercat-core";
-var MESSAGE_CONTAINER_ID = "tiger-message-container";
-var MESSAGE_CONTAINER_ROOT_ID = `${MESSAGE_CONTAINER_ID}-root`;
 var MESSAGE_POSITIONS = [
   "top",
   "top-left",
@@ -23,132 +22,86 @@ var MESSAGE_POSITIONS = [
   "bottom-left",
   "bottom-right"
 ];
-var messageInstances = ref([]);
-var containerApp = null;
-var getNextInstanceId = null;
-function getMessageInstanceId() {
-  getNextInstanceId ??= createInstanceCounter();
-  return getNextInstanceId();
-}
-function getDefaultMessageCloseAriaLabel() {
-  const locale = getGlobalTigerLocale();
-  const closeText = locale?.common?.closeText;
-  if (!closeText) return void 0;
-  const localeCode = locale.locale?.toLowerCase() ?? "";
-  if (localeCode.startsWith("zh")) return `${closeText}\u6D88\u606F`;
-  if (localeCode.startsWith("en")) return `${closeText} message`;
-  return closeText;
-}
+var messageQueue = createToastQueue();
+var host = createImperativeHost({
+  mount(element) {
+    const app = createApp(MessageHost);
+    app.mount(element);
+    return app;
+  },
+  unmount(app) {
+    app.unmount();
+  }
+});
+messageQueue.subscribe(() => {
+  if (messageQueue.getSnapshot().length > 0) return;
+  queueMicrotask(() => {
+    if (messageQueue.getSnapshot().length === 0) host.teardown();
+  });
+});
 var MessageHost = /* @__PURE__ */ defineComponent({
   name: "TigerMessageHost",
   setup() {
+    const messages = shallowRef(messageQueue.getSnapshot());
+    const stop = messageQueue.subscribe(() => {
+      messages.value = messageQueue.getSnapshot();
+    });
+    onBeforeUnmount(stop);
     return () => MESSAGE_POSITIONS.map((position) => {
-      const positionedMessages = messageInstances.value.filter(
-        (message) => message.position === position
-      );
+      const positionedMessages = messages.value.filter((message) => message.position === position);
       if (positionedMessages.length === 0) return null;
       return h(MessageContainer, {
         key: position,
         position,
-        messages: positionedMessages,
-        onClose: removeMessage
+        messages: [...positionedMessages],
+        portal: false,
+        onClose: (id) => messageQueue.remove(id)
       });
     });
   }
 });
-function ensureContainer() {
-  if (!isBrowser()) {
-    return;
-  }
-  const existingRootEl = document.getElementById(MESSAGE_CONTAINER_ROOT_ID);
-  if (containerApp && !existingRootEl) {
-    containerApp = null;
-  }
-  if (containerApp) {
-    return;
-  }
-  let rootEl = existingRootEl;
-  if (!rootEl) {
-    rootEl = document.createElement("div");
-    rootEl.id = MESSAGE_CONTAINER_ROOT_ID;
-    document.body.appendChild(rootEl);
-  }
-  containerApp = createApp(MessageHost);
-  containerApp.mount(rootEl);
-}
 function addMessage(config) {
-  const id = getMessageInstanceId();
-  const instance = {
-    id,
-    type: config.type || "info",
+  if (!isBrowser()) return () => void 0;
+  const type = config.type || "info";
+  const instance = messageQueue.add({
+    type,
     content: config.content,
-    duration: config.duration !== void 0 ? config.duration : 3e3,
+    duration: resolveMessageDuration(type, config.duration),
     closable: config.closable || false,
     onClose: config.onClose,
     icon: config.icon,
     className: config.className,
-    closeAriaLabel: config.closeAriaLabel ?? getDefaultMessageCloseAriaLabel(),
+    closeAriaLabel: config.closeAriaLabel,
     position: config.position ?? "top"
-  };
-  messageInstances.value.push(instance);
-  ensureContainer();
-  if (instance.duration > 0) {
-    setTimeout(() => {
-      removeMessage(id);
-    }, instance.duration);
-  }
-  return () => removeMessage(id);
-}
-function removeMessage(id) {
-  const index = messageInstances.value.findIndex((msg) => msg.id === id);
-  if (index !== -1) {
-    const instance = messageInstances.value[index];
-    messageInstances.value.splice(index, 1);
-    instance.onClose?.();
-  }
-}
-function clearAll() {
-  messageInstances.value.forEach((instance) => {
-    instance.onClose?.();
   });
-  messageInstances.value = [];
-  if (containerApp) {
-    containerApp.unmount();
-    containerApp = null;
-  }
-  if (isBrowser()) {
-    const rootEl = document.getElementById(MESSAGE_CONTAINER_ROOT_ID);
-    if (rootEl?.parentNode) {
-      rootEl.parentNode.removeChild(rootEl);
-    }
-  }
+  if (!instance) return () => void 0;
+  host.ensure();
+  return () => {
+    messageQueue.remove(instance.id);
+  };
 }
 function normalizeOptions(options) {
   return normalizeStringOption(options, "content");
 }
 var Message = {
   info(options) {
-    const config = normalizeOptions(options);
-    return addMessage({ ...config, type: "info" });
+    return addMessage({ ...normalizeOptions(options), type: "info" });
   },
   success(options) {
-    const config = normalizeOptions(options);
-    return addMessage({ ...config, type: "success" });
+    return addMessage({ ...normalizeOptions(options), type: "success" });
   },
   warning(options) {
-    const config = normalizeOptions(options);
-    return addMessage({ ...config, type: "warning" });
+    return addMessage({ ...normalizeOptions(options), type: "warning" });
   },
   error(options) {
-    const config = normalizeOptions(options);
-    return addMessage({ ...config, type: "error" });
+    return addMessage({ ...normalizeOptions(options), type: "error" });
   },
   loading(options) {
-    const config = normalizeOptions(options);
-    return addMessage({ ...config, type: "loading", duration: 0 });
+    return addMessage({ ...normalizeOptions(options), type: "loading" });
   },
   clear() {
-    clearAll();
+    messageQueue.clear();
+    host.teardown();
   }
 };
 var Message_default = Message;

package/dist/components/MessageContainer.d.mts

@@ -5,8 +5,14 @@ import { MessagePosition, MessageInstance } from '@expcat/tigercat-core';
 interface VueMessageContainerProps {
     position?: MessagePosition;
     messages?: MessageInstance[];
-    onClose?: (id: string | number) => void;
+    /**
+     * Portal through the overlay-host chain. Imperative hosts pass `false`
+     * because they are already mounted on that target.
+     * @default true
+     */
+    portal?: boolean;
 }
+type MessageContainerProps = VueMessageContainerProps;
 declare const MessageContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     position: {
         type: PropType<MessagePosition>;
@@ -16,10 +22,13 @@ declare const MessageContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<MessageInstance[]>;
         default: () => never[];
     };
-    onClose: PropType<(id: string | number) => void>;
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    portal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => string | number | boolean | void | vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}> | vue.VNodeArrayChildren | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "close"[], "close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     position: {
         type: PropType<MessagePosition>;
         default: MessagePosition;
@@ -28,10 +37,16 @@ declare const MessageContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<MessageInstance[]>;
         default: () => never[];
     };
-    onClose: PropType<(id: string | number) => void>;
-}>> & Readonly<{}>, {
+    portal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    portal: boolean;
     position: MessagePosition;
     messages: MessageInstance[];
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { MessageContainer, type VueMessageContainerProps, MessageContainer as default };
+export { MessageContainer, type MessageContainerProps, type VueMessageContainerProps, MessageContainer as default };

package/dist/components/MessageContainer.mjs

@@ -1,8 +1,10 @@
 import {
   MessageContainer,
   MessageContainer_default
-} from "../chunk-BGGHSTMP.mjs";
-import "../chunk-2TNZ4JNT.mjs";
+} from "../chunk-AJTD3TMG.mjs";
+import "../chunk-5VSSB4QF.mjs";
+import "../chunk-Y63TRXZO.mjs";
+import "../chunk-4GOTWNOO.mjs";
 export {
   MessageContainer,
   MessageContainer_default as default

package/dist/components/MessageRoot.d.mts

@@ -1,4 +1,5 @@
 import { MessageType, MessageOptions } from '@expcat/tigercat-core';
+export { MessageOptions } from '@expcat/tigercat-core';
 
 type VueMessageProps = MessageOptions;
 type MessageClose = () => void;

package/dist/components/MessageRoot.mjs

@@ -1,6 +1,6 @@
 import {
   Message
-} from "../chunk-GSB4MNEX.mjs";
+} from "../chunk-PFE3YML2.mjs";
 export {
   Message
 };

package/dist/components/Modal.d.mts

@@ -5,10 +5,12 @@ import { ModalSize, TigerLocale, TigerLocaleModal } from '@expcat/tigercat-core'
 interface VueModalProps {
     open?: boolean;
     size?: ModalSize;
+    width?: string | number;
     title?: string;
     closable?: boolean;
     mask?: boolean;
     maskClosable?: boolean;
+    keyboard?: boolean;
     centered?: boolean;
     mobileSheet?: boolean;
     destroyOnClose?: boolean;
@@ -18,9 +20,12 @@ interface VueModalProps {
     closeAriaLabel?: string;
     okText?: string;
     cancelText?: string;
+    showDefaultFooter?: boolean;
+    draggable?: boolean;
     locale?: Partial<TigerLocale>;
     labels?: Partial<TigerLocaleModal>;
 }
+type ModalProps = VueModalProps;
 declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
     /**
      * Whether the modal is open
@@ -76,6 +81,14 @@ declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Whether Escape closes the modal
+     * @default true
+     */
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Whether the modal should be centered vertically
      * @default false
@@ -106,7 +119,7 @@ declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
      */
     zIndex: {
         type: NumberConstructor;
-        default: number;
+        default: 1100;
     };
     /**
      * Custom class name
@@ -123,24 +136,21 @@ declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
     /**
-     * Close button aria-label
-     * @default 'Close'
+     * Close button aria-label. Defaults to locale.modal.closeAriaLabel (en-US Close).
      */
     closeAriaLabel: {
         type: StringConstructor;
         default: undefined;
     };
     /**
-     * Default OK button text (used in default footer)
-     * @default '确定'
+     * Default OK button text. Defaults to locale.modal.okText (en-US OK).
      */
     okText: {
         type: StringConstructor;
         default: undefined;
     };
     /**
-     * Default Cancel button text (used in default footer)
-     * @default '取消'
+     * Default Cancel button text. Defaults to locale.modal.cancelText (en-US Cancel).
      */
     cancelText: {
         type: StringConstructor;
@@ -176,7 +186,11 @@ declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>, () => vue.VNodeChild, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("cancel" | "close" | "ok" | "update:open" | "after-close")[], "cancel" | "close" | "ok" | "update:open" | "after-close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | (string | number | boolean | void | vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | vue.VNodeArrayChildren | null)[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("cancel" | "close" | "ok" | "update:open" | "after-close")[], "cancel" | "close" | "ok" | "update:open" | "after-close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     /**
      * Whether the modal is open
      * @default false
@@ -231,6 +245,14 @@ declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Whether Escape closes the modal
+     * @default true
+     */
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Whether the modal should be centered vertically
      * @default false
@@ -261,7 +283,7 @@ declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
      */
     zIndex: {
         type: NumberConstructor;
-        default: number;
+        default: 1100;
     };
     /**
      * Custom class name
@@ -278,24 +300,21 @@ declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
     /**
-     * Close button aria-label
-     * @default 'Close'
+     * Close button aria-label. Defaults to locale.modal.closeAriaLabel (en-US Close).
      */
     closeAriaLabel: {
         type: StringConstructor;
         default: undefined;
     };
     /**
-     * Default OK button text (used in default footer)
-     * @default '确定'
+     * Default OK button text. Defaults to locale.modal.okText (en-US OK).
      */
     okText: {
         type: StringConstructor;
         default: undefined;
     };
     /**
-     * Default Cancel button text (used in default footer)
-     * @default '取消'
+     * Default Cancel button text. Defaults to locale.modal.cancelText (en-US Cancel).
      */
     cancelText: {
         type: StringConstructor;
@@ -338,26 +357,27 @@ declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
     "onAfter-close"?: ((...args: any[]) => any) | undefined;
     onOk?: ((...args: any[]) => any) | undefined;
 }>, {
-    size: ModalSize;
     locale: Partial<TigerLocale>;
-    labels: Partial<TigerLocaleModal>;
-    className: string;
     style: Record<string, unknown>;
     title: string;
-    closable: boolean;
-    closeAriaLabel: string;
     okText: string;
     cancelText: string;
+    closeAriaLabel: string;
+    labels: Partial<TigerLocaleModal>;
+    size: ModalSize;
+    className: string;
     mask: boolean;
     open: boolean;
-    width: string | number;
-    draggable: boolean;
     zIndex: number;
+    width: string | number;
+    closable: boolean;
+    keyboard: boolean;
     maskClosable: boolean;
+    draggable: boolean;
     centered: boolean;
     destroyOnClose: boolean;
     mobileSheet: boolean;
     showDefaultFooter: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { Modal, type VueModalProps, Modal as default };
+export { Modal, type ModalProps, type VueModalProps, Modal as default };

package/dist/components/Modal.mjs

@@ -1,12 +1,11 @@
 import {
   Modal,
   Modal_default
-} from "../chunk-IPGPLFUZ.mjs";
-import "../chunk-YZBQ6IR7.mjs";
-import "../chunk-Z2ZECCGD.mjs";
-import "../chunk-Q7Y22OFX.mjs";
-import "../chunk-UOJOJBEU.mjs";
-import "../chunk-TGXBCKOU.mjs";
+} from "../chunk-BLTPZIJN.mjs";
+import "../chunk-4KIZXFFG.mjs";
+import "../chunk-4QMHNTUU.mjs";
+import "../chunk-Y63TRXZO.mjs";
+import "../chunk-4GOTWNOO.mjs";
 export {
   Modal,
   Modal_default as default