feat(WIP): 커맨드 윈도우 UI 구성

hwe/ts/components/CommandSelectForm.vue

@@ -1,28 +1,43 @@
 <template>
-    <teleport to="body">
-        <div v-if="showForm">
-            <div class="commandCategory">
+    <teleport :to="anchor">
+        <div v-if="showForm" class="my-1">
+            <div class="commandCategory row gx-0 gy-1">
                 <div
-                    class="categoryItem"
+                    class="categoryItem col-4 d-grid"
                     v-for="[categoryKey, { deco: categoryDeco }] of commandList"
                     :key="categoryKey"
-                ><BButton @click="chosenCategory=categoryKey">{{ categoryDeco.altName ?? categoryDeco.name }}</BButton></div>
+                >
+                    <BButton
+                        variant="success"
+                        @click="chosenCategory = categoryKey"
+                        :active="chosenCategory == categoryKey"
+                    >{{ categoryDeco.altName ?? categoryDeco.name }}</BButton>
+                </div>
             </div>
-            <div class="commandList">
+            <div class="commandList row gx-1 gy-1 my-1">
                 <div
-                    class="commandItem"
+                    class="col-6 d-grid"
                     v-for="commandItem of chosenSubList"
                     :key="commandItem.value"
                     @click="close(commandItem.value)"
                 >
-                    {{ commandItem.simpleName }}
-                    <br />
-                    <small>{{ commandItem.title }}</small>
+                    <div class="commandItem">
+                        <p class="center my-0">{{ commandItem.simpleName }}</p>
+                        <small class="center" :style="{ display: 'block' }">
+                            {{
+                                commandItem.title.startsWith(commandItem.simpleName)
+                                    ? commandItem.title.substring(commandItem.simpleName.length)
+                                    : commandItem.title
+                            }}
+                        </small>
+                    </div>
                 </div>
             </div>
-            <div class="commandBottom">
-                <BButton @click="close()">닫기</BButton>
-            </div>
+            <!--<div class="commandBottom row mt-1 mb-1">
+                <div class="offset-8 col-4 d-grid">
+                    <BButton @click="close()">닫기</BButton>
+                </div>
+            </div>-->
         </div>
     </teleport>
 </template>
@@ -42,9 +57,9 @@
  */
 import type { CommandItem } from "@/defs";
 import { BButton } from "bootstrap-vue-3";
-import { ref, defineProps, defineEmits, defineExpose, type PropType, watch } from "vue";
+import { ref, defineProps, defineEmits, defineExpose, type PropType, watch, onMounted } from "vue";
 
-const chosenCategory = ref<string>("");
+const chosenCategory = ref<string>("-");
 const chosenSubList = ref<CommandItem[]>([]);
 
 interface CategoryDecoration {
@@ -66,6 +81,11 @@ const props = defineProps({
             values: CommandItem[];
         }[]>,
         required: true,
+    },
+    anchor: {
+        type: String,
+        required: false,
+        default: '.commandSelectFormAnchor',
     }
 })
 
@@ -114,10 +134,21 @@ watch(chosenCategory, (category) => {
     chosenSubList.value = itemInfo.values;
 });
 
+onMounted(() => {
+    chosenCategory.value = props.commandList[0].category;
+});
+
 function show(): void {
     showForm.value = true;
 }
 
+function toggle(): void {
+    showForm.value = !showForm.value;
+    if (showForm.value === false) {
+        emits('onClose');
+    }
+}
+
 function close(category?: string): void {
     showForm.value = false;
     emits('onClose', category);
@@ -129,7 +160,19 @@ const emits = defineEmits<{
 
 defineExpose({
     show,
-    close
+    close,
+    toggle
 })
 
-</script>
+</script>
+
+<style scoped>
+.commandItem {
+    border: gray 1px solid;
+    border-radius: 0.5em;
+    overflow: hidden;
+    cursor: pointer;
+    padding: 0.1em;
+    margin: 0;
+}
+</style>