evui 2.1.0 → 2.1.1

package/src/components/message-box/message-box.vue

@@ -0,0 +1,298 @@
+<template>
+  <div
+    v-show="visible"
+    :aria-label="title || 'dialog'"
+    :class="['ev-message-box-wrap', fade]"
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="ev-message-box-modal" />
+    <div
+      :class="['ev-message-box', customClass]"
+    >
+      <div
+        class="ev-message-box-top"
+      >
+        <div class="ev-message-box-top-title">
+          <ev-icon
+            v-if="showHeaderIcon"
+            :cls="headerTypeIconInfo.cls"
+            :style="headerTypeIconInfo.style"
+          />
+          <span>{{ title }}</span>
+        </div>
+        <ev-icon
+          :cls="'ei-close'"
+          @click="handleAction('cancel')"
+          @keydown.enter="handleAction('cancel')"
+        />
+      </div>
+      <div class="ev-message-box-center">
+        <div class="ev-message-box-container">
+          <div
+            v-if="message !== ''"
+            class="ev-message-box-message"
+          >
+            <slot>
+              <p v-if="!useHTMLString">
+                {{ message }}
+              </p>
+              <p
+                v-else
+                v-html="message"
+              />
+            </slot>
+          </div>
+        </div>
+      </div>
+      <div
+        :class="['ev-message-box-bottom', bottomAlign]"
+      >
+        <ev-button
+          v-if="showCancelButton"
+          size="small"
+          @click.native="handleAction('cancel')"
+          @keydown.enter="handleAction('cancel')"
+        >
+          {{ cancelButtonText }}
+        </ev-button>
+        <ev-button
+          v-show="showOKButton"
+          ref="confirm"
+          :type="'primary'"
+          size="small"
+          @click.native="handleAction('ok')"
+          @keydown.enter="handleAction('ok')"
+        >
+          {{ okButtonText }}
+        </ev-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/babel">
+  // const typeMap = {
+  //   success: 'success',
+  //   info: 'info',
+  //   warning: 'warning',
+  //   error: 'error',
+  // };
+
+  export default {
+    data() {
+      return {
+        type: 'info',
+        visible: false,
+        title: '',
+        message: '',
+        iconClass: '',
+        customClass: '',
+        showOKButton: true,
+        showCancelButton: true,
+        buttonAlign: 'right',
+        action: '',
+        okButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        confirmButtonClass: '',
+        confirmButtonDisabled: false,
+        cancelButtonClass: '',
+        callback: null,
+        showHeaderIcon: true,
+        useHTMLString: false,
+        headerTypeIconInfo: {
+          cls: '',
+          style: '',
+        },
+      };
+    },
+    computed: {
+      bottomAlign() {
+        let result;
+        switch (this.buttonAlign) {
+          case 'left': result = 'ev-message-box-bottom-left'; break;
+          case 'center': result = 'ev-message-box-bottom-center'; break;
+          case 'right': result = 'ev-message-box-bottom-right'; break;
+          default: break;
+        }
+        return result;
+      },
+      fade() {
+        return this.visible ? 'ev-message-box-fade-enter-active' : 'ev-message-box-fade-leave-active';
+      },
+    },
+    watch: {
+      type: {
+        immediate: true,
+        handler(value) {
+          switch (value) {
+            case 'success':
+              this.headerTypeIconInfo = {
+                cls: '',
+                style: '',
+              };
+              break;
+            case 'info':
+              this.headerTypeIconInfo = {
+                cls: 'ei-info2',
+                style: 'color: #4169E1;',
+              };
+              break;
+            case 'warning':
+              this.headerTypeIconInfo = {
+                cls: 'ei-warning2',
+                style: 'color: #FE8A00;',
+              };
+              break;
+            case 'error':
+              this.headerTypeIconInfo = {
+                cls: 'ei-warning3',
+                style: 'color: #FF0000;',
+              };
+              break;
+            default:
+              break;
+          }
+        },
+      },
+      visible(val) {
+        if (val) {
+          setTimeout(() => {
+            if (this.$refs.confirm) {
+              this.$refs.confirm.$el.focus();
+            }
+          });
+        }
+      },
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+    },
+    methods: {
+      doClose() {
+        if (!this.visible) {
+          return;
+        }
+        this.visible = false;
+
+        if (this.onClosed) {
+          this.onClosed(this.action, this);
+        }
+      },
+      handleAction(action) {
+        this.action = action;
+        this.doClose();
+      },
+    },
+  };
+</script>
+<style lang="scss">
+  @import '~@/styles/default';
+
+  @keyframes ev-message-box-fade-in {
+    0% {
+      transform: translate3d(0, -20px, 0);
+      opacity: 0;
+    }
+    100% {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+  @keyframes ev-message-box-fade-out {
+    0% {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+    100% {
+      transform: translate3d(0, -20px, 0);
+      opacity: 0;
+    }
+  }
+
+  .ev-message-box-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+  }
+  .ev-message-box-modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000000;
+    opacity: 0.5;
+    z-index: -1;
+  }
+  .ev-message-box {
+    width: 420px;
+    padding: 10px;
+    background-color: #FFFFFF;
+    border-radius: 4px;
+    border: 1px solid #EBEEF5;
+    font-size: 18px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    text-align: left;
+    overflow: hidden;
+    backface-visibility: hidden;
+  }
+  .ev-message-box-fade-enter-active .ev-message-box {
+    animation: ev-message-box-fade-in .3s;
+  }
+  .ev-message-box-fade-leave-active .ev-message-box {
+    animation: ev-message-box-fade-out .3s;
+  }
+  .ev-message-box-top {
+    position: relative;
+    padding-right: 20px;
+  }
+  .ev-message-box-top-title {
+    font-size: 18px;
+    color: #303133;
+  }
+  ev-message-box-top-title .ei {
+    font-size: 16px;
+  }
+  .ev-message-box .ei-close {
+    position: absolute;
+    top: 5px;
+    right: 7px;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .ev-message-box .ei-close:hover {
+    transition: color $animate-fast;
+
+    @include evThemify() {
+      color: evThemed('color-primary');
+    }
+  }
+  .ev-message-box-center {
+    margin: 14px 0;
+    padding: 10px 0;
+  }
+  .ev-message-box-bottom {
+    display: flex;
+  }
+  .ev-message-box-bottom-left {
+    justify-content: flex-start;
+  }
+  .ev-message-box-bottom-right {
+    justify-content: flex-end;
+  }
+  .ev-message-box-bottom-center {
+    justify-content: center;
+  }
+  .ev-message-box-bottom button {
+    margin: 0 4px;
+  }
+</style>

package/src/components/notification/index.js

@@ -0,0 +1,3 @@
+import Notification from './notification';
+
+export default Notification;

package/src/components/notification/notification.js

@@ -0,0 +1,75 @@
+import Vue from 'vue';
+import NotiVue from './notification.vue';
+
+const NotiConstructor = Vue.extend(NotiVue);
+
+let seq = 1;
+const root = document.createElement('div');
+root.classList.add('ev-notification-root');
+document.body.appendChild(root);
+
+const notificationManager = {
+  items: {
+    'top-right': [],
+    'bottom-right': [],
+    'bottom-left': [],
+    'top-left': [],
+  },
+  increaseOffsetVal: 10,
+  getNextOffset(position) {
+    const list = this.items[position];
+    let result = 0;
+    if (!list) {
+      return result;
+    }
+    for (let ix = 0; ix < list.length - 1; ix++) {
+      result += (list[ix].height || 0) + this.increaseOffsetVal;
+    }
+    return result;
+  },
+  pushItem(item) {
+    if (!item.position || !this.items[item.position]) {
+      return;
+    }
+    this.items[item.position].push(item);
+  },
+  removeItem(notiList, id) {
+    const index = notiList.findIndex(v => id === v.id);
+    if (index !== -1) {
+      notiList.splice(index, 1);
+    }
+  },
+  onBeforeClosed(instance) {
+    const notiList = this.items[instance.position];
+    if (!notiList) {
+      return;
+    }
+    this.removeItem(notiList, instance.id);
+    let el;
+    const positionStyle = instance.position.split('-')[0];
+    for (let ix = 0; ix < notiList.length; ix++) {
+      el = notiList[ix].$el;
+      el.style[positionStyle] = `${parseInt(el.style[positionStyle], 10) - notiList[ix].height - this.increaseOffsetVal}px`;
+    }
+  },
+  closeAll() {
+    for (let ix = 0; ix < this.items.length; ix++) {
+      this.items[ix].close();
+    }
+  },
+};
+
+export default function notification(options = {}) {
+  const instance = new NotiConstructor({
+    data: options,
+    methods: {
+      onBeforeClosed: notificationManager.onBeforeClosed.bind(notificationManager),
+    },
+  });
+  instance.id = `ev-notification-${seq++}`;
+  instance.$mount();
+  root.appendChild(instance.$el);
+  instance.visible = true;
+  notificationManager.pushItem(instance);
+  instance.offsetY = notificationManager.getNextOffset(options.position);
+}

package/src/components/notification/notification.vue

@@ -0,0 +1,242 @@
+<template>
+  <transition name="ev-notification-fade">
+    <div
+      v-show="visible"
+      :class="['ev-notification', `ev-notification-${type}`, customClass, hClass]"
+      :style="positionStyle"
+      role="alert"
+      @mouseenter="clearTimer()"
+      @mouseleave="startTimer()"
+      @click="click"
+    >
+      <i
+        v-if="type || iconClass"
+        :class="[ iconClass === '' ? `ei-${type}` : iconClass ]"
+        class="ev-notification-icon"
+      />
+      <div
+        :class="{ 'is-with-icon': typeClass || iconClass }"
+        class="ev-notification-wrap"
+      >
+        <h3
+          class="ev-notification-title"
+          v-text="title"
+        />
+        <div
+          v-show="message"
+          class="ev-notification-content"
+        >
+          <slot>
+            <p v-if="!useHTMLString">
+              {{ message }}
+            </p>
+            <p
+              v-else
+              v-html="message"
+            />
+          </slot>
+        </div>
+        <i
+          v-if="showClose"
+          class="ev-notification-close-btn ei ei-close"
+          @click.stop="close"
+        />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  const typeMap = {
+    success: 'success',
+    info: 'info',
+    warning: 'warning',
+    error: 'error',
+  };
+
+  export default {
+    data() {
+      return {
+        visible: false,
+        title: '',
+        message: '',
+        height: 80,
+        duration: 4500,
+        type: 'info',
+        showClose: true,
+        customClass: '',
+        iconClass: '',
+        onClose: null,
+        onClick: null,
+        closed: false,
+        offsetY: 0,
+        timer: null,
+        useHTMLString: false,
+        position: 'top-right',
+      };
+    },
+    computed: {
+      typeClass() {
+        return this.type && typeMap[this.type] ? `ei-${typeMap[this.type]}` : '';
+      },
+      hClass() {
+        return this.position.indexOf('right') > -1 ? 'right' : 'left';
+      },
+      positionStyle() {
+        return {
+          [this.position.indexOf('top') > -1 ? 'top' : 'bottom']: `${this.offsetY}px`,
+        };
+      },
+    },
+    watch: {
+      closed(newVal) {
+        if (newVal) {
+          this.visible = false;
+          this.$el.addEventListener('transitionend', this.destroyElement);
+        }
+      },
+    },
+    mounted() {
+      if (this.duration > 0) {
+        this.timer = setTimeout(() => {
+          if (!this.closed) {
+            this.close();
+          }
+        }, this.duration);
+      }
+      document.addEventListener('keydown', this.keydown);
+    },
+    beforeDestroy() {
+      document.removeEventListener('keydown', this.keydown);
+    },
+    methods: {
+      destroyElement() {
+        this.$el.removeEventListener('transitionend', this.destroyElement);
+        this.$destroy(true);
+        this.$el.parentNode.removeChild(this.$el);
+      },
+      click() {
+        if (typeof this.onClick === 'function') {
+          this.onClick();
+        }
+      },
+      close() {
+        this.closed = true;
+        if (typeof this.onClose === 'function') {
+          this.onClose();
+        }
+        if (this.onBeforeClosed) {
+          this.onBeforeClosed(this);
+        }
+      },
+      clearTimer() {
+        clearTimeout(this.timer);
+      },
+      startTimer() {
+        if (this.duration > 0) {
+          this.timer = setTimeout(() => {
+            if (!this.closed) {
+              this.close();
+            }
+          }, this.duration);
+        }
+      },
+      keydown(e) {
+        if (e.keyCode === 46 || e.keyCode === 8) {
+          this.clearTimer();
+        } else if (e.keyCode === 27) {
+          if (!this.closed) {
+            this.close();
+          }
+        } else {
+          this.startTimer();
+        }
+      },
+    },
+  };
+</script>
+<style>
+  .ev-notification {
+    display: flex;
+    width: 330px;
+    box-sizing: border-box;
+    position: fixed;
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
+    padding: 14px 26px 14px 13px;
+    border-radius: 8px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(235, 238, 245);
+    border-image: initial;
+    overflow: hidden;
+    transition-property: opacity, transform, left, right, top, bottom;
+    transition-duration: 0.3s;
+    transition-timing-function: ease;
+    transition-delay: 0s;
+  }
+  .ev-notification-fade-leave-active {
+    opacity: 0;
+  }
+  .ev-notification-fade-enter.right {
+    right: 0;
+    transform: translateX(100%);
+  }
+  .ev-notification-fade-enter.left {
+    left: 0;
+    transform: translateX(-100%);
+  }
+  .ev-notification.top {
+    top: 16px;
+  }
+  .ev-notification.right {
+    right: 16px;
+  }
+  .ev-notification-title {
+    margin: 0;
+    font-weight: 700;
+    font-size: 16px;
+    color: rgb(48, 49, 51);
+  }
+  .ev-notification-close-btn {
+    position: absolute;
+    top: 18px;
+    right: 15px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+  .ev-notification-info {
+    background-color: #FDFDFD;
+    border-color: #EEEEEE;
+  }
+  .ev-notification-success {
+    background-color: #F0F9EB;
+    border-color: #E1F3D8;
+  }
+  .ev-notification-warning {
+    background-color: #FDF6EC;
+    border-color: #FAECD8;
+  }
+  .ev-notification-error {
+    background-color: #FEF0F0;
+    border-color: #FDE2E2;
+  }
+  .ev-notification-info .ev-notification-wrap {
+    color: #111111;
+  }
+  .ev-notification-success .ev-notification-wrap {
+    color: #67C23A;
+  }
+  .ev-notification-warning .ev-notification-wrap {
+    color: #E6A23C;
+  }
+  .ev-notification-error .ev-notification-wrap {
+    color: #F56C6C;
+  }
+  .ev-notification-wrap {
+    width: 100%;
+  }
+  .ev-notification-success .ev-notification-title {
+    color: #F56C6C;
+  }
+</style>

package/src/components/radio/radio-group.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <slot/>
+    <slot />
   </div>
 </template>
 <script>
@@ -10,10 +10,14 @@ export default {
   },
   props: {
     value: {
+      type: [String, Number],
+      default: null,
+    },
+    size: {
       type: String,
       default: '',
     },
-    size: {
+    type: {
       type: String,
       default: '',
     },