This repository has been archived by the owner on Sep 12, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 331
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add accessible checkboxes (#214)
- Loading branch information
1 parent
e6b634f
commit 9f3b01c
Showing
5 changed files
with
75 additions
and
21 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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,60 @@ | ||
<script lang="ts"> | ||
export let label: string; | ||
export let value: string; | ||
export let group: string[]; | ||
export let checked = false; | ||
$: updateChekbox(group); | ||
$: updateGroup(checked); | ||
function updateChekbox(group: string[]) { | ||
checked = group.indexOf(value) >= 0; | ||
} | ||
function updateGroup(checked: boolean) { | ||
const index = group.indexOf(value); | ||
if (checked) { | ||
if (index < 0) { | ||
group.push(value); | ||
group = group; | ||
} | ||
} else { | ||
if (index >= 0) { | ||
group.splice(index, 1); | ||
group = group; | ||
} | ||
} | ||
} | ||
</script> | ||
|
||
<div class="flex items-center"> | ||
<input | ||
bind:checked | ||
{value} | ||
id={label} | ||
class="absolute cursor-pointer opacity-0" | ||
type="checkbox" | ||
/> | ||
<label for={label} class="flex cursor-pointer items-center whitespace-nowrap">{label}</label> | ||
</div> | ||
|
||
<style lang="postcss"> | ||
label::before { | ||
@apply mr-2 h-4 w-4 rounded-sm border border-gray-500; | ||
content: ''; | ||
} | ||
label:hover::before, | ||
input[type='checkbox']:hover + label::before { | ||
@apply cursor-pointer; | ||
} | ||
input[type='checkbox']:focus + label::before { | ||
@apply ring-2 ring-blue-500; | ||
} | ||
input[type='checkbox']:checked + label::before { | ||
@apply flex items-center justify-center bg-skin-primary text-white; | ||
content: '\002713'; | ||
} | ||
</style> |
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,26 +1,21 @@ | ||
<script lang="ts"> | ||
import { selectedLabels } from '$lib/stores/selected-labels.store'; | ||
import Checkbox from './checkbox.svelte'; | ||
export let tags: string[]; | ||
let selection: string[] = []; | ||
$: tags = tags.sort((a, b) => a.localeCompare(b)); | ||
$: selection, run(); | ||
const run = () => { | ||
selectedLabels.set(selection); | ||
}; | ||
</script> | ||
|
||
<div class="mt-4 text-center"> | ||
<ul class="mt-8 grid w-full grid-cols-1 md:grid-cols-2 lg:grid-cols-3"> | ||
{#each tags as tag} | ||
<input class="hidden" value={tag} bind:group={selection} type="checkbox" id={tag} /> | ||
<label | ||
class="my-1 mr-2 inline-block cursor-pointer select-none rounded-xl border-[1px] border-gray-500 py-1 px-2 text-sm transition-all duration-200" | ||
for={tag}>{@html tag}</label | ||
> | ||
<li> | ||
<Checkbox bind:group={selection} label={tag} value={tag} /> | ||
</li> | ||
{/each} | ||
</div> | ||
|
||
<style lang="postcss"> | ||
input:checked + label { | ||
@apply border-skin-primary bg-skin-primary text-white; | ||
} | ||
</style> | ||
</ul> |
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
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