evui 3.4.206 → 3.4.208

package/src/components/chartGroup/ChartGroup.vue

@@ -1,144 +0,0 @@
-<template>
-  <div
-    v-if="zoomOptions.toolbar.show"
-    ref="evChartToolbarRef"
-  >
-    <ev-chart-toolbar
-      :toolbar="zoomOptions.toolbar"
-      @on-click-toolbar="onClickToolbar"
-    />
-  </div>
-
-  <div
-    ref="evChartGroupRef"
-    class="ev-chart-group__wrapper"
-  >
-    <slot />
-  </div>
-</template>
-
-<script>
-import { onMounted, ref, watch, provide, toRef, computed } from 'vue';
-import evChartToolbar from '../chart/ChartToolbar';
-import { useGroupModel } from './uses';
-import { useZoomModel } from '../chart/uses';
-
-export default {
-  name: 'EvChartGroup',
-  components: {
-    evChartToolbar,
-  },
-  props: {
-    options: {
-      type: Object,
-      default: () => ({}),
-    },
-    zoomStartIdx: {
-      type: Number,
-      default: 0,
-    },
-    zoomEndIdx: {
-      type: Number,
-      default: 0,
-    },
-    groupSelectedLabel: {
-      type: Object,
-      default: null,
-    },
-  },
-  emits: [
-    'update:groupSelectedLabel',
-    'update:zoomStartIdx',
-    'update:zoomEndIdx',
-    'update:groupHoveredLabel',
-  ],
-  setup(props, { emit }) {
-    const {
-      getNormalizedOptions,
-      isExecuteZoom,
-      brushSeries,
-      evChartGroupRef,
-      evChartPropsInGroup,
-    } = useGroupModel();
-
-    const normalizedOptions = getNormalizedOptions(props.options);
-    provide('isExecuteZoom', isExecuteZoom);
-    provide('isChartGroup', true);
-    provide('brushSeries', brushSeries);
-    provide('evChartPropsInGroup', evChartPropsInGroup);
-    const groupSelectedLabel = computed({
-      get: () => props.groupSelectedLabel,
-      set: val => emit('update:groupSelectedLabel', val),
-    });
-    provide('groupSelectedLabel', groupSelectedLabel);
-    const groupHoveredLabel = ref(null);
-    provide('groupHoveredLabel', groupHoveredLabel);
-
-    watch(() => props.options.syncHover, (newSyncHover) => {
-      if (newSyncHover) {
-        groupHoveredLabel.value = { label: '', horizontal: false };
-      } else {
-        groupHoveredLabel.value = null;
-      }
-    }, {
-      immediate: true,
-    });
-
-    const {
-      evChartZoomOptions,
-      evChartInfo,
-      evChartToolbarRef,
-      evChartClone,
-      brushIdx,
-
-      createEvChartZoom,
-      setOptionsForUseZoom,
-      setDataForUseZoom,
-      controlZoomIdx,
-      onClickToolbar,
-    } = useZoomModel(
-      normalizedOptions,
-      { wrapper: null, evChartGroupRef },
-      groupSelectedLabel,
-      evChartPropsInGroup,
-    );
-
-    provide('evChartClone', evChartClone);
-    provide('evChartInfo', evChartInfo);
-    provide('brushIdx', brushIdx);
-
-    onMounted(() => {
-      createEvChartZoom();
-    });
-
-    watch(() => evChartInfo.props.data, (evChartProps) => {
-      setDataForUseZoom(evChartProps);
-    }, { deep: true });
-
-    watch(() => props.options, (zoomOptions) => {
-      const newOpt = getNormalizedOptions(zoomOptions);
-
-      setOptionsForUseZoom(newOpt);
-    }, { deep: true });
-
-    watch(() => [props.zoomStartIdx, props.zoomEndIdx], ([zoomStartIdx, zoomEndIdx]) => {
-      if (brushIdx.isUseButton || brushIdx.isUseScroll) {
-        return;
-      }
-
-      controlZoomIdx(zoomStartIdx, zoomEndIdx);
-    });
-
-    return {
-      evChartGroupRef,
-      evChartToolbarRef,
-      zoomOptions: toRef(evChartZoomOptions, 'zoom'),
-      onClickToolbar,
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-  @import 'style/chartGroup.scss';
-</style>

package/src/components/chartGroup/index.js

@@ -1,9 +0,0 @@
-import VueResizeObserver from 'vue-resize-observer';
-import EvChartGroup from './ChartGroup';
-
-EvChartGroup.install = (app) => {
-  app.component(EvChartGroup.name, EvChartGroup);
-  app.use(VueResizeObserver);
-};
-
-export default EvChartGroup;

package/src/components/chartGroup/style/chartGroup.scss

@@ -1,5 +0,0 @@
-.ev-chart-group__wrapper {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-}

package/src/components/chartGroup/uses.js

@@ -1,53 +0,0 @@
-import { ref, reactive } from 'vue';
-import { defaultsDeep } from 'lodash-es';
-
-const DEFAULT_OPTIONS = {
-  zoom: {
-    bufferMemoryCnt: 100,
-    keepZoomStatus: false,
-    useAnimation: true,
-    useWheelMove: true,
-    toolbar: {
-      show: false,
-      items: {
-        previous: {
-          icon: 'ev-icon-allow2-left',
-          size: 'medium',
-          title: 'Previous',
-        },
-        latest: {
-          icon: 'ev-icon-allow2-right',
-          size: 'medium',
-          title: 'Latest',
-        },
-        reset: {
-          icon: 'ev-icon-redo',
-          size: 'medium',
-          title: 'Reset',
-        },
-        dragZoom: {
-          icon: 'ev-icon-zoomin',
-          size: 'medium',
-          title: 'Drag Zoom',
-        },
-      },
-    },
-  },
-};
-
-// eslint-disable-next-line import/prefer-default-export
-export const useGroupModel = () => {
-  const isExecuteZoom = ref(false);
-  const evChartGroupRef = ref();
-  const evChartPropsInGroup = ref([]);
-  const brushSeries = reactive({ list: [], chartIdx: null });
-  const getNormalizedOptions = options => defaultsDeep({}, options, DEFAULT_OPTIONS);
-
-  return {
-    getNormalizedOptions,
-    isExecuteZoom,
-    brushSeries,
-    evChartGroupRef,
-    evChartPropsInGroup,
-  };
-};

package/src/components/checkbox/Checkbox.vue

@@ -1,229 +0,0 @@
-<template>
-  <label
-    class="ev-checkbox"
-    :class="[
-      { disabled, },
-      { checked, },
-    ]"
-  >
-    <input
-      ref="checkbox"
-      v-model="mv"
-      type="checkbox"
-      class="ev-checkbox-input"
-      :disabled="disabled"
-      :value="label"
-      :readonly="readonly"
-      @change="changeMv"
-    />
-    <span
-      ref="checkboxLabel"
-      class="ev-checkbox-label"
-    >
-      <template v-if="$slots.default">
-        <slot />
-      </template>
-      <template v-else>
-        {{ label }}
-      </template>
-    </span>
-  </label>
-</template>
-
-<script>
-import { ref, computed, watch, nextTick, inject, onMounted } from 'vue';
-
-export default {
-  name: 'EvCheckbox',
-  props: {
-    modelValue: {
-      type: [String, Number, Boolean, Symbol, Array],
-      default: false,
-    },
-    label: {
-      type: [String, Number, Boolean, Symbol, Object],
-      default: null,
-    },
-    tooltipTitle: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    indeterminate: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    'update:modelValue': null,
-    'update:indeterminate': [Boolean],
-    change: null,
-  },
-  setup(props, { emit }) {
-    /**
-     * checkbox label Ref
-     */
-    const checkboxLabel = ref();
-
-    /**
-     * checkbox label의 title(마우스 호버 시 보이는 내용)사용 되는
-     * tooltipTitle props의 값이 있을 시 태그에 title 속성 추가
-     */
-    onMounted(() => {
-      if (checkboxLabel.value && props.tooltipTitle) {
-        checkboxLabel.value.title = props.tooltipTitle;
-      }
-    });
-    /**
-     * checkbox Ref
-     */
-    const checkbox = ref(null);
-
-    /**
-     * checkbox의 modelView 값
-     * checkbox group 컴포넌트를 사용하는 경우 Provide('EvCheckboxGroupMv')가 실행
-     * checkbox group 컴포넌트가 없는 경우 2nd argument 실행
-     *   - checkbox html5 indeterminate attribute 여부에 따라 v-model:indeterminate값을 update
-     *   - Vue3의 v-model:attr 방식은 Vue2의 :attr.sync와 동일 (사용방식이 변경)
-     */
-    const mv = inject(
-      'EvCheckboxGroupMv',
-      computed({
-        get: () => props.modelValue,
-        set: (val) => {
-          if (val && !checkbox.value.indeterminate) {
-            emit('update:indeterminate', false);
-          }
-          emit('update:modelValue', val);
-        },
-      }),
-    );
-
-    /**
-     * mv에 해당 값이 포함 또는 동일한지에 따라 check여부가 결정
-     * return {Boolean}
-     */
-    const refLabel = computed(() => props.label);
-    const checked = computed(() => {
-      if (Array.isArray(mv.value)) {
-        return mv.value.includes(refLabel.value);
-      }
-      return mv.value;
-    });
-
-    /**
-     * 해당 컴포넌트를 '직접' 클릭하여 변경했을 때 실행되는 메소드
-     * checkbox group을 사용하는 경우 Provide('EvCheckboxGroupChange')가 실행
-     * checkbox group을 사용하지 않는 경우 2nd argument 실행
-     */
-    const changeMv = inject(
-      'EvCheckboxGroupChange',
-      async (e) => {
-        await nextTick();
-        emit('change', mv.value, e);
-      },
-    );
-
-    /**
-     * props의 indeterminate 값을 감시하여
-     * checkbox element의 indeterminate attribute에 값 적용
-     */
-    watch(
-      () => props.indeterminate,
-      (val) => {
-        nextTick(() => {
-          if (!checkbox.value) {
-            return;
-          }
-          checkbox.value.indeterminate = val;
-        });
-      }, { immediate: true },
-    );
-
-    return {
-      mv,
-      checkboxLabel,
-      checkbox,
-      checked,
-      changeMv,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-
-.ev-checkbox {
-  margin-right: 30px;
-  cursor: pointer;
-  user-select: none;
-  &-label {
-    padding-left: 5px;
-  }
-  &-input {
-    cursor: pointer;
-  }
-}
-
-@include state('disabled') {
-  .ev-checkbox-label {
-    @include evThemify() {
-      color: evThemed('disabled');
-    }
-  }
-  .ev-checkbox-input,
-  .ev-checkbox-label {
-    cursor: not-allowed !important;
-  }
-}
-@include state('type-button') {
-  .ev-checkbox {
-    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-checkbox-input {
-    @include visible-hide();
-  }
-  .ev-checkbox-label {
-    display: inline-block;
-    padding: 7px 12px;
-  }
-}
-</style>

package/src/components/checkbox/index.js

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

package/src/components/checkboxGroup/CheckboxGroup.vue

@@ -1,44 +0,0 @@
-<template>
-  <div
-    class="ev-checkbox-group"
-    :class="{ 'type-button': type === 'button' }"
-    role="group"
-  >
-    <slot />
-  </div>
-</template>
-
-<script>
-import { computed, nextTick, provide } from 'vue';
-
-export default {
-  name: 'EvCheckboxGroup',
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: 'checkbox',
-    },
-  },
-  emits: {
-    'update:modelValue': null,
-    change: null,
-  },
-  setup(props, { emit }) {
-    const mv = computed({
-      get: () => props.modelValue,
-      set: labels => emit('update:modelValue', labels),
-    });
-    provide('EvCheckboxGroupMv', mv);
-
-    const change = async (e) => {
-      await nextTick();
-      emit('change', mv.value, e);
-    };
-    provide('EvCheckboxGroupChange', change);
-  },
-};
-</script>

package/src/components/checkboxGroup/index.js

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

package/src/components/contextMenu/ContextMenu.vue

@@ -1,95 +0,0 @@
-<template>
-  <template v-if="isShow && items.length">
-    <teleport to="#ev-context-menu-modal">
-      <menu-list
-        ref="rootMenuList"
-        v-model:isShow="isShow"
-        v-clickoutside="hide"
-        :class="customClass"
-        :items="items"
-        :style="menuStyle"
-        :comp="comp"
-      >
-        <template
-          v-for="(_, slotName) in $slots"
-          :key="slotName"
-          #[slotName]="slotProps"
-        >
-          <slot
-            :name="slotName"
-            v-bind="slotProps"
-          />
-        </template>
-      </menu-list>
-    </teleport>
-  </template>
-</template>
-
-<script>
-import { onBeforeMount } from 'vue';
-import { clickoutside } from '@/directives/clickoutside';
-import MenuList from './MenuList';
-import { useModel, usePosition } from './uses';
-
-export default {
-  name: 'EvContextMenu',
-  directives: {
-    clickoutside,
-  },
-  components: {
-    MenuList,
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-      validator: (list) => {
-        if (list.some(v => v.children !== undefined && !Array.isArray(v.children))) {
-          console.warn('[EVUI][ContextMenu] children attribute must be \'Array\' type.');
-          return false;
-        } else if (list.some(v => v.click !== undefined && typeof v.click !== 'function')) {
-          console.warn('[EVUI][ContextMenu] click attribute must be \'Function\' type.');
-          return false;
-        }
-        return true;
-      },
-    },
-    customClass: {
-      type: String,
-      default: '',
-    },
-    isShowMenuOnClick: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup() {
-    const {
-      comp,
-      initWrapperDiv,
-    } = useModel();
-
-    const {
-      isShow,
-      rootMenuList,
-      menuStyle,
-      show,
-      hide,
-    } = usePosition();
-
-    onBeforeMount(() => initWrapperDiv());
-
-    return {
-      isShow,
-      rootMenuList,
-      menuStyle,
-      comp,
-      show,
-      hide,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-</style>