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

Add aura logo to configurator

pull/5131/head
Cagatay Civici 2024-01-23 14:44:12 +03:00
parent c040530cd6
commit fe8af35fdd
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
layouts/AppConfigurator.vue
View File

@ -29,7 +29,7 @@
<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/lara-light-teal.png" alt="aura Light Teal" class="border-circle" style="width: 1.5rem" />
<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="flex align-items-center justify-content-between gap-3 mb-3">
@ -142,8 +142,8 @@
</div>
<section class="pt-4 flex align-items-center justify-content-between">
<span class="text-sm">Focus Ring Color</span>
<SelectButton v-model="focusRingColor" :options="focusRingColors" @change="onFocusRingColorChange" optionLabel="label" optionValue="value" :allowEmpty="false" />
<span class="text-sm">Primary Focus Ring</span>
<InputSwitch :modelValue="primaryFocusRing" @update:modelValue="onFocusRingColorChange" />
</section>
</section>
@ -363,11 +363,7 @@ export default {
{ label: 'Outlined', value: 'outlined' },
{ label: 'Filled', value: 'filled' }
],
focusRingColor: 'current',
focusRingColors: [
{ label: 'Current', value: 'current' },
{ label: 'Primary', value: 'primary' }
],
primaryFocusRing: true,
compactMaterial: false
};
},
@ -454,15 +450,19 @@ export default {
return this.$appState.theme === themeName;
},
onFocusRingColorChange(event) {
onFocusRingColorChange(value) {
this.primaryFocusRing = value;
let root = document.documentElement;
if (event.value === 'current') {
if (this.$appState.darkTheme) root.style.setProperty('--p-focus-ring-color', 'var(--surface-500)');
else root.style.setProperty('--p-focus-ring-color', 'var(--surface-400)');
} else if (event.value === 'primary') {
console.log('x');
if (value) {
if (this.$appState.darkTheme) root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
else root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
else root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
}
else {
if (this.$appState.darkTheme) root.style.setProperty('--p-focus-ring-color', 'var(--surface-500)');
else root.style.setProperty('--p-focus-ring-color', 'var(--surface-400)');
}
}
},