@nextcloud/vue
Version:
Nextcloud vue components
372 lines (371 loc) • 9.72 kB
TypeScript
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
/**
* The ID attribute of the content editable
*/
id: {
type: StringConstructor;
default: () => string;
};
/**
* Visual label of the contenteditable
*/
label: {
type: StringConstructor;
default: string;
};
/**
* The text content
*/
modelValue: {
type: StringConstructor;
required: true;
};
/**
* Placeholder to be shown if empty
*/
placeholder: {
type: StringConstructor;
default: string;
};
/**
* Auto complete function
*/
autoComplete: {
type: FunctionConstructor;
default: () => never[];
};
/**
* The containing element for the menu popover
*/
menuContainer: {
type: {
new (): Element;
prototype: Element;
};
default: () => HTMLElement;
};
/**
* Make the contenteditable looks like a textarea or not.
* Default looks like a single-line input.
* This also handle the default enter/shift+enter behaviour.
* if multiline, enter = newline; otherwise enter = submit
* shift+enter always add a new line. ctrl+enter always submits
*/
multiline: {
type: BooleanConstructor;
default: boolean;
};
/**
* Is the content editable ?
*/
contenteditable: {
type: BooleanConstructor;
default: boolean;
};
/**
* Disable the editing and show specific disabled design
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Max allowed length
*/
maxlength: {
type: NumberConstructor;
default: null;
};
/**
* Enable or disable emoji autocompletion
*/
emojiAutocomplete: {
type: BooleanConstructor;
default: boolean;
};
/**
* Enable or disable link autocompletion
*/
linkAutocomplete: {
type: BooleanConstructor;
default: boolean;
};
/**
* CSS class to apply to the root element.
*/
class: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
}>, {
labelId: string;
tributeId: string;
segmenter: Intl.Segmenter;
/**
* Non-reactive property to store Tribute instance
*
* @type {import('tributejs').default | null}
*/
tribute: import('tributejs').default<any> | null;
tributeStyleMutationObserver: null;
}, {
localValue: string;
isComposing: boolean;
isAutocompleteOpen: boolean;
autocompleteActiveId: undefined;
isTributeIntegrationDone: boolean;
}, {
/**
* Is the current trimmed value empty?
*
* @return {boolean}
*/
isEmptyValue(): boolean;
/**
* Is the current value over maxlength?
*
* @return {boolean}
*/
isOverMaxlength(): boolean;
/**
* Tooltip to show if characters count is over limit
*
* @return {string}
*/
tooltipString(): string;
/**
* Edit is only allowed when contenteditableis true and disabled is false
*
* @return {boolean}
*/
canEdit(): boolean;
/**
* Compute debounce function for the autocomplete function
*/
debouncedAutoComplete(): import('debounce').DebouncedFunction<(search: any, callback: any) => Promise<void>>;
}, {
/**
* Focus the richContenteditable
*
* @public
*/
focus(): void;
initializeTribute(): void;
getLink(item: any): "<span id=\"tmp-smart-picker-result-node\"></span>";
setCursorAfter(element: any): void;
moveCursorToEnd(): void;
/**
* Re-emit the input event to the parent
*
* @param {Event} event the input event
*/
onInput(event: Event): void;
/**
* When pasting, sanitize the content, extract text
* and render it again
*
* @param {Event} event the paste event
* @fires Event paste the original paste event
*/
onPaste(event: Event): void;
/**
* Update the value text from the provided html
*
* @param {string} htmlOrText the html content (or raw text with @mentions)
*/
updateValue(htmlOrText: string): void;
/**
* Update content and local value
*
* @param {string} value the message value
*/
updateContent(value: string): void;
/**
* Enter key pressed. Submits if not multiline
*
* @param {Event} event the keydown event
*/
onEnter(event: Event): void;
/**
* Ctrl + Enter key pressed is used to submit
*
* @param {Event} event the keydown event
*/
onCtrlEnter(event: Event): void;
onKeyUp(event: any): void;
onKeyEsc(event: any): void;
/**
* Get HTML element with Tribute.js container
*
* @return {HTMLElement}
*/
getTributeContainer(): HTMLElement;
/**
* Get the currently selected item element id in Tribute.js container
*
* @return {HTMLElement}
*/
getTributeSelectedItem(): HTMLElement;
/**
* Handle Tribute activation
*
* @param {boolean} isActive - is active
*/
onTributeActive(isActive: boolean): void;
onTributeArrowKeyDown(): void;
onTributeSelectedItemWillChange(): void;
setupTributeIntegration(): void;
/**
* Set tribute-container--focus-visible class on the Tribute container when the user navigates the listbox via keyboard.
*
* Because the real focus is kept on the textbox, we cannot use the :focus-visible pseudo-class
* to style selected options in the autocomplete listbox.
*
* @param {boolean} withFocusVisible - should the focus-visible class be added
*/
setTributeFocusVisible(withFocusVisible: boolean): void;
/**
* Show tribute menu programmatically.
*
* @param {string} trigger - trigger character, can be '/', '@', or ':'
*
* @public
*/
showTribute(trigger: string): void;
/**
* Hide tribute menu programmatically
*
*/
hideTribute(): void;
}, {
props: {
userData: {
type: ObjectConstructor;
default: () => {};
};
};
methods: {
renderContent(value: string): string;
parseContent(content: string): string;
genSelectTemplate(value: string): string;
renderComponentHtml(props: object, component: object): string;
};
}, import('vue').ComponentOptionsMixin, ("submit" | "paste" | "update:modelValue" | "smartPickerSubmit")[], "submit" | "paste" | "update:modelValue" | "smartPickerSubmit", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
/**
* The ID attribute of the content editable
*/
id: {
type: StringConstructor;
default: () => string;
};
/**
* Visual label of the contenteditable
*/
label: {
type: StringConstructor;
default: string;
};
/**
* The text content
*/
modelValue: {
type: StringConstructor;
required: true;
};
/**
* Placeholder to be shown if empty
*/
placeholder: {
type: StringConstructor;
default: string;
};
/**
* Auto complete function
*/
autoComplete: {
type: FunctionConstructor;
default: () => never[];
};
/**
* The containing element for the menu popover
*/
menuContainer: {
type: {
new (): Element;
prototype: Element;
};
default: () => HTMLElement;
};
/**
* Make the contenteditable looks like a textarea or not.
* Default looks like a single-line input.
* This also handle the default enter/shift+enter behaviour.
* if multiline, enter = newline; otherwise enter = submit
* shift+enter always add a new line. ctrl+enter always submits
*/
multiline: {
type: BooleanConstructor;
default: boolean;
};
/**
* Is the content editable ?
*/
contenteditable: {
type: BooleanConstructor;
default: boolean;
};
/**
* Disable the editing and show specific disabled design
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Max allowed length
*/
maxlength: {
type: NumberConstructor;
default: null;
};
/**
* Enable or disable emoji autocompletion
*/
emojiAutocomplete: {
type: BooleanConstructor;
default: boolean;
};
/**
* Enable or disable link autocompletion
*/
linkAutocomplete: {
type: BooleanConstructor;
default: boolean;
};
/**
* CSS class to apply to the root element.
*/
class: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
}>> & Readonly<{
onSubmit?: ((...args: any[]) => any) | undefined;
onPaste?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onSmartPickerSubmit?: ((...args: any[]) => any) | undefined;
}>, {
id: string;
label: string;
class: string | Record<string, any> | unknown[];
disabled: boolean;
placeholder: string;
multiline: boolean;
menuContainer: Element;
contenteditable: boolean;
autoComplete: Function;
maxlength: number;
emojiAutocomplete: boolean;
linkAutocomplete: boolean;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export default _default;