luna-plus 0.0.5

package/dist/Autocomplete/Autocomplete.svelte.d.ts

@@ -0,0 +1,20 @@
+interface SuggestionItem {
+    value: string;
+    [key: string]: any;
+}
+interface Props {
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    loading?: boolean;
+    debounce?: number;
+    valueKey?: string;
+    fetchSuggestions?: (query: string) => Promise<SuggestionItem[]> | SuggestionItem[];
+    size?: 'small' | 'default' | 'large';
+    showMenuArrow?: boolean;
+    class?: string;
+}
+declare const Autocomplete: import("svelte").Component<Props, {}, "modelValue" | "loading">;
+type Autocomplete = ReturnType<typeof Autocomplete>;
+export default Autocomplete;

package/dist/Autocomplete/index.d.ts

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

package/dist/Autocomplete/index.js

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

package/dist/Avatar/Avatar.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface AvatarProps {
+    src?: string;
+    alt?: string;
+    size?:
+      | "small"
+      | "medium"
+      | "large"
+      | "default"
+      | "s"
+      | "m"
+      | "l"
+      | "S"
+      | "M"
+      | "L"
+      | number;
+    shape?: "circle" | "square";
+    fit?: "fill" | "contain" | "cover" | "none" | "scale-down";
+    children?: Snippet;
+    onerror?: (e: Event) => void;
+    class?: string;
+  }
+
+  let {
+    src,
+    alt = "",
+    size = "medium",
+    shape = "circle",
+    fit = "cover",
+    children,
+    onerror,
+    class: cls = "",
+    ...attrs
+  }: AvatarProps = $props();
+
+  let hasError = $state(false);
+
+  const normalizePresetSize = (v: string): string => {
+    const key = v.toLowerCase();
+    if (key === "default") return "medium";
+    if (key === "s") return "small";
+    if (key === "m") return "medium";
+    if (key === "l") return "large";
+    return v;
+  };
+
+  const normalizedSize = $derived.by(() => {
+    if (typeof size !== "string") return size;
+    return normalizePresetSize(size);
+  });
+
+  const sizeClass = $derived(
+    typeof normalizedSize === "number"
+      ? "lm-avatar--custom"
+      : `lm-avatar--${normalizedSize}`,
+  );
+  const classes = $derived(
+    `lm-avatar ${sizeClass} lm-avatar--${shape}${cls ? ` ${cls}` : ""}`,
+  );
+
+  const styleAttr = $derived.by(() => {
+    if (typeof normalizedSize !== "number") return undefined;
+    const px = `${normalizedSize}px`;
+    return `width:${px};height:${px};font-size:${Math.max(12, Math.round(normalizedSize / 2.8))}px;`;
+  });
+
+  const handleError = (e: Event): void => {
+    hasError = true;
+    onerror?.(e);
+  };
+
+  $effect(() => {
+    if (hasError && src) hasError = false;
+  });
+</script>
+
+<span {...attrs} class={classes} style={styleAttr} aria-label={alt} role="img">
+  {#if src && !hasError}
+    <img
+      class="lm-avatar__img"
+      {src}
+      {alt}
+      style={`object-fit:${fit};`}
+      onerror={handleError}
+    />
+  {:else}
+    <span class="lm-avatar__placeholder">
+      {#if children}
+        {@render children()}
+      {:else}
+        {alt?.slice(0, 1).toUpperCase()}
+      {/if}
+    </span>
+  {/if}
+</span>

package/dist/Avatar/Avatar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    size?: 'small' | 'medium' | 'large' | 'default' | 's' | 'm' | 'l' | 'S' | 'M' | 'L' | number;
+    shape?: 'circle' | 'square';
+    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    children?: Snippet;
+    onerror?: (e: Event) => void;
+    class?: string;
+}
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+import Avatar from './Avatar.svelte';
+export { Avatar };
+export type { AvatarProps, AvatarSize, AvatarShape, AvatarFit } from './types';
+export default Avatar;

package/dist/Avatar/index.js

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

package/dist/Avatar/types.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+/** Avatar 尺寸 */
+export type AvatarSize = 'small' | 'medium' | 'large' | number;
+/** Avatar 形状 */
+export type AvatarShape = 'circle' | 'square';
+/** Avatar 图片适应方式 */
+export type AvatarFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+/** Avatar 属性 */
+export interface AvatarProps {
+    /** 图片地址 */
+    src?: string;
+    /** 替代文本 */
+    alt?: string;
+    /** 尺寸 */
+    size?: AvatarSize;
+    /** 形状 */
+    shape?: AvatarShape;
+    /** 图片适应方式 */
+    fit?: AvatarFit;
+    /** 子内容 */
+    children?: Snippet;
+    /** 图片加载失败回调 */
+    onerror?: (e: Event) => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Avatar/types.js

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

package/dist/Backtop/Backtop.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { onMount, onDestroy } from 'svelte'
+    import Icon from '../Icon/Icon.svelte'
+    import { ArrowUp } from 'lucide'
+
+    interface BacktopProps {
+        visibilityHeight?: number
+        right?: number
+        bottom?: number
+        target?: string
+        onclick?: () => void
+        children?: Snippet
+        class?: string
+    }
+
+    let { visibilityHeight = 200, right = 40, bottom = 40, target, onclick, children, class: cls = '', ...attrs }: BacktopProps = $props()
+
+    let visible = $state(false)
+    let container: HTMLElement | Window = $state(window)
+
+    const handleScroll = (): void => {
+        const scrollTop = container === window ? document.documentElement.scrollTop || document.body.scrollTop : (container as HTMLElement).scrollTop
+        visible = scrollTop >= visibilityHeight
+    }
+
+    const scrollToTop = (): void => {
+        const el = container === window ? document.documentElement : (container as HTMLElement)
+        el.scrollTo({ top: 0, behavior: 'smooth' })
+        onclick?.()
+    }
+
+    onMount(() => {
+        if (target) {
+            const el = document.querySelector(target)
+            if (el) container = el as HTMLElement
+        }
+        const scrollEl = container === window ? window : container
+        scrollEl.addEventListener('scroll', handleScroll, { passive: true })
+        handleScroll()
+    })
+
+    onDestroy(() => {
+        const scrollEl = container === window ? window : container
+        scrollEl.removeEventListener('scroll', handleScroll)
+    })
+
+    const classes = $derived(`lm-backtop${visible ? ' is-visible' : ''}${cls ? ` ${cls}` : ''}`)
+    const style = $derived(`right: ${right}px; bottom: ${bottom}px`)
+</script>
+
+{#if visible}
+    <button type="button" class={classes} {style} onclick={scrollToTop} aria-label="Back to top" {...attrs}>
+        {#if children}
+            {@render children()}
+        {:else}
+            <Icon icon={ArrowUp} size={20} />
+        {/if}
+    </button>
+{/if}

package/dist/Backtop/Backtop.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface BacktopProps {
+    visibilityHeight?: number;
+    right?: number;
+    bottom?: number;
+    target?: string;
+    onclick?: () => void;
+    children?: Snippet;
+    class?: string;
+}
+declare const Backtop: import("svelte").Component<BacktopProps, {}, "">;
+type Backtop = ReturnType<typeof Backtop>;
+export default Backtop;

package/dist/Backtop/index.d.ts

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

package/dist/Backtop/index.js

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

package/dist/Backtop/types.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+/** Backtop 属性 */
+export interface BacktopProps {
+    /** 滚动高度达到此值后显示 */
+    visibilityHeight?: number;
+    /** 距离右边距 */
+    right?: number;
+    /** 距离底边距 */
+    bottom?: number;
+    /** 触发滚动的目标元素选择器 */
+    target?: string;
+    /** 点击事件 */
+    onclick?: () => void;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Backtop/types.js

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

package/dist/Badge/Badge.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface BadgeProps {
+    value?: string | number;
+    max?: number;
+    isDot?: boolean;
+    hidden?: boolean;
+    type?: "primary" | "success" | "warning" | "danger" | "info";
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    value,
+    max,
+    isDot = false,
+    hidden = false,
+    type = "danger",
+    children,
+    class: cls = "",
+    ...attrs
+  }: BadgeProps = $props();
+
+  const classes = $derived(cls ? `lm-badge ${cls}` : "lm-badge");
+
+  const contentClasses = $derived(
+    isDot
+      ? `lm-badge__content lm-badge__content--${type} is-dot`
+      : `lm-badge__content lm-badge__content--${type}`,
+  );
+
+  const displayValue = $derived.by(() => {
+    if (isDot || value == null) return "";
+
+    const maxNum = typeof max === "number" ? max : undefined;
+
+    let valNum: number | undefined;
+    if (typeof value === "number") {
+      valNum = value;
+    } else if (typeof value === "string") {
+      const n = Number(value);
+      if (!Number.isNaN(n)) valNum = n;
+    }
+
+    if (maxNum !== undefined && valNum !== undefined && valNum > maxNum) {
+      return `${maxNum}+`;
+    }
+
+    return String(value);
+  });
+</script>
+
+<div {...attrs} class={classes}>
+  <div class="lm-badge__base">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+
+  {#if !hidden}
+    <span class={contentClasses} aria-hidden={isDot || undefined}>
+      {#if !isDot}
+        {displayValue}
+      {/if}
+    </span>
+  {/if}
+</div>

package/dist/Badge/Badge.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface BadgeProps {
+    value?: string | number;
+    max?: number;
+    isDot?: boolean;
+    hidden?: boolean;
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    children?: Snippet;
+    class?: string;
+}
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/Badge/index.d.ts

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

package/dist/Badge/index.js

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

package/dist/Badge/types.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+/** Badge 类型 */
+export type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/** Badge 属性 */
+export interface BadgeProps {
+    /** 显示值 */
+    value?: string | number;
+    /** 最大值 */
+    max?: number;
+    /** 是否显示小圆点 */
+    isDot?: boolean;
+    /** 是否隐藏 */
+    hidden?: boolean;
+    /** 类型 */
+    type?: BadgeType;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Badge/types.js

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

package/dist/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import Icon from "../Icon/Icon.svelte";
+  import type { Snippet } from "svelte";
+  import type { BreadcrumbItem } from "./types";
+  import { setContext } from "svelte";
+  import {
+    BREADCRUMB_CONTEXT_KEY,
+    type BreadcrumbContext,
+  } from "./BreadcrumbContext";
+
+  interface BreadcrumbProps {
+    items?: BreadcrumbItem[];
+    separator?: string;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    items,
+    separator = "/",
+    children,
+    class: cls = "",
+    ...attrs
+  }: BreadcrumbProps = $props();
+
+  // 使用 getter 确保响应式
+  setContext(BREADCRUMB_CONTEXT_KEY, {
+    get separator() {
+      return separator;
+    },
+  });
+
+  const classes = $derived(`lm-breadcrumb${cls ? ` ${cls}` : ""}`);
+</script>
+
+<ul class={classes} {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else if items}
+    {#each items as item, index}
+      <li class="lm-breadcrumb__item">
+        {#if item.href}
+          <a href={item.href} class="lm-breadcrumb__link">
+            {#if item.icon}
+              <Icon icon={item.icon} class="lm-breadcrumb__icon" />
+            {/if}
+            {item.label}
+          </a>
+        {:else}
+          <span class="lm-breadcrumb__text">
+            {#if item.icon}
+              <Icon icon={item.icon} class="lm-breadcrumb__icon" />
+            {/if}
+            {item.label}
+          </span>
+        {/if}
+      </li>
+      {#if index < items.length - 1}
+        <li class="lm-breadcrumb__separator">{separator}</li>
+      {/if}
+    {/each}
+  {/if}
+</ul>
+
+<style lang="scss">
+</style>

package/dist/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { BreadcrumbProps } from './types';
+interface Props extends BreadcrumbProps {
+}
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/Breadcrumb/BreadcrumbContext.d.ts

@@ -0,0 +1,4 @@
+export declare const BREADCRUMB_CONTEXT_KEY: unique symbol;
+export interface BreadcrumbContext {
+    separator: string;
+}

package/dist/Breadcrumb/BreadcrumbContext.js

@@ -0,0 +1 @@
+export const BREADCRUMB_CONTEXT_KEY = Symbol('breadcrumb');

package/dist/Breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import Icon from "../Icon/Icon.svelte";
+  import type { Snippet } from "svelte";
+  import type { IconNode } from "lucide";
+  import { getContext } from "svelte";
+  import {
+    BREADCRUMB_CONTEXT_KEY,
+    type BreadcrumbContext,
+  } from "./BreadcrumbContext";
+
+  interface BreadcrumbItemProps {
+    href?: string;
+    to?: string;
+    icon?: IconNode;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    href,
+    to,
+    icon,
+    children,
+    class: cls = "",
+    ...attrs
+  }: BreadcrumbItemProps = $props();
+
+  const context = getContext<BreadcrumbContext>(BREADCRUMB_CONTEXT_KEY);
+  const separator = $derived(context?.separator ?? "/");
+  const link = $derived(href || to);
+
+  const classes = $derived(`lm-breadcrumb__item${cls ? ` ${cls}` : ""}`);
+</script>
+
+<li class={classes} {...attrs}>
+  {#if link}
+    <a href={link} class="lm-breadcrumb__link">
+      {#if icon}
+        <Icon {icon} class="lm-breadcrumb__icon" />
+      {/if}
+      {#if children}
+        {@render children()}
+      {/if}
+    </a>
+  {:else}
+    <span class="lm-breadcrumb__text">
+      {#if icon}
+        <Icon {icon} class="lm-breadcrumb__icon" />
+      {/if}
+      {#if children}
+        {@render children()}
+      {/if}
+    </span>
+  {/if}
+</li>
+<li class="lm-breadcrumb__separator">{separator}</li>

package/dist/Breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { IconNode } from "lucide";
+interface BreadcrumbItemProps {
+    href?: string;
+    to?: string;
+    icon?: IconNode;
+    children?: Snippet;
+    class?: string;
+}
+declare const BreadcrumbItem: import("svelte").Component<BreadcrumbItemProps, {}, "">;
+type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;

package/dist/Breadcrumb/index.d.ts

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

package/dist/Breadcrumb/index.js

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

package/dist/Breadcrumb/types.d.ts

@@ -0,0 +1,10 @@
+import type { IconNode } from 'lucide';
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: IconNode;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: string;
+}

package/dist/Breadcrumb/types.js

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

package/dist/Button/Button.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import Icon from '../Icon/Icon.svelte'
+    import { LoaderCircle } from 'lucide'
+    import type { ButtonProps } from './types'
+
+    let {
+        type = 'default',
+        size = 'medium',
+        disabled = false,
+        plain = false,
+        round = false,
+        circle = false,
+        loading = false,
+        children,
+        onclick,
+        class: cls = '',
+        'aria-label': ariaLabel,
+        'aria-current': ariaCurrent,
+        'aria-expanded': ariaExpanded,
+        'aria-haspopup': ariaHaspopup,
+        'aria-controls': ariaControls,
+        ...attrs
+    }: ButtonProps = $props()
+
+    const classes = $derived(
+        `lm-button lm-button--${type} lm-button--${size}${disabled ? ' is-disabled' : ''}${loading ? ' is-loading' : ''}${plain ? ' is-plain' : ''}${round ? ' is-round' : ''}${circle ? ' is-circle' : ''}${cls ? ` ${cls}` : ''}`
+    )
+
+    const handleClick = (e: MouseEvent): void => {
+        if (disabled || loading) {
+            e.preventDefault()
+            e.stopPropagation()
+            return
+        }
+        onclick?.(e)
+    }
+</script>
+
+<button
+    {...attrs}
+    class={classes}
+    type="button"
+    aria-disabled={disabled || loading || undefined}
+    aria-label={ariaLabel}
+    aria-current={ariaCurrent}
+    aria-expanded={ariaExpanded}
+    aria-haspopup={ariaHaspopup}
+    aria-controls={ariaControls}
+    disabled={disabled || loading}
+    onclick={handleClick}
+>
+    {#if loading}
+        <span class="lm-button__loading" aria-hidden="true">
+            <Icon icon={LoaderCircle} size={16} />
+        </span>
+    {/if}
+
+    {#if children && !loading}
+        {@render children()}
+    {/if}
+</button>

package/dist/Button/Button.svelte.d.ts

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

package/dist/Button/index.d.ts

@@ -0,0 +1,4 @@
+import Button from './Button.svelte';
+export { Button };
+export type { ButtonProps, ButtonSize, ButtonType } from './types';
+export default Button;

package/dist/Button/index.js

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