j-Properties

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

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 :

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 dayLe 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

<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.

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>