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

Updated demo pages

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-30 00:13:31 +03:00
parent 20eedb4b2b
commit 72ef6a60b6
52 changed files with 514 additions and 1794 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/AppConfigurator.vue
+37 -20
View File
@@ -6,18 +6,22 @@ import Lara from '@primevue/themes/lara';
import Nora from '@primevue/themes/nora';
import { ref } from 'vue';
const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme } = useLayout();
const preset = ref(layoutConfig.preset);
const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme, setMenuMode } = useLayout();
const presets = {
Aura,
Lara,
Nora
};
const preset = ref(layoutConfig.preset);
const presetOptions = ref(Object.keys(presets));
const menuMode = ref(layoutConfig.menuMode);
const menuModeOptions = ref([
{ label: 'Static', value: 'static' },
{ label: 'Overlay', value: 'overlay' }
]);
const primaryColors = ref([
{ name: 'noir', palette: {} },
{ name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } },
@@ -219,49 +223,62 @@ function applyTheme(type, color) {
}
}
function onPresetChange(value) {
setPreset(value);
const presetValue = presets[value];
function onPresetChange() {
setPreset(preset.value);
const presetValue = presets[preset.value];
const surfacePalette = surfaces.value.find((s) => s.name === layoutConfig.surface)?.palette;
$t().preset(presetValue).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
}
function onMenuModeChange() {
setMenuMode(menuMode.value);
}
</script>
<template>
<div class="config-panel hidden">
<div class="config-panel-content">
<div class="config-panel-colors">
<span class="config-panel-label">Primary</span>
<div>
<div
class="config-panel hidden absolute top-[3.25rem] right-0 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
>
<div class="flex flex-col gap-4">
<div>
<span class="text-sm text-muted-color font-semibold">Primary</span>
<div class="pt-2 flex gap-2 flex-wrap justify-between">
<button
v-for="primaryColor of primaryColors"
:key="primaryColor.name"
type="button"
:title="primaryColor.name"
@click="updateColors('primary', primaryColor)"
:class="{ 'active-color': layoutConfig.primary === primaryColor.name }"
:class="['border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1', { 'outline-primary': layoutConfig.primary === primaryColor.name }]"
:style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"
></button>
</div>
</div>
<div class="config-panel-colors">
<span class="config-panel-label">Surface</span>
<div>
<div>
<span class="text-sm text-muted-color font-semibold">Surface</span>
<div class="pt-2 flex gap-2 flex-wrap justify-between">
<button
v-for="surface of surfaces"
:key="surface.name"
type="button"
:title="surface.name"
@click="updateColors('surface', surface)"
:class="{ 'active-color': layoutConfig.surface ? layoutConfig.surface === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
:class="[
'border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1',
{ 'outline-primary': layoutConfig.surface ? layoutConfig.surface === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }
]"
:style="{ backgroundColor: `${surface.palette['500']}` }"
></button>
</div>
</div>
<div class="config-panel-settings">
<span class="config-panel-label">Presets</span>
<SelectButton v-model="preset" @update:modelValue="onPresetChange" :options="presetOptions" :allowEmpty="false" />
<div class="flex flex-col gap-2">
<span class="text-sm text-muted-color font-semibold">Presets</span>
<SelectButton v-model="preset" @change="onPresetChange" :options="presetOptions" :allowEmpty="false" />
</div>
<div class="flex flex-col gap-2">
<span class="text-sm text-muted-color font-semibold">Menu Mode</span>
<SelectButton v-model="menuMode" @change="onMenuModeChange" :options="menuModeOptions" :allowEmpty="false" optionLabel="label" optionValue="value" />
</div>
</div>
</div>
src/layout/AppFooter.vue
+3 -14
View File
@@ -1,19 +1,8 @@
<script setup>
import { useLayout } from '@/layout/composables/layout';
import { computed } from 'vue';
const { isDarkTheme } = useLayout();
const logoUrl = computed(() => {
return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
});
</script>
<script setup></script>
<template>
<div class="layout-footer">
<img :src="logoUrl" alt="Logo" height="20" class="mr-2" />
by
<span class="font-medium ml-2">PrimeVue</span>
SAKAI by
<span class="font-medium">PrimeVue</span>
</div>
</template>
<style lang="scss" scoped></style>
src/layout/AppLayout.vue
+1 -7
View File
@@ -19,8 +19,6 @@ watch(isSidebarActive, (newVal) => {
const containerClass = computed(() => {
return {
'layout-theme-light': !layoutConfig.darkTheme,
'layout-theme-dark': layoutConfig.darkTheme,
'layout-overlay': layoutConfig.menuMode === 'overlay',
'layout-static': layoutConfig.menuMode === 'static',
'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static',
@@ -55,9 +53,7 @@ const isOutsideClicked = (event) => {
<template>
<div class="layout-wrapper" :class="containerClass">
<app-topbar></app-topbar>
<div class="layout-sidebar">
<app-sidebar></app-sidebar>
</div>
<app-sidebar></app-sidebar>
<div class="layout-main-container">
<div class="layout-main">
<router-view></router-view>
@@ -68,5 +64,3 @@ const isOutsideClicked = (event) => {
</div>
<Toast />
</template>
<style lang="scss" scoped></style>
src/layout/AppMenu.vue
+1 -12
View File
@@ -24,16 +24,10 @@ const model = ref([
{ label: 'Message', icon: 'pi pi-fw pi-comment', to: '/uikit/message' },
{ label: 'File', icon: 'pi pi-fw pi-file', to: '/uikit/file' },
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/uikit/charts' },
{ label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/uikit/timeline' },
{ label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' }
]
},
{
label: 'Utilities',
items: [
{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/utilities/icons' },
{ label: 'PrimeFlex', icon: 'pi pi-fw pi-desktop', url: 'https://www.primefaces.org/primeflex/', target: '_blank' }
]
},
{
label: 'Pages',
icon: 'pi pi-fw pi-briefcase',
@@ -70,11 +64,6 @@ const model = ref([
icon: 'pi pi-fw pi-pencil',
to: '/pages/crud'
},
{
label: 'Timeline',
icon: 'pi pi-fw pi-calendar',
to: '/pages/timeline'
},
{
label: 'Not Found',
icon: 'pi pi-fw pi-exclamation-circle',
src/layout/AppSidebar.vue
+3 -1
View File
@@ -3,7 +3,9 @@ import AppMenu from './AppMenu.vue';
</script>
<template>
<app-menu></app-menu>
<div class="layout-sidebar">
<app-menu></app-menu>
</div>
</template>
<style lang="scss" scoped></style>
src/layout/composables/layout.js
+7 -1
View File
@@ -35,6 +35,10 @@ export function useLayout() {
layoutConfig.activeMenuItem = item.value || item;
};
const setMenuMode = (mode) => {
layoutConfig.menuMode = mode;
};
const toggleDarkMode = () => {
if (!document.startViewTransition) {
executeDarkModeToggle();
@@ -74,5 +78,7 @@ export function useLayout() {
const getPrimary = computed(() => layoutConfig.primary);
return { layoutConfig: readonly(layoutConfig), layoutState: readonly(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, getPrimary, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset, resetMenu };
const getSurface = computed(() => layoutConfig.surface);
return { layoutConfig: readonly(layoutConfig), layoutState: readonly(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, getPrimary, getSurface, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset, resetMenu, setMenuMode };
}