From e7d0839f9c5cf85aa0d6b9dff57d4883ea527f6a Mon Sep 17 00:00:00 2001
From: Bahadir Sofuoglu <bahadirsofuoglu@gmail.com>
Date: Fri, 9 Sep 2022 13:25:14 +0300
Subject: [PATCH] Components imported

---
 app.vue                              | 120 ++--
 nuxt.config.js                       |  17 +-
 package-lock.json                    | 593 ++++++++++++++++++
 package.json                         |   6 +
 pages/button/ButtonDoc.vue           | 882 +++++++++++++++++++++++++++
 pages/button/index.vue               | 372 +++++++++++
 pages/{setup.vue => setup/index.vue} |   0
 plugins/primeVue.js                  | 208 ++++++-
 8 files changed, 2128 insertions(+), 70 deletions(-)
 create mode 100755 pages/button/ButtonDoc.vue
 create mode 100755 pages/button/index.vue
 rename pages/{setup.vue => setup/index.vue} (100%)

diff --git a/app.vue b/app.vue
index ddae9f249..2123974ee 100644
--- a/app.vue
+++ b/app.vue
@@ -6,64 +6,66 @@
 </template>
 
 <script>
-  import EventBus from '@/layouts/AppEventBus';
-  import NewsService from '@/service/NewsService';
-  
-  export default {
-      themeChangeListener: null,
-      newsActivate: null,
-      newsService: null,
-      data() {
-          return {
-              storageKey: 'primevue'
-          }
-      },
-      created() {
-          this.newsService = new NewsService();
-      },
-      mounted() {
-          this.newsActivate = () => {
-              this.newsService.fetchNews().then(data => {
-                  this.$appState.announcement = data;
-  
-                  const itemString = localStorage.getItem(this.storageKey);
-                  if (itemString) {
-                      const item = JSON.parse(itemString);
-                      if (item.hiddenNews && item.hiddenNews !== data.id) {
-                          this.$appState.newsActive = true;
-                      }
-                      else this.$appState.newsActive = false;
-                  }
-                  else {
-                      this.$appState.newsActive = true;
-                  }
-              });
-          };
+import EventBus from '@/layouts/AppEventBus';
+import NewsService from '@/service/NewsService';
+import './public/themes/lara-light-blue/theme.css'
+export default {
+    themeChangeListener: null,
+    newsActivate: null,
+    newsService: null,
+    data() {
+        return {
+            storageKey: 'primevue'
+        }
+    },
+    created() {
+        this.newsService = new NewsService();
+    },
+    mounted() {
+        console.log(process.env)
+        this.newsActivate = () => {
+            this.newsService.fetchNews().then(data => {
+                this.$appState.announcement = data;
 
-          this.themeChangeListener = (event) => {
-              const elementId = 'theme-link';
-              const linkElement = document.getElementById(elementId);
-              const cloneLinkElement = linkElement.cloneNode(true);
-              const newThemeUrl = linkElement.getAttribute('href').replace(this.$appState.theme, event.theme);
-  
-              cloneLinkElement.setAttribute('id', elementId + '-clone');
-              cloneLinkElement.setAttribute('href', newThemeUrl);
-              cloneLinkElement.addEventListener('load', () => {
-                  linkElement.remove();
-                  cloneLinkElement.setAttribute('id', elementId);
-              });
-              linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
-          
-              this.$appState.theme = event.theme;
-              this.$appState.darkTheme = event.dark;
-          };
-  
-          EventBus.on('theme-change', this.themeChangeListener);
-          EventBus.on('news-activate', this.newsActivate);
-      },
-      beforeUnmount() {
-          EventBus.off('theme-change', this.themeChangeListener);
-          EventBus.off('news-activate', this.newsActivate);
-      }
-  }
+                const itemString = localStorage.getItem(this.storageKey);
+                if (itemString) {
+                    const item = JSON.parse(itemString);
+                    if (item.hiddenNews && item.hiddenNews !== data.id) {
+                        this.$appState.newsActive = true;
+                    }
+                    else this.$appState.newsActive = false;
+                }
+                else {
+                    this.$appState.newsActive = true;
+                }
+            });
+        };
+
+        this.themeChangeListener = (event) => {
+            console.log(this.$appState.theme);
+            const elementId = 'theme-link';
+            const linkElement = document.getElementById(elementId);
+            const cloneLinkElement = linkElement.cloneNode(true);
+            const newThemeUrl = linkElement.getAttribute('href').replace(this.$appState.theme, event.theme);
+
+            cloneLinkElement.setAttribute('id', elementId + '-clone');
+            cloneLinkElement.setAttribute('href', newThemeUrl);
+            cloneLinkElement.addEventListener('load', () => {
+                linkElement.remove();
+                cloneLinkElement.setAttribute('id', elementId);
+            });
+            linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+        
+            this.$appState.theme = event.theme;
+            this.$appState.darkTheme = event.dark;
+        };
+
+        EventBus.on('theme-change', this.themeChangeListener);
+        EventBus.on('news-activate', this.newsActivate);
+    },
+    beforeUnmount() {
+        EventBus.off('theme-change', this.themeChangeListener);
+        EventBus.off('news-activate', this.newsActivate);
+    }
+}
   </script>
\ No newline at end of file
diff --git a/nuxt.config.js b/nuxt.config.js
index 8359f4d90..0a6c8e00e 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -5,21 +5,13 @@ export default defineNuxtConfig({
   ssr: true,
   typescript: false,
   components: true,
-
-  css: [
-    '@/assets/styles/primevue.css',
-    '/node_modules/primeflex/primeflex.css',
-    '/node_modules/primeicons/primeicons.css',
-    '/node_modules/prismjs/themes/prism-coy.css',
-    '@/assets/styles/flags.css'
-  ],
   app: {
     head: {
       link: [
         {
           id: 'theme-link',
           rel: 'stylesheet',
-          href: 'themes/lara-light-blue/theme.css'
+          href: `public/themes/lara-light-blue/theme.css`
         },
         {
           id: 'home-table-link',
@@ -29,6 +21,13 @@ export default defineNuxtConfig({
       ]
     },
   },
+  css: [
+    '@/assets/styles/primevue.css',
+    '/node_modules/primeflex/primeflex.css',
+    '/node_modules/primeicons/primeicons.css',
+    '/node_modules/prismjs/themes/prism-coy.css',
+    '@/assets/styles/flags.css',
+  ],
   vite: {
       resolve: {
         alias: {
diff --git a/package-lock.json b/package-lock.json
index 7a62e8c15..696c09cba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,11 +6,17 @@
     "": {
       "hasInstallScript": true,
       "devDependencies": {
+        "@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",
         "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"
       }
@@ -579,6 +585,70 @@
         "node": ">=12"
       }
     },
+    "node_modules/@fullcalendar/common": {
+      "version": "5.11.3",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.11.3.tgz",
+      "integrity": "sha512-welVwyfQOXQQGfDwBMSfYEPbiO1cPfUD+C7jd3ZoweJR+dSO11ddFugxIQ7dGfABAGZ63oq/+LW9FsmAJezVNg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@fullcalendar/core": {
+      "version": "5.11.3",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-5.11.3.tgz",
+      "integrity": "sha512-YUFxCvVJytUwFeXCx4J17kFMM7Ixwn9zBjVRw5NM2bMwgR6VAhSnlZc6yNQSOIy7Hj2TF0vDkO/4JNlTvxyAXw==",
+      "dev": true,
+      "dependencies": {
+        "@fullcalendar/common": "~5.11.3",
+        "preact": "^10.0.5",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@fullcalendar/daygrid": {
+      "version": "5.11.3",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.11.3.tgz",
+      "integrity": "sha512-PCK0y80DRNCzWuC5lGpIWqCgKDvql1ah7rXql5lu+Gn2EeFj15ZQ8diMFjtNIQucEmFaNOXnR05Pgcry1n6Shg==",
+      "dev": true,
+      "dependencies": {
+        "@fullcalendar/common": "~5.11.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@fullcalendar/interaction": {
+      "version": "5.11.3",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-5.11.3.tgz",
+      "integrity": "sha512-L955wkDjza62K96ndstvYs2Fd4V0kayTDpqW8W7huFG3Ox8MutpLqKAa2SCaTvcNIlWS4oexGQRiQAaJG7u47A==",
+      "dev": true,
+      "dependencies": {
+        "@fullcalendar/common": "~5.11.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@fullcalendar/timegrid": {
+      "version": "5.11.3",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-5.11.3.tgz",
+      "integrity": "sha512-SjIj2ZQ7nTyL1RxZkCPvNbuUQ0xHT+gfYJdUL3FT4bPjPJCxWtQ2CL8hxaeNmVozYYuy0yrGTW5Oup2+9IplbA==",
+      "dev": true,
+      "dependencies": {
+        "@fullcalendar/common": "~5.11.3",
+        "@fullcalendar/daygrid": "~5.11.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@fullcalendar/vue3": {
+      "version": "5.11.2",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-5.11.2.tgz",
+      "integrity": "sha512-ELx9zaU5zqTTCqeDd2GNhkdiTGVwTjjFQAMCX2Cc3fGI5dtMwpQb9Sg9RtLhabmydakdClGffFwCIDa91IoGlg==",
+      "dev": true,
+      "dependencies": {
+        "@fullcalendar/core": "~5.11.2",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -2083,6 +2153,19 @@
         "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",
@@ -2733,6 +2816,23 @@
         }
       }
     },
+    "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",
@@ -2760,6 +2860,22 @@
         "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",
@@ -3500,6 +3616,12 @@
         "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",
@@ -3532,6 +3654,12 @@
       "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",
@@ -3744,6 +3872,15 @@
       "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",
@@ -3823,6 +3960,20 @@
         "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",
@@ -4006,6 +4157,45 @@
         "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",
@@ -4217,6 +4407,22 @@
         "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",
@@ -4256,6 +4462,21 @@
         "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",
@@ -4364,6 +4585,22 @@
         "@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",
@@ -5358,6 +5595,31 @@
         "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",
@@ -5476,6 +5738,12 @@
         "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",
@@ -6150,6 +6418,16 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/preact": {
+      "version": "10.10.6",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.10.6.tgz",
+      "integrity": "sha512-w0mCL5vICUAZrh1DuHEdOWBjxdO62lvcO++jbzr8UhhYcTbFkpegLH9XX+7MadjTl/y0feoqwQ/zAnzkc/EGog==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
@@ -6230,6 +6508,49 @@
         }
       ]
     },
+    "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",
@@ -6351,6 +6672,23 @@
         "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",
@@ -9040,6 +9378,67 @@
       "dev": true,
       "optional": true
     },
+    "@fullcalendar/common": {
+      "version": "5.11.3",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.11.3.tgz",
+      "integrity": "sha512-welVwyfQOXQQGfDwBMSfYEPbiO1cPfUD+C7jd3ZoweJR+dSO11ddFugxIQ7dGfABAGZ63oq/+LW9FsmAJezVNg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@fullcalendar/core": {
+      "version": "5.11.3",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-5.11.3.tgz",
+      "integrity": "sha512-YUFxCvVJytUwFeXCx4J17kFMM7Ixwn9zBjVRw5NM2bMwgR6VAhSnlZc6yNQSOIy7Hj2TF0vDkO/4JNlTvxyAXw==",
+      "dev": true,
+      "requires": {
+        "@fullcalendar/common": "~5.11.3",
+        "preact": "^10.0.5",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@fullcalendar/daygrid": {
+      "version": "5.11.3",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.11.3.tgz",
+      "integrity": "sha512-PCK0y80DRNCzWuC5lGpIWqCgKDvql1ah7rXql5lu+Gn2EeFj15ZQ8diMFjtNIQucEmFaNOXnR05Pgcry1n6Shg==",
+      "dev": true,
+      "requires": {
+        "@fullcalendar/common": "~5.11.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@fullcalendar/interaction": {
+      "version": "5.11.3",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-5.11.3.tgz",
+      "integrity": "sha512-L955wkDjza62K96ndstvYs2Fd4V0kayTDpqW8W7huFG3Ox8MutpLqKAa2SCaTvcNIlWS4oexGQRiQAaJG7u47A==",
+      "dev": true,
+      "requires": {
+        "@fullcalendar/common": "~5.11.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@fullcalendar/timegrid": {
+      "version": "5.11.3",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-5.11.3.tgz",
+      "integrity": "sha512-SjIj2ZQ7nTyL1RxZkCPvNbuUQ0xHT+gfYJdUL3FT4bPjPJCxWtQ2CL8hxaeNmVozYYuy0yrGTW5Oup2+9IplbA==",
+      "dev": true,
+      "requires": {
+        "@fullcalendar/common": "~5.11.3",
+        "@fullcalendar/daygrid": "~5.11.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@fullcalendar/vue3": {
+      "version": "5.11.2",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-5.11.2.tgz",
+      "integrity": "sha512-ELx9zaU5zqTTCqeDd2GNhkdiTGVwTjjFQAMCX2Cc3fGI5dtMwpQb9Sg9RtLhabmydakdClGffFwCIDa91IoGlg==",
+      "dev": true,
+      "requires": {
+        "@fullcalendar/core": "~5.11.2",
+        "tslib": "^2.1.0"
+      }
+    },
     "@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -10281,6 +10680,16 @@
         "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",
@@ -10763,6 +11172,20 @@
         "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",
@@ -10784,6 +11207,16 @@
       "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",
@@ -11244,6 +11677,12 @@
         "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",
@@ -11273,6 +11712,12 @@
       "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",
@@ -11420,6 +11865,12 @@
       "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",
@@ -11483,6 +11934,17 @@
       "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",
@@ -11624,6 +12086,30 @@
       "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",
@@ -11783,6 +12269,16 @@
         "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",
@@ -11810,6 +12306,15 @@
         "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",
@@ -11885,6 +12390,16 @@
         "@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",
@@ -12681,6 +13196,22 @@
       "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",
@@ -12768,6 +13299,12 @@
       "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",
@@ -13221,6 +13758,12 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "preact": {
+      "version": "10.10.6",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.10.6.tgz",
+      "integrity": "sha512-w0mCL5vICUAZrh1DuHEdOWBjxdO62lvcO++jbzr8UhhYcTbFkpegLH9XX+7MadjTl/y0feoqwQ/zAnzkc/EGog==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
@@ -13275,6 +13818,45 @@
       "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",
@@ -13380,6 +13962,17 @@
         "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",
diff --git a/package.json b/package.json
index 1e9d7ba33..2f75296c2 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,12 @@
   },
   "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",
     "primeflex": "^3.2.1",
     "chart.js": "3.3.2",
     "primeicons": "^5.0.0",
diff --git a/pages/button/ButtonDoc.vue b/pages/button/ButtonDoc.vue
new file mode 100755
index 000000000..f4f4fc46c
--- /dev/null
+++ b/pages/button/ButtonDoc.vue
@@ -0,0 +1,882 @@
+<template>
+    <AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
+import Button from 'primevue/button';
+
+</code></pre>
+
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
+&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
+
+</code></pre>
+
+        <h5>Getting Started</h5>
+        <p>Button is created using the Button element.</p>
+        <pre v-code><code>
+&lt;Button /&gt;
+
+</code></pre>
+
+        <h5>Label</h5>
+        <p>Text of the button is defined using the <i>label</i> property.</p>
+        <pre v-code><code>
+&lt;Button label="Submit" /&gt;
+
+</code></pre>
+        <h5>Icons</h5>
+        <p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
+        <pre v-code><code>
+&lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
+
+</code></pre>
+
+        <h5>Events</h5>
+        <p>Events are defined with the standard notation.</p>
+        <pre v-code><code>
+&lt;Button label="Submit" @click="handleClick($event)"/&gt;
+
+</code></pre>
+
+        <h5>Severity</h5>
+        <p>Different options are available as severity levels.</p>
+
+        <ul>
+            <li>.p-button-secondary</li>
+            <li>.p-button-success</li>
+            <li>.p-button-info</li>
+            <li>.p-button-warning</li>
+            <li>.p-button-help</li>
+            <li>.p-button-danger</li>
+        </ul>
+
+        <pre v-code><code>
+&lt;Button label="Primary" /&gt;
+&lt;Button label="Secondary" class="p-button-secondary" /&gt;
+&lt;Button label="Success" class="p-button-success" /&gt;
+&lt;Button label="Info" class="p-button-info" /&gt;
+&lt;Button label="Warning" class="p-button-warning" /&gt;
+&lt;Button label="Warning" class="p-button-help" /&gt;
+&lt;Button label="Danger" class="p-button-danger" /&gt;
+
+</code></pre>
+
+        <h5>Text Buttons</h5>
+        <p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i> text buttons ignore severity levels and displayed as a regular text.</p>
+        <pre v-code><code>
+&lt;Button label="Submit" class="p-button-text" /&gt;
+&lt;Button icon="pi pi-check" class="p-button-text" /&gt;
+&lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
+&lt;Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text p-button-text" /&gt;
+
+</code></pre>
+
+        <h5>Raised and Rounded Buttons</h5>
+        <p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
+        <pre v-code><code>
+&lt;Button label="Primary" class="p-button-raised p-button-rounded" /&gt;
+
+</code></pre>
+
+        <h5>Outlined Buttons</h5>
+        <p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p>
+        <pre v-code><code>
+&lt;Button label="Primary" class="p-button-outlined" /&gt;
+
+</code></pre>
+
+        <h5>Link Buttons</h5>
+        <p>Use "p-button-link" class to render the button as a link.</p>
+        <pre v-code><code>
+&lt;Button label="Link" class="p-button-link" /&gt;
+
+</code></pre>
+
+        <h5>Badges</h5>
+        <p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p>
+
+        <pre v-code><code>
+&lt;Button type="button" label="Emails" badge="8" /&gt;
+&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" /&gt;
+
+</code></pre>
+
+        <h5>ButtonSet</h5>
+        <p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
+        <pre v-code><code>
+&lt;span class="p-buttonset"&gt;
+    &lt;Button label="Save" icon="pi pi-check" /&gt;
+    &lt;Button label="Delete" icon="pi pi-trash" /&gt;
+    &lt;Button label="Cancel" icon="pi pi-times" /&gt;
+&lt;/span&gt;
+
+</code></pre>
+
+        <h5>Sizes</h5>
+        <p>
+            2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for global
+            scaling see the <router-link to="/theming">theming</router-link> page.
+        </p>
+        <pre v-code><code>
+&lt;Button label="Small" icon="pi pi-check" class="p-button-sm"  /&gt;
+&lt;Button label="Normal" icon="pi pi-check" class="p-button"  /&gt;
+&lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
+
+</code></pre>
+
+        <h5>Loading State</h5>
+        <p>Button displays a <i>loadingIcon</i> when <i>loading</i> property is enabled.</p>
+        <pre v-code><code>
+&lt;Button label="Save" icon="pi pi-check" :loading="isLoading" /&gt;
+
+</code></pre>
+
+        <h5>Templating</h5>
+        <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
+        <pre v-code><code>
+&lt;Button type="button" class="px-3"&gt;
+    &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/&gt;
+&lt;/Button&gt;
+
+&lt;Button type="button" class="p-button-outlined p-button-success"&gt;
+    &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" /&gt;
+    &lt;span class="ml-2 font-bold"&gt;PrimeVue&lt;/span&gt;
+&lt;/Button&gt;
+
+</code></pre>
+
+        <h5>Properties</h5>
+        <p>Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Text of the button.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the icon.</td>
+                    </tr>
+                    <tr>
+                        <td>iconPos</td>
+                        <td>string</td>
+                        <td>left</td>
+                        <td>Position of the icon, valid values are "left", "right", "bottom" and "top".</td>
+                    </tr>
+                    <tr>
+                        <td>iconClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the icon.</td>
+                    </tr>
+                    <tr>
+                        <td>badge</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Value of the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>badgeClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the button is in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner pi-spin</td>
+                        <td>Icon to display in loading state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-button</td>
+                        <td>Button element</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-icon</td>
+                        <td>Icon element</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-label</td>
+                        <td>Label element of the button</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-sm</td>
+                        <td>Smaller button element</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-lg</td>
+                        <td>Larger button element</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Accessibility</h5>
+        <DevelopmentSection>
+            <h6>Screen Reader</h6>
+            <p>
+                Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the button is
+                icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
+            </p>
+
+            <pre v-code><code>
+&lt;Button icon="pi pi-check" aria-label="Submit" /&gt;
+
+&lt;Button icon="pi pi-check" label="Submit" /&gt;
+
+&lt;Button class="youtube p-0" aria-label="Youtube"&gt;
+    &lt;i class="pi pi-youtube px-2"&gt;&lt;/i&gt;
+    &lt;span class="px-3"&gt;Youtube&lt;/span&gt;
+&lt;/Button&gt;
+
+</code></pre>
+
+            <h6>Keyboard Support</h6>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><i>tab</i></td>
+                            <td>Moves focus to the button.</td>
+                        </tr>
+                        <tr>
+                            <td><i>enter</i></td>
+                            <td>Activates the button.</td>
+                        </tr>
+                        <tr>
+                            <td><i>space</i></td>
+                            <td>Activates the button.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DevelopmentSection>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            sources: {
+                'options-api': {
+                    tabName: 'Options API Source',
+                    content: `
+<template>
+    <div>
+        <h5>Basic</h5>
+        <Button label="Submit" />
+        <Button label="Disabled" disabled="disabled" />
+        <Button label="Link" class="p-button-link" />
+
+        <h5>Icons</h5>
+        <Button icon="pi pi-check" />
+        <Button label="Submit" icon="pi pi-check" />
+        <Button label="Submit" icon="pi pi-check" iconPos="right" />
+
+        <h5>Severities</h5>
+        <Button label="Primary" />
+        <Button label="Secondary" class="p-button-secondary" />
+        <Button label="Success" class="p-button-success" />
+        <Button label="Info" class="p-button-info" />
+        <Button label="Warning" class="p-button-warning" />
+        <Button label="Help" class="p-button-help" />
+        <Button label="Danger" class="p-button-danger" />
+
+        <h5>Raised Buttons</h5>
+        <Button label="Primary" class="p-button-raised" />
+        <Button label="Secondary" class="p-button-raised p-button-secondary" />
+        <Button label="Success" class="p-button-raised p-button-success" />
+        <Button label="Info" class="p-button-raised p-button-info" />
+        <Button label="Warning" class="p-button-raised p-button-warning" />
+        <Button label="Help" class="p-button-raised p-button-help" />
+        <Button label="Danger" class="p-button-raised p-button-danger" />
+
+        <h5>Rounded Buttons</h5>
+        <Button label="Primary" class="p-button-rounded" />
+        <Button label="Secondary" class="p-button-rounded p-button-secondary" />
+        <Button label="Success" class="p-button-rounded p-button-success" />
+        <Button label="Info" class="p-button-rounded p-button-info" />
+        <Button label="Warning" class="p-button-rounded p-button-warning" />
+        <Button label="Help" class="p-button-rounded p-button-help" />
+        <Button label="Danger" class="p-button-rounded p-button-danger" />
+
+        <h5>Text Buttons</h5>
+        <Button label="Primary" class="p-button-text" />
+        <Button label="Secondary" class="p-button-secondary p-button-text" />
+        <Button label="Success" class="p-button-success p-button-text" />
+        <Button label="Info" class="p-button-info p-button-text" />
+        <Button label="Warning" class="p-button-warning p-button-text" />
+        <Button label="Help" class="p-button-help p-button-text" />
+        <Button label="Danger" class="p-button-danger p-button-text" />
+        <Button label="Plain" class="p-button-text p-button-plain" />
+
+        <h5>Raised Text Buttons</h5>
+        <Button label="Primary" class="p-button-raised p-button-text" />
+        <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
+        <Button label="Success" class="p-button-raised p-button-success p-button-text" />
+        <Button label="Info" class="p-button-raised p-button-info p-button-text" />
+        <Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
+        <Button label="Help" class="p-button-raised p-button-help p-button-text" />
+        <Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
+        <Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
+
+        <h5>Outlined Buttons</h5>
+        <Button label="Primary" class="p-button-outlined" />
+        <Button label="Secondary" class="p-button-outlined p-button-secondary" />
+        <Button label="Success" class="p-button-outlined p-button-success" />
+        <Button label="Info" class="p-button-outlined p-button-info" />
+        <Button label="Warning" class="p-button-outlined p-button-warning" />
+        <Button label="Help" class="p-button-outlined p-button-help" />
+        <Button label="Danger" class="p-button-outlined p-button-danger" />
+
+        <h5>Rounded Icon Buttons</h5>
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
+        <Button icon="pi pi-check" class="p-button-rounded" />
+
+        <h5>Rounded Text Icon Buttons</h5>
+        <Button icon="pi pi-check" class="p-button-rounded p-button-text" />
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
+        <Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
+
+        <h5>Rounded and Outlined Icon Buttons</h5>
+        <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
+
+        <h5>Badges</h5>
+        <Button type="button" label="Emails" badge="8" />
+        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+
+        <h5>Loading</h5>
+        <Button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
+        <Button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)"  />
+        <Button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+        <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
+
+        <h5>Templating</h5>
+        <Button type="button" class="px-3">
+            <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/>
+        </Button>
+        <Button type="button" class="p-button-outlined p-button-success">
+            <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
+            <span class="ml-2 font-bold">PrimeVue</span>
+        </Button>
+
+        <h5>Button Set</h5>
+        <span class="p-buttonset">
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </span>
+
+        <h5>Sizes</h5>
+        <div class="sizes">
+            <Button label="Small" icon="pi pi-check" class="p-button-sm"  />
+            <Button label="Normal" icon="pi pi-check" class="p-button"  />
+            <Button label="Large" icon="pi pi-check" class="p-button-lg" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            loading: [false, false, false]
+        }
+    },
+    methods: {
+        load(index) {
+            this.loading[index] = true;
+            setTimeout(() => this.loading[index] = false, 1000);
+        }
+    }
+}
+<\\/script>
+
+<style lang="scss" scoped>
+.p-button {
+    margin-right: .5rem;
+}
+
+.p-buttonset {
+    .p-button {
+        margin-right: 0;
+    }
+}
+
+.sizes {
+    .button {
+        margin-bottom: .5rem;
+        display: block;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .p-button {
+        margin-bottom: .5rem;
+
+        &:not(.p-button-icon-only) {
+            display: flex;
+            width: 100%;
+        }
+    }
+
+    .p-buttonset {
+        .p-button {
+            margin-bottom: 0;
+        }
+    }
+}
+</style>`
+                },
+                'composition-api': {
+                    tabName: 'Composition API Source',
+                    content: `
+<template>
+    <div>
+        <h5>Basic</h5>
+        <Button label="Submit" />
+        <Button label="Disabled" disabled="disabled" />
+        <Button label="Link" class="p-button-link" />
+
+        <h5>Icons</h5>
+        <Button icon="pi pi-check" />
+        <Button label="Submit" icon="pi pi-check" />
+        <Button label="Submit" icon="pi pi-check" iconPos="right" />
+
+        <h5>Severities</h5>
+        <Button label="Primary" />
+        <Button label="Secondary" class="p-button-secondary" />
+        <Button label="Success" class="p-button-success" />
+        <Button label="Info" class="p-button-info" />
+        <Button label="Warning" class="p-button-warning" />
+        <Button label="Help" class="p-button-help" />
+        <Button label="Danger" class="p-button-danger" />
+
+        <h5>Raised Buttons</h5>
+        <Button label="Primary" class="p-button-raised" />
+        <Button label="Secondary" class="p-button-raised p-button-secondary" />
+        <Button label="Success" class="p-button-raised p-button-success" />
+        <Button label="Info" class="p-button-raised p-button-info" />
+        <Button label="Warning" class="p-button-raised p-button-warning" />
+        <Button label="Help" class="p-button-raised p-button-help" />
+        <Button label="Danger" class="p-button-raised p-button-danger" />
+
+        <h5>Rounded Buttons</h5>
+        <Button label="Primary" class="p-button-rounded" />
+        <Button label="Secondary" class="p-button-rounded p-button-secondary" />
+        <Button label="Success" class="p-button-rounded p-button-success" />
+        <Button label="Info" class="p-button-rounded p-button-info" />
+        <Button label="Warning" class="p-button-rounded p-button-warning" />
+        <Button label="Help" class="p-button-rounded p-button-help" />
+        <Button label="Danger" class="p-button-rounded p-button-danger" />
+
+        <h5>Text Buttons</h5>
+        <Button label="Primary" class="p-button-text" />
+        <Button label="Secondary" class="p-button-secondary p-button-text" />
+        <Button label="Success" class="p-button-success p-button-text" />
+        <Button label="Info" class="p-button-info p-button-text" />
+        <Button label="Warning" class="p-button-warning p-button-text" />
+        <Button label="Help" class="p-button-help p-button-text" />
+        <Button label="Danger" class="p-button-danger p-button-text" />
+        <Button label="Plain" class="p-button-text p-button-plain" />
+
+        <h5>Raised Text Buttons</h5>
+        <Button label="Primary" class="p-button-raised p-button-text" />
+        <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
+        <Button label="Success" class="p-button-raised p-button-success p-button-text" />
+        <Button label="Info" class="p-button-raised p-button-info p-button-text" />
+        <Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
+        <Button label="Help" class="p-button-raised p-button-help p-button-text" />
+        <Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
+        <Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
+
+        <h5>Outlined Buttons</h5>
+        <Button label="Primary" class="p-button-outlined" />
+        <Button label="Secondary" class="p-button-outlined p-button-secondary" />
+        <Button label="Success" class="p-button-outlined p-button-success" />
+        <Button label="Info" class="p-button-outlined p-button-info" />
+        <Button label="Warning" class="p-button-outlined p-button-warning" />
+        <Button label="Help" class="p-button-outlined p-button-help" />
+        <Button label="Danger" class="p-button-outlined p-button-danger" />
+
+        <h5>Rounded Icon Buttons</h5>
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
+        <Button icon="pi pi-check" class="p-button-rounded" />
+
+        <h5>Rounded Text Icon Buttons</h5>
+        <Button icon="pi pi-check" class="p-button-rounded p-button-text" />
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
+        <Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
+
+        <h5>Rounded and Outlined Icon Buttons</h5>
+        <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
+
+        <h5>Badges</h5>
+        <Button type="button" label="Emails" badge="8" />
+        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+
+        <h5>Loading</h5>
+        <Button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
+        <Button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)"  />
+        <Button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+        <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
+
+        <h5>Templating</h5>
+        <Button type="button" class="px-3">
+            <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/>
+        </Button>
+        <Button type="button" class="p-button-outlined p-button-success">
+            <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
+            <span class="ml-2 font-bold">PrimeVue</span>
+        </Button>
+
+        <h5>Button Set</h5>
+        <span class="p-buttonset">
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </span>
+
+        <h5>Sizes</h5>
+        <div class="sizes">
+            <Button label="Small" icon="pi pi-check" class="p-button-sm"  />
+            <Button label="Normal" icon="pi pi-check" class="p-button"  />
+            <Button label="Large" icon="pi pi-check" class="p-button-lg" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default({
+    setup() {
+        const loading = ref([false, false, false]);
+        const load = (index) => {
+            loading.value[index] = true;
+            setTimeout(() => loading.value[index] = false, 1000);
+        }
+
+        return {loading, load};
+    }
+});
+<\\/script>
+
+<style lang="scss" scoped>
+.p-button {
+    margin-right: .5rem;
+}
+
+.p-buttonset {
+    .p-button {
+        margin-right: 0;
+    }
+}
+
+.sizes {
+    .button {
+        margin-bottom: .5rem;
+        display: block;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .p-button {
+        margin-bottom: .5rem;
+
+        &:not(.p-button-icon-only) {
+            display: flex;
+            width: 100%;
+        }
+    }
+
+    .p-buttonset {
+        .p-button {
+            margin-bottom: 0;
+        }
+    }
+}
+</style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    content: `<div id="app">
+        <div class="card">
+            <h5>Basic</h5>
+            <p-button label="Submit"></p-button>
+            <p-button label="Disabled" disabled="disabled"></p-button>
+            <p-button label="Link" class="p-button-link"></p-button>
+
+            <h5>Icons</h5>
+            <p-button icon="pi pi-check"></p-button>
+            <p-button label="Submit" icon="pi pi-check"></p-button>
+            <p-button label="Submit" icon="pi pi-check" iconPos="right"></p-button>
+
+            <h5>Severities</h5>
+            <p-button label="Primary"></p-button>
+            <p-button label="Secondary" class="p-button-secondary"></p-button>
+            <p-button label="Success" class="p-button-success"></p-button>
+            <p-button label="Info" class="p-button-info"></p-button>
+            <p-button label="Warning" class="p-button-warning"></p-button>
+            <p-button label="Help" class="p-button-help"></p-button>
+            <p-button label="Danger" class="p-button-danger"></p-button>
+
+            <h5>Raised Buttons</h5>
+            <p-button label="Primary" class="p-button-raised"></p-button>
+            <p-button label="Secondary" class="p-button-raised p-button-secondary"></p-button>
+            <p-button label="Success" class="p-button-raised p-button-success"></p-button>
+            <p-button label="Info" class="p-button-raised p-button-info"></p-button>
+            <p-button label="Warning" class="p-button-raised p-button-warning"></p-button>
+            <p-button label="Help" class="p-button-raised p-button-help"></p-button>
+            <p-button label="Danger" class="p-button-raised p-button-danger"></p-button>
+
+            <h5>Rounded Buttons</h5>
+            <p-button label="Primary" class="p-button-rounded"></p-button>
+            <p-button label="Secondary" class="p-button-rounded p-button-secondary"></p-button>
+            <p-button label="Success" class="p-button-rounded p-button-success"></p-button>
+            <p-button label="Info" class="p-button-rounded p-button-info"></p-button>
+            <p-button label="Warning" class="p-button-rounded p-button-warning"></p-button>
+            <p-button label="Help" class="p-button-rounded p-button-help"></p-button>
+            <p-button label="Danger" class="p-button-rounded p-button-danger"></p-button>
+
+            <h5>Text Buttons</h5>
+            <p-button label="Primary" class="p-button-text"></p-button>
+            <p-button label="Secondary" class="p-button-secondary p-button-text"></p-button>
+            <p-button label="Success" class="p-button-success p-button-text"></p-button>
+            <p-button label="Info" class="p-button-info p-button-text"></p-button>
+            <p-button label="Warning" class="p-button-warning p-button-text"></p-button>
+            <p-button label="Help" class="p-button-help p-button-text"></p-button>
+            <p-button label="Danger" class="p-button-danger p-button-text"></p-button>
+            <p-button label="Plain" class="p-button-text p-button-plain"></p-button>
+
+            <h5>Raised Text Buttons</h5>
+            <p-button label="Primary" class="p-button-raised p-button-text"></p-button>
+            <p-button label="Secondary" class="p-button-raised p-button-secondary p-button-text"></p-button>
+            <p-button label="Success" class="p-button-raised p-button-success p-button-text"></p-button>
+            <p-button label="Info" class="p-button-raised p-button-info p-button-text"></p-button>
+            <p-button label="Warning" class="p-button-raised p-button-warning p-button-text"></p-button>
+            <p-button label="Help" class="p-button-raised p-button-help p-button-text"></p-button>
+            <p-button label="Danger" class="p-button-raised p-button-danger p-button-text"></p-button>
+            <p-button label="Plain" class="p-button-raised p-button-text p-button-plain"></p-button>
+
+            <h5>Outlined Buttons</h5>
+            <p-button label="Primary" class="p-button-outlined"></p-button>
+            <p-button label="Secondary" class="p-button-outlined p-button-secondary"></p-button>
+            <p-button label="Success" class="p-button-outlined p-button-success"></p-button>
+            <p-button label="Info" class="p-button-outlined p-button-info"></p-button>
+            <p-button label="Warning" class="p-button-outlined p-button-warning"></p-button>
+            <p-button label="Help" class="p-button-outlined p-button-help"></p-button>
+            <p-button label="Danger" class="p-button-outlined p-button-danger"></p-button>
+
+            <h5>Rounded Icon Buttons</h5>
+            <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary"></p-button>
+            <p-button icon="pi pi-search" class="p-button-rounded p-button-success"></p-button>
+            <p-button icon="pi pi-user" class="p-button-rounded p-button-info"></p-button>
+            <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning"></p-button>
+            <p-button icon="pi pi-heart" class="p-button-rounded p-button-help"></p-button>
+            <p-button icon="pi pi-times" class="p-button-rounded p-button-danger"></p-button>
+            <p-button icon="pi pi-check" class="p-button-rounded"></p-button>
+
+            <h5>Rounded Text Icon Buttons</h5>
+            <p-button icon="pi pi-check" class="p-button-rounded p-button-text"></p-button>
+            <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text"></p-button>
+            <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text"></p-button>
+            <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text"></p-button>
+            <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text"></p-button>
+            <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text"></p-button>
+            <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></p-button>
+            <p-button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain"></p-button>
+
+            <h5>Rounded and Outlined Icon Buttons</h5>
+            <p-button icon="pi pi-check" class="p-button-rounded p-button-outlined"></p-button>
+            <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined"></p-button>
+            <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined"></p-button>
+            <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined"></p-button>
+            <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined"></p-button>
+            <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined"></p-button>
+            <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined"></p-button>
+
+            <h5>Badges</h5>
+            <p-button type="button" label="Emails" badge="8"></p-button>
+            <p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
+
+            <h5>Loading</h5>
+            <p-button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)"></p-button>
+            <p-button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)"></p-button>
+            <p-button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)"></p-button>
+            <p-button type="button" label="Search" :loading="loading[3]" @click="load(3)"></p-button>
+
+            <h5>Templating</h5>
+            <p-button type="button" class="px-3">
+                <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
+            </p-button>
+            <p-button type="button" class="p-button-outlined p-button-success">
+                <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
+                <span class="ml-2 font-bold">PrimeVue</span>
+            </p-button>
+
+            <h5>Button Set</h5>
+            <span class="p-buttonset">
+                <p-button label="Save" icon="pi pi-check"></p-button>
+                <p-button label="Delete" icon="pi pi-trash"></p-button>
+                <p-button label="Cancel" icon="pi pi-times"></p-button>
+            </span>
+
+            <h5>Sizes</h5>
+            <div class="sizes">
+                <p-button label="Small" icon="pi pi-check" class="p-button-sm"></p-button>
+                <p-button label="Normal" icon="pi pi-check" class="p-button"></p-button>
+                <p-button label="Large" icon="pi pi-check" class="p-button-lg"></p-button>
+            </div>
+        </div>
+    </div>
+
+    <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const loading = ref([false, false, false]);
+                const load = (index) => {
+                    loading.value[index] = true;
+                    setTimeout(() => loading.value[index] = false, 1000);
+                }
+        
+                return {loading, load};
+            },
+            components: {
+                "p-button": primevue.button
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default, { ripple: true })
+            .mount("#app");
+    <\\/script>
+
+    <style>
+    .p-button {
+        margin-right: .5rem;
+    }
+
+    .p-buttonset .p-button {
+        margin-right: 0;
+    }
+
+    .sizes .button {
+        margin-bottom: .5rem;
+        display: block;
+    }
+
+    .sizes .button:last-child {
+        margin-bottom: 0;
+    }
+
+    @media screen and (max-width: 640px) {
+        .p-button {
+            margin-bottom: .5rem;
+        }
+
+        .p-button:not(.p-button-icon-only) {
+            display: flex;
+            width: 100%;
+        }
+
+        .p-buttonset .p-button {
+            margin-bottom: 0;
+        }
+    }
+    </style>
+    
+`
+                }
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/button/index.vue b/pages/button/index.vue
new file mode 100755
index 000000000..08651c9c0
--- /dev/null
+++ b/pages/button/index.vue
@@ -0,0 +1,372 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Button</h1>
+                <p>Button is an extension to standard button element with icons and theming.</p>
+            </div>
+            <AppDemoActions />
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Basic</h5>
+                <Button label="Submit" />
+                <Button label="Disabled" disabled="disabled" />
+                <Button label="Link" class="p-button-link" />
+
+                <h5>Icons</h5>
+                <Button icon="pi pi-check" aria-label="Submit" />
+                <Button label="Submit" icon="pi pi-check" />
+                <Button label="Submit" icon="pi pi-check" iconPos="right" />
+
+                <h5>Severities</h5>
+                <Button label="Primary" />
+                <Button label="Secondary" class="p-button-secondary" />
+                <Button label="Success" class="p-button-success" />
+                <Button label="Info" class="p-button-info" />
+                <Button label="Warning" class="p-button-warning" />
+                <Button label="Help" class="p-button-help" />
+                <Button label="Danger" class="p-button-danger" />
+
+                <h5>Raised Buttons</h5>
+                <Button label="Primary" class="p-button-raised" />
+                <Button label="Secondary" class="p-button-raised p-button-secondary" />
+                <Button label="Success" class="p-button-raised p-button-success" />
+                <Button label="Info" class="p-button-raised p-button-info" />
+                <Button label="Warning" class="p-button-raised p-button-warning" />
+                <Button label="Help" class="p-button-raised p-button-help" />
+                <Button label="Danger" class="p-button-raised p-button-danger" />
+
+                <h5>Rounded Buttons</h5>
+                <Button label="Primary" class="p-button-rounded" />
+                <Button label="Secondary" class="p-button-rounded p-button-secondary" />
+                <Button label="Success" class="p-button-rounded p-button-success" />
+                <Button label="Info" class="p-button-rounded p-button-info" />
+                <Button label="Warning" class="p-button-rounded p-button-warning" />
+                <Button label="Help" class="p-button-rounded p-button-help" />
+                <Button label="Danger" class="p-button-rounded p-button-danger" />
+
+                <h5>Text Buttons</h5>
+                <Button label="Primary" class="p-button-text" />
+                <Button label="Secondary" class="p-button-secondary p-button-text" />
+                <Button label="Success" class="p-button-success p-button-text" />
+                <Button label="Info" class="p-button-info p-button-text" />
+                <Button label="Warning" class="p-button-warning p-button-text" />
+                <Button label="Help" class="p-button-help p-button-text" />
+                <Button label="Danger" class="p-button-danger p-button-text" />
+                <Button label="Plain" class="p-button-text p-button-plain" />
+
+                <h5>Raised Text Buttons</h5>
+                <Button label="Primary" class="p-button-raised p-button-text" />
+                <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
+                <Button label="Success" class="p-button-raised p-button-success p-button-text" />
+                <Button label="Info" class="p-button-raised p-button-info p-button-text" />
+                <Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
+                <Button label="Help" class="p-button-raised p-button-help p-button-text" />
+                <Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
+                <Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
+
+                <h5>Outlined Buttons</h5>
+                <Button label="Primary" class="p-button-outlined" />
+                <Button label="Secondary" class="p-button-outlined p-button-secondary" />
+                <Button label="Success" class="p-button-outlined p-button-success" />
+                <Button label="Info" class="p-button-outlined p-button-info" />
+                <Button label="Warning" class="p-button-outlined p-button-warning" />
+                <Button label="Help" class="p-button-outlined p-button-help" />
+                <Button label="Danger" class="p-button-outlined p-button-danger" />
+
+                <h5>Rounded Icon Buttons</h5>
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" aria-label="Bookmark" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-success" aria-label="Search" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-info" aria-label="User" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning" aria-label="Notification" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help" aria-label="Favorite" />
+                <Button icon="pi pi-times" class="p-button-rounded p-button-danger" aria-label="Cancel" />
+                <Button icon="pi pi-check" class="p-button-rounded" aria-label="Filter" />
+
+                <h5>Rounded Text Icon Buttons</h5>
+                <Button icon="pi pi-check" class="p-button-rounded p-button-text" aria-label="Submit" />
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" aria-label="Bookmark" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" aria-label="Search" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" aria-label="User" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" aria-label="Notification" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" aria-label="Favorite" />
+                <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" aria-label="Cancel" />
+                <Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" aria-label="Filter" />
+
+                <h5>Rounded and Outlined Icon Buttons</h5>
+                <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" aria-label="Submit" />
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" aria-label="Bookmark" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" aria-label="Search" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" aria-label="User" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" aria-label="Notification" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" aria-label="Favorite" />
+                <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" aria-label="Cancel" />
+
+                <h5>Badges</h5>
+                <Button type="button" label="Emails" badge="8" />
+                <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+
+                <h5>Loading</h5>
+                <Button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
+                <Button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)" />
+                <Button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+                <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
+
+                <h5>Button Set</h5>
+                <span class="p-buttonset">
+                    <Button label="Save" icon="pi pi-check" />
+                    <Button label="Delete" icon="pi pi-trash" />
+                    <Button label="Cancel" icon="pi pi-times" />
+                </span>
+
+                <h5>Sizes</h5>
+                <div class="sizes">
+                    <Button label="Small" icon="pi pi-check" class="p-button-sm" />
+                    <Button label="Normal" icon="pi pi-check" class="p-button" />
+                    <Button label="Large" icon="pi pi-check" class="p-button-lg" />
+                </div>
+
+                <h5>Template</h5>
+                <div class="template">
+                    <Button class="google p-0" aria-label="Google">
+                        <i class="pi pi-google px-2"></i>
+                        <span class="px-3">Google</span>
+                    </Button>
+                    <Button class="youtube p-0" aria-label="Youtube">
+                        <i class="pi pi-youtube px-2"></i>
+                        <span class="px-3">Youtube</span>
+                    </Button>
+                    <Button class="vimeo p-0" aria-label="Vimeo">
+                        <i class="pi pi-vimeo px-2"></i>
+                        <span class="px-3">Vimeo</span>
+                    </Button>
+                    <Button class="facebook p-0" aria-label="Facebook">
+                        <i class="pi pi-facebook px-2"></i>
+                        <span class="px-3">Facebook</span>
+                    </Button>
+                    <Button class="twitter p-0" aria-label="Twitter">
+                        <i class="pi pi-twitter px-2"></i>
+                        <span class="px-3">Twitter</span>
+                    </Button>
+                    <Button class="slack p-0" aria-label="Slack">
+                        <i class="pi pi-slack px-2"></i>
+                        <span class="px-3">Slack</span>
+                    </Button>
+                    <Button class="amazon p-0" aria-label="Amazon">
+                        <i class="pi pi-amazon px-2"></i>
+                        <span class="px-3">Amazon</span>
+                    </Button>
+                    <Button class="discord p-0" aria-label="Discord">
+                        <i class="pi pi-discord px-2"></i>
+                        <span class="px-3">Discord</span>
+                    </Button>
+                </div>
+            </div>
+        </div>
+
+        <ButtonDoc />
+    </div>
+</template>
+
+<script>
+import ButtonDoc from './ButtonDoc';
+
+export default {
+    data() {
+        return {
+            loading: [false, false, false]
+        };
+    },
+    methods: {
+        load(index) {
+            this.loading[index] = true;
+            setTimeout(() => (this.loading[index] = false), 1000);
+        }
+    },
+    components: {
+        ButtonDoc: ButtonDoc
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.p-button {
+    margin-right: 0.5rem;
+}
+
+.p-buttonset {
+    .p-button {
+        margin-right: 0;
+    }
+}
+
+.sizes {
+    .button {
+        margin-bottom: 0.5rem;
+        display: block;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.template .p-button i {
+    line-height: 2.25rem;
+}
+.template .p-button.google {
+    background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--purple-700);
+}
+.template .p-button.google:hover {
+    background-position: left bottom;
+}
+.template .p-button.google i {
+    background-color: var(--purple-700);
+}
+.template .p-button.google:focus {
+    box-shadow: 0 0 0 1px var(--purple-400);
+}
+.template .p-button.youtube {
+    background: linear-gradient(to left, var(--pink-600) 50%, var(--pink-700) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--pink-700);
+}
+.template .p-button.youtube:hover {
+    background-position: left bottom;
+}
+.template .p-button.youtube i {
+    background-color: var(--pink-700);
+}
+.template .p-button.youtube:focus {
+    box-shadow: 0 0 0 1px var(--pink-400);
+}
+.template .p-button.vimeo {
+    background: linear-gradient(to left, var(--green-200) 50%, var(--green-300) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #000;
+    border-color: var(--green-300);
+}
+.template .p-button.vimeo:hover {
+    background-position: left bottom;
+}
+.template .p-button.vimeo i {
+    background-color: var(--green-300);
+}
+.template .p-button.vimeo:focus {
+    box-shadow: 0 0 0 1px var(--green-400);
+}
+.template .p-button.facebook {
+    background: linear-gradient(to left, var(--indigo-600) 50%, var(--indigo-700) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--indigo-700);
+}
+.template .p-button.facebook:hover {
+    background-position: left bottom;
+}
+.template .p-button.facebook i {
+    background-color: var(--indigo-700);
+}
+.template .p-button.facebook:focus {
+    box-shadow: 0 0 0 1px var(--indigo-400);
+}
+.template .p-button.twitter {
+    background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--blue-500);
+}
+.template .p-button.twitter:hover {
+    background-position: left bottom;
+}
+.template .p-button.twitter i {
+    background-color: var(--blue-500);
+}
+.template .p-button.twitter:focus {
+    box-shadow: 0 0 0 1px var(--blue-200);
+}
+.template .p-button.slack {
+    background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--orange-500);
+}
+.template .p-button.slack:hover {
+    background-position: left bottom;
+}
+.template .p-button.slack i {
+    background-color: var(--orange-500);
+}
+.template .p-button.slack:focus {
+    box-shadow: 0 0 0 1px var(--orange-200);
+}
+.template .p-button.amazon {
+    background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #000;
+    border-color: var(--yellow-500);
+}
+.template .p-button.amazon:hover {
+    background-position: left bottom;
+}
+.template .p-button.amazon i {
+    background-color: var(--yellow-500);
+}
+.template .p-button.amazon:focus {
+    box-shadow: 0 0 0 1px var(--yellow-200);
+}
+.template .p-button.discord {
+    background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--bluegray-800);
+}
+.template .p-button.discord:hover {
+    background-position: left bottom;
+}
+.template .p-button.discord i {
+    background-color: var(--bluegray-800);
+}
+.template .p-button.discord:focus {
+    box-shadow: 0 0 0 1px var(--bluegray-500);
+}
+
+@media screen and (max-width: 960px) {
+    .p-button {
+        margin-bottom: 0.5rem;
+
+        &:not(.p-button-icon-only) {
+            display: flex;
+            width: 100%;
+        }
+    }
+
+    .p-buttonset {
+        .p-button {
+            margin-bottom: 0;
+        }
+    }
+}
+</style>
diff --git a/pages/setup.vue b/pages/setup/index.vue
similarity index 100%
rename from pages/setup.vue
rename to pages/setup/index.vue
diff --git a/plugins/primeVue.js b/plugins/primeVue.js
index aaf72d3ea..e70e519b8 100644
--- a/plugins/primeVue.js
+++ b/plugins/primeVue.js
@@ -1,8 +1,212 @@
 import PrimeVue from '@/components/config/PrimeVue';
+import AutoComplete from '@/components/autocomplete/AutoComplete';
+import Accordion from '@/components/accordion/Accordion';
+import AccordionTab from '@/components/accordiontab/AccordionTab';
+import Avatar from '@/components/avatar/Avatar';
+import AvatarGroup from '@/components/avatargroup/AvatarGroup';
+import Badge from '@/components/badge/Badge';
+import BadgeDirective from '@/components/badgedirective/BadgeDirective';
+import BlockUI from '@/components/blockui/BlockUI';
+import Breadcrumb from '@/components/breadcrumb/Breadcrumb';
+import Button from '@/components/button/Button';
+import Calendar from '@/components/calendar/Calendar';
+import Card from '@/components/card/Card';
+import Carousel from '@/components/carousel/Carousel';
+import CascadeSelect from '@/components/cascadeselect/CascadeSelect';
+import Chart from '@/components/chart/Chart';
+import Checkbox from '@/components/checkbox/Checkbox';
+import Chip from '@/components/chip/Chip';
+import Chips from '@/components/chips/Chips';
+import ColorPicker from '@/components/colorpicker/ColorPicker';
+import Column from '@/components/column/Column';
+import ColumnGroup from '@/components/columngroup/ColumnGroup';
+import ConfirmDialog from '@/components/confirmdialog/ConfirmDialog';
+import ConfirmPopup from '@/components/confirmpopup/ConfirmPopup';
+import ConfirmationService from '@/components/confirmationservice/ConfirmationService';
+import ContextMenu from '@/components/contextmenu/ContextMenu';
+import DataTable from '@/components/datatable/DataTable';
+import DataView from '@/components/dataview/DataView';
+import DataViewLayoutOptions from '@/components/dataviewlayoutoptions/DataViewLayoutOptions';
+import DeferredContent from '@/components/deferredcontent/DeferredContent';
+import Dialog from '@/components/dialog/Dialog';
+import DynamicDialog from '@/components/dynamicdialog/DynamicDialog';
+import DialogService from '@/components/dialogservice/DialogService';
+import Divider from '@/components/divider/Divider';
+import Dock from '@/components/dock/Dock';
+import Dropdown from '@/components/dropdown/Dropdown';
+/* import Editor from '@/components/editor/Editor'; */
+import Fieldset from '@/components/fieldset/Fieldset';
+import FileUpload from '@/components/fileupload/FileUpload';
+import FullCalendar from '@/components/fullcalendar/FullCalendar';
+import Image from '@/components/image/Image';
+import InlineMessage from '@/components/inlinemessage/InlineMessage';
+import Inplace from '@/components/inplace/Inplace';
+import InputMask from '@/components/inputmask/InputMask';
+import InputNumber from '@/components/inputnumber/InputNumber';
+import InputSwitch from '@/components/inputswitch/InputSwitch';
+import InputText from '@/components/inputtext/InputText';
+import Knob from '@/components/knob/Knob';
+import Listbox from '@/components/listbox/Listbox';
+import MegaMenu from '@/components/megamenu/MegaMenu';
+import Menu from '@/components/menu/Menu';
+import Menubar from '@/components/menubar/Menubar';
+import Message from '@/components/message/Message';
+import MultiSelect from '@/components/multiselect/MultiSelect';
+import OrderList from '@/components/orderlist/OrderList';
+import OrganizationChart from '@/components/organizationchart/OrganizationChart';
+import OverlayPanel from '@/components/overlaypanel/OverlayPanel';
+import Paginator from '@/components/paginator/Paginator';
+import Panel from '@/components/panel/Panel';
+import PanelMenu from '@/components/panelmenu/PanelMenu';
+import Password from '@/components/password/Password';
+import PickList from '@/components/picklist/PickList';
+import ProgressBar from '@/components/progressbar/ProgressBar';
+import ProgressSpinner from '@/components/progressspinner/ProgressSpinner';
+import Rating from '@/components/rating/Rating';
+import RadioButton from '@/components/radiobutton/RadioButton';
+import Ripple from '@/components/ripple/Ripple';
+import Row from '@/components/row/Row';
+import ScrollPanel from '@/components/scrollpanel/ScrollPanel';
+import ScrollTop from '@/components/scrolltop/ScrollTop';
+import SelectButton from '@/components/selectbutton/SelectButton';
+import Skeleton from '@/components/skeleton/Skeleton';
+import Slider from '@/components/slider/Slider';
+import Sidebar from '@/components/sidebar/Sidebar';
+import SplitButton from '@/components/splitbutton/SplitButton';
+import SpeedDial from '@/components/speeddial/SpeedDial';
+import Splitter from '@/components/splitter/Splitter';
+import SplitterPanel from '@/components/splitterpanel/SplitterPanel';
+import Steps from '@/components/steps/Steps';
+import StyleClass from '@/components/styleclass/StyleClass';
+import TabMenu from '@/components/tabmenu/TabMenu';
+import TabView from '@/components/tabview/TabView';
+import TabPanel from '@/components/tabpanel/TabPanel';
+import Tag from '@/components/tag/Tag';
+import Terminal from '@/components/terminal/Terminal';
+import Textarea from '@/components/textarea/Textarea';
+import TieredMenu from '@/components/tieredmenu/TieredMenu';
+import Timeline from '@/components/timeline/Timeline';
+import Tree from '@/components/tree/Tree';
+import TreeSelect from '@/components/treeselect/TreeSelect';
+import TreeTable from '@/components/treetable/TreeTable';
+import Toast from '@/components/toast/Toast';
+import ToastService from '@/components/toastservice/ToastService';
+import ToggleButton from '@/components/togglebutton/ToggleButton';
+import Toolbar from '@/components/toolbar/Toolbar';
+import Tooltip from '@/components/tooltip/Tooltip';
+import TriStateCheckbox from '@/components/tristatecheckbox/TriStateCheckbox';
+import Galleria from '@/components/galleria/Galleria';
+import VirtualScroller from '@/components/virtualscroller/VirtualScroller';
+
+import AppDemoActions from '@/layouts/AppDemoActions'
 import CodeHighlight from '@/layouts/AppCodeHighlight';
 
 export default defineNuxtPlugin((nuxtApp) => {
   console.log(PrimeVue)
-  nuxtApp.vueApp.use(PrimeVue);
-  nuxtApp.vueApp.directive('code', CodeHighlight)
+  nuxtApp.vueApp.use(PrimeVue, { ripple: true });
+
+nuxtApp.vueApp.use(ToastService);
+nuxtApp.vueApp.use(ConfirmationService);
+nuxtApp.vueApp.use(DialogService);
+
+nuxtApp.vueApp.directive('badge', BadgeDirective);
+nuxtApp.vueApp.directive('tooltip', Tooltip);
+nuxtApp.vueApp.directive('ripple', Ripple);
+nuxtApp.vueApp.directive('styleclass', StyleClass);
+nuxtApp.vueApp.directive('code', CodeHighlight)
+
+nuxtApp.vueApp.component('Accordion', Accordion);
+nuxtApp.vueApp.component('AccordionTab', AccordionTab);
+nuxtApp.vueApp.component('Avatar', Avatar);
+nuxtApp.vueApp.component('AvatarGroup', AvatarGroup);
+nuxtApp.vueApp.component('AutoComplete', AutoComplete);
+nuxtApp.vueApp.component('Badge', Badge);
+nuxtApp.vueApp.component('BlockUI', BlockUI);
+nuxtApp.vueApp.component('Breadcrumb', Breadcrumb);
+nuxtApp.vueApp.component('Button', Button);
+nuxtApp.vueApp.component('Calendar', Calendar);
+nuxtApp.vueApp.component('Card', Card);
+nuxtApp.vueApp.component('Carousel', Carousel);
+nuxtApp.vueApp.component('CascadeSelect', CascadeSelect);
+nuxtApp.vueApp.component('Chart', Chart);
+nuxtApp.vueApp.component('Checkbox', Checkbox);
+nuxtApp.vueApp.component('Chip', Chip);
+nuxtApp.vueApp.component('Chips', Chips);
+nuxtApp.vueApp.component('ColorPicker', ColorPicker);
+nuxtApp.vueApp.component('Column', Column);
+nuxtApp.vueApp.component('ColumnGroup', ColumnGroup);
+nuxtApp.vueApp.component('ConfirmDialog', ConfirmDialog);
+nuxtApp.vueApp.component('ConfirmPopup', ConfirmPopup);
+nuxtApp.vueApp.component('ContextMenu', ContextMenu);
+nuxtApp.vueApp.component('DataTable', DataTable);
+nuxtApp.vueApp.component('DataView', DataView);
+nuxtApp.vueApp.component('DataViewLayoutOptions', DataViewLayoutOptions);
+nuxtApp.vueApp.component('DeferredContent', DeferredContent);
+nuxtApp.vueApp.component('Dialog', Dialog);
+nuxtApp.vueApp.component('DynamicDialog', DynamicDialog);
+nuxtApp.vueApp.component('Divider', Divider);
+nuxtApp.vueApp.component('Dock', Dock);
+nuxtApp.vueApp.component('Dropdown', Dropdown);
+// Quill package issue
+/* nuxtApp.vueApp.component('Editor', Editor); */
+nuxtApp.vueApp.component('Fieldset', Fieldset);
+nuxtApp.vueApp.component('FileUpload', FileUpload);
+nuxtApp.vueApp.component('FullCalendar', FullCalendar);
+nuxtApp.vueApp.component('Image', Image);
+nuxtApp.vueApp.component('InlineMessage', InlineMessage);
+nuxtApp.vueApp.component('Inplace', Inplace);
+nuxtApp.vueApp.component('InputMask', InputMask);
+nuxtApp.vueApp.component('InputNumber', InputNumber);
+nuxtApp.vueApp.component('InputSwitch', InputSwitch);
+nuxtApp.vueApp.component('InputText', InputText);
+nuxtApp.vueApp.component('Knob', Knob);
+nuxtApp.vueApp.component('Listbox', Listbox);
+nuxtApp.vueApp.component('MegaMenu', MegaMenu);
+nuxtApp.vueApp.component('Menu', Menu);
+nuxtApp.vueApp.component('Menubar', Menubar);
+nuxtApp.vueApp.component('Message', Message);
+nuxtApp.vueApp.component('MultiSelect', MultiSelect);
+nuxtApp.vueApp.component('OrderList', OrderList);
+nuxtApp.vueApp.component('OrganizationChart', OrganizationChart);
+nuxtApp.vueApp.component('OverlayPanel', OverlayPanel);
+nuxtApp.vueApp.component('Paginator', Paginator);
+nuxtApp.vueApp.component('Panel', Panel);
+nuxtApp.vueApp.component('PanelMenu', PanelMenu);
+nuxtApp.vueApp.component('Password', Password);
+nuxtApp.vueApp.component('PickList', PickList);
+nuxtApp.vueApp.component('ProgressBar', ProgressBar);
+nuxtApp.vueApp.component('ProgressSpinner', ProgressSpinner);
+nuxtApp.vueApp.component('RadioButton', RadioButton);
+nuxtApp.vueApp.component('Rating', Rating);
+nuxtApp.vueApp.component('Row', Row);
+nuxtApp.vueApp.component('ScrollPanel', ScrollPanel);
+nuxtApp.vueApp.component('ScrollTop', ScrollTop);
+nuxtApp.vueApp.component('SelectButton', SelectButton);
+nuxtApp.vueApp.component('Slider', Slider);
+nuxtApp.vueApp.component('Sidebar', Sidebar);
+nuxtApp.vueApp.component('Skeleton', Skeleton);
+nuxtApp.vueApp.component('SpeedDial', SpeedDial);
+nuxtApp.vueApp.component('SplitButton', SplitButton);
+nuxtApp.vueApp.component('Splitter', Splitter);
+nuxtApp.vueApp.component('SplitterPanel', SplitterPanel);
+nuxtApp.vueApp.component('Steps', Steps);
+nuxtApp.vueApp.component('TabView', TabView);
+nuxtApp.vueApp.component('TabPanel', TabPanel);
+nuxtApp.vueApp.component('TabMenu', TabMenu);
+nuxtApp.vueApp.component('Tag', Tag);
+nuxtApp.vueApp.component('Terminal', Terminal);
+nuxtApp.vueApp.component('Textarea', Textarea);
+nuxtApp.vueApp.component('TieredMenu', TieredMenu);
+nuxtApp.vueApp.component('Timeline', Timeline);
+nuxtApp.vueApp.component('Toast', Toast);
+nuxtApp.vueApp.component('Toolbar', Toolbar);
+nuxtApp.vueApp.component('ToggleButton', ToggleButton);
+nuxtApp.vueApp.component('Tree', Tree);
+nuxtApp.vueApp.component('TreeSelect', TreeSelect);
+nuxtApp.vueApp.component('TreeTable', TreeTable);
+nuxtApp.vueApp.component('TriStateCheckbox', TriStateCheckbox);
+nuxtApp.vueApp.component('Galleria', Galleria);
+nuxtApp.vueApp.component('VirtualScroller', VirtualScroller);
+
+nuxtApp.vueApp.component('AppDemoActions', AppDemoActions);
 }); 
\ No newline at end of file