Fix showcase API mismatches
- Select/Combobox: options → items - Listbox: add missing items prop - Slider: onChange → onValueChange - TextField: validationState="invalid" → invalid (boolean) - ToggleGroup: add required type="single" - Pagination: rewrite with page/totalPages/onPageChange + children - CommandPalette: wrap in Show instead of non-existent open prop - Toggle/ToggleGroup.Item: data-[pressed] → data-[state=on] - Tabs.Tab: data-[selected] → data-[state=active] - Wizard.StepTrigger: data-[active/completed] → data-[state=active/completed] - Listbox.Item: data-[selected] → aria-selected
This commit is contained in:
Mats Bosson
parent
b76755de76
commit
d8ac5e4cb6
@ -24,7 +24,7 @@ const TextFieldDemo = () => (
|
||||
<TextField.Input placeholder="Enter your name" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
<TextField.Description class="text-xs text-gray-400">Your full name</TextField.Description>
|
||||
</TextField>
|
||||
<TextField validationState="invalid" class="flex flex-col gap-1">
|
||||
<TextField invalid class="flex flex-col gap-1">
|
||||
<TextField.Label class="text-sm font-medium text-red-600">Email</TextField.Label>
|
||||
<TextField.Input value="not-an-email" class="border border-red-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500" />
|
||||
<TextField.ErrorMessage class="text-xs text-red-500">Invalid email address</TextField.ErrorMessage>
|
||||
@ -77,7 +77,7 @@ const SwitchDemo = () => (
|
||||
|
||||
/** Toggle demo with pressed/unpressed states. */
|
||||
const ToggleDemo = () => (
|
||||
<Toggle class="px-3 py-1.5 text-sm border rounded transition-colors data-[pressed]:bg-indigo-100 data-[pressed]:text-indigo-700 data-[pressed]:border-indigo-300 border-gray-300 hover:bg-gray-50">
|
||||
<Toggle class="px-3 py-1.5 text-sm border rounded transition-colors data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-700 data-[state=on]:border-indigo-300 border-gray-300 hover:bg-gray-50">
|
||||
Bold
|
||||
</Toggle>
|
||||
);
|
||||
|
||||
@ -31,10 +31,10 @@ function RadioGroupDemo() {
|
||||
/** ToggleGroup demo with single selection alignment. */
|
||||
function ToggleGroupDemo() {
|
||||
const content = (
|
||||
<ToggleGroup defaultValue="center" class="flex gap-1">
|
||||
<ToggleGroup.Item value="left" class="px-3 py-1.5 text-sm border rounded-l transition-colors data-[pressed]:bg-indigo-100 data-[pressed]:text-indigo-700 data-[pressed]:border-indigo-300 border-gray-300">Left</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="center" class="px-3 py-1.5 text-sm border-y transition-colors data-[pressed]:bg-indigo-100 data-[pressed]:text-indigo-700 data-[pressed]:border-indigo-300 border-gray-300">Center</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="right" class="px-3 py-1.5 text-sm border rounded-r transition-colors data-[pressed]:bg-indigo-100 data-[pressed]:text-indigo-700 data-[pressed]:border-indigo-300 border-gray-300">Right</ToggleGroup.Item>
|
||||
<ToggleGroup type="single" defaultValue="center" class="flex gap-1">
|
||||
<ToggleGroup.Item value="left" class="px-3 py-1.5 text-sm border rounded-l transition-colors data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-700 data-[state=on]:border-indigo-300 border-gray-300">Left</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="center" class="px-3 py-1.5 text-sm border-y transition-colors data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-700 data-[state=on]:border-indigo-300 border-gray-300">Center</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="right" class="px-3 py-1.5 text-sm border rounded-r transition-colors data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-700 data-[state=on]:border-indigo-300 border-gray-300">Right</ToggleGroup.Item>
|
||||
</ToggleGroup>
|
||||
);
|
||||
return content;
|
||||
@ -43,7 +43,7 @@ function ToggleGroupDemo() {
|
||||
/** Select demo with fruit dropdown. */
|
||||
function SelectDemo() {
|
||||
const content = (
|
||||
<Select options={fruits} placeholder="Pick a fruit" class="relative w-48">
|
||||
<Select items={fruits} class="relative w-48">
|
||||
<SelectTrigger class="w-full flex items-center justify-between border border-gray-300 rounded px-3 py-1.5 text-sm hover:bg-gray-50">
|
||||
<SelectValue class="text-gray-700" placeholder="Pick a fruit" />
|
||||
<span class="text-gray-400">▾</span>
|
||||
@ -63,7 +63,7 @@ function SelectDemo() {
|
||||
/** Combobox demo with searchable fruit list. */
|
||||
function ComboboxDemo() {
|
||||
const content = (
|
||||
<Combobox options={fruits} placeholder="Search fruits..." class="relative w-48">
|
||||
<Combobox items={fruits} class="relative w-48">
|
||||
<div class="flex items-center border border-gray-300 rounded">
|
||||
<ComboboxInput class="w-full px-3 py-1.5 text-sm rounded focus:outline-none" placeholder="Search fruits..." />
|
||||
<ComboboxTrigger class="px-2 text-gray-400">▾</ComboboxTrigger>
|
||||
@ -83,10 +83,10 @@ function ComboboxDemo() {
|
||||
/** Listbox demo with inline selectable items. */
|
||||
function ListboxDemo() {
|
||||
const content = (
|
||||
<Listbox class="w-48 border border-gray-200 rounded overflow-hidden">
|
||||
<Listbox items={fruits} class="w-48 border border-gray-200 rounded overflow-hidden">
|
||||
<For each={fruits}>
|
||||
{(fruit) => (
|
||||
<Listbox.Item value={fruit} class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer data-[highlighted]:bg-indigo-50 data-[selected]:bg-indigo-100 data-[selected]:text-indigo-700">{fruit}</Listbox.Item>
|
||||
<Listbox.Item value={fruit} class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer data-[highlighted]:bg-indigo-50 aria-selected:bg-indigo-100 aria-selected:text-indigo-700">{fruit}</Listbox.Item>
|
||||
)}
|
||||
</For>
|
||||
</Listbox>
|
||||
@ -103,7 +103,7 @@ function SliderDemo() {
|
||||
<span>Volume</span>
|
||||
<span>{value()}%</span>
|
||||
</div>
|
||||
<Slider value={value()} onChange={setValue} min={0} max={100} class="relative h-5 flex items-center">
|
||||
<Slider value={value()} onValueChange={setValue} min={0} max={100} class="relative h-5 flex items-center">
|
||||
<Slider.Track class="h-1.5 w-full bg-gray-200 rounded-full relative">
|
||||
<Slider.Range class="absolute h-full bg-indigo-600 rounded-full" />
|
||||
</Slider.Track>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { For } from "solid-js";
|
||||
import { createSignal, For } from "solid-js";
|
||||
import { Link } from "pettyui/link";
|
||||
import { Breadcrumbs } from "pettyui/breadcrumbs";
|
||||
import { Tabs } from "pettyui/tabs";
|
||||
@ -46,9 +46,9 @@ function TabsDemo() {
|
||||
const content = (
|
||||
<Tabs defaultValue="tab-1" class="w-full">
|
||||
<Tabs.List class="flex border-b border-gray-200">
|
||||
<Tabs.Tab value="tab-1" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[selected]:border-indigo-600 data-[selected]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Account</Tabs.Tab>
|
||||
<Tabs.Tab value="tab-2" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[selected]:border-indigo-600 data-[selected]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Password</Tabs.Tab>
|
||||
<Tabs.Tab value="tab-3" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[selected]:border-indigo-600 data-[selected]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Settings</Tabs.Tab>
|
||||
<Tabs.Tab value="tab-1" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Account</Tabs.Tab>
|
||||
<Tabs.Tab value="tab-2" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Password</Tabs.Tab>
|
||||
<Tabs.Tab value="tab-3" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Settings</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="tab-1" class="p-4 text-sm text-gray-700">Account settings content</Tabs.Panel>
|
||||
<Tabs.Panel value="tab-2" class="p-4 text-sm text-gray-700">Password settings content</Tabs.Panel>
|
||||
@ -103,7 +103,14 @@ function CollapsibleDemo() {
|
||||
|
||||
/** Pagination demo with page navigation. */
|
||||
function PaginationDemo() {
|
||||
const content = <Pagination count={50} itemsPerPage={10} class="flex items-center gap-1" />;
|
||||
const [page, setPage] = createSignal(1);
|
||||
const content = (
|
||||
<Pagination page={page()} totalPages={5} onPageChange={setPage} class="flex items-center gap-1">
|
||||
<Pagination.Previous class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Prev</Pagination.Previous>
|
||||
<Pagination.Items class="px-2 py-1 text-sm rounded cursor-pointer hover:bg-indigo-50 data-[current]:bg-indigo-600 data-[current]:text-white" />
|
||||
<Pagination.Next class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Next</Pagination.Next>
|
||||
</Pagination>
|
||||
);
|
||||
return content;
|
||||
}
|
||||
|
||||
@ -142,7 +149,7 @@ function WizardDemo() {
|
||||
{(label, i) => (
|
||||
<Wizard.Step index={i()}>
|
||||
<div class="flex items-center gap-2">
|
||||
<Wizard.StepTrigger class="w-7 h-7 rounded-full border-2 flex items-center justify-center text-xs font-medium data-[active]:border-indigo-600 data-[active]:text-indigo-600 data-[completed]:bg-indigo-600 data-[completed]:text-white data-[completed]:border-indigo-600 border-gray-300 text-gray-400">
|
||||
<Wizard.StepTrigger class="w-7 h-7 rounded-full border-2 flex items-center justify-center text-xs font-medium data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 data-[state=completed]:bg-indigo-600 data-[state=completed]:text-white data-[state=completed]:border-indigo-600 border-gray-300 text-gray-400">
|
||||
{i() + 1}
|
||||
</Wizard.StepTrigger>
|
||||
<span class="text-sm text-gray-600">{label}</span>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createSignal } from "solid-js";
|
||||
import { createSignal, Show } from "solid-js";
|
||||
import { Dialog } from "pettyui/dialog";
|
||||
import { AlertDialog } from "pettyui/alert-dialog";
|
||||
import { Drawer } from "pettyui/drawer";
|
||||
@ -155,8 +155,11 @@ function CommandPaletteDemo() {
|
||||
const [open, setOpen] = createSignal(false);
|
||||
const content = (
|
||||
<div>
|
||||
<button type="button" class={triggerBtn} onClick={() => setOpen(true)}>Open Command Palette</button>
|
||||
<CommandPalette open={open()} onOpenChange={setOpen} class={`${modalPos} bg-white border border-gray-200 rounded-lg shadow-xl z-50`}>
|
||||
<button type="button" class={triggerBtn} onClick={() => setOpen((v) => !v)}>
|
||||
{open() ? "Close" : "Open"} Command Palette
|
||||
</button>
|
||||
<Show when={open()}>
|
||||
<CommandPalette class={`${modalPos} bg-white border border-gray-200 rounded-lg shadow-xl z-50`}>
|
||||
<CommandPalette.Input placeholder="Type a command..." class="w-full px-4 py-3 text-sm border-b border-gray-200 focus:outline-none" />
|
||||
<CommandPalette.List class="max-h-60 overflow-y-auto p-2">
|
||||
<CommandPalette.Group>
|
||||
@ -167,6 +170,7 @@ function CommandPaletteDemo() {
|
||||
<CommandPalette.Empty class="px-3 py-4 text-sm text-gray-400 text-center">No results found</CommandPalette.Empty>
|
||||
</CommandPalette.List>
|
||||
</CommandPalette>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
return content;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user