evui 3.4.207 → 3.4.208

package/src/components/radioGroup/RadioGroup.vue

@@ -1,41 +0,0 @@
-<template>
-  <div
-    class="ev-radio-group"
-    :class="{ 'type-button': type === 'button' }"
-    role="group"
-  >
-    <slot />
-  </div>
-</template>
-
-<script>
-import { computed, provide, nextTick } from 'vue';
-
-export default {
-  name: 'EvRadioGroup',
-  props: {
-    modelValue: {
-      type: [String, Number, Symbol, Boolean],
-      default: null,
-    },
-    type: {
-      type: String,
-      default: 'radio',
-    },
-  },
-  emits: ['update:modelValue', 'change'],
-  setup(props, { emit }) {
-    const mv = computed({
-      get: () => props.modelValue,
-      set: val => emit('update:modelValue', val),
-    });
-    provide('EvRadioGroupMv', mv);
-
-    const change = async (e) => {
-      await nextTick();
-      emit('change', mv.value, e);
-    };
-    provide('EvRadioGroupChange', change);
-  },
-};
-</script>

package/src/components/radioGroup/index.js

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

package/src/components/scheduler/Scheduler.vue

@@ -1,149 +0,0 @@
-<template>
-  <table
-    class="ev-scheduler"
-    :class="{ draggable: !!dragEventName }"
-  >
-    <thead>
-      <tr class="ev-scheduler-header">
-        <td />
-        <td
-          v-for="(wItem, wIdx) in colLabels.length"
-          :key="`${wItem}_${wIdx}_header`"
-          class="ev-scheduler-header-label"
-          @click="selectColumn(wIdx)"
-          v-html="colLabels[wIdx]"
-        />
-      </tr>
-    </thead>
-    <tbody @mouseleave="mouseleaveBoxArea">
-      <tr
-        v-for="(hItem, hIdx) in rowLabels.length"
-        :key="`${hItem}_${hIdx}_body`"
-        class="ev-scheduler-body"
-      >
-        <td
-          :key="`${hItem}_${hIdx}_${rowLabels[hIdx]}`"
-          class="ev-scheduler-body-label"
-          @click="selectRow(hIdx)"
-          v-html="rowLabels[hIdx]"
-        />
-        <td
-          v-for="(wItem, wIdx) in colLabels.length"
-          :key="`${wItem}_${hIdx}_${wIdx}_body`"
-          class="ev-scheduler-body-box"
-          :class="{ selected: mv[hIdx][wIdx] }"
-          :style="selectionStyle(hIdx, wIdx)"
-          @mousedown.stop.prevent="mousedownBox(hIdx, wIdx, $event)"
-          @mouseup.stop.prevent="mouseupBox(hIdx, wIdx)"
-          @[`${dragEventName}`]="mousemoveBox(hIdx, wIdx)"
-        />
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-import { toRefs } from 'vue';
-import { useModel, useEvent } from './uses';
-
-export default {
-  name: 'EvScheduler',
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-    colLabels: {
-      type: Array,
-      default: () => (['<span style="color: #FF0000">SUN</span>',
-        'MON', 'TUE', 'WED', 'THU', 'FRI',
-        '<span style="color: #0006F9">SAT</span>']),
-    },
-    rowLabels: {
-      type: Array,
-      default: () => (['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-        '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-        '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-        '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']),
-    },
-  },
-  emits: {
-    'update:modelValue': Array,
-    change: Array,
-  },
-  setup() {
-    const {
-      mv,
-      validateValue,
-    } = useModel();
-
-    validateValue();
-
-    const {
-      mousePos,
-      selectionStyle,
-      mousedownBox,
-      mouseupBox,
-      mousemoveBox,
-      mouseleaveBoxArea,
-      selectColumn,
-      selectRow,
-    } = useEvent({ mv });
-
-    return {
-      mv,
-      selectionStyle,
-      mousedownBox,
-      mouseupBox,
-      mousemoveBox,
-      mouseleaveBoxArea,
-      selectColumn,
-      selectRow,
-      ...toRefs(mousePos),
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-.ev-scheduler {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  table-layout: fixed;
-  text-align: center;
-  font-size: $font-size-small;
-  user-select: none;
-  cursor: pointer;
-
-  &.draggable {
-    cursor: crosshair !important;
-  }
-
-  td {
-    height: 18px;
-  }
-}
-
-.ev-scheduler-header-label,
-.ev-scheduler-body-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ev-scheduler-body-box {
-  border: 1px solid #CCCCCC;
-
-  &.selected {
-    background-color: #CCEECC;
-  }
-}
-
-.ev-scheduler-selection {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-</style>

package/src/components/scheduler/index.js

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

package/src/components/scheduler/uses.js

@@ -1,183 +0,0 @@
-import {
-  getCurrentInstance, computed, reactive,
-} from 'vue';
-
-const getMatrixArr = (row, col) => Array.from(Array(row), () => Array(col).fill(false));
-
-export const useModel = () => {
-  const { props, emit } = getCurrentInstance();
-
-  const mv = computed({
-    get: () => {
-      if (props.modelValue.length !== props.rowLabels.length
-        || !props.modelValue[0]
-        || props.modelValue[0].length !== props.colLabels.length
-      ) {
-        return getMatrixArr(props.rowLabels.length, props.colLabels.length);
-      }
-      return props.modelValue;
-    },
-    set: (val) => {
-      emit('update:modelValue', val);
-      emit('change', val);
-    },
-  });
-
-  /**
-   * 초기값 배열의 length와 options의 count가 안맞는 경우 valid체크하는 로직
-   */
-  const validateValue = () => {
-    if (props.modelValue.length !== props.rowLabels.length
-      || !props.modelValue[0]
-      || props.modelValue[0].length !== props.colLabels.length
-    ) {
-      mv.value = [...getMatrixArr(props.rowLabels.length, props.colLabels.length)];
-    }
-  };
-
-  return {
-    mv,
-    validateValue,
-  };
-};
-
-export const useEvent = (param) => {
-  const { mv } = param;
-  const mousePos = reactive({
-    startRow: null,
-    startCol: null,
-    dragRow: null,
-    dragCol: null,
-    endRow: null,
-    endCol: null,
-    dragEventName: null,
-  });
-
-  /**
-   * 스케쥴 내 드래그 시 선택영역의 style 세팅
-   * @param rows
-   * @param cols
-   */
-  const selectionStyle = (rows, cols) => {
-    if (mousePos.dragCol === null || mousePos.dragRow === null) {
-      return {};
-    }
-    const minRow = mousePos.startRow < mousePos.dragRow ? mousePos.startRow : mousePos.dragRow;
-    const maxRow = mousePos.startRow > mousePos.dragRow ? mousePos.startRow : mousePos.dragRow;
-    const minCol = mousePos.startCol < mousePos.dragCol ? mousePos.startCol : mousePos.dragCol;
-    const maxCol = mousePos.startCol > mousePos.dragCol ? mousePos.startCol : mousePos.dragCol;
-    if (minRow > rows || maxRow < rows || minCol > cols || maxCol < cols) {
-      return {};
-    }
-    const borderValue = '2px solid #5292F7';
-    let result = {};
-    if (rows === minRow) {
-      result = { ...result, 'border-top': borderValue };
-    }
-    if (rows === maxRow) {
-      result = { ...result, 'border-bottom': borderValue };
-    }
-    if (cols === minCol) {
-      result = { ...result, 'border-left': borderValue };
-    }
-    if (cols === maxCol) {
-      result = { ...result, 'border-right': borderValue };
-    }
-    return result;
-  };
-
-  /**
-   * 마우스다운할 때 좌표값 세팅 및 드래그이벤트명을 mousemove로 변경함으로서 마우스이벤트 활성화
-   * @param rows
-   * @param cols
-   */
-  const mousedownBox = (rows, cols) => {
-    mousePos.startRow = rows;
-    mousePos.startCol = cols;
-    mousePos.dragRow = rows;
-    mousePos.dragCol = cols;
-    mousePos.dragEventName = 'mousemove';
-  };
-
-  /**
-   * 마우스업할 때 start~end의 행열 값을 가져오고 mv에 적용
-   * @param rows
-   * @param cols
-   */
-  const mouseupBox = (rows, cols) => {
-    if (!mousePos.dragEventName) {
-      return;
-    }
-    mousePos.endRow = rows;
-    mousePos.endCol = cols;
-    mousePos.dragEventName = null;
-    const tempArr = [...mv.value];
-    const minRow = mousePos.startRow < mousePos.endRow ? mousePos.startRow : mousePos.endRow;
-    const maxRow = mousePos.startRow > mousePos.endRow ? mousePos.startRow : mousePos.endRow;
-    const minCol = mousePos.startCol < mousePos.endCol ? mousePos.startCol : mousePos.endCol;
-    const maxCol = mousePos.startCol > mousePos.endCol ? mousePos.startCol : mousePos.endCol;
-    for (let i = minRow; i <= maxRow; i++) {
-      for (let j = minCol; j <= maxCol; j++) {
-        tempArr[i][j] = !tempArr[i][j];
-      }
-    }
-    mv.value = [...tempArr];
-    mousePos.dragRow = null;
-    mousePos.dragCol = null;
-  };
-
-  /**
-   * 마우스다운 후 이벤트명이 mousemove일 때 실행되는 이벤트
-   * 즉, 드래그할 때의 박스들의 rows, cols값을 입력받음
-   * @param rows
-   * @param cols
-   */
-  const mousemoveBox = (rows, cols) => {
-    mousePos.dragRow = rows;
-    mousePos.dragCol = cols;
-  };
-
-  /**
-   * tbody밖으로 마우스벗어나는 경우 마우스업하는 이벤트 실행
-   */
-  const mouseleaveBoxArea = () => {
-    mouseupBox(mousePos.dragRow, mousePos.dragCol);
-  };
-
-  /**
-   * 선택된 Column의 첫번째 row의 값의 반대로 전체 적용
-   * @param wIdx
-   */
-  const selectColumn = (wIdx) => {
-    const tempArr = [...mv.value];
-    const firstValue = tempArr[0][wIdx];
-    for (let i = 0; i < tempArr.length; i++) {
-      tempArr[i][wIdx] = !firstValue;
-    }
-    mv.value = [...tempArr];
-  };
-
-  /**
-   * 선택된 Row의 첫번째 column의 값의 반대로 전체 적용
-   * @param hIdx
-   */
-  const selectRow = (hIdx) => {
-    const tempArr = [...mv.value];
-    const firstValue = tempArr[hIdx][0];
-    for (let i = 0; i < tempArr[0].length; i++) {
-      tempArr[hIdx][i] = !firstValue;
-    }
-    mv.value = [...tempArr];
-  };
-
-  return {
-    mousePos,
-    selectionStyle,
-    mousedownBox,
-    mouseupBox,
-    mousemoveBox,
-    mouseleaveBoxArea,
-    selectColumn,
-    selectRow,
-  };
-};