create-m2m-bo-template-vue 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-m2m-bo-template-vue",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Scaffolding CLI for the M2M back-office vue template.",
   "type": "module",
   "bin": {

package/template/src/components/DataGrid/DataGrid.vue

@@ -172,6 +172,7 @@ function cellFgColor(cell: Cell): string | undefined {
 
 const rootRef = ref<HTMLDivElement | null>(null);
 const internalSelected = ref<Set<string | number>>(new Set());
+const autoSelectable = ref(false);
 const pageSize = ref<number | null>(null);
 const currentPage = ref(1);
 const sortColumnIndex = ref<number | null>(props.defaultSortColumn ?? null);
@@ -185,12 +186,19 @@ function handlePageSize(event: Event) {
   currentPage.value = 1;
 }
 
+function updateAutoSelectable() {
+  if (props.selectable !== undefined) return;
+  autoSelectable.value = Boolean(rootRef.value?.ownerDocument.querySelector('[data-excel-download]'));
+}
+
 onMounted(() => {
   rootRef.value?.addEventListener(DATA_GRID_PAGE_SIZE_EVENT, handlePageSize);
+  updateAutoSelectable();
 });
 onUnmounted(() => {
   rootRef.value?.removeEventListener(DATA_GRID_PAGE_SIZE_EVENT, handlePageSize);
 });
+watch(() => props.selectable, updateAutoSelectable);
 
 const totalPageCount = computed(() => (pageSize.value ? Math.max(1, Math.ceil(props.rows.length / pageSize.value)) : 1));
 watch(totalPageCount, (count) => {
@@ -206,7 +214,7 @@ watch(
   }
 );
 
-const effectiveSelectable = computed(() => props.selectable ?? false);
+const effectiveSelectable = computed(() => props.selectable ?? autoSelectable.value);
 const pageStart = computed(() => (pageSize.value ? (currentPage.value - 1) * pageSize.value : 0));
 const visibleSourceRows = computed(() => (pageSize.value ? props.rows.slice(pageStart.value, pageStart.value + pageSize.value) : props.rows));
 

package/template/src/components/SearchField/SearchField.module.css

@@ -36,7 +36,9 @@
   min-width: 0;
   max-width: none;
   height: 100%;
-  padding: 0 36px 0 12px;
+  /* m2m-uiux-vue의 .bsSearchField .bsSearchFieldInput 리셋 규칙과 클래스 특이도가
+     같아 로드 순서에 따라 우리 패딩이 밀릴 수 있다 — !important로 확정 고정 */
+  padding: 0 36px 0 12px !important;
   border: 0;
   outline: 0;
   background: transparent;
@@ -46,7 +48,7 @@
 }
 
 .field:has(.shortcut) .control > input {
-  padding-right: 64px;
+  padding-right: 64px !important;
 }
 
 .control > button:first-child {
@@ -71,6 +73,13 @@
   font-size: 0.625rem;
   pointer-events: none;
   transform: translateY(-50%);
+  background: #fff;
+}
+
+/* 입력 내용이 있거나 포커스 시 shortcut 자동 숨김 */
+.field:has(input:not(:placeholder-shown)) .shortcut,
+.field:has(input:focus) .shortcut {
+  display: none !important;
 }
 
 @media (max-width: 720px) {

package/template/src/components/SearchField/SearchField.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { SearchField as M2MSearchField } from 'm2m-uiux-vue/SearchField';
 
 export interface SearchFieldProps {
@@ -26,6 +27,9 @@ function handleUpdate(value: string) {
   props.onChange?.({ target: { value } } as unknown as Event);
   props.onValueChange?.(value);
 }
+
+const currentVal = computed(() => String((props.value ?? props.defaultValue) ?? ''));
+const hasValue = computed(() => currentVal.value.trim().length > 0);
 </script>
 
 <template>
@@ -39,7 +43,7 @@ function handleUpdate(value: string) {
       :class-names="$style.control"
       @update:model-value="handleUpdate"
     />
-    <span v-if="shortcutHint" :class="$style.shortcut" aria-hidden="true">{{ shortcutHint }}</span>
+    <span v-if="shortcutHint && !hasValue" :class="$style.shortcut" aria-hidden="true">{{ shortcutHint }}</span>
   </span>
 </template>
 

package/template/src/components/shell/GlobalSearchBar.module.css

@@ -1,3 +1,9 @@
+.wrapper {
+  width: 100%;
+  position: relative;
+  /* 퀵서치 패널이 wrapper를 기준으로 absolute 포지셔닝되도록 */
+}
+
 .bar {
   width: 100%;
 }

package/template/src/components/shell/GlobalSearchBar.vue

@@ -2,6 +2,8 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import SearchField from '../SearchField/SearchField.vue';
+import QuickSearchPanel from './QuickSearchPanel.vue';
+import { addRecentSearch } from '../../lib/recentSearches';
 import styles from './GlobalSearchBar.module.css';
 
 withDefaults(defineProps<{ placeholder?: string; className?: string }>(), {
@@ -12,12 +14,18 @@ withDefaults(defineProps<{ placeholder?: string; className?: string }>(), {
 const router = useRouter();
 const wrapRef = ref<HTMLElement | null>(null);
 const keyword = ref('');
+const panelOpen = ref(false);
+
+function getInput() {
+  return wrapRef.value?.querySelector('input') ?? null;
+}
 
 function focusInput() {
-  wrapRef.value?.querySelector('input')?.focus();
-  wrapRef.value?.querySelector('input')?.select();
+  getInput()?.focus();
+  getInput()?.select();
 }
 
+// Ctrl/⌘ + K 로 검색창 포커스
 function handler(e: KeyboardEvent) {
   if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
     e.preventDefault();
@@ -31,22 +39,46 @@ onUnmounted(() => window.removeEventListener('keydown', handler));
 function runSearch(value: string) {
   const query = value.trim();
   if (!query) {
-    wrapRef.value?.querySelector('input')?.focus();
+    focusInput();
     return;
   }
+  addRecentSearch(query);
+  panelOpen.value = false;
   router.push(`/search?q=${encodeURIComponent(query)}`);
 }
 
+function handleSelectKeyword(kw: string) {
+  keyword.value = kw;
+  runSearch(kw);
+}
+
+function handleValueChange(value: string) {
+  keyword.value = value;
+  panelOpen.value = true;
+}
+
+function handleFocus() {
+  panelOpen.value = true;
+}
+
+function handleClose() {
+  panelOpen.value = false;
+  focusInput();
+}
+
 function handleKeyDown(e: KeyboardEvent) {
   if (e.key === 'Enter') {
     e.preventDefault();
     runSearch(keyword.value);
   }
+  if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && panelOpen.value) {
+    e.preventDefault();
+  }
 }
 </script>
 
 <template>
-  <span ref="wrapRef">
+  <div ref="wrapRef" :class="`${styles.wrapper} ${className}`" style="position: relative">
     <SearchField
       size="sm"
       clearable
@@ -55,10 +87,21 @@ function handleKeyDown(e: KeyboardEvent) {
       :placeholder="placeholder"
       shortcut-hint="Ctrl K"
       :value="keyword"
-      :on-value-change="(v: string) => (keyword = v)"
+      :on-value-change="handleValueChange"
       :on-search="runSearch"
       @keydown="handleKeyDown"
+      @focusin="handleFocus"
       aria-label="통합 검색"
+      :aria-expanded="panelOpen"
+      aria-haspopup="listbox"
+    />
+
+    <QuickSearchPanel
+      v-if="panelOpen"
+      :query="keyword.trim()"
+      :anchor-el="wrapRef"
+      @close="handleClose"
+      @select-keyword="handleSelectKeyword"
     />
-  </span>
+  </div>
 </template>

package/template/src/components/shell/Header.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { Blocks, Settings, ChevronDown, Check } from 'lucide-vue-next';
+import { Blocks, Settings, ChevronDown, Check, LogOut } from 'lucide-vue-next';
 import { Header as M2MHeader } from 'm2m-uiux-vue/Header';
 import { useRoute, useRouter } from 'vue-router';
 import { activeKeyForPath, breadcrumbForKey } from '../../lib/nav';
@@ -75,6 +75,9 @@ function goSystemDisplay() {
   modeDropdownOpen.value = false;
   router.push('/system/display');
 }
+function logout() {
+  router.push('/login');
+}
 </script>
 
 <template>
@@ -128,6 +131,10 @@ function goSystemDisplay() {
         <Settings :size="15" :stroke-width="1.8" />
       </button>
 
+      <button type="button" :class="styles.iconBtn" title="로그아웃" @click="logout">
+        <LogOut :size="15" :stroke-width="1.8" />
+      </button>
+
       <div :class="styles.account">
         <div :class="styles.accountAvatar">관</div>
         <span :class="styles.accountName">관리자</span>