up de y

Merge branch 'test_cookie_version'
build
2025-04-01 09:06:42 +02:00 · 2025-04-01 09:06:06 +02:00 · 2025-04-01 09:05:04 +02:00 · 2025-04-01 09:04:00 +02:00 · 2025-03-31 18:38:28 +02:00 · 2025-03-31 15:33:28 +02:00
40 changed files with 3513 additions and 2915 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,3 @@
 node_modules
 yarn.lock
+test*
--- a/README.md
+++ b/README.md
@ -1,27 +1,45 @@
 # 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
+> 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**

+- 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
+
 - charger l'inclure (5 args possibles et facultatifs)
+
 ```html
 <INCLURE{fond=inclure/gamutable,env}>

@ -39,7 +57,7 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
 	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{...}",
@ -52,26 +70,32 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
 }>

 ```
+
 - **url_sort_asc** et **url_sort_desc** => surcharge possible des icones de tri de colonnes

 ## les filtrages par url sont :
+
 - &trier=champ1|asc => OK
- &filtre=champ1|valeur1 => 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",
 	"email":"toto"
 }
 ```
+
 - On peut ajouter des filtres par colonne soit avec un select soit avec un input
+
 ```json
 "filtreCol" : {
 	"statut" : "select",
@ -79,45 +103,63 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
 	"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}})]">
+[(#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>
+  <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)],
+})] "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 (ou un data-ajaxreload), alors, un ajaxReload de ce bloc sera joué dans la fonctione de callback de l'action

+- 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":{
@ -133,14 +175,54 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
 	"tarif_prive" : "activite"
 }
 ```
+
 Dans cet exemple :
- `activite` est le raccourci du nom de la table (spip_activites)
+
+- `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
@ -156,11 +238,15 @@ function prefixPlugin_post_edition($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`
+
 ```php
 /**
 * injection du reload de vuejs pour les crayons de l'objet souscription
@ -179,12 +265,16 @@ function prefixPlugin_crayons_vue_affichage_final($flux){
 }
 ```

-
 ## 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)
  3.  Dans le traiter du formulaire => supprimer la redirection et on ajoute :
@ -199,12 +289,13 @@ function prefixPlugin_crayons_vue_affichage_final($flux){
  ```
 - 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 êtres "dédoublés" avec le suffixe **_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}}
@ -233,26 +324,71 @@ function prefixPlugin_crayons_vue_affichage_final($flux){
 </div>
 ```

-
 ## 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>
+<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 !)
--- a/action/pdf_gamutable.php
+++ b/action/pdf_gamutable.php
@ -2,14 +2,15 @@
 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')) {
+	if (! autoriser('generer', 'gamutablepdf') && _SERVEUR_MODE === 'PROD') {
 		return false;
 	}

+
 	$fichierpdf = _request('fichierpdf') ?? '';
 	$langpdf    = _request('langpdf');
 	$namepdf    = _request('namepdf') ?? $fichierpdf;
--- a/css/fontello.css
+++ b/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);
+	}
+}
--- a/css/gamutable.css
+++ b/css/gamutable.css
@ -1,3 +1,16 @@
+tfoot th {
+  color: inherit;
+  background: var(--spip-color-theme-lighter);
+}
+
+.verte {
+	color: #00b800;
+}
+
+.rouge {
+	color: #ff0000;
+}
+
 .gamutable__input--rechercher {
 	padding: 0.25rem 1em;
 }
@ -9,6 +22,9 @@
 div.vue-input>input {
 	font-size: 1.2rem;
 }
+div.vue-input>input {
+	color: inherit;
+}

 .tag--ub {
 	display: inline-block;
@ -17,6 +33,13 @@ div.vue-input>input {
 .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 {
@ -42,6 +65,7 @@ div.vue-input>input {

 th .vue-select {
 	width: 100%;
+	border-radius: 0;
 }

 .gamutable--surTable select,
@ -79,6 +103,7 @@ th .vue-select {
 	background-color: #eee;
 	cursor: pointer;
 }
+
 .gamutable--pagination .page-link.on {
 	background-color: #cecece;
 }
@ -96,6 +121,9 @@ th .vue-select {
 .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;
--- a/dist/.vite/manifest.json
+++ b/dist/.vite/manifest.json
@ -0,0 +1,8 @@
+{
+  "gamutable.js": {
+    "file": "assets/gamutable-Bcxw5aDx.js",
+    "name": "gamutable",
+    "src": "gamutable.js",
+    "isEntry": true
+  }
+}
--- a/dist/assets/gamutable-559fdd12.js
+++ b/dist/assets/gamutable-559fdd12.js
--- a/dist/assets/gamutable-Bcxw5aDx.js
+++ b/dist/assets/gamutable-Bcxw5aDx.js
--- a/dist/assets/vendor-f73869ed.js
+++ b/dist/assets/vendor-f73869ed.js
--- a/dist/manifest.json
+++ b/dist/manifest.json
@ -1,13 +0,0 @@
-{
-  "_vendor-f73869ed.js": {
-    "file": "assets/vendor-f73869ed.js"
-  },
-  "gamutable.js": {
-    "file": "assets/gamutable-559fdd12.js",
-    "imports": [
-      "_vendor-f73869ed.js"
-    ],
-    "isEntry": true,
-    "src": "gamutable.js"
-  }
-}
--- a/exemple_bloc.html
+++ b/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>
--- a/font/.fontello-session
+++ b/font/.fontello-session
@ -0,0 +1 @@
+f6d0573c85c0a27f74f66c970fe44c46
--- a/font/config.json
+++ b/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"
+      ]
+    }
+  ]
+}
--- a/font/css/animation.css
+++ b/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);
+  }
+}
--- a/font/css/gamutable-codes.css
+++ b/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'; } /* '' */
--- a/font/css/gamutable-embedded.css
+++ b/font/css/gamutable-embedded.css
--- a/font/css/gamutable-ie7-codes.css
+++ b/font/css/gamutable-ie7-codes.css
@ -0,0 +1,24 @@
+
+.gt-csv { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x2611;&nbsp;'); }
+.gt-sort-down { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
+.gt-sort-up { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
+.gt-csv-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
+.gt-refresh { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
+.gt-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
+.gt-trash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); }
+.gt-eye { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
+.gt-eye-slash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
+.gt-pdf-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); }
+.gt-spin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
+.gt-excel-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xeb2c;&nbsp;'); }
+.gt-lien { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
+.gt-uncheck { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf096;&nbsp;'); }
+.gt-filter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0b0;&nbsp;'); }
+.gt-table { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0ce;&nbsp;'); }
+.gt-eraser { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf12d;&nbsp;'); }
+.gt-euro { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf153;&nbsp;'); }
+.gt-database { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1c0;&nbsp;'); }
+.gt-pdf { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1c1;&nbsp;'); }
+.gt-excel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1c3;&nbsp;'); }
+.gt-calc { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1ec;&nbsp;'); }
+.gt-block { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf601;&nbsp;'); }
--- a/font/css/gamutable-ie7.css
+++ b/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 = '&#x2611;&nbsp;'); }
+.gt-sort-down { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
+.gt-sort-up { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
+.gt-csv-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
+.gt-refresh { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
+.gt-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
+.gt-trash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); }
+.gt-eye { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
+.gt-eye-slash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
+.gt-pdf-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); }
+.gt-spin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
+.gt-excel-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xeb2c;&nbsp;'); }
+.gt-lien { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
+.gt-uncheck { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf096;&nbsp;'); }
+.gt-filter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0b0;&nbsp;'); }
+.gt-table { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0ce;&nbsp;'); }
+.gt-eraser { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf12d;&nbsp;'); }
+.gt-euro { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf153;&nbsp;'); }
+.gt-database { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1c0;&nbsp;'); }
+.gt-pdf { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1c1;&nbsp;'); }
+.gt-excel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1c3;&nbsp;'); }
+.gt-calc { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1ec;&nbsp;'); }
+.gt-block { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf601;&nbsp;'); }
--- a/font/css/gamutable.css
+++ b/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'; } /* '' */
--- a/font/font/gamutable.eot
+++ b/font/font/gamutable.eot
--- a/font/font/gamutable.svg
+++ b/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>
--- a/font/font/gamutable.ttf
+++ b/font/font/gamutable.ttf
--- a/font/font/gamutable.woff
+++ b/font/font/gamutable.woff
--- a/font/font/gamutable.woff2
+++ b/font/font/gamutable.woff2
--- a/font/police.css.html
+++ b/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>
+
--- a/gamutable_autorisations.php
+++ b/gamutable_autorisations.php
@ -25,7 +25,10 @@ function autoriser_gamutable_purger_dist($faire, $type, $id, $qui, $opt) {
 }

 function autoriser_gamutablepdf_generer_dist($faire, $type, $id, $qui, $opt) {
-	return intval($qui['id_auteur']);
+	if (intval($qui['id_auteur'])) {
+		return true;
+	};
+	return false;
 }

 function autoriser_gamutable_modifier_dist($faire, $type, $id, $qui, $opt) {
--- a/gamutable_fonctions.php
+++ b/gamutable_fonctions.php
@ -57,40 +57,36 @@ if (!function_exists('tsEnDate')) {
 }

 function gamutable_fermer_modalbox($id_objet = 9999999999, $num = null) {
-	if ($num) {
-		$num = "_deux";
-	}
-
+	$js = gamutable_generer_js($id_objet, $num);
 	$html = <<<EOJS
 		<script type="text/javascript">
-			id = "$id_objet";
-			if (id === 'maj' || !id) {
-				if (typeof app !== 'undefined') {
-					app.rechargerJson(id);
-				}
-				if (typeof app_deux !== 'undefined') {
-					app_deux.rechargerJson(id);
-				}
-			} else {
-				id = parseInt(id);
-				if (id > 0 && id < 9999999999) {
-					if (typeof app$num !== 'undefined') {
-						app$num.rechargerJson(id);
-					}
-				}
-				if (id === 9999999999) {
-					if (typeof app$num !== 'undefined') {
-						app$num.rechargerJson();
-					}
-				}
-			}
-			$.modalboxclose();
-			delete id;
+			$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:
@ -102,35 +98,40 @@ EOJS;
 * @return string $html
 */
 function gamutable_recharger_tableau($id_objet = 9999999999, $num = null):string {
-	if ($num) {
-		$num = "_deux";
+	if ($num === '_deux' || intval($num) === 2) {
+		$num = 2;
+	} else {
+		$num = null;
 	}

 	$html = <<<EOJS
 		<script type="text/javascript">
 			id = "$id_objet";
-			if (id === 'maj' || !id) {
-				if (typeof app !== 'undefined') {
-					app.rechargerJson(id);
+			if (+id === 9999999999) {
+				id = '';
 			}
-				if (typeof app_deux !== 'undefined') {
-					app_deux.rechargerJson(id);
-				}
-			} else {
-				id = parseInt(id);
-				if (id > 0 && id < 9999999999) {
 			if (typeof app$num !== 'undefined') {
 				app$num.rechargerJson(id);
 			}
-				}
-				if (id === 9999999999) {
-					if (typeof app$num !== 'undefined') {
-						app$num.rechargerJson();
-					}
-				}
-			}
 			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;
+}
--- a/gamutable_options.php
+++ b/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);
+}
--- a/gamutable_pipelines.php
+++ b/gamutable_pipelines.php
@ -23,10 +23,22 @@ 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', '&');
@ -54,9 +66,9 @@ function gamutable_crayons_vue_affichage_final($flux){
 		$id = intval($id)
 		and !in_array($objet, $GLOBALS['gamutable_rechargerJson_all'] ?? [])
 	) {
-		$flux['data'] .= ' <script type="text/javascript">if ( typeof app_deux === "object") {  app_deux.rechargerJson('.$id.');}if ( typeof app === "object") {  app.rechargerJson('.$id.');} </script>';
+		$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 app_deux === "object") { app_deux.rechargerJson();}if ( typeof app === "object") { app.rechargerJson();} </script>';
+		$flux['data'] .= ' <script type="text/javascript">if ( typeof app2 === "object") { app2.rechargerJson();}if ( typeof app === "object") { app.rechargerJson();} </script>';
 	}

 	return $flux;
--- a/inc/vite.php
+++ b/inc/vite.php
@ -2,9 +2,10 @@
 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";
+// 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
@ -15,8 +16,13 @@ const VITE_HOST = "https://localhost:5134";

 // Prints all the html entries needed for Vite

-function vite(string $entry): string
-{
+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" .
@ -25,26 +31,13 @@ function vite(string $entry): string
 		cssTag($entry);
 }

-// Some dev/prod mechanism would exist in your project
-
-function isDev(string $entry): bool
-{
-	// This method is very useful for the local server
-	// if we try to access it, and by any means, didn't started Vite yet
-	// it will fallback to load the production files from manifest
-	// so you still navigate your site as you intended!
-
+function isDev(string $entry): bool {
 	static $exists = null;
 	if ($exists !== null) {
 		return $exists;
 	}
-
-	if (
-		!empty($_SERVER["SERVER_ADDR"]) and
-		in_array($_SERVER["SERVER_ADDR"], ["::1", "127.0.0.1"])
-	) {
+	if ( _SERVEUR_MODE !== 'PROD') {
 		$handle = curl_init(VITE_HOST . "/" . $entry);
-
 		curl_setopt($handle, CURLOPT_SSL_VERIFYHOST, false);
 		curl_setopt($handle, CURLOPT_SSL_VERIFYPEER, false);

@ -54,28 +47,28 @@ function isDev(string $entry): bool
 		curl_exec($handle);
 		$error = curl_errno($handle);
 		curl_close($handle);
-
 		return $exists = !$error;
 	} else {
 		return $exists = false;
 	}
 }

-// Helpers to print tags
-
-function jsTag(string $entry): string
-{
-	$url = isDev($entry) ? VITE_HOST . "/" . $entry : assetUrl($entry);
+function jsTag(string $entry): string {
+    $url = isDev($entry)
+        ? VITE_HOST . "/" . $entry
+        : assetUrl($entry);

    if (!$url) {
-		return "";
+        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>';
 }

-	return '<script type="module" crossorigin src="' . $url . '"></script>';
-}
-
-function jsPreloadImports(string $entry): string
-{
+function jsPreloadImports(string $entry): string {
 	if (isDev($entry)) {
 		return "";
 	}
@ -84,12 +77,11 @@ function jsPreloadImports(string $entry): string
 	foreach (importsUrls($entry) as $url) {
 		$res .= '<link rel="modulepreload" href="' . $url . '">';
 	}
+
 	return $res;
 }

-function cssTag(string $entry): string
-{
-	// not needed on dev, it's inject by Vite
+function cssTag(string $entry): string {
 	if (isDev($entry)) {
 		return "";
 	}
@ -98,21 +90,34 @@ function cssTag(string $entry): string
 	foreach (cssUrls($entry) as $url) {
 		$tags .= '<link rel="stylesheet" href="' . $url . '">';
 	}
+
 	return $tags;
 }

-// Helpers to locate files
+function getManifest(): array {
+	static $urlManifest;
+	//
+	if ($urlManifest === null) {
+		// vite V5

-function getManifest(): array
-{
-	$urlManifest = find_in_path("dist/manifest.json");
-
-	$content = file_get_contents($urlManifest);
-	return json_decode($content, true);
+		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");
+		}
 	}

-function assetUrl(string $entry): string
-{
+	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])
@ -120,8 +125,7 @@ function assetUrl(string $entry): string
 		: "";
 }

-function importsUrls(string $entry): array
-{
+function importsUrls(string $entry): array {
 	$urls = [];
 	$manifest = getManifest();

@ -130,11 +134,11 @@ function importsUrls(string $entry): array
 			$urls[] = find_in_path("dist/" . $manifest[$imports]["file"]);
 		}
 	}
+
 	return $urls;
 }

-function cssUrls(string $entry): array
-{
+function cssUrls(string $entry): array {
 	$urls = [];
 	$manifest = getManifest();

@ -143,5 +147,7 @@ function cssUrls(string $entry): array
 			$urls[] = find_in_path("dist/" . $file);
 		}
 	}
+
 	return $urls;
 }
+
--- a/inclure/gamutable.html
+++ b/inclure/gamutable.html
@ -1,4 +1,5 @@
 [(#VAL{gamutable.js}|vite)]
+#INCLURE{fond=font/police.css}

 <link
 	rel="stylesheet"
@ -21,11 +22,16 @@
 [(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
 [(#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>]
+			[<span class="h2-like titregamutable">(#ENV*{titregamutable})</span>]
 			<div class="gamutableUn vue-gamutable" [ id="(#ENV{id_gamutable})" ]>
 				<gamu-table
 					apiuri="[(#ENV{apiuri})]"
@ -38,9 +44,7 @@
 					namepdf="#ENV{namepdf}"
 					argpdf="#ENV{argpdf}"
 					fichierpdf="#ENV{fichierpdf}"
-					urlvuebloc="[(#ENV{urlvuebloc})]"
-					url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
-					url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
+					htmlvuebloc="[(#GET{htmlvuebloc})]"
 					filtrecolmulti="#ENV{filtrecolmulti,oui}"
 					nomblocajaxreload="#ENV{nomblocajaxreload}"
 					stockage="#ENV{stockage,localstorage}"
@ -52,15 +56,19 @@
 					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}>
+		[(#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>]
+			[<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})]"
@ -73,20 +81,20 @@
 					namepdf="#ENV{namepdf_deux}"
 					argpdf="#ENV{argpdf_deux}"
 					fichierpdf="[(#ENV{fichierpdf_deux, #ENV{fichierpdf}})]"
-					urlvuebloc="[(#ENV{urlvuebloc_deux})]"
-					url_sort_asc="[(#ENV{sort_asc_deux, #ENV{sort_asc,#GET{sort_asc}}})]"
-					url_sort_desc="[(#ENV{sort_desc_deux, #ENV{sort_desc,#GET{sort_desc}}})]"
+					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}|intval)]"
+					:_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>
@ -99,6 +107,7 @@

 <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>
 ]
--- a/js/gamubox.js
+++ b/js/gamubox.js
@ -17,14 +17,14 @@ jQuery(function () {
            let data = {};
            let minHeight = $(this).data('minheight');
            let minWidth = $(this).data('minwidth');
-			if (minHeight !== undefined) {
+            if (minHeight !== 'undefined') {
                data.minHeight = minHeight;
            }
-			if (minWidth !== undefined) {
+            if (minWidth !== 'undefined') {
                data.minWidth = minWidth;
            }
            let width = $(this).data('width');
-			if (width !== undefined) {
+            if (width !== 'undefined') {
                data.width = width;
                let valeur_reduite = ($(window).width() * width) / 100;
                url += '&largeur=' + valeur_reduite + 'px';
@ -32,7 +32,7 @@ jQuery(function () {

            let that = this;
            data.onShow = () => {
-				if (typeof charger_require !== undefined) {
+                if (typeof charger_require !== 'undefined') {
                    charger_require();
                }

--- a/json_gamutable.json.html
+++ b/json_gamutable.json.html
@ -1,6 +1,10 @@
 #HTTP_HEADER{Content-Type: application/json; charset=#CHARSET}
 [(#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",
@ -10,6 +14,18 @@
 "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" : "article",
 	"nom": "auteur"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,23 +2,33 @@
  "name": "gamutable",
  "version": "1.0.0",
  "private": true,
+  "type": "module",
  "scripts": {
-		"dev": "APP_ENV=development vite",
-		"build": "vite build",
-		"watch": "vite build --watch",
-		"preview": "vite preview"
+    "dev": "vite --mode dev",
+    "build": "vite build --mode prod",
+    "watch": "vite build --watch --mode prod"
  },
  "dependencies": {
-		"@vitejs/plugin-basic-ssl": "^1.0.1",
-		"typescript": "^5.1.6",
-		"vue": "^3.2.47",
+    "@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"
+    "vue-papa-parse": "^3.1.0",
+    "vue3-selecto": "^1.12.3"
  },
  "devDependencies": {
-		"@vitejs/plugin-vue": "^4.0.0",
-		"@vue/compiler-sfc": "^3.2.47",
-		"vite": "^4.1.1",
-		"vite-plugin-live-reload": "^3.0.1"
+    "@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"
  }
 }
--- a/paquet.xml
+++ b/paquet.xml
@ -1,9 +1,9 @@
 <paquet
 	prefix="gamutable"
 	categorie="outil"
-	version="4.3.1"
+	version="5.7.0"
 	etat="test"
-	compatibilite="[3.2.0-dev;4.2.*]"
+	compatibilite="[3.3.0;4.*]"
 	logo="prive/themes/spip/images/gamutable-xx.svg"
 	documentation=""
 >
@ -19,6 +19,7 @@
 	<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>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/gamuTable.vue
+++ b/src/components/gamuTable.vue
@ -4,253 +4,114 @@
 			<select id="parPage" v-model="parPageSelect">
 				<option v-for="v in tparpage" :key="v">{{ v }}</option>
 			</select>
-			<input
-				class="gamutable--rechercher"
-				type="text"
-				v-model="search"
-				placeholder="Rechercher"
-			/>
+			<input class="gamutable--rechercher" type="text" v-model="search" placeholder="Rechercher" />

-			<button
-				class="btn gamutable--resetOrderBy"
-				type="button"
-				@click.stop="resetTri()"
-				title="Réinitialiser les tris des colonnes"
-			>
-				<i class="fa fas fa-eraser rouge"></i>
-				<i class="fa fa-filter fas"></i>
+			<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()"
+				title="Réinitialiser les tris des colonnes">
+				<i class="gt-eraser rouge"></i>
+				<i class="gt-filter"></i>
 			</button>
-			<button
-				class="btn var_gamutable rouge"
-				type="button"
-				@click.stop="chargerJson()"
-				title="Rechargement complet du tableau"
-			>
-				<i class="fa fa-refresh fas fa-sync-alt"></i>
+			<button class="btn var_gamutable rouge" type="button" @click.stop="chargerJson()"
+				title="Rechargement complet du tableau">
+				<i class="gt-refresh"></i>
 			</button>
-			<button
-				class="btn var_gamutable"
-				type="button"
-				@click.stop="chargerJson('maj')"
-				:title="
-					'Mise à jour du tableau - dernière version de la base de donnée le : ' +
+			<button class="btn var_gamutable" type="button" @click.stop="chargerJson('maj')" :title="'Mise à jour du tableau - dernière version de la base de donnée le : ' +
 				dateMaj
-				"
-			>
-				<i class="fa fa-refresh fas fa-redo-alt"></i>
+				">
+				<i class="gt-refresh"></i>
 			</button>

-			<button
-				class="btn gamutable--vueTable"
-				title="Switcher en Vue tableau"
-				@click.stop="changerVue('tableau')"
-				v-if="vuebloc"
-				v-show="quelleVue === 'bloc'"
-			>
-				<i class="fas fa fa-table"></i>
+			<button class="btn gamutable--vueTable" title="Switcher en Vue tableau" @click.stop="changerVue('tableau')"
+				v-if="vuebloc" v-show="quelleVue === 'bloc'">
+				<i class="gt-table"></i>
 			</button>

-			<button
-				class="btn gamutable--vueBloc"
-				title="Switcher en Vue Bloc"
-				@click.stop="changerVue('bloc')"
-				v-if="vuebloc"
-				v-show="quelleVue === 'tableau'"
-			>
-				<i class="fas fa fa-th-large"></i>
+			<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc" @click.stop="changerVue('bloc')"
+				v-if="vuebloc" v-show="quelleVue === 'tableau'">
+				<i class="gt-block"></i>
 			</button>
-			<button
-				class="btn gamutable--exportCSV export--affiche"
-				type="button"
-				@click.stop="exportCSV()"
-				v-show="namecsv"
-				title="Exporter le tableau affiché en csv"
-			>
-				<i
-					class="fa fa-file-excel-o fas fa-file-csv"
-					aria-hidden="true"
-				></i>
+			<button class="btn gamutable--exportCSV export--affiche" type="button" @click.stop="exportCSV()"
+				v-show="namecsv" title="Exporter le tableau affiché en csv">
+				<i class="gt-csv" aria-hidden="true"></i>
 			</button>
-			<button
-				class="btn export--affiche"
-				type="button"
-				@click.stop="genererPDF()"
-				v-show="fichierpdf"
-				title="Générer le PDF du tableau affiché"
-			>
-				<i
-					class="fas fa-file-pdf rouge"
-					aria-hidden="true"
-					alt="pdf"
-				></i>
+			<button class="btn export--affiche" type="button" @click.stop="genererPDF()" v-show="fichierpdf"
+				title="Générer le PDF du tableau affiché">
+				<i class="gt-pdf rouge" aria-hidden="true" alt="pdf"></i>
 			</button>
-			<button
-				class="btn gamutable--exportCSV export--complet"
-				type="button"
-				@click.stop="exportCSV('table')"
-				v-show="namecsv"
-				title="Exporter le tableau complet en csv"
-			>
-				<i
-					class="fas fas fa-file-excel"
-					aria-hidden="true"
-					alt="csv"
-				></i>
+			<button class="btn gamutable--exportCSV export--complet" type="button" @click.stop="exportCSV('table')"
+				v-show="namecsv" title="Exporter le tableau complet en csv">
+				<i class="gt-csv-alt" aria-hidden="true" alt="csv"></i>
 			</button>

-			<button
-				class="btn export--complet"
-				type="button"
-				@click.stop="genererPDF('table')"
-				v-show="fichierpdf"
-				title="Générer le PDF du tableau complet"
-			>
-				<i
-					class="far fa-file-pdf rouge"
-					aria-hidden="true"
-					alt="pdf"
-				></i>
+			<button class="btn export--complet" type="button" @click.stop="genererPDF('table')" v-show="fichierpdf"
+				title="Générer le PDF du tableau complet">
+				<i class="gt-pdf-alt 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">
-					Mise à jour de la base de donnée
+				<i class="gt-spin animate-spin rouge"></i>
+				<span class="texteMajBDD"> Mise à jour de la base de donnée </span>
 			</span>
+			<span v-show="!chargement" class="btn verte" style="cursor: auto" title="Base de donnée synchronisée !">
+				<i class="gt-database"></i>
 			</span>
-			<span
-				v-show="!chargement"
-				class="btn verte"
-				style="cursor: auto"
-				title="Base de donnée synchronisée !"
-			>
-				<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="gamutable-nbrMax" :data-nbrmax="table.length">{{ tableau.length }} / {{ table.length }}
+				éléments</span>
 			<span class="includespip" v-html="includespip"> </span>
 		</div>

 		<div class="vueBlocs" v-if="quelleVue === 'bloc'">
-			<div
-				class="vueBlocs-unbloc"
-				v-for="ligne in tableau"
-				:key="ligne.id"
-				v-html="replaceBloc(ligne.html)"
-			></div>
+			<div class="vueBlocs-unbloc" v-for="ligne in tableau" :key="ligne.id" v-html="replaceBloc(ligne.html)">
 			</div>
+		</div>
+
 		<table class="table table--zebra" v-if="quelleVue === 'tableau'">
 			<thead>
+				<tr v-if="Object.keys(header_top).length" class="header_top">
+					<th v-for="(d, nom_colonne, i) in header_top" :key="'header_top_' + i" :colspan="d.colspan" :class="d.class">
+							<span v-html="nom_colonne"></span>
+					</th>
+				</tr>
 				<tr>
-					<th
-						v-for="(label, head, i) in header"
-						:key="'head_' + i"
-						:class="[head, classes[head]]"
-					>
+					<th v-for="(label, head, i) in header" :key="'head_' + i" :class="[head, classes[head], header_class_header_top[i] + '--header_top']">
 						<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="gt-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true"
+									@click.stop="tri(head, 'asc')"></i>
+								<i class="gt-sort-down" :class="ordreActif(head, 'desc')" aria-hidden="true"
+									@click.stop="tri(head, 'desc')"></i>
 							</span>
 						</span>
 					</th>
 				</tr>
-				<tr
-					v-if="filtreCol.length || Object.keys(checkbox).length"
-					class="filtreColonne"
-				>
-					<th
-						v-for="(label, head, i) in header"
-						:key="'filtreCol_' + i"
-						:class="head"
-					>
-						<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>
+				<tr v-if="filtreCol.length || Object.keys(checkbox).length" class="filtreColonne">
+					<th v-for="(label, head, i) in header" :key="'filtreCol_' + i" :class="head">
+						<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="gt-check"></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=""
-							>
+						<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_' + 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="">
 								<template #tag="{ option, remove }">
 									<div class="tag--un">
 										{{ option }}
-										<span
-											class="tag--remove pointer"
-											title="Cliquer pour supprimer "
-											@click.stop="remove"
-											>x</span
-										>
+										<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=""
-							/>
-							<button
-								v-if="
+							<input v-if="filtreColType[head] === 'input'" class="gamutable__input--filtrer"
+								v-model="filtreColSelected[head]" type="text" placeholder="Rechercher" @keydown="" />
+							<button v-if="
 								filtreColType[head] === 'input' &&
 								filtreColSelected[head].length !== 0
-								"
-								@click.stop="deleteInputSearch(head)"
-								title="Vider ce champ"
-								class="gamutable__input--filtrer"
-							>
+							" @click.stop="deleteInputSearch(head)" title="Vider ce champ" class="gamutable__input--filtrer">
 								X
 							</button>
 						</div>
@ -258,33 +119,17 @@
 				</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="[
+				<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),
 						name,
 						classes[name],
 						l.classes !== undefined ? l.classes[name] : '',
-						]"
-						@click="selectLigne(l.html.id, name)"
-					>
+					]" @click="selectLigne(l.html.id, name)">
 						<div v-if="checkbox[name] !== undefined">
-							<div
-								v-if="td.split('-')[0] === 'dataid'"
-								class="text-center"
-							>
+							<div v-if="td.split('-')[0] === 'dataid'" class="text-center">
 								<label>
-									<input
-										type="checkbox"
-										v-model="Tcheckbox[name]"
-										:value="td.split('-')[1]"
-									/>
+									<input type="checkbox" v-model="Tcheckbox[name]" :value="td.split('-')[1]" />
 								</label>
 							</div>
 							<div v-else v-html="td"></div>
@ -293,6 +138,18 @@
 					</td>
 				</tr>
 			</tbody>
+			<tfoot>
+				<tr v-if="Object.keys(footer_affiche).length" class="footer_affiche">
+					<th v-for="(label, head, i) in header" :key="'footerAffiche_' + i" :class="[head, classes[head], header_class_header_top[i] + '--footer']">
+						<div v-html="footer_affiche[head] ?? ''"></div>
+					</th>
+				</tr>
+				<tr v-if="Object.keys(footer_total).length" class="footer_total">
+					<th v-for="(label, head, i) in header" :key="'footerTotal_' + i" :class="[head, classes[head], header_class_header_top[i] + '--footer']">
+						<div v-html="footer_total[head] ?? ''"></div>
+					</th>
+				</tr>
+			</tfoot>
 		</table>
 		<div class="gamutable--sousTable">
 			<div class="gamutable-nbrMax">
@ -300,52 +157,26 @@
 			</div>
 			<div class="gamutable--pagination">
 				<div class="page-item">
-					<button
-						type="button"
-						class="page-link"
-						v-if="page != 1"
-						@click="page = 1"
-					>
+					<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--"
-					>
+					<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"
-						:class="{ on: pageNumber === page }"
-						v-for="pageNumber in pages.slice(
+					<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"
-					>
+						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"
-					>
+					<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"
-					>
+					<button type="button" @click="page = pages.length" v-if="page < pages.length" class="page-link">
 						Dernier
 					</button>
 				</div>
@ -357,6 +188,7 @@
 <script setup>
 import { watch, ref, onMounted, computed, nextTick, inject } from "vue";
 import VueSelect from "vue-next-select";
+import { VueCookieNext as $c } from 'vue-cookie-next'
 import {
 	orderBy,
 	ordonnerSelect,
@ -364,6 +196,9 @@ import {
 	recupJson,
 	trouver_index,
 } from "./helpers";
+
+$c.config({ expire: '360d' })
+
 const $papa = inject("$papa");
 const props = defineProps({
 	tparpage: {
@ -406,15 +241,6 @@ const props = defineProps({
 	namecsv: {
 		type: String,
 	},
-	url_sort_asc: {
-		type: String,
-	},
-	url_sort_desc: {
-		type: String,
-	},
-	urlvuebloc: {
-		type: String,
-	},
 	vueblocdefaut: {
 		type: String,
 		default: "tableau",
@ -434,6 +260,9 @@ const props = defineProps({
 	filtrer: {
 		type: String,
 	},
+	htmlvuebloc: {
+		type: String,
+	},
 	_id: {
 		type: Number,
 	},
@ -443,9 +272,17 @@ const props = defineProps({
 	filtreselect: {
 		type: String,
 	},
+	gamutable_version_demandee: {
+		type: Number
+	}
 });
 let table = ref([]);
+let header_top = ref({});
+let header_class_header_top = ref([]);
 let header = ref([]);
+let footer = ref([]);
+let footer_affiche = ref({});
+let footer_total = ref({});
 let crayons = ref([]);
 let classes = ref([]);
 let checkbox = ref([]);
@ -461,21 +298,21 @@ let page = ref(1);
 let parPage = ref(
 	sessionStorage.getItem("nbItems")
 		? sessionStorage.getItem("nbItems")
-		: props.tparpage[0]
+		: props.tparpage[0],
 );
 let parPageSelect = ref(
 	sessionStorage.getItem("nbItemsChaine")
 		? sessionStorage.getItem("nbItemsChaine")
-		: props.tparpage[0]
+		: props.tparpage[0],
 );
 let pages = ref([]);
 let triOrders = ref([]);
 let triProps = ref([]);
 let selectTr = ref([]);
-let champ_search = ref(props.champcsv ?? 'html');
+let champ_search = ref(props.champcsv ?? "html");
 let chargement = ref(true);
 let quelleVue = ref(props.vueblocdefaut);
-let vuebloc = ref(false);
+let vuebloc = ref(props.htmlvuebloc);
 // let loadingVueSelect = ref(true);
 let ajaxCrayons = ref(false);
 let maj = ref("");
@ -488,14 +325,16 @@ let filtreColValeurs = [];

 onMounted(() => {
 	localforage.setDriver(localforage[props.stockage.toUpperCase()]);
-	chargerJson("maj");
-	if (props.urlvuebloc) {
-		fetch(props.urlvuebloc)
-			.then((response) => response.text())
-			.then((data) => {
-				vuebloc.value = data;
-			});
+	const gamutable_version_production = $c.getCookie('gamutable_version_production') ?? 1;
+	console.log('gamutable_version_production ', gamutable_version_production);
+
+	if (+props.gamutable_version_demandee > gamutable_version_production) {
+		console.log("⚠ Vidange du localstorage ⚠");
+		$c.setCookie('gamutable_version_production', +props.gamutable_version_demandee )
+		localStorage.clear(); // suppression des configs (entetes) + suppression des donnes si stockage localstorage
+		localforage.clear(); // suppression de indexeddbb
 	}
+	chargerJson("maj");
 });

 //~~~~~~~~~~~~~~~~~~~~~~~~~
@ -549,9 +388,7 @@ const tableau = computed(() => {
 							let Trsearch = TcolValue.some((uneValeur) => {
 								if (Number.isInteger(uneValeur)) {
 									if (
-										parseInt(
-											ligne[champ_search.value][colName]
-										) === uneValeur
+										parseInt(ligne[champ_search.value][colName]) === uneValeur
 									) {
 										return true;
 									}
@ -559,21 +396,14 @@ const tableau = computed(() => {
 									// on test si on vient d'un filtrage avec recup des valeurs en header
 									if (filtreColValeurs[colName]) {
 										if (
-											ligne[champ_search.value][
-												colName
-											] !== undefined &&
+											ligne[champ_search.value][colName] !== undefined &&
 											!(
-												ligne[champ_search.value][
-													colName
-												]
+												ligne[champ_search.value][colName]
 													.toString()
 													.toLowerCase()
 													.toString()
-													.indexOf(uneValeur) ===
-													-1 ||
-												!ligne[champ_search.value][
-													colName
-												]
+													.indexOf(uneValeur) === -1 ||
+												!ligne[champ_search.value][colName]
 													.toString()
 													.toLowerCase()
 											)
@ -582,21 +412,15 @@ const tableau = computed(() => {
 										}
 									} else {
 										if (
-											ligne[champ_search.value][
-												colName
-											] !== undefined &&
+											ligne[champ_search.value][colName] !== undefined &&
 											!(
 												uneValeur.indexOf(
-													ligne[champ_search.value][
-														colName
-													]
+													ligne[champ_search.value][colName]
 														.toString()
 														.toLowerCase()
-														.toString()
+														.toString(),
 												) === -1 ||
-												!ligne[champ_search.value][
-													colName
-												]
+												!ligne[champ_search.value][colName]
 													.toString()
 													.toLowerCase()
 											)
@ -627,7 +451,77 @@ const tableau = computed(() => {
 	});
 	return pagination(ttt);
 });
+
 function saveTriCol() { }
+
+function majFooterTotal() {
+	let r = {};
+	footer.value.filter((d) => d.source === 'total')[0]?.champs.forEach((d) => {
+		let valeur = 0;
+		if (d.fonction === "somme") {
+			valeur = footer_somme(d.nom, table.value);
+		} else if (d.fonction === "somme_monnaie") {
+			valeur = footer_somme_monnaie(d.nom, table.value);
+		} else if (d.fonction === "somme_champ") {
+			valeur = footer_somme(d.args, table.value);
+		} else if (d.fonction === "somme_champ_monnaie") {
+			valeur = footer_somme_monnaie(d.args, table.value);
+		} else if (d.legende !== undefined) {
+			valeur = d.legende ?? '';
+		}
+		r[d.nom] = valeur
+	});
+	footer_total.value = r;
+
+}
+function majFooterAffiche() {
+	let r = {};
+	footer.value.filter((d) => d.source === 'affiche')[0]?.champs.forEach((d) => {
+		let valeur = 0;
+		if (d.fonction === "somme") {
+			valeur = footer_somme(d.nom, tableau.value);
+		} else if (d.fonction === "somme_monnaie") {
+			valeur = footer_somme_monnaie(d.nom, tableau.value);
+		} else if (d.fonction === "somme_champ") {
+			valeur = footer_somme(d.args, tableau.value);
+		} else if (d.fonction === "somme_champ_monnaie") {
+			valeur = footer_somme_monnaie(d.args, tableau.value);
+		} else if (d.legende !== undefined) {
+			valeur = d.legende ?? '';
+		}
+		r[d.nom] = valeur
+	});
+	footer_affiche.value = r;
+}
+
+function footer_somme(champ, data) {
+	let r = 0;
+	data.map((d) => d.search).forEach((d) => {
+		Object.entries(d).forEach(([c, v]) => {
+			if (c === champ && v) {
+				r += v;
+			}
+		})
+	})
+	return r;
+}
+
+function footer_somme_monnaie(champ, data) {
+	let r = 0;
+	data.map((d) => d.search).forEach((d) => {
+		Object.entries(d).forEach(([c, v]) => {
+			if (c === champ && v) {
+				r += v;
+			}
+		})
+	})
+	const euro = new Intl.NumberFormat('fr-FR', {
+  		style: 'currency',
+  		currency: 'EUR',
+  		minimumFractionDigits: 2
+	});
+	return euro.format(r);
+}
 //~~~~~~~~~~~~~~~~~~~~~~~~~
 // les watchers
 //~~~~~~~~~~~~~~~~~~~~~~~~~
@ -646,6 +540,7 @@ watch(parPageSelect, (e) => {
 watch(table, () => {
 	saveHeader();
 	localforage.setItem(nameLocalStorage, JSON.stringify(table.value));
+	majFooterTotal();
 });

 watch(tableau, () => {
@ -666,6 +561,7 @@ watch(tableau, () => {
 			filtreColVal.value[col] = Tval;
 		});
 	}
+	majFooterAffiche();
 });

 watch(
@ -673,23 +569,21 @@ watch(
 	() => {
 		let ObfiltreSelect = [];
 		if (filtreColSelected.value) {
-			Object.entries(filtreColSelected.value).forEach(
-				([champ, valeurs]) => {
+			Object.entries(filtreColSelected.value).forEach(([champ, valeurs]) => {
 				if (!Array.isArray(valeurs)) {
 					valeurs = [valeurs];
 				}
 				ObfiltreSelect.push({ champ, valeurs });
-				}
-			);
+			});
 		}
 		if (!ajaxCrayons) {
 			localStorage.setItem(
 				"filtreselect_" + nameLocalStorage,
-				JSON.stringify(ObfiltreSelect)
+				JSON.stringify(ObfiltreSelect),
 			);
 		}
 	},
-	{ deep: true }
+	{ deep: true },
 );

 //~~~~~~~~~~~~~~~~~~~~~~~~~
@ -697,6 +591,23 @@ watch(
 //~~~~~~~~~~~~~~~~~~~~~~~~~
 function gererConfig(config) {
 	header.value = config.header;
+	if (config.header_top !== undefined) {
+		header_top.value = config.header_top;
+		let r = [];
+		let i = 0;
+		Object.values(config.header_top).forEach((d) => {
+			for (let j = 1; j <= d.colspan; j++ ) {
+				r[i] = d.class;
+				i++;
+			}
+		})
+		header_class_header_top.value = r;
+	}
+	if (config.footer !== undefined) {
+		footer.value = config.footer;
+	} else {
+		footer.value = [];
+	}
 	if (config.crayons !== undefined) {
 		crayons.value = config.crayons;
 	}
@ -855,19 +766,15 @@ function chargerJson(id) {
 			nextTick(() => {
 				chargement.value = false;
 				const filtreselectLS = localStorage.getItem(
-					"filtreselect_" + nameLocalStorage
-				);
-				const triColLS = localStorage.getItem(
-					"triCol_" + nameLocalStorage
+					"filtreselect_" + nameLocalStorage,
 				);
+				const triColLS = localStorage.getItem("triCol_" + nameLocalStorage);

 				let Tfiltres = [];
 				if (props.filtreselect) {
 					props.filtreselect.split(",").forEach((unFiltre) => {
 						const [champ, ...valeurs] = unFiltre.split("|");
-						const index = Tfiltres.findIndex(
-							(col) => col.champ === champ
-						);
+						const index = Tfiltres.findIndex((col) => col.champ === champ);
 						if (index === -1) {
 							Tfiltres.push({ champ, valeurs });
 						} else {
@ -876,7 +783,7 @@ function chargerJson(id) {
 					});
 					localStorage.setItem(
 						"filtreselect_" + nameLocalStorage,
-						JSON.stringify(Tfiltres)
+						JSON.stringify(Tfiltres),
 					);
 				} else if (filtreselectLS) {
 					Tfiltres = JSON.parse(filtreselectLS);
@ -904,10 +811,7 @@ function chargerJson(id) {
 							tri(col, sens);
 						}
 					});
-					localStorage.setItem(
-						"triCol_" + nameLocalStorage,
-						trierVal
-					);
+					localStorage.setItem("triCol_" + nameLocalStorage, trierVal);
 				} else if (triColLS) {
 					triColLS.split(",").forEach((unTri) => {
 						const [col, sens] = unTri.split("|");
@ -951,6 +855,8 @@ function chargerJson(id) {
 function saveHeader() {
 	let $header = {
 		header: header.value,
+		header_top: header_top.value,
+		footer: footer.value,
 		crayons: crayons.value,
 		classes: classes.value,
 		filtreCol: filtreColType.value,
@ -972,9 +878,7 @@ function selectValCol() {
 // }
 function calculer_nameLocalStorage() {
 	if (props.apiuri) {
-		return (
-			props.apiuri.match(/.*page=(.*)/)[1] + "&gamuId=" + props.id_auteur
-		);
+		return props.apiuri.match(/.*page=(.*)/)[1] + "&gamuId=" + props.id_auteur;
 	}
 	return "";
 }
@ -1008,7 +912,7 @@ function tri(col, sens = false) {
 		table.value,
 		triProps.value,
 		triOrders.value,
-		champ_search.value
+		champ_search.value,
 	);
 	ordreCol.value[col] = sens;
 	saveHeader();
@ -1127,9 +1031,7 @@ function checkboxValider(head, url) {
 			chargerJson("maj");
 		});
 	} else {
-		const Tcheck = encodeURIComponent(
-			JSON.stringify(Tcheckbox.value[head])
-		);
+		const Tcheck = encodeURIComponent(JSON.stringify(Tcheckbox.value[head]));
 		url += "&data=" + Tcheck;
 		url += "&var_zajax=content";
 		const data = {};
@ -1170,7 +1072,24 @@ function exporterCSV(json, delimitercsv, name) {
 function rechargerJson(id, ajax_Crayons = true) {
 	console.log("rechargerJson");
 	ajaxCrayons = ajax_Crayons;
+	console.log('rechargerJson id ', id);
+
+	if (Number.isInteger(id) && id < 0) {
+		delLigne(id);
+	} else {
 		chargerJson(id);
 	}
-defineExpose({ rechargerJson });
+}
+
+function delLigne(id) {
+	if (id < 0) {
+		id = id * -1;
+	}
+	console.log("delLigne : ", id);
+	let i = trouver_index(table.value, id);
+	if (i !== -1) {
+		table.value.splice(i, 1);
+	}
+}
+defineExpose({ rechargerJson, delLigne });
 </script>
--- a/src/gamutable.js
+++ b/src/gamutable.js
@ -12,6 +12,22 @@ 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;
@ -21,21 +37,23 @@ function gamutable() {
 				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.app_deux = createApp({
+			window.app2 = createApp({
 				components,
 				mounted() {
-					app_deux.rechargerJson = this.$refs.montableau_deux.rechargerJson;
+					app2.rechargerJson = this.$refs.montableau_deux.rechargerJson;
+					app2.delLigne = this.$refs.montableau_deux.delLigne;
 				},
 			});
-			app_deux.use(VuePapaParse);
-			app_deux.provide('$papa', app_deux.config.globalProperties.$papa);
-			app_deux.mount(el);
+			app2.use(VuePapaParse);
+			app2.provide('$papa', app2.config.globalProperties.$papa);
+			app2.mount(el);
 		}
 		i++;
 	}
@ -56,6 +74,18 @@ $('#vueGamutable').on('click', '.url_action, .url_action--ss_css', function (e)
 	}
 	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>');
@ -70,9 +100,26 @@ $('#vueGamutable').on('click', '.url_action, .url_action--ss_css', function (e)
 			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 {
-				app.rechargerJson('maj');
+				if (Treload1) {
+					app.rechargerJson('maj 1');
+				}
+				if (Treload2) {
+					app2.rechargerJson('maj 2');
+				}
 			}
 			if (nomBlocAjaxReload !== undefined) {
 				ajaxReload(nomBlocAjaxReload, {
--- a/vite.config.js
+++ b/vite.config.js
@ -1,12 +1,21 @@
-import { defineConfig, splitVendorChunkPlugin } from "vite";
+// import { defineConfig, splitVendorChunkPlugin } from "vite";
+import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import liveReload from "vite-plugin-live-reload";
-import path from "path";
-import fs from "fs";
-import basicSsl from "@vitejs/plugin-basic-ssl";
+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({
+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: {
@ -17,18 +26,17 @@ export default defineConfig({
 				},
 			}),
 			liveReload([__dirname + "/**/*.php", __dirname + "/**/*.html"]),
-		splitVendorChunkPlugin(),
-		// basicSsl(),
+			// splitVendorChunkPlugin(),
+			mkcert()
 		],

 		// config
-	root: "src",
-	base: process.env.APP_ENV === "development" ? "/" : "/dist/",

 		build: {
 			outDir: "../dist",
 			emptyOutDir: true,
 			manifest: true,
+			// cssCodeSplit: false,

 			rollupOptions: {
 				input: path.resolve(__dirname, "src/gamutable.js"),
@ -36,12 +44,9 @@ export default defineConfig({
 		},

 		server: {
+			host: true,
+			port: port,
 			strictPort: true,
-		port: 5134,
-		https: {
-			key: fs.readFileSync("certs/vite.key.pem"),
-			cert: fs.readFileSync("certs/vite.crt.pem"),
-		},
 			cors: true,
 		},

@ -52,4 +57,5 @@ export default defineConfig({
 				vue: "vue/dist/vue.esm-bundler.js",
 			},
 		},
+	}
 });
Author	SHA1	Message	Date
tofulm	9b095e9b6f	up de y	2025-04-01 09:06:42 +02:00
tofulm	c66d0285e3	Merge branch 'test_cookie_version'	2025-04-01 09:06:06 +02:00
tofulm	ff5eea5462	build	2025-04-01 09:05:04 +02:00
tofulm	17d9560748	feat: ajout possibilite vidanger le localstorage via une global `gamuza_version_demandee`	2025-04-01 09:04:00 +02:00
tofulm	b27733f01b	fix: evite erreur cors sur vite dev	2025-03-31 18:38:28 +02:00
tofulm	2c7c5c8f4b	wip: ajout possibilite vidanger le localstorage	2025-03-31 15:33:28 +02:00
tofulm	144aff6164	chore: up de z	2025-02-11 19:17:10 +01:00
tofulm	3197de702d	fix: _id pour gamutable_deux devient _id_deux	2025-02-11 19:16:22 +01:00
tofulm	52dc2952d6	fix: il faut passer id_auteur aussi pour le gamutable_deux	2025-02-11 19:15:09 +01:00
tofulm	6da24e4de7	feat ajout test* dans gitignore	2025-02-11 19:08:12 +01:00
tofulm	fe653417c0	feat: test saturation localstorage 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	2025-02-11 18:41:27 +01:00
tofulm	739c0797f8	chore: up de y + build	2025-01-10 15:31:47 +01:00
tofulm	83a33d8b2b	feat: * app_deux devient app2 pour simplifier son appel. j'ai essayé de garder la compat, tres rarement utilisé, donc j'ai prix le risque * refactorisation des fonctions php gamutable_fermer_modalbox => plus KISS * ces fonctions peuvent etre appeler avec un id < 0, dans ce cas on supprimera la ligne dans la gamutable	2025-01-10 15:28:27 +01:00
tofulm	480d91695f	up de z	2025-01-10 14:47:15 +01:00
tofulm	13ec20a24f	fix: app.rechargerJson(id) id peut etre un nombre négatif afin de pouvoir supprimer la ligne	2025-01-10 14:47:03 +01:00
tofulm	17a979ed14	on surcharge crayons_preparer_page des crayons, attention, il faut que la PR de git.spip soit merge	2025-01-09 17:06:20 +01:00
tofulm	6d11ef9b54	up de z	2025-01-06 08:09:14 +01:00
tofulm	4654abd4a6	build	2025-01-06 08:08:49 +01:00
tofulm	bbeb3590d8	fix: pour la somme total, il faut table et non tableau	2025-01-06 08:03:06 +01:00
tofulm	85b2edc6ac	up de z	2025-01-05 22:39:07 +01:00
tofulm	922069a8dc	fix: si on appelle cette fonction comme un filtre, $num peut etre un entier, on gere donc ce cas	2025-01-05 22:38:51 +01:00
tofulm	b1f4e0e1e3	build	2024-12-19 10:00:33 +01:00
tofulm	df24fa602d	feat: ajout 2 nouvelles fonctions : somme_champ et somme_champ_monnaie, il faut mettre dans la cle args, le nom du champ à utilisre	2024-12-19 10:00:13 +01:00
tofulm	25f303be90	build	2024-12-19 08:41:26 +01:00
tofulm	7ccaac01fc	feat: ajout class du header dans le footer	2024-12-19 08:41:11 +01:00
tofulm	3539b018cb	build	2024-12-19 00:25:41 +01:00
tofulm	2c637dc538	feat: on affiche le contenu du footer dans v-html pour pour afficher du code html	2024-12-19 00:25:37 +01:00
tofulm	1285946276	build	2024-12-19 00:14:07 +01:00
tofulm	fdca27fede	fix: somme et somme_monnaie que si le champ n'est pas vide	2024-12-19 00:13:44 +01:00
tofulm	8385b9b440	up de y	2024-12-19 00:05:45 +01:00
tofulm	ec35926b9f	up de z	2024-12-19 00:05:26 +01:00
tofulm	2ae128fa26	build	2024-12-19 00:05:12 +01:00
tofulm	1172a71ff4	feat: ajout footer avec possibilite d'afficher la somme d'une colonne - soit pour la page affiche, soit pour le total du tableau - 2 fonctions présentes : somme et somme_monnaie - possibilite d'ajouter une legende dans une colonne cf le fichier json de demo	2024-12-19 00:03:04 +01:00
tofulm	d63cd3adb4	build	2024-12-12 14:40:29 +01:00
tofulm	9fe1c8a64f	feat: header_top : ajout de la class prefixe par `--header_top` sur les th	2024-12-12 14:39:07 +01:00
tofulm	de6b76d92e	build	2024-12-12 14:01:31 +01:00
tofulm	486b2c637f	ajout class header_top	2024-12-12 14:01:17 +01:00
tofulm	348f1b2cf2	up de z	2024-12-12 13:57:37 +01:00
tofulm	2f54e27176	build	2024-12-12 13:57:24 +01:00
tofulm	ab1b666aae	feat: ajout une nouvelle cle : header_top qui permet d'ajouter un th>tr pour des entetes de groupe de colonne via des colspan ``` "header_top":{ "Mais c'est qui ?": {"class":"descriptif text-center", "colspan" :5}, "Choix": {"class":"choix text-center", "colspan" :2} } ```	2024-12-12 13:56:55 +01:00
tofulm	9807a18038	up de y	2024-11-13 09:51:22 +01:00
tofulm	608590abb6	fix: harmonisation des 2 champs de filtrage des colonnes: input et select	2024-11-13 09:50:53 +01:00
tofulm	9bf17f3b3e	fix: il ne faut pas mettre la classe du th sur le select	2024-11-13 09:50:21 +01:00
tofulm	1d09a5d692	up de z	2024-11-12 18:02:45 +01:00
tofulm	e66f3b0d85	feat: on supprime le premier poste traitement du l'env du titre du gamutable pour accepter des balises html	2024-11-12 18:02:34 +01:00
tofulm	061be9151d	compat spip 4.*	2024-08-19 20:43:07 +02:00
tofulm	0d4a9ac7be	feat: build vue block	2024-07-17 16:10:52 +02:00
tofulm	c2b1485a69	feat : update lib	2024-07-17 16:10:36 +02:00
tofulm	8bf80ffd8a	fix: il faut mettre l'url en partant de root mais pourquoi maintenant	2024-07-17 16:10:25 +02:00
tofulm	b6f86ad302	Build	2024-07-17 15:45:52 +02:00
tofulm	3cf610a22a	build	2024-07-17 15:27:44 +02:00
tofulm	38f9812501	build	2024-07-17 15:27:25 +02:00
tofulm	4c5a21caf0	feat: simplification du fonctionnement de l'affichage en vue bloc, ce n'est plus une url mais le contenu du fichier	2024-07-17 15:26:37 +02:00
cy_altern	c293014cea	Fix : patch pour éviter le Warning Undefined array key IS_DDEV_PROJECT inc\vite.php on line 20	2024-07-12 12:50:46 +02:00
tofulm	c6f72c2468	chore: up de y	2024-07-03 21:43:19 +02:00
tofulm	d2533e326d	feat: Vite compat DDEV	2024-07-03 21:42:41 +02:00
tofulm	867e7993bb	PSR	2024-07-03 21:32:39 +02:00
tofulm	b6cc4ad586	fix: si local, pas de verif autorisation	2024-06-14 17:30:18 +02:00
tofulm	0c8482435d	fix: evite un deprecated qui peut casser si affichage erreurs	2024-06-14 17:30:06 +02:00
tofulm	361cc1097f	Build	2024-05-20 15:43:04 +02:00
tofulm	119288bada	feat: update nom des class iconfont	2024-05-20 15:42:53 +02:00
tofulm	7b9aa0978a	feat: update font pour les csv / pdf	2024-05-20 15:42:29 +02:00
tofulm	09d6d5a108	PSR	2024-05-20 15:23:00 +02:00
tofulm	b7e2f3ef79	fix: rename icone	2024-05-20 15:22:17 +02:00
tofulm	b0de8d4908	feat: ajout eye et eye-flash	2024-05-14 08:03:53 +02:00
tofulm	d08fc93035	chore: up de z	2024-05-07 17:19:21 +02:00
tofulm	4b77b1d3d2	fix: coquille doc	2024-05-07 17:19:00 +02:00
tofulm	3fd6ed14a1	feat: icone	2024-05-07 17:18:53 +02:00
tofulm	5ea982b90f	fix: appel font-face	2024-05-07 15:00:26 +02:00
tofulm	c708543efc	chore: up de z	2024-04-20 14:44:03 +02:00
tofulm	136e204184	feat: on decoupe la fonction de rechargement en 2 pour pouvoir recuperer simplement le js	2024-04-20 14:43:41 +02:00
tofulm	2fbba703d7	Build	2024-04-17 09:00:14 +02:00
tofulm	6b01f48df8	up de z	2024-04-17 08:59:59 +02:00
tofulm	cb01735282	DOC maj	2024-04-17 08:59:51 +02:00
tofulm	3b4ca5a672	feat: si data-id est négatif, cela supprime la ligne (dans le cas d'une action url_action)	2024-04-17 08:56:26 +02:00
tofulm	2d810faf27	fix: coquille sur le typeof de charger_require	2024-04-15 20:29:41 +02:00
tofulm	bb6b31d9b7	Build	2024-04-15 20:26:29 +02:00
tofulm	30d772fe81	up de z	2024-04-15 20:26:16 +02:00
tofulm	6306a94a36	feat: menage, inutile maintenant	2024-04-15 20:25:46 +02:00
tofulm	5b8cf8b44b	Build	2024-04-12 09:27:28 +02:00
tofulm	ee2bb085f0	feat: le jeu d'icone passe en fontello, gamutable est maintenant autonome, plus besoin de fontawesome	2024-04-12 09:27:19 +02:00
tofulm	e7b9dcbf24	PSR	2024-04-12 09:02:16 +02:00
tofulm	2ab2b9caa6	feat: on ajoute la possibilité de charger avec un port different, pratique si on a plusieurs plugins qui utilisent plusieurs instance de vite	2024-01-17 16:46:07 +01:00
cy_altern	7096c79b64	Fix: ne pas intégrer le script JS de génération du bouton var_mode=gamutable dans les pages qui n'affichent pas le mini-bando (par ex backend.html : ça tue le XML)	2023-12-27 16:24:40 +01:00
cy_altern	aec17ddbeb	Ajout des modifs de config pour run dev sous GitBash. Reste le problème de l'erreur CORS à l'appel de https://localhost:5134/gamutable.js	2023-10-18 12:59:43 +02:00
tofulm	23a3fb09f1	chore: maj de la partie developpement	2023-10-18 09:14:18 +02:00
cy_altern	e882e0834a	Comme d'hab : ne pas laisser trainer de débog...	2023-10-17 19:37:59 +02:00
cy_altern	1aa596d4fe	Doc pour le rechargement des actions	2023-10-17 19:33:39 +02:00
cy_altern	434e105e48	Feat: gestion du rechargement de gamutableUn ou/et gamutableDeux lors du retour d'un bouton action : par défaut gamutableUn si le bouton est dans gamutableUn, gamutableDeux si il est dans gamutableDeux + possibilité d'ajouter un data-treload = 1 \| 2 \| 12 pour forcer le rechargement de l'un ou l'autre ou les deux gamutable	2023-10-17 19:26:28 +02:00
tofulm	927ba3034a	on passe en v5	2023-09-14 17:35:39 +02:00
tofulm	43df04b445	Merge branch 'dev4'	2023-09-14 17:33:58 +02:00
tofulm	c010b392ca	Fix: rechargemnet des crayons	2023-01-16 15:42:55 +01:00
cy_altern	5da31ee28f	docs: ajout de la documentation pour utiliser les crayons dans une colonne sur une table différente de cellede l'id de la ligne	2023-01-06 10:21:26 +01:00