UTheme: name/scope - or a way to prevent it from applying to overlays

[m-thorsen]

Package

v4.x

Description

First of all: I'm super happy about the UTheme component, and hope it keeps evolving! It's a lifesaver for complex apps with discretely themed modules as well as enabling a lot of user prefs when it comes to layout.

---

Not quite sure how to best explain this possibly-edge case, but I've made a "FormCard" wrapper component similar to the settings page in the Dashboard template.

In this components I apply some defaults and adjustments to UFormField.

However, if this FormCard includes a button triggering a modal, popover etc, FormFields inside those overlays also inherit the theme settings.

---

I've included a few suggested ways of doing this (prop names for illustration purposes only):

Specify that a UTheme should not apply inside overlays

• <UTheme :overlay-nesting="false">...</UTheme>
• Should apply to the "current" overlay (if any), but not overlays called from within this declaration

Specify that a UTheme should not apply inside portals

• <UTheme :portal-nesting="false">...</UTheme>
• As for overlays, but specifically for portals. This may or may not be easier to implement and/or have less potential for side effects than the overlay scope

Named/resettable UTheme stack/scopes:

• <UTheme name="formcard">...</UTheme> | <UTheme :omit="['formcard']">...</UTheme>
• Needs to store a theme nesting stack to be able to generate component ui without the named theme(s)
• omit could take a string or an array of strings
• Optionally log a warning if no theme with the specified names were found in the stack, and/or add a silent prop to disable such warnings

Additional context

No response