evui 2.0.8 → 2.1.1

package/src/components/window/window.vue

@@ -1,8 +1,7 @@
 <template>
-  <div
-    v-if="isExist"
-    v-show="isShow"
-    :id="windowId"
+  <section
+    v-if="isAttachToDom"
+    v-show="isShowFlag"
     :style="windowStyle"
     :class="windowCls"
     @mousedown="mousedown"
@@ -15,27 +14,46 @@
       :class="headerCls"
       @dblclick="headerDblClick"
     >
-      <div :class="`${prefixCls}-title-area`">{{ title }}</div>
-      <div :class="`${prefixCls}-expand-btn-line`"/>
+      <p :class="`${prefixCls}-title-area`">
+        {{ title }}
+      </p>
       <div
-        :class="`${prefixCls}-expand-btn`"
-        @click="clickExpandBtn"
-      />
-      <div :class="`${prefixCls}-close-btn-line`"/>
-      <div
-        :class="`${prefixCls}-close-btn`"
-        @click="clickCloseBtn"
-      />
+        :class="`${prefixCls}-btn-area`"
+      >
+        <span
+          v-if="maximizable"
+          :class="`${prefixCls}-btn`"
+          class="expand"
+          @click="clickExpandBtn"
+        >
+          <ev-icon
+            v-if="!isFullExpandWindow"
+            :cls="'ei-expand2'"
+          />
+          <ev-icon
+            v-else
+            :cls="'ei-compress2'"
+          />
+        </span>
+        <span
+          v-if="closable"
+          :class="`${prefixCls}-btn`"
+          class="close"
+          @click="clickCloseBtn"
+        >
+          <ev-icon
+            :cls="'ei-close2'"
+          />
+        </span>
+      </div>
     </div>
     <div :class="`${prefixCls}-body-area`">
-      <slot/>
+      <slot />
     </div>
-  </div>
+  </section>
 </template>
 
 <script>
-  import '@/styles/evui.css';
-
   export default {
     props: {
       width: {
@@ -58,6 +76,26 @@
         type: String,
         default: '',
       },
+      maximizable: {
+        type: Boolean,
+        default: true,
+      },
+      resizable: {
+        type: Boolean,
+        default: true,
+      },
+      closable: {
+        type: Boolean,
+        default: true,
+      },
+      modal: {
+        type: Boolean,
+        default: false,
+      },
+      isShow: {
+        type: Boolean,
+        default: true,
+      },
       closeType: {
         type: String,
         default: 'hide',
@@ -66,23 +104,23 @@
           return list.indexOf(value) > -1;
         },
       },
-      resizable: {
-        type: Boolean,
-        default: true,
-      },
     },
     data() {
       return {
         prefixCls: 'ev-window',
-        windowId: '',
-        windowStyle: {},
+        modelEl: null,
+        isMovedEl: false,
+        isAttachToDom: true,
+        isShowFlag: true,
+        isFullExpandWindow: false,
+        vIf: true,
+        vShow: true,
+        windowStyle: null,
         windowCls: '',
         headerCls: '',
         headerStyle: '',
         headerHeight: 32,
         grabbingBorderSize: 5,
-        isExist: true,
-        isShow: true,
         grabbingBorderPosInfo: {
           top: false,
           right: false,
@@ -101,17 +139,51 @@
         },
       };
     },
+    watch: {
+      isShow: {
+        immediate: true,
+        handler(value) {
+          this.isAttachToDom = this.closeType === 'hide' || value;
+          this.isShowFlag = value;
+
+          if (!this.windowStyle && value) {
+            this.$nextTick(() => {
+              this.syncIsShow();
+            });
+          } else {
+            this.syncIsShow();
+          }
+        },
+      },
+    },
     created() {
-      this.windowId = `window_${this._uid}`;
       this.headerStyle = `height: ${this.headerHeight}px`;
       this.headerCls = { [`${this.prefixCls}-header-area`]: true };
       this.windowCls = { [this.prefixCls]: true };
     },
     mounted() {
-      this.windowStyle = this.getWindowStyle();
+      const body = document.body;
+      if (!this.isMovedEl) {
+        this.isMovedEl = true;
+
+        if (this.modal) {
+          this.modelEl = document.createElement('div');
+          this.modelEl.classList.add(`${this.prefixCls}-modal`);
+          this.modelEl.appendChild(this.$el);
+          body.appendChild(this.modelEl);
+        } else {
+          body.appendChild(this.$el);
+        }
+      }
     },
-    beforeDestroy() {
-      this.isShow = false;
+    destroyed() {
+      if (this.isMovedEl) {
+        if (this.modal) {
+          this.modelEl.remove();
+        } else {
+          this.$el.remove();
+        }
+      }
     },
     methods: {
       mousedown(e) {
@@ -238,6 +310,28 @@
 
         this.isFullExpandWindow = !this.isFullExpandWindow;
       },
+      clickCloseBtn() {
+        this.$emit('before-close', this);
+        this.close();
+      },
+      close() {
+        if (this.closeType === 'destroy') {
+          this.isAttachToDom = false;
+        } else {
+          this.isShowFlag = false;
+        }
+        this.isFullExpandWindow = false;
+        this.$emit('update:is-show', false);
+      },
+      show() {
+        if (this.closeType === 'destroy') {
+          this.isAttachToDom = true;
+        } else {
+          this.isShowFlag = true;
+        }
+
+        this.$emit('update:is-show', true);
+      },
       resize(e) {
         const isTop = this.grabbingBorderPosInfo.top;
         const isLeft = this.grabbingBorderPosInfo.left;
@@ -321,27 +415,6 @@
           this.$el.style.cursor = 'default';
         }
       },
-      isInHeader(x, y) {
-        if (x == null || y == null) {
-          return false;
-        }
-
-        const rect = this.$el.getBoundingClientRect();
-        const posX = +x - rect.left;
-        const posY = +y - rect.top;
-        const headerAreaStyleInfo = this.$refs.headerArea.style;
-        const headerPaddingInfo = {
-          top: this.removePixel(headerAreaStyleInfo.paddingTop),
-          left: this.removePixel(headerAreaStyleInfo.paddingLeft),
-          right: this.removePixel(headerAreaStyleInfo.paddingRight),
-        };
-        const startPosX = headerPaddingInfo.left;
-        const endPosX = rect.width - headerPaddingInfo.right;
-        const startPosY = headerPaddingInfo.top;
-        const endPosY = startPosY + this.headerHeight;
-
-        return posX > startPosX && posX < endPosX && posY > startPosY && posY < endPosY;
-      },
       setCssText(paramObj) {
         if (paramObj === null || typeof paramObj !== 'object') {
           return;
@@ -399,6 +472,9 @@
           headerHeight = this.headerHeight;
         }
 
+        width = Math.max(width, minWidth);
+        height = Math.max(height, minHeight);
+
         windowEl.style.cssText = `
           top: ${this.numberToPixel(top)};
           left: ${this.numberToPixel(left)};
@@ -409,11 +485,10 @@
           padding-top: ${this.numberToPixel(headerHeight)}`;
       },
       getWindowStyle() {
-        const clientRect = this.$el.getBoundingClientRect();
-        const bodyWidth = document.body.clientWidth;
-        const bodyHeight = document.body.clientHeight;
-        const top = (bodyHeight / 2) - (this.height / 2) - clientRect.top;
-        const left = (bodyWidth / 2) - (this.width / 2) - clientRect.left;
+        const bodyWidth = window.innerWidth;
+        const bodyHeight = window.innerHeight;
+        const top = (bodyHeight / 2) - (this.height / 2);
+        const left = (bodyWidth / 2) - (this.width / 2);
 
         return {
           top: this.numberToPixel(top),
@@ -459,148 +534,128 @@
 
         return result || 0;
       },
-      show() {
-        this.isShow = true;
-      },
-      hide() {
-        this.isShow = false;
+      isInHeader(x, y) {
+        if (x == null || y == null) {
+          return false;
+        }
+
+        const rect = this.$el.getBoundingClientRect();
+        const posX = +x - rect.left;
+        const posY = +y - rect.top;
+        const headerAreaStyleInfo = this.$refs.headerArea.style;
+        const headerPaddingInfo = {
+          top: this.removePixel(headerAreaStyleInfo.paddingTop),
+          left: this.removePixel(headerAreaStyleInfo.paddingLeft),
+          right: this.removePixel(headerAreaStyleInfo.paddingRight),
+        };
+        const startPosX = headerPaddingInfo.left;
+        const endPosX = rect.width - headerPaddingInfo.right;
+        const startPosY = headerPaddingInfo.top;
+        const endPosY = startPosY + this.headerHeight;
+
+        return posX > startPosX && posX < endPosX && posY > startPosY && posY < endPosY;
       },
-      clickCloseBtn() {
-        this.$emit('before-close', this);
+      syncIsShow() {
+        if (this.modal && this.modelEl) {
+          const displayBlockCls = `${this.prefixCls}-display-block`;
 
-        if (this.closeType === 'hide') {
-          this.hide();
-        } else {
-          this.isExist = false;
+          if (this.isShowFlag) {
+            this.modelEl.classList.add(displayBlockCls);
+          } else {
+            this.modelEl.classList.remove(displayBlockCls);
+          }
         }
+
+        this.windowStyle = this.getWindowStyle();
       },
     },
   };
 </script>
 
-<style>
+<style lang="scss">
+  @import '~@/styles/default';
+
   .ev-window {
     position: absolute;
-    border: 9px solid #424242;
-    border-radius: 8px;
-    background: #424242;
-    overflow: visible;
-    z-index: 8888;
-  }
-  .gray .ev-window {
-    border: 9px solid #595C64;
-    background: #212227;
-  }
-  .ev-window-header-area {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    border-bottom: 1px solid #B6B6B6;
-    background: #ffffff;
-    font-family: 'NanumGothic', sans-serif;
-    align-items: center;
+    border-radius: $border-radius-base;
+    overflow: hidden;
+    z-index: 700;
     user-select: none;
+
+    @include evThemify() {
+      background-color: evThemed('window-bg');
+      border: $border-solid evThemed('window-border');
+      color: evThemed('window-btn');
+    }
+
+    &-header-area {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      width: 100%;
+      padding: 7px 10px;
+      justify-content: space-between;
+    }
+
+    &-title-area {
+      left: 15px;
+      line-height: 26px;
+      font-size: $font-size-large;
+
+      @include evThemify() {
+        color: evThemed('window-btn');
+      }
+    }
+
+    &-btn-area {
+      display: inline-flex;
+
+      .ev-window-btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 20px;
+        height: 20px;
+        margin-left: 4px;
+        cursor: pointer;
+        font-size: $font-size-medium;
+        border-radius: $border-radius-base;
+
+        @include evThemify() {
+          color: evThemed('window-btn');
+          background-color: evThemed('window-btn-bg');
+        }
+      }
+    }
+
+    &-body-area {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      padding: 13px 10px 10px;
+      overflow: auto;
+
+      @include evThemify() {
+        color: evThemed('window-btn');
+      }
+    }
   }
-  .gray .ev-window-header-area {
-    border-bottom: 1px solid #464850;
-    background: #27282E;
-    color: #ABAEB5;
-  }
-  .ev-window-title-area {
-    display: inline-block;
-    padding: 6px 0 0 12px;
-    font-size: 16px;
-  }
-  .ev-window-header-pa {
-    border-color: #474a53;
-    background-color: #212227;
-    color: #ABAEB5;
-  }
-  .ev-window-expand-btn-line{
-    position: absolute;
-    top: 0;
-    right: 66px;
-    height: 32px;
-    border-left: 1px solid #B6B6B6;
-  }
-  .gray .ev-window-expand-btn-line {
-    border-left: 1px solid #464850;
-  }
-  .ev-window-expand-btn {
-    position: absolute;
-    top: 6px;
-    right: 40px;
-    width: 19px;
-    height: 19px;
-    line-height: 19px;
-    border-radius: 50%;
-    color: white;
-    text-align: center;
-    background: #B6B6B6;
-    font-size: 13px;
-    font-weight: bold;
-  }
-  .gray .ev-window-expand-btn {
-    color: #c7c8cc;
-    background: #595c64;
-  }
-  .ev-window-expand-btn:before {
-    top: -1px;
-    right: 1px;
-    font-size: 18px;
-    content: 'ㅁ';
-  }
-  .ev-window-expand-btn:hover {
-    background: #319de9;
-    cursor: pointer;
-  }
-  .ev-window-close-btn-line {
-    position: absolute;
-    top: 0;
-    right: 32px;
-    height: 32px;
-    border-left: 1px solid #B6B6B6;
-  }
-  .gray .ev-window-close-btn-line {
-    border-left: 1px solid #464850;
-  }
-  .ev-window-close-btn {
-    position: absolute;
-    top: 6px;
-    right: 7px;
-    width: 19px;
-    height: 19px;
-    line-height: 19px;
-    border-radius: 50%;
-    color: white;
-    text-align: center;
-    background: #B6B6B6;
-    font-size: 13px;
-    font-weight: bold;
-  }
-  .gray .ev-window-close-btn {
-    color: #c7c8cc;
-    background: #595c64;
-  }
-  .ev-window-close-btn:before{
+  .ev-window-modal {
+    display: none;
+    position: fixed;
     top: 0;
-    right: 6px;
-    font-size: 11px;
-    content: 'X';
-  }
-  .ev-window-close-btn:hover{
-    background: #319de9;
-    cursor: pointer;
-  }
-  .ev-window-body-area{
-    position: relative;
+    left: 0;
     width: 100%;
     height: 100%;
-    padding: 9px 8px 8px 8px;
-    background: white;
-    overflow: auto;
+    padding-top: 100px;
+    overflow: hidden;
+    background-color: rgba(0,0,0,0.6);
+    text-align: center;
+    z-index: 720;
+    user-select: none;
   }
-  .gray .ev-window-body-area{
-    background: transparent;
+  .ev-window-display-block {
+    display: block !important;
   }
 </style>

package/src/index.js

@@ -2,53 +2,66 @@ import EvButton from './components/button';
 import EvChart from './components/chart';
 import EvCheckbox from './components/checkbox';
 import EvCheckboxGroup from './components/checkbox-group';
+import EvContextMenu from './components/contextmenu';
 import EvIcon from './components/icon';
 import EvInput from './components/input';
 import EvTextField from './components/textfield';
+import EvLoginField from './components/loginfield';
 import EvLoadingMask from './components/loadingmask';
-import {
-  NavMenu as EvNavMenu,
-  ContextMenu as EvContextMenu,
-  ContextMenuChildren as EvContextMenuChildren,
-} from './components/menu';
+import EvNavMenu from './components/menu';
 import EvRadio from './components/radio';
 import EvRadioGroup from './components/radio-group';
 import EvSelectbox from './components/selectbox';
 import EvSlider from './components/slider';
 import EvTable from './components/table';
-import EvTimePicker from './components/timepicker';
+import EvTimepicker from './components/timepicker';
 import EvToggle from './components/toggle';
 import EvLabel from './components/label';
-import EvDatepicker from './components/datepicker';
+import { Calendar as EvCalendar, Datepicker as EvDatepicker } from './components/datepicker';
 import EvWindow from './components/window';
 import { tabs as EvTabs, tab as EvTabPanel } from './components/tabs';
-import { TreeTable as EvTreeTable } from './components/tree';
+import { TreeTable as EvTreeTable } from './components/tree-table';
+import EvTree from './components/tree';
+import EvSplitter from './components/splitter';
+import EvMarkdown from './components/markdown';
+import EvGrid from './components/grid/grid';
+import EvMessage from './components/message/index';
+import EvNotification from './components/notification/index';
+import EvMessageBox from './components/message-box/index';
 
 const components = {
   EvButton,
   EvChart,
   EvCheckbox,
   EvCheckboxGroup,
+  EvContextMenu,
   EvIcon,
   EvInput,
   EvTextField,
+  EvLoginField,
   EvLoadingMask,
   EvNavMenu,
-  EvContextMenu,
-  EvContextMenuChildren,
   EvRadio,
   EvRadioGroup,
   EvSelectbox,
   EvSlider,
   EvTable,
-  EvTimePicker,
+  EvTimepicker,
   EvToggle,
   EvLabel,
   EvWindow,
+  EvCalendar,
   EvDatepicker,
   EvTabs,
   EvTabPanel,
   EvTreeTable,
+  EvTree,
+  EvSplitter,
+  EvMarkdown,
+  EvGrid,
+  EvMessage,
+  EvNotification,
+  EvMessageBox,
 };
 
 const evui = {
@@ -61,6 +74,10 @@ const install = function (Vue) {
   Object.keys(evui).forEach((key) => {
     Vue.component(key, evui[key]);
   });
+
+  Vue.prototype.$message = EvMessage;
+  Vue.prototype.$messagebox = EvMessageBox;
+  Vue.prototype.$notify = EvNotification;
 };
 
 // auto install
@@ -74,5 +91,5 @@ const API = {
   ...components,
 };
 
-module.exports.default = module.exports = API; // eslint-disable-line no-undef
+export default API;
 

package/src/styles/base/base.scss

@@ -0,0 +1,50 @@
+$file-path : '~@/webfonts/';
+
+@font-face {
+  font-family: 'NanumGothic';
+  src: url($file-path + 'NanumGothic.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url($file-path + 'Roboto-Bold.ttf') format('trutype');
+  font-weight: 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url($file-path + 'Roboto-Medium.ttf') format('trutype');
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url($file-path + 'Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+}
+@font-face {
+  font-family: 'RobotoBold';
+  src: url($file-path + 'Roboto-Bold.ttf') format('trutype');
+  font-weight: 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'RobotoMedium';
+  src: url($file-path + 'Roboto-Medium.ttf') format('trutype');
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'RobotoRegular';
+  src: url($file-path + 'Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}

package/src/styles/base/index.scss

@@ -0,0 +1 @@
+@import 'base';

package/src/styles/default.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@import 'base/index';
+@import 'utils/index';
+@import 'themes/index';