@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
106 lines (105 loc) • 5.11 kB
TypeScript
import { PasswordPolicy } from '../../helpers';
/**
* OcTextInput component
*
* Form Inputs are used to allow users to provide text input when the expected
* input is short. Form Input has a range of options and supports several text
* formats including numbers. For longer input, use the form `Textarea` element.
*
* ## Accessibility
* The label is required and represents the name of the input.
*
* The description-message can be used additionally to give further information about the input field. 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.
*
* @component
* @example
* <oc-text-input label="Text" v-model="inputValue"/>
* <oc-text-input type="password" label="Password" v-model="passwordValue"/>
*
* @prop {string} [id] - The ID of the element.
* @prop {'text'|'number'|'email'|'password'|'date'} [type='text'] - The type of the form input field.
* @prop {string} [modelValue] - Text value of the form input field.
* @prop {[number, number]} [selectionRange] - Selection range to accomplish partial selection.
* @prop {boolean} [clearButtonEnabled=false] - Whether or not the input element should have a dedicated button for clearing the input content.
* @prop {string} [clearButtonAccessibleLabel] - The aria label for the clear button. Only used if it's enabled at all.
* @prop {string} [defaultValue] - Value to show when no value is provided. This does not set `value` automatically. The user needs to explicitly enter a text to set it as `value`.
* @prop {boolean} [disabled=false] - Disables the input field.
* @prop {string} label - Accessible label of the form input field.
* @prop {string} [warningMessage] - A warning message which is shown below the input.
* @prop {string} [errorMessage] - An error message which is shown below the input.
* @prop {boolean} [fixMessageLine=false] - Whether or not vertical space below the input should be reserved for a one line message, so that content actually appearing there doesn't shift the layout.
* @prop {string} [descriptionMessage] - A description text which is shown below the input field.
* @prop {boolean} [readOnly=false] - Determines if the input field is read only. Read only field will be visualized by a lock item and additionally behaves like a disabled field.
* @prop {PasswordPolicy} [passwordPolicy] - Array of password policy rules, if type is password and password policy is given, the entered value will be checked against these rules.
* @prop {function} [generatePasswordMethod] - Method to generate random password.
*
* @emits change - Emitted when the input value changes.
* @emits update:modelValue - Emitted when the input value is updated.
* @emits focus - Emitted when the input field is focused.
* @emits passwordChallengeCompleted - Emitted when the password challenge is completed.
* @emits passwordChallengeFailed - Emitted when the password challenge fails.
* @emits enterKeyDown - Emitted when enter key is pressed.
*/
interface Props {
id?: string;
type?: string | 'text' | 'number' | 'email' | 'password' | 'date';
modelValue?: string;
selectionRange?: [number, number];
clearButtonEnabled?: boolean;
clearButtonAccessibleLabel?: string;
defaultValue?: string;
disabled?: boolean;
label: string;
warningMessage?: string;
errorMessage?: string;
fixMessageLine?: boolean;
descriptionMessage?: string;
readOnly?: boolean;
passwordPolicy?: PasswordPolicy;
generatePasswordMethod?: (...args: unknown[]) => string;
}
/**
* Puts focus on this input element
* @public
*/
declare function focus(): void;
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: {
label?(_: {}): any;
};
refs: {
input: unknown;
};
rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<Props, {
focus: typeof focus;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
focus: (value: string) => any;
change: (value: string) => any;
"update:modelValue": (value: string) => any;
passwordChallengeCompleted: () => any;
passwordChallengeFailed: () => any;
enterKeyDown: () => any;
}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
onFocus?: (value: string) => any;
onChange?: (value: string) => any;
"onUpdate:modelValue"?: (value: string) => any;
onPasswordChallengeCompleted?: () => any;
onPasswordChallengeFailed?: () => any;
onEnterKeyDown?: () => any;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
input: unknown;
}, HTMLDivElement>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};