修复 FaPinInput 组件输入bug

Author: hooray

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>

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>

src/ui/components/FaPinInput/pin-input/PinInputSeparator.vue

@@ -12,5 +12,5 @@ const forwardedProps = useForwardProps(props)
     <slot>
       <Dot />
     </slot>
-  </primitive>
+  </Primitive>
 </template>

src/ui/components/FaPinInput/pin-input/PinInputInput.vue renamed to src/ui/components/FaPinInput/pin-input/PinInputSlot.vue

@@ -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'