External/kycnotme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release 2025-05-23-xzNR

Browse Source
This commit is contained in:
pluja
2025-05-23 21:50:03 +00:00
parent 4806a7fd4e
commit 970622d061
14 changed files with 1202 additions and 1090 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/src/components/InputCheckboxGroup.astro
View File

@@ -12,13 +12,15 @@ type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId'> &
options: {
label: string
value: string
icon?: string
icon?: string[] | string
iconClassName?: string[] | string
}[]
disabled?: boolean
selectedValues?: string[]
size?: 'lg' | 'md'
}
const { options, disabled, selectedValues = [], ...wrapperProps } = Astro.props
const { options, disabled, selectedValues = [], size = 'md', ...wrapperProps } = Astro.props
const inputId = Astro.locals.makeId(`input-${wrapperProps.name}`)
const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
@@ -26,23 +28,38 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
<InputWrapper inputId={inputId} {...wrapperProps}>
<div class={cn(baseInputClassNames.div, hasError && baseInputClassNames.error)}>
<div class="h-48 overflow-y-auto mask-y-from-[calc(100%-var(--spacing)*8)] py-5">
<div
class={cn('h-48 overflow-y-auto mask-y-from-[calc(100%-var(--spacing)*8)] py-5', {
'h-96': size === 'lg',
'h-48': size === 'md',
})}
>
{
options.map((option) => (
<label class="hover:bg-night-500 flex cursor-pointer items-center gap-2 px-5 py-1">
<input
transition:persist
type="checkbox"
name={wrapperProps.name}
value={option.value}
checked={selectedValues.includes(option.value)}
class={cn(hasError && baseInputClassNames.error, disabled && baseInputClassNames.disabled)}
disabled={disabled}
/>
{option.icon && <Icon name={option.icon} class="size-4" />}
<span class="text-sm leading-none">{option.label}</span>
</label>
))
options.map((option) => {
const icons = option.icon ? (Array.isArray(option.icon) ? option.icon : [option.icon]) : []
const iconClassName = option.iconClassName
? Array.isArray(option.iconClassName)
? option.iconClassName
: Array.from({ length: icons.length }, () => option.iconClassName)
: []
return (
<label class="hover:bg-night-500 flex cursor-pointer items-center gap-2 px-5 py-1">
<input
transition:persist
type="checkbox"
name={wrapperProps.name}
value={option.value}
checked={selectedValues.includes(option.value)}
class={cn(hasError && baseInputClassNames.error, disabled && baseInputClassNames.disabled)}
disabled={disabled}
/>
{icons.map((icon, index) => (
<Icon name={icon} class={cn('size-4', iconClassName[index])} />
))}
<span class="text-sm leading-none">{option.label}</span>
</label>
)
})
}
</div>
</div>