evui 3.4.206 → 3.4.208

package/src/components/grid/GridPagination.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="grid-pagination">
-    <ev-pagination
-      v-model="currentValue"
-      :total="total"
-      :per-page="perPage"
-      :visible-page="visiblePage"
-      :show-page-info="showPageInfo"
-      :order="order"
-      @change="changePage"
-    >
-    </ev-pagination>
-  </div>
-</template>
-
-<script>
-import { ref, watch } from 'vue';
-
-export default {
-  name: 'EvGridPagination',
-  props: {
-    total: {
-      type: [Number, String],
-      default: 0,
-    },
-    visiblePage: {
-      type: [Number, String],
-      default: 8,
-    },
-    perPage: {
-      type: [Number, String],
-      default: 20,
-    },
-    modelValue: {
-      type: [Number, String],
-      default: 1,
-    },
-    showPageInfo: {
-      type: Boolean,
-      default: false,
-    },
-    order: {
-      type: String,
-      default: 'left',
-      validator: val => ['left', 'right', 'center'].includes(val),
-    },
-  },
-  emits: {
-    'update:modelValue': null,
-  },
-  setup(props, { emit }) {
-    const currentValue = ref(props.modelValue);
-    const changePage = (page) => {
-      currentValue.value = page > 0 ? page : 1;
-      emit('update:modelValue', currentValue.value);
-    };
-    watch(
-      () => props.modelValue,
-      (value) => {
-        currentValue.value = value;
-      },
-    );
-    return {
-      currentValue,
-      changePage,
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.grid-pagination {
-  padding-top: 8px;
-}
-</style>

package/src/components/grid/GridSummary.vue

@@ -1,314 +0,0 @@
-<template>
-  <div
-    ref="summaryRef"
-    :class="{
-      'grid-summary': true,
-      'non-border': styleInfo.borderStyle === 'none',
-    }"
-  >
-    <ul class="column-list">
-      <li
-        v-if="showCheckbox"
-        :class="{
-          'column': true,
-          'non-border': !!styleInfo.borderStyle,
-        }"
-        :style="{
-          'width': `${styleInfo.minWidth}px`,
-          'line-height': `${styleInfo.rowHeight}px`
-        }"
-      >
-        <span :style="{'height': `${styleInfo.rowHeight}px`}" />
-      </li>
-      <template
-        v-for="(column, index) in columns"
-        :key="`summary_${index}`"
-      >
-        <li
-          v-if="!column.hide"
-          :class="{
-            column: true,
-            'non-border': !!styleInfo.borderStyle,
-            [column.type]: column.type,
-            [column.align]: column.align,
-          }"
-          :style="{
-            width: `${column.width}px`,
-            'min-width': `${styleInfo.minWidth}px`,
-            'line-height': `${styleInfo.rowHeight}px`,
-          }"
-        >
-          <span
-            v-if="column.summaryType || column.summaryRenderer"
-            :style="{
-              width: '100%',
-              height: `${styleInfo.rowHeight}px`,
-            }"
-          >
-            <div
-              v-if="column.summaryRenderer"
-              :title="getSummaryRenderer(column)"
-            >
-              {{ getSummaryRenderer(column) }}
-            </div>
-            <div
-              v-else
-              :title="getSummaryValue(column)"
-            >
-              {{ getSummaryValue(column)}}
-            </div>
-          </span>
-          <span
-            v-else
-            :style="{'height': `${styleInfo.rowHeight}px`}"
-          />
-        </li>
-      </template>
-    </ul>
-  </div>
-</template>
-
-<script>
-import { computed, watch, ref, nextTick } from 'vue';
-import { numberWithComma } from '@/common/utils';
-import { bnDivide, bnFloor, bnPlus } from '@/common/utils.bignumber';
-
-export default {
-  name: 'EvGridSummary',
-  props: {
-    stores: {
-      type: Object,
-      default: () => ({}),
-    },
-    orderedColumns: {
-      type: Object,
-      default: () => ({}),
-    },
-    useCheckbox: {
-      type: Boolean,
-      default: false,
-    },
-    styleOption: {
-      type: Object,
-      default: () => ({}),
-    },
-    isTree: {
-      type: Boolean,
-      default: false,
-    },
-    scrollLeft: {
-      type: Number,
-      default: 0,
-    },
-  },
-  setup(props) {
-    const DECIMAL = {
-      max: 20,
-      default: 3,
-    };
-    const summaryRef = ref();
-    const ROW_DATA_INDEX = 2;
-    const stores = computed(() => props.stores);
-    const columns = computed(() => props.orderedColumns);
-    const showCheckbox = computed(() => props.useCheckbox);
-    const styleInfo = computed(() => props.styleOption);
-
-    const getValidDecimal = (decimal) => {
-      if (decimal == null || decimal < 0) {
-        return DECIMAL.default;
-      }
-
-      if (decimal > DECIMAL.max) {
-        return DECIMAL.max;
-      }
-
-      return decimal;
-    };
-
-    const getConvertValue = (column, value) => {
-      if (typeof value === 'string' && value.length === 0) {
-        return value;
-      }
-
-      const { type, decimal } = column;
-      let convertValue = value;
-
-      if (type === 'number') {
-        convertValue = numberWithComma(value);
-        convertValue = convertValue === false ? value : convertValue;
-      } else if (type === 'float') {
-        const floatValue = convertValue.toFixed(getValidDecimal(decimal ?? DECIMAL.default));
-        convertValue = floatValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-      }
-
-      return convertValue;
-    };
-
-    const getColumnIndex = field => columns.value.findIndex(column => column.field === field);
-    const getSummaryValue = (column) => {
-      const {
-        type,
-        field,
-        summaryType,
-        summaryDecimal,
-        summaryOnlyTopParent,
-      } = column;
-
-      let result = '';
-      const columnIndex = getColumnIndex(field);
-      if (columnIndex >= 0) {
-        if (summaryType === 'count') {
-          return stores.value.store.length;
-        }
-        if (type === 'number' || type === 'float') {
-          let columnValues = [];
-          if (props.isTree) {
-            columnValues = stores.value.store.reduce((acc, cur) => {
-              if (summaryOnlyTopParent) {
-                if (!cur.parent) {
-                  acc.push(cur.data?.[field]);
-                }
-              } else {
-                acc.push(cur.data?.[field]);
-              }
-              return acc;
-            }, []);
-          } else {
-            columnValues = stores.value.store.map(row => row[ROW_DATA_INDEX][columnIndex]);
-          }
-          switch (summaryType) {
-            case 'sum': {
-              const sumValue = columnValues.reduce((prev, curr) => {
-                const value = Number(curr);
-                if (!Number.isNaN(value)) {
-                  return bnPlus(prev, value);
-                }
-                return prev;
-              }, 0);
-
-              result = sumValue && bnFloor(
-                sumValue, getValidDecimal(summaryDecimal ?? DECIMAL.default),
-              );
-              break;
-            }
-            case 'average': {
-              const sumValue = columnValues.reduce((prev, curr) => {
-                const value = Number(curr);
-                if (!Number.isNaN(value)) {
-                  return bnPlus(prev, value);
-                }
-                return prev;
-              }, 0);
-              result = sumValue && bnFloor(
-                bnDivide(sumValue, columnValues.length),
-                getValidDecimal(summaryDecimal ?? DECIMAL.default),
-              );
-              break;
-            }
-            case 'max': {
-              const filteredNullValues = columnValues.filter(value => value != null);
-              result = filteredNullValues.length ? Math.max(...filteredNullValues) : '';
-              break;
-            }
-            case 'min': {
-              const filteredNullValues = columnValues.filter(value => value != null);
-              result = filteredNullValues.length ? Math.min(...filteredNullValues) : '';
-              break;
-            }
-            default:
-              break;
-          }
-          result = getConvertValue(column, result);
-        }
-      }
-      return result;
-    };
-    const getSummaryRenderer = (column) => {
-      const str = column.summaryRenderer;
-      const summaryData = column.summaryData ? column.summaryData : [];
-      const fields = [column.field, ...summaryData];
-      let result = str;
-      fields.forEach((name, idx) => {
-        const columnIndex = getColumnIndex(name);
-        if (columnIndex >= 0) {
-          const value = getSummaryValue(stores.value.orderedColumns[columnIndex]);
-          result = result.replace(`{${idx}}`, value);
-        }
-      });
-      return result;
-    };
-    watch(
-      () => props.scrollLeft,
-      (val) => {
-        nextTick(() => {
-          summaryRef.value.scrollLeft = val;
-        });
-      },
-    );
-    return {
-      columns,
-      styleInfo,
-      showCheckbox,
-      summaryRef,
-      getSummaryValue,
-      getSummaryRenderer,
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'style/grid.scss';
-.grid-summary {
-  width: 100%;
-  overflow: hidden;
-
-  @include evThemify() {
-    border-bottom: 1px solid evThemed('disabled');
-    background-color: evThemed('background-lighten');
-  }
-  .non-border {
-    border-bottom: none !important;
-  }
-  span {
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 14px;
-    > div {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    @include evThemify() {
-      color: evThemed('font-color-base');
-    }
-  }
-  .column {
-    &.number,
-    &.float {
-      text-align: right;
-    }
-    &.string,
-    &.stringNumber {
-      text-align: left;
-    }
-    &.center {
-      text-align: center;
-    }
-    &.left {
-      text-align: left;
-      .wrap {
-        justify-content: flex-start;
-      }
-    }
-    &.right {
-      text-align: right;
-      .wrap {
-        justify-content: flex-end;
-      }
-    }
-  }
-}
-</style>

package/src/components/grid/GridToolbar.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="gridToolbar">
-    <slot name="toolbarWrapper"></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'EvGridToolbar',
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-.gridToolbar {
-  height: 30px;
-  margin-bottom: 10px;
-}
-.gridToolbar > .search {
-  float: right;
-  width: auto !important;
-  margin-right: 0 !important;
-}
-.gridToolbar > .ev-button {
-  margin: 0 2px 0 2px;
-}
-.gridToolbar > .grid-setting__icon {
-  float: right;
-  margin: 10px 5px;
-  cursor: pointer;
-  &:hover {
-    opacity: 0.6;
-  }
-}
-</style>

package/src/components/grid/icon/icon-option-button.vue

@@ -1,17 +0,0 @@
-<template>
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="6.49805" cy="11.998" r="1.5" transform="rotate(-90 6.49805 11.998)" fill="#ADB5BD"/>
-    <circle cx="11.998" cy="11.998" r="1.5" transform="rotate(-90 11.998 11.998)" fill="#ADB5BD"/>
-    <path d="M17.498 10.498C18.3265 10.498 18.998 11.1696 18.998 11.998C18.998
-            12.8265 18.3265 13.498 17.498 13.498C16.6696 13.498 15.998 12.8265
-            15.998 11.998C15.998 11.1696 16.6696 10.498 17.498 10.498Z"
-          fill="#ADB5BD"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'GridOptionButton',
-};
-</script>

package/src/components/grid/icon/icon-sort-button.vue

@@ -1,67 +0,0 @@
-<template>
-  <span v-if="icon === 'basic'">
-    <svg
-      width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect width="14" height="14" rx="2" fill="#F1F3F5"/>
-      <path d="M7.00008 3.915L8.58508 5.5L9.29008 4.795L7.00008 2.5L4.70508 4.795L5.41508
-              5.5L7.00008 3.915ZM7.00008 10.085L5.41508 8.5L4.71008 9.205L7.00008
-              11.5L9.29508 9.205L8.58508 8.5L7.00008 10.085Z"
-            fill="#121212"
-      />
-      <path d="M7.00008 3.915L8.58508 5.5L9.29008 4.795L7.00008
-              2.5L4.70508 4.795L5.41508 5.5L7.00008 3.915ZM7.00008 10.085L5.41508
-              8.5L4.71008 9.205L7.00008 11.5L9.29508 9.205L8.58508 8.5L7.00008 10.085Z"
-            fill="#D8D8D8"
-            fill-opacity="0.09"
-      />
-    </svg>
-  </span>
-  <span v-else-if="icon === 'asc'">
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect width="14" height="14" rx="2" fill="#F1F3F5"/>
-      <path d="M7.00008 3.915L8.58508 5.5L9.29008 4.795L7.00008 2.5L4.70508
-              4.795L5.41508 5.5L7.00008 3.915Z"
-            fill="#121212"/>
-      <path d="M7.00008 3.915L8.58508 5.5L9.29008 4.795L7.00008 2.5L4.70508
-              4.795L5.41508 5.5L7.00008 3.915Z"
-            fill="#D8D8D8"
-            fill-opacity="0.09"
-      />
-      <path d="M7.00008 9.585L8.58508 8L9.29008 8.705L7.00008 11L4.70508
-              8.705L5.41508 8L7.00008 9.585Z"
-            fill="#DEE2E6"
-      />
-    </svg>
-  </span>
-  <span v-else-if="icon === 'desc'">
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect width="14" height="14" rx="2" fill="#F1F3F5"/>
-      <path d="M7.00008 9.585L8.58508 8L9.29008 8.705L7.00008 11L4.70508
-              8.705L5.41508 8L7.00008 9.585Z"
-            fill="#121212"
-      />
-      <path d="M7.00008 9.585L8.58508 8L9.29008 8.705L7.00008 11L4.70508
-              8.705L5.41508 8L7.00008 9.585Z"
-            fill="#D8D8D8"
-            fill-opacity="0.09"
-      />
-      <path d="M7.00008 3.915L8.58508 5.5L9.29008 4.795L7.00008 2.5L4.70508
-              4.795L5.41508 5.5L7.00008 3.915Z"
-            fill="#DEE2E6"
-      />
-    </svg>
-
-  </span>
-</template>
-
-<script>
-export default {
-  name: 'GridSortButton',
-  props: {
-    icon: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>

package/src/components/grid/index.js

@@ -1,11 +0,0 @@
-import VueResizeObserver from 'vue-resize-observer';
-import ObserveVisibility from 'vue3-observe-visibility';
-import EvGrid from './Grid';
-
-EvGrid.install = (app) => {
-  app.component(EvGrid.name, EvGrid);
-  app.use(VueResizeObserver);
-  app.use(ObserveVisibility);
-};
-
-export default EvGrid;