chroe: add call api of components and optimization of code

Author: wenlng

README.md

@@ -59,6 +59,8 @@ interface ClickConfig {
   showTheme?: boolean;
   title?: string;
   buttonText?: string;
+  iconSize?: number;
+  dotSize?: number;
 }
 
 // data = {}
@@ -72,7 +74,15 @@ interface ClickEvents {
   click?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (dots: Array<ClickDot>) => boolean;
+  confirm?: (dots: Array<ClickDot>, reset:() => void) => void;
+}
+
+// component call method
+interface ClickExpose {
+  reset: Function,
+  clear: Function,
+  refresh: Function,
+  close: Function,
 }
 ```
 
@@ -102,6 +112,7 @@ interface SlideConfig {
   horizontalPadding?: number;
   showTheme?: boolean;
   title?: string;
+  scope ?: boolean;
 }
 
 // data = {}
@@ -119,7 +130,15 @@ interface SlideEvents {
   move?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (point: SlidePoint) => boolean;
+  confirm?: (point: SlidePoint, reset:() => void) => void;
+}
+
+// component call method
+interface SlideExpose {
+  reset: Function,
+  clear: Function,
+  refresh: Function,
+  close: Function,
 }
 ```
 ```ts
@@ -133,6 +152,7 @@ interface SlideRegionConfig {
   horizontalPadding?: number;
   showTheme?: boolean;
   title?: string;
+  scope ?: boolean;
 }
 
 // data = {}
@@ -150,7 +170,15 @@ interface SlideRegionEvents {
   move?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (point: SlideRegionPoint) => boolean;
+  confirm?: (point: SlideRegionPoint, reset:() => void) => void;
+}
+
+// component call method
+interface SlideRegionExpose {
+  reset: Function,
+  clear: Function,
+  refresh: Function,
+  close: Function,
 }
 ```
 
@@ -175,6 +203,7 @@ interface RotateConfig {
   horizontalPadding?: number;
   showTheme?: boolean;
   title?: string;
+  scope ?: boolean;
 }
 
 // data = {}
@@ -189,7 +218,15 @@ interface RotateEvents {
   rotate?: (angle: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (angle: number) => boolean;
+  confirm?: (angle: number, reset:() => void) => void;
+}
+
+// component call method
+interface RotateExpose {
+  reset: Function,
+  clear: Function,
+  refresh: Function,
+  close: Function,
 }
 ```
 

example/App.vue

@@ -1,6 +1,6 @@
 {
   "name": "go-captcha-vue",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "private": false,
   "type": "module",
   "license": "MIT",

package.json

@@ -15,14 +15,15 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, defineEmits, ref, toRefs, watch} from "vue"
+import {computed, defineEmits, reactive, toRaw, toRefs, watch} from "vue"
 import BtnDefaultIcon from "../../assets/icons/btn-default-icon.vue";
 import BtnWarnIcon from "../../assets/icons/btn-warn-icon.vue";
 import BtnErrorIcon from "../../assets/icons/btn-error-icon.vue";
 import BtnSuccessIcon from "../../assets/icons/btn-success-icon.vue";
 
 import {ButtonConfig, defaultConfig} from "./meta/config";
 import {ButtonType} from "@/components/button/meta/types";
+import {ClickConfig} from "@/components/click/meta/config";
 
 // @ts-ignore
 const props = withDefaults(
@@ -41,18 +42,12 @@ const props = withDefaults(
     },
 )
 
-const { type, title, disabled } = toRefs(props);
+const { type, title, disabled, config } = toRefs(props);
+const localConfig = reactive<ClickConfig>({...defaultConfig(), ...toRaw(config)})
 
-const conf = ref({
-  ...defaultConfig(),
-  ...props.config,
-})
-watch(() => props.config, () => {
-  conf.value = {
-    ...conf.value,
-    ...props.config
-  }
-})
+watch(() => props.config, (newData, _) => {
+  Object.assign(localConfig, newData)
+},{ deep: true })
 
 const btnClass = computed(() => {
   const tc = `gc-${type.value}`
@@ -61,12 +56,12 @@ const btnClass = computed(() => {
 
 const btnStyle = computed(() => {
   return {
-    width:  conf.value.width + "px",
-    height: conf.value.height + "px",
-    paddingLeft: conf.value.horizontalPadding + "px",
-    paddingRight: conf.value.horizontalPadding + "px",
-    paddingTop: conf.value.verticalPadding + "px",
-    paddingBottom: conf.value.verticalPadding + "px",
+    width:  localConfig.width + "px",
+    height: localConfig.height + "px",
+    paddingLeft: localConfig.horizontalPadding + "px",
+    paddingRight: localConfig.horizontalPadding + "px",
+    paddingTop: localConfig.verticalPadding + "px",
+    paddingBottom: localConfig.verticalPadding + "px",
   }
 })
 

packages/components/button/index.vue

@@ -4,7 +4,7 @@ import {reactive, toRaw} from "vue";
 import {getDomXY} from "@/helper/helper";
 
 export function useHandler(
-  _data: ClickData,
+  data: ClickData,
   event: ClickEvent,
 ) {
   const dots = reactive<{list: Array<ClickDot>}>({list: []})
@@ -26,9 +26,7 @@ export function useHandler(
     const yy = parseInt(yPos.toString())
     const date = new Date()
     const index = dots.list.length
-    const list = dots.list
-    list.push({key: date.getTime(), index: index + 1, x: xx, y: yy})
-    dots.list = list
+    dots.list.push({key: date.getTime(), index: index + 1, x: xx, y: yy})
 
     event.click && event.click(xx, yy)
     e.cancelBubble = true
@@ -38,7 +36,7 @@ export function useHandler(
 
   const confirmEvent = (e: Event|any) => {
     event.confirm && event.confirm(toRaw(dots.list), () => {
-      dots.list = []
+      resetData()
     })
     e.cancelBubble = true
     e.preventDefault()
@@ -47,25 +45,37 @@ export function useHandler(
 
   const closeEvent = (e: Event|any) => {
     event.close && event.close()
-    dots.list = []
+    resetData()
     e.cancelBubble = true
     e.preventDefault()
     return false
   }
 
   const refreshEvent = (e: Event|any) => {
     event.refresh && event.refresh()
-    dots.list = []
+    resetData()
     e.cancelBubble = true
     e.preventDefault()
     return false
   }
 
+  const resetData = () => {
+    dots.list = []
+  }
+
+  const clearData = () => {
+    resetData()
+    data.thumb = ''
+    data.image = ''
+  }
+
   return {
     dots,
     clickEvent,
     confirmEvent,
     closeEvent,
     refreshEvent,
+    resetData,
+    clearData,
   }
 }

packages/components/click/hooks/handler.ts

@@ -1,46 +1,48 @@
 <template>
   <div
-      :class="`go-captcha gc-wrapper ${config.showTheme ? 'gc-theme' : ''}`"
+      :class="`go-captcha gc-wrapper ${localConfig.showTheme && 'gc-theme'}`"
       :style="wrapperStyles"
+      v-show="hasDisplayWrapperState"
   >
     <div class="gc-header">
-      <span>{{ config.title }}</span>
-      <img v-show="data.thumb !== ''" :style="thumbStyles" :src="data.thumb" alt="..." />
+      <span>{{ localConfig.title }}</span>
+      <img v-show="hasDisplayImageState" :style="thumbStyles" :src="localData.thumb" alt="" />
     </div>
     <div class="gc-body" :style="imageStyles">
       <div class="gc-loading">
         <loading-icon />
       </div>
-      <img :style="imageStyles" v-show="data.image !== ''" class="gc-picture" :src="data.image" alt="..." @click="handler.clickEvent"/>
+      <img :style="imageStyles" v-show="hasDisplayImageState" class="gc-picture" :src="localData.image" alt="" @click="handler.clickEvent"/>
       <div class="gc-dots">
-        <div class="gc-dot" v-for="dot in dots.list" :key="`${dot.key + '-' + dot.index}`" :style="{
-          top: (dot.y - 11) + 'px',
-          left: (dot.x - 11) + 'px',
+        <div class="gc-dot" v-for="dot in handler.dots.list" :key="`${dot.key + '-' + dot.index}`" :style="{
+          top: (dot.y - ((localConfig.dotSize || 1)/2)-1) + 'px',
+          left: (dot.x - ((localConfig.dotSize || 1)/2)-1) + 'px',
         }">{{dot.index}}</div>
       </div>
     </div>
     <div class="gc-footer">
       <div class="gc-icon-block gc-icon-block2">
-        <close-icon :width="22" :height="22" @click="handler.closeEvent"/>
-        <refresh-icon :width="22" :height="22" @click="handler.refreshEvent"/>
+        <close-icon :width="localConfig.iconSize" :height="localConfig.iconSize" @click="handler.closeEvent"/>
+        <refresh-icon :width="localConfig.iconSize" :height="localConfig.iconSize" @click="handler.refreshEvent"/>
       </div>
       <div class="gc-button-block">
-        <button @click="handler.confirmEvent">{{ config.buttonText }}</button>
+        <button :class="!hasDisplayImageState && 'disabled'" @click="handler.confirmEvent">{{ localConfig.buttonText }}</button>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {computed, ref, watch} from "vue"
-import {ClickConfig, defaultConfig} from "./meta/config";
-
+import {computed, reactive, toRaw, watch} from "vue"
 import CloseIcon from "../../assets/icons/close-icon.vue";
+
 import RefreshIcon from "../../assets/icons/refresh-icon.vue";
 import LoadingIcon from "../../assets/icons/loading-icon.vue";
 
+import {ClickConfig, defaultConfig} from "./meta/config";
 import {ClickData} from "./meta/data";
 import {ClickEvent} from "./meta/event";
+import {ClickExpose} from "./meta/expose";
 import {useHandler} from "./hooks/handler";
 
 // @ts-ignore
@@ -57,26 +59,30 @@ const props = withDefaults(
     },
 )
 
-const { data, events } = props;
-const config = ref({
-  ...defaultConfig(),
-  ...props.config,
-})
-watch(() => props.config, () => {
-  config.value = {
-    ...config.value,
-    ...props.config
-  }
-})
+const { data, events, config } = props;
+const localData = reactive<ClickData>({...toRaw(data)})
+const localEvent = reactive<ClickEvent>({...toRaw(events)})
+const localConfig = reactive<ClickConfig>({...defaultConfig(), ...toRaw(config)})
+
+watch(() => props.data, (newData, _) => {
+  Object.assign(localData, newData)
+},{ deep: true });
 
-const handler = useHandler(data, events);
+watch(() => props.events, (newData, _) => {
+  Object.assign(localEvent, newData)
+},{ deep: true })
 
-const hPadding = config.value.horizontalPadding || 0
-const vPadding = config.value.verticalPadding || 0
-const width = (config.value.width || 0) + ( hPadding * 2) + (config.value.showTheme ? 2 : 0)
-const dots = handler.dots
+watch(() => props.config, (newData, _) => {
+  Object.assign(localConfig, newData)
+},{ deep: true })
+
+const handler = useHandler(localData, localEvent);
 
 const wrapperStyles = computed(() => {
+  const hPadding = localConfig.horizontalPadding || 0
+  const vPadding = localConfig.verticalPadding || 0
+  const width = (localConfig.width || 0) + ( hPadding * 2) + (localConfig.showTheme ? 2 : 0)
+
   return {
     width:  width+ "px",
     paddingLeft: hPadding + "px",
@@ -88,17 +94,32 @@ const wrapperStyles = computed(() => {
 
 const thumbStyles = computed(() => {
   return {
-    width: config.value.thumbWidth + "px",
-    height: config.value.thumbHeight + "px",
+    width: localConfig.thumbWidth + "px",
+    height: localConfig.thumbHeight + "px",
   }
 })
 
 const imageStyles = computed(() => {
   return {
-    width: config.value.width + "px",
-    height: config.value.height + "px"
+    width: localConfig.width + "px",
+    height: localConfig.height + "px"
   }
 })
+
+const hasDisplayImageState = computed(() => {
+  return localData.image != '' && localData.thumb != ''
+})
+
+const hasDisplayWrapperState = computed(() => {
+  return (localConfig.width || 0) > 0 || (localConfig.height || 0) > 0
+})
+
+defineExpose<ClickExpose>({
+  reset: handler.resetData,
+  clear: handler.clearData,
+  refresh: handler.refreshEvent,
+  close: handler.closeEvent,
+});
 </script>
 
 <style lang="less">
@@ -116,11 +137,11 @@ const imageStyles = computed(() => {
     .gc-dot {
       position: absolute;
       z-index: 2;
-      width: 20px;
-      height: 20px;
+      width: 22px;
+      height: 22px;
       color: #cedffe;
       background: #3e7cff;
-      border: 2px solid #f7f9fb;
+      border: 3px solid #f7f9fb;
       display:-webkit-box;
       display:-webkit-flex;
       display:-ms-flexbox;