les fonctionnalités d'affichage semble ok,

TODO : le retour du form + crayons

inclure/gamutable.html

@@ -1,4 +1,4 @@
-[(#REM) chargement de vue ] [(#VAL{loadgamutable.js}|vite)] [(#REM)
+[(#REM) chargement de vue ] [(#VAL{gamutable.js}|vite)] [(#REM) ]
 <link
 	rel="stylesheet"
 	href="[(#CHEMIN{css/gamutable.css}|compacte|timestamp)]"
@@ -15,10 +15,12 @@
 	title="no title"
 	charset="utf-8"
 />
-] [(#SET{sort_asc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_asc]})]
+
+[(#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>
+
 [(#ENV{apiuri,spip.php?page=json_gamutable.json})]
 <div id="app">
 	<div class="container_un">

package.json

@@ -10,7 +10,9 @@
 	},
 	"dependencies": {
 		"@vitejs/plugin-basic-ssl": "^1.0.1",
-		"vue": "^3.2.45"
+		"vue": "^3.2.45",
+		"vue-next-select": "^2.10.5",
+		"vue-papa-parse": "^3.1.0"
 	},
 	"devDependencies": {
 		"@vitejs/plugin-vue": "^3.2.0",

pnpm-lock.yaml

@@ -7,10 +7,14 @@ specifiers:
   vite: ^3.2.4
   vite-plugin-live-reload: ^3.0.1
   vue: ^3.2.45
+  vue-next-select: ^2.10.5
+  vue-papa-parse: ^3.1.0
 
 dependencies:
   '@vitejs/plugin-basic-ssl': 1.0.1_vite@3.2.5
   vue: 3.2.45
+  vue-next-select: 2.10.5_vue@3.2.45
+  vue-papa-parse: 3.1.0_vue@3.2.45
 
 devDependencies:
   '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.45
@@ -456,6 +460,10 @@ packages:
     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==}
 
@@ -563,6 +571,24 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
+  /vue-next-select/2.10.5_vue@3.2.45:
+    resolution: {integrity: sha512-O77bdbp2wj/Dkpd8XFv21EYXI8UtqgTxnKBsycCd2pUe4SAxKsT1h3MT+b7tuyGQV5udMpBYaUE445Z1VdHyUw==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.2.45
+    dev: false
+
+  /vue-papa-parse/3.1.0_vue@3.2.45:
+    resolution: {integrity: sha512-5YdF3Dtf49EGfaz3+IgIpUw9yYuvV3HekZkob6jrK/Ffz1aCrWjevtcQByKxrNtK7RAL39B0ca93bogKuiQQKg==}
+    peerDependencies:
+      vue: ^2.6.0 || >=3.0.0
+    dependencies:
+      papaparse: 5.3.2
+      vue: 3.2.45
+    dev: false
+
   /vue/3.2.45:
     resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==}
     dependencies:

src/gamuTable.vue

@@ -1,78 +0,0 @@
-<template>coucou {{ apiuri }}</template>
-
-<script setup>
-const props = defineProps({
-	tparpage: {
-		type: Array,
-		default: function () {
-			return [10, 20, 50, "Tous"];
-		},
-	},
-	apiuri: {
-		type: String,
-		required: true,
-	},
-	pdfuri: {
-		type: String,
-	},
-	namepdf: {
-		type: String,
-	},
-	fichierpdf: {
-		type: String,
-	},
-	argpdf: {
-		type: String,
-	},
-	champcsv: {
-		type: String,
-	},
-	delimitercsv: {
-		type: String,
-	},
-	namecsv: {
-		type: String,
-	},
-	url_sort_asc: {
-		type: String,
-	},
-	url_sort_desc: {
-		type: String,
-	},
-	urlvuebloc: {
-		type: String,
-	},
-	vueblocdefaut: {
-		type: String,
-		default: "tableau",
-	},
-	filtrecolmulti: {
-		type: String,
-	},
-	nomblocajaxreload: {
-		type: String,
-	},
-	stockage: {
-		type: String,
-	},
-	includespip: {
-		type: String,
-	},
-	filtrer: {
-		type: String,
-	},
-	_id: {
-		type: String,
-	},
-	filtreselect: {
-		type: String,
-	},
-});
-console.log("props.apiuri = ", props.apiuri);
-</script>
-
-<style scoped>
-a {
-	color: #42b983;
-}
-</style>

src/gamutable.js

@@ -0,0 +1,25 @@
+// 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,
+};
+
+// instantiate the Vue apps
+// Note our lookup is a wrapping div with .vue-app class
+
+for (const el of document.getElementsByClassName("vue-gamutable")) {
+	let app = createApp({
+		template: el.innerHTML,
+		components,
+	});
+	app.use(VuePapaParse);
+	app.provide("$papa", app.config.globalProperties.$papa);
+	app.mount(el);
+}

src/loadgamutable.js

@@ -1,21 +0,0 @@
-// 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 './gamuTable.vue';
-const components = {
-	GamuTable,
-};
-
-// instantiate the Vue apps
-// Note our lookup is a wrapping div with .vue-app class
-
-for (const el of document.getElementsByClassName('vue-gamutable')) {
-	createApp({
-		template: el.innerHTML,
-		components,
-	}).mount(el);
-}

vite.config.js

@@ -1,9 +1,9 @@
-import { defineConfig, splitVendorChunkPlugin } from 'vite';
+import { defineConfig, splitVendorChunkPlugin } from "vite";
-import vue from '@vitejs/plugin-vue';
+import vue from "@vitejs/plugin-vue";
-import liveReload from 'vite-plugin-live-reload';
+import liveReload from "vite-plugin-live-reload";
-import path from 'path';
+import path from "path";
-import fs from 'fs';
+import fs from "fs";
-import basicSsl from '@vitejs/plugin-basic-ssl';
+import basicSsl from "@vitejs/plugin-basic-ssl";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,27 +11,27 @@ export default defineConfig({
 		vue({
 			template: {
 				transformAssetUrls: {
-					base: 'plugins/logiciel_base',
+					base: "plugins/gamutable",
 					includeAbsolute: false,
 				},
 			},
 		}),
-		liveReload([__dirname + '/**/*.php', __dirname + '/**/*.html']),
+		liveReload([__dirname + "/**/*.php", __dirname + "/**/*.html"]),
 		splitVendorChunkPlugin(),
 		// basicSsl(),
 	],
 
 	// config
-	root: 'src',
+	root: "src",
-	base: process.env.APP_ENV === 'development' ? '/' : '/dist/',
+	base: process.env.APP_ENV === "development" ? "/" : "/dist/",
 
 	build: {
-		outDir: '../dist',
+		outDir: "../dist",
 		emptyOutDir: true,
 		manifest: true,
 
 		rollupOptions: {
-			input: path.resolve(__dirname, 'src/loadgamutable.js'),
+			input: path.resolve(__dirname, "src/gamutable.js"),
 		},
 	},
 
@@ -39,8 +39,8 @@ export default defineConfig({
 		strictPort: true,
 		port: 5134,
 		https: {
-			key: fs.readFileSync('certs/vite.key.pem'),
+			key: fs.readFileSync("certs/vite.key.pem"),
-			cert: fs.readFileSync('certs/vite.crt.pem'),
+			cert: fs.readFileSync("certs/vite.crt.pem"),
 		},
 		cors: true,
 	},
@@ -49,7 +49,7 @@ export default defineConfig({
 	// https://vuejs.org/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation
 	resolve: {
 		alias: {
-			vue: 'vue/dist/vue.esm-bundler.js',
+			vue: "vue/dist/vue.esm-bundler.js",
 		},
 	},
 });