Add PrimeVue and Select component

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "dayjs": "^1.11.13",
         "pinia": "^2.1.7",
+        "primevue": "^4.0.6",
         "slugify": "^1.6.6",
         "vue": "^3.5.1"
       },
@@ -434,6 +435,56 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
+    "node_modules/@primeuix/styled": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
+      "integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
+      "integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.6.tgz",
+      "integrity": "sha512-IVIq2U++usVC8ghA/F6JTgWhsLTn8OQxqwKGBAdO20i8z9fjKOOzqITEemqwjguzZL5MOLDCh8KR4KADduZYgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.6.tgz",
+      "integrity": "sha512-ijGts+VpZcdMm+U/g3lC54b6TSCt6xfeOrUF1Ahq6px5jOvd0xrwXbJfQhT+4SNga1Iva1xOqDfuNtLPRo81zw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.6"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.21.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz",
@@ -942,6 +993,21 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/primevue": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.6.tgz",
+      "integrity": "sha512-q7LhlHq1Hwda1uFxVq1GbDdwyinGZRP00uYtqYNVIBz7OnmH1C7cwY2+MINw5HfrnJTubiw08SdkErTnu+mRrg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.6",
+        "@primevue/icons": "4.0.6"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.21.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.2.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "dayjs": "^1.11.13",
     "pinia": "^2.1.7",
+    "primevue": "^4.0.6",
     "slugify": "^1.6.6",
     "vue": "^3.5.1"
   },

src/components/inspirations/Selector.vue

@@ -8,18 +8,18 @@
     "
   >
     <label for="inspirations">Choisir une inspiration</label>
-    <select id="inspirations">
+    <Select id="inspirations" v-model="selectedInspiration" :options="inspirations" optionLabel="name" optionValue="value"  class="" />
-      <!-- TODO: dynamiser les options en bouclant sur les inspirations -->
-      <option value="shape-of-nature" selected>Shape of Nature</option>
-      <option value="inspiration-slug">Inspiration Title</option>
-    </select>
     </div>
 </template>
 
 <script setup>
-const { inspiration } = defineProps({
+import { ref } from "vue";
-  inspiration: Object,
+
-});
+const selectedInspiration = ref();
+const inspirations = ref([
+    { name: 'Shape of Nature', value: 'shape-of-nature', selected: true },
+    { name: 'Inspiration Title', value: 'inspiration-title' }
+]);
 </script>
 
 <style scoped>

src/main.js

@@ -2,9 +2,15 @@ import { createApp } from "vue";
 import "./assets/css/index.css";
 import App from "./App.vue";
 import { createPinia } from "pinia";
+import PrimeVue from "primevue/config";
+import Select from "primevue/select";
 
 const app = createApp(App);
 const pinia = createPinia();
 
 app.use(pinia);
+app.use(PrimeVue, {
+  unstyled: true
+});
+app.component('Select', Select);
 app.mount("#app");