Fix showcase dependencies

- Add resolve.dedupe for solid-js to prevent duplicate context instances
- Rewrite Pagination with correct page/totalPages/onPageChange API + children
- Add Calendar inside DatePicker.Content so dates actually render
This commit is contained in:
Mats Bosson 2026-03-30 04:07:54 +07:00
parent d8ac5e4cb6
commit eea201cd12
2 changed files with 15 additions and 1 deletions

View File

@ -1,5 +1,6 @@
import { Form } from "pettyui/form"; import { Form } from "pettyui/form";
import { DatePicker } from "pettyui/date-picker"; import { DatePicker } from "pettyui/date-picker";
import { Calendar } from "pettyui/calendar";
import { ComponentDemo } from "../component-demo"; import { ComponentDemo } from "../component-demo";
/** Form demo with validation and error display. */ /** Form demo with validation and error display. */
@ -42,7 +43,19 @@ function DatePickerDemo() {
<DatePicker.Input placeholder="Pick a date" class="w-full px-3 py-1.5 text-sm rounded focus:outline-none" /> <DatePicker.Input placeholder="Pick a date" class="w-full px-3 py-1.5 text-sm rounded focus:outline-none" />
<DatePicker.Trigger class="px-2 text-gray-400 hover:text-gray-600">📅</DatePicker.Trigger> <DatePicker.Trigger class="px-2 text-gray-400 hover:text-gray-600">📅</DatePicker.Trigger>
</div> </div>
<DatePicker.Content class="absolute top-full mt-1 border border-gray-200 rounded bg-white shadow-lg z-10 p-2" /> <DatePicker.Content class="absolute top-full mt-1 border border-gray-200 rounded bg-white shadow-lg z-10 p-2">
<Calendar class="w-64">
<Calendar.Header class="flex items-center justify-between mb-2">
<Calendar.PrevButton class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 text-sm"></Calendar.PrevButton>
<Calendar.Heading class="text-sm font-semibold text-gray-800" />
<Calendar.NextButton class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 text-sm"></Calendar.NextButton>
</Calendar.Header>
<Calendar.Grid class="w-full border-collapse">
<Calendar.GridHead class="[&_th]:text-xs [&_th]:text-gray-400 [&_th]:font-medium [&_th]:pb-1 [&_th]:text-center" />
<Calendar.GridBody class="[&_td]:text-center [&_td]:p-0.5 [&_td]:text-sm [&_td]:rounded [&_td]:cursor-pointer [&_td:hover]:bg-indigo-50 [&_td[data-selected]]:bg-indigo-600 [&_td[data-selected]]:text-white [&_td[data-today]]:font-bold [&_td[data-outside-month]]:text-gray-300" />
</Calendar.Grid>
</Calendar>
</DatePicker.Content>
</DatePicker> </DatePicker>
); );
return content; return content;

View File

@ -7,6 +7,7 @@ export default defineConfig({
plugins: [solid(), tailwindcss()], plugins: [solid(), tailwindcss()],
resolve: { resolve: {
conditions: ["solid", "browser", "module", "import"], conditions: ["solid", "browser", "module", "import"],
dedupe: ["solid-js"],
alias: { alias: {
"pettyui": path.resolve(__dirname, "../core/src/components"), "pettyui": path.resolve(__dirname, "../core/src/components"),
}, },