From ba36ce88361c53d136da85adf7168f5971037478 Mon Sep 17 00:00:00 2001
From: Vben <ann.vben@gmail.com>
Date: Sun, 10 Nov 2024 10:09:06 +0800
Subject: [PATCH] feat: pinInput supports disabled props (#4851)

* feat: pinInput supports disabled props
---
 .../src/components/pin-input/input.vue        | 35 ++++++++++++-------
 .../src/components/pin-input/types.ts         |  4 +++
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
index d55fa7e1..7ba5cfbb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
@@ -10,15 +10,18 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<PinInputProps>(), {
-  btnLoading: false,
-  codeLength: 6,
-  handleSendCode: async () => {},
-  maxTime: 60,
-});
+const {
+  codeLength = 6,
+  createText = async () => {},
+  disabled = false,
+  handleSendCode = async () => {},
+  loading = false,
+  maxTime = 60,
+} = defineProps<PinInputProps>();
 
 const emit = defineEmits<{
   complete: [];
+  sendError: [error: any];
 }>();
 
 const timer = ref<ReturnType<typeof setTimeout>>();
@@ -30,11 +33,11 @@ const countdown = ref(0);
 
 const btnText = computed(() => {
   const countdownValue = countdown.value;
-  return props.createText?.(countdownValue);
+  return createText?.(countdownValue);
 });
 
 const btnLoading = computed(() => {
-  return props.loading || countdown.value > 0;
+  return loading || countdown.value > 0;
 });
 
 watch(
@@ -50,10 +53,16 @@ function handleComplete(e: string[]) {
 }
 
 async function handleSend(e: Event) {
-  e?.preventDefault();
-  await props.handleSendCode();
-  countdown.value = props.maxTime;
-  startCountdown();
+  try {
+    e?.preventDefault();
+    await handleSendCode();
+    countdown.value = maxTime;
+    startCountdown();
+  } catch (error) {
+    console.error('Failed to send code:', error);
+    // Consider emitting an error event or showing a notification
+    emit('sendError', error);
+  }
 }
 
 function startCountdown() {
@@ -77,6 +86,7 @@ const id = useId();
   <PinInput
     :id="id"
     v-model="inputValue"
+    :disabled="disabled"
     class="flex w-full justify-between"
     otp
     placeholder="○"
@@ -92,6 +102,7 @@ const id = useId();
         />
       </PinInputGroup>
       <VbenButton
+        :disabled="disabled"
         :loading="btnLoading"
         class="flex-grow"
         size="lg"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
index 0439d3b2..182d8844 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
@@ -8,6 +8,10 @@ interface PinInputProps {
    * 发送验证码按钮文本
    */
   createText?: (countdown: number) => string;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
   /**
    * 自定义验证码发送逻辑
    * @returns