up de y

on test en amont du chargement des gamutables si le localstorage n'est
pas saturé, pour ca, on essaye d'ecrire une string de 100 * "gamutable"
Si c'est Ok, on supprime cette entrée Sinon, on vidange tout le
localstorage

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 yarn.lock
+test*

README.md

@@ -1,35 +1,92 @@
 # gamutable
 
+##fontello API
+
+1. Ouvrir le navigateur
+
+```bash
+fontello-cli open
+```
+
+1. mettre à jour la police
+
+```bash
+fontello-cli install --css css --font font
+```
+
+## Stockage
+
+> On utilise maintenant la lib localforage : https://localforage.github.io/localForage/
+> Dans cette nouvelle version, on découpe le stockage en 2:
+
+- le header en localstorage avec la cle prefixe par `header_` afin d'éviter les pb avec les anciens stockages
+- le table est stocké via localforage : en indexedb et async
+
 ## Configuration
+
 Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
 
+### PHP dans php.ini
+
+- post_max_size which is directly related to the POST size
+- upload_max_filesize which may be unrelated, not sure
+- max_input_time, if the POSt takes too long
+- max_input_nesting_level if your data is an array with a lot of sublevels
+- max_execution_time, but quite sure it’s not that
+- memory_limit, as you may reach a size exceding the subprocess allowed memory
+- max_input_vars, if your data array has many elements => **le plus important**
+
 ## Utilisation
-1. Charger l'inclure (5 args possibles et facultatifs)
+
+- charger l'inclure (5 args possibles et facultatifs)
+
 ```html
 <INCLURE{fond=inclure/gamutable,env}>
 
  Ou avec tous les arguments facultatifs
 
+[(#SET{pdfuri,#URL_PAGE{spipdf}
+	|parametre_url{spipdf,mon_fichier_pdf}
+	|parametre_url{nom_fichier,mon_nom_de_fichier_pdf}
+})]
 <INCLURE{fond=inclure/gamutable,
 	apiuri="spip.php?page=json_souscripteurs.json",
+	namepdf="resultats_epreuve_type-1",
+	fichierpdf="resultats_epreuve_type-1", // obligatoire si on veut pouvoir afficher
+	argpdf="#ENV{argpdf}"
 	tparpage=[15,25,50,'Tous'],
 	champcsv="search",
 	delimitercsv=";",
-	urlvuebloc=spip.php?page=mon_bloc_type_html,
+	htmlvuebloc=exemple_bloc, // voir fichier d'exemple : exemple_bloc.html
 	vueblocdefaut='bloc ou tableau', // par defaut tableau
 	namecsv="souscripteurs.csv",
-	url_sort_asc="#CHEMIN{...}"
-	url_sort_desc="#CHEMIN{...}"
+	url_sort_asc="#CHEMIN{...}",
+	url_sort_desc="#CHEMIN{...}",
+	stockage="indexeddb", // par defaut : localstorage
+	includespip="#ENV{includespip}", // pour ajouter un code html dans la ligne au dessus du tableau
+	nomBlocAjaxReload="nom bloc a recharger à la fin du chargement des donnees",
+	filtrerselect=[(#ENV{filtrerselect})],
 	env
 }>
-```
->url_sort_asc et url_sort_desc => surcharge possible des icones de tri de colonnes
 
-1. Surcharger `json_gamutable.json.html` en suivant son modele
-* pour le header c'est de la forme : "champ":"label"
-* **IMPORTANT** pour le content du json, il que le cle de la  KEY de la table soit "id" et non pas "id_souscription"
-* pour les champs date, pour avoir l'ordre de la col, il faut le format : dd/mm/yyyy ou dd/mm/yy
-* on peut ajouter une clé classes pour ajouter des classes spécifiques à certaines colonnes
+```
+
+- **url_sort_asc** et **url_sort_desc** => surcharge possible des icones de tri de colonnes
+
+## les filtrages par url sont :
+
+- &trier=champ1|asc => OK
+- &filtrer=champ1|valeur1 => OK
+- &afficher=50 => OK
+- &rechercher=toto => OK
+
+## Personnalisation du contenu : surcharger `json_gamutable.json.html` en suivant son modele
+
+- pour le header c'est de la forme : "champ":"label"
+- **IMPORTANT** pour le content du json, il que le cle de la KEY de la table soit "id" et non pas "id_souscription"
+- pour les champs date, pour avoir l'ordre de la col, il faut le format : dd/mm/yyyy ou dd/mm/yy
+- on peut ajouter une clé classes pour ajouter des classes spécifiques à certaines colonnes
+
 ```json
 "classes":{
 	"nom": "toto",
@@ -37,26 +94,159 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
 }
 ```
 
-1. Pour utiliser **les actions** :
-```html
-[(#SET{statut,
-	#SET{args,#ID_SOUSCRIPTION|concat{-}|concat{#STATUT}}
-	<a class="url_action" data-id="#ID_SOUSCRIPTION" href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]">
-		[(#STATUT|!={publie}|oui)
-			<i title="Souscription en attente" class="fa fa-check fa-2x orange" aria-hidden="true"></i>
-		]
-		[(#STATUT|=={publie}|oui)
-			<i title="Souscription validée" class="fa fa-check fa-2x verte" aria-hidden="true"></i>
-		]
-	</a>
-})]
-"statut" : [(#GET{statut}|json_encode)],
-```
-* il faut ajouter data-confirm="Confirmez vous ..." si on veut ajouter un popin de confirmation
-* il faut ajouter data-id="" si on veut recharger que cette ligne
-* si une variable du nom de `nomBlocAjaxReload` est définie, alors, un ajaxReload de ce bloc sera joué dans la fonctione de callback de l'action
+- On peut ajouter des filtres par colonne soit avec un select soit avec un input
+
+```json
+"filtreCol" : {
+	"statut" : "select",
+	"nom": "select",
+	"prenom": "input"
+}
+```
+
+- On peut ajouter des ordre de tri par colonne : `asc` ou `desc`
+
+```json
+"ordreCol" : {
+	"nom" : "desc"
+}
+```
+
+- recharger qu'une partie du json via le timestamp (maj), il faut ajouter le critere : `{maj > #ENV{maj,0}}` et la clé dans le header :
+
+```json
+"maj": [(#CONFIG{derniere_modif_osdve_intervention}|tsEnDate|json_encode)]
+```
+
+- On peut ajouter des elements que l'on veut supprimer si on utilise le {maj}
+
+```json
+"a_supprimer" : [ <BOUCLE_articlesAsup(ARTICLES){si #ENV{maj}}{staut = poubelle}{','}{maj > #ENV{maj}}> #ID_ARTICLE </BOUCLE_articlesAsup> ]
+```
+
+## Utiliser les actions :
+
+```html
+[(#SET{statut, #SET{args,#ID_SOUSCRIPTION|concat{-}|concat{#STATUT}}
+<a
+  class="url_action"
+  data-id="#ID_SOUSCRIPTION"
+  href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]"
+>
+  [(#STATUT|!={publie}|oui)
+  <i
+    title="Souscription en attente"
+    class="fa fa-check fa-2x orange"
+    aria-hidden="true"
+  ></i>
+  ] [(#STATUT|=={publie}|oui)
+  <i
+    title="Souscription validée"
+    class="fa fa-check fa-2x verte"
+    aria-hidden="true"
+  ></i>
+  ]
+</a>
+})] "statut" : [(#GET{statut}|json_encode)],
+```
+
+- il faut ajouter data-confirm="Confirmez vous ..." si on veut ajouter un popin de confirmation
+- il faut ajouter data-id="" si on veut recharger que cette ligne
+- si data-id="" est négatif, cela supprime cette ligne
+- si une variable du nom de `nomBlocAjaxReload` est définie (ou un data-ajaxreload), alors, un ajaxReload de ce bloc sera joué dans la fonctione de callback de l'action
+- rechargement si 2 gamutables :
+  - par défaut `gamutableUn` si le bouton est dans `gamutableUn`, `gamutableDeux` si il est dans `gamutableDeux`
+  - possibilité d'ajouter à la balise `<a>` qui déclenche l'action un `data-treload` = `1` | `2` | `12` pour forcer le rechargement de l'un ou l'autre ou les deux gamutables
+
+## Utiliser les crayons :
+
+```json
+[{
+"header":{
+"id": "ID",
+"activite": "Activité",
+"massif": "Massif",
+"sommet": "Sommet",
+"voie": "Voie",
+"participants_max": "Participants max",
+"tarif_prive": "Prix"
+},
+"crayons":{
+	"tarif_prive" : "activite"
+}
+```
+
+Dans cet exemple :
+
+- `activite` est le raccourci du nom de la table (spip_activites => pas de préfixe + singulier)
+- `tarif_prive` est **obligatoirement** l'intitulé du champs dans cette table (si besoin il faut modifier la clé du champ...)
+
+Pour une colonne utiliser les crayons sur une table différente de celle de l'id "principal" (celui utilisé comme id des lignes du JSon) :
+
+- dans le bloc header du JSon on passe le raccourci du nom de la table
+- dans le bloc html on passe l'id de l'objet dans cette table
+
+```json
+{
+	"header":{
+		"id": "n°",
+		"email": "Email",
+		"telephone": "Téléphone",
+		"adresse": "Adresse"
+	},
+	"crayons": {
+		"email": "auteur",
+		"telephone": "auteur",
+		"adresse": "gi"
+	}
+},
+{
+	"html": {
+		"id": #ID_AUTEUR,
+		"email": [(#GET{email}|json_encode)],
+		"telephone": [(#GET{telephone}|json_encode)],
+		"adresse": [(#GET{adresse}|json_encode)]
+	},
+	"crayons": {
+		"adresse": [(#GET{id_gis}|intval)]
+	}
+}
+```
+
+Dans cet exemple :
+
+- les crayons sur `email` et `telephone` vont éditer les champs `email` et `telephone` de la table `spip_auteurs` pour l'`id_auteur` passé en `id` de la ligne
+- les crayons sur `adresse` vont éditer le champ `adresse` de la table `spip_gis` pour l'`id_gis` passé en valeur de `crayons/adresse` de la ligne
+
+### Caches
+
+l'invalidation du cache ne se fait que pour les objets publiés
+Les Crayons utilisent l'api modifier_objet de SPIP qui invalide le cache que si objet est publie, il faut donc forcer l'invalidation du cache en passant pour le pipeline post_edition
+
+```php
+/**
+ * invalider le cache pour l'objet souscription
+ *
+ */
+function prefixPlugin_post_edition($flux){
+	if ($flux['args']['table'] === "spip_souscriptions") {
+		include_spip('inc/invalideur');
+		suivre_invalideur("id='id_souscription/1'");
+	}
+	return $flux;
+}
+```
+
+### Autorisations
+
+Il faut surcharger cette autorisation : autoriser_crayonner_dist() `inc/crayons`
+
+### @Deprecated
+
+=> integre par default dans la 3.4.2 pour tous les objets
+
+- il faut utiliser le pipeline `crayons_vue_affichage_final`
 
-4. Pour utiliser **les crayons**, il faut utiliser le pipeline `crayons_vue_affichage_final`
 ```php
 /**
  * injection du reload de vuejs pour les crayons de l'objet souscription
@@ -74,87 +264,131 @@ function prefixPlugin_crayons_vue_affichage_final($flux){
 	return $flux;
 }
 ```
-** Attention **
-Pour les crayons, l'invalidation du cache ne se fait que pour les objets publiés
-Les Crayons utilisent l'api modifier_objet de SPIP qui invalide le cache que si objet est publie, il faut donc forcer l'invalidation du cache en passant pour le pipeline post_edition
-```php
-/**
- * invalider le cache pour l'objet souscription
- *
- */
-function prefixPlugin_post_edition($flux){
-	if ($flux['args']['table'] === "spip_souscriptions") {
-		include_spip('inc/invalideur');
-		suivre_invalideur("id='id_souscription/1'");
-	}
-	return $flux;
-}
-```
 
-5. Pour utiliser une **mediabox** ou **modalbox** et rechargement total/partiel de la page: on peut demander à vuejs de recharger tout le json ou simplement une ligne dans le cas d'une modification
+## Utiliser une mediabox ou modalbox :
+
+- pour rechargement total/partiel de la page: on peut demander à vuejs de recharger tout le json ou simplement une ligne dans le cas d'une modification
   1.  Dans le json : ajouter un lien avec la classe mediabox ou modalbox (cf ex de json)
   ```html
-	"modif" : [(#VAL{<a class="modalbox" href="[(#URL_PAGE{souscrire}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{redirect,gamutable})]"><i class="fa fa-pencil"></i></a>}|json_encode)],
+  "modif" : [(#VAL{<a
+    class="modalbox"
+    href="[(#URL_PAGE{souscrire}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{redirect,gamutable})]"
+    ><i class="fa fa-pencil"></i></a
+  >}|json_encode)],
   ```
-	2. on charge en ajax le formulaire en l'englobant d'une div avec la classe ajax (du pur spip) dans ce cas, à la validation du form, si pas de `redirect` spécifié alors, retour dans le formualaire, avec le message `$retour['message_ok']` qui s'affiche.
-	Détournement de SPIP: dans le message_ok, on fais passer l'id  de la cle primaire qui va declencher le rechargement du json QUE pour cette ligne et ca c'est vuejs qui s'en occupe ici (html du formulaire):
-	```html
-	[(#ENV**{message_ok}|=={gamutable}|oui)
-		<script type="text/javascript">
-			app.rechargerJson();
-			$.modalboxclose();
-		</script>
-	]
-	```
-	3. Dans le traiter du formulaire => supprimer la redirection et ajouter :
+  2.  On charge en ajax le formulaire en l'englobant d'une div avec la classe ajax (du pur spip)
+  3.  Dans le traiter du formulaire => supprimer la redirection et on ajoute :
   ```php
   if ($retour === 'gamutable') {
   	$res['redirect'] = "";
-		$res['message_ok'] = "gamutable";
+  	// pour recharger que la ligne $id_patate du tableau
+  	$res['message_ok'] = gamutable_fermer_modalbox($id_patate);
+  	// ou si on veut recharger tout le tableau
+  	$res['message_ok'] = gamutable_fermer_modalbox();
   }
   ```
-	4. Dans le html du formulaire, ajouter :
-	```html
-	[(#ENV**{message_ok}|=={gamutable}|oui)
-		<script type="text/javascript">
-			app.rechargerJson();
-			$.modalboxclose();
-		</script>
+- Ajouter `data-confirm="Confirmez vous ..."` si on veut ajouter une popin de confirmation
+
+## Utiliser deux Gamutables dans la même page :
+
+- créer les 2 apiuri dans l'#ENV : **apiuri** et **apiuri_deux**
+- tous les paramètres envoyés a `inclure/gamutable` peuvent être "dédoublés" avec le suffixe **\_deux**
+- pour personnaliser le contenu entre les 2 gamutables on peut surcharger `inclure/separateur_gamutables`
+- Exemple :
+
+```html
+<div class="tableau_resas">
+	#SET{s,#VAL{spip.php?page=json_resas.json}}
+	[(#ENV{statut}|oui)
+		[(#SET{s,#GET{s}|concat{&statut=}|concat{#ENV{statut}}})]
 	]
-	```
-	*il faut ajouter data-confirm="Confirmez vous ..." si on veut ajouter une popin de confirmation*
+	#SET{t,#VAL{spip.php?page=json_totaux.json}}
+	[(#SET{t,#GET{t}|concat{&saison=}|concat{#ENV{saison,#DATE|affdate{Y}}}})]
+	<INCLURE{fond=inclure/gamutable,
+		titregamutable="Le premier gamutable",
+		titregamutable_deux="Le deuxieme gamutable",
+		apiuri=#GET{s},
+		apiuri_deux=#GET{t},
+		tparpage=[15,25,50,'Tous'],
+		tparpage_deux=[20,50,'Tous'],
+		champcsv="search",
+		champcsv_deux="search",
+		delimitercsv=";",
+		delimitercsv_deux=";",
+		namecsv="premier.csv",
+		namecsv_deux="deuxieme.csv",
+		id_gamutable="id_premier",
+		id_gamutable_deux="id_deuxieme",
+		env
+	}>
+</div>
+```
 
-	5. Un exemple plus concret:
-		- le HTML du formulaire:
-		```html
-		[(#ENV**{message_ok}|oui)
-			<script type="text/javascript">
-				id = "#ENV**{message_ok}";
-				id = parseInt(id);
-				if (id > 0 && id < 9999999999) {
-					app.rechargerJson(id);
-					$.modalboxclose();
-				}
-				if (id === 9999999999) {
-					app.rechargerJson();
-					$.modalboxclose();
-				}
-				delete id;
-			</script>
-		]
-		```
-		- le traiter du PHP:
-		```php
-			if ($redirect === "gamutable") {
-				$retour['redirect']   = "";
-				$retour['message_ok'] = "$id_auteur";
-			} elseif ($redirect === 'all'){
-				// on recharge dans gamuTable tout le tableau car il peut y avoir plusieurs lignes avec le meme souscripteur
-				$retour['redirect']   = "";
-				$retour['message_ok'] = "9999999999";
-			}else {
-				$retour['redirect'] = $redirect;
-			}
-		```
+## URLs avec filtrage :
 
+Concatener le filtrage dans l'url d'appel du json :
 
+```html
+http://guides.spip/?page=grille_tarifs&activite=Alpinisme
+```
+
+ou
+
+```html
+<a class="btn" href="[(#URL_PAGE{commandes}|parametre_url{annee,2021})]"
+  >2021</a
+>
+```
+
+## cellule checkbox
+
+Il est possible d'ajouter pour une colonne des checbox qui declencheront soit une action, soit l'appel d'un formulaire.
+
+1. il faut ajouter dans le header la cle checkbox (cf ex) pour definir l'url du payload de type action ou page= (formulaire)
+   avec comme nom de premier parametre : data qui sera transformer en php via :
+
+```php
+	$data = json_decode($data,true);
+```
+
+2. Puis la valeur de la cellule doit etre du type dataid-#ID_PATATE (cf ex)
+
+## Refs
+
+https://unpkg.com/browse/vue-next-select@2.10.4/
+
+## Développement :
+
+- désormais tout le JS autour du gamutable est dans `src/gamutable.js`
+- installer les dépendances avec `npm install` ou `pnpm install`
+- pour développer, le mieux est d'utiliser la commande `npm run dev` => qui va lancer un serveur de test, SPIP sait l'utiliser.
+- une fois le dev terminé, il faut builder le code `npm run build`
+
+une autre alternative, est d'utiliser la commande `npm run watch` qui permet de builder après chaque changement de code source, mais le temps est BEAUCOUP plus lent qu'avec la commende `npm run dev`
+
+> A utiliser pour une micro modification
+
+### Modif pour contourner le problème de NODE_PATH provoqué par `npm run dev` avec Gitbash sous Windows :
+
+- dans `package.json` remplacer la ligne
+
+```json
+"dev": "APP_ENV=development vite",
+```
+
+par
+
+```json
+"dev": "SET APP_ENV=development & vite",
+```
+
+### Problème de blocage des requêtes multi-origine provoquée par `npm run dev` :
+
+- `npm run dev` utilisant un serveur virtuel local sur le port 5134, on se retrouve avec une erreur CORS dans le navigateur si le dev est fait sur une URL en https.
+  Par exemple :
+
+```
+Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://localhost:5134/gamutable.js. Raison : échec de la requête CORS.
+```
+
+> TODO : trouver comment supprimer cette limitation... (la config `Header set Access-Control-Allow-Origin "*"` dans le vhost apache ne suffit pas !)

action/pdf_gamutable.php

@@ -0,0 +1,66 @@
+<?php
+if (!defined('_ECRIRE_INC_VERSION')) {
+	return;
+}
+defined('_SERVEUR_MODE') || define('_SERVEUR_MODE', 'PROD');
+
+function action_pdf_gamutable_dist() {
+	include_spip('inc/autoriser');
+	if (! autoriser('generer', 'gamutablepdf') && _SERVEUR_MODE === 'PROD') {
+		return false;
+	}
+
+
+	$fichierpdf = _request('fichierpdf') ?? '';
+	$langpdf    = _request('langpdf');
+	$namepdf    = _request('namepdf') ?? $fichierpdf;
+	$namepdf    = str_replace('/', '_', $namepdf);
+	$header     = _request('header') ?? [];
+	$Tdata      = _request('Tdata') ?? [];
+	$arg        = _request('arg') ?? '';
+
+	if (empty($header) or empty($fichierpdf)) {
+		exit;
+	}
+	$header = array_values($header);
+	$Tcles = [];
+	if (!empty($Tdata)) {
+		foreach ($Tdata as $d) {
+			$Tcles[] = $d['id'];
+		}
+	}
+
+	if (find_in_path('gamutable_pdf/' . $fichierpdf . '.html')) {
+		$set = [
+			'arg' => $arg,
+			'lang' => $langpdf ?? $GLOBALS['meta']['langue_site'] ?? 'fr'
+		];
+		if (!empty($Tcles)) {
+			$set = array_merge($set,  ['Tids' => $Tcles]);
+		}
+		$fond = recuperer_fond('gamutable_pdf/' . $fichierpdf, $set);
+
+	} else {
+		// TODO : gamutable pourrait venir avec un fichier de generation generique
+		// d'un pdf
+	}
+
+	include_spip('spipdf_options');
+	include_spip('inc/spipdf');
+
+	$namepdf = date("Y-m-d_H-i") . '_' . $namepdf;
+	$a = spipdf_html2pdf($fond);
+	$dir = sous_repertoire(_DIR_IMG . 'pdfgamutable');
+	$chemin = $dir . $namepdf . '.pdf' ;
+	file_put_contents($chemin, $a);
+
+	$id_job = job_queue_add(
+		'gamutable_clean_pdf',
+		'Gamutable nettoyer pdf',
+		[$chemin],
+		'inc/gamutable_clean_pdf',
+		false,
+		time() + 20
+	);
+	echo url_absolue($chemin);
+}

certs/vite.crt.pem

@@ -0,0 +1,24 @@
+-----BEGIN CERTIFICATE-----
+MIID+zCCAmOgAwIBAgIRAOOJzMD8sw5q19A4zphuQV0wDQYJKoZIhvcNAQELBQAw
+TzEeMBwGA1UEChMVbWtjZXJ0IGRldmVsb3BtZW50IENBMRIwEAYDVQQLDAl0b2ZA
+c2lyYWMxGTAXBgNVBAMMEG1rY2VydCB0b2ZAc2lyYWMwHhcNMjIxMjA4MDcwNTMw
+WhcNMjUwMzA4MDcwNTMwWjA9MScwJQYDVQQKEx5ta2NlcnQgZGV2ZWxvcG1lbnQg
+Y2VydGlmaWNhdGUxEjAQBgNVBAsMCXRvZkBzaXJhYzCCASIwDQYJKoZIhvcNAQEB
+BQADggEPADCCAQoCggEBALz7kaH4NETNItBjcBiV6xt3Z+djb+06AdPOitG14lGU
+NZRXNZ/tFLrncN9ptPyU2wkgqQCNuZzyK9d/K/BRiVahXl+6YqKLR5jeg6s2RLIp
+DYs1k63OJhmvGMSNjO+UWmBaI7zGqLgmrY0qCV8tTfLHfisi7/G7sUH9m+eV0Eih
+RIYjXXf9k3ZeEnLsTK297JPlwipLEZ5Io3wI1+x2Easovxfl6urCHtrpyyUJE4L5
+Y/o2VhfFcEIrIIpyJyrQdn3M3jSEvJWKvK2etJoXezgXnMjh/YhMg7HZj5CeKCPq
+IdNjZare2xWwu4X5AdaZbAN04G8gc77VDjqt4XYm/KcCAwEAAaNkMGIwDgYDVR0P
+AQH/BAQDAgWgMBMGA1UdJQQMMAoGCCsGAQUFBwMBMB8GA1UdIwQYMBaAFIVU0l9v
+NM0nWDIGPGYOgJdkOxjRMBoGA1UdEQQTMBGCCWxvY2FsaG9zdIcEfwAAATANBgkq
+hkiG9w0BAQsFAAOCAYEAj9Cab99vgqXfCIsCMc2oMPWLL0iZ9O9DgeAGu/nUNfI1
+fVgkus+WS2TVmTD828N/uo/tBBY+yjH8a79bAClK5aCcsom4OFFzPod9PhfLqqSv
+RsgvgZEHPZNF/Jobsf1f3nN6Xz+AX3RUQrbHlm8QqK3ir8u43VBRH56A1FT3Hob6
+MtxqCHuhUFV0WRIb8E73Q6n69k+IAfaZvY3wZUXVH78FFlYK3SIv/NU1HC2FByXF
+FKejQ9vYJV0QmY/sDZYM66A0qB03oEyGIC3Fk+ze4+gHyuVi1XwcYmxiYQgYwFMQ
+ZEDjPy64s1t1lpbmbPtrp7pIAAYIYXOEWlTB2re0GmiYTFpcDuZYicxw5Ng9uL/e
+lRqXCDooF8jr2H+H8zoqEfvNMX6eMslsfrOca30MZxHUL+Vwqukt+va6uGzDJBDU
+AzvCw1Y4kKxnlSgaTrCnu/aT2ejxhhCv6WNVW2WxZiIwaNJxh4ZjOpcEiD9xxxfw
+fko5gu7B+lELkHZ8f4cE
+-----END CERTIFICATE-----

certs/vite.key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQC8+5Gh+DREzSLQ
+Y3AYlesbd2fnY2/tOgHTzorRteJRlDWUVzWf7RS653DfabT8lNsJIKkAjbmc8ivX
+fyvwUYlWoV5fumKii0eY3oOrNkSyKQ2LNZOtziYZrxjEjYzvlFpgWiO8xqi4Jq2N
+KglfLU3yx34rIu/xu7FB/ZvnldBIoUSGI113/ZN2XhJy7EytveyT5cIqSxGeSKN8
+CNfsdhGrKL8X5erqwh7a6cslCROC+WP6NlYXxXBCKyCKcicq0HZ9zN40hLyViryt
+nrSaF3s4F5zI4f2ITIOx2Y+Qnigj6iHTY2Wq3tsVsLuF+QHWmWwDdOBvIHO+1Q46
+reF2JvynAgMBAAECggEBAJPq1DJSc5bmeTlim3qi3ULCUzFpQ1IK9SMzprQ+CMaR
+mt5g5Dgo+PDR9iboNiD84fRi++TTCVUut+IUR+/x4e1MoPGMkWdoXMHqaGS6NUq9
+lzw+0zhXArtXsasmoAlltNd1tkMruyNoIq87F9rHOxurybU5w1UR88wTFNRPDpfJ
+SRiowKbeI5dF+qGIBfRYMb+dEG7CSsjSBmna+wP9jQM/aeaNBVg9sl2xr2qGuVGx
+lFhBoyjBuwdGWfZzIJIXZm2yPCoKJXOzl9HzdSbr9evHOKXGWfUZ8T3tk78PtvZ4
+mmb9kJfX2yhr57ignz6ABoYhAzhYxRvTaQ6RWzSLkwECgYEAzWp3RBokQHlZor4b
+OdygrPJCFgdnmyYf+4+w7zJXgz+pJg/lzKg2xV0Zi+9PPw3Wyz+ncEqGpi1Wt54T
+d31g3bnRZvXtVbf0/1bZFiCacE2ND4lkgpDCOvV2yPoMXJ9lRJt7/BX+4ME4nrDn
+4ocMUzK14kBS86IJ3aC0mvQ7XusCgYEA64UlL3ytWrTx0l0gugqdng4pa+Ct1eoz
+cIcWFpD0JpxOBmV4eRpxvprb1vG+H2UcVpBJnEmgqrwwZCX02X40YpoEhP9RiQ1e
+vr+jkT9aFX9leqhrHbl6H2n8eqrVjszyA94xPHBrx9z6WQRL7sQi3vkc2aUATERG
+7vRkYr67gjUCgYB3qpVOXDhQQyF/2GX+AFSuS/dJ5Ahsbvpkz6HQxzAKKvT8Unia
+EEjQE1uFlOVCo2pFP5DortHgTztcfr9ydd0PbmfaJlyb+i3E7rBK3rV5xQPvUCf4
+lCJCvKr1jA3Vi5owLLA+/AVeo9G7SO3dnrUEZt9krfplKjm7Hhr4xl0r/wKBgQDY
+ZeXc0/mUNl1apCbFyas45lo4vJ/8xMuuwPASm+047LTkO6eN3jZUo4UK4eOGhSic
+gMahyyTMu0zbN+TZUZRgZJNygAUyoA5FxV9MvaDPz9Y19Tk2fo0u//rz2rOOGdDk
+rOsgVUsywF9mGwSJxb0kkk9nyquTZ8ilFfiGoik3YQKBgFmE/CObkleRUNOAW6Ca
+mZOfx+zDMb/tsUKvgFUJ3KEtGvUEkvYA/mz+iiPCD7PlkU4+VvNAjhptFGizgIEw
+Y+JYYiATaFBnCqsqoidmn/XTbRj6Oo3ggKniI1/tIibMp6MtSwtVQdYTNlR4IBMt
+xufynO21rb9zTSRqwMsMkRAE
+-----END PRIVATE KEY-----

content/vue3.html

@@ -1,23 +0,0 @@
-<div class="inner">
-
-<div id="hello-vue" class="demo">
-  {{ message }}
-</div>
-
-</div>
-
-<script src="https://unpkg.com/vue@next"></script>
-
-<script type="text/javascript">
-
-const HelloVueApp = {
-  data() {
-    return {
-      message: 'Hello Vue!!'
-    }
-  }
-}
-
-Vue.createApp(HelloVueApp).mount('#hello-vue')
-
-</script>

css/fontello.css

@@ -0,0 +1,140 @@
+
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'devisfacture';
+    src: url('../font/devisfacture.svg?15671513#devisfacture') format('svg');
+  }
+}
+*/
+[class^="gt-"]:before,
+[class*=" gt-"]:before {
+	font-family: "gamutable";
+	font-style: normal;
+	font-weight: normal;
+
+	display: inline-block;
+	text-decoration: inherit;
+	width: 1em;
+	margin-right: .2em;
+	text-align: center;
+	/* opacity: .8; */
+
+	/* For safety - reset parent styles, that can break glyph codes*/
+	font-variant: normal;
+	text-transform: none;
+
+	/* fix buttons height, for twitter bootstrap */
+	line-height: 1em;
+
+	/* Animation center compensation - margins should be symmetric */
+	/* remove if not needed */
+	margin-left: .2em;
+
+	/* you can be more comfortable with increased icons size */
+	/* font-size: 120%; */
+
+	/* Font smoothing. That was taken from TWBS */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	/* Uncomment for 3D effect */
+	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.gt-lg {
+	font-size: 1.5em;
+}
+
+/*
+   Animation example, for spinners
+*/
+.animate-spin {
+	-moz-animation: spin 2s infinite linear;
+	-o-animation: spin 2s infinite linear;
+	-webkit-animation: spin 2s infinite linear;
+	animation: spin 2s infinite linear;
+	display: inline-block;
+}
+
+@-moz-keyframes spin {
+	0% {
+		-moz-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-moz-transform: rotate(359deg);
+		-o-transform: rotate(359deg);
+		-webkit-transform: rotate(359deg);
+		transform: rotate(359deg);
+	}
+}
+
+@-webkit-keyframes spin {
+	0% {
+		-moz-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-moz-transform: rotate(359deg);
+		-o-transform: rotate(359deg);
+		-webkit-transform: rotate(359deg);
+		transform: rotate(359deg);
+	}
+}
+
+@-o-keyframes spin {
+	0% {
+		-moz-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-moz-transform: rotate(359deg);
+		-o-transform: rotate(359deg);
+		-webkit-transform: rotate(359deg);
+		transform: rotate(359deg);
+	}
+}
+
+@-ms-keyframes spin {
+	0% {
+		-moz-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-moz-transform: rotate(359deg);
+		-o-transform: rotate(359deg);
+		-webkit-transform: rotate(359deg);
+		transform: rotate(359deg);
+	}
+}
+
+@keyframes spin {
+	0% {
+		-moz-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-moz-transform: rotate(359deg);
+		-o-transform: rotate(359deg);
+		-webkit-transform: rotate(359deg);
+		transform: rotate(359deg);
+	}
+}

css/gamutable.css

@@ -1,8 +1,86 @@
+tfoot th {
+  color: inherit;
+  background: var(--spip-color-theme-lighter);
+}
+
+.verte {
+	color: #00b800;
+}
+
+.rouge {
+	color: #ff0000;
+}
+
+.gamutable__input--rechercher {
+	padding: 0.25rem 1em;
+}
+
+.vue-tags .vue-tag.selected {
+	font-size: 1.2rem;
+}
+
+div.vue-input>input {
+	font-size: 1.2rem;
+}
+div.vue-input>input {
+	color: inherit;
+}
+
+.tag--ub {
+	display: inline-block;
+}
+
+.gamutable__input--filtrer {
+	font-size: 1.2rem;
+	padding: 5px 5px !important;
+	width: 100%;
+	box-shadow: 0 0 0 1px rgb(153, 153, 153) inset;
+}
+button.gamutable__input--filtrer {
+	width: 20px;
+	border: none;
+	font-weight: bolder;
+}
+
+.gamutable__input--filtrer:valid {
+	font-size: 1.2rem;
+	background-color: rgb(153, 153, 153);
+	color: #000;
+}
+
+.gamutable__input--filtrer:-moz-placeholder-shown {
+	background-color: transparent;
+	color: inherit;
+}
+
+.gamutable__input--filtrer:-ms-input-placeholder {
+	background-color: transparent;
+	color: inherit;
+}
+
+.gamutable__input--filtrer:placeholder-shown {
+	background-color: transparent;
+	color: inherit;
+}
+
+th .vue-select {
+	width: 100%;
+	border-radius: 0;
+}
+
 .gamutable--surTable select,
 .gamutable--surTable input {
 	margin-bottom: 0;
 }
 
+.gamutable--surTable .gamutable-nbrMax {
+	margin-left: 2rem;
+}
+
+.gamutable--surTable .includespip {
+	margin-left: 2rem;
+}
+
 .gamutable--sousTable {
 	display: -ms-flexbox;
 	display: flex;
@@ -15,11 +93,48 @@
 	display: flex;
 }
 
-.gamutable table {
-  font-size: 1rem;
+.gamutable--pagination .page-item {
+	display: -ms-flexbox;
+	display: flex;
 }
 
-.gamutable table th > div {
+.gamutable--pagination .page-link {
+	margin: 0 0.2rem;
+	background-color: #eee;
+	cursor: pointer;
+}
+
+.gamutable--pagination .page-link.on {
+	background-color: #cecece;
+}
+
+.h2-like.titregamutable,
+.h2-like.titregamutable_deux {
+	font-weight: bold;
+}
+
+.gamutable table {
+	font-size: 1em;
+	table-layout: auto;
+}
+
+.gamutable table thead {
+	border: 1px solid rgb(119, 119, 119);
+}
+.gamutable table tfoot {
+	border: 1px solid rgb(119, 119, 119);
+}
+
+.gamutable table .gt_labels {
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-pack: justify;
+	justify-content: space-between;
+	-ms-flex-align: center;
+	align-items: center;
+}
+
+.gamutable table th>div {
 	display: -ms-flexbox;
 	display: flex;
 }
@@ -31,7 +146,12 @@
 
 .gamutable table .iconeTri {
 	float: right;
-  width: 1rem;
+	width: calc(1em + 4px);
+}
+
+.gamutable table .iconeTri .fa {
+	padding: 2px 5px;
+	cursor: pointer;
 }
 
 .gamutable table .tri_col {
@@ -39,11 +159,16 @@
 	fill: #cecece;
 }
 
-.gamutable table .iconeTri > .active {
-  fill: #000;
+.gamutable table .iconeTri>.active {
+	fill: rgb(220, 53, 69);
+	color: rgb(220, 53, 69);
 }
 
-#app .select {
+.gamutable table tbody tr:hover {
+	background-color: rgba(179, 209, 67, 0.27);
+}
+
+.vue-gamutable table.table--zebra tr.select {
 	background-color: rgba(179, 209, 67, 0.47);
 }
 
@@ -56,22 +181,31 @@ th.icone {
 	text-align: center;
 }
 
-td.icone > * {
+tr.filtreColonne th {
+	padding: 0;
+}
+
+tr.filtreColonne th select {
+	margin: 0;
+}
+
+td.icone>* {
 	width: 100%;
 	display: block;
 	padding: 0.5rem;
 	text-align: center;
 }
 
-div.gamutable .url_action {
+.gamutable .url_action:not(.sans_css) {
 	padding: 0.2rem;
-  display: inline-block;
+	display: -ms-inline-flexbox;
+	display: inline-flex;
 	background-color: #f5f5f5;
 	border: 1px solid #cecece;
 	border-radius: 5px;
 }
 
-div.gamutable .url_action:hover {
+.gamutable .url_action:hover {
 	background-color: #cecece;
 }
 
@@ -93,4 +227,701 @@ td.icone i {
 	margin-right: 1rem;
 }
 
+.viderInputSearch {
+	color: #ff0000;
+}
+
+/* blocks widths (percentage and pixels) */
+.w100 {
+	width: 100%;
+}
+
+.w95 {
+	width: 95%;
+}
+
+.w90 {
+	width: 90%;
+}
+
+.w85 {
+	width: 85%;
+}
+
+.w80 {
+	width: 80%;
+}
+
+.w75 {
+	width: 75%;
+}
+
+.w70 {
+	width: 70%;
+}
+
+.w65 {
+	width: 65%;
+}
+
+.w60 {
+	width: 60%;
+}
+
+.w55 {
+	width: 55%;
+}
+
+.w50 {
+	width: 50%;
+}
+
+.w45 {
+	width: 45%;
+}
+
+.w40 {
+	width: 40%;
+}
+
+.w35 {
+	width: 35%;
+}
+
+.w30 {
+	width: 30%;
+}
+
+.w25 {
+	width: 25%;
+}
+
+.w20 {
+	width: 20%;
+}
+
+.w15 {
+	width: 15%;
+}
+
+.w10 {
+	width: 10%;
+}
+
+.w5 {
+	width: 5%;
+}
+
+.w1000p {
+	width: 1000px;
+}
+
+.minw1000p {
+	min-width: 1000px;
+}
+
+.maxw1000p {
+	max-width: 1000px;
+}
+
+.gamutable .w1000p input {
+	width: 1000px;
+}
+
+.w950p {
+	width: 950px;
+}
+
+.minw950p {
+	min-width: 950px;
+}
+
+.maxw950p {
+	max-width: 950px;
+}
+
+.gamutable .w950p input {
+	width: 950px;
+}
+
+.w900p {
+	width: 900px;
+}
+
+.minw900p {
+	min-width: 900px;
+}
+
+.maxw900p {
+	max-width: 900px;
+}
+
+.gamutable .w900p input {
+	width: 900px;
+}
+
+.w850p {
+	width: 850px;
+}
+
+.minw850p {
+	min-width: 850px;
+}
+
+.maxw850p {
+	max-width: 850px;
+}
+
+.gamutable .w850p input {
+	width: 850px;
+}
+
+.w800p {
+	width: 800px;
+}
+
+.minw800p {
+	min-width: 800px;
+}
+
+.maxw800p {
+	max-width: 800px;
+}
+
+.gamutable .w800p input {
+	width: 800px;
+}
+
+.w750p {
+	width: 750px;
+}
+
+.minw750p {
+	min-width: 750px;
+}
+
+.maxw750p {
+	max-width: 750px;
+}
+
+.gamutable .w750p input {
+	width: 750px;
+}
+
+.w700p {
+	width: 700px;
+}
+
+.minw700p {
+	min-width: 700px;
+}
+
+.maxw700p {
+	max-width: 700px;
+}
+
+.gamutable .w700p input {
+	width: 700px;
+}
+
+.w650p {
+	width: 650px;
+}
+
+.minw650p {
+	min-width: 650px;
+}
+
+.maxw650p {
+	max-width: 650px;
+}
+
+.gamutable .w650p input {
+	width: 650px;
+}
+
+.w600p {
+	width: 600px;
+}
+
+.minw600p {
+	min-width: 600px;
+}
+
+.maxw600p {
+	max-width: 600px;
+}
+
+.gamutable .w600p input {
+	width: 600px;
+}
+
+.w550p {
+	width: 550px;
+}
+
+.minw550p {
+	min-width: 550px;
+}
+
+.maxw550p {
+	max-width: 550px;
+}
+
+.gamutable .w550p input {
+	width: 550px;
+}
+
+.w500p {
+	width: 500px;
+}
+
+.minw500p {
+	min-width: 500px;
+}
+
+.maxw500p {
+	max-width: 500px;
+}
+
+.gamutable .w500p input {
+	width: 500px;
+}
+
+.w450p {
+	width: 450px;
+}
+
+.minw450p {
+	min-width: 450px;
+}
+
+.maxw450p {
+	max-width: 450px;
+}
+
+.gamutable .w450p input {
+	width: 450px;
+}
+
+.w400p {
+	width: 400px;
+}
+
+.minw400p {
+	min-width: 400px;
+}
+
+.maxw400p {
+	max-width: 400px;
+}
+
+.gamutable .w400p input {
+	width: 400px;
+}
+
+.w350p {
+	width: 350px;
+}
+
+.minw350p {
+	min-width: 350px;
+}
+
+.maxw350p {
+	max-width: 350px;
+}
+
+.gamutable .w350p input {
+	width: 350px;
+}
+
+.w300p {
+	width: 300px;
+}
+
+.minw300p {
+	min-width: 300px;
+}
+
+.maxw300p {
+	max-width: 300px;
+}
+
+.gamutable .w300p input {
+	width: 300px;
+}
+
+.w250p {
+	width: 250px;
+}
+
+.minw250p {
+	min-width: 250px;
+}
+
+.maxw250p {
+	max-width: 250px;
+}
+
+.gamutable .w250p input {
+	width: 250px;
+}
+
+.w200p {
+	width: 200px;
+}
+
+.minw200p {
+	min-width: 200px;
+}
+
+.maxw200p {
+	max-width: 200px;
+}
+
+.gamutable .w200p input {
+	width: 200px;
+}
+
+.w190p {
+	width: 190px;
+}
+
+.minw190p {
+	min-width: 190px;
+}
+
+.maxw190p {
+	max-width: 190px;
+}
+
+.gamutable .w190p input {
+	width: 190px;
+}
+
+.w180p {
+	width: 180px;
+}
+
+.minw180p {
+	min-width: 180px;
+}
+
+.maxw180p {
+	max-width: 180px;
+}
+
+.gamutable .w180p input {
+	width: 180px;
+}
+
+.w170p {
+	width: 170px;
+}
+
+.minw170p {
+	min-width: 170px;
+}
+
+.maxw170p {
+	max-width: 170px;
+}
+
+.gamutable .w170p input {
+	width: 170px;
+}
+
+.w160p {
+	width: 160px;
+}
+
+.minw160p {
+	min-width: 160px;
+}
+
+.maxw160p {
+	max-width: 160px;
+}
+
+.gamutable .w160p input {
+	width: 160px;
+}
+
+.w150p {
+	width: 150px;
+}
+
+.minw150p {
+	min-width: 150px;
+}
+
+.maxw150p {
+	max-width: 150px;
+}
+
+.gamutable .w150p input {
+	width: 150px;
+}
+
+.w140p {
+	width: 140px;
+}
+
+.minw140p {
+	min-width: 140px;
+}
+
+.maxw140p {
+	max-width: 140px;
+}
+
+.gamutable .w140p input {
+	width: 140px;
+}
+
+.w130p {
+	width: 130px;
+}
+
+.minw130p {
+	min-width: 130px;
+}
+
+.maxw130p {
+	max-width: 130px;
+}
+
+.gamutable .w130p input {
+	width: 130px;
+}
+
+.w120p {
+	width: 120px;
+}
+
+.minw120p {
+	min-width: 120px;
+}
+
+.maxw120p {
+	max-width: 120px;
+}
+
+.gamutable .w120p input {
+	width: 120px;
+}
+
+.w110p {
+	width: 110px;
+}
+
+.minw110p {
+	min-width: 110px;
+}
+
+.maxw110p {
+	max-width: 110px;
+}
+
+.gamutable .w110p input {
+	width: 110px;
+}
+
+.w100p {
+	width: 100px;
+}
+
+.minw100p {
+	min-width: 100px;
+}
+
+.maxw100p {
+	max-width: 100px;
+}
+
+.gamutable .w100p input {
+	width: 100px;
+}
+
+.w90p {
+	width: 90px;
+}
+
+.minw90p {
+	min-width: 90px;
+}
+
+.maxw90p {
+	max-width: 90px;
+}
+
+.gamutable .w90p input {
+	width: 90px;
+}
+
+.w80p {
+	width: 80px;
+}
+
+.minw80p {
+	min-width: 80px;
+}
+
+.maxw80p {
+	max-width: 80px;
+}
+
+.gamutable .w80p input {
+	width: 80px;
+}
+
+.w70p {
+	width: 70px;
+}
+
+.minw70p {
+	min-width: 70px;
+}
+
+.maxw70p {
+	max-width: 70px;
+}
+
+.gamutable .w70p input {
+	width: 70px;
+}
+
+.w60p {
+	width: 60px;
+}
+
+.minw60p {
+	min-width: 60px;
+}
+
+.maxw60p {
+	max-width: 60px;
+}
+
+.gamutable .w60p input {
+	width: 60px;
+}
+
+.w50p {
+	width: 50px;
+}
+
+.minw50p {
+	min-width: 50px;
+}
+
+.maxw50p {
+	max-width: 50px;
+}
+
+.gamutable .w50p input {
+	width: 50px;
+}
+
+.w40p {
+	width: 40px;
+}
+
+.minw40p {
+	min-width: 40px;
+}
+
+.maxw40p {
+	max-width: 40px;
+}
+
+.gamutable .w40p input {
+	width: 40px;
+}
+
+.w30p {
+	width: 30px;
+}
+
+.minw30p {
+	min-width: 30px;
+}
+
+.maxw30p {
+	max-width: 30px;
+}
+
+.gamutable .w30p input {
+	width: 30px;
+}
+
+.w20p {
+	width: 20px;
+}
+
+.minw20p {
+	min-width: 20px;
+}
+
+.maxw20p {
+	max-width: 20px;
+}
+
+.gamutable .w20p input {
+	width: 20px;
+}
+
+.w10p {
+	width: 10px;
+}
+
+.minw10p {
+	min-width: 10px;
+}
+
+.maxw10p {
+	max-width: 10px;
+}
+
+.gamutable .w10p input {
+	width: 10px;
+}
+
+.w66 {
+	width: 66.6666666667%;
+}
+
+.w33 {
+	width: 33.3333333333%;
+}
+
+.wauto {
+	width: auto;
+}
+
+.w960p {
+	width: 960px;
+}
+
+.minw960p {
+	min-width: 960px;
+}
+
+.maxw960p {
+	max-width: 960px;
+}
+
+.w1140p {
+	width: 1140px;
+}
+
+.minw1140p {
+	min-width: 1140px;
+}
+
+.maxw1140p {
+	max-width: 1140px;
+}
+
 /*# sourceMappingURL=gamutable.css.map */

css/gamutable.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;;EAGE,gBAAgB;ACAlB;;ADGA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACA/B;;ADEA;EACC,oBAAa;EAAb,aAAa;ACCd;;ADEA;EACC,eAAe;ACChB;;ADFA;EAGE,oBAAa;EAAb,aAAa;ACGf;;ADNA;EAME,oBAAY;MAAZ,YAAY;ACId;;ADVA;EASE,YAAY;EACZ,WAAW;ACKb;;ADfA;EAcE,eAAe;EACf,aAAa;ACKf;;ADpBA;EAkBE,UAAU;ACMZ;;ADHA;EACC,0CAA0C;ACM3C;;ADHA;EACC,eAAe;ACMhB;;ADHA;EACC,WAAW;EACX,kBAAkB;ACMnB;;ADHA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACMnB;;ADJA;EACC,eAAe;EACf,qBAAqB;EACrB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;ACOnB;;ADZA;EAOE,yBAAyB;ACS3B;;ADLA;EACC,iBAAiB;ACQlB;;ADLA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACQhB;;ADNA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACSnB","file":"gamutable.css","sourcesContent":[".gamutable--surTable {\n\tselect,\n\tinput {\n\t\tmargin-bottom: 0;\n\t}\n}\n.gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\tfont-size: 1rem;\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ndiv.gamutable .url_action {\n\tpadding: 0.2rem;\n\tdisplay: inline-block;\n\tbackground-color: #f5f5f5;\n\tborder: 1px solid #cecece;\n\tborder-radius: 5px;\n\t&:hover {\n\t\tbackground-color: #cecece;\n\t}\n}\n\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n\n.vueBlocs {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n.vueBlocs-unbloc {\n\twidth: 23%;\n\tborder: 1px solid #cecece;\n\tmargin-bottom: 1rem;\n\tmargin-right: 1rem;\n}\n",".gamutable--surTable select,\n.gamutable--surTable input {\n  margin-bottom: 0;\n}\n\n.gamutable--sousTable {\n  display: flex;\n  justify-content: space-between;\n}\n\n.gamutable--pagination {\n  display: flex;\n}\n\n.gamutable table {\n  font-size: 1rem;\n}\n\n.gamutable table th > div {\n  display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n  flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n  float: right;\n  width: 1rem;\n}\n\n.gamutable table .tri_col {\n  cursor: pointer;\n  fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n  fill: #000;\n}\n\n#app .select {\n  background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n  cursor: pointer;\n}\n\nth.icone {\n  width: 30px;\n  text-align: center;\n}\n\ntd.icone > * {\n  width: 100%;\n  display: block;\n  padding: 0.5rem;\n  text-align: center;\n}\n\ndiv.gamutable .url_action {\n  padding: 0.2rem;\n  display: inline-block;\n  background-color: #f5f5f5;\n  border: 1px solid #cecece;\n  border-radius: 5px;\n}\n\ndiv.gamutable .url_action:hover {\n  background-color: #cecece;\n}\n\ntd.icone i {\n  font-size: 1.8rem;\n}\n\n.vueBlocs {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.vueBlocs-unbloc {\n  width: 23%;\n  border: 1px solid #cecece;\n  margin-bottom: 1rem;\n  margin-right: 1rem;\n}\n"]}

css/gamutable.scss

@@ -1,79 +0,0 @@
-.gamutable--surTable {
-	select,
-	input {
-		margin-bottom: 0;
-	}
-}
-.gamutable--sousTable {
-	display: flex;
-	justify-content: space-between;
-}
-.gamutable--pagination {
-	display: flex;
-}
-
-.gamutable table {
-	font-size: 1rem;
-	th > div {
-		display: flex;
-	}
-	.label_tete_colonne {
-		flex-grow: 1;
-	}
-	.iconeTri {
-		float: right;
-		width: 1rem;
-		//position: relative;
-	}
-	.tri_col {
-		cursor: pointer;
-		fill: #cecece;
-	}
-	.iconeTri > .active {
-		fill: #000;
-	}
-}
-#app .select {
-	background-color: rgba(179, 209, 67, 0.47);
-}
-
-td.id {
-	cursor: pointer;
-}
-
-th.icone {
-	width: 30px;
-	text-align: center;
-}
-
-td.icone > * {
-	width: 100%;
-	display: block;
-	padding: 0.5rem;
-	text-align: center;
-}
-div.gamutable .url_action {
-	padding: 0.2rem;
-	display: inline-block;
-	background-color: #f5f5f5;
-	border: 1px solid #cecece;
-	border-radius: 5px;
-	&:hover {
-		background-color: #cecece;
-	}
-}
-
-td.icone i {
-	font-size: 1.8rem;
-}
-
-.vueBlocs {
-	display: flex;
-	flex-wrap: wrap;
-}
-.vueBlocs-unbloc {
-	width: 23%;
-	border: 1px solid #cecece;
-	margin-bottom: 1rem;
-	margin-right: 1rem;
-}

css/table_knacss.css

@@ -1,49 +0,0 @@
-/* ----------------------------- */
-/* ==Tables                      */
-/* ----------------------------- */
-table,
-.table {
-	width: 100%;
-	max-width: 100%;
-	table-layout: fixed;
-	border-collapse: collapse;
-	vertical-align: top;
-	margin-bottom: 2rem;
-}
-
-.table {
-	display: table;
-	border: 1px solid #acb3c2;
-	background: transparent;
-}
-
-.table--zebra tbody tr:nth-child(odd) {
-	background: #e7e9ed;
-}
-
-.table caption {
-	caption-side: bottom;
-	padding: 1rem;
-	color: #333;
-	font-style: italic;
-	text-align: right;
-}
-
-.table td,
-.table th {
-	padding: 0.3rem 0.6rem;
-	min-width: 2rem;
-	vertical-align: top;
-	border: 1px #acb3c2 dotted;
-	text-align: left;
-	cursor: default;
-}
-
-.table thead {
-	color: #212529;
-	background: transparent;
-}
-
-.table--auto {
-	table-layout: auto;
-}

css/vue-next-select.css

@@ -0,0 +1 @@
+@keyframes loading{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.icon.delete{display:flex;justify-content:center;align-items:center;padding:0;margin:0;border:0;background:0 0;height:8px;width:8px;min-height:8px;min-width:8px;max-height:8px;max-width:8px;cursor:pointer}.icon.arrow-downward{color:#999;border-style:solid;border-width:4px 4px 0;border-color:#999 transparent transparent;content:'';transition:transform .2s linear;cursor:pointer}.icon.arrow-downward.active{transform:rotate(180deg)}.vue-select{position:relative;display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;width:150px;border-radius:4px;border:1px solid #999;box-sizing:border-box;outline:0}.vue-select[aria-disabled=true]{background-color:rgba(239,239,239)}.vue-dropdown[data-removable=false] .vue-dropdown-item.selected:hover,.vue-select[aria-disabled=true] *,.vue-select[aria-disabled=true] input,.vue-tags[data-removable=false] .vue-tag.selected img:hover{cursor:not-allowed}.vue-select-header{display:flex;width:100%;align-items:center;justify-content:space-between}.vue-select-header .icon.arrow-downward,.vue-select-header .icon.loading,.vue-select-input-wrapper .icon.loading,.vue-tag span{margin-right:4px}.vue-tags{display:flex;flex-wrap:wrap;margin:0;padding:2px;min-height:calc(1rem + 4px);user-select:none}.vue-tags.collapsed{flex-wrap:nowrap;overflow:auto}.vue-tag,.vue-tag.selected{justify-content:center;background-color:#999;padding:0 4px;font-size:.8rem}.vue-tag{display:none;align-items:center;list-style-type:none;border-radius:4px;margin:2px;min-height:1rem}.vue-tag.selected{display:flex}.vue-select-input-wrapper{position:relative;display:flex;width:100%;align-items:center;justify-content:space-between}.vue-input,.vue-tag.selected{align-items:center;border-radius:4px}.vue-input{display:inline-flex;border:0;outline:0;max-width:100%;min-width:0;width:100%;box-sizing:border-box;padding:4px}.vue-select[data-is-focusing=false][aria-disabled=false] .vue-input input,input[readonly]{cursor:default}.vue-dropdown,.vue-input input{width:100%;min-width:0;padding:0}.vue-input input{border:0;outline:0;font-size:.8rem}.vue-input input[disabled]{background-color:rgba(239,239,239)}.vue-input input[readonly],.vue-select-header .vue-input input[disabled]{background-color:unset}.vue-dropdown{display:none;position:absolute;background-color:#fff;z-index:1;overflow-y:auto;margin:0;left:-1px;box-sizing:content-box;border:1px solid #999;list-style-type:none}.vue-select[aria-expanded=true] .vue-dropdown{display:unset}.vue-dropdown[data-visible-length='0']{border:0}.vue-dropdown-item{list-style-type:none;padding:4px;cursor:pointer;min-height:1rem}.vue-dropdown-item.highlighted{background-color:#41b883}.vue-dropdown-item.disabled{background-color:rgba(239,239,239);cursor:not-allowed}.vue-dropdown-item.selected{background-color:#f3f3f3}.vue-dropdown-item.selected.highlighted{background-color:#ff6a6a}.vue-dropdown[data-addable=false][data-multiple=true] .vue-dropdown-item:not(.selected):hover{cursor:not-allowed}.icon.loading{display:inline-block;position:relative;width:8px;min-width:8px;height:8px;min-height:8px}.icon.loading div{box-sizing:border-box;display:block;position:absolute;border:1px solid #999;width:8px;height:8px;border-radius:50%;animation:loading 1s cubic-bezier(.5,0,.5,1) infinite;border-color:#999 transparent transparent}.icon.loading div:nth-child(1){animation-delay:-.08s}.icon.loading div:nth-child(2){animation-delay:-.16s}.inline-flex{display:inline-flex}.vue-select[aria-expanded=true].direction-bottom{border-bottom-left-radius:0;border-bottom-right-radius:0}.vue-select[aria-expanded=true].direction-top{border-top-left-radius:0;border-top-right-radius:0}.vue-select.direction-top .vue-dropdown{bottom:100%;border-top-left-radius:3px;border-top-right-radius:3px}.vue-select.direction-bottom .vue-dropdown{top:100%;border-bottom-left-radius:3px;border-bottom-right-radius:3px}

dist/.vite/manifest.json

@@ -0,0 +1,8 @@
+{
+  "gamutable.js": {
+    "file": "assets/gamutable-Bcxw5aDx.js",
+    "name": "gamutable",
+    "src": "gamutable.js",
+    "isEntry": true
+  }
+}

exemple_bloc.html

@@ -0,0 +1,12 @@
+<div class="bloc flex">
+	<div class="flex-grow">
+		<div> <strong>Nom :</strong> @@nom@@ </div>
+		<div> <strong>Prénom :</strong> @@prenom@@ </div>
+		<div> <strong>Age :</strong> @@age@@ </div>
+		<div> <strong>Email :</strong> @@email@@ </div>
+		<div> <strong>Téléphone :</strong> @@telephone@@ </div>
+	</div>
+	<div>
+		@@logo@@
+	</div>
+</div>

font/.fontello-session

@@ -0,0 +1 @@
+f6d0573c85c0a27f74f66c970fe44c46

font/config.json

@@ -0,0 +1,194 @@
+{
+  "name": "gamutable",
+  "css_prefix_text": "gt-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "2d6150442079cbda7df64522dc24f482",
+      "css": "sort-down",
+      "code": 59392,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "80cd1022bd9ea151d554bec1fa05f2de",
+      "css": "sort-up",
+      "code": 59393,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "9daa1fdf0838118518a7e22715e83abc",
+      "css": "pdf",
+      "code": 61889,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "f761c3bbe16ba2d332914ecb28e7a042",
+      "css": "excel",
+      "code": 61891,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "41eeea14413f2539da21b4d1754bf4be",
+      "css": "refresh",
+      "code": 59395,
+      "src": "websymbols"
+    },
+    {
+      "uid": "ebc57fa8400e4ede049ac5dc665210e1",
+      "css": "eraser",
+      "code": 61741,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "4109c474ff99cad28fd5a2c38af2ec6f",
+      "css": "filter",
+      "code": 61616,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "347c38a8b96a509270fdcabc951e7571",
+      "css": "database",
+      "code": 61888,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "1ee2aeb352153a403df4b441a8bc9bda",
+      "css": "calc",
+      "code": 61932,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "17f8f03c18feced6cb735065beac7c03",
+      "css": "csv-alt",
+      "code": 59394,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M562.5 265.6V0H171.9C145.9 0 125 20.9 125 46.9V953.1C125 979.1 145.9 1000 171.9 1000H828.1C854.1 1000 875 979.1 875 953.1V312.5H609.4C583.6 312.5 562.5 291.4 562.5 265.6ZM375 546.9C375 555.5 368 562.5 359.4 562.5H343.8C326.5 562.5 312.5 576.5 312.5 593.8V656.3C312.5 673.5 326.5 687.5 343.8 687.5H359.4C368 687.5 375 694.5 375 703.1V734.4C375 743 368 750 359.4 750H343.8C292 750 250 708 250 656.3V593.8C250 542 292 500 343.8 500H359.4C368 500 375 507 375 515.6V546.9ZM461.5 750H437.5C428.9 750 421.9 743 421.9 734.4V703.1C421.9 694.5 428.9 687.5 437.5 687.5H461.5C473.1 687.5 481.8 680.7 481.8 674.6 481.8 672 480.3 669.4 477.7 667.1L434.9 630.4C418.4 616.3 408.9 596.3 408.9 575.4 408.9 533.8 446 500 491.7 500H515.6C524.3 500 531.3 507 531.3 515.6V546.9C531.3 555.5 524.3 562.5 515.6 562.5H491.7C480 562.5 471.3 569.4 471.3 575.4 471.3 578 472.8 580.6 475.5 582.9L518.2 619.6C534.8 633.7 544.3 653.8 544.3 674.6 544.3 716.2 507.1 750 461.5 750ZM625 515.6V556.3C625 595.8 636.1 634.7 656.3 667.3 676.4 634.7 687.5 595.8 687.5 556.3V515.6C687.5 507 694.5 500 703.1 500H734.4C743 500 750 507 750 515.6V556.3C750 625.5 724.8 690.8 679.1 740 673.2 746.4 664.9 750 656.3 750S639.3 746.4 633.4 740C587.7 690.8 562.5 625.5 562.5 556.3V515.6C562.5 507 569.5 500 578.1 500H609.4C618 500 625 507 625 515.6ZM861.3 205.1L670.1 13.7C661.3 4.9 649.4 0 636.9 0H625V250H875V238.1C875 225.8 870.1 213.9 861.3 205.1Z",
+        "width": 1000
+      },
+      "search": [
+        "file-csv"
+      ]
+    },
+    {
+      "uid": "c82c81c81c75bb7decf528963743a559",
+      "css": "excel-alt",
+      "code": 60204,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M562.5 265.6V0H171.9C145.9 0 125 20.9 125 46.9V953.1C125 979.1 145.9 1000 171.9 1000H828.1C854.1 1000 875 979.1 875 953.1V312.5H609.4C583.6 312.5 562.5 291.4 562.5 265.6ZM679.9 473.6L562.5 656.3 679.9 838.9C689.8 854.5 678.7 875 660.2 875H592C583.4 875 575.4 870.3 571.3 862.7 533 792 500 728.5 500 728.5 487.5 757.4 480.5 767.6 428.5 862.9 424.4 870.5 416.6 875.2 408 875.2H339.8C321.3 875.2 310.2 854.7 320.1 839.1L437.9 656.4 320.1 473.8C310 458.2 321.3 437.7 339.8 437.7H407.8C416.4 437.7 424.4 442.4 428.5 450 479.5 545.3 467.6 515.6 500 583.8 500 583.8 511.9 560.9 571.5 450 575.6 442.4 583.6 437.7 592.2 437.7H660.2C678.7 437.5 689.8 458 679.9 473.6ZM875 238.1V250H625V0H636.9C649.4 0 661.3 4.9 670.1 13.7L861.3 205.1C870.1 213.9 875 225.8 875 238.1Z",
+        "width": 1000
+      },
+      "search": [
+        "file-excel"
+      ]
+    },
+    {
+      "uid": "2a6740fc2f9d0edea54205963f662594",
+      "css": "spin",
+      "code": 59442,
+      "src": "fontelico"
+    },
+    {
+      "uid": "dd6c6b221a1088ff8a9b9cd32d0b3dd5",
+      "css": "check",
+      "code": 59396,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "4b900d04e8ab8c82f080c1cfbac5772c",
+      "css": "uncheck",
+      "code": 61590,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "8fb55fd696d9a0f58f3b27c1d8633750",
+      "css": "table",
+      "code": 61646,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "c22c5fa36d200793ad39b984fb5c8610",
+      "css": "block",
+      "code": 62977,
+      "src": "entypo"
+    },
+    {
+      "uid": "486b835e9eebf54eee78ed12b4291b86",
+      "css": "euro",
+      "code": 61779,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "3ab2abf6f936d3e53ee8c184cedaed82",
+      "css": "trash",
+      "code": 59397,
+      "src": "elusive"
+    },
+    {
+      "uid": "e15f0d620a7897e2035c18c80142f6d9",
+      "css": "lien",
+      "code": 61582,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "c5fd349cbd3d23e4ade333789c29c729",
+      "css": "eye",
+      "code": 59398,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "7fd683b2c518ceb9e5fa6757f2276faa",
+      "css": "eye-slash",
+      "code": 59399,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "7df8d934580978cbf993e9f1f06ca29a",
+      "css": "pdf-alt",
+      "code": 59400,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M355.3 500.2C345.5 468.9 345.7 408.6 351.4 408.6 367.8 408.6 366.2 480.7 355.3 500.2ZM352 592.4C336.9 631.8 318.2 677 296.5 714.8 332.2 701.2 372.7 681.3 419.3 672.1 394.5 653.3 370.7 626.4 352 592.4ZM168.2 836.1C168.2 837.7 193.9 825.6 236.3 757.6 223.2 769.9 179.5 805.5 168.2 836.1ZM484.4 312.5H750V953.1C750 979.1 729.1 1000 703.1 1000H46.9C20.9 1000 0 979.1 0 953.1V46.9C0 20.9 20.9 0 46.9 0H437.5V265.6C437.5 291.4 458.6 312.5 484.4 312.5ZM468.8 648C429.7 624.2 403.7 591.4 385.4 543 394.1 506.8 408 452 397.5 417.6 388.3 360.2 314.6 365.8 304.1 404.3 294.3 440 303.3 490.4 319.9 554.7 297.3 608.6 263.9 680.9 240.2 722.3 240 722.3 240 722.5 239.8 722.5 186.9 749.6 96.1 809.4 133.4 855.3 144.3 868.8 164.6 874.8 175.4 874.8 210.4 874.8 245.1 839.6 294.7 754.1 345.1 737.5 400.4 716.8 449 708.8 491.4 731.8 541 746.9 574 746.9 631.1 746.9 635 684.4 612.5 662.1 585.4 635.5 506.4 643.2 468.8 648ZM736.3 205.1L544.9 13.7C536.1 4.9 524.2 0 511.7 0H500V250H750V238.1C750 225.8 745.1 213.9 736.3 205.1ZM591.6 703.7C599.6 698.4 586.7 680.5 508 686.1 580.5 717 591.6 703.7 591.6 703.7Z",
+        "width": 750
+      },
+      "search": [
+        "file-pdf-solid"
+      ]
+    },
+    {
+      "uid": "64bb83c5d8a226ddd931108b514281a7",
+      "css": "csv",
+      "code": 9745,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M857.8 316C857.7 316 857.8 316 857.8 316 857.8 315 857.7 314.1 857.6 313.2 857.6 313.1 857.6 312.9 857.5 312.7 857.3 310.8 856.9 309.1 856.4 307.3 855.8 305.4 855.2 303.6 854.5 301.8V301.7C854.1 300.8 853.7 300 853.2 299.1V299C852.8 298.2 852.3 297.3 851.9 296.5 851.8 296.4 851.8 296.3 851.7 296.2 851.2 295.5 850.8 294.9 850.2 294.1 850.1 294 850.1 293.9 850 293.9 849.4 293.2 848.9 292.4 848.3 291.7 848.2 291.6 848.1 291.4 847.9 291.3 847.3 290.6 846.8 290 846.1 289.4L846 289.3 568.9 11.8C568.2 11.2 567.5 10.6 566.8 10.1 566.7 9.9 566.5 9.8 566.4 9.6 565.7 9 565.1 8.5 564.3 7.9 564.2 7.9 564.2 7.8 564.1 7.8 563.4 7.3 562.6 6.8 561.9 6.4 561.8 6.3 561.7 6.3 561.6 6.1 560.8 5.7 560 5.1 559.1 4.7 558.2 4.2 557.5 3.8 556.6 3.5H556.5C554.7 2.7 552.9 2 551 1.6 549.2 1.1 547.4 0.7 545.5 0.4 545.4 0.4 545.2 0.4 545.1 0.3 543.5 0.1 541.9 0 540.3 0H40.2C18 0 0 18 0 40.2V959.8C0 982 18 1000 40.2 1000H817.6C839.8 1000 857.8 982 857.8 959.8V318ZM580.6 137.4L720.7 277.7H580.6ZM80.4 919.6V80.4H500.2V318C500.2 340.2 518.2 358.2 540.4 358.2H777.4V919.7H80.4ZM263 667.5C255 674.5 245.4 678.1 234.2 678.1 219.1 678.1 206.9 672.5 197.4 661.3 187.9 650.2 183.2 631.5 183.2 605.2 183.2 580.4 188 562.5 197.6 551.4 207.2 540.4 219.7 534.8 235.1 534.8 246.3 534.8 255.8 537.9 263.6 544.2 271.4 550.4 276.6 558.9 279 569.8L320.6 559.8C315.9 543.2 308.7 530.4 299.3 521.5 283.5 506.4 262.8 498.9 237.4 498.9 208.2 498.9 184.7 508.5 166.9 527.6 149 546.7 140.1 573.7 140.1 608.3 140.1 641 149 666.8 166.8 685.7 184.5 704.6 207.2 714 234.8 714 257.1 714 275.6 708.5 290 697.4 304.5 686.4 314.9 669.6 321.1 646.8L280.4 634.1C276.9 649.3 271.1 660.4 263 667.5ZM484.2 595.7C474.4 590.5 459.3 585.5 438.8 580.7 418.4 575.9 405.6 571.2 400.3 566.8 396.2 563.4 394.1 559.1 394.1 554.2 394.1 548.9 396.3 544.5 400.8 541.3 407.7 536.2 417.2 533.8 429.4 533.8 441.2 533.8 450 536.1 455.9 540.8 461.9 545.5 465.7 553.2 467.4 563.8L509.4 561.9C508.8 542.8 501.8 527.5 488.7 516.1 475.5 504.7 455.8 498.9 429.8 498.9 413.8 498.9 400.2 501.4 388.9 506.2 377.6 511 368.9 518 363 527.3 357 536.6 354 546.4 354 557 354 573.4 360.3 587.4 373.1 598.9 382.1 607.1 398 613.9 420.4 619.5 438 623.8 449.1 626.8 454 628.5 461.2 631.1 466.2 634.1 469.1 637.6 472 641 473.5 645.1 473.5 650.1 473.5 657.8 470 664.4 463.2 670.2 456.4 675.9 446.1 678.8 432.6 678.8 419.9 678.8 409.7 675.5 402.2 669.2 394.7 662.7 389.7 652.6 387.2 639L346.4 643C349.2 666.3 357.5 684 371.6 696.1 385.7 708.3 405.9 714.3 432.1 714.3 450.2 714.3 465.3 711.7 477.4 706.7 489.4 701.7 498.8 694 505.4 683.5 512 673.1 515.4 661.9 515.4 649.9 515.4 636.8 512.6 625.8 507.1 616.9 501.6 608 494 600.9 484.2 595.7ZM627.6 656.4L575 502.6H529.5L603.8 710.5H648.6L723.1 502.6H678.5Z",
+        "width": 858
+      },
+      "search": [
+        "csv"
+      ]
+    },
+    {
+      "uid": "8e979f21fe9f2577a4737abd938f9e53",
+      "css": "excel",
+      "code": 60080,
+      "src": "custom_icons",
+      "selected": false,
+      "svg": {
+        "path": "M890.6 212.1Q906.3 227.7 917.4 254.5T928.5 303.6L928.5 946.4Q928.5 968.7 912.9 984.4T875 1000L125 1000Q102.7 1000 87.1 984.4T71.5 946.4L71.5 53.6Q71.5 31.4 87.1 15.7T125 0.1L625 0.1Q647.3 0.1 674.1 11.2T716.6 38ZM642.8 75.9L642.8 285.6 852.6 285.6Q847 269.4 840.3 262.8L665.7 88.1Q659 81.4 642.8 75.9ZM857.1 928.5L857.1 357.1 625 357.1Q602.7 357.1 587.1 341.5T571.4 303.5L571.4 71.4 142.9 71.4 142.9 928.5 857.1 928.5ZM310.9 797.9L310.9 857.1 467.6 857.1 467.6 797.9 425.8 797.9 483.3 708.1Q486.1 704.2 488.9 698.9T493.1 691.4 495 689.2L496.1 689.2Q496.7 691.4 498.9 694.7 500.1 697 501.4 699T504.8 703.4 508.4 708.1L568.1 797.9 525.7 797.9 525.7 857.1 688.1 857.1 688.1 797.9 650.1 797.9 543 645.6 651.8 488.3 689.1 488.3 689.1 428.5 533.4 428.5 533.4 488.3 574.7 488.3 517.2 577Q515 580.9 511.6 586.2T506.6 593.7L505.5 595.3 504.4 595.3Q503.8 593.1 501.6 589.7 498.2 583.6 492.1 576.9L432.9 488.2 475.4 488.2 475.4 428.5 313.5 428.5 313.5 488.2 351.4 488.2 456.9 640 348.7 797.9 310.7 797.9Z",
+        "width": 1000
+      },
+      "search": [
+        "fileexcelo"
+      ]
+    }
+  ]
+}

font/css/animation.css

@@ -0,0 +1,85 @@
+/*
+   Animation example, for spinners
+*/
+.animate-spin {
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+  display: inline-block;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}

font/css/gamutable-codes.css

@@ -0,0 +1,24 @@
+
+.gt-csv:before { content: '\2611'; } /* '☑' */
+.gt-sort-down:before { content: '\e800'; } /* '' */
+.gt-sort-up:before { content: '\e801'; } /* '' */
+.gt-csv-alt:before { content: '\e802'; } /* '' */
+.gt-refresh:before { content: '\e803'; } /* '' */
+.gt-check:before { content: '\e804'; } /* '' */
+.gt-trash:before { content: '\e805'; } /* '' */
+.gt-eye:before { content: '\e806'; } /* '' */
+.gt-eye-slash:before { content: '\e807'; } /* '' */
+.gt-pdf-alt:before { content: '\e808'; } /* '' */
+.gt-spin:before { content: '\e832'; } /* '' */
+.gt-excel-alt:before { content: '\eb2c'; } /* '' */
+.gt-lien:before { content: '\f08e'; } /* '' */
+.gt-uncheck:before { content: '\f096'; } /* '' */
+.gt-filter:before { content: '\f0b0'; } /* '' */
+.gt-table:before { content: '\f0ce'; } /* '' */
+.gt-eraser:before { content: '\f12d'; } /* '' */
+.gt-euro:before { content: '\f153'; } /* '' */
+.gt-database:before { content: '\f1c0'; } /* '' */
+.gt-pdf:before { content: '\f1c1'; } /* '' */
+.gt-excel:before { content: '\f1c3'; } /* '' */
+.gt-calc:before { content: '\f1ec'; } /* '' */
+.gt-block:before { content: '\f601'; } /* '' */

font/css/gamutable-ie7-codes.css

@@ -0,0 +1,24 @@
+
+.gt-csv { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '☑ '); }
+.gt-sort-down { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-sort-up { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-csv-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-refresh { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-trash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-eye { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-eye-slash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-pdf-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-spin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-excel-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-lien { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-uncheck { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-filter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-table { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-eraser { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-euro { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-database { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-pdf { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-excel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-calc { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-block { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

font/css/gamutable-ie7.css

@@ -0,0 +1,35 @@
+[class^="gt-"], [class*=" gt-"] {
+  font-family: 'gamutable';
+  font-style: normal;
+  font-weight: normal;
+
+  /* fix buttons height */
+  line-height: 1em;
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+}
+
+.gt-csv { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '☑ '); }
+.gt-sort-down { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-sort-up { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-csv-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-refresh { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-trash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-eye { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-eye-slash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-pdf-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-spin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-excel-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-lien { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-uncheck { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-filter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-table { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-eraser { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-euro { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-database { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-pdf { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-excel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-calc { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.gt-block { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

font/css/gamutable.css

@@ -0,0 +1,79 @@
+@font-face {
+  font-family: 'gamutable';
+  src: url('../font/gamutable.eot?85305337');
+  src: url('../font/gamutable.eot?85305337#iefix') format('embedded-opentype'),
+       url('../font/gamutable.woff2?85305337') format('woff2'),
+       url('../font/gamutable.woff?85305337') format('woff'),
+       url('../font/gamutable.ttf?85305337') format('truetype'),
+       url('../font/gamutable.svg?85305337#gamutable') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'gamutable';
+    src: url('../font/gamutable.svg?85305337#gamutable') format('svg');
+  }
+}
+*/
+[class^="gt-"]:before, [class*=" gt-"]:before {
+  font-family: "gamutable";
+  font-style: normal;
+  font-weight: normal;
+  speak: never;
+
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.gt-csv:before { content: '\2611'; } /* '☑' */
+.gt-sort-down:before { content: '\e800'; } /* '' */
+.gt-sort-up:before { content: '\e801'; } /* '' */
+.gt-csv-alt:before { content: '\e802'; } /* '' */
+.gt-refresh:before { content: '\e803'; } /* '' */
+.gt-check:before { content: '\e804'; } /* '' */
+.gt-trash:before { content: '\e805'; } /* '' */
+.gt-eye:before { content: '\e806'; } /* '' */
+.gt-eye-slash:before { content: '\e807'; } /* '' */
+.gt-pdf-alt:before { content: '\e808'; } /* '' */
+.gt-spin:before { content: '\e832'; } /* '' */
+.gt-excel-alt:before { content: '\eb2c'; } /* '' */
+.gt-lien:before { content: '\f08e'; } /* '' */
+.gt-uncheck:before { content: '\f096'; } /* '' */
+.gt-filter:before { content: '\f0b0'; } /* '' */
+.gt-table:before { content: '\f0ce'; } /* '' */
+.gt-eraser:before { content: '\f12d'; } /* '' */
+.gt-euro:before { content: '\f153'; } /* '' */
+.gt-database:before { content: '\f1c0'; } /* '' */
+.gt-pdf:before { content: '\f1c1'; } /* '' */
+.gt-excel:before { content: '\f1c3'; } /* '' */
+.gt-calc:before { content: '\f1ec'; } /* '' */
+.gt-block:before { content: '\f601'; } /* '' */

font/font/gamutable.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2024 by original authors @ fontello.com</metadata>
+<defs>
+<font id="gamutable" horiz-adv-x="1000" >
+<font-face font-family="gamutable" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="csv" unicode="&#x2611;" d="M858 534c0 0 0 0 0 0 0 1 0 2 0 3 0 0 0 0 0 0-1 2-1 4-2 6 0 2-1 3-1 5v0c-1 1-1 2-2 3v0c0 1-1 2-1 3 0 0 0 0 0 0-1 1-1 1-2 2 0 0 0 0 0 0-1 1-1 2-2 2 0 0 0 1 0 1-1 0-1 1-2 2l0 0-277 277c-1 1-1 1-2 2 0 0 0 0-1 0 0 1-1 2-2 2 0 0 0 0 0 0-1 1-1 1-2 2 0 0 0 0 0 0-1 0-2 1-3 1-1 1-1 1-2 2h0c-2 0-4 1-6 1-2 1-4 1-5 2-1 0-1 0-1 0-1 0-3 0-5 0h-500c-22 0-40-18-40-40v-920c0-22 18-40 40-40h778c22 0 40 18 40 40v642z m-277 179l140-141h-140z m-501-783v840h420v-238c0-22 18-40 40-40h237v-562h-697z m183 253c-8-7-18-11-29-11-15 0-27 6-37 17-9 11-14 30-14 56 0 25 5 43 15 54 9 11 22 16 37 16 11 0 21-3 29-9 7-6 13-15 15-26l42 10c-5 17-12 30-22 39-15 15-36 22-62 22-29 0-52-9-70-29-18-19-27-46-27-80 0-33 9-59 27-78 18-19 40-28 68-28 22 0 41 6 55 17 15 11 25 27 31 50l-41 13c-3-15-9-26-17-33z m221 71c-10 6-25 11-45 15-21 5-33 10-39 14-4 4-6 8-6 13 0 5 2 10 7 13 7 5 16 7 28 7 12 0 21-2 27-7 6-4 10-12 11-23l42 2c0 19-7 35-20 46-13 11-33 17-59 17-16 0-30-2-41-7-11-5-20-12-26-21-6-10-9-19-9-30 0-16 6-30 19-42 9-8 25-15 47-20 18-5 29-8 34-9 7-3 12-6 15-10 3-3 5-7 5-12 0-8-4-14-11-20-7-6-17-9-30-9-13 0-23 4-31 10-7 6-12 16-15 30l-41-4c3-23 12-41 26-53 14-12 34-18 60-18 18 0 33 2 45 7 12 5 22 13 28 24 7 10 10 21 10 33 0 13-2 24-8 33-5 9-13 16-23 21z m144-60l-53 153h-45l74-207h45l74 207h-44z" horiz-adv-x="858" />
+
+<glyph glyph-name="sort-down" unicode="&#xe800;" d="M571 457q0-14-10-25l-250-250q-11-11-25-11t-25 11l-250 250q-11 11-11 25t11 25 25 11h500q14 0 25-11t10-25z" horiz-adv-x="571.4" />
+
+<glyph glyph-name="sort-up" unicode="&#xe801;" d="M571 171q0-14-10-25t-25-10h-500q-15 0-25 10t-11 25 11 26l250 250q10 10 25 10t25-10l250-250q10-11 10-26z" horiz-adv-x="571.4" />
+
+<glyph glyph-name="csv-alt" unicode="&#xe802;" d="M563 584v266h-391c-26 0-47-21-47-47v-906c0-26 21-47 47-47h656c26 0 47 21 47 47v641h-266c-25 0-46 21-46 46z m-188-281c0-8-7-15-16-15h-15c-17 0-31-14-31-32v-62c0-17 14-31 31-31h15c9 0 16-7 16-16v-31c0-9-7-16-16-16h-15c-52 0-94 42-94 94v62c0 52 42 94 94 94h15c9 0 16-7 16-16v-31z m87-203h-24c-9 0-16 7-16 16v31c0 9 7 16 16 16h24c11 0 20 6 20 12 0 3-2 6-4 8l-43 37c-17 14-26 34-26 55 0 41 37 75 83 75h24c8 0 15-7 15-16v-31c0-8-7-15-15-15h-24c-12 0-21-7-21-13 0-3 2-6 5-8l42-37c17-14 26-34 26-55 0-41-37-75-82-75z m163 234v-40c0-40 11-79 31-111 20 32 32 71 32 111v40c0 9 7 16 15 16h31c9 0 16-7 16-16v-40c0-69-25-135-71-184-6-6-14-10-23-10s-17 4-23 10c-45 49-70 115-70 184v40c0 9 7 16 15 16h31c9 0 16-7 16-16z m236 311l-191 191c-9 9-21 14-33 14h-12v-250h250v12c0 12-5 24-14 33z" horiz-adv-x="1000" />
+
+<glyph glyph-name="refresh" unicode="&#xe803;" d="M707 700l150 150v-405h-405l153 153q-77 62-176 62-111 0-193-76t-92-186h-143q9 170 133 287t295 117q157 0 278-102z m-278-660q111 0 193 76t91 186h143q-9-170-133-287t-294-117q-158 0-279 102l-150-150v405h405l-153-153q78-62 177-62z" horiz-adv-x="857" />
+
+<glyph glyph-name="check" unicode="&#xe804;" d="M786 331v-177q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h464q35 0 65-14 9-4 10-13 2-10-5-16l-27-28q-6-5-13-5-1 0-5 1-13 3-25 3h-464q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v141q0 8 5 13l36 35q6 6 13 6 3 0 7-2 11-4 11-16z m129 273l-455-454q-13-14-31-14t-32 14l-240 240q-14 13-14 31t14 32l61 62q14 13 32 13t32-13l147-147 361 361q13 13 31 13t32-13l62-61q13-14 13-32t-13-32z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="trash" unicode="&#xe805;" d="M0 633l0 141 289 0 0 76 246 0 0-76 289 0 0-141-824 0z m43-783l0 676 738 0 0-676-738 0z" horiz-adv-x="824" />
+
+<glyph glyph-name="eye" unicode="&#xe806;" d="M929 314q-85 132-213 197 34-58 34-125 0-103-73-177t-177-73-177 73-73 177q0 67 34 125-128-65-213-197 75-114 187-182t242-68 243 68 186 182z m-402 215q0 11-8 19t-19 7q-70 0-120-50t-50-119q0-11 8-19t19-8 19 8 8 19q0 48 34 82t82 34q11 0 19 8t8 19z m473-215q0-19-11-38-78-129-210-206t-279-77-279 77-210 206q-11 19-11 38t11 39q78 128 210 205t279 78 279-78 210-205q11-20 11-39z" horiz-adv-x="1000" />
+
+<glyph glyph-name="eye-slash" unicode="&#xe807;" d="M310 105l43 79q-48 35-76 88t-27 114q0 67 34 125-128-65-213-197 94-144 239-209z m217 424q0 11-8 19t-19 7q-70 0-120-50t-50-119q0-11 8-19t19-8 19 8 8 19q0 48 34 82t82 34q11 0 19 8t8 19z m202 106q0-4 0-5-59-105-176-316t-176-316l-28-50q-5-9-15-9-7 0-75 39-9 6-9 16 0 7 25 49-80 36-147 96t-117 137q-11 17-11 38t11 39q86 131 212 207t277 76q50 0 100-10l31 54q5 9 15 9 3 0 10-3t18-9 18-10 18-10 10-7q9-5 9-15z m21-249q0-78-44-142t-117-91l157 280q4-25 4-47z m250-72q0-19-11-38-22-36-61-81-84-96-194-149t-234-53l41 74q119 10 219 76t169 171q-65 100-158 164l35 63q53-36 102-85t81-103q11-19 11-39z" horiz-adv-x="1000" />
+
+<glyph glyph-name="pdf-alt" unicode="&#xe808;" d="M355 350c-9 31-9 91-4 91 17 0 15-72 4-91z m-3-92c-15-40-34-85-55-123 35 14 76 34 122 43-24 19-48 46-67 80z m-184-244c0-2 26 10 68 78-13-12-56-47-68-78z m316 524h266v-641c0-26-21-47-47-47h-656c-26 0-47 21-47 47v906c0 26 21 47 47 47h391v-266c0-25 21-46 46-46z m-15-336c-39 24-65 57-84 105 9 36 23 91 13 125-10 58-83 52-94 14-10-36-1-86 16-151-23-54-56-126-80-167 0 0 0 0 0 0-53-28-144-87-107-133 11-14 32-20 42-20 35 0 70 35 120 121 50 17 105 37 154 45 42-23 92-38 125-38 57 0 61 63 39 85-28 27-107 19-144 14z m267 443l-191 191c-9 9-21 14-33 14h-12v-250h250v12c0 12-5 24-14 33z m-144-499c8 6-5 24-84 18 73-31 84-18 84-18z" horiz-adv-x="750" />
+
+<glyph glyph-name="spin" unicode="&#xe832;" d="M494 850c-266 0-483-210-494-472-1-19 13-20 13-20l84 0c16 0 19 10 19 18 10 199 176 358 378 358 107 0 205-45 273-118l-58-57c-11-12-11-27 5-31l247-50c21-5 46 11 37 44l-58 227c-2 9-16 22-29 13l-65-60c-89 91-214 148-352 148z m409-508c-16 0-19-10-19-18-10-199-176-358-377-358-108 0-205 45-274 118l59 57c10 12 10 27-5 31l-248 50c-21 5-46-11-37-44l58-227c2-9 16-22 30-13l64 60c89-91 214-148 353-148 265 0 482 210 493 473 1 18-13 19-13 19l-84 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="excel-alt" unicode="&#xeb2c;" d="M563 584v266h-391c-26 0-47-21-47-47v-906c0-26 21-47 47-47h656c26 0 47 21 47 47v641h-266c-25 0-46 21-46 46z m117-208l-117-182 117-183c10-16-1-36-20-36h-68c-9 0-17 5-21 12-38 71-71 135-71 135-12-29-19-40-71-135-5-8-12-12-21-12h-68c-19 0-30 20-20 36l118 183-118 182c-10 16 1 36 20 36h68c8 0 16-4 21-12 51-95 39-66 71-134 0 0 12 23 72 134 4 8 12 12 20 12h68c19 1 30-20 20-36z m195 236v-12h-250v250h12c12 0 24-5 33-14l191-191c9-9 14-21 14-33z" horiz-adv-x="1000" />
+
+<glyph glyph-name="lien" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
+
+<glyph glyph-name="uncheck" unicode="&#xf096;" d="M625 707h-464q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v464q0 37-26 63t-63 26z m161-89v-464q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h464q66 0 114-48t47-113z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="filter" unicode="&#xf0b0;" d="M783 685q9-22-8-39l-275-275v-414q0-23-22-33-7-3-14-3-15 0-25 11l-143 143q-10 11-10 25v271l-275 275q-18 17-8 39 9 22 33 22h714q23 0 33-22z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="table" unicode="&#xf0ce;" d="M286 82v107q0 8-5 13t-13 5h-179q-7 0-12-5t-6-13v-107q0-8 6-13t12-5h179q8 0 13 5t5 13z m0 214v108q0 7-5 12t-13 5h-179q-7 0-12-5t-6-12v-108q0-7 6-12t12-5h179q8 0 13 5t5 12z m285-214v107q0 8-5 13t-12 5h-179q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h179q7 0 12 5t5 13z m-285 429v107q0 8-5 13t-13 5h-179q-7 0-12-5t-6-13v-107q0-8 6-13t12-5h179q8 0 13 5t5 13z m285-215v108q0 7-5 12t-12 5h-179q-8 0-13-5t-5-12v-108q0-7 5-12t13-5h179q7 0 12 5t5 12z m286-214v107q0 8-5 13t-13 5h-178q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h178q8 0 13 5t5 13z m-286 429v107q0 8-5 13t-12 5h-179q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h179q7 0 12 5t5 13z m286-215v108q0 7-5 12t-13 5h-178q-8 0-13-5t-5-12v-108q0-7 5-12t13-5h178q8 0 13 5t5 12z m0 215v107q0 8-5 13t-13 5h-178q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h178q8 0 13 5t5 13z m72 178v-607q0-37-27-63t-63-26h-750q-36 0-63 26t-26 63v607q0 37 26 63t63 27h750q37 0 63-27t27-63z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="eraser" unicode="&#xf12d;" d="M500 64l188 215h-429l-188-215h429z m565 601q9-19 6-40t-17-36l-500-572q-22-24-54-24h-429q-21 0-38 11t-27 31q-8 19-5 40t17 36l500 572q21 24 53 24h429q21 0 39-11t26-31z" horiz-adv-x="1071.4" />
+
+<glyph glyph-name="euro" unicode="&#xf153;" d="M545 121l19-89q2-7-1-13t-10-8l-3 0q-2-1-6-2t-9-3-12-3-14-3-16-2-19-3-21-2-21 0q-131 0-228 73t-133 196h-53q-7 0-13 5t-5 13v63q0 7 5 12t13 6h37q-1 31 0 58h-37q-8 0-13 5t-5 13v64q0 8 5 13t13 5h55q37 117 135 188t224 72q57 0 108-13 6-2 11-9 4-6 2-13l-24-89q-2-7-8-11t-13-1l-2 1q-3 0-7 1l-10 2t-12 2-15 2-16 1-16 1q-71 0-126-36t-84-98h261q9 0 14-7 6-7 4-15l-13-63q-3-15-18-15h-273q-1-20 0-58h257q8 0 13-7 5-7 4-15l-14-63q-1-6-6-10t-11-4h-216q27-65 84-104t127-38q10 0 20 1t19 2 16 2 14 3 10 3l7 1 3 2q7 2 14-2 7-3 9-11z" horiz-adv-x="571.4" />
+
+<glyph glyph-name="database" unicode="&#xf1c0;" d="M429 421q132 0 247 24t181 71v-95q0-38-57-71t-157-52-214-19-215 19-156 52-58 71v95q66-47 181-71t248-24z m0-428q132 0 247 24t181 71v-95q0-39-57-72t-157-52-214-19-215 19-156 52-58 72v95q66-47 181-71t248-24z m0 214q132 0 247 24t181 71v-95q0-38-57-71t-157-52-214-20-215 20-156 52-58 71v95q66-47 181-71t248-24z m0 643q116 0 214-19t157-52 57-72v-71q0-39-57-72t-157-52-214-19-215 19-156 52-58 72v71q0 39 58 72t156 52 215 19z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="pdf" unicode="&#xf1c1;" d="M819 638q16-16 27-42t11-50v-642q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h500q22 0 49-11t42-27z m-248 136v-210h210q-5 17-12 23l-175 175q-6 7-23 12z m215-853v572h-232q-23 0-38 16t-16 37v233h-429v-858h715z m-287 331q18-14 47-31 33 4 65 4 82 0 99-27 9-13 1-29 0-1-1-1l-1-2v0q-3-21-39-21-27 0-64 11t-73 29q-123-13-219-46-85-146-135-146-8 0-15 4l-14 7q0 0-3 2-6 6-4 20 5 23 32 51t73 54q8 5 13-3 1-1 1-2 29 47 60 110 38 76 58 146-13 46-17 89t4 71q6 22 23 22h12q13 0 20-8 10-12 5-38-1-3-2-4 0-2 0-5v-17q-1-68-8-107 31-91 82-133z m-321-229q29 13 76 88-29-22-49-47t-27-41z m222 513q-9-23-2-73 1 4 4 24 0 2 4 24 1 3 3 5-1 0-1 1-1 1-1 2 0 12-7 20 0-1 0-1v-2z m-70-368q76 30 159 45-1 0-7 5t-9 8q-43 37-71 98-15-48-46-110-17-31-26-46z m361 9q-13 13-78 13 42-16 69-16 8 0 10 1 0 0-1 2z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="excel" unicode="&#xf1c3;" d="M819 638q16-16 27-42t11-50v-642q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h500q22 0 49-11t42-27z m-248 136v-210h210q-5 17-12 23l-175 175q-6 7-23 12z m215-853v572h-232q-23 0-38 16t-16 37v233h-429v-858h715z m-547 131v-59h157v59h-42l58 90q3 4 5 9t5 8 2 2h1q0-2 3-6 1-2 2-4t3-4 4-5l60-90h-43v-59h163v59h-38l-107 152 108 158h38v59h-156v-59h41l-57-89q-2-4-6-9t-5-8l-1-1h-1q0 2-3 5-3 6-9 13l-59 89h42v59h-162v-59h38l106-152-109-158h-38z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="calc" unicode="&#xf1ec;" d="M214-7q0 29-21 50t-50 21-51-21-21-50 21-51 51-21 50 21 21 51z m215 0q0 29-21 50t-51 21-50-21-21-50 21-51 50-21 51 21 21 51z m-215 214q0 30-21 51t-50 21-51-21-21-51 21-50 51-21 50 21 21 50z m429-214q0 29-21 50t-51 21-50-21-21-50 21-51 50-21 51 21 21 51z m-214 214q0 30-21 51t-51 21-50-21-21-51 21-50 50-21 51 21 21 50z m-215 214q0 30-21 51t-50 21-51-21-21-51 21-50 51-21 50 21 21 50z m429-214q0 30-21 51t-51 21-50-21-21-51 21-50 50-21 51 21 21 50z m-214 214q0 30-21 51t-51 21-50-21-21-51 21-50 50-21 51 21 21 50z m428-428v214q0 29-21 50t-50 22-50-22-22-50v-214q0-29 22-50t50-22 50 22 21 50z m-214 428q0 30-21 51t-51 21-50-21-21-51 21-50 50-21 51 21 21 50z m214 179v143q0 14-10 25t-26 11h-714q-14 0-25-11t-11-25v-143q0-14 11-25t25-11h714q15 0 26 11t10 25z m0-179q0 30-21 51t-50 21-51-21-21-51 21-50 51-21 50 21 21 50z m72 358v-858q0-29-22-50t-50-21h-786q-29 0-50 21t-21 50v858q0 29 21 50t50 21h786q29 0 50-21t22-50z" horiz-adv-x="1000" />
+
+<glyph glyph-name="block" unicode="&#xf601;" d="M850 650q20 0 35-15t15-35l0-200-500 0 0 250 450 0z m-850-550l0 200 300 0 0-250-260 0q-40 0-40 50z m400-50l0 250 500 0 0-200q0-22-14-36t-36-14l-450 0z m-400 550q0 50 40 50l260 0 0-250-300 0 0 200z" horiz-adv-x="900" />
+</font>
+</defs>
+</svg>

font/police.css.html

@@ -0,0 +1,12 @@
+[(#SET{url,#CHEMIN{font/font/gamutable.woff2}|timestamp})]
+
+<style>
+
+@font-face {
+	font-family: 'gamutable';
+	src: url(#GET{url}) format('woff2');
+	font-weight: normal;
+	font-style: normal;
+}
+</style>
+

formulaires/configurer_gamutable.html

@@ -9,24 +9,20 @@
 	<div>
 		#ACTION_FORMULAIRE
 		<div class="editer_groupe">
-			#SET{name,version_js}
+			#SET{name,charger_modalbox}
 			#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
-			#SET{obli,"obligatoire"}
 			<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
+				<label>Charger js pour lancer .modalbox</label>
 				<div class="choix">
-					<input type="radio" class="radio" name="#GET{name}" value="" id="#GET{name}_non"[ (#ENV{#GET{name}}|=={''}|?{checked="checked"})] >
-					<label for="#GET{name}_non">js minifié</label>
-					<p class="explication">js/vue.min.js - 92ko (sans le debug)</p>
-				</div>
-				<div class="choix">
-					<input type="radio" class="radio" name="#GET{name}" value="dev" id="#GET{name}_oui"[ (#ENV{#GET{name}}|=={dev}|?{checked="checked"})] >
-					<label for="#GET{name}_oui">Dev</label>
-					<p class="explication">js/vue.js - 276ko</p>
+					<input type="checkbox" class="checkbox" name="#GET{name}" id="#GET{name}_1" value="oui" [(#ENV{#GET{name}}|=={oui}|oui) checked] >
+					<label for="#GET{name}_1">Oui</label>
+					<p class="explication">Si un lien à la classe .modalbox, ouvre l'url dans une modale</p>
 				</div>
 			</div>
 		</div>
 
 
+
 		<input type="hidden" name="_meta_casier" value="gamutable" />
 		<p class="boutons"><span class="image_loading">&nbsp;</span><input type="submit" class="submit" value="<:bouton_enregistrer:>" /></p>
 	</div>

gamutable_autorisations.php

@@ -24,3 +24,13 @@ function autoriser_gamutable_purger_dist($faire, $type, $id, $qui, $opt) {
 	return autoriser('webmestre');
 }
 
+function autoriser_gamutablepdf_generer_dist($faire, $type, $id, $qui, $opt) {
+	if (intval($qui['id_auteur'])) {
+		return true;
+	};
+	return false;
+}
+
+function autoriser_gamutable_modifier_dist($faire, $type, $id, $qui, $opt) {
+	return true;
+}

gamutable_fonctions.php

@@ -9,6 +9,129 @@
  * @package    SPIP\Gamutable\Fonctions
  */
 
-if (!defined('_ECRIRE_INC_VERSION')) {
+if (!defined("_ECRIRE_INC_VERSION")) {
 	return;
 }
+include_spip("inc/vite");
+
+/**
+ * fonction pour forcer un hit pour un objet
+ * un hit => maj de champ maj
+ *
+ * @param string $objet
+ * @param int $id_objet
+ * @param string $table (optional) pour forcer sur une table spécifique ou le test se fait sur la cle primaire de $objet
+ * si $table est renseigné : ex :
+ * $objet = rubrique
+ * $id_objet = 4
+ * $table = 'spip_articles'
+ * => le hit sur l'id_rubrique 4 de spip_articles
+ *
+ * @return void [TODO:description]
+ */
+function forcer_hit(string $objet, int $id_objet, string $table = null):void {
+	include_spip('inc/invalideur');
+	$id = id_table_objet($objet);
+	if (!$table) {
+		$table = table_objet_sql($objet);
+	}  else {
+		$id_c = id_table_objet($table);
+		suivre_invalideur("id='$id_c/1'");
+	}
+	sql_updateq($table, ['maj' => date("Y-m-d H:i:s")], "$id=".$id_objet);
+	suivre_invalideur("id='$id/1'");
+}
+
+if (!function_exists('tsEnDate')) {
+	/**
+	 * retour la date d'un timestamp
+	 *
+	 * @param $ts
+	 *
+	 * @return string
+	 */
+	function tsEnDate($ts) {
+		$ts = intval($ts);
+		return date('Y-m-d H:i:s', $ts);
+	}
+}
+
+function gamutable_fermer_modalbox($id_objet = 9999999999, $num = null) {
+	$js = gamutable_generer_js($id_objet, $num);
+	$html = <<<EOJS
+		<script type="text/javascript">
+			$js;
+		</script>
+EOJS;
+	return $html;
+}
+
+function gamutable_generer_js($id_objet, $num){
+	if ($num === '_deux' || intval($num) === 2) {
+		$num = 2;
+	} else {
+		$num = null;
+	}
+	$html = <<<EOJS
+			id = "$id_objet";
+			if (+id === 9999999999) {
+				id = '';
+			}
+			if (typeof app$num !== 'undefined') {
+				app$num.rechargerJson(id);
+			}
+			$.modalboxclose();
+			delete id;
+EOJS;
+	return $html;
+
+}
+
+/**
+ * fonction que l'on peut appeler comme filtre dans une vues des crayons
+ * ex:
+ *             [(#ID_APP_HORAIRE|gamutable_recharger_tableau)]
+ *
+ * @param $id_objet (optional)
+ * @param $num (optional) (si on veut recharger qu'un tableau préciséemnt)
+ *
+ * @return string $html
+ */
+function gamutable_recharger_tableau($id_objet = 9999999999, $num = null):string {
+	if ($num === '_deux' || intval($num) === 2) {
+		$num = 2;
+	} else {
+		$num = null;
+	}
+
+	$html = <<<EOJS
+		<script type="text/javascript">
+			id = "$id_objet";
+			if (+id === 9999999999) {
+				id = '';
+			}
+			if (typeof app$num !== 'undefined') {
+				app$num.rechargerJson(id);
+			}
+			delete id;
+		</script>
+EOJS;
+	return $html;
+}
+
+function gamutable_vider_localstorage():int {
+	$version_prod = (int) lire_config('gamutable/version_stockage', 1);
+	$version_demandee = (int) ($GLOBALS['gamutable_version_stockage'] ?? 1);
+	if ($version_demandee > $version_prod) {
+		ecrire_config('gamutable/version_stockage', $version_demandee);
+		return 1;
+	}
+	return 0;
+}
+
+function gamutableGetGlobals(string $name, string $defaut = ''):string {
+	if (empty($name)) {
+		return '';
+	}
+	return $GLOBALS[$name] ?? $defaut;
+}

gamutable_options.php

@@ -12,9 +12,18 @@
 if (!defined('_ECRIRE_INC_VERSION')) {
 	return;
 }
-
+/*
+ * Global pour indiquer le numero de version de gamutable
+ */
+// $GLOBALS['gamutable_version_demandee'] = 1;
 
 if (_request('var_mode') == 'gamutable') {
 	include_spip('inc/invalideur');
 	suivre_invalideur("id='gamutable/1'");
 }
+
+function inc_crayons_preparer_page(&$page, $droits, $wdgcfg = [], $mode = 'page') {
+	$droits = '*';
+	include_spip('inc/crayons_preparer_page');
+	return	inc_crayons_preparer_page_dist($page, $droits, $wdgcfg, $mode);
+}

gamutable_pipelines.php

@@ -23,15 +23,27 @@ function gamutable_formulaire_admin($flux) {
 	return $flux;
 }
 
+function gamutable_insert_head_css($flux){
+
+	$css   = find_in_path('css/fontello.css');
+	$css   = timestamp($css);
+	$flux .= "<link rel='stylesheet' type='text/css' media='all' href='$css' />"."\r\n";
+
+	$css   = timestamp(find_in_path('font/css/gamutable-codes.css'));
+	$flux .= "<link rel='stylesheet' type='text/css' media='all' href='$css' />"."\r\n";
+
+	return $flux;
+}
+
 
 function gamutable_affichage_final($flux) {
 	include_spip('inc/autoriser');
-	if (autoriser("purger","gamutable") and test_plugin_actif('minibando')) {
+	if (autoriser("purger","gamutable") && test_plugin_actif('minibando') && strpos($flux, 'id="minibando"') !== false) {
 		$p = stripos($flux, '</body>');
 		if ($p) {
 			$url_relecture = parametre_url(self(), 'var_mode', 'gamutable', '&');
 			$label = "Mode gamuTable";
-			$js .= "jQuery('#minibando_bouton_debug ul').append('<li><a class=\"spip-admin-boutons \" href=\"$url_relecture\">$label</a></li>');";
+			$js = "jQuery('#minibando_bouton_debug ul').append('<li><a class=\"spip-admin-boutons \" href=\"$url_relecture\">$label</a></li>');";
 			$js = "jQuery(function(){ $js });";
 			$js = "<script>$js</script>";
 			$flux = substr_replace($flux, $js, $p, 0);
@@ -39,3 +51,25 @@ function gamutable_affichage_final($flux) {
 	}
 	return $flux;
 }
+
+
+/**
+ * injection du reload de vuejs pour les crayons de l'objet souscription
+ * on peut bloquer le rechargement selectif par id en ajoutant le nom de l'objet
+ * dans la global $GLOBALS['gamutable_rechargerJson_all']
+ *
+ */
+function gamutable_crayons_vue_affichage_final($flux){
+	$id = $flux['args']['id'];
+	$objet = $flux['args']['type'];
+	if (
+		$id = intval($id)
+		and !in_array($objet, $GLOBALS['gamutable_rechargerJson_all'] ?? [])
+	) {
+		$flux['data'] .= ' <script type="text/javascript">if ( typeof app2 === "object") {  app2.rechargerJson('.$id.');}if ( typeof app === "object") {  app.rechargerJson('.$id.');} </script>';
+	} else {
+		$flux['data'] .= ' <script type="text/javascript">if ( typeof app2 === "object") { app2.rechargerJson();}if ( typeof app === "object") { app.rechargerJson();} </script>';
+	}
+
+	return $flux;
+}

gulpfile.js

@@ -1,141 +0,0 @@
-const { src, dest, series, parallel, watch } = require('gulp');
-const gulpSass = require('gulp-sass');
-const sourcemaps = require('gulp-sourcemaps');
-const postcss = require('gulp-postcss');
-const autoprefixer = require('autoprefixer');
-const cssnano = require('cssnano');
-const notify = require('gulp-notify');
-const concat = require('gulp-concat');
-const uglify = require('gulp-uglify');
-const babel = require('gulp-babel');
-const rename = require('gulp-regex-rename');
-const unuse = require('postcss-uncss'); //https://github.com/uncss/postcss-uncss
-
-/*
- * SASS$
- */
-function sass() {
-	let options_unuse = {
-		html: 'http://starter.spip'
-	};
-	return (
-		src('css/**/*.scss')
-			.pipe(sourcemaps.init())
-			.pipe(gulpSass({ outputStyle: 'expanded' }))
-			.on('error', err => notify().write(err))
-			.pipe(postcss([autoprefixer()])) // autoprefixer
-			//.pipe(postcss([autoprefixer(), cssnano()])) // autoprefixer  +  minifier
-			//.pipe(postcss([unuse(options_unuse), autoprefixer()])) // css unuse + autoprefixer
-			.pipe(sourcemaps.write('.')) // initialize sourcemaps first
-			.pipe(dest('css'))
-	);
-}
-
-/*
- * JS -> concat + babel
- */
-function jsConcatMinif() {
-	return src(['./js/a_compresser/*.js'])
-		.pipe(sourcemaps.init())
-		.pipe(
-			babel({
-				presets: ['@babel/preset-env']
-			})
-		)
-		.pipe(concat('mon_site.min.js', { newLine: ';' }))
-		.pipe(uglify())
-		.pipe(sourcemaps.write('.'))
-		.pipe(dest('./js'));
-}
-
-/*
- * JS -> babel
- */
-function jsBabel() {
-	return src(['js/*.es6.js'])
-		.pipe(
-			babel({
-				presets: ['@babel/preset-env']
-			})
-		)
-		.pipe(rename(/\.es6/, ''))
-		.pipe(dest('./js'));
-}
-
-/*
- * Les Watchers
- */
-function watcherSass() {
-	watch('css/**/*.scss', { ignoreInitial: false }, sass).on('change', function() {
-		notify('CSS -> SCSS ==> OK').write('');
-	});
-}
-
-function watcherJsConcatMinif() {
-	watch('./js/a_compresser/*.js', { ignoreInitial: false }, jsConcatMinif).on('change', function() {
-		notify('JS (concat)  ==> OK').write('');
-	});
-}
-
-function watcherJsBabel() {
-	watch('./js/*.es6.js', { ignoreInitial: false }, jsBabel).on('change', function() {
-		notify('JS (babel)  ==> OK').write('');
-	});
-}
-
-/*
- * SVG sprite
- */
-const gulpSvgSprite = require('gulp-svg-sprite');
-const config = {
-	shape: {
-		spacing: {
-			box: 'icon'
-		}
-	},
-	mode: {
-		//"view": {
-		//"dest": ".",
-		//"sprite": "sprite_css_pictos.svg",
-		//"bust": false
-		//},
-
-		symbol: {
-			dest: '.',
-			sprite: 'sprite_symbol_pictos.svg'
-		}
-	}
-};
-
-function svgSprite() {
-	return (
-		src('svg/**/*.svg')
-			//.pipe(plumber())
-			.pipe(gulpSvgSprite(config))
-			.on('error', function(error) {
-				console.log(error);
-			})
-			.pipe(dest('img'))
-	);
-}
-
-/*
- * SVG minifier
- */
-var svgmin = require('gulp-svgmin');
-function svgMin() {
-	return src('svg/*.svg')
-		.pipe(svgmin())
-		.pipe(dest('./svgmin'));
-}
-
-/*
- * Exports des fonctions
- */
-module.exports = {
-	default: parallel(sass, jsConcatMinif, jsBabel),
-	sass: sass,
-	watch: parallel(watcherSass, watcherJsConcatMinif, watcherJsBabel),
-	sprite: svgSprite,
-	svgmin: svgMin
-};

inc/gamutable_clean_pdf.php

@@ -0,0 +1,9 @@
+<?php
+if (!defined('_ECRIRE_INC_VERSION')) {
+	return;
+}
+
+function gamutable_clean_pdf($fichier) {
+	unlink(_DIR_RACINE . $fichier);
+}
+

inc/vite.php

@@ -0,0 +1,153 @@
+<?php
+if (!defined("_ECRIRE_INC_VERSION")) {
+	return;
+}
+defined('_SERVEUR_MODE') || define('_SERVEUR_MODE', 'PROD');
+
+// Helpers here serve as example. Change to suit your needs.
+// const VITE_HOST = "https://localhost:5134";
+
+// For a real-world example check here:
+// https://github.com/wp-bond/bond/blob/master/src/Tooling/Vite.php
+// https://github.com/wp-bond/boilerplate/tree/master/app/themes/boilerplate
+
+// you might check @vitejs/plugin-legacy if you need to support older browsers
+// https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
+
+// Prints all the html entries needed for Vite
+
+function vite(string $entry, $port = 5134): string {
+	if (!empty($_SERVER['IS_DDEV_PROJECT'])) {
+		defined('VITE_HOST') ||	define('VITE_HOST', "https://" . $_SERVER['SERVER_ADDR'] . ":" .$port);
+	} else {
+		defined('VITE_HOST') ||	define('VITE_HOST', "https://localhost:".$port);
+	}
+
+	return "\n" .
+		jsTag($entry) .
+		"\n" .
+		jsPreloadImports($entry) .
+		"\n" .
+		cssTag($entry);
+}
+
+function isDev(string $entry): bool {
+	static $exists = null;
+	if ($exists !== null) {
+		return $exists;
+	}
+	if ( _SERVEUR_MODE !== 'PROD') {
+		$handle = curl_init(VITE_HOST . "/" . $entry);
+		curl_setopt($handle, CURLOPT_SSL_VERIFYHOST, false);
+		curl_setopt($handle, CURLOPT_SSL_VERIFYPEER, false);
+
+		curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);
+		curl_setopt($handle, CURLOPT_NOBODY, true);
+
+		curl_exec($handle);
+		$error = curl_errno($handle);
+		curl_close($handle);
+		return $exists = !$error;
+	} else {
+		return $exists = false;
+	}
+}
+
+function jsTag(string $entry): string {
+    $url = isDev($entry)
+        ? VITE_HOST . "/" . $entry
+        : assetUrl($entry);
+
+    if (!$url) {
+        return '';
+    }
+    if (isDev($entry)) {
+        return '<script type="module" src="' . VITE_HOST . '/@vite/client"></script>' . "\n"
+            . '<script type="module" src="' . $url . '"></script>';
+    }
+    return '<script type="module" src="' . $url . '"></script>';
+}
+
+function jsPreloadImports(string $entry): string {
+	if (isDev($entry)) {
+		return "";
+	}
+
+	$res = "";
+	foreach (importsUrls($entry) as $url) {
+		$res .= '<link rel="modulepreload" href="' . $url . '">';
+	}
+
+	return $res;
+}
+
+function cssTag(string $entry): string {
+	if (isDev($entry)) {
+		return "";
+	}
+
+	$tags = "";
+	foreach (cssUrls($entry) as $url) {
+		$tags .= '<link rel="stylesheet" href="' . $url . '">';
+	}
+
+	return $tags;
+}
+
+function getManifest(): array {
+	static $urlManifest;
+	//
+	if ($urlManifest === null) {
+		// vite V5
+
+		if (find_in_path(_DIR_PLUGIN_GAMUTABLE . "dist/.vite/manifest.json")) {
+			$urlManifest = find_in_path(_DIR_PLUGIN_GAMUTABLE . "dist/.vite/manifest.json");
+		// vite V4
+		} else if (find_in_path(_DIR_PLUGIN_GAMUTABLE . "dist/manifest.json")) {
+			$urlManifest = find_in_path(_DIR_PLUGIN_GAMUTABLE . "dist/manifest.json");
+		}
+	}
+
+	if ($urlManifest) {
+		$content = file_get_contents($urlManifest);
+		return json_decode($content, true);
+	} else {
+		die('pas de fichier manifest.json');
+	}
+
+}
+
+function assetUrl(string $entry): string {
+	$manifest = getManifest();
+
+	return isset($manifest[$entry])
+		? find_in_path("dist/" . $manifest[$entry]["file"])
+		: "";
+}
+
+function importsUrls(string $entry): array {
+	$urls = [];
+	$manifest = getManifest();
+
+	if (!empty($manifest[$entry]["imports"])) {
+		foreach ($manifest[$entry]["imports"] as $imports) {
+			$urls[] = find_in_path("dist/" . $manifest[$imports]["file"]);
+		}
+	}
+
+	return $urls;
+}
+
+function cssUrls(string $entry): array {
+	$urls = [];
+	$manifest = getManifest();
+
+	if (!empty($manifest[$entry]["css"])) {
+		foreach ($manifest[$entry]["css"] as $file) {
+			$urls[] = find_in_path("dist/" . $file);
+		}
+	}
+
+	return $urls;
+}
+

inclure/gamutable.html

@@ -1,56 +1,114 @@
-<link rel="stylesheet" href="[(#CHEMIN{css/gamutable.css}|compacte|timestamp)]" type="text/css" media="screen" title="no title" charset="utf-8">
+[(#VAL{gamutable.js}|vite)]
+#INCLURE{fond=font/police.css}
+
+<link
+	rel="stylesheet"
+	href="[(#CHEMIN{css/gamutable.css}|compacte|timestamp)]"
+	type="text/css"
+	media="screen"
+	title="no title"
+	charset="utf-8"
+/>
+<link
+	rel="stylesheet"
+	href="[(#CHEMIN{css/vue-next-select.css}|compacte|timestamp)]"
+	type="text/css"
+	media="screen"
+	title="no title"
+	charset="utf-8"
+/>
+
 [(#SET{sort_asc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_asc]})]
 [(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
-<span class="crayon xxxx-yyyy-nn"></span>
-<div id="app">
-	<div class="gamutableUn">
-		[<span class="titre titreGamutableUn">(#ENV{titreGamutableUn})</span>]
-		<mon-tableau
-			apiuri="#ENV{apiuri,spip.php?page=json_gamutable.json}"
+[(#SET{pdfuri,#VAL{pdf_gamutable}|generer_url_action{"", 1}})]
+<span class="crayon gamutable-yyyy-nn"></span>
+[(#ENV{fichierVueBloc}|oui)
+[(#SET{htmlvuebloc,#INCLURE{fond=#ENV{fichierVueBloc}}|replace{'"',"'"}})]
+]
+
+[(#SET{gamutable_version_demandee,#VAL{gamutable_version_demandee}|gamutableGetGlobals{1}})]
+
+<div id="vueGamutable">
+	<BOUCLE_un(CONDITION){si #ENV{apiuri}|oui}>
+		<div class="container_un">
+			[<span class="h2-like titregamutable">(#ENV*{titregamutable})</span>]
+			<div class="gamutableUn vue-gamutable" [ id="(#ENV{id_gamutable})" ]>
+				<gamu-table
+					apiuri="[(#ENV{apiuri})]"
+					pdfuri="#GET{pdfuri}"
 					:tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}"
+					:afficher="#ENV{afficher,0}"
 					champcsv="#ENV{champcsv,html}"
 					delimitercsv="#ENV{delimitercsv,','}"
 					namecsv="#ENV{namecsv}"
-			urlvuebloc="[(#ENV{urlvuebloc})]"
-			url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
-			url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
+					namepdf="#ENV{namepdf}"
+					argpdf="#ENV{argpdf}"
+					fichierpdf="#ENV{fichierpdf}"
+					htmlvuebloc="[(#GET{htmlvuebloc})]"
+					filtrecolmulti="#ENV{filtrecolmulti,oui}"
+					nomblocajaxreload="#ENV{nomblocajaxreload}"
+					stockage="#ENV{stockage,localstorage}"
+					includespip="#ENV{includespip}"
 					ref="montableau"
-		></mon-tableau>
+					filtrer="#ENV{rechercher}"
+					:_id="[(#ENV{_id}|intval)]"
+					filtreselect="[(#ENV{filtrer,#ENV{filtrerselect}})]"
+					trier="[(#ENV{trier})]"
+					langpdf="[(#ENV{langpdf})]"
+					:id_auteur="[(#SESSION{id_auteur}|intval)]"
+					:gamutable_version_demandee="#GET{gamutable_version_demandee,1}"
+				></gamu-table>
 			</div>
+		</div>
+	</BOUCLE_un>
 
 	<BOUCLE_deux(CONDITION){si #ENV{apiuri_deux}|oui}>
-		<span class="gamutableSep"></span>
-
-		<div class="gamutableDeux">
-			[<span class="titre titreGamutableDeux">(#ENV{titreGamutableDeux})</span>]
-			<mon-tableau
+		[(#ENV{fichierVueBloc}|oui)
+		[(#SET{htmlvuebloc_deux,#INCLURE{fond=#ENV{fichierVueBloc}}})]
+		]
+		<INCLURE{fond=inclure/separateur_gamutables,env}>
+		<div class="container_deux">
+			[<span class="h2-like titregamutable_deux">(#ENV*{titregamutable_deux})</span>]
+			<div class="gamutableDeux vue-gamutable"[ id="(#ENV{id_gamutable_deux})"]>
+				<gamu-table
 					apiuri="[(#ENV{apiuri_deux})]"
-				:tparpage="#ENV{tparpage_deux, [10, 20, 50, 'Tous']}"
-				champcsv="[(#ENV{champcsv,html})]"
-				delimitercsv="[(#ENV{delimitercsv,','})]"
-				namecsv="[(#ENV{namecsv_deux})]"
-				urlvuebloc="[(#ENV{urlvuebloc_deux})]"
-				url_sort_asc="[(#ENV{sort_asc,#GET{sort_asc}})]"
-				url_sort_desc="[(#ENV{sort_desc,#GET{sort_desc}})]"
-				ref="montableau"
-				></mon-tableau>
+					pdfuri="#GET{pdfuri}"
+					:tparpage="#ENV{tparpage_deux, #ENV{tparpage, [10, 20, 50, 'Tous']}}"
+					:afficher="#ENV{afficher_deux,0}"
+					champcsv="[(#ENV{champcsv_deux, #ENV{champcsv,html}})]"
+					delimitercsv="[(#ENV{delimitercsv_deux, #ENV{delimitercsv,','}})]"
+					namecsv="[(#ENV{namecsv_deux, #ENV{namecsv}})]"
+					namepdf="#ENV{namepdf_deux}"
+					argpdf="#ENV{argpdf_deux}"
+					fichierpdf="[(#ENV{fichierpdf_deux, #ENV{fichierpdf}})]"
+					htmlvuebloc="[(#GET{htmlvuebloc_deux})]"
+					filtrecolmulti="[(#ENV{filtrecolmulti_deux, #ENV{filtrecolmulti,oui}})]"
+					nomblocajaxreload="#ENV{nomblocajaxreload}"
+					stockage="#ENV{stockage,localstorage}"
+					includespip="#ENV{includespip}"
+					ref="montableau_deux"
+					filtrer="#ENV{rechercher}"
+					:_id="[(#ENV{_id_deux}|intval)]"
+					filtreselect="[(#ENV{filtrerselect_deux})]"
+					filtreselect="[(#ENV{filtrer_deux,#ENV{filtrerselect_deux}})]"
+					trier="[(#ENV{trier_deux})]"
+					langpdf="[(#ENV{langpdf})]"
+					:id_auteur="[(#SESSION{id_auteur}|intval)]"
+					:gamutable_version_demandee="#GET{gamutable_version_demandee,1}"
+				></gamu-table>
+			</div>
 		</div>
 	</BOUCLE_deux>
 </div>
 
 <script type="text/javascript">
-var $_id = #ENV{_id,0};
-$_id = parseInt($_id);
-var nomBlocAjaxReload = '';
+	var nomBlocAjaxReload = "";
 </script>
 
-[(#CONFIG{gamutable/version_js}|=={dev}|?{
-<script src="[(#CHEMIN{js/vue.js}|timestamp)]" type="text/javascript"></script>
-<script src="[(#CHEMIN{js/papaparse.js}|timestamp)]" type="text/javascript"></script>
-<script src="[(#CHEMIN{js/gamutable.js}|timestamp)]" type="text/javascript"></script>
-,
-<script src="[(#CHEMIN{js/vue.min.js}|timestamp)]" type="text/javascript"></script>
-<script src="[(#CHEMIN{js/papaparse.min.js}|timestamp)]" type="text/javascript"></script>
-<script src="[(#CHEMIN{js/gamutable.js}|compacte|timestamp)]" type="text/javascript"></script>
-})]
+<script src="[(#CHEMIN{js/localforage.min.js}|timestamp)]" type="text/javascript"></script>
+
+
+[(#CONFIG{gamutable/charger_modalbox}|=={oui}|oui)
+<script src="[(#CHEMIN{js/gamubox.js}|timestamp)]" type="text/javascript"></script>
+]
 

inclure/redirect_form.html

@@ -0,0 +1,17 @@
+#CACHE{0}
+
+[(#ENV**{message_ok}|oui)
+	<script type="text/javascript">
+		id = "#ENV**{message_ok}";
+		id = parseInt(id);
+		if (id > 0 && id < 9999999999) {
+			app.rechargerJson(id);
+			$.modalboxclose();
+		}
+		if (id === 9999999999) {
+			app.rechargerJson();
+			$.modalboxclose();
+		}
+		delete id;
+	</script>
+]

inclure/separateur_gamutables.html

@@ -0,0 +1,4 @@
+[(#REM)
+	si 2 Gamutables inclure à surcharger pour insérer du contenu entre les deux
+
+]<div class="gamutableSep"></div>

js/gamubox.js

@@ -0,0 +1,48 @@
+/*
+ * Pour parametrer la largeur :
+ *  	Indiquer le data-width sur le lien (exmeple data-width= "90")
+ *		Imposer le style sur le premier bloc englobant dans la madiabox (style="width: [(#ENV{largeur})])
+ */
+jQuery(function () {
+    modalbox();
+
+    function modalbox() {
+        $('body').on('click', '.modalbox, .modalgamutable', function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            let ts = + new Date()
+            let url = $(this).attr('href');
+            url += '&var_zajax=content';
+            url += '&ts=' + ts;
+            let data = {};
+            let minHeight = $(this).data('minheight');
+            let minWidth = $(this).data('minwidth');
+            if (minHeight !== 'undefined') {
+                data.minHeight = minHeight;
+            }
+            if (minWidth !== 'undefined') {
+                data.minWidth = minWidth;
+            }
+            let width = $(this).data('width');
+            if (width !== 'undefined') {
+                data.width = width;
+                let valeur_reduite = ($(window).width() * width) / 100;
+                url += '&largeur=' + valeur_reduite + 'px';
+            }
+
+            let that = this;
+            data.onShow = () => {
+                if (typeof charger_require !== 'undefined') {
+                    charger_require();
+                }
+
+                if ($(that).hasClass('modalgamutable')) {
+                    if (typeof window.gamutable !== 'undefined') {
+                        window.gamutable();
+                    }
+                }
+            };
+            $.modalbox(url, data);
+        });
+    }
+});

js/gamutable.es6.js

@@ -1,6 +1,4 @@
 jQuery(function () {
-	// pour les #URL_ACTION_AUTEUR
-	// il faut ajouter une class : url_action
 	$('#app').on('click', '.url_action', function (e) {
 		e.preventDefault();
 		e.stopPropagation();
@@ -12,23 +10,35 @@ jQuery(function () {
 		}
 		let url = $(this).attr('href');
 		let id = $(this).data('id');
+		// passer en refresh animé une éventuelle icone
+		if ($(this).has('i.icon, i.fa')) {
+			$(this).find('i.icon, i.fa').eq(0).replaceWith('<i class="fa fa-refresh fa-spin"></i>');
+		}
 		let nomBlocAjaxReload = $(this).data('ajaxreload');
 		console.time('Chargement de VueJs APRES Ajax');
 		$.ajax({
 			url: url,
+			dataType: 'json',
 			async: true,
-		}).done(function () {
+		}).done(function (retour) {
+			if (!$.isEmptyObject(retour) && !$.isEmptyObject(retour.message_erreur)) {
+				alert(retour.message_erreur);
+			} else {
 				if (parseInt(id) > 0) {
 					app.rechargerJson(id);
+					app.rechargerJson_deux(id);
 				} else {
 					app.rechargerJson();
+					app.rechargerJson_deux();
 				}
 				if (nomBlocAjaxReload !== undefined) {
+					console.log('depart reload: ' + nomBlocAjaxReload);
 					ajaxReload(nomBlocAjaxReload, {
 						args: { id },
 						callback: function () {},
 					});
 				}
+			}
 		});
 	});
 
@@ -56,7 +66,14 @@ jQuery(function () {
 		let width = $(this).data('width');
 		if (width !== undefined) {
 			data.width = width;
+			let valeur_reduite = ($(window).width() * width) / 100;
+			url += '&largeur=' + valeur_reduite + 'px';
 		}
+		data.onShow = () => {
+			if (typeof charger_require !== undefined) {
+				charger_require();
+			}
+		};
 		$.modalbox(url, data);
 	});
 
@@ -77,7 +94,8 @@ function recupJson(d) {
 	try {
 		return JSON.parse(d);
 	} catch (e) {
-		return [];
+		console.log('erreur recupJson ', e);
+		return false;
 	}
 }
 const orderBy = (arr, props, orders, champ) =>
@@ -145,6 +163,7 @@ function trouver_index(table, id) {
 	});
 	return i;
 }
+
 let monTableau = {
 	props: {
 		tparpage: {
@@ -157,6 +176,18 @@ let monTableau = {
 			type: String,
 			required: true,
 		},
+		pdfuri: {
+			type: String,
+		},
+		namepdf: {
+			type: String,
+		},
+		fichierpdf: {
+			type: String,
+		},
+		argpdf: {
+			type: String,
+		},
 		champcsv: {
 			type: String,
 		},
@@ -179,6 +210,27 @@ let monTableau = {
 			type: String,
 			default: 'tableau',
 		},
+		filtrecolmulti: {
+			type: String,
+		},
+		nomblocajaxreload: {
+			type: String,
+		},
+		stockage: {
+			type: String,
+		},
+		includespip: {
+			type: String,
+		},
+		filtrer: {
+			type: String,
+		},
+		_id: {
+			type: String,
+		},
+		filtreselect: {
+			type: String,
+		},
 	},
 	data: function () {
 		return {
@@ -186,10 +238,21 @@ let monTableau = {
 			header: [],
 			crayons: [],
 			classes: [],
-			search: '',
+			checkbox: [],
+			Tcheckbox: [],
+			ordreCol: [],
+			filtreCol: [],
+			filtreColExist: false,
+			filtreColType: [],
+			filtreColSelected: {},
+			filtreColModif: 0,
+			filtreColVal: {},
+			search: this.filtrer,
 			page: 1,
 			parPage: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
-			parPageSelect: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
+			parPageSelect: sessionStorage.getItem('nbItemsChaine')
+				? sessionStorage.getItem('nbItemsChaine')
+				: this.tparpage[0],
 			pages: [],
 			triOrders: [],
 			triProps: [],
@@ -199,9 +262,16 @@ let monTableau = {
 			nameLocalStorage: this.calculer_nameLocalStorage(),
 			quelleVue: this.vueblocdefaut,
 			vuebloc: '',
+			model: [],
+			options: [],
+			searchInputHead: '',
+			searchInputVal: '',
+			loadingVueSelect: true,
+			ajaxCrayons: false,
 		};
 	},
 	mounted() {
+		localforage.setDriver(localforage[this.stockage.toUpperCase()]);
 		this.chargerJson();
 		if (this.urlvuebloc) {
 			fetch(this.urlvuebloc)
@@ -212,20 +282,105 @@ let monTableau = {
 		}
 	},
 	computed: {
+		//
+		// --------------------
+		// ce filtre etait utilisé pour :visible-options de vue-next-select
+		// A quoi sert il ?
+		// il empeche la recherche dans le select
+		// --------------------
+		//
+		// filtreColVal_visible: function () {
+		// 	let head = this.searchInputHead;
+		// 	let val = this.searchInputVal;
+		// 	console.log('head = ', head);
+		// 	console.log('val = ', val);
+		// 	if (!head) {
+		// 		return this.filtreColVal;
+		// 	} else {
+		// 		let filtreColVal_visible = {};
+		// 		filtreColVal_visible[head] = this.filtreColVal[head].filter((v) => {
+		// 			return v.toString().toLowerCase().indexOf(val.toLowerCase()) !== -1;
+		// 		});
+		// 		return filtreColVal_visible;
+		// 	}
+		// },
 		tableau: function () {
 			this.setPages();
-			if (!this.search) {
+			if (!this.search && !this.filtreColModif) {
 				return this.pagination(this.table);
 			}
 			return this.pagination(
-				this.table.filter((ligne) =>
+				this.table.filter((ligne) => {
+					let rsearch =
 						Object.values(ligne[this.champ_search])
 							.toString()
 							.toLowerCase()
 							.indexOf(this.search.toLowerCase()) < 0
 							? false
-						: true
+							: true;
+					if (!rsearch) {
+						return false;
+					}
+
+					Object.keys(this.filtreColSelected).forEach((colName) => {
+						if (rsearch) {
+							let colValue = this.filtreColSelected[colName];
+							if (colValue !== null) {
+								if (!Array.isArray(colValue)) {
+									colValue = [colValue];
+								}
+								let TcolValue = [];
+								colValue.forEach((s) => {
+									if (Number.isInteger(s)) {
+										TcolValue.push(s);
+									}
+									if (s.length > 0) {
+										TcolValue.push(s.toLowerCase());
+									}
+								});
+								if (TcolValue.length) {
+									if (this.filtreColType[colName] === 'select') {
+										let Trsearch = TcolValue.some((uneValeur) => {
+											if (Number.isInteger(uneValeur)) {
+												if (parseInt(ligne[this.champ_search][colName]) === uneValeur) {
+													return true;
+												}
+											} else {
+												if (
+													ligne[this.champ_search][colName] !== undefined &&
+													!(
+														uneValeur.indexOf(
+															ligne[this.champ_search][colName]
+																.toString()
+																.toLowerCase()
+																.toString()
+														) === -1 ||
+														!ligne[this.champ_search][colName].toString().toLowerCase()
 													)
+												) {
+													return true;
+												}
+											}
+										});
+										if (!Trsearch) {
+											rsearch = false;
+										}
+									} else {
+										if (
+											ligne[this.champ_search][colName]
+												.toString()
+												.toLowerCase()
+												.indexOf(TcolValue.toString()) === -1
+										) {
+											rsearch = false;
+										}
+									}
+								}
+							}
+						}
+					});
+					return rsearch;
+				})
 			);
 		},
 	},
@@ -236,24 +391,86 @@ let monTableau = {
 			} else {
 				this.parPage = e;
 			}
+			console.log(this.parPage);
 			sessionStorage.setItem('nbItems', this.parPage);
+			sessionStorage.setItem('nbItemsChaine', this.parPageSelect);
 		},
 		table() {
+			this.saveHeader();
 			let $table = [];
-			$table = [
-				...[
-					{
-						header: this.header,
-						crayons: this.crayons,
-						classes: this.classes,
+			$table = this.table;
+			localforage.setItem(this.nameLocalStorage, JSON.stringify($table));
 		},
-				],
-				...this.table,
-			];
-			localStorage.setItem(this.nameLocalStorage, JSON.stringify($table));
+		tableau() {
+			// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+			// Si on veut filtrer la liste des options dynamique en fonction
+			// du tri du tableau
+			// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+			if (this.filtrecolmulti === 'non') {
+				this.filtreCol.forEach((col) => {
+					// let Tval = [''];
+					let Tval = [];
+					this.tableau.forEach((t) => {
+						let valCol = t[this.champ_search][col];
+						if (Tval.indexOf(valCol) === -1) {
+							Tval.push(valCol);
+							this.filtreColValOk = true;
+						}
+					});
+					this.filtreColVal[col] = Tval;
+				});
+			}
+		},
+		filtreColSelected: {
+			handler() {
+				if (!this.loadingVueSelect) {
+					let ObfiltreSelect = [];
+					if (this.filtreColSelected) {
+						Object.entries(this.filtreColSelected).forEach(([champ, valeurs]) => {
+							if (!Array.isArray(valeurs)) {
+								valeurs = [valeurs];
+							}
+							ObfiltreSelect.push({ champ, valeurs });
+						});
+					}
+					if (!this.ajaxCrayons) {
+						localStorage.setItem('filtreselect_' + this.nameLocalStorage, JSON.stringify(ObfiltreSelect));
+					}
+				}
+			},
+			deep: true,
 		},
 	},
 	methods: {
+		saveHeader() {
+			let $header = {
+				header: this.header,
+				crayons: this.crayons,
+				classes: this.classes,
+				filtreCol: this.filtreColType,
+				ordreCol: this.ordreCol,
+			};
+			// if (!localStorage.getItem('header_' + this.nameLocalStorage)) {
+			// localStorage.setItem('headerJson_' + this.nameLocalStorage, JSON.stringify($header));
+			// }
+			localStorage.setItem('header_' + this.nameLocalStorage, JSON.stringify($header));
+		},
+		deleteInputSearch(head) {
+			this.loadingVueSelect = false;
+			this.filtreColSelected[head] = [];
+		},
+		hanldeSearchInput(event, head) {
+			this.searchInputHead = head;
+			this.searchInputVal = event.target.value;
+		},
+		selectValCol() {
+			this.filtreColModif++;
+			this.searchInputVal = '';
+			this.searchInputHead = '';
+		},
+		endLoadingVueSelect() {
+			this.loadingVueSelect = false;
+		},
 		calculer_nameLocalStorage() {
 			if (this.apiuri) {
 				return this.apiuri.match(/.*page=(.*)/)[1];
@@ -261,14 +478,14 @@ let monTableau = {
 			return '';
 		},
 		chargerJson(id) {
+			this.chargement = true;
 			let url = this.apiuri;
 			if (parseInt(id) > 0) {
 				url += '&id=' + id;
 			} else {
-				let data = localStorage.getItem(this.nameLocalStorage);
-				data = recupJson(data);
-				if (data && data.length) {
-					let config = data.shift();
+				let config = localStorage.getItem('header_' + this.nameLocalStorage);
+				config = recupJson(config);
+				if (config && config.header !== undefined) {
 					this.header = config.header;
 					if (config.crayons !== undefined) {
 						this.crayons = config.crayons;
@@ -276,11 +493,54 @@ let monTableau = {
 					if (config.classes !== undefined) {
 						this.classes = config.classes;
 					}
-					this.table = data;
-					if (data.length && data[0].search) {
-						this.champ_search = 'search';
+					if (config.checkbox !== undefined) {
+						this.checkbox = config.checkbox;
+						Object.keys(this.checkbox).forEach((head) => {
+							this.Tcheckbox[head] = [];
+						});
 					}
-					console.log('fin chargement localStorage');
+					if (config.ordreCol !== undefined) {
+						this.ordreCol = config.ordreCol;
+					}
+					let filtreCol = [];
+					if (config.filtreCol !== undefined) {
+						filtreCol = config.filtreCol;
+					}
+					let that = this;
+					localforage
+						.getItem(that.nameLocalStorage)
+						.then(function (data) {
+							data = recupJson(data);
+							if (data && data.length) {
+								that.table = data;
+								if (data[0].search) {
+									that.champ_search = 'search';
+								}
+								if (filtreCol !== undefined) {
+									that.filtreColType = filtreCol;
+									Object.keys(that.filtreColType).forEach((col) => {
+										let Tval = [];
+										// let Tval = [''];
+										that.table.forEach((t) => {
+											let valCol = t[that.champ_search][col];
+											if (Tval.indexOf(valCol) === -1) {
+												Tval.push(valCol);
+											}
+										});
+										// that.filtreCol.push(col);
+										that.filtreColVal[col] = Tval.sort();
+										that.filtreColSelected[col] = [];
+									});
+								}
+								console.log('fin chargement local forage ');
+							}
+							if (that.nomblocajaxreload) {
+								ajaxReload(that.nomblocajaxreload);
+							}
+						})
+						.catch(function (err) {
+							console.log(err);
+						});
 				}
 			}
 			fetch(url)
@@ -290,9 +550,24 @@ let monTableau = {
 					this.header = config.header;
 					if (config.crayons !== undefined) {
 						this.crayons = config.crayons;
+					} else {
+						this.crayons = [];
 					}
 					if (config.classes !== undefined) {
 						this.classes = config.classes;
+					} else {
+						this.classes = [];
+					}
+					if (config.checkbox !== undefined) {
+						this.checkbox = config.checkbox;
+						Object.keys(this.checkbox).forEach((head) => {
+							this.Tcheckbox[head] = [];
+						});
+					}
+					if (config.ordreCol !== undefined) {
+						this.ordreCol = config.ordreCol;
+					} else {
+						this.ordreCol = [];
 					}
 					if (parseInt(id) > 0) {
 						if (data.length > 0) {
@@ -302,20 +577,85 @@ let monTableau = {
 							let i = trouver_index(this.table, id);
 							this.table.splice(i, 1);
 						}
+						localforage.setItem(this.nameLocalStorage, JSON.stringify(this.table));
 					} else {
 						this.table = data;
 						if (data[0] && data[0].search) {
 							this.champ_search = 'search';
 						}
 					}
+					if (config.filtreCol !== undefined) {
+						this.filtreColType = config.filtreCol;
+						this.filtreCol = [];
+						Object.keys(this.filtreColType).forEach((col) => {
+							let Tval = [];
+							this.table.forEach((t) => {
+								let valCol = t[this.champ_search][col];
+								if (valCol) {
+									if (Tval.indexOf(valCol) === -1) {
+										Tval.push(valCol);
+									}
+								}
+							});
+							this.filtreCol.push(col);
+							this.filtreColVal[col] = Tval.sort();
+							this.filtreColSelected[col] = [];
+						});
+					}
+
 					Vue.nextTick(() => {
 						this.chargement = false;
-						if ($_id > 0) {
-							this.selectLigne($_id, 'id');
-							let url = new URL(window.location);
-							url = url.href.replace('&_id=' + $_id, '');
-							history.pushState({}, null, url);
+						let filtreselect = localStorage.getItem('filtreselect_' + this.nameLocalStorage);
+						let Tfiltres = [];
+						// if (filtreselect) {
+						// 	Tfiltres = JSON.parse(filtreselect);
+						// } else if (this.filtreselect) {
+						// 	Tfiltres = recupJson(decodeURIComponent(this.filtreselect));
+						// 	localStorage.setItem('filtreselect_' + this.nameLocalStorage, JSON.stringify(Tfiltres));
+						// }
+						if (this.filtreselect) {
+							Tfiltres = recupJson(decodeURIComponent(this.filtreselect));
+							localStorage.setItem('filtreselect_' + this.nameLocalStorage, JSON.stringify(Tfiltres));
+						} else if (filtreselect) {
+							Tfiltres = JSON.parse(filtreselect);
 						}
+
+						Tfiltres.forEach((col) => {
+							this.filtreColSelected[col.champ] = [...this.filtreColSelected[col.champ], ...col.valeurs];
+						});
+						this.filtreColModif++;
+						this.ajaxCrayons = false;
+
+						if (parseInt(this._id) > 0) {
+							let _id = parseInt(this._id);
+							let parPage = parseInt(this.parPage);
+							if (parseInt(parPage)) {
+								let ordre = 0;
+								Object.values(this.table).forEach((d, i) => {
+									if (_id === d.html.id) {
+										ordre = i + 1;
+									}
+								});
+								if (ordre > parPage) {
+									let numPage = parseInt(ordre / parPage) + 1;
+									this.page = numPage;
+								}
+							}
+							this.selectLigne(_id, 'id');
+							// let url = new URL(window.location);
+							// url = url.href.replace('&_id=' + _id, '');
+							// history.pushState({}, null, url);
+						}
+
+						if (this.nomblocajaxreload) {
+							ajaxReload(this.nomblocajaxreload);
+						}
+						if (this.ordreCol) {
+							Object.entries(this.ordreCol).forEach(([col, sens]) => {
+								this.tri(col, sens);
+							});
+						}
+						$('td.crayon-init').removeClass('crayon-init');
 						console.timeEnd('Chargement de VueJs APRES Ajax');
 					});
 				})
@@ -335,7 +675,8 @@ let monTableau = {
 			let to = page * parPage;
 			return tableau.slice(from, to);
 		},
-		afficher_crayons(name, id) {
+		afficher_crayons(name, l) {
+			let id = l.crayons !== undefined && l.crayons[name] !== undefined ? l.crayons[name] : l.html.id;
 			if (Object.keys(this.crayons).indexOf(name) !== -1) {
 				return `crayon ${this.crayons[name]}-${name}-${id}`;
 			}
@@ -359,6 +700,8 @@ let monTableau = {
 				this.triOrders.push(sens);
 			}
 			this.table = orderBy(this.table, this.triProps, this.triOrders, this.champ_search);
+			this.ordreCol[col] = sens;
+			this.saveHeader();
 		},
 		ordreActif(col, sens) {
 			const i = this.triProps.indexOf(col);
@@ -369,9 +712,14 @@ let monTableau = {
 			}
 		},
 		resetTri() {
+			this.loadingVueSelect = false;
 			this.table = orderBy(this.table, ['id'], '', this.champ_search);
 			this.triOrders = [];
 			this.triProps = [];
+			this.ordreCol = [];
+			Object.keys(this.filtreColType).forEach((col) => {
+				this.filtreColSelected[col] = [];
+			});
 		},
 		selectLigne(id, col) {
 			if (col === 'id' && parseInt(id)) {
@@ -383,12 +731,47 @@ let monTableau = {
 				}
 			}
 		},
-		exportCSV() {
+		genererPDF(quoi = 'tableau') {
+			let $tableau = [];
+			Object.values(this[quoi]).forEach((d) => {
+				$tableau.push(d.html);
+			});
+
+			const data = {
+				fichierpdf: this.fichierpdf,
+				namepdf: this.namepdf,
+				header: this.header,
+				arg: this.argpdf,
+				Tdata: $tableau,
+			};
+
+			let req = $.ajax({
+				url: this.pdfuri,
+				type: 'POST',
+				dataType: 'text',
+				data: data,
+			});
+			let that = this;
+			req.done(function (urlpdf) {
+				if (urlpdf) {
+					that.navigate(urlpdf, true);
+				}
+			});
+		},
+		navigate(href, newTab) {
+			var a = document.createElement('a');
+			a.href = href;
+			if (newTab) {
+				a.setAttribute('target', '_blank');
+			}
+			a.click();
+		},
+		exportCSV(quoi = 'tableau') {
 			let $csv = [];
 			let $header = [];
 			let $tableau = [];
 			Object.keys(this.header).forEach((k) => $header.push(k));
-			$tableau = this.tableau.reduce((acc, ligne) => {
+			$tableau = this[quoi].reduce((acc, ligne) => {
 				let $uneLigne = [];
 				Object.values(ligne[this.champcsv]).forEach((l) => $uneLigne.push(l));
 				return [...acc, [...$uneLigne]];
@@ -406,6 +789,61 @@ let monTableau = {
 		changerVue(vue) {
 			this.quelleVue = vue;
 		},
+		ordonnerSelect(a, b) {
+			// attention ! le test d'égalité en == et non pas === est voulu tel quel...
+			if ((Number.isInteger(a) || parseInt(a) == a) && (Number.isInteger(b) || parseInt(b) == b)) {
+				return parseInt(a) - parseInt(b);
+			} else {
+				let x = toString(a).toLowerCase();
+				let y = toString(b).toLowerCase();
+				if (x < y) {
+					return -1;
+				}
+				if (x > y) {
+					return 1;
+				}
+				return 0;
+			}
+		},
+		validerCheckboxCol(head) {
+			let tableau = this.tableau;
+			if (this.Tcheckbox[head] !== undefined && this.Tcheckbox[head].length) {
+				this.Tcheckbox[head] = [];
+			} else {
+				this.Tcheckbox[head] = [];
+				tableau.forEach((d) => {
+					this.Tcheckbox[head].push(d.html.id);
+				});
+			}
+		},
+		checkboxValider(head, url) {
+			let that = this;
+			console.log('head = ', head);
+			console.log('url = ', url);
+			let typeLien = 'page';
+			if (url.includes('action=')) {
+				typeLien = 'action';
+			}
+			// $.modalbox(url, data);
+			if (typeLien === 'action') {
+				$.ajax({
+					url: url,
+					data: { data: this.Tcheckbox[head] },
+					type: 'POST',
+				}).done(function () {
+					that.chargerJson();
+				});
+			} else {
+				const Tcheck = encodeURIComponent(JSON.stringify(this.Tcheckbox[head]));
+				url += '&data=' + Tcheck;
+				url += '&var_zajax=content';
+				const data = {};
+				data.onClose = () => {
+					that.chargerJson();
+				};
+				$.modalbox(url, data);
+			}
+		},
 	},
 	template: `
 	<div class="gamutable">
@@ -417,21 +855,26 @@ let monTableau = {
 
 			<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()"
 				title="Réinitialiser les tris des colonnes">
-				<i class="fa fa-repeat fas fa-redo">
+				<i class="fa fas fa-eraser rouge"></i>
+				<i class="fa fa-filter fas"></i>
+			</button>
+			<button class="btn var_gamutable" type="button" @click.stop="chargerJson()"
+				title="Forcer le rechargement">
+				<i class="fa fa-refresh fas fa-sync"></i>
 			</button>
 
 			<button class="btn gamutable--vueTable" title="Switcher en Vue tableau"
 				@click.stop="changerVue('tableau')"
 				v-if="this.vuebloc"
 				v-show="this.quelleVue === 'bloc'">
-				<i class="fas fa fa-table">
+				<i class="fas fa fa-table"></i>
 			</button>
 
 			<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc"
 				@click.stop="changerVue('bloc')"
 				v-if="this.vuebloc"
 				v-show="this.quelleVue === 'tableau'">
-				<i class="fas fa fa-th-large">
+				<i class="fas fa fa-th-large"></i>
 			</button>
 			<button class="btn gamutable--exportCSV" type="button" @click.stop="exportCSV()"
 				v-show="this.namecsv"
@@ -439,6 +882,26 @@ let monTableau = {
 			>
 				<i class="fa fa-file-excel-o fas fa-file-csv" aria-hidden="true"></i>
 			</button>
+			<button class="btn" type="button" @click.stop="genererPDF()"
+				v-show="this.fichierpdf"
+				title="Générer le PDF du tableau affiché"
+			>
+				<i class="fas fa-file-pdf rouge" aria-hidden="true" alt="pdf"></i>
+			</button>
+			<button class="btn gamutable--exportCSV" type="button" @click.stop="exportCSV('table')"
+				v-show="this.namecsv"
+				title="Exporter le tableau complet en csv"
+			>
+				<i class="fas fa fa-file-excel-o" aria-hidden="true" alt="csv"></i>
+			</button>
+
+			<button class="btn" type="button" @click.stop="genererPDF('table')"
+				v-show="this.fichierpdf"
+				title="Générer le PDF du tableau complet"
+			>
+				<i class="far fa-file-pdf rouge" aria-hidden="true" alt="pdf"></i>
+			</button>
+
 			<span v-show="chargement" class="rouge">
 				<i class="fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin"></i>
 				<span class="texteMajBDD">
@@ -450,7 +913,10 @@ let monTableau = {
 			>
 				<i class="fa fas fa-database"></i>
 			</span>
+			<span class="gamutable-nbrMax" :data-nbrmax="table.length">{{tableau.length}} / {{table.length}} éléments</span>
+			<span class="includespip" v-html="this.includespip"> </span>
 		</div>
+
 		<div class="vueBlocs" v-if="quelleVue === 'bloc'">
 			<div class="vueBlocs-unbloc"
 			v-for="(ligne) in tableau"
@@ -463,17 +929,76 @@ let monTableau = {
 			<thead>
 				<tr>
 					<th v-for="(label,head,i) in header" :key="'head_'+i" :class="[head,classes[head]]">
+						<span class="gt_labels">
 							<span v-html="label"></span>
 							<span class="iconeTri">
 								<i class="fa fa-sort-asc fa-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
-							<i class="fa fa-sort-desc fa-sort-down":class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')" ></i>
+								<i class="fa fa-sort-desc fa-sort-down" :class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')"></i>
 							</span>
+						</span>
+					</th>
+				</tr>
+				<tr v-if="filtreCol.length" class="filtreColonne">
+					<th v-for="(label,head,i) in header" :key="'filtreCol_'+i">
+						<div v-if="checkbox[head] !== undefined" :id="'filtreCol_'+head" :class="classes[head]" class="flex justify-between">
+							<input class="ml-2" type="checkbox" @click.stop="validerCheckboxCol(head)">
+							<button @click.stop="checkboxValider(head, checkbox[head])"><i class="fas fa-share-square"></i></button>
+						</div>
+						<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_'+head" :class="classes[head]">
+							<vue-select
+								v-if="filtreColType[head] === 'select'"
+								v-model="filtreColSelected[head]"
+								:options="filtreColVal[head].sort(ordonnerSelect)"
+								hide-selected
+								multiple
+								taggable
+								close-on-select
+								clear-on-close
+								searchable
+								@selected="selectValCol"
+								@search:focus="endLoadingVueSelect"
+								@removed="endLoadingVueSelect"
+							>
+								<template #tag="{ option, remove }">
+									<div class="tag--un">
+										{{ option }}
+										<span class="tag--remove pointer" title="Cliquer pour supprimer "@click.stop="remove">x</span>
+									</div>
+								</template>
+							</vue-select>
+
+							<input
+								v-if="filtreColType[head] === 'input'"
+								class="gamutable__input--filtrer"
+								v-model="filtreColSelected[head]"
+								type="text"
+								placeholder="Rechercher"
+								@keydown="endLoadingVueSelect"
+
+							>
+							<button
+								v-if="filtreColType[head] === 'input' && filtreColSelected[head].length !== 0"
+								@click.stop="deleteInputSearch(head)"
+								title="Vider ce champ"
+								class="gamutable__input--filtrer"
+							>X</button>
+						</div>
 					</th>
 				</tr>
 			</thead>
 			<tbody>
 				<tr v-for="l in tableau" :key="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''" >
-					<td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name,l.html.id), name, classes[name]]" v-html="td" @click="selectLigne(l.html.id,name)">
+					<td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name, l), name, classes[name], l.classes !== undefined ? l.classes[name] : '']"  @click="selectLigne(l.html.id,name)">
+					<div v-if="checkbox[name] !== undefined">
+						<div v-if="td.split('-')[0] === 'dataid'" class="text-center">
+							<label>
+								<input type='checkbox'  v-model='Tcheckbox[name]' :value="td.split('-')[1]">
+							</label>
+						</div>
+						<div v-else v-html="td"></div>
+					</div>
+					<div v-else v-html="td"></div>
+
 					</td>
 				</tr>
 			</tbody>
@@ -482,15 +1007,15 @@ let monTableau = {
 			<div class="gamutable-nbrMax">{{tableau.length}} / {{table.length}} éléments</div>
 			<div class="gamutable--pagination">
 				<div class="page-item">
-					<button type="button" class="page-link" v-if="page != 1" @click="page=1"> Start </button>
-					<button type="button" class="page-link" v-if="page != 1" @click="page--"> Previous </button>
+					<button type="button" class="page-link" v-if="page != 1" @click="page=1"> Premier </button>
+					<button type="button" class="page-link" v-if="page != 1" @click="page--"> Précédent </button>
 				</div>
 				<div class="page-item">
-					<button type="button" class="page-link" v-for="pageNumber in pages.slice(page-1, page+5)" @click="page = pageNumber"> {{pageNumber}} </button>
+					<button type="button" class="page-link" :class="{'on':pageNumber===page}" v-for="pageNumber in pages.slice(page-4 < 0 ? 0 : page-4, page+3)" @click="page = pageNumber"> {{pageNumber}} </button>
 				</div>
 				<div class="page-item">
-					<button type="button" @click="page++" v-if="page < pages.length" class="page-link"> Next </button>
-					<button type="button" @click="page=pages.length" v-if="page < pages.length" class="page-link"> Last </button>
+					<button type="button" @click="page++" v-if="page < pages.length" class="page-link"> Suivant </button>
+					<button type="button" @click="page=pages.length" v-if="page < pages.length" class="page-link"> Dernier </button>
 				</div>
 			</div>
 		</div>
@@ -500,10 +1025,17 @@ let monTableau = {
 const gamuTable = {
 	components: { monTableau },
 	methods: {
-		rechargerJson(id) {
+		rechargerJson(id, ajaxCrayons = true) {
+			this.$refs.montableau.ajaxCrayons = ajaxCrayons;
 			this.$refs.montableau.chargerJson(id);
 		},
+		rechargerJson_deux(id, ajaxCrayons = true) {
+			if (this.$refs.montableau_deux) {
+				this.$refs.montableau_deux.ajaxCrayons = ajaxCrayons;
+				this.$refs.montableau_deux.chargerJson(id);
+			}
+		},
 	},
 };
 
-let app = Vue.createApp(gamuTable).mount('#app');
+let app = Vue.createApp(gamuTable).component('vue-select', window.VueNextSelect).mount('#app');

js/gamutable.js

@@ -1,503 +0,0 @@
-"use strict";
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-jQuery(function () {
-  // pour les #URL_ACTION_AUTEUR
-  // il faut ajouter une class : url_action
-  $('#app').on('click', '.url_action', function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    var confirmation = $(this).data('confirm');
-
-    if (confirmation !== undefined) {
-      if (!confirm(confirmation)) {
-        return;
-      }
-    }
-
-    var url = $(this).attr('href');
-    var id = $(this).data('id');
-    var nomBlocAjaxReload = $(this).data('ajaxreload');
-    console.time('Chargement de VueJs APRES Ajax');
-    $.ajax({
-      url: url,
-      async: true
-    }).done(function () {
-      if (parseInt(id) > 0) {
-        app.rechargerJson(id);
-      } else {
-        app.rechargerJson();
-      }
-
-      if (nomBlocAjaxReload !== undefined) {
-        ajaxReload(nomBlocAjaxReload, {
-          args: {
-            id: id
-          },
-          callback: function callback() {}
-        });
-      }
-    });
-  }); // lancement d'une modalbox
-
-  $('#app').on('click', '.modalbox', function (e) {
-    e.stopPropagation();
-    e.preventDefault();
-    var confirmation = $(this).data('confirm');
-
-    if (confirmation !== undefined) {
-      if (!confirm(confirmation)) {
-        return;
-      }
-    }
-
-    var url = $(this).attr('href');
-    url += '&var_zajax=content';
-    var data = {};
-    var minHeight = $(this).data('minheight');
-
-    if (minHeight !== undefined) {
-      data.minHeight = minHeight;
-    }
-
-    var minWidth = $(this).data('minwidth');
-
-    if (minWidth !== undefined) {
-      data.minWidth = minWidth;
-    }
-
-    var width = $(this).data('width');
-
-    if (width !== undefined) {
-      data.width = width;
-    }
-
-    $.modalbox(url, data);
-  }); // lancement d'une médiabox
-
-  $('#app').on('click', '.mediabox', function (e) {
-    e.preventDefault();
-    var confirmation = $(this).data('confirm');
-
-    if (confirmation !== undefined) {
-      if (!confirm(confirmation)) {
-        return;
-      }
-    }
-
-    var href = $(this).attr('href');
-    $.fn.mediabox({
-      href: href
-    });
-  });
-});
-
-function recupJson(d) {
-  try {
-    return JSON.parse(d);
-  } catch (e) {
-    return [];
-  }
-}
-
-var orderBy = function orderBy(arr, props, orders, champ) {
-  return arr.sort(function (a, b) {
-    return props.reduce(function (acc, prop, i) {
-      if (acc === 0) {
-        var _ref = orders && orders[i] === 'desc' ? [b[champ][prop], a[champ][prop]] : [a[champ][prop], b[champ][prop]],
-            _ref2 = _slicedToArray(_ref, 2),
-            p1 = _ref2[0],
-            p2 = _ref2[1]; // passe en lowercase les String
-
-
-        p1 = typeof p1 === 'string' ? p1.toLowerCase() : p1;
-        p2 = typeof p2 === 'string' ? p2.toLowerCase() : p2; // Gestion du format de date
-        // transforme 03/11/2000 en 20001103
-
-        var re = /^(\d{2})\/(\d{2})\/(\d{2,4})$/;
-
-        if (typeof p1 !== 'number') {
-          var r1 = p1.match(re);
-
-          if (Array.isArray(r1)) {
-            p1 = r1[3] + r1[2] + r1[1];
-          }
-
-          var r2 = p2.match(re);
-
-          if (Array.isArray(r2)) {
-            p2 = r2[3] + r2[2] + r2[1];
-          }
-        }
-
-        acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
-      }
-
-      return acc;
-    }, 0);
-  });
-};
-
-console.time('Chargement de VueJS AVANT Ajax');
-console.time('Chargement de VueJs APRES Ajax');
-Vue.nextTick(function () {
-  console.timeEnd('Chargement de VueJS AVANT Ajax');
-});
-
-function exporterCSV(json, delimitercsv, name) {
-  var csv = '';
-
-  if (delimitercsv) {
-    csv = Papa.unparse(json, {
-      delimiter: delimitercsv
-    });
-  } else {
-    csv = Papa.unparse(json);
-  } //Download the file as CSV
-
-
-  var link = document.createElement('a');
-  link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv));
-  link.setAttribute('download', name);
-  link.style.visibility = 'hidden';
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-}
-
-function trouver_index(table, id) {
-  var i = -1;
-  table.forEach(function (ligne, index) {
-    if (ligne.html.id === parseInt(id)) {
-      i = index;
-    }
-  });
-  return i;
-}
-
-var monTableau = {
-  props: {
-    tparpage: {
-      type: Array,
-      default: function _default() {
-        return [10, 20, 50, 'Tous'];
-      }
-    },
-    apiuri: {
-      type: String,
-      required: true
-    },
-    champcsv: {
-      type: String
-    },
-    delimitercsv: {
-      type: String
-    },
-    namecsv: {
-      type: String
-    },
-    url_sort_asc: {
-      type: String
-    },
-    url_sort_desc: {
-      type: String
-    },
-    urlvuebloc: {
-      type: String
-    },
-    vueblocdefaut: {
-      type: String,
-      default: 'tableau'
-    }
-  },
-  data: function data() {
-    return {
-      table: [],
-      header: [],
-      crayons: [],
-      classes: [],
-      search: '',
-      page: 1,
-      parPage: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
-      parPageSelect: sessionStorage.getItem('nbItems') ? sessionStorage.getItem('nbItems') : this.tparpage[0],
-      pages: [],
-      triOrders: [],
-      triProps: [],
-      selectTr: [],
-      champ_search: 'html',
-      chargement: true,
-      nameLocalStorage: this.calculer_nameLocalStorage(),
-      quelleVue: this.vueblocdefaut,
-      vuebloc: ''
-    };
-  },
-  mounted: function mounted() {
-    var _this = this;
-
-    this.chargerJson();
-
-    if (this.urlvuebloc) {
-      fetch(this.urlvuebloc).then(function (response) {
-        return response.text();
-      }).then(function (data) {
-        _this.vuebloc = data;
-      });
-    }
-  },
-  computed: {
-    tableau: function tableau() {
-      var _this2 = this;
-
-      this.setPages();
-
-      if (!this.search) {
-        return this.pagination(this.table);
-      }
-
-      return this.pagination(this.table.filter(function (ligne) {
-        return Object.values(ligne[_this2.champ_search]).toString().toLowerCase().indexOf(_this2.search.toLowerCase()) < 0 ? false : true;
-      }));
-    }
-  },
-  watch: {
-    parPageSelect: function parPageSelect(e) {
-      if (!parseInt(e)) {
-        this.parPage = this.table.length;
-      } else {
-        this.parPage = e;
-      }
-
-      sessionStorage.setItem('nbItems', this.parPage);
-    },
-    table: function table() {
-      var $table = [];
-      $table = [{
-        header: this.header,
-        crayons: this.crayons,
-        classes: this.classes
-      }].concat(_toConsumableArray(this.table));
-      localStorage.setItem(this.nameLocalStorage, JSON.stringify($table));
-    }
-  },
-  methods: {
-    calculer_nameLocalStorage: function calculer_nameLocalStorage() {
-      if (this.apiuri) {
-        return this.apiuri.match(/.*page=(.*)/)[1];
-      }
-
-      return '';
-    },
-    chargerJson: function chargerJson(id) {
-      var _this3 = this;
-
-      var url = this.apiuri;
-
-      if (parseInt(id) > 0) {
-        url += '&id=' + id;
-      } else {
-        var data = localStorage.getItem(this.nameLocalStorage);
-        data = recupJson(data);
-
-        if (data && data.length) {
-          var config = data.shift();
-          this.header = config.header;
-
-          if (config.crayons !== undefined) {
-            this.crayons = config.crayons;
-          }
-
-          if (config.classes !== undefined) {
-            this.classes = config.classes;
-          }
-
-          this.table = data;
-
-          if (data.length && data[0].search) {
-            this.champ_search = 'search';
-          }
-
-          console.log('fin chargement localStorage');
-        }
-      }
-
-      fetch(url).then(function (response) {
-        return response.json();
-      }).then(function (data) {
-        var config = data.shift();
-        _this3.header = config.header;
-
-        if (config.crayons !== undefined) {
-          _this3.crayons = config.crayons;
-        }
-
-        if (config.classes !== undefined) {
-          _this3.classes = config.classes;
-        }
-
-        if (parseInt(id) > 0) {
-          if (data.length > 0) {
-            var i = trouver_index(_this3.table, id);
-            _this3.table[i] = data[0];
-          } else {
-            var _i2 = trouver_index(_this3.table, id);
-
-            _this3.table.splice(_i2, 1);
-          }
-        } else {
-          _this3.table = data;
-
-          if (data[0] && data[0].search) {
-            _this3.champ_search = 'search';
-          }
-        }
-
-        Vue.nextTick(function () {
-          _this3.chargement = false;
-
-          if ($_id > 0) {
-            _this3.selectLigne($_id, 'id');
-
-            var _url = new URL(window.location);
-
-            _url = _url.href.replace('&_id=' + $_id, '');
-            history.pushState({}, null, _url);
-          }
-
-          console.timeEnd('Chargement de VueJs APRES Ajax');
-        });
-      }).catch(function (error) {
-        return console.log(error);
-      });
-    },
-    setPages: function setPages() {
-      var nombreDePages = Math.ceil(this.table.length / this.parPage);
-      this.pages = [];
-
-      for (var index = 1; index <= nombreDePages; index++) {
-        this.pages.push(index);
-      }
-    },
-    pagination: function pagination(tableau) {
-      var page = this.page;
-      var parPage = this.parPage;
-      var from = page * parPage - parPage;
-      var to = page * parPage;
-      return tableau.slice(from, to);
-    },
-    afficher_crayons: function afficher_crayons(name, id) {
-      if (Object.keys(this.crayons).indexOf(name) !== -1) {
-        return "crayon ".concat(this.crayons[name], "-").concat(name, "-").concat(id);
-      }
-    },
-    tri: function tri(col) {
-      var sens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      var i = this.triProps.indexOf(col);
-
-      if (i !== -1) {
-        if (!sens) {
-          sens = 'asc';
-
-          if (this.triOrders[i] === 'asc') {
-            sens = 'desc';
-          }
-        }
-
-        this.triOrders[i] = sens;
-      } else {
-        if (!sens) {
-          sens = 'asc';
-        }
-
-        this.triProps.push(col);
-        this.triOrders.push(sens);
-      }
-
-      this.table = orderBy(this.table, this.triProps, this.triOrders, this.champ_search);
-    },
-    ordreActif: function ordreActif(col, sens) {
-      var i = this.triProps.indexOf(col);
-
-      if (i !== -1) {
-        if (this.triOrders[i] === sens) {
-          return 'active';
-        }
-      }
-    },
-    resetTri: function resetTri() {
-      this.table = orderBy(this.table, ['id'], '', this.champ_search);
-      this.triOrders = [];
-      this.triProps = [];
-    },
-    selectLigne: function selectLigne(id, col) {
-      if (col === 'id' && parseInt(id)) {
-        var i = this.selectTr.indexOf(id);
-
-        if (i !== -1) {
-          this.selectTr.splice(i, 1);
-        } else {
-          this.selectTr.push(id);
-        }
-      }
-    },
-    exportCSV: function exportCSV() {
-      var _this4 = this;
-
-      var $csv = [];
-      var $header = [];
-      var $tableau = [];
-      Object.keys(this.header).forEach(function (k) {
-        return $header.push(k);
-      });
-      $tableau = this.tableau.reduce(function (acc, ligne) {
-        var $uneLigne = [];
-        Object.values(ligne[_this4.champcsv]).forEach(function (l) {
-          return $uneLigne.push(l);
-        });
-        return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]);
-      }, []);
-      $csv = [[].concat($header)].concat(_toConsumableArray($tableau));
-      exporterCSV($csv, this.delimitercsv, this.namecsv);
-    },
-    replaceBloc: function replaceBloc(ligne) {
-      var html = this.vuebloc;
-      Object.keys(ligne).forEach(function (key) {
-        html = html.replace("@@".concat(key, "@@"), ligne[key]);
-      });
-      return html;
-    },
-    changerVue: function changerVue(vue) {
-      this.quelleVue = vue;
-    }
-  },
-  template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\"\n\t\t\t\ttitle=\"R\xE9initialiser les tris des colonnes\">\n\t\t\t\t<i class=\"fa fa-repeat fas fa-redo\">\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueTable\" title=\"Switcher en Vue tableau\"\n\t\t\t\t@click.stop=\"changerVue('tableau')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'bloc'\">\n\t\t\t\t<i class=\"fas fa fa-table\">\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueBloc\" title=\"Switcher en Vue Bloc\"\n\t\t\t\t@click.stop=\"changerVue('bloc')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'tableau'\">\n\t\t\t\t<i class=\"fas fa fa-th-large\">\n\t\t\t</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\tv-show=\"this.namecsv\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\t<span class=\"texteMajBDD\">\n\t\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"btn verte\" style=\"cursor:auto;\"\n\t\t\t\ttitle=\"Base de donn\xE9e synchronis\xE9e !\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fas fa-database\"></i>\n\t\t\t</span>\n\t\t</div>\n\t\t<div class=\"vueBlocs\" v-if=\"quelleVue === 'bloc'\">\n\t\t\t<div class=\"vueBlocs-unbloc\"\n\t\t\tv-for=\"(ligne) in tableau\"\n\t\t\t:key=ligne.id\n\t\t\tv-html=replaceBloc(ligne.html)\n\t\t\t>\n\t\t\t</div>\n\t\t</div>\n\t\t<table class=\"table table--zebra\" v-if=\"quelleVue === 'tableau'\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"[head,classes[head]]\">\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc fa-sort-up\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc fa-sort-down\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name, classes[name]]\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
-};
-var gamuTable = {
-  components: {
-    monTableau: monTableau
-  },
-  methods: {
-    rechargerJson: function rechargerJson(id) {
-      this.$refs.montableau.chargerJson(id);
-    }
-  }
-};
-var app = Vue.createApp(gamuTable).mount('#app');

json_gamutable.json.html

@@ -1,83 +1,97 @@
 #HTTP_HEADER{Content-Type: application/json; charset=#CHARSET}
-[(#ENV{id}|setenv{id_souscription})]
+[(#ENV{id}|setenv{id_article})]
 [{
+"header_top":{
+"Mais c'est qui ?": {"class":"descriptif text-center", "colspan" :5},
+"Choix": {"class":"choix text-center", "colspan" :2}
+},
 "header":{
 "id": "_",
 "titre": "titre",
+"nom": "Auteur",
 "date": "date",
-"statut": "statut",
-"genre": "genre",
-"nom_souscripteur": "nom du souscripteur",
-"prenom": "prénom",
-"date_naissance": "ddn",
-"lieu_naissance": "Lieu",
-"representant_legal": "R.Légal",
-"type": "type",
-"email": "email",
-"telephone": "téléphone",
-"adresse": "Adresse"
+"texte": "texte",
+"checkbox_a_valider": "a valider",
+"statut": "statut"
 },
+"footer": [
+{"source": "affiche", "champs" : [
+	{"nom": "type_mission", "legende" : "Somme Affiché"},
+	{"nom": "nom_champ_ttc", "fonction": "somme_monnaie"},
+	{"nom": "nom_champ_ht", "fonction": "somme_monnaie"}
+]},
+{"source": "total", "champs" : [
+	{"nom": "type_mission", "legende" : "Somme totale"},
+	{"nom": "nom_champ_ttc", "fonction": "somme_monnaie"},
+	{"nom": "nom_champ_ht", "fonction": "somme_monnaie"}
+]}
+],
 "crayons":{
-"titre" : "souscription",
-"prenom" : "souscription"
+	"titre" : "article",
+	"nom": "auteur"
+},
+"ordreCol" : {
+	"titre" : "desc",
+}
+"filtreCol" : {
+	"statut" : "select",
+	"titre": "input"
+},
+"filtreColValeurs" : {
+	"domaines" : [(#LISTE{valeur1, valeur2}|json_encode)]
 },
 "classes":{
 	"titre": "toto",
 	"email":"toto"
-}
 },
-<BOUCLE_souscriptions(SOUSCRIPTIONS){id_souscription?}{!par id_souscription}{tout}{','}>
+"checkbox": {
+[(#REM)
+	"realise": [(#URL_ACTION_AUTEUR{titi,0}|json_encode)]
+]
+	"realise": [(#URL_PAGE{toto}|json_encode)]
+},
+"maj": [(#CONFIG{derniere_modif_article}|tsToDate|json_encode)],
+"a_supprimer" : [ <BOUCLE_articlesAsup(ARTICLES){si #ENV{maj}}{staut = poubelle}{','}{maj > #ENV{maj}}> #ID_ARTICLE </BOUCLE_articlesAsup> ]
+
+},
+<BOUCLE_articles(ARTICLES){id_article?}{staut != poubelle}{','}{maj > #ENV{maj,0}}>
 [(#SET{statut,
-	#SET{args,#ID_SOUSCRIPTION|concat{-}|concat{#STATUT}}
-	<a class="url_action" data-id="#ID_SOUSCRIPTION" href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]">
+	#SET{args,#ID_ARTICLE|concat{-}|concat{#STATUT}}
+	<a class="url_action" data-id="#ID_ARTICLE" href="[(#URL_ACTION_AUTEUR{changer_statut_article,#GET{args}})]">
 		[(#STATUT|!={publie}|oui)
-			<i title="Souscription en attente" class="fa fa-check fa-2x orange" aria-hidden="true"></i>
+			<i title="Article en attente" class="fa fa-check fa-2x orange" aria-hidden="true"></i>
 		]
 		[(#STATUT|=={publie}|oui)
-			<i title="Souscription validée" class="fa fa-check fa-2x verte" aria-hidden="true"></i>
+			<i title="Article validé" class="fa fa-check fa-2x verte" aria-hidden="true"></i>
 		]
 	</a>
 })]
+[(#SET{valider, dataid-#ID_PATATE})]
+
 {
 "html": {
-	"id": #ID_SOUSCRIPTION,
-	"modif" : [(#VAL{<a class="modalbox" href="[(#URL_PAGE{souscrire}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{redirect,gamutable})]"><i class="fa fa-pencil"></i></a>}|json_encode)],
+	"id": #ID_ARTICLE,
+	"titre" : [(#TITRE|json_encode)],
+	"nom" : [(#NOM|json_encode)],
 	"date" : [(#DATE|affdate{d/m/Y}|json_encode)],
-	"statut" : [(#GET{statut}|json_encode)],
-	"genre" : [(#GENRE|json_encode)],
-	"nom_souscripteur" : [(#NOM_SOUSCRIPTEUR|json_encode)],
-	"prenom" : [(#PRENOM|json_encode)],
-	"qui": [(#VAL{<a class="mediabox" title="Détail du souscripteur" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,qui})]"><i class="fa fa-address-book"></i></a>}|json_encode)],
-	"nbr" : [(#NOMBRE)],
-	"montant_part" : [(#MONTANT_PART)],
-	"montant" : [(#MONTANT)],
-	"prix": [(#VAL{<a class="mediabox" title="Détail de la souscription" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,prix})]"><i class="fa fa-shopping-cart"></i></a>}|json_encode)],
-	"type" : [(#TYPE|json_encode)],
-	"email" : [(#VAL{<a href="mailto:#EMAIL" target="_blank">#EMAIL</a>}|json_encode)],
-	"telephone" : [(#TELEPHONE|json_encode)],
-	"ou": [(#VAL{<a class="mediabox" title="Détail des coordonnées" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,adresse})]"><i class="fa fa-address-card"></i></a>}|json_encode)]
+	"texte": [(#VAL{<a class="modalbox" title="Détail" href="[(#URL_PAGE{gamutable_texte}|parametre_url{id_article,#ID_ARTICLE})]">[(#TEXTE|couper{10})]</a>}|json_encode)],
+	"checkbox_a_valider": [(#DATE_REALISE|dateHumaine|sinon{#GET{valider}}json_encode)],
+	"statut" : [(#GET{statut}|json_encode)]
 },
 "classes": {
-	"modif": [(#STATUT|concat{-}|concat{#ID_SOUSCRIPTION}|json_encode)]
+	"texte": [(#STATUT|concat{-}|concat{#ID_ARTICLE}|json_encode)]
 },
-search: {
-	"id": #ID_SOUSCRIPTION,
-	"modif" : "",
-	"date" : [(#DATE|affdate{d/m/Y}|json_encode)],
-	"statut" : [(#GET{statut}|json_encode)],
-	"genre" : [(#GENRE|json_encode)],
-	"nom_souscripteur" : [(#NOM_SOUSCRIPTEUR|json_encode)],
-	"prenom" : [(#PRENOM|json_encode)],
-	"qui": "",
-	"nbr" : [(#NOMBRE)],
-	"montant_part" : [(#MONTANT_PART)],
-	"montant" : [(#MONTANT)],
-	"prix": "",
-	"type" : [(#TYPE|json_encode)],
-	"email" : [(#EMAIL|json_encode)],
-	"telephone" : [(#TELEPHONE|json_encode)],
-	"ou": ""
+"crayons": {
+	"nom": #ID_AUTEUR
+},
+"search": {
+	"id": #ID_ARTICLE,
+	"titre" : [(#TITRE|json_encode)],
+	"nom" : [(#NOM|json_encode)],
+	"date" : [(#DATE|affdate{U}|json_encode)],
+	"texte": [(#TEXTE|couper{10}|json_encode)],
+	"statut" : [(#STATUT|json_encode)]
 }
 }
-</BOUCLE_souscriptions>
+</BOUCLE_articles>
 ]

package.json

@@ -1,43 +1,34 @@
 {
-	"name": "starter_spip",
+  "name": "gamutable",
   "version": "1.0.0",
-	"description": "les fichiers à intégrer dans un plugin squelette pour avoir ZPIP opérationnel + Knacss 7",
-	"main": "gulpfile.js",
-	"browserslist": [
-		"last 1 version",
-		"> 1%",
-		"IE 10"
-	],
+  "private": true,
+  "type": "module",
   "scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"repository": {
-		"type": "git",
-		"url": "ssh://git@git.gamuza.fr:2222/Gamuza/starter_SPIP.git"
-	},
-	"author": "tofulm at Gamuza",
-	"license": "ISC",
-	"devDependencies": {
-		"@babel/core": "^7.10.2",
-		"@babel/preset-env": "^7.10.2",
-		"@types/jquery": "^3.3.38",
-		"gulp": "^4.0.2",
-		"gulp-babel": "^8.0.0",
-		"gulp-concat": "^2.6.1",
-		"gulp-notify": "^3.2.0",
-		"gulp-regex-rename": "^0.1.0",
-		"gulp-svg-sprite": "^1.5.0",
-		"gulp-svgmin": "^2.2.0",
-		"gulp-uglify": "^3.0.2"
+    "dev": "vite --mode dev",
+    "build": "vite build --mode prod",
+    "watch": "vite build --watch --mode prod"
   },
   "dependencies": {
-		"autoprefixer": "^9.8.0",
-		"cssnano": "^4.1.10",
-		"gulp-postcss": "^8.0.0",
-		"gulp-sass": "^4.1.0",
-		"gulp-sourcemaps": "^2.6.5",
-		"postcss": "^7.0.32",
-		"postcss-uncss": "^0.17.0",
-		"uncss": "^0.17.3"
+    "@vueform/multiselect": "^2.6.8",
+    "jenesius-vue-modal": "^1.11.9",
+    "json5": "^2.2.3",
+    "luxon": "^3.4.4",
+    "typescript": "^5.5.3",
+    "vue": "^3.4.32",
+    "vue-cookie-next": "^1.3.0",
+    "vue-next-select": "^2.10.5",
+    "vue-papa-parse": "^3.1.0",
+    "vue3-selecto": "^1.12.3"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.5.30",
+    "@types/luxon": "^3.4.2",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/compiler-sfc": "^3.4.32",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.27.0",
+    "vite": "^5.3.4",
+    "vite-plugin-live-reload": "^3.0.3",
+    "vite-plugin-mkcert": "^1.17.5"
   }
 }

paquet.xml

@@ -1,9 +1,9 @@
 <paquet
 	prefix="gamutable"
 	categorie="outil"
-	version="2.0.3"
-	etat="dev"
-	compatibilite="[3.2.0-dev;3.3.*]"
+	version="5.7.0"
+	etat="test"
+	compatibilite="[3.3.0;4.*]"
 	logo="prive/themes/spip/images/gamutable-xx.svg"
 	documentation=""
 >
@@ -18,6 +18,8 @@
 
 	<pipeline nom="formulaire_admin" inclure="gamutable_pipelines.php"/>
 	<pipeline nom="affichage_final" inclure="gamutable_pipelines.php" />
+	<pipeline nom="crayons_vue_affichage_final" inclure="gamutable_pipelines.php" />
+	<pipeline nom="insert_head_css" inclure="gamutable_pipelines.php" />
 
 
 </paquet>

prive/themes/spip/images/gamutable-xx.svg

@@ -17,17 +17,6 @@
    width="128"
    height="128"
    inkscape:version="0.92.4 5da689c313, 2019-01-14">
-  <metadata
-     id="metadata4664">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
   <defs
      id="defs4662" />
   <sodipodi:namedview

src/components/helpers.js

@@ -0,0 +1,83 @@
+function trouver_index(table, id) {
+	let i = -1;
+	table.forEach((ligne, index) => {
+		if (ligne.html.id === parseInt(id)) {
+			i = index;
+		}
+	});
+	return i;
+}
+
+function recupJson(d) {
+	try {
+		return JSON.parse(d);
+	} catch (e) {
+		console.log("erreur recupJson ", e);
+		return false;
+	}
+}
+
+function navigate(href, newTab) {
+	let a = document.createElement("a");
+	a.href = href;
+	if (newTab) {
+		a.setAttribute("target", "_blank");
+	}
+	a.click();
+}
+
+function ordonnerSelect(a, b) {
+	// attention ! le test d'égalité en == et non pas === est voulu tel quel...
+	if (
+		(Number.isInteger(a) || parseInt(a) == a) &&
+		(Number.isInteger(b) || parseInt(b) == b)
+	) {
+		return parseInt(a) - parseInt(b);
+	} else {
+		let x = toString(a).toLowerCase();
+		let y = toString(b).toLowerCase();
+		if (x < y) {
+			return -1;
+		}
+		if (x > y) {
+			return 1;
+		}
+		return 0;
+	}
+}
+
+const orderBy = (arr, props, orders, champ) =>
+	arr.sort((a, b) =>
+		props.reduce((acc, prop, i) => {
+			if (acc === 0) {
+				let [p1, p2] =
+					orders && orders[i] === "desc"
+						? [b[champ][prop], a[champ][prop]]
+						: [a[champ][prop], b[champ][prop]];
+				// passe en lowercase les String
+				p1 = typeof p1 === "string" ? p1.toLowerCase() : p1;
+				p2 = typeof p2 === "string" ? p2.toLowerCase() : p2;
+
+				// Gestion du format de date
+				// transforme 03/11/2000 en 20001103
+				let re = /^(\d{2})\/(\d{2})\/(\d{2,4})$/;
+
+				if (typeof p1 !== "number") {
+					let r1 = p1.match(re);
+					if (Array.isArray(r1)) {
+						p1 = r1[3] + r1[2] + r1[1];
+					}
+
+					let r2 = p2.match(re);
+					if (Array.isArray(r2)) {
+						p2 = r2[3] + r2[2] + r2[1];
+					}
+				}
+
+				acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
+			}
+			return acc;
+		}, 0)
+	);
+
+export { orderBy, ordonnerSelect, navigate, recupJson, trouver_index };

src/gamutable.js

@@ -0,0 +1,132 @@
+// https://vitejs.dev/config/#build-polyfillmodulepreload
+import 'vite/modulepreload-polyfill';
+
+// Vue
+import { createApp } from 'vue';
+
+// if importing all is too much you can always do it manually
+import GamuTable from './components/gamuTable.vue';
+import VuePapaParse from 'vue-papa-parse';
+
+const components = {
+	GamuTable,
+};
+
+//
+// test si le localstorage n'est pas saturé, sinon, on le vidange entierement
+//
+try {
+	const repeat = function (str, x) { return new Array(x + 1).join(str); };
+	const too_big = repeat("gamutable ", 100); // each JS character is 2 bytes
+	localStorage.setItem("test_gamutable", too_big);
+	localStorage.removeItem("test_gamutable")
+} catch (e) {
+	console.log(e.code);
+	if (e.code === 22 || e.code === 1024) {
+		console.error('On fait le ménage de tout le localstorage');
+		localStorage.clear();
+	}
+}
+
+gamutable();
+function gamutable() {
+	let i = 1;
+	for (const el of document.getElementsByClassName('vue-gamutable')) {
+		if (i === 1) {
+			window.app = createApp({
+				components,
+				mounted() {
+					app.rechargerJson = this.$refs.montableau.rechargerJson;
+					app.delLigne = this.$refs.montableau.delLigne;
+				},
+			});
+			app.use(VuePapaParse);
+			app.provide('$papa', app.config.globalProperties.$papa);
+			app.mount(el);
+		} else if (i === 2) {
+			window.app2 = createApp({
+				components,
+				mounted() {
+					app2.rechargerJson = this.$refs.montableau_deux.rechargerJson;
+					app2.delLigne = this.$refs.montableau_deux.delLigne;
+				},
+			});
+			app2.use(VuePapaParse);
+			app2.provide('$papa', app2.config.globalProperties.$papa);
+			app2.mount(el);
+		}
+		i++;
+	}
+}
+// le chargement de gamutable passe dans une variable globale
+// permettant de forcer son rechargement à l'ouverture du modalbox
+// via la classe : modalgamutable
+window.gamutable = gamutable
+
+$('#vueGamutable').on('click', '.url_action, .url_action--ss_css', function (e) {
+	e.preventDefault();
+	e.stopPropagation();
+	let confirmation = $(this).data('confirm');
+	if (confirmation !== undefined) {
+		if (!confirm(confirmation)) {
+			return;
+		}
+	}
+	let url = $(this).attr('href');
+	let id = $(this).data('id');
+
+	// gamutable(s) à mettre à jour ? 1 | 2 | 12 (par défaut 1)
+	let Treload = '1';
+	if ($(this).parents('.gamutableDeux').length) {
+		Treload = '2';
+	}
+	if ($(this).data("treload") !== undefined) {
+		Treload = $(this).data("treload").toString();
+	}
+	let Treload1 = Treload.indexOf('1') !== -1;
+	let Treload2 = Treload.indexOf('2') !== -1;
+
+	// passer en refresh animé une éventuelle icone
+	if ($(this).has('i.icon, i.fa')) {
+		$(this).find('i.icon, i.fa').eq(0).replaceWith('<i class="fa fa-refresh fa-spin"></i>');
+	}
+	let nomBlocAjaxReload = $(this).data('ajaxreload');
+	$.ajax({
+		url: url,
+		dataType: 'json',
+		async: true,
+	}).done(function (retour) {
+		if (!$.isEmptyObject(retour) && !$.isEmptyObject(retour.message_erreur)) {
+			alert(retour.message_erreur);
+		} else {
+			if (parseInt(id) > 0) {
+				if (Treload1) {
+					app.rechargerJson(id);
+				}
+				if (Treload2) {
+					app2.rechargerJson(id);
+				}
+			} else if (parseInt(id) < 0) {
+				if (Treload1) {
+					app.delLigne(id);
+				}
+				if (Treload2) {
+					app2.delLigne(id);
+				}
+			} else {
+				if (Treload1) {
+					app.rechargerJson('maj 1');
+				}
+				if (Treload2) {
+					app2.rechargerJson('maj 2');
+				}
+			}
+			if (nomBlocAjaxReload !== undefined) {
+				ajaxReload(nomBlocAjaxReload, {
+					args: { id },
+					callback: function () { },
+				});
+			}
+		}
+	});
+});

svg/sort_asc.svg

@@ -1,14 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="sort_asc" width="93.335" height="54.545" data-name="Layer 1" version="1.1" viewBox="0 0 93.335 54.545" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
- <metadata>
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>sort</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title>sort</title>
  <path id="sort_asc" d="m7.8426 54.545a7.84 7.84 0 0 1-5.55-13.38l38.83-38.87a7.81 7.81 0 0 1 11.06 0l38.86 38.87a7.84 7.84 0 0 1-5.55 13.38z"/>
 </svg>

svg/sort_desc.svg

@@ -1,14 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="sort_desc" width="93.335" height="54.545" data-name="Layer 1" version="1.1" viewBox="0 0 93.335 54.545" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
- <metadata>
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>sort</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
  <title>sort</title>
  <path id="sort_dsc" d="m85.493 4.2077e-7a7.84 7.84 0 0 1 5.55 13.38l-38.83 38.87a7.81 7.81 0 0 1-11.06 0l-38.86-38.87a7.84 7.84 0 0 1 5.55-13.38z"/>
 </svg>

vite.config.js

@@ -0,0 +1,61 @@
+// import { defineConfig, splitVendorChunkPlugin } from "vite";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import liveReload from "vite-plugin-live-reload";
+import path, { dirname } from "path";
+// import fs from "fs";
+import mkcert from 'vite-plugin-mkcert'
+import { fileURLToPath } from 'url'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+	const __filename = fileURLToPath(import.meta.url)
+	const __dirname = dirname(__filename)
+	const port = 5134
+	return {
+		root: "src",
+		base: mode === "dev" ? "/" : "/dist/",
+
+		plugins: [
+			vue({
+				template: {
+					transformAssetUrls: {
+						base: "plugins/gamutable",
+						includeAbsolute: false,
+					},
+				},
+			}),
+			liveReload([__dirname + "/**/*.php", __dirname + "/**/*.html"]),
+			// splitVendorChunkPlugin(),
+			mkcert()
+		],
+
+		// config
+
+		build: {
+			outDir: "../dist",
+			emptyOutDir: true,
+			manifest: true,
+			// cssCodeSplit: false,
+
+			rollupOptions: {
+				input: path.resolve(__dirname, "src/gamutable.js"),
+			},
+		},
+
+		server: {
+			host: true,
+			port: port,
+			strictPort: true,
+			cors: true,
+		},
+
+		// required for in-browser template compilation
+		// https://vuejs.org/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation
+		resolve: {
+			alias: {
+				vue: "vue/dist/vue.esm-bundler.js",
+			},
+		},
+	}
+});