forked from open-webui/open-webui
71 lines
1.6 KiB
Svelte
71 lines
1.6 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { createEventDispatcher } from 'svelte';
|
||
|
|
const dispatch = createEventDispatcher();
|
||
|
|
|
||
|
|
export let state = 'unchecked';
|
||
|
|
export let indeterminate = false;
|
||
|
|
|
||
|
|
let _state = 'unchecked';
|
||
|
|
|
||
|
|
$: _state = state;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<button
|
||
|
|
class=" outline -outline-offset-1 outline-[1.5px] outline-gray-200 dark:outline-gray-600 {state !==
|
||
|
|
'unchecked'
|
||
|
|
? 'bg-black outline-black '
|
||
|
|
: 'hover:outline-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800'} text-white transition-all rounded inline-block w-3.5 h-3.5 relative"
|
||
|
|
on:click={() => {
|
||
|
|
if (_state === 'unchecked') {
|
||
|
|
_state = 'checked';
|
||
|
|
dispatch('change', _state);
|
||
|
|
} else if (_state === 'checked') {
|
||
|
|
_state = 'unchecked';
|
||
|
|
if (!indeterminate) {
|
||
|
|
dispatch('change', _state);
|
||
|
|
}
|
||
|
|
} else if (indeterminate) {
|
||
|
|
_state = 'checked';
|
||
|
|
dispatch('change', _state);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div class="top-0 left-0 absolute w-full flex justify-center">
|
||
|
|
{#if _state === 'checked'}
|
||
|
|
<svg
|
||
|
|
class="w-3.5 h-3.5"
|
||
|
|
aria-hidden="true"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
fill="none"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="3"
|
||
|
|
d="m5 12 4.7 4.5 9.3-9"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
{:else if indeterminate}
|
||
|
|
<svg
|
||
|
|
class="w-3 h-3.5 text-gray-800 dark:text-white"
|
||
|
|
aria-hidden="true"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
fill="none"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="3"
|
||
|
|
d="M5 12h14"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- {checked} -->
|
||
|
|
</button>
|