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

Add new theme-palette-change event

pull/5507/head
Cagatay Civici 2024-03-29 10:44:47 +03:00
parent be0092f0b4
commit e8c9384c8d
14 changed files with 88 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/landing/HeroSection.vue
View File

@ -165,7 +165,7 @@ import EventBus from '@/layouts/AppEventBus';
import { NodeService } from '@/service/NodeService'; import { NodeService } from '@/service/NodeService';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
value1: 24, value1: 24,
@ -212,17 +212,20 @@ export default {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('dark-mode-toggle-complete', this.redrawListener);
EventBus.on('theme-palette-change', this.redrawListener);
NodeService.getTreeNodes().then((data) => (this.nodes = data)); NodeService.getTreeNodes().then((data) => (this.nodes = data));
}, },
@ -231,6 +234,9 @@ export default {
this.category = category; this.category = category;
}, },
setChartData() { setChartData() {
const documentStyle = getComputedStyle(document.documentElement);
const primaryColor = documentStyle.getPropertyValue('--primary-color');
return { return {
labels: ['Q1', 'Q2', 'Q3', 'Q4'], labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [ datasets: [
@ -238,9 +244,9 @@ export default {
label: 'Annual Income', label: 'Annual Income',
data: [40, 59, 40, 50, 56], data: [40, 59, 40, 50, 56],
fill: true, fill: true,
borderColor: '#10b981', borderColor: primaryColor,
tension: 0.4, tension: 0.4,
backgroundColor: 'rgba(16, 185, 129, .2)' backgroundColor: `color-mix(in srgb, ${primaryColor}, transparent 80%)`
} }
] ]
}; };

10
doc/chart/BasicDoc.vue
View File

@ -15,7 +15,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -170,17 +170,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

10
doc/chart/ComboDoc.vue
View File

@ -12,7 +12,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -205,17 +205,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

10
doc/chart/DoughnutDoc.vue
View File

@ -12,7 +12,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -130,17 +130,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

10
doc/chart/HorizontalBarDoc.vue
View File

@ -12,7 +12,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -195,17 +195,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

10
doc/chart/LineDoc.vue
View File

@ -12,7 +12,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -187,17 +187,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

10
doc/chart/LineStylesDoc.vue
View File

@ -12,7 +12,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -205,17 +205,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

10
doc/chart/MultiAxisDoc.vue
View File

@ -12,7 +12,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -223,17 +223,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

10
doc/chart/PieChartDoc.vue
View File

@ -12,7 +12,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -128,17 +128,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

10
doc/chart/PolarAreaDoc.vue
View File

@ -12,7 +12,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -153,17 +153,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

10
doc/chart/RadarDoc.vue
View File

@ -12,7 +12,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -169,17 +169,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

10
doc/chart/StackedBarDoc.vue
View File

@ -12,7 +12,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -207,17 +207,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

10
doc/chart/VerticalBarDoc.vue
View File

@ -12,7 +12,7 @@
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
darkModeToggleListener: null, redrawListener: null,
data() { data() {
return { return {
chartData: null, chartData: null,
@ -193,17 +193,19 @@ const setChartOptions = () => {
}; };
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.off('dark-mode-toggle-complete', this.redrawListener);
EventBus.off('theme-palette-change', this.redrawListener);
}, },
mounted() { mounted() {
this.chartData = this.setChartData(); this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
this.darkModeToggleListener = () => { this.redrawListener = () => {
this.chartOptions = this.setChartOptions(); this.chartOptions = this.setChartOptions();
}; };
EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); EventBus.on('theme-palette-change', this.redrawListener);
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
}, },
methods: { methods: {
setChartData() { setChartData() {

5
layouts/AppConfigurator.vue
View File

@ -38,6 +38,7 @@
</template> </template>
<script> <script>
import EventBus from '@/layouts/AppEventBus';
import { updatePreset, updateSurface } from 'primevue/themes'; import { updatePreset, updateSurface } from 'primevue/themes';
export default { export default {
@ -94,7 +95,7 @@ export default {
else if (type === 'surface') this.selectedSurfaceColor = color.name; else if (type === 'surface') this.selectedSurfaceColor = color.name;
if (!document.startViewTransition) { if (!document.startViewTransition) {
this.applyTheme(color); this.applyTheme(type, color);
return; return;
} }
@ -179,6 +180,8 @@ export default {
} else if (type === 'surface') { } else if (type === 'surface') {
updateSurface(color.palette); updateSurface(color.palette);
} }
EventBus.emit('theme-palette-change');
}, },
onRippleChange(value) { onRippleChange(value) {
this.$appState.ripple = value; this.$appState.ripple = value;