Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Submenu changes

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-07 14:56:17 +03:00
parent d9d56c8c1a
commit 4f477ec1f0
6 changed files with 92 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/AppMenu.vue
View File

@@ -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'
}
]

47
src/layout/AppMenuItem.vue
View File

@@ -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>

9
src/layout/composables/layoutService.js
View File

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

6
src/views/pages/Landing.vue
View File

@@ -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>

87
src/views/uikit/Icons.vue
View File

@@ -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 {

16
src/views/uikit/Misc.vue
View File

@@ -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>