@bitrix24/b24ui-nuxt 2.4.1 → 2.5.1

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

@@ -102,7 +102,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
     autofocus?: boolean;
     /**
      * Display a close button in the input (useful when inside a Modal for example).
-     * `{ size: 'sm', color: 'air-tertiary-no-accent' }`{lang="ts-type"}
+     * `{ color: 'air-tertiary-no-accent' }`{lang="ts-type"}
      * @emits 'update:open'
      * @defaultValue false
      */
@@ -115,7 +115,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
     closeIcon?: IconComponent;
     /**
      * Display a button to navigate back in history.
-     * `{ size: 'sm', color: 'air-selection' }`{lang="ts-type"}
+     * `{ color: 'air-tertiary-accent' }`{lang="ts-type"}
      * @defaultValue true
      */
     back?: boolean | Omit<ButtonProps, LinkPropsKeys>;

package/dist/runtime/components/DashboardSidebar.vue

@@ -76,7 +76,7 @@ const menuProps = toRef(() => defu(props.menu, {
   content: {
     onOpenAutoFocus: (e) => e.preventDefault()
   }
-}, props.mode === "modal" ? { fullscreen: true, transition: false } : props.mode === "slideover" ? { side: "left" } : {}));
+}, props.mode === "modal" ? { fullscreen: true, transition: false } : props.mode === "slideover" ? { side: "left", close: false } : {}));
 function toggleOpen() {
   open.value = !open.value;
 }

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

@@ -60,11 +60,6 @@ export interface SlideoverProps extends DialogRootProps {
      * @defaultValue false
      */
     dismissible?: boolean;
-    /**
-     * The content is placed on a light background.
-     * @defaultValue 'true'
-     */
-    useLightContent?: boolean;
     class?: any;
     b24ui?: Slideover['slots'];
 }
@@ -80,12 +75,6 @@ export interface SlideoverSlots {
     content?(props: {
         close: () => void;
     }): VNode[];
-    sidebar?(props: {
-        close: () => void;
-    }): VNode[];
-    navbar?(props: {
-        close: () => void;
-    }): VNode[];
     header?(props: {
         close: () => void;
     }): VNode[];
@@ -118,7 +107,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     side: Slideover["variants"]["side"];
     overlay: boolean;
-    useLightContent: boolean;
     transition: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;

package/dist/runtime/components/Slideover.vue

@@ -14,7 +14,6 @@ import { pointerDownOutside } from "../utils/overlay";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Button from "./Button.vue";
-import B24SidebarLayout from "./SidebarLayout.vue";
 const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -28,7 +27,6 @@ const props = defineProps({
   close: { type: [Boolean, Object], required: false, default: true },
   closeIcon: { type: [Function, Object], required: false },
   dismissible: { type: Boolean, required: false, default: true },
-  useLightContent: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   b24ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
@@ -104,103 +102,80 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
           </DialogDescription>
         </VisuallyHidden>
 
-        <slot name="content" :close="close">
-          <template v-if="isBtnCloseExternal">
-            <DialogClose v-if="props.close || !!slots.close" as-child>
-              <slot name="close" :b24ui="b24ui">
-                <!-- @todo fix this css -->
-                <B24Button
-                  v-if="props.close"
-                  :icon="closeIcon || icons.close"
-                  class="group"
-                  color="air-primary"
-                  :aria-label="t('slideover.close')"
-                  size="lg"
-                  :b24ui="{
-  baseLine: 'ps-[4px] pe-[4px]',
+        <template v-if="isBtnCloseExternal && (props.close || !!slots.close)">
+          <DialogClose as-child>
+            <slot name="close" :b24ui="b24ui">
+              <B24Button
+                v-if="props.close"
+                :icon="closeIcon || icons.close"
+                class="group"
+                color="air-primary"
+                :aria-label="t('slideover.close')"
+                size="lg"
+                :b24ui="{
+  baseLine: 'ps-1 pe-1',
   label: 'hidden sm:flex'
 }"
-                  v-bind="typeof props.close === 'object' ? props.close : {}"
-                  data-slot="close"
-                  :class="b24ui.close({ class: uiProp?.close })"
-                />
-              </slot>
-            </DialogClose>
-          </template>
-          <B24SidebarLayout
-            :use-light-content="props.useLightContent"
-            is-inner
-            :b24ui="{
-  root: b24ui.sidebarLayoutRoot({ class: uiProp?.sidebarLayoutRoot }),
-  header: b24ui.sidebarLayoutHeaderWrapper({ class: uiProp?.sidebarLayoutHeaderWrapper }),
-  pageWrapper: b24ui.sidebarLayoutPageWrapper({ class: uiProp?.sidebarLayoutPageWrapper }),
-  container: b24ui.sidebarLayoutContainer({ class: uiProp?.sidebarLayoutContainer }),
-  pageBottomWrapper: b24ui.sidebarLayoutPageBottomWrapper({ class: uiProp?.sidebarLayoutPageBottomWrapper }),
-  loadingWrapper: b24ui.sidebarLayoutLoadingWrapper({ class: uiProp?.sidebarLayoutLoadingWrapper }),
-  loadingIcon: b24ui.sidebarLayoutLoadingIcon({ class: uiProp?.sidebarLayoutLoadingIcon })
-}"
-          >
-            <template v-if="!!slots['sidebar']" #sidebar>
-              <slot name="sidebar" :close="close" />
-            </template>
-
-            <template v-if="!!slots['navbar']" #navbar>
-              <slot name="navbar" :close="close" />
-            </template>
+                v-bind="typeof props.close === 'object' ? props.close : {}"
+                data-slot="close"
+                :class="b24ui.close({ class: uiProp?.close })"
+              />
+            </slot>
+          </DialogClose>
+        </template>
 
-            <template v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !isBtnCloseExternal && (props.close || !!slots.close)" #content-top>
-              <div data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
-                <slot name="header" :close="close">
-                  <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>
+        <slot name="content" :close="close">
+          <div
+            v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !isBtnCloseExternal && (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: 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: uiProp?.description })">
-                      <slot name="description">
-                        {{ description }}
-                      </slot>
-                    </DialogDescription>
-                  </div>
-                  <template v-if="!isBtnCloseExternal && (props.close || !!slots.close)">
-                    <DialogClose v-if="props.close || !!slots.close" as-child>
-                      <slot name="close" :b24ui="b24ui">
-                        <B24Button
-                          v-if="props.close"
-                          :icon="closeIcon || icons.close"
-                          class="group"
-                          color="air-tertiary-no-accent"
-                          :aria-label="t('slideover.close')"
-                          size="lg"
-                          v-bind="typeof props.close === 'object' ? props.close : {}"
-                          data-slot="close"
-                          :class="b24ui.close({ class: uiProp?.close })"
-                        />
-                      </slot>
-                    </DialogClose>
-                  </template>
-                </slot>
+                <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DialogDescription>
               </div>
-            </template>
 
-            <template v-if="!!slots['actions']" #content-actions>
               <slot name="actions" />
-            </template>
 
-            <template v-if="!!slots['body']" #default>
-              <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
-                <slot name="body" :close="close" />
-              </div>
-            </template>
+              <template v-if="!isBtnCloseExternal && (props.close || !!slots.close)">
+                <DialogClose v-if="props.close || !!slots.close" as-child>
+                  <slot name="close" :b24ui="b24ui">
+                    <B24Button
+                      v-if="props.close"
+                      :icon="closeIcon || icons.close"
+                      class="group"
+                      color="air-tertiary-no-accent"
+                      :aria-label="t('slideover.close')"
+                      size="lg"
+                      v-bind="typeof props.close === 'object' ? props.close : {}"
+                      data-slot="close"
+                      :class="b24ui.close({ class: uiProp?.close })"
+                    />
+                  </slot>
+                </DialogClose>
+              </template>
+            </slot>
+          </div>
 
-            <template v-if="!!slots.footer" #content-bottom>
-              <div data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
-                <slot name="footer" :close="close" />
-              </div>
-            </template>
-          </B24SidebarLayout>
+          <template v-if="!!slots['body']">
+            <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
+              <slot name="body" :close="close" />
+            </div>
+          </template>
+
+          <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
+            <slot name="footer" :close="close" />
+          </div>
         </slot>
       </DialogContent>
     </DialogPortal>

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

@@ -60,11 +60,6 @@ export interface SlideoverProps extends DialogRootProps {
      * @defaultValue false
      */
     dismissible?: boolean;
-    /**
-     * The content is placed on a light background.
-     * @defaultValue 'true'
-     */
-    useLightContent?: boolean;
     class?: any;
     b24ui?: Slideover['slots'];
 }
@@ -80,12 +75,6 @@ export interface SlideoverSlots {
     content?(props: {
         close: () => void;
     }): VNode[];
-    sidebar?(props: {
-        close: () => void;
-    }): VNode[];
-    navbar?(props: {
-        close: () => void;
-    }): VNode[];
     header?(props: {
         close: () => void;
     }): VNode[];
@@ -118,7 +107,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     side: Slideover["variants"]["side"];
     overlay: boolean;
-    useLightContent: boolean;
     transition: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;

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{.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"] *));@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/utils/tv.js

@@ -52,6 +52,7 @@ const twMergeConfig = {
       "style-old-ai"
     ],
     "b24-bg": [
+      // @deprecate This rule (style-blurred-bg) is deprecated and will be removed in version `3.0.0`
       "style-blurred-bg",
       "style-blurred-bg-input",
       "style-transparent-bg"