@bitrix24/b24ui-nuxt 0.3.3 → 0.3.4

package/dist/runtime/components/Slideover.vue

@@ -0,0 +1,193 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/slideover'
+import { tv } from '../utils/tv'
+import type { ButtonProps, IconComponent } from '../types'
+
+const appConfigSlideover = _appConfig as AppConfig & { b24ui: { slideover: Partial<typeof theme> } }
+
+const slideover = tv({ extend: tv(theme), ...(appConfigSlideover.b24ui?.slideover || {}) })
+
+type SlideoverVariants = VariantProps<typeof slideover>
+
+export interface SlideoverProps extends DialogRootProps {
+  title?: string
+  description?: string
+  /** The content of the slideover. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the slideover.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Animate the slideover when opening or closing.
+   * @defaultValue true
+   */
+  transition?: boolean
+  side?: SlideoverVariants['side']
+  /**
+   * Render the slideover in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Display a close button to dismiss the slideover.
+   * `{ color: 'primary' }`{lang="ts"} for `left`, `right`
+   * `{ color: 'link' }`{lang="ts"} for `top`, `bottom`
+   * @defaultValue true
+   */
+  close?: boolean | Partial<ButtonProps>
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue icons.close
+   */
+  closeIcon?: IconComponent
+  /**
+   * When `false`, the slideover will not close when clicking outside or pressing escape.
+   * @defaultValue true
+   */
+  dismissible?: boolean
+  scrollbarThin?: boolean
+  class?: any
+  b24ui?: Partial<typeof slideover.slots>
+}
+
+export interface SlideoverEmits extends DialogRootEmits {
+  'after:leave': []
+}
+
+export interface SlideoverSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  close(props: { b24ui: any }): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
+import icons from '../dictionary/icons'
+import B24Button from './Button.vue'
+
+const props = withDefaults(defineProps<SlideoverProps>(), {
+  close: true,
+  portal: true,
+  overlay: true,
+  transition: true,
+  modal: true,
+  dismissible: true,
+  side: 'right',
+  scrollbarThin: true
+})
+const emits = defineEmits<SlideoverEmits>()
+const slots = defineSlots<SlideoverSlots>()
+
+const { t } = useLocale()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const contentProps = toRef(() => props.content)
+const contentEvents = computed(() => {
+  if (!props.dismissible) {
+    return {
+      pointerDownOutside: (e: Event) => e.preventDefault(),
+      interactOutside: (e: Event) => e.preventDefault(),
+      escapeKeyDown: (e: Event) => e.preventDefault(),
+      closeAutoFocus: (e: Event) => e.preventDefault()
+    }
+  }
+
+  return {
+    closeAutoFocus: (e: Event) => e.preventDefault()
+  }
+})
+
+const b24ui = computed(() => slideover({
+  transition: props.transition,
+  side: props.side
+}))
+</script>
+
+<template>
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <DialogPortal :disabled="!portal">
+      <DialogOverlay v-if="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
+
+      <DialogContent :data-side="side" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">
+        <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
+          <DialogTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DialogTitle>
+
+          <DialogDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DialogDescription>
+        </VisuallyHidden>
+
+        <slot name="content">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="b24ui.header({ class: props.b24ui?.header })">
+            <slot name="header">
+              <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DialogTitle>
+
+                <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DialogDescription>
+              </div>
+
+              <DialogClose as-child>
+                <slot name="close" :b24ui="b24ui">
+                  <B24Button
+                    v-if="close"
+                    :icon="closeIcon || icons.close"
+                    size="md"
+                    class="group"
+                    :color="['left', 'right'].includes(props?.side) ? 'primary' : 'link'"
+                    :aria-label="t('slideover.close')"
+                    :b24ui="{
+                      leadingIcon: ['left', 'right'].includes(props?.side) ? 'group-hover:rounded-full group-hover:border-1 group-hover:border-current' : ''
+                    }"
+                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+                    :class="b24ui.close({ class: props.b24ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div :class="b24ui.body({ class: props.b24ui?.body, scrollbarThin: Boolean(props.scrollbarThin) })">
+            <slot name="body" />
+          </div>
+
+          <div v-if="!!slots.footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+            <slot name="footer" />
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

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

@@ -0,0 +1,30 @@
+import type { Component } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+export type OverlayOptions<OverlayAttrs = Record<string, any>> = {
+    defaultOpen?: boolean;
+    props?: OverlayAttrs;
+    destroyOnClose?: boolean;
+};
+type ManagedOverlayOptionsPrivate<T extends Component> = {
+    component?: T;
+    id: symbol;
+    isMounted: boolean;
+    modelValue: boolean;
+    resolvePromise?: (value: unknown) => void;
+};
+export type Overlay = OverlayOptions<Component> & ManagedOverlayOptionsPrivate<Component>;
+interface OverlayInstance<T> {
+    open: (props?: ComponentProps<T>) => Promise<any>;
+    close: (value?: any) => void;
+    patch: (props: Partial<ComponentProps<T>>) => void;
+}
+declare function _useOverlay(): {
+    overlays: import("vue").ShallowReactive<Overlay[]>;
+    open: <T extends Component>(id: symbol, props?: ComponentProps<T>) => Promise<any>;
+    close: (id: symbol, value?: any) => void;
+    create: <T extends Component>(component: T, _options?: OverlayOptions<ComponentProps<T>>) => OverlayInstance<T>;
+    patch: <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>) => void;
+    unMount: (id: symbol) => void;
+};
+export declare const useOverlay: typeof _useOverlay;
+export {};

package/dist/runtime/composables/useOverlay.js

@@ -0,0 +1,71 @@
+import { shallowReactive, reactive, markRaw } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+function _useOverlay() {
+  const overlays = shallowReactive([]);
+  const create = (component, _options) => {
+    const { props, defaultOpen, destroyOnClose } = _options || {};
+    const options = reactive({
+      id: Symbol(import.meta.dev ? "useOverlay" : ""),
+      modelValue: !!defaultOpen,
+      component: markRaw(component),
+      isMounted: !!defaultOpen,
+      destroyOnClose: !!destroyOnClose,
+      props: props || {}
+    });
+    overlays.push(options);
+    return {
+      open: (props2) => open(options.id, props2),
+      close: (value) => close(options.id, value),
+      patch: (props2) => patch(options.id, props2)
+    };
+  };
+  const open = (id, props) => {
+    const overlay = getOverlay(id);
+    if (props) {
+      patch(overlay.id, props);
+    }
+    overlay.modelValue = true;
+    overlay.isMounted = true;
+    return new Promise((resolve) => {
+      overlay.resolvePromise = resolve;
+    });
+  };
+  const close = (id, value) => {
+    const overlay = getOverlay(id);
+    overlay.modelValue = false;
+    if (overlay.resolvePromise) {
+      overlay.resolvePromise(value);
+      overlay.resolvePromise = void 0;
+    }
+  };
+  const unMount = (id) => {
+    const overlay = getOverlay(id);
+    overlay.isMounted = false;
+    if (overlay.destroyOnClose) {
+      const index = overlays.findIndex((overlay2) => overlay2.id === id);
+      overlays.splice(index, 1);
+    }
+  };
+  const patch = (id, props) => {
+    const overlay = getOverlay(id);
+    Object.entries(props).forEach(([key, value]) => {
+      overlay.props[key] = value;
+    });
+  };
+  const getOverlay = (id) => {
+    const overlay = overlays.find((overlay2) => overlay2.id === id);
+    if (!overlay) {
+      throw new Error("Overlay not found");
+    }
+    return overlay;
+  };
+  return {
+    overlays,
+    open,
+    close,
+    create,
+    patch,
+    unMount
+  };
+}
+export const useOverlay = createSharedComposable(_useOverlay);

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

@@ -27,6 +27,7 @@ export * from '../components/Select.vue';
 export * from '../components/SelectMenu.vue';
 export * from '../components/Separator.vue';
 export * from '../components/Skeleton.vue';
+export * from '../components/Slideover.vue';
 export * from '../components/Switch.vue';
 export * from '../components/Tabs.vue';
 export * from '../components/Textarea.vue';

package/dist/runtime/types/index.js

@@ -27,6 +27,7 @@ export * from "../components/Select.vue";
 export * from "../components/SelectMenu.vue";
 export * from "../components/Separator.vue";
 export * from "../components/Skeleton.vue";
+export * from "../components/Slideover.vue";
 export * from "../components/Switch.vue";
 export * from "../components/Tabs.vue";
 export * from "../components/Textarea.vue";

package/dist/runtime/vue/composables/useAppConfig.d.ts

@@ -0,0 +1 @@
+export declare const useAppConfig: () => any;

package/dist/runtime/vue/composables/useAppConfig.js

@@ -0,0 +1,2 @@
+import appConfig from "#build/app.config";
+export const useAppConfig = () => appConfig;

package/dist/runtime/vue/stubs.d.ts

@@ -5,6 +5,16 @@ export { useRoute, useRouter } from 'vue-router';
 export { defineShortcuts } from '../composables/defineShortcuts';
 export { useLocale } from '../composables/useLocale';
 export { useConfetti } from '../composables/useConfetti';
+export { useOverlay } from '../composables/useOverlay';
+export declare const useColorMode: () => {
+    forced: boolean;
+    preference?: undefined;
+    readonly value?: undefined;
+} | {
+    preference: "light" | "dark" | "system";
+    readonly value: import("@vueuse/core").BasicColorMode;
+    forced: boolean;
+};
 export declare const useAppConfig: () => any;
 export declare const useCookie: <T = string>(_name: string, _options?: Record<string, any>) => {
     value: Ref<T, T>;

package/dist/runtime/vue/stubs.js

@@ -1,10 +1,32 @@
 import { ref } from "vue";
 import appConfig from "#build/app.config";
+import { useColorMode as useColorModeVueUse } from "@vueuse/core";
 export { useHead } from "@unhead/vue";
 export { useRoute, useRouter } from "vue-router";
 export { defineShortcuts } from "../composables/defineShortcuts.js";
 export { useLocale } from "../composables/useLocale.js";
 export { useConfetti } from "../composables/useConfetti.js";
+export { useOverlay } from "../composables/useOverlay.js";
+export const useColorMode = () => {
+  if (!appConfig.colorMode) {
+    return {
+      forced: true
+    };
+  }
+  const { store, system } = useColorModeVueUse();
+  return {
+    get preference() {
+      return store.value === "auto" ? "system" : store.value;
+    },
+    set preference(value) {
+      store.value = value === "system" ? "auto" : value;
+    },
+    get value() {
+      return store.value === "auto" ? system.value : store.value;
+    },
+    forced: false
+  };
+};
 export const useAppConfig = () => appConfig;
 export const useCookie = (_name, _options = {}) => {
   const value = ref(null);

package/dist/shared/{b24ui-nuxt.ngV6AJEg.cjs → b24ui-nuxt.BpFAFOHo.cjs}

@@ -1510,7 +1510,7 @@ const chip = {
 };
 
 const container = {
-  base: "max-w-[80rem] mx-auto px-4 sm:px-6 lg:px-8"
+  base: "max-w-[80rem] mx-auto px-5"
   // max-w-7xl w-full
 };
 
@@ -4089,6 +4089,124 @@ const skeleton = {
   base: "animate-pulse rounded-md bg-gray-200 dark:bg-gray-800"
 };
 
+const slideover = {
+  slots: {
+    overlay: "fixed inset-0 bg-base-950/20 dark:bg-base-950/30",
+    content: [
+      "fixed",
+      "bg-base-50 dark:bg-base-950",
+      // 'divide-y divide-(--ui-border)',
+      "sm:shadow-lg",
+      "flex flex-col focus:outline-none"
+    ].join(" "),
+    header: [
+      "mt-4 px-5",
+      "flex items-center gap-1.5"
+    ].join(" "),
+    wrapper: "min-h-2xl",
+    body: [
+      "mx-0 mt-2",
+      "flex-1 overflow-y-auto"
+    ].join(" "),
+    footer: "bg-white dark:bg-base-950 flex items-center justify-center gap-3 py-4 border-t border-t-1 border-t-base-900/10 dark:border-t-white/20 shadow-top-md p-2 pr-(--scrollbar-width)",
+    title: "font-b24-system font-light text-4.5xl leading-none text-base-900 dark:text-base-150",
+    description: "mt-2 mb-1 text-base-500 dark:text-base-400 text-sm",
+    close: "absolute"
+  },
+  variants: {
+    side: {
+      top: {
+        content: "inset-x-0 top-0 max-h-full"
+      },
+      right: {
+        content: "right-0 inset-y-0 w-full max-w-[28rem]"
+      },
+      bottom: {
+        content: "inset-x-0 bottom-0 max-h-full"
+      },
+      left: {
+        content: "left-0 inset-y-0 w-full max-w-[28rem]"
+      }
+    },
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"
+      }
+    },
+    scrollbarThin: {
+      true: {
+        body: "scrollbar-thin"
+      }
+    }
+  },
+  compoundVariants: [
+    // region close ////
+    // close: 'absolute ' ////
+    {
+      side: "right",
+      class: {
+        close: [
+          "pl-1.5 pr-2.5",
+          "top-3 -translate-x-full left-0",
+          "rounded-l-full"
+        ].join(" ")
+      }
+    },
+    {
+      side: "left",
+      class: {
+        close: [
+          "pr-1.5 pl-2.5",
+          "top-3 translate-x-full right-0",
+          "rounded-r-full"
+        ].join(" ")
+      }
+    },
+    {
+      side: ["top", "bottom"],
+      class: {
+        close: [
+          "top-4 end-4"
+        ].join(" ")
+      }
+    },
+    // endregion ////
+    // region transition ////
+    {
+      transition: true,
+      side: "top",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]"
+      }
+    },
+    {
+      transition: true,
+      side: "right",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]"
+      }
+    },
+    {
+      transition: true,
+      side: "bottom",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]"
+      }
+    },
+    {
+      transition: true,
+      side: "left",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]"
+      }
+    }
+  ],
+  defaultVariants: {
+    side: "right",
+    scrollbarThin: true
+  }
+};
+
 const _switch = {
   slots: {
     root: "relative flex items-start",
@@ -5068,6 +5186,7 @@ const theme = {
   selectMenu: selectMenu,
   separator: separator,
   skeleton: skeleton,
+  slideover: slideover,
   switch: _switch,
   tabs: tabs,
   textarea: textarea,

package/dist/shared/{b24ui-nuxt.BTln9cW-.mjs → b24ui-nuxt.BqTJ-9uP.mjs}

@@ -1508,7 +1508,7 @@ const chip = {
 };
 
 const container = {
-  base: "max-w-[80rem] mx-auto px-4 sm:px-6 lg:px-8"
+  base: "max-w-[80rem] mx-auto px-5"
   // max-w-7xl w-full
 };
 
@@ -4087,6 +4087,124 @@ const skeleton = {
   base: "animate-pulse rounded-md bg-gray-200 dark:bg-gray-800"
 };
 
+const slideover = {
+  slots: {
+    overlay: "fixed inset-0 bg-base-950/20 dark:bg-base-950/30",
+    content: [
+      "fixed",
+      "bg-base-50 dark:bg-base-950",
+      // 'divide-y divide-(--ui-border)',
+      "sm:shadow-lg",
+      "flex flex-col focus:outline-none"
+    ].join(" "),
+    header: [
+      "mt-4 px-5",
+      "flex items-center gap-1.5"
+    ].join(" "),
+    wrapper: "min-h-2xl",
+    body: [
+      "mx-0 mt-2",
+      "flex-1 overflow-y-auto"
+    ].join(" "),
+    footer: "bg-white dark:bg-base-950 flex items-center justify-center gap-3 py-4 border-t border-t-1 border-t-base-900/10 dark:border-t-white/20 shadow-top-md p-2 pr-(--scrollbar-width)",
+    title: "font-b24-system font-light text-4.5xl leading-none text-base-900 dark:text-base-150",
+    description: "mt-2 mb-1 text-base-500 dark:text-base-400 text-sm",
+    close: "absolute"
+  },
+  variants: {
+    side: {
+      top: {
+        content: "inset-x-0 top-0 max-h-full"
+      },
+      right: {
+        content: "right-0 inset-y-0 w-full max-w-[28rem]"
+      },
+      bottom: {
+        content: "inset-x-0 bottom-0 max-h-full"
+      },
+      left: {
+        content: "left-0 inset-y-0 w-full max-w-[28rem]"
+      }
+    },
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"
+      }
+    },
+    scrollbarThin: {
+      true: {
+        body: "scrollbar-thin"
+      }
+    }
+  },
+  compoundVariants: [
+    // region close ////
+    // close: 'absolute ' ////
+    {
+      side: "right",
+      class: {
+        close: [
+          "pl-1.5 pr-2.5",
+          "top-3 -translate-x-full left-0",
+          "rounded-l-full"
+        ].join(" ")
+      }
+    },
+    {
+      side: "left",
+      class: {
+        close: [
+          "pr-1.5 pl-2.5",
+          "top-3 translate-x-full right-0",
+          "rounded-r-full"
+        ].join(" ")
+      }
+    },
+    {
+      side: ["top", "bottom"],
+      class: {
+        close: [
+          "top-4 end-4"
+        ].join(" ")
+      }
+    },
+    // endregion ////
+    // region transition ////
+    {
+      transition: true,
+      side: "top",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]"
+      }
+    },
+    {
+      transition: true,
+      side: "right",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]"
+      }
+    },
+    {
+      transition: true,
+      side: "bottom",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]"
+      }
+    },
+    {
+      transition: true,
+      side: "left",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]"
+      }
+    }
+  ],
+  defaultVariants: {
+    side: "right",
+    scrollbarThin: true
+  }
+};
+
 const _switch = {
   slots: {
     root: "relative flex items-start",
@@ -5066,6 +5184,7 @@ const theme = {
   selectMenu: selectMenu,
   separator: separator,
   skeleton: skeleton,
+  slideover: slideover,
   switch: _switch,
   tabs: tabs,
   textarea: textarea,

package/dist/unplugin.cjs

@@ -5,7 +5,7 @@ const pathe = require('pathe');
 const unplugin = require('unplugin');
 const defu = require('defu');
 const tailwind = require('@tailwindcss/vite');
-const templates = require('./shared/b24ui-nuxt.ngV6AJEg.cjs');
+const templates = require('./shared/b24ui-nuxt.BpFAFOHo.cjs');
 const tinyglobby = require('tinyglobby');
 const knitwork = require('knitwork');
 const MagicString = require('magic-string');
@@ -194,7 +194,7 @@ function Bitrix24EnvironmentPlugin() {
 function AutoImportPlugin(options, meta) {
   const pluginOptions = defu.defu(options.autoImport, {
     dts: options.dts ?? true,
-    dirs: [pathe.join(runtimeDir, "composables")]
+    dirs: [pathe.join(runtimeDir, "composables"), pathe.join(runtimeDir, "vue/composables")]
   });
   return AutoImport__default.raw(pluginOptions, meta);
 }
@@ -202,7 +202,7 @@ function AutoImportPlugin(options, meta) {
 const runtimeDir = pathe.normalize(node_url.fileURLToPath(new URL("./runtime", (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('unplugin.cjs', document.baseURI).href)))));
 const Bitrix24UIPlugin = unplugin.createUnplugin((_options = {}, meta) => {
   const options = defu.defu(_options, { devtools: { enabled: false } }, templates.defaultOptions);
-  const appConfig = defu.defu({ b24ui: options.b24ui }, { b24ui: templates.getDefaultUiConfig() });
+  const appConfig = defu.defu({ b24ui: options.b24ui, colorMode: options.colorMode }, { b24ui: templates.getDefaultUiConfig() });
   return [
     Bitrix24EnvironmentPlugin(),
     ComponentImportPlugin(options, meta),