add ProficiencyPicker component with segmented and dropdown modes
This commit is contained in:
parent
8f1e306d3c
commit
816c252ba3
2 changed files with 431 additions and 0 deletions
|
|
@ -0,0 +1,126 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import Select from '../Select.svelte'
|
||||
import MultiSelect from '../MultiSelect.svelte'
|
||||
import ProficiencyPickerSegmented from './ProficiencyPickerSegmented.svelte'
|
||||
import { PROFICIENCY_LABELS, getProficiencyImage } from '$lib/utils/proficiency'
|
||||
|
||||
// Proficiency display order for dropdown: Sabre, Dagger, Spear, Axe, Staff, Gun, Melee, Bow, Harp, Katana
|
||||
const PROFICIENCY_DISPLAY_ORDER = [1, 2, 4, 3, 6, 9, 7, 5, 8, 10]
|
||||
|
||||
interface Props {
|
||||
value?: number | number[]
|
||||
onValueChange?: (value: number | number[]) => void
|
||||
multiple?: boolean
|
||||
mode?: 'auto' | 'segmented' | 'dropdown'
|
||||
contained?: boolean
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
showClear?: boolean
|
||||
disabled?: boolean
|
||||
class?: string
|
||||
}
|
||||
|
||||
let {
|
||||
value = $bindable(),
|
||||
onValueChange,
|
||||
multiple = false,
|
||||
mode = 'auto',
|
||||
contained = false,
|
||||
size = 'medium',
|
||||
showClear = false,
|
||||
disabled = false,
|
||||
class: className = ''
|
||||
}: Props = $props()
|
||||
|
||||
// Map size to segmented control size (small stays small, medium/large become regular)
|
||||
const segmentedSize = $derived(size === 'small' ? 'small' : 'regular')
|
||||
|
||||
// Responsive detection for auto mode
|
||||
let isMobile = $state(false)
|
||||
|
||||
$effect(() => {
|
||||
if (typeof window === 'undefined') return
|
||||
|
||||
const mq = window.matchMedia('(max-width: 640px)')
|
||||
isMobile = mq.matches
|
||||
|
||||
const handler = (e: MediaQueryListEvent) => {
|
||||
isMobile = e.matches
|
||||
}
|
||||
|
||||
mq.addEventListener('change', handler)
|
||||
return () => mq.removeEventListener('change', handler)
|
||||
})
|
||||
|
||||
// Determine if we should use dropdown mode
|
||||
const shouldUseDropdown = $derived(mode === 'dropdown' || (mode === 'auto' && isMobile))
|
||||
|
||||
// Build proficiency options for Select/MultiSelect
|
||||
const options = $derived.by(() => {
|
||||
return PROFICIENCY_DISPLAY_ORDER.map((proficiency) => ({
|
||||
value: proficiency,
|
||||
label: PROFICIENCY_LABELS[proficiency] ?? 'Unknown',
|
||||
image: getProficiencyImage(proficiency)
|
||||
}))
|
||||
})
|
||||
|
||||
// Handle value changes for single-select dropdown
|
||||
function handleSingleChange(newValue: number | undefined) {
|
||||
if (newValue !== undefined) {
|
||||
value = newValue
|
||||
onValueChange?.(newValue)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle value changes for multi-select dropdown
|
||||
function handleMultipleChange(newValue: number[]) {
|
||||
value = newValue
|
||||
onValueChange?.(newValue)
|
||||
}
|
||||
|
||||
// Handle value changes for segmented control
|
||||
function handleSegmentedChange(newValue: number | number[]) {
|
||||
value = newValue
|
||||
onValueChange?.(newValue)
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if shouldUseDropdown}
|
||||
{#if multiple}
|
||||
<MultiSelect
|
||||
{options}
|
||||
value={Array.isArray(value) ? value : value !== undefined ? [value] : []}
|
||||
onValueChange={handleMultipleChange}
|
||||
size="medium"
|
||||
{contained}
|
||||
disabled={disabled}
|
||||
placeholder="Select proficiencies..."
|
||||
fullWidth={true}
|
||||
class={className}
|
||||
/>
|
||||
{:else}
|
||||
<Select
|
||||
{options}
|
||||
value={typeof value === 'number' ? value : undefined}
|
||||
onValueChange={handleSingleChange}
|
||||
size="medium"
|
||||
{contained}
|
||||
disabled={disabled}
|
||||
placeholder="Select proficiency"
|
||||
fullWidth={true}
|
||||
class={className}
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
<ProficiencyPickerSegmented
|
||||
{value}
|
||||
onValueChange={handleSegmentedChange}
|
||||
{multiple}
|
||||
{contained}
|
||||
{showClear}
|
||||
size={segmentedSize}
|
||||
disabled={disabled}
|
||||
class={className}
|
||||
/>
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,305 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import { ToggleGroup } from 'bits-ui'
|
||||
import Tooltip from '../Tooltip.svelte'
|
||||
import { PROFICIENCY_LABELS, getProficiencyImage } from '$lib/utils/proficiency'
|
||||
|
||||
// Proficiency display order: Sabre, Dagger, Spear, Axe, Staff, Gun, Melee, Bow, Harp, Katana
|
||||
// Using values from PROFICIENCY_LABELS: 1=Sabre, 2=Dagger, 3=Axe, 4=Spear, 5=Bow, 6=Staff, 7=Melee, 8=Harp, 9=Gun, 10=Katana
|
||||
const PROFICIENCY_DISPLAY_ORDER = [1, 2, 4, 3, 6, 9, 7, 5, 8, 10]
|
||||
|
||||
interface Props {
|
||||
value?: number | number[]
|
||||
onValueChange?: (value: number | number[]) => void
|
||||
multiple?: boolean
|
||||
contained?: boolean
|
||||
disabled?: boolean
|
||||
size?: 'small' | 'regular'
|
||||
showClear?: boolean
|
||||
class?: string
|
||||
}
|
||||
|
||||
let {
|
||||
value = $bindable(),
|
||||
onValueChange,
|
||||
multiple = false,
|
||||
contained = false,
|
||||
disabled = false,
|
||||
size = 'small',
|
||||
showClear = false,
|
||||
class: className = ''
|
||||
}: Props = $props()
|
||||
|
||||
// Check if any proficiencies are selected
|
||||
const hasSelection = $derived.by(() => {
|
||||
if (multiple) {
|
||||
const arr = Array.isArray(value) ? value : value !== undefined ? [value] : []
|
||||
return arr.length > 0
|
||||
}
|
||||
return value !== undefined
|
||||
})
|
||||
|
||||
function handleClear() {
|
||||
if (multiple) {
|
||||
value = []
|
||||
onValueChange?.([])
|
||||
} else {
|
||||
value = undefined
|
||||
onValueChange?.(undefined as any)
|
||||
}
|
||||
}
|
||||
|
||||
// Get label for proficiency
|
||||
function getLabel(proficiency: number): string {
|
||||
return PROFICIENCY_LABELS[proficiency] ?? 'Unknown'
|
||||
}
|
||||
|
||||
// Convert value to string format for ToggleGroup
|
||||
const stringValue = $derived.by(() => {
|
||||
if (multiple) {
|
||||
const arr = Array.isArray(value) ? value : value !== undefined ? [value] : []
|
||||
return arr.map(String)
|
||||
} else {
|
||||
return value !== undefined ? String(value) : undefined
|
||||
}
|
||||
})
|
||||
|
||||
// Handle value changes from ToggleGroup
|
||||
function handleSingleChange(newValue: string | undefined) {
|
||||
if (newValue !== undefined) {
|
||||
const numValue = Number(newValue)
|
||||
value = numValue
|
||||
onValueChange?.(numValue)
|
||||
}
|
||||
}
|
||||
|
||||
function handleMultipleChange(newValue: string[]) {
|
||||
const numValues = newValue.map(Number)
|
||||
value = numValues
|
||||
onValueChange?.(numValues)
|
||||
}
|
||||
|
||||
const containerClasses = $derived(
|
||||
['container', contained && 'contained', size === 'regular' ? 'regular' : 'small', className]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
)
|
||||
</script>
|
||||
|
||||
{#if showClear}
|
||||
<div class="wrapper">
|
||||
<div class={containerClasses}>
|
||||
{#if multiple}
|
||||
<ToggleGroup.Root
|
||||
type="multiple"
|
||||
value={stringValue as string[]}
|
||||
onValueChange={handleMultipleChange}
|
||||
class="proficiency-group"
|
||||
{disabled}
|
||||
>
|
||||
{#each PROFICIENCY_DISPLAY_ORDER as proficiency}
|
||||
<Tooltip content={getLabel(proficiency)}>
|
||||
{#snippet children()}
|
||||
<ToggleGroup.Item
|
||||
value={String(proficiency)}
|
||||
class="proficiency-item"
|
||||
{disabled}
|
||||
>
|
||||
<img
|
||||
src={getProficiencyImage(proficiency)}
|
||||
alt={getLabel(proficiency)}
|
||||
class="proficiency-image"
|
||||
/>
|
||||
</ToggleGroup.Item>
|
||||
{/snippet}
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</ToggleGroup.Root>
|
||||
{:else}
|
||||
<ToggleGroup.Root
|
||||
type="single"
|
||||
value={stringValue as string | undefined}
|
||||
onValueChange={handleSingleChange}
|
||||
class="proficiency-group"
|
||||
{disabled}
|
||||
>
|
||||
{#each PROFICIENCY_DISPLAY_ORDER as proficiency}
|
||||
<Tooltip content={getLabel(proficiency)}>
|
||||
{#snippet children()}
|
||||
<ToggleGroup.Item
|
||||
value={String(proficiency)}
|
||||
class="proficiency-item"
|
||||
{disabled}
|
||||
>
|
||||
<img
|
||||
src={getProficiencyImage(proficiency)}
|
||||
alt={getLabel(proficiency)}
|
||||
class="proficiency-image"
|
||||
/>
|
||||
</ToggleGroup.Item>
|
||||
{/snippet}
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</ToggleGroup.Root>
|
||||
{/if}
|
||||
</div>
|
||||
{#if hasSelection}
|
||||
<button type="button" class="clearButton" onclick={handleClear}> Clear </button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class={containerClasses}>
|
||||
{#if multiple}
|
||||
<ToggleGroup.Root
|
||||
type="multiple"
|
||||
value={stringValue as string[]}
|
||||
onValueChange={handleMultipleChange}
|
||||
class="proficiency-group"
|
||||
{disabled}
|
||||
>
|
||||
{#each PROFICIENCY_DISPLAY_ORDER as proficiency}
|
||||
<Tooltip content={getLabel(proficiency)}>
|
||||
{#snippet children()}
|
||||
<ToggleGroup.Item
|
||||
value={String(proficiency)}
|
||||
class="proficiency-item"
|
||||
{disabled}
|
||||
>
|
||||
<img src={getProficiencyImage(proficiency)} alt={getLabel(proficiency)} class="proficiency-image" />
|
||||
</ToggleGroup.Item>
|
||||
{/snippet}
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</ToggleGroup.Root>
|
||||
{:else}
|
||||
<ToggleGroup.Root
|
||||
type="single"
|
||||
value={stringValue as string | undefined}
|
||||
onValueChange={handleSingleChange}
|
||||
class="proficiency-group"
|
||||
{disabled}
|
||||
>
|
||||
{#each PROFICIENCY_DISPLAY_ORDER as proficiency}
|
||||
<Tooltip content={getLabel(proficiency)}>
|
||||
{#snippet children()}
|
||||
<ToggleGroup.Item
|
||||
value={String(proficiency)}
|
||||
class="proficiency-item"
|
||||
{disabled}
|
||||
>
|
||||
<img src={getProficiencyImage(proficiency)} alt={getLabel(proficiency)} class="proficiency-image" />
|
||||
</ToggleGroup.Item>
|
||||
{/snippet}
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</ToggleGroup.Root>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/effects' as *;
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
gap: $unit;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: $full-corner;
|
||||
padding: $unit-half;
|
||||
|
||||
&.contained {
|
||||
background-color: var(--segmented-control-background-bg);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.proficiency-group) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.proficiency-item) {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
border-radius: $full-corner;
|
||||
padding: $unit-half;
|
||||
@include smooth-transition($duration-quick, background-color, opacity);
|
||||
}
|
||||
|
||||
:global(.proficiency-item:focus-visible) {
|
||||
@include focus-ring($blue);
|
||||
}
|
||||
|
||||
:global(.proficiency-item:disabled) {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Simple hover and selected states with gray background
|
||||
:global(.proficiency-item:hover:not(:disabled)) {
|
||||
background-color: var(--picker-item-bg-hover);
|
||||
}
|
||||
|
||||
:global(.proficiency-item[data-state='on']) {
|
||||
background-color: var(--picker-item-bg-selected);
|
||||
}
|
||||
|
||||
:global(.proficiency-image) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Size variants
|
||||
.small {
|
||||
:global(.proficiency-item) {
|
||||
padding: $unit-half;
|
||||
}
|
||||
|
||||
:global(.proficiency-image) {
|
||||
width: calc($unit * 3.25);
|
||||
height: calc($unit * 3.25);
|
||||
}
|
||||
}
|
||||
|
||||
.regular {
|
||||
:global(.proficiency-item) {
|
||||
padding: $unit-half;
|
||||
}
|
||||
|
||||
:global(.proficiency-image) {
|
||||
width: $unit-4x;
|
||||
height: $unit-4x;
|
||||
}
|
||||
}
|
||||
|
||||
.clearButton {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
font-size: $font-small;
|
||||
color: var(--text-secondary);
|
||||
padding: $unit-half $unit;
|
||||
border-radius: $input-corner;
|
||||
@include smooth-transition($duration-quick, background-color, color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--option-bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focus-ring($blue);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue