BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
mirror of https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git synced 2025-12-06 21:53:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Updated several input components

Browse Source
This commit is contained in:
Mattrixwv
2025-07-19 23:58:16 -04:00
parent ea7ac27772
commit f84f0a0ebc
6 changed files with 607 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
lib/component/input/SelectInput.tsx
View File

@@ -18,24 +18,22 @@ export default function SelectInput(props: SelectInputProps){
value={value}
onChange={onChange}
>
<div
className="relative w-full"
<ListboxButton
className={clsx(
"group relative flex flex-row items-center justify-between w-full",
"border-2 px-2 py-1 rounded-lg"
//"not-data-open:rounded-lg data-open:rounded-t-lg"
)}
>
<ListboxButton
className={clsx(
"flex flex-row items-center justify-between w-full",
"outline rounded px-2 py-1"
)}
>
<span>{label}</span>
<span><BsChevronDown size={22}/></span>
</ListboxButton>
<ListboxOptions
className="absolute w-full max-h-60 overflow-scroll z-10 outline-none"
>
{children}
</ListboxOptions>
</div>
<span>{label}</span>
<span className="block group-data-open:rotate-180 transition-transform duration-250"><BsChevronDown size={22}/></span>
</ListboxButton>
<ListboxOptions
className="w-(--button-width) max-h-60! overflow-hidden z-10 outline-none rounded-lg"
anchor="bottom"
>
{children}
</ListboxOptions>
</Listbox>
);
}

61
lib/component/input/TextArea.tsx Normal file
View File

@@ -0,0 +1,61 @@
import type { TextAreaProps } from "$/types/Input";
import clsx from "clsx";
export default function TextArea({
id = crypto.randomUUID().replaceAll("-", ""),
className,
inputClassName,
labelClassName,
maxLength,
rows,
cols,
spellCheck,
placeholder,
defaultValue,
value,
onChange,
disabled
}: TextAreaProps){
return (
<div
className={clsx(
"flex flex-row items-center justify-center rounded-lg border-2",
className
)}
>
<div
className="relative flex flex-row items-center justify-center px-2 py-1"
>
<textarea
id={id}
className={clsx(
"peer bg-transparent outline-none placeholder-transparent resize",
inputClassName
)}
placeholder={placeholder}
maxLength={maxLength}
rows={rows}
cols={cols}
defaultValue={defaultValue}
value={value}
onChange={onChange}
disabled={disabled}
spellCheck={spellCheck}
/>
<label
className={clsx(
"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:cursor-text",
"flex items-center",
labelClassName
)}
style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
htmlFor={id}
>
{placeholder}
</label>
</div>
</div>
);
}

31
lib/component/input/TextInput.tsx
View File

@@ -2,20 +2,19 @@ import type { TextInputProps } from "$/types/Input";
import clsx from "clsx";
export default function TextInput(props: TextInputProps){
const {
id,
className,
inputClassName,
labelClassName,
placeholder,
defaultValue,
value,
onChange,
disabled
} = props;
export default function TextInput({
id = crypto.randomUUID().replaceAll("-", ""),
className,
inputClassName,
labelClassName,
maxLength,
spellCheck,
placeholder,
defaultValue,
value,
onChange,
disabled
}: TextInputProps){
return (
<div
className={clsx(
@@ -34,10 +33,12 @@ export default function TextInput(props: TextInputProps){
inputClassName
)}
placeholder={placeholder}
maxLength={maxLength}
defaultValue={defaultValue}
value={value}
onChange={onChange}
disabled={disabled}
spellCheck={spellCheck}
/>
<label
className={clsx(
@@ -46,7 +47,7 @@ export default function TextInput(props: TextInputProps){
"flex items-center",
labelClassName
)}
style={{ transitionProperty: "top,, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
htmlFor={id}
>
{placeholder}