Marc Mintel
a71f86560b
All checks were successful
Monorepo Pipeline / ⚡ Prioritize Release (push) Successful in 27s
Monorepo Pipeline / 🧪 Test (push) Successful in 57s
Monorepo Pipeline / 🧹 Lint (push) Successful in 2m1s
Monorepo Pipeline / 🏗️ Build (push) Successful in 3m35s
Monorepo Pipeline / 🚀 Release (push) Has been skipped
Monorepo Pipeline / 🐳 Build Directus (Base) (push) Has been skipped
Monorepo Pipeline / 🐳 Build Gatekeeper (Product) (push) Has been skipped
Monorepo Pipeline / 🐳 Build Build-Base (push) Has been skipped
Monorepo Pipeline / 🐳 Build Production Runtime (push) Has been skipped
103 lines
1.8 KiB
Vue
103 lines
1.8 KiB
Vue
<template>
|
|
<private-view :title="title">
|
|
<template #navigation>
|
|
<slot name="navigation" />
|
|
</template>
|
|
|
|
<template #title-outer:after>
|
|
<v-notice v-if="notice" :type="notice.type" @close="$emit('close-notice')" dismissible>
|
|
{{ notice.message }}
|
|
</v-notice>
|
|
</template>
|
|
|
|
<div class="mintel-manager-layout">
|
|
<div v-if="isEmpty" class="empty-state">
|
|
<v-info :title="emptyTitle" :icon="emptyIcon" center>
|
|
<slot name="empty-state" />
|
|
</v-info>
|
|
</div>
|
|
|
|
<template v-else>
|
|
<header class="mintel-header">
|
|
<div class="header-left">
|
|
<h1 class="mintel-title">{{ itemTitle }}</h1>
|
|
<p class="mintel-subtitle">
|
|
<slot name="subtitle" />
|
|
</p>
|
|
</div>
|
|
<div class="header-right">
|
|
<slot name="actions" />
|
|
</div>
|
|
</header>
|
|
|
|
<v-divider />
|
|
|
|
<div class="mintel-content">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</private-view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string;
|
|
itemTitle?: string;
|
|
isEmpty?: boolean;
|
|
emptyTitle?: string;
|
|
emptyIcon?: string;
|
|
notice?: { type: string; message: string } | null;
|
|
}>();
|
|
|
|
defineEmits(['close-notice']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mintel-manager-layout {
|
|
padding: 32px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.mintel-header {
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.mintel-title {
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
margin-bottom: 4px;
|
|
color: var(--theme--foreground);
|
|
}
|
|
|
|
.mintel-subtitle {
|
|
color: var(--theme--foreground-subdued);
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.empty-state {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mintel-content {
|
|
margin-top: 32px;
|
|
}
|
|
</style>
|