@bitrix24/b24ui-nuxt 2.5.1 → 2.5.2

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
   "configKey": "b24ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.DMHr4spo.mjs';
+import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.D2-pCbE6.mjs';
 import 'node:url';
 import 'scule';
 import 'knitwork';

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

@@ -1,16 +1,16 @@
 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';
+import theme from '#build/b24ui/dashboard-sidebar';
 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'
+     * @defaultValue 'slideover'
      */
     mode?: T;
     /**

package/dist/runtime/components/DashboardSidebar.vue

@@ -72,11 +72,22 @@ const Menu = computed(() => ({
   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", close: false } : {}));
+const menuProps = toRef(() => {
+  const modeSettings = props.mode === "modal" ? { fullscreen: true, transition: false, b24ui: { content: "p-0 pt-0" } } : props.mode === "slideover" ? { side: "left", close: false } : {};
+  return defu(
+    props.menu,
+    { content: { onOpenAutoFocus: (e) => e.preventDefault() } },
+    modeSettings,
+    {
+      b24ui: {
+        overlay: b24ui.value.overlay({ class: uiProp.value?.overlay }),
+        content: b24ui.value.content({
+          class: [modeSettings.b24ui?.content, uiProp.value?.content]
+        })
+      }
+    }
+  );
+});
 function toggleOpen() {
   open.value = !open.value;
 }
@@ -141,10 +152,6 @@ function toggleOpen() {
     :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">

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

@@ -1,16 +1,16 @@
 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';
+import theme from '#build/b24ui/dashboard-sidebar';
 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'
+     * @defaultValue 'slideover'
      */
     mode?: T;
     /**

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

@@ -1,8 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import theme from '#build/b24ui/header';
 import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
+import theme from '#build/b24ui/header';
 type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
 type HeaderMode = 'modal' | 'slideover' | 'drawer';
 type HeaderMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
@@ -16,7 +16,7 @@ export interface HeaderProps<T extends HeaderMode = HeaderMode> {
     to?: string;
     /**
      * The mode of the header menu.
-     * @defaultValue 'modal'
+     * @defaultValue 'slideover'
      */
     mode?: T;
     /**

package/dist/runtime/components/Header.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   as: { type: null, required: false, default: "header" },
   title: { type: String, required: false, default: "Bitrix24 UI" },
   to: { type: String, required: false, default: "/" },
-  mode: { type: null, required: false, default: "modal" },
+  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" },
@@ -55,11 +55,22 @@ const Menu = computed(() => ({
   modal: B24Modal,
   drawer: B24Drawer
 })[props.mode]);
-const menuProps = toRef(() => defu(props.menu, {
-  content: {
-    onOpenAutoFocus: (e) => e.preventDefault()
-  }
-}, props.mode === "modal" ? { fullscreen: true, transition: false } : {}));
+const menuProps = toRef(() => {
+  const modeSettings = props.mode === "modal" ? { fullscreen: true, transition: false, b24ui: { content: "p-0 pt-0" } } : props.mode === "slideover" ? { side: "left", close: false } : {};
+  return defu(
+    props.menu,
+    { content: { onOpenAutoFocus: (e) => e.preventDefault() } },
+    modeSettings,
+    {
+      b24ui: {
+        overlay: b24ui.value.overlay({ class: uiProp.value?.overlay }),
+        content: b24ui.value.content({
+          class: [modeSettings.b24ui?.content, uiProp.value?.content]
+        })
+      }
+    }
+  );
+});
 function toggleOpen() {
   open.value = !open.value;
 }
@@ -125,10 +136,6 @@ function toggleOpen() {
     :title="t('header.title')"
     :description="t('header.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">

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

@@ -1,8 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import theme from '#build/b24ui/header';
 import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
+import theme from '#build/b24ui/header';
 type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
 type HeaderMode = 'modal' | 'slideover' | 'drawer';
 type HeaderMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
@@ -16,7 +16,7 @@ export interface HeaderProps<T extends HeaderMode = HeaderMode> {
     to?: string;
     /**
      * The mode of the header menu.
-     * @defaultValue 'modal'
+     * @defaultValue 'slideover'
      */
     mode?: T;
     /**

package/dist/runtime/composables/index.d.ts

@@ -6,4 +6,7 @@ export * from './useOverlay';
 export * from './useResizable';
 export * from './useScrollspy';
 export * from './useToast';
+export * from './useDevice';
+export * from './useConfetti';
 export * from './useSpeechRecognition';
+export * from './color-mode/useColorMode';

package/dist/runtime/composables/index.js

@@ -6,4 +6,7 @@ export * from "./useOverlay.js";
 export * from "./useResizable.js";
 export * from "./useScrollspy.js";
 export * from "./useToast.js";
+export * from "./useDevice.js";
+export * from "./useConfetti.js";
 export * from "./useSpeechRecognition.js";
+export * from "./color-mode/useColorMode.js";

package/dist/runtime/composables/useDevice.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Breakpoints Tailwind
+ */
+declare const TAILWIND_BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+export type PlatformName = 'web' | 'bitrix-mobile' | 'bitrix-desktop';
+export type ScreenSize = keyof typeof TAILWIND_BREAKPOINTS | 'xs';
+export declare const useDevice: () => {
+    platform: Readonly<import("vue").Ref<{
+        readonly name?: PlatformName | undefined;
+        readonly version?: string | undefined;
+    }, {
+        readonly name?: PlatformName | undefined;
+        readonly version?: string | undefined;
+    }>>;
+    version: import("vue").ComputedRef<string | undefined>;
+    isWeb: import("vue").ComputedRef<boolean>;
+    isBitrixMobile: import("vue").ComputedRef<boolean>;
+    isBitrixDesktop: import("vue").ComputedRef<boolean>;
+    screen: import("vue").ComputedRef<{
+        current: ScreenSize;
+        xs: boolean;
+        sm: boolean;
+        md: boolean;
+        lg: boolean;
+        xl: boolean;
+        '2xl': boolean;
+        isMobile: boolean;
+        isTablet: boolean;
+        isDesktop: boolean;
+        isLargeDesktop: boolean;
+    }>;
+};
+export {};

package/dist/runtime/composables/useDevice.js

@@ -0,0 +1,62 @@
+import { useState } from "#imports";
+import { computed, readonly } from "vue";
+import { createSharedComposable, useMediaQuery } from "@vueuse/core";
+const TAILWIND_BREAKPOINTS = {
+  "sm": 640,
+  "md": 768,
+  "lg": 1024,
+  "xl": 1280,
+  "2xl": 1536
+};
+const _useDevice = () => {
+  const platform = useState("platform", () => ({}));
+  const isWeb = computed(() => platform.value.name === "web");
+  const isBitrixMobile = computed(() => platform.value.name === "bitrix-mobile");
+  const isBitrixDesktop = computed(() => platform.value.name === "bitrix-desktop");
+  const mediaQueries = {
+    "sm": useMediaQuery(`(min-width: ${TAILWIND_BREAKPOINTS["sm"]}px)`),
+    "md": useMediaQuery(`(min-width: ${TAILWIND_BREAKPOINTS["md"]}px)`),
+    "lg": useMediaQuery(`(min-width: ${TAILWIND_BREAKPOINTS["lg"]}px)`),
+    "xl": useMediaQuery(`(min-width: ${TAILWIND_BREAKPOINTS["xl"]}px)`),
+    "2xl": useMediaQuery(`(min-width: ${TAILWIND_BREAKPOINTS["2xl"]}px)`)
+  };
+  const screen = computed(() => {
+    const sm = mediaQueries.sm.value;
+    const md = mediaQueries.md.value;
+    const lg = mediaQueries.lg.value;
+    const xl = mediaQueries.xl.value;
+    const xl2 = mediaQueries["2xl"].value;
+    let current = "xs";
+    if (xl2) current = "2xl";
+    else if (xl) current = "xl";
+    else if (lg) current = "lg";
+    else if (md) current = "md";
+    else if (sm) current = "sm";
+    else current = "xs";
+    return {
+      current,
+      "xs": !sm,
+      sm,
+      md,
+      lg,
+      xl,
+      "2xl": xl2,
+      "isMobile": !md,
+      "isTablet": md && !lg,
+      "isDesktop": lg,
+      "isLargeDesktop": xl2
+    };
+  });
+  return {
+    // Platform data
+    platform: readonly(platform),
+    version: computed(() => platform.value.version),
+    // Platform flags
+    isWeb,
+    isBitrixMobile,
+    isBitrixDesktop,
+    // Screen information
+    screen
+  };
+};
+export const useDevice = /* @__PURE__ */ createSharedComposable(_useDevice);

package/dist/runtime/index.css

@@ -1 +1 @@
-@import "#build/b24ui.css";@import "./keyframes.css";@import "./air-design-tokens/tw-style/index.css";@import "./air-design-tokens/index.css";@variant light (&:where(.light, .light *));@variant edge-dark (&:where(.edge-dark, .edge-dark *));@variant edge-light (&:where(.edge-light, .edge-light *));@variant dark (&:where(.dark, .dark *));@variant bitrix-mobile (&:where(html[data-platform="bitrix-mobile"] *));@variant bitrix-desktop (&:where(html[data-platform="bitrix-desktop"] *));@layer base{.air-custom-bg,.sidebar-layout.--inner,body{--air-theme-background:var(--air-theme-bg-image,none) var(--air-theme-bg-position,0 0) /var(--air-theme-bg-size,auto) var(--air-theme-bg-repeat,repeat) var(--air-theme-bg-attachment,scroll) var(--air-theme-bg-color,transparent);--air-theme-background-blurred:var(--air-theme-bg-image-blurred,none) var(--air-theme-bg-position,0 0) /var(--air-theme-bg-size,auto) var(--air-theme-bg-repeat,repeat) var(--air-theme-bg-attachment,scroll)}}@layer theme{:host,:root{--b24ui-header-height:--spacing(14.5)}}@theme default inline{--text-color-dimmed:var(--ui-color-base-6);--text-color-muted:var(--ui-color-design-plain-na-content-secondary);--text-color-description:var(--b24ui-typography-description-color);--text-color-legend:var(--b24ui-typography-legend-color);--text-color-label:var(--b24ui-typography-label-color)}
+@import "#build/b24ui.css";@import "./keyframes.css";@import "./air-design-tokens/tw-style/index.css";@import "./air-design-tokens/index.css";@variant light (&:where(.light, .light *));@variant edge-dark (&:where(.edge-dark, .edge-dark *));@variant edge-light (&:where(.edge-light, .edge-light *));@variant dark (&:where(.dark, .dark *));@variant bitrix-mobile (&:where(html[data-platform="bitrix-mobile"] *));@variant bitrix-desktop (&:where(html[data-platform="bitrix-desktop"] *));@variant web (&:where(html[data-platform="web"] *));@layer base{.air-custom-bg,.sidebar-layout.--inner,body{--air-theme-background:var(--air-theme-bg-image,none) var(--air-theme-bg-position,0 0) /var(--air-theme-bg-size,auto) var(--air-theme-bg-repeat,repeat) var(--air-theme-bg-attachment,scroll) var(--air-theme-bg-color,transparent);--air-theme-background-blurred:var(--air-theme-bg-image-blurred,none) var(--air-theme-bg-position,0 0) /var(--air-theme-bg-size,auto) var(--air-theme-bg-repeat,repeat) var(--air-theme-bg-attachment,scroll)}}@layer theme{:host,:root{--b24ui-header-height:--spacing(14.5)}}@theme default inline{--text-color-dimmed:var(--ui-color-base-6);--text-color-muted:var(--ui-color-design-plain-na-content-secondary);--text-color-description:var(--b24ui-typography-description-color);--text-color-legend:var(--b24ui-typography-legend-color);--text-color-label:var(--b24ui-typography-label-color)}

package/dist/runtime/plugins/platform.d.ts

@@ -1,5 +1,5 @@
 /**
- * Plugin to detect the Bitrix24 mobile application environment.
+ * Plugin to detect the Bitrix24 application environment.
  *
  * @description
  * 1. Analyzes the User-Agent on the server-side (SSR) or client-side.

package/dist/shared/{b24ui-nuxt.DMHr4spo.mjs → b24ui-nuxt.D2-pCbE6.mjs}

@@ -8,7 +8,7 @@ import { globSync } from 'tinyglobby';
 import { defuFn } from 'defu';
 
 const name = "@bitrix24/b24ui-nuxt";
-const version = "2.5.1";
+const version = "2.5.2";
 
 function getDefaultConfig(theme) {
   return {
@@ -2943,10 +2943,13 @@ const dashboardSidebar = {
     root: [
       "relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0",
       "backdrop-blur-sm bg-(--ui-color-bg-content-primary)/20 light:bg-transparent dark:bg-(--ui-color-bg-content-primary)/70",
-      "light:bg-transparent light:[--leftmenu-group-stroke:var(--ui-color-base-30)]"
+      "light:bg-transparent"
     ].join(" "),
     header: "h-(--b24ui-header-height) shrink-0 flex items-center gap-1.5 ps-4 pe-4",
-    body: "flex flex-col gap-4 flex-1 overflow-y-auto py-2 ps-4 pe-4 md:pe-2 scrollbar-thin scrollbar-transparent",
+    body: [
+      "flex flex-col gap-4 flex-1 overflow-y-auto py-2 ps-4 pe-4 md:pe-2 scrollbar-thin scrollbar-transparent",
+      "light:[--leftmenu-group-stroke:var(--ui-color-base-30)]"
+    ],
     footer: [
       "shrink-0 flex items-center gap-1.5 py-2 ps-4 pe-4",
       "lg:border-t lg:border-(--ui-color-divider-default)",
@@ -6064,6 +6067,8 @@ const navigationMenu = {
         list: "flex flex-col",
         item: [
           "mt-(--menu-item-block-stack-space)",
+          // @see `--leftmenu-group-stroke` src/runtime/air-design-tokens/components/navigation-menu.css:75
+          // @see `light:--leftmenu-group-stroke` src/theme/dashboard-sidebar.ts:16
           "data-[state=open]:rounded-(--menu-item-border-radius) data-[state=open]:border-(length:--leftmenu-group-stroke-weight) data-[state=open]:border-(--leftmenu-group-stroke)"
         ].join(" "),
         link: [

package/dist/unplugin.mjs

@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { g as getTemplates, d as defaultOptions, a as getDefaultConfig } from './shared/b24ui-nuxt.DMHr4spo.mjs';
+import { g as getTemplates, d as defaultOptions, a as getDefaultConfig } from './shared/b24ui-nuxt.D2-pCbE6.mjs';
 import fs from 'node:fs';
 import path from 'node:path';
 import MagicString from 'magic-string';

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/b24ui-nuxt.DMHr4spo.mjs';
+import './shared/b24ui-nuxt.D2-pCbE6.mjs';
 import 'scule';
 import 'knitwork';
 import '@nuxt/kit';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
   "description": "Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bitrix24/b24ui.git"