From eee125d2c7fd03bd2b8e5292d5026db84c5b34f3 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Mon, 1 Sep 2025 00:24:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20`FaPinInput`=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=BE=93=E5=85=A5bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/components/FaPinInput/index.vue                 | 10 +++-------
 .../components/FaPinInput/pin-input/PinInputGroup.vue  |  3 ++-
 .../FaPinInput/pin-input/PinInputSeparator.vue         |  2 +-
 .../pin-input/{PinInputInput.vue => PinInputSlot.vue}  |  0
 src/ui/components/FaPinInput/pin-input/index.ts        |  2 +-
 5 files changed, 7 insertions(+), 10 deletions(-)
 rename src/ui/components/FaPinInput/pin-input/{PinInputInput.vue => PinInputSlot.vue} (100%)

diff --git a/src/ui/components/FaPinInput/index.vue b/src/ui/components/FaPinInput/index.vue
index 215d09f2..eab16088 100644
--- a/src/ui/components/FaPinInput/index.vue
+++ b/src/ui/components/FaPinInput/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PinInput, PinInputGroup, PinInputInput } from './pin-input'
+import { PinInput, PinInputGroup, PinInputSlot } from './pin-input'
 
 defineOptions({
   name: 'FaPinInput',
@@ -26,10 +26,6 @@ watch(modelValue, (val) => {
   value.value = val?.split('') ?? []
 })
 
-watch(value, (val) => {
-  modelValue.value = val.join('')
-})
-
 function handleComplete(e: string[]) {
   modelValue.value = e.join('')
   emit('complete')
@@ -39,9 +35,9 @@ const id = useId()
 </script>
 
 <template>
-  <PinInput :id :model-value="value" placeholder="○" otp @complete="handleComplete" @update:model-value="arrStr => value = arrStr.filter(Boolean)">
+  <PinInput :id v-model="value" placeholder="○" otp @complete="handleComplete">
     <PinInputGroup>
-      <PinInputInput v-for="(item, index) in length" :key="item" :index="index" />
+      <PinInputSlot v-for="(item, index) in length" :key="item" :index="index" />
     </PinInputGroup>
   </PinInput>
 </template>
diff --git a/src/ui/components/FaPinInput/pin-input/PinInputGroup.vue b/src/ui/components/FaPinInput/pin-input/PinInputGroup.vue
index bacb91aa..322caaa2 100644
--- a/src/ui/components/FaPinInput/pin-input/PinInputGroup.vue
+++ b/src/ui/components/FaPinInput/pin-input/PinInputGroup.vue
@@ -7,11 +7,12 @@ import { cn } from '@/utils'
 
 const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
 const delegatedProps = reactiveOmit(props, 'class')
+
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <Primitive v-bind="forwardedProps" :class="cn('flex items-center', props.class)">
     <slot />
-  </primitive>
+  </Primitive>
 </template>
diff --git a/src/ui/components/FaPinInput/pin-input/PinInputSeparator.vue b/src/ui/components/FaPinInput/pin-input/PinInputSeparator.vue
index 007c02ce..cf946107 100644
--- a/src/ui/components/FaPinInput/pin-input/PinInputSeparator.vue
+++ b/src/ui/components/FaPinInput/pin-input/PinInputSeparator.vue
@@ -12,5 +12,5 @@ const forwardedProps = useForwardProps(props)
     <slot>
       <Dot />
     </slot>
-  </primitive>
+  </Primitive>
 </template>
diff --git a/src/ui/components/FaPinInput/pin-input/PinInputInput.vue b/src/ui/components/FaPinInput/pin-input/PinInputSlot.vue
similarity index 100%
rename from src/ui/components/FaPinInput/pin-input/PinInputInput.vue
rename to src/ui/components/FaPinInput/pin-input/PinInputSlot.vue
diff --git a/src/ui/components/FaPinInput/pin-input/index.ts b/src/ui/components/FaPinInput/pin-input/index.ts
index e645e414..e2952334 100644
--- a/src/ui/components/FaPinInput/pin-input/index.ts
+++ b/src/ui/components/FaPinInput/pin-input/index.ts
@@ -1,4 +1,4 @@
 export { default as PinInput } from './PinInput.vue'
 export { default as PinInputGroup } from './PinInputGroup.vue'
-export { default as PinInputInput } from './PinInputInput.vue'
 export { default as PinInputSeparator } from './PinInputSeparator.vue'
+export { default as PinInputSlot } from './PinInputSlot.vue'