evui 3.4.206 → 3.4.208

package/src/components/messageBox/MessageBox.vue

@@ -1,358 +0,0 @@
-<template>
-  <teleport to="body">
-    <transition
-      name="ev-message-box-fade"
-      appear
-    >
-      <div
-        v-show="isShow"
-        id="ev-message-box-modal"
-        @click.self="closeMsg('modal')"
-        @wheel.stop.prevent="() => {}"
-      >
-        <div
-          ref="msgRef"
-          class="ev-message-box"
-          :class="{
-            [`type-${type}`]: !!type,
-            'show-close': showClose,
-            'has-icon': !!iconClass,
-            'has-title': !!title,
-          }"
-          tabindex="-1"
-        >
-          <span
-            v-if="iconClass"
-            class="ev-message-box-icon"
-          >
-            <i
-              :class="iconClass"
-            />
-          </span>
-          <div class="ev-message-box-content">
-            <p
-              v-if="title"
-              class="ev-message-box-title"
-            >
-              {{ title }}
-            </p>
-            <p
-              v-if="useHTML"
-              class="ev-message-box-message"
-              v-html="message"
-            />
-            <p
-              v-else
-              class="ev-message-box-message"
-            >
-              {{ message }}
-            </p>
-          </div>
-          <div class="ev-message-box-btn">
-            <ev-button
-              v-if="showCancelBtn"
-              size="small"
-              class="ev-message-box-cancel"
-              :auto-focus="hasFocus('cancelBtn')"
-              @click="closeMsg('cancel')"
-            >
-              {{ cancelBtnText }}
-            </ev-button>
-            <ev-button
-              v-if="showConfirmBtn"
-              type="primary"
-              size="small"
-              class="ev-message-box-confirm"
-              :auto-focus="hasFocus('confirmBtn')"
-              @click="closeMsg('ok')"
-            >
-              {{ confirmBtnText }}
-            </ev-button>
-          </div>
-          <span
-            v-if="showClose"
-            class="ev-message-box-close"
-            @click="closeMsg('cancel')"
-          >
-            <i class="ev-icon-close" />
-          </span>
-        </div>
-      </div>
-    </transition>
-  </teleport>
-</template>
-
-<script>
-import { reactive, toRefs, watch, onMounted, ref, onBeforeUnmount } from 'vue';
-import EvButton from '@/components/button/Button.vue';
-
-export default {
-  name: 'EvMessageBox',
-  components: {
-    EvButton,
-  },
-  props: {
-    type: {
-      type: String,
-      default: '',
-      validator: val => ['', 'info', 'success', 'warning', 'error'].includes(val),
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    message: {
-      type: [String, Array],
-      default: '',
-    },
-    iconClass: {
-      type: String,
-      default: '',
-    },
-    onClose: {
-      type: Function,
-      default: null,
-    },
-    showClose: {
-      type: Boolean,
-      default: true,
-    },
-    showConfirmBtn: {
-      type: Boolean,
-      default: true,
-    },
-    showCancelBtn: {
-      type: Boolean,
-      default: true,
-    },
-    confirmBtnText: {
-      type: String,
-      default: 'OK',
-    },
-    cancelBtnText: {
-      type: String,
-      default: 'Cancel',
-    },
-    closeOnClickModal: {
-      type: Boolean,
-      default: true,
-    },
-    useHTML: {
-      type: Boolean,
-      default: false,
-    },
-    unmount: {
-      type: Function,
-      default: null,
-    },
-    focusable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    const msgRef = ref(null);
-
-    const state = reactive({
-      isShow: true,
-      iconClass: '',
-    });
-    const closeMsg = (btnType) => {
-      if (!props.closeOnClickModal && btnType === 'modal') {
-        return;
-      }
-
-      const type = btnType === 'modal' ? 'cancel' : btnType;
-      state.isShow = false;
-
-      if (props.onClose) {
-        props.onClose(type);
-      }
-      if (props.unmount) {
-        setTimeout(props.unmount, 1000);
-      }
-    };
-    const keydown = (e) => {
-      if (e.keyCode === 27 && state.isShow) {
-        closeMsg();
-      }
-    };
-
-    const getIconClassName = (type) => {
-      switch (type) {
-        case 'success':
-          return 'ev-icon-arrow-check';
-        case 'warning':
-          return 'ev-icon-warning2';
-        case 'error':
-          return 'ev-icon-warning3';
-        case 'info':
-        default:
-          return 'ev-icon-info2';
-      }
-    };
-    const setState = () => {
-      if (props.iconClass) {
-        state.iconClass = props.iconClass;
-      } else if (props.type) {
-        state.iconClass = getIconClassName(props.type);
-      }
-    };
-
-    const hasFocus = (type) => {
-      if (!props.focusable) return false;
-
-      switch (type) {
-        case 'confirmBtn':
-          return props.showConfirmBtn;
-        case 'cancelBtn':
-          return !props.showConfirmBtn && props.showCancelBtn;
-        case 'messagebox':
-          return !props.showConfirmBtn && !props.showCancelBtn;
-        default:
-          return false;
-      }
-    };
-
-    onMounted(() => {
-      setState();
-      document.addEventListener('keydown', keydown);
-      if (hasFocus('messagebox')) {
-        msgRef.value.focus();
-      }
-    });
-    watch(() => state.isShow, (val) => {
-      if (!val) {
-        document.removeEventListener('keydown', keydown);
-      }
-    });
-    onBeforeUnmount(() => {
-      document.removeEventListener('keydown', keydown);
-    });
-    return {
-      closeMsg,
-      ...toRefs(state),
-      msgRef,
-      hasFocus,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-
-#ev-message-box-modal {
-  display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 901;
-  width: 100vw;
-  height: 100vh;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.5);
-  transition: opacity .2s ease-in-out;
-}
-.ev-message-box {
-  $padding-vertical: 20px;
-  $padding-horizontal: 17px;
-
-  position: relative;
-  width: 400px;
-  padding: $padding-vertical $padding-horizontal $padding-vertical - 5px;
-  margin-bottom: 10px;
-  box-sizing: border-box;
-  border-radius: $default-radius;
-  background-color: #FDFDFD;
-  border: 1px solid #E3E3E3;
-  transition: opacity .2s ease-in-out, transform .3s ease-in-out;
-  font-size: $font-size-medium;
-  line-height: 1.5em;
-
-  &-fade-enter-active,
-  &-fade-leave-active {
-    .ev-message-box-layer {
-      opacity: 0;
-    }
-    .ev-message-box {
-      opacity: 0;
-      transform: translateY(-10%);
-    }
-  }
-  &-title {
-    margin-bottom: 17px;
-    font-size: $font-size-large;
-    font-weight: 700;
-  }
-  &-icon {
-    position: absolute;
-    top: $padding-vertical;
-    left: $padding-horizontal;
-    font-size: $font-size-large + 2px;
-  }
-  &-close {
-    position: absolute;
-    top: $padding-vertical;
-    right: $padding-horizontal;
-    font-size: $font-size-small;
-    cursor: pointer;
-    transition: opacity $animate-base;
-
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-  &-btn {
-    margin-top: 23px;
-    text-align: right;
-    .ev-button {
-      min-width: 70px;
-      margin-left: 5px;
-    }
-  }
-
-  @include state('show-close') {
-    .ev-message-box-message {
-      margin-right: 20px;
-    }
-  }
-  @include state('has-icon') {
-    .ev-message-box-message {
-      margin-left: 23px;
-    }
-  }
-  @include state('has-title') {
-    .ev-message-box-message {
-      margin: 0 5px;
-    }
-    &.show-close {
-      .ev-message-box-title {
-        margin-right: 20px;
-      }
-      .ev-message-box-message {
-        margin-right: 5px;
-      }
-    }
-    &.has-icon {
-      .ev-message-box-title {
-        margin-left: 23px;
-      }
-      .ev-message-box-message {
-        margin-left: 5px;
-      }
-    }
-  }
-
-  @each $type in ('info', 'success', 'warning', 'error') {
-    &.type-#{$type} {
-      .ev-message-box-icon {
-        @include evThemify() {
-          color: evThemed($type);
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/messageBox/index.js

@@ -1,22 +0,0 @@
-import { defineComponent, h, render } from 'vue';
-import Component from './MessageBox.vue';
-
-const componentObj = defineComponent(Component);
-
-const messageBox = (options = {}) => {
-  const container = document.createElement('div');
-  const unmount = () => render(null, container);
-  const msgOption = (typeof options === 'string') ? { message: options, unmount } : { ...options, unmount };
-  const instance = h(
-    componentObj,
-    msgOption,
-  );
-  render(instance, container);
-};
-
-messageBox.install = (app) => {
-  const global = app.config.globalProperties;
-  global.$messagebox = messageBox;
-};
-
-export default messageBox;

package/src/components/notification/Notification.vue

@@ -1,316 +0,0 @@
-<template>
-  <transition
-    name="ev-notification-fade"
-    appear
-  >
-    <div
-      v-show="isShow"
-      class="ev-notification"
-      :class="{
-        [`type-${type}`]: !!type,
-        'show-close': showClose,
-        'has-icon': !!iconClass,
-        'has-click': !!onClick,
-      }"
-      @mouseenter="clearTimer"
-      @mouseleave="startTimer"
-      @click="clickMsg"
-    >
-      <span
-        v-if="iconClass"
-        class="ev-notification-icon"
-      >
-        <i
-          :class="iconClass"
-        />
-      </span>
-      <div class="ev-notification-content">
-        <p
-          v-if="title"
-          class="title"
-        >
-          {{ title }}
-        </p>
-        <p
-          v-if="useHTML"
-          class="message"
-          v-html="message"
-        />
-        <p
-          v-else
-          class="message"
-        >
-          {{ message }}
-        </p>
-      </div>
-      <span
-        v-if="showClose"
-        class="ev-notification-close"
-        @click="closeMsg"
-      >
-        <i class="ev-icon-close" />
-      </span>
-    </div>
-  </transition>
-</template>
-
-<script>
-import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-
-export default {
-  name: 'EvNotification',
-  props: {
-    type: {
-      type: String,
-      default: 'info',
-      validator: val => ['info', 'success', 'warning', 'error'].includes(val),
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    message: {
-      type: String,
-      default: '',
-    },
-    position: {
-      type: String,
-      default: 'top-right',
-      validator: val => ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(val),
-    },
-    duration: {
-      type: Number,
-      default: 3000,
-    },
-    showClose: {
-      type: Boolean,
-      default: true,
-    },
-    iconClass: {
-      type: String,
-      default: '',
-    },
-    onClose: {
-      type: Function,
-      default: null,
-    },
-    onClick: {
-      type: Function,
-      default: null,
-    },
-    useHTML: {
-      type: Boolean,
-      default: false,
-    },
-    unmount: {
-      type: Function,
-      default: null,
-    },
-  },
-  setup(props) {
-    const state = reactive({
-      timer: null,
-      isShow: true,
-    });
-    const clearTimer = () => {
-      clearTimeout(state.timer);
-      state.timer = null;
-    };
-    const clickMsg = (e) => {
-      if (e.target.className === 'ev-notification-close') {
-        return;
-      }
-      if (props.onClick) {
-        props.onClick();
-      }
-    };
-    const closeMsg = () => {
-      state.isShow = false;
-      if (props.onClose) {
-        props.onClose();
-      }
-      clearTimer();
-      if (props.unmount) {
-        setTimeout(props.unmount, 1000);
-      }
-    };
-    const startTimer = () => {
-      if (props.duration > 0) {
-        state.timer = setTimeout(() => {
-          if (state.isShow) {
-            closeMsg();
-          }
-        }, props.duration);
-      }
-    };
-    const keydown = (e) => {
-      if (e.keyCode === 27 && state.isShow) {
-        closeMsg();
-      }
-    };
-
-    onMounted(() => {
-      startTimer();
-      document.addEventListener('keydown', keydown);
-    });
-    onBeforeUnmount(() => {
-      document.removeEventListener('keydown', keydown);
-      clearTimer();
-    });
-    return {
-      startTimer,
-      clearTimer,
-      clickMsg,
-      closeMsg,
-      ...toRefs(state),
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-
-#ev-notification-modal {
-  max-height: 100vh;
-  overflow: hidden;
-
-  @each $position in ('top-left', 'top-right', 'bottom-left', 'bottom-right') {
-    .modal-#{$position} {
-      position: fixed;
-      z-index: 900;
-      padding: 10px;
-
-      @if $position == 'top-left' {
-        top: 0;
-        left: 0;
-
-        .ev-notification-fade-enter-active {
-          opacity: 0;
-          transform: translateY(-10%);
-        }
-        .ev-notification-fade-leave-active {
-          opacity: 0;
-          transform: translateX(-100%);
-        }
-      }
-
-      @else if $position == 'top-right' {
-        top: 0;
-        right: 0;
-
-        .ev-notification-fade-enter-active {
-          opacity: 0;
-          transform: translateY(-10%);
-        }
-        .ev-notification-fade-leave-active {
-          opacity: 0;
-          transform: translateX(100%);
-        }
-      }
-      @else if $position == 'bottom-left' {
-        left: 0;
-        bottom: 0;
-
-        .ev-notification-fade-enter-active {
-          opacity: 0;
-          transform: translateY(10%);
-        }
-        .ev-notification-fade-leave-active {
-          opacity: 0;
-          transform: translateX(-100%);
-        }
-      }
-      @else if $position == 'bottom-right' {
-        bottom: 0;
-        right: 0;
-
-        .ev-notification-fade-enter-active {
-          opacity: 0;
-          transform: translateY(10%);
-        }
-        .ev-notification-fade-leave-active {
-          opacity: 0;
-          transform: translateX(100%);
-        }
-      }
-    }
-  }
-}
-.ev-notification {
-  $padding-vertical: 20px;
-  $padding-horizontal: 17px;
-
-  display: flex;
-  position: relative;
-  width: 400px;
-  padding: $padding-vertical $padding-horizontal;
-  margin-bottom: 10px;
-  align-items: center;
-  box-sizing: border-box;
-  border-radius: $default-radius;
-  transition: opacity .3s ease-in-out, transform .2s ease-in-out;
-  font-size: $font-size-medium;
-  line-height: 1.5em;
-
-  @include evThemify() {
-    box-shadow: 3px 3px 12px 3px evThemed('background-lighten');
-  }
-
-  &-content .title {
-    margin-bottom: 7px;
-    font-size: $font-size-large;
-    font-weight: 700;
-  }
-  &-icon {
-    position: absolute;
-    top: $padding-vertical;
-    left: $padding-horizontal;
-  }
-  &-close {
-    position: absolute;
-    top: $padding-vertical;
-    right: $padding-horizontal;
-    font-size: $font-size-small;
-    cursor: pointer;
-    transition: opacity $animate-base;
-
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-
-  @include state('show-close') {
-    .ev-notification-content {
-      margin-right: 20px;
-    }
-  }
-  @include state('has-icon') {
-    .ev-notification-content {
-      margin-left: 23px;
-    }
-  }
-  @include state('has-click') {
-    cursor: pointer;
-  }
-
-  @each $type in ('info', 'success', 'warning', 'error') {
-    &.type-#{$type} {
-      @if $type == 'info' {
-        background-color: #FDFDFD;
-        border: 1px solid #E3E3E3;
-      }
-
-      @else {
-        @include evThemify() {
-          background-color: evThemed($type);
-        }
-        .ev-notification-icon,
-        .ev-notification-content {
-          color: $color-white;
-        }
-      }
-    }
-  }
-}
-</style>