granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use Checkbox component in database edit pages with element theming

Browse source
This commit is contained in:
Justin Edmund 2025-11-30 13:59:45 -08:00
parent b8ad70229d
commit d5a22baa0a
3 changed files with 47 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/lib/components/ui/DetailItem.svelte
View file

@ -4,6 +4,7 @@
import type { Snippet } from 'svelte'
import Input from './Input.svelte'
import Select from './Select.svelte'
import Checkbox from './checkbox/Checkbox.svelte'
interface SelectOption {
value: string | number
@ -18,7 +19,8 @@
editable = false,
type = 'text',
options,
placeholder
placeholder,
element
}: {
label: string
value?: string | number | boolean | null | undefined
@ -27,6 +29,7 @@
type?: 'text' | 'number' | 'select' | 'checkbox'
options?: SelectOption[]
placeholder?: string
element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
} = $props()
// For checkbox type, convert value to boolean
@ -46,10 +49,7 @@
{#if type === 'select' && options}
<Select bind:value={value as string | number | undefined} {options} {placeholder} size="medium" contained />
{:else if type === 'checkbox'}
<label class="checkbox-wrapper">
<input type="checkbox" bind:checked={checkboxValue} class="checkbox" />
<span class="checkbox-label">{checkboxValue ? 'Yes' : 'No'}</span>
</label>
<Checkbox bind:checked={checkboxValue} contained {element} />
{:else if type === 'number'}
<Input
bind:value
@ -131,22 +131,5 @@
}
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: spacing.$unit;
cursor: pointer;
.checkbox {
width: spacing.$unit-2x;
height: spacing.$unit-2x;
cursor: pointer;
}
.checkbox-label {
color: var(--text-primary);
user-select: none;
}
}
}
</style>

31
src/lib/components/ui/checkbox/Checkbox.svelte
View file

@ -164,6 +164,37 @@
--cb-checked-fg: white;
}
// Element colors when bound (higher specificity to override .checkbox.bound)
:global(.checkbox.bound.wind[data-state='checked']),
:global(.checkbox.bound.wind[data-state='indeterminate']),
:global(.checkbox.bound.fire[data-state='checked']),
:global(.checkbox.bound.fire[data-state='indeterminate']),
:global(.checkbox.bound.water[data-state='checked']),
:global(.checkbox.bound.water[data-state='indeterminate']),
:global(.checkbox.bound.earth[data-state='checked']),
:global(.checkbox.bound.earth[data-state='indeterminate']),
:global(.checkbox.bound.dark[data-state='checked']),
:global(.checkbox.bound.dark[data-state='indeterminate']),
:global(.checkbox.bound.light[data-state='checked']),
:global(.checkbox.bound.light[data-state='indeterminate']) {
background-color: var(--cb-checked-bg);
}
:global(.checkbox.bound.wind[data-state='checked']:hover:not(:disabled)),
:global(.checkbox.bound.wind[data-state='indeterminate']:hover:not(:disabled)),
:global(.checkbox.bound.fire[data-state='checked']:hover:not(:disabled)),
:global(.checkbox.bound.fire[data-state='indeterminate']:hover:not(:disabled)),
:global(.checkbox.bound.water[data-state='checked']:hover:not(:disabled)),
:global(.checkbox.bound.water[data-state='indeterminate']:hover:not(:disabled)),
:global(.checkbox.bound.earth[data-state='checked']:hover:not(:disabled)),
:global(.checkbox.bound.earth[data-state='indeterminate']:hover:not(:disabled)),
:global(.checkbox.bound.dark[data-state='checked']:hover:not(:disabled)),
:global(.checkbox.bound.dark[data-state='indeterminate']:hover:not(:disabled)),
:global(.checkbox.bound.light[data-state='checked']:hover:not(:disabled)),
:global(.checkbox.bound.light[data-state='indeterminate']:hover:not(:disabled)) {
background-color: var(--cb-checked-bg-hover);
}
// Size variations
:global(.checkbox.small) {
--cb-icon-size: #{calc($unit * 1.5)};

13
src/routes/database/characters/[id]/+page.svelte
View file

@ -212,6 +212,13 @@
const uncapLevel = $derived(getCharacterMaxUncapLevel({ special, uncap: { flb, ulb, transcendence } }))
const transcendenceStage = $derived(transcendence ? 5 : 0)
// Get element name for checkbox theming
const elementName = $derived.by(() => {
const el = editMode ? editData.element : character?.element
const label = getElementLabel(el)
return label !== '—' && label !== 'Null' ? label.toLowerCase() as 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' : undefined
})
</script>
<div>
@ -278,19 +285,21 @@
{/if}
{#if editMode}
<DetailItem label="FLB" bind:value={editData.flb} editable={true} type="checkbox" />
<DetailItem label="ULB" bind:value={editData.ulb} editable={true} type="checkbox" />
<DetailItem label="FLB" bind:value={editData.flb} editable={true} type="checkbox" element={elementName} />
<DetailItem label="ULB" bind:value={editData.ulb} editable={true} type="checkbox" element={elementName} />
<DetailItem
label="Transcendence"
bind:value={editData.transcendence}
editable={true}
type="checkbox"
element={elementName}
/>
<DetailItem
label="Special"
bind:value={editData.special}
editable={true}
type="checkbox"
element={elementName}
/>
{/if}