gufaUIInput
Basic input.
Usage
Import
ts
import { Ainput } from "@agufaui/${framework name}";
Html
<ainput /> or <Ainput />
Configuration
Theme component name: ainput
Showcase
- default
maxlengthis 255 - For Vue
v-model, need to usev-model:v="variable" - 3rd example disabled
tand styling unstyled component.px-1is used to override default positional csspx-3
Click to see code
vue
<ainput
v-model:v="text"
label="Username"
t="inlineblock"
vc="dark:text-white"
labelc="dark:(bg-#242424 text-white)"
@update:v="notify"
></ainput>
<ainput
v-model:v="text1"
label="Username"
t="inlineblock"
c="mt-3"
vc="dark:text-white"
labelc="dark:(bg-#242424 text-white) !peer-focus-within:(-translate-y-100% ml-0 bg-transparent) !peer-not-placeholder-shown:(-translate-y-100% ml-0 bg-transparent)"
>
</ainput>
<ainput
v-model:v="text2"
label="Username"
t=""
c="mt-3"
vc="dark:text-white block peer bg-transparent p-2 max-h-12 text-4 text-gray-7 border-b-1 border-gray-5 rounded-md disabled:text-gray-4 focus:outline-none"
labelc="dark:(bg-#242424 text-white) text-4 text-gray-7 duration-300 peer-disabled:text-gray-4 peer-invalid:text-red-4 peer-focus-within:(scale-90 -translate-y-55% z-0 px-1 text-indigo-4) peer-not-placeholder-shown:(scale-90 -translate-y-55% z-0 px-1 text-indigo-4)"
>
</ainput>
<ainput v-model:v="text3" t="inlineblock" vc="dark:text-white"></ainput>
<ainput
v="disabled"
label="Username"
t="inlineblock"
:disabled="true"
vc="dark:text-white"
labelc="dark:(bg-#242424 text-white)"
></ainput>
<ainput
v-model:v="text4"
label="Username"
vc="w-full dark:text-white"
labelc="dark:(bg-#242424 text-white)"
>
</ainput>
<ainput
v-model:v="text5"
type="date"
label="Date"
vc="w-full dark:text-white"
labelc="dark:(bg-#242424 text-white)"
>
</ainput>
<ainput
v-model:v="text6"
type="time"
label="Time"
vc="w-full dark:text-white"
labelc="dark:(bg-#242424 text-white)"
>
</ainput>
<ainput
v-model:v="text7"
type="datetime-local"
label="DateTime"
vc="w-full dark:text-white"
labelc="dark:(bg-#242424 text-white)"
>
</ainput>
<ainput
v-model:v="text8"
type="range"
label="Range"
vc="w-full dark:text-white"
labelc="dark:(bg-#242424 text-white)"
>
</ainput>
<ainput
v-model:v="text9"
type="color"
label="Color"
vc="h-12 dark:text-white"
labelc="!ml-0 dark:(bg-#242424 text-white)"
>
</ainput>AgufaUI provided Theme
CDefaultType is just string constant "default"
ts
import { CDefaultType, CUseType } from "@agufaui/config";
import type { IAInputProps } from "../../types/basic/AInput";
export const CAInputLabel = "text-4 bg-white text-gray-7 duration-300";
export const CAInputLabelDisabled = "!peer-disabled:text-gray-4";
export const CAInputLabelError = "!peer-invalid:text-red-4";
export const CAInputLabelFocus =
"peer-focus-within:(scale-90 -translate-y-3 z-0 ml-3 px-1 py-0 text-indigo-4)";
export const CAInputLabelPlaceholder =
"peer-not-placeholder-shown:(scale-90 -translate-y-3 z-0 ml-3 px-1 py-0 text-indigo-4)";
export const DAInputDefault = {
vc: "block peer bg-transparent p-2 max-h-12 text-4 text-gray-7 border border-gray-3 rounded-md shadow-md disabled:(text-gray-4 cursor-not-allowed) focus:(outline-none ring ring-indigo-2/50 shadow-indigo)",
labelc: CAInputLabel.concat(
" ",
CAInputLabelFocus,
" ",
CAInputLabelDisabled,
" ",
CAInputLabelError,
" ",
CAInputLabelPlaceholder
),
};
export const DAInputInlineBlock = {
[CUseType]: CDefaultType,
display: "inline-block",
};
export const DAInput: Readonly<Record<string, Partial<IAInputProps>>> = {
[CDefaultType]: DAInputDefault,
inlineblock: DAInputInlineBlock,
};
Attributes (Properties)
Default Values
vue
type: "text",
display: "block",Unique
ts
export interface IAInputProps extends IProps, IPropsForm {
v?: string; // input text. Not configurable
type?: string; // html element input type
id?: string; // html element input 'id' and 'name' value, html element label 'for' value
display?: string; // display class for root div html element
vc?: string; // css classes for input html element
label?: string; // label text. Not configurable
labelc?: string; // css classes for label html element
}Inherit from IProps
ts
export interface IProps {
t?: string; // user defined or AgufaUI provided component type. Not configurable
c?: string; // css classes for component root html element
}Inherit from IPropsForm
ts
export interface IPropsForm {
disabled?: boolean; // disabled
}Events
ts
export interface IAInputEmits {
(e: "update:v", modelValue: string): void; // input event
(e: "blur", modelValue: string): void; // blur event
}