92 lines
3.6 KiB
Vue
92 lines
3.6 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-end gap-2">
|
|
<Button type="button" label="Download" variant="outlined" />
|
|
<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);
|
|
}
|
|
}
|
|
};
|
|
</script>
|