[#991][3.0] Window 초기 스타일 설정 로직 수정 (#992)

Co-authored-by: mjchoi <mjchoi@ex-em.com>
ex-em · Dec 29, 2021 · a9d5c8c · a9d5c8c
1 parent 9279e9a
commit a9d5c8c
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 221 deletions.
diff --git a/docs/views/window/api/window.md b/docs/views/window/api/window.md
@@ -46,11 +46,12 @@
 ### Event
 
 | 이름 | 파라미터 | 설명 |
-| ---- | ------- | ---- |
+| --- | --- | --- |
 | mousedown | clickedInfo | 드래그 및 리사이즈를 위한 mousedown 이벤트 감지 |
-| mousedown-mouseup | MouseEvent 객체 | 드래그 및 리사이즈를 위한 mouseup 이벤트 감지 |
+| mousedown-mouseup | MouseEvent 객체 | 드래그 및 리사이즈를 위한 mouseup 이벤트 감지   |
 | mousedown-mousemove | MouseEvent 객체 | 드래그 및 리사이즈를 위한 mousemove 이벤트 감지 |
 | resize | MouseEvent 객체, positionInfo | 리사이즈를 위한 mousemove 이벤트 감지 |
+| expand | 최대화 이전 스타일 window 정보 | 최대화 버튼 클릭 시 click 이벤트 감지 |
 
 ##### clickedInfo
 ```

diff --git a/docs/views/window/example/Default.vue b/docs/views/window/example/Default.vue
@@ -3,9 +3,9 @@
     <p class="case-title">Common</p>
     <ev-window
       v-model:visible="isVisible1"
-      :title="'COMMON TITLE'"
+      title="WINDOW TITLE"
     >
-      <div>COMMON CONTENTS</div>
+      <div>visible prop을 통해 윈도우를 여닫을 수 있습니다.</div>
     </ev-window>
     <div class="description">
       <button
@@ -20,51 +20,50 @@
     <p class="case-title">Nested</p>
     <ev-window
       v-model:visible="isVisible2"
-      :title="'CUSTOM TITLE'"
-      :icon-class="'ev-icon-binder'"
+      title="WINDOW TITLE"
+      icon-class="ev-icon-binder"
       fullscreen
     >
-      <div>CUSTOM CONTENTS</div>
-      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-      <template #footer>
-        <div>FOOTER</div>
+      <template #header>
+        <p class="nested-btn">
+          #header slot을 활용하여 상단 타이틀 영역을 변경할 수 있습니다.
+          <span class="header-right-icon">
+            <i class="ev-icon-moon" />
+            <i class="ev-icon-shard" />
+          </span>
+        </p>
       </template>
+      <div>
+        window를 중첩하여 사용할 수 있습니다.<br/>
+        하단 버튼을 통해 중첩 window를 열어보세요!
+      </div>
+      <span class="height-box"/>
       <button
         class="nested-btn"
         @click="clickButton3"
       >
         click to nested window!
       </button>
-      <ev-window
-        v-model:visible="isVisible3"
-        :title="'NESTED TITLE'"
-        :icon-class="'ev-icon-info2'"
-        :width="'40%'"
-        :height="'60%'"
-      >
-        <template #header>
-          <div>
-            NESTED TITLE >
-          </div>
-          <div class="header-right-title">
-            CUSTOM TITLE
-          </div>
-          <span class="header-right-icon">
-            <i class="ev-icon-calendar" />
-            <i class="ev-icon-shard" />
-          </span>
-        </template>
-        <div>
-          NESTED CONTENTS
-        </div>
-        <template #footer>
-          <div>NESTED FOOTER</div>
-        </template>
-      </ev-window>
-      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-      <div>CUSTOM CONTENTS</div>
+      <span class="height-box" />
+      <div>default slot의 길이가 길어질 경우 window 중앙에 스크롤이 생깁니다.</div>
+      <span class="height-box" />
+      <template #footer>
+        <div>#footer slot을 활용하여 하단 콘텐츠를 넣을 수 있습니다.</div>
+      </template>
+    </ev-window>
+    <ev-window
+      v-model:visible="isVisible3"
+      title="[NESTED] WINDOW TITLE"
+      icon-class="ev-icon-pig"
+      width="40%"
+      height="60%"
+    >
+      <div>
+        NESTED CONTENTS
+      </div>
+      <template #footer>
+        <div>NESTED FOOTER</div>
+      </template>
     </ev-window>
     <div class="description">
       <button
@@ -79,10 +78,10 @@
     <p class="case-title">Hide Dim Layer (Modeless)</p>
     <ev-window
       v-model:visible="isVisible4"
-      :title="'COMMON TITLE'"
+      title="WINDOW TITLE"
       :is-modal="false"
     >
-      <div>COMMON CONTENTS</div>
+      <div>is-modal prop을 활용하여 window 아래 modal 레이어를 지울 수 있습니다.</div>
     </ev-window>
     <div class="description">
       <button
@@ -97,10 +96,10 @@
     <p class="case-title">Block Hide Scroll</p>
     <ev-window
       v-model:visible="isVisible5"
-      :title="'COMMON TITLE'"
+      title="WINDOW TITLE"
       :hide-scroll="false"
     >
-      <div>HIDE BODY SCROLL WITH CONTENTS</div>
+      <div>hide-scroll prop을 활용하여 body의 스크롤을 보이게 할 수 있습니다.</div>
     </ev-window>
     <div class="description">
       <button
@@ -112,65 +111,65 @@
     </div>
   </div>
   <div class="case">
-    <p class="case-title">Draggable</p>
+    <p class="case-title">Draggable / Resizable / Maximizable</p>
     <ev-window
       v-model:visible="isVisible6"
-      :title="'DRAGGABLE WINDOW'"
+      title="첫번째 WINDOW"
       draggable
+      resizable
+      maximizable
       @mousedown="mousedown"
       @mousedown-mouseup="mouseup"
       @mousedown-mousemove="mousemove"
+      @resize="resize"
     >
-      <div>COMMON CONTENTS</div>
-    </ev-window>
-    <div class="description">
+      <div>
+        Draggable & Resizable & Maximizable 기능을 사용할 수 있습니다.
+      </div>
+      <span class="height-box" />
       <button
-        class="btn"
-        @click="clickButton6"
+        class="nested-btn"
+        @click="clickButton7"
       >
-        click to open window!
+        click to open nested window!
       </button>
-    </div>
-  </div>
-  <div class="case">
-    <p class="case-title">Resizable</p>
+    </ev-window>
     <ev-window
       v-model:visible="isVisible7"
-      :title="'RESIZABLE WINDOW'"
+      title="[NESTED] 두번째 WINDOW"
       width="80vw"
       height="30vh"
       min-width="50vw"
       min-height="30vh"
+      draggable
       resizable
-      @mousedown="mousedown"
-      @mousedown-mouseup="mouseup"
-      @mousedown-mousemove="mousemove"
-      @resize="resize"
+      maximizable
     >
-      <div>COMMON CONTENTS</div>
-    </ev-window>
-    <div class="description">
       <button
-        class="btn"
-        @click="clickButton7"
+        class="nested-btn"
+        @click="clickButton8"
       >
-        click to open window!
+        click to open nested window!
       </button>
-    </div>
-  </div>
-  <div class="case">
-    <p class="case-title">Maximizable</p>
+    </ev-window>
     <ev-window
       v-model:visible="isVisible8"
-      :title="'MAXIMIZABLE WINDOW'"
+      title="[NESTED] 세번째 WINDOW"
+      :is-modal="false"
+      :hide-scroll="false"
+      width="30vw"
+      height="40vh"
+      draggable
+      resizable
       maximizable
     >
-      <div>COMMON CONTENTS</div>
+      <div>WINDOW CONTENTS</div>
     </ev-window>
+
     <div class="description">
       <button
         class="btn"
-        @click="clickButton8"
+        @click="clickButton6"
       >
         click to open window!
       </button>
@@ -223,6 +222,12 @@ export default {
       isVisible8.value = true;
     };
 
+    // Test
+    const isVisible9 = ref(false);
+    const clickButton9 = () => {
+      isVisible9.value = true;
+    };
+
     const mousedown = clickedInfo => console.log('mousedown', clickedInfo);
     const mouseup = event => console.log('mousedown-mouseup', event);
     const mousemove = clickedInfo => console.log('mousedown-mousemove', clickedInfo);
@@ -245,6 +250,8 @@ export default {
       clickButton7,
       isVisible8,
       clickButton8,
+      isVisible9,
+      clickButton9,
       mousedown,
       mouseup,
       mousemove,
@@ -271,7 +278,11 @@ export default {
     background-color: $color-yellow;
   }
 }
-
+.height-box {
+  display: block;
+  height: 300px;
+  background-color: #F5F5F5;
+}
 .header-right-title {
   margin-left: 10px;
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.1.53",
+  "version": "3.1.54",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

diff --git a/src/components/window/Window.vue b/src/components/window/Window.vue
@@ -160,6 +160,7 @@ export default {
     'mousedown-mouseup',
     'mousedown-mousemove',
     'resize',
+    'expand',
   ],
   setup() {
     const {