feat(useParent): new composable

docs/guide/components/menu.md

@@ -29,7 +29,7 @@ To open menu on hover use set `trigger` prop to `hover`.
 <!-- 👉 v-model support -->
 ::::card v-model support
 
-description
+`AMenu` also support `v-model` to show/hide menu.
 
 :::code DemoMenuVModelSupport
 <<< @/components/demos/menu/DemoMenuVModelSupport.vue{11,17}

packages/anu-vue/src/components/floating/AFloating.vue

@@ -68,6 +68,7 @@ const { x, y, strategy } = useFloating(toRef(props, 'referenceEl'), refFloating,
 if (props.modelValue === undefined) {
   // If trigger is hover
   if (props.trigger === 'hover') {
+    // TODO: Try to refactor multiple listeners via https://github.com/vueuse/vueuse/pull/2180
     // Reference
     useEventListener(toRef(props, 'referenceEl'), 'mouseenter', () => {
       if (isFloatingElVisible.value === false)

packages/anu-vue/src/components/floating/index.ts

@@ -1,2 +1,3 @@
 export { default as AFloating } from './AFloating.vue'
+export { sameWidth as sameWidthFloatingUIMiddleware } from './middlewares'
 export * from './props'

packages/anu-vue/src/components/index.ts

@@ -9,6 +9,7 @@ export { AChip } from './chip'
 export { ADataTable } from './data-table'
 export { ADialog } from './dialog'
 export { ADrawer } from './drawer'
+export { AFloating } from './floating'
 export { AInput } from './input'
 export { AList } from './list'
 export { AListItem } from './list-item'

packages/anu-vue/src/components/menu/AMenu.vue

@@ -2,29 +2,21 @@
 import { menuProps } from './props'
 import { ACard } from '@/components'
 import { AFloating } from '@/components/floating'
+import { useParentEl } from '@/composables'
 
 const props = defineProps(menuProps)
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-}>()
-
 defineOptions({
   name: 'AMenu',
 })
 
-const refReference = ref()
-onMounted(() => {
-  const vm = getCurrentInstance()
-  if (vm?.proxy?.$parent)
-    refReference.value = vm?.proxy?.$parent.$el
-})
+const { parentEL } = useParentEl()
 </script>
 
 <template>
   <AFloating
     v-bind="props"
-    :reference-el="refReference"
+    :reference-el="parentEL"
   >
     <ACard>
       <slot />

packages/anu-vue/src/components/menu/index.ts

@@ -1,3 +1 @@
 export { default as AMenu } from './AMenu.vue'
-export { sameWidth as sameWidthFloatingUIMiddleware } from './middlewares'
-

packages/anu-vue/src/components/menu/props.ts

@@ -1,6 +1,7 @@
 import type { ExtractPropTypes } from 'vue'
 import { floatingProps } from '@/components/floating'
 
+// TODO: Maybe we don't need reactivePick, Normal Object filter will do the job.
 export const menuProps = reactivePick(floatingProps, Object.keys(floatingProps).filter(k => !['referenceEl'].includes(k)) as Array<keyof typeof floatingProps>)
 
 export type CardProps = ExtractPropTypes<typeof menuProps>

packages/anu-vue/src/composables/index.ts

@@ -4,6 +4,7 @@ export * from './useDOMScrollLock'
 export * from './useGroupModel'
 export * from './useInternalBooleanState'
 export * from './useLayer'
+export * from './useParentEl'
 export * from './useSearch'
 export * from './useSort'
 export { spacingProp, useSpacing } from './useSpacing'

packages/anu-vue/src/composables/useInternalBooleanState.ts

@@ -5,6 +5,7 @@ import type { Ref } from 'vue'
 export const useInternalBooleanState = (state: Ref<boolean | undefined>, emit: any, eventToEmit: string, initialValue: boolean) => {
   const _internalState = ref(initialValue)
 
+  // TODO: Allow passing value to set the value instead of just toggling
   const toggle = () => {
     if (state.value !== undefined)
       emit(eventToEmit)

packages/anu-vue/src/composables/useParentEl.ts

@@ -0,0 +1,12 @@
+export const useParentEl = () => {
+  const parentEL = ref()
+  onMounted(() => {
+    const vm = getCurrentInstance()
+    if (vm?.proxy?.$parent)
+      parentEL.value = unrefElement(vm?.proxy?.$parent)
+  })
+
+  return {
+    parentEL,
+  }
+}