@wikimedia/codex
Version:
Codex Design System for Wikimedia
272 lines (271 loc) • 10.1 kB
TypeScript
import { PropType } from 'vue';
import { Icon } from '@wikimedia/codex-icons';
import { TextInputType, ValidationStatusType } from '../../types';
/**
* A form element that accepts a single line of text input from the user.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Current value of the input.
*
* Provided by `v-model` binding in the parent component.
*/
modelValue: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
/**
* `type` attribute of the input.
*
* @values 'text', 'search', 'number', 'email', 'password', 'tel', 'url',
* 'week', 'month', 'date', 'datetime-local', 'time'
*/
inputType: {
type: PropType<TextInputType>;
default: string;
validator: import("../../types").StringTypeValidator<"number" | "text" | "search" | "email" | "month" | "password" | "tel" | "url" | "week" | "date" | "datetime-local" | "time">;
};
/**
* `status` attribute of the input.
*/
status: {
type: PropType<ValidationStatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
};
/**
* Whether the input is disabled.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* An icon at the start of the `<input>` element. Similar to a `::before` pseudo-element.
*/
startIcon: {
type: PropType<Icon | undefined>;
default: undefined;
};
/**
* An icon at the end of the `<input>` element. Similar to an `::after` pseudo-element.
*/
endIcon: {
type: PropType<Icon | undefined>;
default: undefined;
};
/**
* Add a clear button at the end of the `<input>` element.
*
* When the clear button is pressed, the input's value is set to an empty string.
* The clear button is displayed when input text is present.
*/
clearable: {
type: BooleanConstructor;
default: boolean;
};
}>, {
computedInputId: import("vue").ComputedRef<string | undefined>;
descriptionId: import("vue").ComputedRef<string | undefined> | undefined;
wrappedModel: import("vue").WritableComputedRef<string | number, string | number>;
isClearable: import("vue").ComputedRef<boolean>;
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
otherAttrsMinusId: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
inputClasses: import("vue").ComputedRef<{
'cdx-text-input__input--has-value': boolean;
}>;
computedDisabled: import("vue").ComputedRef<boolean>;
onClear: (event: MouseEvent) => void;
onInput: (event: Event) => void;
onChange: (event: Event) => void;
onKeydown: (event: KeyboardEvent) => void;
onFocus: (event: FocusEvent) => void;
onBlur: (event: FocusEvent) => void;
onCompositionStart: (event: CompositionEvent) => void;
onCompositionUpdate: (event: CompositionEvent) => void;
onCompositionEnd: (event: CompositionEvent) => void;
onInvalid: (event: Event, doPreventDefault: boolean) => void;
shouldPreventDefault: import("vue").Ref<boolean, boolean>;
cdxIconClear: string;
}, {}, {}, {
/**
* Focus the component's `<input>` element.
*
* @public
*/
focus(): void;
/**
* Blur the component's `<input>` element.
*
* @public
*/
blur(): void;
/**
* Check the validity of the `<input>` element according to its constraint attributes.
* Emits an 'invalid' event if the input is invalid. See:
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
*
* @public
* @return {boolean} Whether the input is valid
*/
checkValidity(): boolean;
/**
* Check the validity of the `<input>` element and report it as a pop up on the UI. See:
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity
*
* @public
* @return {boolean} Whether the input is valid
*/
reportValidity(): boolean;
/**
* Set custom validity and message for the `<input>` element. See:
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
*
* @public
* @param {string} message The custom validation message to set
*/
setCustomValidity(message: string): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "clear" | "update:modelValue" | "focus" | "blur" | "keydown" | "change" | "compositionend" | "compositionstart" | "compositionupdate" | "invalid")[], "input" | "clear" | "update:modelValue" | "focus" | "blur" | "keydown" | "change" | "compositionend" | "compositionstart" | "compositionupdate" | "invalid", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Current value of the input.
*
* Provided by `v-model` binding in the parent component.
*/
modelValue: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
/**
* `type` attribute of the input.
*
* @values 'text', 'search', 'number', 'email', 'password', 'tel', 'url',
* 'week', 'month', 'date', 'datetime-local', 'time'
*/
inputType: {
type: PropType<TextInputType>;
default: string;
validator: import("../../types").StringTypeValidator<"number" | "text" | "search" | "email" | "month" | "password" | "tel" | "url" | "week" | "date" | "datetime-local" | "time">;
};
/**
* `status` attribute of the input.
*/
status: {
type: PropType<ValidationStatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
};
/**
* Whether the input is disabled.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* An icon at the start of the `<input>` element. Similar to a `::before` pseudo-element.
*/
startIcon: {
type: PropType<Icon | undefined>;
default: undefined;
};
/**
* An icon at the end of the `<input>` element. Similar to an `::after` pseudo-element.
*/
endIcon: {
type: PropType<Icon | undefined>;
default: undefined;
};
/**
* Add a clear button at the end of the `<input>` element.
*
* When the clear button is pressed, the input's value is set to an empty string.
* The clear button is displayed when input text is present.
*/
clearable: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onCompositionend?: ((...args: any[]) => any) | undefined;
onCompositionstart?: ((...args: any[]) => any) | undefined;
onCompositionupdate?: ((...args: any[]) => any) | undefined;
onFocus?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
onChange?: ((...args: any[]) => any) | undefined;
onInput?: ((...args: any[]) => any) | undefined;
onInvalid?: ((...args: any[]) => any) | undefined;
onKeydown?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onClear?: ((...args: any[]) => any) | undefined;
}>, {
modelValue: string | number;
disabled: boolean;
status: "default" | "warning" | "error" | "success";
inputType: "number" | "text" | "search" | "email" | "month" | "password" | "tel" | "url" | "week" | "date" | "datetime-local" | "time";
startIcon: Icon | undefined;
endIcon: Icon | undefined;
clearable: boolean;
}, {}, {
CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
icon: {
type: PropType<Icon>;
required: true;
};
iconLabel: {
type: StringConstructor;
default: string;
};
lang: {
type: PropType<string | null>;
default: null;
};
dir: {
type: PropType<import("../../types").HTMLDirection | null>;
default: null;
};
size: {
type: PropType<import("../../types").IconSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
};
}>, {
rootElement: import("vue").Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
rootClasses: import("vue").ComputedRef<{
[x: string]: boolean;
'cdx-icon--flipped': boolean;
}>;
iconSvg: import("vue").ComputedRef<string>;
iconPath: import("vue").ComputedRef<string>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
icon: {
type: PropType<Icon>;
required: true;
};
iconLabel: {
type: StringConstructor;
default: string;
};
lang: {
type: PropType<string | null>;
default: null;
};
dir: {
type: PropType<import("../../types").HTMLDirection | null>;
default: null;
};
size: {
type: PropType<import("../../types").IconSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
};
}>> & Readonly<{}>, {
lang: string | null;
iconLabel: string;
dir: import("../../types").HTMLDirection | null;
size: "medium" | "small" | "x-small";
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;