@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
174 lines (173 loc) • 5 kB
TypeScript
import { HTMLAttributes } from 'vue';
/**
* Textareas are used to allow users to provide text input when the expected
* input is long. Textarea has a range of options. For shorter input,
* use the `Input` element.
*
* ## Accessibility
* The label is required and represents the name of the textarea.
*
* The description-message can be used additionally to give further information about the textarea . When a
* description is given, it will be automatically referenced via the `aria-describedby` property.
* An error or warning will replace the description as well as the `aria-describedby` property until the error
* or warning is fixed.
*/
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
/**
* The ID of the element.
*/
id: {
type: StringConstructor;
required: false;
default: () => string;
};
/**
* Text value of the form textarea.
*/
modelValue: {
type: StringConstructor;
default: any;
};
/**
* Label of the textarea.
**/
label: {
type: StringConstructor;
required: true;
default: any;
};
/**
* A warning message which is shown below the textarea.
*/
warningMessage: {
type: StringConstructor;
default: any;
};
/**
* An error message which is shown below the textarea.
*/
errorMessage: {
type: StringConstructor;
default: any;
};
/**
* A description text which is shown below the textarea.
*/
descriptionMessage: {
type: StringConstructor;
default: any;
};
/**
* Whether or not vertical space below the textarea should be reserved for a one line message,
* so that content actually appearing there doesn't shift the layout.
*/
fixMessageLine: {
type: BooleanConstructor;
default: boolean;
};
/**
* Configure if the value should be emitted on 'enter' or if it should do a linebreak
* if true: 'enter' emits value, ctrl + enter and shift + enter creates linebreak
* if false: 'enter' creates linebreak
*/
submitOnEnter: {
type: BooleanConstructor;
required: false;
default: boolean;
};
}>, {}, {}, {
showMessageLine(): boolean;
messageId(): string;
additionalAttributes(): {
[x: string]: unknown;
};
ariaInvalid(): HTMLAttributes["aria-invalid"];
messageText(): string;
}, {
/**
* Puts focus on this input element
* @public
*/
focus(): void;
onInput(value: string): void;
onFocus(value: boolean): void;
onKeyDown(e: KeyboardEvent): void;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("focus" | "keydown" | "change" | "update:modelValue")[], "focus" | "keydown" | "change" | "update:modelValue", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
/**
* The ID of the element.
*/
id: {
type: StringConstructor;
required: false;
default: () => string;
};
/**
* Text value of the form textarea.
*/
modelValue: {
type: StringConstructor;
default: any;
};
/**
* Label of the textarea.
**/
label: {
type: StringConstructor;
required: true;
default: any;
};
/**
* A warning message which is shown below the textarea.
*/
warningMessage: {
type: StringConstructor;
default: any;
};
/**
* An error message which is shown below the textarea.
*/
errorMessage: {
type: StringConstructor;
default: any;
};
/**
* A description text which is shown below the textarea.
*/
descriptionMessage: {
type: StringConstructor;
default: any;
};
/**
* Whether or not vertical space below the textarea should be reserved for a one line message,
* so that content actually appearing there doesn't shift the layout.
*/
fixMessageLine: {
type: BooleanConstructor;
default: boolean;
};
/**
* Configure if the value should be emitted on 'enter' or if it should do a linebreak
* if true: 'enter' emits value, ctrl + enter and shift + enter creates linebreak
* if false: 'enter' creates linebreak
*/
submitOnEnter: {
type: BooleanConstructor;
required: false;
default: boolean;
};
}>> & Readonly<{
onFocus?: (...args: any[]) => any;
onChange?: (...args: any[]) => any;
onKeydown?: (...args: any[]) => any;
"onUpdate:modelValue"?: (...args: any[]) => any;
}>, {
label: string;
id: string;
modelValue: string;
errorMessage: string;
fixMessageLine: boolean;
warningMessage: string;
descriptionMessage: string;
submitOnEnter: boolean;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export default _default;