From 23f907cac477c6cc88c67a5ffd3f8d570b97d82b Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Sat, 14 Sep 2024 20:08:40 +0800
Subject: [PATCH] fix(field): fix placeholder resize failure in swipe and close
 #1763

---
 .../src/field-decorator/FieldDecorator.vue    |  7 ++++
 packages/varlet-ui/src/swipe/Swipe.vue        |  8 ++++-
 packages/varlet-ui/src/swipe/provide.ts       | 32 ++++++++++++++++++-
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/varlet-ui/src/field-decorator/FieldDecorator.vue b/packages/varlet-ui/src/field-decorator/FieldDecorator.vue
index 4e3661135da..5a7b16e15a1 100644
--- a/packages/varlet-ui/src/field-decorator/FieldDecorator.vue
+++ b/packages/varlet-ui/src/field-decorator/FieldDecorator.vue
@@ -117,6 +117,7 @@ import { isEmpty, getStyle, call, doubleRaf } from '@varlet/shared'
 import { createNamespace } from '../utils/components'
 import { onWindowResize, onSmartMounted } from '@varlet/use'
 import { usePopup } from '../popup/provide'
+import { useSwipeResizeDispatcher } from '../swipe/provide'
 
 const { name, n, classes } = createNamespace('field-decorator')
 
@@ -134,6 +135,7 @@ export default defineComponent({
     const transitionDisabled = ref(true)
     const isFloating = computed(() => props.hint && (!isEmpty(props.value) || props.isFocusing))
     const { popup, bindPopup } = usePopup()
+    const { bindSwipeResizeDispatcher } = useSwipeResizeDispatcher()
 
     const color = computed<string | undefined>(() =>
       !props.isError ? (props.isFocusing ? props.focusColor : props.blurColor) : undefined
@@ -152,6 +154,11 @@ export default defineComponent({
     onUpdated(resize)
 
     call(bindPopup, null)
+    call(bindSwipeResizeDispatcher, {
+      onResize() {
+        nextTick().then(resize)
+      },
+    })
 
     if (popup) {
       watch(
diff --git a/packages/varlet-ui/src/swipe/Swipe.vue b/packages/varlet-ui/src/swipe/Swipe.vue
index 3cbe14e916c..d502d012777 100644
--- a/packages/varlet-ui/src/swipe/Swipe.vue
+++ b/packages/varlet-ui/src/swipe/Swipe.vue
@@ -112,7 +112,7 @@ import VarButton from '../button'
 import VarIcon from '../icon'
 import Hover from '../hover'
 import { defineComponent, ref, computed, watch, onActivated } from 'vue'
-import { useSwipeItems, type SwipeProvider } from './provide'
+import { useSwipeItems, useSwipeResizeListeners, type SwipeProvider } from './provide'
 import { props, type SwipeToOptions } from './props'
 import { clamp, isNumber, toNumber, doubleRaf, preventDefault, call } from '@varlet/shared'
 import { createNamespace } from '../utils/components'
@@ -141,6 +141,7 @@ export default defineComponent({
     const index = ref(0)
     const hovering = ref(false)
     const { swipeItems, bindSwipeItems, length } = useSwipeItems()
+    const { swipeResizeListeners, bindSwipeResizeListeners } = useSwipeResizeListeners()
     const { popup, bindPopup } = usePopup()
     const {
       deltaX,
@@ -171,6 +172,7 @@ export default defineComponent({
     useEventListener(() => window, 'keydown', handleKeydown)
 
     call(bindPopup, null)
+    call(bindSwipeResizeListeners, null)
 
     watch(
       () => length.value,
@@ -442,6 +444,10 @@ export default defineComponent({
       setTimeout(() => {
         lockDuration.value = false
       })
+
+      swipeResizeListeners.forEach(({ onResize }) => {
+        onResize()
+      })
     }
 
     // expose
diff --git a/packages/varlet-ui/src/swipe/provide.ts b/packages/varlet-ui/src/swipe/provide.ts
index 7db17563cd0..ba26e22ace6 100644
--- a/packages/varlet-ui/src/swipe/provide.ts
+++ b/packages/varlet-ui/src/swipe/provide.ts
@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from 'vue'
-import { useChildren } from '@varlet/use'
+import { useChildren, useParent } from '@varlet/use'
 import { type SwipeItemProvider } from '../swipe-item/provide'
 
 export interface SwipeProvider {
@@ -8,8 +8,16 @@ export interface SwipeProvider {
   vertical: ComputedRef<boolean>
 }
 
+export interface SwipeResizeListenerProvider {
+  onResize(): void
+}
+
 export const SWIPE_BIND_SWIPE_ITEM_KEY = Symbol('SWIPE_BIND_SWIPE_ITEM_KEY')
 
+export const SWIPE_RESIZE_DISPATCHER_BIND_SWIPE_RESIZE_LISTENER_KEY = Symbol(
+  'SWIPE_RESIZE_DISPATCHER_BIND_SWIPE_RESIZE_LISTENER_KEY'
+)
+
 export function useSwipeItems() {
   const { childProviders, length, bindChildren } = useChildren<SwipeProvider, SwipeItemProvider>(
     SWIPE_BIND_SWIPE_ITEM_KEY
@@ -21,3 +29,25 @@ export function useSwipeItems() {
     bindSwipeItems: bindChildren,
   }
 }
+
+export function useSwipeResizeListeners() {
+  const { childProviders, bindChildren } = useChildren<null, SwipeResizeListenerProvider>(
+    SWIPE_RESIZE_DISPATCHER_BIND_SWIPE_RESIZE_LISTENER_KEY
+  )
+
+  return {
+    swipeResizeListeners: childProviders,
+    bindSwipeResizeListeners: bindChildren,
+  }
+}
+
+export function useSwipeResizeDispatcher() {
+  const { parentProvider, bindParent } = useParent<null, SwipeResizeListenerProvider>(
+    SWIPE_RESIZE_DISPATCHER_BIND_SWIPE_RESIZE_LISTENER_KEY
+  )
+
+  return {
+    swipeResizeDispatcher: parentProvider,
+    bindSwipeResizeDispatcher: bindParent,
+  }
+}