lumen-plus 0.0.1

package/dist/components/Empty/Empty.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface EmptyProps {
+        description?: string
+        image?: Snippet
+        children?: Snippet // description slot
+        actions?: Snippet
+        class?: string
+    }
+
+    let { description = '暂无数据', image, children, actions, class: cls = '', ...attrs }: EmptyProps = $props()
+
+    const classes = $derived(cls ? `lm-empty ${cls}` : 'lm-empty')
+</script>
+
+<div {...attrs} class={classes} aria-live="polite">
+    <div class="lm-empty__image" aria-hidden="true">
+        {#if image}
+            {@render image()}
+        {:else}
+            <svg viewBox="0 0 64 41" width="64" height="41" xmlns="http://www.w3.org/2000/svg" fill="none">
+                <g opacity=".8" stroke="#D3D4DA">
+                    <path d="M63 30H1l8-10 10 6 12-16 8 10 7-6z" />
+                    <circle cx="24" cy="7" r="2" />
+                </g>
+            </svg>
+        {/if}
+    </div>
+    <div class="lm-empty__description">
+        {#if children}
+            {@render children()}
+        {:else}
+            {description}
+        {/if}
+    </div>
+    {#if actions}
+        <div class="lm-empty__actions">{@render actions()}</div>
+    {/if}
+</div>

package/dist/components/Empty/Empty.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface EmptyProps {
+    description?: string;
+    image?: Snippet;
+    children?: Snippet;
+    actions?: Snippet;
+    class?: string;
+}
+declare const Empty: import("svelte").Component<EmptyProps, {}, "">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/components/Empty/index.d.ts

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

package/dist/components/Empty/index.js

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

package/dist/components/Empty/types.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+/** Empty 属性 */
+export interface EmptyProps {
+    /** 描述文字 */
+    description?: string;
+    /** 自定义图片 */
+    image?: Snippet;
+    /** 子内容（描述插槽） */
+    children?: Snippet;
+    /** 操作区域 */
+    actions?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Empty/types.js

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

package/dist/components/Form/Form.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { FormProps } from './types'
+    import { setContext } from 'svelte'
+    import { FORM_CONTEXT_KEY } from './FormContext'
+    import { createFormController } from './FormInternals'
+
+    interface Props extends FormProps {
+        children?: Snippet
+    }
+
+    let {
+        model = $bindable({}),
+        rules = {},
+        inline = false,
+        labelWidth = '80px',
+        size = 'medium',
+        disabled = false,
+        class: cls = '',
+        onsubmit: onSubmit,
+        children,
+        ...attrs
+    }: Props = $props()
+
+    let formRef = $state<HTMLFormElement | null>(null)
+
+    const dispatch = (name: string, detail?: any): void => {
+        formRef?.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, cancelable: true }))
+    }
+
+    const {
+        context: formContext,
+        validate,
+        validateField,
+        clearValidation,
+        resetFields,
+        scrollToField,
+    } = createFormController({
+        get model() {
+            return model
+        },
+        get rules() {
+            return rules
+        },
+        get labelWidth() {
+            return labelWidth
+        },
+        get size() {
+            return size
+        },
+        get disabled() {
+            return disabled
+        },
+        get inline() {
+            return inline
+        },
+        dispatch,
+    })
+
+    setContext(FORM_CONTEXT_KEY, formContext)
+
+    const classes = $derived(`lm-form lm-form--${size}${inline ? ' lm-form--inline' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const clearValidate = (props?: string[]) => clearValidation(props)
+
+    export { validate, validateField, clearValidation, clearValidate, resetFields, scrollToField }
+
+    const VALIDATED_SUBMIT_FLAG = '__lm_form_validated_submit__'
+
+    const handleSubmit = async (event: SubmitEvent): Promise<void> => {
+        if (event instanceof CustomEvent && (event as any)?.detail?.[VALIDATED_SUBMIT_FLAG]) {
+            return
+        }
+
+        event.preventDefault()
+
+        const isValid = await validate()
+        const detail = { [VALIDATED_SUBMIT_FLAG]: true, valid: isValid, model, event }
+        onSubmit?.(new CustomEvent('submit', { detail, cancelable: true }))
+        dispatch('submit', detail)
+    }
+</script>
+
+<form bind:this={formRef} class={classes} onsubmit={handleSubmit} {...attrs}>
+    {#if children}
+        {@render children()}
+    {/if}
+</form>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { FormProps } from './types';
+interface Props extends FormProps {
+    children?: Snippet;
+}
+declare const Form: import("svelte").Component<Props, {
+    validate: (props?: string[]) => Promise<boolean>;
+    validateField: (props: string | string[]) => Promise<boolean>;
+    clearValidation: (props?: string[]) => void;
+    clearValidate: (props?: string[]) => void;
+    resetFields: (props?: string[]) => void;
+    scrollToField: (prop: string) => void;
+}, "model">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/Form/FormContext.d.ts

@@ -0,0 +1,19 @@
+import type { FormItemRule, FormValidateTrigger } from './types';
+export interface FormRegisterItem {
+    prop: string;
+    el?: HTMLElement | null;
+    validate: (trigger?: FormValidateTrigger) => Promise<boolean>;
+    clearValidation: () => void;
+    resetField: () => void;
+}
+export interface FormContext {
+    model: Record<string, any>;
+    rules: Record<string, FormItemRule[]>;
+    labelWidth?: string;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    inline?: boolean;
+    register: (item: FormRegisterItem) => void;
+    unregister: (prop: string) => void;
+}
+export declare const FORM_CONTEXT_KEY: unique symbol;

package/dist/components/Form/FormContext.js

@@ -0,0 +1 @@
+export const FORM_CONTEXT_KEY = Symbol('form-context');

package/dist/components/Form/FormInternals.d.ts

@@ -0,0 +1,40 @@
+import type { FormContext } from './FormContext';
+import type { FormItemRule, FormItemValidateResult } from './types';
+export interface RunValidateOptions {
+    value: any;
+    rules: FormItemRule[];
+    trigger?: 'input' | 'change' | 'blur' | 'submit';
+    setState: (s: {
+        message?: string;
+        type?: 'error' | 'success' | 'warning';
+    } | null) => void;
+    setValidating: (v: boolean) => void;
+}
+export interface CreateFormControllerOptions {
+    model: Record<string, any>;
+    rules: Record<string, FormItemRule[]>;
+    labelWidth?: string;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    inline?: boolean;
+    dispatch: (name: string, detail?: any) => void;
+}
+export declare const runValidate: ({ value, rules, trigger, setState, setValidating }: RunValidateOptions) => Promise<FormItemValidateResult>;
+export declare const createFormController: (opts: CreateFormControllerOptions) => {
+    context: FormContext;
+    validate: (props?: string[]) => Promise<boolean>;
+    validateField: (props: string | string[]) => Promise<boolean>;
+    clearValidation: (props?: string[]) => void;
+    resetFields: (props?: string[]) => void;
+    scrollToField: (prop: string) => void;
+};
+interface MergeRulesParams {
+    required: boolean;
+    label?: string;
+    prop: string;
+    itemRules?: FormItemRule[];
+    formRules?: FormItemRule[];
+}
+export declare const mergeFormItemRules: ({ required, label, prop, itemRules, formRules }: MergeRulesParams) => FormItemRule[];
+export declare const shouldTriggerChange: (rules: FormItemRule[]) => boolean;
+export {};

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

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

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

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