luna-plus 0.0.5

package/README.md

@@ -0,0 +1,242 @@
+# luna-ui
+
+A modern, feature-rich Svelte 5 component library with 60+ beautifully designed components.
+
+## Features
+
+- 🚀 **Svelte 5** - Built with the latest Svelte 5 features including runes and snippets
+- 📦 **60+ Components** - Comprehensive set of UI components for any application
+- 🎨 **Customizable** - CSS variables for easy theming and customization
+- 📱 **Responsive** - Mobile-first design with responsive components
+- 🔧 **TypeScript** - Full TypeScript support with type definitions
+- 🌙 **Dark Mode** - Built-in dark mode support
+
+## Installation
+
+```bash
+# Using bun
+bun add luna-ui lucide
+
+# Using npm
+npm install luna-ui lucide
+
+# Using pnpm
+pnpm add luna-ui lucide
+```
+
+## Quick Start
+
+1. Import the styles in your main entry file:
+
+```js
+import 'luna-ui/styles';
+```
+
+2. Use components in your Svelte files:
+
+```svelte
+<script>
+  import { Button, Input, Table, Dialog } from 'luna-ui';
+</script>
+
+<Button type="primary">Click me</Button>
+```
+
+## Components
+
+### Basic
+- Button
+- Icon
+- Link
+
+### Form
+- Input
+- InputNumber
+- InputTag
+- Textarea
+- Select
+- Checkbox
+- Radio
+- Switch
+- Slider
+- Rating
+- ColorPicker
+- DatePicker
+- TimePicker
+- DateTimePicker
+- Cascader
+- Transfer
+- Upload
+- Form
+
+### Data Display
+- Table
+- Tag
+- Badge
+- Avatar
+- Card
+- Carousel
+- Collapse
+- Descriptions
+- Empty
+- Image
+- Pagination
+- Progress
+- Result
+- Skeleton
+- Statistic
+- Timeline
+- Tree
+- TreeSelect
+
+### Navigation
+- Breadcrumb
+- Dropdown
+- Menu
+- Tabs
+- Steps
+
+### Feedback
+- Alert
+- Dialog
+- Drawer
+- Loading
+- Message
+- MessageBox
+- Notification
+- Popconfirm
+- Popover
+- Tooltip
+
+### Layout
+- Container
+- Divider
+- Space
+- Watermark
+
+### Other
+- Affix
+- Backtop
+- Calendar
+- Segmented
+- PinInput
+- Autocomplete
+
+## Example Usage
+
+### Table with Sorting and Selection
+
+```svelte
+<script lang="ts">
+  import { Table } from 'lumen-plus';
+  import type { TableColumn } from 'lumen-plus';
+
+  const columns: TableColumn[] = [
+    { type: 'selection' },
+    { prop: 'name', label: 'Name', sortable: true, width: 150 },
+    { prop: 'email', label: 'Email', minWidth: 200 },
+    { prop: 'role', label: 'Role', width: 120 },
+    {
+      type: 'actions',
+      label: 'Actions',
+      width: 200,
+      actions: [
+        { label: 'Edit', type: 'primary', onClick: (row) => console.log('Edit', row) },
+        { label: 'Delete', type: 'danger', onClick: (row) => console.log('Delete', row) }
+      ]
+    }
+  ];
+
+  const data = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+  ];
+</script>
+
+<Table {columns} {data} stripe border />
+```
+
+### Form Validation
+
+```svelte
+<script>
+  import { Form, FormItem, Input, Button } from 'lumen-plus';
+
+  let form = { username: '', email: '' };
+  
+  const rules = {
+    username: [{ required: true, message: 'Username is required' }],
+    email: [{ required: true, type: 'email', message: 'Valid email required' }]
+  };
+</script>
+
+<Form model={form} {rules}>
+  <FormItem label="Username" prop="username">
+    <Input bind:value={form.username} />
+  </FormItem>
+  <FormItem label="Email" prop="email">
+    <Input bind:value={form.email} />
+  </FormItem>
+  <FormItem>
+    <Button type="primary">Submit</Button>
+  </FormItem>
+</Form>
+```
+
+### Dialog
+
+```svelte
+<script>
+  import { Dialog, Button } from 'lumen-plus';
+  
+  let visible = false;
+</script>
+
+<Button onclick={() => visible = true}>Open Dialog</Button>
+
+<Dialog bind:visible title="Hello">
+  <p>This is a dialog content.</p>
+</Dialog>
+```
+
+## Theming
+
+Customize the theme using CSS variables:
+
+```css
+:root {
+  --lm-color-primary: #0062FF;
+  --lm-color-success: #31C27C;
+  --lm-color-warning: #FF974A;
+  --lm-color-danger: #FC5A5A;
+  --lm-color-info: #92929D;
+  
+  --lm-border-radius-base: 6px;
+  --lm-font-size-base: 14px;
+}
+```
+
+## Dark Mode
+
+Enable dark mode by adding the `dark` class to your root element:
+
+```html
+<html class="dark">
+  <!-- Your app -->
+</html>
+```
+
+## Related Packages
+
+- `@lumen-plus/theme-chalk` - Default theme styles (SCSS source)
+
+## Browser Support
+
+- Chrome >= 87
+- Firefox >= 78
+- Safari >= 14
+- Edge >= 88
+
+## License
+
+MIT

package/dist/Affix/Affix.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { AffixPosition } from './types'
+    import { onMount, onDestroy } from 'svelte'
+
+    interface AffixProps {
+        offset?: number
+        position?: AffixPosition
+        target?: string
+        zIndex?: number
+        onchange?: (fixed: boolean) => void
+        children?: Snippet
+        class?: string
+    }
+
+    let { offset = 0, position = 'top', target, zIndex = 100, onchange, children, class: cls = '', ...attrs }: AffixProps = $props()
+
+    let fixed = $state(false)
+    let affixRef: HTMLDivElement | null = $state(null)
+    let placeholderRef: HTMLDivElement | null = $state(null)
+    let container: HTMLElement | Window = $state(window)
+    let width = $state(0)
+    let height = $state(0)
+    let fixedTop = $state<number | undefined>(undefined)
+    let fixedBottom = $state<number | undefined>(undefined)
+
+    const updateFixed = (): void => {
+        if (!affixRef) return
+
+        const rect = (placeholderRef || affixRef).getBoundingClientRect()
+        const containerRect = container === window ? { top: 0, bottom: window.innerHeight } : (container as HTMLElement).getBoundingClientRect()
+
+        let shouldFix = false
+
+        if (position === 'top') {
+            shouldFix = rect.top - containerRect.top < offset
+            if (shouldFix) {
+                fixedTop = containerRect.top + offset
+                fixedBottom = undefined
+            }
+        } else {
+            shouldFix = containerRect.bottom - rect.bottom < offset
+            if (shouldFix) {
+                fixedBottom = window.innerHeight - containerRect.bottom + offset
+                fixedTop = undefined
+            }
+        }
+
+        if (shouldFix !== fixed) {
+            fixed = shouldFix
+            onchange?.(fixed)
+        }
+
+        if (fixed) {
+            width = rect.width
+            height = rect.height
+        }
+    }
+
+    onMount(() => {
+        if (target) {
+            const el = document.querySelector(target)
+            if (el) container = el as HTMLElement
+        }
+
+        const scrollEl = container === window ? window : container
+        scrollEl.addEventListener('scroll', updateFixed, { passive: true })
+        window.addEventListener('resize', updateFixed, { passive: true })
+        updateFixed()
+    })
+
+    onDestroy(() => {
+        const scrollEl = container === window ? window : container
+        scrollEl.removeEventListener('scroll', updateFixed)
+        window.removeEventListener('resize', updateFixed)
+    })
+
+    const classes = $derived(`lm-affix${fixed ? ' is-fixed' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const affixStyle = $derived.by(() => {
+        if (!fixed) return undefined
+        const styles: string[] = [`z-index: ${zIndex}`, `width: ${width}px`]
+        if (fixedTop !== undefined) styles.push(`top: ${fixedTop}px`)
+        if (fixedBottom !== undefined) styles.push(`bottom: ${fixedBottom}px`)
+        return styles.join('; ')
+    })
+
+    const placeholderStyle = $derived(fixed ? `width: ${width}px; height: ${height}px` : undefined)
+</script>
+
+<div bind:this={placeholderRef} style={placeholderStyle}>
+    <div bind:this={affixRef} class={classes} style={affixStyle} {...attrs}>
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+</div>

package/dist/Affix/Affix.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { AffixPosition } from './types';
+interface AffixProps {
+    offset?: number;
+    position?: AffixPosition;
+    target?: string;
+    zIndex?: number;
+    onchange?: (fixed: boolean) => void;
+    children?: Snippet;
+    class?: string;
+}
+declare const Affix: import("svelte").Component<AffixProps, {}, "">;
+type Affix = ReturnType<typeof Affix>;
+export default Affix;

package/dist/Affix/index.d.ts

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

package/dist/Affix/index.js

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

package/dist/Affix/types.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+export type AffixPosition = 'top' | 'bottom';
+export interface AffixProps {
+    offset?: number;
+    position?: AffixPosition;
+    target?: string;
+    zIndex?: number;
+    onchange?: (fixed: boolean) => void;
+    children?: Snippet;
+    class?: string;
+}

package/dist/Affix/types.js

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

package/dist/Alert/Alert.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { IconNode } from "lucide";
+  import { CheckCircle, AlertTriangle, AlertCircle, Info, X } from "lucide";
+  import Icon from "../Icon/Icon.svelte";
+
+  interface AlertProps {
+    type?: "info" | "success" | "warning" | "danger" | "error";
+    title?: string;
+    closable?: boolean;
+    showIcon?: boolean;
+    center?: boolean;
+    closeText?: string;
+    duration?: number;
+    children?: Snippet;
+    onclose?: () => void;
+    class?: string;
+  }
+
+  const ICON_MAP: Record<string, IconNode> = {
+    success: CheckCircle,
+    warning: AlertTriangle,
+    danger: AlertCircle,
+    error: AlertCircle,
+    info: Info,
+  };
+
+  let {
+    type = "info",
+    title,
+    closable = false,
+    showIcon = true,
+    center = false,
+    closeText,
+    duration = 0,
+    children,
+    onclose,
+    class: cls = "",
+    ...attrs
+  }: AlertProps = $props();
+
+  let visible = $state(true);
+
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  const classes = $derived(
+    `lm-alert lm-alert--${type}${!visible ? " is-hidden" : ""}${center ? " is-center" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  const handleClose = (): void => {
+    visible = false;
+    onclose?.();
+  };
+
+  $effect(() => {
+    if (!visible || !duration || duration <= 0) return;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(handleClose, duration);
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  });
+</script>
+
+{#if visible}
+  <div {...attrs} class={classes} role="alert">
+    {#if showIcon}
+      <div class="lm-alert__icon">
+        <Icon icon={ICON_MAP[type]} size={20} />
+      </div>
+    {/if}
+    <div class="lm-alert__content">
+      {#if title}
+        <div class="lm-alert__title">{title}</div>
+      {/if}
+      {#if children}
+        <div class="lm-alert__description">
+          {@render children()}
+        </div>
+      {/if}
+    </div>
+    {#if closable}
+      <button
+        type="button"
+        class="lm-alert__close"
+        onclick={handleClose}
+        aria-label="Close"
+      >
+        {#if closeText}
+          {closeText}
+        {:else}
+          <Icon icon={X} size={16} />
+        {/if}
+      </button>
+    {/if}
+  </div>
+{/if}

package/dist/Alert/Alert.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface AlertProps {
+    type?: 'info' | 'success' | 'warning' | 'danger' | 'error';
+    title?: string;
+    closable?: boolean;
+    showIcon?: boolean;
+    center?: boolean;
+    closeText?: string;
+    duration?: number;
+    children?: Snippet;
+    onclose?: () => void;
+    class?: string;
+}
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/Alert/index.d.ts

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

package/dist/Alert/index.js

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

package/dist/Alert/types.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+export type AlertType = 'info' | 'success' | 'warning' | 'danger' | 'error';
+export interface AlertProps {
+    type?: AlertType;
+    title?: string;
+    closable?: boolean;
+    showIcon?: boolean;
+    center?: boolean;
+    closeText?: string;
+    duration?: number;
+    children?: Snippet;
+    onclose?: () => void;
+    class?: string;
+}
+export interface AlertEmits {
+    close: void;
+}
+export interface AlertSlots {
+    icon?: any;
+    title?: any;
+    default?: any;
+    actions?: any;
+}

package/dist/Alert/types.js

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

package/dist/Autocomplete/Autocomplete.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+    import Icon from '../Icon/Icon.svelte'
+    import { X, Loader2, ChevronDown } from 'lucide'
+
+    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
+    }
+
+    let {
+        modelValue = $bindable(''),
+        placeholder = '',
+        disabled = false,
+        clearable = false,
+        loading = $bindable(false),
+        debounce = 300,
+        valueKey = 'value',
+        fetchSuggestions,
+        size = 'default',
+        showMenuArrow = true,
+        class: cls = '',
+        ...attrs
+    }: Props = $props()
+
+    let visible = $state(false)
+    let suggestions = $state<SuggestionItem[]>([])
+    let highlightIndex = $state(-1)
+    let inputRef: HTMLElement | null = $state(null)
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+    const handleInput = (e: Event): void => {
+        modelValue = (e.target as HTMLInputElement).value
+        highlightIndex = -1
+        if (debounceTimer) clearTimeout(debounceTimer)
+        debounceTimer = setTimeout(() => fetchData(modelValue), debounce)
+    }
+
+    const fetchData = async (query: string): Promise<void> => {
+        if (!fetchSuggestions) {
+            suggestions = []
+            visible = false
+            return
+        }
+        loading = true
+        try {
+            suggestions = await fetchSuggestions(query)
+            visible = suggestions.length > 0
+        } catch {
+            suggestions = []
+            visible = false
+        } finally {
+            loading = false
+        }
+    }
+
+    const handleSelect = (item: SuggestionItem): void => {
+        modelValue = item[valueKey]
+        visible = false
+        suggestions = []
+    }
+
+    const handleClear = (e: MouseEvent): void => {
+        e.stopPropagation()
+        modelValue = ''
+        suggestions = []
+        visible = false
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (!visible) return
+        if (e.key === 'ArrowDown') {
+            e.preventDefault()
+            highlightIndex = Math.min(highlightIndex + 1, suggestions.length - 1)
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault()
+            highlightIndex = Math.max(highlightIndex - 1, 0)
+        } else if (e.key === 'Enter' && highlightIndex >= 0 && suggestions[highlightIndex]) {
+            e.preventDefault()
+            handleSelect(suggestions[highlightIndex])
+        } else if (e.key === 'Escape') {
+            visible = false
+        }
+    }
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (inputRef && !inputRef.contains(e.target as Node)) visible = false
+    }
+
+    $effect(() => {
+        if (visible) document.addEventListener('click', handleClickOutside)
+        return () => document.removeEventListener('click', handleClickOutside)
+    })
+
+    const classes = $derived(['lm-autocomplete', disabled && 'is-disabled', size !== 'default' && `lm-autocomplete--${size}`, cls].filter(Boolean).join(' '))
+</script>
+
+<div bind:this={inputRef} class={classes} {...attrs}>
+    <div class="lm-autocomplete__input" class:is-focus={visible}>
+        <input
+            type="text"
+            value={modelValue}
+            {placeholder}
+            {disabled}
+            role="combobox"
+            aria-expanded={visible}
+            aria-controls="autocomplete-listbox"
+            aria-autocomplete="list"
+            oninput={handleInput}
+            onfocus={() => suggestions.length > 0 && (visible = true)}
+            onkeydown={handleKeydown}
+        />
+        {#if loading}
+            <span class="lm-autocomplete__loading" aria-label="加载中">
+                <Icon icon={Loader2} size={14} />
+            </span>
+        {:else if clearable && modelValue && !disabled}
+            <button type="button" class="lm-autocomplete__clear" onclick={handleClear} aria-label="清除">
+                <Icon icon={X} size={14} />
+            </button>
+        {:else}
+            <span class="lm-autocomplete__arrow" class:is-open={visible} aria-hidden="true">
+                <Icon icon={ChevronDown} size={14} />
+            </span>
+        {/if}
+    </div>
+
+    {#if visible && suggestions.length > 0}
+        <div class="lm-autocomplete__dropdown" role="listbox" id="autocomplete-listbox">
+            {#if showMenuArrow}
+                <div class="lm-autocomplete__menu-arrow" aria-hidden="true"></div>
+            {/if}
+
+            <ul class="lm-autocomplete__menu" role="group">
+                {#each suggestions as item, index (item[valueKey])}
+                    <li
+                        class="lm-autocomplete__item"
+                        class:is-highlighted={index === highlightIndex}
+                        role="option"
+                        aria-selected={index === highlightIndex}
+                        onmousedown={() => handleSelect(item)}
+                        onmouseenter={() => (highlightIndex = index)}
+                    >
+                        {item[valueKey]}
+                    </li>
+                {/each}
+            </ul>
+        </div>
+    {/if}
+</div>