iptv-org-mirror/iptv-org.github.io
1
0
Fork 0
mirror of https://github.com/iptv-org/iptv-org.github.io.git synced 2025-05-12 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Create Checkbox.svelte

Browse source
This commit is contained in:
Arhey 2023-03-07 03:06:22 +03:00
parent d90c57db0e
commit 54f0c93cea
1 changed files with 58 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/components/Checkbox.svelte Normal file
View file

@ -0,0 +1,58 @@
<script>
import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()
export let selected = false
export let indeterminate = false
function toggle(state) {
dispatch('change', { state })
}
</script>
{#if selected}
<button
class="w-12 h-12 rounded-full text-accent-500 hover:text-accent-600 dark:hover:text-accent-400 transition-colors duration-200 flex items-center justify-center"
area-label="Unselect"
on:click="{() => toggle(false)}"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
</svg>
</button>
{:else if indeterminate}
<button
class="w-12 h-12 rounded-full text-accent-500 hover:text-accent-600 dark:hover:text-accent-400 transition-colors duration-200 flex items-center justify-center"
area-label="Unselect"
on:click="{() => toggle(false)}"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path
fill-rule="evenodd"
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm3 10.5a.75.75 0 000-1.5H9a.75.75 0 000 1.5h6z"
clip-rule="evenodd"
/>
</svg>
</button>
{:else}
<button
class="w-12 h-12 rounded-full text-gray-200 hover:text-gray-400 dark:text-gray-700 dark:hover:text-gray-600 transition-colors duration-200 flex items-center justify-center"
area-label="Select"
on:click="{() => toggle(true)}"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
stroke="currentColor"
stroke-width="1.5"
>
<circle cx="12" cy="12" r="10" fill="none" />
</svg>
</button>
{/if}