From 9decec300f7d4b095b23c6b3a6f2ad3a15b8e929 Mon Sep 17 00:00:00 2001
From: kimdoeun <kdeun1@ex-em.com>
Date: Mon, 15 Mar 2021 19:16:08 +0900
Subject: [PATCH] =?UTF-8?q?[#778][3.0]=20Window=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=AA=A8=EB=8B=AC=20=EC=8A=A4=ED=8E=99=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20################=20-=20Window=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20modal,=20modeless=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?-=20hideScroll=20=EA=B8=B0=EB=8A=A5=EC=9D=84=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(body=EC=97=90=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EC=9C=A0=EC=A7=80/=EC=88=A8=EA=B9=80=20=EB=AA=A8=EB=93=88=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5)=20-=20hideScroll:=20false=EA=B0=80=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=EA=B0=92=EC=9D=B4=EA=B3=A0=20body?=
 =?UTF-8?q?=EC=97=90=20scroll=20=EC=8B=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8?=
 =?UTF-8?q?=EB=A5=BC=20prevent=ED=95=98=EC=97=AC=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EC=8B=9C=20=EB=AA=A8=EB=8B=AC=20=EB=82=B4=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=A7=81=EB=A7=8C=20=EA=B0=80?=
 =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/views/window/api/window.md       |   2 +-
 docs/views/window/example/Default.vue |  29 ++++++-
 package-lock.json                     | 118 ++++++++++++++++++--------
 src/components/window/Window.vue      |  62 ++++++++++----
 4 files changed, 157 insertions(+), 54 deletions(-)

diff --git a/docs/views/window/api/window.md b/docs/views/window/api/window.md
index 8ae82843f..c00732ceb 100644
--- a/docs/views/window/api/window.md
+++ b/docs/views/window/api/window.md
@@ -32,5 +32,5 @@
 | icon-class | String | '' | <윈도우> 내부 헤더의 아이콘 | |
 | width | String | '' | <윈도우> 너비 | 
 | height | String | '' | <윈도우> 높이 | 
-| show-modal-layer | Boolean | true | 모달창 하단의 dim layer 출력 여부 | true, false |
+| is-modal | Boolean | true | 모달창 여부. 즉, dim layer 출력 여부(modal vs. modeless) | true, false |
 | close-on-click-modal | Boolean | false | 모달 레이어 클릭 시 메시지 창 닫기 여부 | true, false |
diff --git a/docs/views/window/example/Default.vue b/docs/views/window/example/Default.vue
index 3413b36e1..fd7ce7394 100644
--- a/docs/views/window/example/Default.vue
+++ b/docs/views/window/example/Default.vue
@@ -76,11 +76,11 @@
     </div>
   </div>
   <div class="case">
-    <p class="case-title">Hide Modal Layer</p>
+    <p class="case-title">Hide Dim Layer (Modeless)</p>
     <ev-window
       v-model:visible="isVisible4"
       :title="'COMMON TITLE'"
-      :show-modal-layer="false"
+      :is-modal="false"
     >
       <div>COMMON CONTENTS</div>
     </ev-window>
@@ -93,6 +93,24 @@
       </button>
     </div>
   </div>
+  <div class="case">
+    <p class="case-title">Hide Scroll</p>
+    <ev-window
+      v-model:visible="isVisible5"
+      :title="'COMMON TITLE'"
+      :hide-scroll="true"
+    >
+      <div>HIDE BODY SCROLL WITH CONTENTS</div>
+    </ev-window>
+    <div class="description">
+      <button
+        class="btn"
+        @click="clickButton5"
+      >
+        click to open window!
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -120,6 +138,11 @@ export default {
       isVisible4.value = true;
     };
 
+    const isVisible5 = ref(false);
+    const clickButton5 = () => {
+      isVisible5.value = true;
+    };
+
     return {
       isVisible1,
       clickButton1,
@@ -129,6 +152,8 @@ export default {
       clickButton3,
       isVisible4,
       clickButton4,
+      isVisible5,
+      clickButton5,
     };
   },
 };
diff --git a/package-lock.json b/package-lock.json
index e773d5c2a..18e4bad26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.1.0",
+  "version": "3.1.13",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2232,17 +2232,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -2285,18 +2274,6 @@
             "supports-color": "^7.0.0"
           }
         },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "ssri": {
           "version": "7.1.0",
           "resolved": "https://registry.npmjs.org/ssri/-/ssri-7.1.0.tgz",
@@ -2333,18 +2310,6 @@
             "webpack-sources": "^1.4.3"
           }
         },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.1.2",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
-          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
-        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -17592,6 +17557,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.1.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+      "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-resize-observer": {
       "version": "2.0.15",
       "resolved": "https://registry.npmjs.org/vue-resize-observer/-/vue-resize-observer-2.0.15.tgz",
diff --git a/src/components/window/Window.vue b/src/components/window/Window.vue
index 575dedf19..6fb709765 100644
--- a/src/components/window/Window.vue
+++ b/src/components/window/Window.vue
@@ -6,15 +6,13 @@
     >
       <div
         v-if="visible"
-        :class="[
-          'ev-window-wrapper',
-           { 'show-modal': showModalLayer },
-        ]"
+        class="ev-window-wrapper"
       >
         <div
-          v-if="showModalLayer"
+          v-if="isModal"
           class="ev-window-dim-layer"
           @click="closeWin('layer')"
+          @wheel.stop.prevent="() => {}"
         />
         <div
           :class="['ev-window', windowClass]"
@@ -42,7 +40,11 @@
               </p>
             </template>
           </div>
-          <div class="ev-window-content">
+          <div
+            ref="windowContent"
+            class="ev-window-content"
+            @wheel="onWheelContent"
+          >
             <slot />
           </div>
           <div
@@ -64,7 +66,7 @@
 </template>
 
 <script>
-import { computed, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 
 export default {
   name: 'EvWindow',
@@ -97,7 +99,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    showModalLayer: {
+    isModal: {
       type: Boolean,
       default: true,
     },
@@ -105,6 +107,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hideScroll: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
     'update:visible': [Boolean],
@@ -124,6 +130,8 @@ export default {
     };
     initWrapperDiv();
 
+    const windowContent = ref(null);
+
     const windowStyle = computed(() => {
       if (props.fullscreen) {
         return {
@@ -158,26 +166,49 @@ export default {
       emit('update:visible', false);
     };
 
-    const setScrollLock = (isLock) => {
-      if (isLock) {
-        if (props.showModalLayer) {
+    const changeBodyCls = (isVisibleModal) => {
+      if (isVisibleModal) {
+        if (props.hideScroll) {
           document.body.classList.add('ev-window-scroll-lock');
         }
       } else {
-        const windowCount = root?.getElementsByClassName('show-modal')?.length;
+        console.log(12321);
+        const windowCount = root?.getElementsByClassName('ev-window-wrapper')?.length;
         if (windowCount === 1) {
           document.body.classList.remove('ev-window-scroll-lock');
         }
       }
     };
 
-    watch(() => props.visible, (newVal) => {
-      setScrollLock(newVal);
-    });
+    const onWheelContent = (e) => {
+      const hasScroll = windowContent.value.scrollHeight > windowContent.value.clientHeight;
+      if (!hasScroll) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      const isMeetTop = windowContent.value.scrollTop === 0;
+      const isMeetBottom = (windowContent.value.scrollHeight - windowContent.value.clientHeight)
+        === windowContent.value.scrollTop;
+      const isUpward = e.deltaY < 0;
+      const isDownward = e.deltaY > 0;
+
+      if ((isMeetBottom && isDownward) || (isMeetTop && isUpward)) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
+    watch(
+      () => props.visible,
+      newVal => changeBodyCls(newVal),
+    );
 
     return {
+      windowContent,
       windowStyle,
       closeWin,
+      onWheelContent,
     };
   },
 };
@@ -188,6 +219,7 @@ export default {
 
 .ev-window-scroll-lock {
   overflow: hidden !important;
+  //padding-right: 15px;
 }
 .ev-window-dim-layer {
   position: fixed;