@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

package/dist/runtime/components/Slideover.vue

@@ -7,6 +7,7 @@ import { computed, toRef } from "vue";
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { pointerDownOutside } from "../utils/overlay";
@@ -38,6 +39,7 @@ const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "updat
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("slideover", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
@@ -73,12 +75,12 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="overlay" data-slot="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
+      <DialogOverlay v-if="overlay" data-slot="overlay" :class="b24ui.overlay({ class: uiProp?.overlay })" />
 
       <DialogContent
         :data-side="side"
         data-slot="content"
-        :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
+        :class="b24ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
         v-bind="contentProps"
         @after-enter="emits('after:enter')"
         @after-leave="emits('after:leave')"
@@ -120,7 +122,7 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
 }"
                   v-bind="typeof props.close === 'object' ? props.close : {}"
                   data-slot="close"
-                  :class="b24ui.close({ class: props.b24ui?.close })"
+                  :class="b24ui.close({ class: uiProp?.close })"
                 />
               </slot>
             </DialogClose>
@@ -129,13 +131,13 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
             :use-light-content="props.useLightContent"
             is-inner
             :b24ui="{
-  root: b24ui.sidebarLayoutRoot({ class: props.b24ui?.sidebarLayoutRoot }),
-  header: b24ui.sidebarLayoutHeaderWrapper({ class: props.b24ui?.sidebarLayoutHeaderWrapper }),
-  pageWrapper: b24ui.sidebarLayoutPageWrapper({ class: props.b24ui?.sidebarLayoutPageWrapper }),
-  container: b24ui.sidebarLayoutContainer({ class: props.b24ui?.sidebarLayoutContainer }),
-  pageBottomWrapper: b24ui.sidebarLayoutPageBottomWrapper({ class: props.b24ui?.sidebarLayoutPageBottomWrapper }),
-  loadingWrapper: b24ui.sidebarLayoutLoadingWrapper({ class: props.b24ui?.sidebarLayoutLoadingWrapper }),
-  loadingIcon: b24ui.sidebarLayoutLoadingIcon({ class: props.b24ui?.sidebarLayoutLoadingIcon })
+  root: b24ui.sidebarLayoutRoot({ class: uiProp?.sidebarLayoutRoot }),
+  header: b24ui.sidebarLayoutHeaderWrapper({ class: uiProp?.sidebarLayoutHeaderWrapper }),
+  pageWrapper: b24ui.sidebarLayoutPageWrapper({ class: uiProp?.sidebarLayoutPageWrapper }),
+  container: b24ui.sidebarLayoutContainer({ class: uiProp?.sidebarLayoutContainer }),
+  pageBottomWrapper: b24ui.sidebarLayoutPageBottomWrapper({ class: uiProp?.sidebarLayoutPageBottomWrapper }),
+  loadingWrapper: b24ui.sidebarLayoutLoadingWrapper({ class: uiProp?.sidebarLayoutLoadingWrapper }),
+  loadingIcon: b24ui.sidebarLayoutLoadingIcon({ class: uiProp?.sidebarLayoutLoadingIcon })
 }"
           >
             <template v-if="!!slots['sidebar']" #sidebar>
@@ -147,16 +149,16 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
             </template>
 
             <template v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !isBtnCloseExternal && (props.close || !!slots.close)" #content-top>
-              <div data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+              <div data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
                 <slot name="header" :close="close">
-                  <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-                    <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+                  <div data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+                    <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
                       <slot name="title">
                         {{ title }}
                       </slot>
                     </DialogTitle>
 
-                    <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+                    <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
                       <slot name="description">
                         {{ description }}
                       </slot>
@@ -174,7 +176,7 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
                           size="lg"
                           v-bind="typeof props.close === 'object' ? props.close : {}"
                           data-slot="close"
-                          :class="b24ui.close({ class: props.b24ui?.close })"
+                          :class="b24ui.close({ class: uiProp?.close })"
                         />
                       </slot>
                     </DialogClose>
@@ -188,13 +190,13 @@ const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bot
             </template>
 
             <template v-if="!!slots['body']" #default>
-              <div data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
+              <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
                 <slot name="body" :close="close" />
               </div>
             </template>
 
             <template v-if="!!slots.footer" #content-bottom>
-              <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+              <div data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
                 <slot name="footer" :close="close" />
               </div>
             </template>

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

@@ -115,14 +115,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
     close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    side: Slideover["variants"]["side"];
+    overlay: boolean;
+    useLightContent: boolean;
     transition: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;
-    overlay: boolean;
-    side: Slideover["variants"]["side"];
     overlayBlur: Slideover["variants"]["overlayBlur"];
     dismissible: boolean;
-    useLightContent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Stepper.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import { get } from "../utils";
 const props = defineProps({
@@ -26,6 +27,7 @@ const emits = defineEmits(["next", "prev"]);
 const slots = defineSlots();
 const modelValue = defineModel({ type: [String, Number] });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("stepper", props);
 const rootProps = useForwardProps(reactivePick(props, "as", "linear"));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.stepper || {} })({
   orientation: props.orientation,
@@ -63,25 +65,25 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :orientation="orientation" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
       <StepperItem
         v-for="(item, count) in items"
         :key="count"
         :step="count"
         :disabled="item.disabled || props.disabled"
         data-slot="item"
-        :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
+        :class="b24ui.item({ class: [uiProp?.item, item.b24ui?.item, item.class] })"
       >
-        <div data-slot="container" :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
-          <StepperTrigger data-slot="trigger" :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger] })">
-            <StepperIndicator data-slot="indicator" :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })">
+        <div data-slot="container" :class="b24ui.container({ class: [uiProp?.container, item.b24ui?.container] })">
+          <StepperTrigger data-slot="trigger" :class="b24ui.trigger({ class: [uiProp?.trigger, item.b24ui?.trigger] })">
+            <StepperIndicator data-slot="indicator" :class="b24ui.indicator({ class: [uiProp?.indicator, item.b24ui?.indicator] })">
               <slot name="indicator" :item="item" :b24ui="b24ui">
                 <Component
                   :is="item.icon"
                   v-if="item.icon"
                   data-slot="icon"
-                  :class="b24ui.icon({ class: [props.b24ui?.icon, item.b24ui?.icon] })"
+                  :class="b24ui.icon({ class: [uiProp?.icon, item.b24ui?.icon] })"
                 />
                 <template v-else>
                   {{ count + 1 }}
@@ -93,18 +95,18 @@ defineExpose({
           <StepperSeparator
             v-if="count < items.length - 1"
             data-slot="separator"
-            :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })"
+            :class="b24ui.separator({ class: [uiProp?.separator, item.b24ui?.separator] })"
           />
         </div>
 
-        <div data-slot="wrapper" :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })">
+        <div data-slot="wrapper" :class="b24ui.wrapper({ class: [uiProp?.wrapper, item.b24ui?.wrapper] })">
           <slot :name="item.slot ? `${item.slot}-wrapper` : 'wrapper'" :item="item">
-            <StepperTitle v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" as="div" data-slot="title" :class="b24ui.title({ class: [props.b24ui?.title, item.b24ui?.title] })">
+            <StepperTitle v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" as="div" data-slot="title" :class="b24ui.title({ class: [uiProp?.title, item.b24ui?.title] })">
               <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
                 {{ item.title }}
               </slot>
             </StepperTitle>
-            <StepperDescription v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" as="div" data-slot="description" :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })">
+            <StepperDescription v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" as="div" data-slot="description" :class="b24ui.description({ class: [uiProp?.description, item.b24ui?.description] })">
               <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
                 {{ item.description }}
               </slot>
@@ -114,7 +116,7 @@ defineExpose({
       </StepperItem>
     </div>
 
-    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot && !!slots[currentStep.slot]" data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
+    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot && !!slots[currentStep.slot]" data-slot="content" :class="b24ui.content({ class: uiProp?.content })">
       <slot
         :name="currentStep?.slot || 'content'"
         :item="currentStep"

package/dist/runtime/components/Switch.vue

@@ -3,13 +3,13 @@ import theme from "#build/b24ui/switch";
 </script>
 
 <script setup>
-import { computed, useId } from "vue";
+import { computed, useAttrs, useId } from "vue";
 import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } 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 { omit } from "../utils";
 import icons from "../dictionary/icons";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -35,9 +35,15 @@ const slots = defineSlots();
 const emits = defineEmits(["change"]);
 const modelValue = defineModel({ type: Boolean, ...{ default: void 0 } });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("switch", props);
 const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
 const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const id = _id.value ?? useId();
+const attrs = useAttrs();
+const forwardedAttrs = computed(() => {
+  const { "data-state": _, ...rest } = attrs;
+  return rest;
+});
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.switch || {} })({
   size: size.value,
   color: color.value,
@@ -54,49 +60,49 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
       <SwitchRoot
         :id="id"
-        v-bind="{ ...rootProps, ...omit({ ...$attrs }, ['data-state']), ...ariaAttrs }"
+        v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"
         data-slot="base"
-        :class="b24ui.base({ class: props.b24ui?.base })"
+        :class="b24ui.base({ class: uiProp?.base })"
         @update:model-value="onUpdate"
       >
-        <SwitchThumb data-slot="thumb" :class="b24ui.thumb({ class: props.b24ui?.thumb })">
+        <SwitchThumb data-slot="thumb" :class="b24ui.thumb({ class: uiProp?.thumb })">
           <Component
             :is="loadingIcon || icons.refresh"
             v-if="loading"
             data-slot="icon"
-            :class="b24ui.icon({ class: props.b24ui?.icon, checked: true, unchecked: true })"
+            :class="b24ui.icon({ class: uiProp?.icon, checked: true, unchecked: true })"
           />
           <template v-else>
             <Component
               :is="checkedIcon"
               v-if="checkedIcon"
               data-slot="icon"
-              :class="b24ui.icon({ class: props.b24ui?.icon, checked: true })"
+              :class="b24ui.icon({ class: uiProp?.icon, checked: true })"
             />
             <Component
               :is="uncheckedIcon"
               v-if="uncheckedIcon"
               data-slot="icon"
-              :class="b24ui.icon({ class: props.b24ui?.icon, unchecked: true })"
+              :class="b24ui.icon({ class: uiProp?.icon, unchecked: true })"
             />
           </template>
         </SwitchThumb>
       </SwitchRoot>
     </div>
-    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-      <Label v-if="label || !!slots.label" :for="id" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
+    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+      <Label v-if="label || !!slots.label" :for="id" data-slot="label" :class="b24ui.label({ class: uiProp?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
       </Label>
-      <p v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <p v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>

package/dist/runtime/components/Table.vue

@@ -3,14 +3,15 @@ import theme from "#build/b24ui/table";
 </script>
 
 <script setup>
-import { ref, computed, useTemplateRef, watch, toRef } from "vue";
+import { computed, useTemplateRef, watch, toRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { upperFirst } from "scule";
 import { defu } from "defu";
 import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from "@tanstack/vue-table";
 import { useVirtualizer } from "@tanstack/vue-virtual";
-import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { reactivePick, createReusableTemplate, createRef } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
@@ -66,7 +67,8 @@ const props = defineProps({
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const data = ref(props.data ?? []);
+const uiProp = useComponentUI("table", props);
+const data = createRef(props.data ?? [], props.watchOptions?.deep !== false);
 const meta = computed(() => props.meta ?? {});
 const columns = computed(() => processColumns(props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({ accessorKey, header: upperFirst(accessorKey) }))));
 function processColumns(columns2) {
@@ -243,8 +245,8 @@ const renderedSize = computed(() => {
   }
   return virtualItems.reduce((sum, item) => sum + item.size, 0);
 });
-function valueUpdater(updaterOrValue, ref2) {
-  ref2.value = typeof updaterOrValue === "function" ? updaterOrValue(ref2.value) : updaterOrValue;
+function valueUpdater(updaterOrValue, ref) {
+  ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
 }
 function onRowSelect(e, row) {
   if (!props.onSelect) {
@@ -314,7 +316,7 @@ defineExpose({
       data-slot="tr"
       :class="b24ui.tr({
   class: [
-    props.b24ui?.tr,
+    uiProp?.tr,
     resolveValue(tableApi.options.meta?.class?.tr, row)
   ]
 })"
@@ -333,7 +335,7 @@ defineExpose({
         data-slot="td"
         :class="b24ui.td({
   class: [
-    props.b24ui?.td,
+    uiProp?.td,
     resolveValue(cell.column.columnDef.meta?.class?.td, cell)
   ],
   pinned: !!cell.column.getIsPinned()
@@ -349,23 +351,23 @@ defineExpose({
       </td>
     </tr>
 
-    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="b24ui.tr({ class: [props.b24ui?.tr] })">
-      <td :colspan="row.getAllCells().length" data-slot="td" :class="b24ui.td({ class: [props.b24ui?.td] })">
+    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="b24ui.tr({ class: [uiProp?.tr] })">
+      <td :colspan="row.getAllCells().length" data-slot="td" :class="b24ui.td({ class: [uiProp?.td] })">
         <slot name="expanded" :row="row" />
       </td>
     </tr>
   </DefineRowTemplate>
 
   <DefineTableTemplate>
-    <table ref="tableRef" data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base] })">
-      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="b24ui.caption({ class: [props.b24ui?.caption] })">
+    <table ref="tableRef" data-slot="base" :class="b24ui.base({ class: [uiProp?.base] })">
+      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="b24ui.caption({ class: [uiProp?.caption] })">
         <slot name="caption">
           {{ caption }}
         </slot>
       </caption>
 
-      <thead data-slot="thead" :class="b24ui.thead({ class: [props.b24ui?.thead] })">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="b24ui.tr({ class: [props.b24ui?.tr] })">
+      <thead data-slot="thead" :class="b24ui.thead({ class: [uiProp?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="b24ui.tr({ class: [uiProp?.tr] })">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
@@ -376,7 +378,7 @@ defineExpose({
             data-slot="th"
             :class="b24ui.th({
   class: [
-    props.b24ui?.th,
+    uiProp?.th,
     resolveValue(header.column.columnDef.meta?.class?.th, header)
   ],
   pinned: !!header.column.getIsPinned()
@@ -392,10 +394,10 @@ defineExpose({
           </th>
         </tr>
 
-        <tr data-slot="separator" :class="b24ui.separator({ class: [props.b24ui?.separator] })" />
+        <tr data-slot="separator" :class="b24ui.separator({ class: [uiProp?.separator] })" />
       </thead>
 
-      <tbody data-slot="tbody" :class="b24ui.tbody({ class: [props.b24ui?.tbody] })">
+      <tbody data-slot="tbody" :class="b24ui.tbody({ class: [uiProp?.tbody] })">
         <slot name="body-top" />
 
         <template v-if="rows.length">
@@ -417,13 +419,13 @@ defineExpose({
         </template>
 
         <tr v-else-if="loading && !!slots['loading']">
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="b24ui.loading({ class: props.b24ui?.loading })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="b24ui.loading({ class: uiProp?.loading })">
             <slot name="loading" />
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="b24ui.empty({ class: props.b24ui?.empty })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="b24ui.empty({ class: uiProp?.empty })">
             <slot name="empty">
               {{ empty || t("table.noData") }}
             </slot>
@@ -436,14 +438,14 @@ defineExpose({
       <tfoot
         v-if="hasFooter"
         data-slot="tfoot"
-        :class="b24ui.tfoot({ class: [props.b24ui?.tfoot] })"
+        :class="b24ui.tfoot({ class: [uiProp?.tfoot] })"
         :style="virtualizer ? {
   transform: `translateY(${virtualizer.getTotalSize() - renderedSize}px)`
 } : void 0"
       >
-        <tr data-slot="separator" :class="b24ui.separator({ class: [props.b24ui?.separator] })" />
+        <tr data-slot="separator" :class="b24ui.separator({ class: [uiProp?.separator] })" />
 
-        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="b24ui.tr({ class: [props.b24ui?.tr] })">
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="b24ui.tr({ class: [uiProp?.tr] })">
           <th
             v-for="header in footerGroup.headers"
             :key="header.id"
@@ -453,7 +455,7 @@ defineExpose({
             data-slot="th"
             :class="b24ui.th({
   class: [
-    props.b24ui?.th,
+    uiProp?.th,
     resolveValue(header.column.columnDef.meta?.class?.th, header)
   ],
   pinned: !!header.column.getIsPinned()
@@ -472,7 +474,7 @@ defineExpose({
     </table>
   </DefineTableTemplate>
 
-  <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <div
       v-if="virtualizer"
       :style="{

package/dist/runtime/components/TableWrapper.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/table-wrapper";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -22,6 +23,7 @@ const props = defineProps({
   b24ui: { type: Object, required: false }
 });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("tableWrapper", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tableWrapper || {} })({
   size: props.size,
   rounded: Boolean(props.rounded),
@@ -38,7 +40,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tableWr
   <Primitive
     :as="as"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
     <slot />
   </Primitive>

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

@@ -1,3 +1,4 @@
+import type { ComponentPublicInstance } from 'vue';
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/tabs';
@@ -94,7 +95,7 @@ declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaite
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        triggersRef: import("vue").Ref<any[], any[]>;
+        triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
     attrs: any;
     slots: TabsSlots<T>;

package/dist/runtime/components/Tabs.vue

@@ -7,6 +7,7 @@ import { ref, computed } from "vue";
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
@@ -30,6 +31,7 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("tabs", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "unmountOnHide"), emits);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tabs || {} })({
   variant: props.variant,
@@ -37,6 +39,9 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tabs ||
   orientation: props.orientation
 }));
 const triggersRef = ref([]);
+function setTriggerRef(index, el) {
+  triggersRef.value[index] = el;
+}
 defineExpose({
   triggersRef
 });
@@ -50,39 +55,39 @@ defineExpose({
     :orientation="orientation"
     :activation-mode="activationMode"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
-    <TabsList data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
-      <TabsIndicator data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })" />
+    <TabsList data-slot="list" :class="b24ui.list({ class: uiProp?.list })">
+      <TabsIndicator data-slot="indicator" :class="b24ui.indicator({ class: uiProp?.indicator })" />
 
       <slot name="list-leading" />
 
       <TabsTrigger
         v-for="(item, index) of items"
         :key="index"
-        :ref="(el) => triggersRef[index] = el"
+        :ref="(el) => setTriggerRef(index, el)"
         :value="get(item, props.valueKey) ?? String(index)"
         :disabled="item.disabled"
         data-slot="trigger"
-        :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger] })"
+        :class="b24ui.trigger({ class: [uiProp?.trigger, item.b24ui?.trigger] })"
       >
         <slot name="leading" :item="item" :index="index" :b24ui="b24ui">
           <Component
             :is="item.icon"
             v-if="item.icon"
             data-slot="leadingIcon"
-            :class="b24ui.leadingIcon({ class: [props.b24ui?.leadingIcon, item.b24ui?.leadingIcon] })"
+            :class="b24ui.leadingIcon({ class: [uiProp?.leadingIcon, item.b24ui?.leadingIcon] })"
           />
           <B24Avatar
             v-else-if="item.avatar"
-            :size="item.b24ui?.leadingAvatarSize || props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+            :size="item.b24ui?.leadingAvatarSize || uiProp?.leadingAvatarSize || b24ui.leadingAvatarSize()"
             v-bind="item.avatar"
             data-slot="leadingAvatar"
-            :class="b24ui.leadingAvatar({ class: [props.b24ui?.leadingAvatar, item.b24ui?.leadingAvatar] })"
+            :class="b24ui.leadingAvatar({ class: [uiProp?.leadingAvatar, item.b24ui?.leadingAvatar] })"
           />
         </slot>
 
-        <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })">
+        <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="b24ui.label({ class: [uiProp?.label, item.b24ui?.label] })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
         </span>
 
@@ -90,10 +95,10 @@ defineExpose({
           <B24Badge
             v-if="item.badge || item.badge === 0"
             color="air-primary"
-            :size="item.b24ui?.trailingBadgeSize || props.b24ui?.trailingBadgeSize || b24ui.trailingBadgeSize()"
+            :size="item.b24ui?.trailingBadgeSize || uiProp?.trailingBadgeSize || b24ui.trailingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
             data-slot="trailingBadge"
-            :class="b24ui.trailingBadge({ class: [props.b24ui?.trailingBadge, item.b24ui?.trailingBadge] })"
+            :class="b24ui.trailingBadge({ class: [uiProp?.trailingBadge, item.b24ui?.trailingBadge] })"
           />
         </slot>
       </TabsTrigger>
@@ -107,7 +112,7 @@ defineExpose({
         :key="index"
         :value="get(item, props.valueKey) ?? String(index)"
         data-slot="content"
-        :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content, item.class] })"
+        :class="b24ui.content({ class: [uiProp?.content, item.b24ui?.content, item.class] })"
       >
         <slot
           :name="item.slot || 'content'"

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

@@ -1,3 +1,4 @@
+import type { ComponentPublicInstance } from 'vue';
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/tabs';
@@ -94,7 +95,7 @@ declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaite
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        triggersRef: import("vue").Ref<any[], any[]>;
+        triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
     attrs: any;
     slots: TabsSlots<T>;