@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

package/dist/runtime/composables/useEditorMenu.js

@@ -1,6 +1,6 @@
-import { ref, h, computed, unref } from "vue";
+import { ref, h, computed, unref, watch } from "vue";
 import { defu } from "defu";
-import { useFilter } from "reka-ui";
+import { useFilter } from "./internal/useFilter.js";
 import { computePosition } from "@floating-ui/dom";
 import { VueRenderer } from "@tiptap/vue-3";
 import Suggestion from "@tiptap/suggestion";
@@ -11,6 +11,7 @@ export function useEditorMenu(options) {
   const filteredItems = ref([]);
   const selectedIndex = ref(0);
   const menuState = ref("closed");
+  const searchTerm = options.searchTerm ?? ref("");
   let renderer = null;
   let element = null;
   let handleMouseDown = null;
@@ -21,7 +22,8 @@ export function useEditorMenu(options) {
   let triggerClientRect = null;
   let handleHover = null;
   let scrollHandler = null;
-  const { contains, startsWith } = useFilter({ sensitivity: "base" });
+  let stopItemsWatch = null;
+  const { score } = useFilter();
   const cleanupMenu = () => {
     if (menuState.value === "closed") return;
     menuState.value = "closed";
@@ -53,40 +55,31 @@ export function useEditorMenu(options) {
   const filterFields = options.filterFields ?? ["label"];
   const defaultFilter = (items2, query) => {
     if (!query) return items2;
-    const matched = [];
+    const scored = [];
     for (const item of items2) {
-      let bestMatchType = 3;
-      let bestFieldIndex = filterFields.length;
-      for (let i = 0; i < filterFields.length; i++) {
-        const value = get(item, filterFields[i]);
-        if (value === void 0 || value === null) continue;
+      let bestScore = null;
+      for (const field of filterFields) {
+        const value = get(item, field);
+        if (value == null) continue;
         const values = Array.isArray(value) ? value.map(String) : [String(value)];
         for (const v of values) {
           const normalized = v.replace(/[\s_-]/g, "");
-          let matchType = 3;
-          if (startsWith(v, query) || startsWith(normalized, query)) {
-            matchType = v.length === query.length || normalized.length === query.length ? 0 : 1;
-          } else if (contains(v, query) || contains(normalized, query)) {
-            matchType = 2;
-          }
-          if (matchType < bestMatchType || matchType === bestMatchType && i < bestFieldIndex) {
-            bestMatchType = matchType;
-            bestFieldIndex = i;
-          }
+          const s = Math.min(score(v, query) ?? 3, score(normalized, query) ?? 3);
+          if (bestScore === null || s < bestScore) bestScore = s;
+          if (bestScore === 0) break;
         }
+        if (bestScore === 0) break;
       }
-      if (bestMatchType < 3) {
-        matched.push({ item, fieldIndex: bestFieldIndex, matchType: bestMatchType });
+      if (bestScore !== null && bestScore < 3) {
+        scored.push({ item, score: bestScore });
       }
     }
-    matched.sort((a, b) => {
-      if (a.matchType !== b.matchType) return a.matchType - b.matchType;
-      return a.fieldIndex - b.fieldIndex;
-    });
-    return matched.map(({ item }) => item);
+    scored.sort((a, b) => a.score - b.score);
+    return scored.map(({ item }) => item);
   };
   const filter = options.filter || defaultFilter;
   const limit = options.limit ?? 42;
+  const pluginKeyInstance = typeof options.pluginKey === "string" ? new PluginKey(options.pluginKey) : options.pluginKey;
   const groups = computed(() => {
     const items2 = unref(options.items);
     return items2?.length ? isArrayOfArray(items2) ? items2 : [items2] : [];
@@ -94,6 +87,9 @@ export function useEditorMenu(options) {
   const items = computed(() => groups.value.flatMap((group) => group));
   const filteredGroups = computed(() => {
     if (!filteredItems.value.length) return [];
+    if (options.ignoreFilter) {
+      return [filteredItems.value];
+    }
     return groups.value.map((group) => {
       const filtered = group.filter((item) => filteredItems.value.includes(item));
       filtered.sort((a, b) => filteredItems.value.indexOf(a) - filteredItems.value.indexOf(b));
@@ -117,25 +113,124 @@ export function useEditorMenu(options) {
     inline: false
   });
   const middleware = buildFloatingUIMiddleware(floatingUIOptions);
-  const updatePosition = (element2) => {
+  const updatePosition = (el) => {
     if (!triggerClientRect) return;
     const rect = triggerClientRect();
     if (!rect) return;
     const virtualElement = {
       getBoundingClientRect: () => rect
     };
-    computePosition(virtualElement, element2, {
+    computePosition(virtualElement, el, {
       placement: floatingUIOptions.placement,
       strategy: floatingUIOptions.strategy,
       middleware
     }).then(({ x, y, strategy }) => {
-      element2.style.width = "max-content";
-      element2.style.position = strategy;
-      element2.style.top = "0";
-      element2.style.left = "0";
-      element2.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+      el.style.width = "max-content";
+      el.style.position = strategy;
+      el.style.top = "0";
+      el.style.left = "0";
+      el.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+    });
+  };
+  const showMenu = () => {
+    menuState.value = "open";
+    if (!globalKeyHandler) {
+      globalKeyHandler = (e) => {
+        if (keyDownHandler) {
+          const handled = keyDownHandler({ event: e });
+          if (handled) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        }
+      };
+      document.addEventListener("keydown", globalKeyHandler, true);
+    }
+    if (!blurHandler) {
+      blurHandler = () => {
+        setTimeout(() => {
+          if (menuState.value === "open") {
+            const tr = options.editor.view.state.tr.setMeta(pluginKeyInstance, { exit: true });
+            options.editor.view.dispatch(tr);
+          }
+        }, 0);
+      };
+      options.editor.view.dom.addEventListener("blur", blurHandler);
+    }
+    if (!scrollHandler) {
+      scrollHandler = () => {
+        if (element) {
+          updatePosition(element);
+        }
+      };
+      window.addEventListener("scroll", scrollHandler, true);
+    }
+    handleHover = (index) => {
+      selectedIndex.value = index;
+      if (renderer) {
+        renderer.updateProps({
+          groups: filteredGroups.value,
+          selectedIndex: index,
+          onSelect: commandFn,
+          onHover: handleHover,
+          state: menuState.value
+        });
+      }
+    };
+    renderer = new VueRenderer(MenuComponent, {
+      props: {
+        groups: filteredGroups.value,
+        selectedIndex: selectedIndex.value,
+        onSelect: commandFn,
+        onHover: handleHover,
+        state: menuState.value
+      },
+      editor: options.editor
     });
+    element = document.createElement("div");
+    element.style.position = floatingUIOptions.strategy;
+    element.style.zIndex = "50";
+    handleMouseDown = (e) => {
+      e.preventDefault();
+    };
+    element.addEventListener("mousedown", handleMouseDown);
+    const appendToElement = typeof options.appendTo === "function" ? options.appendTo() : options.appendTo;
+    (appendToElement ?? options.editor.view.dom.parentElement)?.appendChild(element);
+    if (renderer.element) {
+      element.appendChild(renderer.element);
+    }
+    updatePosition(element);
   };
+  if (options.ignoreFilter) {
+    stopItemsWatch = watch(() => unref(options.items), (newItems) => {
+      if (!triggerClientRect) return;
+      const normalizedItems = newItems?.length ? isArrayOfArray(newItems) ? newItems.flat() : newItems : [];
+      filteredItems.value = normalizedItems.slice(0, limit);
+      if (!filteredItems.value.length) {
+        cleanupMenu();
+        return;
+      }
+      if (selectedIndex.value >= selectableItems.value.length) {
+        selectedIndex.value = Math.max(0, selectableItems.value.length - 1);
+      }
+      if (menuState.value === "closed" && filteredItems.value.length) {
+        showMenu();
+        return;
+      }
+      if (renderer) {
+        renderer.updateProps({
+          groups: filteredGroups.value,
+          selectedIndex: selectedIndex.value,
+          onSelect: commandFn,
+          onHover: handleHover,
+          state: menuState.value
+        });
+      }
+      if (element) {
+        updatePosition(element);
+      }
+    }, { deep: true, flush: "sync" });
+  }
   const MenuComponent = {
     props: {
       groups: { type: Array, required: true },
@@ -215,13 +310,16 @@ export function useEditorMenu(options) {
       };
     }
   };
-  const pluginKeyInstance = typeof options.pluginKey === "string" ? new PluginKey(options.pluginKey) : options.pluginKey;
   const plugin = Suggestion({
     pluginKey: pluginKeyInstance,
     editor: options.editor,
     char: options.char,
-    items: ({ query }) => {
-      const filtered = filter(items.value, query);
+    items: ({ query: q }) => {
+      searchTerm.value = q;
+      if (options.ignoreFilter) {
+        return items.value.slice(0, limit);
+      }
+      const filtered = filter(items.value, q);
       return filtered.slice(0, limit);
     },
     command: ({ editor, range, props }) => {
@@ -270,77 +368,17 @@ export function useEditorMenu(options) {
       };
       const handlers = {
         onStart: (suggestionProps) => {
-          filteredItems.value = suggestionProps.items;
+          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
           selectedIndex.value = 0;
           commandFn = (item) => suggestionProps.command(item);
           triggerClientRect = suggestionProps.clientRect;
           if (!filteredItems.value.length) {
             return;
           }
-          menuState.value = "open";
-          globalKeyHandler = (e) => {
-            if (keyDownHandler) {
-              const handled = keyDownHandler({ event: e });
-              if (handled) {
-                e.preventDefault();
-                e.stopPropagation();
-              }
-            }
-          };
-          document.addEventListener("keydown", globalKeyHandler, true);
-          blurHandler = () => {
-            setTimeout(() => {
-              if (menuState.value === "open") {
-                const tr = suggestionProps.editor.view.state.tr.setMeta(pluginKeyInstance, { exit: true });
-                suggestionProps.editor.view.dispatch(tr);
-              }
-            }, 0);
-          };
-          suggestionProps.editor.view.dom.addEventListener("blur", blurHandler);
-          scrollHandler = () => {
-            if (element) {
-              updatePosition(element);
-            }
-          };
-          window.addEventListener("scroll", scrollHandler, true);
-          handleHover = (index) => {
-            selectedIndex.value = index;
-            if (renderer) {
-              renderer.updateProps({
-                groups: filteredGroups.value,
-                selectedIndex: index,
-                onSelect: commandFn,
-                onHover: handleHover,
-                state: menuState.value
-              });
-            }
-          };
-          renderer = new VueRenderer(MenuComponent, {
-            props: {
-              groups: filteredGroups.value,
-              selectedIndex: selectedIndex.value,
-              onSelect: commandFn,
-              onHover: handleHover,
-              state: menuState.value
-            },
-            editor: suggestionProps.editor
-          });
-          element = document.createElement("div");
-          element.style.position = floatingUIOptions.strategy;
-          element.style.zIndex = "50";
-          handleMouseDown = (e) => {
-            e.preventDefault();
-          };
-          element.addEventListener("mousedown", handleMouseDown);
-          const appendToElement = typeof options.appendTo === "function" ? options.appendTo() : options.appendTo;
-          (appendToElement ?? suggestionProps.editor.view.dom.parentElement)?.appendChild(element);
-          if (renderer.element) {
-            element.appendChild(renderer.element);
-          }
-          updatePosition(element);
+          showMenu();
         },
         onUpdate: (suggestionProps) => {
-          filteredItems.value = suggestionProps.items;
+          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
           commandFn = (item) => suggestionProps.command(item);
           if (selectedIndex.value >= selectableItems.value.length) {
             selectedIndex.value = Math.max(0, selectableItems.value.length - 1);
@@ -350,72 +388,7 @@ export function useEditorMenu(options) {
             return;
           }
           if (!renderer) {
-            menuState.value = "open";
-            if (!globalKeyHandler) {
-              globalKeyHandler = (e) => {
-                if (keyDownHandler) {
-                  const handled = keyDownHandler({ event: e });
-                  if (handled) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }
-                }
-              };
-              document.addEventListener("keydown", globalKeyHandler, true);
-            }
-            if (!blurHandler) {
-              blurHandler = () => {
-                setTimeout(() => {
-                  if (menuState.value === "open") {
-                    const tr = suggestionProps.editor.view.state.tr.setMeta(pluginKeyInstance, { exit: true });
-                    suggestionProps.editor.view.dispatch(tr);
-                  }
-                }, 0);
-              };
-              suggestionProps.editor.view.dom.addEventListener("blur", blurHandler);
-            }
-            if (!scrollHandler) {
-              scrollHandler = () => {
-                if (element) {
-                  updatePosition(element);
-                }
-              };
-              window.addEventListener("scroll", scrollHandler, true);
-            }
-            handleHover = (index) => {
-              selectedIndex.value = index;
-              if (renderer) {
-                renderer.updateProps({
-                  groups: filteredGroups.value,
-                  selectedIndex: index,
-                  onSelect: commandFn,
-                  onHover: handleHover,
-                  state: menuState.value
-                });
-              }
-            };
-            renderer = new VueRenderer(MenuComponent, {
-              props: {
-                groups: filteredGroups.value,
-                selectedIndex: selectedIndex.value,
-                onSelect: commandFn,
-                onHover: handleHover,
-                state: menuState.value
-              },
-              editor: suggestionProps.editor
-            });
-            element = document.createElement("div");
-            element.style.position = floatingUIOptions.strategy;
-            element.style.zIndex = "50";
-            handleMouseDown = (e) => {
-              e.preventDefault();
-            };
-            element.addEventListener("mousedown", handleMouseDown);
-            const appendToElement = typeof options.appendTo === "function" ? options.appendTo() : options.appendTo;
-            (appendToElement ?? suggestionProps.editor.view.dom.parentElement)?.appendChild(element);
-            if (renderer.element) {
-              element.appendChild(renderer.element);
-            }
+            showMenu();
           } else {
             renderer.updateProps({
               groups: filteredGroups.value,
@@ -466,10 +439,15 @@ export function useEditorMenu(options) {
       element.remove();
       element = null;
     }
+    if (stopItemsWatch) {
+      stopItemsWatch();
+      stopItemsWatch = null;
+    }
   };
   return {
     plugin,
     destroy,
-    filteredItems
+    filteredItems,
+    searchTerm
   };
 }

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

@@ -11,7 +11,7 @@ type Props<T> = {
 };
 export declare function useFieldGroup<T>(props: Props<T>): {
     orientation: ComputedRef<"horizontal" | "vertical" | undefined>;
-    size: ComputedRef<"md" | "xs" | "sm" | "lg" | "xl" | "xss" | NonNullable<GetObjectField<T, "size">> | undefined>;
+    size: ComputedRef<"lg" | "sm" | "md" | "xl" | "xs" | "xss" | NonNullable<GetObjectField<T, "size">> | undefined>;
     noSplit: ComputedRef<boolean>;
 };
 export {};

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

@@ -28,7 +28,7 @@ export declare function useFormField<T>(props?: Props<T>, opts?: {
 }): {
     id: ComputedRef<string | undefined>;
     name: ComputedRef<string | undefined>;
-    size: ComputedRef<"md" | "xs" | "sm" | "lg" | NonNullable<GetObjectField<T, "size">> | undefined>;
+    size: ComputedRef<"lg" | "sm" | "md" | "xs" | NonNullable<GetObjectField<T, "size">> | undefined>;
     color: ComputedRef<"air-primary-alert" | GetObjectField<T, "color"> | undefined>;
     highlight: ComputedRef<boolean | undefined>;
     disabled: ComputedRef<boolean | undefined>;

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

@@ -1,4 +1,7 @@
 import type { Ref } from 'vue';
+/**
+ * @deprecated Subject to refactoring
+ */
 export type UseLoadingProps = {
     /**
      * The id of the SidebarLayout.

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

@@ -57,7 +57,7 @@ export type UseResizableProps = {
     persistent?: boolean;
     /**
      * The unit to use for size values.
-     * @defaultValue '%'
+     * @defaultValue 'px'
      */
     unit?: '%' | 'rem' | 'px';
 };

package/dist/runtime/composables/useResizable.js

@@ -14,7 +14,7 @@ export const useResizable = (key, options = {}, { collapsed = ref(false) } = {})
     collapsible: false,
     collapsedSize: 0,
     resizable: true,
-    unit: "%",
+    unit: "px",
     ...isRef(options) ? options.value : options
   }));
   const { dir } = useLocale();

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

@@ -5,6 +5,10 @@ export declare const toastMaxInjectionKey: InjectionKey<Ref<number | undefined>>
 export interface Toast extends Omit<ToastProps, 'defaultOpen'>, EmitsToProps<ToastEmits> {
     id: string | number;
     onClick?: (toast: Toast) => void;
+    /** @internal */
+    _duplicate?: number;
+    /** @internal */
+    _updated?: boolean;
 }
 export declare function useToast(): {
     toasts: Ref<Toast[], Toast[]>;

package/dist/runtime/composables/useToast.js

@@ -25,6 +25,15 @@ export function useToast() {
       open: true,
       ...toast
     };
+    const existingIndex = toasts.value.findIndex((t) => t.id === body.id);
+    if (existingIndex !== -1) {
+      toasts.value[existingIndex] = {
+        ...toasts.value[existingIndex],
+        ...body,
+        _duplicate: (toasts.value[existingIndex]._duplicate || 0) + 1
+      };
+      return body;
+    }
     queue.push(body);
     processQueue();
     return body;
@@ -34,12 +43,27 @@ export function useToast() {
     if (index !== -1) {
       toasts.value[index] = {
         ...toasts.value[index],
-        ...toast
+        ...toast,
+        duration: toast.duration,
+        open: true,
+        _updated: true
       };
+      nextTick(() => {
+        const i = toasts.value.findIndex((t) => t.id === id);
+        if (i !== -1 && toasts.value[i]._updated) {
+          toasts.value[i] = {
+            ...toasts.value[i],
+            _updated: void 0
+          };
+        }
+      });
     }
   }
   function remove(id) {
     const index = toasts.value.findIndex((t) => t.id === id);
+    if (index !== -1 && toasts.value[index]._updated) {
+      return;
+    }
     if (index !== -1) {
       toasts.value[index] = {
         ...toasts.value[index],

package/dist/runtime/dictionary/icons.d.ts

@@ -41,5 +41,8 @@ declare const _default: {
     stop: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}>;
     reload: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}>;
     drag: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}>;
+    menu: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}>;
+    panelClose: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}>;
+    panelOpen: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}>;
 };
 export default _default;

package/dist/runtime/dictionary/icons.js

@@ -33,6 +33,9 @@ import RefreshIcon from "@bitrix24/b24icons-vue/outline/RefreshIcon";
 import SendIcon from "@bitrix24/b24icons-vue/main/SendIcon";
 import DragLIcon from "@bitrix24/b24icons-vue/outline/DragLIcon";
 import GoToLIcon from "@bitrix24/b24icons-vue/outline/GoToLIcon";
+import HamburgerMenuIcon from "@bitrix24/b24icons-vue/outline/HamburgerMenuIcon";
+import CloseChatIcon from "@bitrix24/b24icons-vue/outline/CloseChatIcon";
+import OpenChatIcon from "@bitrix24/b24icons-vue/outline/OpenChatIcon";
 export default {
   arrowLeft: ArrowToTheLeftIcon,
   arrowRight: ArrowToTheRightIcon,
@@ -69,5 +72,8 @@ export default {
   arrowUp: ArrowTopLIcon,
   stop: StopLIcon,
   reload: RefreshIcon,
-  drag: DragLIcon
+  drag: DragLIcon,
+  menu: HamburgerMenuIcon,
+  panelClose: CloseChatIcon,
+  panelOpen: OpenChatIcon
 };

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 *));@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)}}@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{.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/keyframes.css

@@ -1 +1 @@
-@keyframes accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes toast-collapsed-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale))}}@keyframes toast-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--offset) - var(--height))*var(--translate-factor)))}}@keyframes toast-slide-left{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(-100%) translateY(var(--translate))}}@keyframes toast-slide-right{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(100%) translateY(var(--translate))}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-from-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-out-to-right{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slide-in-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-in-from-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-out-to-left{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-in-from-top-and-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-top-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes slide-in-from-right-and-fade{0%{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-right-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes slide-in-from-bottom-and-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes slide-in-from-left-and-fade{0%{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-left-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes enter-from-right{0%{opacity:0;transform:translateX(200px)}to{opacity:1;transform:translateX(0)}}@keyframes enter-from-left{0%{opacity:0;transform:translateX(-200px)}to{opacity:1;transform:translateX(0)}}@keyframes exit-to-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(200px)}}@keyframes exit-to-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-200px)}}@keyframes carousel{0%,to{width:30%}0%{transform:translateX(-100%)}to{transform:translateX(370%)}}@keyframes carousel-rtl{0%,to{width:30%}0%{transform:translateX(100%)}to{transform:translateX(-370%)}}@keyframes carousel-vertical{0%,to{height:30%}0%{transform:translateY(-100%)}to{transform:translateY(370%)}}@keyframes carousel-inverse{0%,to{width:30%}0%{transform:translateX(370%)}to{transform:translateX(-100%)}}@keyframes carousel-inverse-rtl{0%,to{width:30%}0%{transform:translateX(-370%)}to{transform:translateX(100%)}}@keyframes carousel-inverse-vertical{0%,to{height:30%}0%{transform:translateY(370%)}to{transform:translateY(-100%)}}@keyframes swing{0%,to{width:30%}0%,to{transform:translateX(-25%)}50%{transform:translateX(275%)}}@keyframes swing-vertical{0%,to{height:30%}0%,to{transform:translateY(-25%)}50%{transform:translateY(275%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}@keyframes elastic-vertical{0%,to{height:50%;margin-top:25%}50%{height:90%;margin-top:5%}}@keyframes progressbar-loading{0%,to{width:30%}0%{transform:translateX(-200%)}50%{transform:translateX(350%)}to{transform:translateX(-200%)}}@keyframes progressbar-loading-vertical{0%,to{height:30%}0%{transform:translateY(-200%)}50%{transform:translateY(350%)}to{transform:translateY(-200%)}}
+@keyframes accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes toast-slide-in-from-top{0%{transform:translateY(-100%)}to{transform:var(--transform)}}@keyframes toast-slide-in-from-bottom{0%{transform:translateY(100%)}to{transform:var(--transform)}}@keyframes toast-slide-up{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(0) translateY(calc(var(--translate) - 100%))}}@keyframes toast-slide-down{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(0) translateY(calc(var(--translate) + 100%))}}@keyframes toast-pulse-a{0%,to{scale:1}50%{scale:1.04}}@keyframes toast-pulse-b{0%,to{scale:1}50%{scale:1.04}}@keyframes toast-collapsed-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale))}}@keyframes toast-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--offset) - var(--height))*var(--translate-factor)))}}@keyframes toast-slide-left{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(-100%) translateY(var(--translate))}}@keyframes toast-slide-right{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(100%) translateY(var(--translate))}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-from-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-out-to-right{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slide-in-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-in-from-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-out-to-left{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-in-from-top-and-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-top-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes slide-in-from-right-and-fade{0%{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-right-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes slide-in-from-bottom-and-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes slide-in-from-left-and-fade{0%{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-left-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes enter-from-right{0%{opacity:0;transform:translateX(200px)}to{opacity:1;transform:translateX(0)}}@keyframes enter-from-left{0%{opacity:0;transform:translateX(-200px)}to{opacity:1;transform:translateX(0)}}@keyframes exit-to-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(200px)}}@keyframes exit-to-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-200px)}}@keyframes carousel{0%,to{width:30%}0%{transform:translateX(-100%)}to{transform:translateX(370%)}}@keyframes carousel-rtl{0%,to{width:30%}0%{transform:translateX(100%)}to{transform:translateX(-370%)}}@keyframes carousel-vertical{0%,to{height:30%}0%{transform:translateY(-100%)}to{transform:translateY(370%)}}@keyframes carousel-inverse{0%,to{width:30%}0%{transform:translateX(370%)}to{transform:translateX(-100%)}}@keyframes carousel-inverse-rtl{0%,to{width:30%}0%{transform:translateX(-370%)}to{transform:translateX(100%)}}@keyframes carousel-inverse-vertical{0%,to{height:30%}0%{transform:translateY(370%)}to{transform:translateY(-100%)}}@keyframes swing{0%,to{width:30%}0%,to{transform:translateX(-25%)}50%{transform:translateX(275%)}}@keyframes swing-vertical{0%,to{height:30%}0%,to{transform:translateY(-25%)}50%{transform:translateY(275%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}@keyframes elastic-vertical{0%,to{height:50%;margin-top:25%}50%{height:90%;margin-top:5%}}@keyframes progressbar-loading{0%,to{width:30%}0%{transform:translateX(-200%)}50%{transform:translateX(350%)}to{transform:translateX(-200%)}}@keyframes progressbar-loading-vertical{0%,to{height:30%}0%{transform:translateY(-200%)}50%{transform:translateY(350%)}to{transform:translateY(-200%)}}

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

@@ -0,0 +1,34 @@
+/**
+ * Plugin to detect the Bitrix24 mobile application environment.
+ *
+ * @description
+ * 1. Analyzes the User-Agent on the server-side (SSR) or client-side.
+ * 2. Establishes a reactive `platform` state using `useState`.
+ * 3. Injects attributes into the `<html>` tag for styling:
+ *    - `data-platform="bitrix-mobile" | "bitrix-desktop" | "web"`
+ *    - `data-version="XX" | "XX.X.XX.XX" | "air"`
+ *
+ * @example
+ * // In CSS:
+ * html[data-platform="bitrix-mobile"] .my-component { ... }
+ * html[data-platform="bitrix-desktop"] .my-component { ... }
+ *
+ * @example
+ * <!-- Template usage (Tailwind) -->
+ * <div class="hidden bitrix-mobile:block bitrix-mobile:bg-blue-600">
+ *    Content visible only inside the Bitrix Mobile
+ * </div>
+ * <div class="hidden bitrix-desktop:block bitrix-desktop:bg-blue-600">
+ *    Content visible only inside the Bitrix Desktop
+ * </div>
+ *
+ * @example
+ * // Inside a Vue component:
+ * const platform = useState('platform')
+ * if (platform.value.name === 'bitrix-mobile') { ... }
+ * if (platform.value.name === 'bitrix-desktop') { ... }
+ *
+ * @todo add docs
+ */
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/platform.js

@@ -0,0 +1,31 @@
+import { defineNuxtPlugin, useState, useRequestHeader, useHead } from "#imports";
+export default defineNuxtPlugin(() => {
+  const platform = useState("platform", () => ({}));
+  if (!platform.value?.name) {
+    const ua = import.meta.server ? useRequestHeader("user-agent") : navigator.userAgent;
+    const matchBitrixMobile = ua?.match(/BitrixMobile\/Version=(\d+)/);
+    const matchBitrixDesktop = ua?.match(/BitrixDesktop\/([\d.]+)/);
+    if (matchBitrixMobile) {
+      platform.value = {
+        name: "bitrix-mobile",
+        version: matchBitrixMobile[1]
+      };
+    } else if (matchBitrixDesktop) {
+      platform.value = {
+        name: "bitrix-desktop",
+        version: matchBitrixDesktop[1]
+      };
+    } else {
+      platform.value = {
+        name: "web",
+        version: "air"
+      };
+    }
+  }
+  useHead({
+    htmlAttrs: {
+      "data-platform": () => platform.value.name,
+      "data-version": () => platform.value.version
+    }
+  });
+});

package/dist/runtime/plugins/ui-version.d.ts

@@ -1,5 +1,5 @@
 /**
- * @memo Add b24ui version
+ * Add b24ui version
  */
 declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/types/color-mode.d.ts

@@ -1,2 +1,2 @@
 export type ColorModeTypeLight = 'light' | 'edge-dark' | 'edge-light';
-export type ColorModeType = 'system' | 'dark' & ColorModeTypeLight;
+export type ColorModeType = 'auto' | 'dark' | ColorModeTypeLight;