feat(useStack): add app-wide defaultTeleport option to createStackPlugin#603
Open
sridhar-3009 wants to merge 2 commits into
vuetifyjs:devvuetifyjs/0:devfrom
sridhar-3009:feat/usestack-default-teleport-553sridhar-3009/0:feat/usestack-default-teleport-553Copy head branch name to clipboard
Open
feat(useStack): add app-wide defaultTeleport option to createStackPlugin#603sridhar-3009 wants to merge 2 commits intovuetifyjs:devvuetifyjs/0:devfrom sridhar-3009:feat/usestack-default-teleport-553sridhar-3009/0:feat/usestack-default-teleport-553Copy head branch name to clipboard
sridhar-3009 wants to merge 2 commits into
vuetifyjs:devvuetifyjs/0:devfrom
sridhar-3009:feat/usestack-default-teleport-553sridhar-3009/0:feat/usestack-default-teleport-553Copy head branch name to clipboard
Conversation
…ifyjs#553) Adds a `default` option to `StackOptions` / `createStackPlugin` so an app can set a single app-wide Portal teleport target without requiring every overlay to opt in via a per-component `to` prop: ```ts app.use(createStackPlugin({ default: 'top-layer' })) ``` `Portal` reads `stack.default` as its fallback when no `to` prop is provided, resolving the precedence chain: per-component `to` prop → `stack.default` → `'body'` `'top-layer'` is handled the same as when passed directly as `to`: it resolves to `stack.topElement.value` (the topmost open `<dialog>`) and falls back to `'body'` when no modal is active. Changes: - `StackOptions.default?: Extensible<'top-layer'> | HTMLElement` - `StackContext.default: Readonly<Ref<...>>` exposed on the context - `Portal.vue`: `to` destructured without a default; target resolves via `to ?? stack.default.value ?? 'body'` - Tests for `createStack({ default })` and plugin option flow-through
Contributor
|
✅ Changeset found — this change will be included in the next release. Thanks! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #553
Problem
Today the only way to teleport all Portals to a non-default target is per-component: every
<SnackbarPortal to="top-layer" />, every Dialog, every Toast must opt in individually. There is no single place to configure the fallback for the whole app.Solution
Add a
defaultoption tocreateStackPlugin(and tocreateStack/StackOptions):Portalreadsstack.defaultas its fallback when notoprop is given, resolving the precedence chain:'top-layer'is handled identically to the per-component case — it resolves tostack.topElement.value(the topmost open<dialog>) and falls back to'body'when no modal is active.Changes
StackOptions: newdefault?: Extensible<'top-layer'> | HTMLElementfieldStackContext: newdefault: Readonly<Ref<…>>propertycreateStack(): extracts and wrapsdefaultin atoRef, exposes it on the returned contextPortal.vue:toprop destructured without a hardcoded'body'default; target resolution now:to ?? stack.default.value ?? 'body'createStack({ default })exposes the value;createStackPlugin({ default })flows through touseStack().default