@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

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

@@ -0,0 +1,27 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-toolbar';
+import type { ComponentConfig } from '../types/tv';
+type DashboardToolbar = ComponentConfig<typeof theme, AppConfig, 'dashboardToolbar'>;
+export interface DashboardToolbarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: DashboardToolbar['slots'];
+}
+export interface DashboardToolbarSlots {
+    default?(props?: {}): VNode[];
+    left?(props?: {}): VNode[];
+    right?(props?: {}): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardToolbar.vue

@@ -0,0 +1,34 @@
+<script>
+import theme from "#build/b24ui/dashboard-toolbar";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardToolbar", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardToolbar || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <slot>
+      <div data-slot="left" :class="b24ui.left({ class: [uiProp?.left] })">
+        <slot name="left" />
+      </div>
+
+      <div data-slot="right" :class="b24ui.right({ class: [uiProp?.right] })">
+        <slot name="right" />
+      </div>
+    </slot>
+  </Primitive>
+</template>

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

@@ -0,0 +1,27 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-toolbar';
+import type { ComponentConfig } from '../types/tv';
+type DashboardToolbar = ComponentConfig<typeof theme, AppConfig, 'dashboardToolbar'>;
+export interface DashboardToolbarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: DashboardToolbar['slots'];
+}
+export interface DashboardToolbarSlots {
+    default?(props?: {}): VNode[];
+    left?(props?: {}): VNode[];
+    right?(props?: {}): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/description-list';
 import type { AvatarProps, ButtonProps, IconComponent } from '../types';
@@ -55,26 +56,24 @@ type SlotProps<T extends DescriptionListItem> = (props: {
     item: T;
     index: number;
     b24ui: DescriptionList['b24ui'];
-}) => any;
+}) => VNode[];
 export type DescriptionListSlots<T extends DescriptionListItem = DescriptionListItem> = {
-    'legend'(props?: {}): any;
-    'text'(props?: {}): any;
-    'leading': SlotProps<T>;
-    'label'(props: {
-        item: T;
-        index: number;
-    }): any;
-    'description'(props: {
-        item: T;
-        index: number;
-    }): any;
-    'actions': SlotProps<T>;
-    'content-top': SlotProps<T>;
-    'content': SlotProps<T>;
-    'content-bottom': SlotProps<T>;
-    'footer'(props?: {
+    'legend'?(props?: {
         b24ui: DescriptionList['b24ui'];
-    }): any;
+    }): VNode[];
+    'text'?(props?: {
+        b24ui: DescriptionList['b24ui'];
+    }): VNode[];
+    'leading'?: SlotProps<T>;
+    'label'?: SlotProps<T>;
+    'description'?: SlotProps<T>;
+    'actions'?: SlotProps<T>;
+    'content-top'?: SlotProps<T>;
+    'content'?: SlotProps<T>;
+    'content-bottom'?: SlotProps<T>;
+    'footer'?(props?: {
+        b24ui: DescriptionList['b24ui'];
+    }): VNode[];
 } & DynamicSlots<T, undefined, {
     index: number;
     b24ui: DescriptionList['b24ui'];

package/dist/runtime/components/DescriptionList.vue

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/description-list";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
@@ -21,6 +22,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("descriptionList", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.descriptionList || {} })({
   size: props.size
 }));
@@ -51,19 +53,19 @@ const normalizedItems = computed(() => {
 </script>
 
 <template>
-  <div data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <h2 v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
-      <slot name="legend">
+  <div data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <h2 v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: uiProp?.legend })">
+      <slot name="legend" :b24ui="b24ui">
         {{ legend }}
       </slot>
     </h2>
-    <p v-if="text || !!slots.text" data-slot="text" :class="b24ui.text({ class: props.b24ui?.text })">
-      <slot name="text">
+    <p v-if="text || !!slots.text" data-slot="text" :class="b24ui.text({ class: uiProp?.text })">
+      <slot name="text" :b24ui="b24ui">
         {{ text }}
       </slot>
     </p>
 
-    <dl data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+    <dl data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
       <template
         v-for="(item, index) in normalizedItems"
         :key="index"
@@ -85,7 +87,7 @@ const normalizedItems = computed(() => {
             data-slot="labelWrapper"
             :class="b24ui.labelWrapper({
   class: [
-    props.b24ui?.labelWrapper,
+    uiProp?.labelWrapper,
     item?.b24ui?.labelWrapper
   ]
 })"
@@ -97,19 +99,19 @@ const normalizedItems = computed(() => {
                 data-slot="icon"
                 :class="b24ui.icon({
   class: [
-    props.b24ui?.icon,
+    uiProp?.icon,
     item?.b24ui?.icon
   ]
 })"
               />
               <B24Avatar
                 v-else-if="item.avatar"
-                :size="props.b24ui?.avatarSize || b24ui.avatarSize()"
+                :size="uiProp?.avatarSize || b24ui.avatarSize()"
                 v-bind="item.avatar"
                 data-slot="avatar"
                 :class="b24ui.avatar({
   class: [
-    props.b24ui?.avatar,
+    uiProp?.avatar,
     item?.b24ui?.avatar
   ]
 })"
@@ -120,12 +122,12 @@ const normalizedItems = computed(() => {
               :class="b24ui.label({
   class: [
     item?.class,
-    props.b24ui?.label,
+    uiProp?.label,
     item?.b24ui?.label
   ]
 })"
             >
-              <slot name="label" :item="item" :index="index">
+              <slot name="label" :item="item" :index="index" :b24ui="b24ui">
                 {{ item.label }}
               </slot>
             </span>
@@ -135,7 +137,7 @@ const normalizedItems = computed(() => {
             data-slot="descriptionWrapper"
             :class="b24ui.descriptionWrapper({
   class: [
-    props.b24ui?.descriptionWrapper,
+    uiProp?.descriptionWrapper,
     item?.b24ui?.descriptionWrapper,
     item?.b24ui?.class
   ],
@@ -147,13 +149,13 @@ const normalizedItems = computed(() => {
               :class="b24ui.description({
   class: [
     item?.class,
-    props.b24ui?.description,
+    uiProp?.description,
     item?.b24ui?.description
   ],
   orientation: item.orientation
 })"
             >
-              <slot name="description" :item="item" :index="index">
+              <slot name="description" :item="item" :index="index" :b24ui="b24ui">
                 {{ item.description }}
               </slot>
             </span>
@@ -162,7 +164,7 @@ const normalizedItems = computed(() => {
               data-slot="actions"
               :class="b24ui.actions({
   class: [
-    props.b24ui?.actions,
+    uiProp?.actions,
     item?.b24ui?.actions
   ],
   orientation: item.orientation
@@ -191,7 +193,7 @@ const normalizedItems = computed(() => {
     <div
       v-if="!!slots.footer"
       data-slot="footer"
-      :class="b24ui.footer({ class: props.b24ui?.footer })"
+      :class="b24ui.footer({ class: uiProp?.footer })"
     >
       <slot name="footer" :b24ui="b24ui" />
     </div>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/description-list';
 import type { AvatarProps, ButtonProps, IconComponent } from '../types';
@@ -55,26 +56,24 @@ type SlotProps<T extends DescriptionListItem> = (props: {
     item: T;
     index: number;
     b24ui: DescriptionList['b24ui'];
-}) => any;
+}) => VNode[];
 export type DescriptionListSlots<T extends DescriptionListItem = DescriptionListItem> = {
-    'legend'(props?: {}): any;
-    'text'(props?: {}): any;
-    'leading': SlotProps<T>;
-    'label'(props: {
-        item: T;
-        index: number;
-    }): any;
-    'description'(props: {
-        item: T;
-        index: number;
-    }): any;
-    'actions': SlotProps<T>;
-    'content-top': SlotProps<T>;
-    'content': SlotProps<T>;
-    'content-bottom': SlotProps<T>;
-    'footer'(props?: {
+    'legend'?(props?: {
         b24ui: DescriptionList['b24ui'];
-    }): any;
+    }): VNode[];
+    'text'?(props?: {
+        b24ui: DescriptionList['b24ui'];
+    }): VNode[];
+    'leading'?: SlotProps<T>;
+    'label'?: SlotProps<T>;
+    'description'?: SlotProps<T>;
+    'actions'?: SlotProps<T>;
+    'content-top'?: SlotProps<T>;
+    'content'?: SlotProps<T>;
+    'content-bottom'?: SlotProps<T>;
+    'footer'?(props?: {
+        b24ui: DescriptionList['b24ui'];
+    }): VNode[];
 } & DynamicSlots<T, undefined, {
     index: number;
     b24ui: DescriptionList['b24ui'];

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

@@ -0,0 +1,101 @@
+import type { VNode } from 'vue';
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
+import type { DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/drawer';
+import type { EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Drawer = ComponentConfig<typeof theme, AppConfig, 'drawer'>;
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /**
+     * Whether to inset the drawer from the edges.
+     * @defaultValue false
+     */
+    inset?: boolean;
+    /** The content of the drawer. */
+    content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>;
+    /**
+     * Render an overlay behind the drawer.
+     * @defaultValue true
+     */
+    overlay?: boolean;
+    /**
+     * Render an overlay blur behind the modal.
+     * `auto` use `motion-safe`.
+     * @defaultValue 'auto'
+     */
+    overlayBlur?: Drawer['variants']['overlayBlur'];
+    /**
+     * Render a handle on the drawer.
+     * @defaultValue true
+     */
+    handle?: boolean;
+    /**
+     * Render the drawer in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    /**
+     * Whether the drawer is nested in another drawer.
+     * @defaultValue false
+     */
+    nested?: boolean;
+    /**
+     * @defaultValue true
+     */
+    scrollbarThin?: boolean;
+    class?: any;
+    b24ui?: Drawer['slots'];
+}
+export interface DrawerEmits extends DrawerRootEmits {
+    (e: 'close:prevent'): void;
+}
+export interface DrawerSlots {
+    default?(props?: {}): VNode[];
+    content?(props?: {}): VNode[];
+    header?(props?: {}): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    body?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    drag: (percentageDragged: number) => any;
+    "update:open": (open: boolean) => any;
+    "close:prevent": () => any;
+    release: (open: boolean) => any;
+    "update:activeSnapPoint": (val: string | number) => any;
+    animationEnd: (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DrawerProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onDrag?: ((percentageDragged: number) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onClose:prevent"?: (() => any) | undefined;
+    onRelease?: ((open: boolean) => any) | undefined;
+    "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+    onAnimationEnd?: ((open: boolean) => any) | undefined;
+}>, {
+    overlay: boolean;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    handle: boolean;
+    overlayBlur: Drawer["variants"]["overlayBlur"];
+    dismissible: boolean;
+    scrollbarThin: boolean;
+    direction: import("vaul-vue").DrawerDirection;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Drawer.vue

@@ -0,0 +1,133 @@
+<script>
+import theme from "#build/b24ui/drawer";
+</script>
+
+<script setup>
+import { computed, toRef } from "vue";
+import { VisuallyHidden, useForwardPropsEmits } from "reka-ui";
+import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { usePortal } from "../composables/usePortal";
+import { pointerDownOutside } from "../utils/overlay";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  inset: { type: Boolean, required: false },
+  content: { type: Object, required: false },
+  overlay: { type: Boolean, required: false, default: true },
+  overlayBlur: { type: null, required: false, default: "auto" },
+  handle: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  nested: { type: Boolean, required: false },
+  scrollbarThin: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  activeSnapPoint: { type: [Number, String, null], required: false },
+  closeThreshold: { type: Number, required: false },
+  shouldScaleBackground: { type: Boolean, required: false },
+  setBackgroundColorOnScale: { type: Boolean, required: false },
+  scrollLockTimeout: { type: Number, required: false },
+  fixed: { type: Boolean, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  modal: { type: Boolean, required: false, default: true },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  direction: { type: String, required: false, default: "bottom" },
+  noBodyStyles: { type: Boolean, required: false },
+  handleOnly: { type: Boolean, required: false },
+  preventScrollRestoration: { type: Boolean, required: false },
+  snapPoints: { type: Array, required: false }
+});
+const emits = defineEmits(["close:prevent", "drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("drawer", props);
+const rootProps = useForwardPropsEmits(reactivePick(props, "activeSnapPoint", "closeThreshold", "shouldScaleBackground", "setBackgroundColorOnScale", "scrollLockTimeout", "fixed", "dismissible", "modal", "open", "defaultOpen", "nested", "direction", "noBodyStyles", "handleOnly", "preventScrollRestoration", "snapPoints"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
+const contentProps = toRef(() => props.content);
+const contentEvents = computed(() => {
+  if (!props.dismissible) {
+    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
+    return events.reduce((acc, curr) => {
+      acc[curr] = (e) => {
+        e.preventDefault();
+        emits("close:prevent");
+      };
+      return acc;
+    }, {});
+  }
+  return {
+    pointerDownOutside
+  };
+});
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.drawer || {} })({
+  direction: props.direction,
+  inset: props.inset,
+  snapPoints: props.snapPoints && props.snapPoints.length > 0,
+  overlayBlur: props.overlayBlur,
+  overlay: props.overlay,
+  scrollbarThin: props.scrollbarThin
+}));
+</script>
+
+<template>
+  <component :is="nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
+    <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot />
+    </DrawerTrigger>
+
+    <DrawerPortal v-bind="portalProps">
+      <DrawerOverlay v-if="overlay" data-slot="overlay" :class="b24ui.overlay({ class: uiProp?.overlay })" />
+
+      <DrawerContent data-slot="content" :class="b24ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <DrawerHandle v-if="handle" data-slot="handle" :class="b24ui.handle({ class: uiProp?.handle })" />
+
+        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
+          <DrawerTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DrawerTitle>
+
+          <DrawerDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DrawerDescription>
+        </VisuallyHidden>
+
+        <slot name="content">
+          <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
+              <slot name="header">
+                <DrawerTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DrawerTitle>
+
+                <DrawerDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DrawerDescription>
+              </slot>
+            </div>
+
+            <div v-if="!!slots.body" data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
+              <slot name="body" />
+            </div>
+
+            <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
+              <slot name="footer" />
+            </div>
+          </div>
+        </slot>
+      </DrawerContent>
+    </DrawerPortal>
+  </component>
+</template>

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

@@ -0,0 +1,101 @@
+import type { VNode } from 'vue';
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
+import type { DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/drawer';
+import type { EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Drawer = ComponentConfig<typeof theme, AppConfig, 'drawer'>;
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /**
+     * Whether to inset the drawer from the edges.
+     * @defaultValue false
+     */
+    inset?: boolean;
+    /** The content of the drawer. */
+    content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>;
+    /**
+     * Render an overlay behind the drawer.
+     * @defaultValue true
+     */
+    overlay?: boolean;
+    /**
+     * Render an overlay blur behind the modal.
+     * `auto` use `motion-safe`.
+     * @defaultValue 'auto'
+     */
+    overlayBlur?: Drawer['variants']['overlayBlur'];
+    /**
+     * Render a handle on the drawer.
+     * @defaultValue true
+     */
+    handle?: boolean;
+    /**
+     * Render the drawer in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    /**
+     * Whether the drawer is nested in another drawer.
+     * @defaultValue false
+     */
+    nested?: boolean;
+    /**
+     * @defaultValue true
+     */
+    scrollbarThin?: boolean;
+    class?: any;
+    b24ui?: Drawer['slots'];
+}
+export interface DrawerEmits extends DrawerRootEmits {
+    (e: 'close:prevent'): void;
+}
+export interface DrawerSlots {
+    default?(props?: {}): VNode[];
+    content?(props?: {}): VNode[];
+    header?(props?: {}): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    body?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    drag: (percentageDragged: number) => any;
+    "update:open": (open: boolean) => any;
+    "close:prevent": () => any;
+    release: (open: boolean) => any;
+    "update:activeSnapPoint": (val: string | number) => any;
+    animationEnd: (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DrawerProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onDrag?: ((percentageDragged: number) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onClose:prevent"?: (() => any) | undefined;
+    onRelease?: ((open: boolean) => any) | undefined;
+    "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+    onAnimationEnd?: ((open: boolean) => any) | undefined;
+}>, {
+    overlay: boolean;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    handle: boolean;
+    overlayBlur: Drawer["variants"]["overlayBlur"];
+    dismissible: boolean;
+    scrollbarThin: boolean;
+    direction: import("vaul-vue").DrawerDirection;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};