220 lines
9.3 KiB
Vue
220 lines
9.3 KiB
Vue
<template>
|
|
<Drawer v-model:visible="$appState.designerActive" header="Theme Designer" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false">
|
|
<Tabs value="0">
|
|
<TabList>
|
|
<Tab value="0">Base</Tab>
|
|
<Tab value="1">Primitive</Tab>
|
|
<Tab value="2">Semantic</Tab>
|
|
<Tab value="3">Component</Tab>
|
|
</TabList>
|
|
<TabPanels class="!px-0">
|
|
<TabPanel value="0">
|
|
<div class="text-lg font-semibold mb-4">Choose a Theme to Get Started</div>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex flex-col gap-4 border border-surface-200 dark:border-surface-700 rounded-md p-4">
|
|
<span class="font-semibold">Built-in Themes</span>
|
|
<span class="text-muted-color">Four alternatives to choose from.</span>
|
|
<SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
|
|
</div>
|
|
<Divider>OR</Divider>
|
|
<div class="flex flex-col gap-4 border border-surface-200 dark:border-surface-700 rounded-md p-4 items-start">
|
|
<span class="font-semibold">Load Theme</span>
|
|
<span class="text-muted-color">Continue editing the theme files stored locally.</span>
|
|
<Button label="Restore from local storage" class="!px-3 !py-2" severity="secondary" @click="loadFromLocalStorage" />
|
|
</div>
|
|
<Divider>OR</Divider>
|
|
<div class="flex flex-col gap-4 border border-surface-200 dark:border-surface-700 rounded-md p-4">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-semibold">Import Figma Tokens </span>
|
|
<Tag value="PRO" severity="contrast"></Tag>
|
|
</div>
|
|
<span class="text-muted-color leading-6">Export the token studio json file and import to the Visual Editor. This feature is currently under development.</span>
|
|
<FileUpload mode="basic" disabled pt:root:class="!justify-start" />
|
|
</div>
|
|
</div>
|
|
</TabPanel>
|
|
<TabPanel value="1">
|
|
<div class="flex flex-col gap-3">
|
|
<DesignBorderRadius />
|
|
<DesignColors />
|
|
</div>
|
|
</TabPanel>
|
|
<TabPanel value="2">
|
|
<Accordion :value="['0', '1']" multiple>
|
|
<AccordionPanel value="0">
|
|
<AccordionHeader>Common</AccordionHeader>
|
|
<AccordionContent>
|
|
<div class="flex flex-col gap-3">
|
|
<DesignGeneral />
|
|
<DesignFormField />
|
|
<DesignList />
|
|
<DesignNavigation />
|
|
<DesignOverlay />
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionPanel>
|
|
|
|
<AccordionPanel value="1">
|
|
<AccordionHeader>Color Scheme</AccordionHeader>
|
|
<AccordionContent>
|
|
<Tabs value="cs-0">
|
|
<TabList>
|
|
<Tab value="cs-0">Light</Tab>
|
|
<Tab value="cs-1">Dark</Tab>
|
|
</TabList>
|
|
<TabPanels class="!px-0">
|
|
<TabPanel value="cs-0">
|
|
<DesignCS :value="preset.semantic.colorScheme.light" />
|
|
</TabPanel>
|
|
<TabPanel value="cs-1">
|
|
<DesignCS :value="preset.semantic.colorScheme.dark" />
|
|
</TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
</AccordionContent>
|
|
</AccordionPanel>
|
|
</Accordion>
|
|
</TabPanel>
|
|
<TabPanel value="3"> <div class="p-4">Component tokens are not supported by the Visual Editor at the moment.</div></TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-between gap-2">
|
|
<button
|
|
type="button"
|
|
@click="download"
|
|
icon="pi pi-download"
|
|
class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white"
|
|
>
|
|
Download
|
|
</button>
|
|
<button
|
|
type="button"
|
|
@click="apply"
|
|
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white"
|
|
>
|
|
Apply
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</Drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import { updatePreset, usePreset } from '@primevue/themes';
|
|
import Aura from '@primevue/themes/aura';
|
|
import Lara from '@primevue/themes/lara';
|
|
import Material from '@primevue/themes/material';
|
|
import Nora from '@primevue/themes/nora';
|
|
import { computed } from 'vue';
|
|
|
|
const presets = {
|
|
Aura,
|
|
Material,
|
|
Lara,
|
|
Nora
|
|
};
|
|
|
|
export default {
|
|
provide() {
|
|
return {
|
|
$preset: computed(() => this.preset)
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
preset: {
|
|
primitive: Aura.primitive,
|
|
semantic: Aura.semantic
|
|
},
|
|
presetOptions: [
|
|
{ label: 'Aura', value: 'Aura' },
|
|
{ label: 'Material', value: 'Material' },
|
|
{ label: 'Lara', value: 'Lara' },
|
|
{ label: 'Nora', value: 'Nora' }
|
|
],
|
|
customThemes: {},
|
|
newThemeName: null
|
|
};
|
|
},
|
|
mounted() {
|
|
this.preset.semantic.primary = this.preset.primitive.emerald;
|
|
this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate };
|
|
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
|
|
},
|
|
methods: {
|
|
apply() {
|
|
this.saveTheme();
|
|
console.log(this.preset);
|
|
updatePreset(this.preset);
|
|
},
|
|
download() {
|
|
const theme = JSON.stringify(this.preset, null, 4).replace(/"([^"]+)":/g, '$1:');
|
|
const textContent = `import { createApp } from "vue";
|
|
import PrimeVue from "primevue/config";
|
|
import Aura from "@primevue/themes/aura";
|
|
import { definePreset } from "@primevue/themes";
|
|
|
|
const app = createApp(App);
|
|
|
|
const MyPreset = definePreset(Aura, ${theme});
|
|
|
|
app.use(PrimeVue, {
|
|
theme: {
|
|
preset: MyPreset
|
|
},
|
|
});
|
|
app.mount("#app");
|
|
`;
|
|
const blob = new Blob([textContent], { type: 'text/plain' });
|
|
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
const a = document.createElement('a');
|
|
|
|
a.href = url;
|
|
a.download = 'mytheme.js';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
},
|
|
onPresetChange(value) {
|
|
this.$appState.preset = value;
|
|
const newPreset = presets[value];
|
|
|
|
if (value === 'Material') {
|
|
document.body.classList.add('material');
|
|
this.$primevue.config.ripple = true;
|
|
} else {
|
|
document.body.classList.remove('material');
|
|
}
|
|
|
|
usePreset(newPreset);
|
|
|
|
this.preset = {
|
|
primitive: newPreset.primitive,
|
|
semantic: newPreset.semantic
|
|
};
|
|
},
|
|
saveTheme() {
|
|
const themeRecord = {
|
|
defaultTheme: this.preset
|
|
};
|
|
|
|
localStorage.setItem(this.$appState.designerKey, JSON.stringify(themeRecord));
|
|
},
|
|
loadFromLocalStorage() {
|
|
const savedTheme = localStorage.getItem(this.$appState.designerKey);
|
|
|
|
if (savedTheme) {
|
|
this.preset = JSON.parse(savedTheme).defaultTheme;
|
|
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Theme loaded to Designer', life: 3000 });
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|