@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

package/dist/runtime/components/CommandPalette.vue

@@ -9,6 +9,7 @@ import { defu } from "defu";
 import { reactivePick, createReusableTemplate, refThrottled } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { omit, get } from "../utils";
 import { highlight } from "../utils/fuse";
@@ -61,6 +62,7 @@ const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("commandPalette", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover", "by"), emits);
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
@@ -224,7 +226,7 @@ function onSelect(e, item) {
         <B24LinkBase
           v-bind="slotProps"
           data-slot="item"
-          :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class], active: active || item.active })"
+          :class="b24ui.item({ class: [uiProp?.item, item.b24ui?.item, item.class], active: active || item.active })"
         >
           <slot
             :name="item.slot || group?.slot || 'item'"
@@ -242,38 +244,38 @@ function onSelect(e, item) {
                 :is="icons.loading"
                 v-if="item.loading"
                 data-slot="itemLeadingIcon"
-                :class="b24ui.itemLeadingIcon({ class: [props.b24ui?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], loading: true })"
+                :class="b24ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], loading: true })"
               />
               <Component
                 :is="item.icon"
                 v-else-if="item.icon"
                 data-slot="itemLeadingIcon"
-                :class="b24ui.itemLeadingIcon({ class: [props.b24ui?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], active: active || item.active })"
+                :class="b24ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], active: active || item.active })"
               />
               <B24Avatar
                 v-else-if="item.avatar"
-                :size="item.b24ui?.itemLeadingAvatarSize || props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
+                :size="item.b24ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
                 v-bind="item.avatar"
                 data-slot="itemLeadingAvatar"
-                :class="b24ui.itemLeadingAvatar({ class: [props.b24ui?.itemLeadingAvatar, item.b24ui?.itemLeadingAvatar], active: active || item.active })"
+                :class="b24ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.b24ui?.itemLeadingAvatar], active: active || item.active })"
               />
               <B24Chip
                 v-else-if="item.chip"
-                :size="item.b24ui?.itemLeadingChipSize || props.b24ui?.itemLeadingChipSize || b24ui.itemLeadingChipSize()"
+                :size="item.b24ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || b24ui.itemLeadingChipSize()"
                 inset
                 standalone
                 v-bind="item.chip"
                 data-slot="itemLeadingChip"
-                :class="b24ui.itemLeadingChip({ class: [props.b24ui?.itemLeadingChip, item.b24ui?.itemLeadingChip], active: active || item.active })"
+                :class="b24ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.b24ui?.itemLeadingChip], active: active || item.active })"
               />
             </slot>
 
             <span
               v-if="item.prefix || (item.labelHtml || get(item, props.labelKey)) || (item.suffixHtml || item.suffix) || !!slots[item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`])"
               data-slot="itemWrapper"
-              :class="b24ui.itemWrapper({ class: [props.b24ui?.itemWrapper, item.b24ui?.itemWrapper] })"
+              :class="b24ui.itemWrapper({ class: [uiProp?.itemWrapper, item.b24ui?.itemWrapper] })"
             >
-              <span data-slot="itemLabel" :class="b24ui.itemLabel({ class: [props.b24ui?.itemLabel, item.b24ui?.itemLabel], active: active || item.active })">
+              <span data-slot="itemLabel" :class="b24ui.itemLabel({ class: [uiProp?.itemLabel, item.b24ui?.itemLabel], active: active || item.active })">
                 <slot
                   :name="item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`"
                   :item="item"
@@ -283,31 +285,31 @@ function onSelect(e, item) {
                   <span
                     v-if="item.prefix"
                     data-slot="itemLabelPrefix"
-                    :class="b24ui.itemLabelPrefix({ class: [props.b24ui?.itemLabelPrefix, item.b24ui?.itemLabelPrefix] })"
+                    :class="b24ui.itemLabelPrefix({ class: [uiProp?.itemLabelPrefix, item.b24ui?.itemLabelPrefix] })"
                   >{{ item.prefix }}</span>
 
                   <span
                     v-if="item.labelHtml"
                     data-slot="itemLabelBase"
-                    :class="b24ui.itemLabelBase({ class: [props.b24ui?.itemLabelBase, item.b24ui?.itemLabelBase], active: active || item.active })"
+                    :class="b24ui.itemLabelBase({ class: [uiProp?.itemLabelBase, item.b24ui?.itemLabelBase], active: active || item.active })"
                     v-html="item.labelHtml || get(item, props.labelKey)"
                   />
                   <span
                     v-else
                     data-slot="itemLabelBase"
-                    :class="b24ui.itemLabelBase({ class: [props.b24ui?.itemLabelBase, item.b24ui?.itemLabelBase], active: active || item.active })"
+                    :class="b24ui.itemLabelBase({ class: [uiProp?.itemLabelBase, item.b24ui?.itemLabelBase], active: active || item.active })"
                   >{{ get(item, props.labelKey) }}</span>
 
                   <span
                     v-if="item.suffixHtml"
                     data-slot="itemLabelSuffix"
-                    :class="b24ui.itemLabelSuffix({ class: [props.b24ui?.itemLabelSuffix, item.b24ui?.itemLabelSuffix], active: active || item.active })"
+                    :class="b24ui.itemLabelSuffix({ class: [uiProp?.itemLabelSuffix, item.b24ui?.itemLabelSuffix], active: active || item.active })"
                     v-html="item.suffixHtml || item.suffix"
                   />
                   <span
                     v-else-if="item.suffix"
                     data-slot="itemLabelSuffix"
-                    :class="b24ui.itemLabelSuffix({ class: [props.b24ui?.itemLabelSuffix, item.b24ui?.itemLabelSuffix], active: active || item.active })"
+                    :class="b24ui.itemLabelSuffix({ class: [uiProp?.itemLabelSuffix, item.b24ui?.itemLabelSuffix], active: active || item.active })"
                   >{{ item.suffix }}</span>
                 </slot>
               </span>
@@ -315,7 +317,7 @@ function onSelect(e, item) {
               <span
                 v-if="get(item, props.descriptionKey)"
                 data-slot="itemDescription"
-                :class="b24ui.itemDescription({ class: [props.b24ui?.itemDescription, item.b24ui?.itemDescription] })"
+                :class="b24ui.itemDescription({ class: [uiProp?.itemDescription, item.b24ui?.itemDescription] })"
               >
                 <slot
                   :name="item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`"
@@ -328,7 +330,7 @@ function onSelect(e, item) {
               </span>
             </span>
 
-            <span data-slot="itemTrailing" :class="b24ui.itemTrailing({ class: [props.b24ui?.itemTrailing, item.b24ui?.itemTrailing] })">
+            <span data-slot="itemTrailing" :class="b24ui.itemTrailing({ class: [uiProp?.itemTrailing, item.b24ui?.itemTrailing] })">
               <slot
                 :name="item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`"
                 :item="item"
@@ -339,14 +341,14 @@ function onSelect(e, item) {
                   :is="childrenIcon || icons.chevronRight"
                   v-if="item.children && item.children.length > 0"
                   data-slot="itemTrailingIcon"
-                  :class="b24ui.itemTrailingIcon({ class: [props.b24ui?.itemTrailingIcon, item.b24ui?.itemTrailingIcon] })"
+                  :class="b24ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.b24ui?.itemTrailingIcon] })"
                 />
 
-                <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="b24ui.itemTrailingKbds({ class: [props.b24ui?.itemTrailingKbds, item.b24ui?.itemTrailingKbds] })">
+                <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="b24ui.itemTrailingKbds({ class: [uiProp?.itemTrailingKbds, item.b24ui?.itemTrailingKbds] })">
                   <B24Kbd
                     v-for="(kbd, kbdIndex) in item.kbds"
                     :key="kbdIndex"
-                    :size="item.b24ui?.itemTrailingKbdsSize || props.b24ui?.itemTrailingKbdsSize || b24ui.itemTrailingKbdsSize()"
+                    :size="item.b24ui?.itemTrailingKbdsSize || uiProp?.itemTrailingKbdsSize || b24ui.itemTrailingKbdsSize()"
                     v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
                   />
                 </span>
@@ -355,7 +357,7 @@ function onSelect(e, item) {
                   :is="group.highlightedIcon"
                   v-else-if="group?.highlightedIcon"
                   data-slot="itemTrailingHighlightedIcon"
-                  :class="b24ui.itemTrailingHighlightedIcon({ class: [props.b24ui?.itemTrailingHighlightedIcon, item.b24ui?.itemTrailingHighlightedIcon] })"
+                  :class="b24ui.itemTrailingHighlightedIcon({ class: [uiProp?.itemTrailingHighlightedIcon, item.b24ui?.itemTrailingHighlightedIcon] })"
                 />
               </slot>
 
@@ -363,7 +365,7 @@ function onSelect(e, item) {
                 <Component
                   :is="selectedIcon || icons.check"
                   data-slot="itemTrailingIcon"
-                  :class="b24ui.itemTrailingIcon({ class: [props.b24ui?.itemTrailingIcon, item.b24ui?.itemTrailingIcon] })"
+                  :class="b24ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.b24ui?.itemTrailingIcon] })"
                 />
               </ListboxItemIndicator>
             </span>
@@ -373,7 +375,7 @@ function onSelect(e, item) {
     </B24Link>
   </DefineItemTemplate>
 
-  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <ListboxFilter v-if="input" v-model="searchTerm" as-child>
       <B24Input
         no-border
@@ -386,7 +388,7 @@ function onSelect(e, item) {
         :trailing-icon="trailingIcon"
         :icon="icon || icons.search"
         data-slot="input"
-        :class="b24ui.input({ class: props.b24ui?.input })"
+        :class="b24ui.input({ class: uiProp?.input })"
         @keydown.backspace="onBackspace"
       >
         <template v-if="history?.length && (back || !!slots.back)" #leading>
@@ -398,7 +400,7 @@ function onSelect(e, item) {
               :aria-label="t('commandPalette.back')"
               v-bind="typeof back === 'object' ? back : {}"
               data-slot="back"
-              :class="b24ui.back({ class: props.b24ui?.back })"
+              :class="b24ui.back({ class: uiProp?.back })"
               @click="navigateBack"
             />
           </slot>
@@ -414,7 +416,7 @@ function onSelect(e, item) {
               :aria-label="t('commandPalette.close')"
               v-bind="typeof close === 'object' ? close : {}"
               data-slot="close"
-              :class="b24ui.close({ class: props.b24ui?.close })"
+              :class="b24ui.close({ class: uiProp?.close })"
               @click="emits('update:open', false)"
             />
           </slot>
@@ -422,8 +424,8 @@ function onSelect(e, item) {
       </B24Input>
     </ListboxFilter>
 
-    <ListboxContent data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
-      <div v-if="filteredGroups?.length" role="presentation" data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+    <ListboxContent data-slot="content" :class="b24ui.content({ class: uiProp?.content })">
+      <div v-if="filteredGroups?.length" role="presentation" data-slot="viewport" :class="b24ui.viewport({ class: uiProp?.viewport })">
         <ListboxVirtualizer
           v-if="!!virtualize"
           v-slot="{ option: item, virtualItem }"
@@ -435,8 +437,8 @@ function onSelect(e, item) {
         </ListboxVirtualizer>
 
         <template v-else>
-          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="b24ui.group({ class: props.b24ui?.group })">
-            <ListboxGroupLabel v-if="get(group, props.labelKey)" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
+          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="b24ui.group({ class: uiProp?.group })">
+            <ListboxGroupLabel v-if="get(group, props.labelKey)" data-slot="label" :class="b24ui.label({ class: uiProp?.label })">
               {{ get(group, props.labelKey) }}
             </ListboxGroupLabel>
 
@@ -451,14 +453,14 @@ function onSelect(e, item) {
         </template>
       </div>
 
-      <div v-else data-slot="empty" :class="b24ui.empty({ class: props.b24ui?.empty })">
+      <div v-else data-slot="empty" :class="b24ui.empty({ class: uiProp?.empty })">
         <slot name="empty" :search-term="searchTerm">
           {{ searchTerm ? t("commandPalette.noMatch", { searchTerm }) : t("commandPalette.noData") }}
         </slot>
       </div>
     </ListboxContent>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
       <slot name="footer" :b24ui="b24ui" />
     </div>
   </ListboxRoot>

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

@@ -1,4 +1,5 @@
 import type { ListboxRootProps, ListboxRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/b24ui/command-palette';
@@ -191,38 +192,38 @@ type SlotProps<T> = (props: {
     item: T;
     index: number;
     b24ui: CommandPalette['b24ui'];
-}) => any;
-export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
-    'empty'(props: {
+}) => VNode[];
+export type CommandPaletteSlots<T extends CommandPaletteItem = CommandPaletteItem> = {
+    'empty'?(props: {
         searchTerm?: string;
-    }): any;
-    'footer'(props: {
+    }): VNode[];
+    'footer'?(props: {
         b24ui: CommandPalette['b24ui'];
-    }): any;
-    'back'(props: {
+    }): VNode[];
+    'back'?(props: {
         b24ui: CommandPalette['b24ui'];
-    }): any;
-    'close'(props: {
+    }): VNode[];
+    'close'?(props: {
         b24ui: CommandPalette['b24ui'];
-    }): any;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
-    'item-description': SlotProps<T>;
-    'item-trailing': SlotProps<T>;
-} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>;
+    }): VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: SlotProps<T>;
+    'item-description'?: SlotProps<T>;
+    'item-trailing'?: SlotProps<T>;
+} & Record<string, SlotProps<T>>;
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends CommandPaletteItem>(__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<(CommandPaletteProps<G, T> & {
         searchTerm?: string;
     }) & {
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
             value: T;
         } | undefined) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
         onLeave?: ((event: Event) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
@@ -231,11 +232,11 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: CommandPaletteSlots<G, T>;
-    emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
+    slots: CommandPaletteSlots<T>;
+    emit: (((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface ContainerProps {
     /**
      * The element or component this component should render as.
@@ -5,9 +6,12 @@ export interface ContainerProps {
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface ContainerSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Container.vue

@@ -6,18 +6,21 @@ import theme from "#build/b24ui/container";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("container", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.container || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui({ class: props.class })">
+  <Primitive :as="as" :class="b24ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface ContainerProps {
     /**
      * The element or component this component should render as.
@@ -5,9 +6,12 @@ export interface ContainerProps {
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface ContainerSlots {
-    default(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuContentEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/context-menu';
 import type { AvatarProps, IconComponent, KbdProps, LinkProps } from '../types';
@@ -82,36 +83,36 @@ export interface ContextMenuEmits extends ContextMenuRootEmits {
 }
 type SlotProps<T extends ContextMenuItem> = (props: {
     item: T;
-    active?: boolean;
+    active: boolean;
     index: number;
     b24ui: ContextMenu['b24ui'];
-}) => any;
+}) => VNode[];
 export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
-    'default'(props?: {}): any;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    'default'?(props?: {}): VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-description': (props: {
+    }) => VNode[];
+    'item-description'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-trailing': SlotProps<T>;
-    'content-top': (props: {
+    }) => VNode[];
+    'item-trailing'?: SlotProps<T>;
+    'content-top'?: (props: {
         sub: boolean;
-    }) => any;
-    'content-bottom': (props: {
+    }) => VNode[];
+    'content-bottom'?: (props: {
         sub: boolean;
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
-    active?: boolean;
+    active: boolean;
     index: number;
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
-    active?: boolean;
+    active: boolean;
     index: number;
     b24ui: ContextMenu['b24ui'];
 }>;

package/dist/runtime/components/ContextMenu.vue

@@ -7,6 +7,7 @@ import { computed, toRef } from "vue";
 import { ContextMenuRoot, ContextMenuTrigger, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import B24ContextMenuContent from "./ContextMenuContent.vue";
@@ -28,6 +29,7 @@ const props = defineProps({
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("contextMenu", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "modal"), emits);
 const contentProps = toRef(() => props.content);
 const getProxySlots = () => omit(slots, ["default"]);
@@ -42,9 +44,9 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.context
 
     <B24ContextMenuContent
       data-slot="content"
-      :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
+      :class="b24ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
       :b24ui="b24ui"
-      :b24ui-override="props.b24ui"
+      :b24ui-override="uiProp"
       v-bind="contentProps"
       :items="items"
       :portal="portal"

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

@@ -1,4 +1,5 @@
 import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuContentEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/context-menu';
 import type { AvatarProps, IconComponent, KbdProps, LinkProps } from '../types';
@@ -82,36 +83,36 @@ export interface ContextMenuEmits extends ContextMenuRootEmits {
 }
 type SlotProps<T extends ContextMenuItem> = (props: {
     item: T;
-    active?: boolean;
+    active: boolean;
     index: number;
     b24ui: ContextMenu['b24ui'];
-}) => any;
+}) => VNode[];
 export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
-    'default'(props?: {}): any;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    'default'?(props?: {}): VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-description': (props: {
+    }) => VNode[];
+    'item-description'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-trailing': SlotProps<T>;
-    'content-top': (props: {
+    }) => VNode[];
+    'item-trailing'?: SlotProps<T>;
+    'content-top'?: (props: {
         sub: boolean;
-    }) => any;
-    'content-bottom': (props: {
+    }) => VNode[];
+    'content-bottom'?: (props: {
         sub: boolean;
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
-    active?: boolean;
+    active: boolean;
     index: number;
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
-    active?: boolean;
+    active: boolean;
     index: number;
     b24ui: ContextMenu['b24ui'];
 }>;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/countdown';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
@@ -70,13 +71,13 @@ export interface CountdownEmits {
     progress: [value: CountdownData];
 }
 export interface CountdownSlots {
-    leading(props: {
+    leading?(props: {
         b24ui: Countdown['b24ui'];
-    }): any;
-    default(props: CountdownData & {
+    }): VNode[];
+    default?(props: CountdownData & {
         formatTime: string;
         b24ui: Countdown['b24ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Countdown.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/countdown";
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
@@ -35,6 +36,7 @@ const { isLeading, leadingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: false }))
 );
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("countdown", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.countdown || {} })({
   size: props.size,
   leading: Boolean(isLeading.value),
@@ -239,29 +241,29 @@ defineExpose({
     :as="as"
     v-bind="$attrs"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
     <svg
       v-if="props.useCircle"
       data-slot="circleBase"
-      :class="b24ui.circleBase({ class: [props.b24ui?.circleBase] })"
+      :class="b24ui.circleBase({ class: [uiProp?.circleBase] })"
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
         data-slot="circleGroup"
-        :class="b24ui.circleGroup({ class: [props.b24ui?.circleGroup] })"
+        :class="b24ui.circleGroup({ class: [uiProp?.circleGroup] })"
       >
         <circle
           data-slot="circleElement"
-          :class="b24ui.circleElement({ class: [props.b24ui?.circleElement] })"
+          :class="b24ui.circleElement({ class: [uiProp?.circleElement] })"
           cx="50"
           cy="50"
           r="45"
         />
         <path
           data-slot="circlePath"
-          :class="b24ui.circlePath({ class: [props.b24ui?.circlePath] })"
+          :class="b24ui.circlePath({ class: [uiProp?.circlePath] })"
           :stroke-dasharray="fullDashArray"
           d="M 50, 50 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0"
         />
@@ -272,14 +274,14 @@ defineExpose({
         :is="leadingIconName"
         v-if="isLeading && typeof leadingIconName !== 'undefined'"
         data-slot="leadingIcon"
-        :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+        :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
       />
       <B24Avatar
         v-else-if="!!avatar"
-        :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+        :size="uiProp?.leadingAvatarSize || b24ui.leadingAvatarSize()"
         v-bind="avatar"
         data-slot="leadingAvatar"
-        :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+        :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
       />
     </slot>
     <slot
@@ -296,7 +298,7 @@ defineExpose({
       :format-time="formatTime"
       :b24ui="b24ui"
     >
-      <span data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
+      <span data-slot="label" :class="b24ui.label({ class: uiProp?.label })">
         {{ formatTime }}
       </span>
     </slot>