Document converse-autocomplete and always add closing tag

Weird parsing issues happen when a closing tag is not present.
This commit is contained in:
JC Brand 2022-06-11 20:16:49 +02:00
parent 6d39fae71a
commit 8671afc4b1
4 changed files with 42 additions and 8 deletions

View File

@ -46,7 +46,7 @@ export default (el) => {
<div class="form-group add-xmpp-contact__group">
<label class="clearfix" for="name">${i18n_group}:</label>
<converse-autocomplete .getAutoCompleteList="${() => el.getGroupsAutoCompleteList()}" name="group"/>
<converse-autocomplete .getAutoCompleteList="${() => el.getGroupsAutoCompleteList()}" name="group"></converse-autocomplete>
</div>
<div class="form-group"><div class="invalid-feedback">${i18n_error_message}</div></div>

View File

@ -22,7 +22,7 @@ export default (o) => {
<converse-autocomplete
.getAutoCompleteList="${getAutoCompleteList}"
placeholder="${i18n_jid_placeholder}"
name="jid"/>
name="jid"></converse-autocomplete>
</label>
</fieldset>
<fieldset class="form-group">

View File

@ -38,7 +38,7 @@ export default (o) => {
<converse-autocomplete
.getAutoCompleteList="${getAutoCompleteList}"
placeholder="${o.chatroom_placeholder}"
name="chatroom"/>
name="chatroom"></converse-autocomplete>
</div>
${ o.muc_roomid_policy_hint ? html`<div class="form-group">${unsafeHTML(DOMPurify.sanitize(o.muc_roomid_policy_hint, {'ALLOWED_TAGS': ['b', 'br', 'em']}))}</div>` : '' }
${ !api.settings.get('locked_muc_nickname') ? nickname_input(o) : '' }

View File

@ -4,13 +4,46 @@ import { FILTER_CONTAINS, FILTER_STARTSWITH } from './utils.js';
import { api } from '@converse/headless/core';
import { html } from 'lit';
/**
* A custom element that can be used to add auto-completion suggestions to a form input.
* @class AutoCompleteComponent
*
* @property { Boolean } [autofocus=false]
* Should the `focus` attribute be set on the input element?
* @property { Function } getAutoCompleteList
* A function that returns the list of autocomplete suggestions
* @property { Boolean } [auto_evaluate=true]
* Should evaluation happen automatically without any particular key as trigger?
* @property { Boolean } [auto_first=false]
* Should the first element automatically be selected?
* @property { "contains" | "startswith" } [filter="contains"]
* Provide matches which contain the entered text, or which starts with the entered text
* @property { String } [include_triggers=""]
* Space separated characters which should be included in the returned value
* @property { Number } [min_chars=1]
* The minimum number of characters to be entered into the input before autocomplete starts.
* @property { String } [name]
* The `name` attribute of the `input` element
* @property { String } [placeholder]
* The `placeholder` attribute of the `input` element
* @property { String } [triggers]
* String of space separated characters which trigger autocomplete
*
* @example
* <converse-autocomplete
* .getAutoCompleteList="${getAutoCompleteList}"
* placeholder="${placeholder_text}"
* name="foo">
* </converse-autocomplete>
*/
export default class AutoCompleteComponent extends CustomElement {
static get properties () {
return {
'autofocus': { type: Boolean },
'getAutoCompleteList': { type: Function },
'auto_evaluate': { type: Boolean },
'auto_first': { type: Boolean }, // Should the first element be automatically selected?
'auto_first': { type: Boolean },
'filter': { type: String },
'include_triggers': { type: String },
'min_chars': { type: Number },
@ -22,14 +55,15 @@ export default class AutoCompleteComponent extends CustomElement {
constructor () {
super();
this.auto_evaluate = true; // Should evaluation happen automatically without any particular key as trigger?
this.auto_first = false; // Should the first element be automatically selected?
this.position = "above";
this.auto_evaluate = true;
this.auto_first = false;
this.filter = 'contains';
this.include_triggers = ''; // Space separated chars which should be included in the returned value
this.include_triggers = '';
this.match_current_word = false; // Match only the current word, otherwise all input is matched
this.max_items = 10;
this.min_chars = 1;
this.triggers = ''; // String of space separated chars
this.triggers = '';
}
render () {