V13-FE-011: finalize search list layout slice

2026-08-09 02:57:26 +09:00
parent 9efd202e76
commit 6422cb2b13
984 changed files with 120811 additions and 1498 deletions
@@ -0,0 +1,43 @@
+<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>