luna-plus 0.0.5

package/dist/Message/MessageQueue.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import Icon from "../Icon/Icon.svelte";
+  import { CheckCircle, AlertTriangle, XCircle, Info, X } from "lucide";
+  import { fly } from "svelte/transition";
+  import type { IconNode } from "lucide";
+  import type { MessageItem, MessageType, CloseMessageFn } from "./types";
+
+  interface Props {
+    messages: MessageItem[];
+    onClose: CloseMessageFn;
+  }
+
+  let { messages = $bindable([]), onClose }: Props = $props();
+
+  export const setMessages = (next: MessageItem[]): void => {
+    messages = next;
+  };
+
+  const ICON_MAP: Record<MessageType, IconNode> = {
+    success: CheckCircle,
+    warning: AlertTriangle,
+    error: XCircle,
+    info: Info,
+  };
+
+  const getIcon = (type?: MessageType): IconNode => ICON_MAP[type || "info"];
+
+  const getOffset = (index: number): number => {
+    const baseOffset = messages[0]?.offset ?? 20;
+    let offset = baseOffset;
+    for (let i = 0; i < index; i++) {
+      if (messages[i]?.visible) {
+        offset += 60;
+      }
+    }
+    return offset;
+  };
+</script>
+
+{#each messages as message, index (message.id)}
+  {#if message.visible}
+    <div
+      class="lm-message lm-message--{message.type}"
+      class:is-center={message.center}
+      class:is-closable={message.showClose}
+      style="top: {getOffset(index)}px;"
+      transition:fly={{ y: -20, duration: 250, opacity: 0 }}
+    >
+      <Icon icon={getIcon(message.type)} size={16} class="lm-message__icon" />
+      <div class="lm-message__content">
+        {message.message}
+      </div>
+      {#if message.showClose}
+        <button
+          type="button"
+          class="lm-message__close"
+          onclick={() => onClose(message.id)}
+          aria-label="Close"
+        >
+          <Icon icon={X} size={14} />
+        </button>
+      {/if}
+    </div>
+  {/if}
+{/each}

package/dist/Message/MessageQueue.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { MessageItem, CloseMessageFn } from "./types";
+interface Props {
+    messages: MessageItem[];
+    onClose: CloseMessageFn;
+}
+declare const MessageQueue: import("svelte").Component<Props, {
+    setMessages: (next: MessageItem[]) => void;
+}, "messages">;
+type MessageQueue = ReturnType<typeof MessageQueue>;
+export default MessageQueue;

package/dist/Message/index.d.ts

@@ -0,0 +1,4 @@
+import Message from './Message.svelte';
+export { Message };
+export type { MessageOptions, MessageItem, MessageType, CloseMessageFn } from './types';
+export default Message;

package/dist/Message/index.js

@@ -0,0 +1,3 @@
+import Message from './Message.svelte';
+export { Message };
+export default Message;

package/dist/Message/message.d.ts

@@ -0,0 +1,19 @@
+import type { MessageOptions, MessageItem, MessageType, CloseMessageFn } from './types';
+/** 显示消息（弹出队列） */
+export type ShowMessageFn = (options: MessageOptions | string) => number;
+export declare const showMessage: ShowMessageFn;
+/** 关闭消息（按 id） */
+export declare const closeMessage: CloseMessageFn;
+/** 关闭所有消息 */
+export declare const closeAllMessages: () => void;
+/** 便捷方法 */
+export declare const message: {
+    show: ShowMessageFn;
+    close: CloseMessageFn;
+    closeAll: () => void;
+    success: (msg: string, options?: Omit<MessageOptions, "message" | "type">) => number;
+    warning: (msg: string, options?: Omit<MessageOptions, "message" | "type">) => number;
+    error: (msg: string, options?: Omit<MessageOptions, "message" | "type">) => number;
+    info: (msg: string, options?: Omit<MessageOptions, "message" | "type">) => number;
+};
+export type { MessageOptions, MessageItem, MessageType, CloseMessageFn };

package/dist/Message/message.js

@@ -0,0 +1,95 @@
+import { mount, unmount } from 'svelte';
+import MessageQueue from './MessageQueue.svelte';
+/** 消息队列 */
+let messages = [];
+/** 消息容器 DOM 元素 */
+let host = null;
+/** MessageQueue 组件实例 */
+let instance = null;
+/** 消息 ID 计数器 */
+let idCounter = 0;
+const ensureMounted = () => {
+    if (typeof document === 'undefined')
+        return;
+    if (!host) {
+        host = document.createElement('div');
+        host.className = 'lm-message-container';
+        document.body.appendChild(host);
+    }
+    if (!instance) {
+        instance = mount(MessageQueue, {
+            target: host,
+            props: {
+                messages,
+                onClose: removeMessage,
+            },
+        });
+    }
+};
+const updateMessages = (next) => {
+    messages = next;
+    instance?.setMessages?.(messages);
+};
+/** 关闭消息（按 id） */
+const removeMessage = (id) => {
+    const index = messages.findIndex((m) => m.id === id);
+    if (index < 0)
+        return;
+    const item = messages[index];
+    item.visible = false;
+    updateMessages([...messages]);
+    setTimeout(() => {
+        updateMessages(messages.filter((m) => m.id !== id));
+        item.onClose?.();
+        if (messages.length === 0 && instance && host) {
+            unmount(instance);
+            document.body.removeChild(host);
+            host = null;
+            instance = null;
+        }
+    }, 250);
+};
+const addMessage = (options) => {
+    ensureMounted();
+    const id = ++idCounter;
+    const item = {
+        id,
+        type: 'info',
+        duration: 3000,
+        showClose: false,
+        center: false,
+        offset: 20,
+        visible: false,
+        ...options,
+    };
+    updateMessages([...messages, item]);
+    // Ensure intro transition runs (align with Notification behavior)
+    queueMicrotask(() => {
+        item.visible = true;
+        updateMessages([...messages]);
+    });
+    if (item.duration && item.duration > 0) {
+        setTimeout(() => removeMessage(id), item.duration);
+    }
+    return id;
+};
+export const showMessage = (options) => {
+    const opts = typeof options === 'string' ? { message: options } : options;
+    return addMessage(opts);
+};
+/** 关闭消息（按 id） */
+export const closeMessage = removeMessage;
+/** 关闭所有消息 */
+export const closeAllMessages = () => {
+    messages.slice().forEach((m) => removeMessage(m.id));
+};
+/** 便捷方法 */
+export const message = {
+    show: showMessage,
+    close: closeMessage,
+    closeAll: closeAllMessages,
+    success: (msg, options) => addMessage({ ...options, message: msg, type: 'success' }),
+    warning: (msg, options) => addMessage({ ...options, message: msg, type: 'warning' }),
+    error: (msg, options) => addMessage({ ...options, message: msg, type: 'error' }),
+    info: (msg, options) => addMessage({ ...options, message: msg, type: 'info' }),
+};

package/dist/Message/types.d.ts

@@ -0,0 +1,28 @@
+/** 消息类型 */
+export type MessageType = 'success' | 'warning' | 'error' | 'info';
+/** 消息配置选项 */
+export interface MessageOptions {
+    /** 消息内容 */
+    message: string;
+    /** 消息类型 */
+    type?: MessageType;
+    /** 显示时间（毫秒），设为 0 则不会自动关闭 */
+    duration?: number;
+    /** 是否显示关闭按钮 */
+    showClose?: boolean;
+    /** 文字是否居中 */
+    center?: boolean;
+    /** 距离顶部的偏移量 */
+    offset?: number;
+    /** 关闭时的回调函数 */
+    onClose?: () => void;
+}
+/** 消息项（内部使用） */
+export interface MessageItem extends MessageOptions {
+    /** 消息唯一标识 */
+    id: number;
+    /** 是否可见 */
+    visible: boolean;
+}
+/** 关闭消息的回调函数类型 */
+export type CloseMessageFn = (id: number) => void;

package/dist/Message/types.js

@@ -0,0 +1 @@
+export {};

package/dist/MessageBox/MessageBox.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import Dialog from "../Dialog";
+  import Icon from "../Icon/Icon.svelte";
+  import Button from "../Button/Button.svelte";
+  import { portal } from "../utils/portal";
+  import { CheckCircle, AlertTriangle, XCircle, Info } from "lucide";
+  import type { IconNode } from "lucide";
+  import type { MessageBoxOptions, MessageBoxType } from "./types";
+
+  interface Props {
+    zIndex?: number;
+    showClose?: boolean;
+  }
+
+  let { zIndex = 3000, showClose = true }: Props = $props();
+
+  let visible = $state(false);
+  let options = $state<MessageBoxOptions | null>(null);
+
+  let clearTimer: ReturnType<typeof setTimeout> | null = null;
+  let showSeq = 0;
+  let opening = false;
+
+  const ICON_MAP: Record<MessageBoxType, IconNode> = {
+    success: CheckCircle,
+    warning: AlertTriangle,
+    error: XCircle,
+    info: Info,
+  };
+
+  const getIcon = (type?: MessageBoxType): IconNode => ICON_MAP[type || "info"];
+
+  const show = (opts: MessageBoxOptions): void => {
+    if (clearTimer) {
+      clearTimeout(clearTimer);
+      clearTimer = null;
+    }
+    const seq = ++showSeq;
+    options = opts;
+    // Mount Dialog first (visible=false), then toggle to true to trigger intro transition.
+    opening = true;
+    visible = false;
+    queueMicrotask(() => {
+      if (seq !== showSeq) return;
+      if (clearTimer) {
+        clearTimeout(clearTimer);
+        clearTimer = null;
+      }
+      visible = true;
+      opening = false;
+    });
+  };
+
+  const hide = (): void => {
+    visible = false;
+  };
+
+  const handleOk = (): void => {
+    options?.onOk?.();
+    hide();
+  };
+
+  const handleCancel = (): void => {
+    options?.onCancel?.();
+    hide();
+  };
+
+  $effect(() => {
+    const handler = (event: CustomEvent<MessageBoxOptions>): void => {
+      show(event.detail);
+    };
+    window.addEventListener("lumen-messagebox", handler as EventListener);
+    return () =>
+      window.removeEventListener("lumen-messagebox", handler as EventListener);
+  });
+
+  // Keep content mounted until Dialog outro completes
+  $effect(() => {
+    if (!options) return;
+    if (opening) return;
+    if (visible) return;
+    if (clearTimer) clearTimeout(clearTimer);
+    clearTimer = setTimeout(() => {
+      options = null;
+      clearTimer = null;
+    }, 200);
+  });
+</script>
+
+{#if options}
+  {@const opts = options}
+  <div
+    class="lm-messagebox__wrapper"
+    style="--lm-messagebox-z-index: {zIndex}"
+    use:portal
+  >
+    <Dialog
+      bind:visible
+      width={opts.width ?? "480px"}
+      {showClose}
+      closeOnClickModal={false}
+      closeOnEsc={true}
+      onclose={handleCancel}
+      class={`lm-messagebox lm-messagebox--${opts.type ?? "info"}`}
+    >
+      {#snippet header()}
+        <div class="lm-messagebox__header-content">
+          <Icon
+            icon={getIcon(opts.type)}
+            size={20}
+            class="lm-messagebox__icon"
+          />
+          {#if opts.title}
+            <span class="lm-messagebox__title">{opts.title}</span>
+          {/if}
+        </div>
+      {/snippet}
+
+      {#snippet children()}
+        <div class="lm-messagebox__body">{opts.content}</div>
+      {/snippet}
+
+      {#snippet footer()}
+        {#if opts.cancelText}
+          <Button onclick={handleCancel}>{opts.cancelText}</Button>
+        {/if}
+        <Button type="primary" onclick={handleOk}
+          >{opts.okText ?? "确定"}</Button
+        >
+      {/snippet}
+    </Dialog>
+  </div>
+{/if}

package/dist/MessageBox/MessageBox.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    zIndex?: number;
+    showClose?: boolean;
+}
+declare const MessageBox: import("svelte").Component<Props, {}, "">;
+type MessageBox = ReturnType<typeof MessageBox>;
+export default MessageBox;

package/dist/MessageBox/index.d.ts

@@ -0,0 +1,4 @@
+import MessageBox from './MessageBox.svelte';
+export { MessageBox };
+export type { MessageBoxOptions, MessageBoxType, CloseMessageBoxFn } from './types';
+export default MessageBox;

package/dist/MessageBox/index.js

@@ -0,0 +1,3 @@
+import MessageBox from './MessageBox.svelte';
+export { MessageBox };
+export default MessageBox;

package/dist/MessageBox/messageBox.d.ts

@@ -0,0 +1,13 @@
+import type { MessageBoxOptions } from './types';
+/** 显示消息框 */
+export declare const showMessageBox: (options: MessageBoxOptions) => Promise<boolean>;
+/** 便捷方法 */
+export declare const messageBox: {
+    show: (options: MessageBoxOptions) => Promise<boolean>;
+    alert: (content: string, title?: string) => Promise<boolean>;
+    confirm: (content: string, title?: string) => Promise<boolean>;
+    success: (content: string, title?: string) => Promise<boolean>;
+    warning: (content: string, title?: string) => Promise<boolean>;
+    error: (content: string, title?: string) => Promise<boolean>;
+    info: (content: string, title?: string) => Promise<boolean>;
+};

package/dist/MessageBox/messageBox.js

@@ -0,0 +1,32 @@
+/** 显示消息框 */
+export const showMessageBox = (options) => {
+    return new Promise((resolve) => {
+        const onOk = () => {
+            options.onOk?.();
+            resolve(true);
+        };
+        const onCancel = () => {
+            options.onCancel?.();
+            resolve(false);
+        };
+        // 实际实现需要挂载组件，这里提供基础结构
+        console.log('MessageBox:', options);
+        // 模拟异步确认
+        if (typeof window !== 'undefined' && window.confirm(options.content)) {
+            onOk();
+        }
+        else {
+            onCancel();
+        }
+    });
+};
+/** 便捷方法 */
+export const messageBox = {
+    show: showMessageBox,
+    alert: (content, title) => showMessageBox({ content, title, type: 'info' }),
+    confirm: (content, title) => showMessageBox({ content, title, type: 'warning' }),
+    success: (content, title) => showMessageBox({ content, title, type: 'success' }),
+    warning: (content, title) => showMessageBox({ content, title, type: 'warning' }),
+    error: (content, title) => showMessageBox({ content, title, type: 'error' }),
+    info: (content, title) => showMessageBox({ content, title, type: 'info' })
+};

package/dist/MessageBox/types.d.ts

@@ -0,0 +1,23 @@
+/** 消息框类型 */
+export type MessageBoxType = 'info' | 'success' | 'warning' | 'error';
+/** 消息框配置选项 */
+export interface MessageBoxOptions {
+    /** 标题 */
+    title?: string;
+    /** 内容 */
+    content: string;
+    /** 类型 */
+    type?: MessageBoxType;
+    /** 确认按钮文字 */
+    okText?: string;
+    /** 取消按钮文字 */
+    cancelText?: string;
+    /** 弹窗宽度（同 Dialog 的 width） */
+    width?: string;
+    /** 确认回调 */
+    onOk?: () => void;
+    /** 取消回调 */
+    onCancel?: () => void;
+}
+/** 关闭消息框的回调函数类型 */
+export type CloseMessageBoxFn = () => void;

package/dist/MessageBox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Notification/Notification.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import Icon from "../Icon/Icon.svelte";
+  import { CheckCircle, AlertTriangle, XCircle, Info, X } from "lucide";
+  import type { IconNode } from "lucide";
+  import type {
+    NotificationItem,
+    NotificationOptions,
+    NotificationType,
+    NotificationPlacement,
+  } from "./types";
+  import { fly } from "svelte/transition";
+  import { tick } from "svelte";
+
+  interface Props {
+    defaultPlacement?: NotificationPlacement;
+  }
+
+  let { defaultPlacement = "top-right" }: Props = $props();
+
+  let notifications = $state<NotificationItem[]>([]);
+
+  /** 图标映射（静态，避免重复创建） */
+  const ICON_MAP: Record<NotificationType, IconNode> = {
+    success: CheckCircle,
+    warning: AlertTriangle,
+    error: XCircle,
+    info: Info,
+  };
+
+  /** 根据类型获取图标 */
+  const getIcon = (type?: NotificationType): IconNode =>
+    ICON_MAP[type || "info"];
+
+  /** 移除通知 */
+  const removeNotification = (id: number): void => {
+    const index = notifications.findIndex((n) => n.id === id);
+    if (index > -1) {
+      notifications = notifications.map((n) =>
+        n.id === id ? { ...n, visible: false } : n,
+      );
+
+      setTimeout(() => {
+        notifications = notifications.filter((n) => n.id !== id);
+      }, 250);
+    }
+  };
+
+  /** 添加通知 */
+  const addNotification = (options: NotificationOptions): void => {
+    const id = Date.now();
+    const item: NotificationItem = {
+      id,
+      type: "info",
+      duration: 4500,
+      placement: defaultPlacement,
+      visible: false,
+      ...options,
+    };
+    notifications = [...notifications, item];
+
+    tick().then(() => {
+      item.visible = true;
+      notifications = notifications.map((n) => (n.id === id ? item : n));
+    });
+
+    if (item.duration && item.duration > 0) {
+      setTimeout(() => removeNotification(id), item.duration);
+    }
+  };
+
+  /** 按位置分组的通知 */
+  const groupedNotifications = $derived.by(() => {
+    if (notifications.length === 0) return null;
+    const groups: Record<string, NotificationItem[]> = {};
+    for (const n of notifications) {
+      const placement = n.placement || defaultPlacement;
+      (groups[placement] ??= []).push(n);
+    }
+    return groups;
+  });
+
+  // 监听事件
+  $effect(() => {
+    const handler = (event: CustomEvent<NotificationOptions>): void => {
+      addNotification(event.detail);
+    };
+    window.addEventListener("lumen-notification", handler as EventListener);
+    return () =>
+      window.removeEventListener(
+        "lumen-notification",
+        handler as EventListener,
+      );
+  });
+</script>
+
+{#if groupedNotifications}
+  {#each Object.entries(groupedNotifications) as [placement, items] (placement)}
+    <div
+      class="lm-notification-container lm-notification-container--{placement}"
+    >
+      {#each items as notification (notification.id)}
+        {#if notification.visible}
+          <div
+            class="lm-notification lm-notification--{notification.type}"
+            transition:fly={{
+              y: placement.startsWith("top") ? -20 : 20,
+              duration: 250,
+              opacity: 0,
+            }}
+          >
+            <div class="lm-notification__content">
+              <div class="lm-notification__header">
+                <Icon
+                  icon={getIcon(notification.type)}
+                  size={18}
+                  class="lm-notification__icon"
+                />
+                {#if notification.title}
+                  <div class="lm-notification__title">{notification.title}</div>
+                {/if}
+              </div>
+              <div
+                class="lm-notification__message"
+                class:is-with-title={!!notification.title}
+              >
+                {notification.message}
+              </div>
+            </div>
+            <button
+              type="button"
+              class="lm-notification__close"
+              onclick={() => removeNotification(notification.id)}
+              aria-label="Close"
+            >
+              <Icon icon={X} size={14} />
+            </button>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/each}
+{/if}

package/dist/Notification/Notification.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { NotificationPlacement } from "./types";
+interface Props {
+    defaultPlacement?: NotificationPlacement;
+}
+declare const Notification: import("svelte").Component<Props, {}, "">;
+type Notification = ReturnType<typeof Notification>;
+export default Notification;

package/dist/Notification/index.d.ts

@@ -0,0 +1,4 @@
+import Notification from './Notification.svelte';
+export { Notification };
+export type { NotificationOptions, NotificationItem, NotificationType, NotificationPlacement, CloseNotificationFn } from './types';
+export default Notification;

package/dist/Notification/index.js

@@ -0,0 +1,3 @@
+import Notification from './Notification.svelte';
+export { Notification };
+export default Notification;

package/dist/Notification/notification.d.ts

@@ -0,0 +1,11 @@
+import type { NotificationOptions } from './types';
+/** 显示通知 */
+export declare const showNotification: (options: NotificationOptions | string) => void;
+/** 便捷方法 */
+export declare const notification: {
+    show: (options: NotificationOptions | string) => void;
+    success: (msg: string, options?: Partial<NotificationOptions>) => void;
+    warning: (msg: string, options?: Partial<NotificationOptions>) => void;
+    error: (msg: string, options?: Partial<NotificationOptions>) => void;
+    info: (msg: string, options?: Partial<NotificationOptions>) => void;
+};

package/dist/Notification/notification.js

@@ -0,0 +1,19 @@
+/** 触发通知事件 */
+const dispatchNotification = (options) => {
+    if (typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent('lumen-notification', { detail: options }));
+    }
+};
+/** 显示通知 */
+export const showNotification = (options) => {
+    const opts = typeof options === 'string' ? { message: options } : options;
+    dispatchNotification(opts);
+};
+/** 便捷方法 */
+export const notification = {
+    show: showNotification,
+    success: (msg, options) => dispatchNotification({ message: msg, type: 'success', ...options }),
+    warning: (msg, options) => dispatchNotification({ message: msg, type: 'warning', ...options }),
+    error: (msg, options) => dispatchNotification({ message: msg, type: 'error', ...options }),
+    info: (msg, options) => dispatchNotification({ message: msg, type: 'info', ...options })
+};