evui 3.4.88 → 3.4.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.4.88",
+  "version": "3.4.89",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/chart/element/element.line.js

@@ -77,7 +77,7 @@ class Line {
     const mainColorOpacity = getOpacity(mainColor);
     const pointFillColor = this.pointFill;
     const pointFillColorOpacity = getOpacity(pointFillColor);
-    const fillOpacity = getOpacity(mainColor) * this.fillOpacity;
+    const fillOpacity = this.fillOpacity;
     const lineWidth = this.lineWidth * extent.lineWidth;
 
     ctx.beginPath();
@@ -163,7 +163,7 @@ class Line {
     if (this.fill && this.data.length) {
       ctx.beginPath();
 
-      const fillColor = Util.colorStringToRgba(mainColor, fillOpacity);
+      const fillColor = Util.colorStringToRgba(this.fillColor || mainColor, fillOpacity);
       if (this.fill?.gradient) {
         let maxValueYPos = this.data[0].yp;
         let minValueYBottomPos = this.data[0].y;
@@ -283,7 +283,7 @@ class Line {
     const { xp, yp, o } = gdata;
 
     ctx.save();
-    if (xp !== null && yp !== null && o !== this.passingValue) {
+    if (xp !== null && yp !== null && o !== this.passingValue && this.pointHighlight) {
       ctx.strokeStyle = Util.colorStringToRgba(this.color, 0);
       ctx.fillStyle = Util.colorStringToRgba(this.color, this.highlight.maxShadowOpacity);
       Canvas.drawPoint(ctx, this.pointStyle, this.highlight.maxShadowSize, xp, yp);

package/src/components/chart/helpers/helpers.constant.js

@@ -37,6 +37,7 @@ export const LINE_OPTION = {
   xAxisIndex: 0,
   yAxisIndex: 0,
   point: true,
+  pointHighlight: true,
   pointSize: 3,
   pointStyle: '',
   lineWidth: 2,

package/src/components/textField/TextField.vue

@@ -26,8 +26,8 @@
           :placeholder="placeholder"
           :disabled="disabled"
           :readonly="readonly"
-          :maxlength="maxLength"
           :autocomplete="autocomplete"
+          :maxlength="maxUnit === 'byte' ? null : maxLength"
           @focus="focusInput"
           @blur="blurInput"
           @input="inputMv"
@@ -42,8 +42,8 @@
           :placeholder="placeholder"
           :disabled="disabled"
           :readonly="readonly"
-          :maxlength="maxLength"
           :autocomplete="autocomplete"
+          :maxlength="maxUnit === 'byte' ? null : maxLength"
           @focus="focusInput"
           @blur="blurInput"
           @input="inputMv"
@@ -95,15 +95,16 @@
     <div
       v-if="maxLength && showMaxLength"
       class="ev-text-field-maxlength"
-      :class="{ max: mv?.length > maxLength }"
+      :class="{ max: currentLength > maxLength }"
     >
-      <span class="curr-length">{{ mv ? mv.length : 0 }}</span> / {{ maxLength }}
+      <span class="curr-length">{{ currentLength }}</span> / {{ maxLength
+       }}{{ maxUnit === 'byte' ? ' Bytes' : '' }}
     </div>
   </div>
 </template>
 
 <script>
-import { ref, computed, nextTick } from 'vue';
+import { ref, computed } from 'vue';
 
 export default {
   name: 'EvTextField',
@@ -140,6 +141,10 @@ export default {
       type: Number,
       default: null,
     },
+    maxUnit: {
+      type: String,
+      default: 'count',
+    },
     showMaxLength: {
       type: Boolean,
       default: false,
@@ -206,19 +211,31 @@ export default {
     const blurInput = (e) => {
       emit('blur', e);
     };
+
+    const getByteLength = text => new TextEncoder().encode(text).length;
+
+    const currentLength = computed(() =>
+      (props.maxUnit === 'byte'
+        ? getByteLength(mv.value || '')
+        : (mv.value || '').length),
+    );
+
     const inputMv = (e) => {
-      const inputValue = e.target.value;
-      if (mv.value !== inputValue) {
-        mv.value = inputValue;
+      let value = e.target.value;
+
+      if (props.maxLength && props.maxUnit === 'byte') {
+        while (getByteLength(value) > props.maxLength) {
+          value = value.slice(0, -1);
+        }
+        e.target.value = value;
       }
-      nextTick(() => {
-        emit('input', mv.value, e);
-      });
-    };
-    const changeMv = (e) => {
-      emit('change', mv.value, e);
+
+      mv.value = value;
+      emit('input', value, e);
     };
 
+    const changeMv = e => emit('change', mv.value, e);
+
     return {
       mv,
       inputType,
@@ -231,6 +248,7 @@ export default {
       blurInput,
       inputMv,
       changeMv,
+      currentLength,
     };
   },
 };