vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'v4' of https://github.com/primefaces/primevue into v4

pull/5880/head
Mert Sincan 2024-06-11 23:26:03 +01:00
parent b6b6baa9b6 64361aeec8
commit 8b6cc1b060
4 changed files with 38 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/showcase/components/landing/HeroSection.vue
View File

@ -25,16 +25,15 @@
</SelectButton> </SelectButton>
</div> </div>
<div class="bg-surface-0 border border-black/10 dark:border-white/20 dark:bg-surface-950 w-full rounded-3xl p-0 flex lg:hidden items-start gap-6 overflow-hidden"> <div class="bg-surface-0 border border-black/10 dark:border-white/20 dark:bg-surface-950 w-full rounded-3xl p-0 flex lg:hidden items-start gap-6 overflow-hidden">
<img :src="selectedSampleOption.src + (isDark() ? '-dark.jpg' : '.jpg')" class="w-full" alt="Hero" /> <template v-for="sampleOption of sampleOptions" :key="sampleOption.title">
<img v-if="selectedSampleOption.title === sampleOption.title" :src="sampleOption.src + (isDark() ? '-dark.jpg' : '.jpg')" class="w-full" />
</template>
</div> </div>
<div class="bg-surface-0 border border-black/10 dark:border-white/20 dark:bg-surface-950 w-full h-[85vh] max-h-[1040px] rounded-3xl p-6 hidden lg:flex lg:mt-20 items-start gap-6 overflow-hidden"> <div class="bg-surface-0 border border-black/10 dark:border-white/20 dark:bg-surface-950 w-full h-[85vh] max-h-[1040px] rounded-3xl p-6 hidden lg:flex lg:mt-20 items-start gap-6 overflow-hidden">
<div :class="isSlimMenu ? 'w-auto' : 'w-72'" class="rounded-2xl p-5 bg-surface-50 dark:bg-surface-900 h-full flex flex-col justify-between"> <div :class="isSlimMenu ? 'w-auto' : 'w-72'" class="rounded-2xl p-5 bg-surface-50 dark:bg-surface-900 h-full flex flex-col justify-between">
<div :class="isSlimMenu ? 'w-12 flex flex-col items-center' : 'w-auto'"> <div :class="isSlimMenu ? 'w-12 flex flex-col items-center' : 'w-auto'">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-11 h-11"> <div class="w-11 h-11 bg-surface-950 dark:bg-surface-0 rounded-xl flex items-center justify-center">
<span
class="bg-surface-950 dark:bg-surface-0 rounded-xl flex items-center justify-center p-2 drop-shadow-[0px_2px_0px_var(--p-surface-700)] dark:drop-shadow-[0px_2px_0px_var(--p-surface-100)] shadow-[0px_0px_3px_0px_rgba(188, 190, 195, 0.64)_inset]"
>
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.65 11.0645L13.1283 10.7253L14.3119 12.4216V17.6803L18.3698 14.2876V8.52002L16.5099 9.19856L14.65 11.0645Z" class="fill-surface-0 dark:fill-surface-950" /> <path d="M14.65 11.0645L13.1283 10.7253L14.3119 12.4216V17.6803L18.3698 14.2876V8.52002L16.5099 9.19856L14.65 11.0645Z" class="fill-surface-0 dark:fill-surface-950" />
<path d="M5.18078 11.0645L6.70251 10.7253L5.51894 12.4216V17.6803L1.46098 14.2876V8.52002L3.32088 9.19856L5.18078 11.0645Z" class="fill-surface-0 dark:fill-surface-950" /> <path d="M5.18078 11.0645L6.70251 10.7253L5.51894 12.4216V17.6803L1.46098 14.2876V8.52002L3.32088 9.19856L5.18078 11.0645Z" class="fill-surface-0 dark:fill-surface-950" />
@ -57,7 +56,6 @@
<path d="M13.8041 3.60283L17.3548 3.26356L14.9876 0.888672H12.6205L13.8041 3.60283Z" class="fill-surface-0 dark:fill-surface-950" /> <path d="M13.8041 3.60283L17.3548 3.26356L14.9876 0.888672H12.6205L13.8041 3.60283Z" class="fill-surface-0 dark:fill-surface-950" />
<path d="M6.02676 3.60283L2.47604 3.26356L4.84318 0.888672H7.21033L6.02676 3.60283Z" class="fill-surface-0 dark:fill-surface-950" /> <path d="M6.02676 3.60283L2.47604 3.26356L4.84318 0.888672H7.21033L6.02676 3.60283Z" class="fill-surface-0 dark:fill-surface-950" />
</svg> </svg>
</span>
</div> </div>
<div :class="isSlimMenu ? 'hidden' : 'block'" class="text-surface-950 dark:text-surface-0 font-medium text-3xl">Prime</div> <div :class="isSlimMenu ? 'hidden' : 'block'" class="text-surface-950 dark:text-surface-0 font-medium text-3xl">Prime</div>
</div> </div>
@ -94,7 +92,7 @@
} }
]" ]"
> >
<a @click="toggleSlimMenu" class="cursor-pointer block p-0 m-0 leading-none"> <a v-if="false" @click="toggleSlimMenu" class="cursor-pointer block p-0 m-0 leading-none">
<i :class="isSlimMenu ? 'pi pi-window-maximize' : 'pi pi-window-minimize'"></i> <i :class="isSlimMenu ? 'pi pi-window-maximize' : 'pi pi-window-minimize'"></i>
<span :class="isSlimMenu ? 'hidden' : 'font-medium leading-8'">・</span> <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-8'">・</span>
<span :class="isSlimMenu ? 'hidden' : 'font-medium leading-none'"> Slim Mode</span> <span :class="isSlimMenu ? 'hidden' : 'font-medium leading-none'"> Slim Mode</span>
@ -155,7 +153,7 @@ export default {
{ icon: 'pi pi-cog', title: 'Settings' } { icon: 'pi pi-cog', title: 'Settings' }
], ],
selectedSampleAppsSidebarNav: 'Overview', selectedSampleAppsSidebarNav: 'Overview',
isSlimMenu: false, isSlimMenu: true,
isSlimMenuSelected: false, isSlimMenuSelected: false,
sampleOptions: [ sampleOptions: [
{ icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' }, { icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' },
@ -167,14 +165,14 @@ export default {
], ],
selectedSampleOption: { icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' } selectedSampleOption: { icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' }
}; };
}, } /*,
beforeUnmount() { beforeUnmount() {
window.removeEventListener('resize', this.handleResize); window.removeEventListener('resize', this.handleResize);
}, },
mounted() { mounted() {
window.addEventListener('resize', this.handleResize); window.addEventListener('resize', this.handleResize);
this.handleResize(); this.handleResize();
}, },*/,
methods: { methods: {
setSelectedSampleAppsSidebarNav(title) { setSelectedSampleAppsSidebarNav(title) {
this.selectedSampleAppsSidebarNav = title; this.selectedSampleAppsSidebarNav = title;
@ -190,10 +188,6 @@ export default {
toggleSlimMenu() { toggleSlimMenu() {
this.isSlimMenu = !this.isSlimMenu; this.isSlimMenu = !this.isSlimMenu;
this.isSlimMenuSelected = this.isSlimMenu; this.isSlimMenuSelected = this.isSlimMenu;
},
changeMenu() {
this.isSlimMenu = !this.isSlimMenu;
this.isSlimMenuSelected = this.isSlimMenu;
} }
} }
}; };

2
apps/showcase/components/landing/samples/CustomersApp.vue
View File

@ -85,7 +85,7 @@
<Column field="more" header="More"> <Column field="more" header="More">
<template #body> <template #body>
<div class="flex justify-end w-full"> <div class="flex justify-end w-full">
<Button @click="visibleRight = true" icon="pi pi-ellipsis-h" outlined severity="secondary" /> <Button @click="visibleRight = true" icon="pi pi-ellipsis-h" rounded outlined severity="secondary" />
</div> </div>
</template> </template>
</Column> </Column>

12
apps/showcase/components/landing/samples/MoviesApp.vue
View File

@ -143,14 +143,14 @@ export default {
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover10.png', name: 'Shutter Island', bookmarked: false, point: '4.7', watchedPercent: 70, categories: ['Mystery', 'Thriller'] } { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover10.png', name: 'Shutter Island', bookmarked: false, point: '4.7', watchedPercent: 70, categories: ['Mystery', 'Thriller'] }
], ],
popularMovies: [ popularMovies: [
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover7.png', name: 'Twelve Angry Men', bookmarked: false, point: '4.7', categories: ['Crime', 'Drama'] }, { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover7.png', name: 'Twelve Angry Men', bookmarked: false, point: '4.6', categories: ['Crime', 'Drama'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover8.png', name: 'Saving Private Ryan', bookmarked: true, point: '4.7', categories: ['Drama', 'War'] }, { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover8.png', name: 'Saving Private Ryan', bookmarked: true, point: '4.4', categories: ['Drama', 'War'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover9.png', name: 'Seven', bookmarked: false, point: '4.7', categories: ['Crime', 'Drama', 'Mystery'] }, { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover9.png', name: 'Seven', bookmarked: false, point: '4.3', categories: ['Crime', 'Drama', 'Mystery'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover10.png', name: 'Shutter Island', bookmarked: false, point: '4.7', categories: ['Mystery', 'Thriller'] }, { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover10.png', name: 'Shutter Island', bookmarked: false, point: '4.7', categories: ['Mystery', 'Thriller'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover11.png', name: 'Basic Instinct', bookmarked: true, point: '4.7', categories: ['Drama', 'Mystery', 'Thriller'] }, { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover11.png', name: 'Basic Instinct', bookmarked: true, point: '4.3', categories: ['Drama', 'Mystery', 'Thriller'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover12.png', name: 'Big Hero 6', bookmarked: false, point: '4.7', categories: ['Animation', 'Action', 'Adventure'] }, { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover12.png', name: 'Big Hero 6', bookmarked: false, point: '4.7', categories: ['Animation', 'Action', 'Adventure'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover13.png', name: 'The Lord Of The Rings: Fellowship of the ring', bookmarked: true, point: '4.7', categories: ['Action', 'Adventure', 'Drama'] }, { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover13.png', name: 'The Lord Of The Rings: Fellowship of the ring', bookmarked: true, point: '4.9', categories: ['Action', 'Adventure', 'Drama'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover14.png', name: 'Kill Bill', bookmarked: true, point: '4.7', categories: ['Action', 'Crime', 'Thriller'] } { image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover14.png', name: 'Kill Bill', bookmarked: true, point: '4.5', categories: ['Action', 'Crime', 'Thriller'] }
] ]
}; };
}, },

2
apps/showcase/components/landing/samples/OverviewApp.vue
View File

@ -3,7 +3,7 @@
<div class="flex flex-wrap gap-4 items-start justify-between"> <div class="flex flex-wrap gap-4 items-start justify-between">
<div class="flex-1"> <div class="flex-1">
<div class="text-muted-color font-medium leading-normal">Overview</div> <div class="text-muted-color font-medium leading-normal">Overview</div>
<div class="text-color text-3xl font-semibold leading-normal">Good Morning, Robin 👋</div> <div class="text-color text-3xl font-semibold leading-normal">Welcome to PrimeVue</div>
</div> </div>
<div class="flex gap-2 whitespace-nowrap flex-nowrap"> <div class="flex gap-2 whitespace-nowrap flex-nowrap">
<IconField iconPosition="left"> <IconField iconPosition="left">