@vue-puzzle-vcode/core 2.0.0 → 2.0.2

package/README.md

@@ -0,0 +1,22 @@
+# @vue-puzzle-vcode/core
+
+vue-puzzle-vcode 的 headless 核心:滑动拼图验证码的状态机与组合式函数(composables),同时兼容 Vue 2.7 与 Vue 3(基于 vue-demi)。
+
+> 一般不需要直接使用本包 —— 请安装组件包 [`@vue-puzzle-vcode/ui`](https://www.npmjs.com/package/@vue-puzzle-vcode/ui)。只有想完全自绘 UI、只复用校验逻辑时才需要它。
+
+## 安装
+
+```bash
+pnpm add @vue-puzzle-vcode/core
+# 需已安装 vue@^2.7 || ^3(peer dependency)
+```
+
+## 导出
+
+- `useVcode(props, emits)` —— 核心状态机:画布数据、滑块偏移、成功/失败判定、重置
+- `provideVcodeContext` / `useVcodeContext` —— 跨部件共享状态的上下文(Radix 风格组合)
+- 全部 TypeScript 类型(props / events / context)
+
+## 文档
+
+完整文档与在线 Demo 见主仓库:[github.com/daguanren21/vue-puzzle-vcode](https://github.com/daguanren21/vue-puzzle-vcode#readme)

package/dist/index.cjs

@@ -117,8 +117,13 @@ function useVcode(props, emits) {
 		const w = startWidth.value + newX.value - startX.value;
 		return w < sliderBaseSize.value ? sliderBaseSize.value : w > props.canvasWidth ? props.canvasWidth : w;
 	});
+	/**
+	* Travel distance of the track (slider end - start). Floored at 1 so the
+	* compensation term never divides by zero when canvasWidth ≈ sliderSize.
+	*/
+	const trackTravel = (0, vue_demi.computed)(() => (0, _vue_puzzle_vcode_shared.computeTrackTravel)(props.canvasWidth, sliderBaseSize.value));
 	/** translateX of the floating puzzle piece, synced to the slider. */
-	const puzzleTranslateX = (0, vue_demi.computed)(() => styleWidth.value - sliderBaseSize.value - (puzzleBaseSize.value - sliderBaseSize.value) * ((styleWidth.value - sliderBaseSize.value) / (props.canvasWidth - sliderBaseSize.value)));
+	const puzzleTranslateX = (0, vue_demi.computed)(() => (0, _vue_puzzle_vcode_shared.computePuzzleTranslateX)(styleWidth.value, sliderBaseSize.value, puzzleBaseSize.value, trackTravel.value));
 	const canvases = {
 		main: (0, vue_demi.shallowRef)(),
 		puzzle: (0, vue_demi.shallowRef)(),
@@ -179,7 +184,10 @@ function useVcode(props, emits) {
 				pinY: pinY.value
 			});
 		} catch {
-			return init(true);
+			if (!withCanvas) return init(true);
+			loading.value = false;
+			isCanSlide.value = false;
+			return;
 		}
 		loading.value = false;
 		isCanSlide.value = true;
@@ -204,7 +212,7 @@ function useVcode(props, emits) {
 	}
 	function submit() {
 		isSubmting.value = true;
-		const x = Math.abs(pinX.value - (styleWidth.value - sliderBaseSize.value) + (puzzleBaseSize.value - sliderBaseSize.value) * ((styleWidth.value - sliderBaseSize.value) / (props.canvasWidth - sliderBaseSize.value)) - 3);
+		const x = (0, _vue_puzzle_vcode_shared.computeDragDeviation)(pinX.value, styleWidth.value, sliderBaseSize.value, puzzleBaseSize.value, trackTravel.value);
 		clearTimer();
 		if (x < props.range) {
 			infoText.value = props.successText;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { computed, getCurrentScope, h, inject, onScopeDispose, provide, ref, shallowRef, version } from "vue-demi";
-import { computePuzzleBaseSize, computeSliderBaseSize, drawPuzzleFrame, generateRandomImage, loadImage, randomInt } from "@vue-puzzle-vcode/shared";
+import { computeDragDeviation, computePuzzleBaseSize, computePuzzleTranslateX, computeSliderBaseSize, computeTrackTravel, drawPuzzleFrame, generateRandomImage, loadImage, randomInt } from "@vue-puzzle-vcode/shared";
 //#region src/context.ts
 /**
 * Radix-style typed context factory built on provide/inject.
@@ -116,8 +116,13 @@ function useVcode(props, emits) {
 		const w = startWidth.value + newX.value - startX.value;
 		return w < sliderBaseSize.value ? sliderBaseSize.value : w > props.canvasWidth ? props.canvasWidth : w;
 	});
+	/**
+	* Travel distance of the track (slider end - start). Floored at 1 so the
+	* compensation term never divides by zero when canvasWidth ≈ sliderSize.
+	*/
+	const trackTravel = computed(() => computeTrackTravel(props.canvasWidth, sliderBaseSize.value));
 	/** translateX of the floating puzzle piece, synced to the slider. */
-	const puzzleTranslateX = computed(() => styleWidth.value - sliderBaseSize.value - (puzzleBaseSize.value - sliderBaseSize.value) * ((styleWidth.value - sliderBaseSize.value) / (props.canvasWidth - sliderBaseSize.value)));
+	const puzzleTranslateX = computed(() => computePuzzleTranslateX(styleWidth.value, sliderBaseSize.value, puzzleBaseSize.value, trackTravel.value));
 	const canvases = {
 		main: shallowRef(),
 		puzzle: shallowRef(),
@@ -178,7 +183,10 @@ function useVcode(props, emits) {
 				pinY: pinY.value
 			});
 		} catch {
-			return init(true);
+			if (!withCanvas) return init(true);
+			loading.value = false;
+			isCanSlide.value = false;
+			return;
 		}
 		loading.value = false;
 		isCanSlide.value = true;
@@ -203,7 +211,7 @@ function useVcode(props, emits) {
 	}
 	function submit() {
 		isSubmting.value = true;
-		const x = Math.abs(pinX.value - (styleWidth.value - sliderBaseSize.value) + (puzzleBaseSize.value - sliderBaseSize.value) * ((styleWidth.value - sliderBaseSize.value) / (props.canvasWidth - sliderBaseSize.value)) - 3);
+		const x = computeDragDeviation(pinX.value, styleWidth.value, sliderBaseSize.value, puzzleBaseSize.value, trackTravel.value);
 		clearTimer();
 		if (x < props.range) {
 			infoText.value = props.successText;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vue-puzzle-vcode/core",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Headless core for vue-puzzle-vcode: context factory, v2/v3 render compat, state machine",
   "license": "ISC",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/javaLuo/vue-puzzle-vcode.git",
+    "url": "git+https://github.com/daguanren21/vue-puzzle-vcode.git",
     "directory": "packages/core"
   },
   "type": "module",
@@ -30,7 +30,7 @@
   "sideEffects": false,
   "dependencies": {
     "vue-demi": "0.14.10",
-    "@vue-puzzle-vcode/shared": "^2.0.0"
+    "@vue-puzzle-vcode/shared": "^2.0.2"
   },
   "peerDependencies": {
     "vue": "^2.7.0 || ^3.0.0"