maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
226 lines (225 loc) • 8.1 kB
TypeScript
import { IconComponent } from '@maz-ui/icons';
import { HTMLAttributes, InputHTMLAttributes } from 'vue';
import { MazColor, MazSize } from './types';
export type MazInputValue = string | number | null | undefined | boolean;
export interface MazInputProps<T = MazInputValue> {
/**
* Inline styles to apply to the component root element
* @type {HTMLAttributes['style']}
*/
style?: HTMLAttributes['style'];
/**
* CSS classes to apply to the component root element
* @type {HTMLAttributes['class']}
*/
class?: HTMLAttributes['class'];
/**
* The current value of the input field. This prop is used for two-way data binding with v-model
* @model
* @type {T}
* @example <MazInput v-model="inputValue" />
*/
modelValue?: T | undefined;
/**
* Text displayed when the input is empty to guide the user
* @type {string}
* @example "Enter your email address"
*/
placeholder?: InputHTMLAttributes['placeholder'];
/**
* Floating label that appears inside the input and moves up when focused or filled.
* Provides better UX than traditional placeholders
* @type {string}
* @example "Email Address"
*/
label?: string;
/**
* Static label displayed above the input field. Unlike the floating label, this remains fixed
* @type {string}
* @example "User Information"
*/
topLabel?: string;
/**
* Helper text displayed below the input to provide additional context or validation feedback
* @type {string}
* @example "Must contain at least 8 characters"
*/
assistiveText?: string;
/**
* Theme color that affects the border and focus states of the input
* @values primary, secondary, accent, info, success, warning, destructive, contrast
* @type {MazColor}
* @example "primary"
*/
color?: MazColor;
/**
* HTML input type attribute that determines the input behavior and validation
* @type {InputHTMLAttributes['type']}
* @values text, password, email, number, tel, url, search, date, time, datetime-local, month, week
* @example "email"
*/
type?: InputHTMLAttributes['type'];
/**
* Makes the input field mandatory for form submission
* @type {boolean}
* @example true
*/
required?: boolean;
/**
* Disables the input field, preventing user interaction and form submission
* @type {boolean}
* @example false
*/
disabled?: boolean;
/**
* Makes the input field read-only, allowing selection but preventing modification
* @type {boolean}
* @example false
*/
readonly?: boolean;
/**
* Unique identifier for the input element, used for form labels and accessibility
* @type {string}
* @example "user-email"
*/
id?: string;
/**
* Applies error styling (red border and text) to indicate validation failure
* @type {boolean}
* @example true
*/
error?: boolean;
/**
* Applies success styling (green border and text) to indicate successful validation
* @type {boolean}
* @example true
*/
success?: boolean;
/**
* Applies warning styling (orange border and text) to indicate potential issues
* @type {boolean}
* @example true
*/
warning?: boolean;
/**
* Alternative text that replaces the label when provided. Useful for contextual hints
* @type {string}
* @example "Optional field"
*/
hint?: string;
/**
* Additional CSS classes to apply specifically to the input wrapper element
* @type {string}
* @example "custom-input-wrapper"
*/
inputClasses?: string;
/**
* Controls whether the input has a visible border. Set to false for borderless inputs
* @type {boolean}
* @example true
*/
border?: boolean;
/**
* HTML inputmode attribute that provides hints for virtual keyboards on mobile devices
* @type {InputHTMLAttributes['inputmode']}
* @values text, numeric, decimal, tel, search, email, url
* @example "numeric"
*/
inputmode?: InputHTMLAttributes['inputmode'];
/**
* Controls the height and text size of the input component
* @values xs, sm, md, lg, xl, mini
* @type {MazSize}
* @example "md"
*/
size?: MazSize;
/**
* Enables input debouncing to limit the frequency of value updates.
* When true, uses 500ms delay. When a number, uses that value as delay in milliseconds
* @type {boolean | number}
* @example true
* @example 300
*/
debounce?: boolean | number;
/**
* Automatically focuses the input when the component mounts
* @type {boolean}
* @example false
*/
autoFocus?: boolean;
/**
* When true, shows the colored border immediately instead of only on focus
* @type {boolean}
* @example false
*/
borderActive?: boolean;
/**
* Icon displayed on the left side of the input. Can be an icon name string or icon component
* @type {string | IconComponent}
* @example "user"
* @example UserIcon
*/
leftIcon?: string | IconComponent;
/**
* Icon displayed on the right side of the input. Can be an icon name string or icon component
* @type {string | IconComponent}
* @example "search"
* @example SearchIcon
*/
rightIcon?: string | IconComponent;
/**
* Controls the border radius of the input component
* @values none, sm, md, lg, xl, full
* @type {'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'}
* @example "lg"
*/
roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
/**
* Makes the input expand to the full width of its container
* @type {boolean}
* @example false
*/
block?: boolean;
/**
* The name of the input field. Used for form submission and validation
* @type {string}
* @example "email"
*/
name?: string;
/**
* The autocomplete attribute for the input field. Used for form submission and validation
* @type {string}
* @example "email"
*/
autocomplete?: string;
/**
* Loading state for the input field. Used to show a loading spinner
* @note Spinner can be replace with the `loader` slot
* @default false
*/
loading?: boolean;
}
declare const _default: <T extends MazInputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
readonly onBlur?: ((event: Event) => any) | undefined;
readonly onChange?: ((event: Event) => any) | undefined;
readonly onClick?: ((event: Event) => any) | undefined;
readonly onFocus?: ((event: Event) => any) | undefined;
readonly onInput?: ((event: Event) => any) | undefined;
readonly "onUpdate:model-value"?: ((value?: T | undefined) => any) | undefined;
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInput" | "onClick" | "onUpdate:model-value"> & MazInputProps<T> & Partial<{}>> & import('vue').PublicProps;
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
attrs: any;
slots: {
'left-icon'?(_: {}): any;
'right-icon'?(_: {}): any;
loader?(_: {}): any;
};
emit: ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "click", event: Event) => void) & ((evt: "focus", event: Event) => void) & ((evt: "input", event: Event) => void) & ((evt: "update:model-value", value?: T | undefined) => void);
}>) => import('vue').VNode & {
__ctx?: Awaited<typeof __VLS_setup>;
};
export default _default;
type __VLS_PrettifyLocal<T> = {
[K in keyof T]: T[K];
} & {};