feat(examples): update primevue to v4

examples/b2b-quote-management/package.json

@@ -11,11 +11,12 @@
     "generate-types": "shopware-api-gen generate --apiType=store"
   },
   "dependencies": {
+    "@primevue/themes": "^4.0.0",
     "@shopware-pwa/composables-next": "canary",
     "@shopware-pwa/helpers-next": "canary",
     "@shopware/api-client": "canary",
     "js-cookie": "3.0.5",
-    "primevue": "3.52.0",
+    "primevue": "4.0.0",
     "vue": "3.4.31",
     "vue-router": "4.4.0"
   },

examples/b2b-quote-management/src/assets/main.css

@@ -0,0 +1,29 @@
+html {
+    font-size: 14px;
+}
+
+body {
+    min-height: 100vh;
+    max-width: 100vw;
+    color: #fff;
+    background: radial-gradient(135.35% 140.89% at 107.72% -60.35%, rgba(65, 184, 131, 0.4) 0%, rgba(5, 4, 31, 0) 100%),
+        #121116;
+    margin: 0 auto;
+    width: 100%;
+    font-size: 14px;
+    font-weight: 400;
+    margin: 0;
+    line-height: 1.6;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
+        "Droid Sans", "Helvetica Neue", sans-serif;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.main-wrapper {
+    background-image: url("background.svg");
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: contain;
+}

examples/b2b-quote-management/src/components/Quote.vue

@@ -34,7 +34,7 @@ const handleRequestQuote = async () => {
 };
 
 const activeQuote = computed(() => {
-  return quote.value.stateMachineState?.technicalName === "replied";
+  return quote?.value.stateMachineState?.technicalName === "replied";
 });
 const refreshQuote = async () => {
   quote.value = await getQuote(route.params.id as string);
@@ -102,7 +102,7 @@ const refreshQuote = async () => {
               </td>
             </tr>
             <tr
-              v-for="taxRule in quote.price.calculatedTaxes"
+              v-for="taxRule in quote?.price.calculatedTaxes"
               :key="taxRule.tax"
             >
               <td class="py-3 px-4 text-left font-medium text-gray-600">

examples/b2b-quote-management/src/components/QuotesTable.vue

@@ -51,7 +51,7 @@ onBeforeMount(async () => {
           ></th>
         </tr>
       </thead>
-      <tbody class="bg-white divide-y divide-gray-200">
+      <tbody class="divide-y divide-gray-200">
         <tr v-for="quote in quotesList" :key="quote.id">
           <td class="px-6 py-4 whitespace-nowrap">{{ quote.quoteNumber }}</td>
           <td class="px-6 py-4 whitespace-nowrap">{{ quote.createdAt }}</td>

examples/b2b-quote-management/src/components/RequestQuote.vue

@@ -8,8 +8,11 @@ import {
 import Textarea from "primevue/textarea";
 import Button from "primevue/button";
 import Stepper from "primevue/stepper";
-import StepperPanel from "primevue/stepperpanel";
+import StepPanels from "primevue/steppanels";
+import StepList from "primevue/steplist";
 import Message from "primevue/message";
+import StepPanel from "primevue/steppanel";
+import Step from "primevue/step";
 
 const product = ref();
 const requestComment = ref("");
@@ -33,10 +36,14 @@ onBeforeMount(async () => {
 });
 </script>
 <template>
-  <Stepper>
-    <StepperPanel header="Add product to the basket">
-      <template #content="{ nextCallback }">
-        <Message severity="warn" :closable="false"
+  <Stepper value="1">
+    <StepList>
+      <Step value="1">Add product to the basket</Step>
+      <Step value="2">Request quote</Step>
+    </StepList>
+    <StepPanels>
+      <StepPanel v-slot="{ activateCallback }" value="1">
+        <Message class="mb-5" severity="warn" :closable="false"
           >Quote can be requested only for not empty cart</Message
         >
         <template v-if="!cartItems.length">
@@ -97,13 +104,11 @@ onBeforeMount(async () => {
             label="Next"
             icon="pi pi-arrow-right"
             iconPos="right"
-            @click="nextCallback"
+            @click="activateCallback('2')"
           />
         </div>
-      </template>
-    </StepperPanel>
-    <StepperPanel header="Request quote">
-      <template #content="{ prevCallback }">
+      </StepPanel>
+      <StepPanel v-slot="{ activateCallback }" value="2">
         <Message severity="info" :closable="false"
           >You can add comment to your requested quote</Message
         >
@@ -124,10 +129,10 @@ onBeforeMount(async () => {
             label="Back"
             severity="secondary"
             icon="pi pi-arrow-left"
-            @click="prevCallback"
+            @click="activateCallback('1')"
           />
         </div>
-      </template>
-    </StepperPanel>
+      </StepPanel>
+    </StepPanels>
   </Stepper>
 </template>

examples/b2b-quote-management/src/main.ts

@@ -7,8 +7,9 @@ import Quote from "./components/Quote.vue";
 import QuotesTable from "./components/QuotesTable.vue";
 import RequestQuote from "./components/RequestQuote.vue";
 import PrimeVue from "primevue/config";
-import "primevue/resources/themes/aura-light-green/theme.css";
+import Aura from "@primevue/themes/aura";
 import "virtual:uno.css";
+import "./assets/main.css";
 
 const routes = [
   { path: "/", component: App, name: "home" },
@@ -28,5 +29,9 @@ const shopwareContext = createShopwareContext(app, {});
 app.provide("apiClient", apiClient);
 app.use(shopwareContext);
 app.use(router);
-app.use(PrimeVue);
+app.use(PrimeVue, {
+  theme: {
+    preset: Aura,
+  },
+});
 app.mount("#app");