@lumen-design/carousel 0.0.2

package/dist/Carousel.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { CarouselDirection, CarouselIndicatorTrigger, CarouselIndicatorPosition } from './types'
+    import { setContext, onMount, onDestroy } from 'svelte'
+    import { CAROUSEL_CONTEXT_KEY, type CarouselContext } from './CarouselContext'
+    import Icon from '@lumen-design/icon'
+    import { ChevronLeft, ChevronRight, ChevronUp, ChevronDown } from 'lucide'
+
+    interface CarouselProps {
+        initialIndex?: number
+        height?: string
+        autoplay?: boolean
+        interval?: number
+        loop?: boolean
+        direction?: CarouselDirection
+        indicatorTrigger?: CarouselIndicatorTrigger
+        indicatorPosition?: CarouselIndicatorPosition
+        arrow?: 'always' | 'hover' | 'never'
+        itemCount?: number
+        children?: Snippet
+        class?: string
+    }
+
+    let {
+        initialIndex = 0,
+        height = '300px',
+        autoplay = true,
+        interval = 3000,
+        loop = true,
+        direction = 'horizontal',
+        indicatorTrigger = 'click',
+        indicatorPosition,
+        arrow = 'hover',
+        itemCount = 0,
+        children,
+        class: cls = '',
+        ...attrs
+    }: CarouselProps = $props()
+
+    let activeIndex = $state(0)
+    let timer: ReturnType<typeof setInterval> | null = null
+    let isHovering = $state(false)
+
+    // Initialize activeIndex from prop
+    $effect(() => {
+        if (initialIndex >= 0 && initialIndex < itemCount) {
+            activeIndex = initialIndex
+        }
+    })
+
+    const context: CarouselContext = {
+        get activeIndex() {
+            return activeIndex
+        },
+        get direction() {
+            return direction
+        },
+        registerItem: () => 0,
+    }
+
+    setContext(CAROUSEL_CONTEXT_KEY, context)
+
+    const prev = (): void => {
+        if (itemCount === 0) return
+        if (activeIndex > 0) {
+            activeIndex--
+        } else if (loop) {
+            activeIndex = itemCount - 1
+        }
+    }
+
+    const next = (): void => {
+        if (itemCount === 0) return
+        if (activeIndex < itemCount - 1) {
+            activeIndex++
+        } else if (loop) {
+            activeIndex = 0
+        }
+    }
+
+    const goTo = (index: number): void => {
+        activeIndex = index
+    }
+
+    const handleIndicator = (index: number, trigger: 'hover' | 'click'): void => {
+        if (indicatorTrigger === trigger) {
+            goTo(index)
+        }
+    }
+
+    const startAutoplay = (): void => {
+        if (autoplay && !timer && itemCount > 1) {
+            timer = setInterval(next, interval)
+        }
+    }
+
+    const stopAutoplay = (): void => {
+        if (timer) {
+            clearInterval(timer)
+            timer = null
+        }
+    }
+
+    const handleMouseEnter = (): void => {
+        isHovering = true
+        stopAutoplay()
+    }
+
+    const handleMouseLeave = (): void => {
+        isHovering = false
+        startAutoplay()
+    }
+
+    onMount(() => {
+        startAutoplay()
+    })
+
+    onDestroy(() => {
+        stopAutoplay()
+    })
+
+    const showArrow = $derived(arrow === 'always' || (arrow === 'hover' && isHovering))
+    const classes = $derived(`lm-carousel lm-carousel--${direction}${indicatorPosition === 'outside' ? ' lm-carousel--indicator-outside' : ''}${cls ? ` ${cls}` : ''}`)
+
+    /** 指示器索引数组（缓存避免重复创建） */
+    const indicatorIndices = $derived(Array.from({ length: itemCount }, (_, i) => i))
+</script>
+
+<div class={classes} style="height:{height}" onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave} {...attrs}>
+    <div class="lm-carousel__container" style="transform:{direction === 'horizontal' ? `translateX(-${activeIndex * 100}%)` : `translateY(-${activeIndex * 100}%)`}">
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+
+    {#if showArrow && itemCount > 1}
+        <button type="button" class="lm-carousel__arrow lm-carousel__arrow--prev" onclick={prev} aria-label="Previous slide">
+            <Icon icon={direction === 'horizontal' ? ChevronLeft : ChevronUp} size={18} />
+        </button>
+        <button type="button" class="lm-carousel__arrow lm-carousel__arrow--next" onclick={next} aria-label="Next slide">
+            <Icon icon={direction === 'horizontal' ? ChevronRight : ChevronDown} size={18} />
+        </button>
+    {/if}
+
+    {#if indicatorPosition !== 'none' && itemCount > 1}
+        <div class="lm-carousel__indicators">
+            {#each indicatorIndices as i (i)}
+                <button
+                    type="button"
+                    class="lm-carousel__indicator{activeIndex === i ? ' is-active' : ''}"
+                    onclick={() => handleIndicator(i, 'click')}
+                    onmouseenter={() => handleIndicator(i, 'hover')}
+                    aria-label="Go to slide {i + 1}"
+                ></button>
+            {/each}
+        </div>
+    {/if}
+</div>

package/dist/CarouselContext.js

@@ -0,0 +1 @@
+export const CAROUSEL_CONTEXT_KEY = Symbol('carousel');

package/dist/CarouselItem.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { getContext } from 'svelte'
+    import { CAROUSEL_CONTEXT_KEY, type CarouselContext } from './CarouselContext'
+
+    interface CarouselItemProps {
+        name?: string
+        label?: string
+        index?: number
+        children?: Snippet
+        class?: string
+    }
+
+    let { name = '', label = '', index = 0, children, class: cls = '', ...attrs }: CarouselItemProps = $props()
+
+    const carousel = getContext<CarouselContext>(CAROUSEL_CONTEXT_KEY)
+
+    const isActive = $derived(index === carousel?.activeIndex)
+    const classes = $derived(`lm-carousel__item${isActive ? ' is-active' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>

package/dist/index.js

@@ -0,0 +1,4 @@
+import Carousel from './Carousel.svelte';
+import CarouselItem from './CarouselItem.svelte';
+export { Carousel, CarouselItem };
+export default Carousel;

package/dist/types.js

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

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lumen-design/carousel",
+  "version": "0.0.2",
+  "description": "Carousel component for Lumen UI",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist --types",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "dependencies": {
+    "@lumen-design/icon": "0.0.2",
+    "lucide": "^0.563.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}