# j-Properties

> Le composant utilise les composants j-DatePicker, j-TimePicker, j-Directory, j-Emoji, j-ColorPicker et j-FaIcons.

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

Le composant utilise les composants `j-DatePicker`, `j-TimePicker`, `j-Directory`, `j-Emoji`, `j-ColorPicker` et `j-FaIcons`.

__Configuration__ :

- `dateformat` {String} un format de date (defaut: `yyyy-MM-dd`)
- `timeformat` {String} un format de temps (défaut: `HH:mm`)
- `datetimeformat` {String} un format date/heure (defaut: `yyyy-MM-dd HH:mm`)
- `height` {Numéro} une hauteur de l'élément (defaut: `undefined`)
- `parent` {String} jQuery sélecteur pour la configuration automatique de hauteur (pour être `window`, `parent` ou `custom`)
- `margin` {Numéro} marge verticale (defaut: `0`)
- `change` {String} un chemin vers la méthode `method(item, replace_text(new_text))` (exécuté si une valeur est modifiée) et l'argument `replace_text` est facultatif
- `scrollbar` {Boolean} permet la barre de scroll (defaut: `true`)
- `visibleY` {Boolean} affiche une barre de scroll (defaut: `true`)

__Déclaration de données__ :

```javascript
var form = [];
form.push({ group: 'Personal', label: 'First name', name: 'user.firstname', type: 'string', value: 'Peter', transform: 'capitalize' });
form.push({ group: 'Personal', label: 'Last name', name: 'user.lastname', type: 'string', value: 'Širka', placeholder: 'String' });
form.push({ group: 'Personal', label: 'Age', name: 'user.age', type: 'number', value: 33, min: 30 });
form.push({ group: 'Personal', label: 'Birth date', name: 'user.birth', type: 'date', value: NOW });
form.push({ group: 'Additional', label: 'Newsletter', name: 'user.newsletter', type: 'bool', value: true });
form.push({ group: 'Additional', label: 'City', name: 'user.city', type: 'list', value: 2, items: 'items', dirsearch: 'Search city', dircustom: true });
form.push({ group: 'Additional', label: 'Color', name: 'user.color', type: 'color', value: '#e73323' });
form.push({ group: 'Additional', label: 'Icon', name: 'user.icon', type: 'fontawesome', value: 'ti ti-home' });
form.push({ group: 'Additional', label: 'Emoji', name: 'user.emoji', type: 'emoji', value: '', show: 'n => n.age === 33' });
```

__Propriétés de données dans la déclaration des données__:
- `name` {String} un identifiant d'objet (exigé)
- `label` {String} un étiquette (ne nécessite)
- `group` {String} un nom de groupe (require)
- `type` {String} un type (ne nécessite)
- `placeholder` {String} un locataire (soutenir quelques types seulement)
- `transform` {String} pour le type `string` seulement, peut contenir `capitalize`, `uppercase`, `lowercase` ou `slug`
- `maxlength` {Numéro} pour le type `string` seulement
- `validate` {RegExp/String} pour le type `string` seulement, peut contenir `email`, `phone` ou `url`
- `min` {Numéro} pour le type `number` seulement
- `max` {Numéro} pour le type `number` seulement
- `inc` {Nombre/String} augmente une valeur selon la valeur, ciblée pour `number` ou `date` (Pour contenir `1 day` ou `-1 day`Le type uniquement
- `required` {Boolean} pour le type `string`, `number` ou `date`
- `dirsearch` {String/Boolean} un locataire pour le type `list` seulement, boolean désactive la recherche
- `dircustom` {Boolean} permet une valeur personnalisée pour le type `list` seulement
- `dirkey` {String} un nom clé pour l'étiquette/nom, ciblé uniquement pour le type `list` (défaut: `name`)
- `dirvalue` {String} un nom clé pour la valeur, ciblé uniquement pour le type `list` (defaut: `id`)
- L'adresse URL de `detail` {String} pour l'obtention de données pour le type `list`, par exemple: `/users/{0}/` et `{0}` seront remplacés par la valeur de la liste
- `items` {Object Array/String} articles pour le type `list` seulement, la barre peut contenir un chemin vers `Array` ou `URL address` à rechercher
- `show` {Arrow function}, exemple: `data => data.KEY === 'SOMETHING'` --> affiche l'élément si la condition est valide

__Les types autorisés dans les données__:

- `string`
- `bool`
- `number`
- `date`
- `list`
- `color`
- `emoji`
- `fontawesome`

__Les types manquants__:

- `datetime`
- `time`
- `file`
- `months`

### Mode persistant

```html
<ui-component name="properties" path="form" config="parent:window">
	<script type="text/html">
		[
			{ group: 'Personal', label: 'First name', name: 'firstname', type: 'string', transform: 'capitalize' },
			{ group: 'Personal', label: 'Last name', name: 'lastname', type: 'string', placeholder: 'String' },
			...
			...
			...
			{ group: 'Additional', label: 'Emoji', name: 'emoji', type: 'emoji', show: 'n => n.age === 33' }
		]
	</script>
</ui-component>

<script>
	var form = { firstname: 'John', lastname: 'Connor' };
</script>
```

### Bon à savoir

Le composant étend l'Array en ajoutant :

- Le champ `invalid` {Boolean} détermine si le `value` est invalide (défaut: `undefined`)
- Le champ `changed` {Boolean} détermine si le `value` a été modifié (défaut: `undefined`)
- Le champ `prev` contient une valeur initiale

Utilisez-le avec `<ui-component name="properties">`. 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
<ui-component name="LAZY directory"></ui-component>
<ui-component name="LAZY colorpicker"></ui-component>
<ui-component name="LAZY faicons"></ui-component>
<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY timepicker"></ui-component>
<ui-component name="LAZY emoji"></ui-component>

<div style="width:400px;float:right">
	<ui-component name="properties" path="form" config="parent:window"></ui-component>
</div>

<script>
	var items = [{ id: 2, name: 'Banská Bystrica' }, { id: 3, name: 'Bratislava' }];
	var form = [];
	form.push({ group: 'Personal', label: 'First name', name: 'firstname', type: 'string', value: 'Peter', transform: 'capitalize' });
	form.push({ group: 'Personal', label: 'Last name', name: 'lastname', type: 'string', value: 'Širka', placeholder: 'String' });
	form.push({ group: 'Personal', label: 'Age', name: 'age', type: 'number', value: 33, min: 30 });
	form.push({ group: 'Personal', label: 'Birth date', name: 'birth', type: 'date', value: NOW });
	form.push({ group: 'Additional', label: 'Newsletter', name: 'newsletter', type: 'bool', value: true });
	form.push({ group: 'Additional', label: 'City', name: 'city', type: 'list', value: 2, items: 'items', dirsearch: 'Search city', dircustom: true });
	form.push({ group: 'Additional', label: 'Color', name: 'color', type: 'color', value: '#e73323' });
	form.push({ group: 'Additional', label: 'Icon', name: 'icon', type: 'fontawesome', value: 'ti ti-home' });
	form.push({ group: 'Additional', label: 'Emoji', name: 'emoji', type: 'emoji', value: '', show: 'n => n.age === 33' });
</script>
```