@bitrix24/b24ui-nuxt 2.0.8 → 2.0.9

package/dist/shared/{b24ui-nuxt.CEMVb5Ee.mjs → b24ui-nuxt.4XNR9Ysu.mjs}

@@ -1,16 +1,25 @@
 import 'node:url';
+import { pascalCase, kebabCase, camelCase } from 'scule';
+import { genExport } from 'knitwork';
+import { hasNuxtModule, addTypeTemplate, addTemplate, updateTemplates, logger } from '@nuxt/kit';
 import { readFile } from 'node:fs/promises';
 import { join } from 'pathe';
 import { globSync } from 'tinyglobby';
-import { kebabCase, camelCase, pascalCase } from 'scule';
-import { genExport } from 'knitwork';
-import { hasNuxtModule, addTypeTemplate, addTemplate, updateTemplates, logger } from '@nuxt/kit';
 import { defuFn } from 'defu';
 
 const name = "@bitrix24/b24ui-nuxt";
-const version = "2.0.8";
+const version = "2.0.9";
 
-const getDefaultUiConfig = () => ({});
+function getDefaultConfig(theme) {
+  return {
+    prefix: theme?.prefix,
+    tv: {
+      twMergeConfig: {
+        prefix: theme?.prefix
+      }
+    }
+  };
+}
 const defaultOptions = {
   colorMode: true,
   colorModeTypeLight: "light",
@@ -19,6 +28,120 @@ const defaultOptions = {
   content: false
 };
 
+function prefixClasses(classString, prefix) {
+  if (!prefix || !classString) {
+    return classString;
+  }
+  return classString.split(" ").filter(Boolean).map((cls) => `${prefix}:${cls}`).join(" ");
+}
+function isSizeValue(value) {
+  return /^(?:[2-9]x[sl]|base|xs|sm|md|lg|1[01]xl|4\.5xl|xl)$/.test(value.trim());
+}
+function applyPrefixToObject(obj, prefix, context = []) {
+  if (!obj || !prefix) {
+    return obj;
+  }
+  const currentKey = context[context.length - 1];
+  const compoundVariantsIndex = context.indexOf("compoundVariants");
+  const isInCompoundVariant = compoundVariantsIndex !== -1 && !context.slice(compoundVariantsIndex).includes("class");
+  const isInDefaultVariants = context.includes("defaultVariants");
+  const isComponentSizeValue = typeof obj === "string" && typeof currentKey === "string" && currentKey.endsWith("Size") && isSizeValue(obj);
+  if (typeof obj === "string" && (isInCompoundVariant || isInDefaultVariants || isComponentSizeValue)) {
+    return obj;
+  }
+  if (typeof obj === "string") {
+    return prefixClasses(obj, prefix);
+  }
+  if (Array.isArray(obj)) {
+    return obj.map((item, index) => applyPrefixToObject(item, prefix, [...context, String(index)]));
+  }
+  if (typeof obj === "object") {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = applyPrefixToObject(value, prefix, [...context, key]);
+    }
+    return result;
+  }
+  return obj;
+}
+
+async function buildComponentDependencyGraph(componentDir, componentPattern) {
+  const dependencyGraph = /* @__PURE__ */ new Map();
+  const componentFiles = globSync(["**/*.vue"], {
+    cwd: componentDir,
+    absolute: true
+  });
+  for (const componentFile of componentFiles) {
+    try {
+      const content = await readFile(componentFile, "utf-8");
+      const componentName = pascalCase(componentFile.split("/").pop().replace(".vue", ""));
+      const dependencies = /* @__PURE__ */ new Set();
+      const matches = content.matchAll(componentPattern);
+      for (const match of matches) {
+        const depName = match[1] || match[2];
+        if (depName && depName !== componentName) {
+          dependencies.add(depName);
+        }
+      }
+      dependencyGraph.set(componentName, dependencies);
+    } catch {
+    }
+  }
+  return dependencyGraph;
+}
+function resolveComponentDependencies(component, dependencyGraph, resolved = /* @__PURE__ */ new Set()) {
+  if (resolved.has(component)) {
+    return resolved;
+  }
+  resolved.add(component);
+  const dependencies = dependencyGraph.get(component);
+  if (dependencies) {
+    for (const dep of dependencies) {
+      resolveComponentDependencies(dep, dependencyGraph, resolved);
+    }
+  }
+  return resolved;
+}
+async function detectUsedComponents(rootDir, prefix, componentDir, includeComponents) {
+  const detectedComponents = /* @__PURE__ */ new Set();
+  if (includeComponents && includeComponents.length > 0) {
+    for (const component of includeComponents) {
+      detectedComponents.add(component);
+    }
+  }
+  const appFiles = globSync(["**/*.{vue,ts,js,tsx,jsx}"], {
+    cwd: rootDir,
+    ignore: ["node_modules/**", ".nuxt/**", "dist/**"]
+  });
+  const componentPattern = new RegExp(`<(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)|\\b(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)\\b`, "g");
+  for (const file of appFiles) {
+    try {
+      const filePath = join(rootDir, file);
+      const content = await readFile(filePath, "utf-8");
+      const matches = content.matchAll(componentPattern);
+      for (const match of matches) {
+        const componentName = match[1] || match[2];
+        if (componentName) {
+          detectedComponents.add(componentName);
+        }
+      }
+    } catch {
+    }
+  }
+  if (detectedComponents.size === 0) {
+    return void 0;
+  }
+  const dependencyGraph = await buildComponentDependencyGraph(componentDir, componentPattern);
+  const allComponents = /* @__PURE__ */ new Set();
+  for (const component of detectedComponents) {
+    const resolved = resolveComponentDependencies(component, dependencyGraph);
+    for (const resolvedComponent of resolved) {
+      allComponents.add(resolvedComponent);
+    }
+  }
+  return allComponents;
+}
+
 const accordion$1 = {
   slots: {
     root: "w-full",
@@ -4711,20 +4834,23 @@ const link = (options) => ({
 
 const modal = {
   slots: {
-    overlay: "fixed inset-0 bg-[#003366]/20",
+    overlay: "fixed inset-0",
     content: [
       "light",
       "bg-(--popup-window-background-color)",
-      "fixed",
       "flex flex-col gap-[20px]",
       "focus:outline-none",
       "p-[24px] pt-[20px]"
     ].join(" "),
-    contentWrapper: [
-      "flex flex-col gap-[15px] pt-[4px]"
-    ].join(" "),
+    contentWrapper: "flex flex-col gap-[15px] pt-[4px]",
     header: "flex items-start justify-between gap-[6px]",
     wrapper: "",
+    body: "flex-1 text-(length:--ui-font-size-md) leading-normal",
+    footer: [
+      "flex items-center justify-between gap-[10px]",
+      "border-t border-t-1 border-t-(--ui-color-divider-default)",
+      "pt-[18px]"
+    ].join(" "),
     title: [
       "font-[family-name:var(--ui-font-family-primary)]",
       "text-(--b24ui-typography-label-color)",
@@ -4737,13 +4863,7 @@ const modal = {
       "text-(--b24ui-typography-description-color)",
       "text-(length:--ui-font-size-sm)"
     ].join(" "),
-    close: "-mt-[4px]",
-    body: "flex-1 overflow-y-auto text-(length:--ui-font-size-md) leading-normal",
-    footer: [
-      "flex items-center justify-between gap-[10px]",
-      "border-t border-t-1 border-t-(--ui-color-divider-default)",
-      "pt-[18px]"
-    ].join(" ")
+    close: "-mt-[4px]"
   },
   variants: {
     overlayBlur: {
@@ -4763,13 +4883,30 @@ const modal = {
       },
       false: {
         content: [
-          "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-          "w-[calc(100vw-2rem)] max-w-[32rem] max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]",
+          // // 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+          "w-[calc(100vw-2rem)] max-w-[32rem]",
+          // // 'max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]',
           "rounded-[calc(var(--popup-window-border-radius)-2px)] shadow-lg"
           // @memo see components/popup.css
           // 'ring ring-(--popup-window-border)'
         ].join(" "),
-        contentWrapper: "overflow-hidden"
+        contentWrapper: ""
+        // //  overflow-hidden
+      }
+    },
+    overlay: {
+      true: {
+        overlay: "bg-[#003366]/20"
+      }
+    },
+    scrollable: {
+      true: {
+        overlay: "overflow-y-auto",
+        content: "relative"
+      },
+      false: {
+        content: "fixed",
+        body: "overflow-y-auto"
       }
     },
     scrollbarThin: {
@@ -4778,6 +4915,27 @@ const modal = {
       }
     }
   },
+  compoundVariants: [
+    {
+      scrollable: true,
+      fullscreen: false,
+      class: {
+        overlay: "grid place-items-center p-4 sm:py-8"
+      }
+    },
+    {
+      scrollable: false,
+      fullscreen: false,
+      class: {
+        content: [
+          "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+          "max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]"
+          // //  overflow-hidden
+        ].join(" "),
+        contentWrapper: "overflow-hidden"
+      }
+    }
+  ],
   defaultVariants: {
     scrollbarThin: true,
     overlayBlur: "auto"
@@ -9983,82 +10141,6 @@ const themeContent = {
   contentToc: contentToc
 };
 
-async function buildComponentDependencyGraph(componentDir, componentPattern) {
-  const dependencyGraph = /* @__PURE__ */ new Map();
-  const componentFiles = globSync(["**/*.vue"], {
-    cwd: componentDir,
-    absolute: true
-  });
-  for (const componentFile of componentFiles) {
-    try {
-      const content = await readFile(componentFile, "utf-8");
-      const componentName = pascalCase(componentFile.split("/").pop().replace(".vue", ""));
-      const dependencies = /* @__PURE__ */ new Set();
-      const matches = content.matchAll(componentPattern);
-      for (const match of matches) {
-        const depName = match[1] || match[2];
-        if (depName && depName !== componentName) {
-          dependencies.add(depName);
-        }
-      }
-      dependencyGraph.set(componentName, dependencies);
-    } catch {
-    }
-  }
-  return dependencyGraph;
-}
-function resolveComponentDependencies(component, dependencyGraph, resolved = /* @__PURE__ */ new Set()) {
-  if (resolved.has(component)) {
-    return resolved;
-  }
-  resolved.add(component);
-  const dependencies = dependencyGraph.get(component);
-  if (dependencies) {
-    for (const dep of dependencies) {
-      resolveComponentDependencies(dep, dependencyGraph, resolved);
-    }
-  }
-  return resolved;
-}
-async function detectUsedComponents(rootDir, prefix, componentDir, includeComponents) {
-  const detectedComponents = /* @__PURE__ */ new Set();
-  if (includeComponents && includeComponents.length > 0) {
-    for (const component of includeComponents) {
-      detectedComponents.add(component);
-    }
-  }
-  const appFiles = globSync(["**/*.{vue,ts,js,tsx,jsx}"], {
-    cwd: rootDir,
-    ignore: ["node_modules/**", ".nuxt/**", "dist/**"]
-  });
-  const componentPattern = new RegExp(`<(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)|\\b(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)\\b`, "g");
-  for (const file of appFiles) {
-    try {
-      const filePath = join(rootDir, file);
-      const content = await readFile(filePath, "utf-8");
-      const matches = content.matchAll(componentPattern);
-      for (const match of matches) {
-        const componentName = match[1] || match[2];
-        if (componentName) {
-          detectedComponents.add(componentName);
-        }
-      }
-    } catch {
-    }
-  }
-  if (detectedComponents.size === 0) {
-    return void 0;
-  }
-  const dependencyGraph = await buildComponentDependencyGraph(componentDir, componentPattern);
-  const allComponents = /* @__PURE__ */ new Set();
-  for (const component of detectedComponents) {
-    const resolved = resolveComponentDependencies(component, dependencyGraph);
-    for (const resolvedComponent of resolved) {
-      allComponents.add(resolvedComponent);
-    }
-  }
-  return allComponents;
-}
 function getTemplates(options, uiConfig, nuxt, resolve) {
   const templates = [];
   let hasProse = false;
@@ -10071,7 +10153,8 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
         write: true,
         getContents: async () => {
           const template = theme2[component];
-          const result = typeof template === "function" ? template(options) : template;
+          let result = typeof template === "function" ? template(options) : template;
+          result = applyPrefixToObject(result, options.theme?.prefix);
           const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
             const keys = Object.keys(values);
             return keys.some((key) => key !== "true" && key !== "false");
@@ -10098,7 +10181,24 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
       });
     }
   }
-  async function getSources() {
+  const forNuxt = !!nuxt && (hasNuxtModule("@nuxtjs/mdc") || options.mdc || (hasNuxtModule("@nuxt/content") || options.content));
+  const forVue = !nuxt && options.mdc;
+  if (forNuxt || forVue) {
+    hasProse = true;
+    const path = "prose";
+    writeThemeTemplate(themeProse, path);
+    templates.push({
+      filename: `b24ui/${path}/index.ts`,
+      write: true,
+      getContents: () => Object.keys(themeProse).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
+    });
+  }
+  if (!!nuxt && (hasNuxtModule("@nuxt/content") || options.content)) {
+    hasContent = true;
+    writeThemeTemplate(themeContent, "content");
+  }
+  writeThemeTemplate(theme);
+  async function generateSources() {
     let sources = "";
     if (!!nuxt && !!resolve && options.experimental?.componentDetection) {
       const detectedComponents = await detectUsedComponents(
@@ -10142,30 +10242,26 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
     }
     return sources || '@source "./b24ui";';
   }
-  const forNuxt = !!nuxt && (hasNuxtModule("@nuxtjs/mdc") || options.mdc || (hasNuxtModule("@nuxt/content") || options.content));
-  const forVue = !nuxt && options.mdc;
-  if (forNuxt || forVue) {
-    hasProse = true;
-    const path = "prose";
-    writeThemeTemplate(themeProse, path);
-    templates.push({
-      filename: `b24ui/${path}/index.ts`,
-      write: true,
-      getContents: () => Object.keys(themeProse).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
-    });
-  }
-  if (!!nuxt && (hasNuxtModule("@nuxt/content") || options.content)) {
-    hasContent = true;
-    writeThemeTemplate(themeContent, "content");
-  }
-  writeThemeTemplate(theme);
   templates.push({
     filename: "b24ui.css",
     write: true,
     getContents: async () => {
-      const sources = await getSources();
+      const sources = await generateSources();
+      const prefix = options.theme?.prefix ? `${options.theme.prefix}:` : "";
       return `${sources}
 
+@layer base {
+  body {
+    scrollbar-gutter: stable;
+    background: var(--air-theme-background);
+    @apply ${prefix}antialiased ${prefix}font-(family-name:--ui-font-family-system) ${prefix}text-(--b24ui-typography-legend-color) ${prefix}scheme-light ${prefix}dark:scheme-dark ${prefix}edge-light:scheme-light ${prefix}edge-dark:scheme-light;
+  }
+
+  .sidebar-layout.--inner {
+    background: var(--air-theme-background);
+  }
+}
+
 @theme static {}
 
 @theme default inline {}
@@ -10175,17 +10271,11 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
   templates.push({
     filename: "b24ui/index.ts",
     write: true,
-    getContents: () => {
-      let contents = Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n");
-      if (hasContent) {
-        contents += "\n";
-        contents += Object.keys(themeContent).map((component) => `export { default as ${component} } from './content/${kebabCase(component)}'`).join("\n");
-      }
-      if (hasProse) contents += `
-export * as prose from './prose'
-`;
-      return contents;
-    }
+    getContents: () => [
+      ...Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`),
+      ...hasContent ? Object.keys(themeContent).map((component) => `export { default as ${component} } from './content/${kebabCase(component)}'`) : [],
+      ...hasProse ? [`export * as prose from './prose'`] : []
+    ].join("\n")
   });
   templates.push({
     filename: "types/b24ui.d.ts",
@@ -10195,6 +10285,7 @@ import type { TVConfig } from '@bitrix24/b24ui-nuxt'
 import type { defaultConfig } from 'tailwind-variants'
 
 type AppConfigUI = {
+  prefix?: string
   tv?: typeof defaultConfig
 } & TVConfig<typeof b24ui>
 
@@ -10243,4 +10334,4 @@ function addTemplates(options, nuxt, resolve) {
   }
 }
 
-export { getDefaultUiConfig as a, addTemplates as b, defaultOptions as d, getTemplates as g, name as n, version as v };
+export { getDefaultConfig as a, addTemplates as b, defaultOptions as d, getTemplates as g, name as n, version as v };

package/dist/unplugin.d.mts

@@ -7,7 +7,9 @@ import { TVConfig } from '../dist/runtime/types/tv.js';
 import { ColorModeTypeLight } from '../dist/runtime/types/index.js';
 import '@nuxt/schema';
 
-type AppConfigB24UI = {} & TVConfig<typeof b24ui>;
+type AppConfigB24UI = {
+    prefix?: string;
+} & TVConfig<typeof b24ui>;
 interface Bitrix24UIOptions extends Omit<ModuleOptions, 'colorMode'> {
     /** Whether to generate declaration files for auto-imported components. */
     dts?: boolean;

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 getDefaultUiConfig } from './shared/b24ui-nuxt.CEMVb5Ee.mjs';
+import { g as getTemplates, d as defaultOptions, a as getDefaultConfig } from './shared/b24ui-nuxt.4XNR9Ysu.mjs';
 import fs from 'node:fs';
 import path from 'node:path';
 import MagicString from 'magic-string';
@@ -12,9 +12,9 @@ import { resolvePathSync } from 'mlly';
 import { globSync } from 'tinyglobby';
 import AutoImportComponents from 'unplugin-vue-components';
 import AutoImport from 'unplugin-auto-import';
-import 'node:fs/promises';
 import 'scule';
 import '@nuxt/kit';
+import 'node:fs/promises';
 
 function TemplatePlugin(options, appConfig) {
   const templates = getTemplates(options, appConfig.b24ui);
@@ -280,6 +280,7 @@ function AutoImportPlugin(options, meta) {
 const runtimeDir = normalize(fileURLToPath(new URL("./runtime", import.meta.url)));
 const Bitrix24UIPlugin = createUnplugin((_options = {}, meta) => {
   const options = defu(_options, {}, defaultOptions);
+  options.theme = options.theme || {};
   const appConfig = defu(
     {
       b24ui: options.b24ui,
@@ -288,7 +289,7 @@ const Bitrix24UIPlugin = createUnplugin((_options = {}, meta) => {
       colorModeTypeLight: options.colorModeTypeLight
     },
     {
-      b24ui: getDefaultUiConfig()
+      b24ui: getDefaultConfig(options.theme)
     }
   );
   return [

package/dist/vite.mjs

@@ -4,12 +4,12 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/b24ui-nuxt.CEMVb5Ee.mjs';
-import 'node:fs/promises';
-import 'tinyglobby';
+import './shared/b24ui-nuxt.4XNR9Ysu.mjs';
 import 'scule';
 import 'knitwork';
 import '@nuxt/kit';
+import 'node:fs/promises';
+import 'tinyglobby';
 import 'node:fs';
 import 'node:path';
 import 'magic-string';

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.0.8",
+  "version": "2.0.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bitrix24/b24ui.git"
@@ -94,7 +94,7 @@
     "vue-plugin.d.ts"
   ],
   "dependencies": {
-    "@bitrix24/b24icons-vue": "^2.0.4",
+    "@bitrix24/b24icons-vue": "^2.0.5",
     "@internationalized/date": "^3.10.0",
     "@internationalized/number": "^3.6.5",
     "@nuxt/kit": "^4.2.0",
@@ -136,7 +136,7 @@
     "unplugin-auto-import": "^20.2.0",
     "unplugin-vue-components": "^30.0.0",
     "vaul-vue": "0.4.1",
-    "vue-component-type-helpers": "^3.1.2"
+    "vue-component-type-helpers": "^3.1.3"
   },
   "devDependencies": {
     "@nuxt/content": "^3.7.1",
@@ -157,7 +157,7 @@
     "vitest": "^3.2.4",
     "vitest-axe": "^0.1.0",
     "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^3.1.2"
+    "vue-tsc": "^3.1.3"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.7",