luna-plus 0.0.5

package/dist/TreeSelect/index.d.ts

@@ -0,0 +1,4 @@
+import TreeSelect from './TreeSelect.svelte';
+export default TreeSelect;
+export { TreeSelect };
+export type { TreeSelectNode, TreeSelectProps, TreeSelectPropsConfig, TreeSelectSize } from './types';

package/dist/TreeSelect/index.js

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

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

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

package/dist/Upload/Upload.svelte

@@ -0,0 +1,396 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { UploadFile } from "./types";
+  import Icon from "../Icon/Icon.svelte";
+  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);
+
+  // 用于存储已生成的 uid 映射，保证同一个文件对象的 uid 稳定
+  const uidMap = new WeakMap<UploadFile, string>();
+
+  // 确保所有文件都有 uid 的派生列表
+  const normalizedFileList = $derived(
+    fileList.map((file) => {
+      if (file.uid) return file;
+      // 使用 WeakMap 确保同一个文件对象的 uid 稳定
+      let uid = uidMap.get(file);
+      if (!uid) {
+        uid = generateUid();
+        uidMap.set(file, uid);
+      }
+      return { ...file, uid };
+    }),
+  );
+
+  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 normalizedFileList 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 normalizedFileList 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/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/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/Upload/index.js

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

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

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