@ibiz-template/vue3-util 0.7.41-alpha.2 → 0.7.41-alpha.21

package/es/view/md-custom-view/md-custom-view.provider.mjs

@@ -0,0 +1,13 @@
+import { MDCustomViewController } from '@ibiz-template/runtime';
+
+"use strict";
+class MDCustomViewProvider {
+  constructor() {
+    this.component = "IBizView";
+  }
+  createController(model, context, params, ctx) {
+    return new MDCustomViewController(model, context, params, ctx);
+  }
+}
+
+export { MDCustomViewProvider };

package/lib/common/badge/badge.css

@@ -1 +1 @@
-.ibiz-badge{display:inline-block;width:var(--ibiz-width-icon-large);height:var(--ibiz-width-icon-large);line-height:var(--ibiz-width-icon-large);color:var(--ibiz-color-danger-text);background-color:var(--ibiz-badge-bg-color);border-radius:var(--ibiz-border-radius-circle)}.ibiz-badge--danger{--ibiz-badge-bg-color:var(--ibiz-color-danger)}.ibiz-badge--success{--ibiz-badge-bg-color:var(--ibiz-color-success)}.ibiz-badge--warning{--ibiz-badge-bg-color:var(--ibiz-color-warning)}.ibiz-badge--info{--ibiz-badge-bg-color:var(--ibiz-color-info)}.ibiz-badge--primary{--ibiz-badge-bg-color:var(--ibiz-color-primary)}
+.ibiz-badge{--ibiz-badge-bg-color:var(--ibiz-color-danger);--ibiz-badge-height:18px;--ibiz-badge-border-radius:10px;display:inline-flex;align-items:center;justify-content:center;width:auto;height:var(--ibiz-badge-height);padding:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-small);line-height:normal;color:var(--ibiz-color-danger-text);white-space:nowrap;background-color:var(--ibiz-badge-bg-color);border:1px solid transparent;border-radius:var(--ibiz-badge-border-radius)}.ibiz-badge--danger{--ibiz-badge-bg-color:var(--ibiz-color-danger)}.ibiz-badge--success{--ibiz-badge-bg-color:var(--ibiz-color-success)}.ibiz-badge--warning{--ibiz-badge-bg-color:var(--ibiz-color-warning)}.ibiz-badge--info{--ibiz-badge-bg-color:var(--ibiz-color-info)}.ibiz-badge--primary{--ibiz-badge-bg-color:var(--ibiz-color-primary)}

package/lib/common/control-base/control-base.cjs

@@ -5,6 +5,7 @@ var runtime = require('@ibiz-template/runtime');
 var core = require('@ibiz-template/core');
 var ramda = require('ramda');
 require('../../use/index.cjs');
+require('./control-base.css');
 var namespace = require('../../use/namespace/namespace.cjs');
 
 "use strict";
@@ -74,7 +75,7 @@ const IBizControlBase = /* @__PURE__ */ vue.defineComponent({
     };
     const getControlRender = (data) => {
       var _a, _b;
-      const controlRenders = model.controlRenders ? model.controlRenders.filter((item) => item.id !== "emptypanel") : void 0;
+      const controlRenders = model.controlRenders ? model.controlRenders.filter((item) => !Object.values(runtime.PredefinedControlRender).includes(item.id)) : void 0;
       if (!controlRenders || controlRenders.length === 0) {
         return void 0;
       }
@@ -107,6 +108,36 @@ const IBizControlBase = /* @__PURE__ */ vue.defineComponent({
       const data = props.controller.data || props.controller.items;
       return getControlRender(data);
     });
+    const disableMaskInfoRender = () => {
+      const disableRender = model.controlRenders ? model.controlRenders.find((item) => item.id === runtime.PredefinedControlRender.DISABLEPANEL) : void 0;
+      if (!disableRender) {
+        return vue.createVNode("div", {
+          "innerHTML": props.controller.state.maskOption.maskInfo || "",
+          "class": [ns.e("disable-mask-text")]
+        }, null);
+      }
+      if (disableRender.renderType === "LAYOUTPANEL_MODEL" && disableRender.layoutPanelModel) {
+        const htmlCode = runtime.ScriptFactory.execScriptFn({
+          ...props.controller.getEventArgs()
+        }, disableRender.layoutPanelModel, {
+          isAsync: false,
+          singleRowReturn: true
+        });
+        return vue.createVNode("div", {
+          "innerHTML": htmlCode,
+          "class": [ns.e("disable-mask-text")]
+        }, null);
+      }
+      if (disableRender.renderType === "LAYOUTPANEL" && disableRender.layoutPanel) {
+        return vue.createVNode(vue.resolveComponent("iBizControlShell"), {
+          "class": [ns.e("disable-mask-text")],
+          "data": {},
+          "params": props.controller.params,
+          "context": props.controller.context,
+          "modelData": disableRender.layoutPanel
+        }, null);
+      }
+    };
     return {
       ns,
       typeClass,
@@ -115,6 +146,7 @@ const IBizControlBase = /* @__PURE__ */ vue.defineComponent({
       codeName,
       controls,
       customRender,
+      disableMaskInfoRender,
       onLayoutPanelCreated
     };
   },
@@ -164,9 +196,11 @@ const IBizControlBase = /* @__PURE__ */ vue.defineComponent({
       }, slots);
     }
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.b(this.typeClass), this.ns.m(this.codeName), this.sysCssName],
+      "class": [this.ns.b(), this.ns.b(this.typeClass), this.ns.m(this.codeName), this.sysCssName, this.ns.is("disabled", state.disabled)],
       "style": this.inlineStyle
-    }, [layoutPanel || this.customRender || ((_c = (_b = this.$slots).default) == null ? void 0 : _c.call(_b))]);
+    }, [layoutPanel || this.customRender || ((_c = (_b = this.$slots).default) == null ? void 0 : _c.call(_b)), state.disabled && vue.createVNode("div", {
+      "class": [this.ns.e("mask-container"), this.ns.m(state.maskOption.mode.toLowerCase())]
+    }, [state.maskOption.mode === "MASK" && this.disableMaskInfoRender()])]);
   }
 });
 

package/lib/common/control-base/control-base.css

@@ -1 +1 @@
-.ibiz-control{width:100%;height:100%}.ibiz-control__control-render{width:100%;height:100%}
+.ibiz-control{--ibiz-control-base-scrollbar-width:0px;--ibiz-control-base-mask-text-color:var(--ibiz-color-primary-text);--ibiz-control-base-mask-background-color-blank:transparent;--ibiz-control-base-mask-background-color-mask:rgba(0, 0, 0, 0.5);width:100%;height:100%}.ibiz-control__control-render{width:100%;height:100%}.ibiz-control.is-disabled{position:relative}.ibiz-control__mask-container{position:absolute;top:0;left:0;z-index:10;width:calc(100% - var(--ibiz-control-base-scrollbar-width));height:100%}.ibiz-control--blank{background-color:var(--ibiz-control-base-mask-background-color-blank)}.ibiz-control--mask{color:var(--ibiz-control-base-mask-text-color);background-color:var(--ibiz-control-base-mask-background-color-mask);display:flex;align-items:center;justify-content:center}

package/lib/common/custom-render/custom-render.cjs

@@ -49,7 +49,7 @@ const IBizCustomRender = /* @__PURE__ */ vue.defineComponent({
       if (!controlRenders || controlRenders.length === 0) {
         return void 0;
       }
-      const noDataRender = controlRenders.find((item) => item.id === "emptypanel");
+      const noDataRender = controlRenders.find((item) => item.id === runtime.PredefinedControlRender.EMPTYPANEL);
       if (!noDataRender)
         return void 0;
       if (noDataRender.renderType === "LAYOUTPANEL_MODEL" && noDataRender.layoutPanelModel) {

package/lib/common/index.cjs

@@ -9,6 +9,7 @@ var codeList = require('./code-list/code-list.cjs');
 var controlLoadingPlaceholder = require('./control-loading-placeholder/control-loading-placeholder.cjs');
 var badge = require('./badge/badge.cjs');
 var customRender = require('./custom-render/custom-render.cjs');
+var signaturePad = require('./signature-pad/signature-pad.cjs');
 
 "use strict";
 
@@ -21,3 +22,4 @@ exports.IBizCodeList = codeList.IBizCodeList;
 exports.ControlLoadingPlaceholder = controlLoadingPlaceholder.ControlLoadingPlaceholder;
 exports.IBizBadge = badge.IBizBadge;
 exports.IBizCustomRender = customRender.IBizCustomRender;
+exports.IBizSignaturePad = signaturePad.IBizSignaturePad;

package/lib/common/signature-pad/signature-pad.cjs

@@ -0,0 +1,167 @@
+'use strict';
+
+var vue = require('vue');
+var lodashEs = require('lodash-es');
+require('../../use/index.cjs');
+var signature_pad = require('./util/signature_pad.cjs');
+require('./signature-pad.css');
+var namespace = require('../../use/namespace/namespace.cjs');
+
+"use strict";
+const IBizSignaturePad = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizSignaturePad",
+  props: {
+    options: {
+      type: Object
+    }
+  },
+  setup(props) {
+    const ns = namespace.useNamespace("signature-pad");
+    const signaturePadRef = vue.ref();
+    const canvasRef = vue.ref();
+    const signaturePad = vue.ref();
+    const getSignatureOptions = () => {
+      const _options = {};
+      if (props.options) {
+        const {
+          dotsize,
+          minwidth,
+          maxwidth,
+          pencolor,
+          velocityfilterweight,
+          compositeoperation,
+          mindistance,
+          backgroundcolor,
+          throttle,
+          canvascontextoptions
+        } = props.options;
+        if (dotsize) {
+          Object.assign(_options, {
+            dotSize: Number(dotsize)
+          });
+        }
+        if (minwidth) {
+          Object.assign(_options, {
+            minWidth: Number(minwidth)
+          });
+        }
+        if (maxwidth) {
+          Object.assign(_options, {
+            maxWidth: Number(maxwidth)
+          });
+        }
+        if (velocityfilterweight) {
+          Object.assign(_options, {
+            velocityFilterWeight: Number(velocityfilterweight)
+          });
+        }
+        if (mindistance) {
+          Object.assign(_options, {
+            minDistance: Number(mindistance)
+          });
+        }
+        if (throttle) {
+          Object.assign(_options, {
+            throttle: Number(throttle)
+          });
+        }
+        if (pencolor) {
+          Object.assign(_options, {
+            penColor: String(pencolor)
+          });
+        }
+        if (compositeoperation) {
+          Object.assign(_options, {
+            compositeOperation: String(compositeoperation)
+          });
+        }
+        if (backgroundcolor) {
+          Object.assign(_options, {
+            backgroundColor: String(backgroundcolor)
+          });
+        }
+        if (canvascontextoptions) {
+          let canvasContextOptions = canvascontextoptions;
+          if (lodashEs.isString(canvascontextoptions)) {
+            try {
+              canvasContextOptions = JSON.parse(canvascontextoptions);
+            } catch (error) {
+              ibiz.log.error(error);
+              canvasContextOptions = void 0;
+            }
+          }
+          Object.assign(_options, {
+            canvasContextOptions: {
+              ...canvasContextOptions
+            }
+          });
+        }
+      }
+      return _options;
+    };
+    const preventScroll = (_e) => {
+      _e.preventDefault();
+    };
+    const initSignaturePad = (_callback) => {
+      vue.nextTick(() => {
+        const canvas = canvasRef.value;
+        const signatures = signaturePadRef.value;
+        if (!canvas)
+          return;
+        const dpr = window.devicePixelRatio || 1;
+        const rect = signatures.getBoundingClientRect();
+        const canvasWidth = rect.width < 300 ? 300 : rect.width;
+        const canvasHeight = rect.height < 150 ? 150 : rect.height;
+        canvas.width = canvasWidth * dpr;
+        canvas.height = canvasHeight * dpr;
+        canvas.style.width = "".concat(canvasWidth, "px");
+        canvas.style.height = "".concat(canvasHeight, "px");
+        signaturePad.value = new signature_pad.default(canvas, {
+          ...getSignatureOptions()
+        });
+        const ctx = canvas.getContext("2d");
+        ctx.scale(dpr, dpr);
+        canvas.addEventListener("touchstart", preventScroll, {
+          passive: false
+        });
+        canvas.addEventListener("touchmove", preventScroll, {
+          passive: false
+        });
+        _callback == null ? void 0 : _callback();
+      });
+    };
+    const updateSignaturePad = (_callback) => initSignaturePad(_callback);
+    const handleResize = () => {
+      if (signaturePad.value) {
+        signaturePad.value.off();
+        updateSignaturePad();
+      }
+    };
+    vue.onMounted(() => {
+      initSignaturePad();
+      window.addEventListener("resize", handleResize);
+    });
+    vue.onUnmounted(() => {
+      window.removeEventListener("resize", handleResize);
+    });
+    return {
+      ns,
+      canvasRef,
+      signaturePadRef,
+      signaturePad,
+      updateSignaturePad
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b(),
+      "ref": "signaturePadRef"
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("container")
+    }, [vue.createVNode("canvas", {
+      "ref": "canvasRef"
+    }, null)])]);
+  }
+});
+
+exports.IBizSignaturePad = IBizSignaturePad;

package/lib/common/signature-pad/signature-pad.css

@@ -0,0 +1 @@
+.ibiz-signature-pad{width:100%;height:100%}.ibiz-signature-pad__container{width:100%;height:100%;background-color:var(--ibiz-color-bg-1)}

package/lib/common/signature-pad/util/bezier.cjs

@@ -0,0 +1,111 @@
+'use strict';
+
+var point = require('./point.cjs');
+
+"use strict";
+class Bezier {
+  /**
+   * 贝塞尔曲线构造函数
+   * @param startPoint 起始点
+   * @param control2 第二个控制点
+   * @param control1 第一个控制点
+   * @param endPoint 结束点
+   * @param startWidth 起始点宽度
+   * @param endWidth 结束点宽度
+   */
+  constructor(startPoint, control2, control1, endPoint, startWidth, endWidth) {
+    this.startPoint = startPoint;
+    this.control2 = control2;
+    this.control1 = control1;
+    this.endPoint = endPoint;
+    this.startWidth = startWidth;
+    this.endWidth = endWidth;
+  }
+  /**
+   * 从点数组创建贝塞尔曲线
+   * @param points 点数组，至少需要4个点来计算曲线
+   * @param widths 包含起点和终点宽度的对象
+   * @returns 新创建的贝塞尔曲线实例
+   */
+  static fromPoints(points, widths) {
+    const c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
+    const c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
+    return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
+  }
+  /**
+   * 计算贝塞尔曲线的控制点
+   * @param s1 第一个点
+   * @param s2 第二个点（中间点）
+   * @param s3 第三个点
+   * @returns 包含两个控制点的对象
+   */
+  static calculateControlPoints(s1, s2, s3) {
+    const dx1 = s1.x - s2.x;
+    const dy1 = s1.y - s2.y;
+    const dx2 = s2.x - s3.x;
+    const dy2 = s2.y - s3.y;
+    const m1 = { x: (s1.x + s2.x) / 2, y: (s1.y + s2.y) / 2 };
+    const m2 = { x: (s2.x + s3.x) / 2, y: (s2.y + s3.y) / 2 };
+    const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+    const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+    const dxm = m1.x - m2.x;
+    const dym = m1.y - m2.y;
+    const k = l1 + l2 === 0 ? 0 : l2 / (l1 + l2);
+    const cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
+    const tx = s2.x - cm.x;
+    const ty = s2.y - cm.y;
+    return {
+      c1: new point.Point(m1.x + tx, m1.y + ty),
+      c2: new point.Point(m2.x + tx, m2.y + ty)
+    };
+  }
+  /**
+   * 计算贝塞尔曲线的近似长度
+   * @returns 曲线的近似长度
+   */
+  length() {
+    const steps = 10;
+    let length = 0;
+    let px;
+    let py;
+    for (let i = 0; i <= steps; i += 1) {
+      const t = i / steps;
+      const cx = this.point(
+        t,
+        this.startPoint.x,
+        this.control1.x,
+        this.control2.x,
+        this.endPoint.x
+      );
+      const cy = this.point(
+        t,
+        this.startPoint.y,
+        this.control1.y,
+        this.control2.y,
+        this.endPoint.y
+      );
+      if (i > 0) {
+        const xdiff = cx - px;
+        const ydiff = cy - py;
+        length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+      }
+      px = cx;
+      py = cy;
+    }
+    return length;
+  }
+  /**
+   * 计算三次贝塞尔曲线在参数t处的x或y坐标值
+   * @param t 参数t，范围0到1
+   * @param start 起始点的坐标值（x或y）
+   * @param c1 第一个控制点的坐标值（x或y）
+   * @param c2 第二个控制点的坐标值（x或y）
+   * @param end 结束点的坐标值（x或y）
+   * @returns 计算得到的坐标值
+   */
+  point(t, start, c1, c2, end) {
+    return start * (1 - t) * (1 - t) * (1 - t) + 3 * c1 * (1 - t) * (1 - t) * t + 3 * c2 * (1 - t) * t * t + end * t * t * t;
+  }
+}
+
+exports.Bezier = Bezier;

package/lib/common/signature-pad/util/point.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+"use strict";
+class Point {
+  /**
+   * 构造函数，创建一个Point实例
+   * @param x X坐标
+   * @param y Y坐标
+   * @param pressure 压力值，可选，默认为0
+   * @param time 时间戳，可选，默认为当前时间
+   * @throws 如果x或y是NaN，抛出错误
+   */
+  constructor(x, y, pressure, time) {
+    if (Number.isNaN(x) || Number.isNaN(y)) {
+      throw new Error(
+        ibiz.i18n.t("vue3Util.common.invalidPointCoordinates", {
+          x,
+          y
+        })
+      );
+    }
+    this.x = +x;
+    this.y = +y;
+    this.pressure = pressure || 0;
+    this.time = time || Date.now();
+  }
+  /**
+   * 计算当前点到另一个点的直线距离
+   * @param start 起始点（另一个点）
+   * @returns 两点之间的距离
+   */
+  distanceTo(start) {
+    return Math.sqrt((this.x - start.x) ** 2 + (this.y - start.y) ** 2);
+  }
+  /**
+   * 判断当前点是否与另一个点相等
+   * @param other 要比较的另一个点
+   * @returns 如果所有属性都相等则返回true，否则返回false
+   */
+  equals(other) {
+    return this.x === other.x && this.y === other.y && this.pressure === other.pressure && this.time === other.time;
+  }
+  /**
+   * 计算从起始点到当前点的移动速度
+   * @param start 起始点
+   * @returns 速度值（距离/时间），如果时间相同则返回0
+   */
+  velocityFrom(start) {
+    return this.time !== start.time ? this.distanceTo(start) / (this.time - start.time) : 0;
+  }
+}
+
+exports.Point = Point;