fix(#4453): prevent overflow demo fix (#4470)

epicmaxco · Feb 5, 2025 · e9b0a16 · e9b0a16
1 parent b51f847
commit e9b0a16
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 23 deletions.
diff --git a/packages/docs/page-config/ui-elements/dropdown/examples/PreventOverflow.vue b/packages/docs/page-config/ui-elements/dropdown/examples/PreventOverflow.vue
@@ -10,7 +10,7 @@
         :auto-placement="false"
         trigger="none"
         placement="top"
-        target=".demo-viewport"
+        teleport=".demo-viewport"
       >
         <div class="h-screen w-24 bg-[var(--va-primary)]" />
 

diff --git a/packages/ui/src/composables/std/internal/useUserProvidedProp.spec.ts b/packages/ui/src/composables/std/internal/useUserProvidedProp.spec.ts
@@ -1,13 +1,13 @@
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 import { defineComponent } from 'vue'
-import { NOT_PROVIDED, useUserProvidedProp } from './useUserProvidedProp'
+import { useIsUserProvidedProp } from './useUserProvidedProp'
 
 const TestComponentRich = defineComponent({
   template: '<p></p>',
   props: { modelValue: { type: String } },
   setup (props) {
-    const providedProp = useUserProvidedProp('modelValue', props)
+    const providedProp = useIsUserProvidedProp('modelValue')
 
     return {
       providedProp,
@@ -19,9 +19,9 @@ const TestComponentRich = defineComponent({
 describe('useUserProvidedProp', () => {
   it('should react to prop change', async () => {
     const wrapper = mount(TestComponentRich, { props: { stateful: true } } as any)
-    expect(wrapper.vm.providedProp).toBe(NOT_PROVIDED)
+    expect(wrapper.vm.providedProp).toBe(false)
 
     await wrapper.setProps({ modelValue: 'Hello' })
-    expect(wrapper.vm.providedProp).toBe('Hello')
+    expect(wrapper.vm.providedProp).toBe(true)
   })
 })
diff --git a/packages/ui/src/composables/std/internal/useUserProvidedProp.ts b/packages/ui/src/composables/std/internal/useUserProvidedProp.ts
@@ -1,17 +1,9 @@
 import { computed, getCurrentInstance } from 'vue'
 
-export const NOT_PROVIDED = Symbol('NOT_PROVIDED')
+const simplifyPropName = (propName: string) => propName.replace(/ |-|_/, '').toLowerCase()
 
-export const useUserProvidedProp = <Name extends string, Props extends Record<Name, any>>(propName: Name, props: Props) => {
-  const vm = getCurrentInstance()!
-
-  return computed(() => {
-    // Props may be not passed at all
-    if (!vm?.vnode.props) { return NOT_PROVIDED }
-    const originalProp = props[propName]
-    // If vnode doesn't have this prop it mean default value is used
-    return propName in vm.vnode.props ? originalProp as Props[Name] : NOT_PROVIDED
-  })
+const isPropInObject = (props: Record<string, any>, propName: string) => {
+  return Object.keys(props).find((passedPropName) => simplifyPropName(passedPropName) === simplifyPropName(propName)) !== undefined
 }
 
 export const useIsUserProvidedProp = (propName: string) => {
@@ -22,6 +14,6 @@ export const useIsUserProvidedProp = (propName: string) => {
     if (!vm?.vnode.props) { return false }
 
     // If vnode doesn't have this prop it mean default value is used
-    return propName in vm.vnode.props
+    return isPropInObject(vm.vnode.props, propName)
   })
 }
diff --git a/packages/ui/src/composables/useStateful.ts b/packages/ui/src/composables/useStateful.ts
@@ -1,5 +1,5 @@
 import { ref, computed, watch, type PropType, type Ref, type WritableComputedRef } from 'vue'
-import { NOT_PROVIDED, useUserProvidedProp } from './std/internal/useUserProvidedProp'
+import { useIsUserProvidedProp } from './std/internal/useUserProvidedProp'
 
 export type StatefulProps = {
   stateful: boolean
@@ -57,14 +57,14 @@ export const useStateful = <
   const { eventName, defaultValue } = options
   const event = (eventName || `update:${key.toString()}`) as `update:${Key}`
 
-  const passedProp = useUserProvidedProp(key, props)
+  const isUserProvidedProp = useIsUserProvidedProp(key)
 
   const defaultValuePassed = 'defaultValue' in options
 
   const valueState = ref(
-    passedProp.value === NOT_PROVIDED
+    isUserProvidedProp.value
       ? defaultValuePassed ? defaultValue : props[key]
-      : passedProp.value,
+      : props[key],
   ) as Ref<P[Key]>
 
   let unwatchModelValue: ReturnType<typeof watch>
@@ -80,12 +80,13 @@ export const useStateful = <
 
   const valueComputed = computed({
     get: () => {
+      if (isUserProvidedProp.value) { return props[key] }
       if (props.stateful) { return valueState.value }
 
       return props[key]
     },
     set: (value) => {
-      if (props.stateful) { valueState.value = value }
+      if (props.stateful && valueComputed.value !== value) { valueState.value = value }
 
       emit(event, value)
     },
@@ -96,7 +97,7 @@ export const useStateful = <
   })
 
   Object.defineProperty(valueComputed, 'userProvided', {
-    get: () => passedProp.value !== NOT_PROVIDED,
+    get: () => isUserProvidedProp.value,
   })
 
   return { valueComputed }