@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

package/dist/runtime/components/Container.vue

@@ -6,18 +6,21 @@ import theme from "#build/b24ui/container";
 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 }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("container", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.container || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui({ class: props.class })">
+  <Primitive :as="as" :class="b24ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -5,13 +5,16 @@ export interface ContainerProps {
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface ContainerSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -115,8 +115,12 @@ export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrN
     index: number;
     b24ui: ContextMenu['b24ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuProps<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<ContextMenuItem>>(__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<ContextMenuProps<T> & {
+        "onUpdate:open"?: ((payload: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -126,8 +130,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => 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/ContextMenu.vue

@@ -7,6 +7,7 @@ import { computed, toRef } from "vue";
 import { ContextMenuRoot, ContextMenuTrigger, 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 B24ContextMenuContent from "./ContextMenuContent.vue";
@@ -21,13 +22,14 @@ 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 },
   pressOpenDelay: { type: Number, required: false },
   modal: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("contextMenu", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "modal"), emits);
 const contentProps = toRef(() => props.content);
 const getProxySlots = () => omit(slots, ["default"]);
@@ -42,9 +44,9 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.context
 
     <B24ContextMenuContent
       data-slot="content"
-      :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
+      :class="b24ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
       :b24ui="b24ui"
-      :b24ui-override="props.b24ui"
+      :b24ui-override="uiProp"
       v-bind="contentProps"
       :items="items"
       :portal="portal"

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

@@ -115,8 +115,12 @@ export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrN
     index: number;
     b24ui: ContextMenu['b24ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuProps<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<ContextMenuItem>>(__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<ContextMenuProps<T> & {
+        "onUpdate:open"?: ((payload: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -126,8 +130,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => 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/ContextMenuContent.d.vue.ts

@@ -28,8 +28,16 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
     b24ui: ContextMenu['b24ui'];
     b24uiOverride?: ContextMenu['slots'];
 }
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuContentProps<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<ContextMenuItem>>(__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<ContextMenuContentProps<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;
@@ -39,8 +47,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => 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/ContextMenuContent.vue

@@ -37,6 +37,7 @@ const props = defineProps({
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
+  hideShiftedArrow: { type: Boolean, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
   positionStrategy: { type: String, required: false },
@@ -93,7 +94,7 @@ const groups = computed(
         </span>
 
         <span
-          v-if="get(item, props.descriptionKey)"
+          v-if="get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description']"
           data-slot="itemDescription"
           :class="b24ui.itemDescription({ class: [b24uiOverride?.itemDescription, item.b24ui?.itemDescription] })"
         >
@@ -225,14 +226,13 @@ const groups = computed(
             >
               <ReuseItemTemplate :item="item" :index="index" />
             </ContextMenu.CheckboxItem>
-            <ContextMenu.Item
-              v-else
-              as-child
-              :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
-              @select="item.onSelect"
-            >
-              <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+            <B24Link v-else v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+              <ContextMenu.Item
+                as-child
+                :disabled="item.disabled"
+                :text-value="get(item, props.labelKey)"
+                @select="item.onSelect"
+              >
                 <B24LinkBase
                   v-bind="slotProps"
                   data-slot="item"
@@ -240,8 +240,8 @@ const groups = computed(
                 >
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </B24LinkBase>
-              </B24Link>
-            </ContextMenu.Item>
+              </ContextMenu.Item>
+            </B24Link>
           </template>
         </ContextMenu.Group>
       </div>

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

@@ -28,8 +28,16 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
     b24ui: ContextMenu['b24ui'];
     b24uiOverride?: ContextMenu['slots'];
 }
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuContentProps<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<ContextMenuItem>>(__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<ContextMenuContentProps<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;
@@ -39,8 +47,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => 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/Countdown.d.vue.ts

@@ -78,6 +78,8 @@ export interface CountdownSlots {
         b24ui: Countdown['b24ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CountdownProps, {
     start: () => void;
     abort: () => void;
@@ -93,9 +95,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Countd
     onAbort?: (() => any) | undefined;
     onProgress?: ((value: CountdownData) => any) | undefined;
     onStart?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CountdownSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    as: any;
+    emitEvents: boolean;
+    seconds: number | string;
+    showMinutes: boolean;
+    useCircle: boolean;
+    interval: number;
+    needStartImmediately: boolean;
+    now: () => number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CountdownSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Countdown.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/countdown";
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
@@ -25,7 +26,7 @@ const props = defineProps({
   needStartImmediately: { type: Boolean, required: false, default: true },
   now: { type: Function, required: false, default: () => Date.now() },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   icon: { type: [Function, Object], required: false },
   avatar: { type: Object, required: false }
 });
@@ -35,6 +36,7 @@ const { isLeading, leadingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: false }))
 );
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("countdown", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.countdown || {} })({
   size: props.size,
   leading: Boolean(isLeading.value),
@@ -239,29 +241,29 @@ defineExpose({
     :as="as"
     v-bind="$attrs"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
     <svg
       v-if="props.useCircle"
       data-slot="circleBase"
-      :class="b24ui.circleBase({ class: [props.b24ui?.circleBase] })"
+      :class="b24ui.circleBase({ class: [uiProp?.circleBase] })"
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
         data-slot="circleGroup"
-        :class="b24ui.circleGroup({ class: [props.b24ui?.circleGroup] })"
+        :class="b24ui.circleGroup({ class: [uiProp?.circleGroup] })"
       >
         <circle
           data-slot="circleElement"
-          :class="b24ui.circleElement({ class: [props.b24ui?.circleElement] })"
+          :class="b24ui.circleElement({ class: [uiProp?.circleElement] })"
           cx="50"
           cy="50"
           r="45"
         />
         <path
           data-slot="circlePath"
-          :class="b24ui.circlePath({ class: [props.b24ui?.circlePath] })"
+          :class="b24ui.circlePath({ class: [uiProp?.circlePath] })"
           :stroke-dasharray="fullDashArray"
           d="M 50, 50 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0"
         />
@@ -272,14 +274,14 @@ defineExpose({
         :is="leadingIconName"
         v-if="isLeading && typeof leadingIconName !== 'undefined'"
         data-slot="leadingIcon"
-        :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+        :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
       />
       <B24Avatar
         v-else-if="!!avatar"
-        :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+        :size="uiProp?.leadingAvatarSize || b24ui.leadingAvatarSize()"
         v-bind="avatar"
         data-slot="leadingAvatar"
-        :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+        :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
       />
     </slot>
     <slot
@@ -296,7 +298,7 @@ defineExpose({
       :format-time="formatTime"
       :b24ui="b24ui"
     >
-      <span data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
+      <span data-slot="label" :class="b24ui.label({ class: uiProp?.label })">
         {{ formatTime }}
       </span>
     </slot>

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

@@ -78,6 +78,8 @@ export interface CountdownSlots {
         b24ui: Countdown['b24ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CountdownProps, {
     start: () => void;
     abort: () => void;
@@ -93,9 +95,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Countd
     onAbort?: (() => any) | undefined;
     onProgress?: ((value: CountdownData) => any) | undefined;
     onStart?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CountdownSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    as: any;
+    emitEvents: boolean;
+    seconds: number | string;
+    showMinutes: boolean;
+    useCircle: boolean;
+    interval: number;
+    needStartImmediately: boolean;
+    now: () => number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CountdownSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,18 +1,26 @@
-import type { UseLoadingProps } from '../composables/useLoading';
-export interface DashboardGroupProps extends Pick<UseLoadingProps, 'id' | 'storage' | 'storageKey'> {
+import type { UseResizableProps } from '../composables/useResizable';
+export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface DashboardGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
+    storage: "cookie" | "local";
+    storageKey: string;
+    persistent: boolean;
+    unit: "%" | "rem" | "px";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/DashboardGroup.vue

@@ -3,45 +3,49 @@ import theme from "#build/b24ui/dashboard-group";
 </script>
 
 <script setup>
-import { ref, computed, useId } from "vue";
+import { ref, computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useNuxtApp, useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { provideDashboardContext } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
-  id: { type: String, required: false },
+  b24ui: { type: Object, required: false },
   storage: { type: String, required: false, default: "cookie" },
-  storageKey: { type: String, required: false, default: "dashboard" }
+  storageKey: { type: String, required: false, default: "dashboard" },
+  persistent: { type: Boolean, required: false, default: true },
+  unit: { type: String, required: false, default: "px" }
 });
 defineSlots();
 const nuxtApp = useNuxtApp();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardGroup", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardGroup || {} }));
 const sidebarOpen = ref(false);
-const isLoading = ref(false);
-const contextId = `${props.storage}-sidebar-group-${props.id || useId()}`;
+const sidebarCollapsed = ref(false);
 provideDashboardContext({
-  contextId,
   storage: props.storage,
   storageKey: props.storageKey,
+  persistent: props.persistent,
+  unit: props.unit,
   sidebarOpen,
   toggleSidebar: () => {
     nuxtApp.hooks.callHook("dashboard:sidebar:toggle");
   },
+  sidebarCollapsed,
+  collapseSidebar: (collapsed) => {
+    nuxtApp.hooks.callHook("dashboard:sidebar:collapse", collapsed);
+  },
   toggleSearch: () => {
     nuxtApp.hooks.callHook("dashboard:search:toggle");
-  },
-  isLoading,
-  load: (load, contextId2) => {
-    nuxtApp.hooks.callHook("dashboard:content:load", load, contextId2);
   }
 });
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui({ class: props.class })">
+  <Primitive :as="as" :class="b24ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,18 +1,26 @@
-import type { UseLoadingProps } from '../composables/useLoading';
-export interface DashboardGroupProps extends Pick<UseLoadingProps, 'id' | 'storage' | 'storageKey'> {
+import type { UseResizableProps } from '../composables/useResizable';
+export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface DashboardGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
+    storage: "cookie" | "local";
+    storageKey: string;
+    persistent: boolean;
+    unit: "%" | "rem" | "px";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -0,0 +1,59 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-navbar';
+import type { DashboardContext } from '../utils/dashboard';
+import type { ButtonProps, IconComponent, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type DashboardNavbar = ComponentConfig<typeof theme, AppConfig, 'dashboardNavbar'>;
+export interface DashboardNavbarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed next to the title.
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    title?: string;
+    /**
+     * Customize the toggle button to open the sidebar.
+     * `{ color: 'air-tertiary', size: 'md' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'left'
+     */
+    toggleSide?: 'left' | 'right';
+    class?: any;
+    b24ui?: DashboardNavbar['slots'];
+}
+type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
+export interface DashboardNavbarSlots {
+    title(props?: {}): any;
+    leading(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+    trailing(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+    left(props: DashboardNavbarSlotsProps): any;
+    default(props: DashboardNavbarSlotsProps): any;
+    right(props: DashboardNavbarSlotsProps): any;
+    toggle(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
+    toggle: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};