@inkline/inkline
Version:
Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.
397 lines (396 loc) • 9.5 kB
TypeScript
import type { PropType } from 'vue';
declare const _default: import("vue").DefineComponent<{
/**
* The color variant of the input
* @type light | dark
* @default
* @name color
*/
color: {
type: StringConstructor;
default: undefined;
};
/**
* Display the input as clearable
* @type Boolean
* @default false
* @name clearable
*/
clearable: {
type: BooleanConstructor;
default: boolean;
};
/**
* The disabled state of the input
* @type Boolean
* @default false
* @name disabled
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* The error state of the input, computed based on schema by default.
* @type Boolean | Array
* @default ['touched', 'dirty', 'invalid']
* @TODO use propDefaultValue to set default value
* @name error
*/
error: {
type: PropType<boolean | string[]>;
default: () => string[];
};
/**
* The id of the internal input element
* @type String
* @default
* @name id
*/
id: {
type: StringConstructor;
default: undefined;
};
/**
* The id of the input wrapper element
* @type String
* @default
* @name wrapperId
*/
wrapperId: {
type: StringConstructor;
default: undefined;
};
/**
* Used to set the field value
* @type String | Number
* @default ''
* @name modelValue
*/
modelValue: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
/**
* The unique identifier of the input
* @type String
* @default uid()
* @name name
*/
name: {
type: StringConstructor;
default: () => string;
};
/**
* Display the input as plaintext, disabling interaction
* @type Boolean
* @default false
* @name plaintext
*/
plaintext: {
type: BooleanConstructor;
default: boolean;
};
/**
* The readonly state of the input
* @type Boolean
* @default false
* @name readonly
*/
readonly: {
type: BooleanConstructor;
default: boolean;
};
/**
* The size variant of the input
* @type sm | md | lg
* @default
* @name size
*/
size: {
type: StringConstructor;
default: undefined;
};
/**
* The tabindex of the input
* @type Number | String
* @default 0
* @name tabindex
*/
tabindex: {
type: (StringConstructor | NumberConstructor)[];
default: number;
};
/**
* The type of the input
* @type String
* @default text
* @name type
*/
type: {
type: StringConstructor;
default: string;
};
/**
* The aria-label of the clear button
* @type String
* @default Clear
* @name clearAriaLabel
*/
clearAriaLabel: {
type: StringConstructor;
default: string;
};
/**
* The aria-label of the show password toggle button
* @type String
* @default Toggle password visibility
* @name showPasswordToggleAriaLabel
*/
showPasswordToggleAriaLabel: {
type: StringConstructor;
default: string;
};
/**
* Display the password toggle button
* @type Boolean
* @default true
* @name showPasswordToggle
*/
showPasswordToggle: {
type: BooleanConstructor;
default: boolean;
};
/**
* Enable input validation using schema
* @type Boolean
* @default true
* @name validateSchema
*/
validate: {
type: BooleanConstructor;
default: boolean;
};
}, {
input: import("vue").Ref<HTMLInputElement | null>;
wrapperAttrs: import("vue").ComputedRef<Partial<{
[x: string]: unknown;
}>>;
inputAttrs: import("vue").ComputedRef<Partial<{
[x: string]: unknown;
}>>;
tabIndex: import("vue").ComputedRef<string | number>;
value: import("vue").ComputedRef<any>;
inputType: import("vue").ComputedRef<string>;
isClearable: import("vue").ComputedRef<boolean>;
isPasswordToggleable: import("vue").ComputedRef<boolean>;
showPassword: import("vue").Ref<boolean>;
classes: import("vue").ComputedRef<{
'-prefixed': boolean;
'-suffixed': boolean;
'-prepended': boolean;
'-appended': boolean;
'-disabled': boolean;
'-error': any;
'-readonly': boolean;
}>;
onBlur: (event: Event) => void;
onInput: (event: Event) => void;
onClear: (event: Event) => void;
onTogglePassword: (event: Event) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "clear" | "togglePassword")[], "update:modelValue" | "clear" | "togglePassword", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
/**
* The color variant of the input
* @type light | dark
* @default
* @name color
*/
color: {
type: StringConstructor;
default: undefined;
};
/**
* Display the input as clearable
* @type Boolean
* @default false
* @name clearable
*/
clearable: {
type: BooleanConstructor;
default: boolean;
};
/**
* The disabled state of the input
* @type Boolean
* @default false
* @name disabled
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* The error state of the input, computed based on schema by default.
* @type Boolean | Array
* @default ['touched', 'dirty', 'invalid']
* @TODO use propDefaultValue to set default value
* @name error
*/
error: {
type: PropType<boolean | string[]>;
default: () => string[];
};
/**
* The id of the internal input element
* @type String
* @default
* @name id
*/
id: {
type: StringConstructor;
default: undefined;
};
/**
* The id of the input wrapper element
* @type String
* @default
* @name wrapperId
*/
wrapperId: {
type: StringConstructor;
default: undefined;
};
/**
* Used to set the field value
* @type String | Number
* @default ''
* @name modelValue
*/
modelValue: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
/**
* The unique identifier of the input
* @type String
* @default uid()
* @name name
*/
name: {
type: StringConstructor;
default: () => string;
};
/**
* Display the input as plaintext, disabling interaction
* @type Boolean
* @default false
* @name plaintext
*/
plaintext: {
type: BooleanConstructor;
default: boolean;
};
/**
* The readonly state of the input
* @type Boolean
* @default false
* @name readonly
*/
readonly: {
type: BooleanConstructor;
default: boolean;
};
/**
* The size variant of the input
* @type sm | md | lg
* @default
* @name size
*/
size: {
type: StringConstructor;
default: undefined;
};
/**
* The tabindex of the input
* @type Number | String
* @default 0
* @name tabindex
*/
tabindex: {
type: (StringConstructor | NumberConstructor)[];
default: number;
};
/**
* The type of the input
* @type String
* @default text
* @name type
*/
type: {
type: StringConstructor;
default: string;
};
/**
* The aria-label of the clear button
* @type String
* @default Clear
* @name clearAriaLabel
*/
clearAriaLabel: {
type: StringConstructor;
default: string;
};
/**
* The aria-label of the show password toggle button
* @type String
* @default Toggle password visibility
* @name showPasswordToggleAriaLabel
*/
showPasswordToggleAriaLabel: {
type: StringConstructor;
default: string;
};
/**
* Display the password toggle button
* @type Boolean
* @default true
* @name showPasswordToggle
*/
showPasswordToggle: {
type: BooleanConstructor;
default: boolean;
};
/**
* Enable input validation using schema
* @type Boolean
* @default true
* @name validateSchema
*/
validate: {
type: BooleanConstructor;
default: boolean;
};
}>> & {
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onClear?: ((...args: any[]) => any) | undefined;
onTogglePassword?: ((...args: any[]) => any) | undefined;
}, {
color: string;
size: string;
name: string;
id: string;
plaintext: boolean;
error: boolean | string[];
disabled: boolean;
readonly: boolean;
modelValue: string | number;
type: string;
tabindex: string | number;
validate: boolean;
clearable: boolean;
wrapperId: string;
clearAriaLabel: string;
showPasswordToggleAriaLabel: string;
showPasswordToggle: boolean;
}, {}>;
export default _default;