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

Layout config updated

Browse Source
This commit is contained in:
tugcekucukoglu
2024-03-11 17:20:41 +03:00
parent 44f689cfea
commit 04ed9999ca
4 changed files with 363 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -6,7 +6,7 @@
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sakai Vue</title>
<link id="theme-css" rel="stylesheet" type="text/css" href="/themes/lara-light-indigo/theme.css">
<link id="theme-css" rel="stylesheet" type="text/css" href="/themes/aura-light-green/theme.css">
</head>
<body>

583
src/layout/AppConfig.vue
View File

@@ -1,10 +1,6 @@
<script setup>
import RadioButton from 'primevue/radiobutton';
import Button from 'primevue/button';
import InputSwitch from 'primevue/inputswitch';
import Sidebar from 'primevue/sidebar';
import { ref } from 'vue';
import { ref, computed } from 'vue';
import { usePrimeVue } from 'primevue/config';
import { useLayout } from '@/layout/composables/layout';
defineProps({
@@ -13,27 +9,33 @@ defineProps({
default: false
}
});
const $primevue = usePrimeVue();
const inputStyle = computed(() => $primevue.config.inputStyle || 'outlined');
const scales = ref([12, 13, 14, 15, 16]);
const visible = ref(false);
const inputStyles = ref([
{ label: 'Outlined', value: 'outlined' },
{ label: 'Filled', value: 'filled' }
]);
const menuModes = ref([
{ label: 'Static', value: 'static' },
{ label: 'Overlay', value: 'overlay' }
]);
const compactMaterial = ref(false);
const primaryFocusRing = ref(true);
const { changeThemeSettings, setScale, layoutConfig } = useLayout();
const { setScale, layoutConfig } = useLayout();
const onConfigButtonClick = () => {
visible.value = !visible.value;
};
const onChangeTheme = (theme, mode) => {
const elementId = 'theme-css';
const linkElement = document.getElementById(elementId);
const cloneLinkElement = linkElement.cloneNode(true);
const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, theme);
cloneLinkElement.setAttribute('id', elementId + '-clone');
cloneLinkElement.setAttribute('href', newThemeUrl);
cloneLinkElement.addEventListener('load', () => {
linkElement.remove();
cloneLinkElement.setAttribute('id', elementId);
changeThemeSettings(theme, mode === 'dark');
$primevue.changeTheme(layoutConfig.theme.value, theme, 'theme-css', () => {
layoutConfig.theme.value = theme;
layoutConfig.darkTheme.value = mode;
});
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
};
const decrementScale = () => {
setScale(layoutConfig.scale.value - 1);
@@ -46,6 +48,71 @@ const incrementScale = () => {
const applyScale = () => {
document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
};
const onInputStyleChange = (value) => {
$primevue.config.inputStyle = value;
};
const onMenuModeChange = (value) => {
layoutConfig.menuMode.value = value;
};
const onRippleChange = (value) => {
layoutConfig.ripple.value = value;
};
const onDarkModeChange = (value) => {
const newThemeName = value ? layoutConfig.theme.value.replace('light', 'dark') : layoutConfig.theme.value.replace('dark', 'light');
layoutConfig.darkTheme.value = value;
onChangeTheme(newThemeName, value);
};
const changeTheme = (theme, color) => {
let newTheme, dark;
newTheme = theme + '-' + (layoutConfig.darkTheme.value ? 'dark' : 'light');
if (color) {
newTheme += '-' + color;
}
if (newTheme.startsWith('md-') && compactMaterial.value) {
newTheme = newTheme.replace('md-', 'mdc-');
}
dark = layoutConfig.darkTheme.value;
onChangeTheme(newTheme, dark);
};
const isThemeActive = (themeFamily, color) => {
let themeName;
let themePrefix = themeFamily === 'md' && compactMaterial.value ? 'mdc' : themeFamily;
themeName = themePrefix + (layoutConfig.darkTheme.value ? '-dark' : '-light');
if (color) {
themeName += '-' + color;
}
return layoutConfig.theme.value === themeName;
};
const onCompactMaterialChange = (value) => {
compactMaterial.value = value;
if (layoutConfig.theme.value.startsWith('md')) {
let tokens = layoutConfig.theme.value.split('-');
changeTheme(tokens[0].substring(0, 2), tokens[2]);
}
};
const onFocusRingColorChange = (value) => {
primaryFocusRing.value = value;
let root = document.documentElement;
if (value) {
if (layoutConfig.darkTheme.value) root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
else root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
} else {
if (layoutConfig.darkTheme.value) root.style.setProperty('--p-focus-ring-color', 'var(--surface-500)');
else root.style.setProperty('--p-focus-ring-color', 'var(--surface-900)');
}
};
</script>
<template>
@@ -53,244 +120,286 @@ const applyScale = () => {
<i class="pi pi-cog"></i>
</button>
<Sidebar v-model:visible="visible" position="right" :transitionOptions="'.3s cubic-bezier(0, 0, 0.2, 1)'" class="layout-config-sidebar w-20rem">
<h5>Scale</h5>
<div class="flex align-items-center">
<Button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="layoutConfig.scale.value === scales[0]"></Button>
<div class="flex gap-2 align-items-center">
<i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === layoutConfig.scale.value }"></i>
</div>
<Button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="layoutConfig.scale.value === scales[scales.length - 1]"></Button>
<Sidebar v-model:visible="visible" position="right" class="layout-config-sidebar w-26rem" pt:closeButton="ml-auto">
<div class="p-2">
<section class="pb-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span class="text-xl font-semibold">Scale</span>
<div class="flex align-items-center gap-2 border-1 surface-border py-1 px-2" style="border-radius: 30px">
<Button icon="pi pi-minus" @click="decrementScale" text rounded :disabled="layoutConfig.scale.value === scales[0]" />
<i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-200', { 'text-lg text-primary': s === layoutConfig.scale.value }]" />
<Button icon="pi pi-plus" @click="incrementScale" text rounded :disabled="layoutConfig.scale.value === scales[scales.length - 1]" />
</div>
</section>
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span :class="['text-xl font-semibold']">Dark Mode</span>
<InputSwitch :modelValue="layoutConfig.darkTheme.value" @update:modelValue="onDarkModeChange" />
</section>
<template v-if="!simple">
<h5>Menu Type</h5>
<div class="flex">
<div class="field-radiobutton flex-1">
<RadioButton name="menuMode" value="static" v-model="layoutConfig.menuMode.value" inputId="mode1"></RadioButton>
<label for="mode1">Static</label>
</div>
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span class="text-xl font-semibold">Menu Type</span>
<SelectButton :modelValue="layoutConfig.menuMode.value" @update:modelValue="onMenuModeChange" :options="menuModes" optionLabel="label" optionValue="value" :allowEmpty="false" />
</section>
<div class="field-radiobutton flex-1">
<RadioButton name="menuMode" value="overlay" v-model="layoutConfig.menuMode.value" inputId="mode2"></RadioButton>
<label for="mode2">Overlay</label>
</div>
</div>
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span class="text-xl font-semibold">Input Variant</span>
<SelectButton :modelValue="inputStyle" @update:modelValue="onInputStyleChange" :options="inputStyles" optionLabel="label" optionValue="value" :allowEmpty="false" />
</section>
</template>
<template v-if="!simple">
<h5>Input Style</h5>
<div class="flex">
<div class="field-radiobutton flex-1">
<RadioButton name="inputStyle" value="outlined" v-model="layoutConfig.inputStyle.value" inputId="outlined_input"></RadioButton>
<label for="outlined_input">Outlined</label>
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span class="text-xl font-semibold">Ripple Effect</span>
<InputSwitch :modelValue="layoutConfig.ripple.value" @update:modelValue="onRippleChange" />
</section>
<section class="py-4 border-bottom-1 surface-border">
<div class="text-xl font-semibold mb-3">Themes</div>
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/aura.png" alt="Aura" style="width: 1.5rem" />
<span class="font-medium">Aura</span>
</div>
<div class="field-radiobutton flex-1">
<RadioButton name="inputStyle" value="filled" v-model="layoutConfig.inputStyle.value" inputId="filled_input"></RadioButton>
<label for="filled_input">Filled</label>
<div class="flex align-items-center justify-content-between gap-3 mb-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'green'), 'hover:border-500 surface-border': !isThemeActive('aura', 'green') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'green')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('aura', 'cyan') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'cyan')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'blue'), 'hover:border-500 surface-border': !isThemeActive('aura', 'blue') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'blue')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('aura', 'indigo') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'indigo')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
</button>
</div>
<div class="flex align-items-center justify-content-between gap-3 mb-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'purple'), 'hover:border-500 surface-border': !isThemeActive('aura', 'purple') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'purple')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'amber'), 'hover:border-500 surface-border': !isThemeActive('aura', 'amber') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'amber')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'teal'), 'hover:border-500 surface-border': !isThemeActive('aura', 'teal') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'teal')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'pink'), 'hover:border-500 surface-border': !isThemeActive('aura', 'pink') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'pink')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
</button>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'noir'), 'hover:border-500 surface-border': !isThemeActive('aura', 'noir') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'noir')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0f172a 0%, rgba(0, 0, 0, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'lime'), 'hover:border-500 surface-border': !isThemeActive('aura', 'lime') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'lime')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #84cc16 0%, rgb(132, 204, 22, 0.5) 100%)"></span>
</button>
<span class="w-3"></span>
<span class="w-3"></span>
</div>
<h5>Ripple Effect</h5>
<InputSwitch v-model="layoutConfig.ripple.value"></InputSwitch>
</template>
<section class="pt-4 flex align-items-center justify-content-between">
<span class="text-sm">Primary Focus Ring</span>
<InputSwitch :modelValue="primaryFocusRing" @update:modelValue="onFocusRingColorChange" />
</section>
</section>
<h5>Bootstrap</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-blue', 'light')">
<img src="/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue" />
<section class="py-4 border-bottom-1 surface-border">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Lara</span>
</div>
<div class="flex align-items-center justify-content-between gap-3 mb-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'green'), 'hover:border-500 surface-border': !isThemeActive('lara', 'green') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'green')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('lara', 'cyan') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'cyan')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'blue'), 'hover:border-500 surface-border': !isThemeActive('lara', 'blue') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'blue')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('lara', 'indigo') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'indigo')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-purple', 'light')">
<img src="/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple" />
<div class="flex align-items-center justify-content-between gap-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'purple'), 'hover:border-500 surface-border': !isThemeActive('lara', 'purple') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'purple')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'amber'), 'hover:border-500 surface-border': !isThemeActive('lara', 'amber') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'amber')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'teal'), 'hover:border-500 surface-border': !isThemeActive('lara', 'teal') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'teal')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'pink'), 'hover:border-500 surface-border': !isThemeActive('lara', 'pink') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'pink')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-blue', 'dark')">
<img src="/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-purple', 'dark')">
<img src="/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple" />
</button>
</div>
</div>
</section>
<h5>Material Design</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-indigo', 'light')">
<img src="/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
<section class="py-4 border-bottom-1 surface-border">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Design" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Material Design</span>
<div class="ml-auto flex align-items-center gap-2">
<label for="material-condensed" class="text-sm">Condensed</label>
<InputSwitch inputId="material-condensed" :modelValue="compactMaterial" @update:modelValue="onCompactMaterialChange" class="ml-auto" />
</div>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('md', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('md', 'indigo') }
]"
style="border-radius: 30px"
@click="changeTheme('md', 'indigo')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0565f2 0%, rgba(5, 101, 242, 0.5) 100%)"></span>
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-deeppurple', 'light')">
<img src="/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-indigo', 'dark')">
<img src="/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-deeppurple', 'dark')">
<img src="/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple" />
</button>
</div>
</div>
<h5>Material Design Compact</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-indigo', 'light')">
<img src="/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-deeppurple', 'light')">
<img src="/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-indigo', 'dark')">
<img src="/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-deeppurple', 'dark')">
<img src="/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple" />
</button>
</div>
</div>
<h5>Tailwind</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('tailwind-light', 'light')">
<img src="/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light" />
</button>
</div>
</div>
<h5>Fluent UI</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('fluent-light', 'light')">
<img src="/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light" />
</button>
</div>
</div>
<h5>PrimeOne Design - 2022</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-indigo', 'light')">
<img src="/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-blue', 'light')">
<img src="/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-purple', 'light')">
<img src="/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-teal', 'light')">
<img src="/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-indigo', 'dark')">
<img src="/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-blue', 'dark')">
<img src="/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-purple', 'dark')">
<img src="/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-teal', 'dark')">
<img src="/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal" />
</button>
</div>
</div>
<h5>PrimeOne Design - 2021</h5>
<div class="grid">
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-blue', 'light')">
<img src="/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-green', 'light')">
<img src="/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-orange', 'light')">
<img src="/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-purple', 'light')">
<img src="/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-blue', 'dark')">
<img src="/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-green', 'dark')">
<img src="/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-orange', 'dark')">
<img src="/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-purple', 'dark')">
<img src="/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-blue', 'dark')">
<img src="/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-green', 'dark')">
<img src="/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-orange', 'dark')">
<img src="/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange" />
</button>
</div>
<div class="col-3">
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-purple', 'dark')">
<img src="/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple" />
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('md', 'deeppurple'), 'hover:border-500 surface-border': !isThemeActive('md', 'deeppurple') }
]"
style="border-radius: 30px"
@click="changeTheme('md', 'deeppurple')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #702f92 0%, rgba(112, 47, 146, 0.5) 100%)"></span>
</button>
<div class="w-3"></div>
<div class="w-3"></div>
</div>
</section>
</div>
</Sidebar>
</template>

3
src/layout/AppLayout.vue
View File

@@ -27,8 +27,7 @@ const containerClass = computed(() => {
'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
'layout-overlay-active': layoutState.overlayMenuActive.value,
'layout-mobile-active': layoutState.staticMenuMobileActive.value,
'p-input-filled': layoutConfig.inputStyle.value === 'filled',
'p-ripple-disabled': !layoutConfig.ripple.value
'p-ripple-disabled': layoutConfig.ripple.value === false
};
});
const bindOutsideClickListener = () => {

11
src/layout/composables/layout.js
View File

@@ -1,11 +1,11 @@
import { toRefs, reactive, computed } from 'vue';
const layoutConfig = reactive({
ripple: false,
ripple: true,
darkTheme: false,
inputStyle: 'outlined',
menuMode: 'static',
theme: 'lara-light-indigo',
theme: 'aura-light-green',
scale: 14,
activeMenuItem: null
});
@@ -20,11 +20,6 @@ const layoutState = reactive({
});
export function useLayout() {
const changeThemeSettings = (theme, darkTheme) => {
layoutConfig.darkTheme = darkTheme;
layoutConfig.theme = theme;
};
const setScale = (scale) => {
layoutConfig.scale = scale;
};
@@ -49,5 +44,5 @@ export function useLayout() {
const isDarkTheme = computed(() => layoutConfig.darkTheme);
return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
}