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

Implemented new config

pull/4649/head
Cagatay Civici 2023-10-18 00:53:21 +03:00
parent 8395e39e65
commit 92d2176ffd
4 changed files with 263 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/layout/_code.scss
View File

@ -137,7 +137,7 @@ pre[class*="language-"] {
} }
.layout-light { .layout-light {
&[data-p-theme^="md-"] { &[data-p-theme^="md"] {
pre[class*="language-"] { pre[class*="language-"] {
code { code {
background: var(--surface-900); background: var(--surface-900);

46
assets/styles/layout/_config.scss
View File

@ -1,15 +1,51 @@
.layout-config { .layout-config {
backdrop-filter: blur(20px);
background-color: var(--mobile-menu-bg);
.p-selectbutton {
.p-button {
padding: 0.5rem 1rem;
&:first-child {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
&:last-child {
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
}
}
button {
&:focus {
outline: 0 none;
}
}
.grid { .grid {
> div { > div {
padding: 1rem; padding: 1rem;
} }
} }
img {
transition: transform .2s;
&:hover { .p-inputswitch {
transform: scale(1.1); .p-inputswitch-slider {
border-radius: 30px;
&:before {
border-radius: 30px;
} }
} }
}
&.layout-light {
background: var(--surface-overlay);
}
&.layout-dark {
background: var(rgba(0,0,0,.3));
border: 0 none;
}
} }

389
layouts/AppConfigurator.vue
View File

@ -1,217 +1,194 @@
<template> <template>
<Sidebar v-model:visible="visible" @hide="onSidebarHide" class="layout-config w-full sm:w-25rem" position="right"> <Sidebar v-model:visible="visible" @hide="onSidebarHide" :class="containerClass" position="right">
<div class="p-2"> <div class="p-2">
<section class="mb-5"> <section class="pb-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<h3>Component Scale</h3> <span class="text-xl font-semibold">Scale</span>
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2 border-1 surface-border p-2" style="border-radius: 30px">
<Button icon="pi pi-minus" @click="decrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[0]" /> <Button icon="pi pi-minus" @click="decrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[0]" />
<i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-600', { 'text-lg text-primary': s === scale }]" /> <i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-200', { 'text-lg text-primary': s === scale }]" />
<Button icon="pi pi-plus" @click="incrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[scales.length - 1]" /> <Button icon="pi pi-plus" @click="incrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[scales.length - 1]" />
</div> </div>
</section> </section>
<section class="mb-5"> <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<h3>Input Style</h3> <span class="text-xl font-semibold">Input Style</span>
<div class="flex gap-5"> <SelectButton :modelValue="inputStyle" @update:modelValue="onInputStyleChange" :options="inputStyles" optionLabel="label" optionValue="value" />
<div class="flex align-items-center gap-2">
<RadioButton :modelValue="inputStyle" name="inputStyle" value="outlined" inputId="outlined_input" @update:modelValue="onInputStyleChange"></RadioButton>
<label for="outlined_input">Outlined</label>
</div>
<div class="flex align-items-center gap-2">
<RadioButton :modelValue="inputStyle" name="inputStyle" value="filled" inputId="filled_input" @update:modelValue="onInputStyleChange"></RadioButton>
<label for="filled_input">Filled</label>
</div>
</div>
</section> </section>
<section class="mb-5"> <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<h3>Ripple Effect</h3> <span class="text-xl font-semibold">Ripple Effect</span>
<InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" /> <InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
</section> </section>
<section> <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<h3>Themes</h3> <span :class="['text-xl font-semibold', { 'p-disabled': darkToggleDisabled }]">Dark Mode</span>
<h4>PrimeOne Design</h4> <InputSwitch :modelValue="darkMode" @update:modelValue="onDarkModeChange" :disabled="darkToggleDisabled" />
<div class="grid"> </section>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-light-teal')">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Lara Teal</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-light-indigo')">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Lara Indigo</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-light-blue')">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-blue.png" alt="Lara Light Blue" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Lara Blue</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-light-purple')">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-purple.png" alt="Lara Light Purple" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Lara Purple</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-dark-teal', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Lara Teal</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-dark-indigo', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Lara Indigo</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-dark-blue', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Lara Blue</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-dark-purple', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Lara Purple</span>
</div>
</div>
<h4>Material Design</h4> <section class="py-4 border-bottom-1 surface-border">
<div class="grid"> <div class="text-xl font-semibold mb-3">Themes</div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="flex align-items-center gap-2 mb-3">
<button class="px-link h-2rem" @click="changeTheme('md-light-indigo')"> <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="border-circle" style="width: 1.5rem" />
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Light Indigo" class="w-2rem border-round" /> <span class="font-medium">Lara</span>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
style="border-radius: 30px"
@click="changeTheme('lara', 'teal')"
>
<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>
<span class="white-space-nowrap text-sm">Indigo</span> <button
</div> class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
<div class="col-3 flex flex-column align-items-center gap-2"> style="border-radius: 30px"
<button class="px-link h-2rem" @click="changeTheme('md-light-deeppurple')"> @click="changeTheme('lara', 'blue')"
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" class="w-2rem border-round" /> >
<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>
<span class="white-space-nowrap text-sm">Deep Purple</span> <button
</div> class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
<div class="col-3 flex flex-column align-items-center gap-2"> style="border-radius: 30px"
<button class="px-link h-2rem" @click="changeTheme('md-dark-indigo', true)"> @click="changeTheme('lara', 'indigo')"
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" class="w-2rem border-round" /> >
<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> </button>
<span class="white-space-nowrap text-sm">Indigo</span> <button
</div> class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
<div class="col-3 flex flex-column align-items-center gap-2"> style="border-radius: 30px"
<button class="px-link h-2rem" @click="changeTheme('md-dark-deeppurple', true)"> @click="changeTheme('lara', 'purple')"
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" class="w-2rem border-round" /> >
<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>
<span class="white-space-nowrap text-sm">Deep Purple</span> </div>
</section>
<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> </div>
<div class="flex align-items-center justify-content-between gap-3">
<h4>Material Design Compact</h4> <button
<div class="grid"> class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
<div class="col-3 flex flex-column align-items-center gap-2"> style="border-radius: 30px"
<button class="px-link h-2rem" @click="changeTheme('md-light-indigo')"> @click="changeTheme('md', 'indigo')"
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo" class="w-2rem border-round" /> >
<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> </button>
<span class="white-space-nowrap text-sm">Indigo</span> <button
</div> class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
<div class="col-3 flex flex-column align-items-center gap-2"> style="border-radius: 30px"
<button class="px-link h-2rem" @click="changeTheme('mdc-light-deeppurple')"> @click="changeTheme('md', 'deeppurple')"
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" class="w-2rem border-round" /> >
<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> </button>
<span class="white-space-nowrap text-sm">Deep Purple</span> <div class="w-3"></div>
<div class="w-3"></div>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> </section>
<button class="px-link h-2rem" @click="changeTheme('mdc-dark-indigo', true)"> <section class="py-4 border-bottom-1 surface-border">
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" class="w-2rem border-round" /> <div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Bootstrap</span>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
style="border-radius: 30px"
@click="changeTheme('bootstrap4', 'blue')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #027bff 0%, rgba(2, 123, 255, 0.5) 100%)"></span>
</button> </button>
<span class="white-space-nowrap text-sm">Indigo</span> <button
</div> class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
<div class="col-3 flex flex-column align-items-center gap-2"> style="border-radius: 30px"
<button class="px-link h-2rem" @click="changeTheme('mdc-dark-deeppurple', true)"> @click="changeTheme('bootstrap4', 'purple')"
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" class="w-2rem border-round" /> >
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #893cae 0%, rgba(137, 60, 174, 0.5) 100%)"></span>
</button> </button>
<span class="white-space-nowrap text-sm">Deep Purple</span> <div class="w-3"></div>
<div class="w-3"></div>
</div> </div>
</section>
<section class="py-4 border-bottom-1 surface-border">
<div class="flex gap-3">
<div class="w-3">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/soho-light.png" alt="Soho" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Soho</span>
</div> </div>
<button
<h4>Bootstrap</h4> class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
<div class="grid"> style="border-radius: 30px"
<div class="col-3 flex flex-column align-items-center gap-2"> @click="changeTheme('soho')"
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-blue')"> >
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" /> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #664beb 0%, rgba(102, 75, 235, 0.5) 100%)"></span>
</button> </button>
<span class="white-space-nowrap text-sm">Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="w-3">
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-purple')"> <div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/viva-light.svg" alt="Viva" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Viva</span>
</div>
<button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
style="border-radius: 30px"
@click="changeTheme('viva')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4a67c9 0%, rgba(74, 103, 201, 0.5) 100%)"></span>
</button> </button>
<span class="white-space-nowrap text-sm">Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="w-3"></div>
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-blue', true)"> <div class="w-3"></div>
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" /> </div>
</section>
<section class="py-4">
<div class="flex gap-3">
<div class="w-3">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/fluent-light.png" alt="Fluent" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Fluent</span>
</div>
<button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
style="border-radius: 30px"
@click="changeTheme('fluent-light')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0078d4 0%, rgba(0, 120, 212, 0.5) 100%)"></span>
</button> </button>
<span class="white-space-nowrap text-sm">Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="w-3">
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-purple', true)"> <div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/mira.jpg" alt="Mira" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Mira</span>
</div>
<button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
style="border-radius: 30px"
@click="changeTheme('mira')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #81a1c1 0%, rgba(129, 161, 193, 0.5) 100%)"></span>
</button> </button>
<span class="white-space-nowrap text-sm">Purple</span>
</div> </div>
<div class="w-3">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Nano" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Nano</span>
</div> </div>
<button
<h4>Misc</h4> class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500"
<div class="grid"> style="border-radius: 30px"
<div class="col-3 flex flex-column align-items-center gap-2"> @click="changeTheme('nano')"
<button class="px-link h-2rem" @click="changeTheme('soho-light')"> >
<img src="https://primefaces.org/cdn/primevue/images/themes/soho-light.png" alt="Soho Light" class="w-2rem border-round" /> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #1469b4 0%, rgba(20, 105, 180, 0.5) 100%)"></span>
</button> </button>
<span class="white-space-nowrap text-sm">Soho Light</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('soho-dark', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/soho-dark.png" alt="Soho Dark" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Soho Dark</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('viva-light')">
<img src="https://primefaces.org/cdn/primevue/images/themes/viva-light.svg" alt="Viva Light" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Viva Light</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('viva-dark', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/viva-dark.svg" alt="Viva Dark" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Viva Dark</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('fluent-light')">
<img src="https://primefaces.org/cdn/primevue/images/themes/fluent-light.png" alt="Fluent Light" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Blue</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('mira')">
<img src="https://primefaces.org/cdn/primevue/images/themes/mira.jpg" alt="Mira" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Mira</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('nano')">
<img src="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Nano" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Nano</span>
</div> </div>
<div class="w-3"></div>
</div> </div>
</section> </section>
</div> </div>
@ -222,7 +199,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
emits: ['updateConfigActive'], emits: ['updateConfigActive', 'darkswitch-click'],
props: { props: {
configActive: { configActive: {
type: Boolean, type: Boolean,
@ -233,7 +210,13 @@ export default {
return { return {
visible: false, visible: false,
scale: 14, scale: 14,
scales: [12, 13, 14, 15, 16] scales: [12, 13, 14, 15, 16],
inputStyles: [
{ label: 'Outlined', value: 'outlined' },
{ label: 'Filled', value: 'filled' }
],
compactMaterial: false,
lightOnlyThemes: ['fluent-light', 'mira', 'nano']
}; };
}, },
watch: { watch: {
@ -261,8 +244,27 @@ export default {
this.visible = false; this.visible = false;
this.$emit('updateConfigActive', false); this.$emit('updateConfigActive', false);
}, },
changeTheme(theme, dark) { changeTheme(theme, color) {
EventBus.emit('theme-change', { theme: theme, dark: dark }); let newTheme, dark;
if (this.lightOnlyThemes.includes(theme)) {
newTheme = theme;
dark = false;
} else {
newTheme = theme + '-' + (this.$appState.darkTheme ? 'dark' : 'light');
if (color) {
newTheme += '-' + color;
}
if (newTheme.startsWith('md-') && this.compactMaterial) {
newTheme = newTheme.replace('md-', 'mdc-');
}
dark = this.$appState.darkTheme;
}
EventBus.emit('theme-change', { theme: newTheme, dark: dark });
}, },
decrementScale() { decrementScale() {
this.scale--; this.scale--;
@ -280,14 +282,41 @@ export default {
}, },
onRippleChange(value) { onRippleChange(value) {
this.$primevue.config.ripple = value; this.$primevue.config.ripple = value;
},
onDarkModeChange() {
this.$emit('darkswitch-click');
},
onCompactMaterialChange(value) {
this.compactMaterial = value;
if (this.$appState.theme.startsWith('md')) {
let tokens = this.$appState.theme.split('-');
this.changeTheme(tokens[0].substring(0, 2), tokens[2]);
}
} }
}, },
computed: { computed: {
inputStyle() { inputStyle() {
return this.$primevue.config.inputStyle; return this.$primevue.config.inputStyle;
}, },
darkMode() {
return this.$appState.darkTheme;
},
rippleActive() { rippleActive() {
return this.$primevue.config.ripple; return this.$primevue.config.ripple;
},
darkToggleDisabled() {
return this.lightOnlyThemes.includes(this.$appState.theme);
},
containerClass() {
return [
'layout-config w-full sm:w-26rem',
{
'layout-dark': this.$appState.darkTheme,
'layout-light': !this.$appState.darkTheme
}
];
} }
} }
}; };

4
layouts/default.vue
View File

@ -2,7 +2,7 @@
<div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme"> <div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
<AppNews /> <AppNews />
<AppTopBar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" @darkswitch-click="onDarkModeToggle" /> <AppTopBar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" @darkswitch-click="onDarkModeToggle" />
<AppConfigurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" /> <AppConfigurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" @darkswitch-click="onDarkModeToggle" />
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div> <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
<div class="layout-content"> <div class="layout-content">
<app-menu :active="sidebarActive" /> <app-menu :active="sidebarActive" />
@ -93,7 +93,7 @@ export default {
if (this.$appState.darkTheme) { if (this.$appState.darkTheme) {
newTheme = currentTheme.replace('dark', 'light'); newTheme = currentTheme.replace('dark', 'light');
} else { } else {
if (currentTheme.includes('light')) newTheme = currentTheme.replace('light', 'dark'); if (currentTheme.includes('light') && currentTheme !== 'fluent-light') newTheme = currentTheme.replace('light', 'dark');
else newTheme = 'lara-dark-teal'; //fallback else newTheme = 'lara-dark-teal'; //fallback
} }