@smallwei/avue 3.9.2 → 3.9.4

package/es/packages/element-plus/rate/index2.mjs

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import create from '../../../src/core/create.mjs';
 import props from '../../core/common/props.mjs';
 import event from '../../core/common/event.mjs';

package/es/packages/element-plus/rate/index3.mjs

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import { resolveComponent, openBlock, createBlock } from 'vue';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {

package/es/packages/element-plus/search/index.mjs

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import script from './index2.mjs';
 import { render } from './index3.mjs';
 

package/es/packages/element-plus/search/index2.mjs

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import create from '../../../src/core/create.mjs';
 import { DIC_PROPS } from '../../../src/global/variable.mjs';
 import init from '../../core/common/init.mjs';

package/es/packages/element-plus/search/index3.mjs

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import { resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementBlock, Fragment, renderList, createElementVNode, toDisplayString, renderSlot } from 'vue';
 
 const _hoisted_1 = ["onClick"];

package/es/packages/element-plus/select/index.mjs

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import script from './index2.mjs';
 import { render } from './index3.mjs';
 

package/es/packages/element-plus/select/index2.mjs

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import packages from '../../../src/core/packages.mjs';
 import create from '../../../src/core/create.mjs';
 import props from '../../core/common/props.mjs';
@@ -10,7 +10,7 @@ import { DIC_SPLIT } from '../../../src/global/variable.mjs';
 var script = create({
   name: "select",
   mixins: [props(), event(), locale],
-  emits: ["update:modelValue", "click", "focus", "blur", "change", "end-reached"],
+  emits: ["update:modelValue", "click", "focus", "blur", "change", "end-reached", "dic-error"],
   data() {
     return {
       checked: false,
@@ -18,6 +18,9 @@ var script = create({
       create: false,
       netDic: [],
       loading: false,
+      sortable: null,
+      remoteRequestId: 0,
+      remoteUnmounted: false,
     };
   },
   props: {
@@ -98,6 +101,14 @@ var script = create({
       this.setSort();
     }
   },
+  beforeUnmount() {
+    this.remoteUnmounted = true;
+    this.remoteRequestId++;
+    if (this.sortable && typeof this.sortable.destroy === "function") {
+      this.sortable.destroy();
+    }
+    this.sortable = null;
+  },
   methods: {
     handleModelValue(val) {
       if (!this.validatenull(this.text)) {
@@ -137,6 +148,7 @@ var script = create({
       });
     },
     handleRemoteMethod(query) {
+      const requestId = ++this.remoteRequestId;
       this.loading = true;
       sendDic(
         {
@@ -144,10 +156,23 @@ var script = create({
           value: query,
         },
         this
-      ).then((res) => {
-        this.loading = false;
-        this.netDic = res;
-      });
+      )
+        .then((res) => {
+          if (this.remoteUnmounted || requestId !== this.remoteRequestId) return;
+          this.netDic = res;
+        })
+        .catch((error) => {
+          if (this.remoteUnmounted || requestId !== this.remoteRequestId) return;
+          this.$emit("dic-error", {
+            type: "select-remote",
+            error,
+          });
+        })
+        .finally(() => {
+          if (!this.remoteUnmounted && requestId === this.remoteRequestId) {
+            this.loading = false;
+          }
+        });
     },
     checkChange(val) {
       this.text = [];

package/es/packages/element-plus/select/index3.mjs

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, Fragment, renderSlot, createElementVNode, toDisplayString, createCommentVNode, renderList, createTextVNode } from 'vue';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {

package/es/packages/element-plus/sign/index.mjs

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import script from './index2.mjs';
 import { render } from './index3.mjs';
 

package/es/packages/element-plus/sign/index2.mjs

@@ -1,30 +1,41 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import create from '../../../src/core/create.mjs';
 
-//绘制五角星  
-/** 
- * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 
- * rotate:绕对称轴旋转rotate弧度 
- */
-function create5star (context, sx, sy, radius, color, rotato) {
+function create5star(context, sx, sy, radius, color) {
   context.save();
   context.fillStyle = color;
-  context.translate(sx, sy);//移动坐标原点  
-  context.rotate(Math.PI + rotato);//旋转  
-  context.beginPath();//创建路径  
-  var x = Math.sin(0);
-  var y = Math.cos(0);
-  var dig = Math.PI / 5 * 4;
-  for (var i = 0; i < 5; i++) {//画五角星的五条边  
-    var x = Math.sin(i * dig);
-    var y = Math.cos(i * dig);
-    context.lineTo(x * radius, y * radius);
+  context.beginPath();
+  for (let index = 0; index < 10; index++) {
+    const angle = -Math.PI / 2 + index * Math.PI / 5;
+    const currentRadius = index % 2 === 0 ? radius : radius * 0.42;
+    const x = sx + Math.cos(angle) * currentRadius;
+    const y = sy + Math.sin(angle) * currentRadius;
+    if (index === 0) context.moveTo(x, y);
+    else context.lineTo(x, y);
   }
   context.closePath();
-  context.stroke();
   context.fill();
   context.restore();
 }
+
+function drawArcText(context, value, centerX, centerY, radius) {
+  const chars = Array.from(String(value || ""));
+  if (!chars.length) return;
+
+  const totalAngle = Math.min(Math.PI * 1.08, Math.max(Math.PI / 7, chars.length * Math.PI / 12));
+  const startAngle = -Math.PI / 2 - totalAngle / 2;
+  const step = chars.length === 1 ? 0 : totalAngle / (chars.length - 1);
+
+  chars.forEach((char, index) => {
+    const angle = startAngle + index * step;
+    context.save();
+    context.translate(centerX + Math.cos(angle) * radius, centerY + Math.sin(angle) * radius);
+    context.rotate(angle + Math.PI / 2);
+    context.fillText(char, 0, 0);
+    context.restore();
+  });
+}
+
 var script = create({
   name: "sign",
   props: {
@@ -34,190 +45,262 @@ var script = create({
     },
     height: {
       type: Number,
-      default: 400
-    }
+      default: 400,
+    },
+    disabled: Boolean,
+    readonly: Boolean,
+    lineWidth: {
+      type: Number,
+      default: 3,
+    },
+    lineColor: {
+      type: String,
+      default: "#1f2937",
+    },
+    backgroundColor: {
+      type: String,
+      default: "#ffffff",
+    },
+    title: String,
+    placeholder: {
+      type: String,
+      default: "请在此处签名",
+    },
+    clearText: {
+      type: String,
+      default: "清空",
+    },
+    showToolbar: Boolean,
+    ariaLabel: {
+      type: String,
+      default: "签名画板",
+    },
   },
-  data () {
+  emits: ["start", "change", "end", "clear", "seal", "update:modelValue"],
+  data() {
     return {
-      disabled: false,
-      linex: [],
-      liney: [],
-      linen: [],
-      canvas: {},
-      context: {},
-    }
+      canvas: null,
+      context: null,
+      isDrawing: false,
+      activePointerId: null,
+      hasDrawn: false,
+      sealed: false,
+      lastPoint: null,
+    };
   },
   computed: {
-    styleName () {
+    canvasWidth() {
+      return this.getCanvasSize(this.width, 600);
+    },
+    canvasHeight() {
+      return this.getCanvasSize(this.height, 400);
+    },
+    styleName() {
       return {
-        width: this.setPx(this.width),
-        height: this.setPx(this.height)
-      }
-    }
+        width: `min(100%, ${this.canvasWidth}px)`,
+      };
+    },
+    surfaceStyle() {
+      return {
+        backgroundColor: this.backgroundColor,
+      };
+    },
+    canvasStyle() {
+      return {
+        aspectRatio: `${this.canvasWidth} / ${this.canvasHeight}`,
+      };
+    },
+    isDisabled() {
+      return this.disabled || this.readonly || this.sealed;
+    },
+    isEmpty() {
+      return !this.hasDrawn;
+    },
+    statusText() {
+      if (this.sealed) return "已生成印章";
+      return this.hasDrawn ? "签名已填写" : "待签名";
+    },
   },
-  mounted () {
+  watch: {
+    width() {
+      this.resizeCanvas();
+    },
+    height() {
+      this.resizeCanvas();
+    },
+    backgroundColor() {
+      if (!this.hasDrawn) this.clearCanvas();
+    },
+  },
+  mounted() {
     this.init();
   },
   methods: {
-    getStar (text, text1, text2) {
-      var canvas = this.canvas;
-      var context = this.context;
-      // 绘制印章边框   
-      var width = canvas.width / 2;
-      var height = canvas.height / 2;
-      context.lineWidth = 7;
-      context.strokeStyle = "#f00";
-      context.beginPath();
-      context.arc(width, height, 110, 0, Math.PI * 2);
-      context.stroke();
-
-      //画五角星
-      create5star(context, width, height, 20, "#f00", 0);
-
-      // 绘制印章名称   
-      context.font = '18px SimHei';
-      context.textBaseline = 'middle';//设置文本的垂直对齐方式
-      context.textAlign = 'center'; //设置文本的水平对对齐方式
-      context.lineWidth = 1;
-      context.strokeStyle = '#f00';
-      context.strokeText(text, width, height + 50);
-
-      // 绘制印章副属性名称   
-      context.font = '14px SimHei';
-      context.textBaseline = 'middle';//设置文本的垂直对齐方式
-      context.textAlign = 'center'; //设置文本的水平对对齐方式
-      context.lineWidth = 1;
-      context.strokeStyle = '#f00';
-      context.strokeText(text2, width, height + 80);
-
-      // 绘制印章单位   
-      context.translate(width, height);// 平移到此位置,
-      context.font = '22px SimHei';
-      var count = text1.length;// 字数   
-      var angle = 4 * Math.PI / (3 * (count - 1));// 字间角度   
-      var chars = text1.split("");
-      var c;
-      for (var i = 0; i < count; i++) {
-        c = chars[i];// 需要绘制的字符   
-        if (i == 0) context.rotate(5 * Math.PI / 6);
-        else
-          context.rotate(angle);// 
-        context.save();
-        context.translate(90, 0);// 平移到此位置,此时字和x轴垂直   
-        context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴   
-        context.strokeText(c, 0, 0);// 此点为字的中心点   
-        context.restore();
-        context.save();//锁画布(为了保存之前的画布状态)  
-      }
-      this.disabled = true;
+    getCanvasSize(value, fallback) {
+      const size = Number(value);
+      return Number.isFinite(size) && size > 0 ? Math.round(size) : fallback;
     },
-    submit (width, height) {
-      if (!width) width = this.width;
-      if (!height) height = this.height;
-      return this.canvas.toDataURL("i/png");
+    init() {
+      this.canvas = this.$refs.canvas;
+      this.context = this.canvas && this.canvas.getContext("2d");
+      this.clearCanvas();
     },
-    clear () {
-      this.linex = new Array();
-      this.liney = new Array();
-      this.linen = new Array();
-      this.disabled = false;
-      this.canvas.width = this.canvas.width;
+    resizeCanvas() {
+      if (!this.canvas || !this.context) return;
 
-    },
-    init () {
-      this.canvas = this.$refs.canvas;
-      var canvas = this.canvas;
-      var _safe = this;
-      //注册相关事件
-      if (typeof document.ontouchstart != "undefined") {      //适配移动设备
-        canvas.addEventListener('touchmove', onMouseMove, false);
-        canvas.addEventListener('touchstart', onMouseDown, false);
-        canvas.addEventListener('touchend', onMouseUp, false);
-      } else {      //适配电脑
-        canvas.addEventListener('mousemove', onMouseMove, false);
-        canvas.addEventListener('mousedown', onMouseDown, false);
-        canvas.addEventListener('mouseup', onMouseUp, false);
-        canvas.addEventListener('mouseleave', onMouseUp, false);
-      }
-      //初始化上下文和参数
-      this.context = canvas.getContext('2d');
-      var context = this.context;
-      this.linex = new Array();
-      this.liney = new Array();
-      this.linen = new Array();
-      var lastX = 1;
-      var lastY = 30;
-      var flag = 0;
-
-
-
-      //根据鼠标坐标获取绘图坐标
-      function getCanvasPos (canvas, evt) {
-        var rect = canvas.getBoundingClientRect();
-        var x, y;
-        if (evt.targetTouches) {
-          x = evt.targetTouches[0].clientX;
-          y = evt.targetTouches[0].clientY;
-        } else {
-          x = evt.clientX;
-          y = evt.clientY;
-        }
-        return {
-          x: (x - rect.left) * (canvas.width / rect.width),
-          y: (y - rect.top) * (canvas.height / rect.height)
-        }
-      }
+      const image = document.createElement("canvas");
+      image.width = this.canvas.width;
+      image.height = this.canvas.height;
+      image.getContext("2d").drawImage(this.canvas, 0, 0);
+      const hasDrawn = this.hasDrawn;
 
-      //鼠标移动的时候
-      function onMouseMove (evt) {
-        if (_safe.disabled) return
-        var x = getCanvasPos(canvas, evt).x,
-          y = getCanvasPos(canvas, evt).y;
-
-        //判断是否处于按下状态
-        if (flag == 1) {
-          //如果是则画图
-          _safe.linex.push(x);
-          _safe.liney.push(y);
-          _safe.linen.push(1);
-          context.save();
-          context.translate(context.canvas.width / 2, context.canvas.height / 2);
-          context.translate(-context.canvas.width / 2, -context.canvas.height / 2);
-          context.beginPath();
-          context.lineWidth = 2;
-          for (var i = 1; i < _safe.linex.length; i++) {
-            lastX = _safe.linex[i];
-            lastY = _safe.liney[i];
-            if (_safe.linen[i] == 0)
-              context.moveTo(lastX, lastY);
-            else
-              context.lineTo(lastX, lastY);
-          }
-          context.shadowBlur = 10;
-          context.stroke();
-          context.restore();
+      this.$nextTick(() => {
+        this.context = this.canvas.getContext("2d");
+        this.clearCanvas();
+        if (hasDrawn) {
+          this.context.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight);
         }
-        evt.preventDefault();
+      });
+    },
+    clearCanvas() {
+      if (!this.context || !this.canvas) return;
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      if (this.backgroundColor && this.backgroundColor !== "transparent") {
+        this.context.save();
+        this.context.fillStyle = this.backgroundColor;
+        this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        this.context.restore();
       }
+    },
+    getPoint(event) {
+      const rect = this.canvas.getBoundingClientRect();
+      return {
+        x: (event.clientX - rect.left) * (this.canvas.width / rect.width),
+        y: (event.clientY - rect.top) * (this.canvas.height / rect.height),
+      };
+    },
+    setPenStyle() {
+      this.context.lineCap = "round";
+      this.context.lineJoin = "round";
+      this.context.lineWidth = Math.max(1, Number(this.lineWidth) || 1);
+      this.context.strokeStyle = this.lineColor;
+      this.context.fillStyle = this.lineColor;
+    },
+    drawPoint(point) {
+      this.setPenStyle();
+      this.context.beginPath();
+      this.context.arc(point.x, point.y, this.context.lineWidth / 2, 0, Math.PI * 2);
+      this.context.fill();
+    },
+    onPointerDown(event) {
+      if (this.isDisabled || event.button > 0 || event.isPrimary === false) return;
 
-      //当鼠标按下的时候修改按下标志，并开始记录坐标
-      function onMouseDown (evt) {
-        if (_safe.disabled) return
-        var x = getCanvasPos(canvas, evt).x,
-          y = getCanvasPos(canvas, evt).y;
-        flag = 1;
-        _safe.linex.push(x);
-        _safe.liney.push(y);
-        _safe.linen.push(0);
+      event.preventDefault();
+      this.isDrawing = true;
+      this.activePointerId = event.pointerId;
+      this.lastPoint = this.getPoint(event);
+      this.drawPoint(this.lastPoint);
+      this.hasDrawn = true;
+      this.canvas.setPointerCapture && this.canvas.setPointerCapture(event.pointerId);
+      this.$emit("start", this.lastPoint);
+    },
+    onPointerMove(event) {
+      if (!this.isDrawing || event.pointerId !== this.activePointerId || this.isDisabled) return;
+
+      event.preventDefault();
+      const point = this.getPoint(event);
+      this.setPenStyle();
+      this.context.beginPath();
+      this.context.moveTo(this.lastPoint.x, this.lastPoint.y);
+      this.context.lineTo(point.x, point.y);
+      this.context.stroke();
+      this.lastPoint = point;
+    },
+    onPointerUp(event) {
+      if (!this.isDrawing || event.pointerId !== this.activePointerId) return;
+
+      if (this.canvas.hasPointerCapture && this.canvas.hasPointerCapture(event.pointerId)) {
+        this.canvas.releasePointerCapture(event.pointerId);
       }
+      this.isDrawing = false;
+      this.activePointerId = null;
+      this.lastPoint = null;
+      const value = this.emitChange();
+      this.$emit("end", value);
+    },
+    emitChange() {
+      const value = this.submit();
+      this.$emit("change", value);
+      this.$emit("update:modelValue", value);
+      return value;
+    },
+    getStar(text = "", text1 = "", text2 = "") {
+      if (this.disabled || this.readonly || !this.context) return;
+
+      this.clearCanvas();
+      const width = this.canvas.width;
+      const height = this.canvas.height;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const radius = Math.max(28, Math.min(width, height) / 2 - 22);
+      const color = "#dc2626";
+
+      this.context.save();
+      this.context.strokeStyle = color;
+      this.context.fillStyle = color;
+      this.context.lineWidth = Math.max(2, radius / 28);
+      this.context.beginPath();
+      this.context.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      this.context.stroke();
+
+      create5star(this.context, centerX, centerY - radius * 0.1, radius * 0.19, color);
+      this.context.textAlign = "center";
+      this.context.textBaseline = "middle";
+      this.context.font = `${Math.max(12, radius * 0.17)}px SimHei, sans-serif`;
+      drawArcText(this.context, text1, centerX, centerY, radius * 0.72);
+      this.context.font = `${Math.max(11, radius * 0.15)}px SimHei, sans-serif`;
+      this.context.fillText(String(text || ""), centerX, centerY + radius * 0.35);
+      this.context.font = `${Math.max(10, radius * 0.11)}px SimHei, sans-serif`;
+      this.context.fillText(String(text2 || ""), centerX, centerY + radius * 0.58);
+      this.context.restore();
+
+      this.hasDrawn = true;
+      this.sealed = true;
+      const value = this.emitChange();
+      this.$emit("seal", value);
+      return value;
+    },
+    submit(width, height, type = "image/png", quality) {
+      if (!this.canvas) return "";
+      const targetWidth = this.getCanvasSize(width, this.canvas.width);
+      const targetHeight = this.getCanvasSize(height, this.canvas.height);
+      let exportCanvas = this.canvas;
 
-      //鼠标松开清除标志
-      function onMouseUp () {
-        if (_safe.disabled) return
-        flag = 0;
+      if (targetWidth !== this.canvas.width || targetHeight !== this.canvas.height) {
+        exportCanvas = document.createElement("canvas");
+        exportCanvas.width = targetWidth;
+        exportCanvas.height = targetHeight;
+        const exportContext = exportCanvas.getContext("2d");
+        exportContext.drawImage(this.canvas, 0, 0, targetWidth, targetHeight);
       }
-    }
-  }
+
+      return exportCanvas.toDataURL(type || "image/png", quality);
+    },
+    clear() {
+      if (this.disabled || this.readonly) return;
+      this.isDrawing = false;
+      this.activePointerId = null;
+      this.lastPoint = null;
+      this.hasDrawn = false;
+      this.sealed = false;
+      this.clearCanvas();
+      this.$emit("clear");
+      this.emitChange();
+    },
+    isEmptySignature() {
+      return !this.hasDrawn;
+    },
+  },
 });
 
 export { script as default };