Visual demo fixes

doc/chart/ChartJSDoc.vue

@@ -11,7 +11,8 @@ export default {
         return {
             code: {
                 basic: `
-npm install chart.js`
+npm install chart.js
+`
             }
         };
     }

doc/confirmdialog/ConfirmationServiceDoc.vue

@@ -19,13 +19,15 @@ import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
 const app = createApp(App);
-app.use(ConfirmationService);`
+app.use(ConfirmationService);
+`
             },
             code2: {
                 basic: `
 import { useConfirm } from "primevue/useconfirm";
 
-const confirm = useConfirm();`
+const confirm = useConfirm();
+`
             }
         };
     }

doc/confirmpopup/ConfirmationServiceDoc.vue

@@ -19,13 +19,15 @@ import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
 const app = createApp(App);
-app.use(ConfirmationService);`
+app.use(ConfirmationService);
+`
             },
             code2: {
                 basic: `
 import { useConfirm } from "primevue/useconfirm";
 
-const confirm = useConfirm();`
+const confirm = useConfirm();
+`
             }
         };
     }

doc/dataview/PrimeFlexDoc.vue

@@ -11,7 +11,9 @@ export default {
     data() {
         return {
             code1: {
-                basic: `npm install primeflex`
+                basic: `
+npm install primeflex
+`
             },
             code2: {
                 basic: `

doc/dynamicdialog/CloseDialogDoc.vue

@@ -10,14 +10,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `export default {
+                basic: `
+export default {
     inject: ['dialogRef'],
     methods:{
         closeDialog() {
             this.dialogRef.close();
         }
     }
-}`,
+}
+`,
                 options: `
 export default {
     inject: ['dialogRef'],

doc/dynamicdialog/DialogServiceDoc.vue

@@ -19,13 +19,15 @@ import {createApp} from 'vue';
 import DialogService from 'primevue/dialogservice';
 
 const app = createApp(App);
-app.use(DialogService);`
+app.use(DialogService);
+`
             },
             code2: {
                 basic: `
 import { useDialog } from 'primevue/usedialog';
 
-const dialog = useDialog();`,
+const dialog = useDialog();
+`,
                 options: `const dialogRef = this.$dialog;`,
                 composition: `
 import { useDialog } from 'primevue/usedialog';

doc/dynamicdialog/EmitsDoc.vue

@@ -22,7 +22,8 @@ this.$dialog.open(ProductListDemo, {
             console.log(e);  // {user: 'primetime'}
         }
     },
-};`
+};
+`
             },
             code2: {
                 basic: `

doc/dynamicdialog/OpenDialogDoc.vue

@@ -19,7 +19,8 @@ export default {
             this.$dialog.open(ProductListDemo, {});
         }
     }
-}`,
+}
+`,
                 options: `
 import ProductListDemo from './ProductListDemo';
 

doc/dynamicdialog/PassingDataDoc.vue

@@ -21,15 +21,18 @@ this.$dialog.open(ProductListDemo, {
     data: {
         user: 'primetime'
     }
-};`
+};
+`
             },
             code2: {
-                basic: `export default {
+                basic: `
+export default {
     inject: ['dialogRef'],
     mounted:{
         const params = this.dialogRef.data; // {user: 'primetime'}
     }
-}`
+}
+`
             },
             code3: {
                 basic: `
@@ -37,17 +40,20 @@ this.$dialog.open(ProductListDemo, {
     onClose(options) {
         const callbackParams = options.data; // {id: 12}
     }
-);`
+);
+`
             },
             code4: {
-                basic: `export default {
+                basic: `
+export default {
     inject: ['dialogRef'],
     methods:{
         closeDialog() {
             this.dialogRef.close({id: 12});
         }
     }
-}`
+}
+`
             }
         };
     }

doc/editor/QuillDoc.vue

@@ -10,7 +10,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `npm install quill`
+                basic: `
+npm install quill
+`
             }
         };
     }

doc/focustrap/ImportDoc.vue

@@ -11,7 +11,8 @@ export default {
                 basic: `
 import FocusTrap from 'primevue/focustrap';
 
-app.directive('focustrap', FocusTrap);`
+app.directive('focustrap', FocusTrap);
+`
             }
         };
     }

doc/message/TemplateDoc.vue

@@ -19,7 +19,7 @@
         </div>
         <DocSectionCode :code="code1" />
 
-        <p><i>container</i> templating allows customizing the Dialog component.</p>
+        <p><i>container</i> templating allows customizing the Message component.</p>
         <div class="card">
             <Message style="border: none">
                 <template #container>

doc/ripple/ConfigurationDoc.vue

@@ -13,7 +13,8 @@ export default {
                 basic: `
 mounted() {
     this.$primevue.config.ripple = true;
-}`,
+}
+`,
                 options: `
 mounted() {
     this.$primevue.config.ripple = true;

doc/ripple/CustomDoc.vue

@@ -3,9 +3,9 @@
         <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
     </DocSectionText>
     <div class="card flex justify-content-center align-items-center gap-2">
-        <div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
+        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
+        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>
+        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,21 +16,18 @@ export default {
         return {
             code: {
                 basic: `
-<div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
+<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
-<div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
+<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
-<div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>`,
+<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>`,
                 options: `
 <template>
     <div class="flex justify-content-center align-items-center">
-        <div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
+        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
+        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>
+        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
     </div>
 </template>
 
-<script>
-<\/script>
-
 <style scoped>
 ::v-deep(.styled-box-green .p-ink) {
     background: rgba(75, 175, 80, 0.3);
@@ -42,19 +39,24 @@ export default {
 ::v-deep(.styled-box-purple .p-ink) {
     background: rgba(156, 39, 176, 0.3);
 }
+
+.box {
+    background: var(--surface-card);
+    padding: 2rem;
+    border-radius: 10px;
+    width: 110px;
+    text-align: center;
+}
 </style>`,
                 composition: `
 <template>
     <div class="flex justify-content-center align-items-center">
-        <div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
+        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
+        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>
+        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
     </div>
 </template>
 
-<script setup>
-<\/script>
-
 <style scoped>
 ::v-deep(.styled-box-green .p-ink) {
     background: rgba(75, 175, 80, 0.3);
@@ -66,6 +68,14 @@ export default {
 ::v-deep(.styled-box-purple .p-ink) {
     background: rgba(156, 39, 176, 0.3);
 }
+
+.box {
+    background: var(--surface-card);
+    padding: 2rem;
+    border-radius: 10px;
+    width: 110px;
+    text-align: center;
+}
 </style>`
             }
         };
@@ -74,6 +84,14 @@ export default {
 </script>
 
 <style scoped>
+.box {
+    background: var(--surface-card);
+    padding: 2rem;
+    border-radius: 10px;
+    width: 110px;
+    text-align: center;
+}
+
 ::v-deep(.styled-box-green .p-ink) {
     background: rgba(75, 175, 80, 0.3);
 }

doc/ripple/ImportDoc.vue

@@ -20,13 +20,15 @@ import { createApp } from 'vue';
 import PrimeVue from 'primevue/config';
 const app = createApp(App);
 
-app.use(PrimeVue, { ripple: true });`
+app.use(PrimeVue, { ripple: true });
+`
             },
             code2: {
                 basic: `
 import Ripple from 'primevue/ripple';
 
-app.directive('ripple', Ripple);`
+app.directive('ripple', Ripple);
+`
             }
         };
     }

doc/styleclass/ImportDoc.vue

@@ -11,7 +11,8 @@ export default {
                 basic: `
 import StyleClass from 'primevue/styleclass';
                 
-app.directive('styleclass', StyleClass);`
+app.directive('styleclass', StyleClass);
+`
             }
         };
     }

doc/terminal/ImportDoc.vue

@@ -10,7 +10,8 @@ export default {
             code: {
                 basic: `
 import Terminal from 'primevue/terminal';
-import TerminalService from 'primevue/terminalservice'`
+import TerminalService from 'primevue/terminalservice'
+`
             }
         };
     }

doc/toast/ToastServiceDoc.vue

@@ -19,13 +19,15 @@ import {createApp} from 'vue';
 import ToastService from 'primevue/toastservice';
 
 const app = createApp(App);
-app.use(ToastService);`
+app.use(ToastService);
+`
             },
             code2: {
                 basic: `
 import { useToast } from 'primevue/usetoast';
 
-const toast = useToast();`
+const toast = useToast();
+`
             }
         };
     }

doc/tooltip/ImportDoc.vue

@@ -11,7 +11,8 @@ export default {
                 basic: `
 import Tooltip from 'primevue/tooltip';
 
-app.directive('tooltip', Tooltip);`
+app.directive('tooltip', Tooltip);
+`
             }
         };
     }