d4c1e1ab78
* fix(frontend): ui refactor * fix(frontend): WIP * fix(frontend): WIP * fix(frontend): WIP * fix(frontend): remove virtual table * fix(frontend): Add virtual list * fix(frontend): fix number of items * fix(frontend): revert changes * fix(frontend): fix build
28 lines
859 B
Svelte
28 lines
859 B
Svelte
<script lang="ts">
|
|
import { classNames } from '$lib/utils'
|
|
import { getContext } from 'svelte'
|
|
import Button from '../button/Button.svelte'
|
|
import type { ToggleButtonContext } from './ToggleButtonGroup.svelte'
|
|
|
|
export let value: any
|
|
export let position: 'left' | 'center' | 'right'
|
|
export let light = false
|
|
|
|
const { select, selected } = getContext<ToggleButtonContext>('ToggleButtonGroup')
|
|
</script>
|
|
|
|
<Button
|
|
{...$$props}
|
|
on:click={() => select(value)}
|
|
btnClasses={classNames(
|
|
'border-gray-200 focus:ring-0 w-full',
|
|
position === 'left' ? 'rounded-none rounded-l-lg border' : '',
|
|
position === 'center' ? 'rounded-none border-t border-b border-r' : '',
|
|
position === 'right' ? 'rounded-none rounded-r-md border-r border-y' : ''
|
|
)}
|
|
color={$selected === value ? (light ? 'dark' : 'dark') : 'light'}
|
|
variant="contained"
|
|
>
|
|
<slot />
|
|
</Button>
|