44 lines
1.8 KiB
Vue
44 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import KbxButton from './KbxButton.vue'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
canImport?: boolean
|
|
canExport?: boolean
|
|
}>(), { canImport: true, canExport: true })
|
|
|
|
const emit = defineEmits<{
|
|
export: []
|
|
template: []
|
|
import: []
|
|
paste: []
|
|
history: []
|
|
}>()
|
|
|
|
const open = ref(false)
|
|
function choose(action: 'export' | 'template' | 'import' | 'paste' | 'history') {
|
|
open.value = false
|
|
emit(action)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="kbx-excel-menu">
|
|
<KbxButton label="엑셀" variant="secondary" @click="open = !open" />
|
|
<div v-if="open" class="kbx-excel-menu__popup" role="menu">
|
|
<button v-if="props.canExport" type="button" @click="choose('export')">현재 조회결과 다운로드</button>
|
|
<button v-if="props.canImport" type="button" @click="choose('template')">업로드 양식 다운로드</button>
|
|
<button v-if="props.canImport" type="button" @click="choose('import')">엑셀 업로드</button>
|
|
<button v-if="props.canImport" type="button" @click="choose('paste')">Excel에서 붙여넣기</button>
|
|
<button v-if="props.canImport" type="button" @click="choose('history')">최근 업로드 결과</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.kbx-excel-menu { position:relative; display:inline-block; }
|
|
.kbx-excel-menu__popup { position:absolute; right:0; top:calc(100% + 4px); min-width:220px; padding:4px; background:var(--kbx-color-surface); border:1px solid var(--kbx-color-border); border-radius:var(--kbx-radius-sm); box-shadow:0 6px 18px rgb(0 0 0 / 12%); z-index:50; }
|
|
.kbx-excel-menu__popup button { display:block; width:100%; height:34px; padding:0 10px; text-align:left; border:0; background:transparent; color:var(--kbx-color-text); border-radius:4px; }
|
|
.kbx-excel-menu__popup button:hover { background:var(--kbx-color-surface-muted); }
|
|
</style>
|