@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-heading';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarHeading = ComponentConfig<typeof theme, AppConfig, 'sidebarHeading'>;
 export interface SidebarHeadingProps {
     /**
@@ -11,9 +17,6 @@ export interface SidebarHeadingProps {
     class?: any;
     b24ui?: SidebarHeading['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarHeadingSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarHeading.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/sidebar-heading";
 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, default: "h6" },
@@ -14,11 +15,12 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarHeading", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarHeading || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-heading';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarHeading = ComponentConfig<typeof theme, AppConfig, 'sidebarHeading'>;
 export interface SidebarHeadingProps {
     /**
@@ -11,9 +17,6 @@ export interface SidebarHeadingProps {
     class?: any;
     b24ui?: SidebarHeading['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarHeadingSlots {
     default(props?: {}): any;
 }

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

@@ -1,9 +1,14 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-layout';
-import type { UseLoadingProps } from '../composables/useLoading';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarLayout = ComponentConfig<typeof theme, AppConfig, 'sidebarLayout'>;
-export interface SidebarLayoutProps extends Pick<UseLoadingProps, 'id'> {
+export interface SidebarLayoutProps {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -80,9 +85,9 @@ export interface SidebarLayoutSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarLayoutProps> & Readonly<{}>, {
-    as: any;
     offContentScrollbar: boolean;
     useLightContent: boolean;
+    as: any;
     isInner: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarLayoutSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/SidebarLayout.vue

@@ -7,6 +7,7 @@ import { ref, computed, watch, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import B24Button from "./Button.vue";
@@ -23,12 +24,12 @@ const props = defineProps({
   isInner: { type: Boolean, required: false, default: false },
   offContentScrollbar: { type: Boolean, required: false, default: false },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false },
-  id: { type: String, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarLayout", props);
 const route = useRoute();
 const isUseSideBar = computed(() => !!slots.sidebar);
 const isUseNavbar = computed(() => !!slots.navbar);
@@ -69,7 +70,7 @@ const handleNavigationClick = () => {
     data-state="isLoading ? 'loading' : 'show'"
     :as="as"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
     <!-- isLoading -->
     <slot name="loading" :is-loading="isLoading" :b24ui="b24ui">
@@ -82,10 +83,10 @@ const handleNavigationClick = () => {
         overlay-blur="off"
       >
         <template #content>
-          <div data-slot="loadingWrapper" :class="b24ui.loadingWrapper({ class: props.b24ui?.loadingWrapper })">
+          <div data-slot="loadingWrapper" :class="b24ui.loadingWrapper({ class: uiProp?.loadingWrapper })">
             <BtnSpinnerIcon
               data-slot="loadingIcon"
-              :class="b24ui.loadingIcon({ class: props.b24ui?.loadingIcon })"
+              :class="b24ui.loadingIcon({ class: uiProp?.loadingIcon })"
               aria-hidden="true"
             />
           </div>
@@ -93,23 +94,23 @@ const handleNavigationClick = () => {
       </B24Slideover>
     </slot>
     <template v-if="isUseSideBar">
-      <div data-slot="sidebar" :class="b24ui.sidebar({ class: props.b24ui?.sidebar })">
+      <div data-slot="sidebar" :class="b24ui.sidebar({ class: uiProp?.sidebar })">
         <B24Sidebar>
           <slot name="sidebar" :handle-click="handleNavigationClick" :is-loading="isLoading" :b24ui="b24ui" />
         </B24Sidebar>
       </div>
     </template>
 
-    <div data-slot="contentWrapper" :class="b24ui.contentWrapper({ class: props.b24ui?.contentWrapper })">
+    <div data-slot="contentWrapper" :class="b24ui.contentWrapper({ class: uiProp?.contentWrapper })">
       <header
         v-if="isUseNavbar"
         data-slot="header"
-        :class="b24ui.header({ class: props.b24ui?.header })"
+        :class="b24ui.header({ class: uiProp?.header })"
       >
         <div
           v-if="isUseSideBar"
           data-slot="headerMenuIcon"
-          :class="b24ui.headerMenuIcon({ class: props.b24ui?.headerMenuIcon })"
+          :class="b24ui.headerMenuIcon({ class: uiProp?.headerMenuIcon })"
         >
           <B24Slideover
             v-model:open="openSidebarSlideover"
@@ -117,7 +118,7 @@ const handleNavigationClick = () => {
             :description="t('sidebarLayout.slideoverDescription')"
             side="left"
             :b24ui="{
-  content: b24ui.sidebarSlideoverContainer({ class: props.b24ui?.sidebarSlideoverContainer })
+  content: b24ui.sidebarSlideoverContainer({ class: uiProp?.sidebarSlideoverContainer })
 }"
           >
             <B24Button
@@ -128,9 +129,9 @@ const handleNavigationClick = () => {
             />
 
             <template #content>
-              <div data-slot="sidebarSlideover" :class="b24ui.sidebarSlideover({ class: props.b24ui?.sidebarSlideover })">
+              <div data-slot="sidebarSlideover" :class="b24ui.sidebarSlideover({ class: uiProp?.sidebarSlideover })">
                 <B24Sidebar>
-                  <div data-slot="sidebarSlideoverBtnClose" :class="b24ui.sidebarSlideoverBtnClose({ class: props.b24ui?.sidebarSlideoverBtnClose })">
+                  <div data-slot="sidebarSlideoverBtnClose" :class="b24ui.sidebarSlideoverBtnClose({ class: uiProp?.sidebarSlideoverBtnClose })">
                     <B24ModalDialogClose>
                       <B24Button
                         color="air-tertiary"
@@ -147,26 +148,26 @@ const handleNavigationClick = () => {
             </template>
           </B24Slideover>
         </div>
-        <div data-slot="headerWrapper" :class="b24ui.headerWrapper({ class: props.b24ui?.headerWrapper })">
+        <div data-slot="headerWrapper" :class="b24ui.headerWrapper({ class: uiProp?.headerWrapper })">
           <B24Navbar>
             <slot name="navbar" :handle-click="handleNavigationClick" :is-loading="isLoading" :b24ui="b24ui" />
           </B24Navbar>
         </div>
       </header>
 
-      <div data-slot="pageWrapper" :class="b24ui.pageWrapper({ class: props.b24ui?.pageWrapper })">
+      <div data-slot="pageWrapper" :class="b24ui.pageWrapper({ class: uiProp?.pageWrapper })">
         <template v-if="!!slots['content-top'] || !!slots['content-actions'] || !!slots['default']">
-          <main data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+          <main data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
             <template v-if="!!slots['content-top']">
               <!-- Page Top -->
-              <div data-slot="pageTopWrapper" :class="b24ui.pageTopWrapper({ class: props.b24ui?.pageTopWrapper })">
+              <div data-slot="pageTopWrapper" :class="b24ui.pageTopWrapper({ class: uiProp?.pageTopWrapper })">
                 <slot name="content-top" :is-loading="isLoading" :b24ui="b24ui" />
               </div>
             </template>
 
             <template v-if="!!slots['content-actions']">
               <!-- Page Actions -->
-              <div data-slot="pageActionsWrapper" :class="b24ui.pageActionsWrapper({ class: props.b24ui?.pageActionsWrapper })">
+              <div data-slot="pageActionsWrapper" :class="b24ui.pageActionsWrapper({ class: uiProp?.pageActionsWrapper })">
                 <slot name="content-actions" :is-loading="isLoading" :b24ui="b24ui" />
               </div>
             </template>
@@ -176,9 +177,9 @@ const handleNavigationClick = () => {
               <div
                 :data-content="props.useLightContent ? 'use-light' : 'not-set'"
                 data-slot="containerWrapper"
-                :class="b24ui.containerWrapper({ class: props.b24ui?.containerWrapper })"
+                :class="b24ui.containerWrapper({ class: uiProp?.containerWrapper })"
               >
-                <div data-slot="containerWrapperInner" :class="b24ui.containerWrapperInner({ class: props.b24ui?.containerWrapperInner })">
+                <div data-slot="containerWrapperInner" :class="b24ui.containerWrapperInner({ class: uiProp?.containerWrapperInner })">
                   <slot :is-loading="isLoading" :b24ui="b24ui" />
                 </div>
               </div>
@@ -187,14 +188,14 @@ const handleNavigationClick = () => {
         </template>
 
         <template v-if="!!slots['content-right']">
-          <div data-slot="pageRightWrapper" :class="b24ui.pageRightWrapper({ class: props.b24ui?.pageRightWrapper })">
+          <div data-slot="pageRightWrapper" :class="b24ui.pageRightWrapper({ class: uiProp?.pageRightWrapper })">
             <slot name="content-right" :is-loading="isLoading" :b24ui="b24ui" />
           </div>
         </template>
       </div>
       <template v-if="!!slots['content-bottom']">
         <!-- Page Bottom -->
-        <div data-slot="pageBottomWrapper" :class="b24ui.pageBottomWrapper({ class: props.b24ui?.pageBottomWrapper })">
+        <div data-slot="pageBottomWrapper" :class="b24ui.pageBottomWrapper({ class: uiProp?.pageBottomWrapper })">
           <slot name="content-bottom" :is-loading="isLoading" :b24ui="b24ui" />
         </div>
       </template>

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

@@ -1,9 +1,14 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-layout';
-import type { UseLoadingProps } from '../composables/useLoading';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarLayout = ComponentConfig<typeof theme, AppConfig, 'sidebarLayout'>;
-export interface SidebarLayoutProps extends Pick<UseLoadingProps, 'id'> {
+export interface SidebarLayoutProps {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -80,9 +85,9 @@ export interface SidebarLayoutSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SidebarLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarLayoutProps> & Readonly<{}>, {
-    as: any;
     offContentScrollbar: boolean;
     useLightContent: boolean;
+    as: any;
     isInner: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarLayoutSlots>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-section';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarSection = ComponentConfig<typeof theme, AppConfig, 'sidebarSection'>;
 export interface SidebarSectionProps {
     /**
@@ -11,9 +17,6 @@ export interface SidebarSectionProps {
     class?: any;
     b24ui?: SidebarSection['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSectionSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarSection.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/sidebar-section";
 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, default: "div" },
@@ -14,6 +15,7 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarSection", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarSection || {} })());
 </script>
 
@@ -22,7 +24,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar
     :as="as"
     data-component="section"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
     <slot />
   </Primitive>

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-section';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarSection = ComponentConfig<typeof theme, AppConfig, 'sidebarSection'>;
 export interface SidebarSectionProps {
     /**
@@ -11,9 +17,6 @@ export interface SidebarSectionProps {
     class?: any;
     b24ui?: SidebarSection['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSectionSlots {
     default(props?: {}): any;
 }

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-spacer';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarSpacer = ComponentConfig<typeof theme, AppConfig, 'sidebarSpacer'>;
 export interface SidebarSpacerProps {
     /**
@@ -11,9 +17,6 @@ export interface SidebarSpacerProps {
     class?: any;
     b24ui?: SidebarSpacer['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSpacerSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/SidebarSpacer.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/sidebar-spacer";
 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, default: "div" },
@@ -14,11 +15,12 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebarSpacer", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarSpacer || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" aria-hidden="true" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive :as="as" aria-hidden="true" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,6 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-spacer';
 import type { ComponentConfig } from '../types/tv';
+/**
+ * @deprecated This component is deprecated and will be removed in version `3.0.0`
+ *   - use [DashboardSidebar](https://bitrix24.github.io/b24ui/docs/components/dashboard-sidebar/)
+ *
+ * @removed 3.0.0
+ */
 type SidebarSpacer = ComponentConfig<typeof theme, AppConfig, 'sidebarSpacer'>;
 export interface SidebarSpacerProps {
     /**
@@ -11,9 +17,6 @@ export interface SidebarSpacerProps {
     class?: any;
     b24ui?: SidebarSpacer['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface SidebarSpacerSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/Skeleton.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/skeleton";
 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({
   accent: { type: null, required: false, default: "default" },
@@ -14,6 +15,7 @@ const props = defineProps({
   b24ui: { type: Object, required: false }
 });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("skeleton", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.skeleton || {} })({
   accent: props.accent
 }));
@@ -27,7 +29,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.skeleto
     aria-live="polite"
     role="alert"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
     <slot />
   </Primitive>

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

@@ -1,4 +1,5 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/slideover';
 import type { ButtonProps, IconComponent, LinkPropsKeys } from '../types';
@@ -73,33 +74,33 @@ export interface SlideoverEmits extends DialogRootEmits {
     'close:prevent': [];
 }
 export interface SlideoverSlots {
-    default(props: {
+    default?(props: {
         open: boolean;
-    }): any;
-    content(props: {
+    }): VNode[];
+    content?(props: {
         close: () => void;
-    }): any;
-    sidebar(props: {
+    }): VNode[];
+    sidebar?(props: {
         close: () => void;
-    }): any;
-    navbar(props: {
+    }): VNode[];
+    navbar?(props: {
         close: () => void;
-    }): any;
-    header(props: {
+    }): VNode[];
+    header?(props: {
         close: () => void;
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    actions(props?: {}): any;
-    close(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
         b24ui: Slideover['b24ui'];
-    }): any;
-    body(props: {
+    }): VNode[];
+    body?(props: {
         close: () => void;
-    }): any;
-    footer(props: {
+    }): VNode[];
+    footer?(props: {
         close: () => void;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -115,14 +116,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    side: Slideover["variants"]["side"];
+    overlay: boolean;
+    useLightContent: boolean;
     transition: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;
-    overlay: boolean;
-    side: Slideover["variants"]["side"];
     overlayBlur: Slideover["variants"]["overlayBlur"];
     dismissible: boolean;
-    useLightContent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Slideover.vue

@@ -7,6 +7,7 @@ import { computed, toRef } from "vue";
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { pointerDownOutside } from "../utils/overlay";
@@ -38,6 +39,7 @@ const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "updat
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("slideover", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
@@ -73,12 +75,12 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="overlay" data-slot="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
+      <DialogOverlay v-if="overlay" data-slot="overlay" :class="b24ui.overlay({ class: uiProp?.overlay })" />
 
       <DialogContent
         :data-side="side"
         data-slot="content"
-        :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
+        :class="b24ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
         v-bind="contentProps"
         @after-enter="emits('after:enter')"
         @after-leave="emits('after:leave')"
@@ -120,7 +122,7 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
 }"
                   v-bind="typeof props.close === 'object' ? props.close : {}"
                   data-slot="close"
-                  :class="b24ui.close({ class: props.b24ui?.close })"
+                  :class="b24ui.close({ class: uiProp?.close })"
                 />
               </slot>
             </DialogClose>
@@ -129,13 +131,13 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
             :use-light-content="props.useLightContent"
             is-inner
             :b24ui="{
-  root: b24ui.sidebarLayoutRoot({ class: props.b24ui?.sidebarLayoutRoot }),
-  header: b24ui.sidebarLayoutHeaderWrapper({ class: props.b24ui?.sidebarLayoutHeaderWrapper }),
-  pageWrapper: b24ui.sidebarLayoutPageWrapper({ class: props.b24ui?.sidebarLayoutPageWrapper }),
-  container: b24ui.sidebarLayoutContainer({ class: props.b24ui?.sidebarLayoutContainer }),
-  pageBottomWrapper: b24ui.sidebarLayoutPageBottomWrapper({ class: props.b24ui?.sidebarLayoutPageBottomWrapper }),
-  loadingWrapper: b24ui.sidebarLayoutLoadingWrapper({ class: props.b24ui?.sidebarLayoutLoadingWrapper }),
-  loadingIcon: b24ui.sidebarLayoutLoadingIcon({ class: props.b24ui?.sidebarLayoutLoadingIcon })
+  root: b24ui.sidebarLayoutRoot({ class: uiProp?.sidebarLayoutRoot }),
+  header: b24ui.sidebarLayoutHeaderWrapper({ class: uiProp?.sidebarLayoutHeaderWrapper }),
+  pageWrapper: b24ui.sidebarLayoutPageWrapper({ class: uiProp?.sidebarLayoutPageWrapper }),
+  container: b24ui.sidebarLayoutContainer({ class: uiProp?.sidebarLayoutContainer }),
+  pageBottomWrapper: b24ui.sidebarLayoutPageBottomWrapper({ class: uiProp?.sidebarLayoutPageBottomWrapper }),
+  loadingWrapper: b24ui.sidebarLayoutLoadingWrapper({ class: uiProp?.sidebarLayoutLoadingWrapper }),
+  loadingIcon: b24ui.sidebarLayoutLoadingIcon({ class: uiProp?.sidebarLayoutLoadingIcon })
 }"
           >
             <template v-if="!!slots['sidebar']" #sidebar>
@@ -147,16 +149,16 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
             </template>
 
             <template v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !isBtnCloseExternal && (props.close || !!slots.close)" #content-top>
-              <div data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+              <div data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
                 <slot name="header" :close="close">
-                  <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-                    <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+                  <div data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+                    <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
                       <slot name="title">
                         {{ title }}
                       </slot>
                     </DialogTitle>
 
-                    <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+                    <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
                       <slot name="description">
                         {{ description }}
                       </slot>
@@ -174,7 +176,7 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
                           size="lg"
                           v-bind="typeof props.close === 'object' ? props.close : {}"
                           data-slot="close"
-                          :class="b24ui.close({ class: props.b24ui?.close })"
+                          :class="b24ui.close({ class: uiProp?.close })"
                         />
                       </slot>
                     </DialogClose>
@@ -188,13 +190,13 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
             </template>
 
             <template v-if="!!slots['body']" #default>
-              <div data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
+              <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
                 <slot name="body" :close="close" />
               </div>
             </template>
 
             <template v-if="!!slots.footer" #content-bottom>
-              <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+              <div data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
                 <slot name="footer" :close="close" />
               </div>
             </template>