luna-plus 0.0.5

package/dist/Slider/Slider.svelte

@@ -0,0 +1,342 @@
+<script lang="ts">
+  import { Tooltip } from "../Tooltip";
+  import type { Snippet } from "svelte";
+
+  interface SliderProps {
+    modelValue?: number | [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    range?: boolean;
+    disabled?: boolean;
+    vertical?: boolean;
+    showTooltip?: boolean;
+    formatTooltip?: (value: number) => string | number;
+    marks?: Record<number, string | Snippet>;
+    label?: Snippet;
+    class?: string;
+  }
+
+  let {
+    modelValue = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    range = false,
+    disabled = false,
+    vertical = false,
+    showTooltip = true,
+    formatTooltip = (val: number) => val,
+    marks = {},
+    label,
+    class: cls = "",
+    ...attrs
+  }: SliderProps = $props();
+
+  let trackRef: HTMLDivElement | null = $state(null);
+  let isDragging = $state(false);
+  let activeThumb = $state<0 | 1 | null>(null);
+  let trackRect: DOMRect | null = null;
+  let rafPending = false;
+  let lastMoveX: number | null = null;
+  let lastMoveY: number | null = null;
+
+  /** 限制值在范围内 */
+  const clamp = (value: number): number => Math.max(min, Math.min(max, value));
+
+  /** 对齐到步长 */
+  const snapToStep = (value: number): number => {
+    const rounded = Math.round((value - min) / step) * step + min;
+    return clamp(rounded);
+  };
+
+  /** 内部值 */
+  let currentValue = $state<number | [number, number]>(0);
+
+  // 初始化和同步外部值
+  $effect(() => {
+    if (range) {
+      currentValue = Array.isArray(modelValue)
+        ? [clamp(modelValue[0]), clamp(modelValue[1])]
+        : [min, max];
+    } else {
+      currentValue = clamp((modelValue as number) ?? min);
+    }
+  });
+
+  const classes = $derived(
+    `lm-slider${vertical ? " is-vertical" : ""}${disabled ? " is-disabled" : ""}${isDragging ? " is-dragging" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  /** 计算百分比 */
+  const percentage = $derived.by(() => {
+    const rangeSize = max - min;
+    if (range) {
+      // 确保 currentValue 是数组
+      if (!Array.isArray(currentValue)) {
+        return [0, 100];
+      }
+      const [minVal, maxVal] = currentValue;
+      return [
+        ((minVal - min) / rangeSize) * 100,
+        ((maxVal - min) / rangeSize) * 100,
+      ];
+    }
+    return (((currentValue as number) - min) / rangeSize) * 100;
+  });
+
+  /** 更新值 */
+  const updateValue = (val: number | [number, number]): void => {
+    currentValue = val;
+    modelValue = val as typeof modelValue;
+  };
+
+  /** 根据位置设置值 */
+  const setValueByClientPosition = (
+    clientX: number,
+    clientY: number,
+    thumbIndex?: 0 | 1,
+  ): void => {
+    if (!trackRef || disabled) return;
+
+    const rect = trackRect ?? trackRef.getBoundingClientRect();
+    const ratio = vertical
+      ? Math.min(1, Math.max(0, 1 - (clientY - rect.top) / rect.height))
+      : Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+
+    const snappedValue = snapToStep(min + ratio * (max - min));
+
+    if (range) {
+      let [minVal, maxVal] = currentValue as [number, number];
+      let targetThumb = thumbIndex ?? activeThumb;
+
+      if (targetThumb === null) {
+        const distToMin = Math.abs(snappedValue - minVal);
+        const distToMax = Math.abs(snappedValue - maxVal);
+        targetThumb = distToMin <= distToMax ? 0 : 1;
+        activeThumb = targetThumb;
+      }
+
+      if (targetThumb === 0) {
+        minVal = clamp(snappedValue);
+        if (minVal > maxVal) {
+          [minVal, maxVal] = [maxVal, minVal];
+          activeThumb = 1;
+        }
+      } else {
+        maxVal = clamp(snappedValue);
+        if (maxVal < minVal) {
+          [minVal, maxVal] = [maxVal, minVal];
+          activeThumb = 0;
+        }
+      }
+      updateValue([minVal, maxVal]);
+    } else {
+      updateValue(clamp(snappedValue));
+    }
+  };
+
+  /** 指针按下 */
+  const handlePointerDown = (
+    event: MouseEvent | TouchEvent,
+    thumbIndex?: 0 | 1,
+  ): void => {
+    if (disabled) return;
+    event.preventDefault();
+    isDragging = true;
+    trackRect = trackRef?.getBoundingClientRect() ?? null;
+    activeThumb = thumbIndex ?? null;
+
+    const clientX =
+      "touches" in event ? event.touches[0].clientX : event.clientX;
+    const clientY =
+      "touches" in event ? event.touches[0].clientY : event.clientY;
+    setValueByClientPosition(clientX, clientY, activeThumb ?? undefined);
+  };
+
+  /** 指针移动 */
+  const handlePointerMove = (event: MouseEvent | TouchEvent): void => {
+    if (!isDragging || disabled) return;
+    event.preventDefault();
+
+    const clientX =
+      "touches" in event ? event.touches[0].clientX : event.clientX;
+    const clientY =
+      "touches" in event ? event.touches[0].clientY : event.clientY;
+    lastMoveX = clientX;
+    lastMoveY = clientY;
+
+    if (!rafPending) {
+      rafPending = true;
+      requestAnimationFrame(() => {
+        rafPending = false;
+        if (lastMoveX !== null && lastMoveY !== null) {
+          setValueByClientPosition(lastMoveX, lastMoveY);
+        }
+      });
+    }
+  };
+
+  /** 指针抬起 */
+  const handlePointerUp = (): void => {
+    if (!isDragging) return;
+    isDragging = false;
+    activeThumb = null;
+    trackRect = null;
+    rafPending = false;
+    lastMoveX = null;
+    lastMoveY = null;
+  };
+
+  /** 轨道点击 */
+  const handleTrackClick = (event: MouseEvent): void => {
+    if (disabled || isDragging) return;
+    setValueByClientPosition(event.clientX, event.clientY);
+  };
+
+  // 全局事件监听
+  $effect(() => {
+    if (!isDragging) return;
+
+    const onMouseMove = (e: MouseEvent): void => handlePointerMove(e);
+    const onMouseUp = (): void => handlePointerUp();
+    const onTouchMove = (e: TouchEvent): void => handlePointerMove(e);
+    const onTouchEnd = (): void => handlePointerUp();
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    window.addEventListener("touchmove", onTouchMove, { passive: false });
+    window.addEventListener("touchend", onTouchEnd);
+
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("touchend", onTouchEnd);
+    };
+  });
+
+  /** 标记位置 */
+  const markPositions = $derived.by(() => {
+    const entries = Object.entries(marks);
+    if (entries.length === 0) return [];
+    const rangeSize = max - min;
+    return entries.map(([value, label]) => {
+      const numValue = Number(value);
+      return {
+        value: numValue,
+        label,
+        position: ((numValue - min) / rangeSize) * 100,
+      };
+    });
+  });
+</script>
+
+<div {...attrs} class={classes}>
+  <div
+    bind:this={trackRef}
+    class="lm-slider__track"
+    role="presentation"
+    onclick={handleTrackClick}
+  >
+    {#if range}
+      {@const percentages = percentage as [number, number]}
+      {@const [startPercent, endPercent] = percentages}
+      <div
+        class="lm-slider__fill"
+        style={vertical
+          ? `bottom: ${startPercent}%; height: ${endPercent - startPercent}%`
+          : `left: ${startPercent}%; width: ${endPercent - startPercent}%`}
+      ></div>
+
+      {#each [0, 1] as thumbIndex (thumbIndex)}
+        {@const thumbPercent = percentages[thumbIndex]}
+        {@const thumbValue = (currentValue as [number, number])[thumbIndex]}
+        <div
+          class="lm-slider__thumb"
+          class:is-active={activeThumb === thumbIndex}
+          style={vertical
+            ? `bottom: ${thumbPercent}%`
+            : `left: ${thumbPercent}%`}
+          role="slider"
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={thumbValue}
+          aria-disabled={disabled || undefined}
+          aria-label={thumbIndex === 0 ? "Minimum value" : "Maximum value"}
+          tabindex={disabled ? -1 : 0}
+          onmousedown={(e: MouseEvent) =>
+            handlePointerDown(e, thumbIndex as 0 | 1)}
+          ontouchstart={(e: TouchEvent) =>
+            handlePointerDown(e, thumbIndex as 0 | 1)}
+        >
+          <Tooltip
+            content={String(formatTooltip(thumbValue))}
+            placement={vertical ? "right" : "top"}
+            visible={showTooltip && isDragging && activeThumb === thumbIndex
+              ? true
+              : undefined}
+            disabled={!showTooltip}
+            style="width: 100%; height: 100%; display: block;"
+          >
+            <div class="lm-slider__thumb-inner"></div>
+          </Tooltip>
+        </div>
+      {/each}
+    {:else}
+      {@const fillPercent = percentage as number}
+      {@const currentVal = currentValue as number}
+      <div
+        class="lm-slider__fill"
+        style={vertical ? `height: ${fillPercent}%` : `width: ${fillPercent}%`}
+      ></div>
+
+      <div
+        class="lm-slider__thumb"
+        class:is-active={isDragging}
+        style={vertical ? `bottom: ${fillPercent}%` : `left: ${fillPercent}%`}
+        role="slider"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={currentVal}
+        aria-disabled={disabled || undefined}
+        aria-label="Slider value"
+        tabindex={disabled ? -1 : 0}
+        onmousedown={handlePointerDown}
+        ontouchstart={handlePointerDown}
+      >
+        <Tooltip
+          content={String(formatTooltip(currentVal))}
+          placement={vertical ? "right" : "top"}
+          visible={showTooltip && isDragging ? true : undefined}
+          disabled={!showTooltip}
+          style="width: 100%; height: 100%; display: block;"
+        >
+          <div class="lm-slider__thumb-inner"></div>
+        </Tooltip>
+      </div>
+    {/if}
+  </div>
+
+  {#if markPositions.length > 0}
+    <div class="lm-slider__marks">
+      {#each markPositions as mark (mark.value)}
+        <div
+          class="lm-slider__mark"
+          style={vertical
+            ? `bottom: ${mark.position}%`
+            : `left: ${mark.position}%`}
+        >
+          <div class="lm-slider__mark-point"></div>
+          <div class="lm-slider__mark-label">
+            {#if typeof mark.label === "string"}
+              {mark.label}
+            {:else}
+              {@render mark.label()}
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/Slider/Slider.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface SliderProps {
+    modelValue?: number | [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    range?: boolean;
+    disabled?: boolean;
+    vertical?: boolean;
+    showTooltip?: boolean;
+    formatTooltip?: (value: number) => string | number;
+    marks?: Record<number, string | Snippet>;
+    label?: Snippet;
+    class?: string;
+}
+declare const Slider: import("svelte").Component<SliderProps, {}, "modelValue">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/Slider/index.d.ts

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

package/dist/Slider/index.js

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

package/dist/Slider/types.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+/** Slider 属性 */
+export interface SliderProps {
+    /** 绑定值 */
+    modelValue?: number | [number, number];
+    /** 最小值 */
+    min?: number;
+    /** 最大值 */
+    max?: number;
+    /** 步长 */
+    step?: number;
+    /** 是否为范围选择 */
+    range?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否垂直 */
+    vertical?: boolean;
+    /** 是否显示提示 */
+    showTooltip?: boolean;
+    /** 格式化提示内容 */
+    formatTooltip?: (value: number) => string | number;
+    /** 标记 */
+    marks?: Record<number, string | Snippet>;
+    /** 标签 */
+    label?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Slider/types.js

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

package/dist/Space/Space.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type {
+    SpaceDirection,
+    SpaceAlign,
+    SpaceJustify,
+    SpaceSize,
+  } from "./types";
+
+  interface SpaceProps {
+    direction?: SpaceDirection;
+    align?: SpaceAlign;
+    justify?: SpaceJustify;
+    size?: SpaceSize | number | [number, number];
+    wrap?: boolean;
+    fill?: boolean;
+    fillRatio?: number;
+    spacer?: string | Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    direction = "horizontal",
+    align,
+    justify,
+    size = "default",
+    wrap = false,
+    fill = false,
+    fillRatio,
+    spacer,
+    children,
+    class: cls = "",
+    ...attrs
+  }: SpaceProps = $props();
+
+  const sizeMap: Record<string, number> = { small: 8, default: 16, large: 24 };
+
+  const gapValue = $derived.by(() => {
+    if (Array.isArray(size)) {
+      return `${size[1]}px ${size[0]}px`;
+    }
+    const g = typeof size === "number" ? size : sizeMap[size] || 16;
+    return `${g}px`;
+  });
+
+  const alignMap: Record<string, string> = {
+    start: "flex-start",
+    end: "flex-end",
+    center: "center",
+    baseline: "baseline",
+    stretch: "stretch",
+  };
+
+  const alignValue = $derived.by(() => {
+    if (align) return alignMap[align] || align;
+    return direction === "horizontal" ? "center" : "stretch";
+  });
+
+  const justifyMap: Record<string, string> = {
+    start: "flex-start",
+    end: "flex-end",
+    center: "center",
+    "space-around": "space-around",
+    "space-between": "space-between",
+    "space-evenly": "space-evenly",
+  };
+
+  const justifyValue = $derived(
+    justify ? justifyMap[justify] || justify : undefined,
+  );
+
+  const classes = $derived(
+    `lm-space lm-space--${direction}${wrap ? " is-wrap" : ""}${fill ? " is-fill" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+</script>
+
+<div
+  class={classes}
+  style:--lm-space-gap={gapValue}
+  style:--lm-space-align={alignValue}
+  style:--lm-space-justify={justifyValue}
+  style:--lm-space-fill-ratio={fillRatio}
+  {...attrs}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/Space/Space.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { SpaceDirection, SpaceAlign, SpaceJustify, SpaceSize } from './types';
+interface SpaceProps {
+    direction?: SpaceDirection;
+    align?: SpaceAlign;
+    justify?: SpaceJustify;
+    size?: SpaceSize | number | [number, number];
+    wrap?: boolean;
+    fill?: boolean;
+    fillRatio?: number;
+    spacer?: string | Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const Space: import("svelte").Component<SpaceProps, {}, "">;
+type Space = ReturnType<typeof Space>;
+export default Space;

package/dist/Space/index.d.ts

@@ -0,0 +1,4 @@
+import Space from './Space.svelte';
+export { Space };
+export type { SpaceProps, SpaceDirection, SpaceAlign, SpaceSize } from './types';
+export default Space;

package/dist/Space/index.js

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

package/dist/Space/types.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+/** Space 方向 */
+export type SpaceDirection = 'horizontal' | 'vertical';
+/** Space 对齐方式（交叉轴） */
+export type SpaceAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+/** Space 主轴对齐方式 */
+export type SpaceJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+/** Space 尺寸 */
+export type SpaceSize = 'small' | 'default' | 'large';
+/** Space 属性 */
+export interface SpaceProps {
+    /** 方向 */
+    direction?: SpaceDirection;
+    /** 交叉轴对齐方式 */
+    align?: SpaceAlign;
+    /** 主轴对齐方式 */
+    justify?: SpaceJustify;
+    /** 间距大小，可以是预设或自定义数值，也可以是 [水平, 垂直] 数组 */
+    size?: SpaceSize | number | [number, number];
+    /** 是否换行 */
+    wrap?: boolean;
+    /** 是否填充父容器 */
+    fill?: boolean;
+    /** 子元素是否自动填充 */
+    fillRatio?: number;
+    /** 分隔符 */
+    spacer?: string | Snippet;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Space/types.js

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

package/dist/Statistic/Countdown.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { onMount, onDestroy } from 'svelte'
+
+    interface CountdownProps {
+        title?: string | Snippet
+        value: number | Date
+        format?: string
+        prefix?: string | Snippet
+        suffix?: string | Snippet
+        valueStyle?: string
+        onfinish?: () => void
+        class?: string
+    }
+
+    let { title, value, format = 'HH:mm:ss', prefix, suffix, valueStyle = '', onfinish, class: cls = '', ...attrs }: CountdownProps = $props()
+
+    let remaining = $state(0)
+    let timer: ReturnType<typeof setInterval> | null = null
+
+    const targetTime = $derived(value instanceof Date ? value.getTime() : value)
+
+    const updateRemaining = (): void => {
+        const now = Date.now()
+        remaining = Math.max(0, targetTime - now)
+
+        if (remaining === 0) {
+            stopTimer()
+            onfinish?.()
+        }
+    }
+
+    const startTimer = (): void => {
+        updateRemaining()
+        timer = setInterval(updateRemaining, 1000)
+    }
+
+    const stopTimer = (): void => {
+        if (timer) {
+            clearInterval(timer)
+            timer = null
+        }
+    }
+
+    const formatTime = $derived.by(() => {
+        const totalSeconds = Math.floor(remaining / 1000)
+        const days = Math.floor(totalSeconds / 86400)
+        const hours = Math.floor((totalSeconds % 86400) / 3600)
+        const minutes = Math.floor((totalSeconds % 3600) / 60)
+        const seconds = totalSeconds % 60
+
+        return format
+            .replace('DD', String(days).padStart(2, '0'))
+            .replace('D', String(days))
+            .replace('HH', String(hours).padStart(2, '0'))
+            .replace('H', String(hours))
+            .replace('mm', String(minutes).padStart(2, '0'))
+            .replace('m', String(minutes))
+            .replace('ss', String(seconds).padStart(2, '0'))
+            .replace('s', String(seconds))
+    })
+
+    onMount(() => {
+        startTimer()
+    })
+
+    onDestroy(() => {
+        stopTimer()
+    })
+
+    const classes = $derived(`lm-statistic lm-countdown${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if title}
+        <div class="lm-statistic__title">
+            {#if typeof title === 'string'}
+                {title}
+            {:else}
+                {@render title()}
+            {/if}
+        </div>
+    {/if}
+
+    <div class="lm-statistic__content" style={valueStyle}>
+        {#if prefix}
+            <span class="lm-statistic__prefix">
+                {#if typeof prefix === 'string'}
+                    {prefix}
+                {:else}
+                    {@render prefix()}
+                {/if}
+            </span>
+        {/if}
+
+        <span class="lm-statistic__value">{formatTime}</span>
+
+        {#if suffix}
+            <span class="lm-statistic__suffix">
+                {#if typeof suffix === 'string'}
+                    {suffix}
+                {:else}
+                    {@render suffix()}
+                {/if}
+            </span>
+        {/if}
+    </div>
+</div>

package/dist/Statistic/Countdown.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface CountdownProps {
+    title?: string | Snippet;
+    value: number | Date;
+    format?: string;
+    prefix?: string | Snippet;
+    suffix?: string | Snippet;
+    valueStyle?: string;
+    onfinish?: () => void;
+    class?: string;
+}
+declare const Countdown: import("svelte").Component<CountdownProps, {}, "">;
+type Countdown = ReturnType<typeof Countdown>;
+export default Countdown;