@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

package/dist/runtime/components/Main.vue

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

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

@@ -0,0 +1,24 @@
+export interface MainProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'main'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: {
+        base?: any;
+    };
+}
+export interface MainSlots {
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MainProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MainProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MainSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -15,17 +15,17 @@ export interface ModalProps extends DialogRootProps {
      * @defaultValue true
      */
     overlay?: boolean;
-    /**
-     * When `true`, enables scrollable overlay mode where content scrolls within the overlay.
-     * @defaultValue false
-     */
-    scrollable?: boolean;
     /**
      * Render an overlay blur behind the modal.
      * `auto` use `motion-safe`.
      * @defaultValue 'auto'
      */
     overlayBlur?: Modal['variants']['overlayBlur'];
+    /**
+     * When `true`, enables scrollable overlay mode where content scrolls within the overlay.
+     * @defaultValue false
+     */
+    scrollable?: boolean;
     /**
      * Animate the modal when opening or closing.
      * @defaultValue true
@@ -93,6 +93,8 @@ export interface ModalSlots {
         close: () => void;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
@@ -103,9 +105,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalP
     "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    overlay: boolean;
+    transition: boolean;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    overlayBlur: Modal["variants"]["overlayBlur"];
+    dismissible: boolean;
+    scrollbarThin: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Modal.vue

@@ -7,8 +7,10 @@ import { computed, toRef } from "vue";
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
 import { reactivePick, createReusableTemplate } 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";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Button from "./Button.vue";
@@ -17,8 +19,8 @@ const props = defineProps({
   description: { type: String, required: false },
   content: { type: Object, required: false },
   overlay: { type: Boolean, required: false, default: true },
-  scrollable: { type: Boolean, required: false },
   overlayBlur: { type: null, required: false, default: "auto" },
+  scrollable: { type: Boolean, required: false },
   transition: { type: Boolean, required: false, default: true },
   fullscreen: { type: Boolean, required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
@@ -27,7 +29,7 @@ const props = defineProps({
   dismissible: { type: Boolean, required: false, default: true },
   scrollbarThin: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
   modal: { type: Boolean, required: false, default: true }
@@ -36,6 +38,7 @@ const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "updat
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("modal", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
@@ -50,19 +53,9 @@ const contentEvents = computed(() => {
       return acc;
     }, {});
   }
-  if (props.scrollable) {
-    return {
-      // FIXME: This is a workaround to prevent the modal from closing when clicking on the scrollbar https://reka-ui.com/docs/components/dialog#scrollable-overlay but it's not working on Mac OS.
-      pointerDownOutside: (e) => {
-        const originalEvent = e.detail.originalEvent;
-        const target = originalEvent.target;
-        if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-          e.preventDefault();
-        }
-      }
-    };
-  }
-  return {};
+  return {
+    pointerDownOutside: (e) => pointerDownOutside(e, { scrollable: props.scrollable })
+  };
 });
 const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate();
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal || {} })({
@@ -79,7 +72,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal |
     <DefineContentTemplate>
       <DialogContent
         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')"
@@ -103,18 +96,18 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal |
           <div
             v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close) || !!slots.body"
             data-slot="contentWrapper"
-            :class="b24ui.contentWrapper({ class: props.b24ui?.contentWrapper })"
+            :class="b24ui.contentWrapper({ class: uiProp?.contentWrapper })"
           >
-            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" 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>
@@ -133,19 +126,19 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal |
                       :aria-label="t('modal.close')"
                       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>
               </slot>
             </div>
 
-            <div v-if="!!slots.body" data-slot="body" :class="b24ui.body({ class: props.b24ui?.body, scrollbarThin: Boolean(props.scrollbarThin) })">
+            <div v-if="!!slots.body" data-slot="body" :class="b24ui.body({ class: uiProp?.body, scrollbarThin: Boolean(props.scrollbarThin) })">
               <slot name="body" :close="close" />
             </div>
           </div>
 
-          <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+          <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
             <slot name="footer" :close="close" />
           </div>
         </slot>
@@ -158,13 +151,13 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal |
 
     <DialogPortal v-bind="portalProps">
       <template v-if="scrollable">
-        <DialogOverlay data-slot="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })">
+        <DialogOverlay data-slot="overlay" :class="b24ui.overlay({ class: uiProp?.overlay })">
           <ReuseContentTemplate />
         </DialogOverlay>
       </template>
 
       <template v-else>
-        <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 })" />
 
         <ReuseContentTemplate />
       </template>

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

@@ -15,17 +15,17 @@ export interface ModalProps extends DialogRootProps {
      * @defaultValue true
      */
     overlay?: boolean;
-    /**
-     * When `true`, enables scrollable overlay mode where content scrolls within the overlay.
-     * @defaultValue false
-     */
-    scrollable?: boolean;
     /**
      * Render an overlay blur behind the modal.
      * `auto` use `motion-safe`.
      * @defaultValue 'auto'
      */
     overlayBlur?: Modal['variants']['overlayBlur'];
+    /**
+     * When `true`, enables scrollable overlay mode where content scrolls within the overlay.
+     * @defaultValue false
+     */
+    scrollable?: boolean;
     /**
      * Animate the modal when opening or closing.
      * @defaultValue true
@@ -93,6 +93,8 @@ export interface ModalSlots {
         close: () => void;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
@@ -103,9 +105,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalP
     "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    overlay: boolean;
+    transition: boolean;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    overlayBlur: Modal["variants"]["overlayBlur"];
+    dismissible: boolean;
+    scrollbarThin: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,9 +1,9 @@
 export interface ModalDialogCloseSlots {
     default(props: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, ModalDialogCloseSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, ModalDialogCloseSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,9 +1,9 @@
 export interface ModalDialogCloseSlots {
     default(props: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, ModalDialogCloseSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, ModalDialogCloseSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -14,9 +14,11 @@ export interface NavbarProps {
 export interface NavbarSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Navbar.vue

@@ -6,20 +6,22 @@ import theme from "#build/b24ui/navbar";
 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: "nav" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("navbar", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navbar || {} })());
 </script>
 
 <template>
   <!-- Navbar -->
-  <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/Navbar.vue.d.ts

@@ -14,9 +14,11 @@ export interface NavbarProps {
 export interface NavbarSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -14,9 +14,11 @@ export interface NavbarDividerProps {
 export interface NavbarDividerSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarDividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarDividerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarDividerSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarDividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarDividerProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarDividerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/NavbarDivider.vue

@@ -6,19 +6,21 @@ import theme from "#build/b24ui/navbar-divider";
 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" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("navbarDivider", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navbarDivider || {} })());
 </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/NavbarDivider.vue.d.ts

@@ -14,9 +14,11 @@ export interface NavbarDividerProps {
 export interface NavbarDividerSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarDividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarDividerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarDividerSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarDividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarDividerProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarDividerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -14,9 +14,11 @@ export interface NavbarSectionProps {
 export interface NavbarSectionSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSectionSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarSectionProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSectionSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/NavbarSection.vue

@@ -6,14 +6,16 @@ import theme from "#build/b24ui/navbar-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" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("navSection", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navbarSection || {} })());
 </script>
 
@@ -22,7 +24,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navbarS
     :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/NavbarSection.vue.d.ts

@@ -14,9 +14,11 @@ export interface NavbarSectionProps {
 export interface NavbarSectionSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSectionSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarSectionProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSectionSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -14,9 +14,11 @@ export interface NavbarSpacerProps {
 export interface NavbarSpacerSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarSpacerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarSpacerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSpacerSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarSpacerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarSpacerProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSpacerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/NavbarSpacer.vue

@@ -6,19 +6,21 @@ import theme from "#build/b24ui/navbar-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" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("navbarSpacer", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navbarSpacer || {} })());
 </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/NavbarSpacer.vue.d.ts

@@ -14,9 +14,11 @@ export interface NavbarSpacerProps {
 export interface NavbarSpacerSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarSpacerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarSpacerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSpacerSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<NavbarSpacerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarSpacerProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavbarSpacerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;