47 lines
1.6 KiB
Vue
47 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
title: string
|
|
description?: string
|
|
eyebrow?: string
|
|
as?: 'header' | 'section'
|
|
}>(), {
|
|
description: '',
|
|
eyebrow: '',
|
|
as: 'header',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<component :is="as" class="page-toolbar">
|
|
<div class="page-toolbar__copy">
|
|
<p v-if="eyebrow" class="page-toolbar__eyebrow">{{ eyebrow }}</p>
|
|
<h1>{{ title }}</h1>
|
|
<p v-if="description" class="page-toolbar__description">{{ description }}</p>
|
|
</div>
|
|
<div v-if="$slots.default || $slots.actions" class="page-toolbar__actions">
|
|
<slot />
|
|
<slot name="actions" />
|
|
</div>
|
|
</component>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page-toolbar { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 16px; }
|
|
.page-toolbar__copy { min-width: 0; flex: 1; }
|
|
.page-toolbar h1 { margin: 0; color: var(--cc-text, #172033); font-size: 20px; line-height: 1.35; }
|
|
.page-toolbar__eyebrow { margin: 0 0 5px; color: var(--cc-primary); font-size: 11px; font-weight: 700; }
|
|
.page-toolbar__description { margin: 5px 0 0; color: var(--cc-muted, #667085); font-size: 13px; line-height: 1.55; }
|
|
.page-toolbar__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
|
|
.page-toolbar__actions :deep(.el-button + .el-button) { margin-left: 0; }
|
|
|
|
@media (min-width: 1920px) {
|
|
.page-toolbar { gap: 12px; }
|
|
.page-toolbar__actions { gap: 6px; }
|
|
}
|
|
@media (max-width: 720px) {
|
|
.page-toolbar { flex-direction: column; }
|
|
.page-toolbar__actions { width: 100%; justify-content: flex-start; }
|
|
.page-toolbar__actions :deep(.el-button) { min-height: 44px; }
|
|
}
|
|
</style>
|