primevue-mirror/apps/showcase/layouts/AppConfigurator.vue

355 lines
16 KiB
Vue
Raw Normal View History

2019-12-20 13:49:40 +00:00
<template>
2024-05-20 11:27:12 +00:00
<div class="config-panel hidden">
2024-02-07 10:15:47 +00:00
<div class="config-panel-content">
<div class="config-panel-colors">
<span class="config-panel-label">Primary</span>
<div>
<button
v-for="primaryColor of primaryColors"
:key="primaryColor.name"
type="button"
2024-05-05 20:35:38 +00:00
:title="primaryColor.name"
2024-02-10 07:10:39 +00:00
@click="updateColors('primary', primaryColor)"
2024-02-07 10:15:47 +00:00
:class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
2024-03-27 15:37:56 +00:00
:style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"
2024-02-07 10:15:47 +00:00
></button>
</div>
2024-02-07 10:15:47 +00:00
</div>
<div class="config-panel-colors">
<span class="config-panel-label">Surface</span>
<div>
<button
v-for="surface of surfaces"
:key="surface.name"
type="button"
2024-05-05 20:35:38 +00:00
:title="surface.name"
2024-02-10 07:10:39 +00:00
@click="updateColors('surface', surface)"
2024-05-25 08:54:52 +00:00
:class="{ 'active-color': selectedSurfaceColor ? selectedSurfaceColor === surface.name : $appState.darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
:style="{ backgroundColor: `${surface.palette['500']}` }"
2024-02-07 10:15:47 +00:00
></button>
</div>
2024-02-07 10:15:47 +00:00
</div>
2024-05-05 20:35:38 +00:00
<div class="config-panel-settings">
2024-05-06 21:12:41 +00:00
<span class="config-panel-label">Presets</span>
2024-09-20 20:11:22 +00:00
<SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
2024-05-05 20:35:38 +00:00
</div>
2024-10-17 10:21:06 +00:00
<div class="flex">
<div class="flex-1">
<div class="config-panel-settings">
<span class="config-panel-label">Ripple</span>
<ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
</div>
</div>
<div class="flex-1">
2024-10-24 09:13:46 +00:00
<div class="config-panel-settings items-end">
<span class="config-panel-label">RTL (Beta)</span>
2024-10-17 10:21:06 +00:00
<ToggleSwitch v-model="isRTL" @update:modelValue="onRTLChange" />
</div>
</div>
2024-02-07 10:15:47 +00:00
</div>
2019-12-20 13:49:40 +00:00
</div>
2024-02-07 10:15:47 +00:00
</div>
2019-12-20 13:49:40 +00:00
</template>
<script>
2024-03-29 07:44:47 +00:00
import EventBus from '@/layouts/AppEventBus';
2024-06-11 12:21:12 +00:00
import { $t, updatePreset, updateSurfacePalette } from '@primevue/themes';
import Aura from '@primevue/themes/aura';
import Lara from '@primevue/themes/lara';
2024-09-20 19:54:43 +00:00
import Material from '@primevue/themes/material';
2024-06-11 12:21:12 +00:00
import Nora from '@primevue/themes/nora';
2024-05-13 21:48:50 +00:00
const presets = {
Aura,
Material,
2024-05-13 21:48:50 +00:00
Lara,
Nora
2024-05-13 21:48:50 +00:00
};
2019-12-20 13:49:40 +00:00
export default {
data() {
return {
2024-09-20 20:11:22 +00:00
presetOptions: [
{ label: 'Aura', value: 'Aura' },
{ label: 'Material', value: 'Material' },
2024-09-20 20:11:22 +00:00
{ label: 'Lara', value: 'Lara' },
{ label: 'Nora', value: 'Nora' }
2024-09-20 20:11:22 +00:00
],
2024-02-07 10:15:47 +00:00
surfaces: [
{
name: 'slate',
2024-02-10 07:10:39 +00:00
palette: { 0: '#ffffff', 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' }
2024-02-07 10:15:47 +00:00
},
{
name: 'gray',
2024-02-10 07:10:39 +00:00
palette: { 0: '#ffffff', 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' }
2024-02-07 10:15:47 +00:00
},
{
name: 'zinc',
2024-02-10 07:10:39 +00:00
palette: { 0: '#ffffff', 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' }
2024-02-07 10:15:47 +00:00
},
{
name: 'neutral',
2024-02-10 07:10:39 +00:00
palette: { 0: '#ffffff', 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' }
2024-02-07 10:15:47 +00:00
},
{
name: 'stone',
2024-02-10 07:10:39 +00:00
palette: { 0: '#ffffff', 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
2024-03-31 16:52:25 +00:00
},
{
name: 'soho',
2024-10-28 11:12:15 +00:00
palette: { 0: '#ffffff', 50: '#ececec', 100: '#dedfdf', 200: '#c4c4c6', 300: '#adaeb0', 400: '#97979b', 500: '#7f8084', 600: '#6a6b70', 700: '#55565b', 800: '#3f4046', 900: '#2c2c34', 950: '#16161d' }
2024-03-31 16:52:25 +00:00
},
{
name: 'viva',
palette: { 0: '#ffffff', 50: '#f3f3f3', 100: '#e7e7e8', 200: '#cfd0d0', 300: '#b7b8b9', 400: '#9fa1a1', 500: '#87898a', 600: '#6e7173', 700: '#565a5b', 800: '#3e4244', 900: '#262b2c', 950: '#0e1315' }
2024-03-31 16:52:25 +00:00
},
{
name: 'ocean',
palette: { 0: '#ffffff', 50: '#fbfcfc', 100: '#F7F9F8', 200: '#EFF3F2', 300: '#DADEDD', 400: '#B1B7B6', 500: '#828787', 600: '#5F7274', 700: '#415B61', 800: '#29444E', 900: '#183240', 950: '#0c1920' }
}
2024-10-17 10:21:06 +00:00
],
isRTL: false
2021-04-15 14:53:33 +00:00
};
2020-11-26 08:53:02 +00:00
},
2019-12-20 13:49:40 +00:00
methods: {
2024-05-06 15:50:15 +00:00
getPresetExt() {
const color = this.primaryColors.find((c) => c.name === this.selectedPrimaryColor);
2024-05-05 20:35:38 +00:00
2024-05-06 15:50:15 +00:00
if (color.name === 'noir') {
2024-05-21 15:16:05 +00:00
document.documentElement.style.setProperty('--logo-color', 'var(--text-secondary-color)');
2024-05-06 15:50:15 +00:00
return {
semantic: {
primary: {
50: '{surface.50}',
100: '{surface.100}',
200: '{surface.200}',
300: '{surface.300}',
400: '{surface.400}',
500: '{surface.500}',
600: '{surface.600}',
700: '{surface.700}',
800: '{surface.800}',
900: '{surface.900}',
950: '{surface.950}'
},
2024-05-06 15:50:15 +00:00
colorScheme: {
light: {
primary: {
color: '{primary.950}',
2024-05-14 11:04:59 +00:00
contrastColor: '#ffffff',
2024-05-25 20:55:27 +00:00
hoverColor: '{primary.800}',
activeColor: '{primary.700}'
2024-05-06 15:50:15 +00:00
},
highlight: {
background: '{primary.950}',
focusBackground: '{primary.700}',
2024-05-06 15:50:15 +00:00
color: '#ffffff',
focusColor: '#ffffff'
}
},
dark: {
primary: {
color: '{primary.50}',
contrastColor: '{primary.950}',
2024-05-25 20:55:27 +00:00
hoverColor: '{primary.200}',
activeColor: '{primary.300}'
2024-05-06 15:50:15 +00:00
},
highlight: {
background: '{primary.50}',
focusBackground: '{primary.300}',
color: '{primary.950}',
focusColor: '{primary.950}'
2024-05-06 15:50:15 +00:00
}
}
}
}
};
} else {
2024-05-21 15:16:05 +00:00
document.documentElement.style.setProperty('--logo-color', 'var(--primary-color)');
2024-05-14 11:04:59 +00:00
if (this.$appState.preset === 'Nora') {
return {
semantic: {
primary: color.palette,
colorScheme: {
light: {
primary: {
color: '{primary.600}',
contrastColor: '#ffffff',
hoverColor: '{primary.700}',
activeColor: '{primary.800}'
},
highlight: {
background: '{primary.600}',
focusBackground: '{primary.700}',
color: '#ffffff',
focusColor: '#ffffff'
}
2024-05-06 15:50:15 +00:00
},
2024-05-14 11:04:59 +00:00
dark: {
primary: {
color: '{primary.500}',
contrastColor: '{surface.900}',
hoverColor: '{primary.400}',
activeColor: '{primary.300}'
},
highlight: {
background: '{primary.500}',
focusBackground: '{primary.400}',
color: '{surface.900}',
focusColor: '{surface.900}'
}
2024-05-06 15:50:15 +00:00
}
2024-05-14 11:04:59 +00:00
}
}
};
} else if (this.$appState.preset === 'Material') {
return {
semantic: {
primary: color.palette,
colorScheme: {
light: {
primary: {
color: '{primary.500}',
contrastColor: '#ffffff',
hoverColor: '{primary.400}',
activeColor: '{primary.300}'
},
highlight: {
background: 'color-mix(in srgb, {primary.color}, transparent 88%)',
focusBackground: 'color-mix(in srgb, {primary.color}, transparent 76%)',
color: '{primary.700}',
focusColor: '{primary.800}'
}
},
dark: {
primary: {
color: '{primary.400}',
contrastColor: '{surface.900}',
hoverColor: '{primary.300}',
activeColor: '{primary.200}'
},
highlight: {
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)'
}
}
}
}
};
2024-05-14 11:04:59 +00:00
} else {
return {
semantic: {
primary: color.palette,
colorScheme: {
light: {
primary: {
color: '{primary.500}',
contrastColor: '#ffffff',
hoverColor: '{primary.600}',
activeColor: '{primary.700}'
},
highlight: {
background: '{primary.50}',
focusBackground: '{primary.100}',
color: '{primary.700}',
focusColor: '{primary.800}'
}
2024-05-06 15:50:15 +00:00
},
2024-05-14 11:04:59 +00:00
dark: {
primary: {
color: '{primary.400}',
contrastColor: '{surface.900}',
hoverColor: '{primary.300}',
activeColor: '{primary.200}'
},
highlight: {
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)'
}
2024-05-06 15:50:15 +00:00
}
}
}
2024-05-14 11:04:59 +00:00
};
}
2024-05-06 15:50:15 +00:00
}
2024-05-05 20:35:38 +00:00
},
2024-02-10 07:10:39 +00:00
updateColors(type, color) {
2024-05-26 00:28:48 +00:00
if (type === 'primary') {
this.$appState.primary = color.name;
} else if (type === 'surface') {
this.$appState.surface = color.name;
}
2023-10-17 21:53:21 +00:00
this.applyTheme(type, color);
2024-02-07 10:15:47 +00:00
},
2024-02-10 07:10:39 +00:00
applyTheme(type, color) {
2024-03-27 15:37:56 +00:00
if (type === 'primary') {
2024-05-06 15:50:15 +00:00
updatePreset(this.getPresetExt());
2024-03-27 15:37:56 +00:00
} else if (type === 'surface') {
updateSurfacePalette(color.palette);
2024-03-27 15:37:56 +00:00
}
2024-03-29 07:44:47 +00:00
EventBus.emit('theme-palette-change');
},
2024-02-07 10:15:47 +00:00
onRippleChange(value) {
this.$primevue.config.ripple = value;
2024-05-05 20:35:38 +00:00
},
onPresetChange(value) {
2024-05-13 21:48:50 +00:00
this.$appState.preset = value;
const preset = presets[value];
2024-05-06 15:50:15 +00:00
const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor)?.palette;
2024-05-05 20:35:38 +00:00
2024-10-01 19:43:42 +00:00
if (value === 'Material') {
document.body.classList.add('material');
this.$primevue.config.ripple = true;
} else {
document.body.classList.remove('material');
}
2024-10-01 12:15:38 +00:00
2024-05-07 10:05:36 +00:00
$t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
2024-10-17 10:21:06 +00:00
},
onRTLChange(value) {
const htmlElement = document.documentElement;
if (value) {
htmlElement.setAttribute('dir', 'rtl');
} else {
htmlElement.removeAttribute('dir');
}
}
},
computed: {
rippleActive() {
return this.$primevue.config.ripple;
2024-05-26 00:28:48 +00:00
},
selectedPrimaryColor() {
return this.$appState.primary;
},
selectedSurfaceColor() {
return this.$appState.surface;
},
primaryColors() {
const presetPalette = presets[this.$appState.preset].primitive;
const colors = ['emerald', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
const palettes = [{ name: 'noir', palette: {} }];
colors.forEach((color) => {
palettes.push({
name: color,
palette: presetPalette[color]
});
});
return palettes;
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>