tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Projects 1 Releases 2 Packages 1 Activity Actions

feat: document select

Browse source
This commit is contained in:
Timothy J. Baek 2024-02-25 21:16:11 -08:00
parent f8cf43c0f7
commit 63628a70a6
2 changed files with 176 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/lib/components/common/Checkbox.svelte Normal file
View file

@ -0,0 +1,70 @@
<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>