[#692][3.0] Message 컴포넌트

#########
- Message 2.0 버전 마이그레이션 및 기능 개선
- 기타 스타일 및 불필요 코드 수정

docs/router/index.js

@@ -12,6 +12,7 @@ import sliderProps from 'docs/views/slider/props';
 import iconProps from 'docs/views/icon/props';
 import datePickerProps from 'docs/views/datePicker/props';
 import calendarProps from 'docs/views/calendar/props';
+import messageProps from 'docs/views/message/props';
 
 const routes = [
   {
@@ -140,6 +141,12 @@ const routes = [
     component: PageView,
     props: iconProps,
   },
+  {
+    path: '/message',
+    name: 'Message',
+    component: PageView,
+    props: messageProps,
+  },
   {
     path: '/:catchAll(.*)',
     name: 'PageNotFound',

docs/views/message/api/message.md

@@ -0,0 +1,51 @@
+### Desc
+`app.config.globalProperties`에 등록되어 있어, 각 컴포넌트에서 아래처럼 사용 가능 
+```vue
+<template>
+    <ev-button
+      @click="showMsg"
+    >
+      Show HTML
+    </ev-button>
+</template>
+<script>
+  import { getCurrentInstance } from 'vue';
+
+  export default {
+    setup() {
+      const { ctx } = getCurrentInstance();
+      const showMsg = () => {
+        ctx.$message({
+          message: 'message',
+          // options
+        });
+      };
+      return {
+        showMsg,
+      };
+    },
+  }
+</script>
+```
+```js
+// 메시지만 입력 시,
+ctx.$message('message');
+
+// 옵션과 사용 시,
+ctx.$message({
+  message: 'message',
+  // options
+});
+```
+
+### Props
+
+| 이름 | 디폴트 | 타입 | 설명 | 종류 |
+| --- | ---- | ----- | ---- | --- |
+| type | 'info' | String | 메시지 스타일 | 'info', 'success', 'warning', 'error' |
+| message | '' | String | 메시지 창에 띄울 문구 | |
+| duration | 3000 | Number | 메시지 창 유지 시간 | |
+| showClose | false | Boolean | 닫기 버튼 노출 여부 | true, false |
+| iconClass | '' | String | 메시지 창 좌측에 띄울 EVUI 아이콘 명 | |
+| onClose | null | Function | 메시지 창이 닫힌 후 동작 | |
+| useHTML | false | Boolean | 메시지 창 문구에 HTML 사용 여부. 사용 시 message 속성에 함께 작성 | |

docs/views/message/example/Default.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="case">
+    <p class="case-title">Common</p>
+    <ev-button
+      type="info"
+      @click="showInfo"
+    >
+      Show Info
+    </ev-button>
+    <ev-button
+      type="primary"
+      @click="showSuccess"
+    >
+      Show Success
+    </ev-button>
+    <ev-button
+      type="warning"
+      @click="showWarning"
+    >
+      Show Warning
+    </ev-button>
+    <ev-button
+      type="error"
+      @click="showError"
+    >
+      Show Error
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">With Close Button</p>
+    <ev-button
+      @click="showClose"
+    >
+      Show Close
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">Custom Duration</p>
+    <ev-button
+      @click="showDuration"
+    >
+      Show Duration
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">Icon</p>
+    <ev-button
+      @click="showIcon"
+    >
+      Show Icon
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">After Closing</p>
+    <ev-button
+      @click="showOnClose"
+    >
+      Show onClose
+    </ev-button>
+    <div class="description">
+      <span class="badge">
+        After close behavior
+      </span>
+      {{ onCloseMsg }}
+    </div>
+  </div>
+  <div class="case">
+    <p class="case-title">HTML</p>
+    <ev-button
+      @click="showHTML"
+    >
+      Show HTML
+    </ev-button>
+  </div>
+</template>
+
+<script>
+import { ref, getCurrentInstance } from 'vue';
+
+export default {
+  setup() {
+    const { ctx } = getCurrentInstance();
+    const showInfo = () => {
+      ctx.$message('Infomation. This is an Info type message.');
+    };
+    const showSuccess = () => {
+      ctx.$message({
+        message: 'Success! This is an Success type message.',
+        type: 'success',
+      });
+    };
+    const showWarning = () => {
+      ctx.$message({
+        message: 'Warning. This is an Warning type message.',
+        type: 'warning',
+      });
+    };
+    const showError = () => {
+      ctx.$message({
+        message: 'Error. This is an Error type message.',
+        type: 'error',
+      });
+    };
+    const showClose = () => {
+      ctx.$message({
+        message: 'You can choose to close properties',
+        showClose: true,
+      });
+    };
+    const showDuration = () => {
+      ctx.$message({
+        message: 'You can change the duration.',
+        duration: 1500,
+      });
+    };
+    const showIcon = () => {
+      ctx.$message({
+        message: 'You can add an icon.',
+        iconClass: 'ev-icon-getmore',
+      });
+    };
+    const onCloseMsg = ref();
+    const showOnClose = () => {
+      ctx.$message({
+        message: 'You can set the behavior after closing.',
+        showClose: true,
+        onClose: () => {
+          onCloseMsg.value = 'You can set the behavior after closing!';
+        },
+      });
+    };
+    const showHTML = () => {
+      ctx.$message({
+        message: 'You <i>can enter</i> your message in <strong>html</strong>.',
+        useHTML: true,
+      });
+    };
+    return {
+      showInfo,
+      showSuccess,
+      showWarning,
+      showError,
+      showClose,
+      showDuration,
+      showIcon,
+      onCloseMsg,
+      showOnClose,
+      showHTML,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case .ev-button {
+  margin-right: 10px;
+}
+</style>

docs/views/message/props.js

@@ -0,0 +1,15 @@
+import { parseComponent } from 'vue-template-compiler';
+import mdText from '!!raw-loader!./api/message.md';
+import Default from './example/Default';
+import DefaultRaw from '!!raw-loader!./example/Default';
+
+export default {
+  mdText,
+  components: {
+    Default: {
+      description: '사용자 동작에 대한 알림을 표시할 수 있습니다. (버튼 클릭 시 메시지 창을 확인할 수 있습니다.)',
+      component: Default,
+      parsedData: parseComponent(DefaultRaw),
+    },
+  },
+};

src/components/button/Button.vue

@@ -66,7 +66,7 @@ export default {
   padding: 0 $default-padding;
   line-height: $default-height;
   font-size: $font-size-medium;
-  border-radius: $border-radius-button;
+  border-radius: $default-radius;
   cursor: pointer;
   outline: none;
   color: $color-white;
@@ -171,11 +171,11 @@ export default {
     border-left: 1px solid $color-white !important;
 
     &:first-child {
-      border-radius: $border-radius-button 0 0 $border-radius-button !important;
+      border-radius: $default-radius 0 0 $default-radius !important;
       border-left: 1px solid transparent !important;
     }
     &:last-child {
-      border-radius: 0 $border-radius-button $border-radius-button 0 !important;
+      border-radius: 0 $default-radius $default-radius 0 !important;
     }
   }
 }

src/components/checkbox/Checkbox.vue

@@ -167,14 +167,14 @@ export default {
       border-left: 0;
     }
     &:first-child {
-      border-radius: $border-radius-button 0 0 $border-radius-button;
+      border-radius: $default-radius 0 0 $default-radius;
 
       @include evThemify() {
         border-left: 1px solid evThemed('border-base');
       }
     }
     &:last-child {
-      border-radius: 0 $border-radius-button $border-radius-button 0;
+      border-radius: 0 $default-radius $default-radius 0;
     }
     &.checked {
       color: $color-white;

src/components/message/Message.js

@@ -0,0 +1,18 @@
+import { defineComponent, h, render } from 'vue';
+import MessageVue from './Message.vue';
+
+const MsgVue = defineComponent(MessageVue);
+
+const root = document.createElement('div');
+root.classList.add('ev-message-modal');
+document.body.appendChild(root);
+
+export default function message(options = {}) {
+  const msgOption = (typeof options === 'string') ? { message: options } : options;
+  const instance = h(
+    MsgVue,
+    msgOption,
+  );
+  const container = document.createElement('div');
+  render(instance, container);
+}