@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

package/dist/runtime/components/DashboardSearchButton.vue

@@ -8,6 +8,7 @@ import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
 import { omit, transformUI } from "../utils";
@@ -54,6 +55,7 @@ const buttonProps = useForwardProps(reactiveOmit(props, "icon", "label", "collap
 const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardSearchButton", props);
 const { toggleSearch } = useDashboard({ toggleSearch: () => {
 } });
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardSearchButton || {} })({
@@ -68,16 +70,17 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboa
       :label="label || t('dashboardSearchButton.label')"
       v-bind="{
   ...buttonProps,
-  ...collapsed ? {
+  ...props.collapsed ? {
+    'label': void 0,
     'aria-label': label || t('dashboardSearchButton.label')
   } : {
-    color: 'air-secondary-no-accent'
+    color: buttonProps['color'] === 'air-tertiary-no-accent' ? 'air-secondary-no-accent' : buttonProps['color']
   },
   ...$attrs
 }"
       data-slot="base"
-      :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
-      :b24ui="transformUI(b24ui, props.b24ui)"
+      :class="b24ui.base({ class: [uiProp?.base, props.class] })"
+      :b24ui="transformUI(b24ui, uiProp)"
       @click="toggleSearch"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
@@ -85,12 +88,13 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboa
       </template>
 
       <template #trailing="{ b24ui: b24uiProxy }">
-        <div data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+        <div data-slot="trailing" :class="b24ui.trailing({ class: uiProp?.trailing })">
           <slot name="trailing" :b24ui="b24uiProxy">
-            <template v-if="kbds?.length">
+            <template v-if="!collapsed && kbds?.length">
               <B24Kbd
                 v-for="(kbd, index) in kbds"
                 :key="index"
+                size="sm"
                 v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
               />
             </template>

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

@@ -42,10 +42,10 @@ export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsK
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
-    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    collapsed: boolean;
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
-    collapsed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -0,0 +1,90 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-sidebar';
+import type { UseResizableProps } from '../composables/useResizable';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type DashboardSidebar = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebar'>;
+type DashboardSidebarMode = 'modal' | 'slideover' | 'drawer';
+type DashboardSidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+export interface DashboardSidebarProps<T extends DashboardSidebarMode = DashboardSidebarMode> extends Pick<UseResizableProps, 'id' | 'side' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable' | 'collapsible' | 'collapsedSize'> {
+    /**
+     * The mode of the sidebar menu.
+     * @defaultValue 'modal'
+     */
+    mode?: T;
+    /**
+     * The props for the sidebar menu component.
+     */
+    menu?: DashboardSidebarMenu<T>;
+    /**
+     * Customize the toggle button to open the sidebar.
+     * `{ color: 'air-tertiary' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'left'
+     */
+    toggleSide?: 'left' | 'right';
+    /**
+     * Automatically close when route changes.
+     * @defaultValue true
+     */
+    autoClose?: boolean;
+    class?: any;
+    b24ui?: DashboardSidebar['slots'];
+}
+export interface DashboardSidebarSlots {
+    'header'?(props: {
+        collapsed: boolean;
+        collapse: (value: boolean) => void;
+    }): VNode[];
+    'default'?(props: {
+        collapsed: boolean;
+        collapse: (value: boolean) => void;
+    }): VNode[];
+    'footer'?(props: {
+        collapsed: boolean;
+        collapse: (value: boolean) => void;
+    }): VNode[];
+    'toggle'?(props: {
+        open: boolean;
+        toggle: () => void;
+        b24ui: DashboardSidebar['b24ui'];
+    }): VNode[];
+    'content'?(props: {
+        close?: () => void;
+    }): VNode[];
+    'resize-handle'?(props: {
+        onMouseDown: (e: MouseEvent) => void;
+        onTouchStart: (e: TouchEvent) => void;
+        onDoubleClick: (e: MouseEvent) => void;
+        b24ui: DashboardSidebar['b24ui'];
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends DashboardSidebarMode>(__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<(DashboardSidebarProps<T> & {
+        open?: boolean;
+        collapsed?: boolean;
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: DashboardSidebarSlots;
+    emit: ((event: "update:open", value: boolean) => void) & ((event: "update:collapsed", value: boolean) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+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/DashboardSidebar.vue

@@ -0,0 +1,169 @@
+<script>
+import theme from "#build/b24ui/dashboard-sidebar";
+</script>
+
+<script setup>
+import { ref, computed, toRef, useId, watch } from "vue";
+import { defu } from "defu";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig, useRuntimeHook, useRoute } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { useResizable } from "../composables/useResizable";
+import { useLocale } from "../composables/useLocale";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+import B24DashboardResizeHandle from "./DashboardResizeHandle.vue";
+import B24DashboardSidebarToggle from "./DashboardSidebarToggle.vue";
+import B24Slideover from "./Slideover.vue";
+import B24Modal from "./Modal.vue";
+import B24Drawer from "./Drawer.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  mode: { type: null, required: false, default: "slideover" },
+  menu: { type: null, required: false },
+  toggle: { type: [Boolean, Object], required: false, default: true },
+  toggleSide: { type: String, required: false, default: "left" },
+  autoClose: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  id: { type: String, required: false },
+  side: { type: String, required: false, default: "left" },
+  minSize: { type: Number, required: false, default: 200 },
+  maxSize: { type: Number, required: false, default: 250 },
+  defaultSize: { type: Number, required: false, default: 240 },
+  resizable: { type: Boolean, required: false, default: false },
+  collapsible: { type: Boolean, required: false, default: false },
+  collapsedSize: { type: Number, required: false, default: 66 }
+});
+const slots = defineSlots();
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const collapsed = defineModel("collapsed", { type: Boolean, ...{ default: false } });
+const route = useRoute();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardSidebar", props);
+const dashboardContext = useDashboard({
+  storageKey: "dashboard",
+  unit: "px",
+  sidebarOpen: ref(false),
+  sidebarCollapsed: ref(false)
+});
+const id = `${dashboardContext.storageKey}-sidebar-${props.id || useId()}`;
+const { el, size, collapse, isCollapsed, isDragging, onMouseDown, onTouchStart, onDoubleClick } = useResizable(id, toRef(() => ({ ...dashboardContext, ...props })), { collapsed });
+const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
+const [DefineResizeHandleTemplate, ReuseResizeHandleTemplate] = createReusableTemplate();
+useRuntimeHook("dashboard:sidebar:toggle", () => {
+  open.value = !open.value;
+});
+useRuntimeHook("dashboard:sidebar:collapse", (value) => {
+  isCollapsed.value = value;
+});
+watch(open, () => dashboardContext.sidebarOpen.value = open.value, { immediate: true });
+watch(isCollapsed, () => dashboardContext.sidebarCollapsed.value = isCollapsed.value, { immediate: true });
+watch(() => route.fullPath, () => {
+  if (!props.autoClose) return;
+  open.value = false;
+});
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardSidebar || {} })({
+  side: props.side
+}));
+const Menu = computed(() => ({
+  slideover: B24Slideover,
+  modal: B24Modal,
+  drawer: B24Drawer
+})[props.mode]);
+const menuProps = toRef(() => defu(props.menu, {
+  content: {
+    onOpenAutoFocus: (e) => e.preventDefault()
+  }
+}, props.mode === "modal" ? { fullscreen: true, transition: false } : props.mode === "slideover" ? { side: "left" } : {}));
+function toggleOpen() {
+  open.value = !open.value;
+}
+</script>
+
+<template>
+  <DefineToggleTemplate>
+    <slot name="toggle" :open="open" :toggle="toggleOpen" :b24ui="b24ui">
+      <B24DashboardSidebarToggle
+        v-if="toggle"
+        v-bind="typeof toggle === 'object' ? toggle : {}"
+        :side="toggleSide"
+        data-slot="toggle"
+        :class="b24ui.toggle({ class: uiProp?.toggle, toggleSide })"
+      />
+    </slot>
+  </DefineToggleTemplate>
+
+  <DefineResizeHandleTemplate>
+    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick" :b24ui="b24ui">
+      <B24DashboardResizeHandle
+        v-if="resizable"
+        :aria-controls="id"
+        data-slot="handle"
+        :class="b24ui.handle({ class: uiProp?.handle })"
+        @mousedown="onMouseDown"
+        @touchstart="onTouchStart"
+        @dblclick="onDoubleClick"
+      />
+    </slot>
+  </DefineResizeHandleTemplate>
+
+  <ReuseResizeHandleTemplate v-if="side === 'right'" />
+
+  <div
+    :id="id"
+    ref="el"
+    v-bind="$attrs"
+    :data-collapsed="isCollapsed"
+    :data-dragging="isDragging"
+    data-slot="root"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
+    :style="{ '--width': `${size || 0}${dashboardContext.unit}` }"
+  >
+    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
+      <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+
+    <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
+      <slot :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+
+    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
+      <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+  </div>
+
+  <ReuseResizeHandleTemplate v-if="side === 'left'" />
+
+  <Menu
+    v-model:open="open"
+    :title="t('dashboardSidebar.title')"
+    :description="t('dashboardSidebar.description')"
+    v-bind="menuProps"
+    :b24ui="{
+  overlay: b24ui.overlay({ class: uiProp?.overlay }),
+  content: b24ui.content({ class: uiProp?.content })
+}"
+  >
+    <template #content="contentData">
+      <slot name="content" v-bind="contentData">
+        <div v-if="!!slots.header || mode !== 'drawer'" data-slot="header" :class="b24ui.header({ class: uiProp?.header, menu: true })">
+          <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'left'" />
+
+          <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
+
+          <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'right'" />
+        </div>
+
+        <div data-slot="body" :class="b24ui.body({ class: uiProp?.body, menu: true })">
+          <slot :collapsed="isCollapsed" :collapse="collapse" />
+        </div>
+
+        <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer, menu: true })">
+          <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
+        </div>
+      </slot>
+    </template>
+  </Menu>
+</template>

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

@@ -0,0 +1,90 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-sidebar';
+import type { UseResizableProps } from '../composables/useResizable';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type DashboardSidebar = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebar'>;
+type DashboardSidebarMode = 'modal' | 'slideover' | 'drawer';
+type DashboardSidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+export interface DashboardSidebarProps<T extends DashboardSidebarMode = DashboardSidebarMode> extends Pick<UseResizableProps, 'id' | 'side' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable' | 'collapsible' | 'collapsedSize'> {
+    /**
+     * The mode of the sidebar menu.
+     * @defaultValue 'modal'
+     */
+    mode?: T;
+    /**
+     * The props for the sidebar menu component.
+     */
+    menu?: DashboardSidebarMenu<T>;
+    /**
+     * Customize the toggle button to open the sidebar.
+     * `{ color: 'air-tertiary' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'left'
+     */
+    toggleSide?: 'left' | 'right';
+    /**
+     * Automatically close when route changes.
+     * @defaultValue true
+     */
+    autoClose?: boolean;
+    class?: any;
+    b24ui?: DashboardSidebar['slots'];
+}
+export interface DashboardSidebarSlots {
+    'header'?(props: {
+        collapsed: boolean;
+        collapse: (value: boolean) => void;
+    }): VNode[];
+    'default'?(props: {
+        collapsed: boolean;
+        collapse: (value: boolean) => void;
+    }): VNode[];
+    'footer'?(props: {
+        collapsed: boolean;
+        collapse: (value: boolean) => void;
+    }): VNode[];
+    'toggle'?(props: {
+        open: boolean;
+        toggle: () => void;
+        b24ui: DashboardSidebar['b24ui'];
+    }): VNode[];
+    'content'?(props: {
+        close?: () => void;
+    }): VNode[];
+    'resize-handle'?(props: {
+        onMouseDown: (e: MouseEvent) => void;
+        onTouchStart: (e: TouchEvent) => void;
+        onDoubleClick: (e: MouseEvent) => void;
+        b24ui: DashboardSidebar['b24ui'];
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends DashboardSidebarMode>(__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<(DashboardSidebarProps<T> & {
+        open?: boolean;
+        collapsed?: boolean;
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: DashboardSidebarSlots;
+    emit: ((event: "update:open", value: boolean) => void) & ((event: "update:collapsed", value: boolean) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+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/DashboardSidebarCollapse.d.vue.ts

@@ -0,0 +1,21 @@
+import type { ButtonProps, LinkPropsKeys } from '../types';
+export interface DashboardSidebarCollapseProps extends Omit<ButtonProps, LinkPropsKeys | 'color'> {
+    /**
+     * @defaultValue 'air-tertiary'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The side of the sidebar to collapse.
+     * @defaultValue 'left'
+     */
+    side?: 'left' | 'right';
+    b24ui?: {
+        base?: any;
+    };
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DashboardSidebarCollapse.vue

@@ -0,0 +1,64 @@
+<script>
+import theme from "#build/b24ui/dashboard-sidebar-collapse";
+</script>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { useComponentUI } from "../composables/useComponentUI";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+import icons from "../dictionary/icons";
+import B24Button from "./Button.vue";
+const props = defineProps({
+  color: { type: null, required: false, default: "air-tertiary" },
+  side: { type: String, required: false, default: "left" },
+  b24ui: { type: Object, required: false },
+  label: { type: String, required: false },
+  activeColor: { type: null, required: false },
+  depth: { type: null, required: false },
+  activeDepth: { type: null, required: false },
+  size: { type: null, required: false },
+  rounded: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  normalCase: { type: Boolean, required: false },
+  useWait: { type: Boolean, required: false },
+  useClock: { type: Boolean, required: false },
+  useDropdown: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  class: { type: null, required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  isAction: { type: Boolean, required: false },
+  exactActiveClass: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false }
+});
+const buttonProps = useForwardProps(reactiveOmit(props, "icon", "side", "class"));
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardSidebarCollapse", props);
+const { sidebarCollapsed, collapseSidebar } = useDashboard({ sidebarCollapsed: ref(false), collapseSidebar: () => {
+} });
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardSidebarCollapse || {} }));
+</script>
+
+<template>
+  <B24Button
+    v-bind="{
+  ...buttonProps,
+  'icon': props.icon || (sidebarCollapsed ? icons.panelOpen : icons.panelClose),
+  'aria-label': sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse'),
+  ...$attrs
+}"
+    :class="b24ui({ class: [uiProp?.base, props.class], side: props.side })"
+    @click="collapseSidebar?.(!sidebarCollapsed)"
+  />
+</template>

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

@@ -0,0 +1,21 @@
+import type { ButtonProps, LinkPropsKeys } from '../types';
+export interface DashboardSidebarCollapseProps extends Omit<ButtonProps, LinkPropsKeys | 'color'> {
+    /**
+     * @defaultValue 'air-tertiary'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The side of the sidebar to collapse.
+     * @defaultValue 'left'
+     */
+    side?: 'left' | 'right';
+    b24ui?: {
+        base?: any;
+    };
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,21 @@
+import type { ButtonProps, LinkPropsKeys } from '../types';
+export interface DashboardSidebarToggleProps extends Omit<ButtonProps, LinkPropsKeys | 'color'> {
+    /**
+     * @defaultValue 'air-tertiary'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The side of the sidebar to toggle.
+     * @defaultValue 'left'
+     */
+    side?: 'left' | 'right';
+    b24ui?: {
+        base?: any;
+    };
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -0,0 +1,65 @@
+<script>
+import theme from "#build/b24ui/dashboard-sidebar-toggle";
+</script>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { useComponentUI } from "../composables/useComponentUI";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+import icons from "../dictionary/icons";
+import B24Button from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  color: { type: null, required: false, default: "air-tertiary" },
+  side: { type: String, required: false, default: "left" },
+  b24ui: { type: Object, required: false },
+  label: { type: String, required: false },
+  activeColor: { type: null, required: false },
+  depth: { type: null, required: false },
+  activeDepth: { type: null, required: false },
+  size: { type: null, required: false },
+  rounded: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  normalCase: { type: Boolean, required: false },
+  useWait: { type: Boolean, required: false },
+  useClock: { type: Boolean, required: false },
+  useDropdown: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  class: { type: null, required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  isAction: { type: Boolean, required: false },
+  exactActiveClass: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false }
+});
+const buttonProps = useForwardProps(reactiveOmit(props, "icon", "side", "class"));
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardSidebarToggle", props);
+const { sidebarOpen, toggleSidebar } = useDashboard({ sidebarOpen: ref(false), toggleSidebar: () => {
+} });
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardSidebarToggle || {} }));
+</script>
+
+<template>
+  <B24Button
+    v-bind="{
+  ...buttonProps,
+  'icon': props.icon || (sidebarOpen ? icons.close : icons.menu),
+  'aria-label': sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open'),
+  ...$attrs
+}"
+    :class="b24ui({ class: [uiProp?.base, props.class], side: props.side })"
+    @click="toggleSidebar"
+  />
+</template>

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

@@ -0,0 +1,21 @@
+import type { ButtonProps, LinkPropsKeys } from '../types';
+export interface DashboardSidebarToggleProps extends Omit<ButtonProps, LinkPropsKeys | 'color'> {
+    /**
+     * @defaultValue 'air-tertiary'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The side of the sidebar to toggle.
+     * @defaultValue 'left'
+     */
+    side?: 'left' | 'right';
+    b24ui?: {
+        base?: any;
+    };
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;