feat: 기능 완성

hwe/ts/components/CommandSelectForm.vue

@@ -22,7 +22,17 @@
                     @click="close(commandItem.value)"
                 >
                     <div class="commandItem">
-                        <p class="center my-0">{{ commandItem.simpleName }}</p>
+                        <p :class="['center', 'my-0', commandItem.possible ? '' : 'commandImpossible']">
+                            {{ commandItem.simpleName }}
+                            <span
+                                class="compensatePositive"
+                                v-if="commandItem.compensation > 0"
+                            >▲</span>
+                            <span
+                                class="compensateNegative"
+                                v-else-if="commandItem.compensation < 0"
+                            >▼</span>
+                        </p>
                         <small class="center" :style="{ display: 'block' }">
                             {{
                                 commandItem.title.startsWith(commandItem.simpleName)
@@ -33,11 +43,11 @@
                     </div>
                 </div>
             </div>
-            <!--<div class="commandBottom row mt-1 mb-1">
+            <div v-if="!hideClose" class="commandBottom row mt-1 mb-1">
                 <div class="offset-8 col-4 d-grid">
                     <BButton @click="close()">닫기</BButton>
                 </div>
-            </div>-->
+            </div>
         </div>
     </teleport>
 </template>
@@ -86,6 +96,11 @@ const props = defineProps({
         type: String,
         required: false,
         default: '.commandSelectFormAnchor',
+    },
+    hideClose: {
+        type: Boolean,
+        required: false,
+        default: true,
     }
 })
 

hwe/ts/components/DragSelect.vue

@@ -1,12 +1,14 @@
 <template>
   <div
     ref="container"
-    style="
-      position: relative;
-      user-select: none;
-      overflow: hidden;
-      touch-action: none;
+    :style="{
+      position: 'relative',
+      userSelect: disabled ? undefined : 'none',
+      overflow: 'hidden',
+      touchAction: disabled ? undefined : 'none',
+    }
     "
+    :class="{ disabledDrag: disabled }"
   >
     <slot :selected="intersected" />
   </div>
@@ -58,6 +60,11 @@ export default defineComponent({
       required: false,
       default: () => ref(new Set()),
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
   },
   emits: ["update:modelValue", "dragDone", "dragStart"],
   setup(props, { emit }) {
@@ -138,6 +145,9 @@ export default defineComponent({
 
       let isMine = false;
       function startDrag(e: MouseEvent | Touch) {
+        if (props.disabled) {
+          return;
+        }
         containerRect = uContainer.getBoundingClientRect();
         children = uContainer.children;
         start = getCoords(e);
@@ -152,6 +162,9 @@ export default defineComponent({
         emit("dragStart");
       }
       function drag(e: MouseEvent | Touch) {
+        if (props.disabled) {
+          return;
+        }
         end = getCoords(e);
         const dimensions = getDimensions(start, end);
         if (end.x < start.x) {
@@ -165,6 +178,9 @@ export default defineComponent({
         intersection();
       }
       function endDrag() {
+        if (props.disabled) {
+          return;
+        }
         start = { x: 0, y: 0 };
         end = { x: 0, y: 0 };
         box.style.width = "0";
@@ -172,16 +188,34 @@ export default defineComponent({
         document.removeEventListener("mousemove", drag);
         document.removeEventListener("touchmove", touchMove);
         box.remove();
-        if(isMine){
-            emit("dragDone", intersected.value);
+        if (isMine) {
+          emit("dragDone", intersected.value);
         }
         isMine = false;
       }
 
-      uContainer.addEventListener("mousedown", startDrag);
-      uContainer.addEventListener("touchstart", touchStart);
-      document.addEventListener("mouseup", endDrag);
-      document.addEventListener("touchend", endDrag);
+      watch(() => props.disabled, disabledNext => {
+        if (disabledNext) {
+          uContainer.removeEventListener("mousedown", startDrag);
+          uContainer.removeEventListener("touchstart", touchStart);
+          document.removeEventListener("mouseup", endDrag);
+          document.removeEventListener("touchend", endDrag);
+        }
+        else {
+          uContainer.addEventListener("mousedown", startDrag);
+          uContainer.addEventListener("touchstart", touchStart);
+          document.addEventListener("mouseup", endDrag);
+          document.addEventListener("touchend", endDrag);
+        }
+      });
+
+      if (!props.disabled) {
+        uContainer.addEventListener("mousedown", startDrag);
+        uContainer.addEventListener("touchstart", touchStart);
+        document.addEventListener("mouseup", endDrag);
+        document.addEventListener("touchend", endDrag);
+      }
+
 
       onBeforeUnmount(() => {
         uContainer.removeEventListener("mousedown", startDrag);