@kdcloudjs/kdesign 1.7.59 → 1.7.61

package/es/signature/style/index.css

@@ -0,0 +1,210 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+.kd-signature {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  border: 1px dashed #e5e5e5;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background: var(--kd-c-signature-bg-color, #fafafa);
+  color: var(--kd-c-signature-color-text, #999999);
+  font-size: var(--kd-c-signature-font-size, 12px);
+  cursor: pointer;
+  border-radius: var(--kd-c-signature-border-radius, var(--kd-g-radius-border, 2px));
+  -webkit-transition: border-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: border-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s));
+}
+.kd-signature:hover {
+  border-color: var(--kd-c-signature-border-color-hover, var(--kd-g-color-theme-5, #87adff));
+  background-color: var(--kd-c-signature-bg-color-hover, var(--kd-g-color-theme-1, #f2f8ff));
+}
+.kd-signature.kd-signature-disabled {
+  cursor: not-allowed;
+  border: 1px solid var(--kd-g-color-border-disabled, #ccc);
+  background: var(--kd-c-signature-bg-color, #fafafa);
+  color: var(--kd-c-signature-color-text, #999999);
+}
+.kd-signature-drawing-board {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e5e5e5;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  background: var(--kd-c-signature-drawing-board-bg-color, #fafafa);
+  position: relative;
+}
+.kd-signature-drawing-board-operation {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  top: 9px;
+  right: 9px;
+  color: #b2b2b2;
+  z-index: 9999;
+}
+.kd-signature-drawing-board-operation > * {
+  cursor: pointer;
+}
+.kd-signature-drawing-board-operation > *:not(:last-child) {
+  margin-right: 13px;
+}
+.kd-signature-drawing-board-operation span:nth-of-type(2) {
+  -webkit-transform: scaleX(-1) !important;
+          transform: scaleX(-1) !important;
+}
+.kd-signature-drawing-board-operation.enabled {
+  color: #666666;
+}
+.kd-signature-drawing-board-tip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  color: var(--kd-c-signature-board-tip-color, #b2b2b2);
+  font-size: 12px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.kd-signature-modal .kd-modal-header {
+  position: relative;
+}
+.kd-signature-modal-footer .kd-btn:not(:last-child) {
+  margin-right: 12px;
+}
+.kd-signature-modal .kd-modal-expand-icon {
+  position: absolute;
+  right: 43.5px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.kd-signature-modal.kd-signature-modal-fullscreen .kd-modal-container-box {
+  width: 90vw !important;
+  height: 90vh !important;
+  top: 5vh;
+  left: 5vw;
+  -webkit-transform: none !important;
+          transform: none !important;
+}

package/es/signature/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/signature/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/signature/style/index.less

@@ -0,0 +1,95 @@
+@import '../../style/themes/index';
+@import './mixin.less';
+@signature-prefix-cls: ~'@{kd-prefix}-signature';
+@signature-board-prefix-cls: ~'@{kd-prefix}-signature-drawing-board';
+
+.@{signature-prefix-cls} {
+  box-sizing: border-box;
+  border: 1px dashed #e5e5e5;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: @signature-bg-color;
+  color: @signature-color-text;
+  font-size: @signature-font-size;
+  cursor: pointer;
+  border-radius: @signature-border-radius;
+  transition: border-color @signature-transition-duration, background-color @signature-transition-duration;
+  &:hover {
+    border-color: @signature-border-color-hover;
+    background-color: @signature-bg-color-hover;
+  }
+}
+.@{signature-prefix-cls}.@{signature-prefix-cls}-disabled {
+  cursor: not-allowed;
+  border: 1px solid @color-border-disabled;
+  background: @signature-bg-color;
+  color: @signature-color-text;
+}
+
+.@{signature-board-prefix-cls} {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e5e5e5;
+  box-sizing: border-box;
+  background: @signature-drawing-board-bg-color;
+  position: relative;
+  &-operation {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 9px;
+    right: 9px;
+    color: #b2b2b2;
+    z-index: 9999;
+    & > * {
+      cursor: pointer;
+    }
+    & > *:not(:last-child) {
+      margin-right: 13px;
+    }
+    span:nth-of-type(2) {
+      transform: scaleX(-1) !important;
+    }
+  }
+  &-operation.enabled {
+    color: #666666;
+  }
+  &-tip {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: @signature-board-tip-color;
+    font-size: 12px;
+    user-select: none;
+  }
+}
+.@{signature-prefix-cls}-modal {
+  .kd-modal-header {
+    position: relative;
+  }
+  &-footer {
+    .kd-btn:not(:last-child) {
+      margin-right: 12px;
+    }
+  }
+  .kd-modal-expand-icon {
+    position: absolute;
+    right: 43.5px;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+.@{signature-prefix-cls}-modal.@{signature-prefix-cls}-modal-fullscreen {
+  .kd-modal-container-box {
+    width: 90vw !important;
+    height: 90vh !important;
+    top: 5vh;
+    left: 5vw;
+    transform: none !important;
+  }
+}

package/es/signature/style/mixin.less

@@ -0,0 +1,6 @@
+@import './token.less';
+
+.signature() {
+  color: @signature-color-text;
+  font-size: @signature-font-size;
+}

package/es/signature/style/token.less

@@ -0,0 +1,22 @@
+@import '../../style/themes/token.less';
+
+@signature-custom-prefix: ~'--@{kd-prefix}-c-signature';
+
+// color
+@signature-color-text: var(~'@{signature-custom-prefix}-color-text', #999999);
+@signature-bg-color: var(~'@{signature-custom-prefix}-bg-color', #fafafa);
+@signature-border-color: var(~'@{signature-custom-prefix}-border-color-hover', @color-theme-hover);
+@signature-border-color-hover: var(~'@{signature-custom-prefix}-border-color-hover', @color-theme-hover);
+@signature-border-color-disabled: var(~'@{signature-custom-prefix}-border-color-disabled', @color-border-disabled);
+@signature-bg-color-hover: var(~'@{signature-custom-prefix}-bg-color-hover', @color-theme-1);
+@signature-drawing-board-bg-color:var(~'@{signature-custom-prefix}-drawing-board-bg-color', #fafafa);
+@signature-board-tip-color: var(~'@{signature-custom-prefix}-board-tip-color', #b2b2b2);
+// font
+@signature-font-size: var(~'@{signature-custom-prefix}-font-size', 12px);
+
+// motion
+@signature-transition-duration: var(~'@{signature-custom-prefix}-motion-duration', @duration-promptly);
+
+// radius
+@signature-border-radius: var(~'@{signature-custom-prefix}-border-radius', @radius-border);
+

package/es/signature/utils/signature_pad.d.ts

@@ -0,0 +1,106 @@
+export { SignaturePad as default };
+declare class SignaturePad extends SignatureEventTarget {
+    constructor(canvas: any, options?: {});
+    canvas: any;
+    _drawingStroke: boolean;
+    _isEmpty: boolean;
+    _lastPoints: any[];
+    _data: any[];
+    _lastVelocity: any;
+    _lastWidth: number;
+    _handleMouseDown: (event: any) => void;
+    _handleMouseMove: (event: any) => void;
+    _handleMouseUp: (event: any) => void;
+    _handleTouchStart: (event: any) => void;
+    _handleTouchMove: (event: any) => void;
+    _handleTouchEnd: (event: any) => void;
+    _handlePointerStart: (event: any) => void;
+    _handlePointerMove: (event: any) => void;
+    _handlePointerEnd: (event: any) => void;
+    velocityFilterWeight: any;
+    minWidth: any;
+    maxWidth: any;
+    throttle: any;
+    minDistance: any;
+    dotSize: any;
+    penColor: any;
+    backgroundColor: any;
+    compositeOperation: any;
+    _strokeMoveUpdate: (...args: any[]) => any;
+    _ctx: any;
+    clear(): void;
+    fromDataURL(dataUrl: any, options?: {}): Promise<any>;
+    toDataURL(type?: string, encoderOptions?: {}): any;
+    on(): void;
+    off(): void;
+    isEmpty(): boolean;
+    fromData(pointGroups: any, { clear }?: {
+        clear?: boolean | undefined;
+    }): void;
+    toData(): any[];
+    _getPointGroupOptions(group: any): {
+        penColor: any;
+        dotSize: any;
+        minWidth: any;
+        maxWidth: any;
+        velocityFilterWeight: any;
+        compositeOperation: any;
+    };
+    _strokeBegin(event: any): void;
+    _strokeUpdate(event: any): void;
+    _strokeEnd(event: any): void;
+    _handlePointerEvents(): void;
+    _handleMouseEvents(): void;
+    _handleTouchEvents(): void;
+    _reset(options: any): void;
+    _createPoint(x: any, y: any, pressure: any): Point;
+    _addPoint(point: any, options: any): Bezier | null;
+    _calculateCurveWidths(startPoint: any, endPoint: any, options: any): {
+        end: number;
+        start: number;
+    };
+    _strokeWidth(velocity: any, options: any): number;
+    _drawCurveSegment(x: any, y: any, width: any): void;
+    _drawCurve(curve: any, options: any): void;
+    _drawDot(point: any, options: any): void;
+    _fromData(pointGroups: any, drawCurve: any, drawDot: any): void;
+    toSVG({ includeBackgroundColor }?: {
+        includeBackgroundColor?: boolean | undefined;
+    }): string;
+}
+declare class SignatureEventTarget {
+    _et: EventTarget;
+    addEventListener(type: any, listener: any, options?: {}): void;
+    dispatchEvent(event: any): boolean;
+    removeEventListener(type: any, callback: any, options?: {}): void;
+}
+/*!
+ * Signature Pad v4.1.7 | https://github.com/szimek/signature_pad
+ * (c) 2023 Szymon Nowak | Released under the MIT license
+ */
+declare class Point {
+    constructor(x: any, y: any, pressure: any, time: any);
+    x: number;
+    y: number;
+    pressure: any;
+    time: any;
+    distanceTo(start: any): number;
+    equals(other: any): boolean;
+    velocityFrom(start: any): number;
+}
+declare class Bezier {
+    static fromPoints(points: any, widths: any): Bezier;
+    static calculateControlPoints(s1: any, s2: any, s3: any): {
+        c1: Point;
+        c2: Point;
+    };
+    constructor(startPoint: any, control2: any, control1: any, endPoint: any, startWidth: any, endWidth: any);
+    startPoint: any;
+    control2: any;
+    control1: any;
+    endPoint: any;
+    startWidth: any;
+    endWidth: any;
+    length(): number;
+    point(t: any, start: any, c1: any, c2: any, end: any): number;
+}