evui 3.4.207 → 3.4.208

package/src/components/menu/MenuItem.vue

@@ -1,201 +0,0 @@
-<template>
-  <li
-    v-if="!item.hidden"
-    :class="[
-      'ev-menu-item',
-       `depth${depth}`,
-      { active: !item.disabled && item.value === selectedItem },
-    ]">
-    <div
-      :class="[
-        'ev-menu-title',
-        {
-          'expandable': hasChild && expandable,
-          'disabled': item.disabled,
-        },
-      ]"
-      @click="clickMenu({item, depth, disabled: item.disabled})"
-    >
-      <i
-        v-if="!!item.iconClass"
-        :class="['front-icon', item.iconClass]"
-      />
-      <span class="text">
-        <slot
-          v-if="item.slotKey"
-          :name="item.slotKey"
-          :item="item"
-          :depth="depth"
-          :selected-item="selectedItem"
-        >
-          {{ item.text || item.value }}
-        </slot>
-        <template v-else>
-          {{ item.text || item.value }}
-        </template>
-      </span>
-      <span
-        v-if="expandable && hasChild"
-        :class="[
-          'list-expend-icon',
-          { 'expend': expandable && isExpand }
-        ]"
-      >
-        <i class="ev-icon-s-arrow-up" />
-      </span>
-    </div>
-    <template v-if="hasChild">
-      <ol
-        v-show="isExpand"
-        :class="['ev-menu-sub', `depth${depth}`]"
-      >
-        <component
-          :is="comp"
-          v-for="(menu, index) in item.children"
-          :key="`${menu.value}_${index}_${depth + 1}`"
-          :depth="depth + 1"
-          :item="menu"
-          :selected-item="selectedItem"
-          :expandable="expandable"
-          :disabled="disabled"
-          :comp="comp"
-          @click="clickMenu"
-        />
-      </ol>
-    </template>
-  </li>
-</template>
-
-<script>
-import { ref, computed } from 'vue';
-
-export default {
-  name: 'MenuItem',
-  props: {
-    selectedItem: {
-      type: [String, Number],
-      default: '',
-    },
-    item: {
-      type: Object,
-      default: () => {},
-      validator: (obj) => {
-        if (!obj.value) {
-          console.warn('[EVUI][Menu] value attribute is required.');
-          return false;
-        } else if (obj.children !== undefined && !Array.isArray(obj.children)) {
-          console.warn('[EVUI][Menu] children attribute must be \'Array\' type.');
-          return false;
-        } else if (obj.expand !== undefined && typeof obj.expand !== 'boolean') {
-          console.warn('[EVUI][Menu] expand attribute must be \'Boolean\' type.');
-          return false;
-        } else if (obj.hidden !== undefined && typeof obj.hidden !== 'boolean') {
-          console.warn('[EVUI][Menu] hidden attribute must be \'Boolean\' type.');
-          return false;
-        } else if (obj.disabled !== undefined && typeof obj.disabled !== 'boolean') {
-          console.warn('[EVUI][Menu] disabled attribute must be \'Boolean\' type.');
-          return false;
-        } else if (obj.slotKey !== undefined && typeof obj.slotKey !== 'string') {
-          console.warn('[EVUI][Menu] slotKey attribute must be \'String\' type.');
-          return false;
-        }
-        return true;
-      },
-    },
-    depth: {
-      type: Number,
-      default: 1,
-    },
-    expandable: {
-      type: Boolean,
-      default: true,
-    },
-    comp: {
-      type: Object,
-      default: () => {},
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['click'],
-  setup(props, { emit }) {
-    const defaultExpand = (props.expandable && props.item.expand !== undefined && typeof props.item.expand === 'boolean') ? props.item.expand : true;
-    const isExpand = ref(defaultExpand);
-    const hasChild = computed(() => !!props.item.children && !!props.item.children.length);
-
-    const clickMenu = (params) => {
-      if (hasChild.value && params.depth === props.depth) {
-        if (props.expandable) {
-          isExpand.value = !isExpand.value;
-        }
-      } else {
-        emit('click', params);
-      }
-    };
-
-    return {
-      isExpand,
-      hasChild,
-      clickMenu,
-    };
-  },
-};
-</script>
-<style lang="scss">
-@import '../../style/index.scss';
-
-.ev-menu-item {
-  line-height: 1.3em;
-  &:not(.depth1) {
-    padding-left: 10px;
-  }
-  &.active > .ev-menu-title {
-    @include evThemify() {
-      color: evThemed('primary') !important;
-    }
-  }
-}
-.ev-menu-title {
-  display: flex;
-  position: relative;
-  padding: 3px 7px;
-  margin-bottom: 6px;
-  cursor: pointer;
-  align-items: center;
-  line-height: 1.5em;
-  word-break: break-all;
-  &:hover:not(.expandable) {
-    @include evThemify() {
-      color: evThemed('primary') !important;
-    }
-  }
-  &.expandable {
-    padding-right: 27px;
-  }
-  &.disabled {
-    color: #848484 !important;
-    &:hover {
-      cursor: not-allowed;
-      color: #848484 !important;
-    }
-  }
-  .list-expend-icon {
-    position: absolute;
-    top: 50%;
-    right: 7px;
-    transform: translateY(-50%);
-    transition: transform $animate-fast;
-    &.expend {
-      transform: translateY(-50%) rotate(180deg);
-    }
-  }
-  .text {
-    display: inline-block;
-    margin-left: 4px;
-    flex: 1;
-  }
-}
-
-</style>

package/src/components/menu/index.js

@@ -1,7 +0,0 @@
-import EvMenu from './Menu';
-
-EvMenu.install = (app) => {
-  app.component(EvMenu.name, EvMenu);
-};
-
-export default EvMenu;

package/src/components/message/Message.vue

@@ -1,229 +0,0 @@
-<template>
-  <teleport to="#ev-message-modal">
-    <transition
-      name="ev-message-fade"
-      appear
-    >
-      <div
-        v-show="isShow"
-        ref="msgRef"
-        class="ev-message"
-        :class="{
-          [`type-${type}`]: !!type,
-          'show-close': showClose,
-          'has-icon': !!iconClass,
-        }"
-        @mouseenter="clearTimer"
-        @mouseleave="startTimer"
-      >
-        <span
-          v-if="iconClass"
-          class="ev-message-icon"
-        >
-          <i
-            :class="iconClass"
-          />
-        </span>
-        <div
-          v-if="useHTML"
-          class="ev-message-content"
-          v-html="message"
-        />
-        <div
-          v-else
-          class="ev-message-content"
-        >
-          {{ message }}
-        </div>
-        <span
-          v-if="showClose"
-          class="ev-message-close"
-          @click="closeMsg"
-        >
-          <i class="ev-icon-close" />
-        </span>
-      </div>
-    </transition>
-  </teleport>
-</template>
-
-<script>
-import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-
-export default {
-  name: 'EvMessage',
-  props: {
-    type: {
-      type: String,
-      default: 'info',
-      validator: val => ['info', 'success', 'warning', 'error'].includes(val),
-    },
-    message: {
-      type: String,
-      default: '',
-    },
-    duration: {
-      type: Number,
-      default: 3000,
-    },
-    showClose: {
-      type: Boolean,
-      default: false,
-    },
-    iconClass: {
-      type: String,
-      default: '',
-    },
-    onClose: {
-      type: Function,
-      default: null,
-    },
-    useHTML: {
-      type: Boolean,
-      default: false,
-    },
-    unmount: {
-      type: Function,
-      default: null,
-    },
-  },
-  setup(props, context) {
-    const state = reactive({
-      timer: null,
-      isShow: true,
-    });
-    const clearTimer = () => {
-      clearTimeout(state.timer);
-      state.timer = null;
-    };
-    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();
-      }
-    };
-    const hide = () => {
-      closeMsg();
-    };
-
-    onMounted(() => {
-      startTimer();
-      document.addEventListener('keydown', keydown);
-    });
-    onBeforeUnmount(() => {
-      document.removeEventListener('keydown', keydown);
-      clearTimer();
-    });
-
-    context.expose({ hide });
-    return {
-      startTimer,
-      clearTimer,
-      closeMsg,
-      ...toRefs(state),
-      hide,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-
-#ev-message-modal {
-  position: fixed;
-  top: 0;
-  left: 50%;
-  z-index: 900;
-  max-height: 100vh;
-  padding-top: 20px;
-  overflow: hidden;
-  transform: translateX(-50%);
-}
-.ev-message {
-  $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;
-  border: 1px solid #EBEEF5;
-  background-color: #EDF2FC;
-  transition: opacity .4s ease-in-out, transform .3s ease-in-out;
-  font-size: $font-size-medium;
-  line-height: 1.5em;
-
-  &-fade-enter-active,
-  &-fade-leave-active {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-  &-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-message-content {
-      margin-right: 20px;
-    }
-  }
-  @include state('has-icon') {
-    .ev-message-content {
-      margin-left: 23px;
-    }
-  }
-
-  @each $type, $color-list in (
-    'info': (#FDFDFD, #EEEEEE, #111111),
-    'success': (#F0F9EB, #E1F3D8, #67C23A),
-    'warning': (#FDF6EC, #FAECD8, #E6A23C),
-    'error': (#FEF0F0, #FDE2E2, #F56C6C),
-  ) {
-    &.type-#{$type} {
-      background-color: nth($color-list, 1);
-      border-color: nth($color-list, 2);
-      .ev-message-icon,
-      .ev-message-content {
-        color: nth($color-list, 3);
-      }
-    }
-  }
-}
-</style>

package/src/components/message/index.js

@@ -1,34 +0,0 @@
-import { defineComponent, h, render } from 'vue';
-import Component from './Message.vue';
-
-const componentObj = defineComponent(Component);
-
-const rootId = 'ev-message-modal';
-const root = document.createElement('div');
-root.id = rootId;
-
-const message = (options = {}) => {
-  const hasRoot = document.getElementById(rootId);
-  if (!hasRoot) {
-    document.body.appendChild(root);
-  }
-
-  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);
-
-  return instance.component.exposed;
-};
-
-message.install = (app) => {
-  const global = app.config.globalProperties;
-  global.$message = message;
-};
-
-export default message;