components tag order added

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>

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>

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>

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>

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;

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;
 

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;
     };
 

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);
     }
 }

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());
     }
 }

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);
     }
 }

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);
     }
 }

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);
     }
 }