evui 3.4.206 → 3.4.208

package/src/components/icon/Icon.vue

@@ -1,53 +0,0 @@
-<template>
-  <i
-    :class="[
-      icon,
-      { [`ev-icon-${size}`]: !!size },
-    ]"
-    :style="{ color }"
-    @click="onClick"
-    @dblClick="onDblClick"
-    @contextmenu="onContextMenu"
-  />
-</template>
-
-<script>
-export default {
-  name: 'EvIcon',
-  props: {
-    icon: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String,
-      default: '',
-    },
-    color: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: {
-    click: null,
-    'dbl-click': null,
-    'context-menu': null,
-  },
-  setup(props, { emit }) {
-    const onClick = (e) => {
-      emit('click', e);
-    };
-    const onDblClick = (e) => {
-      emit('dbl-click', e);
-    };
-    const onContextMenu = (e) => {
-      emit('context-menu', e);
-    };
-    return {
-      onClick,
-      onDblClick,
-      onContextMenu,
-    };
-  },
-};
-</script>

package/src/components/icon/index.js

@@ -1,8 +0,0 @@
-import '@/style/lib/icon.css';
-import EvIcon from './Icon';
-
-EvIcon.install = (app) => {
-  app.component(EvIcon.name, EvIcon);
-};
-
-export default EvIcon;

package/src/components/inputNumber/InputNumber.vue

@@ -1,212 +0,0 @@
-<template>
-  <div
-    class="ev-input-number"
-    :class="{
-      disabled,
-      readonly,
-    }"
-  >
-    <div class="ev-input-number__wrapper">
-      <span
-        v-for="type in ['up', 'down']"
-        :key="`step-arrow-${type}`"
-        :class="['ev-input-number-icon', `step-${type}`]"
-        @click="stepValue(type)"
-      >
-        <i :class="`ev-icon-s-arrow-${type}`" />
-      </span>
-      <input
-        v-model.trim="currentValue"
-        class="ev-input"
-        type="text"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
-        @focus="focusInput"
-        @blur="blurInput"
-        @change="changeMv"
-        @keydown.up.prevent="stepValue('up')"
-        @keydown.down.prevent="stepValue('down')"
-        @keydown.enter.prevent="validateValue(currentValue)"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { useModel, useStep, useInit } from './uses';
-
-export default {
-  name: 'EvInputNumber',
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: null,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    max: {
-      type: Number,
-      default: Infinity,
-    },
-    min: {
-      type: Number,
-      default: -Infinity,
-    },
-    step: {
-      type: Number,
-      default: 1,
-      validator: val => val > 0,
-    },
-    stepStrictly: {
-      type: Boolean,
-      default: false,
-    },
-    precision: {
-      type: Number,
-      default: 0,
-      validator: val => (val >= 0 && val <= 100 && val === parseInt(val, 10)),
-    },
-  },
-  emits: [
-    'update:modelValue',
-    'focus',
-    'blur',
-    'input',
-    'change',
-  ],
-  setup() {
-    const {
-      currentValue,
-      validateValue,
-      focusInput,
-      blurInput,
-      changeMv,
-    } = useModel();
-
-    const {
-      stepValue,
-    } = useStep({
-      currentValue,
-      validateValue,
-    });
-
-    useInit({
-      currentValue,
-      validateValue,
-    });
-
-    return {
-      currentValue,
-      validateValue,
-
-      focusInput,
-      blurInput,
-      changeMv,
-
-      stepValue,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-
-.ev-input-number {
-  position: relative;
-  box-sizing: border-box;
-
-  @include clearfix();
-
-  @import '../../style/components/input.scss';
-  &:hover {
-    .ev-input,
-    .ev-textarea {
-      @include evThemify() {
-        border: 1px solid evThemed('primary');
-      }
-    }
-  }
-  &__wrapper {
-    position: relative;
-  }
-  .ev-input {
-    $number-arrow-btn-width: 30px;
-    padding: 0 #{$number-arrow-btn-width + $input-default-padding} 0 $input-default-padding;
-    text-align: center;
-  }
-  .ev-input-number-icon {
-    display: flex;
-    position: absolute;
-    right: 0;
-    width: 30px;
-    height: $input-default-height / 2;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
-    cursor: pointer;
-
-    @include evThemify() {
-      border-left: 1px solid evThemed('border-base');
-      background-color: evThemed('background-lighten');
-    }
-    &.step-up {
-      top: 0;
-      border-radius: 0 $default-radius 0 0;
-
-      @include evThemify() {
-        border-bottom: 1px solid evThemed('border-base');
-      }
-    }
-    &.step-down {
-      bottom: 0;
-      border-radius: 0 0 $default-radius 0;
-    }
-    &:hover {
-      @include evThemify() {
-        color: evThemed('primary');
-      }
-    }
-  }
-}
-
-@include state('disabled') {
-  .ev-input-number-icon {
-    @include evThemify() {
-      color: evThemed('disabled');
-      border-left: 1px solid evThemed('disabled');
-    }
-    &.step-up {
-      @include evThemify() {
-        border-bottom: 1px solid evThemed('disabled');
-      }
-    }
-    &:hover {
-      @include evThemify() {
-        color: evThemed('disabled');
-      }
-    }
-  }
-}
-@include state('readonly') {
-  .ev-input-number-icon {
-    cursor: not-allowed;
-    &:hover {
-      @include evThemify() {
-        color: inherit;
-      }
-    }
-  }
-}
-</style>

package/src/components/inputNumber/index.js

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

package/src/components/inputNumber/uses.js

@@ -1,217 +0,0 @@
-import { ref, watch, onBeforeMount, getCurrentInstance } from 'vue';
-import { getPrecision } from '@/common/utils';
-
-/**
- * step 사용 시, up-down 및 값 입력할 때 step에 해당하는 값 반환
- * @param val - 현재값
- * @param { min, max, step } - 현재 컴포넌트의 최소값, 최대값, step 값
- *                           - inputNumber, slider 컴포넌트 공통 사용
- * @return number - 입력된 val에 가까운 step 값 반환
- * */
-export function getValueCloseToStep(val, { min, max, step }) {
-  const quotient = Math.floor((val - min) / step); // 몫
-  const remainder = (val - min) % step; // 나머지
-  const maxQuotient = Math.floor((max - min) / step);
-  const maxPrecision = Math.max(getPrecision(step), getPrecision(min));
-  let preventStep = false;
-  /**
-   * 클릭 & 드래그 & 입력한 값이 step 범위의 절반 보다 클 경우 한 스텝 위의 값
-   * 작을 경우 한 스텝 아래의 값으로 설정
-   * maxPrecision: 소수 자리수 확인
-   */
-  let result;
-  if (maxPrecision) {
-    // 소수점 값일 경우
-    let multipleValue = +parseFloat(step * quotient).toFixed(maxPrecision);
-    result = +(multipleValue + min).toFixed(maxPrecision);
-    preventStep = quotient === maxQuotient
-      && +(max - result).toFixed(maxPrecision) !== step;
-
-    if (remainder > (step / 2) && !preventStep) {
-      result = +(result + step).toFixed(maxPrecision);
-    }
-    if (result > max) {
-      multipleValue = +parseFloat(step * maxQuotient).toFixed(maxPrecision);
-      result = +(multipleValue + min).toFixed(maxPrecision);
-    } else if (result < min) {
-      result = min;
-    }
-  } else {
-    // 소수점 아닐 경우
-    result = (step * quotient) + min;
-    preventStep = quotient === maxQuotient && (max - result) !== step;
-    if (remainder > (step / 2) && !preventStep) {
-      result += step;
-    }
-    if (result > max) {
-      result = (step * maxQuotient) + min;
-    } else if (result < min) {
-      result = min;
-    }
-  }
-
-  return result;
-}
-
-export function useModel() {
-  const { props, emit } = getCurrentInstance();
-  const currentValue = ref(props.modelValue);
-  const previousValue = ref(props.modelValue);
-
-  /**
-   * 고정 소수점 사용 시, 해당하는 소수점 값 반환
-   * */
-  const getPrecisionValue = val => (
-    props.precision && (val || val === 0) ? Number(val).toFixed(props.precision) : val
-  );
-
-  /**
-   * input 값 validate
-   * @param val - input 현재 값
-   * */
-  const validateValue = (val) => {
-    let result = val;
-
-    if (!val && val !== 0) {
-      // 값이 없을 경우
-      result = props.stepStrictly ? previousValue.value : null;
-    } else if (isNaN(val)) {
-      // 숫자 아닐 경우 - 문자열 들어 왔을 경우
-      result = previousValue.value;
-    } else if (props.stepStrictly) {
-      // step 유지
-      if (props.min === -Infinity) {
-        props.min = 0;
-      }
-      result = getValueCloseToStep(val, {
-        min: props.min,
-        max: props.max,
-        step: props.step,
-      });
-    } else if ((props.min || props.min === 0)
-      && result < props.min
-    ) {
-      // 최소값보다 작을 경우
-      result = props.min;
-    } else if ((props.max || props.max === 0)
-      && result > props.max
-    ) {
-      // 최대값보다 클 경우
-      result = props.max;
-    } else {
-      result = +result;
-    }
-
-    currentValue.value = getPrecisionValue(result);
-    previousValue.value = getPrecisionValue(result);
-    emit('update:modelValue', result);
-    emit('change', result);
-  };
-
-  // input 이벤트 발생 시
-  const focusInput = (e) => {
-    emit('focus', e);
-  };
-  const blurInput = (e) => {
-    emit('blur', e);
-  };
-  const changeMv = (e) => {
-    validateValue(e.target.value);
-  };
-
-  watch(() => props.modelValue, (curr, prev) => {
-    if (curr !== prev) {
-      currentValue.value = getPrecisionValue(curr);
-    }
-  });
-
-  return {
-    currentValue,
-    validateValue,
-    focusInput,
-    blurInput,
-    changeMv,
-  };
-}
-export function useStep(params) {
-  const { props } = getCurrentInstance();
-  const { currentValue, validateValue } = params;
-
-  /**
-   * 화살표 및 키보드 방향키 통해 값 up-down할 경우
-   * @param type - 'up', 'down'
-   * */
-  const stepValue = (type) => {
-    if (props.readonly || props.disabled) {
-      return;
-    }
-
-    let result;
-    if (!currentValue.value && currentValue.value !== 0) {
-      result = props.min === -Infinity ? 0 : props.min;
-    } else {
-      const newValue = +currentValue.value;
-      const convertedStep = type === 'up' ? props.step : props.step * -1;
-      const maxPrecision = Math.max(getPrecision(newValue), getPrecision(props.step));
-      const squaredValue = 10 ** maxPrecision;
-      result = (Math.round(newValue * squaredValue)
-        + Math.round(convertedStep * squaredValue)) / squaredValue;
-    }
-
-    if (result >= props.min && result <= props.max) {
-      validateValue(result);
-    }
-  };
-
-  return {
-    stepValue,
-  };
-}
-export function useInit(params) {
-  const { props } = getCurrentInstance();
-  const { currentValue, validateValue } = params;
-  const hasMaxProps = props.max || props.max === 0;
-  const hasMinProps = props.min || props.min === 0;
-
-  /**
-   * props validate
-   * */
-  const validateProps = () => {
-    if (hasMaxProps && hasMinProps) {
-      if (props.max <= props.min) {
-        console.warn('[EVUI][InputNumber] Max value must be greater than min value.');
-      }
-    }
-
-    if (props.step && (props.precision || props.precision === 0)) {
-      if (getPrecision(props.step) > props.precision) {
-        console.warn('[EVUI][InputNumber] It cannot be calculated because the step is smaller than the precision setting.');
-      }
-    }
-  };
-
-  /**
-   * 초기 modelValue 값 사용자 입력 시 validate
-   * */
-  const initValue = () => {
-    let modelValue = currentValue.value;
-
-    if (isNaN(currentValue.value)) {
-      modelValue = 0;
-    }
-
-    if (modelValue || modelValue === 0) {
-      if (hasMaxProps && modelValue > props.max) {
-        modelValue = props.max;
-      } else if (hasMinProps && modelValue < props.min) {
-        modelValue = props.min;
-      }
-    }
-    validateValue(modelValue);
-  };
-
-  onBeforeMount(() => {
-    validateProps();
-    initValue();
-  });
-}

package/src/components/loading/Loading.vue

@@ -1,125 +0,0 @@
-<template>
-  <template v-if="fullscreen">
-    <teleport to="body">
-      <div
-        v-if="modelValue"
-        class="ev-loading full-screen"
-        @[`${clickEventName}`]="closeLoading"
-      >
-        <div class="ev-loading-spinner">
-          <template v-if="$slots.default">
-            <slot />
-          </template>
-          <template v-else>
-            <i
-              :class="iconClass || 'ev-icon-refresh2'"
-              class="ev-loading-icon"
-              :style="iconStyle"
-            />
-          </template>
-        </div>
-      </div>
-    </teleport>
-  </template>
-  <template v-else>
-    <div
-      v-if="modelValue"
-      class="ev-loading"
-      @[`${clickEventName}`]="closeLoading"
-    >
-      <div class="ev-loading-spinner">
-        <template v-if="$slots.default">
-          <slot />
-        </template>
-        <template v-else>
-          <i
-            :class="iconClass || 'ev-icon-refresh2'"
-            class="ev-loading-icon"
-            :style="iconStyle"
-          />
-        </template>
-      </div>
-    </div>
-  </template>
-</template>
-
-<script>
-import { computed } from 'vue';
-
-export default {
-  name: 'EvLoading',
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    fullscreen: {
-      type: Boolean,
-      default: false,
-    },
-    clickOutside: {
-      type: Boolean,
-      default: false,
-    },
-    iconClass: {
-      type: String,
-      default: null,
-    },
-    iconStyle: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  emits: {
-    'update:modelValue': [Boolean],
-  },
-  setup(props, { emit }) {
-    const clickEventName = computed(() => (props.clickOutside ? 'click' : null));
-
-    const closeLoading = () => emit('update:modelValue', false);
-
-    return {
-      clickEventName,
-      closeLoading,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-
-.ev-loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #000000;
-  opacity: 0.5;
-  &.full-screen {
-    position: fixed;
-  }
-}
-.ev-loading-spinner {
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  color: #409EFF;
-  text-align: center;
-}
-.ev-loading-icon {
-  display: inline-block;
-  font-size: 25px;
-  animation: rotating 2s linear infinite;
-}
-
-@keyframes rotating {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0);
-  }
-}
-</style>

package/src/components/loading/index.js

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

package/src/components/menu/Menu.vue

@@ -1,79 +0,0 @@
-<template>
-  <ul class="ev-menu">
-    <menu-item
-      v-for="(menu, index) in items"
-      :key="`${menu.text}_${index}_0`"
-      :item="menu"
-      :selected-item="modelValue"
-      :expandable="expandable"
-      :disabled="disabled"
-      :comp="component"
-      @click="clickMenu"
-    >
-      <template
-        v-for="(_, slotName) in $slots"
-        :key="slotName"
-        #[slotName]="slotProps"
-      >
-        <slot
-          :name="slotName"
-          v-bind="slotProps"
-        />
-      </template>
-    </menu-item>
-  </ul>
-</template>
-
-<script>
-import { ref } from 'vue';
-import MenuItem from './MenuItem';
-
-export default {
-  name: 'EvMenu',
-  components: {
-    MenuItem,
-  },
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: '',
-    },
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    expandable: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue', 'change'],
-  setup(props, { emit }) {
-    const prevMenuItem = ref(props.items.filter(item => props.modelValue === item.value));
-    const clickMenu = (params) => {
-      if (!params.disabled) {
-        const newMenuItem = params.item;
-        emit('update:modelValue', newMenuItem.value);
-        emit('change', newMenuItem, prevMenuItem.value);
-        prevMenuItem.value = newMenuItem;
-      }
-    };
-    const component = MenuItem;
-    return {
-      clickMenu,
-      component,
-    };
-  },
-};
-</script>
-<style lang="scss">
-.ev-menu {
-  ul, ol, li {
-    list-style: none;
-  }
-}
-</style>