@lumen-design/calendar 0.0.2

package/dist/Calendar.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+    import Icon from '@lumen-design/icon'
+    import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide'
+
+    interface Props {
+        modelValue?: Date
+        class?: string
+    }
+
+    let { modelValue = $bindable(new Date()), class: cls = '', ...attrs }: Props = $props()
+
+    let currentDate = $state(new Date(modelValue))
+
+    const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+
+    const year = $derived(currentDate.getFullYear())
+    const month = $derived(currentDate.getMonth())
+
+    const getDaysInMonth = (y: number, m: number): number => new Date(y, m + 1, 0).getDate()
+
+    const calendarDays = $derived.by(() => {
+        const days: { date: number; month: 'prev' | 'current' | 'next'; fullDate: Date }[] = []
+        const daysInMonth = getDaysInMonth(year, month)
+        const firstDay = new Date(year, month, 1).getDay()
+        const prevMonthDays = getDaysInMonth(year, month - 1)
+
+        for (let i = firstDay - 1; i >= 0; i--) {
+            const date = prevMonthDays - i
+            days.push({ date, month: 'prev', fullDate: new Date(year, month - 1, date) })
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            days.push({ date: i, month: 'current', fullDate: new Date(year, month, i) })
+        }
+        const remaining = 42 - days.length
+        for (let i = 1; i <= remaining; i++) {
+            days.push({ date: i, month: 'next', fullDate: new Date(year, month + 1, i) })
+        }
+        return days
+    })
+
+    const today = $derived.by(() => {
+        const d = new Date()
+        return { y: d.getFullYear(), m: d.getMonth(), d: d.getDate() }
+    })
+
+    const selected = $derived({ y: modelValue.getFullYear(), m: modelValue.getMonth(), d: modelValue.getDate() })
+
+    const isToday = (date: Date): boolean => date.getDate() === today.d && date.getMonth() === today.m && date.getFullYear() === today.y
+
+    const isSelected = (date: Date): boolean => date.getDate() === selected.d && date.getMonth() === selected.m && date.getFullYear() === selected.y
+
+    const selectDate = (day: { date: number; month: 'prev' | 'current' | 'next'; fullDate: Date }): void => {
+        modelValue = day.fullDate
+        if (day.month !== 'current') currentDate = new Date(day.fullDate)
+    }
+
+    const goToToday = (): void => {
+        const t = new Date()
+        modelValue = t
+        currentDate = new Date(t)
+    }
+
+    const classes = $derived(`lm-calendar${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    <div class="lm-calendar__header">
+        <div class="lm-calendar__nav">
+            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year - 1, month, 1))} aria-label="上一年">
+                <Icon icon={ChevronsLeft} size={16} />
+            </button>
+            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year, month - 1, 1))} aria-label="上个月">
+                <Icon icon={ChevronLeft} size={14} />
+            </button>
+        </div>
+        <div class="lm-calendar__title">
+            {year}年 {month + 1}月
+        </div>
+        <div class="lm-calendar__nav">
+            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year, month + 1, 1))} aria-label="下个月">
+                <Icon icon={ChevronRight} size={14} />
+            </button>
+            <button class="lm-calendar__btn" onclick={() => (currentDate = new Date(year + 1, month, 1))} aria-label="下一年">
+                <Icon icon={ChevronsRight} size={16} />
+            </button>
+        </div>
+    </div>
+
+    <div class="lm-calendar__body">
+        <div class="lm-calendar__weekdays">
+            {#each weekDays as day}
+                <div class="lm-calendar__weekday">{day}</div>
+            {/each}
+        </div>
+        <div class="lm-calendar__days" role="grid">
+            {#each calendarDays as day}
+                <button
+                    type="button"
+                    class="lm-calendar__day"
+                    class:is-other-month={day.month !== 'current'}
+                    class:is-today={isToday(day.fullDate)}
+                    class:is-selected={isSelected(day.fullDate)}
+                    aria-pressed={isSelected(day.fullDate)}
+                    onclick={() => selectDate(day)}
+                >
+                    {day.date}
+                </button>
+            {/each}
+        </div>
+    </div>
+
+    <div class="lm-calendar__footer">
+        <button class="lm-calendar__today" onclick={goToToday}>今天</button>
+    </div>
+</div>

package/dist/index.js

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

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lumen-design/calendar",
+  "version": "0.0.2",
+  "description": "Calendar 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"
+  }
+}