@bitrix24/b24ui-nuxt 2.1.4 → 2.1.5

package/dist/runtime/components/NavigationMenu.vue

@@ -21,6 +21,9 @@ import B24Tooltip from "./Tooltip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
+  type: { type: null, required: false, default: "multiple" },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
   trailingIcon: { type: [Function, Object], required: false },
   externalIcon: { type: [Boolean, Function, Object], required: false, default: true },
   items: { type: null, required: false },
@@ -32,8 +35,6 @@ const props = defineProps({
   labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
-  modelValue: { type: String, required: false },
-  defaultValue: { type: String, required: false },
   delayDuration: { type: Number, required: false, default: 0 },
   disableClickTrigger: { type: Boolean, required: false },
   disableHoverTrigger: { type: Boolean, required: false },
@@ -41,7 +42,6 @@ const props = defineProps({
   disablePointerLeaveClose: { type: Boolean, required: false },
   unmountOnHide: { type: Boolean, required: false, default: true },
   disabled: { type: Boolean, required: false },
-  type: { type: String, required: false, default: "multiple" },
   collapsible: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:modelValue"]);
@@ -49,8 +49,6 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(computed(() => ({
   as: props.as,
-  modelValue: props.modelValue,
-  defaultValue: props.defaultValue,
   delayDuration: props.delayDuration,
   skipDelayDuration: props.skipDelayDuration,
   orientation: props.orientation,
@@ -133,7 +131,7 @@ function getAccordionDefaultValue(list, level = 0) {
         </slot>
 
         <span
-          v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
+          v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
           data-slot="linkLabel"
           :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, item.b24ui?.linkLabel], active })"
         >
@@ -151,8 +149,10 @@ function getAccordionDefaultValue(list, level = 0) {
 
       <component
         :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'"
-        v-if="(!collapsed || orientation !== 'vertical') && /* (item.badge || item.badge === 0) || */
-(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])"
+        v-if="
+  /* (item.badge || item.badge === 0) || */
+  orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']
+"
         as="span"
         data-slot="linkTrailing"
         :class="b24ui.linkTrailing({ class: [props.b24ui?.linkTrailing, item.b24ui?.linkTrailing] })"
@@ -421,7 +421,14 @@ function getAccordionDefaultValue(list, level = 0) {
   </DefineItemTemplate>
 
   <NavigationMenuRoot
-    v-bind="{ ...rootProps, ...$attrs }"
+    v-bind="{
+  ...rootProps,
+  ...orientation === 'horizontal' ? {
+    modelValue,
+    defaultValue
+  } : {},
+  ...$attrs
+}"
     :data-collapsed="collapsed"
     data-component="section"
     data-slot="root"
@@ -433,9 +440,10 @@ function getAccordionDefaultValue(list, level = 0) {
       <component
         v-bind="orientation === 'vertical' && !collapsed ? {
   ...accordionProps,
-  defaultValue: getAccordionDefaultValue(list)
+  modelValue,
+  defaultValue: defaultValue ?? getAccordionDefaultValue(list)
 } : {}"
-        :is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList"
+        :is="orientation === 'vertical' ? AccordionRoot : NavigationMenuList"
         as="ul"
         data-slot="list"
         :class="b24ui.list({ class: props.b24ui?.list })"

package/dist/runtime/components/NavigationMenu.vue.d.ts

@@ -1,4 +1,4 @@
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
+import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/navigation-menu';
 import type { AvatarProps, BadgeProps, IconComponent, LinkProps, PopoverProps, TooltipProps } from '../types';
@@ -75,6 +75,9 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     b24ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkLeadingHint' | 'linkLeadingBadgeSize' | 'linkLeadingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkHint' | 'childLinkBadgeSize' | 'childLinkBadge' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'popoverWrapper'>;
     [key: string]: any;
 }
+type SingleOrMultipleType = 'single' | 'multiple';
+type Orientation = NavigationMenuRootProps['orientation'];
+type NavigationMenuModelValue<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = O extends 'horizontal' ? string : K extends 'single' ? string : K extends 'multiple' ? string[] : string | string[];
 /**
  * @memo remove contentOrientation
  * @memo remove highlight
@@ -83,12 +86,37 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
  * @memo remove color
  * @memo remove variant (link) -> use variant.pill
  */
-export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> extends Pick<NavigationMenuRootProps, 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'collapsible'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * Determines whether a "single" or "multiple" items can be selected at a time.
+     *
+     * Only works when `orientation` is `vertical`.
+     * @defaultValue 'multiple'
+     */
+    type?: K;
+    /**
+     * The controlled value of the active item(s).
+     * - In horizontal orientation: always `string`
+     * - In vertical orientation with `type="single"`: `string`
+     * - In vertical orientation with `type="multiple"`: `string[]`
+     *
+     * Use this when you need to control the state of the items. Can be binded with `v-model`
+     */
+    modelValue?: NavigationMenuModelValue<K, O>;
+    /**
+     * The default active value of the item(s).
+     * - In horizontal orientation: always `string`
+     * - In vertical orientation with `type="single"`: `string`
+     * - In vertical orientation with `type="multiple"`: `string[]`
+     *
+     * Use when you do not need to control the state of the item(s).
+     */
+    defaultValue?: NavigationMenuModelValue<K, O>;
     /**
      * The icon displayed to open the menu.
      * @defaultValue icons.chevronDown
@@ -107,7 +135,7 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      * The orientation of the menu.
      * @defaultValue 'horizontal'
      */
-    orientation?: NavigationMenuRootProps['orientation'];
+    orientation?: O;
     /**
      * Collapse the navigation menu to only show icons.
      * Only works when `orientation` is `vertical`.
@@ -138,8 +166,15 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
     class?: any;
     b24ui?: NavigationMenu['slots'];
 }
-export interface NavigationMenuEmits extends NavigationMenuRootEmits {
-}
+export type NavigationMenuEmits<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = {
+    /**
+     * Event handler called when the value changes.
+     * - In horizontal orientation: emits `string`
+     * - In vertical orientation with `type="single"`: emits `string | undefined`
+     * - In vertical orientation with `type="multiple"`: emits `string[] | undefined`
+     */
+    'update:modelValue': [value: NavigationMenuModelValue<K, O> | undefined];
+};
 type SlotProps<T extends NavigationMenuItem> = (props: {
     item: T;
     index: number;
@@ -169,14 +204,14 @@ export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = Ar
     active?: boolean;
     b24ui: NavigationMenu['b24ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<NavigationMenuProps<T> & {
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<NavigationMenuProps<T, K, O> & {
+        "onUpdate:modelValue"?: ((value: NavigationMenuModelValue<K, O> | undefined) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: NavigationMenuSlots<T, NestedItem<T>>;
-    emit: (evt: "update:modelValue", value: string) => void;
+    emit: (evt: "update:modelValue", value: NavigationMenuModelValue<K, O> | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/RadioGroup.vue

@@ -111,15 +111,15 @@ function onUpdate(value) {
         v-for="item in normalizedItems"
         :key="item.value"
         data-slot="item"
-        :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
+        :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class], disabled: item.disabled || disabled })"
       >
         <div data-slot="container" :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
           <RRadioGroupItem
             :id="item.id"
             :value="item.value"
-            :disabled="item.disabled"
+            :disabled="item.disabled || disabled"
             data-slot="base"
-            :class="b24ui.base({ class: [props.b24ui?.base, item.b24ui?.base], disabled: item.disabled })"
+            :class="b24ui.base({ class: [props.b24ui?.base, item.b24ui?.base], disabled: item.disabled || disabled })"
           >
             <RadioGroupIndicator data-slot="indicator" :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })" />
           </RRadioGroupItem>
@@ -135,7 +135,7 @@ function onUpdate(value) {
             v-if="item.label || !!slots.label"
             :for="item.id"
             data-slot="label"
-            :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })"
+            :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label], disabled: item.disabled || disabled })"
           >
             <slot name="label" :item="item" :model-value="modelValue">
               {{ item.label }}
@@ -144,7 +144,7 @@ function onUpdate(value) {
           <p
             v-if="item.description || !!slots.description"
             data-slot="description"
-            :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })"
+            :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description], disabled: item.disabled || disabled })"
           >
             <slot name="description" :item="item" :model-value="modelValue">
               {{ item.description }}

package/dist/runtime/components/content/ContentSearchButton.vue

@@ -74,7 +74,9 @@ const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} :
 const { t } = useLocale();
 const { open } = useContentSearch();
 const appConfig = useAppConfig();
-const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.contentSearchButton || {} })());
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.contentSearchButton || {} })({
+  collapsed: props.collapsed
+}));
 </script>
 
 <template>
@@ -85,7 +87,6 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.content
       v-bind="{
   ...buttonProps,
   ...collapsed ? {
-    'label': void 0,
     'aria-label': label || t('contentSearchButton.label')
   } : {
     color: 'air-secondary-no-accent'
@@ -101,7 +102,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.content
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <template v-if="!collapsed" #trailing="{ b24ui: b24uiProxy }">
+      <template #trailing="{ b24ui: b24uiProxy }">
         <div data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
           <slot name="trailing" :b24ui="b24uiProxy">
             <template v-if="kbds?.length">

package/dist/shared/{b24ui-nuxt.Bs0V9FLV.mjs → b24ui-nuxt.Dspx5yCK.mjs}

@@ -8,7 +8,7 @@ import { globSync } from 'tinyglobby';
 import { defuFn } from 'defu';
 
 const name = "@bitrix24/b24ui-nuxt";
-const version = "2.1.4";
+const version = "2.1.5";
 
 function getDefaultConfig(theme) {
   return {
@@ -1937,9 +1937,10 @@ const checkbox = {
     },
     disabled: {
       true: {
-        base: "cursor-not-allowed opacity-30",
-        label: "cursor-not-allowed opacity-30",
-        description: "cursor-not-allowed opacity-30"
+        root: "opacity-30",
+        base: "cursor-not-allowed",
+        label: "cursor-not-allowed",
+        description: "cursor-not-allowed"
       }
     },
     checked: {
@@ -1964,8 +1965,15 @@ const checkbox = {
       class: {
         root: "border-(--b24ui-border-color) cursor-pointer"
       }
-    }
+    },
     // endregion ////
+    {
+      variant: "card",
+      disabled: true,
+      class: {
+        root: "cursor-not-allowed"
+      }
+    }
   ],
   defaultVariants: {
     color: "air-primary",
@@ -2054,11 +2062,7 @@ const checkboxGroup = {
       }
     },
     disabled: {
-      true: {
-        base: "cursor-not-allowed opacity-30",
-        label: "cursor-not-allowed opacity-30",
-        item: "cursor-not-allowed opacity-30"
-      }
+      true: {}
     },
     required: {
       true: {
@@ -2137,8 +2141,15 @@ const checkboxGroup = {
         item: "first-of-type:rounded-t-(--ui-border-radius-md) last-of-type:rounded-b-(--ui-border-radius-md)",
         fieldset: "gap-0 -space-y-px"
       }
-    }
+    },
     // endregion ////
+    {
+      variant: "table",
+      disabled: true,
+      class: {
+        item: "cursor-not-allowed"
+      }
+    }
   ],
   defaultVariants: {
     size: "md",
@@ -2742,7 +2753,18 @@ const dashboardSearch = {
 const dashboardSearchButton = {
   slots: {
     base: "",
+    baseLine: "",
+    label: "",
     trailing: "hidden lg:flex items-center gap-0.5 ms-auto"
+  },
+  variants: {
+    collapsed: {
+      true: {
+        baseLine: "ps-[5px] pe-[5px]",
+        label: "hidden",
+        trailing: "lg:hidden"
+      }
+    }
   }
 };
 
@@ -5304,7 +5326,9 @@ const navigationMenu = {
       orientation: "vertical",
       collapsed: true,
       class: {
-        childList: "grid px-0 py-(--menu-popup-padding)"
+        childList: "grid px-0 py-(--menu-popup-padding)",
+        linkLabel: "hidden",
+        linkTrailing: "hidden"
       }
     },
     {
@@ -5314,21 +5338,6 @@ const navigationMenu = {
         link: "collapsed data-[state=open]:-mt-(--leftmenu-group-stroke-weight) data-[state=open]:-mx-(--leftmenu-group-stroke-weight)"
       }
     },
-    // {
-    //   orientation: 'horizontal',
-    //   class: {
-    //     link: ['after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full', 'after:transition-colors']
-    //   }
-    // },
-    // endregion ////
-    // region vertical ////
-    // {
-    //   orientation: 'vertical',
-    //   level: true,
-    //   class: {
-    //     link: ['after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-[7px] after:rounded-full', 'after:transition-colors']
-    //   }
-    // },
     // endregion ////
     // region pill ////
     {
@@ -6543,8 +6552,10 @@ const radioGroup = {
     },
     disabled: {
       true: {
-        base: "cursor-not-allowed opacity-30",
-        label: "cursor-not-allowed opacity-30"
+        item: "opacity-30",
+        base: "cursor-not-allowed",
+        label: "cursor-not-allowed",
+        description: "cursor-not-allowed"
       }
     },
     required: {
@@ -6624,8 +6635,15 @@ const radioGroup = {
         item: "first-of-type:rounded-t-(--ui-border-radius-md) last-of-type:rounded-b-(--ui-border-radius-md)",
         fieldset: "gap-0 -space-y-px"
       }
-    }
+    },
     // endregion ////
+    {
+      variant: ["card", "table"],
+      disabled: true,
+      class: {
+        item: "cursor-not-allowed"
+      }
+    }
   ],
   defaultVariants: {
     color: "air-primary",
@@ -7665,9 +7683,10 @@ const _switch = {
     },
     disabled: {
       true: {
-        base: "cursor-not-allowed opacity-30",
-        label: "cursor-not-allowed opacity-30",
-        description: "cursor-not-allowed opacity-30"
+        root: "opacity-30",
+        base: "cursor-not-allowed",
+        label: "cursor-not-allowed",
+        description: "cursor-not-allowed"
       }
     }
   },
@@ -10127,7 +10146,18 @@ const contentSearch = {
 const contentSearchButton = {
   slots: {
     base: "",
+    baseLine: "",
+    label: "",
     trailing: "hidden lg:flex items-center gap-0.5 ms-auto"
+  },
+  variants: {
+    collapsed: {
+      true: {
+        baseLine: "ps-[5px] pe-[5px]",
+        label: "hidden",
+        trailing: "lg:hidden"
+      }
+    }
   }
 };
 

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 getDefaultConfig } from './shared/b24ui-nuxt.Bs0V9FLV.mjs';
+import { g as getTemplates, d as defaultOptions, a as getDefaultConfig } from './shared/b24ui-nuxt.Dspx5yCK.mjs';
 import fs from 'node:fs';
 import path from 'node:path';
 import MagicString from 'magic-string';

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/b24ui-nuxt.Bs0V9FLV.mjs';
+import './shared/b24ui-nuxt.Dspx5yCK.mjs';
 import 'scule';
 import 'knitwork';
 import '@nuxt/kit';

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.1.4",
+  "version": "2.1.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bitrix24/b24ui.git"