Theme issues solved. sandbox completed

app.vue

@@ -8,7 +8,7 @@
 <script>
 import EventBus from '@/layouts/AppEventBus';
 import NewsService from '@/service/NewsService';
-import './public/themes/lara-light-blue/theme.css'
+
 export default {
     themeChangeListener: null,
     newsActivate: null,
@@ -22,7 +22,6 @@ export default {
         this.newsService = new NewsService();
     },
     mounted() {
-        console.log(process.env)
         this.newsActivate = () => {
             this.newsService.fetchNews().then(data => {
                 this.$appState.announcement = data;
@@ -43,6 +42,7 @@ export default {
 
         this.themeChangeListener = (event) => {
             console.log(this.$appState.theme);
+
             const elementId = 'theme-link';
             const linkElement = document.getElementById(elementId);
             const cloneLinkElement = linkElement.cloneNode(true);

layouts/AppConfigurator.vue

@@ -433,6 +433,7 @@ export default {
             event.preventDefault();
         },
         changeTheme(event, theme, dark) {
+            console.log(event, theme, dark)
             EventBus.emit('theme-change', { theme: theme, dark: dark });
             event.preventDefault();
         },

layouts/AppDocumentation.vue

@@ -1,7 +1,7 @@
-<script>
+<script lang="jsx">
 import EventBus from './AppEventBus';
-import LiveEditor from './views/liveeditor/LiveEditor';
+import LiveEditor from '@/pages/liveeditor/LiveEditor';
-import { services, data } from './views/liveeditor/LiveEditorData';
+import { services, data } from '@/pages/liveeditor/LiveEditorData';
 
 export default {
     name: 'appdoc',

layouts/default.vue

@@ -11,10 +11,10 @@
               <app-footer />
           </div>
       </div>
-      <!-- <Toast />
+      <Toast />
       <Toast position="top-left" group="tl" />
       <Toast position="bottom-left" group="bl" />
-      <Toast position="bottom-right" group="br" /> -->
+      <Toast position="bottom-right" group="br" />
   </div>
 </template>
 

nuxt.config.js

@@ -1,5 +1,6 @@
 import { defineNuxtConfig } from 'nuxt'
 const path = require('path');
+import vueJsx from '@vitejs/plugin-vue-jsx'
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   ssr: true,
@@ -11,12 +12,12 @@ export default defineNuxtConfig({
         {
           id: 'theme-link',
           rel: 'stylesheet',
-          href: `public/themes/lara-light-blue/theme.css`
+          href: `./themes/lara-light-blue/theme.css`
         },
         {
           id: 'home-table-link',
           rel: 'stylesheet',
-          href:  'styles/landing/themes/lara-light-blue/theme.css'
+          href:  './styles/landing/themes/lara-light-blue/theme.css'
         }
       ]
     },
@@ -29,6 +30,7 @@ export default defineNuxtConfig({
     '@/assets/styles/flags.css',
   ],
   vite: {
+    plugins: [vueJsx()],
       resolve: {
         alias: {
             'primevue/ripple': path.resolve(__dirname, '/components/ripple/Ripple.js'),

package-lock.json

@@ -11,12 +11,12 @@
         "@fullcalendar/interaction": "^5.7.2",
         "@fullcalendar/timegrid": "^5.7.2",
         "@fullcalendar/vue3": "^5.7.2",
+        "@vitejs/plugin-vue-jsx": "^2.0.1",
         "chart.js": "3.3.2",
         "nuxt": "3.0.0-rc.9",
         "primeflex": "^3.2.1",
         "primeicons": "^5.0.0",
         "prismjs": "^1.29.0",
-        "quill": "^1.3.7",
         "sass": "^1.45.0",
         "sass-loader": "^8.0.2"
       }
@@ -2153,19 +2153,6 @@
         "rc9": "^1.2.2"
       }
     },
-    "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
-      "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/camelcase": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
@@ -2816,23 +2803,6 @@
         }
       }
     },
-    "node_modules/deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-      "dev": true,
-      "dependencies": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
@@ -2860,22 +2830,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/define-properties": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-      "dev": true,
-      "dependencies": {
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/defu": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.0.tgz",
@@ -3082,6 +3036,31 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -3616,12 +3595,6 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
-    },
     "node_modules/external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -3654,12 +3627,6 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
-    "node_modules/fast-diff": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
-      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
-      "dev": true
-    },
     "node_modules/fast-glob": {
       "version": "3.2.11",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
@@ -3872,15 +3839,6 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
-    "node_modules/functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/gauge": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
@@ -3960,20 +3918,6 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
-    "node_modules/get-intrinsic": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
-      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
-      "dev": true,
-      "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/get-port-please": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/get-port-please/-/get-port-please-2.6.1.tgz",
@@ -4157,45 +4101,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.1.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-      "dev": true,
-      "dependencies": {
-        "has-symbols": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -4407,22 +4312,6 @@
         "url": "https://opencollective.com/ioredis"
       }
     },
-    "node_modules/is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -4462,21 +4351,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dev": true,
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -4585,22 +4459,6 @@
         "@types/estree": "*"
       }
     },
-    "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-ssh": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/is-ssh/-/is-ssh-1.4.0.tgz",
@@ -5595,31 +5453,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/ohash": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/ohash/-/ohash-0.1.5.tgz",
@@ -5738,12 +5571,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/parchment": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
-      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
-      "dev": true
-    },
     "node_modules/parse-git-config": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/parse-git-config/-/parse-git-config-3.0.0.tgz",
@@ -6508,49 +6335,6 @@
         }
       ]
     },
-    "node_modules/quill": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
-      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
-      "dev": true,
-      "dependencies": {
-        "clone": "^2.1.1",
-        "deep-equal": "^1.0.1",
-        "eventemitter3": "^2.0.3",
-        "extend": "^3.0.2",
-        "parchment": "^1.1.4",
-        "quill-delta": "^3.6.2"
-      }
-    },
-    "node_modules/quill-delta": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
-      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
-      "dev": true,
-      "dependencies": {
-        "deep-equal": "^1.0.1",
-        "extend": "^3.0.2",
-        "fast-diff": "1.1.2"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/quill/node_modules/clone": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/quill/node_modules/eventemitter3": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
-      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
-      "dev": true
-    },
     "node_modules/radix3": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-0.1.2.tgz",
@@ -6672,23 +6456,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/regexp.prototype.flags": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "functions-have-names": "^1.2.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -10680,16 +10447,6 @@
         "rc9": "^1.2.2"
       }
     },
-    "call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
-      "requires": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
-      }
-    },
     "camelcase": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
@@ -11172,20 +10929,6 @@
         "ms": "2.1.2"
       }
     },
-    "deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-      "dev": true,
-      "requires": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
-      }
-    },
     "deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
@@ -11207,16 +10950,6 @@
       "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
       "dev": true
     },
-    "define-properties": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-      "dev": true,
-      "requires": {
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      }
-    },
     "defu": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.0.tgz",
@@ -11370,6 +11103,30 @@
       "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
       "dev": true
     },
+    "encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "iconv-lite": "^0.6.2"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -11677,12 +11434,6 @@
         "strip-final-newline": "^2.0.0"
       }
     },
-    "extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
-    },
     "external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -11712,12 +11463,6 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
-    "fast-diff": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
-      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
-      "dev": true
-    },
     "fast-glob": {
       "version": "3.2.11",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
@@ -11865,12 +11610,6 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
-    "functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "dev": true
-    },
     "gauge": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
@@ -11934,17 +11673,6 @@
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "dev": true
     },
-    "get-intrinsic": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
-      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
-      "dev": true,
-      "requires": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.3"
-      }
-    },
     "get-port-please": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/get-port-please/-/get-port-please-2.6.1.tgz",
@@ -12086,30 +11814,6 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
     },
-    "has-property-descriptors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
-      "requires": {
-        "get-intrinsic": "^1.1.1"
-      }
-    },
-    "has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true
-    },
-    "has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-      "dev": true,
-      "requires": {
-        "has-symbols": "^1.0.2"
-      }
-    },
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -12269,16 +11973,6 @@
         "standard-as-callback": "^2.1.0"
       }
     },
-    "is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -12306,15 +12000,6 @@
         "has": "^1.0.3"
       }
     },
-    "is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dev": true,
-      "requires": {
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -12390,16 +12075,6 @@
         "@types/estree": "*"
       }
     },
-    "is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-ssh": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/is-ssh/-/is-ssh-1.4.0.tgz",
@@ -13196,22 +12871,6 @@
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
       "dev": true
     },
-    "object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true
-    },
     "ohash": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/ohash/-/ohash-0.1.5.tgz",
@@ -13299,12 +12958,6 @@
       "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
       "dev": true
     },
-    "parchment": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
-      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
-      "dev": true
-    },
     "parse-git-config": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/parse-git-config/-/parse-git-config-3.0.0.tgz",
@@ -13818,45 +13471,6 @@
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
-    "quill": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
-      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
-      "dev": true,
-      "requires": {
-        "clone": "^2.1.1",
-        "deep-equal": "^1.0.1",
-        "eventemitter3": "^2.0.3",
-        "extend": "^3.0.2",
-        "parchment": "^1.1.4",
-        "quill-delta": "^3.6.2"
-      },
-      "dependencies": {
-        "clone": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-          "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
-          "dev": true
-        },
-        "eventemitter3": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
-          "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
-          "dev": true
-        }
-      }
-    },
-    "quill-delta": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
-      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
-      "dev": true,
-      "requires": {
-        "deep-equal": "^1.0.1",
-        "extend": "^3.0.2",
-        "fast-diff": "1.1.2"
-      }
-    },
     "radix3": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-0.1.2.tgz",
@@ -13962,17 +13576,6 @@
         "redis-errors": "^1.0.0"
       }
     },
-    "regexp.prototype.flags": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "functions-have-names": "^1.2.2"
-      }
-    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",

package.json

@@ -8,15 +8,15 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "3.0.0-rc.9",
     "@fullcalendar/core": "^5.7.2",
     "@fullcalendar/daygrid": "^5.7.2",
     "@fullcalendar/interaction": "^5.7.2",
     "@fullcalendar/timegrid": "^5.7.2",
     "@fullcalendar/vue3": "^5.7.2",
-    "quill": "^1.3.7",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
-    "primeflex": "^3.2.1",
     "chart.js": "3.3.2",
+    "nuxt": "3.0.0-rc.9",
+    "primeflex": "^3.2.1",
     "primeicons": "^5.0.0",
     "prismjs": "^1.29.0",
     "sass": "^1.45.0",

pages/liveeditor/LiveEditor.vue

@@ -0,0 +1,778 @@
+<template>
+    <span v-if="showEditor" class="flex justify-content-end">
+        <SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" v-show="false" />
+    </span>
+</template>
+
+<script>
+import EventBus from '@/layouts/AppEventBus';
+import { services, data } from './LiveEditorData';
+import packageJson from '@/package.json';
+const sourceTypes = ['options-api', 'composition-api', 'browser-source'];
+
+export default {
+    data() {
+        return {
+            sandbox_id: null,
+            showCodeHighlight: false,
+            items: [
+                {
+                    label: 'Options API',
+                    command: () => {
+                        this.postSandboxParameters('options-api');
+                    }
+                },
+                {
+                    label: 'Composition API',
+                    command: () => {
+                        this.postSandboxParameters('composition-api');
+                    }
+                },
+                {
+                    label: 'Browser Source',
+                    command: () => {
+                        this.postSandboxParameters('browser-source');
+                    }
+                }
+            ]
+        };
+    },
+    props: {
+        name: {
+            type: String,
+            default: null
+        },
+        sources: {
+            type: Object,
+            default: null
+        },
+        service: {
+            type: Array,
+            default: null
+        },
+        data: {
+            type: Array,
+            default: null
+        },
+        extPages: {
+            type: Array,
+            default: null
+        },
+        dependencies: {
+            type: Object,
+            default: null
+        },
+        extFiles: {
+            type: Object,
+            default: null
+        },
+        component: {
+            type: String,
+            default: null
+        }
+    },
+    runDemoListener: null,
+    mounted() {
+        this.runDemoListener = (type) => {
+            this.postSandboxParameters(type);
+        };
+        EventBus.on('run-demo', this.runDemoListener);
+    },
+    beforeUnmount() {
+        EventBus.off('run-demo', this.runDemoListener);
+    },
+    methods: {
+        postSandboxParameters(sourceType) {
+            fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Accept: 'application/json'
+                },
+                body: JSON.stringify(this.getSandboxParameters(sourceType))
+            })
+                .then((response) => response.json())
+                .then((data) => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'))
+                .catch(() => (this.showCodeHighlight = true));
+        },
+
+        createSandboxParameters(sourceType, nameWithExt, files, extDependencies) {
+            /* eslint-disable */
+            let extFiles = this.extFiles
+                ? this.extFiles[sourceType]
+                    ? { ...this.extFiles[sourceType] }
+                    : Object.keys(this.extFiles)
+                          .filter((k) => !sourceTypes.includes(k))
+                          .reduce((result, current) => (result[current] = this.extFiles[current]) && result, {})
+                : {};
+            Object.entries(extFiles).forEach(([key, value]) => extFiles[key].content && (extFiles[key].content = value.content.replaceAll('<\\/script>', '<\/script>')));
+
+            let extIndexCSS = extFiles['index.css'] || '';
+            delete extFiles['index.css'];
+
+            console.log(packageJson)
+            const dependencies = packageJson ? packageJson.devDependencies : {};
+
+            let defaultCss = {
+                content: `html {
+        font-size: 14px;
+    }
+
+    body {
+        background-color: var(--surface-ground);
+        font-family: var(--font-family);
+        font-weight: normal;
+        color: var(--text-color);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        padding: .5em;
+        margin-bottom: 50px;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin: 1.5rem 0 1rem 0;
+        font-family: inherit;
+        font-weight: 600;
+        line-height: 1.2;
+        color: inherit;
+    }
+
+    h1 { font-size: 2.5rem; }
+    h2 { font-size: 2rem; }
+    h3 { font-size: 1.75rem; }
+    h4 { font-size: 1.5rem; }
+    h5 { font-size: 1.25rem; }
+    h6 { font-size: 1rem; }
+    p {
+        line-height: 1.5;
+        margin: 0 0 1rem 0;
+    }
+
+    .card {
+        background: var(--surface-card);
+        padding: 2rem;
+        border-radius: 10px;
+        margin-bottom: 2rem;
+    }
+
+    input[type="number"] {
+        -moz-appearance: textfield;
+    }
+
+    input[type="number"]::-webkit-outer-spin-button,
+    input[type="number"]::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    @keyframes pulse {
+        0% {
+            background-color: rgba(165, 165, 165, 0.1)
+        }
+        50% {
+            background-color: rgba(165, 165, 165, 0.3)
+        }
+        100% {
+            background-color: rgba(165, 165, 165, 0.1)
+        }
+    }
+
+    .customer-badge {
+        border-radius: 2px;
+        padding: .25em .5rem;
+        text-transform: uppercase;
+        font-weight: 700;
+        font-size: 12px;
+        letter-spacing: .3px;
+    }
+
+    .customer-badge.status-qualified {
+        background-color: #C8E6C9;
+        color: #256029;
+    }
+
+    .customer-badge.status-unqualified {
+        background-color: #FFCDD2;
+        color: #C63737;
+    }
+
+    .customer-badge.status-negotiation {
+        background-color: #FEEDAF;
+        color: #8A5340;
+    }
+
+    .customer-badge.status-new {
+        background-color: #B3E5FC;
+        color: #23547B;
+    }
+
+    .customer-badge.status-renewal {
+        background-color: #ECCFFF;
+        color: #694382;
+    }
+
+    .customer-badge.status-proposal {
+        background-color: #FFD8B2;
+        color: #805B36;
+    }
+
+    .product-badge {
+        border-radius: 2px;
+        padding: .25em .5rem;
+        text-transform: uppercase;
+        font-weight: 700;
+        font-size: 12px;
+        letter-spacing: .3px;
+    }
+
+    .product-badge.status-instock {
+        background: #C8E6C9;
+        color: #256029;
+    }
+
+    .product-badge.status-outofstock {
+        background: #FFCDD2;
+        color: #C63737;
+    }
+
+    .product-badge.status-lowstock {
+        background: #FEEDAF;
+        color: #8A5340;
+    }
+
+    .order-badge {
+        border-radius: 2px;
+        padding: .25em .5rem;
+        text-transform: uppercase;
+        font-weight: 700;
+        font-size: 12px;
+        letter-spacing: .3px;
+    }
+
+    .order-badge.order-delivered {
+        background: #C8E6C9;
+        color: #256029;
+    }
+
+    .order-badge.order-cancelled {
+        background: #FFCDD2;
+        color: #C63737;
+    }
+
+    .order-badge.order-pending {
+        background: #FEEDAF;
+        color: #8A5340;
+    }
+
+    .order-badge.order-returned {
+        background: #ECCFFF;
+        color: #694382;
+    }
+
+    .image-text {
+        margin-left: .5rem;
+    }
+
+    .p-multiselect-representative-option {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    .p-multiselect-representative-option img {
+        vertical-align: middle;
+        width: 24px;
+    }
+
+    .p-multiselect-representative-option span {
+        margin-top: .125rem;
+    }
+
+    .country-item {
+        display: flex;
+        align-items: center;
+    }
+
+    .country-item img.flag {
+        width: 18px;
+        margin-right: .5rem;
+    }
+
+    .flag {
+        vertical-align: middle;
+    }
+
+    span.flag {
+        width:44px;
+        height:30px;
+        display:inline-block;
+    }
+
+    img.flag {
+        width:30px
+    }
+
+    .true-icon {
+        color: #256029;
+    }
+
+    .false-icon {
+        color: #C63737;
+    }
+    ${extIndexCSS}
+    `
+            };
+
+            if (sourceType === 'browser-source') {
+                return {
+                    files: {
+                        'index.css': defaultCss,
+                        ...files
+                    }
+                };
+            }
+
+            return {
+                files: {
+                    'package.json': {
+                        content: {
+                            main: `src/demo/${nameWithExt}`,
+                            dependencies: {
+                                ...extDependencies,
+                                "vue": "3.2.31",
+                                primevue: '^3.16.2',
+                                primeflex: dependencies['primeflex'],
+                                primeicons: dependencies['primeicons'],
+                                "@babel/cli": "^7.4.4",
+                                "core-js": "^3.6.5",
+                                "vue-router": "^4.0.0-0"
+                            },
+                            devDependencies: {
+                                "@vue/cli-plugin-babel": "~4.5.0",
+                                "@vue/cli-plugin-eslint": "~4.5.0",
+                                "@vue/cli-service": "~4.5.0",
+                                "eslint": "^6.0.0",
+                                "eslint-plugin-vue": "^7.0.0"
+                            }
+                        }
+                    },
+                    'babel.config.js': {
+                        content: `module.exports = {
+    presets: [
+        '@vue/cli-plugin-babel/preset'
+    ]
+}`
+                    },
+                    '.eslintrc.js': {
+                        content: `module.exports = {
+    root: true,
+    env: {
+        node: true
+    },
+    'extends': [
+        'plugin:vue/vue3-essential',
+        'eslint:recommended'
+    ],
+    parserOptions: {
+        parser: 'babel-eslint'
+    }
+}`
+                    },
+                    'src/index.css': defaultCss,
+                    ...files,
+                    ...extFiles
+                }
+            };
+        },
+
+        getSandboxParameters(sourceType) {
+            /* eslint-disable */
+            let name = this.name;
+            let extension = '.vue';
+            let extDependencies = this.dependencies || {};
+            let extImport = '';
+            let extElement = '';
+            let content = this.sources[sourceType].content.replaceAll('<\\/script>', '<\/script>');
+            let imports = this.sources[sourceType].imports ? this.sources[sourceType].imports.replaceAll('<\\/script>', '<\/script>') : '';
+            let pages = this.extPages ? this.extPages : '';
+            let _files = {},
+                element = '';
+
+            if (this.service) {
+                let dataArr = [],
+                    serviceArr = [],
+                    path = '';
+
+                this.service.forEach((el) => {
+                    serviceArr.push(el.split(','));
+                });
+
+                if (this.data) {
+                    this.data.forEach((el) => {
+                        dataArr.push(el.split(','));
+                    });
+
+                    if (dataArr) {
+                        dataArr.forEach((el) => {
+                            let _path = `${el}.json`;
+                            path = sourceType === 'browser-source' ? _path : `public/demo/data/${_path}`;
+
+                            _files[path] = {
+                                content: data[el]
+                            };
+                        });
+                    }
+                }
+
+                serviceArr.forEach((serv) => {
+                    path = sourceType === 'browser-source' ? `${serv}.js` : `src/service/${serv}.js`;
+                    let _content = sourceType === 'browser-source' ? `${services[serv].replaceAll('export default class', 'class').replaceAll('demo/data/', './')}` : `${services[serv]}`;
+
+                    _files[path] = {
+                        content: _content
+                    };
+                });
+            }
+
+            if (sourceType === 'browser-source') {
+                _files['index.html'] = {
+                    content: `<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <title>${name}</title>
+
+        <!-- PrimeVue -->
+        <link href="https://unpkg.com/primevue@^3/resources/themes/lara-light-indigo/theme.css" rel="stylesheet" />
+        <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
+        <link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
+        <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
+
+        <!-- Dependencies -->
+        <script src="https://unpkg.com/vue@next"><\/script>
+        <script src="https://unpkg.com/primevue@^3/core/core.min.js"><\/script>
+
+        <!-- Demo -->
+        ${imports}
+        <link href="./index.css" rel="stylesheet" />
+    </head>
+    <body>${content}
+    </body>
+</html>`
+                };
+            } else {
+                element += `import ${name} from "./${name}.vue"`;
+
+                if (this.component) {
+                    extImport += `import ${this.component} from 'primevue/${this.component.toLowerCase()}';`;
+                    extElement += `app.component('${this.component}', ${this.component});`;
+                }
+
+                if (pages) {
+                    let routes = [],
+                        routeImports = '';
+
+                    pages.forEach((page, i) => {
+                        _files[`src/components/${page.tabName}.vue`] = {
+                            content: `${page.content.replace('<\\/script>', '<\/script>')}`
+                        };
+
+                        let route = '';
+
+                        routeImports += `import ${page.tabName} from './components/${page.tabName}.vue';
+    `;
+
+                        if (i === 0) {
+                            route += `{
+        path: "/",
+        component: ${page.tabName}
+    }`;
+                        } else {
+                            route += `{
+        path: "/${page.tabName.slice(0, -4).toLowerCase()}",
+        component: ${page.tabName}
+    }`;
+                        }
+
+                        routes.push(route);
+                    });
+
+                    _files['src/router.js'] = {
+                        content: `import { createRouter, createWebHistory } from "vue-router";
+${routeImports}
+export const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        ${routes}
+    ]
+});
+`
+                    };
+                } else {
+                    _files[`src/router.js`] = {
+                        content: `import { createRouter, createWebHistory } from "vue-router";
+    ${element}
+
+    export const router = createRouter({
+    history: createWebHistory(),
+    routes: [{ path: "/", component: ${name} }]
+});`
+                    };
+                }
+
+                _files['src/main.js'] = {
+                    content: `
+import "primeflex/primeflex.css";
+import "primevue/resources/themes/lara-light-blue/theme.css";
+import "primevue/resources/primevue.min.css";
+import "primeicons/primeicons.css";
+import "./index.css";
+
+import { createApp } from "vue";
+${element}
+import { router } from "./router";
+import PrimeVue from "primevue/config";
+import AutoComplete from 'primevue/autocomplete';
+import Accordion from 'primevue/accordion';
+import AccordionTab from 'primevue/accordiontab';
+import Avatar from 'primevue/avatar';
+import AvatarGroup from 'primevue/avatargroup';
+import Badge from 'primevue/badge';
+import BadgeDirective from "primevue/badgedirective";
+import BlockUI from 'primevue/blockui';
+import Button from 'primevue/button';
+import Breadcrumb from 'primevue/breadcrumb';
+import Calendar from 'primevue/calendar';
+import Card from 'primevue/card';
+import CascadeSelect from 'primevue/cascadeselect';
+import Carousel from 'primevue/carousel';
+import Checkbox from 'primevue/checkbox';
+import Chip from 'primevue/chip';
+import Chips from 'primevue/chips';
+import ColorPicker from 'primevue/colorpicker';
+import Column from 'primevue/column';
+import ColumnGroup from 'primevue/columngroup';
+import ConfirmDialog from 'primevue/confirmdialog';
+import ConfirmPopup from 'primevue/confirmpopup';
+import ConfirmationService from 'primevue/confirmationservice';
+import ContextMenu from 'primevue/contextmenu';
+import DataTable from 'primevue/datatable';
+import DataView from 'primevue/dataview';
+import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions';
+import DeferredContent from 'primevue/deferredcontent';
+import Dialog from 'primevue/dialog';
+import DialogService from 'primevue/dialogservice'
+import Divider from 'primevue/divider';
+import Dock from 'primevue/dock';
+import Dropdown from 'primevue/dropdown';
+import DynamicDialog from 'primevue/dynamicdialog';
+import Fieldset from 'primevue/fieldset';
+import FileUpload from 'primevue/fileupload';
+import Galleria from 'primevue/galleria';
+import Image from 'primevue/image';
+import InlineMessage from 'primevue/inlinemessage';
+import Inplace from 'primevue/inplace';
+import InputSwitch from 'primevue/inputswitch';
+import InputText from 'primevue/inputtext';
+import InputMask from 'primevue/inputmask';
+import InputNumber from 'primevue/inputnumber';
+import Knob from 'primevue/knob';
+import Listbox from 'primevue/listbox';
+import MegaMenu from 'primevue/megamenu';
+import Menu from 'primevue/menu';
+import Menubar from 'primevue/menubar';
+import Message from 'primevue/message';
+import MultiSelect from 'primevue/multiselect';
+import OrderList from 'primevue/orderlist';
+import OrganizationChart from 'primevue/organizationchart';
+import OverlayPanel from 'primevue/overlaypanel';
+import Paginator from 'primevue/paginator';
+import Panel from 'primevue/panel';
+import PanelMenu from 'primevue/panelmenu';
+import Password from 'primevue/password';
+import PickList from 'primevue/picklist';
+import ProgressBar from 'primevue/progressbar';
+import ProgressSpinner from 'primevue/progressspinner';
+import Rating from 'primevue/rating';
+import RadioButton from 'primevue/radiobutton';
+import Ripple from 'primevue/ripple';
+import Row from 'primevue/row';
+import SelectButton from 'primevue/selectbutton';
+import ScrollPanel from 'primevue/scrollpanel';
+import ScrollTop from 'primevue/scrolltop';
+import Skeleton from 'primevue/skeleton';
+import Slider from 'primevue/slider';
+import Sidebar from 'primevue/sidebar';
+import SpeedDial from 'primevue/speeddial';
+import SplitButton from 'primevue/splitbutton';
+import Splitter from 'primevue/splitter';
+import SplitterPanel from 'primevue/splitterpanel';
+import Steps from 'primevue/steps';
+import StyleClass from 'primevue/styleclass';
+import TabMenu from 'primevue/tabmenu';
+import TieredMenu from 'primevue/tieredmenu';
+import Textarea from 'primevue/textarea';
+import Toast from 'primevue/toast';
+import ToastService from 'primevue/toastservice';
+import Toolbar from 'primevue/toolbar';
+import TabView from 'primevue/tabview';
+import TabPanel from 'primevue/tabpanel';
+import Tag from 'primevue/tag';
+import Terminal from 'primevue/terminal';
+import Timeline from 'primevue/timeline';
+import ToggleButton from 'primevue/togglebutton';
+import Tooltip from 'primevue/tooltip';
+import Tree from 'primevue/tree';
+import TreeSelect from 'primevue/treeselect';
+import TreeTable from 'primevue/treetable';
+import TriStateCheckbox from 'primevue/tristatecheckbox';
+import VirtualScroller from 'primevue/virtualscroller';
+${extImport}
+
+const app = createApp(${name});
+
+app.use(PrimeVue, { ripple: true });
+app.use(ConfirmationService);
+app.use(ToastService);
+app.use(DialogService);
+app.use(router);
+
+app.directive('tooltip', Tooltip);
+app.directive('badge', BadgeDirective);
+app.directive('ripple', Ripple);
+app.directive('styleclass', StyleClass);
+
+app.component('Accordion', Accordion);
+app.component('AccordionTab', AccordionTab);
+app.component('AutoComplete', AutoComplete);
+app.component('Avatar', Avatar);
+app.component('AvatarGroup', AvatarGroup);
+app.component('Badge', Badge);
+app.component('BlockUI', BlockUI);
+app.component('Breadcrumb', Breadcrumb);
+app.component('Button', Button);
+app.component('Calendar', Calendar);
+app.component('Card', Card);
+app.component('Carousel', Carousel);
+app.component('CascadeSelect', CascadeSelect);
+app.component('Checkbox', Checkbox);
+app.component('Chip', Chip);
+app.component('Chips', Chips);
+app.component('ColorPicker', ColorPicker);
+app.component('Column', Column);
+app.component('ColumnGroup', ColumnGroup);
+app.component('ConfirmDialog', ConfirmDialog);
+app.component('ConfirmPopup', ConfirmPopup);
+app.component('ContextMenu', ContextMenu);
+app.component('DataTable', DataTable);
+app.component('DataView', DataView);
+app.component('DataViewLayoutOptions', DataViewLayoutOptions);
+app.component('DeferredContent', DeferredContent);
+app.component('Dialog', Dialog);
+app.component('Divider', Divider);
+app.component('Dock', Dock);
+app.component('Dropdown', Dropdown);
+app.component('DynamicDialog', DynamicDialog);
+app.component('Fieldset', Fieldset);
+app.component('FileUpload', FileUpload);
+app.component('Galleria', Galleria);
+app.component('Image', Image);
+app.component('InlineMessage', InlineMessage);
+app.component('Inplace', Inplace);
+app.component('InputMask', InputMask);
+app.component('InputNumber', InputNumber);
+app.component('InputSwitch', InputSwitch);
+app.component('InputText', InputText);
+app.component('Knob', Knob);
+app.component('Listbox', Listbox);
+app.component('MegaMenu', MegaMenu);
+app.component('Menu', Menu);
+app.component('Menubar', Menubar);
+app.component('Message', Message);
+app.component('MultiSelect', MultiSelect);
+app.component('OrderList', OrderList);
+app.component('OrganizationChart', OrganizationChart);
+app.component('OverlayPanel', OverlayPanel);
+app.component('Paginator', Paginator);
+app.component('Panel', Panel);
+app.component('PanelMenu', PanelMenu);
+app.component('Password', Password);
+app.component('PickList', PickList);
+app.component('ProgressBar', ProgressBar);
+app.component('ProgressSpinner', ProgressSpinner);
+app.component('RadioButton', RadioButton);
+app.component('Rating', Rating);
+app.component('Row', Row);
+app.component('SelectButton', SelectButton);
+app.component('ScrollPanel', ScrollPanel);
+app.component('ScrollTop', ScrollTop);
+app.component('Slider', Slider);
+app.component('Sidebar', Sidebar);
+app.component('Skeleton', Skeleton);
+app.component('SpeedDial', SpeedDial);
+app.component('SplitButton', SplitButton);
+app.component('Splitter', Splitter);
+app.component('SplitterPanel', SplitterPanel);
+app.component('Steps', Steps);
+app.component('TabMenu', TabMenu);
+app.component('TabView', TabView);
+app.component('TabPanel', TabPanel);
+app.component('Tag', Tag);
+app.component('Textarea', Textarea);
+app.component('Terminal', Terminal);
+app.component('TieredMenu', TieredMenu);
+app.component('Timeline', Timeline);
+app.component('Toast', Toast);
+app.component('Toolbar', Toolbar);
+app.component('ToggleButton', ToggleButton);
+app.component('Tree', Tree);
+app.component('TreeSelect', TreeSelect);
+app.component('TreeTable', TreeTable);
+app.component('TriStateCheckbox', TriStateCheckbox);
+app.component('VirtualScroller', VirtualScroller);
+${extElement}
+
+app.mount("#app");
+`
+                };
+
+                _files['public/index.html'] = {
+                    content: `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>
+`
+                };
+
+                _files[`src/${name}${extension}`] = {
+                    content: `${content}
+`
+                };
+            }
+
+            return this.createSandboxParameters(sourceType, `${name}${extension}`, _files, extDependencies);
+        },
+
+        openDefaultCSB() {
+            this.postSandboxParameters(this.defaultSourceType);
+        }
+    },
+    computed: {
+        showEditor() {
+            return this.$appState.codeSandbox;
+        },
+        defaultSourceType() {
+            return this.$appState.sourceType;
+        }
+    }
+};
+</script>

plugins/primeVue.js

@@ -99,6 +99,7 @@ import Galleria from '@/components/galleria/Galleria';
 import VirtualScroller from '@/components/virtualscroller/VirtualScroller';
 
 import AppDemoActions from '@/layouts/AppDemoActions'
+import AppDoc from '@/layouts/AppDocumentation'
 import CodeHighlight from '@/layouts/AppCodeHighlight';
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -209,4 +210,5 @@ nuxtApp.vueApp.component('Galleria', Galleria);
 nuxtApp.vueApp.component('VirtualScroller', VirtualScroller);
 
 nuxtApp.vueApp.component('AppDemoActions', AppDemoActions);
+nuxtApp.vueApp.component('AppDoc', AppDoc);
 });