51 lines
2.9 KiB
Vue
51 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
title: string
|
|
breadcrumb?: string
|
|
description?: string
|
|
status?: string
|
|
dirty?: boolean
|
|
module?: string
|
|
}>(), { breadcrumb:'', description:'', status:'', dirty:false, module:'' })
|
|
</script>
|
|
|
|
<template>
|
|
<header class="kbx-page-header">
|
|
<div class="kbx-page-header__identity">
|
|
<span v-if="module" class="kbx-page-header__module">{{ module==='COMMON'?'공통':module }}</span>
|
|
<div v-if="breadcrumb" class="kbx-page-header__breadcrumb">{{ breadcrumb }}</div>
|
|
<div class="kbx-page-header__title-row">
|
|
<h1>{{ title }}</h1>
|
|
<span v-if="status" class="kbx-page-header__status">{{ status }}</span>
|
|
<span v-if="dirty" class="kbx-page-header__dirty">변경됨</span>
|
|
</div>
|
|
<p v-if="description">{{ description }}</p>
|
|
</div>
|
|
<div class="kbx-page-header__utility"><slot name="utility" /></div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.kbx-page-header {
|
|
min-height:var(--kbx-page-header-height);
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:var(--kbx-space-4);
|
|
padding:var(--kbx-space-1) var(--kbx-screen-inline-padding);
|
|
border-bottom:var(--kbx-border-width) solid var(--kbx-color-border);
|
|
background:var(--kbx-color-shell-chrome);
|
|
box-shadow:var(--kbx-shadow-shell);
|
|
border-left:var(--kbx-accent-border-width) solid var(--kbx-color-module-accent);
|
|
}
|
|
.kbx-page-header__identity { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:var(--kbx-space-2); }
|
|
.kbx-page-header__module{grid-row:1 / span 3;align-self:stretch;display:flex;align-items:center;padding:0 var(--kbx-space-2);border:var(--kbx-border-width) solid var(--kbx-color-module-accent-border);border-radius:var(--kbx-radius-sm);background:var(--kbx-color-module-accent-surface);color:var(--kbx-color-module-accent);font-size:var(--kbx-font-xs);font-weight:700;letter-spacing:.02em}.kbx-page-header__breadcrumb,.kbx-page-header__title-row,.kbx-page-header__identity>p{grid-column:2}
|
|
.kbx-page-header__title-row { display:flex; align-items:center; gap:var(--kbx-space-2); min-width:0; }
|
|
h1 { font-size:var(--kbx-font-2xl); font-weight:600; margin:0; line-height:1.3; }
|
|
.kbx-page-header__breadcrumb, p { font-size:var(--kbx-font-xs); color:var(--kbx-color-text-muted); margin:0 0 var(--kbx-space-1); }
|
|
.kbx-page-header__status, .kbx-page-header__dirty { font-size:var(--kbx-font-xs); padding:var(--kbx-space-1) var(--kbx-space-2); border:var(--kbx-border-width) solid var(--kbx-color-border); border-radius:var(--kbx-radius-sm); white-space:nowrap; }
|
|
.kbx-page-header__status { background:var(--kbx-color-surface-muted); }
|
|
.kbx-page-header__dirty { color:var(--kbx-color-warning-text); border-color:var(--kbx-color-warning-border); background:var(--kbx-color-warning-surface); }
|
|
.kbx-page-header__utility { display:flex; align-items:center; gap:var(--kbx-space-1); flex-shrink:0; }
|
|
</style>
|