mirror of
https://github.com/kunkunsh/kunkun.git
synced 2025-04-11 17:29:44 +00:00
e719176b9c
* fix: worker template extension form submit * bump @kksh/api * update api package version
70 lines
1.9 KiB
Svelte
70 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { DateFormatter, getLocalTimeZone, today, type DateValue } from "@internationalized/date"
|
|
import { Button, ButtonModule, Calendar, Popover, Select } from "@kksh/svelte5"
|
|
import { cn } from "@kksh/ui/utils"
|
|
import CalendarIcon from "lucide-svelte/icons/calendar"
|
|
|
|
const df = new DateFormatter("en-US", {
|
|
dateStyle: "long"
|
|
})
|
|
|
|
let {
|
|
date = $bindable(),
|
|
dateValue = $bindable(),
|
|
class: className,
|
|
value = $bindable()
|
|
}: { date?: Date; dateValue?: DateValue; class?: string; value?: string } = $props()
|
|
const valueString = $derived(dateValue ? df.format(dateValue.toDate(getLocalTimeZone())) : "")
|
|
$effect(() => {
|
|
value = dateValue ? dateValue.toString() : ""
|
|
if (dateValue) {
|
|
date = dateValue?.toDate(getLocalTimeZone())
|
|
}
|
|
})
|
|
const items = [
|
|
{ value: 0, label: "Today" },
|
|
{ value: 1, label: "Tomorrow" },
|
|
{ value: 3, label: "In 3 days" },
|
|
{ value: 7, label: "In a week" }
|
|
]
|
|
</script>
|
|
|
|
<Popover.Root>
|
|
<Popover.Trigger
|
|
class={cn(
|
|
ButtonModule.buttonVariants({
|
|
variant: "outline",
|
|
class: "w-[280px] justify-start text-left font-normal"
|
|
}),
|
|
!dateValue && "text-muted-foreground",
|
|
className
|
|
)}
|
|
>
|
|
<CalendarIcon class="mr-2 size-4" />
|
|
{dateValue ? df.format(dateValue.toDate(getLocalTimeZone())) : "Pick a date"}
|
|
</Popover.Trigger>
|
|
<Popover.Content class="flex w-auto flex-col space-y-2 p-2">
|
|
<Select.Root
|
|
type="single"
|
|
value={valueString}
|
|
controlledValue
|
|
onValueChange={(v: string) => {
|
|
if (!v) return
|
|
dateValue = today(getLocalTimeZone()).add({ days: Number.parseInt(v) })
|
|
}}
|
|
>
|
|
<Select.Trigger>
|
|
{valueString}
|
|
</Select.Trigger>
|
|
<Select.Content>
|
|
{#each items as item}
|
|
<Select.Item value={`${item.value}`}>{item.label}</Select.Item>
|
|
{/each}
|
|
</Select.Content>
|
|
</Select.Root>
|
|
<div class="rounded-md border">
|
|
<Calendar.Calendar type="single" bind:value={dateValue} />
|
|
</div>
|
|
</Popover.Content>
|
|
</Popover.Root>
|