# j-Editable

> Ce composant peut éditer tous les éléments avec une classe modifiable. Il fonctionne avec des valeurs de liaison de données ou dynamiques. Apprenez-en davantage à partir d’un exemple.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 8aaa4e07e589d16fd13fddd99f952a926ddb3e90621a40c13052dd94efe0005d
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Ce composant peut éditer tous les éléments avec la classe `editable`. Il fonctionne avec `data-bind` ou des valeurs dynamiques. Apprenez-en davantage à partir d’un exemple.

__Configuration__ :

- `autofocus` {Boolean} concentre le premier élément (par défaut : `false`)
- `validate` {Boolean} peut désactiver la validation (par défaut : `true`)
- `disabled` {Boolean} peut désactiver l'édition (il ajoute les classes `ui-editable-disabled` et `ui-editable-enabled`), par défaut : `false`
- `changed` {String} facultatif, un lien vers une méthode ou un chemin --> il contiendra l'objet avec les valeurs modifiées uniquement
- `enter` {String} optionnel, un lien vers une méthode `method(path, value, el)`, la méthode est exécutée si l'utilisateur appuie sur `ENTER`
- `escape` {String} optionnel, un lien vers une méthode `method(path, value, el)`, la méthode est exécutée si l'utilisateur appuie sur `ESC`
- `can` {String} optionnel, un lien vers la méthode `method(opt, el)` doit renvoyer `boolean`, cela signifie `can edit?`
- `error` {String} facultatif, un lien vers la méthode `method(el, isInvalid, meta)` est évalué lorsque l'élément est invalide et vice-versa
- __NEW__ `class {String}` facultatif, ajoute un nom de classe sous la forme `ui-editable-CLASS` (par défaut : `default`)

---

L'attribut `data-editable` décrit le comportement :

- `path` {String} un __chemin relatif__ vers la propriété (peut être hérité automatiquement de `data-bind`)
- `required` {Booléen} facultatif, active "obligatoire" (par défaut : `false`)
- `type` {String} en option, peut être `string` (par défaut), `date`, `number`, `boolean`, `email` ou `html` __NEW__ `tags`
- `can` {String} facultatif, un chemin vers `function(opt, el)` doit renvoyer `boolean`, cela signifie `can edit?`
- `save` {String} facultatif, un chemin vers `function(opt, accepted(boolean))`, la fonction `accepted` doit être évalué
- `format` {String} facultatif, un format pour `date`, par défaut : `yyyy-MM-dd`
- `dirsource` {String} facultatif, chemin vers une source de données
- `dircustom` {String/Boolean} facultatif, peut contenir un chemin vers `function(val, next(new_val))` ou peut être `Boolean`. Cette option peut permettre l'ajout d'une valeur personnalisée (valeur non définie dans la source de données)
- `dirrender` {String} facultatif, un chemin vers `function(item, text)` (doit renvoyer du HTML pour `j-Directory`), cette fonction peut affecter la liste des éléments dans `j-Directory`
- `dirminwidth` {Number} facultatif, une largeur minimale pour `j-Directory`, par défaut : `200`
- `dirmaxwidth` {Number} en option, une largeur maximale pour `j-Directory`
- `dirplaceholder` {String} en option, un espace réservé pour `j-Directory`
- `dirempty` {String} facultatif, ajoute un champ vide pour `j-Directory`
- `dirkey` {String} facultatif, un nom de clé pour la lecture de `text` dans `dirsource` (par défaut : `name`)
- `dirvalue` {String} facultatif, un nom de clé pour la lecture de `value` dans `dirsource` (par défaut : `id`)
- `dirsearch` {Boolean} facultatif, peut désactiver la recherche de `j-Directory`
- `autosource` {String} un chemin vers la fonction `search` dans `autocomplete`, `function(search, render(arr))`
- `autovalue` {String} un chemin de propriété pour la valeur dans `autosource`
- `maxlength` {Numéro} une longueur maximale
- `minvalue` {Numéro} par minute. valeur pour le type de numéro (par défaut : `undefined`)
- `maxvalue` {Numéro} un maximum. valeur pour le type de numéro (par défaut : `undefined`)
- `rebind` {Booléen} si `true` relie `data-bind` sur cet élément uniquement (par défaut : `0`)
- `validate` {String} optionnel, condition de validation de valeur, peut contenir un lien vers `function(value)` ou `!!value.match(/[a-z]+/)`
- `multiline` {Boolean} facultatif, active le multiligne + ajoute la classe `editable-multiline` (`inline-block` + `width:100%`) lors de l'édition (par défaut : `false`)
- `raw` {Booléen} facultatif, lorsque `true` alors le contenu HTML actuel sera comme espace réservé si la valeur est `nullable` (par défaut : `true`)
- `accept` {String} facultatif, condition d'acceptation de valeur, peut contenir un lien vers `function(value)` ou `!!value.match(/[a-z]+/)` est similaire à `validate`
- `empty` {String} facultatif, active une valeur vide et peut contenir une étiquette vide ou `1` ou `true` pour l'auto `rebind` du classeur
- `invalid` {String} facultatif, un lien vers la méthode `method(el, isInvalid, meta)` est évalué lorsque l'élément est invalide et vice-versa

__Méthodes__ :

- __NEW__ : `component.changed()` renvoie un objet avec des données modifiées

__Bon à savoir__ :

- si l'utilisateur appuie sur `key` alors l'élément modifiable contiendra la classe `keypressed` tant qu'il n'a pas quitté le contrôle
- chaque élément modifié contiendra la classe `changed`
- si le composant change certaines valeurs, l'élément principal contiendra la classe `ui-editable-changed`
- si l'élément a `data-bind` avec `empty`, il sera effacé après le focus
- __NEW__ prend désormais en charge le type `tags`. Pour l'instant, prend en charge uniquement avec `rebind` et `data-bind`. (la liaison de données `template` avec `{jQuery selector}` fonctionne à partir de `+v18`)
- __NEW__ si l'élément (__ou parent, ou parent de parent__) contient l'attribut `data-disabled="1"`, le contrôle sera désactivé
- __NEW__ éléments masqués et désactivés ne seront pas validés

Utilisez-le avec `<ui-component name="editable">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

```html example.html
<style>
	.changed {}
	.changed::after { float: right; content: '+'; margin-left: 5px; font-weight: normal; color: orange; }
</style>

<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY directory"></ui-component>

<ui-component name="editable" path="form">
	<div style="width:500px;padding:10px;border:1px solid #E0E0E0">

		<div class="row">
			<div class="col-xs-3">
				Name:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.name" config="html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Email:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.email" config="html" class="editable block" data-editable="required:1;type:email"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Nickname:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.nickname" config="empty:Nickname;html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Framework:
			</div>
			<div class="col-xs-9">
				<ui-bind class="editable block" config="html;empty:Choose a framework;change:renderframework" path="form.frameworkid" data-editable="dirsource:frameworks;"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Country:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.countries" config="template:{#countrytags}" class="editable block" data-editable="rebind:1;dirsource:countries;type:tags"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Date:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.date" config="html:(new Date() || value).format('yyyy-MM-dd')" class="editable block" data-editable="type:date"></ui-bind>
			</div>
		</div>
	</div>
	<pre><ui-bind path="form" config="html:JSON.stringify(value, null, '  ')"></ui-bind></pre>
</ui-component>

<script type="text/html" id="countrytags">
	{{ foreach m in value }}<span class="editable-tag"><i class="ti ti-times"></i>{{ m }}</span>{{ end }}
</script>


<script>

	// Alternative to tags (ui-bind path="path" config="change:myfunc")
	function myfunc(data, path, el) {
		if (!data)
			return el.html('');
		var template = '<span class="tag"><i class="ti ti-times"></i>{0}</span>';
		var html = '';
		for (var i = 0; i < data.length; i++)
			html += template.format(data[i]);
		el.html(html);
	}

	var frameworks = [{ id: 0, name: 'Nothing', template: '<b>{{ name }}</b>' }, { id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var countries = ['Slovakia', 'Poland', 'Hungary', 'Germany', 'USA', 'Austria', 'Poland', 'Czechia'];
	var form = {};
	form.date = new Date();
	form.name = 'Peter Širka';
	form.countries = ['Slovakia', 'Hungary'];
	form.frameworkid = 0;

	function renderframework(value, path, el) {
		return value ? frameworks.findValue('id', value, 'name', DEF.empty) : DEF.empty;
	}

</script>
```