From 4f477ec1f0c4e0f684e6b82fe15d86a46931fdb8 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 14:56:17 +0300
Subject: [PATCH] Submenu changes

---
 src/layout/AppMenu.vue                  |  4 +-
 src/layout/AppMenuItem.vue              | 47 ++++++++-----
 src/layout/composables/layoutService.js |  9 ++-
 src/views/pages/Landing.vue             |  6 +-
 src/views/uikit/Icons.vue               | 87 ++++++++++++-------------
 src/views/uikit/Misc.vue                | 16 ++---
 6 files changed, 92 insertions(+), 77 deletions(-)

diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
index 214bc48..989604d 100644
--- a/src/layout/AppMenu.vue
+++ b/src/layout/AppMenu.vue
@@ -33,7 +33,7 @@ const model = ref([
         label: 'Prime Blocks',
         items: [
             { label: 'Free Blocks', icon: 'pi pi-fw pi-eye', to: '/blocks', badge: 'NEW' },
-            { label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: 'https://www.primefaces.org/primeblocks-react', target: '_blank' }
+            { label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: 'https://www.primefaces.org/primeblocks-vue', target: '_blank' }
         ]
     },
     {
@@ -151,7 +151,7 @@ const model = ref([
             {
                 label: 'View Source',
                 icon: 'pi pi-fw pi-search',
-                url: 'https://github.com/primefaces/sakai-react',
+                url: 'https://github.com/primefaces/sakai-vue',
                 target: '_blank'
             }
         ]
diff --git a/src/layout/AppMenuItem.vue b/src/layout/AppMenuItem.vue
index 6d02f4d..486f5c7 100644
--- a/src/layout/AppMenuItem.vue
+++ b/src/layout/AppMenuItem.vue
@@ -1,9 +1,12 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onBeforeMount, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import { useLayoutService } from '@/layout/composables/layoutService';
 
-const emit = defineEmits(['submenu:opened']);
 const route = useRoute();
+
+const { layoutConfig, setActiveMenuItem } = useLayoutService();
+
 const show = ref(true);
 const props = defineProps({
     item: {
@@ -18,19 +21,31 @@ const props = defineProps({
         type: Boolean,
         default: true
     },
-    active: {
-        type: Boolean,
-        default: false
+    parentItemKey: {
+        type: String,
+        default: null
     }
 });
-const activeSubmenu = ref(null);
-onMounted(() => {
+
+const isActiveMenu = ref(false);
+const itemKey = ref(null);
+onBeforeMount(() => {
     if (!props.root) {
         show.value = false;
     }
-    console.log(props.item);
+
+    itemKey.value = props.parentItemKey ? props.parentItemKey + '-' + props.index : String(props.index);
+
+    console.log();
+    isActiveMenu.value = layoutConfig.activeMenuItem.value === itemKey.value || layoutConfig.activeMenuItem?.value?.startsWith(itemKey.value + '-');
 });
-const itemClick = (event, item, index) => {
+watch(
+    () => layoutConfig.activeMenuItem.value,
+    (newVal) => {
+        isActiveMenu.value = newVal === itemKey.value || newVal.startsWith(itemKey.value + '-');
+    }
+);
+const itemClick = (event, item) => {
     if (item.disabled) {
         event.preventDefault();
         return;
@@ -38,9 +53,6 @@ const itemClick = (event, item, index) => {
     if (!item.to && !item.url) {
         if (item.items) {
             show.value = !show.value;
-
-            activeSubmenu.value = show.value ? index : null;
-            emit('submenu:opened');
         }
         event.preventDefault();
     }
@@ -49,7 +61,10 @@ const itemClick = (event, item, index) => {
         item.command({ originalEvent: event, item: item });
     }
 
-    /*     activeIndex.value = index === activeIndex.value ? null : index; 
+    if (item.items) setActiveMenuItem(isActiveMenu.value ? props.parentItemKey : itemKey);
+    else setActiveMenuItem(itemKey.value);
+
+    /*     activeIndex.value = index === activeIndex.value ? null : index;
 
     /*     emit('menuitem-click', {
         originalEvent: event,
@@ -63,7 +78,7 @@ const checkActiveRoute = (item) => {
 </script>
 
 <template>
-    <li :class="{ 'layout-root-menuitem': root, 'active-menuitem': checkActiveRoute(item, root) }">
+    <li :class="{ 'layout-root-menuitem': root, 'active-menuitem': isActiveMenu }">
         <div v-if="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
         <a v-if="(!item.to || item.items) && item.visible !== false" :href="item.url" @click="itemClick($event, item, index)" :class="item.class" :target="item.target" tabindex="0">
             <i :class="item.icon" class="layout-menuitem-icon"></i>
@@ -76,8 +91,8 @@ const checkActiveRoute = (item) => {
             <i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
         </router-link>
         <Transition v-if="item.items && item.visible !== false" name="layout-submenu">
-            <ul v-show="show" class="layout-submenu">
-                <app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :root="false"></app-menu-item>
+            <ul v-show="root ? true : isActiveMenu" class="layout-submenu">
+                <app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :parentItemKey="itemKey" :root="false"></app-menu-item>
             </ul>
         </Transition>
     </li>
diff --git a/src/layout/composables/layoutService.js b/src/layout/composables/layoutService.js
index ab4db6b..2dd25d8 100644
--- a/src/layout/composables/layoutService.js
+++ b/src/layout/composables/layoutService.js
@@ -6,7 +6,8 @@ const layoutConfig = reactive({
     inputStyle: 'outlined',
     menuMode: 'static',
     theme: 'lara-light-indigo',
-    scale: 14
+    scale: 14,
+    activeMenuItem: null
 });
 
 const layoutState = reactive({
@@ -28,6 +29,10 @@ export function useLayoutService () {
         layoutConfig.scale = scale;
     };
 
+    const setActiveMenuItem = item => {
+        layoutConfig.activeMenuItem = item.value || item;
+    };
+
     const onMenuToggle = () => {
         if (layoutConfig.menuMode === 'overlay') {
             layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
@@ -44,5 +49,5 @@ export function useLayoutService () {
 
     const isDarkTheme = computed(() => layoutConfig.darkTheme);
 
-    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive, isDarkTheme };
+    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
 }
diff --git a/src/views/pages/Landing.vue b/src/views/pages/Landing.vue
index 3a14e17..73ee651 100644
--- a/src/views/pages/Landing.vue
+++ b/src/views/pages/Landing.vue
@@ -221,7 +221,7 @@
                 <div class="col-12 lg:col-4 p-0 md:p-3">
                     <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
                         <h3 class="text-900 text-center">Free</h3>
-                        <img src="@/assets/demo/images/landing/asset-tier-1.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <img src="@/assets/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="" />
                         <div class="my-5 text-center">
                             <span class="text-5xl font-bold mr-2 text-900">$0</span>
                             <span class="text-600">per month</span>
@@ -252,7 +252,7 @@
                 <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
                     <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
                         <h3 class="text-900 text-center">Startup</h3>
-                        <img src="@/assets/demo/images/landing/asset-tier-2.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <img src="@/assets/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="" />
                         <div class="my-5 text-center">
                             <span class="text-5xl font-bold mr-2 text-900">$1</span>
                             <span class="text-600">per month</span>
@@ -283,7 +283,7 @@
                 <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
                     <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
                         <h3 class="text-900 text-center">Enterprice</h3>
-                        <img src="@/assets/demo/images/landing/asset-tier-3.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <img src="@/assets/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="" />
                         <div class="my-5 text-center">
                             <span class="text-5xl font-bold mr-2 text-900">$999</span>
                             <span class="text-600">per month</span>
diff --git a/src/views/uikit/Icons.vue b/src/views/uikit/Icons.vue
index 8c3572a..c777e9e 100644
--- a/src/views/uikit/Icons.vue
+++ b/src/views/uikit/Icons.vue
@@ -7,35 +7,34 @@
             <h5>Download</h5>
             <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
 
-<pre v-code><code>
+            <pre v-code><code>
 npm install primeicons --save
 
 </code></pre>
 
             <h5>Getting Started</h5>
-            <p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>.
-            A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
+            <p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>. A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
 
-<pre v-code><code>
+            <pre v-code><code>
 &lt;i class="pi pi-check"&gt;&lt;/i&gt;
 &lt;i class="pi pi-times"&gt;&lt;/i&gt;
 
 </code></pre>
 
-<i class="pi pi-check" style="margin-right: .5rem"></i>
-<i class="pi pi-times"></i>
+            <i class="pi pi-check" style="margin-right: 0.5rem"></i>
+            <i class="pi pi-times"></i>
 
             <h5>Size</h5>
             <p>Size of the icons can easily be changed using font-size property.</p>
 
-<pre v-code><code>
+            <pre v-code><code>
 &lt;i class="pi pi-check"&gt;&lt;/i&gt;
 
 </code></pre>
 
             <i class="pi pi-check"></i>
 
-<pre v-code><code>
+            <pre v-code><code>
 &lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
 
 </code></pre>
@@ -44,7 +43,7 @@ npm install primeicons --save
 
             <h5>Spinning Animation</h5>
             <p>Special pi-spin class applies continuous rotation to an icon.</p>
-<pre v-code><code>
+            <pre v-code><code>
 &lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
 
 </code></pre>
@@ -53,12 +52,12 @@ npm install primeicons --save
 
             <h5>Constants</h5>
             <p>PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.</p>
-<pre v-code><code>
+            <pre v-code><code>
 &lt;Menu :model="items" /&gt;
 
 </code></pre>
 
-<pre v-code.script><code>
+            <pre v-code.script><code>
 import {PrimeIcons} from 'primevue/api';
 
 export default {
@@ -90,53 +89,49 @@ export default {
             <div class="grid icons-list text-center">
                 <div class="col-6 sm:col-4 lg:col-3 xl:col-2 pb-5" v-for="icon of filteredIcons" :key="icon.properties.name">
                     <i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
-                    <div>pi-{{icon.properties.name}}</div>
+                    <div>pi-{{ icon.properties.name }}</div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            icons: null,
-            filter: null
-        }
-    },
-    mounted() {
-        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;
-                });
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+const icons = ref(null);
+const filter = ref(null);
 
-                this.icons = data;
+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;
             });
-    },
-    computed: {
-        filteredIcons() {
-            if (this.filter)
-                return this.icons.filter(icon => icon.properties.name.indexOf(this.filter.toLowerCase()) > -1);
-            else
-                return this.icons;
-        }
+            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';
+@import '@/assets/demo/documentation.scss';
 
 .icons-list {
     i {
diff --git a/src/views/uikit/Misc.vue b/src/views/uikit/Misc.vue
index dfc4247..edfb77b 100644
--- a/src/views/uikit/Misc.vue
+++ b/src/views/uikit/Misc.vue
@@ -46,11 +46,11 @@
                 <h4>Avatar</h4>
                 <h5>Avatar Group</h5>
                 <AvatarGroup class="mb-3">
-                    <Avatar image="images/avatar/amyelsner.png" size="large" shape="circle"></Avatar>
-                    <Avatar image="images/avatar/asiyajavayant.png" size="large" shape="circle"></Avatar>
-                    <Avatar image="images/avatar/onyamalimba.png" size="large" shape="circle"></Avatar>
-                    <Avatar image="images/avatar/ionibowcher.png" size="large" shape="circle"></Avatar>
-                    <Avatar image="images/avatar/xuxuefeng.png" size="large" shape="circle"></Avatar>
+                    <Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle"></Avatar>
+                    <Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle"></Avatar>
+                    <Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle"></Avatar>
+                    <Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle"></Avatar>
+                    <Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle"></Avatar>
                     <Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
                 </AvatarGroup>
 
@@ -122,9 +122,9 @@
 
                 <h5>Image</h5>
                 <div class="flex align-items-center flex-column sm:flex-row">
-                    <Chip label="Amy Elsner" image="images/avatar/amyelsner.png" class="mr-2 mb-2"></Chip>
-                    <Chip label="Asiya Javayant" image="images/avatar/asiyajavayant.png" class="mr-2 mb-2"></Chip>
-                    <Chip label="Onyama Limba" image="images/avatar/onyamalimba.png" class="mr-2 mb-2"></Chip>
+                    <Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" class="mr-2 mb-2"></Chip>
+                    <Chip label="Asiya Javayant" image="/images/avatar/asiyajavayant.png" class="mr-2 mb-2"></Chip>
+                    <Chip label="Onyama Limba" image="/images/avatar/onyamalimba.png" class="mr-2 mb-2"></Chip>
                 </div>
             </div>