lumen-plus 0.0.1

package/dist/components/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/components/Backtop/types.js

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

package/dist/components/Badge/Badge.svelte

@@ -0,0 +1,53 @@
+<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}>
+    {#if children}
+        {@render children()}
+    {/if}
+
+    {#if !hidden}
+        <sup class={contentClasses} aria-hidden={isDot || undefined}>
+            {#if !isDot}
+                {displayValue}
+            {/if}
+        </sup>
+    {/if}
+</div>

package/dist/components/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/components/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/components/Badge/index.js

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

package/dist/components/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/components/Badge/types.js

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

package/dist/components/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import Icon from '../Icon'
+    import type { BreadcrumbProps } from './types'
+
+    interface Props extends BreadcrumbProps {}
+
+    let { items, separator = '/' }: Props = $props()
+</script>
+
+<ul class="lm-breadcrumb">
+    {#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}
+</ul>
+
+<style></style>

package/dist/components/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/components/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/components/Breadcrumb/index.js

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

package/dist/components/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/components/Breadcrumb/types.js

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

package/dist/components/Button/Button.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import Icon from '../Icon'
+    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/components/Button/Button.svelte.d.ts

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

package/dist/components/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/components/Button/index.js

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

package/dist/components/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/components/Button/types.js

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

package/dist/components/Calendar/Calendar.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+    import Icon from '../Icon'
+    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/components/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/components/Calendar/index.d.ts

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

package/dist/components/Calendar/index.js

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

package/dist/components/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/components/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/components/Card/index.d.ts

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

package/dist/components/Card/index.js

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

package/dist/components/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/components/Card/types.js

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