@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

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

@@ -79,8 +79,10 @@ export type DescriptionListSlots<T extends DescriptionListItem = DescriptionList
     index: number;
     b24ui: DescriptionList['b24ui'];
 }>;
-declare const __VLS_export: <T extends DescriptionListItem>(__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<DescriptionListProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends DescriptionListItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DescriptionListProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -90,8 +92,8 @@ declare const __VLS_export: <T extends DescriptionListItem>(__VLS_props: NonNull
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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";
@@ -17,10 +18,11 @@ const props = defineProps({
   items: { type: Array, required: false },
   size: { type: null, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 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 })">
+  <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">
         {{ legend }}
       </slot>
     </h2>
-    <p v-if="text || !!slots.text" data-slot="text" :class="b24ui.text({ class: props.b24ui?.text })">
+    <p v-if="text || !!slots.text" data-slot="text" :class="b24ui.text({ class: uiProp?.text })">
       <slot name="text">
         {{ 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,7 +122,7 @@ const normalizedItems = computed(() => {
               :class="b24ui.label({
   class: [
     item?.class,
-    props.b24ui?.label,
+    uiProp?.label,
     item?.b24ui?.label
   ]
 })"
@@ -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,7 +149,7 @@ const normalizedItems = computed(() => {
               :class="b24ui.description({
   class: [
     item?.class,
-    props.b24ui?.description,
+    uiProp?.description,
     item?.b24ui?.description
   ],
   orientation: item.orientation
@@ -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

@@ -79,8 +79,10 @@ export type DescriptionListSlots<T extends DescriptionListItem = DescriptionList
     index: number;
     b24ui: DescriptionList['b24ui'];
 }>;
-declare const __VLS_export: <T extends DescriptionListItem>(__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<DescriptionListProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends DescriptionListItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DescriptionListProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -90,8 +92,8 @@ declare const __VLS_export: <T extends DescriptionListItem>(__VLS_props: NonNull
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -0,0 +1,100 @@
+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?: {}): any;
+    content(props?: {}): any;
+    header(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+}
+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,100 @@
+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?: {}): any;
+    content(props?: {}): any;
+    header(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+}
+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/DropdownMenu.d.vue.ts

@@ -122,8 +122,12 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     index: number;
     b24ui: DropdownMenu['b24ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DropdownMenuProps<T> & {
+        "onUpdate:open"?: ((payload: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -133,8 +137,8 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/DropdownMenu.vue

@@ -5,14 +5,10 @@ import theme from "#build/b24ui/dropdown-menu";
 <script setup>
 import { computed, toRef } from "vue";
 import { defu } from "defu";
-import {
-  DropdownMenuRoot,
-  DropdownMenuTrigger,
-  DropdownMenuArrow,
-  useForwardPropsEmits
-} from "reka-ui";
+import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import B24DropdownMenuContent from "./DropdownMenuContent.vue";
@@ -27,7 +23,7 @@ const props = defineProps({
   descriptionKey: { type: null, required: false, default: "description" },
   disabled: { type: Boolean, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
   modal: { type: Boolean, required: false, default: true }
@@ -35,6 +31,7 @@ const props = defineProps({
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dropdownMenu", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "modal"), emits);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", align: "center", sideOffset: 8, collisionPadding: 8 }));
 const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
@@ -58,9 +55,9 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dropdow
 
     <B24DropdownMenuContent
       data-slot="content"
-      :class="b24ui.content({ class: [!slots.default && props.b24ui?.content, props.class] })"
+      :class="b24ui.content({ class: [!slots.default && uiProp?.content, props.class] })"
       :b24ui="b24ui"
-      :b24ui-override="props.b24ui"
+      :b24ui-override="uiProp"
       v-bind="contentProps"
       :items="items"
       :arrow="arrow"
@@ -74,7 +71,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dropdow
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: uiProp?.arrow })" />
     </B24DropdownMenuContent>
   </DropdownMenuRoot>
 </template>

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

@@ -122,8 +122,12 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     index: number;
     b24ui: DropdownMenu['b24ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DropdownMenuProps<T> & {
+        "onUpdate:open"?: ((payload: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -133,8 +137,8 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -39,8 +39,16 @@ type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     index: number;
     b24ui: DropdownMenu['b24ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuContentProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DropdownMenuContentProps<T> & {
+        onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+        onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -50,8 +58,8 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};