61 lines
1.6 KiB
Svelte
61 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { Calendar as CalendarPrimitive } from "bits-ui";
|
|
import * as Calendar from "./index.js";
|
|
import { cn, type WithoutChildrenOrChild } from "@/lib/utils.js";
|
|
|
|
let {
|
|
ref = $bindable(null),
|
|
value = $bindable(),
|
|
placeholder = $bindable(),
|
|
class: className,
|
|
weekdayFormat = "short",
|
|
...restProps
|
|
}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> = $props();
|
|
</script>
|
|
|
|
<!--
|
|
Discriminated Unions + Destructing (required for bindable) do not
|
|
get along, so we shut typescript up by casting `value` to `never`.
|
|
-->
|
|
<CalendarPrimitive.Root
|
|
bind:value={value as never}
|
|
bind:ref
|
|
bind:placeholder
|
|
{weekdayFormat}
|
|
class={cn("p-3", className)}
|
|
{...restProps}
|
|
>
|
|
{#snippet children({ months, weekdays })}
|
|
<Calendar.Header>
|
|
<Calendar.PrevButton />
|
|
<Calendar.Heading />
|
|
<Calendar.NextButton />
|
|
</Calendar.Header>
|
|
<Calendar.Months>
|
|
{#each months as month (month)}
|
|
<Calendar.Grid>
|
|
<Calendar.GridHead>
|
|
<Calendar.GridRow class="flex">
|
|
{#each weekdays as weekday (weekday)}
|
|
<Calendar.HeadCell>
|
|
{weekday.slice(0, 2)}
|
|
</Calendar.HeadCell>
|
|
{/each}
|
|
</Calendar.GridRow>
|
|
</Calendar.GridHead>
|
|
<Calendar.GridBody>
|
|
{#each month.weeks as weekDates (weekDates)}
|
|
<Calendar.GridRow class="mt-2 w-full">
|
|
{#each weekDates as date (date)}
|
|
<Calendar.Cell {date} month={month.value}>
|
|
<Calendar.Day />
|
|
</Calendar.Cell>
|
|
{/each}
|
|
</Calendar.GridRow>
|
|
{/each}
|
|
</Calendar.GridBody>
|
|
</Calendar.Grid>
|
|
{/each}
|
|
</Calendar.Months>
|
|
{/snippet}
|
|
</CalendarPrimitive.Root>
|