feat(App): add global portal prop

[menthol]

🔗 Linked issue

Resolves #3687

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Introduced a portalTarget option in UApp to specify portal mounting targets across various components. Updated portals in components like ContextMenu, Drawer, Tooltip, and others to respect portalTarget. Default target is set to body.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@3688

commit: c4807e0

[benjamincanac]

I'm not sure I would put this config in global app.config but instead put it in the portal prop of each component as an object with the to and disabled fields. It would be more consistent and would allow configuration per component.

[menthol]

I've tried, and Implementing a system using a component-based configuration proved to be significantly more challenging than anticipated. The process required meticulous definition of the target for each individual component, leading to a highly time-consuming and cumbersome configuration process. This level of detail, while potentially offering great flexibility, introduces a substantial overhead.

A potential solution to mitigate this complexity might involve a hybrid approach: employing a global configuration file to establish baseline settings, while allowing for component-specific overrides where necessary. This would reduce the repetitive nature of defining targets for every component, simplifying the overall configuration management.

[benjamincanac]

Then I would still not put it in App Config but as a prop on UApp that is provided to all components maybe?

[menthol]

This is a great idea.

[menthol]

Is this the direction you had in mind?

[sebastiannoell]

Thanks @menthol for pushing this! Really helpful

[benjamincanac]

Maybe we could create a usePortal composable to avoid code duplication that also exports its symbol like: https://github.com/nuxt/ui/blob/v3/src/runtime/composables/useAvatarGroup.ts#L4

WDYT?

[menthol]

Thanks @menthol for pushing this! Really helpful

You're welcome. I'm waiting for it to be reviewed to see if it's suitable. I hope it will be merged for 3.0.3 or 3.0.4.

[menthol]

@benjamincanac What do you think of the changes? (i'm fixing the ci, but overall I think it's ready for review)

[benjamincanac]

It looks good! Maybe we could improve it even further by returning target and to so you could do: const portalProps = usePortal(toRef(() => props.portal)) grouped with the rootProps, contentProps, etc. and v-bind="portalProps".

[menthol]

@benjamincanac done

[benjamincanac]

@menthol I've cleanup up the code a bit, can you confirm that it's good to you? 😊

[menthol]

@benjamincanac
LGTM,
but removing the computed in usePortal, you make the return not reactive anymore

[benjamincanac]

Thanks @menthol! 😊

[benjamincanac]

@menthol It seems instanceof HTMLElement breaks the build, can we check on typeof portal.value === 'boolean' instead? 🤔

[benjamincanac]

[menthol]

We can remove the HTMLElement check, was only for feature parity with Radix.

string and boolean work perfectly alone

[menthol]

If the only problem is this instanceof, we can invert the condition

[menthol]

import { inject, provide, computed, type Ref, type InjectionKey } from 'vue'

export const portalTargetInjectionKey: InjectionKey<Ref<string | HTMLElement>> = Symbol('nuxt-ui.portal-target')

export function usePortal(portal: Ref<string | HTMLElement | boolean | undefined>) {
  const portalTarget = inject(portalTargetInjectionKey, undefined)

  const to = computed(() => {
    if (typeof portal.value === 'boolean' || portal.value === undefined) {
      return portalTarget?.value ?? 'body'
    }

    return portal.value
  })

  const disabled = computed(() => typeof portal.value === 'boolean' ? !portal.value : false)

  provide(portalTargetInjectionKey, computed(() => to.value))

  return computed(() => ({
    to: to.value,
    disabled: disabled.value
  }))
}

[menthol]

New PR: #3954