evui 3.4.207 → 3.4.208

package/src/components/notification/index.js

@@ -1,49 +0,0 @@
-import { defineComponent, h, render } from 'vue';
-import Component from './Notification.vue';
-
-const componentObj = defineComponent(Component);
-
-const rootId = 'ev-notification-modal';
-const root = document.createElement('div');
-root.id = rootId;
-
-const positionList = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
-
-const notification = (options = {}) => {
-  const position = options.position || 'top-right';
-  if (!positionList.includes(position)) {
-    console.warn('[EVUI][Notification] The position value is incorrectly entered.');
-    return;
-  }
-
-  const hasRoot = document.getElementById(rootId);
-  if (!hasRoot) {
-    document.body.appendChild(root);
-  }
-  let wrapper = root.getElementsByClassName(`modal-${position}`);
-  const hasElem = wrapper.length;
-  if (hasElem) {
-    wrapper = wrapper[0];
-  } else {
-    wrapper = document.createElement('div');
-    wrapper.classList.add(`modal-${position}`);
-    root.appendChild(wrapper);
-  }
-
-  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);
-  wrapper.appendChild(instance.el);
-};
-
-notification.install = (app) => {
-  const global = app.config.globalProperties;
-  global.$notify = notification;
-};
-
-export default notification;

package/src/components/pagination/Pagination.vue

@@ -1,317 +0,0 @@
-<template>
-  <nav class="pagination">
-    <!-- Page Info -->
-    <small v-if="showPageInfo" class="pagination-info">
-      <template v-if="perPage === 1">
-        {{ firstData }} / {{ total }}
-      </template>
-      <template v-else>
-        {{ firstData }} - {{ Math.min(current * perPage, total) }}
-        / {{ total }}
-      </template>
-    </small>
-
-    <ul class="pagination-list" :style="listClasses">
-      <!-- Jump -->
-      <li v-if="$props.pagePerJump"
-        class="step-button"
-        :class="{'is-disabled': !hasPrev}">
-        <page-button
-          class="pagination-previous"
-          :disabled="!hasPrev"
-          :page="getPage(prevJumpPage, {isCurrent: false})"
-        >
-          <ev-icon icon="ev-icon-s-double-left"/>
-        </page-button>
-      </li>
-
-      <!-- Previous -->
-      <li
-        class="step-button"
-      :class="{'is-disabled': !hasPrev}">
-        <page-button
-          class="pagination-previous"
-          :disabled="!hasPrev"
-          :page="getPage(current - 1)"
-        >
-          <ev-icon icon="ev-icon-s-arrow-left"/>
-        </page-button>
-      </li>
-
-      <!--Pages-->
-      <template v-for="(page, i) in pagesInRange" :key="i">
-        <li v-if="page.number === -1" class="pagination-ellipsis">
-          <span>&hellip;</span>
-        </li>
-        <li v-else :class="{ 'is-current': page.isCurrent, 'is-page': true }" @click="page.click">
-          <page-button :page="page"/>
-        </li>
-      </template>
-
-      <!-- Next -->
-      <li
-      class="step-button"
-      :class="{'is-disabled': !hasNext}">
-        <page-button
-          class="pagination-next"
-          :disabled="!hasNext"
-          :page="getPage(current + 1)"
-        >
-          <ev-icon icon="ev-icon-s-arrow-right"/>
-        </page-button>
-      </li>
-
-      <!-- Jump -->
-      <li v-if="$props.pagePerJump"
-      class="step-button"
-      :class="{'is-disabled': !hasNext}">
-        <page-button
-          class="pagination-previous"
-          :disabled="!hasNext"
-          :page="getPage(nextJumpPage, {isCurrent: false})"
-        >
-          <ev-icon icon="ev-icon-s-double-right"/>
-        </page-button>
-      </li>
-
-    </ul>
-  </nav>
-</template>
-
-<script>
-import { computed, nextTick, watch } from 'vue';
-import EvIcon from '@/components/icon/Icon';
-import pageButton from './pageButton';
-
-export default {
-  name: 'EvPagination',
-  components: {
-    EvIcon,
-    pageButton,
-  },
-  props: {
-    total: {
-      type: [Number, String],
-      default: 0,
-    },
-    visiblePage: {
-      type: [Number, String],
-      default: 8,
-    },
-    perPage: {
-      type: [Number, String],
-      default: 20,
-    },
-    modelValue: {
-      type: [Number, String],
-      default: 1,
-    },
-    showPageInfo: {
-      type: Boolean,
-      default: false,
-    },
-    order: {
-      type: String,
-      default: 'left',
-      validator: val => ['left', 'right', 'center'].includes(val),
-    },
-    pagePerJump: {
-      type: [Number, undefined],
-      default: undefined,
-    },
-  },
-  emits: {
-    'update:modelValue': null,
-    change: null,
-  },
-  setup(props, { emit }) {
-    const visiblePage = computed(() => (props.visiblePage > 7 ? props.visiblePage : 7));
-    const current = computed(() => props.modelValue);
-    const pageCount = computed(() => (props.total === 0
-      ? 1 : Math.ceil(props.total / props.perPage)));
-    const hasPrev = computed(() => current.value > 1);
-    const hasNext = computed(() => current.value < pageCount.value);
-
-    const prevJumpPage = computed(
-      () => Math.max(current.value - props.pagePerJump, 1),
-    );
-    const nextJumpPage = computed(
-      () => Math.min(current.value + props.pagePerJump, pageCount.value),
-    );
-
-    const firstData = computed(() => {
-      const item = current.value * props.perPage - props.perPage + 1;
-      return item >= 0 ? item : 0;
-    });
-    const changePage = (num, event) => {
-      if (current.value === num || num < 1 || num > pageCount.value) return;
-      emit('update:modelValue', num);
-      emit('change', num);
-      if (event && event.target) {
-        nextTick(() => event.target.focus());
-      }
-    };
-    const getPage = (num, options = {}) => ({
-      number: num,
-      isCurrent: options.isCurrent ?? current.value === num,
-      click: event => changePage(num, event),
-      input: (event, inputNum) => changePage(+inputNum, event),
-      disabled: options.disabled || false,
-      class: options.class || '',
-    });
-    const onRange = (from, to) => {
-      const range = [];
-      const f = from > 0 ? from : 1;
-
-      for (let i = f; i <= to; i++) {
-        range.push(getPage(i));
-      }
-
-      return range;
-    };
-    const pagesInRange = computed(() => {
-      const totalVisible = parseInt(visiblePage.value, 10);
-
-      if (totalVisible === 0) {
-        return [];
-      }
-
-      const maxLength = Math.min(
-        Math.max(0, totalVisible) || pageCount.value,
-        pageCount.value,
-      );
-      if (pageCount.value <= maxLength) {
-        return onRange(1, pageCount.value);
-      }
-      const even = maxLength % 2 === 0 ? 1 : 0;
-      const left = Math.floor(maxLength / 2);
-      const right = pageCount.value - left + 1 + even;
-
-      if (current.value > left && current.value < right) {
-        const firstItem = 1;
-        const lastItem = pageCount.value;
-        const start = current.value - left + 2;
-        const end = current.value + left - 2 - even;
-        const secondItem = start - 1 === firstItem + 1 ? 2 : -1;
-        const beforeLastItem = end + 1 === lastItem - 1 ? end + 1 : -1;
-        return [
-          getPage(1),
-          getPage(secondItem),
-          ...onRange(start, end),
-          getPage(beforeLastItem),
-          getPage(pageCount.value),
-        ];
-      } else if (current.value === left) {
-        const end = current.value + left - 1 - even;
-        return [...onRange(1, end), getPage(-1), getPage(pageCount.value)];
-      } else if (current.value === right) {
-        const start = current.value - left + 1;
-        return [getPage(1), getPage(-1), ...onRange(start, pageCount.value)];
-      }
-      return [
-        ...onRange(1, left),
-        getPage(-1),
-        ...onRange(right, pageCount.value),
-      ];
-    });
-    const listClasses = computed(() => ({ 'justify-content': props.order, flex: '3 1 0%' }));
-
-    watch(
-      () => pageCount.value,
-      (value) => {
-        if (current.value > value) {
-          changePage(value);
-        }
-      },
-    );
-    watch(
-      () => current.value,
-      (after, before) => {
-        if (pageCount.value < after) {
-          changePage(before);
-        }
-      },
-    );
-    return {
-      pageCount,
-      pagesInRange,
-      hasPrev,
-      hasNext,
-      listClasses,
-      firstData,
-      current,
-      changePage,
-      getPage,
-      prevJumpPage,
-      nextJumpPage,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.pagination {
-  display: flex;
-  .pagination-next,
-  .pagination-previous {
-    margin: 0;
-    padding-left: 10px;
-    padding-right: 10px;
-    background: center center no-repeat;
-    background-size: 16px;
-    cursor: pointer;
-    &:hover {
-      color: #1A6AFE;
-    }
-  }
-  &-info {
-    order: 2;
-    line-height: 32px;
-  }
-  .is-current {
-    pointer-events: none;
-    cursor: not-allowed;
-    background-color: #1A6AFE;
-    color: #FFFFFF;
-    border-radius: 4px;
-  }
-  .is-page {
-    &:hover {
-      color: #1A6AFE;
-    }
-  }
-  .pagination-ellipsis {
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-  .is-disabled {
-    pointer-events: none;
-    cursor: not-allowed;
-    opacity: 0.5;
-    color: #C0C4CC;
-  }
-  &-list {
-    display: flex;
-    user-select: none;
-    list-style: none;
-    font-size: 0;
-    padding: 0;
-    margin: 0;
-    align-items: center;
-    flex-wrap: wrap;
-    li {
-      display: flex;
-      height: 32px;
-      padding: 0 4px;
-      justify-content: center;
-      align-items: center;
-      font-size: 14px;
-      min-width: 32px;
-      line-height: 32px;
-      cursor: pointer;
-      box-sizing: border-box;
-      text-align: center;
-    }
-  }
-}
-</style>

package/src/components/pagination/index.js

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

package/src/components/pagination/pageButton.vue

@@ -1,31 +0,0 @@
-<template>
-  <span
-    :class="{
-      'is-current': page.isCurrent,
-      'is-disabled': disabled || page.disabled,
-      [page.class]: true
-    }"
-    v-bind="$attrs"
-    :aria-current="page.isCurrent"
-    @click.stop="page.click"
-  >
-    <slot>{{ page.number }}</slot>
-  </span>
-</template>
-
-<script>
-
-export default {
-  name: 'PageButton',
-  props: {
-    page: {
-      type: Object,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>

package/src/components/progress/Progress.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="ev-progress">
-    <div
-      class="ev-progress-wrapper"
-      :style="wrapperStyle"
-    >
-      <div
-        class="ev-progress-inner"
-        :style="innerStyle"
-      >
-        <div
-          v-if="innerText"
-          class="ev-progress-inner-text"
-        >
-          {{ innerText }}
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="$slots.default"
-      class="ev-progress-label"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import { computed } from 'vue';
-
-export default {
-  name: 'EvProgress',
-  props: {
-    modelValue: {
-      type: Number,
-      default: 0,
-      validator: val => (val >= 0 && val <= 100),
-    },
-    color: {
-      type: [String, Array],
-      default: '#409EFF',
-    },
-    strokeWidth: {
-      type: Number,
-      default: 6,
-    },
-    innerText: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: {
-  },
-  setup(props) {
-    const wrapperStyle = computed(() => ({
-      height: `${props.strokeWidth}px`,
-    }));
-    const innerStyle = computed(() => {
-      if (Array.isArray(props.color)) {
-        const sortedColorList = [...props.color].sort((curr, next) => curr.value - next.value);
-        let color = sortedColorList[0].color;
-        if (!props.modelValue) {
-          return {
-            width: `${props.modelValue}%`,
-            'background-color': color,
-          };
-        }
-        for (let i = 0; i < sortedColorList.length; i++) {
-          const prevValue = i === 0 ? 0 : sortedColorList[i - 1].value;
-          const currValue = sortedColorList[i].value;
-          if (props.modelValue > prevValue && props.modelValue <= currValue) {
-            color = sortedColorList[i].color;
-            break;
-          }
-        }
-        return {
-          width: `${props.modelValue}%`,
-          'background-color': color,
-        };
-      }
-      return {
-        width: `${props.modelValue}%`,
-        'background-color': props.color,
-      };
-    });
-
-    return {
-      wrapperStyle,
-      innerStyle,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-
-.ev-progress {
-  display: flex;
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-  user-select: none;
-
-  &-wrapper {
-    position: relative;
-    height: 6px;
-    border-radius: 100px;
-    background-color: #EBEEF5;
-    overflow: hidden;
-    flex: 1;
-    align-self: center;
-  }
-
-  &-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    border-radius: 100px;
-    text-align: right;
-    white-space: nowrap;
-    transition: width .6s ease;
-  }
-
-  &-inner-text {
-    display: inline-block;
-    margin: 0 5px;
-    color: #FFFFFF;
-    font-size: 12px;
-  }
-
-  &-label {
-    min-width: 55px;
-    text-align: right;
-    margin-left: 10px;
-  }
-}
-</style>

package/src/components/progress/index.js

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

package/src/components/radio/Radio.vue

@@ -1,159 +0,0 @@
-<template>
-  <label
-    class="ev-radio"
-    :class="[
-      {
-        disabled,
-        checked,
-      },
-      size,
-    ]"
-  >
-    <input
-      v-model="mv"
-      type="radio"
-      class="ev-radio-input"
-      :value="label"
-      :disabled="disabled"
-      @change.stop="changeMv"
-    >
-    <span class="ev-radio-label">
-      <template v-if="$slots.default">
-        <slot />
-      </template>
-      <template v-else>
-        {{ label }}
-      </template>
-    </span>
-  </label>
-</template>
-
-<script>
-import { computed, inject, nextTick } from 'vue';
-
-export default {
-  name: 'EvRadio',
-  props: {
-    modelValue: {
-      type: [String, Number, Symbol, Boolean],
-      default: null,
-    },
-    label: {
-      type: [String, Number, Symbol, Boolean],
-      default: null,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: {
-    'update:modelValue': null,
-    change: null,
-  },
-  setup(props, { emit }) {
-    const mv = inject(
-      'EvRadioGroupMv',
-      computed({
-        get: () => props.modelValue,
-        set: val => emit('update:modelValue', val),
-      }),
-    );
-
-    const changeMv = inject(
-      'EvRadioGroupChange',
-      async (e) => {
-        await nextTick();
-        emit('change', mv.value, e);
-      },
-    );
-
-    const checked = computed(() => mv.value === props.label);
-
-    return {
-      mv,
-      checked,
-      changeMv,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-
-.ev-radio {
-  $button-size-default: 18px;
-  display: inline-block;
-  position: relative;
-  padding: 0 5px;
-  margin-right: 30px;
-  user-select: none;
-  line-height: $button-size-default;
-  cursor: pointer;
-  &-label {
-    padding-left: 5px;
-  }
-  &-input {
-    cursor: pointer;
-  }
-}
-
-@include state('disabled') {
-  .ev-radio-label {
-    @include evThemify() {
-      color: evThemed('disabled');
-    }
-  }
-  .ev-radio-input,
-  .ev-radio-label {
-    cursor: not-allowed !important;
-  }
-}
-@include state('type-button') {
-  .ev-radio {
-    display: inline-block;
-    padding: 0;
-    margin: 0;
-    text-align: center;
-
-    @include evThemify() {
-      border: 1px solid evThemed('border-base');
-      border-left: 0;
-    }
-    &:first-child {
-      border-radius: $default-radius 0 0 $default-radius;
-
-      @include evThemify() {
-        border-left: 1px solid evThemed('border-base');
-      }
-    }
-    &:last-child {
-      border-radius: 0 $default-radius $default-radius 0;
-    }
-    &.checked {
-      color: $color-white;
-
-      @include evThemify() {
-        background-color: evThemed('primary');
-      }
-    }
-    &.disabled.checked {
-      @include evThemify() {
-        background-color: rgba(evThemed('border-base'), 0.5);
-      }
-    }
-  }
-  .ev-radio-input {
-    @include visible-hide();
-  }
-  .ev-radio-label {
-    display: inline-block;
-    padding: 7px 12px;
-  }
-}
-</style>

package/src/components/radio/index.js

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