PatAlcala9/aio-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added versitality

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-06-05 17:41:03 +08:00
parent 2b1545f999
commit 61be8e2cab
2 changed files with 7 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Input/Input.sass
View file

@ -27,7 +27,7 @@ $border: 1px solid color.adjust(vars.$background, $lightness: 20%)
padding: 0.5rem padding: 0.5rem
color: color.adjust(vars.$background, $lightness: 60%) color: color.adjust(vars.$background, $lightness: 60%)
outline: none outline: none
transition: all 0.4s ease-out transition: all 0.2s ease-out
&:hover &:hover
border-color: color.adjust(vars.$background, $lightness: 30%) border-color: color.adjust(vars.$background, $lightness: 30%)

10
src/components/Input/Input.tsx
View file

@ -2,12 +2,14 @@ import './Input.sass'
import { Show } from 'solid-js' import { Show } from 'solid-js'
import { TextField } from '@kobalte/core/text-field' import { TextField } from '@kobalte/core/text-field'
export default (props: { value: string; onChange: (text:string) => void; label: string; isTextField?: boolean }) => ( export default (props: { value: string; onChange: (text: string) => void; label?: string; isTextField?: boolean; width?: number; height?: number }) => (
<> <>
<TextField class="input" value={props.value} onChange={props.onChange}> <TextField class="input" value={props.value} onChange={props.onChange} >
<TextField.Label class="input__label">{props.label}:</TextField.Label> <Show when={props.label}>
<TextField.Label class="input__label">{props.label}:</TextField.Label>
</Show>
<Show when={props.isTextField}> <Show when={props.isTextField}>
<TextField.TextArea class="input__textarea" /> <TextField.TextArea class="input__textarea" style={{ width: props.width ? `${props.width}rem` : '100%', height: props.height ? `${props.height}rem` : 'auto' }} />
</Show> </Show>
<Show when={!props.isTextField}> <Show when={!props.isTextField}>
<TextField.Input class="input__text" /> <TextField.Input class="input__text" />