evui 3.4.207 → 3.4.208

package/src/components/grid/GridColumnSetting.vue

@@ -1,358 +0,0 @@
-<template>
-  <template v-if="isShowColumnSetting">
-    <teleport to="#ev-grid-column-setting-modal">
-      <section
-        ref="columnSettingWrapper"
-        v-clickoutside="hideColumnSetting"
-        class="ev-grid-column-setting"
-        :style="columnSettingStyle"
-      >
-        <div class="ev-grid-column-setting__header">
-          <p class="header-title"> {{ textInfo.title }} </p>
-          <ev-text-field
-            v-model="searchVm"
-            type="search"
-            :placeholder="textInfo.search"
-            @input="onSearchColumn"
-          />
-        </div>
-        <div class="ev-grid-column-setting__content">
-          <template v-if="columnList.length">
-            <ev-checkbox-group
-              v-model="checkColumnGroup"
-              @change="onCheckColumn"
-            >
-              <ev-checkbox
-                v-for="(column, idx) in columnList"
-                :key="`column_${idx}`"
-                :label="column?.text"
-                :disabled="!!column?.fixed"
-                :tooltip-title="column?.label ?? ''"
-              >
-                {{ column?.label }}
-              </ev-checkbox>
-            </ev-checkbox-group>
-          </template>
-          <template v-else>
-            <p class="is-empty"> {{ textInfo.empty }} </p>
-          </template>
-        </div>
-        <div class="ev-grid-column-setting__footer">
-          <ev-button
-            type="primary"
-            :disabled="isDisabled"
-            @click="onApplyColumn"
-          >
-            {{ textInfo.ok }}
-          </ev-button>
-        </div>
-      </section>
-    </teleport>
-  </template>
-</template>
-
-<script>
-import { clickoutside } from '@/directives/clickoutside';
-import {
-  computed,
-  nextTick,
-  onBeforeMount,
-  reactive,
-  ref,
-  watch,
-} from 'vue';
-import { cloneDeep } from 'lodash-es';
-
-export default {
-  name: 'EVGridColumnSetting',
-  directives: {
-    clickoutside,
-  },
-  props: {
-    isShow: {
-      type: Boolean,
-      default: false,
-    },
-    columns: {
-      type: [Array],
-      default: () => [],
-    },
-    hiddenColumn: {
-      type: String,
-      default: '',
-    },
-    position: {
-      type: Object,
-      default: () => ({
-        top: 0,
-        left: 0,
-        columnListMenuWidth: 0,
-      }),
-    },
-    isShowMenuOnClick: {
-      type: Boolean,
-      default: false,
-    },
-    textInfo: {
-      type: Object,
-      default: () => ({
-        title: 'Column List',
-        search: 'Search',
-        empty: 'No records',
-        ok: 'OK',
-      }),
-    },
-  },
-  emits: {
-    'update:isShow': [Boolean],
-    'update:isShowMenuOnClick': [Boolean],
-    'apply-column': null,
-  },
-  setup(props, { emit }) {
-    const isShowColumnSetting = computed({
-      get: () => props.isShow,
-      set: val => emit('update:isShow', val),
-    });
-
-    const columnSettingWrapper = ref(null);
-    const searchVm = ref('');
-    const isSearch = ref(false);
-    const checkColumnGroup = ref([]);
-    const originColumnList = ref([]);
-    const searchColumnList = ref([]);
-    const applyColumnList = ref([]);
-    const columnList = computed(() => (isSearch.value
-      ? searchColumnList.value : originColumnList.value));
-    const isDisabled = computed(() => !columnList.value.length);
-    let timer = null;
-    let lastCheckedColumn = null;
-    const columnSettingStyle = reactive({
-      top: null,
-      left: null,
-    });
-    const computedIsShowMenuOnClick = computed({
-      get: () => props.isShowMenuOnClick,
-      set: val => emit('update:isShowMenuOnClick', val),
-    });
-
-    const onCheckColumn = (columns) => {
-      if (columns?.length === 1) {
-        lastCheckedColumn = columns[0];
-      } else if (columns?.length < 1) { // 최소 한개 컬럼은 선택되도록
-        if (lastCheckedColumn == null) {
-          lastCheckedColumn = originColumnList.value[0]?.text;
-        }
-        checkColumnGroup.value.push(lastCheckedColumn);
-      }
-    };
-
-    const onSearchColumn = (searchWord) => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-
-      timer = setTimeout(() => {
-        isSearch.value = false;
-
-        if (searchWord) {
-          const lowerCasedSearchWord = searchWord.toString().toLowerCase();
-          searchColumnList.value = originColumnList.value.filter((column) => {
-            const columnName = column.label.toString().toLowerCase();
-            return columnName.includes(lowerCasedSearchWord);
-          });
-
-          isSearch.value = true;
-        }
-      }, 500);
-    };
-
-    const initSearchValue = () => {
-      searchVm.value = '';
-      isSearch.value = false;
-      searchColumnList.value.length = 0;
-    };
-
-    const initValue = () => {
-      const columns = applyColumnList.value.length ? applyColumnList.value : originColumnList.value;
-
-      checkColumnGroup.value = columns
-        .filter(col => col.originChecked)
-        .map(col => col.text);
-
-      initSearchValue();
-    };
-    const onApplyColumn = () => {
-      applyColumnList.value = originColumnList.value
-        .filter(col => checkColumnGroup.value.includes(col.text));
-      const checkedColumns = applyColumnList.value.map(col => col.text);
-
-      emit('apply-column', checkedColumns);
-      isShowColumnSetting.value = false;
-      computedIsShowMenuOnClick.value = false;
-    };
-
-    const prevColumns = ref();
-    const prevCheckColumnGroup = ref();
-    const setColumns = () => {
-      prevCheckColumnGroup.value = cloneDeep(checkColumnGroup.value);
-      originColumnList.value = props.columns
-        .filter(col => !col.hide && col.caption)
-        .map((col) => {
-          const prevColumn = prevColumns.value?.find(c => c.field === col.field);
-          let isChecked = false;
-
-          if (prevColumn) {
-            const isHiddenChanged = prevColumn?.hiddenDisplay !== col?.hiddenDisplay;
-            isChecked = isHiddenChanged || !prevCheckColumnGroup.value?.length
-              ? !col?.hiddenDisplay
-              : prevCheckColumnGroup.value.includes(col.field);
-          } else {
-            isChecked = !col.hiddenDisplay;
-          }
-          return {
-            label: col.caption,
-            text: col.field,
-            originChecked: !col.hiddenDisplay,
-            checked: isChecked,
-            fixed: col.fixed,
-          };
-        });
-
-      checkColumnGroup.value = originColumnList.value
-        .filter(col => col.checked)
-        .map(col => col.text);
-      applyColumnList.value.length = 0;
-      prevColumns.value = cloneDeep(props.columns);
-    };
-
-    const hideColumnSetting = () => {
-      isShowColumnSetting.value = false;
-      computedIsShowMenuOnClick.value = false;
-    };
-
-    const initWrapperDiv = () => {
-      const root = document.createElement('div');
-      root.id = 'ev-grid-column-setting-modal';
-      root.setAttribute('style', 'position: absolute; top: 0; left: 0;');
-      const hasRoot = document.getElementById('ev-grid-column-setting-modal');
-      if (!hasRoot) {
-        document.body.appendChild(root);
-      }
-    };
-
-    const setPosition = async () => {
-      await nextTick();
-
-      const docWidth = document.documentElement.clientWidth;
-      const docHeight = document.documentElement.clientHeight;
-      const columnSettingWrapperRect = columnSettingWrapper.value?.getBoundingClientRect();
-      const columnSettingWidth = columnSettingWrapperRect?.width;
-      const columnSettingHeight = columnSettingWrapperRect?.height;
-
-      const { top, left, columnListMenuWidth } = props.position;
-      let columnSettingLeft;
-
-      if (columnListMenuWidth) { // 컨텍스트 메뉴일 때
-        columnSettingLeft = left;
-
-        if (docWidth < left + columnSettingWidth) {
-          columnSettingLeft = left - columnSettingWidth - columnListMenuWidth;
-        }
-      } else {
-        columnSettingLeft = left - columnSettingWidth;
-      }
-      const maximumPosY = docHeight - columnSettingHeight;
-      columnSettingStyle.top = `${Math.min(top, maximumPosY) + document.documentElement.scrollTop}px`;
-      columnSettingStyle.left = `${columnSettingLeft + document.documentElement.scrollLeft}px`;
-    };
-
-    onBeforeMount(() => initWrapperDiv());
-
-    watch(() => props.columns, () => {
-      setColumns();
-    }, { immediate: true, deep: true });
-
-    watch(() => isShowColumnSetting.value, async () => {
-      initValue();
-
-      if (isShowColumnSetting.value) {
-        await setPosition();
-      }
-    });
-
-    watch(() => props.hiddenColumn, (value) => {
-      const filterColumns = applyColumnList.value.length
-        ? applyColumnList.value.filter(col => col.text !== value)
-        : originColumnList.value.filter(col => (col.text !== value && col.checked));
-
-      applyColumnList.value = filterColumns;
-      checkColumnGroup.value = filterColumns.map(col => col.text);
-    });
-
-    return {
-      columnSettingWrapper,
-      columnSettingStyle,
-      isShowColumnSetting,
-      checkColumnGroup,
-      columnList,
-      searchVm,
-      isDisabled,
-      onSearchColumn,
-      onApplyColumn,
-      onCheckColumn,
-      hideColumnSetting,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.ev-grid-column-setting {
-  position: absolute;
-  width: 180px;
-  border: 1px solid #D0D0D0;
-  background: #FFFFFF;
-  font-size: 12px;
-  z-index: 1;
-  &__header {
-    padding: 10px;
-
-    .ev-text-field {
-      margin-top: 10px;
-    }
-  }
-
-  &__content {
-    height: 120px;
-    padding: 0 10px;
-    border-top: 1px solid #CED4DA;
-    border-bottom: 1px solid #CED4DA;
-    overflow: auto;
-
-    .ev-checkbox {
-      display: block;
-      padding: 10px 0;
-
-      .ev-checkbox-label {
-        width: 120px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-    .is-empty {
-      height: 30px;
-      text-align: center;
-    }
-  }
-
-  &__footer {
-    display: flex;
-    padding: 5px 10px;
-
-    .ev-button {
-      margin-left: auto;
-    }
-  }
-}
-</style>

package/src/components/grid/GridFilterSetting.vue

@@ -1,323 +0,0 @@
-<template>
-  <template v-if="isShowFilterSetting">
-    <teleport to="#ev-grid-filter-setting-modal">
-      <section
-        v-clickoutside="() => { isShowFilterSetting = false }"
-        class="ev-grid-filter-setting"
-        :style="{
-          top: $props.position.top,
-          left: $props.position.left,
-        }"
-      >
-        <div class="ev-grid-filter-setting__header">
-          <ev-icon icon="ev-icon-filter-list"></ev-icon>
-          <span class="header-title"> Filter ({{$props.column.caption}}) </span>
-        </div>
-        <div class="ev-grid-filter-setting__content">
-          <div
-            v-for="(item, idx) in filteringItems"
-            :key="idx"
-            class="ev-grid-filter-setting__row">
-            <ev-select
-              v-model="item.operator"
-              class="ev-grid-filter-setting__row--operator"
-              :title="getSelectTitle(items1, item.operator)"
-              :items="items1"
-              :disabled="idx > 1"
-              :style="{
-                visibility: idx > 0 ? 'visible' : 'hidden',
-              }"
-              @change="changeOperator"
-            />
-            <ev-select
-              v-model="item.comparison"
-              class="ev-grid-filter-setting__row--comparison"
-              :title="getSelectTitle(items2, item.comparison)"
-              :items="items2"
-              @change="changeComparison(item.comparison, idx)"
-            />
-            <ev-select
-              v-if="$props.column.type === 'boolean'"
-              v-model="item.value"
-              class="ev-grid-filter-setting__row--comparison"
-              :items="booleanItems"
-            />
-            <ev-text-field
-              v-else
-              v-model="item.value"
-              class="ev-grid-filter-setting__row--value"
-              :disabled="item.comparison === 'isEmpty' || item.comparison === 'isNotEmpty'"
-              @input="validateValue($props.column.type, item)"
-            />
-            <div
-              class="ev-grid-filter-setting__row--button"
-            >
-              <ev-icon
-                icon="ev-icon-trash2"
-                @click="removeRow(idx)"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="ev-grid-filter-setting__footer">
-          <ev-button
-            type="primary"
-            @click="applyFiltering"
-          >
-            OK
-          </ev-button>
-        </div>
-      </section>
-    </teleport>
-  </template>
-</template>
-
-<script>
-import { clickoutside } from '@/directives/clickoutside';
-import { computed, onBeforeMount, ref, watch } from 'vue';
-import { cloneDeep } from 'lodash-es';
-
-export default {
-  name: 'EVGridFilterSetting',
-  directives: {
-    clickoutside,
-  },
-  props: {
-    isShow: {
-      type: Boolean,
-      default: false,
-    },
-    position: {
-      type: Object,
-      default: () => ({
-        top: 0,
-        left: 0,
-      }),
-    },
-    column: {
-      type: Object,
-      default: () => ({}),
-    },
-    items: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: {
-    'update:isShow': null,
-    'apply-filtering': null,
-  },
-  setup(props, { emit }) {
-    const filteringItems = ref([]);
-    const filteringColumn = computed(() => props.column);
-    // const columnField = computed(() => {
-    //   console.log(props.column);
-    //   return props.column?.field;
-    // });
-    const items1 = [
-      { name: 'AND', value: 'and' },
-      { name: 'OR', value: 'or' },
-    ];
-    const booleanItems = [
-      { name: 'true', value: 'true' },
-      { name: 'false', value: 'false' },
-    ];
-    const numberItems = [
-      { name: '=', value: '=' },
-      { name: '!=', value: '!=' },
-      { name: '<', value: '<' },
-      { name: '>', value: '>' },
-      { name: '<=', value: '<=' },
-      { name: '>=', value: '>=' },
-    ];
-    const stringItems = [
-      { name: 's%', value: 's%' }, // starts with
-      { name: '%s', value: '%s' }, // ends with
-      { name: '%s%', value: '%s%' }, // contains
-      { name: 'Not Like', value: 'notLike' }, // does not contains
-      { name: '=', value: '=' }, // is
-      { name: '!=', value: '!=' }, // is not
-    ];
-    const commonItems = [
-      { name: 'Is empty', value: 'isEmpty' },
-      { name: 'Is not empty', value: 'isNotEmpty' },
-    ];
-    const getComparisonItems = (columnType) => {
-      if (columnType === 'string' || columnType === 'stringNumber') {
-        return [...stringItems, ...commonItems];
-      } else if (columnType === 'number' || columnType === 'float') {
-        return [...numberItems, ...commonItems];
-      } else if (columnType === 'boolean') {
-        return [
-          { name: '=', value: '=' },
-        ];
-      }
-      return [];
-    };
-    const items2 = computed(() => getComparisonItems(props.column.type));
-    const isShowFilterSetting = computed({
-      get: () => props.isShow,
-      set: val => emit('update:isShow', val),
-    });
-    const addRow = () => {
-      const operator = filteringItems.value.length >= 2 ? filteringItems.value[1].operator : 'and';
-      filteringItems.value.push({
-        comparison: '=',
-        operator,
-        value: '',
-        caption: filteringColumn.value.caption,
-      });
-    };
-    const removeRow = (idx) => {
-      if (filteringItems.value.length > 1) {
-        filteringItems.value.splice(idx, 1);
-      } else if (idx === 0) {
-        filteringItems.value[0].comparison = '=';
-        filteringItems.value[0].value = '';
-      }
-    };
-    const changeComparison = (comparison, idx) => {
-      if (comparison === 'isEmpty' || comparison === 'isNotEmpty') {
-        filteringItems.value[idx].value = '';
-      }
-    };
-    const changeOperator = (val) => {
-      filteringItems.value = filteringItems.value.map(item => ({ ...item, operator: val }));
-    };
-    const applyFiltering = () => {
-      emit(
-        'apply-filtering',
-        filteringColumn.value.field,
-        filteringItems.value.filter(item => item.value
-          || item.comparison === 'isEmpty' || item.comparison === 'isNotEmpty'),
-      );
-    };
-    watch(
-      () => props.isShow,
-      (isShow) => {
-        const rowList = [];
-        const items = cloneDeep(props.items);
-        if (isShow && filteringColumn.value.field) {
-          if (!items[filteringColumn.value.field]?.length) {
-            rowList.push({
-              comparison: '=',
-              operator: 'and',
-              value: '',
-              caption: filteringColumn.value.caption,
-            });
-          } else {
-            items[filteringColumn.value.field].forEach((row) => {
-              rowList.push(row);
-            });
-          }
-          filteringItems.value = rowList;
-        }
-      },
-    );
-
-    const getSelectTitle = (items, title) => items.find(item => item.value === title)?.name || '';
-
-    const initWrapperDiv = () => {
-      const root = document.createElement('div');
-      root.id = 'ev-grid-filter-setting-modal';
-      root.setAttribute('style', 'position: absolute; top: 0; left: 0;');
-      const hasRoot = document.getElementById('ev-grid-filter-setting-modal');
-      if (!hasRoot) {
-        document.body.appendChild(root);
-      }
-    };
-
-    onBeforeMount(() => {
-      initWrapperDiv();
-    });
-
-    const validateValue = (type, item) => {
-      if (type === 'number' || type === 'float') {
-        // 숫자, 마침표, 콤마만 입력 가능
-        item.value = item.value.replace(/[^0-9.,]/g, '');
-      }
-    };
-    return {
-      filteringItems,
-      isShowFilterSetting,
-      items1,
-      items2,
-      booleanItems,
-      addRow,
-      removeRow,
-      changeOperator,
-      applyFiltering,
-      changeComparison,
-      getSelectTitle,
-      validateValue,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.ev-grid-filter-setting {
-  position: absolute;
-  width: auto;
-  border: 1px solid #D0D0D0;
-  background: #FFFFFF;
-  font-size: 12px;
-  z-index: 1;
-  &__header {
-    padding: 10px;
-
-    .ev-text-field {
-      margin-top: 10px;
-    }
-  }
-  &__row {
-    display: flex;
-    width: 100%;
-    padding: 6px 0;
-    gap: 5px;
-    .ev-select__wrapper {
-      width: inherit;
-    }
-    &--operator {
-      width: 80px;
-    }
-    &--comparison {
-      width: 120px;
-    }
-    &--value {
-      width: 120px;
-    }
-    &--button {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      &.add {
-        padding: 6px 0;
-        justify-content: end;
-      }
-      i {
-        font-size: 22px;
-        margin-left: 8px;
-        &:hover {
-          opacity: 0.6;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-  &__content {
-    padding: 0 10px;
-    border-top: 1px solid #CED4DA;
-    border-bottom: 1px solid #CED4DA;
-  }
-
-  &__footer {
-    display: flex;
-    padding: 5px 10px;
-
-    .ev-button {
-      margin-left: auto;
-    }
-  }
-}
-</style>