Merge branch 'v4' of https://github.com/primefaces/primevue into v4
Mert Sincan
commit
8b6cc1b060
|
|
@ -25,39 +25,37 @@
|
|||
</SelectButton>
|
||||
</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">
|
||||
<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 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-12 flex flex-col items-center' : 'w-auto'">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11">
|
||||
<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">
|
||||
<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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6.02649 12.7634L7.37914 10.7278L8.22455 11.2367H11.6062L12.4516 10.7278L13.8042 12.7634V20.397L12.7898 21.9237L11.6062 23.1111H8.22455L7.04098 21.9237L6.02649 20.397V12.7634Z"
|
||||
class="fill-surface-0 dark:fill-surface-950"
|
||||
/>
|
||||
<path d="M14.311 20.9058L16.5091 18.7005V16.4952L14.311 18.3612V20.9058Z" class="fill-surface-0 dark:fill-surface-950" />
|
||||
<path d="M5.51868 20.9058L3.32062 18.7005V16.4952L5.51868 18.3612V20.9058Z" class="fill-surface-0 dark:fill-surface-950" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M9.578 0.888672H7.7177L6.36505 4.11174L8.56311 10.5579H11.4375L13.4665 4.11174L12.1138 0.888672H10.2543V10.5578H9.578V0.888672Z"
|
||||
class="fill-surface-0 dark:fill-surface-950"
|
||||
/>
|
||||
<path d="M8.56283 10.5575L1.29232 7.84329L0.277832 3.60242L6.53385 4.11132L8.73191 10.5575H8.56283Z" class="fill-surface-0 dark:fill-surface-950" />
|
||||
<path d="M11.4372 10.5575L18.7077 7.84329L19.7222 3.60242L13.2971 4.11132L11.2681 10.5575H11.4372Z" 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" />
|
||||
</svg>
|
||||
</span>
|
||||
<div class="w-11 h-11 bg-surface-950 dark:bg-surface-0 rounded-xl flex items-center justify-center">
|
||||
<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="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6.02649 12.7634L7.37914 10.7278L8.22455 11.2367H11.6062L12.4516 10.7278L13.8042 12.7634V20.397L12.7898 21.9237L11.6062 23.1111H8.22455L7.04098 21.9237L6.02649 20.397V12.7634Z"
|
||||
class="fill-surface-0 dark:fill-surface-950"
|
||||
/>
|
||||
<path d="M14.311 20.9058L16.5091 18.7005V16.4952L14.311 18.3612V20.9058Z" class="fill-surface-0 dark:fill-surface-950" />
|
||||
<path d="M5.51868 20.9058L3.32062 18.7005V16.4952L5.51868 18.3612V20.9058Z" class="fill-surface-0 dark:fill-surface-950" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M9.578 0.888672H7.7177L6.36505 4.11174L8.56311 10.5579H11.4375L13.4665 4.11174L12.1138 0.888672H10.2543V10.5578H9.578V0.888672Z"
|
||||
class="fill-surface-0 dark:fill-surface-950"
|
||||
/>
|
||||
<path d="M8.56283 10.5575L1.29232 7.84329L0.277832 3.60242L6.53385 4.11132L8.73191 10.5575H8.56283Z" class="fill-surface-0 dark:fill-surface-950" />
|
||||
<path d="M11.4372 10.5575L18.7077 7.84329L19.7222 3.60242L13.2971 4.11132L11.2681 10.5575H11.4372Z" 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" />
|
||||
</svg>
|
||||
</div>
|
||||
<div :class="isSlimMenu ? 'hidden' : 'block'" class="text-surface-950 dark:text-surface-0 font-medium text-3xl">Prime</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>
|
||||
<span :class="isSlimMenu ? 'hidden' : 'font-medium leading-8'">・</span>
|
||||
<span :class="isSlimMenu ? 'hidden' : 'font-medium leading-none'"> Slim Mode</span>
|
||||
|
|
@ -155,7 +153,7 @@ export default {
|
|||
{ icon: 'pi pi-cog', title: 'Settings' }
|
||||
],
|
||||
selectedSampleAppsSidebarNav: 'Overview',
|
||||
isSlimMenu: false,
|
||||
isSlimMenu: true,
|
||||
isSlimMenuSelected: false,
|
||||
sampleOptions: [
|
||||
{ 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' }
|
||||
};
|
||||
},
|
||||
} /*,
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
this.handleResize();
|
||||
},
|
||||
},*/,
|
||||
methods: {
|
||||
setSelectedSampleAppsSidebarNav(title) {
|
||||
this.selectedSampleAppsSidebarNav = title;
|
||||
|
|
@ -190,10 +188,6 @@ export default {
|
|||
toggleSlimMenu() {
|
||||
this.isSlimMenu = !this.isSlimMenu;
|
||||
this.isSlimMenuSelected = this.isSlimMenu;
|
||||
},
|
||||
changeMenu() {
|
||||
this.isSlimMenu = !this.isSlimMenu;
|
||||
this.isSlimMenuSelected = this.isSlimMenu;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
<Column field="more" header="More">
|
||||
<template #body>
|
||||
<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>
|
||||
</template>
|
||||
</Column>
|
||||
|
|
|
|||
|
|
@ -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'] }
|
||||
],
|
||||
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-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-cover9.png', name: 'Seven', bookmarked: false, point: '4.7', categories: ['Crime', 'Drama', 'Mystery'] },
|
||||
{ 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.4', categories: ['Drama', 'War'] },
|
||||
{ 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-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-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-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-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.5', categories: ['Action', 'Crime', 'Thriller'] }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="flex flex-wrap gap-4 items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<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 class="flex gap-2 whitespace-nowrap flex-nowrap">
|
||||
<IconField iconPosition="left">
|
||||
|
|
|
|||
Loading…
Reference in New Issue