@bitrix24/b24ui-nuxt 0.5.2 → 0.5.3

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.CKEqlXJP.cjs');
+const templates = require('./shared/b24ui-nuxt.Bh_5o1_9.cjs');
 require('node:url');
 require('scule');
 

package/dist/module.d.cts

@@ -11,4 +11,5 @@ interface ModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.d.mts

@@ -11,4 +11,5 @@ interface ModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.d.ts

@@ -11,4 +11,5 @@ interface ModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.DQ3Ix7rC.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.BIuy4yic.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/NavigationMenu.vue

@@ -43,6 +43,10 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   slot?: string
   value?: string
   children?: NavigationMenuChildItem[]
+  /**
+   * With orientation=`horizontal` if `true` it will position the dropdown menu correctly
+   */
+  viewportRtl?: boolean
   onSelect?(e: Event): void
 }
 
@@ -272,7 +276,12 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
           </B24LinkBase>
         </component>
 
-        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="b24ui.content({ class: props.b24ui?.content })">
+        <NavigationMenuContent
+          v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])"
+          v-bind="contentProps"
+          :data-viewport="item.viewportRtl ? 'rtl' : 'ltr'"
+          :class="b24ui.content({ class: props.b24ui?.content })"
+        >
           <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="(item as T)" :active="active" :index="index">
             <ul :class="b24ui.childList({ class: props.b24ui?.childList })">
               <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="b24ui.childItem({ class: props.b24ui?.childItem })">
@@ -331,7 +340,13 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
   >
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
       <NavigationMenuList :class="b24ui.list({ class: props.b24ui?.list })">
-        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="b24ui.item({ class: props.b24ui?.item })" />
+        <ReuseItemTemplate
+          v-for="(item, index) in list"
+          :key="`list-${listIndex}-${index}`"
+          :item="item"
+          :index="index"
+          :class="b24ui.item({ class: props.b24ui?.item })"
+        />
       </NavigationMenuList>
 
       <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="b24ui.separator({ class: props.b24ui?.separator })" />

package/dist/runtime/composables/defineLocale.js

@@ -1,5 +1,4 @@
 import { defu } from "defu";
-// @__NO_SIDE_EFFECTS__
 export function defineLocale(options) {
   return defu(options, { dir: "ltr" });
 }

package/dist/runtime/composables/defineShortcuts.js

@@ -21,7 +21,6 @@ export function extractShortcuts(items) {
   traverse(items.flat());
   return shortcuts;
 }
-// @__NO_SIDE_EFFECTS__
 export function defineShortcuts(config, options = {}) {
   const chainedInputs = ref([]);
   const clearChainedInput = () => {

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

@@ -22,6 +22,6 @@ export interface UseComponentIconsProps {
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
     isLeading: import("vue").ComputedRef<any>;
     isTrailing: import("vue").ComputedRef<boolean>;
-    leadingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
-    trailingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
+    leadingIconName: import("vue").ComputedRef<IconComponent | undefined>;
+    trailingIconName: import("vue").ComputedRef<IconComponent | undefined>;
 };

package/dist/runtime/utils/link.d.ts

@@ -6,24 +6,24 @@ export declare function pickLinkProps(link: LinkProps & {
     replace: any;
     type: any;
     title: any;
+    href: any;
+    target: any;
+    as: any;
+    prefetch: any;
+    rel: any;
+    external: any;
+    exact: any;
     active: any;
+    disabled: any;
     activeClass: any;
     ariaCurrentValue: any;
     ariaLabel: any;
-    as: any;
-    disabled: any;
-    exact: any;
     exactActiveClass: any;
     exactHash: any;
     exactQuery: any;
-    external: any;
-    href: any;
     inactiveClass: any;
     noPrefetch: any;
     noRel: any;
-    prefetch: any;
     prefetchedClass: any;
-    rel: any;
-    target: any;
     to: any;
 };

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

@@ -12,7 +12,7 @@ export declare const useColorMode: () => {
     preference?: undefined;
     readonly value?: undefined;
 } | {
-    preference: "light" | "dark" | "system";
+    preference: "dark" | "light" | "system";
     readonly value: import("@vueuse/core").BasicColorMode;
     forced: boolean;
 };

package/dist/shared/{b24ui-nuxt.DQ3Ix7rC.mjs → b24ui-nuxt.BIuy4yic.mjs}

@@ -3566,7 +3566,6 @@ const navigationMenu = {
       "w-full",
       "bg-white dark:bg-base-dark",
       "shadow-[0_15px_21px_rgba(83,92,105,.15)]",
-      //
       "h-(--reka-navigation-menu-viewport-height)",
       "transition-[width,height] duration-200 origin-[top_center]"
       // left
@@ -3653,8 +3652,8 @@ const navigationMenu = {
     orientation: {
       horizontal: {
         root: "items-center justify-between",
-        list: "flex items-center",
-        item: "py-2",
+        list: "flex items-center gap-x-1",
+        item: "py-2 empty:hidden",
         link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
         childList: "grid p-2"
       },
@@ -3677,7 +3676,10 @@ const navigationMenu = {
         ].join(" ")
       },
       vertical: {
-        viewport: "sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)",
+        viewport: [
+          "w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)",
+          "[&:has(>[data-viewport=rtl])]:left-auto [&:has(>[data-viewport=rtl])]:-right-[calc(100%-var(--reka-navigation-menu-viewport-width))]"
+        ].join(" "),
         content: "",
         childLinkLabel: [
           "text-md",
@@ -3764,6 +3766,16 @@ const navigationMenu = {
     },
     // endregion ////
     // region pill ////
+    {
+      disabled: true,
+      orientation: "horizontal",
+      variant: "pill",
+      class: {
+        link: [
+          "hover:before:rounded-md"
+        ].join(" ")
+      }
+    },
     {
       disabled: false,
       active: false,
@@ -3826,6 +3838,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "default",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-base-800 dark:before:bg-white/35",
+          "hover:before:bg-base-800 hover:dark:before:bg-white/35",
+          "data-[state=open]:before:bg-base-800 dark:data-[state=open]:before:bg-white/35"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "danger",
       variant: "pill",
@@ -3845,6 +3877,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "danger",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-red-800 dark:before:bg-red-800",
+          "hover:before:bg-red-800 hover:dark:before:bg-red-800",
+          "data-[state=open]:before:bg-red-800 dark:data-[state=open]:before:bg-red-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "success",
       variant: "pill",
@@ -3864,6 +3916,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "success",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-green-800 dark:before:bg-green-800",
+          "hover:before:bg-green-800 hover:dark:before:bg-green-800",
+          "data-[state=open]:before:bg-green-800 dark:data-[state=open]:before:bg-green-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "warning",
       variant: "pill",
@@ -3883,6 +3955,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "warning",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-orange-800 dark:before:bg-orange-800",
+          "hover:before:bg-orange-800 hover:dark:before:bg-orange-800",
+          "data-[state=open]:before:bg-orange-800 dark:data-[state=open]:before:bg-orange-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "primary",
       variant: "pill",
@@ -3902,6 +3994,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "primary",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-blue-800 dark:before:bg-blue-800",
+          "hover:before:bg-blue-800 hover:dark:before:bg-blue-800",
+          "data-[state=open]:before:bg-blue-800 dark:data-[state=open]:before:bg-blue-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "secondary",
       variant: "pill",
@@ -3921,6 +4033,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "secondary",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-cyan-800 dark:before:bg-cyan-800",
+          "hover:before:bg-cyan-800 hover:dark:before:bg-cyan-800",
+          "data-[state=open]:before:bg-cyan-800 dark:data-[state=open]:before:bg-cyan-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "collab",
       variant: "pill",
@@ -3940,6 +4072,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "collab",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-collab-800 dark:before:bg-collab-800",
+          "hover:before:bg-collab-800 hover:dark:before:bg-collab-800",
+          "data-[state=open]:before:bg-collab-800 dark:data-[state=open]:before:bg-collab-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       color: "ai",
       variant: "pill",
@@ -3959,6 +4111,26 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      color: "ai",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      class: {
+        link: [
+          "min-h-9",
+          "before:rounded-md",
+          "before:bg-ai-800 dark:before:bg-ai-800",
+          "hover:before:bg-ai-800 hover:dark:before:bg-ai-800",
+          "data-[state=open]:before:bg-ai-800 dark:data-[state=open]:before:bg-ai-800"
+        ].join(" "),
+        linkLabelWrapper: [
+          "min-h-9",
+          "bg-inherit dark:bg-inherit",
+          "rounded-none"
+        ].join(" ")
+      }
+    },
     {
       variant: "pill",
       active: true,
@@ -3980,6 +4152,17 @@ const navigationMenu = {
         ].join(" ")
       }
     },
+    {
+      variant: "pill",
+      orientation: "horizontal",
+      active: true,
+      highlight: false,
+      class: {
+        linkLabelWrapper: [
+          "bg-inherit dark:bg-inherit"
+        ].join(" ")
+      }
+    },
     {
       variant: "pill",
       active: true,
@@ -3988,7 +4171,111 @@ const navigationMenu = {
         link: [
           "hover:before:bg-base-250/80 dark:hover:before:bg-white/10",
           "before:transition-colors"
-        ]
+        ].join(" ")
+      }
+    },
+    {
+      color: "default",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-base-800 hover:dark:before:bg-white/35",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "danger",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-red-800 hover:dark:before:bg-red-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "success",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-green-800 hover:dark:before:bg-green-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "warning",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-orange-800 hover:dark:before:bg-orange-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "primary",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-blue-800 hover:dark:before:bg-blue-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "secondary",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-cyan-800 hover:dark:before:bg-cyan-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "collab",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-collab-800 hover:dark:before:bg-collab-800",
+          "before:transition-colors"
+        ].join(" ")
+      }
+    },
+    {
+      color: "ai",
+      orientation: "horizontal",
+      variant: "pill",
+      active: true,
+      highlight: true,
+      class: {
+        link: [
+          "hover:before:bg-ai-800 hover:dark:before:bg-ai-800",
+          "before:transition-colors"
+        ].join(" ")
       }
     },
     // endregion ////
@@ -4001,11 +4288,12 @@ const navigationMenu = {
           "top-[calc(100%+0.4rem)]"
         ].join(" "),
         viewport: [
-          "rounded-b-md rounded-tr-md",
+          "rounded-b-md",
+          "[&:has(>[data-viewport=ltr])]:rounded-tr-md [&:has(>[data-viewport=rtl])]:rounded-tl-md",
           "clip-path-viewport-wrapper"
         ].join(" "),
         link: [
-          "before:-inset-x-px before:-inset-y-[6px] before:h-[70px]",
+          "before:inset-x-[0px] before:-inset-y-[6px] before:h-[70px]",
           "before:rounded-t-md"
         ].join(" ")
       }