lumen-plus 0.0.1

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

@@ -0,0 +1,98 @@
+import type { Snippet } from 'svelte';
+/** 树节点数据 */
+export interface TreeSelectNode {
+    /** 节点值 */
+    value: string | number;
+    /** 节点标签 */
+    label: string;
+    /** 子节点 */
+    children?: TreeSelectNode[];
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否叶子节点 */
+    isLeaf?: boolean;
+    /** 额外数据 */
+    [key: string]: unknown;
+}
+/** 节点属性映射 */
+export interface TreeSelectPropsConfig {
+    /** 值字段名 */
+    value?: string;
+    /** 标签字段名 */
+    label?: string;
+    /** 子节点字段名 */
+    children?: string;
+    /** 禁用字段名 */
+    disabled?: string;
+    /** 叶子节点字段名 */
+    isLeaf?: string;
+}
+/** TreeSelect 尺寸 */
+export type TreeSelectSize = 'small' | 'default' | 'large';
+/** TreeSelect 组件属性 */
+export interface TreeSelectProps {
+    /** 绑定值 */
+    modelValue?: string | number | (string | number)[];
+    /** 树数据 */
+    data?: TreeSelectNode[];
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否可清空 */
+    clearable?: boolean;
+    /** 是否多选 */
+    multiple?: boolean;
+    /** 多选时是否将选中值按文字形式展示 */
+    collapseTags?: boolean;
+    /** 折叠 Tag 时最大显示数量 */
+    maxCollapseTags?: number;
+    /** 尺寸 */
+    size?: TreeSelectSize;
+    /** 是否可搜索 */
+    filterable?: boolean;
+    /** 搜索时的过滤方法 */
+    filterMethod?: (query: string, node: TreeSelectNode) => boolean;
+    /** 无匹配时的文字 */
+    noMatchText?: string;
+    /** 无数据时的文字 */
+    noDataText?: string;
+    /** 是否显示复选框 */
+    showCheckbox?: boolean;
+    /** 在显示复选框时，是否严格遵循父子不互相关联 */
+    checkStrictly?: boolean;
+    /** 是否在点击节点时选中（仅限单选） */
+    checkOnClickNode?: boolean;
+    /** 是否默认展开所有节点 */
+    defaultExpandAll?: boolean;
+    /** 默认展开的节点 key 数组 */
+    defaultExpandedKeys?: (string | number)[];
+    /** 是否只选择叶子节点（单选时有效） */
+    leafOnly?: boolean;
+    /** 节点属性映射 */
+    props?: TreeSelectPropsConfig;
+    /** 是否高亮当前节点 */
+    highlightCurrent?: boolean;
+    /** 懒加载 */
+    lazy?: boolean;
+    /** 懒加载函数 */
+    load?: (node: TreeSelectNode, resolve: (data: TreeSelectNode[]) => void) => void;
+    /** 弹层箭头（与 Cascader 一致） */
+    showMenuArrow?: boolean;
+    /** 下拉框显示时触发 */
+    onvisiblechange?: (visible: boolean) => void;
+    /** 值变化时触发 */
+    onchange?: (value: string | number | (string | number)[] | undefined) => void;
+    /** 节点点击时触发 */
+    onnodeclick?: (node: TreeSelectNode) => void;
+    /** 清空时触发 */
+    onclear?: () => void;
+    /** 移除 Tag 时触发（多选模式） */
+    onremove?: (value: string | number) => void;
+    /** 自定义节点内容 */
+    renderLabel?: Snippet<[{
+        node: TreeSelectNode;
+    }]>;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/TreeSelect/types.js

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

package/dist/components/Upload/Upload.svelte

@@ -0,0 +1,323 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { UploadFile } from './types'
+    import Icon from '../Icon'
+    import { Upload as UploadIcon, X, File, Check, AlertCircle, Plus, Eye, Image as ImageIcon } from 'lucide'
+
+    interface UploadProps {
+        action?: string
+        headers?: Record<string, string>
+        multiple?: boolean
+        accept?: string
+        fileList?: UploadFile[]
+        disabled?: boolean
+        drag?: boolean
+        listType?: 'text' | 'picture' | 'picture-card'
+        autoUpload?: boolean
+        limit?: number
+        showFileList?: boolean
+        beforeUpload?: (file: File) => boolean | Promise<boolean>
+        onpreview?: (file: UploadFile) => void
+        onsuccess?: (response: any, file: UploadFile) => void
+        onerror?: (error: Error, file: UploadFile) => void
+        onchange?: (file: UploadFile, fileList: UploadFile[]) => void
+        onremove?: (file: UploadFile) => void
+        onexceed?: (files: File[], fileList: UploadFile[]) => void
+        children?: Snippet
+        tip?: Snippet
+        class?: string
+    }
+
+    let {
+        action = '',
+        headers = {},
+        multiple = false,
+        accept = '',
+        fileList = $bindable([]),
+        disabled = false,
+        drag = false,
+        listType = 'text',
+        autoUpload = true,
+        limit,
+        showFileList = true,
+        beforeUpload,
+        onpreview,
+        onsuccess,
+        onerror,
+        onchange,
+        onremove,
+        onexceed,
+        children,
+        tip,
+        class: cls = '',
+        ...attrs
+    }: UploadProps = $props()
+
+    let inputRef = $state<HTMLInputElement | null>(null)
+    let isDragOver = $state(false)
+
+    const generateUid = (): string => Math.random().toString(36).slice(2, 10)
+
+    const handleClick = (): void => {
+        if (disabled) return
+        inputRef?.click()
+    }
+
+    const handleFileChange = async (e: Event): Promise<void> => {
+        const target = e.target as HTMLInputElement
+        const files = target.files
+        if (!files) return
+
+        await processFiles(Array.from(files))
+        target.value = ''
+    }
+
+    const processFiles = async (files: File[]): Promise<void> => {
+        if (limit && fileList.length + files.length > limit) {
+            onexceed?.(files, fileList)
+            return
+        }
+
+        for (const file of files) {
+            if (beforeUpload) {
+                const result = await beforeUpload(file)
+                if (!result) continue
+            }
+
+            const uploadFile: UploadFile = {
+                uid: generateUid(),
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                status: 'ready',
+                percentage: 0,
+                raw: file,
+            }
+
+            // 为图片生成预览 URL
+            if (file.type.startsWith('image/')) {
+                uploadFile.url = URL.createObjectURL(file)
+            }
+
+            fileList = [...fileList, uploadFile]
+            onchange?.(uploadFile, fileList)
+
+            if (autoUpload && action) {
+                await uploadFileToServer(uploadFile)
+            }
+        }
+    }
+
+    const uploadFileToServer = async (uploadFile: UploadFile): Promise<void> => {
+        if (!uploadFile.raw) return
+
+        const formData = new FormData()
+        formData.append('file', uploadFile.raw)
+
+        uploadFile.status = 'uploading'
+        fileList = [...fileList]
+
+        try {
+            const response = await fetch(action, {
+                method: 'POST',
+                headers,
+                body: formData,
+            })
+
+            if (response.ok) {
+                const data = await response.json()
+                uploadFile.status = 'success'
+                uploadFile.percentage = 100
+                onsuccess?.(data, uploadFile)
+            } else {
+                throw new Error('Upload failed')
+            }
+        } catch (error) {
+            uploadFile.status = 'fail'
+            onerror?.(error as Error, uploadFile)
+        }
+
+        fileList = [...fileList]
+    }
+
+    const handleRemove = (file: UploadFile): void => {
+        fileList = fileList.filter((f) => f.uid !== file.uid)
+        onremove?.(file)
+    }
+
+    const handleDragOver = (e: DragEvent): void => {
+        e.preventDefault()
+        if (disabled) return
+        isDragOver = true
+    }
+
+    const handleDragLeave = (): void => {
+        isDragOver = false
+    }
+
+    const handleDrop = async (e: DragEvent): Promise<void> => {
+        e.preventDefault()
+        isDragOver = false
+        if (disabled) return
+
+        const files = e.dataTransfer?.files
+        if (files) {
+            await processFiles(Array.from(files))
+        }
+    }
+
+    const handlePreview = (file: UploadFile): void => {
+        onpreview?.(file)
+    }
+
+    const isImageFile = (file: UploadFile): boolean => {
+        return file.type?.startsWith('image/') || /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name)
+    }
+
+    const classes = $derived(`lm-upload lm-upload--${listType}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if listType === 'picture-card'}
+        <!-- Picture Card 模式：文件列表在前，上传按钮在后 -->
+        <ul class="lm-upload__list">
+            {#each fileList as file (file.uid)}
+                <li class="lm-upload__card is-{file.status}">
+                    <div class="lm-upload__card-inner">
+                        {#if file.url && isImageFile(file)}
+                            <img src={file.url} alt={file.name} class="lm-upload__card-image" />
+                        {:else}
+                            <Icon icon={File} size={32} class="lm-upload__card-file" />
+                        {/if}
+                        {#if file.status === 'uploading'}
+                            <div class="lm-upload__card-progress">
+                                <div class="lm-upload__card-progress-bar" style="width: {file.percentage}%"></div>
+                            </div>
+                        {/if}
+                        <div class="lm-upload__card-actions">
+                            {#if file.status === 'success'}
+                                <button type="button" class="lm-upload__card-action" onclick={() => handlePreview(file)}>
+                                    <Icon icon={Eye} size={16} />
+                                </button>
+                            {/if}
+                            <button type="button" class="lm-upload__card-action" onclick={() => handleRemove(file)}>
+                                <Icon icon={X} size={16} />
+                            </button>
+                        </div>
+                        {#if file.status === 'success'}
+                            <span class="lm-upload__card-status is-success">
+                                <Icon icon={Check} size={14} />
+                            </span>
+                        {:else if file.status === 'fail'}
+                            <span class="lm-upload__card-status is-fail">
+                                <Icon icon={AlertCircle} size={14} />
+                            </span>
+                        {/if}
+                    </div>
+                </li>
+            {/each}
+            <div
+                class="lm-upload__card is-trigger{isDragOver ? ' is-dragover' : ''}"
+                onclick={handleClick}
+                ondragover={drag ? handleDragOver : undefined}
+                ondragleave={drag ? handleDragLeave : undefined}
+                ondrop={drag ? handleDrop : undefined}
+                role="button"
+                tabindex="0"
+                onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && handleClick()}
+            >
+                {#if children}
+                    {@render children()}
+                {:else}
+                    <Icon icon={Plus} size={28} class="lm-upload__card-add" />
+                {/if}
+            </div>
+        </ul>
+        <input bind:this={inputRef} type="file" class="lm-upload__input" {multiple} {accept} {disabled} onchange={handleFileChange} />
+        {#if tip}
+            <div class="lm-upload__tip">
+                {@render tip()}
+            </div>
+        {/if}
+    {:else}
+        <!-- Text 和 Picture 模式 -->
+        <div
+            class="lm-upload__trigger{drag ? ' is-drag' : ''}{isDragOver ? ' is-dragover' : ''}"
+            onclick={handleClick}
+            ondragover={drag ? handleDragOver : undefined}
+            ondragleave={drag ? handleDragLeave : undefined}
+            ondrop={drag ? handleDrop : undefined}
+            role="button"
+            tabindex="0"
+            onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && handleClick()}
+        >
+            {#if children}
+                {@render children()}
+            {:else if drag}
+                <div class="lm-upload__drag-content">
+                    <Icon icon={UploadIcon} size={40} />
+                    <p>将文件拖到此处，或<em>点击上传</em></p>
+                </div>
+            {:else}
+                <button type="button" class="lm-upload__button" {disabled}>
+                    <Icon icon={UploadIcon} size={14} />
+                    <span>点击上传</span>
+                </button>
+            {/if}
+        </div>
+
+        <input bind:this={inputRef} type="file" class="lm-upload__input" {multiple} {accept} {disabled} onchange={handleFileChange} />
+
+        {#if tip}
+            <div class="lm-upload__tip">
+                {@render tip()}
+            </div>
+        {/if}
+
+        {#if showFileList && fileList.length > 0}
+            <ul class="lm-upload__list">
+                {#each fileList as file (file.uid)}
+                    <li class="lm-upload__item is-{file.status}">
+                        {#if listType === 'picture'}
+                            <div class="lm-upload__item-thumbnail">
+                                {#if file.url && isImageFile(file)}
+                                    <img src={file.url} alt={file.name} />
+                                {:else}
+                                    <Icon icon={ImageIcon} size={20} />
+                                {/if}
+                            </div>
+                        {:else}
+                            <Icon icon={File} size={14} class="lm-upload__item-icon" />
+                        {/if}
+                        <span
+                            class="lm-upload__item-name"
+                            role="button"
+                            tabindex="0"
+                            onclick={() => handlePreview(file)}
+                            onkeydown={(e: KeyboardEvent) => (e.key === 'Enter' || e.key === ' ') && handlePreview(file)}
+                        >{file.name}</span>
+                        {#if file.status === 'uploading'}
+                            <div class="lm-upload__item-progress">
+                                <div class="lm-upload__item-progress-bar" style="width: {file.percentage}%"></div>
+                            </div>
+                        {:else if file.status === 'success'}
+                            <Icon icon={Check} size={14} class="lm-upload__item-status" />
+                        {:else if file.status === 'fail'}
+                            <Icon icon={AlertCircle} size={14} class="lm-upload__item-status" />
+                        {/if}
+                        <button
+                            type="button"
+                            class="lm-upload__item-remove"
+                            onclick={(e: MouseEvent) => {
+                                e.stopPropagation()
+                                handleRemove(file)
+                            }}
+                        >
+                            <Icon icon={X} size={14} />
+                        </button>
+                    </li>
+                {/each}
+            </ul>
+        {/if}
+    {/if}
+</div>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { UploadFile } from './types';
+interface UploadProps {
+    action?: string;
+    headers?: Record<string, string>;
+    multiple?: boolean;
+    accept?: string;
+    fileList?: UploadFile[];
+    disabled?: boolean;
+    drag?: boolean;
+    listType?: 'text' | 'picture' | 'picture-card';
+    autoUpload?: boolean;
+    limit?: number;
+    showFileList?: boolean;
+    beforeUpload?: (file: File) => boolean | Promise<boolean>;
+    onpreview?: (file: UploadFile) => void;
+    onsuccess?: (response: any, file: UploadFile) => void;
+    onerror?: (error: Error, file: UploadFile) => void;
+    onchange?: (file: UploadFile, fileList: UploadFile[]) => void;
+    onremove?: (file: UploadFile) => void;
+    onexceed?: (files: File[], fileList: UploadFile[]) => void;
+    children?: Snippet;
+    tip?: Snippet;
+    class?: string;
+}
+declare const Upload: import("svelte").Component<UploadProps, {}, "fileList">;
+type Upload = ReturnType<typeof Upload>;
+export default Upload;

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

@@ -0,0 +1,4 @@
+import Upload from './Upload.svelte';
+export { Upload };
+export type { UploadProps, UploadFile, UploadStatus } from './types';
+export default Upload;

package/dist/components/Upload/index.js

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

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

@@ -0,0 +1,67 @@
+import type { Snippet } from 'svelte';
+/** Upload 文件状态 */
+export type UploadStatus = 'ready' | 'uploading' | 'success' | 'fail';
+/** Upload 文件 */
+export interface UploadFile {
+    /** 文件唯一标识 */
+    uid: string;
+    /** 文件名 */
+    name: string;
+    /** 文件大小 */
+    size?: number;
+    /** 文件类型 */
+    type?: string;
+    /** 文件状态 */
+    status: UploadStatus;
+    /** 上传进度 */
+    percentage?: number;
+    /** 文件 URL */
+    url?: string;
+    /** 原始文件 */
+    raw?: File;
+}
+/** Upload 属性 */
+export interface UploadProps {
+    /** 上传地址 */
+    action?: string;
+    /** 请求头 */
+    headers?: Record<string, string>;
+    /** 是否多选 */
+    multiple?: boolean;
+    /** 接受的文件类型 */
+    accept?: string;
+    /** 文件列表 */
+    fileList?: UploadFile[];
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否拖拽上传 */
+    drag?: boolean;
+    /** 列表类型 */
+    listType?: 'text' | 'picture' | 'picture-card';
+    /** 是否自动上传 */
+    autoUpload?: boolean;
+    /** 最大文件数 */
+    limit?: number;
+    /** 是否显示文件列表 */
+    showFileList?: boolean;
+    /** 上传前钩子 */
+    beforeUpload?: (file: File) => boolean | Promise<boolean>;
+    /** 预览文件回调 */
+    onpreview?: (file: UploadFile) => void;
+    /** 上传成功回调 */
+    onsuccess?: (response: any, file: UploadFile) => void;
+    /** 上传失败回调 */
+    onerror?: (error: Error, file: UploadFile) => void;
+    /** 文件变化回调 */
+    onchange?: (file: UploadFile, fileList: UploadFile[]) => void;
+    /** 移除文件回调 */
+    onremove?: (file: UploadFile) => void;
+    /** 超出限制回调 */
+    onexceed?: (files: File[], fileList: UploadFile[]) => void;
+    /** 子内容 */
+    children?: Snippet;
+    /** 提示内容 */
+    tip?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Upload/types.js

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