124 lines
4.5 KiB
Vue
124 lines
4.5 KiB
Vue
<template>
|
|
<Drawer v-model:visible="$appState.designerActive" header="Theme Designer" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false">
|
|
<Tabs value="0">
|
|
<TabList>
|
|
<Tab value="0">Primitive</Tab>
|
|
<Tab value="1">Semantic</Tab>
|
|
<Tab value="2">Component</Tab>
|
|
</TabList>
|
|
<TabPanels class="!px-0">
|
|
<TabPanel value="0">
|
|
<div class="flex flex-col gap-3">
|
|
<DesignBorderRadius />
|
|
<DesignColors />
|
|
</div>
|
|
</TabPanel>
|
|
<TabPanel value="1">
|
|
<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="2"> <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" label="Download" variant="outlined" icon="pi pi-download" />
|
|
<Button type="button" @click="apply" label="Apply" />
|
|
</div>
|
|
</template>
|
|
</Drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import { updatePreset } from '@primevue/themes';
|
|
import AuraBase from '@primevue/themes/aura/base';
|
|
|
|
export default {
|
|
provide() {
|
|
return {
|
|
$preset: this.preset
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
preset: AuraBase
|
|
};
|
|
},
|
|
mounted() {
|
|
this.preset.semantic.primary = this.preset.primitive.emerald;
|
|
this.preset.semantic.colorScheme.light.surface = this.preset.primitive.slate;
|
|
this.preset.semantic.colorScheme.dark.surface = this.preset.primitive.zinc;
|
|
},
|
|
methods: {
|
|
apply() {
|
|
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);
|
|
}
|
|
}
|
|
};
|
|
</script>
|