fix(std/component-options): correctly filter component props. Remove …

…unpassed props

packages/docs/components/layout/header/ThemeSwitch.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <VaMenu>
+    <VaMenu stick-to-edges>
       <template #anchor>
         <VaButton
           :icon="currentTheme?.icon"

packages/ui/src/components/va-menu/VaMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <VaDropdown v-bind="dropdownProps" ref="dropdown">
+  <VaDropdown v-bind="dropdownProps" ref="dropdown" v-model="vModel">
     <template #anchor>
       <slot name="anchor" />
     </template>
@@ -22,6 +22,7 @@ import { extractComponentProps, extractComponentEmits, filterComponentProps } fr
 import { useComponentPresetProp, useChildComponents, defineChildProps } from '../../composables'
 import { focusElement, focusFirstFocusableChild } from '../../utils/focus'
 import { unwrapEl } from '../../utils/unwrapEl'
+import { useStatefulControl } from '../../composables/fabrics/useStatefulControl'
 
 const VaMenuListProps = extractComponentProps(VaMenuList)
 const VaMenuListEmits = extractComponentEmits(VaMenuList)
@@ -54,6 +55,8 @@ const emit = defineEmits([
 const menuList = ref<HTMLElement>()
 const dropdown = ref<typeof VaDropdown>()
 
+const vModel = useStatefulControl(props, emit)
+
 watchEffect(() => {
   if (menuList.value) {
     nextTick(() => {

packages/ui/src/composables/std/internal/useUserProvidedProp.ts

@@ -1,6 +1,7 @@
 import { computed, getCurrentInstance } from 'vue'
 
-const simplifyPropName = (propName: string) => propName.replace(/ |-|_/, '').toLowerCase()
+/** Removes camelCase, kebabCase, etc. */
+const simplifyPropName = (propName: string) => propName.replace(/ |-|_/g, '').toLowerCase()
 
 const isPropInObject = (props: Record<string, any>, propName: string) => {
   return Object.keys(props).find((passedPropName) => simplifyPropName(passedPropName) === simplifyPropName(propName)) !== undefined
@@ -17,3 +18,27 @@ export const useIsUserProvidedProp = (propName: string) => {
     return isPropInObject(vm.vnode.props, propName)
   })
 }
+
+/** Returns props object without default values. If prop is not preset in the object it means it wasn't passed to this instance */
+export const useUserProvidedProps = () => {
+  const instance = getCurrentInstance()!
+
+  return computed(() => {
+    const userProvidedProps = Object.keys(instance.vnode.props ?? {}).map(simplifyPropName)
+
+    return Object
+      .keys(instance.props)
+      .reduce((acc, propName: string) => {
+        // Trigger reactive effect. Notice: instance.vnode.props is not reactive.
+        const prop = instance.props[propName] as unknown
+        // Check if prop is user provided (v-bind, v-model, etc.)
+        const isUserProvided = userProvidedProps.includes(simplifyPropName(propName))
+
+        // If prop is not user provided, it means it's default value and we should not pass it to child component
+        if (isUserProvided) {
+          ;(acc as any)[propName] = prop
+        }
+        return acc
+      }, {} as Record<string, any>)
+  })
+}