From 001de2be44d4de2af2032ff3b858867942e9a290 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Mon, 7 Nov 2022 15:13:51 +0300
Subject: [PATCH] components tag order added

---
 .eslintrc.cjs                             |   8 +-
 src/layout/AppConfig.vue                  |  88 +--
 src/layout/AppFooter.vue                  |  16 +-
 src/layout/AppLayout.vue                  |  34 +-
 src/layout/AppTopbar.vue                  |  44 +-
 src/layout/BlockViewer.vue                |  56 +-
 src/layout/CodeHighlight.js               |   2 +-
 src/layout/composables/layoutService.js   |   6 +-
 src/layout/service/CountryService.js      |   6 +-
 src/layout/service/CustomerService.js     |  30 +-
 src/layout/service/NodeService.js         |  12 +-
 src/layout/service/PhotoService.js        |   6 +-
 src/layout/service/ProductService.js      |  18 +-
 src/views/Dashboard.vue                   | 232 +++----
 src/views/pages/Crud.vue                  | 250 +++----
 src/views/pages/Landing.vue               |  32 +-
 src/views/pages/Timeline.vue              |  68 +-
 src/views/pages/auth/Login.vue            |  30 +-
 src/views/uikit/Button.vue                |  58 +-
 src/views/uikit/Chart.vue                 |  74 +-
 src/views/uikit/File.vue                  |  20 +-
 src/views/uikit/FloatLabel.vue            |  86 +--
 src/views/uikit/FormLayout.vue            |  24 +-
 src/views/uikit/Icons.vue                 |  68 +-
 src/views/uikit/Input.vue                 | 154 ++---
 src/views/uikit/InvalidState.vue          |  88 +--
 src/views/uikit/List.vue                  | 118 ++--
 src/views/uikit/Media.vue                 | 104 +--
 src/views/uikit/Menu.vue                  | 178 ++---
 src/views/uikit/Messages.vue              |  78 +--
 src/views/uikit/Misc.vue                  |  58 +-
 src/views/uikit/Overlay.vue               | 150 ++--
 src/views/uikit/Panels.vue                |  66 +-
 src/views/uikit/Table.vue                 | 206 +++---
 src/views/uikit/Tree.vue                  |  32 +-
 src/views/uikit/menu/ConfirmationDemo.vue |   6 -
 src/views/uikit/menu/PaymentDemo.vue      |   6 -
 src/views/uikit/menu/PersonalDemo.vue     |   6 -
 src/views/uikit/menu/SeatDemo.vue         |   6 -
 src/views/utilities/Blocks.vue            | 788 +++++++++++-----------
 src/views/utilities/Icons.vue             |  60 +-
 41 files changed, 1677 insertions(+), 1695 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index b1a0b0f..5fdd816 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -9,6 +9,12 @@ module.exports = {
     },
     rules: {
         'vue/multi-word-component-names': 'off',
-        'vue/no-reserved-component-names': 'off'
+        'vue/no-reserved-component-names': 'off',
+        'vue/component-tags-order': [
+            'error',
+            {
+                order: ['script', 'template', 'style']
+            }
+        ]
     }
 };
diff --git a/src/layout/AppConfig.vue b/src/layout/AppConfig.vue
index d9cd1af..70afbac 100644
--- a/src/layout/AppConfig.vue
+++ b/src/layout/AppConfig.vue
@@ -1,3 +1,47 @@
+<script setup>
+import { ref } from 'vue';
+import { useLayoutService } from '@/layout/composables/layoutService';
+
+const scales = ref([12, 13, 14, 15, 16]);
+const visible = ref(false);
+
+const { changeThemeSettings, setScale, layoutConfig } = useLayoutService();
+
+const onConfigButtonClick = () => {
+    visible.value = !visible.value;
+};
+
+const onChangeTheme = (theme, mode) => {
+    const elementId = 'theme-css';
+    const linkElement = document.getElementById(elementId);
+    const cloneLinkElement = linkElement.cloneNode(true);
+    const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, 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);
+
+    changeThemeSettings(theme, mode === 'dark');
+};
+
+const decrementScale = () => {
+    setScale(layoutConfig.scale.value - 1);
+    applyScale();
+};
+
+const incrementScale = () => {
+    setScale(layoutConfig.scale.value + 1);
+    console.log(layoutConfig.scale);
+    applyScale();
+};
+const applyScale = () => {
+    document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
+};
+</script>
+
 <template>
     <button class="layout-config-button p-link" type="button" @click="onConfigButtonClick()">
         <i class="pi pi-cog"></i>
@@ -242,48 +286,4 @@
     </Sidebar>
 </template>
 
-<script setup>
-import { ref } from 'vue';
-import { useLayoutService } from '@/layout/composables/layoutService';
-
-const scales = ref([12, 13, 14, 15, 16]);
-const visible = ref(false);
-
-const { changeThemeSettings, setScale, layoutConfig } = useLayoutService();
-
-const onConfigButtonClick = () => {
-    visible.value = !visible.value;
-};
-
-const onChangeTheme = (theme, mode) => {
-    const elementId = 'theme-css';
-    const linkElement = document.getElementById(elementId);
-    const cloneLinkElement = linkElement.cloneNode(true);
-    const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, 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);
-
-    changeThemeSettings(theme, mode === 'dark');
-};
-
-const decrementScale = () => {
-    setScale(layoutConfig.scale.value - 1);
-    applyScale();
-};
-
-const incrementScale = () => {
-    setScale(layoutConfig.scale.value + 1);
-    console.log(layoutConfig.scale);
-    applyScale();
-};
-const applyScale = () => {
-    document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
-};
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/layout/AppFooter.vue b/src/layout/AppFooter.vue
index e6000a9..907c9a6 100644
--- a/src/layout/AppFooter.vue
+++ b/src/layout/AppFooter.vue
@@ -1,11 +1,3 @@
-<template>
-    <div class="layout-footer">
-        <img :src="logoUrl()" alt="Logo" height="20" class="mr-2" />
-        by
-        <span class="font-medium ml-2">PrimeNG</span>
-    </div>
-</template>
-
 <script setup>
 import { useLayoutService } from '@/layout/composables/layoutService';
 
@@ -15,4 +7,12 @@ const logoUrl = () => {
     return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
 };
 </script>
+
+<template>
+    <div class="layout-footer">
+        <img :src="logoUrl()" alt="Logo" height="20" class="mr-2" />
+        by
+        <span class="font-medium ml-2">PrimeNG</span>
+    </div>
+</template>
 <style lang="scss" scoped></style>
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 3600767..cffb965 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -1,20 +1,3 @@
-<template>
-    <div class="layout-wrapper" :class="containerClass">
-        <app-topbar></app-topbar>
-        <div class="layout-sidebar">
-            <app-sidebar></app-sidebar>
-        </div>
-        <div class="layout-main-container">
-            <div class="layout-main">
-                <router-view></router-view>
-            </div>
-            <app-footer></app-footer>
-        </div>
-        <app-config></app-config>
-        <div class="layout-mask"></div>
-    </div>
-</template>
-
 <script setup>
 import { computed, watch, ref } from 'vue';
 import AppTopbar from './AppTopbar.vue';
@@ -74,4 +57,21 @@ const isOutsideClicked = (event) => {
 };
 </script>
 
+<template>
+    <div class="layout-wrapper" :class="containerClass">
+        <app-topbar></app-topbar>
+        <div class="layout-sidebar">
+            <app-sidebar></app-sidebar>
+        </div>
+        <div class="layout-main-container">
+            <div class="layout-main">
+                <router-view></router-view>
+            </div>
+            <app-footer></app-footer>
+        </div>
+        <app-config></app-config>
+        <div class="layout-mask"></div>
+    </div>
+</template>
+
 <style lang="scss" scoped></style>
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index 5e793c5..5b087ce 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -1,3 +1,25 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useLayoutService } from '@/layout/composables/layoutService';
+
+const { layoutConfig, onMenuToggle } = useLayoutService();
+
+const topbarMenuActive = ref(false);
+const logoUrl = () => {
+    return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
+};
+
+const onTopBarMenuButton = () => {
+    topbarMenuActive.value = !topbarMenuActive.value;
+};
+
+const topbarMenuClasses = computed(() => {
+    return {
+        'layout-topbar-menu-mobile-active': topbarMenuActive.value
+    };
+});
+</script>
+
 <template>
     <div class="layout-topbar">
         <router-link to="/" class="layout-topbar-logo">
@@ -30,26 +52,4 @@
     </div>
 </template>
 
-<script setup>
-import { ref, computed } from 'vue';
-import { useLayoutService } from '@/layout/composables/layoutService';
-
-const { layoutConfig, onMenuToggle } = useLayoutService();
-
-const topbarMenuActive = ref(false);
-const logoUrl = () => {
-    return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
-};
-
-const onTopBarMenuButton = () => {
-    topbarMenuActive.value = !topbarMenuActive.value;
-};
-
-const topbarMenuClasses = computed(() => {
-    return {
-        'layout-topbar-menu-mobile-active': topbarMenuActive.value
-    };
-});
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/layout/BlockViewer.vue b/src/layout/BlockViewer.vue
index 772ffd1..c3a9823 100644
--- a/src/layout/BlockViewer.vue
+++ b/src/layout/BlockViewer.vue
@@ -1,31 +1,3 @@
-<template>
-    <div class="block-section">
-        <div class="block-header">
-            <span class="block-title">
-                <span>{{ header }}</span>
-                <span class="badge-new" v-if="recent">New</span>
-            </span>
-            <div class="block-actions">
-                <a tabindex="0" :class="{ 'block-action-active': blockView === BlockView.PREVIEW }" @click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
-                <a :tabindex="'0'" :class="{ 'block-action-active': blockView === BlockView.CODE }" @click="activateView($event, BlockView.CODE)">
-                    <span>Code</span>
-                </a>
-                <a :tabindex="0" class="block-action-copy" @click="copyCode($event)" v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
-            </div>
-        </div>
-        <div class="block-content">
-            <div :class="containerClass" :style="previewStyle" v-if="blockView == BlockView.PREVIEW">
-                <slot></slot>
-            </div>
-            <div v-if="blockView === BlockView.CODE">
-                <pre v-code><code>{{code}}
-
-</code></pre>
-            </div>
-        </div>
-    </div>
-</template>
-
 <script>
 export default {
     props: {
@@ -63,6 +35,34 @@ export default {
 };
 </script>
 
+<template>
+    <div class="block-section">
+        <div class="block-header">
+            <span class="block-title">
+                <span>{{ header }}</span>
+                <span class="badge-new" v-if="recent">New</span>
+            </span>
+            <div class="block-actions">
+                <a tabindex="0" :class="{ 'block-action-active': blockView === BlockView.PREVIEW }" @click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
+                <a :tabindex="'0'" :class="{ 'block-action-active': blockView === BlockView.CODE }" @click="activateView($event, BlockView.CODE)">
+                    <span>Code</span>
+                </a>
+                <a :tabindex="0" class="block-action-copy" @click="copyCode($event)" v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
+            </div>
+        </div>
+        <div class="block-content">
+            <div :class="containerClass" :style="previewStyle" v-if="blockView == BlockView.PREVIEW">
+                <slot></slot>
+            </div>
+            <div v-if="blockView === BlockView.CODE">
+                <pre v-code><code>{{code}}
+
+</code></pre>
+            </div>
+        </div>
+    </div>
+</template>
+
 <style scoped lang="scss">
 .block-section {
     margin-bottom: 4rem;
diff --git a/src/layout/CodeHighlight.js b/src/layout/CodeHighlight.js
index efec602..5aa23c9 100644
--- a/src/layout/CodeHighlight.js
+++ b/src/layout/CodeHighlight.js
@@ -1,7 +1,7 @@
 import Prism from 'prismjs';
 
 const CodeHighlight = {
-    beforeMount (el, binding) {
+    beforeMount(el, binding) {
         const modifiers = binding.modifiers;
         const value = binding.value;
 
diff --git a/src/layout/composables/layoutService.js b/src/layout/composables/layoutService.js
index 2dd25d8..ae2a3e0 100644
--- a/src/layout/composables/layoutService.js
+++ b/src/layout/composables/layoutService.js
@@ -19,17 +19,17 @@ const layoutState = reactive({
     menuHoverActive: false
 });
 
-export function useLayoutService () {
+export function useLayoutService() {
     const changeThemeSettings = (theme, darkTheme) => {
         layoutConfig.theme = theme;
         layoutConfig.darkTheme = darkTheme;
     };
 
-    const setScale = scale => {
+    const setScale = (scale) => {
         layoutConfig.scale = scale;
     };
 
-    const setActiveMenuItem = item => {
+    const setActiveMenuItem = (item) => {
         layoutConfig.activeMenuItem = item.value || item;
     };
 
diff --git a/src/layout/service/CountryService.js b/src/layout/service/CountryService.js
index d4be0aa..2b2bc0a 100755
--- a/src/layout/service/CountryService.js
+++ b/src/layout/service/CountryService.js
@@ -1,7 +1,7 @@
 export default class CountryService {
-    getCountries () {
+    getCountries() {
         return fetch('/data/countries.json')
-            .then(res => res.json())
-            .then(d => d.data);
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 }
diff --git a/src/layout/service/CustomerService.js b/src/layout/service/CustomerService.js
index 3163911..c02ffd9 100755
--- a/src/layout/service/CustomerService.js
+++ b/src/layout/service/CustomerService.js
@@ -1,32 +1,32 @@
 export default class CustomerService {
-    getCustomersSmall () {
+    getCustomersSmall() {
         return fetch('/data/customers-small.json')
-            .then(res => res.json())
-            .then(d => d.data);
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getCustomersMedium () {
+    getCustomersMedium() {
         return fetch('/data/customers-medium.json')
-            .then(res => res.json())
-            .then(d => d.data);
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getCustomersLarge () {
+    getCustomersLarge() {
         return fetch('/data/customers-large.json')
-            .then(res => res.json())
-            .then(d => d.data);
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getCustomersXLarge () {
+    getCustomersXLarge() {
         return fetch('/data/customers-xlarge.json')
-            .then(res => res.json())
-            .then(d => d.data);
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getCustomers (params) {
+    getCustomers(params) {
         const queryParams = Object.keys(params)
-            .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+            .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
             .join('&');
-        return fetch('https://www.primefaces.org//data/customers?' + queryParams).then(res => res.json());
+        return fetch('https://www.primefaces.org//data/customers?' + queryParams).then((res) => res.json());
     }
 }
diff --git a/src/layout/service/NodeService.js b/src/layout/service/NodeService.js
index 9a047ca..f822340 100755
--- a/src/layout/service/NodeService.js
+++ b/src/layout/service/NodeService.js
@@ -1,13 +1,13 @@
 export default class NodeService {
-    getTreeTableNodes () {
+    getTreeTableNodes() {
         return fetch('/data/treetablenodes.json')
-            .then(res => res.json())
-            .then(d => d.root);
+            .then((res) => res.json())
+            .then((d) => d.root);
     }
 
-    getTreeNodes () {
+    getTreeNodes() {
         return fetch('/data/treenodes.json')
-            .then(res => res.json())
-            .then(d => d.root);
+            .then((res) => res.json())
+            .then((d) => d.root);
     }
 }
diff --git a/src/layout/service/PhotoService.js b/src/layout/service/PhotoService.js
index 4611f84..4119c48 100644
--- a/src/layout/service/PhotoService.js
+++ b/src/layout/service/PhotoService.js
@@ -1,7 +1,7 @@
 export default class PhotoService {
-    getImages () {
+    getImages() {
         return fetch('/data/photos.json')
-            .then(res => res.json())
-            .then(d => d.data);
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 }
diff --git a/src/layout/service/ProductService.js b/src/layout/service/ProductService.js
index 3be066c..6f320fe 100644
--- a/src/layout/service/ProductService.js
+++ b/src/layout/service/ProductService.js
@@ -1,19 +1,19 @@
 export default class ProductService {
-    getProductsSmall () {
+    getProductsSmall() {
         return fetch('/data/products-small.json')
-            .then(res => res.json())
-            .then(d => d.data);
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getProducts () {
+    getProducts() {
         return fetch('/data/products.json')
-            .then(res => res.json())
-            .then(d => d.data);
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 
-    getProductsWithOrdersSmall () {
+    getProductsWithOrdersSmall() {
         return fetch('/data/products-orders-small.json')
-            .then(res => res.json())
-            .then(d => d.data);
+            .then((res) => res.json())
+            .then((d) => d.data);
     }
 }
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index bf93b55..e24d496 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,3 +1,119 @@
+<script setup>
+import { onMounted, reactive, ref, watch } from 'vue';
+import ProductService from '@/layout/service/ProductService';
+import { useLayoutService } from '@/layout/composables/layoutService';
+
+const { isDarkTheme } = useLayoutService();
+
+const products = ref(null);
+const lineData = reactive({
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    datasets: [
+        {
+            label: 'Revenue',
+            data: [65, 59, 80, 81, 56, 55, 40],
+            fill: false,
+            backgroundColor: '#2f4860',
+            borderColor: '#2f4860',
+            tension: 0.4
+        },
+        {
+            label: 'Sales',
+            data: [28, 48, 40, 19, 86, 27, 90],
+            fill: false,
+            backgroundColor: '#00bb7e',
+            borderColor: '#00bb7e',
+            tension: 0.4
+        }
+    ]
+});
+const items = ref([
+    { label: 'Add New', icon: 'pi pi-fw pi-plus' },
+    { label: 'Remove', icon: 'pi pi-fw pi-minus' }
+]);
+const lineOptions = ref(null);
+const productService = new ProductService();
+
+onMounted(() => {
+    productService.getProductsSmall().then((data) => (products.value = data));
+});
+
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+const applyLightTheme = () => {
+    lineOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#495057'
+                }
+            }
+        },
+        scales: {
+            x: {
+                ticks: {
+                    color: '#495057'
+                },
+                grid: {
+                    color: '#ebedef'
+                }
+            },
+            y: {
+                ticks: {
+                    color: '#495057'
+                },
+                grid: {
+                    color: '#ebedef'
+                }
+            }
+        }
+    };
+};
+
+const applyDarkTheme = () => {
+    lineOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#495057'
+                }
+            }
+        },
+        scales: {
+            x: {
+                ticks: {
+                    color: '#495057'
+                },
+                grid: {
+                    color: '#ebedef'
+                }
+            },
+            y: {
+                ticks: {
+                    color: '#495057'
+                },
+                grid: {
+                    color: '#ebedef'
+                }
+            }
+        }
+    };
+};
+
+watch(
+    isDarkTheme,
+    (val) => {
+        if (val) {
+            applyDarkTheme();
+        } else {
+            applyLightTheme();
+        }
+    },
+    { immediate: true }
+);
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12 lg:col-6 xl:col-3">
@@ -239,119 +355,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import { onMounted, reactive, ref, watch } from 'vue';
-import ProductService from '@/layout/service/ProductService';
-import { useLayoutService } from '@/layout/composables/layoutService';
-
-const { isDarkTheme } = useLayoutService();
-
-const products = ref(null);
-const lineData = reactive({
-    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-    datasets: [
-        {
-            label: 'Revenue',
-            data: [65, 59, 80, 81, 56, 55, 40],
-            fill: false,
-            backgroundColor: '#2f4860',
-            borderColor: '#2f4860',
-            tension: 0.4
-        },
-        {
-            label: 'Sales',
-            data: [28, 48, 40, 19, 86, 27, 90],
-            fill: false,
-            backgroundColor: '#00bb7e',
-            borderColor: '#00bb7e',
-            tension: 0.4
-        }
-    ]
-});
-const items = ref([
-    { label: 'Add New', icon: 'pi pi-fw pi-plus' },
-    { label: 'Remove', icon: 'pi pi-fw pi-minus' }
-]);
-const lineOptions = ref(null);
-const productService = new ProductService();
-
-onMounted(() => {
-    productService.getProductsSmall().then((data) => (products.value = data));
-});
-
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-const applyLightTheme = () => {
-    lineOptions.value = {
-        plugins: {
-            legend: {
-                labels: {
-                    color: '#495057'
-                }
-            }
-        },
-        scales: {
-            x: {
-                ticks: {
-                    color: '#495057'
-                },
-                grid: {
-                    color: '#ebedef'
-                }
-            },
-            y: {
-                ticks: {
-                    color: '#495057'
-                },
-                grid: {
-                    color: '#ebedef'
-                }
-            }
-        }
-    };
-};
-
-const applyDarkTheme = () => {
-    lineOptions.value = {
-        plugins: {
-            legend: {
-                labels: {
-                    color: '#495057'
-                }
-            }
-        },
-        scales: {
-            x: {
-                ticks: {
-                    color: '#495057'
-                },
-                grid: {
-                    color: '#ebedef'
-                }
-            },
-            y: {
-                ticks: {
-                    color: '#495057'
-                },
-                grid: {
-                    color: '#ebedef'
-                }
-            }
-        }
-    };
-};
-
-watch(
-    isDarkTheme,
-    (val) => {
-        if (val) {
-            applyDarkTheme();
-        } else {
-            applyLightTheme();
-        }
-    },
-    { immediate: true }
-);
-</script>
diff --git a/src/views/pages/Crud.vue b/src/views/pages/Crud.vue
index a37711c..054caaf 100644
--- a/src/views/pages/Crud.vue
+++ b/src/views/pages/Crud.vue
@@ -1,3 +1,128 @@
+<script setup>
+import { FilterMatchMode } from 'primevue/api';
+import { ref, onMounted, onBeforeMount } from 'vue';
+import ProductService from '@/layout/service/ProductService';
+import { useToast } from 'primevue/usetoast';
+
+const toast = useToast();
+
+const products = ref(null);
+const productDialog = ref(false);
+const deleteProductDialog = ref(false);
+const deleteProductsDialog = ref(false);
+const product = ref({});
+const selectedProducts = ref(null);
+const dt = ref(null);
+const filters = ref({});
+const submitted = ref(false);
+const statuses = ref([
+    { label: 'INSTOCK', value: 'instock' },
+    { label: 'LOWSTOCK', value: 'lowstock' },
+    { label: 'OUTOFSTOCK', value: 'outofstock' }
+]);
+
+const productService = new ProductService();
+
+onBeforeMount(() => {
+    initFilters();
+});
+onMounted(() => {
+    productService.getProducts().then((data) => (products.value = data));
+});
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+
+const openNew = () => {
+    product.value = {};
+    submitted.value = false;
+    productDialog.value = true;
+};
+
+const hideDialog = () => {
+    productDialog.value = false;
+    submitted.value = false;
+};
+
+const saveProduct = () => {
+    submitted.value = true;
+    if (product.value.name.trim()) {
+        if (product.value.id) {
+            product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
+            product.value[findIndexById(product.value.id)] = product.value;
+            toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
+        } else {
+            product.value.id = createId();
+            product.value.code = createId();
+            product.value.image = 'product-placeholder.svg';
+            product.value.inventoryStatus = product.value.inventoryStatus ? product.value.inventoryStatus.value : 'INSTOCK';
+            products.value.push(product);
+            toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
+        }
+        productDialog.value = false;
+        product.value = {};
+    }
+};
+
+const editProduct = (editProduct) => {
+    product.value = { ...editProduct };
+    console.log(product);
+    productDialog.value = true;
+};
+
+const confirmDeleteProduct = (editProduct) => {
+    product.value = editProduct;
+    deleteProductDialog.value = true;
+};
+
+const deleteProduct = () => {
+    products.value = products.value.filter((val) => val.id !== product.value.id);
+    deleteProductDialog.value = false;
+    product.value = {};
+    toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
+};
+
+const findIndexById = (id) => {
+    let index = -1;
+    for (let i = 0; i < products.value.length; i++) {
+        if (products.value[i].id === id) {
+            index = i;
+            break;
+        }
+    }
+    return index;
+};
+
+const createId = () => {
+    let id = '';
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    for (let i = 0; i < 5; i++) {
+        id += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return id;
+};
+
+const exportCSV = () => {
+    dt.value.exportCSV();
+};
+
+const confirmDeleteSelected = () => {
+    deleteProductsDialog.value = true;
+};
+const deleteSelectedProducts = () => {
+    products.value = products.value.filter((val) => !selectedProducts.value.includes(val));
+    deleteProductsDialog.value = false;
+    selectedProducts.value = null;
+    toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
+};
+
+const initFilters = () => {
+    filters.value = {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS }
+    };
+};
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12">
@@ -187,131 +312,6 @@
     </div>
 </template>
 
-<script setup>
-import { FilterMatchMode } from 'primevue/api';
-import { ref, onMounted, onBeforeMount } from 'vue';
-import ProductService from '@/layout/service/ProductService';
-import { useToast } from 'primevue/usetoast';
-
-const toast = useToast();
-
-const products = ref(null);
-const productDialog = ref(false);
-const deleteProductDialog = ref(false);
-const deleteProductsDialog = ref(false);
-const product = ref({});
-const selectedProducts = ref(null);
-const dt = ref(null);
-const filters = ref({});
-const submitted = ref(false);
-const statuses = ref([
-    { label: 'INSTOCK', value: 'instock' },
-    { label: 'LOWSTOCK', value: 'lowstock' },
-    { label: 'OUTOFSTOCK', value: 'outofstock' }
-]);
-
-const productService = new ProductService();
-
-onBeforeMount(() => {
-    initFilters();
-});
-onMounted(() => {
-    productService.getProducts().then((data) => (products.value = data));
-});
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-
-const openNew = () => {
-    product.value = {};
-    submitted.value = false;
-    productDialog.value = true;
-};
-
-const hideDialog = () => {
-    productDialog.value = false;
-    submitted.value = false;
-};
-
-const saveProduct = () => {
-    submitted.value = true;
-    if (product.value.name.trim()) {
-        if (product.value.id) {
-            product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
-            product.value[findIndexById(product.value.id)] = product.value;
-            toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
-        } else {
-            product.value.id = createId();
-            product.value.code = createId();
-            product.value.image = 'product-placeholder.svg';
-            product.value.inventoryStatus = product.value.inventoryStatus ? product.value.inventoryStatus.value : 'INSTOCK';
-            products.value.push(product);
-            toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
-        }
-        productDialog.value = false;
-        product.value = {};
-    }
-};
-
-const editProduct = (editProduct) => {
-    product.value = { ...editProduct };
-    console.log(product);
-    productDialog.value = true;
-};
-
-const confirmDeleteProduct = (editProduct) => {
-    product.value = editProduct;
-    deleteProductDialog.value = true;
-};
-
-const deleteProduct = () => {
-    products.value = products.value.filter((val) => val.id !== product.value.id);
-    deleteProductDialog.value = false;
-    product.value = {};
-    toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
-};
-
-const findIndexById = (id) => {
-    let index = -1;
-    for (let i = 0; i < products.value.length; i++) {
-        if (products.value[i].id === id) {
-            index = i;
-            break;
-        }
-    }
-    return index;
-};
-
-const createId = () => {
-    let id = '';
-    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    for (let i = 0; i < 5; i++) {
-        id += chars.charAt(Math.floor(Math.random() * chars.length));
-    }
-    return id;
-};
-
-const exportCSV = () => {
-    dt.value.exportCSV();
-};
-
-const confirmDeleteSelected = () => {
-    deleteProductsDialog.value = true;
-};
-const deleteSelectedProducts = () => {
-    products.value = products.value.filter((val) => !selectedProducts.value.includes(val));
-    deleteProductsDialog.value = false;
-    selectedProducts.value = null;
-    toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
-};
-
-const initFilters = () => {
-    filters.value = {
-        global: { value: null, matchMode: FilterMatchMode.CONTAINS }
-    };
-};
-</script>
-
 <style scoped lang="scss">
 @import '@/assets/demo/styles/badges.scss';
 </style>
diff --git a/src/views/pages/Landing.vue b/src/views/pages/Landing.vue
index 73ee651..6caf8f3 100644
--- a/src/views/pages/Landing.vue
+++ b/src/views/pages/Landing.vue
@@ -1,3 +1,19 @@
+<script setup>
+import { useLayoutService } from '@/layout/composables/layoutService';
+
+const { isDarkTheme } = useLayoutService();
+
+const smoothScroll = (id) => {
+    document.querySelector(id).scrollIntoView({
+        behavior: 'smooth'
+    });
+};
+
+const logoUrl = () => {
+    return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
+};
+</script>
+
 <template>
     <div class="surface-0 overflow-hidden">
         <div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static">
@@ -361,22 +377,6 @@
     </div>
 </template>
 
-<script setup>
-import { useLayoutService } from '@/layout/composables/layoutService';
-
-const { isDarkTheme } = useLayoutService();
-
-const smoothScroll = (id) => {
-    document.querySelector(id).scrollIntoView({
-        behavior: 'smooth'
-    });
-};
-
-const logoUrl = () => {
-    return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
-};
-</script>
-
 <style scoped>
 #hero {
     background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #eeefaf 0%, #c3e3fa 100%);
diff --git a/src/views/pages/Timeline.vue b/src/views/pages/Timeline.vue
index 5877c58..574e67b 100644
--- a/src/views/pages/Timeline.vue
+++ b/src/views/pages/Timeline.vue
@@ -1,3 +1,37 @@
+<script setup>
+import { ref } from 'vue';
+
+const customEvents = ref([
+    {
+        status: 'Ordered',
+        date: '15/10/2020 10:30',
+        icon: 'pi pi-shopping-cart',
+        color: '#9C27B0',
+        image: 'game-controller.jpg'
+    },
+    {
+        status: 'Processing',
+        date: '15/10/2020 14:00',
+        icon: 'pi pi-cog',
+        color: '#673AB7'
+    },
+    {
+        status: 'Shipped',
+        date: '15/10/2020 16:15',
+        icon: 'pi pi-envelope',
+        color: '#FF9800'
+    },
+    {
+        status: 'Delivered',
+        date: '16/10/2020 10:00',
+        icon: 'pi pi-check',
+        color: '#607D8B'
+    }
+]);
+
+const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
+</script>
+
 <template>
     <div class="grid">
         <div class="col-6">
@@ -98,40 +132,6 @@
     </div>
 </template>
 
-<script setup>
-import { ref } from 'vue';
-
-const customEvents = ref([
-    {
-        status: 'Ordered',
-        date: '15/10/2020 10:30',
-        icon: 'pi pi-shopping-cart',
-        color: '#9C27B0',
-        image: 'game-controller.jpg'
-    },
-    {
-        status: 'Processing',
-        date: '15/10/2020 14:00',
-        icon: 'pi pi-cog',
-        color: '#673AB7'
-    },
-    {
-        status: 'Shipped',
-        date: '15/10/2020 16:15',
-        icon: 'pi pi-envelope',
-        color: '#FF9800'
-    },
-    {
-        status: 'Delivered',
-        date: '16/10/2020 10:00',
-        icon: 'pi pi-check',
-        color: '#607D8B'
-    }
-]);
-
-const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
-</script>
-
 <style lang="scss" scoped>
 @media screen and (max-width: 960px) {
     ::v-deep(.customized-timeline) {
diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue
index 2848f62..b548b8c 100644
--- a/src/views/pages/auth/Login.vue
+++ b/src/views/pages/auth/Login.vue
@@ -1,3 +1,18 @@
+<script setup>
+import { useLayoutService } from '@/layout/composables/layoutService';
+import { ref } from 'vue';
+
+const { isDarkTheme } = useLayoutService();
+
+const email = ref('');
+const password = ref('');
+const checked = ref(false);
+
+const logoUrl = () => {
+    return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
+};
+</script>
+
 <template>
     <div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
         <div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
@@ -34,21 +49,6 @@
     </div>
 </template>
 
-<script setup>
-import { useLayoutService } from '@/layout/composables/layoutService';
-import { ref } from 'vue';
-
-const { isDarkTheme } = useLayoutService();
-
-const email = ref('');
-const password = ref('');
-const checked = ref(false);
-
-const logoUrl = () => {
-    return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
-};
-</script>
-
 <style scoped>
 .pi-eye {
     transform: scale(1.6);
diff --git a/src/views/uikit/Button.vue b/src/views/uikit/Button.vue
index 538c7a5..fc2080e 100644
--- a/src/views/uikit/Button.vue
+++ b/src/views/uikit/Button.vue
@@ -1,3 +1,32 @@
+<script setup>
+import { ref } from 'vue';
+
+const items = ref([
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh'
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-times'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Home',
+        icon: 'pi pi-home'
+    }
+]);
+
+const loading = ref([false, false, false]);
+
+const load = (index) => {
+    loading.value[index] = true;
+    setTimeout(() => (loading.value[index] = false), 1000);
+};
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12 md:col-6">
@@ -142,32 +171,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-
-const items = ref([
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh'
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-times'
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Home',
-        icon: 'pi pi-home'
-    }
-]);
-
-const loading = ref([false, false, false]);
-
-const load = (index) => {
-    loading.value[index] = true;
-    setTimeout(() => (loading.value[index] = false), 1000);
-};
-</script>
diff --git a/src/views/uikit/Chart.vue b/src/views/uikit/Chart.vue
index d78d601..bd89219 100644
--- a/src/views/uikit/Chart.vue
+++ b/src/views/uikit/Chart.vue
@@ -1,40 +1,3 @@
-<template>
-    <div class="grid p-fluid">
-        <div class="col-12 lg:col-6">
-            <div class="card">
-                <h5>Linear Chart</h5>
-                <Chart type="line" :data="lineData" :options="lineOptions" />
-            </div>
-
-            <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Pie Chart</h5>
-                <Chart type="pie" :data="pieData" :options="pieOptions" style="width: 50%" />
-            </div>
-
-            <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Polar Area Chart</h5>
-                <Chart type="polarArea" :data="polarData" :options="polarOptions" style="width: 50%" />
-            </div>
-        </div>
-        <div class="col-12 lg:col-6">
-            <div class="card">
-                <h5>Bar Chart</h5>
-                <Chart type="bar" :data="barData" :options="barOptions" />
-            </div>
-
-            <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Doughnut Chart</h5>
-                <Chart type="doughnut" :data="pieData" :options="pieOptions" style="width: 50%" />
-            </div>
-
-            <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Radar Chart</h5>
-                <Chart type="radar" :data="radarData" :options="radarOptions" style="width: 50%" />
-            </div>
-        </div>
-    </div>
-</template>
-
 <script setup>
 import { ref, watch } from 'vue';
 import { useLayoutService } from '@/layout/composables/layoutService';
@@ -347,3 +310,40 @@ watch(
     { immediate: true }
 );
 </script>
+
+<template>
+    <div class="grid p-fluid">
+        <div class="col-12 lg:col-6">
+            <div class="card">
+                <h5>Linear Chart</h5>
+                <Chart type="line" :data="lineData" :options="lineOptions" />
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="align-self-start">Pie Chart</h5>
+                <Chart type="pie" :data="pieData" :options="pieOptions" style="width: 50%" />
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="align-self-start">Polar Area Chart</h5>
+                <Chart type="polarArea" :data="polarData" :options="polarOptions" style="width: 50%" />
+            </div>
+        </div>
+        <div class="col-12 lg:col-6">
+            <div class="card">
+                <h5>Bar Chart</h5>
+                <Chart type="bar" :data="barData" :options="barOptions" />
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="align-self-start">Doughnut Chart</h5>
+                <Chart type="doughnut" :data="pieData" :options="pieOptions" style="width: 50%" />
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="align-self-start">Radar Chart</h5>
+                <Chart type="radar" :data="radarData" :options="radarOptions" style="width: 50%" />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/views/uikit/File.vue b/src/views/uikit/File.vue
index 59803d7..2787dcb 100644
--- a/src/views/uikit/File.vue
+++ b/src/views/uikit/File.vue
@@ -1,3 +1,13 @@
+<script setup>
+import { useToast } from 'primevue/usetoast';
+
+const toast = useToast();
+
+const onUpload = () => {
+    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+};
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12">
@@ -11,13 +21,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import { useToast } from 'primevue/usetoast';
-
-const toast = useToast();
-
-const onUpload = () => {
-    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-};
-</script>
diff --git a/src/views/uikit/FloatLabel.vue b/src/views/uikit/FloatLabel.vue
index 2a62464..458af9c 100644
--- a/src/views/uikit/FloatLabel.vue
+++ b/src/views/uikit/FloatLabel.vue
@@ -1,3 +1,46 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import CountryService from '@/layout/service/CountryService';
+
+const countries = ref([]);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const filteredCountries = ref(null);
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const value4 = ref(null);
+const value5 = ref(null);
+const value6 = ref(null);
+const value7 = ref(null);
+const value8 = ref(null);
+const value9 = ref(null);
+const value10 = ref(null);
+const countryService = new CountryService();
+
+onMounted(() => {
+    countryService.getCountries().then((data) => (countries.value = data));
+});
+
+const searchCountry = (event) => {
+    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+    const filtered = [];
+    const query = event.query;
+    for (let i = 0; i < this.countries.length; i++) {
+        const country = this.countries[i];
+        if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
+            filtered.push(country);
+        }
+    }
+    filteredCountries.value = filtered;
+};
+</script>
+
 <template>
     <div class="card">
         <h5>Float Label</h5>
@@ -70,46 +113,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import CountryService from '@/layout/service/CountryService';
-
-const countries = ref([]);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-const filteredCountries = ref(null);
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const value4 = ref(null);
-const value5 = ref(null);
-const value6 = ref(null);
-const value7 = ref(null);
-const value8 = ref(null);
-const value9 = ref(null);
-const value10 = ref(null);
-const countryService = new CountryService();
-
-onMounted(() => {
-    countryService.getCountries().then((data) => (countries.value = data));
-});
-
-const searchCountry = (event) => {
-    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
-    const filtered = [];
-    const query = event.query;
-    for (let i = 0; i < this.countries.length; i++) {
-        const country = this.countries[i];
-        if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
-            filtered.push(country);
-        }
-    }
-    filteredCountries.value = filtered;
-};
-</script>
diff --git a/src/views/uikit/FormLayout.vue b/src/views/uikit/FormLayout.vue
index 4cc2f80..72a7688 100644
--- a/src/views/uikit/FormLayout.vue
+++ b/src/views/uikit/FormLayout.vue
@@ -1,3 +1,15 @@
+<script setup>
+import { ref } from 'vue';
+
+const dropdownItems = ref([
+    { name: 'Option 1', code: 'Option 1' },
+    { name: 'Option 2', code: 'Option 2' },
+    { name: 'Option 3', code: 'Option 3' }
+]);
+
+const dropdownItem = ref(null);
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12 md:col-6">
@@ -107,15 +119,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-
-const dropdownItems = ref([
-    { name: 'Option 1', code: 'Option 1' },
-    { name: 'Option 2', code: 'Option 2' },
-    { name: 'Option 3', code: 'Option 3' }
-]);
-
-const dropdownItem = ref(null);
-</script>
diff --git a/src/views/uikit/Icons.vue b/src/views/uikit/Icons.vue
index c777e9e..ecea8a5 100644
--- a/src/views/uikit/Icons.vue
+++ b/src/views/uikit/Icons.vue
@@ -1,3 +1,37 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+const icons = ref(null);
+const filter = ref(null);
+
+onMounted(() => {
+    fetch('/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
+        .then((res) => res.json())
+        .then((d) => {
+            let icons = d.icons;
+            let data = icons.filter((value) => {
+                return value.icon.tags.indexOf('deprecate') === -1;
+            });
+            data.sort((icon1, icon2) => {
+                if (icon1.properties.name < icon2.properties.name) return -1;
+                else if (icon1.properties.name > icon2.properties.name) return 1;
+                else return 0;
+            });
+
+            icons.value = data;
+        });
+});
+
+const filteredIcons = computed(() => {
+    if (filter.value) {
+        return icons.value.filter((icon) => {
+            return icon.properties.name.toLowerCase().indexOf(filter.value.toLowerCase()) > -1;
+        });
+    } else {
+        return icons.value;
+    }
+});
+</script>
+
 <template>
     <div>
         <div class="card">
@@ -96,40 +130,6 @@ export default {
     </div>
 </template>
 
-<script setup>
-import { ref, onMounted, computed } from 'vue';
-const icons = ref(null);
-const filter = ref(null);
-
-onMounted(() => {
-    fetch('/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
-        .then((res) => res.json())
-        .then((d) => {
-            let icons = d.icons;
-            let data = icons.filter((value) => {
-                return value.icon.tags.indexOf('deprecate') === -1;
-            });
-            data.sort((icon1, icon2) => {
-                if (icon1.properties.name < icon2.properties.name) return -1;
-                else if (icon1.properties.name > icon2.properties.name) return 1;
-                else return 0;
-            });
-
-            icons.value = data;
-        });
-});
-
-const filteredIcons = computed(() => {
-    if (filter.value) {
-        return icons.value.filter((icon) => {
-            return icon.properties.name.toLowerCase().indexOf(filter.value.toLowerCase()) > -1;
-        });
-    } else {
-        return icons.value;
-    }
-});
-</script>
-
 <style lang="scss" scoped>
 @import '@/assets/demo/documentation.scss';
 
diff --git a/src/views/uikit/Input.vue b/src/views/uikit/Input.vue
index e648ab0..2f4a97c 100644
--- a/src/views/uikit/Input.vue
+++ b/src/views/uikit/Input.vue
@@ -1,3 +1,80 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import CountryService from '@/layout/service/CountryService';
+import NodeService from '@/layout/service/NodeService';
+
+const floatValue = ref(null);
+const autoValue = ref(null);
+const selectedAutoValue = ref(null);
+const autoFilteredValue = ref([]);
+const calendarValue = ref(null);
+const inputNumberValue = ref(null);
+const chipsValue = ref(null);
+const sliderValue = ref(50);
+const ratingValue = ref(null);
+const colorValue = ref('#1976D2');
+const radioValue = ref(null);
+const checkboxValue = ref([]);
+const switchValue = ref(false);
+const listboxValues = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const listboxValue = ref(null);
+const dropdownValues = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const dropdownValue = ref(null);
+const multiselectValues = ref([
+    { name: 'Australia', code: 'AU' },
+    { name: 'Brazil', code: 'BR' },
+    { name: 'China', code: 'CN' },
+    { name: 'Egypt', code: 'EG' },
+    { name: 'France', code: 'FR' },
+    { name: 'Germany', code: 'DE' },
+    { name: 'India', code: 'IN' },
+    { name: 'Japan', code: 'JP' },
+    { name: 'Spain', code: 'ES' },
+    { name: 'United States', code: 'US' }
+]);
+
+const multiselectValue = ref(null);
+const toggleValue = ref(false);
+const selectButtonValue1 = ref(null);
+const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
+const selectButtonValue2 = ref(null);
+const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
+const knobValue = ref(50);
+const inputGroupValue = ref(false);
+const treeSelectNodes = ref(null);
+const selectedNode = ref(null);
+const countryService = new CountryService();
+const nodeService = new NodeService();
+
+onMounted(() => {
+    countryService.getCountries().then((data) => (autoValue.value = data));
+    nodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
+});
+
+const searchCountry = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            this.autoFilteredValue = [...this.autoValue];
+        } else {
+            this.autoFilteredValue = this.autoValue.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+};
+</script>
 <template>
     <div class="grid p-fluid">
         <div class="col-12 md:col-6">
@@ -218,80 +295,3 @@
         </div>
     </div>
 </template>
-<script setup>
-import { ref, onMounted } from 'vue';
-import CountryService from '@/layout/service/CountryService';
-import NodeService from '@/layout/service/NodeService';
-
-const floatValue = ref(null);
-const autoValue = ref(null);
-const selectedAutoValue = ref(null);
-const autoFilteredValue = ref([]);
-const calendarValue = ref(null);
-const inputNumberValue = ref(null);
-const chipsValue = ref(null);
-const sliderValue = ref(50);
-const ratingValue = ref(null);
-const colorValue = ref('#1976D2');
-const radioValue = ref(null);
-const checkboxValue = ref([]);
-const switchValue = ref(false);
-const listboxValues = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-const listboxValue = ref(null);
-const dropdownValues = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-const dropdownValue = ref(null);
-const multiselectValues = ref([
-    { name: 'Australia', code: 'AU' },
-    { name: 'Brazil', code: 'BR' },
-    { name: 'China', code: 'CN' },
-    { name: 'Egypt', code: 'EG' },
-    { name: 'France', code: 'FR' },
-    { name: 'Germany', code: 'DE' },
-    { name: 'India', code: 'IN' },
-    { name: 'Japan', code: 'JP' },
-    { name: 'Spain', code: 'ES' },
-    { name: 'United States', code: 'US' }
-]);
-
-const multiselectValue = ref(null);
-const toggleValue = ref(false);
-const selectButtonValue1 = ref(null);
-const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
-const selectButtonValue2 = ref(null);
-const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
-const knobValue = ref(50);
-const inputGroupValue = ref(false);
-const treeSelectNodes = ref(null);
-const selectedNode = ref(null);
-const countryService = new CountryService();
-const nodeService = new NodeService();
-
-onMounted(() => {
-    countryService.getCountries().then((data) => (autoValue.value = data));
-    nodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
-});
-
-const searchCountry = (event) => {
-    setTimeout(() => {
-        if (!event.query.trim().length) {
-            this.autoFilteredValue = [...this.autoValue];
-        } else {
-            this.autoFilteredValue = this.autoValue.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-        }
-    }, 250);
-};
-</script>
diff --git a/src/views/uikit/InvalidState.vue b/src/views/uikit/InvalidState.vue
index 25023ab..ce85961 100644
--- a/src/views/uikit/InvalidState.vue
+++ b/src/views/uikit/InvalidState.vue
@@ -1,3 +1,47 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import CountryService from '@/layout/service/CountryService';
+
+const countries = ref(null);
+const filteredCountries = ref(null);
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const value4 = ref(null);
+const value5 = ref(null);
+const value6 = ref(null);
+const value7 = ref(null);
+const value8 = ref(null);
+const value9 = ref(null);
+const value10 = ref(null);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const countryService = new CountryService();
+
+onMounted(() => {
+    countryService.getCountries().then((data) => {
+        countries.value = data;
+    });
+});
+
+const searchCountry = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+};
+</script>
+
 <template>
     <div class="grid p-fluid">
         <div class="col">
@@ -54,47 +98,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import CountryService from '@/layout/service/CountryService';
-
-const countries = ref(null);
-const filteredCountries = ref(null);
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const value4 = ref(null);
-const value5 = ref(null);
-const value6 = ref(null);
-const value7 = ref(null);
-const value8 = ref(null);
-const value9 = ref(null);
-const value10 = ref(null);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-const countryService = new CountryService();
-
-onMounted(() => {
-    countryService.getCountries().then((data) => {
-        countries.value = data;
-    });
-});
-
-const searchCountry = (event) => {
-    setTimeout(() => {
-        if (!event.query.trim().length) {
-            filteredCountries.value = [...countries];
-        } else {
-            filteredCountries.value = countries.value.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-        }
-    }, 250);
-};
-</script>
diff --git a/src/views/uikit/List.vue b/src/views/uikit/List.vue
index fc5d578..92f95f9 100644
--- a/src/views/uikit/List.vue
+++ b/src/views/uikit/List.vue
@@ -1,3 +1,62 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import ProductService from '@/layout/service/ProductService';
+
+const picklistValue = ref([
+    [
+        { name: 'San Francisco', code: 'SF' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Paris', code: 'PRS' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Berlin', code: 'BRL' },
+        { name: 'Barcelona', code: 'BRC' },
+        { name: 'Rome', code: 'RM' }
+    ],
+    []
+]);
+
+const orderlistValue = ref([
+    { name: 'San Francisco', code: 'SF' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Paris', code: 'PRS' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Berlin', code: 'BRL' },
+    { name: 'Barcelona', code: 'BRC' },
+    { name: 'Rome', code: 'RM' }
+]);
+
+const dataviewValue = ref(null);
+const layout = ref('grid');
+const sortKey = ref(null);
+const sortOrder = ref(null);
+const sortField = ref(null);
+const sortOptions = ref([
+    { label: 'Price High to Low', value: '!price' },
+    { label: 'Price Low to High', value: 'price' }
+]);
+
+const productService = new ProductService();
+
+onMounted(() => {
+    productService.getProductsSmall().then((data) => (dataviewValue.value = data));
+});
+
+const onSortChange = (event) => {
+    const value = event.value.value;
+    const sortValue = event.value;
+
+    if (value.indexOf('!') === 0) {
+        sortOrder.value = -1;
+        sortField.value = value.substring(1, value.length);
+        sortKey.value = sortValue;
+    } else {
+        sortOrder.value = 1;
+        sortField.value = value;
+        sortKey.value = sortValue;
+    }
+};
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12">
@@ -90,65 +149,6 @@
     </div>
 </template>
 
-<script setup>
-import { ref, onMounted } from 'vue';
-import ProductService from '@/layout/service/ProductService';
-
-const picklistValue = ref([
-    [
-        { name: 'San Francisco', code: 'SF' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Paris', code: 'PRS' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Berlin', code: 'BRL' },
-        { name: 'Barcelona', code: 'BRC' },
-        { name: 'Rome', code: 'RM' }
-    ],
-    []
-]);
-
-const orderlistValue = ref([
-    { name: 'San Francisco', code: 'SF' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Paris', code: 'PRS' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Berlin', code: 'BRL' },
-    { name: 'Barcelona', code: 'BRC' },
-    { name: 'Rome', code: 'RM' }
-]);
-
-const dataviewValue = ref(null);
-const layout = ref('grid');
-const sortKey = ref(null);
-const sortOrder = ref(null);
-const sortField = ref(null);
-const sortOptions = ref([
-    { label: 'Price High to Low', value: '!price' },
-    { label: 'Price Low to High', value: 'price' }
-]);
-
-const productService = new ProductService();
-
-onMounted(() => {
-    productService.getProductsSmall().then((data) => (dataviewValue.value = data));
-});
-
-const onSortChange = (event) => {
-    const value = event.value.value;
-    const sortValue = event.value;
-
-    if (value.indexOf('!') === 0) {
-        sortOrder.value = -1;
-        sortField.value = value.substring(1, value.length);
-        sortKey.value = sortValue;
-    } else {
-        sortOrder.value = 1;
-        sortField.value = value;
-        sortKey.value = sortValue;
-    }
-};
-</script>
-
 <style scoped lang="scss">
 @import '@/assets/demo/styles/badges.scss';
 </style>
diff --git a/src/views/uikit/Media.vue b/src/views/uikit/Media.vue
index a6db0a3..22bf441 100644
--- a/src/views/uikit/Media.vue
+++ b/src/views/uikit/Media.vue
@@ -1,3 +1,55 @@
+<script setup>
+import ProductService from '@/layout/service/ProductService';
+import PhotoService from '@/layout/service/PhotoService';
+import { ref, onMounted } from 'vue';
+
+const products = ref([]);
+const images = ref([]);
+const galleriaResponsiveOptions = ref([
+    {
+        breakpoint: '1024px',
+        numVisible: 5
+    },
+    {
+        breakpoint: '960px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '768px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '560px',
+        numVisible: 1
+    }
+]);
+const carouselResponsiveOptions = ref([
+    {
+        breakpoint: '1024px',
+        numVisible: 3,
+        numScroll: 3
+    },
+    {
+        breakpoint: '768px',
+        numVisible: 2,
+        numScroll: 2
+    },
+    {
+        breakpoint: '560px',
+        numVisible: 1,
+        numScroll: 1
+    }
+]);
+
+const productService = new ProductService();
+const photoService = new PhotoService();
+
+onMounted(() => {
+    productService.getProductsSmall().then((data) => (products.value = data));
+    photoService.getImages().then((data) => (images.value = data));
+});
+</script>
+
 <template>
     <div class="grid p-fluid">
         <div class="col-12">
@@ -54,58 +106,6 @@
     </div>
 </template>
 
-<script setup>
-import ProductService from '@/layout/service/ProductService';
-import PhotoService from '@/layout/service/PhotoService';
-import { ref, onMounted } from 'vue';
-
-const products = ref([]);
-const images = ref([]);
-const galleriaResponsiveOptions = ref([
-    {
-        breakpoint: '1024px',
-        numVisible: 5
-    },
-    {
-        breakpoint: '960px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '768px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '560px',
-        numVisible: 1
-    }
-]);
-const carouselResponsiveOptions = ref([
-    {
-        breakpoint: '1024px',
-        numVisible: 3,
-        numScroll: 3
-    },
-    {
-        breakpoint: '768px',
-        numVisible: 2,
-        numScroll: 2
-    },
-    {
-        breakpoint: '560px',
-        numVisible: 1,
-        numScroll: 1
-    }
-]);
-
-const productService = new ProductService();
-const photoService = new PhotoService();
-
-onMounted(() => {
-    productService.getProductsSmall().then((data) => (products.value = data));
-    photoService.getImages().then((data) => (images.value = data));
-});
-</script>
-
 <style lang="scss" scoped>
 @import '@/assets/demo/styles/badges.scss';
 @import '@/assets/demo/styles/items.scss';
diff --git a/src/views/uikit/Menu.vue b/src/views/uikit/Menu.vue
index c7d888e..5a0d834 100644
--- a/src/views/uikit/Menu.vue
+++ b/src/views/uikit/Menu.vue
@@ -1,92 +1,3 @@
-<template>
-    <div class="grid p-fluid">
-        <div class="col-12">
-            <div class="card card-w-title">
-                <h5>Menubar</h5>
-                <Menubar :model="nestedMenuitems">
-                    <template #end>
-                        <span class="p-input-icon-left">
-                            <i class="pi pi-search" />
-                            <InputText type="text" placeholder="Search" />
-                        </span>
-                    </template>
-                </Menubar>
-            </div>
-        </div>
-
-        <div class="col-12">
-            <div class="card card-w-title">
-                <h5>Breadcrumb</h5>
-                <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
-            </div>
-        </div>
-
-        <div class="col-12 md:col-6">
-            <div class="card card-w-title">
-                <h5>Steps</h5>
-                <p>Steps and TabMenu are integrated with the same child routes.</p>
-                <Steps :model="nestedRouteItems" :readonly="false" />
-                <router-view />
-            </div>
-        </div>
-
-        <div class="col-12 md:col-6">
-            <div class="card card-w-title">
-                <h5>TabMenu</h5>
-                <p>Steps and TabMenu are integrated with the same child routes.</p>
-                <TabMenu :model="nestedRouteItems" />
-                <router-view />
-            </div>
-        </div>
-
-        <div class="col-12 md:col-4">
-            <div class="card">
-                <h5>Tiered Menu</h5>
-                <TieredMenu :model="tieredMenuItems" />
-            </div>
-        </div>
-
-        <div class="col-12 md:col-4">
-            <div class="card">
-                <h5>Plain Menu</h5>
-                <Menu :model="menuitems" />
-            </div>
-        </div>
-
-        <div class="col-12 md:col-4">
-            <div class="card">
-                <h5>Overlay Menu</h5>
-
-                <Menu ref="menu" :model="overlayMenuItems" :popup="true" />
-                <Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto" />
-            </div>
-
-            <div class="card" @contextmenu="onContextRightClick">
-                <h5>ContextMenu</h5>
-                Right click to display.
-                <ContextMenu ref="contextMenu" :model="contextMenuItems" />
-            </div>
-        </div>
-
-        <div class="col-12 md:col-6">
-            <div class="card">
-                <h5>MegaMenu - Horizontal</h5>
-                <MegaMenu :model="megamenuItems" />
-
-                <h5 style="margin-top: 1.55em">MegaMenu - Vertical</h5>
-                <MegaMenu :model="megamenuItems" orientation="vertical" />
-            </div>
-        </div>
-
-        <div class="col-12 md:col-6">
-            <div class="card">
-                <h5>PanelMenu</h5>
-                <PanelMenu :model="panelMenuitems" />
-            </div>
-        </div>
-    </div>
-</template>
-
 <script setup>
 import { ref } from 'vue';
 
@@ -527,3 +438,92 @@ const onContextRightClick = (event) => {
     contextMenu.value.show(event);
 };
 </script>
+
+<template>
+    <div class="grid p-fluid">
+        <div class="col-12">
+            <div class="card card-w-title">
+                <h5>Menubar</h5>
+                <Menubar :model="nestedMenuitems">
+                    <template #end>
+                        <span class="p-input-icon-left">
+                            <i class="pi pi-search" />
+                            <InputText type="text" placeholder="Search" />
+                        </span>
+                    </template>
+                </Menubar>
+            </div>
+        </div>
+
+        <div class="col-12">
+            <div class="card card-w-title">
+                <h5>Breadcrumb</h5>
+                <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
+            </div>
+        </div>
+
+        <div class="col-12 md:col-6">
+            <div class="card card-w-title">
+                <h5>Steps</h5>
+                <p>Steps and TabMenu are integrated with the same child routes.</p>
+                <Steps :model="nestedRouteItems" :readonly="false" />
+                <router-view />
+            </div>
+        </div>
+
+        <div class="col-12 md:col-6">
+            <div class="card card-w-title">
+                <h5>TabMenu</h5>
+                <p>Steps and TabMenu are integrated with the same child routes.</p>
+                <TabMenu :model="nestedRouteItems" />
+                <router-view />
+            </div>
+        </div>
+
+        <div class="col-12 md:col-4">
+            <div class="card">
+                <h5>Tiered Menu</h5>
+                <TieredMenu :model="tieredMenuItems" />
+            </div>
+        </div>
+
+        <div class="col-12 md:col-4">
+            <div class="card">
+                <h5>Plain Menu</h5>
+                <Menu :model="menuitems" />
+            </div>
+        </div>
+
+        <div class="col-12 md:col-4">
+            <div class="card">
+                <h5>Overlay Menu</h5>
+
+                <Menu ref="menu" :model="overlayMenuItems" :popup="true" />
+                <Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto" />
+            </div>
+
+            <div class="card" @contextmenu="onContextRightClick">
+                <h5>ContextMenu</h5>
+                Right click to display.
+                <ContextMenu ref="contextMenu" :model="contextMenuItems" />
+            </div>
+        </div>
+
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>MegaMenu - Horizontal</h5>
+                <MegaMenu :model="megamenuItems" />
+
+                <h5 style="margin-top: 1.55em">MegaMenu - Vertical</h5>
+                <MegaMenu :model="megamenuItems" orientation="vertical" />
+            </div>
+        </div>
+
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>PanelMenu</h5>
+                <PanelMenu :model="panelMenuitems" />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/views/uikit/Messages.vue b/src/views/uikit/Messages.vue
index aed7901..9ad7b93 100644
--- a/src/views/uikit/Messages.vue
+++ b/src/views/uikit/Messages.vue
@@ -1,3 +1,42 @@
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+
+const toast = useToast();
+const message = ref([]);
+const username = ref(null);
+const email = ref(null);
+const count = ref(0);
+
+const addMessage = (type) => {
+    if (type === 'success') {
+        message.value = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: count.value++ }];
+    } else if (type === 'info') {
+        message.value = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: count.value++ }];
+    } else if (type === 'warn') {
+        message.value = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: count.value++ }];
+    } else if (type === 'error') {
+        message.value = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: count.value++ }];
+    }
+};
+
+const showSuccess = () => {
+    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 });
+};
+
+const showInfo = () => {
+    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Detail', life: 3000 });
+};
+
+const showWarn = () => {
+    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 });
+};
+
+const showError = () => {
+    toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 });
+};
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12 lg:col-6">
@@ -59,42 +98,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-
-const toast = useToast();
-const message = ref([]);
-const username = ref(null);
-const email = ref(null);
-const count = ref(0);
-
-const addMessage = (type) => {
-    if (type === 'success') {
-        message.value = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: count.value++ }];
-    } else if (type === 'info') {
-        message.value = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: count.value++ }];
-    } else if (type === 'warn') {
-        message.value = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: count.value++ }];
-    } else if (type === 'error') {
-        message.value = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: count.value++ }];
-    }
-};
-
-const showSuccess = () => {
-    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 });
-};
-
-const showInfo = () => {
-    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Detail', life: 3000 });
-};
-
-const showWarn = () => {
-    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 });
-};
-
-const showError = () => {
-    toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 });
-};
-</script>
diff --git a/src/views/uikit/Misc.vue b/src/views/uikit/Misc.vue
index edfb77b..314e48d 100644
--- a/src/views/uikit/Misc.vue
+++ b/src/views/uikit/Misc.vue
@@ -1,3 +1,32 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const value = ref(0);
+let interval = null;
+
+const startProgress = () => {
+    interval = setInterval(() => {
+        let newValue = value.value + Math.floor(Math.random() * 10) + 1;
+        if (newValue >= 100) {
+            newValue = 100;
+        }
+        value.value = newValue;
+    }, 2000);
+};
+const endProgress = () => {
+    clearInterval(interval);
+    interval = null;
+};
+
+onMounted(() => {
+    startProgress();
+});
+
+onBeforeUnmount(() => {
+    endProgress();
+});
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12">
@@ -149,32 +178,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-
-const value = ref(0);
-let interval = null;
-
-const startProgress = () => {
-    interval = setInterval(() => {
-        let newValue = value.value + Math.floor(Math.random() * 10) + 1;
-        if (newValue >= 100) {
-            newValue = 100;
-        }
-        value.value = newValue;
-    }, 2000);
-};
-const endProgress = () => {
-    clearInterval(interval);
-    interval = null;
-};
-
-onMounted(() => {
-    startProgress();
-});
-
-onBeforeUnmount(() => {
-    endProgress();
-});
-</script>
diff --git a/src/views/uikit/Overlay.vue b/src/views/uikit/Overlay.vue
index c333139..005c4df 100644
--- a/src/views/uikit/Overlay.vue
+++ b/src/views/uikit/Overlay.vue
@@ -1,3 +1,78 @@
+<script setup>
+import ProductService from '@/layout/service/ProductService';
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+
+const display = ref(false);
+const displayConfirmation = ref(false);
+const visibleLeft = ref(false);
+const visibleRight = ref(false);
+const visibleTop = ref(false);
+const visibleBottom = ref(false);
+const visibleFull = ref(false);
+const products = ref(null);
+const selectedProduct = ref(null);
+const op = ref(null);
+const op2 = ref(null);
+const popup = ref(null);
+
+const productService = new ProductService();
+const toast = useToast();
+const confirmPopup = useConfirm();
+
+onMounted(() => {
+    productService.getProductsSmall().then((data) => (products.value = data));
+});
+
+const open = () => {
+    display.value = true;
+};
+
+const close = () => {
+    display.value = false;
+};
+
+const openConfirmation = () => {
+    displayConfirmation.value = true;
+};
+
+const closeConfirmation = () => {
+    displayConfirmation.value = false;
+};
+
+const toggle = (event) => {
+    op.value.toggle(event);
+};
+
+const toggleDataTable = (event) => {
+    op2.value.toggle(event);
+};
+
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+
+const onProductSelect = (event) => {
+    op.value.hide();
+    toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
+};
+
+const confirm = (event) => {
+    confirmPopup.require({
+        target: event.target,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'info', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12 lg:col-6">
@@ -110,78 +185,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import ProductService from '@/layout/service/ProductService';
-import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useConfirm } from 'primevue/useconfirm';
-
-const display = ref(false);
-const displayConfirmation = ref(false);
-const visibleLeft = ref(false);
-const visibleRight = ref(false);
-const visibleTop = ref(false);
-const visibleBottom = ref(false);
-const visibleFull = ref(false);
-const products = ref(null);
-const selectedProduct = ref(null);
-const op = ref(null);
-const op2 = ref(null);
-const popup = ref(null);
-
-const productService = new ProductService();
-const toast = useToast();
-const confirmPopup = useConfirm();
-
-onMounted(() => {
-    productService.getProductsSmall().then((data) => (products.value = data));
-});
-
-const open = () => {
-    display.value = true;
-};
-
-const close = () => {
-    display.value = false;
-};
-
-const openConfirmation = () => {
-    displayConfirmation.value = true;
-};
-
-const closeConfirmation = () => {
-    displayConfirmation.value = false;
-};
-
-const toggle = (event) => {
-    op.value.toggle(event);
-};
-
-const toggleDataTable = (event) => {
-    op2.value.toggle(event);
-};
-
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-
-const onProductSelect = (event) => {
-    op.value.hide();
-    toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
-};
-
-const confirm = (event) => {
-    confirmPopup.require({
-        target: event.target,
-        message: 'Are you sure you want to proceed?',
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'info', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-</script>
diff --git a/src/views/uikit/Panels.vue b/src/views/uikit/Panels.vue
index e2cc4c9..087dbf5 100644
--- a/src/views/uikit/Panels.vue
+++ b/src/views/uikit/Panels.vue
@@ -1,3 +1,36 @@
+<script setup>
+import { ref } from 'vue';
+
+const toolbarItems = ref([
+    {
+        label: 'Save',
+        icon: 'pi pi-check'
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-upload'
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash'
+    },
+    {
+        label: 'Home Page',
+        icon: 'pi pi-home'
+    }
+]);
+const cardMenu = ref([
+    { label: 'Save', icon: 'pi pi-fw pi-check' },
+    { label: 'Update', icon: 'pi pi-fw pi-refresh' },
+    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+]);
+const menuRef = ref(null);
+
+const toggle = () => {
+    menuRef.value.toggle(event);
+};
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12">
@@ -182,36 +215,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-
-const toolbarItems = ref([
-    {
-        label: 'Save',
-        icon: 'pi pi-check'
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-upload'
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash'
-    },
-    {
-        label: 'Home Page',
-        icon: 'pi pi-home'
-    }
-]);
-const cardMenu = ref([
-    { label: 'Save', icon: 'pi pi-fw pi-check' },
-    { label: 'Update', icon: 'pi pi-fw pi-refresh' },
-    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
-]);
-const menuRef = ref(null);
-
-const toggle = () => {
-    menuRef.value.toggle(event);
-};
-</script>
diff --git a/src/views/uikit/Table.vue b/src/views/uikit/Table.vue
index 245e371..c285837 100644
--- a/src/views/uikit/Table.vue
+++ b/src/views/uikit/Table.vue
@@ -1,3 +1,106 @@
+<script setup>
+import { FilterMatchMode, FilterOperator } from 'primevue/api';
+import CustomerService from '@/layout/service/CustomerService';
+import ProductService from '@/layout/service/ProductService';
+import { ref, onMounted } from 'vue';
+
+const customer1 = ref(null);
+const customer2 = ref(null);
+const customer3 = ref(null);
+const filters1 = ref({
+    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+    'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+    representative: { value: null, matchMode: FilterMatchMode.IN },
+    date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+    balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+    status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+    activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
+    verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+});
+const loading1 = ref(null);
+const loading2 = ref(null);
+const idFrozen = ref(false);
+const products = ref(null);
+const expandedRows = ref([]);
+const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+const representatives = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+    { name: 'Onyama Limba', image: 'onyamalimba.png' },
+    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+]);
+
+const customerService = new CustomerService();
+const productService = new ProductService();
+
+onMounted(() => {
+    productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
+    customerService.getCustomersLarge().then((data) => {
+        customer1.value = data;
+        loading1.value = false;
+        customer1.value.forEach((customer) => (customer.date = new Date(customer.date)));
+    });
+    customerService.getCustomersLarge().then((data) => (customer2.value = data));
+    customerService.getCustomersMedium().then((data) => (customer3.value = data));
+    loading2.value = false;
+});
+
+const initFilters1 = () => {
+    filters1.value = {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    };
+    console.log(filters1);
+};
+
+const clearFilter1 = () => {
+    initFilters1();
+};
+const expandAll = () => {
+    expandedRows.value = products.value.filter((p) => p.id);
+};
+const collapseAll = () => {
+    expandedRows.value = null;
+};
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+
+const formatDate = (value) => {
+    return value.toLocaleDateString('en-US', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    });
+};
+const calculateCustomerTotal = (name) => {
+    let total = 0;
+    if (customer3.value) {
+        for (let customer of customer3.value) {
+            if (customer.representative.name === name) {
+                total++;
+            }
+        }
+    }
+
+    return total;
+};
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12">
@@ -275,109 +378,6 @@
     </div>
 </template>
 
-<script setup>
-import { FilterMatchMode, FilterOperator } from 'primevue/api';
-import CustomerService from '@/layout/service/CustomerService';
-import ProductService from '@/layout/service/ProductService';
-import { ref, onMounted } from 'vue';
-
-const customer1 = ref(null);
-const customer2 = ref(null);
-const customer3 = ref(null);
-const filters1 = ref({
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-    name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-    'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-    representative: { value: null, matchMode: FilterMatchMode.IN },
-    date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-    balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-    status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-    activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
-    verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-});
-const loading1 = ref(null);
-const loading2 = ref(null);
-const idFrozen = ref(false);
-const products = ref(null);
-const expandedRows = ref([]);
-const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
-const representatives = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png' },
-    { name: 'Anna Fali', image: 'annafali.png' },
-    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-    { name: 'Onyama Limba', image: 'onyamalimba.png' },
-    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-]);
-
-const customerService = new CustomerService();
-const productService = new ProductService();
-
-onMounted(() => {
-    productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
-    customerService.getCustomersLarge().then((data) => {
-        customer1.value = data;
-        loading1.value = false;
-        customer1.value.forEach((customer) => (customer.date = new Date(customer.date)));
-    });
-    customerService.getCustomersLarge().then((data) => (customer2.value = data));
-    customerService.getCustomersMedium().then((data) => (customer3.value = data));
-    loading2.value = false;
-});
-
-const initFilters1 = () => {
-    filters1.value = {
-        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        representative: { value: null, matchMode: FilterMatchMode.IN },
-        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
-        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-    };
-    console.log(filters1);
-};
-
-const clearFilter1 = () => {
-    initFilters1();
-};
-const expandAll = () => {
-    expandedRows.value = products.value.filter((p) => p.id);
-};
-const collapseAll = () => {
-    expandedRows.value = null;
-};
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-
-const formatDate = (value) => {
-    return value.toLocaleDateString('en-US', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric'
-    });
-};
-const calculateCustomerTotal = (name) => {
-    let total = 0;
-    if (customer3.value) {
-        for (let customer of customer3.value) {
-            if (customer.representative.name === name) {
-                total++;
-            }
-        }
-    }
-
-    return total;
-};
-</script>
-
 <style scoped lang="scss">
 @import '@/assets/demo/styles/badges.scss';
 
diff --git a/src/views/uikit/Tree.vue b/src/views/uikit/Tree.vue
index 09ce22d..95c45e4 100644
--- a/src/views/uikit/Tree.vue
+++ b/src/views/uikit/Tree.vue
@@ -1,3 +1,19 @@
+<script setup>
+import NodeService from '@/layout/service/NodeService';
+import { onMounted, ref } from 'vue';
+
+const treeValue = ref(null);
+const selectedTreeValue = ref(null);
+const treeTableValue = ref(null);
+const selectedTreeTableValue = ref(null);
+const nodeService = new NodeService();
+
+onMounted(() => {
+    nodeService.getTreeNodes().then((data) => (treeValue.value = data));
+    nodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
+});
+</script>
+
 <template>
     <div class="grid">
         <div class="col-12">
@@ -19,19 +35,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import NodeService from '@/layout/service/NodeService';
-import { onMounted, ref } from 'vue';
-
-const treeValue = ref(null);
-const selectedTreeValue = ref(null);
-const treeTableValue = ref(null);
-const selectedTreeTableValue = ref(null);
-const nodeService = new NodeService();
-
-onMounted(() => {
-    nodeService.getTreeNodes().then((data) => (treeValue.value = data));
-    nodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
-});
-</script>
diff --git a/src/views/uikit/menu/ConfirmationDemo.vue b/src/views/uikit/menu/ConfirmationDemo.vue
index 7559b45..09a19fd 100644
--- a/src/views/uikit/menu/ConfirmationDemo.vue
+++ b/src/views/uikit/menu/ConfirmationDemo.vue
@@ -4,9 +4,3 @@
         <p class="m-0 text-lg">Confirmation Component Content via Child Route</p>
     </div>
 </template>
-
-<script>
-export default {
-
-}
-</script>
\ No newline at end of file
diff --git a/src/views/uikit/menu/PaymentDemo.vue b/src/views/uikit/menu/PaymentDemo.vue
index 5ec48c9..aba7088 100644
--- a/src/views/uikit/menu/PaymentDemo.vue
+++ b/src/views/uikit/menu/PaymentDemo.vue
@@ -4,9 +4,3 @@
         <p class="m-0 text-lg">Payment Component Content via Child Route</p>
     </div>
 </template>
-
-<script>
-export default {
-
-}
-</script>
\ No newline at end of file
diff --git a/src/views/uikit/menu/PersonalDemo.vue b/src/views/uikit/menu/PersonalDemo.vue
index 743605b..a2950b7 100644
--- a/src/views/uikit/menu/PersonalDemo.vue
+++ b/src/views/uikit/menu/PersonalDemo.vue
@@ -4,9 +4,3 @@
         <p class="m-0 text-lg">Personal Component Content via Child Route</p>
     </div>
 </template>
-
-<script>
-export default {
-
-}
-</script>
\ No newline at end of file
diff --git a/src/views/uikit/menu/SeatDemo.vue b/src/views/uikit/menu/SeatDemo.vue
index 86ea3bf..955004b 100644
--- a/src/views/uikit/menu/SeatDemo.vue
+++ b/src/views/uikit/menu/SeatDemo.vue
@@ -4,9 +4,3 @@
         <p class="m-0 text-lg">Seat Component Content via Child Route</p>
     </div>
 </template>
-
-<script>
-export default {
-
-}
-</script>
\ No newline at end of file
diff --git a/src/views/utilities/Blocks.vue b/src/views/utilities/Blocks.vue
index 50e14e1..ce16c95 100644
--- a/src/views/utilities/Blocks.vue
+++ b/src/views/utilities/Blocks.vue
@@ -1,3 +1,397 @@
+<script setup>
+import { ref } from 'vue';
+const block1 = ref(`
+<div class="grid grid-nogutter surface-section text-800">
+    <div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
+        <section>
+            <span class="block text-6xl font-bold mb-1">Create the screens your</span>
+            <div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
+            <p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
+            <Button label="Learn More" type="button" class="mr-3 p-button-raised"></Button>
+            <Button label="Live Demo" type="button" class="p-button-outlined"></Button>
+        </section>
+    </div>
+    <div class="col-12 md:col-6 overflow-hidden">
+        <img src="images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
+    </div>
+</div>`);
+const block2 = ref(`
+<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
+    <div class="mb-3 font-bold text-2xl">
+        <span class="text-900">One Product, </span>
+        <span class="text-blue-600">Many Solutions</span>
+    </div>
+    <div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
+    <div class="grid">
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-desktop text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">Built for Developers</div>
+            <span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
+        </div>
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-lock text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
+            <span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
+        </div>
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-check-circle text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">Easy to Use</div>
+            <span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
+        </div>
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-globe text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">Fast & Global Support</div>
+            <span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
+        </div>
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-github text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">Open Source</div>
+            <span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
+        </div>
+        <div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-shield text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">Trusted Securitty</div>
+            <span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
+        </div>
+    </div>
+</div>`);
+const block3 = ref(`
+<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
+    <div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
+    <div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
+
+    <div class="grid">
+        <div class="col-12 lg:col-4">
+            <div class="p-3 h-full">
+                <div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
+                    <div class="text-900 font-medium text-xl mb-2">Basic</div>
+                    <div class="text-600">Plan description</div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <div class="flex align-items-center">
+                        <span class="font-bold text-2xl text-900">$9</span>
+                        <span class="ml-2 font-medium text-600">per month</span>
+                    </div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <ul class="list-none p-0 m-0 flex-grow-1">
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Arcu vitae elementum</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Dui faucibus in ornare</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Morbi tincidunt augue</span>
+                        </li>
+                    </ul>
+                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
+                    <Button label="Buy Now" class="p-3 w-full mt-auto"></Button>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 lg:col-4">
+            <div class="p-3 h-full">
+                <div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
+                    <div class="text-900 font-medium text-xl mb-2">Premium</div>
+                    <div class="text-600">Plan description</div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <div class="flex align-items-center">
+                        <span class="font-bold text-2xl text-900">$29</span>
+                        <span class="ml-2 font-medium text-600">per month</span>
+                    </div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <ul class="list-none p-0 m-0 flex-grow-1">
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Arcu vitae elementum</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Dui faucibus in ornare</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Morbi tincidunt augue</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Duis ultricies lacus sed</span>
+                        </li>
+                    </ul>
+                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
+                    <Button label="Buy Now" class="p-3 w-full"></Button>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 lg:col-4">
+            <div class="p-3 h-full">
+                <div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
+                    <div class="text-900 font-medium text-xl mb-2">Enterprise</div>
+                    <div class="text-600">Plan description</div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <div class="flex align-items-center">
+                        <span class="font-bold text-2xl text-900">$49</span>
+                        <span class="ml-2 font-medium text-600">per month</span>
+                    </div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <ul class="list-none p-0 m-0 flex-grow-1">
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Arcu vitae elementum</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Dui faucibus in ornare</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Morbi tincidunt augue</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Duis ultricies lacus sed</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Imperdiet proin</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Nisi scelerisque</span>
+                        </li>
+                    </ul>
+                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
+                    <Button label="Buy Now" class="p-3 w-full p-button-outlined"></Button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`);
+const block4 = ref(`
+<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
+    <div class="text-700 text-center">
+        <div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
+        <div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
+        <div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
+        <Button label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></Button>
+    </div>
+</div>`);
+const block5 = ref(`
+<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
+    <div class="font-bold mr-8">🔥 Hot Deals!</div>
+    <div class="align-items-center hidden lg:flex">
+        <span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
+    </div>
+    <a class="flex align-items-center ml-2 mr-8">
+        <a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
+    </a>
+    <a v-ripple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150 p-ripple" style="width:2rem; height: 2rem">
+        <i class="pi pi-times"></i>
+    </a>
+</div>`);
+const block6 = ref(`
+<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
+    <ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
+        <li>
+            <a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
+        </li>
+        <li class="px-2">
+            <i class="pi pi-angle-right text-500 line-height-3"></i>
+        </li>
+        <li>
+            <span class="text-900 line-height-3">Analytics</span>
+        </li>
+    </ul>
+    <div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
+        <div>
+            <div class="font-medium text-3xl text-900">Customers</div>
+            <div class="flex align-items-center text-700 flex-wrap">
+                <div class="mr-5 flex align-items-center mt-3">
+                    <i class="pi pi-users mr-2"></i>
+                    <span>332 Active Users</span>
+                </div>
+                <div class="mr-5 flex align-items-center mt-3">
+                    <i class="pi pi-globe mr-2"></i>
+                    <span>9402 Sessions</span>
+                </div>
+                <div class="flex align-items-center mt-3">
+                    <i class="pi pi-clock mr-2"></i>
+                    <span>2.32m Avg. Duration</span>
+                </div>
+            </div>
+        </div>
+        <div class="mt-3 lg:mt-0">
+            <Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
+            <Button label="Save" icon="pi pi-check"></Button>
+        </div>
+    </div>
+</div>`);
+const block7 = ref(`
+<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
+    <div class="grid">
+        <div class="col-12 md:col-6 lg:col-3">
+            <div class="surface-card shadow-2 p-3 border-round">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Orders</span>
+                        <div class="text-900 font-medium text-xl">152</div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
+                        <i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
+                    </div>
+                </div>
+                <span class="text-green-500 font-medium">24 new </span>
+                <span class="text-500">since last visit</span>
+            </div>
+        </div>
+        <div class="col-12 md:col-6 lg:col-3">
+            <div class="surface-card shadow-2 p-3 border-round">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Revenue</span>
+                        <div class="text-900 font-medium text-xl">$2.100</div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
+                        <i class="pi pi-map-marker text-orange-500 text-xl"></i>
+                    </div>
+                </div>
+                <span class="text-green-500 font-medium">%52+ </span>
+                <span class="text-500">since last week</span>
+            </div>
+        </div>
+        <div class="col-12 md:col-6 lg:col-3">
+            <div class="surface-card shadow-2 p-3 border-round">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Customers</span>
+                        <div class="text-900 font-medium text-xl">28441</div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
+                        <i class="pi pi-inbox text-cyan-500 text-xl"></i>
+                    </div>
+                </div>
+                <span class="text-green-500 font-medium">520  </span>
+                <span class="text-500">newly registered</span>
+            </div>
+        </div>
+        <div class="col-12 md:col-6 lg:col-3">
+            <div class="surface-card shadow-2 p-3 border-round">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Comments</span>
+                        <div class="text-900 font-medium text-xl">152 Unread</div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
+                        <i class="pi pi-comment text-purple-500 text-xl"></i>
+                    </div>
+                </div>
+                <span class="text-green-500 font-medium">85 </span>
+                <span class="text-500">responded</span>
+            </div>
+        </div>
+    </div>
+</div>`);
+const block8 = ref(`
+<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
+    <div class="text-center mb-5">
+        <img src="images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
+        <div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
+        <span class="text-600 font-medium line-height-3">Don't have an account?</span>
+        <a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
+    </div>
+
+    <div>
+        <label for="email1" class="block text-900 font-medium mb-2">Email</label>
+        <InputText id="email1" type="text" class="w-full mb-3" />
+
+        <label for="password1" class="block text-900 font-medium mb-2">Password</label>
+        <InputText id="password1" type="password" class="w-full mb-3" />
+
+        <div class="flex align-items-center justify-content-between mb-6">
+            <div class="flex align-items-center">
+                <Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
+                <label for="rememberme1">Remember me</label>
+            </div>
+            <a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
+        </div>
+
+        <Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
+    </div>
+</div>`);
+const block9 = ref(`
+<div class="surface-section">
+    <div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
+    <div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
+    <ul class="list-none p-0 m-0">
+        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+            <div class="text-500 w-6 md:w-2 font-medium">Title</div>
+            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
+            <div class="w-6 md:w-2 flex justify-content-end">
+                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+            </div>
+        </li>
+        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+            <div class="text-500 w-6 md:w-2 font-medium">Genre</div>
+            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
+                <Chip label="Crime" class="mr-2"></Chip>
+                <Chip label="Drama" class="mr-2"></Chip>
+                <Chip label="Thriller"></Chip>
+            </div>
+            <div class="w-6 md:w-2 flex justify-content-end">
+                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+            </div>
+        </li>
+        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+            <div class="text-500 w-6 md:w-2 font-medium">Director</div>
+            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
+            <div class="w-6 md:w-2 flex justify-content-end">
+                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+            </div>
+        </li>
+        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+            <div class="text-500 w-6 md:w-2 font-medium">Actors</div>
+            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
+            <div class="w-6 md:w-2 flex justify-content-end">
+                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+            </div>
+        </li>
+        <li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
+            <div class="text-500 w-6 md:w-2 font-medium">Plot</div>
+            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
+                A group of professional bank robbers start to feel the heat from police
+                when they unknowingly leave a clue at their latest heist.</div>
+            <div class="w-6 md:w-2 flex justify-content-end">
+                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+            </div>
+        </li>
+    </ul>
+</div>`);
+const block10 = ref(`
+<div class="surface-card p-4 shadow-2 border-round">
+    <div class="text-3xl font-medium text-900 mb-3">Card Title</div>
+    <div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
+    <div style="height: 150px" class="border-2 border-dashed surface-border"></div>
+</div>`);
+const checked = ref(false);
+</script>
+
 <template>
     <div>
         <BlockViewer header="Hero" :code="block1">
@@ -408,397 +802,3 @@
         </BlockViewer>
     </div>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-const block1 = ref(`
-<div class="grid grid-nogutter surface-section text-800">
-    <div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
-        <section>
-            <span class="block text-6xl font-bold mb-1">Create the screens your</span>
-            <div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
-            <p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-
-            <Button label="Learn More" type="button" class="mr-3 p-button-raised"></Button>
-            <Button label="Live Demo" type="button" class="p-button-outlined"></Button>
-        </section>
-    </div>
-    <div class="col-12 md:col-6 overflow-hidden">
-        <img src="images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
-    </div>
-</div>`);
-const block2 = ref(`
-<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
-    <div class="mb-3 font-bold text-2xl">
-        <span class="text-900">One Product, </span>
-        <span class="text-blue-600">Many Solutions</span>
-    </div>
-    <div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
-    <div class="grid">
-        <div class="col-12 md:col-4 mb-4 px-5">
-            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
-                <i class="pi pi-desktop text-4xl text-blue-500"></i>
-            </span>
-            <div class="text-900 mb-3 font-medium">Built for Developers</div>
-            <span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
-        </div>
-        <div class="col-12 md:col-4 mb-4 px-5">
-            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
-                <i class="pi pi-lock text-4xl text-blue-500"></i>
-            </span>
-            <div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
-            <span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
-        </div>
-        <div class="col-12 md:col-4 mb-4 px-5">
-            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
-                <i class="pi pi-check-circle text-4xl text-blue-500"></i>
-            </span>
-            <div class="text-900 mb-3 font-medium">Easy to Use</div>
-            <span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
-        </div>
-        <div class="col-12 md:col-4 mb-4 px-5">
-            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
-                <i class="pi pi-globe text-4xl text-blue-500"></i>
-            </span>
-            <div class="text-900 mb-3 font-medium">Fast & Global Support</div>
-            <span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
-        </div>
-        <div class="col-12 md:col-4 mb-4 px-5">
-            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
-                <i class="pi pi-github text-4xl text-blue-500"></i>
-            </span>
-            <div class="text-900 mb-3 font-medium">Open Source</div>
-            <span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
-        </div>
-        <div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
-            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
-                <i class="pi pi-shield text-4xl text-blue-500"></i>
-            </span>
-            <div class="text-900 mb-3 font-medium">Trusted Securitty</div>
-            <span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
-        </div>
-    </div>
-</div>`);
-const block3 = ref(`
-<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
-    <div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
-    <div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
-
-    <div class="grid">
-        <div class="col-12 lg:col-4">
-            <div class="p-3 h-full">
-                <div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
-                    <div class="text-900 font-medium text-xl mb-2">Basic</div>
-                    <div class="text-600">Plan description</div>
-                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                    <div class="flex align-items-center">
-                        <span class="font-bold text-2xl text-900">$9</span>
-                        <span class="ml-2 font-medium text-600">per month</span>
-                    </div>
-                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                    <ul class="list-none p-0 m-0 flex-grow-1">
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Arcu vitae elementum</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Dui faucibus in ornare</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Morbi tincidunt augue</span>
-                        </li>
-                    </ul>
-                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
-                    <Button label="Buy Now" class="p-3 w-full mt-auto"></Button>
-                </div>
-            </div>
-        </div>
-
-        <div class="col-12 lg:col-4">
-            <div class="p-3 h-full">
-                <div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
-                    <div class="text-900 font-medium text-xl mb-2">Premium</div>
-                    <div class="text-600">Plan description</div>
-                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                    <div class="flex align-items-center">
-                        <span class="font-bold text-2xl text-900">$29</span>
-                        <span class="ml-2 font-medium text-600">per month</span>
-                    </div>
-                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                    <ul class="list-none p-0 m-0 flex-grow-1">
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Arcu vitae elementum</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Dui faucibus in ornare</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Morbi tincidunt augue</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Duis ultricies lacus sed</span>
-                        </li>
-                    </ul>
-                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
-                    <Button label="Buy Now" class="p-3 w-full"></Button>
-                </div>
-            </div>
-        </div>
-
-        <div class="col-12 lg:col-4">
-            <div class="p-3 h-full">
-                <div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
-                    <div class="text-900 font-medium text-xl mb-2">Enterprise</div>
-                    <div class="text-600">Plan description</div>
-                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                    <div class="flex align-items-center">
-                        <span class="font-bold text-2xl text-900">$49</span>
-                        <span class="ml-2 font-medium text-600">per month</span>
-                    </div>
-                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                    <ul class="list-none p-0 m-0 flex-grow-1">
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Arcu vitae elementum</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Dui faucibus in ornare</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Morbi tincidunt augue</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Duis ultricies lacus sed</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Imperdiet proin</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                            <span>Nisi scelerisque</span>
-                        </li>
-                    </ul>
-                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
-                    <Button label="Buy Now" class="p-3 w-full p-button-outlined"></Button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>`);
-const block4 = ref(`
-<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
-    <div class="text-700 text-center">
-        <div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
-        <div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
-        <div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
-        <Button label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></Button>
-    </div>
-</div>`);
-const block5 = ref(`
-<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
-    <div class="font-bold mr-8">🔥 Hot Deals!</div>
-    <div class="align-items-center hidden lg:flex">
-        <span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
-    </div>
-    <a class="flex align-items-center ml-2 mr-8">
-        <a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
-    </a>
-    <a v-ripple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150 p-ripple" style="width:2rem; height: 2rem">
-        <i class="pi pi-times"></i>
-    </a>
-</div>`);
-const block6 = ref(`
-<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
-    <ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
-        <li>
-            <a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
-        </li>
-        <li class="px-2">
-            <i class="pi pi-angle-right text-500 line-height-3"></i>
-        </li>
-        <li>
-            <span class="text-900 line-height-3">Analytics</span>
-        </li>
-    </ul>
-    <div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
-        <div>
-            <div class="font-medium text-3xl text-900">Customers</div>
-            <div class="flex align-items-center text-700 flex-wrap">
-                <div class="mr-5 flex align-items-center mt-3">
-                    <i class="pi pi-users mr-2"></i>
-                    <span>332 Active Users</span>
-                </div>
-                <div class="mr-5 flex align-items-center mt-3">
-                    <i class="pi pi-globe mr-2"></i>
-                    <span>9402 Sessions</span>
-                </div>
-                <div class="flex align-items-center mt-3">
-                    <i class="pi pi-clock mr-2"></i>
-                    <span>2.32m Avg. Duration</span>
-                </div>
-            </div>
-        </div>
-        <div class="mt-3 lg:mt-0">
-            <Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
-            <Button label="Save" icon="pi pi-check"></Button>
-        </div>
-    </div>
-</div>`);
-const block7 = ref(`
-<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
-    <div class="grid">
-        <div class="col-12 md:col-6 lg:col-3">
-            <div class="surface-card shadow-2 p-3 border-round">
-                <div class="flex justify-content-between mb-3">
-                    <div>
-                        <span class="block text-500 font-medium mb-3">Orders</span>
-                        <div class="text-900 font-medium text-xl">152</div>
-                    </div>
-                    <div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
-                        <i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
-                    </div>
-                </div>
-                <span class="text-green-500 font-medium">24 new </span>
-                <span class="text-500">since last visit</span>
-            </div>
-        </div>
-        <div class="col-12 md:col-6 lg:col-3">
-            <div class="surface-card shadow-2 p-3 border-round">
-                <div class="flex justify-content-between mb-3">
-                    <div>
-                        <span class="block text-500 font-medium mb-3">Revenue</span>
-                        <div class="text-900 font-medium text-xl">$2.100</div>
-                    </div>
-                    <div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
-                        <i class="pi pi-map-marker text-orange-500 text-xl"></i>
-                    </div>
-                </div>
-                <span class="text-green-500 font-medium">%52+ </span>
-                <span class="text-500">since last week</span>
-            </div>
-        </div>
-        <div class="col-12 md:col-6 lg:col-3">
-            <div class="surface-card shadow-2 p-3 border-round">
-                <div class="flex justify-content-between mb-3">
-                    <div>
-                        <span class="block text-500 font-medium mb-3">Customers</span>
-                        <div class="text-900 font-medium text-xl">28441</div>
-                    </div>
-                    <div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
-                        <i class="pi pi-inbox text-cyan-500 text-xl"></i>
-                    </div>
-                </div>
-                <span class="text-green-500 font-medium">520  </span>
-                <span class="text-500">newly registered</span>
-            </div>
-        </div>
-        <div class="col-12 md:col-6 lg:col-3">
-            <div class="surface-card shadow-2 p-3 border-round">
-                <div class="flex justify-content-between mb-3">
-                    <div>
-                        <span class="block text-500 font-medium mb-3">Comments</span>
-                        <div class="text-900 font-medium text-xl">152 Unread</div>
-                    </div>
-                    <div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
-                        <i class="pi pi-comment text-purple-500 text-xl"></i>
-                    </div>
-                </div>
-                <span class="text-green-500 font-medium">85 </span>
-                <span class="text-500">responded</span>
-            </div>
-        </div>
-    </div>
-</div>`);
-const block8 = ref(`
-<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
-    <div class="text-center mb-5">
-        <img src="images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
-        <div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
-        <span class="text-600 font-medium line-height-3">Don't have an account?</span>
-        <a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
-    </div>
-
-    <div>
-        <label for="email1" class="block text-900 font-medium mb-2">Email</label>
-        <InputText id="email1" type="text" class="w-full mb-3" />
-
-        <label for="password1" class="block text-900 font-medium mb-2">Password</label>
-        <InputText id="password1" type="password" class="w-full mb-3" />
-
-        <div class="flex align-items-center justify-content-between mb-6">
-            <div class="flex align-items-center">
-                <Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
-                <label for="rememberme1">Remember me</label>
-            </div>
-            <a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
-        </div>
-
-        <Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
-    </div>
-</div>`);
-const block9 = ref(`
-<div class="surface-section">
-    <div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
-    <div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
-    <ul class="list-none p-0 m-0">
-        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
-            <div class="text-500 w-6 md:w-2 font-medium">Title</div>
-            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
-            <div class="w-6 md:w-2 flex justify-content-end">
-                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
-            </div>
-        </li>
-        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
-            <div class="text-500 w-6 md:w-2 font-medium">Genre</div>
-            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
-                <Chip label="Crime" class="mr-2"></Chip>
-                <Chip label="Drama" class="mr-2"></Chip>
-                <Chip label="Thriller"></Chip>
-            </div>
-            <div class="w-6 md:w-2 flex justify-content-end">
-                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
-            </div>
-        </li>
-        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
-            <div class="text-500 w-6 md:w-2 font-medium">Director</div>
-            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
-            <div class="w-6 md:w-2 flex justify-content-end">
-                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
-            </div>
-        </li>
-        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
-            <div class="text-500 w-6 md:w-2 font-medium">Actors</div>
-            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
-            <div class="w-6 md:w-2 flex justify-content-end">
-                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
-            </div>
-        </li>
-        <li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
-            <div class="text-500 w-6 md:w-2 font-medium">Plot</div>
-            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
-                A group of professional bank robbers start to feel the heat from police
-                when they unknowingly leave a clue at their latest heist.</div>
-            <div class="w-6 md:w-2 flex justify-content-end">
-                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
-            </div>
-        </li>
-    </ul>
-</div>`);
-const block10 = ref(`
-<div class="surface-card p-4 shadow-2 border-round">
-    <div class="text-3xl font-medium text-900 mb-3">Card Title</div>
-    <div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
-    <div style="height: 150px" class="border-2 border-dashed surface-border"></div>
-</div>`);
-const checked = ref(false);
-</script>
diff --git a/src/views/utilities/Icons.vue b/src/views/utilities/Icons.vue
index 24d6631..9633a34 100644
--- a/src/views/utilities/Icons.vue
+++ b/src/views/utilities/Icons.vue
@@ -1,3 +1,33 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+
+const icons = ref(null);
+const filter = ref(null);
+
+const filteredIcons = computed(() => {
+    if (filter.value) return icons.value.filter((icon) => icon.properties.name.indexOf(filter.value.toLowerCase()) > -1);
+    else return icons.value;
+});
+
+onMounted(() => {
+    fetch('data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
+        .then((res) => res.json())
+        .then((d) => {
+            let icons = d.icons;
+            let data = icons.filter((value) => {
+                return value.icon.tags.indexOf('deprecate') === -1;
+            });
+            data.sort((icon1, icon2) => {
+                if (icon1.properties.name < icon2.properties.name) return -1;
+                else if (icon1.properties.name > icon2.properties.name) return 1;
+                else return 0;
+            });
+
+            icons.value = data;
+        });
+});
+</script>
+
 <template>
     <div>
         <div class="card">
@@ -96,36 +126,6 @@ data() {
     </div>
 </template>
 
-<script setup>
-import { ref, onMounted, computed } from 'vue';
-
-const icons = ref(null);
-const filter = ref(null);
-
-const filteredIcons = computed(() => {
-    if (filter.value) return icons.value.filter((icon) => icon.properties.name.indexOf(filter.value.toLowerCase()) > -1);
-    else return icons.value;
-});
-
-onMounted(() => {
-    fetch('data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
-        .then((res) => res.json())
-        .then((d) => {
-            let icons = d.icons;
-            let data = icons.filter((value) => {
-                return value.icon.tags.indexOf('deprecate') === -1;
-            });
-            data.sort((icon1, icon2) => {
-                if (icon1.properties.name < icon2.properties.name) return -1;
-                else if (icon1.properties.name > icon2.properties.name) return 1;
-                else return 0;
-            });
-
-            icons.value = data;
-        });
-});
-</script>
-
 <style lang="scss" scoped>
 @import '@/assets/demo/styles/documentation.scss';