evui 3.4.207 → 3.4.209

package/src/components/slider/uses.js

@@ -1,391 +0,0 @@
-import { ref, reactive, watch, computed, onMounted, getCurrentInstance } from 'vue';
-import { isEqual, isNumber } from 'lodash-es';
-import { convertToPercent } from '@/common/utils';
-import { getValueCloseToStep } from '@/components/inputNumber/uses';
-
-export const useModel = () => {
-  const { props, emit } = getCurrentInstance();
-  const currentValue = ref(props.modelValue);
-
-  const setStepList = () => {
-    if (!props.showStep) {
-      return [];
-    }
-    // step은 이동 단위 기준으로, 입력값에 따라 클릭 및 드레그 시 이동 단위를 나타냄
-    const sliderRange = props.max - props.min;
-    const stepCount = sliderRange / props.step;
-    const stepWidth = convertToPercent(props.step, sliderRange);
-    const result = [];
-    for (let ix = 1; ix < stepCount; ix++) {
-      result.push(ix * stepWidth);
-    }
-    return result;
-  };
-
-  const setMarkList = () => {
-    if (!props.mark || !Object.keys(props.mark).length) {
-      return [];
-    }
-    const getResultList = (obj, type = 'value') => {
-      if (!obj) {
-        return [];
-      }
-      const style = props.mark.style && (typeof props.mark.style === 'object') ? props.mark.style : {};
-      const keyList = Object.keys(obj);
-      const resultList = [];
-      let markVal;
-      for (let ix = 0; ix < keyList.length; ix++) {
-        markVal = +keyList[ix];
-        if (!isNaN(markVal)) {
-          resultList.push({
-            posX: type === 'value' ? convertToPercent(markVal, props.max - props.min) : markVal,
-            label: obj[markVal],
-            style,
-          });
-        }
-      }
-      return resultList;
-    };
-
-    const hasDetailOption = props.mark.value || props.mark.percent;
-    if (!hasDetailOption) {
-      return [...getResultList(props.mark)];
-    }
-    return [
-      ...getResultList(props.mark.value),
-      ...getResultList(props.mark.percent, 'percent'),
-    ];
-  };
-
-  const state = reactive({
-    isInit: false,
-    dragging: false,
-    handleType: null, // 'left', 'right', null
-    leftValue: null,
-    rightValue: null,
-  });
-  const slider = reactive({
-    valueRange: 0,
-    stepList: computed(setStepList),
-    markList: computed(setMarkList),
-    offset: {
-      left: 0,
-      width: 0,
-    },
-  });
-  const sliderLine = ref();
-
-  // tooltip format
-  const formatValue = computed(() => {
-    const tooltipFormat = props.tooltipFormat;
-    const useFormat = tooltipFormat instanceof Function;
-    return {
-      left: useFormat ? tooltipFormat(state.leftValue) : state.leftValue,
-      right: useFormat ? tooltipFormat(state.rightValue) : state.rightValue,
-    };
-  });
-
-  const setHandleValue = (val) => {
-    const optionObj = {
-      min: props.min,
-      max: props.max,
-      step: props.step,
-    };
-
-    let leftVal;
-    let rightVal;
-    if (props.range && Array.isArray(val)) {
-      leftVal = typeof val[0] === 'number' && !isNaN(val[0]) ? val[0] : props.min;
-      rightVal = typeof val[1] === 'number' && !isNaN(val[1]) ? val[1] : props.min;
-
-      state.leftValue = getValueCloseToStep(leftVal, optionObj);
-      state.rightValue = getValueCloseToStep(rightVal, optionObj);
-    } else {
-      leftVal = props.min;
-      rightVal = typeof val === 'number' && !isNaN(val) ? val : props.min;
-
-      state.leftValue = getValueCloseToStep(leftVal, optionObj);
-      state.rightValue = getValueCloseToStep(rightVal, optionObj);
-    }
-  };
-
-  const setSliderValue = (val) => {
-    if (slider.valueRange <= 0) {
-      return;
-    }
-
-    setHandleValue(val);
-
-    let result;
-    if (props.range && Array.isArray(val)) {
-      const minVal = Math.min(state.leftValue, state.rightValue);
-      const maxVal = Math.max(state.leftValue, state.rightValue);
-      result = [minVal, maxVal];
-    } else {
-      result = state.rightValue;
-    }
-
-    currentValue.value = result;
-    emit('update:modelValue', result);
-    emit('change', result);
-  };
-
-  const updateSliderInfo = () => {
-    const sliderRect = sliderLine.value.getBoundingClientRect();
-    slider.offset.left = sliderRect.left;
-    slider.offset.width = sliderRect.width;
-    slider.valueRange = props.max - props.min;
-  };
-
-  watch(() => props.modelValue, (curr, prev) => {
-    if (isNumber(curr)
-      && curr >= 0
-      && !isEqual(curr, prev)
-      && !state.dragging
-    ) {
-      setHandleValue(curr);
-      currentValue.value = curr;
-    }
-  });
-  watch(() => props.step, () => {
-    setSliderValue(currentValue.value);
-  });
-
-  return {
-    currentValue,
-    state,
-    slider,
-    formatValue,
-    sliderLine,
-    updateSliderInfo,
-    setSliderValue,
-  };
-};
-
-export const useStyle = (params) => {
-  const { props } = getCurrentInstance();
-  const { state, slider } = params;
-  const colorDefault = 'transparent';
-
-  const leftHandleStyle = computed(() => ({
-    left: slider.valueRange > 0 ? `${convertToPercent(state.leftValue - props.min, slider.valueRange)}%` : 0,
-  }));
-  const rightHandleStyle = computed(() => ({
-    left: slider.valueRange > 0 ? `${convertToPercent(state.rightValue - props.min, slider.valueRange)}%` : 0,
-  }));
-  const handleBtnStyle = computed(() => {
-    if (!props.color
-      || (Array.isArray(props.color) && props.color.length !== 1)
-    ) {
-      return {};
-    }
-    return {
-      borderColor: (typeof props.color === 'string' ? props.color : props.color[0]) || colorDefault,
-    };
-  });
-
-  /**
-   * Slider 색 칠하기 : props.color 갖고 있을 때
-   * color 로 받은 값에 따라 왼쪽 부터 채워짐. 없을 경우 기본 색 = transparent
-   * */
-  const isColorArray = computed(() => props.color && Array.isArray(props.color));
-
-  const rangeThumbStyle = computed(() => {
-    const minVal = Math.min(state.leftValue, state.rightValue);
-    const maxVal = Math.max(state.leftValue, state.rightValue);
-    const mvRange = +(maxVal - minVal).toFixed(2);
-    const leftPosX = (slider.valueRange > 0 && props.range)
-      ? convertToPercent(+(minVal - props.min).toFixed(2), slider.valueRange) : 0;
-    const thumbWidth = (mvRange > 0) ? convertToPercent(mvRange, slider.valueRange) : 0;
-
-    const thumbColor = {};
-    if (props.color) {
-      if (typeof props.color === 'string'
-        || (Array.isArray(props.color) && props.color.length === 1)
-      ) {
-        thumbColor.backgroundColor = (typeof props.color === 'string' ? props.color : props.color[0]) || colorDefault;
-      } else if (Array.isArray(props.color) && props.color.length > 1) {
-        thumbColor.backgroundColor = (props.range ? props.color[1] : props.color[0])
-          || colorDefault;
-      }
-    }
-    return {
-      left: `${leftPosX}%`,
-      width: `${thumbWidth}%`,
-      ...thumbColor,
-    };
-  });
-
-  const leftThumbStyle = computed(() => {
-    if (
-      !isColorArray.value
-      || props.color.length < 2
-      || !props.range
-    ) {
-      return {};
-    }
-    const minVal = Math.min(state.leftValue, state.rightValue);
-    const thumbWidth = convertToPercent(Math.abs(minVal - props.min), slider.valueRange);
-    return {
-      width: `${thumbWidth}%`,
-      backgroundColor: props.color[0] || colorDefault,
-    };
-  });
-
-  const rightThumbStyle = computed(() => {
-    if (!isColorArray.value || props.color.length < 2) {
-      return {};
-    }
-    const maxVal = Math.max(state.leftValue, state.rightValue);
-    const leftPosX = convertToPercent(+(maxVal - props.min).toFixed(2), slider.valueRange);
-    const thumbWidth = convertToPercent(+(props.max - maxVal).toFixed(2), slider.valueRange);
-
-    const lastIdx = !props.range ? props.color.length - 1 : 2;
-    return {
-      left: `${leftPosX}%`,
-      width: `${thumbWidth}%`,
-      backgroundColor: props.color[lastIdx] || colorDefault,
-    };
-  });
-
-  return {
-    isColorArray,
-    leftHandleStyle,
-    rightHandleStyle,
-    handleBtnStyle,
-    rangeThumbStyle,
-    leftThumbStyle,
-    rightThumbStyle,
-  };
-};
-
-export const useEvent = (params) => {
-  const { props } = getCurrentInstance();
-  const { currentValue, state, slider, updateSliderInfo, setSliderValue } = params;
-
-  const getSelectedValue = (e) => {
-    if (!state.dragging) {
-      updateSliderInfo();
-    }
-
-    const currentOffsetX = e.type.indexOf('touch') !== -1 ? e.touches[0].clientX : e.clientX;
-    const { valueRange, offset } = slider;
-    let clickedValue = props.min + ((currentOffsetX - offset.left) * valueRange) / offset.width;
-
-    if (clickedValue < props.min) {
-      clickedValue = props.min;
-    } else if (clickedValue > props.max) {
-      clickedValue = props.max;
-    }
-
-    return clickedValue;
-  };
-
-  const clickSlider = (e) => {
-    if (props.readonly || props.disabled || state.dragging) {
-      return;
-    }
-
-    const selectedValue = getSelectedValue(e);
-    let convertValue;
-    if (props.range) {
-      const minValue = Math.min(state.leftValue, state.rightValue);
-      const rangeHalfValue = minValue + Math.abs((state.rightValue - state.leftValue) / 2);
-      const isReverse = state.leftValue > state.rightValue;
-
-      if (selectedValue < rangeHalfValue) {
-        state.handleType = isReverse ? 'right' : 'left';
-      } else {
-        state.handleType = isReverse ? 'left' : 'right';
-      }
-      convertValue = state.handleType === 'left' ? [selectedValue, state.rightValue] : [state.leftValue, selectedValue];
-    } else {
-      state.handleType = 'right';
-      convertValue = selectedValue;
-    }
-
-    setSliderValue(convertValue);
-  };
-
-  const onDrag = (e) => {
-    const selectedValue = getSelectedValue(e);
-    state.dragging = true;
-
-    let convertValue;
-    if (props.range) {
-      convertValue = state.handleType === 'left' ? [selectedValue, state.rightValue] : [state.leftValue, selectedValue];
-    } else {
-      convertValue = selectedValue;
-    }
-
-    setSliderValue(convertValue);
-  };
-  const endDrag = () => {
-    state.handleType = null;
-    state.dragging = false;
-    document.body.style.cursor = '';
-
-    window.removeEventListener('mousemove', onDrag);
-    window.removeEventListener('touchmove', onDrag);
-    window.removeEventListener('mouseup', endDrag);
-    window.removeEventListener('touchend', endDrag);
-  };
-  const startDrag = (handleType) => {
-    if (props.readonly || props.disabled) {
-      return;
-    }
-    state.handleType = handleType;
-    document.body.style.cursor = 'grabbing';
-
-    window.addEventListener('mousemove', onDrag);
-    window.addEventListener('touchmove', onDrag);
-    window.addEventListener('mouseup', endDrag);
-    window.addEventListener('touchend', endDrag);
-  };
-
-  const changeInput = (val, type) => {
-    if (props.showInput && !state.dragging && state.isInit) {
-      if (props.range && Array.isArray(currentValue.value)) {
-        const result = type === 'left' ? [val, currentValue.value[1]] : [currentValue.value[0], val];
-        setSliderValue(result);
-      } else if (!props.range) {
-        setSliderValue(val);
-      }
-    }
-  };
-  return {
-    startDrag,
-    clickSlider,
-    changeInput,
-  };
-};
-
-export const useInit = (params) => {
-  const { props, emit } = getCurrentInstance();
-  const { currentValue, state, slider, updateSliderInfo, setSliderValue } = params;
-
-  const validateProps = () => {
-    const hasMaxProps = props.max || props.max === 0;
-    const hasMinProps = props.min || props.min === 0;
-    if (hasMaxProps && hasMinProps) {
-      if (props.max <= props.min) {
-        console.warn('[EVUI][Slider] Max value must be greater than min value.');
-      }
-    }
-  };
-  const initValue = () => {
-    updateSliderInfo();
-
-    if (slider.valueRange <= 0) {
-      currentValue.value = props.range ? [props.min, props.min] : props.min;
-      emit('update:modelValue', currentValue.value);
-    }
-    setSliderValue(currentValue.value);
-    state.isInit = true;
-  };
-
-  onMounted(() => {
-    validateProps();
-    initValue();
-  });
-};

package/src/components/tabPanel/TabPanel.vue

@@ -1,74 +0,0 @@
-<template>
-  <article
-    v-show="isSelected"
-    class="ev-tab-panel"
-  >
-    <slot />
-  </article>
-</template>
-
-<script>
-import { computed, inject } from 'vue';
-
-export default {
-  name: 'EvTabPanel',
-  props: {
-    text: {
-      type: [String, Number],
-      default: null,
-    },
-    value: {
-      type: [String, Number],
-      default: null,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-  },
-  setup(props) {
-    const evTabs = inject('evTabs', null);
-    const isSelected = computed(() => props.value === evTabs.value);
-
-    return {
-      isSelected,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-
-.ev-tab {
-  ul, li {
-    list-style: none;
-  }
-
-  &-header {
-    position: relative;
-
-    .ev-tab-list {
-      display: flex;
-    }
-    .ev-tab-title {
-      padding: 5px 17px;
-
-      @include evThemify() {
-        border: 1px solid evThemed('border-base');
-        border-left: 0;
-      }
-      @include shortening(block, 90px);
-
-      &:first-child {
-        @include evThemify() {
-          border-left: 1px solid evThemed('border-base');
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/tabPanel/index.js

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