luna-plus 0.0.5

package/dist/Form/FormInternals.js

@@ -0,0 +1,152 @@
+import Schema from 'async-validator';
+// 验证逻辑
+export const runValidate = async ({ value, rules, trigger, setState, setValidating }) => {
+    if (!rules?.length) {
+        setState(null);
+        return { valid: true };
+    }
+    setValidating(true);
+    try {
+        const shouldFilterByTrigger = !!trigger && trigger !== 'submit';
+        const filteredRules = rules
+            .filter(Boolean)
+            .filter((r) => {
+            if (!shouldFilterByTrigger)
+                return true;
+            // ElementPlus 行为：未配置 trigger 时默认按 change 触发
+            if (!r.trigger)
+                return trigger === 'change';
+            return Array.isArray(r.trigger) ? r.trigger.includes(trigger) : r.trigger === trigger;
+        })
+            .map((r) => {
+            const mapped = { ...r };
+            if (mapped.pattern && typeof mapped.pattern === 'string') {
+                mapped.pattern = new RegExp(mapped.pattern);
+            }
+            // 将简化版 validator 适配为 async-validator 的签名
+            if (typeof mapped.validator === 'function' && typeof mapped.asyncValidator !== 'function') {
+                const userValidator = mapped.validator;
+                mapped.validator = async (_rule, v, callback) => {
+                    try {
+                        const res = userValidator(v);
+                        const result = typeof res === 'boolean' || typeof res === 'string' ? res : await res;
+                        if (result === true)
+                            return callback();
+                        if (typeof result === 'string')
+                            return callback(new Error(result));
+                        return callback(new Error(mapped.message || '格式不正确'));
+                    }
+                    catch {
+                        return callback(new Error(mapped.message || '验证失败'));
+                    }
+                };
+            }
+            // async-validator 不认识 trigger：只用于触发过滤
+            delete mapped.trigger;
+            // UI 字段不参与校验
+            delete mapped.messageType;
+            return mapped;
+        });
+        if (!filteredRules.length) {
+            setState(null);
+            return { valid: true };
+        }
+        const schema = new Schema({ __value__: filteredRules });
+        try {
+            await schema.validate({ __value__: value }, { first: true });
+            setState(null);
+            return { valid: true };
+        }
+        catch (err) {
+            const first = Array.isArray(err?.errors) ? err.errors[0] : undefined;
+            const msg = first?.message || '校验未通过';
+            const type = 'error';
+            setState({ message: msg, type });
+            return { valid: false, message: msg, type };
+        }
+    }
+    finally {
+        setValidating(false);
+    }
+};
+// 表单控制器
+export const createFormController = (opts) => {
+    const itemMap = new Map();
+    const register = (item) => {
+        if (!item.prop)
+            return;
+        itemMap.set(item.prop, item);
+    };
+    const unregister = (prop) => {
+        if (!prop)
+            return;
+        itemMap.delete(prop);
+    };
+    const resolveTargets = (props) => {
+        if (!props || !props.length)
+            return [...itemMap.values()];
+        const set = new Set(props);
+        return [...itemMap.values()].filter((i) => set.has(i.prop));
+    };
+    const validate = async (props) => {
+        const targets = resolveTargets(props);
+        try {
+            const results = await Promise.all(targets.map((i) => i.validate('submit')));
+            const valid = results.every(Boolean);
+            opts.dispatch('validate', { valid, model: opts.model });
+            return valid;
+        }
+        catch (error) {
+            opts.dispatch('validate', { valid: false, model: opts.model, error });
+            return false;
+        }
+    };
+    const validateField = async (props) => {
+        const list = Array.isArray(props) ? props : [props];
+        return validate(list);
+    };
+    const clearValidation = (props) => {
+        const targets = resolveTargets(props);
+        targets.forEach((i) => i.clearValidation());
+        opts.dispatch('clear-validation', { props: props || targets.map((i) => i.prop) });
+    };
+    const resetFields = (props) => {
+        const targets = resolveTargets(props);
+        targets.forEach((i) => i.resetField());
+        opts.dispatch('reset', { props: props || targets.map((i) => i.prop) });
+    };
+    const context = {
+        model: opts.model,
+        rules: opts.rules,
+        labelWidth: opts.labelWidth,
+        size: opts.size,
+        disabled: opts.disabled,
+        inline: opts.inline,
+        register,
+        unregister,
+    };
+    const scrollToField = (prop) => {
+        const item = itemMap.get(prop);
+        const el = item?.el;
+        if (!el)
+            return;
+        el.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' });
+    };
+    return { context, validate, validateField, clearValidation, resetFields, scrollToField };
+};
+export const mergeFormItemRules = ({ required, label, prop, itemRules = [], formRules = [] }) => {
+    const requiredRule = required
+        ? [
+            {
+                required: true,
+                message: `${label || prop}是必填项`,
+            },
+        ]
+        : [];
+    return [...requiredRule, ...itemRules, ...formRules];
+};
+export const shouldTriggerChange = (rules) => rules.some((r) => {
+    if (!r.trigger)
+        return true;
+    return Array.isArray(r.trigger) ? r.trigger.includes('change') : r.trigger === 'change';
+});

package/dist/Form/FormItem.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { FormItemProps, FormItemRule } from './types'
+    import { getContext, onDestroy } from 'svelte'
+    import { FORM_CONTEXT_KEY } from './FormContext'
+    import type { FormContext } from './FormContext'
+    import { runValidate, mergeFormItemRules, shouldTriggerChange } from './FormInternals'
+
+    interface Props extends FormItemProps {
+        children?: Snippet
+    }
+
+    let { prop, label = '', rules = [], showMessage = true, inlineMessage = false, size = undefined, required = false, class: cls = '', children, ...attrs }: Props = $props()
+
+    const form = getContext<FormContext>(FORM_CONTEXT_KEY)
+
+    let message = $state<string | undefined>(undefined)
+    let messageType = $state<'error' | 'success' | 'warning' | undefined>(undefined)
+    let validating = $state(false)
+    const currentProp = $derived(prop)
+    let originalValue = $state<any>(undefined)
+    let rootEl = $state<HTMLElement | null>(null)
+
+    const getByPath = (obj: any, path: string): any => {
+        if (!obj || !path) return undefined
+        const parts = path.split('.').filter(Boolean)
+        let cur = obj
+        for (const key of parts) {
+            if (cur == null) return undefined
+            cur = cur[key]
+        }
+        return cur
+    }
+
+    const setByPath = (obj: any, path: string, next: any): void => {
+        if (!obj || !path) return
+        const parts = path.split('.').filter(Boolean)
+        if (!parts.length) return
+        let cur = obj
+        for (let i = 0; i < parts.length - 1; i++) {
+            const key = parts[i]
+            const val = cur[key]
+            if (val == null || typeof val !== 'object') {
+                cur[key] = {}
+            }
+            cur = cur[key]
+        }
+        cur[parts[parts.length - 1]] = next
+    }
+
+    $effect(() => {
+        const v = getByPath(form?.model, currentProp)
+        if (originalValue === undefined && v !== undefined) {
+            originalValue = v
+        }
+    })
+
+    const effectiveSize = $derived(size || form?.size || 'medium')
+    const currentValue = $derived(getByPath(form?.model, currentProp))
+
+    let allRules: FormItemRule[] = $state([])
+    $effect(() => {
+        allRules = mergeFormItemRules({
+            required,
+            label,
+            prop: currentProp,
+            itemRules: Array.isArray(rules) ? rules : [],
+            formRules: Array.isArray(getByPath(form?.rules, currentProp)) ? getByPath(form?.rules, currentProp) : [],
+        })
+    })
+
+    const validate = async (trigger?: string): Promise<boolean> => {
+        if (!currentProp || !form) return true
+
+        try {
+            validating = true
+            const result = await runValidate({
+                value: currentValue,
+                rules: allRules,
+                trigger: trigger as any,
+                setState: (res) => {
+                    if (!res) {
+                        message = undefined
+                        messageType = undefined
+                    } else {
+                        message = res.message
+                        messageType = res.type
+                    }
+                },
+                setValidating: (v) => {
+                    validating = v
+                },
+            })
+
+            return result.valid
+        } catch (error) {
+            console.error(`Validation error for ${currentProp}:`, error)
+            message = '验证出错'
+            messageType = 'error'
+            return false
+        } finally {
+            validating = false
+        }
+    }
+
+    const clearValidation = (): void => {
+        message = undefined
+        messageType = undefined
+        validating = false
+    }
+
+    const resetField = (): void => {
+        if (form?.model && currentProp) setByPath(form.model, currentProp, originalValue)
+        clearValidation()
+    }
+
+    const formItemHandler = {
+        get prop() {
+            return currentProp
+        },
+        get el() {
+            return rootEl
+        },
+        validate,
+        clearValidation,
+        resetField,
+    }
+
+    $effect(() => {
+        if (form?.register && currentProp) {
+            form.register(formItemHandler)
+        }
+    })
+
+    onDestroy(() => {
+        if (form?.unregister && currentProp) {
+            form.unregister(currentProp)
+        }
+    })
+
+    const classes = $derived(
+        `lm-form-item lm-form-item--${effectiveSize}${messageType ? ` is-${messageType}` : ''}${validating ? ' is-validating' : ''}${inlineMessage ? ' is-inline-message' : ''}${form?.disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`
+    )
+
+    const labelStyle = $derived(form?.labelWidth ? `width: ${form.labelWidth}` : undefined)
+
+    const handleInputCapture = () => {
+        validate('input')
+    }
+
+    const handleChangeCapture = () => {
+        if (shouldTriggerChange(allRules)) validate('change')
+    }
+
+    const handleBlurCapture = () => {
+        validate('blur')
+    }
+</script>
+
+<div
+    class={classes}
+    bind:this={rootEl}
+    oninputcapture={handleInputCapture}
+    onchangecapture={handleChangeCapture}
+    onfocusoutcapture={handleBlurCapture}
+    {...attrs}
+>
+    {#if label}
+        <div class="lm-form-item__label" style={labelStyle}>
+            {label}
+        </div>
+    {/if}
+
+    <div class="lm-form-item__content">
+        {#if children}
+            {@render children()}
+        {/if}
+
+        {#if showMessage && (message || validating)}
+            <div
+                class="lm-form-item__message"
+                class:is-inline={inlineMessage}
+                class:is-error={messageType === 'error'}
+                class:is-success={messageType === 'success'}
+                class:is-warning={messageType === 'warning'}
+            >
+                {validating ? '校验中...' : message}
+            </div>
+        {/if}
+    </div>
+</div>

package/dist/Form/FormItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { FormItemProps } from './types';
+interface Props extends FormItemProps {
+    children?: Snippet;
+}
+declare const FormItem: import("svelte").Component<Props, {}, "">;
+type FormItem = ReturnType<typeof FormItem>;
+export default FormItem;

package/dist/Form/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Form } from './Form.svelte';
+export { default as FormItem } from './FormItem.svelte';
+export type * from './types';

package/dist/Form/index.js

@@ -0,0 +1,2 @@
+export { default as Form } from './Form.svelte';
+export { default as FormItem } from './FormItem.svelte';

package/dist/Form/types.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLFormAttributes } from 'svelte/elements';
+export type FormSize = 'small' | 'medium' | 'large';
+export type FormValidateTrigger = 'input' | 'change' | 'blur' | 'submit';
+export type FormValidateMessageType = 'error' | 'success' | 'warning';
+export interface FormItemValidateResult {
+    valid: boolean;
+    message?: string;
+    type?: FormValidateMessageType;
+}
+export interface FormItemRule {
+    required?: boolean;
+    message?: string;
+    /** 校验提示消息的类型（用于 UI 呈现） */
+    messageType?: FormValidateMessageType;
+    trigger?: FormValidateTrigger | FormValidateTrigger[];
+    /** async-validator 的 type（常见：string/number/boolean/array/object/email/url/date 等） */
+    type?: string;
+    /** 是否将仅包含空白字符视为无效（常用于 required 场景） */
+    whitespace?: boolean;
+    /** 枚举值 */
+    enum?: any[];
+    /** 字符串长度下限 */
+    min?: number;
+    /** 字符串长度上限 */
+    max?: number;
+    /** 字符串长度必须等于 */
+    len?: number;
+    /** 正则校验 */
+    pattern?: RegExp | string;
+    /** 值变换（用于校验前预处理） */
+    transform?: (value: any) => any;
+    /** 自定义校验（简化版：返回 true/false 或错误消息字符串，支持 Promise） */
+    validator?: (value: any) => boolean | string | Promise<boolean | string>;
+    /** 高级自定义校验（async-validator 原生签名） */
+    asyncValidator?: (...args: any[]) => void | Promise<void>;
+}
+export interface FormProps extends Omit<HTMLFormAttributes, 'size' | 'class' | 'children' | 'onsubmit'> {
+    model?: Record<string, any>;
+    rules?: Record<string, FormItemRule[]>;
+    inline?: boolean;
+    labelWidth?: string;
+    size?: FormSize;
+    disabled?: boolean;
+    class?: string;
+    /** 校验完成后的提交回调（Enter/原生 submit/点击 submit 均会走这里） */
+    onsubmit?: (event: CustomEvent<{
+        valid: boolean;
+        model: Record<string, any>;
+        event: SubmitEvent;
+    } & Record<string, any>>) => void;
+}
+export interface FormItemProps {
+    prop: string;
+    label?: string;
+    rules?: FormItemRule[];
+    showMessage?: boolean;
+    inlineMessage?: boolean;
+    size?: FormSize;
+    required?: boolean;
+    class?: string;
+}

package/dist/Form/types.js

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

package/dist/Icon/Icon.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { IconNode } from "lucide";
+
+  interface IconProps {
+    icon: IconNode;
+    size?: number | string;
+    color?: string;
+    strokeWidth?: number;
+    class?: string;
+  }
+
+  let {
+    icon,
+    size = 24,
+    color = "currentColor",
+    strokeWidth = 2,
+    class: cls = "",
+    ...attrs
+  }: IconProps = $props();
+
+  const sizeValue = $derived(typeof size === "number" ? `${size}px` : size);
+
+  const classes = $derived(cls ? `lm-icon ${cls}` : "lm-icon");
+
+  // lucide 图标格式为 [tagName, svgAttrs, children]
+  // children 是子元素数组: [[tag, attrs], [tag, attrs], ...]
+  type IconTuple = [string, Record<string, any>];
+  const normalized = $derived.by(() => {
+    if (!icon || !Array.isArray(icon)) return [] as ReadonlyArray<IconTuple>;
+    // lucide 格式: [tagName, svgAttrs, children]
+    // 第三个元素 (index 2) 才是子元素数组
+    const children = icon[2];
+    if (!children || !Array.isArray(children)) return [] as ReadonlyArray<IconTuple>;
+    const tuples = children.map(([tag, nodeAttrs]: any) => [
+      tag as string,
+      Object.freeze({ ...nodeAttrs }),
+    ]) as IconTuple[];
+    return Object.freeze(tuples) as ReadonlyArray<IconTuple>;
+  });
+</script>
+
+<svg
+  {...attrs}
+  class={classes}
+  xmlns="http://www.w3.org/2000/svg"
+  width={sizeValue}
+  height={sizeValue}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke={color}
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  {#each normalized as item}
+    {@const [tag, attrs] = item}
+    <svelte:element this={tag} {...attrs} />
+  {/each}
+</svg>

package/dist/Icon/Icon.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { IconNode } from 'lucide';
+interface IconProps {
+    icon: IconNode;
+    size?: number | string;
+    color?: string;
+    strokeWidth?: number;
+    class?: string;
+}
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/Icon/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './Icon.svelte';
+export { default as Icon } from './Icon.svelte';
+export type { IconProps } from './types';
+export type { IconNode } from 'lucide';
+export { Check, X, Plus, Minus, Edit, Trash2, Copy, Download, Upload, Save, Search, Filter, Settings, RefreshCw, MoreVertical, MoreHorizontal, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, ArrowLeft, ArrowRight, ArrowUp, ArrowDown, AlertCircle, AlertTriangle, CheckCircle, Info, XCircle, HelpCircle, Eye, EyeOff, Heart, Star, Home, Menu, Bell, User, Mail, Lock, Calendar, Clock, File, Folder, FileText, Image, Play, Pause, Volume2, VolumeX, } from 'lucide';

package/dist/Icon/index.js

@@ -0,0 +1,15 @@
+export { default } from './Icon.svelte';
+export { default as Icon } from './Icon.svelte';
+export { 
+// Actions
+Check, X, Plus, Minus, Edit, Trash2, Copy, Download, Upload, Save, Search, Filter, Settings, RefreshCw, MoreVertical, MoreHorizontal, 
+// Arrows
+ChevronLeft, ChevronRight, ChevronUp, ChevronDown, ArrowLeft, ArrowRight, ArrowUp, ArrowDown, 
+// Status
+AlertCircle, AlertTriangle, CheckCircle, Info, XCircle, HelpCircle, 
+// UI
+Eye, EyeOff, Heart, Star, Home, Menu, Bell, User, Mail, Lock, Calendar, Clock, 
+// Files
+File, Folder, FileText, Image, 
+// Media
+Play, Pause, Volume2, VolumeX, } from 'lucide';

package/dist/Icon/types.d.ts

@@ -0,0 +1,14 @@
+import type { IconNode } from 'lucide';
+/** Icon 属性 */
+export interface IconProps {
+    /** 图标 */
+    icon: IconNode;
+    /** 尺寸 */
+    size?: number | string;
+    /** 颜色 */
+    color?: string;
+    /** 描边宽度 */
+    strokeWidth?: number;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Icon/types.js

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

package/dist/Image/Image.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { ImageFit } from './types'
+    import Icon from '../Icon/Icon.svelte'
+    import { X, ChevronLeft, ChevronRight } from 'lucide'
+
+    interface ImageProps {
+        src?: string
+        alt?: string
+        fit?: ImageFit
+        lazy?: boolean
+        previewSrcList?: string[]
+        initialIndex?: number
+        hideOnClickModal?: boolean
+        placeholder?: Snippet
+        error?: Snippet
+        onload?: (e: Event) => void
+        onerror?: (e: Event) => void
+        children?: Snippet
+        class?: string
+    }
+
+    let {
+        src = '',
+        alt = '',
+        fit = 'fill',
+        lazy = false,
+        previewSrcList = [],
+        initialIndex = 0,
+        hideOnClickModal = false,
+        placeholder,
+        error,
+        onload,
+        onerror,
+        children,
+        class: cls = '',
+        ...attrs
+    }: ImageProps = $props()
+
+    let status = $state<'loading' | 'loaded' | 'error'>('loading')
+    let showPreview = $state(false)
+    let previewIndex = $state(0)
+
+    const hasPreview = $derived(previewSrcList.length > 0)
+    const currentPreviewSrc = $derived(previewSrcList[previewIndex] || src)
+
+    const handleLoad = (e: Event): void => {
+        status = 'loaded'
+        onload?.(e)
+    }
+
+    const handleError = (e: Event): void => {
+        status = 'error'
+        onerror?.(e)
+    }
+
+    const openPreview = (): void => {
+        if (hasPreview) {
+            previewIndex = 0
+            showPreview = true
+        }
+    }
+
+    const closePreview = (): void => {
+        showPreview = false
+    }
+
+    const prevImage = (): void => {
+        previewIndex = (previewIndex - 1 + previewSrcList.length) % previewSrcList.length
+    }
+
+    const nextImage = (): void => {
+        previewIndex = (previewIndex + 1) % previewSrcList.length
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (e.key === 'Escape') closePreview()
+        else if (e.key === 'ArrowLeft') prevImage()
+        else if (e.key === 'ArrowRight') nextImage()
+    }
+
+    $effect(() => {
+        if (src) status = 'loading'
+    })
+
+    const classes = $derived(`lm-image${hasPreview ? ' is-preview' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if status === 'loading' && placeholder}
+        <div class="lm-image__placeholder">
+            {@render placeholder()}
+        </div>
+    {/if}
+
+    {#if status === 'error' && error}
+        <div class="lm-image__error">
+            {@render error()}
+        </div>
+    {:else if hasPreview}
+        <button type="button" class="lm-image__wrapper" onclick={openPreview}>
+            <img {src} {alt} class="lm-image__inner" style="object-fit: {fit}" loading={lazy ? 'lazy' : undefined} onload={handleLoad} onerror={handleError} />
+        </button>
+    {:else}
+        <img {src} {alt} class="lm-image__inner" style="object-fit: {fit}" loading={lazy ? 'lazy' : undefined} onload={handleLoad} onerror={handleError} />
+    {/if}
+
+    {#if children}
+        {@render children()}
+    {/if}
+</div>
+
+{#if showPreview}
+    <div class="lm-image-viewer" role="dialog" aria-modal="true" tabindex="-1" onkeydown={handleKeydown} onclick={hideOnClickModal ? closePreview : undefined}>
+        <div class="lm-image-viewer__mask"></div>
+
+        <button type="button" class="lm-image-viewer__close" onclick={closePreview} aria-label="Close">
+            <Icon icon={X} size={24} color="#fff" />
+        </button>
+
+        {#if previewSrcList.length > 1}
+            <button type="button" class="lm-image-viewer__prev" onclick={prevImage} aria-label="Previous">
+                <Icon icon={ChevronLeft} size={24} color="#fff" />
+            </button>
+            <button type="button" class="lm-image-viewer__next" onclick={nextImage} aria-label="Next">
+                <Icon icon={ChevronRight} size={24} color="#fff" />
+            </button>
+        {/if}
+
+        <div class="lm-image-viewer__canvas">
+            <img src={currentPreviewSrc} alt="" class="lm-image-viewer__img" />
+        </div>
+    </div>
+{/if}