@bitrix24/b24ui-nuxt 0.3.2 → 0.3.4

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),

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.BTln9cW-.mjs';
+import { g as getTemplates, d as defaultOptions, a as getDefaultUiConfig } from './shared/b24ui-nuxt.BqTJ-9uP.mjs';
 import { globSync } from 'tinyglobby';
 import { genSafeVariableName } from 'knitwork';
 import MagicString from 'magic-string';
@@ -184,7 +184,7 @@ function Bitrix24EnvironmentPlugin() {
 function AutoImportPlugin(options, meta) {
   const pluginOptions = defu(options.autoImport, {
     dts: options.dts ?? true,
-    dirs: [join(runtimeDir, "composables")]
+    dirs: [join(runtimeDir, "composables"), join(runtimeDir, "vue/composables")]
   });
   return AutoImport.raw(pluginOptions, meta);
 }
@@ -192,7 +192,7 @@ function AutoImportPlugin(options, meta) {
 const runtimeDir = normalize(fileURLToPath(new URL("./runtime", import.meta.url)));
 const Bitrix24UIPlugin = createUnplugin((_options = {}, meta) => {
   const options = defu(_options, { devtools: { enabled: false } }, defaultOptions);
-  const appConfig = defu({ b24ui: options.b24ui }, { b24ui: getDefaultUiConfig() });
+  const appConfig = defu({ b24ui: options.b24ui, colorMode: options.colorMode }, { b24ui: getDefaultUiConfig() });
   return [
     Bitrix24EnvironmentPlugin(),
     ComponentImportPlugin(options, meta),

package/dist/vite.cjs

@@ -6,7 +6,7 @@ require('pathe');
 require('unplugin');
 require('defu');
 require('@tailwindcss/vite');
-require('./shared/b24ui-nuxt.ngV6AJEg.cjs');
+require('./shared/b24ui-nuxt.BpFAFOHo.cjs');
 require('scule');
 require('@nuxt/kit');
 require('tinyglobby');

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/b24ui-nuxt.BTln9cW-.mjs';
+import './shared/b24ui-nuxt.BqTJ-9uP.mjs';
 import 'scule';
 import '@nuxt/kit';
 import 'tinyglobby';

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": "0.3.2",
+  "version": "0.3.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bitrix24/b24ui.git"
@@ -71,8 +71,8 @@
     "@nuxt/kit": "^3.15.4",
     "@nuxt/schema": "^3.15.4",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@tailwindcss/postcss": "^4.0.8",
-    "@tailwindcss/vite": "^4.0.8",
+    "@tailwindcss/postcss": "^4.0.9",
+    "@tailwindcss/vite": "^4.0.9",
     "@tanstack/vue-table": "^8.21.2",
     "@unhead/vue": "^1.11.19",
     "@vueuse/core": "^12.7.0",
@@ -98,8 +98,8 @@
     "scule": "^1.3.0",
     "sirv": "^3.0.1",
     "tailwind-variants": "^0.3.1",
-    "tailwindcss": "^4.0.8",
-    "tinyglobby": "^0.2.11",
+    "tailwindcss": "^4.0.9",
+    "tinyglobby": "^0.2.12",
     "unplugin": "^2.2.0",
     "unplugin-auto-import": "^19.1.0",
     "unplugin-vue-components": "^28.4.0",
@@ -113,8 +113,8 @@
     "@standard-schema/spec": "^1.0.0",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.5.2",
-    "eslint": "^9.20.1",
-    "happy-dom": "^17.1.1",
+    "eslint": "^9.21.0",
+    "happy-dom": "^17.1.2",
     "joi": "^17.13.3",
     "knitwork": "^1.2.0",
     "nuxt": "^3.15.4",
@@ -122,7 +122,7 @@
     "superstruct": "^2.0.2",
     "valibot": "^0.42.1",
     "vitepress": "^1.5.0",
-    "vitest": "^3.0.6",
+    "vitest": "^3.0.7",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.2.0",
     "yup": "^1.6.1",
@@ -135,6 +135,7 @@
     "@bitrix24/b24ui-nuxt": "workspace:*",
     "chokidar": "3.6.0",
     "debug": "4.3.7",
+    "happy-dom": "17.1.2",
     "rollup": "4.32.1",
     "typescript": "5.6.3",
     "unimport": "3.14.5",

package/dist/runtime/components/ModalProvider.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-import { useModal, modalInjectionKey } from '../composables/useModal'
-
-const modalState = inject(modalInjectionKey)
-
-const { isOpen } = useModal()
-</script>
-
-<template>
-  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model:open="isOpen" />
-</template>

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

@@ -1,17 +0,0 @@
-import type { ShallowRef, Component, InjectionKey } from 'vue';
-import type { ComponentProps } from 'vue-component-type-helpers';
-import type { ModalProps } from '../types';
-export interface ModalState {
-    component: Component | string;
-    props: ModalProps;
-}
-export declare const modalInjectionKey: InjectionKey<ShallowRef<ModalState>>;
-declare function _useModal(): {
-    open: <T extends Component>(component: T, props?: ModalProps & ComponentProps<T>) => void;
-    close: () => Promise<void>;
-    reset: () => void;
-    patch: <T extends Component = Record<string, never>>(props: Partial<ModalProps & ComponentProps<T>>) => void;
-    isOpen: import("vue").Ref<boolean, boolean>;
-};
-export declare const useModal: typeof _useModal;
-export {};

package/dist/runtime/composables/useModal.js

@@ -1,46 +0,0 @@
-import { ref, inject } from "vue";
-import { createSharedComposable } from "@vueuse/core";
-export const modalInjectionKey = Symbol("bitrix24-ui.modal");
-function _useModal() {
-  const modalState = inject(modalInjectionKey);
-  const isOpen = ref(false);
-  function open(component, props) {
-    if (!modalState) {
-      throw new Error("useModal() is called without provider");
-    }
-    modalState.value = {
-      component,
-      props: props ?? {}
-    };
-    isOpen.value = true;
-  }
-  async function close() {
-    if (!modalState) return;
-    isOpen.value = false;
-  }
-  function reset() {
-    if (!modalState) return;
-    modalState.value = {
-      component: "div",
-      props: {}
-    };
-  }
-  function patch(props) {
-    if (!modalState) return;
-    modalState.value = {
-      ...modalState.value,
-      props: {
-        ...modalState.value.props,
-        ...props
-      }
-    };
-  }
-  return {
-    open,
-    close,
-    reset,
-    patch,
-    isOpen
-  };
-}
-export const useModal = createSharedComposable(_useModal);

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

@@ -1,2 +0,0 @@
-declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugins/modal.js

@@ -1,10 +0,0 @@
-import { shallowRef } from "vue";
-import { defineNuxtPlugin } from "#imports";
-import { modalInjectionKey } from "../composables/useModal.js";
-export default defineNuxtPlugin((nuxtApp) => {
-  const modalState = shallowRef({
-    component: "div",
-    props: {}
-  });
-  nuxtApp.vueApp.provide(modalInjectionKey, modalState);
-});