luna-plus 0.0.5

package/dist/InputTag/types.d.ts

@@ -0,0 +1,21 @@
+export type InputTagSize = 'small' | 'default' | 'large';
+export type InputTagTagType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export interface InputTagProps {
+    /** Tag list value */
+    modelValue?: string[];
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: InputTagSize;
+    /** Maximum tag count */
+    max?: number;
+    /** Allow duplicate tags */
+    allowDuplicates?: boolean;
+    /** Split pasted/typed input by separator. Default: /[,，\n]/ */
+    separator?: RegExp | string;
+    /** Tag visual style */
+    tagType?: InputTagTagType;
+    /** Fired after value changes */
+    onchange?: (value: string[]) => void;
+    class?: string;
+}

package/dist/InputTag/types.js

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

package/dist/Link/Link.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface LinkProps {
+        href?: string
+        type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+        underline?: boolean
+        disabled?: boolean
+        children?: Snippet
+        onclick?: (e: MouseEvent) => void
+        target?: '_self' | '_blank' | '_parent' | '_top'
+        rel?: string
+        class?: string
+    }
+
+    let { href, type = 'default', underline = true, disabled = false, children, onclick, target, rel, class: cls = '', ...attrs }: LinkProps = $props()
+
+    const classes = $derived(`lm-link lm-link--${type}${underline ? ' is-underline' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleClick = (e: MouseEvent): void => {
+        if (disabled) {
+            e.preventDefault()
+            e.stopPropagation()
+            return
+        }
+        onclick?.(e)
+    }
+</script>
+
+{#if href && !disabled}
+    <a {...attrs} class={classes} {href} {target} {rel} onclick={handleClick}>
+        {#if children}{@render children()}{/if}
+    </a>
+{:else}
+    <span {...attrs} class={classes} role="link" aria-disabled={disabled || undefined} onclick={handleClick}>
+        {#if children}{@render children()}{/if}
+    </span>
+{/if}

package/dist/Link/Link.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface LinkProps {
+    href?: string;
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    underline?: boolean;
+    disabled?: boolean;
+    children?: Snippet;
+    onclick?: (e: MouseEvent) => void;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    rel?: string;
+    class?: string;
+}
+declare const Link: import("svelte").Component<LinkProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/Link/index.d.ts

@@ -0,0 +1,4 @@
+import Link from './Link.svelte';
+export { Link };
+export type { LinkProps, LinkType, LinkTarget } from './types';
+export default Link;

package/dist/Link/index.js

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

package/dist/Link/types.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+/** Link 类型 */
+export type LinkType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/** Link 目标 */
+export type LinkTarget = '_self' | '_blank' | '_parent' | '_top';
+/** Link 属性 */
+export interface LinkProps {
+    /** 链接地址 */
+    href?: string;
+    /** 类型 */
+    type?: LinkType;
+    /** 是否显示下划线 */
+    underline?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 子内容 */
+    children?: Snippet;
+    /** 点击事件 */
+    onclick?: (e: MouseEvent) => void;
+    /** 打开方式 */
+    target?: LinkTarget;
+    /** rel 属性 */
+    rel?: string;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Link/types.js

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

package/dist/Loading/Loading.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import Icon from '../Icon/Icon.svelte'
+    import { Loader2 } from 'lucide'
+
+    interface LoadingProps {
+        visible?: boolean
+        fullscreen?: boolean
+        lock?: boolean
+        text?: string
+        background?: string
+        spinner?: Snippet
+        children?: Snippet
+        class?: string
+    }
+
+    let { visible = false, fullscreen = false, lock = true, text = '', background, spinner, children, class: cls = '', ...attrs }: LoadingProps = $props()
+
+    $effect(() => {
+        if (!fullscreen || !lock) return
+        document.body.style.overflow = visible ? 'hidden' : ''
+        return () => {
+            document.body.style.overflow = ''
+        }
+    })
+
+    const classes = $derived(`lm-loading${fullscreen ? ' is-fullscreen' : ''}${cls ? ` ${cls}` : ''}`)
+    const maskStyle = $derived.by(() => {
+        if (!background) return undefined
+        // 用 CSS 变量覆写默认遮罩背景（theme-chalk 会在 dark 下自动切换变量）
+        return `--lm-loading-mask-bg: ${background}`
+    })
+</script>
+
+<div class={classes} {...attrs} aria-busy={visible} aria-live="polite">
+    {#if children}
+        {@render children()}
+    {/if}
+
+    {#if visible}
+        <div class="lm-loading__mask" style={maskStyle} role="status" aria-label="Loading">
+            <div class="lm-loading__spinner">
+                {#if spinner}
+                    {@render spinner()}
+                {:else}
+                    <div class="lm-loading__icon">
+                        <Icon icon={Loader2} size={42} />
+                    </div>
+                {/if}
+                {#if text}
+                    <p class="lm-loading__text">{text}</p>
+                {/if}
+            </div>
+        </div>
+    {/if}
+</div>

package/dist/Loading/Loading.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface LoadingProps {
+    visible?: boolean;
+    fullscreen?: boolean;
+    lock?: boolean;
+    text?: string;
+    background?: string;
+    spinner?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const Loading: import("svelte").Component<LoadingProps, {}, "">;
+type Loading = ReturnType<typeof Loading>;
+export default Loading;

package/dist/Loading/index.d.ts

@@ -0,0 +1,4 @@
+import Loading from './Loading.svelte';
+export { Loading };
+export type { LoadingProps } from './types';
+export default Loading;

package/dist/Loading/index.js

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

package/dist/Loading/types.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+/** Loading 属性 */
+export interface LoadingProps {
+    /** 是否显示 */
+    visible?: boolean;
+    /** 是否全屏 */
+    fullscreen?: boolean;
+    /** 是否锁定滚动 */
+    lock?: boolean;
+    /** 加载文本 */
+    text?: string;
+    /** 背景色 */
+    background?: string;
+    /** 自定义图标 */
+    spinner?: Snippet;
+    /** 子内容（被遮罩的内容） */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Loading/types.js

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

package/dist/Menu/Menu.svelte

@@ -0,0 +1,301 @@
+<script lang="ts">
+  import Icon from "../Icon/Icon.svelte";
+  import { ChevronRight, ChevronDown } from "lucide";
+  import { onMount, onDestroy } from "svelte";
+  import { slide, fade, scale } from "svelte/transition";
+  import type { MenuItem, MenuProps } from "./types";
+
+  type Props = MenuProps;
+
+  let {
+    items = [],
+    activeId,
+    mode = "vertical",
+    collapsed = false,
+    accordion = false,
+    class: cls = "",
+    onselect,
+    ...attrs
+  }: Props = $props();
+
+  // 展开的子菜单 ID 集合
+  let openIds = $state(new Set<string | number>());
+  // 悬停的菜单项 ID 集合（用于水平模式和折叠模式的弹出菜单）
+  let hoverIds = $state(new Set<string | number>());
+  // 悬停关闭定时器
+  const closeTimers = new Map<string | number, ReturnType<typeof setTimeout>>();
+  // 菜单根元素引用
+  let menuRef: HTMLElement | null = $state(null);
+
+  // 获取菜单项 ID
+  const getItemId = (item: MenuItem): string | number => item.id ?? item.label;
+
+  // 构建父级映射表
+  const buildParentMap = (
+    list: MenuItem[],
+  ): Map<string | number, string | number> => {
+    const map = new Map<string | number, string | number>();
+    const walk = (items: MenuItem[], parentId?: string | number): void => {
+      for (const item of items) {
+        const id = getItemId(item);
+        if (parentId !== undefined) map.set(id, parentId);
+        if (item.children?.length) walk(item.children, id);
+      }
+    };
+    walk(list);
+    return map;
+  };
+
+  // 获取祖先 ID 列表
+  const getAncestorIds = (
+    id: string | number,
+    parentMap: Map<string | number, string | number>,
+  ): (string | number)[] => {
+    const result: (string | number)[] = [];
+    let current: string | number | undefined = id;
+    while (current !== undefined) {
+      const parent = parentMap.get(current);
+      if (parent === undefined) break;
+      result.push(parent);
+      current = parent;
+    }
+    return result;
+  };
+
+  // 判断是否选中
+  const isActive = (item: MenuItem): boolean => activeId === getItemId(item);
+
+  // 判断是否展开（垂直模式）
+  const isOpen = (item: MenuItem): boolean => openIds.has(getItemId(item));
+
+  // 判断是否悬停（水平/折叠模式）
+  const isHover = (item: MenuItem): boolean => hoverIds.has(getItemId(item));
+
+  // 判断子级是否有选中项
+  const hasActiveChild = (item: MenuItem): boolean => {
+    if (!item.children) return false;
+    return item.children.some(
+      (child: MenuItem) => isActive(child) || hasActiveChild(child),
+    );
+  };
+
+  // 判断是否应该显示子菜单
+  const shouldShowSubmenu = (item: MenuItem): boolean => {
+    if (!item.children?.length) return false;
+    if (mode === "horizontal" || collapsed) return isHover(item);
+    return isOpen(item);
+  };
+
+  // 切换子菜单展开/收起
+  const toggleSubmenu = (id: string | number): void => {
+    const next = new Set(openIds);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      if (accordion) next.clear();
+      next.add(id);
+    }
+    openIds = next;
+  };
+
+  // 处理菜单项点击
+  const handleItemClick = (
+    item: MenuItem,
+    e: MouseEvent | KeyboardEvent,
+  ): void => {
+    e.stopPropagation();
+    if (item.disabled) return;
+
+    const id = getItemId(item);
+
+    if (item.children?.length) {
+      // 有子菜单：垂直非折叠模式下切换展开
+      if (mode === "vertical" && !collapsed) {
+        toggleSubmenu(id);
+      }
+    } else {
+      // 无子菜单：触发回调，由外部控制选中状态
+      onselect?.(id, item);
+      // 水平或折叠模式下关闭弹出菜单
+      if (mode === "horizontal" || collapsed) {
+        hoverIds = new Set();
+      }
+    }
+  };
+
+  // 处理箭头点击
+  const handleArrowClick = (
+    item: MenuItem,
+    e: MouseEvent | KeyboardEvent,
+  ): void => {
+    e.stopPropagation();
+    if (item.disabled || !item.children?.length) return;
+    if (mode !== "vertical" || collapsed) return;
+    toggleSubmenu(getItemId(item));
+  };
+
+  // 处理鼠标进入
+  const handleMouseEnter = (item: MenuItem): void => {
+    if (!(mode === "horizontal" || collapsed) || !item.children?.length) return;
+    const id = getItemId(item);
+    const timer = closeTimers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      closeTimers.delete(id);
+    }
+    hoverIds = new Set(hoverIds).add(id);
+  };
+
+  // 处理鼠标离开
+  const handleMouseLeave = (item: MenuItem): void => {
+    if (!(mode === "horizontal" || collapsed) || !item.children?.length) return;
+    const id = getItemId(item);
+    const timer = setTimeout(() => {
+      const next = new Set(hoverIds);
+      next.delete(id);
+      hoverIds = next;
+      closeTimers.delete(id);
+    }, 150);
+    closeTimers.set(id, timer);
+  };
+
+  // 处理键盘事件
+  const handleKeydown = (item: MenuItem, e: KeyboardEvent): void => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleItemClick(item, e);
+    }
+  };
+
+  // 处理点击外部
+  const handleClickOutside = (e: MouseEvent): void => {
+    if (mode === "vertical" && !collapsed) return;
+    if (menuRef && !menuRef.contains(e.target as Node)) {
+      hoverIds = new Set();
+    }
+  };
+
+  // 用于追踪上一次处理过的 activeId，避免重复处理
+  let lastProcessedActiveId: string | number | undefined = undefined;
+
+  // 初始化展开状态
+  const expandToActive = () => {
+    if (mode !== "vertical" || collapsed || activeId === undefined) return;
+    if (activeId === lastProcessedActiveId) return;
+    lastProcessedActiveId = activeId;
+
+    const parentMap = buildParentMap(items);
+    const ancestors = getAncestorIds(activeId, parentMap);
+    if (ancestors.length > 0) {
+      // 合并现有展开项和新的祖先项
+      const next = accordion
+        ? new Set(ancestors)
+        : new Set([...openIds, ...ancestors]);
+      openIds = next;
+    }
+  };
+
+  onMount(() => {
+    expandToActive();
+    document.addEventListener("click", handleClickOutside);
+  });
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.removeEventListener("click", handleClickOutside);
+    }
+    closeTimers.forEach((t) => clearTimeout(t));
+  });
+
+  // CSS 类
+  const classes = $derived(
+    `lm-menu lm-menu--${mode}${collapsed ? " is-collapsed" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  // 箭头图标
+  const ArrowIcon = $derived(
+    mode === "horizontal" ? ChevronDown : ChevronRight,
+  );
+</script>
+
+{#snippet menuItem(item: MenuItem, depth: number = 0)}
+  {@const hasChildren = !!item.children?.length}
+  {@const showSubmenu = shouldShowSubmenu(item)}
+  {@const iconSize = depth === 0 ? 18 : 16}
+  <li
+    class="lm-menu__item"
+    class:is-active={isActive(item)}
+    class:has-active-child={hasActiveChild(item)}
+    class:is-disabled={item.disabled}
+    class:has-submenu={hasChildren}
+    class:is-open={isOpen(item) || isHover(item)}
+    onmouseenter={() => handleMouseEnter(item)}
+    onmouseleave={() => handleMouseLeave(item)}
+  >
+    <div
+      class="lm-menu__item-content"
+      role="menuitem"
+      tabindex={item.disabled ? -1 : 0}
+      aria-haspopup={hasChildren ? "true" : undefined}
+      aria-expanded={hasChildren ? showSubmenu : undefined}
+      onclick={(e: MouseEvent) => handleItemClick(item, e)}
+      onkeydown={(e: KeyboardEvent) => handleKeydown(item, e)}
+    >
+      {#if item.icon}
+        <span class="lm-menu__item-icon">
+          <Icon icon={item.icon} size={iconSize} />
+        </span>
+      {/if}
+      <span class="lm-menu__item-label">{item.label}</span>
+      {#if hasChildren}
+        <button
+          type="button"
+          class="lm-menu__item-arrow"
+          class:is-open={showSubmenu}
+          tabindex={mode === "vertical" && !collapsed ? 0 : -1}
+          aria-label="Toggle submenu"
+          onclick={(e: MouseEvent) => handleArrowClick(item, e)}
+        >
+          <Icon icon={ArrowIcon} size={14} />
+        </button>
+      {/if}
+    </div>
+
+    {#if hasChildren && showSubmenu}
+      {#if mode === "horizontal" || collapsed}
+        <ul
+          class="lm-menu__popup{depth > 0 ? ' lm-menu__popup--nested' : ''}"
+          role="menu"
+          transition:scale|global={{ duration: 150, start: 0.95, opacity: 0 }}
+        >
+          {#each item.children as child (getItemId(child))}
+            {@render menuItem(child, depth + 1)}
+          {/each}
+        </ul>
+      {:else}
+        <ul
+          class="lm-menu__submenu"
+          role="menu"
+          transition:slide|global={{ duration: 200 }}
+        >
+          {#each item.children as child (getItemId(child))}
+            {@render menuItem(child, depth + 1)}
+          {/each}
+        </ul>
+      {/if}
+    {/if}
+  </li>
+{/snippet}
+
+<nav bind:this={menuRef} class={classes} role="menu" {...attrs}>
+  <ul class="lm-menu__list" role="menubar">
+    {#each items as item (getItemId(item))}
+      {#if item.group && (items.indexOf(item) === 0 || items[items.indexOf(item) - 1]?.group !== item.group)}
+        <li class="lm-menu__group" role="presentation">
+          {#if !collapsed}{item.group}{/if}
+        </li>
+      {/if}
+      {@render menuItem(item, 0)}
+    {/each}
+  </ul>
+</nav>

package/dist/Menu/Menu.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MenuProps } from "./types";
+declare const Menu: import("svelte").Component<MenuProps, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/Menu/types.d.ts

@@ -0,0 +1,35 @@
+import type { IconNode } from 'lucide';
+
+export type MenuMode = 'vertical' | 'horizontal';
+
+export interface MenuItem {
+    /** 唯一标识（未提供时会回退为 label） */
+    id?: string | number;
+    /** 显示文本 */
+    label: string;
+    /** 图标（lucide IconNode） */
+    icon?: IconNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 子菜单 */
+    children?: MenuItem[];
+    /** 分组标题（相邻且相同 group 会自动合并显示） */
+    group?: string;
+}
+
+export interface MenuProps {
+    /** 菜单数据 */
+    items?: MenuItem[];
+    /** 当前选中 ID（受控） */
+    activeId?: string | number;
+    /** 展示模式 */
+    mode?: MenuMode;
+    /** 是否折叠（垂直模式下表现为弹出子菜单） */
+    collapsed?: boolean;
+    /** 是否手风琴（仅垂直非折叠模式有效） */
+    accordion?: boolean;
+    /** 自定义类名 */
+    class?: string;
+    /** 选中回调 */
+    onselect?: (id: string | number, item: MenuItem) => void;
+}

package/dist/Menu/types.js

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

package/dist/Message/Message.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import Icon from "../Icon/Icon.svelte";
+  import { CheckCircle, AlertTriangle, XCircle, Info, X } from "lucide";
+  import { fly } from "svelte/transition";
+  import type { MessageType } from "./types";
+
+  interface MessageProps {
+    message: string;
+    type?: MessageType;
+    showClose?: boolean;
+    center?: boolean;
+    offset?: number;
+    onclose?: () => void;
+    class?: string;
+  }
+
+  let {
+    message,
+    type = "info",
+    showClose = false,
+    center = false,
+    offset = 20,
+    onclose,
+    class: cls = "",
+    ...attrs
+  }: MessageProps = $props();
+
+  const icons = {
+    success: CheckCircle,
+    warning: AlertTriangle,
+    error: XCircle,
+    info: Info,
+  };
+
+  const icon = $derived(icons[type]);
+  const classes = $derived(
+    `lm-message lm-message--${type}${center ? " is-center" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+</script>
+
+<div
+  class={classes}
+  style:top="{offset}px"
+  role="alert"
+  transition:fly={{ y: -20, duration: 250, opacity: 0 }}
+  {...attrs}
+>
+  <Icon {icon} class="lm-message__icon" />
+  <span class="lm-message__content">{message}</span>
+  {#if showClose}
+    <button
+      type="button"
+      class="lm-message__close"
+      onclick={onclose}
+      aria-label="关闭"
+    >
+      <Icon icon={X} size={14} />
+    </button>
+  {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { MessageType } from "./types";
+interface MessageProps {
+    message: string;
+    type?: MessageType;
+    showClose?: boolean;
+    center?: boolean;
+    offset?: number;
+    onclose?: () => void;
+    class?: string;
+}
+declare const Message: import("svelte").Component<MessageProps, {}, "">;
+type Message = ReturnType<typeof Message>;
+export default Message;