@bitrix24/b24ui-nuxt 0.7.2 → 1.0.1

package/dist/runtime/components/Select.vue

@@ -12,9 +12,10 @@ import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { usePortal } from "../composables/usePortal";
-import { compare, get, isArrayOfArray } from "../utils";
+import { get, getDisplayValue, isArrayOfArray } from "../utils";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
+import B24Badge from "./Badge.vue";
 import B24Avatar from "./Avatar.vue";
 import B24Chip from "./Chip.vue";
 defineOptions({ inheritAttrs: false });
@@ -62,7 +63,7 @@ const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "disabled", "autocomplete", "required", "multiple"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
-const arrowProps = toRef(() => props.arrow);
+const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
 const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(
@@ -82,7 +83,6 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.select
   noBorder: Boolean(props.noBorder),
   underline: Boolean(props.underline),
   highlight: highlight.value,
-  tagColor: props.tagColor,
   leading: Boolean(isLeading.value || !!props.avatar || !!slots.leading),
   trailing: Boolean(isTrailing.value || !!slots.trailing),
   buttonGroup: orientation.value
@@ -93,11 +93,16 @@ const groups = computed(
 const items = computed(() => groups.value.flatMap((group) => group));
 function displayValue(value) {
   if (props.multiple && Array.isArray(value)) {
-    const values = value.map((v) => displayValue(v)).filter(Boolean);
-    return values?.length ? values.join(", ") : void 0;
+    const displayedValues = value.map((item) => getDisplayValue(items.value, item, {
+      labelKey: props.labelKey,
+      valueKey: props.valueKey
+    })).filter((v) => v != null && v !== "");
+    return displayedValues.length > 0 ? displayedValues.join(", ") : void 0;
   }
-  const item = items.value.find((item2) => compare(typeof item2 === "object" ? get(item2, props.valueKey) : item2, value));
-  return item && (typeof item === "object" ? get(item, props.labelKey) : item);
+  return getDisplayValue(items.value, value, {
+    labelKey: props.labelKey,
+    valueKey: props.valueKey
+  });
 }
 const triggerRef = ref(null);
 function autoFocus() {
@@ -156,9 +161,13 @@ defineExpose({
         :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
         v-bind="{ ...$attrs, ...ariaAttrs }"
       >
-        <div v-if="isTag" :class="b24ui.tag({ class: props.b24ui?.tag })">
-          {{ props.tag }}
-        </div>
+        <B24Badge
+          v-if="isTag"
+          :class="b24ui.tag({ class: props.b24ui?.tag })"
+          :color="props.tagColor"
+          :label="props.tag"
+          size="xs"
+        />
 
         <span v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
           <slot name="leading" :model-value="modelValue" :open="open" :b24ui="b24ui">
@@ -167,7 +176,12 @@ defineExpose({
               v-if="isLeading && leadingIconName"
               :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
             />
-            <B24Avatar v-else-if="!!avatar" :size="props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()" v-bind="avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
+            <B24Avatar
+              v-else-if="!!avatar"
+              :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+              v-bind="avatar"
+              :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+            />
           </slot>
         </span>
 

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

@@ -2,7 +2,7 @@ import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectConten
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/select';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ChipProps, IconComponent } from '../types';
+import type { AvatarProps, ChipProps, BadgeProps, IconComponent } from '../types';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
 type Select = ComponentConfig<typeof theme, AppConfig, 'select'>;
 interface SelectItemBase {
@@ -33,7 +33,7 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     /** The placeholder text when the select is empty. */
     placeholder?: string;
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
     color?: Select['variants']['color'];
     /**
@@ -62,9 +62,9 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     rounded?: boolean;
     tag?: string;
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
-    tagColor?: Select['variants']['tagColor'];
+    tagColor?: BadgeProps['color'];
     /**
      * The icon displayed to open the menu.
      * @defaultValue icons.chevronDown
@@ -219,7 +219,7 @@ declare const _default: <T extends ArrayOrNested<SelectItem>, VK extends GetItem
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").SelectTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null, ({
             $: import("vue").ComponentInternalInstance;
@@ -270,7 +270,7 @@ declare const _default: <T extends ArrayOrNested<SelectItem>, VK extends GetItem
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").SelectTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null>;
     }>): void;
@@ -282,5 +282,5 @@ declare const _default: <T extends ArrayOrNested<SelectItem>, VK extends GetItem
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/SelectMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/b24ui/select-menu";
 </script>
 
 <script setup>
-import { ref, computed, onMounted, toRef, toRaw } from "vue";
+import { ref, computed, onMounted, toRef, toRaw, nextTick } from "vue";
 import {
   ComboboxRoot,
   ComboboxArrow,
@@ -31,9 +31,10 @@ import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
-import { compare, get, isArrayOfArray } from "../utils";
+import { compare, get, getDisplayValue, isArrayOfArray } from "../utils";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
+import B24Badge from "./Badge.vue";
 import B24Avatar from "./Avatar.vue";
 import B24Chip from "./Chip.vue";
 import B24Input from "./Input.vue";
@@ -91,8 +92,8 @@ const { contains } = useFilter({ sensitivity: "base" });
 const rootProps = useForwardPropsEmits(reactivePick(props, "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "highlightOnHover"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
-const arrowProps = toRef(() => props.arrow);
-const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), type: "search" }));
+const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
+const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), type: "text", size: "md" }));
 const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(
@@ -113,21 +114,22 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.selectM
   noBorder: Boolean(props.noBorder),
   underline: Boolean(props.underline),
   highlight: highlight.value,
-  tagColor: props.tagColor,
   leading: Boolean(isLeading.value || !!props.avatar || !!slots.leading),
   trailing: Boolean(isTrailing.value || !!slots.trailing),
   buttonGroup: orientation.value
 }));
 function displayValue(value) {
   if (props.multiple && Array.isArray(value)) {
-    const values = value.map((v) => displayValue(v)).filter(Boolean);
-    return values?.length ? values.join(", ") : void 0;
+    const displayedValues = value.map((item) => getDisplayValue(items.value, item, {
+      labelKey: props.labelKey,
+      valueKey: props.valueKey
+    })).filter((v) => v != null && v !== "");
+    return displayedValues.length > 0 ? displayedValues.join(", ") : void 0;
   }
-  if (!props.valueKey) {
-    return value && (typeof value === "object" ? get(value, props.labelKey) : value);
-  }
-  const item = items.value.find((item2) => compare(typeof item2 === "object" ? get(item2, props.valueKey) : item2, value));
-  return item && (typeof item === "object" ? get(item, props.labelKey) : item);
+  return getDisplayValue(items.value, value, {
+    labelKey: props.labelKey,
+    valueKey: props.valueKey
+  });
 }
 const groups = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
@@ -139,13 +141,19 @@ const filteredGroups = computed(() => {
   }
   const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey];
   return groups.value.map((items2) => items2.filter((item) => {
-    if (typeof item !== "object" || item === null) {
+    if (item === void 0 || item === null) {
+      return false;
+    }
+    if (typeof item !== "object") {
       return contains(String(item), searchTerm.value);
     }
     if (item.type && ["label", "separator"].includes(item.type)) {
       return true;
     }
-    return fields.some((field) => contains(get(item, field), searchTerm.value));
+    return fields.some((field) => {
+      const value = get(item, field);
+      return value !== void 0 && value !== null && contains(String(value), searchTerm.value);
+    });
   })).filter((group) => group.filter(
     (item) => !isSelectItem(item) || isSelectItem(item) && (!item.type || !["label", "separator"].includes(item.type))
   ).length > 0);
@@ -171,6 +179,9 @@ function autoFocus() {
   }
 }
 onMounted(() => {
+  nextTick(() => {
+    searchTerm.value = "";
+  });
   setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
@@ -265,9 +276,13 @@ defineExpose({
           :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
           tabindex="0"
         >
-          <div v-if="isTag" :class="b24ui.tag({ class: props.b24ui?.tag })">
-            {{ props.tag }}
-          </div>
+          <B24Badge
+            v-if="isTag"
+            :class="b24ui.tag({ class: props.b24ui?.tag })"
+            :color="props.tagColor"
+            :label="props.tag"
+            size="xs"
+          />
           <span v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
             <slot name="leading" :model-value="modelValue" :open="open" :b24ui="b24ui">
               <Component
@@ -275,7 +290,12 @@ defineExpose({
                 v-if="isLeading && leadingIconName"
                 :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
               />
-              <B24Avatar v-else-if="!!avatar" :size="props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()" v-bind="avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
+              <B24Avatar
+                v-else-if="!!avatar"
+                :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+                v-bind="avatar"
+                :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+              />
             </slot>
           </span>
 
@@ -405,7 +425,6 @@ defineExpose({
                   </ComboboxItem>
                 </template>
               </ComboboxGroup>
-
               <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
             </div>
 

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

@@ -1,8 +1,9 @@
+import { nextTick } from 'vue';
 import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/select-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ChipProps, InputProps, IconComponent } from '../types';
+import type { AvatarProps, ChipProps, InputProps, BadgeProps, IconComponent } from '../types';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
 type SelectMenu = ComponentConfig<typeof theme, AppConfig, 'selectMenu'>;
 interface _SelectMenuItem {
@@ -34,12 +35,12 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     /**
      * Whether to display the search input or not.
      * Can be an object to pass additional props to the input.
-     * `{ placeholder: 'Search...', type: 'search' }`{lang="ts"}
+     * `{ placeholder: 'Search...', type: 'text', size: 'md' }`{lang="ts"}
      * @defaultValue true
      */
     searchInput?: boolean | InputProps;
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
     color?: SelectMenu['variants']['color'];
     /**
@@ -68,9 +69,9 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     rounded?: boolean;
     tag?: string;
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
-    tagColor?: SelectMenu['variants']['tagColor'];
+    tagColor?: BadgeProps['color'];
     /**
      * @defaultValue false
      */
@@ -262,13 +263,13 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
                 errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
             };
             $forceUpdate: () => void;
-            $nextTick: typeof import("vue").nextTick;
+            $nextTick: typeof nextTick;
             $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
         } & Readonly<{
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null, ({
             $: import("vue").ComponentInternalInstance;
@@ -312,13 +313,13 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
                 errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
             };
             $forceUpdate: () => void;
-            $nextTick: typeof import("vue").nextTick;
+            $nextTick: typeof nextTick;
             $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
         } & Readonly<{
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null>;
     }>): void;
@@ -333,5 +334,5 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Separator.vue

@@ -14,9 +14,9 @@ const props = defineProps({
   label: { type: String, required: false },
   icon: { type: [Function, Object], required: false },
   avatar: { type: Object, required: false },
-  color: { type: null, required: false },
-  size: { type: null, required: false },
-  type: { type: null, required: false },
+  accent: { type: null, required: false, default: "default" },
+  size: { type: null, required: false, default: "thin" },
+  type: { type: null, required: false, default: "solid" },
   orientation: { type: null, required: false, default: "horizontal" },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
@@ -26,7 +26,7 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.separator || {} })({
-  color: props.color,
+  accent: props.accent,
   orientation: props.orientation,
   size: props.size,
   type: props.type

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

@@ -25,9 +25,9 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
     /**
      * @defaultValue 'default'
      */
-    color?: Separator['variants']['color'];
+    accent?: Separator['variants']['accent'];
     /**
-     * @defaultValue 'xs'
+     * @defaultValue 'thin'
      */
     size?: Separator['variants']['size'];
     /**
@@ -45,7 +45,10 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
 export interface SeparatorSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+    size: Separator["variants"]["size"];
+    accent: Separator["variants"]["accent"];
+    type: Separator["variants"]["type"];
     orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
 export default _default;

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

@@ -11,10 +11,13 @@ export interface SidebarProps {
     class?: any;
     b24ui?: Sidebar['slots'];
 }
+/**
+ * @todo add Pick<Xxxx
+ */
 export interface SidebarSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarSlots>;
 export default _default;

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

@@ -15,10 +15,13 @@ export interface SidebarBodyProps {
     class?: any;
     b24ui?: SidebarBody['slots'];
 }
+/**
+ * @todo add Pick<Xxxx
+ */
 export interface SidebarBodySlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarBodyProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarBodyProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarBodyProps> & Readonly<{}>, {
     as: any;
     scrollbarThin: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarBodySlots>;

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

@@ -11,10 +11,13 @@ export interface SidebarFooterProps {
     class?: any;
     b24ui?: SidebarFooter['slots'];
 }
+/**
+ * @todo add Pick<Xxxx
+ */
 export interface SidebarFooterSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarFooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarFooterProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarFooterProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarFooterProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarFooterSlots>;
 export default _default;

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

@@ -11,10 +11,13 @@ export interface SidebarHeaderProps {
     class?: any;
     b24ui?: SidebarHeader['slots'];
 }
+/**
+ * @todo add Pick<Xxxx
+ */
 export interface SidebarHeaderSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarHeaderProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarHeaderProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarHeaderProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarHeaderSlots>;
 export default _default;

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

@@ -11,10 +11,13 @@ export interface SidebarHeadingProps {
     class?: any;
     b24ui?: SidebarHeading['slots'];
 }
+/**
+ * @todo add Pick<Xxxx
+ */
 export interface SidebarHeadingSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarHeadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarHeadingProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarHeadingProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarHeadingProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarHeadingSlots>;
 export default _default;