luna-plus 0.0.5

package/dist/Notification/types.d.ts

@@ -0,0 +1,26 @@
+/** 通知类型 */
+export type NotificationType = 'success' | 'warning' | 'error' | 'info';
+/** 通知位置 */
+export type NotificationPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** 通知配置选项 */
+export interface NotificationOptions {
+    /** 标题 */
+    title?: string;
+    /** 消息内容 */
+    message: string;
+    /** 类型 */
+    type?: NotificationType;
+    /** 显示时间（毫秒） */
+    duration?: number;
+    /** 显示位置 */
+    placement?: NotificationPlacement;
+}
+/** 通知项（内部使用） */
+export interface NotificationItem extends NotificationOptions {
+    /** 唯一标识 */
+    id: number;
+    /** 是否可见（用于动画） */
+    visible?: boolean;
+}
+/** 关闭通知的回调函数类型 */
+export type CloseNotificationFn = (id: number) => void;

package/dist/Notification/types.js

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

package/dist/Pagination/Pagination.svelte

@@ -0,0 +1,413 @@
+<script lang="ts">
+  import type {
+    PaginationLayout,
+    PaginationProps,
+    PaginationShowTotal,
+    PaginationSize,
+  } from "./types";
+  import Icon from "../Icon/Icon.svelte";
+  import Select from "../Select/Select.svelte";
+  import Input from "../Input/Input.svelte";
+  import {
+    ChevronLeft,
+    ChevronRight,
+    ChevronsLeft,
+    ChevronsRight,
+  } from "lucide";
+
+  let {
+    defaultCurrent = 1,
+    current = $bindable(defaultCurrent),
+
+    defaultPageSize = 10,
+    pageSize = $bindable(defaultPageSize),
+
+    total = 0,
+    pageBufferSize = 2,
+
+    disabled = false,
+    hideOnSinglePage = false,
+    size = "default" as PaginationSize,
+    background = false,
+    simple = false,
+
+    showTotal = false,
+    showSizeChanger = false,
+    pageSizeOptions = [10, 20, 50, 100],
+    showQuickJumper = false,
+
+    layout,
+
+    onChange,
+    onShowSizeChange,
+
+    prevText = "",
+    nextText = "",
+
+    class: cls = "",
+    ...attrs
+  }: PaginationProps = $props();
+
+  type PagerItem =
+    | { type: "page"; page: number }
+    | { type: "jump-prev" }
+    | { type: "jump-next" };
+
+  let jumperValue = $state("");
+  let simpleValue = $state("");
+  let hoverJumpPrev = $state(false);
+  let hoverJumpNext = $state(false);
+
+  const totalPages = $derived(
+    Math.max(1, Math.ceil((total ?? 0) / (pageSize || 1))),
+  );
+  const shouldHide = $derived(Boolean(hideOnSinglePage) && totalPages <= 1);
+
+  const resolvedLayout = $derived.by((): PaginationLayout[] => {
+    if (layout?.length) return layout;
+
+    const l: PaginationLayout[] = [];
+    if (showTotal) l.push("total");
+    if (showSizeChanger) l.push("sizes");
+    l.push("prev", "pager", "next");
+    if (showQuickJumper && !simple) l.push("jumper");
+    return l;
+  });
+
+  const sizeOptions = $derived(
+    (pageSizeOptions ?? []).map((s) => ({ value: s, label: `${s} 条/页` })),
+  );
+
+  const clampPage = (p: number): number => {
+    if (!Number.isFinite(p)) return 1;
+    return Math.min(Math.max(1, Math.trunc(p)), totalPages);
+  };
+
+  const currentRange = $derived.by((): [number, number] => {
+    const t = total ?? 0;
+    if (t <= 0) return [0, 0];
+    const start = (clampPage(current) - 1) * (pageSize || 1) + 1;
+    const end = Math.min(clampPage(current) * (pageSize || 1), t);
+    return [start, end];
+  });
+
+  const formatTotal = (cfg: boolean | PaginationShowTotal): string => {
+    const t = total ?? 0;
+    const range = currentRange;
+    if (typeof cfg === "function") return cfg(t, range);
+    return range[0] && range[1]
+      ? `共 ${t} 条（${range[0]}-${range[1]}）`
+      : `共 ${t} 条`;
+  };
+
+  const emitChange = (nextPage: number, nextSize: number): void => {
+    onChange?.(nextPage, nextSize);
+  };
+
+  const setPage = (next: number): void => {
+    if (disabled) return;
+    const nextPage = clampPage(next);
+    if (nextPage === current) return;
+    current = nextPage;
+    emitChange(nextPage, pageSize);
+  };
+
+  const setSize = (nextSize: number): void => {
+    if (disabled) return;
+    const sizeNum = Math.max(1, Math.trunc(nextSize));
+    if (sizeNum === pageSize) return;
+    pageSize = sizeNum;
+
+    const nextPage = clampPage(current);
+    current = nextPage;
+    onShowSizeChange?.(nextPage, sizeNum);
+    emitChange(nextPage, sizeNum);
+  };
+
+  const buildPagerItems = (): PagerItem[] => {
+    const pages: PagerItem[] = [];
+    const c = clampPage(current);
+    const tp = totalPages;
+
+    if (tp <= 1) return [{ type: "page", page: 1 }];
+
+    const left = Math.max(2, c - pageBufferSize);
+    const right = Math.min(tp - 1, c + pageBufferSize);
+
+    pages.push({ type: "page", page: 1 });
+
+    if (left > 2) pages.push({ type: "jump-prev" });
+    for (let p = left; p <= right; p++) pages.push({ type: "page", page: p });
+    if (right < tp - 1) pages.push({ type: "jump-next" });
+
+    pages.push({ type: "page", page: tp });
+    return pages;
+  };
+
+  const pagerItems = $derived.by(buildPagerItems);
+
+  const jumpBy = $derived(Math.max(5, pageBufferSize * 2 + 1));
+  const onJumpPrev = (): void => setPage(clampPage(current) - jumpBy);
+  const onJumpNext = (): void => setPage(clampPage(current) + jumpBy);
+
+  const onAnchorClick = (
+    e: MouseEvent,
+    action: () => void,
+    isDisabled: boolean,
+  ): void => {
+    e.preventDefault();
+    if (isDisabled) return;
+    action();
+  };
+
+  const onAnchorKeydown = (
+    e: KeyboardEvent,
+    action: () => void,
+    isDisabled: boolean,
+  ): void => {
+    if (isDisabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      action();
+    }
+  };
+
+  const handleQuickJump = (): void => {
+    const p = parseInt(jumperValue, 10);
+    if (!Number.isNaN(p)) setPage(p);
+    jumperValue = "";
+  };
+
+  const handleSimpleCommit = (): void => {
+    const p = parseInt(simpleValue, 10);
+    if (!Number.isNaN(p)) setPage(p);
+    simpleValue = "";
+  };
+
+  const isSmall = $derived(size === "small");
+  const classes = $derived(
+    `lm-pagination${isSmall ? " lm-pagination--small" : ""}${background ? " is-background" : ""}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+</script>
+
+{#if !shouldHide}
+  <div class={classes} role="navigation" aria-label="Pagination" {...attrs}>
+    {#if simple}
+      {@const prevDisabled = disabled || clampPage(current) <= 1}
+      <!-- svelte-ignore a11y_missing_attribute -->
+      <a
+        class="lm-pagination__btn lm-pagination__btn--prev"
+        role="button"
+        aria-disabled={prevDisabled}
+        tabindex={prevDisabled ? -1 : 0}
+        aria-label="Previous page"
+        onclick={(e) =>
+          onAnchorClick(e, () => setPage(clampPage(current) - 1), prevDisabled)}
+        onkeydown={(e) =>
+          onAnchorKeydown(
+            e,
+            () => setPage(clampPage(current) - 1),
+            prevDisabled,
+          )}
+      >
+        {#if prevText}
+          {prevText}
+        {:else}
+          <Icon icon={ChevronLeft} size={16} />
+        {/if}
+      </a>
+
+      <span class="lm-pagination__simple">
+        <Input
+          class="lm-pagination__simple-editor"
+          value={String(current)}
+          size={isSmall ? "small" : "medium"}
+          {disabled}
+          oninput={(e) => (simpleValue = (e.target as HTMLInputElement).value)}
+          onkeydown={(e) => e.key === "Enter" && handleSimpleCommit()}
+        />
+        <span class="lm-pagination__simple-sep">/</span>
+        <span class="lm-pagination__simple-total">{totalPages}</span>
+      </span>
+
+      {@const nextDisabled = disabled || clampPage(current) >= totalPages}
+      <!-- svelte-ignore a11y_missing_attribute -->
+      <a
+        class="lm-pagination__btn lm-pagination__btn--next"
+        role="button"
+        aria-disabled={nextDisabled}
+        tabindex={nextDisabled ? -1 : 0}
+        aria-label="Next page"
+        onclick={(e) =>
+          onAnchorClick(e, () => setPage(clampPage(current) + 1), nextDisabled)}
+        onkeydown={(e) =>
+          onAnchorKeydown(
+            e,
+            () => setPage(clampPage(current) + 1),
+            nextDisabled,
+          )}
+      >
+        {#if nextText}
+          {nextText}
+        {:else}
+          <Icon icon={ChevronRight} size={16} />
+        {/if}
+      </a>
+    {:else}
+      {#each resolvedLayout as item (item)}
+        {#if item === "total" && showTotal}
+          <span class="lm-pagination__total"
+            >{formatTotal(showTotal as boolean | PaginationShowTotal)}</span
+          >
+        {:else if item === "sizes" && showSizeChanger}
+          <Select
+            class="lm-pagination__sizes"
+            modelValue={pageSize}
+            options={sizeOptions}
+            size={isSmall ? "small" : "default"}
+            {disabled}
+            onchange={(val) => setSize(val as number)}
+          />
+        {:else if item === "prev"}
+          {@const prevDisabled = disabled || clampPage(current) <= 1}
+          <!-- svelte-ignore a11y_missing_attribute -->
+          <a
+            class="lm-pagination__btn lm-pagination__btn--prev"
+            role="button"
+            aria-disabled={prevDisabled}
+            tabindex={prevDisabled ? -1 : 0}
+            aria-label="Previous page"
+            onclick={(e) =>
+              onAnchorClick(
+                e,
+                () => setPage(clampPage(current) - 1),
+                prevDisabled,
+              )}
+            onkeydown={(e) =>
+              onAnchorKeydown(
+                e,
+                () => setPage(clampPage(current) - 1),
+                prevDisabled,
+              )}
+          >
+            {#if prevText}
+              {prevText}
+            {:else}
+              <Icon icon={ChevronLeft} size={16} />
+            {/if}
+          </a>
+        {:else if item === "pager"}
+          <ul class="lm-pagination__pager" aria-label="Pager">
+            {#each pagerItems as it (it.type === "page" ? `p:${it.page}` : it.type)}
+              {#if it.type === "page"}
+                <li>
+                  <!-- svelte-ignore a11y_missing_attribute -->
+                  <a
+                    class="lm-pagination__item{it.page === clampPage(current)
+                      ? ' is-active'
+                      : ''}"
+                    role="button"
+                    aria-disabled={disabled}
+                    tabindex={disabled ? -1 : 0}
+                    onclick={(e) =>
+                      onAnchorClick(e, () => setPage(it.page), disabled)}
+                    onkeydown={(e) =>
+                      onAnchorKeydown(e, () => setPage(it.page), disabled)}
+                    aria-current={it.page === clampPage(current)
+                      ? "page"
+                      : undefined}
+                    aria-label={`Page ${it.page}`}
+                  >
+                    {it.page}
+                  </a>
+                </li>
+              {:else if it.type === "jump-prev"}
+                <li>
+                  <!-- svelte-ignore a11y_missing_attribute -->
+                  <a
+                    class="lm-pagination__item lm-pagination__item--jump"
+                    role="button"
+                    aria-disabled={disabled}
+                    tabindex={disabled ? -1 : 0}
+                    onclick={(e) => onAnchorClick(e, onJumpPrev, disabled)}
+                    onkeydown={(e) => onAnchorKeydown(e, onJumpPrev, disabled)}
+                    onmouseenter={() => (hoverJumpPrev = true)}
+                    onmouseleave={() => (hoverJumpPrev = false)}
+                    aria-label="Jump to previous pages"
+                  >
+                    {#if hoverJumpPrev}
+                      <Icon icon={ChevronsLeft} size={16} />
+                    {:else}
+                      <span class="lm-pagination__ellipsis">•••</span>
+                    {/if}
+                  </a>
+                </li>
+              {:else if it.type === "jump-next"}
+                <li>
+                  <!-- svelte-ignore a11y_missing_attribute -->
+                  <a
+                    class="lm-pagination__item lm-pagination__item--jump"
+                    role="button"
+                    aria-disabled={disabled}
+                    tabindex={disabled ? -1 : 0}
+                    onclick={(e) => onAnchorClick(e, onJumpNext, disabled)}
+                    onkeydown={(e) => onAnchorKeydown(e, onJumpNext, disabled)}
+                    onmouseenter={() => (hoverJumpNext = true)}
+                    onmouseleave={() => (hoverJumpNext = false)}
+                    aria-label="Jump to next pages"
+                  >
+                    {#if hoverJumpNext}
+                      <Icon icon={ChevronsRight} size={16} />
+                    {:else}
+                      <span class="lm-pagination__ellipsis">•••</span>
+                    {/if}
+                  </a>
+                </li>
+              {/if}
+            {/each}
+          </ul>
+        {:else if item === "next"}
+          {@const nextDisabled = disabled || clampPage(current) >= totalPages}
+          <!-- svelte-ignore a11y_missing_attribute -->
+          <a
+            class="lm-pagination__btn lm-pagination__btn--next"
+            role="button"
+            aria-disabled={nextDisabled}
+            tabindex={nextDisabled ? -1 : 0}
+            aria-label="Next page"
+            onclick={(e) =>
+              onAnchorClick(
+                e,
+                () => setPage(clampPage(current) + 1),
+                nextDisabled,
+              )}
+            onkeydown={(e) =>
+              onAnchorKeydown(
+                e,
+                () => setPage(clampPage(current) + 1),
+                nextDisabled,
+              )}
+          >
+            {#if nextText}
+              {nextText}
+            {:else}
+              <Icon icon={ChevronRight} size={16} />
+            {/if}
+          </a>
+        {:else if item === "jumper" && showQuickJumper}
+          <span class="lm-pagination__jump">
+            跳至
+            <Input
+              class="lm-pagination__editor"
+              bind:value={jumperValue}
+              size={isSmall ? "small" : "medium"}
+              {disabled}
+              onkeydown={(e) => e.key === "Enter" && handleQuickJump()}
+            />
+            页
+          </span>
+        {/if}
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/Pagination/Pagination.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { PaginationLayout } from './types';
+interface PaginationProps {
+    currentPage?: number;
+    pageSize?: number;
+    total?: number;
+    pagerCount?: number;
+    pageSizes?: number[];
+    layout?: PaginationLayout[];
+    disabled?: boolean;
+    hideOnSinglePage?: boolean;
+    small?: boolean;
+    background?: boolean;
+    onchange?: (page: number) => void;
+    onsizechange?: (size: number) => void;
+    prevText?: string;
+    nextText?: string;
+    class?: string;
+}
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "currentPage" | "pageSize">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/Pagination/index.d.ts

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

package/dist/Pagination/index.js

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

package/dist/Pagination/types.d.ts

@@ -0,0 +1,32 @@
+/** Pagination 布局项 */
+export type PaginationLayout = 'prev' | 'pager' | 'next' | 'jumper' | 'sizes' | 'total';
+export type PaginationSize = 'default' | 'small';
+export type PaginationShowTotal = (total: number, range: [number, number]) => string;
+/** Pagination 属性 */
+export interface PaginationProps {
+    current?: number;
+    defaultCurrent?: number;
+    pageSize?: number;
+    defaultPageSize?: number;
+    /** 总条数 */
+    total?: number;
+    size?: PaginationSize;
+    pageBufferSize?: number;
+    disabled?: boolean;
+    hideOnSinglePage?: boolean;
+    background?: boolean;
+    simple?: boolean;
+    showTotal?: boolean | PaginationShowTotal;
+    showSizeChanger?: boolean;
+    pageSizeOptions?: number[];
+    showQuickJumper?: boolean;
+    layout?: PaginationLayout[];
+    onChange?: (page: number, pageSize: number) => void;
+    onShowSizeChange?: (current: number, size: number) => void;
+    /** 上一页文本 */
+    prevText?: string;
+    /** 下一页文本 */
+    nextText?: string;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Pagination/types.js

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

package/dist/PinInput/PinInput.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+    import type { PinInputProps } from './types'
+
+    let {
+        value = $bindable(''),
+        length = 6,
+        type = 'text',
+        size = 'medium',
+        disabled = false,
+        mask = false,
+        placeholder = '',
+        autoFocus = false,
+        oninput,
+        oncomplete,
+        class: className = '',
+        ...restProps
+    }: PinInputProps = $props()
+
+    let inputRefs = $state<(HTMLInputElement | null)[]>([])
+    let focusedIndex = $state<number | null>(null)
+    let internalValues = $state<string[]>([])
+    let lastSyncedValue = ''
+
+    /** 输入框索引数组（静态缓存） */
+    const inputIndices = $derived(Array.from({ length }, (_, i) => i))
+
+    // 初始化
+    $effect(() => {
+        if (internalValues.length !== length) {
+            internalValues = Array(length).fill('')
+        }
+        if (inputRefs.length !== length) {
+            inputRefs = Array(length).fill(null)
+        }
+    })
+
+    // 同步外部值
+    $effect(() => {
+        const joined = internalValues.join('')
+        if (value !== lastSyncedValue && value !== joined) {
+            const chars = value.split('')
+            const newValues = Array(length).fill('')
+            for (let i = 0; i < Math.min(chars.length, length); i++) {
+                newValues[i] = chars[i]
+            }
+            internalValues = newValues
+            lastSyncedValue = value
+        }
+    })
+
+    const isComplete = $derived(internalValues.filter(Boolean).length === length)
+    const isPassword = $derived(mask || type === 'password')
+
+    const rootClasses = $derived(
+        `lm-pin-input lm-pin-input--${size}${disabled ? ' is-disabled' : ''}${isPassword ? ' is-password' : ''}${isComplete ? ' is-complete' : ''}${className ? ` ${className}` : ''}`
+    )
+
+    /** 更新值 */
+    const updateValue = (newValues: string[]): void => {
+        internalValues = newValues
+        const newValue = newValues.join('')
+        value = newValue
+        lastSyncedValue = newValue
+    }
+
+    /** 输入处理 */
+    const handleInput = (index: number, event: Event): void => {
+        const input = event.currentTarget as HTMLInputElement
+        let inputValue = input.value
+
+        if (type === 'number') {
+            inputValue = inputValue.replace(/\D/g, '')
+        }
+
+        if (inputValue.length > 1) {
+            inputValue = inputValue.slice(-1)
+        }
+
+        const newValues = [...internalValues]
+        newValues[index] = inputValue
+        updateValue(newValues)
+
+        if (inputValue && index < length - 1) {
+            setTimeout(() => inputRefs[index + 1]?.focus(), 0)
+        }
+
+        oninput?.(value)
+        if (value.length === length) {
+            oncomplete?.(value)
+        }
+    }
+
+    /** 键盘处理 */
+    const handleKeyDown = (index: number, event: KeyboardEvent): void => {
+        const { key } = event
+
+        if (key === 'Backspace') {
+            if (!internalValues[index] && index > 0) {
+                event.preventDefault()
+                const newValues = [...internalValues]
+                newValues[index - 1] = ''
+                updateValue(newValues)
+                inputRefs[index - 1]?.focus()
+            }
+        } else if (key === 'ArrowLeft' && index > 0) {
+            event.preventDefault()
+            inputRefs[index - 1]?.focus()
+        } else if (key === 'ArrowRight' && index < length - 1) {
+            event.preventDefault()
+            inputRefs[index + 1]?.focus()
+        } else if (key === 'Delete') {
+            event.preventDefault()
+            const newValues = [...internalValues]
+            newValues[index] = ''
+            updateValue(newValues)
+        }
+    }
+
+    /** 粘贴处理 */
+    const handlePaste = (event: ClipboardEvent): void => {
+        event.preventDefault()
+        let pastedText = event.clipboardData?.getData('text') || ''
+
+        if (type === 'number') {
+            pastedText = pastedText.replace(/\D/g, '')
+        }
+
+        const chars = pastedText.slice(0, length).split('')
+        const newValues = Array(length).fill('')
+        chars.forEach((char, i) => {
+            newValues[i] = char
+        })
+        updateValue(newValues)
+
+        inputRefs[Math.min(chars.length, length - 1)]?.focus()
+
+        oninput?.(value)
+        if (chars.length === length) {
+            oncomplete?.(value)
+        }
+    }
+
+    // 自动聚焦
+    $effect(() => {
+        if (autoFocus && inputRefs[0]) {
+            inputRefs[0].focus()
+        }
+    })
+</script>
+
+<div {...restProps} class={rootClasses} role="group" aria-label="PIN input">
+    {#each inputIndices as index (index)}
+        {@const currentValue = internalValues[index] || ''}
+        {@const isFocused = focusedIndex === index}
+
+        <input
+            bind:this={inputRefs[index]}
+            type={isPassword ? 'password' : type === 'number' ? 'text' : type}
+            inputmode={type === 'number' ? 'numeric' : 'text'}
+            class="lm-pin-input__input"
+            class:is-focused={isFocused}
+            value={currentValue}
+            {placeholder}
+            {disabled}
+            maxlength="1"
+            autocomplete="off"
+            aria-label="PIN digit {index + 1} of {length}"
+            oninput={(e: Event) => handleInput(index, e)}
+            onkeydown={(e: KeyboardEvent) => handleKeyDown(index, e)}
+            onpaste={handlePaste}
+            onfocus={() => (focusedIndex = index)}
+            onblur={() => (focusedIndex = null)}
+        />
+    {/each}
+</div>

package/dist/PinInput/PinInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PinInputProps } from './types';
+declare const PinInput: import("svelte").Component<PinInputProps, {}, "value">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/PinInput/index.d.ts

@@ -0,0 +1,4 @@
+import PinInput from './PinInput.svelte';
+export { PinInput };
+export type { PinInputProps, PinInputType, PinInputSize } from './types';
+export default PinInput;