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

Headless drawer for designer

pull/7044/head
Cagatay Civici 2025-01-03 19:27:58 +03:00
parent 64316a1f3e
commit d15023e1f0
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/showcase/assets/styles/tailwind/main.css
View File

@ -10,4 +10,8 @@
.btn-design-outlined { .btn-design-outlined {
@apply 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:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60; @apply 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:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60;
} }
.icon-btn {
@apply h-8 w-8 rounded-full inline-flex justify-center items-center hover:bg-surface-100 dark:hover:bg-surface-800 text-zinc-500 dark:text-zinc-400 transition-colors duration-200;
}
} }

37
apps/showcase/components/layout/AppDesigner.vue
View File

@ -1,18 +1,32 @@
<template> <template>
<Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide" :dt="drawerTokens"> <Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide" :dt="drawerTokens">
<template #header> <template #container="{ closeCallback }">
<div class="flex items-center gap-2"> <div class="flex items-center justify-between p-5">
<Button v-if="$appState.designer.activeView !== 'dashboard'" variant="text" severity="secondary" rounded type="button" icon="pi pi-chevron-left" @click="openDashboard" /> <div class="flex items-center gap-2">
<span class="font-bold text-xl">{{ viewTitle }}</span> <button v-if="$appState.designer.activeView !== 'dashboard'" type="button" @click="openDashboard" class="icon-btn">
<i class="pi pi-chevron-left" />
</button>
<span class="font-bold text-xl">{{ viewTitle }}</span>
</div>
<div class="flex items-center gap-2">
<button type="button" @click="toggleDarkMode" class="icon-btn">
<i :class="['pi', { 'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme }]"></i>
</button>
<button type="button" @click="closeCallback" class="icon-btn">
<i class="pi pi-times" />
</button>
</div>
</div> </div>
</template>
<DesignDashboard v-if="$appState.designer.activeView === 'dashboard'" /> <div class="flex-auto overflow-auto pb-5 px-5">
<DesignCreateTheme v-else-if="$appState.designer.activeView === 'create_theme'" /> <DesignDashboard v-if="$appState.designer.activeView === 'dashboard'" />
<DesignEditor v-else-if="$appState.designer.activeView === 'editor'" :deferred="deferredTabs" /> <DesignCreateTheme v-else-if="$appState.designer.activeView === 'create_theme'" />
<DesignEditor v-else-if="$appState.designer.activeView === 'editor'" :deferred="deferredTabs" />
</div>
<template #footer> <div class="p-5">
<DesignEditorFooter v-if="$appState.designer.activeView === 'editor'" /> <DesignEditorFooter v-if="$appState.designer.activeView === 'editor'" />
</div>
</template> </template>
</Drawer> </Drawer>
<ConfirmDialog group="designer"></ConfirmDialog> <ConfirmDialog group="designer"></ConfirmDialog>
@ -177,6 +191,9 @@ export default {
this.$appState.designer.theme.preset.semantic.primary = this.$appState.designer.theme.preset.primitive.emerald; this.$appState.designer.theme.preset.semantic.primary = this.$appState.designer.theme.preset.primitive.emerald;
this.$appState.designer.theme.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.slate }; this.$appState.designer.theme.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.slate };
this.$appState.designer.theme.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.zinc }; this.$appState.designer.theme.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.zinc };
},
toggleDarkMode() {
EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
} }
}, },
computed: { computed: {