mirror of
https://github.com/open-webui/open-webui.git
synced 2026-10-06 02:48:04 +00:00
53 lines
1.8 KiB
Svelte
53 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { Switch } from 'bits-ui';
|
|
|
|
import { createEventDispatcher, tick, getContext } from 'svelte';
|
|
import { settings } from '$lib/stores';
|
|
|
|
import Tooltip from './Tooltip.svelte';
|
|
export let state = true;
|
|
export let id = '';
|
|
export let ariaLabelledbyId = '';
|
|
export let ariaLabel = '';
|
|
export let tooltip = false;
|
|
export let inherited = false;
|
|
|
|
const i18n: any = getContext('i18n');
|
|
const dispatch = createEventDispatcher();
|
|
</script>
|
|
|
|
<Tooltip
|
|
content={typeof tooltip === 'string'
|
|
? tooltip
|
|
: typeof tooltip === 'boolean' && tooltip
|
|
? state
|
|
? $i18n.t('Enabled')
|
|
: $i18n.t('Disabled')
|
|
: ''}
|
|
placement="top"
|
|
>
|
|
<div class="flex items-center gap-1.5">
|
|
{#if inherited}
|
|
<span class="text-[0.6875rem] text-gray-400 dark:text-gray-600">{$i18n.t('Default')}</span>
|
|
{/if}
|
|
|
|
<Switch.Root
|
|
bind:checked={state}
|
|
{id}
|
|
aria-labelledby={ariaLabelledbyId || undefined}
|
|
aria-label={ariaLabel || undefined}
|
|
class="focus-ring relative h-4 min-h-4 w-7 shrink-0 cursor-pointer rounded-full mx-[0.0625rem] transition-colors duration-150 disabled:cursor-not-allowed {($settings?.highContrastMode ??
|
|
false)
|
|
? 'focus:outline focus:outline-2 focus:outline-gray-800! focus:dark:outline-gray-200!'
|
|
: ''} {state ? 'bg-gray-900 dark:bg-white' : 'bg-gray-300 dark:bg-gray-700'}"
|
|
onCheckedChange={async () => {
|
|
await tick();
|
|
dispatch('change', state);
|
|
}}
|
|
>
|
|
<Switch.Thumb
|
|
class="pointer-events-none absolute top-[0.125rem] block h-3 w-3 shrink-0 rounded-full transition-all duration-150 data-[state=checked]:left-[0.875rem] data-[state=checked]:bg-white data-[state=checked]:dark:bg-black data-[state=unchecked]:left-[0.125rem] data-[state=unchecked]:bg-white data-[state=unchecked]:dark:bg-gray-500"
|
|
/>
|
|
</Switch.Root>
|
|
</div>
|
|
</Tooltip>
|