@bitrix24/b24ui-nuxt 0.6.3 → 0.6.4

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
   "configKey": "b24ui",
   "compatibility": {

package/dist/module.mjs

@@ -5,7 +5,7 @@ import 'node:url';
 import 'scule';
 
 const name = "@bitrix24/b24ui-nuxt";
-const version = "0.6.3";
+const version = "0.6.4";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/Alert.vue

@@ -61,15 +61,15 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert |
         </slot>
       </div>
 
-      <div v-if="orientation === 'vertical' && actions?.length" :class="b24ui.actions({ class: props.b24ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="b24ui.actions({ class: props.b24ui?.actions })">
         <slot name="actions">
           <B24Button v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && actions?.length || close" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
-      <template v-if="orientation === 'horizontal' && actions?.length">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+      <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <B24Button v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
         </slot>

package/dist/runtime/components/App.vue

@@ -9,12 +9,14 @@ import { toRef, useId, provide } from "vue";
 import { ConfigProvider, TooltipProvider, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { localeContextInjectionKey } from "../composables/useLocale";
+import { portalTargetInjectionKey } from "../composables/usePortal";
 import B24Toaster from "./Toaster.vue";
 import B24OverlayProvider from "./OverlayProvider.vue";
 const props = defineProps({
   tooltip: { type: Object, required: false },
   toaster: { type: [Object, null], required: false },
   locale: { type: null, required: false },
+  portal: { type: null, required: false, default: "body" },
   scrollBody: { type: [Boolean, Object], required: false },
   nonce: { type: String, required: false }
 });
@@ -24,6 +26,8 @@ const tooltipProps = toRef(() => props.tooltip);
 const toasterProps = toRef(() => props.toaster);
 const locale = toRef(() => props.locale);
 provide(localeContextInjectionKey, locale);
+const portal = toRef(() => props.portal);
+provide(portalTargetInjectionKey, portal);
 </script>
 
 <template>

package/dist/runtime/components/App.vue.d.ts

@@ -4,6 +4,7 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
     tooltip?: TooltipProviderProps;
     toaster?: ToasterProps | null;
     locale?: Locale<T>;
+    portal?: string | HTMLElement;
 }
 export interface AppSlots {
     default(props?: {}): any;

package/dist/runtime/components/DropdownMenu.vue

@@ -18,7 +18,7 @@ const props = defineProps({
   externalIcon: { type: [Boolean, Function, Object], required: false, default: true },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
-  portal: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   labelKey: { type: null, required: false, default: "label" },
   disabled: { type: Boolean, required: false },
   class: { type: null, required: false },

package/dist/runtime/components/DropdownMenu.vue.d.ts

@@ -64,7 +64,7 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
      * Render the menu in a portal.
      * @defaultValue true
      */
-    portal?: boolean;
+    portal?: boolean | string | HTMLElement;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'

package/dist/runtime/components/DropdownMenuContent.vue

@@ -3,11 +3,12 @@
 </script>
 
 <script setup>
-import { computed } from "vue";
+import { computed, toRef } from "vue";
 import { DropdownMenu } from "reka-ui/namespaced";
 import { useForwardPropsEmits } from "reka-ui";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useLocale } from "../composables/useLocale";
+import { usePortal } from "../composables/usePortal";
 import { omit, get, isArrayOfArray } from "../utils";
 import { pickLinkProps } from "../utils/link";
 import icons from "../dictionary/icons";
@@ -18,7 +19,7 @@ import B24Kbd from "./Kbd.vue";
 import B24DropdownMenuContent from "./DropdownMenuContent.vue";
 const props = defineProps({
   items: { type: null, required: false },
-  portal: { type: Boolean, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true },
   sub: { type: Boolean, required: false },
   labelKey: { type: null, required: true },
   checkedIcon: { type: [Function, Object], required: false },
@@ -46,6 +47,7 @@ const props = defineProps({
 const emits = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "closeAutoFocus"]);
 const slots = defineSlots();
 const { dir } = useLocale();
+const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = useForwardPropsEmits(reactiveOmit(props, "sub", "items", "portal", "labelKey", "checkedIcon", "externalIcon", "class", "b24ui", "b24uiOverride"), emits);
 const proxySlots = omit(slots, ["default"]);
 const getLabel = (item) => {
@@ -113,7 +115,7 @@ const groups = computed(
     </slot>
   </DefineItemTemplate>
 
-  <DropdownMenu.Portal :disabled="!portal">
+  <DropdownMenu.Portal v-bind="portalProps">
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
       <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: b24uiOverride?.group })">
         <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">

package/dist/runtime/components/DropdownMenuContent.vue.d.ts

@@ -7,7 +7,7 @@ import type { ArrayOrNested, NestedItem, ComponentConfig } from '../types/utils'
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
 interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
     items?: T;
-    portal?: boolean;
+    portal?: boolean | string | HTMLElement;
     sub?: boolean;
     labelKey: keyof NestedItem<T>;
     /**

package/dist/runtime/components/Form.vue

@@ -21,6 +21,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   validateOnInputDelay: { type: Number, required: false, default: 300 },
   transform: { type: Boolean, required: false, default: true },
+  attach: { type: Boolean, required: false, default: true },
   loadingAuto: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   onSubmit: { type: Function, required: false }
@@ -31,7 +32,7 @@ const appConfig = useAppConfig();
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.form || {} }));
 const formId = props.id ?? useId();
 const bus = useEventBus(`form-${formId}`);
-const parentBus = inject(
+const parentBus = props.attach && inject(
   formBusInjectionKey,
   void 0
 );

package/dist/runtime/components/Form.vue.d.ts

@@ -1,16 +1,16 @@
-import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form } from '../types/form';
-export interface FormProps<T extends object> {
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form, InferInput, InferOutput } from '../types/form';
+export interface FormProps<S extends FormSchema> {
     id?: string | number;
     /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
-    schema?: FormSchema<T>;
+    schema?: S;
     /** An object representing the current state of the form. */
-    state: Partial<T>;
+    state: Partial<InferInput<S>>;
     /**
      * Custom validation function to validate the form state.
      * @param state - The current state of the form.
      * @returns A promise that resolves to an array of FormError objects, or an array of FormError objects directly.
      */
-    validate?: (state: Partial<T>) => Promise<FormError[]> | FormError[];
+    validate?: (state: Partial<InferInput<S>>) => Promise<FormError[]> | FormError[];
     /**
      * The list of input events that trigger the form validation.
      * @defaultValue `['blur', 'change', 'input']`
@@ -28,6 +28,11 @@ export interface FormProps<T extends object> {
      * @defaultValue `true`
      */
     transform?: boolean;
+    /**
+     * If true, this form will attach to its parent Form (if any) and validate at the same time.
+     * @defaultValue `true`
+     */
+    attach?: boolean;
     /**
      * When `true`, all form elements will be disabled on `@submit` event.
      * This will cause any focused input elements to lose their focus state.
@@ -35,10 +40,10 @@ export interface FormProps<T extends object> {
      */
     loadingAuto?: boolean;
     class?: any;
-    onSubmit?: ((event: FormSubmitEvent<T>) => void | Promise<void>) | (() => void | Promise<void>);
+    onSubmit?: ((event: FormSubmitEvent<InferOutput<S>>) => void | Promise<void>) | (() => void | Promise<void>);
 }
-export interface FormEmits<T extends object> {
-    (e: 'submit', payload: FormSubmitEvent<T>): void;
+export interface FormEmits<S extends FormSchema> {
+    (e: 'submit', payload: FormSubmitEvent<InferOutput<S>>): void;
     (e: 'error', payload: FormErrorEvent): void;
 }
 export interface FormSlots {
@@ -46,12 +51,12 @@ export interface FormSlots {
         errors: FormError[];
     }): any;
 }
-declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<any & FormProps<T> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
-    expose(exposed: import("vue").ShallowUnwrapRef<Form<T>>): void;
+declare const _default: <S extends FormSchema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<any & FormProps<S> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<Form<InferInput<S>>>): void;
     attrs: any;
     slots: Readonly<FormSlots> & FormSlots;
-    emit: FormEmits<T>;
+    emit: FormEmits<S>;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/InputMenu.vue

@@ -13,6 +13,7 @@ import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
+import { usePortal } from "../composables/usePortal";
 import { compare, get, isArrayOfArray } from "../utils";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -38,7 +39,7 @@ const props = defineProps({
   deleteIcon: { type: [Function, Object], required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
-  portal: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   valueKey: { type: null, required: false },
   labelKey: { type: null, required: false, default: "label" },
   items: { type: null, required: false },
@@ -72,6 +73,7 @@ const { t } = useLocale();
 const appConfig = useAppConfig();
 const { contains } = useFilter({ sensitivity: "base" });
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "highlightOnHover", "ignoreFilter"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
@@ -326,7 +328,7 @@ defineExpose({
       </ComboboxTrigger>
     </ComboboxAnchor>
 
-    <ComboboxPortal :disabled="!portal">
+    <ComboboxPortal v-bind="portalProps">
       <ComboboxContent :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps">
         <ComboboxEmpty :class="b24ui.empty({ class: props.b24ui?.empty })">
           <slot name="empty" :search-term="searchTerm">

package/dist/runtime/components/InputMenu.vue.d.ts

@@ -114,7 +114,7 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
      * Render the menu in a portal.
      * @defaultValue true
      */
-    portal?: boolean;
+    portal?: boolean | string | HTMLElement;
     /**
      * When `items` is an array of objects, select the field to use as the value instead of the object itself.
      * @defaultValue undefined

package/dist/runtime/components/Modal.vue

@@ -8,6 +8,7 @@ import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent,
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { usePortal } from "../composables/usePortal";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Button from "./Button.vue";
@@ -19,7 +20,7 @@ const props = defineProps({
   overlayBlur: { type: null, required: false, default: "auto" },
   transition: { type: Boolean, required: false, default: true },
   fullscreen: { type: Boolean, required: false },
-  portal: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   close: { type: [Boolean, Object], required: false, default: true },
   closeIcon: { type: [Function, Object], required: false },
   dismissible: { type: Boolean, required: false, default: true },
@@ -35,6 +36,7 @@ const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
   const events = {
@@ -63,7 +65,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal |
       <slot :open="open" />
     </DialogTrigger>
 
-    <DialogPortal :disabled="!portal">
+    <DialogPortal v-bind="portalProps">
       <DialogOverlay v-if="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
 
       <DialogContent :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">

package/dist/runtime/components/Modal.vue.d.ts

@@ -36,7 +36,7 @@ export interface ModalProps extends DialogRootProps {
      * Render the modal in a portal.
      * @defaultValue true
      */
-    portal?: boolean;
+    portal?: boolean | string | HTMLElement;
     /**
      * Display a close button to dismiss the modal.
      * `{ size: 'xs', color: 'link' }`{lang="ts"}
@@ -93,7 +93,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     close: boolean | Partial<ButtonProps>;
     modal: boolean;
     transition: boolean;
-    portal: boolean;
+    portal: boolean | string | HTMLElement;
     overlay: boolean;
     overlayBlur: Modal["variants"]["overlayBlur"];
     dismissible: boolean;

package/dist/runtime/components/Popover.vue

@@ -9,12 +9,13 @@ import { useForwardPropsEmits } from "reka-ui";
 import { Popover, HoverCard } from "reka-ui/namespaced";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { usePortal } from "../composables/usePortal";
 import { tv } from "../utils/tv";
 const props = defineProps({
   mode: { type: String, required: false, default: "click" },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
-  portal: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   dismissible: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
@@ -29,6 +30,7 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const pick = props.mode === "hover" ? reactivePick(props, "defaultOpen", "open", "openDelay", "closeDelay") : reactivePick(props, "defaultOpen", "open", "modal");
 const rootProps = useForwardPropsEmits(pick, emits);
+const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
 const contentEvents = computed(() => {
   if (!props.dismissible) {
@@ -53,7 +55,7 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
       <slot :open="open" />
     </Component.Trigger>
 
-    <Component.Portal :disabled="!portal">
+    <Component.Portal v-bind="portalProps">
       <Component.Content v-bind="contentProps" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-on="contentEvents">
         <slot name="content" />
 

package/dist/runtime/components/Popover.vue.d.ts

@@ -24,7 +24,7 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
      * Render the popover in a portal.
      * @defaultValue true
      */
-    portal?: boolean;
+    portal?: boolean | string | HTMLElement;
     /**
      * When `false`, the popover will not close when clicking outside or pressing escape.
      * @defaultValue true
@@ -49,7 +49,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     dismissible: boolean;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     mode: "click" | "hover";
-    portal: boolean;
+    portal: boolean | string | HTMLElement;
     dismissible: boolean;
     openDelay: number;
     closeDelay: number;

package/dist/runtime/components/Select.vue

@@ -11,6 +11,7 @@ import { useAppConfig } from "#imports";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
+import { usePortal } from "../composables/usePortal";
 import { compare, get, isArrayOfArray } from "../utils";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -32,7 +33,7 @@ const props = defineProps({
   selectedIcon: { type: [Function, Object], required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
-  portal: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   valueKey: { type: null, required: false, default: "value" },
   labelKey: { type: null, required: false, default: "label" },
   items: { type: null, required: false },
@@ -57,6 +58,7 @@ const emits = defineEmits(["update:open", "change", "blur", "focus", "update:mod
 const slots = defineSlots();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "disabled", "autocomplete", "required", "multiple"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
 const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
@@ -167,7 +169,7 @@ function isSelectItem(item) {
         </span>
       </SelectTrigger>
 
-      <SelectPortal :disabled="!portal">
+      <SelectPortal v-bind="portalProps">
         <SelectContent :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps">
           <SelectScrollUpButton :class="b24ui.scrollUpDownButton({ class: props.b24ui?.scrollUpDownButton })">
             <Component

package/dist/runtime/components/Select.vue.d.ts

@@ -89,7 +89,7 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
      * Render the menu in a portal.
      * @defaultValue true
      */
-    portal?: boolean;
+    portal?: boolean | string | HTMLElement;
     /**
      * When `items` is an array of objects, select the field to use as the value.
      * @defaultValue 'value'

package/dist/runtime/components/SelectMenu.vue

@@ -31,6 +31,7 @@ import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
+import { usePortal } from "../composables/usePortal";
 import { compare, get, isArrayOfArray } from "../utils";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -55,7 +56,7 @@ const props = defineProps({
   selectedIcon: { type: [Function, Object], required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
-  portal: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   valueKey: { type: null, required: false },
   labelKey: { type: null, required: false, default: "label" },
   items: { type: null, required: false },
@@ -87,6 +88,7 @@ const { t } = useLocale();
 const appConfig = useAppConfig();
 const { contains } = useFilter({ sensitivity: "base" });
 const rootProps = useForwardPropsEmits(reactivePick(props, "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "highlightOnHover"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), type: "search" }));
@@ -278,7 +280,7 @@ function isSelectItem(item) {
         </ComboboxTrigger>
       </ComboboxAnchor>
 
-      <ComboboxPortal :disabled="!portal">
+      <ComboboxPortal v-bind="portalProps">
         <ComboboxContent :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps">
           <FocusScope trapped :class="b24ui.focusScope({ class: props.b24ui?.focusScope })">
             <ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>

package/dist/runtime/components/SelectMenu.vue.d.ts

@@ -99,7 +99,7 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
      * Render the menu in a portal.
      * @defaultValue true
      */
-    portal?: boolean;
+    portal?: boolean | string | HTMLElement;
     /**
      * When `items` is an array of objects, select the field to use as the value instead of the object itself.
      * @defaultValue undefined

package/dist/runtime/components/Slideover.vue

@@ -8,6 +8,7 @@ import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent,
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { usePortal } from "../composables/usePortal";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Button from "./Button.vue";
@@ -19,7 +20,7 @@ const props = defineProps({
   overlayBlur: { type: null, required: false, default: "auto" },
   transition: { type: Boolean, required: false, default: true },
   side: { type: null, required: false, default: "right" },
-  portal: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   close: { type: [Boolean, Object], required: false, default: true },
   closeIcon: { type: [Function, Object], required: false },
   dismissible: { type: Boolean, required: false, default: true },
@@ -35,6 +36,7 @@ const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
   const events = {
@@ -63,7 +65,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
       <slot :open="open" />
     </DialogTrigger>
 
-    <DialogPortal :disabled="!portal">
+    <DialogPortal v-bind="portalProps">
       <DialogOverlay v-if="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
 
       <DialogContent :data-side="side" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">

package/dist/runtime/components/Slideover.vue.d.ts

@@ -36,7 +36,7 @@ export interface SlideoverProps extends DialogRootProps {
      * Render the slideover in a portal.
      * @defaultValue true
      */
-    portal?: boolean;
+    portal?: boolean | string | HTMLElement;
     /**
      * Display a close button to dismiss the slideover.
      * `{ color: 'primary' }`{lang="ts"} for `left`, `right`
@@ -95,7 +95,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     close: boolean | Partial<ButtonProps>;
     modal: boolean;
     transition: boolean;
-    portal: boolean;
+    portal: boolean | string | HTMLElement;
     overlay: boolean;
     side: Slideover["variants"]["side"];
     overlayBlur: Slideover["variants"]["overlayBlur"];

package/dist/runtime/components/Toast.vue

@@ -93,7 +93,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <div v-if="orientation === 'vertical' && actions?.length" :class="b24ui.actions({ class: props.b24ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="b24ui.actions({ class: props.b24ui?.actions })">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <B24Button size="xs" :color="color" v-bind="action" />
@@ -102,8 +102,8 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && actions?.length || close !== null" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
-      <template v-if="orientation === 'horizontal' && actions?.length">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close !== null" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+      <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <B24Button size="xs" :color="color" v-bind="action" />

package/dist/runtime/components/Toaster.vue

@@ -6,18 +6,19 @@ export default {
 </script>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, toRef } from "vue";
 import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useToast } from "../composables/useToast";
+import { usePortal } from "../composables/usePortal";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import B24Toast from "./Toast.vue";
 const props = defineProps({
   position: { type: null, required: false, default: "top-right" },
   expand: { type: Boolean, required: false, default: true },
-  portal: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   duration: { type: Number, required: false, default: 5e3 },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
@@ -28,6 +29,7 @@ defineSlots();
 const { toasts, remove } = useToast();
 const appConfig = useAppConfig();
 const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold"));
+const portalProps = usePortal(toRef(() => props.portal));
 const proxyToastProps = (toast) => {
   return omit(toast, ["id", "close"]);
 };
@@ -93,7 +95,7 @@ function getOffset(index) {
       @click="toast.onClick && toast.onClick(toast)"
     />
 
-    <ToastPortal :disabled="!portal">
+    <ToastPortal v-bind="portalProps">
       <ToastViewport
         :data-expanded="expanded"
         :class="b24ui.viewport({ class: [props.class, props.b24ui?.viewport] })"

package/dist/runtime/components/Toaster.vue.d.ts

@@ -18,7 +18,7 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
      * Render the toaster in a portal.
      * @defaultValue true
      */
-    portal?: boolean;
+    portal?: boolean | string | HTMLElement;
     /**
      * @defaultValue 5000
      */
@@ -43,7 +43,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     position: Toaster["variants"]["position"];
     duration: number;
     expand: boolean;
-    portal: boolean;
+    portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<ToasterSlots> & ToasterSlots>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/dist/runtime/components/Tooltip.vue

@@ -8,6 +8,7 @@ import { defu } from "defu";
 import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { usePortal } from "../composables/usePortal";
 import { tv } from "../utils/tv";
 import B24Kbd from "./Kbd.vue";
 const props = defineProps({
@@ -15,7 +16,7 @@ const props = defineProps({
   kbds: { type: Array, required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
-  portal: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
   defaultOpen: { type: Boolean, required: false },
@@ -30,6 +31,7 @@ const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "delayDuration", "disableHoverableContent", "disableClosingTrigger", "disabled", "ignoreNonKeyboardFocus"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
 const arrowProps = toRef(() => props.arrow);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tooltip || {} })({
@@ -43,7 +45,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tooltip
       <slot :open="open" />
     </TooltipTrigger>
 
-    <TooltipPortal :disabled="!portal">
+    <TooltipPortal v-bind="portalProps">
       <TooltipContent v-bind="contentProps" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })">
         <slot name="content">
           <span v-if="text" :class="b24ui.text({ class: props.b24ui?.text })">{{ text }}</span>