fix rotate captcha

Author: wenlng

README.md

@@ -272,6 +272,7 @@ interface Data {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 // events = {}

README_zh.md

@@ -274,6 +274,7 @@ interface Data {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 // events = {}

example/App.vue

@@ -208,9 +208,9 @@ nextTick(() => {
 /////////////////////////////////
 
 const rotateData = reactive({
-  angle: 20,
   image: rotateImage,
   thumb: rotateThumb,
+  thumbSize: 195,
 })
 const rotateEvents = {
   rotate(angle: number): void {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "go-captcha-vue",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -47,11 +47,11 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "build-only": "vite build && run-p tsd",
+    "build": "run-p type:check \"build:only {@}\" --",
+    "build:only": "vite build && run-p tsd",
     "tsd": "vue-tsc --rootDir ./packages --declaration --emitDeclarationOnly --noEmit false --outDir ./dist",
     "preview": "vite preview --port 5050",
-    "type-check": "vue-tsc --noEmit -p tsconfig.json"
+    "type:check": "vue-tsc --noEmit -p tsconfig.json"
   },
   "peerDependencies": {
     "vue": ">=3"

packages/components/click/index.vue

@@ -142,7 +142,7 @@ const imageStyles = computed(() => {
 })
 
 const hasDisplayImageState = computed(() => {
-  return localData.image != '' || localData.thumb != ''
+  return (localData.image && localData.image.length > 0) || (localData.thumb && localData.thumb.length > 0)
 })
 
 const hasDisplayWrapperState = computed(() => {
@@ -174,9 +174,10 @@ defineExpose<ClickExpose>({
       z-index: 2;
       width: 22px;
       height: 22px;
-      color: #cedffe;
-      background: #3e7cff;
+      color: var(--go-captcha-theme-dot-color-color);
+      background: var(--go-captcha-theme-dot-bg-color);
       border: 3px solid #f7f9fb;
+      border-color: var(--go-captcha-theme-dot-border-color);
       display:-webkit-box;
       display:-webkit-flex;
       display:-ms-flexbox;

packages/components/rotate/index.vue

@@ -99,7 +99,7 @@ const props = withDefaults(
     {
       config: defaultConfig,
       events: () => ({} as RotateEvent),
-      data: () => ({} as RotateData),
+      data: defaultRotateData,
     },
 )
 
@@ -154,7 +154,11 @@ const wrapperStyles = computed(() => {
 
 const thumbStyles = computed(() => {
   return {
-    transform: `rotate(${handler.state.thumbAngle}deg)`
+    transform: `rotate(${handler.state.thumbAngle}deg)`,
+    ...(localData.thumbSize > 0 ? {
+      width: localData.thumbSize + "px",
+      height: localData.thumbSize + "px"
+    } : {})
   }
 })
 
@@ -174,11 +178,11 @@ const imageStyles = computed(() => {
 })
 
 const hasDisplayImageState = computed(() => {
-  return localData.image != ''
+  return localData.image && localData.image.length > 0
 })
 
 const hasDisplayThumbImageState = computed(() => {
-  return localData.thumb != ''
+  return localData.thumb && localData.thumb.length > 0
 })
 
 const hasDisplayWrapperState = computed(() => {
@@ -262,6 +266,14 @@ defineExpose<RotateExpose>({
     right: 0;
     bottom: 0;
 
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     img {
       max-width: 100%;
       max-height: 100%;

packages/components/rotate/meta/data.ts

@@ -9,10 +9,12 @@ export interface RotateData {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 export const defaultRotateData = ():RotateData => ({
   angle: 0,
   image: '',
-  thumb: ''
+  thumb: '',
+  thumbSize: 0
 })

packages/components/slide-region/index.vue

@@ -78,7 +78,7 @@ const props = withDefaults(
     {
       config: defaultConfig,
       events: () => ({} as SlideRegionEvent),
-      data: () => ({} as SlideRegionData),
+      data: defaultSlideRegionData,
     },
 )
 
@@ -151,11 +151,11 @@ const imageStyles = computed(() => {
 })
 
 const hasDisplayImageState = computed(() => {
-  return localData.image != ''
+  return localData.image && localData.image.length > 0
 })
 
 const hasDisplayThumbImageState = computed(() => {
-  return localData.thumb != ''
+  return localData.thumb && localData.thumb.length > 0
 })
 
 const hasDisplayWrapperState = computed(() => {

packages/components/slide/index.vue

@@ -94,7 +94,7 @@ const props = withDefaults(
     {
       config: defaultConfig,
       events: () => ({} as SlideEvent),
-      data: () => ({} as SlideData),
+      data: defaultSlideData,
     },
 )
 
@@ -171,11 +171,11 @@ const imageStyles = computed(() => {
 })
 
 const hasDisplayImageState = computed(() => {
-  return localData.image != ''
+  return localData.image && localData.image.length > 0
 })
 
 const hasDisplayThumbImageState = computed(() => {
-  return localData.thumb != ''
+  return localData.thumb && localData.thumb.length > 0
 })
 
 const hasDisplayWrapperState = computed(() => {

packages/gocaptcha.less

@@ -21,9 +21,13 @@
   --go-captcha-theme-loading-icon-color: #3e7cff;
   --go-captcha-theme-body-bg-color: #34383e;
 
+  --go-captcha-theme-dot-color-color: #cedffe;
+  --go-captcha-theme-dot-bg-color: #4e87ff;
+  --go-captcha-theme-dot-border-color: #ffffff;
+
   --go-captcha-theme-default-color: #3e7cff;
   --go-captcha-theme-default-bg-color: #ecf5ff;
-  --go-captcha-theme-default-border-color: #3e7cff;
+  --go-captcha-theme-default-border-color: #50a1ff;
   --go-captcha-theme-default-hover-color: #e0efff;
 
   --go-captcha-theme-error-color: #ed4630;
@@ -42,7 +46,7 @@
 .go-captcha {
   &.gc-wrapper {
     padding: 12px 16px;
-    background-color: var(--go-captcha-theme-bg-color);
+    //background-color: var(--go-captcha-theme-bg-color);
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -62,6 +66,10 @@
     box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
     -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
     -moz-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
+
+    &.gc-wrapper {
+      background-color: var(--go-captcha-theme-bg-color);
+    }
   }
 
   .gc-header {
@@ -114,6 +122,7 @@
     overflow: hidden;
 
     .gc-body-inner{
+      position: relative;
       background: var(--go-captcha-theme-body-bg-color);
     }
   }
@@ -204,7 +213,7 @@
       color: var(--go-captcha-theme-btn-color);
       background-color: var(--go-captcha-theme-btn-bg-color);
       border: 1px solid transparent;
-      border-color: var(--go-captcha-theme-btn-bg-color);
+      border-color: var(--go-captcha-theme-btn-border-color);
       -webkit-appearance: none;
       box-sizing: border-box;
       outline: none;