Skip to content

Commit

Permalink
feat: update Date Picker
Browse files Browse the repository at this point in the history 
fix: `Calendar` focus
  • Loading branch information
@hngngn
hngngn committed Nov 4, 2024
1 parent 793a704 commit d4aba23
Show file tree
Hide file tree
Showing 11 changed files with 784 additions and 800 deletions.
2 changes: 1 addition & 1 deletion docs/public/registry/frameworks/tailwindcss/date-picker.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/public/registry/frameworks/unocss/date-picker.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/src/config/docs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export const docsConfig: TDocsConfig = {
title: "Date Picker",
href: "/docs/components/date-picker",
items: [],
label: "Updated",
},
{
title: "Dialog",
Expand Down
31 changes: 13 additions & 18 deletions docs/src/examples/calendar-demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
DatePicker,
DatePickerContent,
DatePickerContext,
DatePickerRangeText,
DatePickerTable,
Expand All @@ -17,11 +18,11 @@ import { For } from "solid-js";

const CalendarDemo = () => {
return (
<DatePicker open closeOnSelect={false}>
<div class="rounded-md border bg-popover p-3 text-popover-foreground">
<DatePicker open>
<DatePickerContent>
<DatePickerView view="day">
<DatePickerContext>
{(api) => (
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
Expand All @@ -31,7 +32,7 @@ const CalendarDemo = () => {
<DatePickerTable>
<DatePickerTableHead>
<DatePickerTableRow>
<For each={api().weekDays}>
<For each={context().weekDays}>
{(weekDay) => (
<DatePickerTableHeader>
{weekDay.short}
Expand All @@ -41,7 +42,7 @@ const CalendarDemo = () => {
</DatePickerTableRow>
</DatePickerTableHead>
<DatePickerTableBody>
<For each={api().weeks}>
<For each={context().weeks}>
{(week) => (
<DatePickerTableRow>
<For each={week}>
Expand All @@ -62,12 +63,9 @@ const CalendarDemo = () => {
)}
</DatePickerContext>
</DatePickerView>
<DatePickerView
view="month"
class="w-[calc(var(--preference-width)-(0.75rem*2))]"
>
<DatePickerView view="month">
<DatePickerContext>
{(api) => (
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
Expand All @@ -77,7 +75,7 @@ const CalendarDemo = () => {
<DatePickerTable>
<DatePickerTableBody>
<For
each={api().getMonthsGrid({
each={context().getMonthsGrid({
columns: 4,
format: "short",
})}
Expand All @@ -102,12 +100,9 @@ const CalendarDemo = () => {
)}
</DatePickerContext>
</DatePickerView>
<DatePickerView
view="year"
class="w-[calc(var(--preference-width)-(0.75rem*2))]"
>
<DatePickerView view="year">
<DatePickerContext>
{(api) => (
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
Expand All @@ -117,7 +112,7 @@ const CalendarDemo = () => {
<DatePickerTable>
<DatePickerTableBody>
<For
each={api().getYearsGrid({
each={context().getYearsGrid({
columns: 4,
})}
>
Expand All @@ -141,7 +136,7 @@ const CalendarDemo = () => {
)}
</DatePickerContext>
</DatePickerView>
</div>
</DatePickerContent>
</DatePicker>
);
};
Expand Down
248 changes: 125 additions & 123 deletions docs/src/examples/date-picker-demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ import {
DatePicker,
DatePickerContent,
DatePickerContext,
DatePickerControl,
DatePickerInput,
DatePickerPositioner,
DatePickerRangeText,
DatePickerTable,
DatePickerTableBody,
Expand All @@ -11,6 +13,7 @@ import {
DatePickerTableHead,
DatePickerTableHeader,
DatePickerTableRow,
DatePickerTrigger,
DatePickerView,
DatePickerViewControl,
DatePickerViewTrigger,
Expand All @@ -21,132 +24,131 @@ import { Portal } from "solid-js/web";
const DatePickerDemo = () => {
return (
<DatePicker>
<DatePickerInput placeholder="Pick a date" />
<DatePickerControl>
<DatePickerInput />
<DatePickerTrigger />
</DatePickerControl>
<Portal>
<DatePickerContent>
<DatePickerView view="day">
<DatePickerContext>
{(api) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableHead>
<DatePickerTableRow>
<Index each={api().weekDays}>
{(weekDay) => (
<DatePickerTableHeader>
{weekDay().short}
</DatePickerTableHeader>
<DatePickerPositioner>
<DatePickerContent>
<DatePickerView view="day">
<DatePickerContext>
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableHead>
<DatePickerTableRow>
<Index each={context().weekDays}>
{(weekDay) => (
<DatePickerTableHeader>
{weekDay().short}
</DatePickerTableHeader>
)}
</Index>
</DatePickerTableRow>
</DatePickerTableHead>
<DatePickerTableBody>
<Index each={context().weeks}>
{(week) => (
<DatePickerTableRow>
<Index each={week()}>
{(day) => (
<DatePickerTableCell value={day()}>
<DatePickerTableCellTrigger>
{day().day}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</Index>
</DatePickerTableRow>
)}
</Index>
</DatePickerTableRow>
</DatePickerTableHead>
<DatePickerTableBody>
<Index each={api().weeks}>
{(week) => (
<DatePickerTableRow>
<Index each={week()}>
{(day) => (
<DatePickerTableCell value={day()}>
<DatePickerTableCellTrigger>
{day().day}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</Index>
</DatePickerTableRow>
)}
</Index>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
<DatePickerView
view="month"
class="w-[calc(var(--reference-width)-(0.75rem*2))]"
>
<DatePickerContext>
{(api) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableBody>
<Index
each={api().getMonthsGrid({
columns: 4,
format: "short",
})}
>
{(months) => (
<DatePickerTableRow>
<Index each={months()}>
{(month) => (
<DatePickerTableCell value={month().value}>
<DatePickerTableCellTrigger>
{month().label}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</Index>
</DatePickerTableRow>
)}
</Index>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
<DatePickerView
view="year"
class="w-[calc(var(--reference-width)-(0.75rem*2))]"
>
<DatePickerContext>
{(api) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableBody>
<Index
each={api().getYearsGrid({
columns: 4,
})}
>
{(years) => (
<DatePickerTableRow>
<Index each={years()}>
{(year) => (
<DatePickerTableCell value={year().value}>
<DatePickerTableCellTrigger>
{year().label}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</Index>
</DatePickerTableRow>
)}
</Index>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
</DatePickerContent>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
<DatePickerView view="month">
<DatePickerContext>
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableBody>
<Index
each={context().getMonthsGrid({
columns: 4,
format: "short",
})}
>
{(months) => (
<DatePickerTableRow>
<Index each={months()}>
{(month) => (
<DatePickerTableCell value={month().value}>
<DatePickerTableCellTrigger>
{month().label}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</Index>
</DatePickerTableRow>
)}
</Index>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
<DatePickerView view="year">
<DatePickerContext>
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableBody>
<Index
each={context().getYearsGrid({
columns: 4,
})}
>
{(years) => (
<DatePickerTableRow>
<Index each={years()}>
{(year) => (
<DatePickerTableCell value={year().value}>
<DatePickerTableCellTrigger>
{year().label}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</Index>
</DatePickerTableRow>
)}
</Index>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
</DatePickerContent>
</DatePickerPositioner>
</Portal>
</DatePicker>
);
Expand Down
Loading

1 comment on commit d4aba23

@vercel
Copy link

@vercel vercel bot commented on d4aba23 Nov 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

shadcn-solid – ./

www.shadcn-solid.com
shadcn-solid-hngngns-projects.vercel.app
shadcn-solid-git-main-hngngns-projects.vercel.app
shadcn-solid.com
shadcn-solid.vercel.app

Please sign in to comment.