luna-plus 0.0.5

package/dist/Button/types.d.ts

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+/** Button 尺寸 */
+export type ButtonSize = 'small' | 'medium' | 'large';
+/** Button 类型 */
+export type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/** Button 属性 */
+export interface ButtonProps {
+    /** 按钮类型 */
+    type?: ButtonType;
+    /** 按钮尺寸 */
+    size?: ButtonSize;
+    /** 是否朴素按钮 */
+    plain?: boolean;
+    /** 是否圆角按钮 */
+    round?: boolean;
+    /** 是否圆形按钮 */
+    circle?: boolean;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 图标 */
+    icon?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+    /** 原生样式字符串（透传到 button） */
+    style?: string;
+    /** 点击事件 */
+    onclick?: (event: MouseEvent) => void;
+    /** 无障碍标签 */
+    'aria-label'?: string;
+    /** 当前状态（用于分页等） */
+    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
+    /** 是否展开（用于可折叠区域） */
+    'aria-expanded'?: boolean;
+    /** 弹出窗口类型 */
+    'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** 控制的元素 ID */
+    'aria-controls'?: string;
+}

package/dist/Button/types.js

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

package/dist/Calendar/Calendar.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+    import Icon from '../Icon/Icon.svelte'
+    import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide'
+
+    interface Props {
+        modelValue?: Date
+        class?: string
+    }
+
+    let { modelValue = $bindable(new Date()), class: cls = '', ...attrs }: Props = $props()
+
+    let currentDate = $state(new Date(modelValue))
+
+    const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+
+    const year = $derived(currentDate.getFullYear())
+    const month = $derived(currentDate.getMonth())
+
+    const getDaysInMonth = (y: number, m: number): number => new Date(y, m + 1, 0).getDate()
+
+    const calendarDays = $derived.by(() => {
+        const days: { date: number; month: 'prev' | 'current' | 'next'; fullDate: Date }[] = []
+        const daysInMonth = getDaysInMonth(year, month)
+        const firstDay = new Date(year, month, 1).getDay()
+        const prevMonthDays = getDaysInMonth(year, month - 1)
+
+        for (let i = firstDay - 1; i >= 0; i--) {
+            const date = prevMonthDays - i
+            days.push({ date, month: 'prev', fullDate: new Date(year, month - 1, date) })
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            days.push({ date: i, month: 'current', fullDate: new Date(year, month, i) })
+        }
+        const remaining = 42 - days.length
+        for (let i = 1; i <= remaining; i++) {
+            days.push({ date: i, month: 'next', fullDate: new Date(year, month + 1, i) })
+        }
+        return days
+    })
+
+    const today = $derived.by(() => {
+        const d = new Date()
+        return { y: d.getFullYear(), m: d.getMonth(), d: d.getDate() }
+    })
+
+    const selected = $derived({ y: modelValue.getFullYear(), m: modelValue.getMonth(), d: modelValue.getDate() })
+
+    const isToday = (date: Date): boolean => date.getDate() === today.d && date.getMonth() === today.m && date.getFullYear() === today.y
+
+    const isSelected = (date: Date): boolean => date.getDate() === selected.d && date.getMonth() === selected.m && date.getFullYear() === selected.y
+
+    const selectDate = (day: { date: number; month: 'prev' | 'current' | 'next'; fullDate: Date }): void => {
+        modelValue = day.fullDate
+        if (day.month !== 'current') currentDate = new Date(day.fullDate)
+    }
+
+    const goToToday = (): void => {
+        const t = new Date()
+        modelValue = t
+        currentDate = new Date(t)
+    }
+
+    const classes = $derived(`lm-calendar${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    <div class="lm-calendar__header">
+        <div class="lm-calendar__nav">
+            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year - 1, month, 1))} aria-label="上一年">
+                <Icon icon={ChevronsLeft} size={16} />
+            </button>
+            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year, month - 1, 1))} aria-label="上个月">
+                <Icon icon={ChevronLeft} size={14} />
+            </button>
+        </div>
+        <div class="lm-calendar__title">
+            {year}年 {month + 1}月
+        </div>
+        <div class="lm-calendar__nav">
+            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year, month + 1, 1))} aria-label="下个月">
+                <Icon icon={ChevronRight} size={14} />
+            </button>
+            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year + 1, month, 1))} aria-label="下一年">
+                <Icon icon={ChevronsRight} size={16} />
+            </button>
+        </div>
+    </div>
+
+    <div class="lm-calendar__body">
+        <div class="lm-calendar__weekdays">
+            {#each weekDays as day}
+                <div class="lm-calendar__weekday">{day}</div>
+            {/each}
+        </div>
+        <div class="lm-calendar__days" role="grid">
+            {#each calendarDays as day}
+                <button
+                    type="button"
+                    class="lm-calendar__day"
+                    class:is-other-month={day.month !== 'current'}
+                    class:is-today={isToday(day.fullDate)}
+                    class:is-selected={isSelected(day.fullDate)}
+                    aria-pressed={isSelected(day.fullDate)}
+                    onclick={() => selectDate(day)}
+                >
+                    {day.date}
+                </button>
+            {/each}
+        </div>
+    </div>
+
+    <div class="lm-calendar__footer">
+        <button class="lm-calendar__today" onclick={goToToday}>今天</button>
+    </div>
+</div>

package/dist/Calendar/Calendar.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    modelValue?: Date;
+    class?: string;
+}
+declare const Calendar: import("svelte").Component<Props, {}, "modelValue">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/Calendar/index.d.ts

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

package/dist/Calendar/index.js

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

package/dist/Card/Card.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { CardProps, StyleValue } from './types'
+
+    const styleToString = (value?: StyleValue): string | undefined => {
+        if (!value) return undefined
+        if (typeof value === 'string') return value
+        return Object.entries(value)
+            .map(([key, val]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}:${val}`)
+            .join(';')
+    }
+
+    let {
+        header,
+        footer,
+        bodyStyle,
+        headerClass = '',
+        bodyClass = '',
+        footerClass = '',
+        shadow = 'always',
+        children,
+        class: cls = '',
+        ...attrs
+    }: CardProps = $props()
+
+    const shadowClass = $derived(shadow !== 'always' ? ` is-${shadow}-shadow` : '')
+    const cardClasses = $derived(`lm-card${shadowClass}${cls ? ` ${cls}` : ''}`)
+    const headerClasses = $derived(`lm-card__header${headerClass ? ` ${headerClass}` : ''}`)
+    const bodyClasses = $derived(`lm-card__body${bodyClass ? ` ${bodyClass}` : ''}`)
+    const footerClasses = $derived(`lm-card__footer${footerClass ? ` ${footerClass}` : ''}`)
+    const bodyStyleText = $derived(styleToString(bodyStyle))
+</script>
+
+<div class={cardClasses} {...attrs}>
+    {#if header}
+        <div class={headerClasses}>
+            {#if typeof header === 'string'}
+                {header}
+            {:else}
+                {@render header()}
+            {/if}
+        </div>
+    {/if}
+
+    <div class={bodyClasses} style={bodyStyleText}>
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+
+    {#if footer}
+        <div class={footerClasses}>
+            {#if typeof footer === 'string'}
+                {footer}
+            {:else}
+                {@render footer()}
+            {/if}
+        </div>
+    {/if}
+</div>

package/dist/Card/Card.svelte.d.ts

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

package/dist/Card/index.d.ts

@@ -0,0 +1,4 @@
+import Card from './Card.svelte';
+export { Card };
+export * from './types';
+export default Card;

package/dist/Card/index.js

@@ -0,0 +1,4 @@
+import Card from './Card.svelte';
+export { Card };
+export * from './types';
+export default Card;

package/dist/Card/types.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** Card 阴影显示时机 */
+export type CardShadow = 'always' | 'hover' | 'never';
+export type StyleValue = string | Record<string, string | number>;
+/** Card 属性 */
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    /** 卡片标题（也可通过 header snippet 传入） */
+    header?: string | Snippet;
+    /** 卡片底部（也可通过 footer snippet 传入） */
+    footer?: string | Snippet;
+    /** body 的 CSS 样式 */
+    bodyStyle?: StyleValue;
+    /** header 自定义类名 */
+    headerClass?: string;
+    /** body 自定义类名 */
+    bodyClass?: string;
+    /** footer 自定义类名 */
+    footerClass?: string;
+    /** 阴影显示时机 */
+    shadow?: CardShadow;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Card/types.js

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

package/dist/Carousel/Carousel.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type {
+    CarouselDirection,
+    CarouselIndicatorTrigger,
+    CarouselIndicatorPosition,
+  } from "./types";
+  import { setContext, onMount, onDestroy } from "svelte";
+  import {
+    CAROUSEL_CONTEXT_KEY,
+    type CarouselContext,
+  } from "./CarouselContext";
+  import Icon from "../Icon/Icon.svelte";
+  import { ChevronLeft, ChevronRight, ChevronUp, ChevronDown } from "lucide";
+
+  interface CarouselProps {
+    initialIndex?: number;
+    height?: string;
+    autoplay?: boolean;
+    interval?: number;
+    loop?: boolean;
+    direction?: CarouselDirection;
+    indicatorTrigger?: CarouselIndicatorTrigger;
+    indicatorPosition?: CarouselIndicatorPosition;
+    arrow?: "always" | "hover" | "never";
+    itemCount?: number;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    initialIndex = 0,
+    height = "300px",
+    autoplay = true,
+    interval = 3000,
+    loop = true,
+    direction = "horizontal",
+    indicatorTrigger = "click",
+    indicatorPosition,
+    arrow = "hover",
+    itemCount = 0,
+    children,
+    class: cls = "",
+    ...attrs
+  }: CarouselProps = $props();
+
+  let activeIndex = $state(0);
+  let timer: ReturnType<typeof setInterval> | null = null;
+  let isHovering = $state(false);
+  let itemIndexCounter = $state(0);
+
+  // Initialize activeIndex from prop
+  $effect(() => {
+    if (initialIndex >= 0 && initialIndex < itemCount) {
+      activeIndex = initialIndex;
+    }
+  });
+
+  const context: CarouselContext = {
+    get activeIndex() {
+      return activeIndex;
+    },
+    get direction() {
+      return direction;
+    },
+    registerItem: () => {
+      const index = itemIndexCounter;
+      itemIndexCounter++;
+      return index;
+    },
+    unregisterItem: () => {
+      // 当组件销毁时可以减少计数，但通常不需要
+    },
+  };
+
+  setContext(CAROUSEL_CONTEXT_KEY, context);
+
+  const prev = (): void => {
+    if (itemCount === 0) return;
+    if (activeIndex > 0) {
+      activeIndex--;
+    } else if (loop) {
+      activeIndex = itemCount - 1;
+    }
+  };
+
+  const next = (): void => {
+    if (itemCount === 0) return;
+    if (activeIndex < itemCount - 1) {
+      activeIndex++;
+    } else if (loop) {
+      activeIndex = 0;
+    }
+  };
+
+  const goTo = (index: number): void => {
+    activeIndex = index;
+  };
+
+  const handleIndicator = (index: number, trigger: "hover" | "click"): void => {
+    if (indicatorTrigger === trigger) {
+      goTo(index);
+    }
+  };
+
+  const startAutoplay = (): void => {
+    if (autoplay && !timer && itemCount > 1) {
+      timer = setInterval(next, interval);
+    }
+  };
+
+  const stopAutoplay = (): void => {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  };
+
+  const handleMouseEnter = (): void => {
+    isHovering = true;
+    stopAutoplay();
+  };
+
+  const handleMouseLeave = (): void => {
+    isHovering = false;
+    startAutoplay();
+  };
+
+  onMount(() => {
+    startAutoplay();
+  });
+
+  onDestroy(() => {
+    stopAutoplay();
+  });
+
+  const showArrow = $derived(
+    arrow === "always" || (arrow === "hover" && isHovering),
+  );
+  const classes = $derived(
+    `lm-carousel lm-carousel--${direction}${indicatorPosition === "outside" ? " lm-carousel--indicator-outside" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  /** 指示器索引数组（缓存避免重复创建） */
+  const indicatorIndices = $derived(
+    Array.from({ length: itemCount }, (_, i) => i),
+  );
+</script>
+
+<div
+  class={classes}
+  style="height:{height}"
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+  {...attrs}
+>
+  <div
+    class="lm-carousel__container"
+    style="transform:{direction === 'horizontal'
+      ? `translateX(-${activeIndex * 100}%)`
+      : `translateY(-${activeIndex * 100}%)`}"
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+
+  {#if showArrow && itemCount > 1}
+    <button
+      type="button"
+      class="lm-carousel__arrow lm-carousel__arrow--prev"
+      onclick={prev}
+      aria-label="Previous slide"
+    >
+      <Icon
+        icon={direction === "horizontal" ? ChevronLeft : ChevronUp}
+        size={18}
+      />
+    </button>
+    <button
+      type="button"
+      class="lm-carousel__arrow lm-carousel__arrow--next"
+      onclick={next}
+      aria-label="Next slide"
+    >
+      <Icon
+        icon={direction === "horizontal" ? ChevronRight : ChevronDown}
+        size={18}
+      />
+    </button>
+  {/if}
+
+  {#if indicatorPosition !== "none" && itemCount > 1}
+    <div class="lm-carousel__indicators">
+      {#each indicatorIndices as i (i)}
+        <button
+          type="button"
+          class="lm-carousel__indicator{activeIndex === i ? ' is-active' : ''}"
+          onclick={() => handleIndicator(i, "click")}
+          onmouseenter={() => handleIndicator(i, "hover")}
+          aria-label="Go to slide {i + 1}"
+        ></button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/Carousel/Carousel.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { CarouselDirection, CarouselIndicatorTrigger, CarouselIndicatorPosition } from './types';
+interface CarouselProps {
+    initialIndex?: number;
+    height?: string;
+    autoplay?: boolean;
+    interval?: number;
+    loop?: boolean;
+    direction?: CarouselDirection;
+    indicatorTrigger?: CarouselIndicatorTrigger;
+    indicatorPosition?: CarouselIndicatorPosition;
+    arrow?: 'always' | 'hover' | 'never';
+    itemCount?: number;
+    children?: Snippet;
+    class?: string;
+}
+declare const Carousel: import("svelte").Component<CarouselProps, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/Carousel/CarouselContext.d.ts

@@ -0,0 +1,6 @@
+export declare const CAROUSEL_CONTEXT_KEY: unique symbol;
+export interface CarouselContext {
+    activeIndex: number;
+    direction: 'horizontal' | 'vertical';
+    registerItem: () => number;
+}

package/dist/Carousel/CarouselContext.js

@@ -0,0 +1 @@
+export const CAROUSEL_CONTEXT_KEY = Symbol('carousel');

package/dist/Carousel/CarouselItem.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { getContext, onMount } from "svelte";
+  import {
+    CAROUSEL_CONTEXT_KEY,
+    type CarouselContext,
+  } from "./CarouselContext";
+
+  interface CarouselItemProps {
+    name?: string;
+    label?: string;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    name = "",
+    label = "",
+    children,
+    class: cls = "",
+    ...attrs
+  }: CarouselItemProps = $props();
+
+  const carousel = getContext<CarouselContext>(CAROUSEL_CONTEXT_KEY);
+
+  let itemIndex = $state(-1);
+
+  onMount(() => {
+    itemIndex = carousel?.registerItem() ?? 0;
+  });
+
+  const isActive = $derived(itemIndex === carousel?.activeIndex);
+  const classes = $derived(
+    `lm-carousel__item${isActive ? " is-active" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+</script>
+
+<div class={classes} {...attrs}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/Carousel/CarouselItem.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface CarouselItemProps {
+    name?: string;
+    label?: string;
+    index?: number;
+    children?: Snippet;
+    class?: string;
+}
+declare const CarouselItem: import("svelte").Component<CarouselItemProps, {}, "">;
+type CarouselItem = ReturnType<typeof CarouselItem>;
+export default CarouselItem;

package/dist/Carousel/index.d.ts

@@ -0,0 +1,5 @@
+import Carousel from './Carousel.svelte';
+import CarouselItem from './CarouselItem.svelte';
+export { Carousel, CarouselItem };
+export type { CarouselProps, CarouselItemProps, CarouselDirection, CarouselIndicatorTrigger, CarouselIndicatorPosition } from './types';
+export default Carousel;

package/dist/Carousel/index.js

@@ -0,0 +1,4 @@
+import Carousel from './Carousel.svelte';
+import CarouselItem from './CarouselItem.svelte';
+export { Carousel, CarouselItem };
+export default Carousel;

package/dist/Carousel/types.d.ts

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+/** Carousel 方向 */
+export type CarouselDirection = 'horizontal' | 'vertical';
+/** Carousel 指示器触发方式 */
+export type CarouselIndicatorTrigger = 'hover' | 'click';
+/** Carousel 指示器位置 */
+export type CarouselIndicatorPosition = 'outside' | 'none';
+/** Carousel 属性 */
+export interface CarouselProps {
+    /** 初始索引 */
+    initialIndex?: number;
+    /** 高度 */
+    height?: string;
+    /** 是否自动播放 */
+    autoplay?: boolean;
+    /** 自动播放间隔 */
+    interval?: number;
+    /** 是否循环 */
+    loop?: boolean;
+    /** 方向 */
+    direction?: CarouselDirection;
+    /** 指示器触发方式 */
+    indicatorTrigger?: CarouselIndicatorTrigger;
+    /** 指示器位置 */
+    indicatorPosition?: CarouselIndicatorPosition;
+    /** 是否显示箭头 */
+    arrow?: 'always' | 'hover' | 'never';
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** CarouselItem 属性 */
+export interface CarouselItemProps {
+    /** 名称 */
+    name?: string;
+    /** 标签 */
+    label?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Carousel/types.js

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