@wfrog/vc-ui 1.0.0 → 1.1.0

package/dist/es/components/drag-verify/drag-verify.mjs

@@ -0,0 +1,475 @@
+import './index.css'
+import { defineComponent, useCssVars, unref, computed, ref, createElementBlock, openBlock, normalizeClass, createElementVNode, toDisplayString, withModifiers, createVNode, withCtx, createBlock, useTemplateRef, onBeforeMount, createCommentVNode, mergeProps, isRef, Fragment } from 'vue';
+import { useVModel } from '@vueuse/core';
+import '../../chunk/DRoyW749.mjs';
+import { CircleCheck, DArrowRight, Refresh } from '@element-plus/icons-vue';
+import '../../chunk/DaCDeO95.mjs';
+import { E as ElIcon } from '../../chunk/cPBw23yt.mjs';
+import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';
+
+function inRange(target, range) {
+  return target >= range[0] && target <= range[1];
+}
+
+function draw(ctx, x, y, l, r, operation) {
+  const PI = Math.PI;
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
+  ctx.lineTo(x + l, y);
+  ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
+  ctx.lineTo(x + l, y + l);
+  ctx.lineTo(x, y + l);
+  ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
+  ctx.lineTo(x, y);
+  ctx.lineWidth = 2;
+  ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
+  ctx.strokeStyle = "rgba(255, 255, 255, 0.8)";
+  ctx.stroke();
+  ctx[operation]();
+  ctx.globalCompositeOperation = "destination-over";
+}
+function getContext(width, height, canvas) {
+  const myCanvas = canvas || document.createElement("canvas");
+  myCanvas.width = width;
+  myCanvas.height = height;
+  const ctx = myCanvas.getContext("2d");
+  return ctx;
+}
+
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "text",
+  props: {
+    successRange: {},
+    type: {},
+    diffWidth: {},
+    imgs: {},
+    success: { type: Boolean },
+    width: {},
+    height: {},
+    background: {},
+    circle: { type: Boolean },
+    radius: {},
+    text: {},
+    successText: {},
+    textColor: {},
+    stopToCheck: { type: Boolean },
+    tips: { type: Boolean },
+    refresh: { type: Boolean },
+    successTips: {},
+    failedTips: {}
+  },
+  emits: ["success", "failed", "update:success", "dragStart", "dragMoving", "dragFinished", "dragEnd"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "v891781fa": `${-unref(halfWidth)}px`,
+      "v13fb2ccc": `${unref(halfWidth)}px`,
+      "v4a80da82": `${_ctx.width}px`,
+      "v330f40e4": `${_ctx.height}px`,
+      "v67c15c9b": `${_ctx.background[0]}`,
+      "v9f6c5848": `${_ctx.circle ? _ctx.height / 2 : _ctx.radius}px`,
+      "v5bbe29b5": unref(myTextColor),
+      "v15190af8": `${(unref(sliderLeft) - _ctx.width) / 2}px`,
+      "v477e15dc": `${unref(progressWidth)}px`,
+      "v67c1d0fa": `${_ctx.background[1]}`,
+      "add22124": `${_ctx.circle ? `${_ctx.height / 2}px 0 0 ${_ctx.height / 2}px` : _ctx.radius}px`,
+      "v67c24559": `${_ctx.background[2]}`,
+      "v52b68a76": `${unref(sliderLeft)}px`
+    }));
+    const props = __props;
+    const emits = __emit;
+    const isMoving = ref(false);
+    const startX = ref(0);
+    const currentX = ref(0);
+    const isSuccess = ref(false);
+    const isSwiped = ref(false);
+    const mySuccess = useVModel(props, "success", emits);
+    const myText = computed(() => isSuccess.value ? props.successText : props.text);
+    const moveX = computed(() => currentX.value - startX.value);
+    const halfWidth = computed(() => props.width / 2);
+    const swipeWidth = computed(() => props.width - props.height);
+    const mySuccessRange = computed(() => props.successRange || [swipeWidth.value, 9999]);
+    const sliderLeft = computed(() => {
+      if (moveX.value < 0) {
+        return 0;
+      }
+      if (moveX.value > swipeWidth.value) {
+        return swipeWidth.value;
+      }
+      return moveX.value;
+    });
+    const progressWidth = computed(() => {
+      if (moveX.value < 0) {
+        return 0;
+      }
+      if (moveX.value > swipeWidth.value) {
+        return props.width - props.height / 2;
+      }
+      return moveX.value + props.height / 2;
+    });
+    const myTextColor = computed(() => isSuccess.value ? "#fff" : props.textColor);
+    function verify(result) {
+      mySuccess.value = result;
+      result ? emits("success") : emits("failed");
+    }
+    function dragMoving(e) {
+      if (!isMoving.value || isSuccess.value) {
+        return;
+      }
+      currentX.value = e.pageX || e.touches[0].pageX;
+      emits("dragMoving", moveX.value);
+      if (inRange(moveX.value, mySuccessRange.value) && !props.stopToCheck) {
+        isSuccess.value = true;
+        isMoving.value = false;
+        verify(true);
+      }
+    }
+    function dragFinished(e) {
+      if (!isMoving.value || isSuccess.value) {
+        return;
+      }
+      currentX.value = e.pageX || e.touches[0].pageX;
+      isMoving.value = false;
+      if (!inRange(moveX.value, mySuccessRange.value)) {
+        currentX.value = startX.value;
+        isSwiped.value = true;
+        setTimeout(() => {
+          isSwiped.value = false;
+          emits("dragFinished", currentX.value);
+        }, 500);
+        verify(false);
+      } else {
+        isSuccess.value = true;
+        verify(true);
+      }
+      emits("dragEnd", currentX.value);
+    }
+    function dragStart(e) {
+      if (isSuccess.value) {
+        return;
+      }
+      isMoving.value = true;
+      startX.value = e.pageX || e.touches[0].pageX;
+      emits("dragStart", startX.value);
+    }
+    function reset() {
+      isMoving.value = false;
+      startX.value = 0;
+      currentX.value = 0;
+      isSuccess.value = false;
+      isSwiped.value = false;
+      mySuccess.value = false;
+    }
+    __expose({ reset });
+    return (_ctx, _cache) => {
+      const _component_el_icon = ElIcon;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.wrapper),
+        onMousemove: dragMoving,
+        onMouseup: dragFinished,
+        onMouseleave: dragFinished
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([_ctx.$style.progress, { [_ctx.$style.animate]: unref(isSwiped), [_ctx.$style.success]: unref(isSuccess) }])
+        }, null, 2),
+        createElementVNode("div", {
+          class: normalizeClass([_ctx.$style.text, { [_ctx.$style.animate]: !unref(isSuccess) }])
+        }, [
+          createElementVNode("span", {
+            class: normalizeClass({ [_ctx.$style["text-transform"]]: __props.stopToCheck && unref(isSuccess), [_ctx.$style.success]: unref(isSuccess) })
+          }, toDisplayString(unref(myText)), 3)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass([_ctx.$style.slider, { [_ctx.$style.animate]: unref(isSwiped) }]),
+          onMousedown: withModifiers(dragStart, ["prevent"])
+        }, [
+          createVNode(_component_el_icon, {
+            size: 20,
+            color: unref(isSuccess) ? __props.background[2] : __props.textColor
+          }, {
+            default: withCtx(() => [
+              unref(isSuccess) ? (openBlock(), createBlock(unref(CircleCheck), { key: 0 })) : (openBlock(), createBlock(unref(DArrowRight), { key: 1 }))
+            ]),
+            _: 1
+          }, 8, ["color"])
+        ], 34)
+      ], 34);
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const wrapper$2 = "_wrapper_12cgr_9";
+const text = "_text_12cgr_23";
+const animate$1 = "_animate_12cgr_34";
+const slidetounlock = "_slidetounlock_12cgr_1";
+const success$1 = "_success_12cgr_37";
+const progress = "_progress_12cgr_47";
+const slider = "_slider_12cgr_61";
+const style0$2 = {
+	wrapper: wrapper$2,
+	text: text,
+	animate: animate$1,
+	slidetounlock: slidetounlock,
+	success: success$1,
+	"text-transform": "_text-transform_12cgr_42",
+	progress: progress,
+	slider: slider
+};
+
+const cssModules$2 = {
+  "$style": style0$2
+};
+const Text = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
+
+const _hoisted_1 = ["src"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "image",
+  props: {
+    type: {},
+    diffWidth: {},
+    imgs: {},
+    success: { type: Boolean },
+    width: {},
+    height: {},
+    background: {},
+    circle: { type: Boolean },
+    radius: {},
+    text: {},
+    successText: {},
+    textColor: {},
+    stopToCheck: { type: Boolean },
+    tips: { type: Boolean },
+    refresh: { type: Boolean },
+    successTips: {},
+    failedTips: {}
+  },
+  emits: ["success", "failed", "update:success"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "c713fcfc": `${_ctx.width}px`,
+      "afb2aafe": `${_ctx.height}px`
+    }));
+    const props = __props;
+    const emits = __emit;
+    const mainRef = useTemplateRef("mainRef");
+    const moveRef = useTemplateRef("moveRef");
+    const imgRef = useTemplateRef("imgRef");
+    const textRef = useTemplateRef("textRef");
+    const mySuccess = useVModel(props, "success", emits);
+    const isSwiped = ref(false);
+    const clipBarX = ref(0);
+    const isSuccess = ref(false);
+    const imgSrc = ref("");
+    const isHandled = ref(false);
+    const successRange = computed(() => [clipBarX.value - props.diffWidth, clipBarX.value + props.diffWidth]);
+    function setImage() {
+      if (props.imgs.length <= 1) {
+        return;
+      }
+      const lastImg = imgSrc.value;
+      do {
+        imgSrc.value = props.imgs[Math.floor(Math.random() * props.imgs.length)];
+      } while (lastImg === imgSrc.value);
+    }
+    function render() {
+      const img = imgRef.value;
+      const imgWidth = img.width;
+      const imgHeight = img.height;
+      const l = props.height;
+      const r = props.radius;
+      const halfWidth = Math.floor(props.width / 2);
+      const refreshHeight = 25;
+      const tipHeight = 20;
+      const maxX = Math.max(0, halfWidth - l - r - 5);
+      const x = halfWidth + Math.ceil(Math.random() * maxX);
+      const y = refreshHeight + Math.floor(Math.random() * Math.max(0, imgHeight - l - refreshHeight - tipHeight));
+      const mainCtx = getContext(imgWidth, imgHeight, mainRef.value);
+      draw(mainCtx, x, y, l, r, "fill");
+      clipBarX.value = x;
+      const tmpCtx = getContext(imgWidth, imgHeight);
+      draw(tmpCtx, x, y, l, r, "clip");
+      tmpCtx.drawImage(img, 0, 0, imgWidth, imgHeight);
+      const pieceSize = l + r * 2 + 3;
+      const pieceX = Math.max(0, x - r - 1);
+      const pieceY = Math.max(0, y - r - 1);
+      const sx = Math.min(pieceX, imgWidth - pieceSize);
+      const sy = Math.min(pieceY, imgHeight - pieceSize);
+      const imageData = tmpCtx.getImageData(sx, sy, pieceSize, pieceSize);
+      const moveCtx = getContext(pieceSize, pieceSize, moveRef.value);
+      moveRef.value.style.top = `${y - 5}px`;
+      moveCtx.putImageData(imageData, 0, 0);
+    }
+    function handleDragMoving(moveX) {
+      moveRef.value.style.left = `${moveX}px`;
+    }
+    function handleFailed() {
+      isSwiped.value = true;
+      isHandled.value = true;
+      moveRef.value.style.left = "0px";
+      emits("failed");
+    }
+    function handleSuccess() {
+      isSuccess.value = true;
+      isHandled.value = true;
+      emits("success");
+    }
+    function reset() {
+      isHandled.value = false;
+      isSuccess.value = false;
+      textRef.value?.reset();
+      moveRef.value.style.left = "0px";
+      render();
+    }
+    __expose({ reset: setImage });
+    onBeforeMount(() => setImage());
+    return (_ctx, _cache) => {
+      const _component_el_icon = ElIcon;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.wrapper)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.container)
+        }, [
+          createElementVNode("img", {
+            ref_key: "imgRef",
+            ref: imgRef,
+            crossOrigin: "anonymous",
+            src: unref(imgSrc),
+            style: { "width": "100%" },
+            onLoad: reset
+          }, null, 40, _hoisted_1),
+          createElementVNode("canvas", {
+            ref_key: "mainRef",
+            ref: mainRef,
+            class: "main-canvas"
+          }, null, 512),
+          createElementVNode("canvas", {
+            ref_key: "moveRef",
+            ref: moveRef,
+            class: normalizeClass([_ctx.$style["move-canvas"], { [_ctx.$style.animate]: unref(isSwiped) }])
+          }, null, 2),
+          __props.refresh && !unref(isSuccess) ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.refresh),
+            onClick: setImage
+          }, [
+            createVNode(_component_el_icon, { size: 26 }, {
+              default: withCtx(() => [
+                createVNode(unref(Refresh))
+              ]),
+              _: 1
+            })
+          ], 2)) : createCommentVNode("", true),
+          __props.tips && unref(isHandled) ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass([_ctx.$style.tips, { [_ctx.$style.success]: unref(isSuccess), [_ctx.$style.danger]: !unref(isSuccess) }])
+          }, toDisplayString(unref(isSuccess) ? __props.successTips : __props.failedTips), 3)) : createCommentVNode("", true)
+        ], 2),
+        createVNode(Text, mergeProps({
+          ref_key: "textRef",
+          ref: textRef
+        }, props, {
+          success: unref(mySuccess),
+          "onUpdate:success": _cache[0] || (_cache[0] = ($event) => isRef(mySuccess) ? mySuccess.value = $event : null),
+          "success-range": unref(successRange),
+          "stop-to-check": "",
+          onDragMoving: handleDragMoving,
+          onDragFinished: _cache[1] || (_cache[1] = ($event) => isSwiped.value = false),
+          onFailed: handleFailed,
+          onSuccess: handleSuccess
+        }), null, 16, ["success", "success-range"])
+      ], 2);
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const wrapper$1 = "_wrapper_1jbqv_1";
+const container = "_container_1jbqv_8";
+const refresh = "_refresh_1jbqv_19";
+const animate = "_animate_1jbqv_28";
+const tips = "_tips_1jbqv_32";
+const success = "_success_1jbqv_42";
+const danger = "_danger_1jbqv_46";
+const style0$1 = {
+	wrapper: wrapper$1,
+	container: container,
+	refresh: refresh,
+	"move-canvas": "_move-canvas_1jbqv_28",
+	animate: animate,
+	tips: tips,
+	success: success,
+	danger: danger
+};
+
+const cssModules$1 = {
+  "$style": style0$1
+};
+const Image = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "drag-verify",
+  props: {
+    type: { default: "text" },
+    diffWidth: { default: 20 },
+    imgs: { default: () => [] },
+    success: { type: Boolean },
+    width: { default: 300 },
+    height: { default: 40 },
+    background: { default: () => ["#f5f5f5", "#d9d9d9", "#76c61d"] },
+    circle: { type: Boolean, default: false },
+    radius: { default: 4 },
+    text: { default: "拖动滑块完成验证" },
+    successText: { default: "验证成功" },
+    textColor: { default: "#333" },
+    stopToCheck: { type: Boolean, default: false },
+    tips: { type: Boolean, default: true },
+    refresh: { type: Boolean, default: true },
+    successTips: { default: "验证通过，超过89.7%用户" },
+    failedTips: { default: "验证未通过，拖动滑块将悬浮图像正确合并" }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const mySuccess = useVModel(props, "success");
+    const textRef = useTemplateRef("textRef");
+    const imageRef = useTemplateRef("imageRef");
+    __expose({
+      reset: () => {
+        textRef.value?.reset();
+        imageRef.value?.reset();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        __props.type === "text" ? (openBlock(), createBlock(Text, mergeProps({ key: 0 }, props, {
+          ref_key: "textRef",
+          ref: textRef,
+          success: unref(mySuccess),
+          "onUpdate:success": _cache[0] || (_cache[0] = ($event) => isRef(mySuccess) ? mySuccess.value = $event : null)
+        }), null, 16, ["success"])) : createCommentVNode("", true),
+        __props.type === "image" ? (openBlock(), createBlock(Image, mergeProps({ key: 1 }, props, {
+          ref_key: "imageRef",
+          ref: imageRef,
+          success: unref(mySuccess),
+          "onUpdate:success": _cache[1] || (_cache[1] = ($event) => isRef(mySuccess) ? mySuccess.value = $event : null)
+        }), null, 16, ["success"])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const wrapper = "_wrapper_72jdw_1";
+const style0 = {
+	wrapper: wrapper
+};
+
+const cssModules = {
+  "$style": style0
+};
+const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+
+const __vite_glob_0_14 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: Component
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { Component as C, __vite_glob_0_14 as _ };

package/dist/es/components/drag-verify/drag-verify.vue.d.ts

@@ -0,0 +1,123 @@
+import { IDragVerifyProps } from './drag-verify';
+declare const _default: import('vue').DefineComponent<IDragVerifyProps, {
+    reset: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IDragVerifyProps> & Readonly<{}>, {
+    type: "text" | "image";
+    circle: boolean;
+    text: string;
+    width: number;
+    textColor: string;
+    height: number;
+    background: [string, string, string];
+    diffWidth: number;
+    imgs: string[];
+    radius: number;
+    successText: string;
+    stopToCheck: boolean;
+    tips: boolean;
+    refresh: boolean;
+    successTips: string;
+    failedTips: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    textRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./drag-verify').IDragVerifyTextProps> & Readonly<{
+        onSuccess?: (() => any) | undefined;
+        onFailed?: (() => any) | undefined;
+        "onUpdate:success"?: ((success: boolean) => any) | undefined;
+        onDragStart?: ((startX: number) => any) | undefined;
+        onDragMoving?: ((moveX: number) => any) | undefined;
+        onDragFinished?: ((moveX: number) => any) | undefined;
+        onDragEnd?: ((currentX: number) => any) | undefined;
+    }>, {
+        reset: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        success: () => any;
+        failed: () => any;
+        "update:success": (success: boolean) => any;
+        dragStart: (startX: number) => any;
+        dragMoving: (moveX: number) => any;
+        dragFinished: (moveX: number) => any;
+        dragEnd: (currentX: number) => any;
+    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('./drag-verify').IDragVerifyTextProps> & Readonly<{
+        onSuccess?: (() => any) | undefined;
+        onFailed?: (() => any) | undefined;
+        "onUpdate:success"?: ((success: boolean) => any) | undefined;
+        onDragStart?: ((startX: number) => any) | undefined;
+        onDragMoving?: ((moveX: number) => any) | undefined;
+        onDragFinished?: ((moveX: number) => any) | undefined;
+        onDragEnd?: ((currentX: number) => any) | undefined;
+    }>, {
+        reset: () => void;
+    }, {}, {}, {}, {}> | null;
+    imageRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<Required<IDragVerifyProps>> & Readonly<{
+        onSuccess?: (() => any) | undefined;
+        onFailed?: (() => any) | undefined;
+        "onUpdate:success"?: ((success: boolean) => any) | undefined;
+    }>, {
+        reset: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        success: () => any;
+        failed: () => any;
+        "update:success": (success: boolean) => any;
+    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        imgRef: HTMLImageElement;
+        mainRef: HTMLCanvasElement;
+        moveRef: HTMLCanvasElement;
+        textRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./drag-verify').IDragVerifyTextProps> & Readonly<{
+            onSuccess?: (() => any) | undefined;
+            onFailed?: (() => any) | undefined;
+            "onUpdate:success"?: ((success: boolean) => any) | undefined;
+            onDragStart?: ((startX: number) => any) | undefined;
+            onDragMoving?: ((moveX: number) => any) | undefined;
+            onDragFinished?: ((moveX: number) => any) | undefined;
+            onDragEnd?: ((currentX: number) => any) | undefined;
+        }>, {
+            reset: () => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            success: () => any;
+            failed: () => any;
+            "update:success": (success: boolean) => any;
+            dragStart: (startX: number) => any;
+            dragMoving: (moveX: number) => any;
+            dragFinished: (moveX: number) => any;
+            dragEnd: (currentX: number) => any;
+        }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('./drag-verify').IDragVerifyTextProps> & Readonly<{
+            onSuccess?: (() => any) | undefined;
+            onFailed?: (() => any) | undefined;
+            "onUpdate:success"?: ((success: boolean) => any) | undefined;
+            onDragStart?: ((startX: number) => any) | undefined;
+            onDragMoving?: ((moveX: number) => any) | undefined;
+            onDragFinished?: ((moveX: number) => any) | undefined;
+            onDragEnd?: ((currentX: number) => any) | undefined;
+        }>, {
+            reset: () => void;
+        }, {}, {}, {}, {}> | null;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<Required<IDragVerifyProps>> & Readonly<{
+        onSuccess?: (() => any) | undefined;
+        onFailed?: (() => any) | undefined;
+        "onUpdate:success"?: ((success: boolean) => any) | undefined;
+    }>, {
+        reset: () => void;
+    }, {}, {}, {}, {}> | null;
+}, any>;
+export default _default;

package/dist/es/components/drag-verify/helper.d.ts

@@ -0,0 +1,2 @@
+export declare function draw(ctx: CanvasRenderingContext2D, x: number, y: number, l: number, r: number, operation: 'fill' | 'clip'): void;
+export declare function getContext(width: number, height: number, canvas?: HTMLCanvasElement): CanvasRenderingContext2D;