@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

package/dist/runtime/components/Range.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import B24Tooltip from "./Tooltip.vue";
@@ -30,6 +31,7 @@ const props = defineProps({
 const emits = defineEmits(["change"]);
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("range", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
 const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const defaultRangeValue = computed(() => {
@@ -71,13 +73,13 @@ function onChange(value) {
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     :default-value="defaultRangeValue"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
   >
-    <SliderTrack data-slot="track" :class="b24ui.track({ class: props.b24ui?.track })">
-      <SliderRange data-slot="range" :class="b24ui.range({ class: props.b24ui?.range })" />
+    <SliderTrack data-slot="track" :class="b24ui.track({ class: uiProp?.track })">
+      <SliderRange data-slot="range" :class="b24ui.range({ class: uiProp?.range })" />
     </SliderTrack>
 
     <template v-for="thumb in thumbs" :key="thumb">
@@ -87,9 +89,9 @@ function onChange(value) {
         disable-closing-trigger
         v-bind="typeof tooltip === 'object' ? tooltip : {}"
       >
-        <SliderThumb data-slot="thumb" :class="b24ui.thumb({ class: props.b24ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+        <SliderThumb data-slot="thumb" :class="b24ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
       </B24Tooltip>
-      <SliderThumb v-else data-slot="thumb" :class="b24ui.thumb({ class: props.b24ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+      <SliderThumb v-else data-slot="thumb" :class="b24ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
     </template>
   </SliderRoot>
 </template>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { VirtualItem, VirtualizerOptions } from '@tanstack/vue-virtual';
 import theme from '#build/b24ui/scroll-area';
@@ -20,6 +21,13 @@ export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOpt
      * @defaultValue undefined
      */
     lanes?: number;
+    /**
+     * Skip per-item DOM measurement for uniform-height items.
+     * When `true`, uses `estimateSize` only — significantly improving performance for uniform items.
+     * When `false` (default), measures each item for variable-height layouts (e.g., masonry).
+     * @defaultValue false
+     */
+    skipMeasurement?: boolean;
 }
 export type ScrollAreaItem = any;
 export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
@@ -47,11 +55,14 @@ export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
     b24ui?: ScrollArea['slots'];
 }
 export interface ScrollAreaSlots<T extends ScrollAreaItem = ScrollAreaItem> {
-    default(props: {
+    default?(props: {
         item: T;
         index: number;
         virtualItem?: VirtualItem;
-    } | Record<string, never>): any;
+    } | {
+        item: T;
+        index: 0;
+    }): VNode[];
 }
 export interface ScrollAreaEmits {
     /**

package/dist/runtime/components/ScrollArea.vue

@@ -3,11 +3,12 @@ import theme from "#build/b24ui/scroll-area";
 </script>
 
 <script setup>
-import { computed, toRef, useTemplateRef, watch } from "vue";
+import { computed, onMounted, onUnmounted, toRef, useTemplateRef, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { defu } from "defu";
 import { useVirtualizer } from "@tanstack/vue-virtual";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import { useLocale } from "../composables/useLocale";
 const props = defineProps({
@@ -22,6 +23,7 @@ defineSlots();
 const emits = defineEmits(["scroll"]);
 const { dir } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("scrollArea", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.scrollArea || {} })({
   orientation: props.orientation
 }));
@@ -44,6 +46,9 @@ const lanes = computed(() => {
   const value = virtualizerProps.value.lanes;
   return typeof value === "number" ? value : void 0;
 });
+const skipMeasurement = computed(() => {
+  return typeof props.virtualize === "object" && props.virtualize.skipMeasurement === true;
+});
 const virtualizer = !!props.virtualize && useVirtualizer({
   ...virtualizerProps.value,
   get overscan() {
@@ -101,13 +106,32 @@ function getVirtualItemStyle(virtualItem) {
     transform: isHorizontal.value ? `translateX(${isRtl.value ? -virtualItem.start : virtualItem.start}px)` : `translateY(${virtualItem.start}px)`
   };
 }
-watch(lanes, () => {
+let resizeObserver = null;
+let rafId = null;
+onMounted(() => {
   if (virtualizer) {
-    virtualizer.value.measure();
+    const el = rootRef.value?.$el;
+    if (el) {
+      resizeObserver = new ResizeObserver(() => {
+        if (rafId !== null) return;
+        rafId = requestAnimationFrame(() => {
+          rafId = null;
+          virtualizer.value.measure();
+        });
+      });
+      resizeObserver.observe(el);
+    }
+  }
+});
+onUnmounted(() => {
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
   }
-}, { flush: "sync" });
+  resizeObserver?.disconnect();
+});
 function measureElement(el) {
-  if (el && virtualizer) {
+  if (el && virtualizer && !skipMeasurement.value) {
     const element = el instanceof Element ? el : el.$el;
     virtualizer.value.measureElement(element);
   }
@@ -139,12 +163,12 @@ defineExpose({
     :as="as"
     data-slot="root"
     :data-orientation="orientation"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
     <template v-if="virtualizer">
       <div
         data-slot="viewport"
-        :class="b24ui.viewport({ class: props.b24ui?.viewport })"
+        :class="b24ui.viewport({ class: uiProp?.viewport })"
         :style="virtualViewportStyle"
       >
         <div
@@ -153,7 +177,7 @@ defineExpose({
           :ref="measureElement"
           :data-index="virtualItem.index"
           data-slot="item"
-          :class="b24ui.item({ class: props.b24ui?.item })"
+          :class="b24ui.item({ class: uiProp?.item })"
           :style="getVirtualItemStyle(virtualItem)"
         >
           <slot
@@ -166,20 +190,20 @@ defineExpose({
     </template>
 
     <template v-else>
-      <div data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
-        <template v-if="items?.length">
+      <div data-slot="viewport" :class="b24ui.viewport({ class: uiProp?.viewport })">
+        <template v-if="items">
           <div
             v-for="(item, index) in items"
             :key="getItemKey(item, index)"
             data-slot="item"
-            :class="b24ui.item({ class: props.b24ui?.item })"
+            :class="b24ui.item({ class: uiProp?.item })"
           >
             <slot :item="item" :index="index" />
           </div>
         </template>
 
         <template v-else>
-          <slot />
+          <slot :item="{}" :index="0" />
         </template>
       </div>
     </template>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { VirtualItem, VirtualizerOptions } from '@tanstack/vue-virtual';
 import theme from '#build/b24ui/scroll-area';
@@ -20,6 +21,13 @@ export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOpt
      * @defaultValue undefined
      */
     lanes?: number;
+    /**
+     * Skip per-item DOM measurement for uniform-height items.
+     * When `true`, uses `estimateSize` only — significantly improving performance for uniform items.
+     * When `false` (default), measures each item for variable-height layouts (e.g., masonry).
+     * @defaultValue false
+     */
+    skipMeasurement?: boolean;
 }
 export type ScrollAreaItem = any;
 export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
@@ -47,11 +55,14 @@ export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
     b24ui?: ScrollArea['slots'];
 }
 export interface ScrollAreaSlots<T extends ScrollAreaItem = ScrollAreaItem> {
-    default(props: {
+    default?(props: {
         item: T;
         index: number;
         virtualItem?: VirtualItem;
-    } | Record<string, never>): any;
+    } | {
+        item: T;
+        index: 0;
+    }): VNode[];
 }
 export interface ScrollAreaEmits {
     /**

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

@@ -1,11 +1,12 @@
 import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectContentEmits, SelectArrowProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/select';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, BadgeProps, IconComponent } from '../types';
-import type { ModelModifiers } from '../types/input';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
-import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
+import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Select = ComponentConfig<typeof theme, AppConfig, 'select'>;
 export type SelectValue = AcceptableValue;
@@ -32,7 +33,10 @@ export type SelectItem = SelectValue | {
     b24ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
-export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
+type ExcludeItem = {
+    type: 'label' | 'separator';
+};
+export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     id?: string;
     /** The placeholder text when the select is empty. */
     placeholder?: string;
@@ -113,10 +117,10 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     descriptionKey?: GetItemKeys<T>;
     items?: T;
     /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */
-    defaultValue?: GetModelValue<T, VK, M>;
+    defaultValue?: ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>;
     /** The controlled value of the Select. Can be bind as `v-model`. */
-    modelValue?: GetModelValue<T, VK, M>;
-    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
+    modelValue?: ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>;
+    modelModifiers?: Mod;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
@@ -126,55 +130,76 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     class?: any;
     b24ui?: Select['slots'];
 }
-export type SelectEmits<A extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Omit<SelectRootEmits, 'update:modelValue'> & {
-    change: [event: Event];
-    blur: [event: FocusEvent];
-    focus: [event: FocusEvent];
-} & GetModelValueEmits<A, VK, M>;
+export interface SelectEmits<A extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<A> | undefined, M extends boolean, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> extends Omit<SelectRootEmits, 'update:modelValue'> {
+    'change': [event: Event];
+    'blur': [event: FocusEvent];
+    'focus': [event: FocusEvent];
+    'update:modelValue': [value: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod>];
+}
 type SlotProps<T extends SelectItem> = (props: {
     item: T;
     index: number;
     b24ui: Select['b24ui'];
-}) => any;
-export interface SelectSlots<A extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, T extends NestedItem<A> = NestedItem<A>> {
-    'leading'(props: {
-        modelValue?: GetModelValue<A, VK, M>;
+}) => VNode[];
+export interface SelectSlots<A extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>, T extends NestedItem<A> = NestedItem<A>> {
+    'leading'?(props: {
+        modelValue: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod>;
         open: boolean;
         b24ui: Select['b24ui'];
-    }): any;
-    'default'(props: {
-        modelValue?: GetModelValue<A, VK, M>;
+    }): VNode[];
+    'default'?(props: {
+        modelValue: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod>;
         open: boolean;
         b24ui: Select['b24ui'];
-    }): any;
-    'trailing'(props: {
-        modelValue?: GetModelValue<A, VK, M>;
+    }): VNode[];
+    'trailing'?(props: {
+        modelValue: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod>;
         open: boolean;
         b24ui: Select['b24ui'];
-    }): any;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label'(props: {
+    }): VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?(props: {
         item: T;
         index: number;
-    }): any;
-    'item-description'(props: {
+    }): VNode[];
+    'item-description'?(props: {
         item: T;
         index: number;
-    }): any;
-    'item-trailing': SlotProps<T>;
-    'content-top': (props?: {}) => any;
-    'content-bottom': (props?: {}) => any;
+    }): VNode[];
+    'item-trailing'?: SlotProps<T>;
+    'content-top'?: (props?: {}) => VNode[];
+    'content-bottom'?: (props?: {}) => VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = "value", M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<SelectProps<T, VK, M> & {
+declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = "value", M extends boolean = false, Mod extends Omit<ModelModifiers, "lazy"> = Omit<ModelModifiers, "lazy">>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<SelectProps<T, VK, M, Mod> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -183,8 +208,28 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends Get
         viewportRef: Readonly<import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>>;
     }>) => void;
     attrs: any;
-    slots: SelectSlots<T, VK, M, NestedItem<T>>;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void);
+    slots: SelectSlots<T, VK, M, Mod, NestedItem<T>>;
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };