2019-12-20 13:49:40 +00:00
|
|
|
<template>
|
2023-10-17 21:53:21 +00:00
|
|
|
<Sidebar v-model:visible="visible" @hide="onSidebarHide" :class="containerClass" position="right">
|
2023-02-28 08:29:30 +00:00
|
|
|
<div class="p-2">
|
2023-10-17 21:53:21 +00:00
|
|
|
<section class="pb-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
|
|
|
|
|
<span class="text-xl font-semibold">Scale</span>
|
2023-10-25 02:34:05 +00:00
|
|
|
<div class="flex align-items-center gap-2 border-1 surface-border py-1 px-2" style="border-radius: 30px">
|
2024-01-17 19:56:22 +00:00
|
|
|
<Button icon="pi pi-minus" @click="decrementScale" text rounded :disabled="scale === scales[0]" />
|
2023-10-17 21:53:21 +00:00
|
|
|
<i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-200', { 'text-lg text-primary': s === scale }]" />
|
2019-12-20 13:49:40 +00:00
|
|
|
|
2024-01-17 19:56:22 +00:00
|
|
|
<Button icon="pi pi-plus" @click="incrementScale" text rounded :disabled="scale === scales[scales.length - 1]" />
|
2023-02-28 08:29:30 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
2020-05-14 08:37:01 +00:00
|
|
|
|
2023-10-17 21:53:21 +00:00
|
|
|
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
|
|
|
|
|
<span class="text-xl font-semibold">Input Style</span>
|
2023-10-25 02:34:05 +00:00
|
|
|
<SelectButton :modelValue="inputStyle" @update:modelValue="onInputStyleChange" :options="inputStyles" optionLabel="label" optionValue="value" :allowEmpty="false" />
|
2023-02-28 08:29:30 +00:00
|
|
|
</section>
|
2020-06-20 09:40:01 +00:00
|
|
|
|
2023-10-17 21:53:21 +00:00
|
|
|
<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>
|
2023-03-29 10:29:26 +00:00
|
|
|
<InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
|
2023-02-28 08:29:30 +00:00
|
|
|
</section>
|
2020-06-25 13:04:00 +00:00
|
|
|
|
2023-10-17 21:53:21 +00:00
|
|
|
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
|
2024-01-18 09:56:05 +00:00
|
|
|
<span :class="['text-xl font-semibold']">Dark Mode</span>
|
2024-01-18 13:16:49 +00:00
|
|
|
<InputSwitch :modelValue="darkMode" @update:modelValue="onDarkModeChange" />
|
2023-10-17 21:53:21 +00:00
|
|
|
</section>
|
2021-11-15 07:22:31 +00:00
|
|
|
|
2023-10-17 21:53:21 +00:00
|
|
|
<section class="py-4 border-bottom-1 surface-border">
|
|
|
|
|
<div class="text-xl font-semibold mb-3">Themes</div>
|
2024-01-17 19:56:22 +00:00
|
|
|
<div class="flex align-items-center gap-2 mb-3">
|
2024-01-23 11:44:12 +00:00
|
|
|
<img src="https://primefaces.org/cdn/primevue/images/themes/aura.png" alt="Aura" style="width: 1.5rem" />
|
2024-01-17 19:56:22 +00:00
|
|
|
<span class="font-medium">Aura</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('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>
|
|
|
|
|
|
|
|
|
|
<section class="pt-4 flex align-items-center justify-content-between">
|
2024-01-23 11:44:12 +00:00
|
|
|
<span class="text-sm">Primary Focus Ring</span>
|
|
|
|
|
<InputSwitch :modelValue="primaryFocusRing" @update:modelValue="onFocusRingColorChange" />
|
2024-01-17 19:56:22 +00:00
|
|
|
</section>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="py-4 border-bottom-1 surface-border">
|
2023-10-17 21:53:21 +00:00
|
|
|
<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>
|
2023-02-28 08:29:30 +00:00
|
|
|
</div>
|
2023-11-13 08:42:44 +00:00
|
|
|
<div class="flex align-items-center justify-content-between gap-3 mb-3">
|
2023-10-17 21:53:21 +00:00
|
|
|
<button
|
2023-10-18 09:37:19 +00:00
|
|
|
:class="[
|
|
|
|
|
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
|
2023-11-20 08:33:43 +00:00
|
|
|
{ 'border-primary': isThemeActive('lara', 'green'), 'hover:border-500 surface-border': !isThemeActive('lara', 'green') }
|
2023-10-18 09:37:19 +00:00
|
|
|
]"
|
2023-10-17 21:53:21 +00:00
|
|
|
style="border-radius: 30px"
|
2023-11-20 08:33:43 +00:00
|
|
|
@click="changeTheme('lara', 'green')"
|
2023-10-17 21:53:21 +00:00
|
|
|
>
|
|
|
|
|
<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>
|
2023-11-20 08:33:43 +00:00
|
|
|
<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>
|
2023-10-17 21:53:21 +00:00
|
|
|
<button
|
2023-10-18 09:37:19 +00:00
|
|
|
: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') }
|
|
|
|
|
]"
|
2023-10-17 21:53:21 +00:00
|
|
|
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
|
2023-10-18 09:37:19 +00:00
|
|
|
: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') }
|
|
|
|
|
]"
|
2023-10-17 21:53:21 +00:00
|
|
|
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>
|
2023-11-20 08:33:43 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="flex align-items-center justify-content-between gap-3">
|
2023-10-17 21:53:21 +00:00
|
|
|
<button
|
2023-10-18 09:37:19 +00:00
|
|
|
: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') }
|
|
|
|
|
]"
|
2023-10-17 21:53:21 +00:00
|
|
|
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>
|
2023-11-13 08:42:44 +00:00
|
|
|
<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',
|
2023-11-20 08:33:43 +00:00
|
|
|
{ 'border-primary': isThemeActive('lara', 'teal'), 'hover:border-500 surface-border': !isThemeActive('lara', 'teal') }
|
2023-11-13 08:42:44 +00:00
|
|
|
]"
|
|
|
|
|
style="border-radius: 30px"
|
2023-11-20 08:33:43 +00:00
|
|
|
@click="changeTheme('lara', 'teal')"
|
2023-11-13 08:42:44 +00:00
|
|
|
>
|
2023-11-20 08:33:43 +00:00
|
|
|
<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>
|
2023-11-13 08:42:44 +00:00
|
|
|
</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',
|
2023-11-20 08:33:43 +00:00
|
|
|
{ 'border-primary': isThemeActive('lara', 'pink'), 'hover:border-500 surface-border': !isThemeActive('lara', 'pink') }
|
2023-11-13 08:42:44 +00:00
|
|
|
]"
|
|
|
|
|
style="border-radius: 30px"
|
2023-11-20 08:33:43 +00:00
|
|
|
@click="changeTheme('lara', 'pink')"
|
2023-11-13 08:42:44 +00:00
|
|
|
>
|
2023-11-20 08:33:43 +00:00
|
|
|
<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>
|
2023-11-13 08:42:44 +00:00
|
|
|
</button>
|
|
|
|
|
</div>
|
2023-10-17 21:53:21 +00:00
|
|
|
</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" />
|
2023-10-15 04:10:40 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-10-17 21:53:21 +00:00
|
|
|
<div class="flex align-items-center justify-content-between gap-3">
|
|
|
|
|
<button
|
2023-10-18 09:37:19 +00:00
|
|
|
: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') }
|
|
|
|
|
]"
|
2023-10-17 21:53:21 +00:00
|
|
|
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>
|
|
|
|
|
<button
|
2023-10-18 09:37:19 +00:00
|
|
|
: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') }
|
|
|
|
|
]"
|
2023-10-17 21:53:21 +00:00
|
|
|
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>
|
|
|
|
|
<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/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
|
2023-10-18 09:37:19 +00:00
|
|
|
: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('bootstrap4', 'blue'), 'hover:border-500 surface-border': !isThemeActive('bootstrap4', 'blue') }
|
|
|
|
|
]"
|
2023-10-17 21:53:21 +00:00
|
|
|
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
|
2023-10-18 09:37:19 +00:00
|
|
|
: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('bootstrap4', 'purple'), 'hover:border-500 surface-border': !isThemeActive('bootstrap4', 'purple') }
|
|
|
|
|
]"
|
2023-10-17 21:53:21 +00:00
|
|
|
style="border-radius: 30px"
|
|
|
|
|
@click="changeTheme('bootstrap4', 'purple')"
|
|
|
|
|
>
|
|
|
|
|
<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>
|
|
|
|
|
<div class="w-3"></div>
|
|
|
|
|
<div class="w-3"></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>
|
|
|
|
|
<button
|
2023-10-18 09:37:19 +00:00
|
|
|
:class="[
|
|
|
|
|
'bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200',
|
|
|
|
|
{ 'border-primary': isThemeActive('soho'), 'hover:border-500 surface-border': !isThemeActive('soho') }
|
|
|
|
|
]"
|
2023-10-17 21:53:21 +00:00
|
|
|
style="border-radius: 30px"
|
|
|
|
|
@click="changeTheme('soho')"
|
|
|
|
|
>
|
|
|
|
|
<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>
|
2023-02-28 08:29:30 +00:00
|
|
|
</button>
|
|
|
|
|
</div>
|
2023-10-17 21:53:21 +00:00
|
|
|
<div class="w-3">
|
|
|
|
|
<div class="flex align-items-center gap-2 mb-3">
|
|
|
|
|
<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
|
2023-10-18 09:37:19 +00:00
|
|
|
:class="[
|
|
|
|
|
'bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200',
|
|
|
|
|
{ 'border-primary': isThemeActive('viva'), 'hover:border-500 surface-border': !isThemeActive('viva') }
|
|
|
|
|
]"
|
2023-10-17 21:53:21 +00:00
|
|
|
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>
|
2023-02-28 08:29:30 +00:00
|
|
|
</button>
|
|
|
|
|
</div>
|
2023-10-17 21:53:21 +00:00
|
|
|
<div class="w-3"></div>
|
|
|
|
|
<div class="w-3"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2019-12-20 13:49:40 +00:00
|
|
|
</div>
|
2023-02-28 08:29:30 +00:00
|
|
|
</Sidebar>
|
2019-12-20 13:49:40 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2022-12-08 19:24:21 +00:00
|
|
|
import EventBus from '@/layouts/AppEventBus';
|
2020-11-26 08:53:02 +00:00
|
|
|
|
2019-12-20 13:49:40 +00:00
|
|
|
export default {
|
2023-10-17 21:53:21 +00:00
|
|
|
emits: ['updateConfigActive', 'darkswitch-click'],
|
2020-05-07 19:13:58 +00:00
|
|
|
props: {
|
2023-03-29 10:29:26 +00:00
|
|
|
configActive: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false
|
|
|
|
|
}
|
2020-05-07 19:13:58 +00:00
|
|
|
},
|
2019-12-20 13:49:40 +00:00
|
|
|
data() {
|
|
|
|
|
return {
|
2023-02-28 08:29:30 +00:00
|
|
|
visible: false,
|
2020-05-14 08:37:01 +00:00
|
|
|
scale: 14,
|
2023-10-17 21:53:21 +00:00
|
|
|
scales: [12, 13, 14, 15, 16],
|
|
|
|
|
inputStyles: [
|
|
|
|
|
{ label: 'Outlined', value: 'outlined' },
|
|
|
|
|
{ label: 'Filled', value: 'filled' }
|
|
|
|
|
],
|
2024-01-23 11:44:12 +00:00
|
|
|
primaryFocusRing: true,
|
2024-01-18 09:56:05 +00:00
|
|
|
compactMaterial: false
|
2022-09-14 14:26:41 +00:00
|
|
|
};
|
2019-12-20 13:49:40 +00:00
|
|
|
},
|
|
|
|
|
watch: {
|
2023-03-29 10:29:26 +00:00
|
|
|
configActive(value) {
|
2023-02-28 08:29:30 +00:00
|
|
|
this.visible = value;
|
2019-12-20 13:49:40 +00:00
|
|
|
}
|
|
|
|
|
},
|
2023-02-28 08:29:30 +00:00
|
|
|
outsideClickListener: null,
|
|
|
|
|
themeChangeListener: null,
|
2021-04-15 14:53:33 +00:00
|
|
|
beforeUnmount() {
|
2022-02-23 19:52:21 +00:00
|
|
|
EventBus.off('theme-change', this.themeChangeListener);
|
2021-04-15 14:53:33 +00:00
|
|
|
},
|
2020-11-26 08:53:02 +00:00
|
|
|
mounted() {
|
2021-04-15 14:53:33 +00:00
|
|
|
this.themeChangeListener = (event) => {
|
2022-09-14 14:26:41 +00:00
|
|
|
if (event.theme === 'nano') this.scale = 12;
|
|
|
|
|
else this.scale = 14;
|
2020-11-26 08:53:02 +00:00
|
|
|
|
|
|
|
|
this.applyScale();
|
2021-04-15 14:53:33 +00:00
|
|
|
};
|
|
|
|
|
|
2022-02-23 19:52:21 +00:00
|
|
|
EventBus.on('theme-change', this.themeChangeListener);
|
2020-11-26 08:53:02 +00:00
|
|
|
},
|
2019-12-20 13:49:40 +00:00
|
|
|
methods: {
|
2023-02-28 08:29:30 +00:00
|
|
|
onSidebarHide() {
|
|
|
|
|
this.visible = false;
|
2023-03-29 10:29:26 +00:00
|
|
|
this.$emit('updateConfigActive', false);
|
2019-12-20 13:49:40 +00:00
|
|
|
},
|
2023-10-17 21:53:21 +00:00
|
|
|
changeTheme(theme, color) {
|
|
|
|
|
let newTheme, dark;
|
|
|
|
|
|
2024-01-18 09:56:05 +00:00
|
|
|
newTheme = theme + '-' + (this.$appState.darkTheme ? 'dark' : 'light');
|
2023-10-17 21:53:21 +00:00
|
|
|
|
2024-01-18 09:56:05 +00:00
|
|
|
if (color) {
|
|
|
|
|
newTheme += '-' + color;
|
|
|
|
|
}
|
2023-10-17 21:53:21 +00:00
|
|
|
|
2024-01-18 09:56:05 +00:00
|
|
|
if (newTheme.startsWith('md-') && this.compactMaterial) {
|
|
|
|
|
newTheme = newTheme.replace('md-', 'mdc-');
|
2023-10-17 21:53:21 +00:00
|
|
|
}
|
|
|
|
|
|
2024-01-18 09:56:05 +00:00
|
|
|
dark = this.$appState.darkTheme;
|
|
|
|
|
|
2023-10-17 21:53:21 +00:00
|
|
|
EventBus.emit('theme-change', { theme: newTheme, dark: dark });
|
2020-05-14 08:37:01 +00:00
|
|
|
},
|
|
|
|
|
decrementScale() {
|
|
|
|
|
this.scale--;
|
2020-11-26 08:53:02 +00:00
|
|
|
this.applyScale();
|
2020-05-14 08:37:01 +00:00
|
|
|
},
|
|
|
|
|
incrementScale() {
|
|
|
|
|
this.scale++;
|
2020-11-26 08:53:02 +00:00
|
|
|
this.applyScale();
|
|
|
|
|
},
|
|
|
|
|
applyScale() {
|
2020-05-14 08:37:01 +00:00
|
|
|
document.documentElement.style.fontSize = this.scale + 'px';
|
2023-03-29 10:29:26 +00:00
|
|
|
},
|
|
|
|
|
onInputStyleChange(value) {
|
|
|
|
|
this.$primevue.config.inputStyle = value;
|
|
|
|
|
},
|
|
|
|
|
onRippleChange(value) {
|
2024-01-19 21:35:05 +00:00
|
|
|
this.$appState.ripple = value;
|
2023-10-17 21:53:21 +00:00
|
|
|
},
|
|
|
|
|
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]);
|
|
|
|
|
}
|
2023-10-18 09:37:19 +00:00
|
|
|
},
|
2023-11-20 09:36:33 +00:00
|
|
|
isThemeActive(themeFamily, color) {
|
2023-10-18 09:37:19 +00:00
|
|
|
let themeName;
|
2023-11-20 09:36:33 +00:00
|
|
|
let themePrefix = themeFamily === 'md' && this.compactMaterial ? 'mdc' : themeFamily;
|
2023-10-18 09:37:19 +00:00
|
|
|
|
2024-01-18 09:56:05 +00:00
|
|
|
themeName = themePrefix + (this.$appState.darkTheme ? '-dark' : '-light');
|
2023-10-18 09:37:19 +00:00
|
|
|
|
|
|
|
|
if (color) {
|
|
|
|
|
themeName += '-' + color;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return this.$appState.theme === themeName;
|
2024-01-17 19:56:22 +00:00
|
|
|
},
|
2024-01-23 11:44:12 +00:00
|
|
|
onFocusRingColorChange(value) {
|
|
|
|
|
this.primaryFocusRing = value;
|
2024-01-17 19:56:22 +00:00
|
|
|
let root = document.documentElement;
|
|
|
|
|
|
2024-01-23 11:44:12 +00:00
|
|
|
if (value) {
|
2024-01-17 19:58:02 +00:00
|
|
|
if (this.$appState.darkTheme) root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
|
2024-01-23 11:46:06 +00:00
|
|
|
else root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
|
|
|
|
|
} else {
|
2024-01-23 11:44:12 +00:00
|
|
|
if (this.$appState.darkTheme) root.style.setProperty('--p-focus-ring-color', 'var(--surface-500)');
|
2024-01-23 15:10:58 +00:00
|
|
|
else root.style.setProperty('--p-focus-ring-color', 'var(--surface-900)');
|
2024-01-17 19:56:22 +00:00
|
|
|
}
|
2023-03-29 10:29:26 +00:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
inputStyle() {
|
|
|
|
|
return this.$primevue.config.inputStyle;
|
|
|
|
|
},
|
2023-10-17 21:53:21 +00:00
|
|
|
darkMode() {
|
|
|
|
|
return this.$appState.darkTheme;
|
|
|
|
|
},
|
2023-03-29 10:29:26 +00:00
|
|
|
rippleActive() {
|
2024-01-19 21:35:05 +00:00
|
|
|
return this.$appState.ripple;
|
2023-10-17 21:53:21 +00:00
|
|
|
},
|
|
|
|
|
containerClass() {
|
|
|
|
|
return [
|
|
|
|
|
'layout-config w-full sm:w-26rem',
|
|
|
|
|
{
|
|
|
|
|
'layout-dark': this.$appState.darkTheme,
|
|
|
|
|
'layout-light': !this.$appState.darkTheme
|
|
|
|
|
}
|
|
|
|
|
];
|
2020-06-27 22:43:07 +00:00
|
|
|
}
|
2020-07-10 11:47:18 +00:00
|
|
|
}
|
2022-09-14 14:26:41 +00:00
|
|
|
};
|
2019-12-20 14:22:50 +00:00
|
|
|
</script>
|
