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

26
layouts/AppConfigurator.vue
View File

@ -29,7 +29,7 @@
<section class="py-4 border-bottom-1 surface-border"> <section class="py-4 border-bottom-1 surface-border">
<div class="text-xl font-semibold mb-3">Themes</div> <div class="text-xl font-semibold mb-3">Themes</div>
<div class="flex align-items-center gap-2 mb-3"> <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> <span class="font-medium">Aura</span>
</div> </div>
<div class="flex align-items-center justify-content-between gap-3 mb-3"> <div class="flex align-items-center justify-content-between gap-3 mb-3">
@ -142,8 +142,8 @@
</div> </div>
<section class="pt-4 flex align-items-center justify-content-between"> <section class="pt-4 flex align-items-center justify-content-between">
<span class="text-sm">Focus Ring Color</span> <span class="text-sm">Primary Focus Ring</span>
<SelectButton v-model="focusRingColor" :options="focusRingColors" @change="onFocusRingColorChange" optionLabel="label" optionValue="value" :allowEmpty="false" /> <InputSwitch :modelValue="primaryFocusRing" @update:modelValue="onFocusRingColorChange" />
</section> </section>
</section> </section>
@ -363,11 +363,7 @@ export default {
{ label: 'Outlined', value: 'outlined' }, { label: 'Outlined', value: 'outlined' },
{ label: 'Filled', value: 'filled' } { label: 'Filled', value: 'filled' }
], ],
focusRingColor: 'current', primaryFocusRing: true,
focusRingColors: [
{ label: 'Current', value: 'current' },
{ label: 'Primary', value: 'primary' }
],
compactMaterial: false compactMaterial: false
}; };
}, },
@ -454,16 +450,20 @@ export default {
return this.$appState.theme === themeName; return this.$appState.theme === themeName;
}, },
onFocusRingColorChange(event) { onFocusRingColorChange(value) {
this.primaryFocusRing = value;
let root = document.documentElement; let root = document.documentElement;
if (event.value === 'current') { console.log('x');
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)'); if (value) {
} else if (event.value === 'primary') {
if (this.$appState.darkTheme) root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)'); 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)');
}
} }
}, },
computed: { computed: {