evui 3.3.6 → 3.3.9

package/src/components/chart/plugins/plugins.pie.js

@@ -3,13 +3,17 @@ const modules = {
   /**
    * Draw series data
    *
+   * @params hitInfo
+   *
    * @returns {undefined}
    */
-  drawPie() {
+  drawPie(hitInfo) {
     const ctx = this.bufferCtx;
     const chartRect = this.chartRect;
     const pieDataSet = this.pieDataSet;
     const pieOption = this.options;
+    const padding = this.options.padding;
+    const isDoughnut = !!pieOption.doughnutHoleSize;
 
     let slice;
     let value;
@@ -21,8 +25,10 @@ const modules = {
     const centerX = chartRect.width / 2;
     const centerY = chartRect.height / 2;
 
-    const innerRadius = Math.min(centerX, centerY) * pieOption.doughnutHoleSize;
-    const outerRadius = Math.min(centerX, centerY);
+    const chartWidth = centerX - (padding.left + padding.right);
+    const chartHeight = centerY - (padding.bottom + padding.top);
+    const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
+    const outerRadius = Math.min(chartWidth, chartHeight);
 
     for (let ix = 0; ix < pieDataSet.length; ix++) {
       const pie = pieDataSet[ix];
@@ -54,54 +60,59 @@ const modules = {
           series = this.seriesList[slice.id];
 
           if (value) {
-            series.draw({
-              ctx,
-              centerX,
-              centerY,
-              radius,
-              startAngle,
-              endAngle,
-            });
+            const strokeOptions = { ...pieOption.pieStroke };
+            if (pie.data.length === 1 && pieOption.pieStroke.use) {
+              strokeOptions.use = false;
+
+              ctx.lineWidth = pieOption.pieStroke.lineWidth;
+              ctx.strokeStyle = pieOption.pieStroke.color;
+              ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+              ctx.stroke();
+            }
+
+            series.isSelect = hitInfo?.sId === slice.id;
+            series.type = isDoughnut ? 'doughnut' : 'pie';
+            series.centerX = centerX;
+            series.centerY = centerY;
+            series.radius = radius;
+            series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
+            series.startAngle = startAngle;
+            series.endAngle = endAngle;
+            series.data = { o: value };
+
+            series.draw(ctx, strokeOptions);
             startAngle += sliceAngle;
           }
         }
       }
-
-      ctx.beginPath();
-      if (pieOption?.pieStroke?.use) {
-        ctx.lineWidth = pieOption.pieStroke.lineWidth;
-        ctx.strokeStyle = pieOption.pieStroke.color;
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-        ctx.stroke();
-      } else {
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-      }
-
-      ctx.closePath();
     }
   },
 
   /**
    * Draw series data
    *
+   * @params hitInfo
+   *
    * @returns {undefined}
    */
-  drawSunburst() {
+  drawSunburst(hitInfo) {
     const ctx = this.bufferCtx;
-    const chartRect = this.chartRect;
+    const { width, height } = this.chartRect;
     const pieDataSet = this.pieDataSet;
     const pieOption = this.options;
+    const padding = this.options.padding;
 
     this.calculateAngle();
 
     let slice;
     let series;
 
-    const centerX = chartRect.width / 2;
-    const centerY = chartRect.height / 2;
-
-    const innerRadius = Math.min(centerX, centerY) * pieOption.doughnutHoleSize;
-    const outerRadius = Math.min(centerX, centerY);
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const chartWidth = centerX - (padding.left + padding.right);
+    const chartHeight = centerY - (padding.bottom + padding.top);
+    const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
+    const outerRadius = Math.min(chartWidth, chartHeight);
 
     for (let ix = 0; ix < pieDataSet.length; ix++) {
       const pie = pieDataSet[ix];
@@ -141,46 +152,48 @@ const modules = {
           series = this.seriesList[slice.id];
 
           if (slice.value) {
-            series.draw({
-              ctx,
-              centerX,
-              centerY,
-              radius,
-              startAngle: slice.sa,
-              endAngle: slice.ea,
-            });
+            const strokeOptions = { ...pieOption.pieStroke };
+            if (pie.data.length === 1 && pieOption.pieStroke.use) {
+              strokeOptions.use = false;
+
+              ctx.lineWidth = pieOption.pieStroke.lineWidth;
+              ctx.strokeStyle = pieOption.pieStroke.color;
+              ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+              ctx.stroke();
+            }
+
+            series.isSelect = hitInfo?.sId === slice.id;
+            series.type = 'sunburst';
+            series.centerX = centerX;
+            series.centerY = centerY;
+            series.radius = radius;
+            series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
+            series.startAngle = slice.sa;
+            series.endAngle = slice.ea;
+            series.data = { o: slice.value };
+
+            series.draw(ctx, strokeOptions);
           }
         }
       }
-
-      ctx.beginPath();
-
-      if (pieOption?.pieStroke?.use) {
-        ctx.lineWidth = pieOption.pieStroke.lineWidth;
-        ctx.strokeStyle = pieOption.pieStroke.color;
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-        ctx.stroke();
-      } else {
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-      }
-
-      ctx.closePath();
     }
   },
 
   /**
    * Draw doughnut hole
-   *
-   * @returns {undefined}
+   * @param ctx
    */
-  drawDoughnutHole() {
-    const ctx = this.bufferCtx;
+  drawDoughnutHole(ctx = this.bufferCtx) {
     const pieOption = this.options;
+    const { width, height } = this.chartRect;
+    const padding = this.options.padding;
 
-    const centerX = this.chartRect.width / 2;
-    const centerY = this.chartRect.height / 2;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const chartWidth = centerX - (padding.left + padding.right);
+    const chartHeight = centerY - (padding.bottom + padding.top);
+    const radius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
 
-    const radius = Math.min(centerX, centerY) * pieOption.doughnutHoleSize;
     ctx.save();
     ctx.globalCompositeOperation = 'destination-out';
     ctx.beginPath();
@@ -194,19 +207,15 @@ const modules = {
     ctx.restore();
 
     // inner stroke
-    ctx.beginPath();
-
     if (pieOption?.pieStroke?.use) {
+      ctx.beginPath();
       ctx.strokeStyle = pieOption.pieStroke.color;
       ctx.lineWidth = pieOption.pieStroke.lineWidth;
       ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
       ctx.stroke();
-    } else {
-      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      ctx.closePath();
     }
 
-    ctx.closePath();
-
     this.pieDataSet[this.pieDataSet.length - 1].ir = radius;
   },
 };

package/src/components/chart/plugins/plugins.tooltip.js

@@ -177,9 +177,11 @@ const modules = {
     const opt = this.options.tooltip;
 
     // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
-    this.tooltipHeaderDOM.textContent = this.options.horizontal
-      ? this.axesY[hitAxis.y].getLabelFormat(hitItem.y)
-      : this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
+    if (this.axesX.length && this.axesY.length) {
+      this.tooltipHeaderDOM.textContent = this.options.horizontal
+        ? this.axesY[hitAxis.y].getLabelFormat(hitItem.y)
+        : this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
+    }
 
     if (opt.textOverflow) {
       this.tooltipHeaderDOM.classList.add(`ev-chart-tooltip-header--${opt.textOverflow}`);
@@ -303,11 +305,18 @@ const modules = {
       // 3. Draw value
       let formattedTxt;
       if (opt.formatter) {
-        formattedTxt = opt.formatter({
-          x: this.options.horizontal ? value : hitItem.x,
-          y: this.options.horizontal ? hitItem.y : value,
-          name,
-        });
+        if (this.options.type === 'pie') {
+          formattedTxt = opt.formatter({
+            value,
+            name,
+          });
+        } else {
+          formattedTxt = opt.formatter({
+            x: this.options.horizontal ? value : hitItem.x,
+            y: this.options.horizontal ? hitItem.y : value,
+            name,
+          });
+        }
       }
 
       if (!opt.formatter || typeof formattedTxt !== 'string') {
@@ -349,7 +358,12 @@ const modules = {
    */
   drawItemsHighlight(hitInfo, ctx) {
     Object.keys(hitInfo.items).forEach((sId) => {
-      this.seriesList[sId].itemHighlight(hitInfo.items[sId], ctx);
+      const series = this.seriesList[sId];
+      series.itemHighlight(hitInfo.items[sId], ctx);
+
+      if (Util.isDoughnutHole(series.type)) {
+        this.drawDoughnutHole(ctx);
+      }
     });
   },
 

package/src/components/chart/uses.js

@@ -107,6 +107,15 @@ export const useModel = () => {
       normalizedOptions.tooltip.use = false;
     }
 
+    if (options.type === 'pie' && !options?.padding) {
+      normalizedOptions.padding = {
+        top: 2,
+        right: 2,
+        left: 2,
+        bottom: 4,
+      };
+}
+
     return normalizedOptions;
   };
   const getNormalizedData = data => defaultsDeep(data, DEFAULT_DATA);

package/src/components/datePicker/DatePicker.vue

@@ -7,114 +7,121 @@
       disabled : $props.disabled,
     }"
   >
-    <template v-if="$props.mode === 'date' || $props.mode === 'dateTime'">
-      <span class="ev-date-picker-prefix-icon">
-        <i class="ev-icon-calendar" />
-      </span>
-      <input
-        v-model.trim="currentValue"
-        type="text"
-        class="ev-input"
-        :placeholder="$props.placeholder"
-        :disabled="$props.disabled"
-        @click="clickSelectInput"
-        @keydown.enter.prevent="validateValue(currentValue)"
-        @change="validateValue(currentValue)"
-      />
-    </template>
-    <template v-else>
-      <div
-          class="ev-date-picker-tag-wrapper"
-          @click="clickSelectInput"
-      >
+    <div
+      ref="datePickerWrapper"
+      class="ev-date-picker__wrapper"
+    >
+      <template v-if="$props.mode === 'date' || $props.mode === 'dateTime'">
         <span class="ev-date-picker-prefix-icon">
           <i class="ev-icon-calendar" />
         </span>
         <input
+          v-model.trim="currentValue"
           type="text"
-          class="ev-input readonly"
-          readonly
+          class="ev-input"
           :placeholder="$props.placeholder"
           :disabled="$props.disabled"
+          @click="clickSelectInput"
+          @keydown.enter.prevent="validateValue(currentValue)"
+          @change="validateValue(currentValue)"
         />
-        <template
-          v-if="$props.mode === 'dateMulti'
-          && ($props.options.multiType === 'date' || !$props.options.tagShorten)"
+      </template>
+      <template v-else>
+        <div
+          class="ev-date-picker-tag-wrapper"
+          @click="clickSelectInput"
         >
-          <div
-            v-for="(item, idx) in mv"
-            :key="`${item}_${idx}`"
-            class="ev-select-tag"
-            :class="{ num: $props.options.multiType !== 'date' }"
-          >
-            <span class="ev-tag-name"> {{ item }} </span>
-            <span
-              v-if="$props.options.multiType === 'date'"
-              class="ev-tag-suffix"
-              @click.stop="[removeMv(item), changeDropboxPosition()]"
-            >
-            <i class="ev-tag-suffix-close ev-icon-error" />
+          <span class="ev-date-picker-prefix-icon">
+            <i class="ev-icon-calendar" />
           </span>
-          </div>
-        </template>
-        <template v-else-if="mv[0] && mv[mv.length - 1]">
-          <div class="ev-select-tag num">
-            <span class="ev-tag-name"> {{ mv[0] }} </span>
-          </div>
-          <div class="ev-select-tag num">
-            <span class="ev-tag-name"> ~ </span>
-          </div>
-          <div class="ev-select-tag num">
-            <span class="ev-tag-name"> {{ mv[mv.length - 1] }} </span>
-          </div>
-        </template>
-      </div>
-    </template>
-    <template v-if="$props.clearable">
-      <span
-        v-show="isClearableIcon"
-        class="ev-input-suffix"
-        @click.stop="[removeAllMv(), clickOutsideDropbox()]"
-      >
-        <i class="ev-icon-error" />
-      </span>
-    </template>
-    <div class="ev-date-picker-dropbox-wrapper">
-      <div
-        v-if="isDropbox"
-        ref="dropbox"
-        class="ev-date-picker-dropdown"
-        :class="$props.mode"
-        :style="dropboxPosition"
-      >
-        <div
-            v-if="usedShortcuts.length"
-            class="ev-date-picker-dropbox__button-layout">
-          <ev-button-group>
-            <ev-button
-               v-for="button in usedShortcuts"
-               :key="button.key"
-               :type="button.isActive ? 'primary' : 'default'"
-               @click="clickShortcut(button.key)"
+          <input
+            type="text"
+            class="ev-input readonly"
+            readonly
+            :placeholder="$props.placeholder"
+            :disabled="$props.disabled"
+          />
+          <template
+            v-if="$props.mode === 'dateMulti'
+            && ($props.options.multiType === 'date' || !$props.options.tagShorten)"
+          >
+            <div
+              v-for="(item, idx) in mv"
+              :key="`${item}_${idx}`"
+              class="ev-select-tag"
+              :class="{ num: $props.options.multiType !== 'date' }"
             >
-              {{ button.label }}
-            </ev-button>
-          </ev-button-group>
+              <span class="ev-tag-name"> {{ item }} </span>
+              <span
+                v-if="$props.options.multiType === 'date'"
+                class="ev-tag-suffix"
+                @click.stop="[removeMv(item), changeDropboxPosition()]"
+              >
+              <i class="ev-tag-suffix-close ev-icon-error" />
+            </span>
+            </div>
+          </template>
+          <template v-else-if="mv[0] && mv[mv.length - 1]">
+            <div class="ev-select-tag num">
+              <span class="ev-tag-name"> {{ mv[0] }} </span>
+            </div>
+            <div class="ev-select-tag num">
+              <span class="ev-tag-name"> ~ </span>
+            </div>
+            <div class="ev-select-tag num">
+              <span class="ev-tag-name"> {{ mv[mv.length - 1] }} </span>
+            </div>
+          </template>
         </div>
+      </template>
+      <template v-if="$props.clearable">
+        <span
+          v-show="isClearableIcon"
+          class="ev-input-suffix"
+          @click.stop="[removeAllMv(), clickOutsideDropbox()]"
+        >
+          <i class="ev-icon-error" />
+        </span>
+      </template>
+      <div class="ev-date-picker-dropbox-wrapper">
         <div
+          v-if="isDropbox"
+          ref="dropbox"
+          class="ev-date-picker-dropdown"
+          :class="$props.mode"
+          :style="dropboxPosition"
+        >
+          <div
+            v-if="usedShortcuts.length"
+            class="ev-date-picker-dropbox__button-layout"
+          >
+            <ev-button-group>
+              <ev-button
+                v-for="button in usedShortcuts"
+                :key="button.key"
+                :type="button.isActive ? 'primary' : 'default'"
+                @click="clickShortcut(button.key)"
+              >
+                {{ button.label }}
+              </ev-button>
+            </ev-button-group>
+          </div>
+          <div
             v-if="usedShortcuts.length"
             class="ev-date-picker-dropbox__divider"
-        />
-        <div
-            :class="{ 'ev-date-picker-dropbox__calendar':usedShortcuts.length }">
-          <ev-calendar
-            key="fromCalendar"
-            v-model="mv"
-            :mode="$props.mode"
-            :month-notation="$props.monthNotation"
-            :day-of-the-week-notation="$props.dayOfTheWeekNotation"
-            :options="$props.options"
           />
+          <div
+            :class="{ 'ev-date-picker-dropbox__calendar':usedShortcuts.length }"
+          >
+            <ev-calendar
+              key="fromCalendar"
+              v-model="mv"
+              :mode="$props.mode"
+              :month-notation="$props.monthNotation"
+              :day-of-the-week-notation="$props.dayOfTheWeekNotation"
+              :options="$props.options"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -230,6 +237,7 @@ export default {
     const {
       isDropbox,
       datePicker,
+      datePickerWrapper,
       dropbox,
       itemWrapper,
       dropboxPosition,
@@ -261,6 +269,7 @@ export default {
 
       isDropbox,
       datePicker,
+      datePickerWrapper,
       dropbox,
       itemWrapper,
       dropboxPosition,
@@ -279,13 +288,18 @@ export default {
 @import '../../style/index.scss';
 
 .ev-date-picker {
-  $select-height: 35px;
+  $select-height: $input-default-height;
   display: block;
   position: relative;
   width: 100%;
-  min-height: $select-height;
 
   @import '../../style/components/input.scss';
+
+  &__wrapper {
+    position: relative;
+    min-height: $select-height;
+  }
+
   .ev-input {
     $calendar-icon-width: 30px;
     position: absolute;
@@ -312,15 +326,12 @@ export default {
     height: 100%;
     align-items: center;
     cursor: pointer;
-
-
     &:hover {
       color: #409EFF;
     }
   }
 
   .ev-date-picker-tag-wrapper {
-    $select-height: 35px;
     display: flex;
     width: 100%;
     height: 100%;

package/src/components/datePicker/uses.js

@@ -125,6 +125,7 @@ export const useDropdown = () => {
 
   const isDropbox = ref(false);
   const datePicker = ref(null);
+  const datePickerWrapper = ref(null);
   const dropbox = ref(null);
   const itemWrapper = ref(null);
   const dropboxPosition = reactive({
@@ -138,7 +139,7 @@ export const useDropdown = () => {
    */
   const changeDropboxPosition = async () => {
     await nextTick();
-    const datePickerRect = datePicker.value?.getBoundingClientRect();
+    const datePickerRect = datePickerWrapper.value?.getBoundingClientRect();
     const dropboxRect = dropbox.value?.getBoundingClientRect();
     const datePickerHeight = datePickerRect.height;
     const datePickerY = datePickerRect.y;
@@ -195,6 +196,7 @@ export const useDropdown = () => {
   return {
     isDropbox,
     datePicker,
+    datePickerWrapper,
     dropbox,
     itemWrapper,
     dropboxPosition,

package/src/components/grid/Grid.vue

@@ -149,7 +149,7 @@
           <tr
             v-for="(row, rowIndex) in viewStore"
             :key="rowIndex"
-            :data-index="rowIndex"
+            :data-index="row[0]"
             :class="{
               row: true,
               selected: row[2] === selectedRow,
@@ -309,6 +309,7 @@ export default {
     'update:checked': null,
     'check-row': null,
     'check-all': null,
+    'scroll-end': null,
   },
   setup(props) {
     const {
@@ -341,19 +342,14 @@ export default {
         items: [],
       },
       isSearch: false,
-      searchValue: computed(() => (props.option.searchValue || '')),
+      searchWord: '',
     });
     const stores = reactive({
       viewStore: [],
       originStore: [],
       filterStore: [],
       store: computed(() => {
-        let store;
-        if (filterInfo.isFiltering) {
-          store = stores.filterStore;
-        } else {
-          store = stores.originStore;
-        }
+        const store = filterInfo.isFiltering ? stores.filterStore : stores.originStore;
         return filterInfo.isSearch ? stores.searchStore : store;
       }),
       orderedColumns: computed(() =>
@@ -402,12 +398,20 @@ export default {
       gridWidth: computed(() => (props.width ? setPixelUnit(props.width) : '100%')),
       gridHeight: computed(() => (props.height ? setPixelUnit(props.height) : '100%')),
     });
+    const pageInfo = reactive({
+      currentPage: 1,
+      prevPage: 0,
+      startIndex: 0,
+      use: computed(() => (props.option.page?.use || false)),
+      dataCount: computed(() => (props.option.page?.dataCount || 50)),
+      isInfinite: computed(() => (props.option.page?.isInfinite || false)),
+    });
 
     const {
       updateVScroll,
       updateHScroll,
       onScroll,
-    } = scrollEvent({ scrollInfo, stores, elementInfo, resizeInfo });
+    } = scrollEvent({ scrollInfo, stores, elementInfo, resizeInfo, pageInfo });
 
     const {
       onRowClick,
@@ -512,9 +516,9 @@ export default {
       (value) => {
         setStore(value);
         if (filterInfo.isSearch) {
-          onSearch(filterInfo.searchValue);
+          onSearch(filterInfo.searchWord);
         }
-      },
+      }, { deep: true },
     );
     watch(
       () => props.checked,
@@ -582,13 +586,12 @@ export default {
       },
     );
     watch(
-      () => filterInfo.searchValue,
+      () => props.option.searchValue,
       (value) => {
-        const searchValue = value?.value ?? value;
-        if (searchValue) {
-          onSearch(searchValue);
+        if (value !== undefined) {
+          onSearch(value?.value ?? value);
         }
-      }, { immediate: true },
+      }, { immediate: true, deep: true },
     );
     const isFilterButton = field => filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';
     return {
@@ -600,6 +603,7 @@ export default {
       ...toRefs(stores),
       ...toRefs(filterInfo),
       ...toRefs(scrollInfo),
+      ...toRefs(pageInfo),
       ...toRefs(resizeInfo),
       ...toRefs(selectInfo),
       ...toRefs(checkInfo),