29 lines
4.5 KiB
Vue
29 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
productName?: string
|
|
activeModule?: string
|
|
modules?: string[]
|
|
menuSearchLabel?: string
|
|
operationCount?: number
|
|
notificationCount?: number
|
|
homeActive?: boolean
|
|
}>(), { productName:'KBX', activeModule:'', modules:()=>[], menuSearchLabel:'메뉴 검색', operationCount:0, notificationCount:0, homeActive:false })
|
|
const emit = defineEmits<{ home:[]; moduleSelect:[module:string]; menuSearch:[]; operations:[]; notifications:[]; profile:[] }>()
|
|
const label=(module:string)=>module==='COMMON'?'공통':module
|
|
</script>
|
|
|
|
<template>
|
|
<header class="kbx-global-header">
|
|
<div class="brand" aria-label="제품 및 모듈">
|
|
<button type="button" class="brand__home" :aria-current="homeActive?'page':undefined" @click="emit('home')"><strong>{{ props.productName }}</strong><span class="brand__home-label">홈</span></button>
|
|
<label v-if="props.modules.length" class="module-select"><span class="sr-only">업무 모듈</span><select :value="props.activeModule" @change="emit('moduleSelect',($event.target as HTMLSelectElement).value)"><option value="" disabled>모듈</option><option v-for="module in props.modules" :key="module" :value="module">{{label(module)}}</option></select></label>
|
|
</div>
|
|
<button class="menu-search" type="button" aria-keyshortcuts="Control+K" @click="emit('menuSearch')"><span>{{ props.menuSearchLabel }}</span><kbd>Ctrl K</kbd></button>
|
|
<div class="actions"><button type="button" @click="emit('operations')">작업 <b v-if="props.operationCount">{{ props.operationCount }}</b></button><button type="button" @click="emit('notifications')">알림 <b v-if="props.notificationCount">{{ props.notificationCount }}</b></button><button type="button" @click="emit('profile')">사용자</button></div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.kbx-global-header{height:var(--kbx-side-nav-collapsed-width);display:grid;grid-template-columns:var(--kbx-side-nav-width) minmax(var(--kbx-master-list-min-width),var(--kbx-access-max-width)) 1fr;align-items:center;gap:var(--kbx-space-4);padding:0 var(--kbx-space-3);border-bottom:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface);z-index:20}.brand{display:flex;align-items:center;gap:var(--kbx-space-2);min-width:0}.brand__home{height:var(--kbx-control-height);display:flex;align-items:center;gap:var(--kbx-space-2);border:0;border-radius:var(--kbx-radius-sm);background:transparent;padding:0 var(--kbx-space-2);color:var(--kbx-color-text)}.brand__home:hover,.brand__home[aria-current="page"]{background:var(--kbx-color-surface-hover)}.brand__home strong{font-size:var(--kbx-font-lg)}.brand__home-label{font-size:var(--kbx-font-xs);color:var(--kbx-color-text-muted)}.module-select{padding-left:var(--kbx-space-2);border-left:var(--kbx-border-width) solid var(--kbx-color-border)}.module-select select{width:var(--kbx-global-header-module-selector-width);height:var(--kbx-control-sm);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-sm);background:var(--kbx-color-surface);color:var(--kbx-color-text);font-size:var(--kbx-font-sm);padding:0 var(--kbx-space-2)}.menu-search{height:var(--kbx-control-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--kbx-space-3);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-sm);background:var(--kbx-color-surface-muted);color:var(--kbx-color-text-muted);text-align:left}.menu-search:hover{border-color:var(--kbx-color-border-strong)}.menu-search kbd{font-size:var(--kbx-font-xs);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-sm);padding:var(--kbx-space-1);background:var(--kbx-color-surface)}.actions{display:flex;justify-content:flex-end;gap:var(--kbx-space-1)}.actions button{height:var(--kbx-control-sm);border:0;background:transparent;border-radius:var(--kbx-radius-sm);padding:0 var(--kbx-space-2)}.actions button:hover{background:var(--kbx-color-surface-hover)}.actions b{min-width:var(--kbx-checkbox-track);display:inline-block;margin-left:var(--kbx-space-1);color:var(--kbx-color-primary)}.sr-only{position:absolute;width:var(--kbx-visually-hidden-size);height:var(--kbx-visually-hidden-size);padding:0;margin:calc(var(--kbx-visually-hidden-size) * -1);overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:56rem){.kbx-global-header{grid-template-columns:var(--kbx-side-nav-width) 1fr auto}.brand__home-label,.menu-search kbd{display:none}.module-select select{width:var(--kbx-control-lg);padding:0}}
|
|
</style>
|