Merge branch 'dev4'

2023-09-14 17:33:58 +02:00 · 2023-09-14 17:33:58 +02:00 · 43df04b445
commit 43df04b445
parent c010b392ca 1a081594a0
39 changed files with 4169 additions and 35637 deletions
--- a/README.md
+++ b/README.md
@ -1,5 +1,6 @@
 # gamutable

+
 ## Stockage
 >On utilise maintenant la lib localforage : https://localforage.github.io/localForage/
 Dans cette nouvelle version, on découpe le stockage en 2:
@ -50,14 +51,14 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
 	env
 }>

-[(#SET{filtrerselect,#ARRAY{
-	0,#ARRAY{champ,secteur,valeurs,#LISTE{Le chat}},
-	1,#ARRAY{champ,voie,valeurs,#LISTE{Turlut, man}}
-	}|json_encode|rawurlencode})]
-<a class="btn" href="[(#URL_PAGE{gestionnaire_voies}|parametre_url{filtrerselect,#GET{filtrerselect}})]"> aaaa </a>
 ```
 - **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
+- &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"
@ -84,6 +85,17 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
 	"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
--- a/action/pdf_gamutable.php
+++ b/action/pdf_gamutable.php
@ -11,6 +11,7 @@ function action_pdf_gamutable_dist() {
 	}

 	$fichierpdf = _request('fichierpdf') ?? '';
+	$langpdf    = _request('langpdf');
 	$namepdf    = _request('namepdf') ?? $fichierpdf;
 	$namepdf    = str_replace('/', '_', $namepdf);
 	$header     = _request('header') ?? [];
@ -31,7 +32,7 @@ function action_pdf_gamutable_dist() {
 	if (find_in_path('gamutable_pdf/' . $fichierpdf . '.html')) {
 		$set = [
 			'arg' => $arg,
-			'lang' => $GLOBALS['meta']['langue_site'] ?? 'fr'
+			'lang' => $langpdf ?? $GLOBALS['meta']['langue_site'] ?? 'fr'
 		];
 		if (!empty($Tcles)) {
 			$set = array_merge($set,  ['Tids' => $Tcles]);
--- a/certs/vite.crt.pem
+++ b/certs/vite.crt.pem
@ -0,0 +1,24 @@
+-----BEGIN CERTIFICATE-----
+MIID+zCCAmOgAwIBAgIRAOOJzMD8sw5q19A4zphuQV0wDQYJKoZIhvcNAQELBQAw
+TzEeMBwGA1UEChMVbWtjZXJ0IGRldmVsb3BtZW50IENBMRIwEAYDVQQLDAl0b2ZA
+c2lyYWMxGTAXBgNVBAMMEG1rY2VydCB0b2ZAc2lyYWMwHhcNMjIxMjA4MDcwNTMw
+WhcNMjUwMzA4MDcwNTMwWjA9MScwJQYDVQQKEx5ta2NlcnQgZGV2ZWxvcG1lbnQg
+Y2VydGlmaWNhdGUxEjAQBgNVBAsMCXRvZkBzaXJhYzCCASIwDQYJKoZIhvcNAQEB
+BQADggEPADCCAQoCggEBALz7kaH4NETNItBjcBiV6xt3Z+djb+06AdPOitG14lGU
+NZRXNZ/tFLrncN9ptPyU2wkgqQCNuZzyK9d/K/BRiVahXl+6YqKLR5jeg6s2RLIp
+DYs1k63OJhmvGMSNjO+UWmBaI7zGqLgmrY0qCV8tTfLHfisi7/G7sUH9m+eV0Eih
+RIYjXXf9k3ZeEnLsTK297JPlwipLEZ5Io3wI1+x2Easovxfl6urCHtrpyyUJE4L5
+Y/o2VhfFcEIrIIpyJyrQdn3M3jSEvJWKvK2etJoXezgXnMjh/YhMg7HZj5CeKCPq
+IdNjZare2xWwu4X5AdaZbAN04G8gc77VDjqt4XYm/KcCAwEAAaNkMGIwDgYDVR0P
+AQH/BAQDAgWgMBMGA1UdJQQMMAoGCCsGAQUFBwMBMB8GA1UdIwQYMBaAFIVU0l9v
+NM0nWDIGPGYOgJdkOxjRMBoGA1UdEQQTMBGCCWxvY2FsaG9zdIcEfwAAATANBgkq
+hkiG9w0BAQsFAAOCAYEAj9Cab99vgqXfCIsCMc2oMPWLL0iZ9O9DgeAGu/nUNfI1
+fVgkus+WS2TVmTD828N/uo/tBBY+yjH8a79bAClK5aCcsom4OFFzPod9PhfLqqSv
+RsgvgZEHPZNF/Jobsf1f3nN6Xz+AX3RUQrbHlm8QqK3ir8u43VBRH56A1FT3Hob6
+MtxqCHuhUFV0WRIb8E73Q6n69k+IAfaZvY3wZUXVH78FFlYK3SIv/NU1HC2FByXF
+FKejQ9vYJV0QmY/sDZYM66A0qB03oEyGIC3Fk+ze4+gHyuVi1XwcYmxiYQgYwFMQ
+ZEDjPy64s1t1lpbmbPtrp7pIAAYIYXOEWlTB2re0GmiYTFpcDuZYicxw5Ng9uL/e
+lRqXCDooF8jr2H+H8zoqEfvNMX6eMslsfrOca30MZxHUL+Vwqukt+va6uGzDJBDU
+AzvCw1Y4kKxnlSgaTrCnu/aT2ejxhhCv6WNVW2WxZiIwaNJxh4ZjOpcEiD9xxxfw
+fko5gu7B+lELkHZ8f4cE
+-----END CERTIFICATE-----
--- a/certs/vite.key.pem
+++ b/certs/vite.key.pem
@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQC8+5Gh+DREzSLQ
+Y3AYlesbd2fnY2/tOgHTzorRteJRlDWUVzWf7RS653DfabT8lNsJIKkAjbmc8ivX
+fyvwUYlWoV5fumKii0eY3oOrNkSyKQ2LNZOtziYZrxjEjYzvlFpgWiO8xqi4Jq2N
+KglfLU3yx34rIu/xu7FB/ZvnldBIoUSGI113/ZN2XhJy7EytveyT5cIqSxGeSKN8
+CNfsdhGrKL8X5erqwh7a6cslCROC+WP6NlYXxXBCKyCKcicq0HZ9zN40hLyViryt
+nrSaF3s4F5zI4f2ITIOx2Y+Qnigj6iHTY2Wq3tsVsLuF+QHWmWwDdOBvIHO+1Q46
+reF2JvynAgMBAAECggEBAJPq1DJSc5bmeTlim3qi3ULCUzFpQ1IK9SMzprQ+CMaR
+mt5g5Dgo+PDR9iboNiD84fRi++TTCVUut+IUR+/x4e1MoPGMkWdoXMHqaGS6NUq9
+lzw+0zhXArtXsasmoAlltNd1tkMruyNoIq87F9rHOxurybU5w1UR88wTFNRPDpfJ
+SRiowKbeI5dF+qGIBfRYMb+dEG7CSsjSBmna+wP9jQM/aeaNBVg9sl2xr2qGuVGx
+lFhBoyjBuwdGWfZzIJIXZm2yPCoKJXOzl9HzdSbr9evHOKXGWfUZ8T3tk78PtvZ4
+mmb9kJfX2yhr57ignz6ABoYhAzhYxRvTaQ6RWzSLkwECgYEAzWp3RBokQHlZor4b
+OdygrPJCFgdnmyYf+4+w7zJXgz+pJg/lzKg2xV0Zi+9PPw3Wyz+ncEqGpi1Wt54T
+d31g3bnRZvXtVbf0/1bZFiCacE2ND4lkgpDCOvV2yPoMXJ9lRJt7/BX+4ME4nrDn
+4ocMUzK14kBS86IJ3aC0mvQ7XusCgYEA64UlL3ytWrTx0l0gugqdng4pa+Ct1eoz
+cIcWFpD0JpxOBmV4eRpxvprb1vG+H2UcVpBJnEmgqrwwZCX02X40YpoEhP9RiQ1e
+vr+jkT9aFX9leqhrHbl6H2n8eqrVjszyA94xPHBrx9z6WQRL7sQi3vkc2aUATERG
+7vRkYr67gjUCgYB3qpVOXDhQQyF/2GX+AFSuS/dJ5Ahsbvpkz6HQxzAKKvT8Unia
+EEjQE1uFlOVCo2pFP5DortHgTztcfr9ydd0PbmfaJlyb+i3E7rBK3rV5xQPvUCf4
+lCJCvKr1jA3Vi5owLLA+/AVeo9G7SO3dnrUEZt9krfplKjm7Hhr4xl0r/wKBgQDY
+ZeXc0/mUNl1apCbFyas45lo4vJ/8xMuuwPASm+047LTkO6eN3jZUo4UK4eOGhSic
+gMahyyTMu0zbN+TZUZRgZJNygAUyoA5FxV9MvaDPz9Y19Tk2fo0u//rz2rOOGdDk
+rOsgVUsywF9mGwSJxb0kkk9nyquTZ8ilFfiGoik3YQKBgFmE/CObkleRUNOAW6Ca
+mZOfx+zDMb/tsUKvgFUJ3KEtGvUEkvYA/mz+iiPCD7PlkU4+VvNAjhptFGizgIEw
+Y+JYYiATaFBnCqsqoidmn/XTbRj6Oo3ggKniI1/tIibMp6MtSwtVQdYTNlR4IBMt
+xufynO21rb9zTSRqwMsMkRAE
+-----END PRIVATE KEY-----
--- a/css/gamutable.css
+++ b/css/gamutable.css
@ -1,5 +1,5 @@
 .gamutable__input--rechercher {
-  padding: 0.25rem 1rem;
+	padding: 0.25rem 1em;
 }

 .vue-tags .vue-tag.selected {
@ -18,6 +18,7 @@ div.vue-input > input {
 	font-size: 1.2rem;
 	padding: 5px 5px !important;
 }
+
 .gamutable__input--filtrer:valid {
 	font-size: 1.2rem;
 	background-color: rgb(153, 153, 153);
@ -47,9 +48,11 @@ th .vue-select {
 .gamutable--surTable input {
 	margin-bottom: 0;
 }
+
 .gamutable--surTable .gamutable-nbrMax {
 	margin-left: 2rem;
 }
+
 .gamutable--surTable .includespip {
 	margin-left: 2rem;
 }
@ -65,15 +68,20 @@ th .vue-select {
 	display: -ms-flexbox;
 	display: flex;
 }
+
 .gamutable--pagination .page-item {
 	display: -ms-flexbox;
 	display: flex;
 }
+
 .gamutable--pagination .page-link {
 	margin: 0 0.2rem;
 	background-color: #eee;
 	cursor: pointer;
 }
+.gamutable--pagination .page-link.on {
+	background-color: #cecece;
+}

 .h2-like.titregamutable,
 .h2-like.titregamutable_deux {
@ -81,12 +89,14 @@ th .vue-select {
 }

 .gamutable table {
-  font-size: 1rem;
+	font-size: 1em;
 	table-layout: auto;
 }
+
 .gamutable table thead {
 	border: 1px solid rgb(119, 119, 119);
 }
+
 .gamutable table .gt_labels {
 	display: -ms-flexbox;
 	display: flex;
@ -95,35 +105,42 @@ th .vue-select {
 	-ms-flex-align: center;
 	align-items: center;
 }
+
 .gamutable table th>div {
 	display: -ms-flexbox;
 	display: flex;
 }
+
 .gamutable table .label_tete_colonne {
 	-ms-flex-positive: 1;
 	flex-grow: 1;
 }
+
 .gamutable table .iconeTri {
 	float: right;
-  width: calc(1rem + 4px);
+	width: calc(1em + 4px);
 }
+
 .gamutable table .iconeTri .fa {
 	padding: 2px 5px;
 	cursor: pointer;
 }
+
 .gamutable table .tri_col {
 	cursor: pointer;
 	fill: #cecece;
 }
+
 .gamutable table .iconeTri>.active {
 	fill: rgb(220, 53, 69);
 	color: rgb(220, 53, 69);
 }
+
 .gamutable table tbody tr:hover {
 	background-color: rgba(179, 209, 67, 0.27);
 }

-#app .select {
+.vue-gamutable table.table--zebra tr.select {
 	background-color: rgba(179, 209, 67, 0.47);
 }

@ -139,6 +156,7 @@ th.icone {
 tr.filtreColonne th {
 	padding: 0;
 }
+
 tr.filtreColonne th select {
 	margin: 0;
 }
@ -150,7 +168,7 @@ td.icone > * {
 	text-align: center;
 }

-.gamutable .url_action {
+.gamutable .url_action:not(.sans_css) {
 	padding: 0.2rem;
 	display: -ms-inline-flexbox;
 	display: inline-flex;
@ -158,6 +176,7 @@ td.icone > * {
 	border: 1px solid #cecece;
 	border-radius: 5px;
 }
+
 .gamutable .url_action:hover {
 	background-color: #cecece;
 }
@ -277,7 +296,7 @@ td.icone i {
 	max-width: 1000px;
 }

-.w1000p input {
+.gamutable .w1000p input {
 	width: 1000px;
 }

@ -293,7 +312,7 @@ td.icone i {
 	max-width: 950px;
 }

-.w950p input {
+.gamutable .w950p input {
 	width: 950px;
 }

@ -309,7 +328,7 @@ td.icone i {
 	max-width: 900px;
 }

-.w900p input {
+.gamutable .w900p input {
 	width: 900px;
 }

@ -325,7 +344,7 @@ td.icone i {
 	max-width: 850px;
 }

-.w850p input {
+.gamutable .w850p input {
 	width: 850px;
 }

@ -341,7 +360,7 @@ td.icone i {
 	max-width: 800px;
 }

-.w800p input {
+.gamutable .w800p input {
 	width: 800px;
 }

@ -357,7 +376,7 @@ td.icone i {
 	max-width: 750px;
 }

-.w750p input {
+.gamutable .w750p input {
 	width: 750px;
 }

@ -373,7 +392,7 @@ td.icone i {
 	max-width: 700px;
 }

-.w700p input {
+.gamutable .w700p input {
 	width: 700px;
 }

@ -389,7 +408,7 @@ td.icone i {
 	max-width: 650px;
 }

-.w650p input {
+.gamutable .w650p input {
 	width: 650px;
 }

@ -405,7 +424,7 @@ td.icone i {
 	max-width: 600px;
 }

-.w600p input {
+.gamutable .w600p input {
 	width: 600px;
 }

@ -421,7 +440,7 @@ td.icone i {
 	max-width: 550px;
 }

-.w550p input {
+.gamutable .w550p input {
 	width: 550px;
 }

@ -437,7 +456,7 @@ td.icone i {
 	max-width: 500px;
 }

-.w500p input {
+.gamutable .w500p input {
 	width: 500px;
 }

@ -453,7 +472,7 @@ td.icone i {
 	max-width: 450px;
 }

-.w450p input {
+.gamutable .w450p input {
 	width: 450px;
 }

@ -469,7 +488,7 @@ td.icone i {
 	max-width: 400px;
 }

-.w400p input {
+.gamutable .w400p input {
 	width: 400px;
 }

@ -485,7 +504,7 @@ td.icone i {
 	max-width: 350px;
 }

-.w350p input {
+.gamutable .w350p input {
 	width: 350px;
 }

@ -501,7 +520,7 @@ td.icone i {
 	max-width: 300px;
 }

-.w300p input {
+.gamutable .w300p input {
 	width: 300px;
 }

@ -517,7 +536,7 @@ td.icone i {
 	max-width: 250px;
 }

-.w250p input {
+.gamutable .w250p input {
 	width: 250px;
 }

@ -533,7 +552,7 @@ td.icone i {
 	max-width: 200px;
 }

-.w200p input {
+.gamutable .w200p input {
 	width: 200px;
 }

@ -549,7 +568,7 @@ td.icone i {
 	max-width: 190px;
 }

-.w190p input {
+.gamutable .w190p input {
 	width: 190px;
 }

@ -565,7 +584,7 @@ td.icone i {
 	max-width: 180px;
 }

-.w180p input {
+.gamutable .w180p input {
 	width: 180px;
 }

@ -581,7 +600,7 @@ td.icone i {
 	max-width: 170px;
 }

-.w170p input {
+.gamutable .w170p input {
 	width: 170px;
 }

@ -597,7 +616,7 @@ td.icone i {
 	max-width: 160px;
 }

-.w160p input {
+.gamutable .w160p input {
 	width: 160px;
 }

@ -613,7 +632,7 @@ td.icone i {
 	max-width: 150px;
 }

-.w150p input {
+.gamutable .w150p input {
 	width: 150px;
 }

@ -629,7 +648,7 @@ td.icone i {
 	max-width: 140px;
 }

-.w140p input {
+.gamutable .w140p input {
 	width: 140px;
 }

@ -645,7 +664,7 @@ td.icone i {
 	max-width: 130px;
 }

-.w130p input {
+.gamutable .w130p input {
 	width: 130px;
 }

@ -661,7 +680,7 @@ td.icone i {
 	max-width: 120px;
 }

-.w120p input {
+.gamutable .w120p input {
 	width: 120px;
 }

@ -677,7 +696,7 @@ td.icone i {
 	max-width: 110px;
 }

-.w110p input {
+.gamutable .w110p input {
 	width: 110px;
 }

@ -693,7 +712,7 @@ td.icone i {
 	max-width: 100px;
 }

-.w100p input {
+.gamutable .w100p input {
 	width: 100px;
 }

@ -709,7 +728,7 @@ td.icone i {
 	max-width: 90px;
 }

-.w90p input {
+.gamutable .w90p input {
 	width: 90px;
 }

@ -725,7 +744,7 @@ td.icone i {
 	max-width: 80px;
 }

-.w80p input {
+.gamutable .w80p input {
 	width: 80px;
 }

@ -741,7 +760,7 @@ td.icone i {
 	max-width: 70px;
 }

-.w70p input {
+.gamutable .w70p input {
 	width: 70px;
 }

@ -757,7 +776,7 @@ td.icone i {
 	max-width: 60px;
 }

-.w60p input {
+.gamutable .w60p input {
 	width: 60px;
 }

@ -773,7 +792,7 @@ td.icone i {
 	max-width: 50px;
 }

-.w50p input {
+.gamutable .w50p input {
 	width: 50px;
 }

@ -789,7 +808,7 @@ td.icone i {
 	max-width: 40px;
 }

-.w40p input {
+.gamutable .w40p input {
 	width: 40px;
 }

@ -805,7 +824,7 @@ td.icone i {
 	max-width: 30px;
 }

-.w30p input {
+.gamutable .w30p input {
 	width: 30px;
 }

@ -821,7 +840,7 @@ td.icone i {
 	max-width: 20px;
 }

-.w20p input {
+.gamutable .w20p input {
 	width: 20px;
 }

@ -837,7 +856,7 @@ td.icone i {
 	max-width: 10px;
 }

-.w10p input {
+.gamutable .w10p input {
 	width: 10px;
 }

@ -876,4 +895,5 @@ td.icone i {
 .maxw1140p {
 	max-width: 1140px;
 }
+
 /*# sourceMappingURL=gamutable.css.map */
--- a/css/gamutable.css.map
+++ b/css/gamutable.css.map
--- a/css/gamutable.scss
+++ b/css/gamutable.scss
@ -1,236 +0,0 @@
-// ----------------------------
-// Surcharge de vue-next-select
-// ----------------------------
-.gamutable__input--rechercher {
-	padding: 0.25rem 1rem;
-}
-.vue-tags .vue-tag.selected {
-	font-size: 1.2rem;
-}
-div.vue-input > input {
-	font-size: 1.2rem;
-}
-.tag--ub {
-	display: inline-block;
-}
-.gamutable__input--filtrer {
-	font-size: 1.2rem;
-	//box-shadow: 0 0 0 1px rgb(153, 153, 153) inset;
-	padding: 5px 5px !important;
-	&:valid {
-		font-size: 1.2rem;
-		background-color: rgb(153, 153, 153);
-		color: #000;
-	}
-}
-.gamutable__input--filtrer:placeholder-shown {
-	background-color: transparent;
-	color: inherit;
-}
-th .vue-select {
-	width: 100%;
-}
-// ----------------------------
-// Fin de la surcharge de vue-next-select
-// ----------------------------
-.gamutable--surTable {
-	select,
-	input {
-		margin-bottom: 0;
-	}
-	.gamutable-nbrMax {
-		margin-left: 2rem;
-	}
-	.includespip {
-		margin-left: 2rem;
-	}
-}
-.gamutable--sousTable {
-	display: flex;
-	justify-content: space-between;
-}
-.gamutable--pagination {
-	display: flex;
-	.page-item {
-		display: flex;
-	}
-	.page-link {
-		margin: 0 0.2rem;
-		background-color: #eee;
-		cursor: pointer;
-	}
-}
-
-.h2-like.titregamutable,
-.h2-like.titregamutable_deux {
-	font-weight: bold;
-}
-.gamutable table {
-	// patch provisoire
-	// .vue-dropdown-item > span {
-	// 	display: inline-block;
-	// 	min-height: 1rem;
-	// }
-
-	font-size: 1rem;
-	table-layout: auto;
-	thead {
-		border: 1px solid rgb(119, 119, 119);
-	}
-	.gt_labels {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	th > div {
-		display: flex;
-	}
-	.label_tete_colonne {
-		flex-grow: 1;
-	}
-	.iconeTri {
-		float: right;
-		width: calc(1rem + 4px);
-		//position: relative;
-		.fa {
-			padding: 2px 5px;
-			cursor: pointer;
-		}
-	}
-	.tri_col {
-		cursor: pointer;
-		fill: #cecece;
-	}
-	.iconeTri > .active {
-		fill: rgb(220, 53, 69);
-		color: rgb(220, 53, 69);
-	}
-	tbody tr:hover {
-		background-color: rgba(179, 209, 67, 0.27);
-	}
-}
-#app .select {
-	background-color: rgba(179, 209, 67, 0.47);
-}
-
-td.id {
-	cursor: pointer;
-}
-
-th.icone {
-	width: 30px;
-	text-align: center;
-}
-
-tr.filtreColonne th {
-	padding: 0;
-	select {
-		margin: 0;
-	}
-}
-
-td.icone > * {
-	width: 100%;
-	display: block;
-	padding: 0.5rem;
-	text-align: center;
-}
-.gamutable .url_action {
-	padding: 0.2rem;
-	display: inline-flex;
-	background-color: #f5f5f5;
-	border: 1px solid #cecece;
-	border-radius: 5px;
-	&:hover {
-		background-color: #cecece;
-	}
-}
-
-td.icone i {
-	font-size: 1.8rem;
-}
-
-.vueBlocs {
-	display: flex;
-	flex-wrap: wrap;
-}
-.vueBlocs-unbloc {
-	width: 23%;
-	border: 1px solid #cecece;
-	margin-bottom: 1rem;
-	margin-right: 1rem;
-}
-
-.viderInputSearch {
-	color: #ff0000;
-}
-
-/* blocks widths (percentage and pixels) */
-$i: 100;
-@while $i > 0 {
-	.w#{$i} {
-		width: $i * 1%;
-	}
-	$i: $i - 5;
-}
-
-$i: 1000;
-@while $i > 200 {
-	.w#{$i}p {
-		width: $i * 1px;
-	}
-	.minw#{$i}p {
-		min-width: $i * 1px;
-	}
-	.maxw#{$i}p {
-		max-width: $i * 1px;
-	}
-	.w#{$i}p input {
-		width: $i * 1px;
-	}
-	$i: $i - 50;
-}
-$i: 200;
-@while $i > 0 {
-	.w#{$i}p {
-		width: $i * 1px;
-	}
-	.minw#{$i}p {
-		min-width: $i * 1px;
-	}
-	.maxw#{$i}p {
-		max-width: $i * 1px;
-	}
-	.w#{$i}p input {
-		width: $i * 1px;
-	}
-	$i: $i - 10;
-}
-
-.w66 {
-	width: calc(100% / 3 * 2);
-}
-.w33 {
-	width: calc(100% / 3);
-}
-.wauto {
-	width: auto;
-}
-.w960p {
-	width: 960px;
-}
-.minw960p {
-	min-width: 960px;
-}
-.maxw960p {
-	max-width: 960px;
-}
-.w1140p {
-	width: 1140px;
-}
-.minw1140p {
-	min-width: 1140px;
-}
-.maxw1140p {
-	max-width: 1140px;
-}
--- a/css/table_knacss.css
+++ b/css/table_knacss.css
@ -1,49 +0,0 @@
-/* ----------------------------- */
-/* ==Tables                      */
-/* ----------------------------- */
-table,
-.table {
-	width: 100%;
-	max-width: 100%;
-	table-layout: fixed;
-	border-collapse: collapse;
-	vertical-align: top;
-	margin-bottom: 2rem;
-}
-
-.table {
-	display: table;
-	border: 1px solid #acb3c2;
-	background: transparent;
-}
-
-.table--zebra tbody tr:nth-child(odd) {
-	background: #e7e9ed;
-}
-
-.table caption {
-	caption-side: bottom;
-	padding: 1rem;
-	color: #333;
-	font-style: italic;
-	text-align: right;
-}
-
-.table td,
-.table th {
-	padding: 0.3rem 0.6rem;
-	min-width: 2rem;
-	vertical-align: top;
-	border: 1px #acb3c2 dotted;
-	text-align: left;
-	cursor: default;
-}
-
-.table thead {
-	color: #212529;
-	background: transparent;
-}
-
-.table--auto {
-	table-layout: auto;
-}
--- a/dist/assets/gamutable-559fdd12.js
+++ b/dist/assets/gamutable-559fdd12.js
--- a/dist/assets/vendor-f73869ed.js
+++ b/dist/assets/vendor-f73869ed.js
--- a/dist/manifest.json
+++ b/dist/manifest.json
@ -0,0 +1,13 @@
+{
+  "_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/formulaires/configurer_gamutable.html
+++ b/formulaires/configurer_gamutable.html
@ -9,24 +9,20 @@
 	<div>
 		#ACTION_FORMULAIRE
 		<div class="editer_groupe">
-			#SET{name,version_js}
+			#SET{name,charger_modalbox}
 			#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
-			#SET{obli,"obligatoire"}
 			<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
+				<label>Charger js pour lancer .modalbox</label>
 				<div class="choix">
-					<input type="radio" class="radio" name="#GET{name}" value="" id="#GET{name}_non"[ (#ENV{#GET{name}}|=={''}|?{checked="checked"})] >
-					<label for="#GET{name}_non">js minifié</label>
-					<p class="explication">js/vue.min.js - 92ko (sans le debug)</p>
-				</div>
-				<div class="choix">
-					<input type="radio" class="radio" name="#GET{name}" value="dev" id="#GET{name}_oui"[ (#ENV{#GET{name}}|=={dev}|?{checked="checked"})] >
-					<label for="#GET{name}_oui">Dev</label>
-					<p class="explication">js/vue.js - 276ko</p>
+					<input type="checkbox" class="checkbox" name="#GET{name}" id="#GET{name}_1" value="oui" [(#ENV{#GET{name}}|=={oui}|oui) checked] >
+					<label for="#GET{name}_1">Oui</label>
+					<p class="explication">Si un lien à la classe .modalbox, ouvre l'url dans une modale</p>
 				</div>
 			</div>
 		</div>


+
 		<input type="hidden" name="_meta_casier" value="gamutable" />
 		<p class="boutons"><span class="image_loading">&nbsp;</span><input type="submit" class="submit" value="<:bouton_enregistrer:>" /></p>
 	</div>
--- a/gamutable_fonctions.php
+++ b/gamutable_fonctions.php
@ -9,47 +9,124 @@
 * @package    SPIP\Gamutable\Fonctions
 */

-if (!defined('_ECRIRE_INC_VERSION')) {
+if (!defined("_ECRIRE_INC_VERSION")) {
 	return;
 }
+include_spip("inc/vite");

+/**
+ * fonction pour forcer un hit pour un objet
+ * un hit => maj de champ maj
+ *
+ * @param string $objet
+ * @param int $id_objet
+ * @param string $table (optional) pour forcer sur une table spécifique ou le test se fait sur la cle primaire de $objet
+ * si $table est renseigné : ex :
+ * $objet = rubrique
+ * $id_objet = 4
+ * $table = 'spip_articles'
+ * => le hit sur l'id_rubrique 4 de spip_articles
+ *
+ * @return void [TODO:description]
+ */
+function forcer_hit(string $objet, int $id_objet, string $table = null):void {
+	include_spip('inc/invalideur');
+	$id = id_table_objet($objet);
+	if (!$table) {
+		$table = table_objet_sql($objet);
+	}  else {
+		$id_c = id_table_objet($table);
+		suivre_invalideur("id='$id_c/1'");
+	}
+	sql_updateq($table, ['maj' => date("Y-m-d H:i:s")], "$id=".$id_objet);
+	suivre_invalideur("id='$id/1'");
+}
+
+if (!function_exists('tsEnDate')) {
+	/**
+	 * retour la date d'un timestamp
+	 *
+	 * @param $ts
+	 *
+	 * @return string
+	 */
+	function tsEnDate($ts) {
+		$ts = intval($ts);
+		return date('Y-m-d H:i:s', $ts);
+	}
+}
+
+function gamutable_fermer_modalbox($id_objet = 9999999999, $num = null) {
+	if ($num) {
+		$num = "_deux";
+	}

-function gamutable_fermer_modalbox($id_objet = 9999999999){
 	$html = <<<EOJS
 		<script type="text/javascript">
 			id = "$id_objet";
-			id = parseInt(id);
-			if (id > 0 && id < 9999999999) {
+			if (id === 'maj' || !id) {
 				if (typeof app !== 'undefined') {
 					app.rechargerJson(id);
 				}
-				$.modalboxclose();
+				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 !== 'undefined') {
-					app.rechargerJson();
+					if (typeof app$num !== 'undefined') {
+						app$num.rechargerJson();
+					}
+				}
 			}
 			$.modalboxclose();
-			}
 			delete id;
 		</script>
 EOJS;
 	return $html;
 }

-function gamutable_recharger_tableau($id_objet = 9999999999){
+/**
+ * fonction que l'on peut appeler comme filtre dans une vues des crayons
+ * ex:
+ *             [(#ID_APP_HORAIRE|gamutable_recharger_tableau)]
+ *
+ * @param $id_objet (optional)
+ * @param $num (optional) (si on veut recharger qu'un tableau préciséemnt)
+ *
+ * @return string $html
+ */
+function gamutable_recharger_tableau($id_objet = 9999999999, $num = null):string {
+	if ($num) {
+		$num = "_deux";
+	}
+
 	$html = <<<EOJS
 		<script type="text/javascript">
 			id = "$id_objet";
-			id = parseInt(id);
-			if (id > 0 && id < 9999999999) {
+			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 !== 'undefined') {
-					app.rechargerJson();
+					if (typeof app$num !== 'undefined') {
+						app$num.rechargerJson();
+					}
 				}
 			}
 			delete id;
--- a/gamutable_pipelines.php
+++ b/gamutable_pipelines.php
@ -52,11 +52,11 @@ function gamutable_crayons_vue_affichage_final($flux){
 	$objet = $flux['args']['type'];
 	if (
 		$id = intval($id)
-		and (!empty($GLOBALS['gamutable_rechargerJson_all']) and !in_array($objet, $GLOBALS['gamutable_rechargerJson_all']))
+		and !in_array($objet, $GLOBALS['gamutable_rechargerJson_all'] ?? [])
 	) {
-		$flux['data'] .= ' <script type="text/javascript">if ( typeof app === "object") {  app.rechargerJson('.$id.');} </script>';
+		$flux['data'] .= ' <script type="text/javascript">if ( typeof app_deux === "object") {  app_deux.rechargerJson('.$id.');}if ( typeof app === "object") {  app.rechargerJson('.$id.');} </script>';
 	} else {
-		$flux['data'] .= ' <script type="text/javascript">if ( typeof app === "object") { app.rechargerJson();} </script>';
+		$flux['data'] .= ' <script type="text/javascript">if ( typeof app_deux === "object") { app_deux.rechargerJson();}if ( typeof app === "object") { app.rechargerJson();} </script>';
 	}

 	return $flux;
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,142 +0,0 @@
-const { src, dest, series, parallel, watch } = require('gulp');
-const gulpSass = require('gulp-sass')(require('sass'));
-const sourcemaps = require('gulp-sourcemaps');
-const postcss = require('gulp-postcss');
-const autoprefixer = require('autoprefixer');
-const CombineMQ = require('postcss-combine-media-query');
-const notify = require('gulp-notify');
-const concat = require('gulp-concat');
-const uglify = require('gulp-uglify');
-const babel = require('gulp-babel');
-const rename = require('gulp-regex-rename');
-
-const CSSnano = require('cssnano');
-
-// const unuse = require('postcss-uncss'); //https://github.com/uncss/postcss-uncss
-
-/*
- * SASS$
- */
-function sass() {
-	return src(['css/**/*.scss'])
-		.pipe(sourcemaps.init())
-		.pipe(
-			gulpSass({
-				outputStyle: 'expanded',
-			})
-		)
-		.on('error', (err) => notify().write(err))
-		.pipe(
-			postcss([
-				CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
-				autoprefixer, // ajoute les préfixes vendeurs
-				// CSSnano, // minification
-			])
-		)
-		.pipe(sourcemaps.write('.')) // initialize sourcemaps first
-		.pipe(dest('css'));
-}
-
-/*
- * JS -> concat + babel
- */
-function jsConcatMinif() {
-	console.log('ok');
-	return (
-		src(['./js/a_compresser/*.js'])
-			.pipe(sourcemaps.init())
-			.pipe(
-				babel({
-					presets: ['@babel/preset-env'],
-				})
-			)
-			.pipe(concat('mon_site.min.js', { newLine: ';' }))
-			// SPECIFIQUE DEV: ne pas compacter le JS
-			//		.pipe(uglify())
-			.pipe(sourcemaps.write('.'))
-			.pipe(dest('./js'))
-	);
-}
-
-/*
- * JS -> babel
- */
-function jsBabel() {
-	return src(['js/**/*.es6.js'])
-		.pipe(
-			babel({
-				presets: ['@babel/preset-env'],
-			})
-		)
-		.pipe(rename(/\.es6/, ''))
-		.pipe(dest('./js'));
-}
-
-/*
- * Les Watchers
- */
-function watcherSass() {
-	watch('css/**/*.scss', { ignoreInitial: false }, sass).on('change', function () {
-		notify('CSS -> SCSS ==> OK').write('');
-	});
-}
-
-function watcherJsConcatMinif() {
-	watch('./js/a_compresser/*.js', { ignoreInitial: false }, jsConcatMinif).on('change', function () {
-		notify('JS (concat)  ==> OK').write('');
-	});
-}
-
-function watcherJsBabel() {
-	watch('./js/**/*.es6.js', { ignoreInitial: false }, jsBabel).on('change', function () {
-		notify('JS (babel)  ==> OK').write('');
-	});
-}
-
-/*
- * SVG sprite
- */
-// const gulpSvgSprite = require('gulp-svg-sprite');
-// const config = {
-// 	shape: {
-// 		spacing: {
-// 			box: 'icon',
-// 		},
-// 	},
-// 	mode: {
-// 		symbol: {
-// 			dest: '.',
-// 			sprite: 'sprite_symbol_picto.svg',
-// 		},
-// 	},
-// };
-//
-// function svgSprite() {
-// 	return (
-// 		src('svg/**/*.svg')
-// 			.pipe(gulpSvgSprite(config))
-// 			.on('error', function (error) {
-// 				console.log(error);
-// 			})
-// 			.pipe(dest('img'))
-// 	);
-// }
-
-/*
- * SVG minifier
- */
-// var svgmin = require('gulp-svgmin');
-// function svgMin() {
-// 	return src('svg/*.svg').pipe(svgmin()).pipe(dest('./svgmin'));
-// }
-
-/*
- * Exports des fonctions
- */
-module.exports = {
-	default: parallel(sass, jsConcatMinif, jsBabel),
-	sass: sass,
-	watch: parallel(watcherSass, watcherJsConcatMinif, watcherJsBabel),
-	// sprite: svgSprite,
-	// svgmin: svgMin,
-};
--- a/inc/vite.php
+++ b/inc/vite.php
@ -0,0 +1,147 @@
+<?php
+if (!defined("_ECRIRE_INC_VERSION")) {
+	return;
+}
+
+// Helpers here serve as example. Change to suit your needs.
+const VITE_HOST = "https://localhost:5134";
+
+// For a real-world example check here:
+// https://github.com/wp-bond/bond/blob/master/src/Tooling/Vite.php
+// https://github.com/wp-bond/boilerplate/tree/master/app/themes/boilerplate
+
+// you might check @vitejs/plugin-legacy if you need to support older browsers
+// https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
+
+// Prints all the html entries needed for Vite
+
+function vite(string $entry): string
+{
+	return "\n" .
+		jsTag($entry) .
+		"\n" .
+		jsPreloadImports($entry) .
+		"\n" .
+		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!
+
+	static $exists = null;
+	if ($exists !== null) {
+		return $exists;
+	}
+
+	if (
+		!empty($_SERVER["SERVER_ADDR"]) and
+		in_array($_SERVER["SERVER_ADDR"], ["::1", "127.0.0.1"])
+	) {
+		$handle = curl_init(VITE_HOST . "/" . $entry);
+
+		curl_setopt($handle, CURLOPT_SSL_VERIFYHOST, false);
+		curl_setopt($handle, CURLOPT_SSL_VERIFYPEER, false);
+
+		curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);
+		curl_setopt($handle, CURLOPT_NOBODY, true);
+
+		curl_exec($handle);
+		$error = curl_errno($handle);
+		curl_close($handle);
+
+		return $exists = !$error;
+	} else {
+		return $exists = false;
+	}
+}
+
+// Helpers to print tags
+
+function jsTag(string $entry): string
+{
+	$url = isDev($entry) ? VITE_HOST . "/" . $entry : assetUrl($entry);
+
+	if (!$url) {
+		return "";
+	}
+
+	return '<script type="module" crossorigin src="' . $url . '"></script>';
+}
+
+function jsPreloadImports(string $entry): string
+{
+	if (isDev($entry)) {
+		return "";
+	}
+
+	$res = "";
+	foreach (importsUrls($entry) as $url) {
+		$res .= '<link rel="modulepreload" href="' . $url . '">';
+	}
+	return $res;
+}
+
+function cssTag(string $entry): string
+{
+	// not needed on dev, it's inject by Vite
+	if (isDev($entry)) {
+		return "";
+	}
+
+	$tags = "";
+	foreach (cssUrls($entry) as $url) {
+		$tags .= '<link rel="stylesheet" href="' . $url . '">';
+	}
+	return $tags;
+}
+
+// Helpers to locate files
+
+function getManifest(): array
+{
+	$urlManifest = find_in_path("dist/manifest.json");
+
+	$content = file_get_contents($urlManifest);
+	return json_decode($content, true);
+}
+
+function assetUrl(string $entry): string
+{
+	$manifest = getManifest();
+
+	return isset($manifest[$entry])
+		? find_in_path("dist/" . $manifest[$entry]["file"])
+		: "";
+}
+
+function importsUrls(string $entry): array
+{
+	$urls = [];
+	$manifest = getManifest();
+
+	if (!empty($manifest[$entry]["imports"])) {
+		foreach ($manifest[$entry]["imports"] as $imports) {
+			$urls[] = find_in_path("dist/" . $manifest[$imports]["file"]);
+		}
+	}
+	return $urls;
+}
+
+function cssUrls(string $entry): array
+{
+	$urls = [];
+	$manifest = getManifest();
+
+	if (!empty($manifest[$entry]["css"])) {
+		foreach ($manifest[$entry]["css"] as $file) {
+			$urls[] = find_in_path("dist/" . $file);
+		}
+	}
+	return $urls;
+}
--- a/inclure/gamutable.html
+++ b/inclure/gamutable.html
@ -1,19 +1,37 @@
-<link rel="stylesheet" href="[(#CHEMIN{css/gamutable.css}|compacte|timestamp)]" type="text/css" media="screen" title="no title" charset="utf-8">
-<link rel="stylesheet" href="[(#CHEMIN{css/vue-next-select.css}|compacte|timestamp)]" type="text/css" media="screen" title="no title" charset="utf-8">
+[(#VAL{gamutable.js}|vite)]
+
+<link
+	rel="stylesheet"
+	href="[(#CHEMIN{css/gamutable.css}|compacte|timestamp)]"
+	type="text/css"
+	media="screen"
+	title="no title"
+	charset="utf-8"
+/>
+<link
+	rel="stylesheet"
+	href="[(#CHEMIN{css/vue-next-select.css}|compacte|timestamp)]"
+	type="text/css"
+	media="screen"
+	title="no title"
+	charset="utf-8"
+/>
+
 [(#SET{sort_asc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_asc]})]
 [(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
 [(#SET{pdfuri,#VAL{pdf_gamutable}|generer_url_action{"", 1}})]
 <span class="crayon gamutable-yyyy-nn"></span>
-<div id="app">
+
+<div id="vueGamutable">
+	<BOUCLE_un(CONDITION){si #ENV{apiuri}|oui}>
 		<div class="container_un">
-		<div class="gamutableUn"[ id="(#ENV{id_gamutable})"]>
 			[<span class="h2-like titregamutable">(#ENV{titregamutable})</span>]
-			[(#REM) OLD pour compat]
-			[<span class="titre titreGamutableUn">(#ENV{titreGamutableUn})</span>]
-			<mon-tableau
-				apiuri="[(#ENV{apiuri,spip.php?page=json_gamutable.json})]"
+			<div class="gamutableUn vue-gamutable" [ id="(#ENV{id_gamutable})" ]>
+				<gamu-table
+					apiuri="[(#ENV{apiuri})]"
 					pdfuri="#GET{pdfuri}"
 					:tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}"
+					:afficher="#ENV{afficher,0}"
 					champcsv="#ENV{champcsv,html}"
 					delimitercsv="#ENV{delimitercsv,','}"
 					namecsv="#ENV{namecsv}"
@ -28,23 +46,27 @@
 					stockage="#ENV{stockage,localstorage}"
 					includespip="#ENV{includespip}"
 					ref="montableau"
-				filtrer="#ENV{filtrer}"
-				_id="#ENV{_id}"
-				filtreselect="[(#ENV{filtrerselect})]"
-			></mon-tableau>
+					filtrer="#ENV{rechercher}"
+					:_id="[(#ENV{_id}|intval)]"
+					filtreselect="[(#ENV{filtrer,#ENV{filtrerselect}})]"
+					trier="[(#ENV{trier})]"
+					langpdf="[(#ENV{langpdf})]"
+					:id_auteur="[(#SESSION{id_auteur}|intval)]"
+				></gamu-table>
 			</div>
 		</div>
+	</BOUCLE_un>
+
 	<BOUCLE_deux(CONDITION){si #ENV{apiuri_deux}|oui}>
 		<INCLURE{fond=inclure/separateur_gamutables,env}>
 		<div class="container_deux">
-			<div class="gamutableDeux"[ id="(#ENV{id_gamutable_deux})"]>
 			[<span class="h2-like titregamutable_deux">(#ENV{titregamutable_deux})</span>]
-				[(#REM) OLD pour compat]
-				[<span class="titre titreGamutableDeux">(#ENV{titreGamutableDeux})</span>]
-				<mon-tableau
+			<div class="gamutableDeux vue-gamutable"[ id="(#ENV{id_gamutable_deux})"]>
+				<gamu-table
 					apiuri="[(#ENV{apiuri_deux})]"
 					pdfuri="#GET{pdfuri}"
-					:tparpage="#ENV{tparpage_deux, [10, 20, 50, 'Tous']}"
+					:tparpage="#ENV{tparpage_deux, #ENV{tparpage, [10, 20, 50, 'Tous']}}"
+					:afficher="#ENV{afficher_deux,0}"
 					champcsv="[(#ENV{champcsv_deux, #ENV{champcsv,html}})]"
 					delimitercsv="[(#ENV{delimitercsv_deux, #ENV{delimitercsv,','}})]"
 					namecsv="[(#ENV{namecsv_deux, #ENV{namecsv}})]"
@ -59,35 +81,25 @@
 					stockage="#ENV{stockage,localstorage}"
 					includespip="#ENV{includespip}"
 					ref="montableau_deux"
-					filtrer="#ENV{filtrer}"
-					affichage_id="#ENV{_id}"
-					_id="#ENV{_id}"
+					filtrer="#ENV{rechercher}"
+					:_id="[(#ENV{_id}|intval)]"
 					filtreselect="[(#ENV{filtrerselect_deux})]"
-					></mon-tableau>
+					filtreselect="[(#ENV{filtrer_deux,#ENV{filtrerselect_deux}})]"
+					trier="[(#ENV{trier_deux})]"
+					langpdf="[(#ENV{langpdf})]"
+				></gamu-table>
 			</div>
 		</div>
 	</BOUCLE_deux>
 </div>

-[(#REM)
-	si dans l'env il y a un parametre _id=xxx, il sera récupéré pour selectionner cette ligne dans le gamutable
-	ajout de la classe: select sur le tr
-]
 <script type="text/javascript">
-var nomBlocAjaxReload = '';
+	var nomBlocAjaxReload = "";
 </script>

-[(#CONFIG{gamutable/version_js}|=={dev}|?{
-<script src="[(#CHEMIN{js/vue.js}|timestamp)]" type="text/javascript"></script>
-<script src="[(#CHEMIN{js/localforage.js}|timestamp)]" type="text/javascript"></script>
-<script src="[(#CHEMIN{js/papaparse.js}|timestamp)]" type="text/javascript"></script>
-<script src="[(#CHEMIN{js/vue-next-select.js}|timestamp)]" type="text/javascript"></script>
-<script src="[(#CHEMIN{js/gamutable.js}|timestamp)]" type="text/javascript"></script>
-,
-<script src="[(#CHEMIN{js/vue.min.js}|timestamp)]" type="text/javascript"></script>
 <script src="[(#CHEMIN{js/localforage.min.js}|timestamp)]" type="text/javascript"></script>
-<script src="[(#CHEMIN{js/papaparse.min.js}|timestamp)]" type="text/javascript"></script>
-<script src="[(#CHEMIN{js/vue-next-select.min.js}|timestamp)]" type="text/javascript"></script>
-<script src="[(#CHEMIN{js/gamutable.js}|compacte|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
@ -0,0 +1,48 @@
+/*
+ * Pour parametrer la largeur :
+ *  	Indiquer le data-width sur le lien (exmeple data-width= "90")
+ *		Imposer le style sur le premier bloc englobant dans la madiabox (style="width: [(#ENV{largeur})])
+ */
+jQuery(function () {
+	modalbox();
+
+	function modalbox() {
+		$('body').on('click', '.modalbox, .modalgamutable', function (e) {
+			e.stopPropagation();
+			e.preventDefault();
+			let ts = + new Date()
+			let url = $(this).attr('href');
+			url += '&var_zajax=content';
+			url += '&ts=' + ts;
+			let data = {};
+			let minHeight = $(this).data('minheight');
+			let minWidth = $(this).data('minwidth');
+			if (minHeight !== undefined) {
+				data.minHeight = minHeight;
+			}
+			if (minWidth !== undefined) {
+				data.minWidth = minWidth;
+			}
+			let width = $(this).data('width');
+			if (width !== undefined) {
+				data.width = width;
+				let valeur_reduite = ($(window).width() * width) / 100;
+				url += '&largeur=' + valeur_reduite + 'px';
+			}
+
+			let that = this;
+			data.onShow = () => {
+				if (typeof charger_require !== undefined) {
+					charger_require();
+				}
+
+				if ($(that).hasClass('modalgamutable')) {
+					if (typeof window.gamutable !== 'undefined') {
+						window.gamutable();
+					}
+				}
+			};
+			$.modalbox(url, data);
+		});
+	}
+});
--- a/js/gamutable.es6.js
+++ b/js/gamutable.es6.js
@ -892,7 +892,7 @@ let monTableau = {
 				v-show="this.namecsv"
 				title="Exporter le tableau complet en csv"
 			>
-				<i class="fas fas fa-file-excel" aria-hidden="true" alt="csv"></i>
+				<i class="fas fa fa-file-excel-o" aria-hidden="true" alt="csv"></i>
 			</button>

 			<button class="btn" type="button" @click.stop="genererPDF('table')"
--- a/js/gamutable.js
+++ b/js/gamutable.js
--- a/js/papaparse.js
+++ b/js/papaparse.js
--- a/js/papaparse.min.js
+++ b/js/papaparse.min.js
--- a/js/vue-next-select.js
+++ b/js/vue-next-select.js
--- a/js/vue-next-select.min.js
+++ b/js/vue-next-select.min.js
--- a/js/vue.js
+++ b/js/vue.js
--- a/js/vue.min.js
+++ b/js/vue.min.js
--- a/json_gamutable.json.html
+++ b/json_gamutable.json.html
@ -21,6 +21,9 @@
 	"statut" : "select",
 	"titre": "input"
 },
+"filtreColValeurs" : {
+	"domaines" : [(#LISTE{valeur1, valeur2}|json_encode)]
+},
 "classes":{
 	"titre": "toto",
 	"email":"toto"
@ -31,8 +34,11 @@
 ]
 	"realise": [(#URL_PAGE{toto}|json_encode)]
 },
+"maj": [(#CONFIG{derniere_modif_article}|tsToDate|json_encode)],
+"a_supprimer" : [ <BOUCLE_articlesAsup(ARTICLES){si #ENV{maj}}{staut = poubelle}{','}{maj > #ENV{maj}}> #ID_ARTICLE </BOUCLE_articlesAsup> ]
+
 },
-<BOUCLE_articles(ARTICLES){id_article?}{tout}{','}>
+<BOUCLE_articles(ARTICLES){id_article?}{staut != poubelle}{','}{maj > #ENV{maj,0}}>
 [(#SET{statut,
 	#SET{args,#ID_ARTICLE|concat{-}|concat{#STATUT}}
 	<a class="url_action" data-id="#ID_ARTICLE" href="[(#URL_ACTION_AUTEUR{changer_statut_article,#GET{args}})]">
--- a/localforage.min.js
+++ b/localforage.min.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,42 +1,24 @@
 {
-	"name": "starter_spip",
+	"name": "gamutable",
 	"version": "1.0.0",
-	"description": "les fichiers à intégrer dans un plugin squelette pour avoir ZPIP opérationnel + Knacss 7",
-	"main": "gulpfile.js",
-	"browserslist": [
-		"last 1 version",
-		"> 1%",
-		"IE 10"
-	],
+	"private": true,
 	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
-		"watch": "gulp watch"
-	},
-	"repository": {
-		"type": "git",
-		"url": "ssh://git@git.gamuza.fr:2222/Gamuza/starter_SPIP.git"
-	},
-	"author": "tofulm at Gamuza",
-	"license": "ISC",
-	"devDependencies": {
-		"@babel/core": "^7.11.6",
-		"@babel/preset-env": "^7.11.5",
-		"@types/jquery": "^3.3.31",
-		"gulp": "^4.0.2",
-		"gulp-babel": "^8.0.0",
-		"gulp-concat": "^2.6.1",
-		"gulp-notify": "^4.0.0",
-		"gulp-postcss": "^8.0.0",
-		"gulp-regex-rename": "^0.1.0",
-		"gulp-sass": "^5.1.0",
-		"gulp-sourcemaps": "^3.0.0",
-		"sass": "^1.49.11"
+		"dev": "APP_ENV=development vite",
+		"build": "vite build",
+		"watch": "vite build --watch",
+		"preview": "vite preview"
 	},
 	"dependencies": {
-		"autoprefixer": "^9.8.6",
-		"cssnano": "^5.1.7",
-		"gulp-postcss": "^8.0.0",
-		"gulp-uglify": "^3.0.2",
-		"postcss-combine-media-query": "^1.0.1"
+		"@vitejs/plugin-basic-ssl": "^1.0.1",
+		"typescript": "^5.1.6",
+		"vue": "^3.2.47",
+		"vue-next-select": "^2.10.5",
+		"vue-papa-parse": "^3.1.0"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-vue": "^4.0.0",
+		"@vue/compiler-sfc": "^3.2.47",
+		"vite": "^4.1.1",
+		"vite-plugin-live-reload": "^3.0.1"
 	}
 }
--- a/paquet.xml
+++ b/paquet.xml
@ -1,9 +1,9 @@
 <paquet
 	prefix="gamutable"
 	categorie="outil"
-	version="3.7.5"
-	etat="dev"
-	compatibilite="[3.2.0-dev;4.1.*]"
+	version="4.3.1"
+	etat="test"
+	compatibilite="[3.2.0-dev;4.2.*]"
 	logo="prive/themes/spip/images/gamutable-xx.svg"
 	documentation=""
 >
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -0,0 +1,618 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  '@vitejs/plugin-basic-ssl':
+    specifier: ^1.0.1
+    version: 1.0.1(vite@4.1.1)
+  typescript:
+    specifier: ^5.1.6
+    version: 5.1.6
+  vue:
+    specifier: ^3.2.47
+    version: 3.2.47
+  vue-next-select:
+    specifier: ^2.10.5
+    version: 2.10.5(vue@3.2.47)
+  vue-papa-parse:
+    specifier: ^3.1.0
+    version: 3.1.0(vue@3.2.47)
+
+devDependencies:
+  '@vitejs/plugin-vue':
+    specifier: ^4.0.0
+    version: 4.0.0(vite@4.1.1)(vue@3.2.47)
+  '@vue/compiler-sfc':
+    specifier: ^3.2.47
+    version: 3.2.47
+  vite:
+    specifier: ^4.1.1
+    version: 4.1.1
+  vite-plugin-live-reload:
+    specifier: ^3.0.1
+    version: 3.0.1
+
+packages:
+
+  /@babel/helper-string-parser@7.19.4:
+    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-identifier@7.19.1:
+    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/parser@7.20.7:
+    resolution: {integrity: sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.20.7
+
+  /@babel/types@7.20.7:
+    resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+
+  /@esbuild/android-arm64@0.16.17:
+    resolution: {integrity: sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/android-arm@0.16.17:
+    resolution: {integrity: sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/android-x64@0.16.17:
+    resolution: {integrity: sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/darwin-arm64@0.16.17:
+    resolution: {integrity: sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/darwin-x64@0.16.17:
+    resolution: {integrity: sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.16.17:
+    resolution: {integrity: sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/freebsd-x64@0.16.17:
+    resolution: {integrity: sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-arm64@0.16.17:
+    resolution: {integrity: sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-arm@0.16.17:
+    resolution: {integrity: sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-ia32@0.16.17:
+    resolution: {integrity: sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.16.17:
+    resolution: {integrity: sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-mips64el@0.16.17:
+    resolution: {integrity: sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-ppc64@0.16.17:
+    resolution: {integrity: sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-riscv64@0.16.17:
+    resolution: {integrity: sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-s390x@0.16.17:
+    resolution: {integrity: sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-x64@0.16.17:
+    resolution: {integrity: sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/netbsd-x64@0.16.17:
+    resolution: {integrity: sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/openbsd-x64@0.16.17:
+    resolution: {integrity: sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/sunos-x64@0.16.17:
+    resolution: {integrity: sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/win32-arm64@0.16.17:
+    resolution: {integrity: sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/win32-ia32@0.16.17:
+    resolution: {integrity: sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/win32-x64@0.16.17:
+    resolution: {integrity: sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@vitejs/plugin-basic-ssl@1.0.1(vite@4.1.1):
+    resolution: {integrity: sha512-pcub+YbFtFhaGRTo1832FQHQSHvMrlb43974e2eS8EKleR3p1cDdkJFPci1UhwkEf1J9Bz+wKBSzqpKp7nNj2A==}
+    engines: {node: '>=14.6.0'}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0
+    dependencies:
+      vite: 4.1.1
+    dev: false
+
+  /@vitejs/plugin-vue@4.0.0(vite@4.1.1)(vue@3.2.47):
+    resolution: {integrity: sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.1.1
+      vue: 3.2.47
+    dev: true
+
+  /@vue/compiler-core@3.2.47:
+    resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==}
+    dependencies:
+      '@babel/parser': 7.20.7
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+
+  /@vue/compiler-dom@3.2.47:
+    resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
+    dependencies:
+      '@vue/compiler-core': 3.2.47
+      '@vue/shared': 3.2.47
+
+  /@vue/compiler-sfc@3.2.47:
+    resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
+    dependencies:
+      '@babel/parser': 7.20.7
+      '@vue/compiler-core': 3.2.47
+      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-ssr': 3.2.47
+      '@vue/reactivity-transform': 3.2.47
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+      postcss: 8.4.21
+      source-map: 0.6.1
+
+  /@vue/compiler-ssr@3.2.47:
+    resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/shared': 3.2.47
+
+  /@vue/reactivity-transform@3.2.47:
+    resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
+    dependencies:
+      '@babel/parser': 7.20.7
+      '@vue/compiler-core': 3.2.47
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+
+  /@vue/reactivity@3.2.47:
+    resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==}
+    dependencies:
+      '@vue/shared': 3.2.47
+
+  /@vue/runtime-core@3.2.47:
+    resolution: {integrity: sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==}
+    dependencies:
+      '@vue/reactivity': 3.2.47
+      '@vue/shared': 3.2.47
+
+  /@vue/runtime-dom@3.2.47:
+    resolution: {integrity: sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==}
+    dependencies:
+      '@vue/runtime-core': 3.2.47
+      '@vue/shared': 3.2.47
+      csstype: 2.6.21
+
+  /@vue/server-renderer@3.2.47(vue@3.2.47):
+    resolution: {integrity: sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==}
+    peerDependencies:
+      vue: 3.2.47
+    dependencies:
+      '@vue/compiler-ssr': 3.2.47
+      '@vue/shared': 3.2.47
+      vue: 3.2.47
+
+  /@vue/shared@3.2.47:
+    resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
+
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
+  /binary-extensions@2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /braces@3.0.2:
+    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.0.1
+    dev: true
+
+  /chokidar@3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /csstype@2.6.21:
+    resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+
+  /esbuild@0.16.17:
+    resolution: {integrity: sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.16.17
+      '@esbuild/android-arm64': 0.16.17
+      '@esbuild/android-x64': 0.16.17
+      '@esbuild/darwin-arm64': 0.16.17
+      '@esbuild/darwin-x64': 0.16.17
+      '@esbuild/freebsd-arm64': 0.16.17
+      '@esbuild/freebsd-x64': 0.16.17
+      '@esbuild/linux-arm': 0.16.17
+      '@esbuild/linux-arm64': 0.16.17
+      '@esbuild/linux-ia32': 0.16.17
+      '@esbuild/linux-loong64': 0.16.17
+      '@esbuild/linux-mips64el': 0.16.17
+      '@esbuild/linux-ppc64': 0.16.17
+      '@esbuild/linux-riscv64': 0.16.17
+      '@esbuild/linux-s390x': 0.16.17
+      '@esbuild/linux-x64': 0.16.17
+      '@esbuild/netbsd-x64': 0.16.17
+      '@esbuild/openbsd-x64': 0.16.17
+      '@esbuild/sunos-x64': 0.16.17
+      '@esbuild/win32-arm64': 0.16.17
+      '@esbuild/win32-ia32': 0.16.17
+      '@esbuild/win32-x64': 0.16.17
+
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  /fill-range@7.0.1:
+    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+    dev: true
+
+  /fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /function-bind@1.1.1:
+    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+
+  /glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
+
+  /has@1.0.3:
+    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
+    engines: {node: '>= 0.4.0'}
+    dependencies:
+      function-bind: 1.1.1
+
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+    dev: true
+
+  /is-core-module@2.11.0:
+    resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
+    dependencies:
+      has: 1.0.3
+
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+    dev: true
+
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+    dev: true
+
+  /magic-string@0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+    dependencies:
+      sourcemap-codec: 1.4.8
+
+  /nanoid@3.3.4:
+    resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /papaparse@5.3.2:
+    resolution: {integrity: sha512-6dNZu0Ki+gyV0eBsFKJhYr+MdQYAzFUGlBMNj3GNrmHxmz1lfRa24CjFObPXtjcetlOv5Ad299MhIK0znp3afw==}
+    dev: false
+
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  /picocolors@1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    dev: true
+
+  /postcss@8.4.21:
+    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.4
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
+
+  /resolve@1.22.1:
+    resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.11.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  /rollup@3.14.0:
+    resolution: {integrity: sha512-o23sdgCLcLSe3zIplT9nQ1+r97okuaiR+vmAPZPTDYB7/f3tgWIYNyiQveMsZwshBT0is4eGax/HH83Q7CG+/Q==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  /source-map-js@1.0.2:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+    engines: {node: '>=0.10.0'}
+
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  /sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  /to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+    dev: true
+
+  /typescript@5.1.6:
+    resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: false
+
+  /vite-plugin-live-reload@3.0.1:
+    resolution: {integrity: sha512-ERZTRHnU50R7nRfKVMCNrkSyXIcxKv87INWmPPmnOF3fcaOKFbLQ5zdO6hfPb6bl03fmENtMByfz0OiEAsFF+g==}
+    dependencies:
+      chokidar: 3.5.3
+      picocolors: 1.0.0
+    dev: true
+
+  /vite@4.1.1:
+    resolution: {integrity: sha512-LM9WWea8vsxhr782r9ntg+bhSFS06FJgCvvB0+8hf8UWtvaiDagKYWXndjfX6kGl74keHJUcpzrQliDXZlF5yg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.16.17
+      postcss: 8.4.21
+      resolve: 1.22.1
+      rollup: 3.14.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  /vue-next-select@2.10.5(vue@3.2.47):
+    resolution: {integrity: sha512-O77bdbp2wj/Dkpd8XFv21EYXI8UtqgTxnKBsycCd2pUe4SAxKsT1h3MT+b7tuyGQV5udMpBYaUE445Z1VdHyUw==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
+  /vue-papa-parse@3.1.0(vue@3.2.47):
+    resolution: {integrity: sha512-5YdF3Dtf49EGfaz3+IgIpUw9yYuvV3HekZkob6jrK/Ffz1aCrWjevtcQByKxrNtK7RAL39B0ca93bogKuiQQKg==}
+    peerDependencies:
+      vue: ^2.6.0 || >=3.0.0
+    dependencies:
+      papaparse: 5.3.2
+      vue: 3.2.47
+    dev: false
+
+  /vue@3.2.47:
+    resolution: {integrity: sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-sfc': 3.2.47
+      '@vue/runtime-dom': 3.2.47
+      '@vue/server-renderer': 3.2.47(vue@3.2.47)
+      '@vue/shared': 3.2.47
--- a/prive/themes/spip/images/gamutable-xx.svg
+++ b/prive/themes/spip/images/gamutable-xx.svg
@ -17,17 +17,6 @@
   width="128"
   height="128"
   inkscape:version="0.92.4 5da689c313, 2019-01-14">
-  <metadata
-     id="metadata4664">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
  <defs
     id="defs4662" />
  <sodipodi:namedview
--- a/src/components/gamuTable.vue
+++ b/src/components/gamuTable.vue
--- a/src/components/helpers.js
+++ b/src/components/helpers.js
@ -0,0 +1,83 @@
+function trouver_index(table, id) {
+	let i = -1;
+	table.forEach((ligne, index) => {
+		if (ligne.html.id === parseInt(id)) {
+			i = index;
+		}
+	});
+	return i;
+}
+
+function recupJson(d) {
+	try {
+		return JSON.parse(d);
+	} catch (e) {
+		console.log("erreur recupJson ", e);
+		return false;
+	}
+}
+
+function navigate(href, newTab) {
+	let a = document.createElement("a");
+	a.href = href;
+	if (newTab) {
+		a.setAttribute("target", "_blank");
+	}
+	a.click();
+}
+
+function ordonnerSelect(a, b) {
+	// attention ! le test d'égalité en == et non pas === est voulu tel quel...
+	if (
+		(Number.isInteger(a) || parseInt(a) == a) &&
+		(Number.isInteger(b) || parseInt(b) == b)
+	) {
+		return parseInt(a) - parseInt(b);
+	} else {
+		let x = toString(a).toLowerCase();
+		let y = toString(b).toLowerCase();
+		if (x < y) {
+			return -1;
+		}
+		if (x > y) {
+			return 1;
+		}
+		return 0;
+	}
+}
+
+const orderBy = (arr, props, orders, champ) =>
+	arr.sort((a, b) =>
+		props.reduce((acc, prop, i) => {
+			if (acc === 0) {
+				let [p1, p2] =
+					orders && orders[i] === "desc"
+						? [b[champ][prop], a[champ][prop]]
+						: [a[champ][prop], b[champ][prop]];
+				// passe en lowercase les String
+				p1 = typeof p1 === "string" ? p1.toLowerCase() : p1;
+				p2 = typeof p2 === "string" ? p2.toLowerCase() : p2;
+
+				// Gestion du format de date
+				// transforme 03/11/2000 en 20001103
+				let re = /^(\d{2})\/(\d{2})\/(\d{2,4})$/;
+
+				if (typeof p1 !== "number") {
+					let r1 = p1.match(re);
+					if (Array.isArray(r1)) {
+						p1 = r1[3] + r1[2] + r1[1];
+					}
+
+					let r2 = p2.match(re);
+					if (Array.isArray(r2)) {
+						p2 = r2[3] + r2[2] + r2[1];
+					}
+				}
+
+				acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
+			}
+			return acc;
+		}, 0)
+	);
+
+export { orderBy, ordonnerSelect, navigate, recupJson, trouver_index };
--- a/src/gamutable.js
+++ b/src/gamutable.js
@ -0,0 +1,85 @@
+// https://vitejs.dev/config/#build-polyfillmodulepreload
+import 'vite/modulepreload-polyfill';
+
+// Vue
+import {createApp} from 'vue';
+
+// if importing all is too much you can always do it manually
+import GamuTable from './components/gamuTable.vue';
+import VuePapaParse from 'vue-papa-parse';
+
+const components = {
+	GamuTable,
+};
+
+gamutable();
+function gamutable() {
+	let i = 1;
+	for (const el of document.getElementsByClassName('vue-gamutable')) {
+		if (i === 1) {
+			window.app = createApp({
+				components,
+				mounted() {
+					app.rechargerJson = this.$refs.montableau.rechargerJson;
+				},
+			});
+			app.use(VuePapaParse);
+			app.provide('$papa', app.config.globalProperties.$papa);
+			app.mount(el);
+		} else if (i === 2) {
+			window.app_deux = createApp({
+				components,
+				mounted() {
+					app_deux.rechargerJson = this.$refs.montableau_deux.rechargerJson;
+				},
+			});
+			app_deux.use(VuePapaParse);
+			app_deux.provide('$papa', app_deux.config.globalProperties.$papa);
+			app_deux.mount(el);
+		}
+		i++;
+	}
+}
+// le chargement de gamutable passe dans une variable globale
+// permettant de forcer son rechargement à l'ouverture du modalbox
+// via la classe : modalgamutable
+window.gamutable = gamutable
+
+$('#vueGamutable').on('click', '.url_action, .url_action--ss_css', function (e) {
+	e.preventDefault();
+	e.stopPropagation();
+	let confirmation = $(this).data('confirm');
+	if (confirmation !== undefined) {
+		if (!confirm(confirmation)) {
+			return;
+		}
+	}
+	let url = $(this).attr('href');
+	let id = $(this).data('id');
+	// passer en refresh animé une éventuelle icone
+	if ($(this).has('i.icon, i.fa')) {
+		$(this).find('i.icon, i.fa').eq(0).replaceWith('<i class="fa fa-refresh fa-spin"></i>');
+	}
+	let nomBlocAjaxReload = $(this).data('ajaxreload');
+	$.ajax({
+		url: url,
+		dataType: 'json',
+		async: true,
+	}).done(function (retour) {
+		if (!$.isEmptyObject(retour) && !$.isEmptyObject(retour.message_erreur)) {
+			alert(retour.message_erreur);
+		} else {
+			if (parseInt(id) > 0) {
+				app.rechargerJson(id);
+			} else {
+				app.rechargerJson('maj');
+			}
+			if (nomBlocAjaxReload !== undefined) {
+				ajaxReload(nomBlocAjaxReload, {
+					args: {id},
+					callback: function () {},
+				});
+			}
+		}
+	});
+});
--- a/svg/sort_asc.svg
+++ b/svg/sort_asc.svg
@ -1,14 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="sort_asc" width="93.335" height="54.545" data-name="Layer 1" version="1.1" viewBox="0 0 93.335 54.545" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
- <metadata>
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>sort</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title>sort</title>
 <path id="sort_asc" d="m7.8426 54.545a7.84 7.84 0 0 1-5.55-13.38l38.83-38.87a7.81 7.81 0 0 1 11.06 0l38.86 38.87a7.84 7.84 0 0 1-5.55 13.38z"/>
 </svg>
--- a/svg/sort_desc.svg
+++ b/svg/sort_desc.svg
@ -1,14 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="sort_desc" width="93.335" height="54.545" data-name="Layer 1" version="1.1" viewBox="0 0 93.335 54.545" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
- <metadata>
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>sort</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
 <title>sort</title>
 <path id="sort_dsc" d="m85.493 4.2077e-7a7.84 7.84 0 0 1 5.55 13.38l-38.83 38.87a7.81 7.81 0 0 1-11.06 0l-38.86-38.87a7.84 7.84 0 0 1 5.55-13.38z"/>
 </svg>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,55 @@
+import { defineConfig, splitVendorChunkPlugin } 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";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [
+		vue({
+			template: {
+				transformAssetUrls: {
+					base: "plugins/gamutable",
+					includeAbsolute: false,
+				},
+			},
+		}),
+		liveReload([__dirname + "/**/*.php", __dirname + "/**/*.html"]),
+		splitVendorChunkPlugin(),
+		// basicSsl(),
+	],
+
+	// config
+	root: "src",
+	base: process.env.APP_ENV === "development" ? "/" : "/dist/",
+
+	build: {
+		outDir: "../dist",
+		emptyOutDir: true,
+		manifest: true,
+
+		rollupOptions: {
+			input: path.resolve(__dirname, "src/gamutable.js"),
+		},
+	},
+
+	server: {
+		strictPort: true,
+		port: 5134,
+		https: {
+			key: fs.readFileSync("certs/vite.key.pem"),
+			cert: fs.readFileSync("certs/vite.crt.pem"),
+		},
+		cors: true,
+	},
+
+	// required for in-browser template compilation
+	// https://vuejs.org/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation
+	resolve: {
+		alias: {
+			vue: "vue/dist/vue.esm-bundler.js",
+		},
+	},
+});