forked from qwikifiers/qwik-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
38 changed files
with
921 additions
and
928 deletions.
There are no files selected for viewing
28 changes: 28 additions & 0 deletions
28
apps/website/src/routes/docs/headless/checkbox/examples/checklist.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { component$ } from '@builder.io/qwik'; | ||
|
|
||
| import { Checklist } from '@qwik-ui/headless'; | ||
|
|
||
| export default component$(() => { | ||
| return ( | ||
| <Checklist.Root initialStates={[false, false, false]}> | ||
| <Checklist.SelectAll class="flex items-center justify-center border-2 p-2"> | ||
| <div class="flex items-center justify-center border-2 p-2"> | ||
| <Checklist.ItemIndicator>✅</Checklist.ItemIndicator> | ||
| </div>{' '} | ||
| Select All | ||
| </Checklist.SelectAll> | ||
|
|
||
| {Array.from({ length: 2 }, (_, index) => { | ||
| const uniqueKey = `cl-${index}-${Date.now()}`; | ||
| return ( | ||
| <Checklist.Item key={uniqueKey} _index={index}> | ||
| <div class="flex items-center justify-center border-2 p-2"> | ||
| <Checklist.ItemIndicator>✅</Checklist.ItemIndicator> | ||
| </div> | ||
| {`item ${index}`} | ||
| </Checklist.Item> | ||
| ); | ||
| })} | ||
| </Checklist.Root> | ||
| ); | ||
| }); |
2 changes: 1 addition & 1 deletion
2
apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 13 additions & 9 deletions
22
apps/website/src/routes/docs/headless/checkbox/examples/hero.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,18 @@ | ||
| import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; | ||
| import { component$, useSignal } from '@builder.io/qwik'; | ||
| import { Checkbox } from '@qwik-ui/headless'; | ||
| export default component$(() => { | ||
| const isCheckedSig = useSignal(false); | ||
|
|
||
| return ( | ||
| <> | ||
| <Checkbox.Root id="test" class="flex items-center gap-3 border-2 border-black p-2 "> | ||
| <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600"> | ||
| ✅ | ||
| </Checkbox.Indicator> | ||
| I have read the README | ||
| </Checkbox.Root> | ||
| </> | ||
| <Checkbox.Root | ||
| bind:checked={isCheckedSig} | ||
| id="test" | ||
| class="flex items-center gap-3 border-2 border-black p-2" | ||
| > | ||
| <div class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600"> | ||
| <Checkbox.Indicator>✅</Checkbox.Indicator> | ||
| </div> | ||
| <p> I have read the README</p> | ||
| </Checkbox.Root> | ||
| ); | ||
| }); |
77 changes: 40 additions & 37 deletions
77
apps/website/src/routes/docs/headless/checkbox/examples/pizza.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,42 @@ | ||
| import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; | ||
| import { Checkbox, Checklist } from '@qwik-ui/headless'; | ||
| const toppingNames = ['hot peppers', 'ham', 'pineaple', 'mushroom']; | ||
| const toppingImages = ['🌶️', '🍗', '🍍', '🍄']; | ||
| export default component$(() => { | ||
| return ( | ||
| <> | ||
| <h3 id="pizza-toppings">Pizza toppings</h3> | ||
| <Checklist.Root ariaLabeledBy="pizza-toppings" class="flex flex-col gap-4"> | ||
| <Checkbox.Root | ||
| class="flex items-center gap-3 border-2 border-black p-2" | ||
| checklist={true} | ||
| > | ||
| <Checklist.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600"> | ||
| <div q:slot="true" id="true-img"> | ||
| 🍕 | ||
| </div> | ||
| // import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; | ||
| // import { Checkbox, Checklist } from '@qwik-ui/headless'; | ||
| // const toppingNames = ['hot peppers', 'ham', 'pineaple', 'mushroom']; | ||
| // const toppingImages = ['🌶️', '🍗', '🍍', '🍄']; | ||
| // export default component$(() => { | ||
| // return ( | ||
| // <> | ||
| // <h3 id="pizza-toppings">Pizza toppings</h3> | ||
| // <Checklist.Root | ||
| // ariaLabeledBy="pizza-toppings" | ||
| // class="flex flex-col gap-4" | ||
| // > | ||
| // <Checkbox.Root | ||
| // class="flex items-center gap-3 border-2 border-black p-2" | ||
| // checklist={true} | ||
| // > | ||
| // <Checklist.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600"> | ||
| // <div q:slot="true" id="true-img"> | ||
| // 🍕 | ||
| // </div> | ||
|
|
||
| <div q:slot="mixed" id="mixed-img"> | ||
| ➖ | ||
| </div> | ||
| </Checklist.Indicator> | ||
| Pick all toppings | ||
| </Checkbox.Root> | ||
| // <div q:slot="mixed" id="mixed-img"> | ||
| // ➖ | ||
| // </div> | ||
| // </Checklist.Indicator> | ||
| // Pick all toppings | ||
| // </Checkbox.Root> | ||
|
|
||
| {toppingNames.map((name, i) => { | ||
| return ( | ||
| <Checkbox.Root class="ml-8 flex items-center gap-3 border-2 border-black p-2"> | ||
| <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600"> | ||
| {toppingImages[i]} | ||
| </Checkbox.Indicator> | ||
| {name} | ||
| </Checkbox.Root> | ||
| ); | ||
| })} | ||
| </Checklist.Root> | ||
| </> | ||
| ); | ||
| }); | ||
| // {toppingNames.map((name, i) => { | ||
| // return ( | ||
| // <Checkbox.Root class="ml-8 flex items-center gap-3 border-2 border-black p-2"> | ||
| // <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600"> | ||
| // {toppingImages[i]} | ||
| // </Checkbox.Indicator> | ||
| // {name} | ||
| // </Checkbox.Root> | ||
| // ); | ||
| // })} | ||
| // </Checklist.Root> | ||
| // </> | ||
| // ); | ||
| // }); |
27 changes: 27 additions & 0 deletions
27
apps/website/src/routes/docs/headless/checkbox/examples/reactive.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { component$, useSignal } from '@builder.io/qwik'; | ||
| import { Checkbox } from '@qwik-ui/headless'; | ||
| export default component$(() => { | ||
| const isCheckedSig = useSignal(false); | ||
|
|
||
| return ( | ||
| <> | ||
| <Checkbox.Root | ||
| bind:checked={isCheckedSig} | ||
| id="test" | ||
| class="flex items-center gap-3 border-2 border-black p-2" | ||
| > | ||
| <div class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600"> | ||
| <Checkbox.Indicator>✅</Checkbox.Indicator> | ||
| </div> | ||
| <p> I have read the README</p> | ||
| </Checkbox.Root> | ||
| <button | ||
| type="button" | ||
| // biome-ignore lint/suspicious/noAssignInExpressions: <explanation> | ||
| onClick$={() => (isCheckedSig.value = !isCheckedSig.value)} | ||
| > | ||
| Check the checkbox above | ||
| </button> | ||
| </> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 23 additions & 31 deletions
54
apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,28 @@ | ||
| import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; | ||
| import { Checkbox, Checklist } from '@qwik-ui/headless'; | ||
| import { component$ } from '@builder.io/qwik'; | ||
|
|
||
| import { Checklist } from '@qwik-ui/headless'; | ||
|
|
||
| export default component$(() => { | ||
| const firstUserSig = useSignal(false); | ||
| const secondUserSig = useSignal(false); | ||
| return ( | ||
| <> | ||
| <h3 id="test123">Pick a cat</h3> | ||
| <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123"> | ||
| <Checkbox.Root | ||
| class="flex items-center gap-3 bg-slate-900 p-2 text-white" | ||
| checklist={true} | ||
| > | ||
| <Checkbox.Indicator class=" flex w-[80px] justify-center bg-white p-3"> | ||
| ✅ | ||
| </Checkbox.Indicator> | ||
| <p>Controlls all</p> | ||
| </Checkbox.Root> | ||
| <Checkbox.Root | ||
| bind:checked={firstUserSig} | ||
| class="flex items-center gap-3 bg-slate-900 pr-2 text-white" | ||
| > | ||
| <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator> | ||
| <p>No other stuff is needed here</p> | ||
| </Checkbox.Root> | ||
| <Checklist.Root initialStates={[true, false, false]}> | ||
| <Checklist.SelectAll class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2"> | ||
| <div class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2"> | ||
| <Checklist.ItemIndicator>✅</Checklist.ItemIndicator> | ||
| </div>{' '} | ||
| Select All | ||
| </Checklist.SelectAll> | ||
|
|
||
| <Checkbox.Root bind:checked={secondUserSig} class="bg-slate-900 text-white"> | ||
| <div class="flex items-center gap-3"> | ||
| <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator> | ||
| <p>No other stuff is needed here</p> | ||
| </div> | ||
| </Checkbox.Root> | ||
| </Checklist.Root> | ||
| </> | ||
| {Array.from({ length: 2 }, (_, index) => { | ||
| const uniqueKey = `cl-${index}-${Date.now()}`; | ||
| return ( | ||
| <Checklist.Item key={uniqueKey} _index={index}> | ||
| <div class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2"> | ||
| <Checklist.ItemIndicator>✅</Checklist.ItemIndicator> | ||
| </div> | ||
| {`item ${index}`} | ||
| </Checklist.Item> | ||
| ); | ||
| })} | ||
| </Checklist.Root> | ||
| ); | ||
| }); |
85 changes: 45 additions & 40 deletions
85
apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-mixed.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,46 @@ | ||
| import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; | ||
| import { Checkbox, Checklist } from '@qwik-ui/headless'; | ||
| export default component$(() => { | ||
| const firstUserSig = useSignal(false); | ||
| const secondUserSig = useSignal(true); | ||
| return ( | ||
| <> | ||
| <h3 id="test123">Pick a cat</h3> | ||
| <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123"> | ||
| <Checkbox.Root | ||
| class="flex items-center gap-3 bg-slate-900 p-2 text-white" | ||
| checklist={true} | ||
| > | ||
| <Checklist.Indicator class="w-fit"> | ||
| <div q:slot="true" id="true-img"> | ||
| ✅ | ||
| </div> | ||
| <div q:slot="mixed" id="mixed-img"> | ||
| ➖ | ||
| </div> | ||
| </Checklist.Indicator> | ||
| <p>Controlls all</p> | ||
| </Checkbox.Root> | ||
| <Checkbox.Root | ||
| bind:checked={firstUserSig} | ||
| class="flex items-center gap-3 bg-slate-900 pr-2 text-white" | ||
| > | ||
| <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator> | ||
| <p>No other stuff is needed here</p> | ||
| </Checkbox.Root> | ||
| // import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; | ||
| // import { Checkbox, Checklist } from '@qwik-ui/headless'; | ||
| // export default component$(() => { | ||
| // const firstUserSig = useSignal(false); | ||
| // const secondUserSig = useSignal(true); | ||
| // return ( | ||
| // <> | ||
| // <h3 id="test123">Pick a cat</h3> | ||
| // <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123"> | ||
| // <Checkbox.Root | ||
| // class="flex items-center gap-3 bg-slate-900 p-2 text-white" | ||
| // checklist={true} | ||
| // > | ||
| // <Checklist.Indicator class="w-fit"> | ||
| // <div q:slot="true" id="true-img"> | ||
| // ✅ | ||
| // </div> | ||
| // <div q:slot="mixed" id="mixed-img"> | ||
| // ➖ | ||
| // </div> | ||
| // </Checklist.Indicator> | ||
| // <p>Controlls all</p> | ||
| // </Checkbox.Root> | ||
| // <Checkbox.Root | ||
| // bind:checked={firstUserSig} | ||
| // class="flex items-center gap-3 bg-slate-900 pr-2 text-white" | ||
| // > | ||
| // <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator> | ||
| // <p>No other stuff is needed here</p> | ||
| // </Checkbox.Root> | ||
|
|
||
| <Checkbox.Root bind:checked={secondUserSig} class="bg-slate-900 text-white"> | ||
| <div class="flex items-center gap-3"> | ||
| <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator> | ||
| <p>No other stuff is needed here</p> | ||
| </div> | ||
| </Checkbox.Root> | ||
| </Checklist.Root> | ||
| </> | ||
| ); | ||
| }); | ||
| // <Checkbox.Root | ||
| // bind:checked={secondUserSig} | ||
| // class="bg-slate-900 text-white" | ||
| // > | ||
| // <div class="flex items-center gap-3"> | ||
| // <Checkbox.Indicator class="w-fit bg-slate-600"> | ||
| // ✅ | ||
| // </Checkbox.Indicator> | ||
| // <p>No other stuff is needed here</p> | ||
| // </div> | ||
| // </Checkbox.Root> | ||
| // </Checklist.Root> | ||
| // </> | ||
| // ); | ||
| // }); |
55 changes: 14 additions & 41 deletions
55
apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-true.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,19 @@ | ||
| import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; | ||
| import { Checkbox, Checklist } from '@qwik-ui/headless'; | ||
| import { component$ } from '@builder.io/qwik'; | ||
| import { Checklist } from '@qwik-ui/headless'; | ||
| // this test basically ensures that the sig passed to the checklist controlls trumps all its children | ||
| export default component$(() => { | ||
| const checklistSig = useSignal(true); | ||
| // const checklistSig = useSignal(true); | ||
| return ( | ||
| <> | ||
| <h3 id="test123">Pick a cat</h3> | ||
| <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123"> | ||
| <Checkbox.Root | ||
| class="flex items-center gap-3 bg-slate-900 text-white" | ||
| checklist={true} | ||
| bind:checked={checklistSig} | ||
| id="checklist" | ||
| > | ||
| <Checklist.Indicator class="w-fit"> | ||
| <div q:slot="true" id="true-img"> | ||
| ✅ | ||
| </div> | ||
|
|
||
| <div q:slot="mixed" id="mixed-img"> | ||
| ➖ | ||
| </div> | ||
| </Checklist.Indicator> | ||
| <p>Controlls all</p> | ||
| </Checkbox.Root> | ||
| <Checkbox.Root | ||
| id="child-1" | ||
| class="flex items-center gap-3 bg-slate-900 pr-2 text-white" | ||
| > | ||
| <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator> | ||
| <p>No other stuff is needed here</p> | ||
| </Checkbox.Root> | ||
|
|
||
| <Checkbox.Root id="child-2" class="bg-slate-900 text-white"> | ||
| <div class="flex items-center gap-3"> | ||
| <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator> | ||
| <p>Im a true.tsx</p> | ||
| </div> | ||
| </Checkbox.Root> | ||
| </Checklist.Root> | ||
| <p>You signal is: </p> | ||
| <p id="signal-to-text">{`${checklistSig.value}`}</p> | ||
| </> | ||
| <Checklist.Root initialStates={[true, true]}> | ||
| <Checklist.SelectAll> | ||
| <Checklist.Indicator>✅</Checklist.Indicator> | ||
| </Checklist.SelectAll> | ||
| <Checklist.Item> | ||
| <Checklist.ItemIndicator>✅</Checklist.ItemIndicator> first item | ||
| </Checklist.Item> | ||
| <Checklist.Item> | ||
| <Checklist.ItemIndicator>✅</Checklist.ItemIndicator> second item | ||
| </Checklist.Item> | ||
| </Checklist.Root> | ||
| ); | ||
| }); |
Oops, something went wrong.