@bitrix24/b24ui-nuxt 2.2.1 → 2.3.0

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

@@ -2,7 +2,7 @@ import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/checkbox-group';
 import type { CheckboxProps } from '../types';
-import type { AcceptableValue, GetItemKeys, GetModelValue } from '../types/utils';
+import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
 export type CheckboxGroupValue = AcceptableValue;
@@ -54,13 +54,13 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGrou
      * The orientation the checkbox buttons are laid out.
      * @defaultValue 'vertical'
      */
-    orientation?: CheckboxGroupRootProps['orientation'];
+    orientation?: CheckboxGroup['variants']['orientation'];
     class?: any;
     b24ui?: CheckboxGroup['slots'] & CheckboxProps['b24ui'];
 }
-export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> = CheckboxGroupRootEmits<T[number]> & {
+export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> = Omit<CheckboxGroupRootEmits, 'update:modelValue'> & {
     change: [event: Event];
-};
+} & GetModelValueEmits<T, VK, true>;
 type SlotProps<T extends CheckboxGroupItem> = (props: {
     item: T & {
         id: string;
@@ -71,19 +71,24 @@ export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGrou
     label: SlotProps<T[number]>;
     description: SlotProps<T[number]>;
 }
-declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<CheckboxGroupProps<T, VK> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__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<CheckboxGroupProps<T, VK> & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>[]) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/CheckboxGroup.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   variant: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
   class: { type: null, required: false },
-  b24ui: { type: void 0, required: false },
+  b24ui: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
   loop: { type: Boolean, required: false },
   name: { type: String, required: false },
@@ -32,7 +32,7 @@ const props = defineProps({
   color: { type: null, required: false, default: "air-primary" },
   indicator: { type: null, required: false }
 });
-const emits = defineEmits(["update:modelValue", "change"]);
+const emits = defineEmits(["change", "update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emits);

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

@@ -2,7 +2,7 @@ import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/checkbox-group';
 import type { CheckboxProps } from '../types';
-import type { AcceptableValue, GetItemKeys, GetModelValue } from '../types/utils';
+import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
 export type CheckboxGroupValue = AcceptableValue;
@@ -54,13 +54,13 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGrou
      * The orientation the checkbox buttons are laid out.
      * @defaultValue 'vertical'
      */
-    orientation?: CheckboxGroupRootProps['orientation'];
+    orientation?: CheckboxGroup['variants']['orientation'];
     class?: any;
     b24ui?: CheckboxGroup['slots'] & CheckboxProps['b24ui'];
 }
-export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> = CheckboxGroupRootEmits<T[number]> & {
+export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> = Omit<CheckboxGroupRootEmits, 'update:modelValue'> & {
     change: [event: Event];
-};
+} & GetModelValueEmits<T, VK, true>;
 type SlotProps<T extends CheckboxGroupItem> = (props: {
     item: T & {
         id: string;
@@ -71,19 +71,24 @@ export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGrou
     label: SlotProps<T[number]>;
     description: SlotProps<T[number]>;
 }
-declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<CheckboxGroupProps<T, VK> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__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<CheckboxGroupProps<T, VK> & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>[]) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -61,6 +61,8 @@ export interface ChipSlots {
     content(props?: {}): any;
     trailing(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipProps & {
     show?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -69,9 +71,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipPr
     show?: boolean;
 }> & Readonly<{
     "onUpdate:show"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    inset: boolean;
+    inverted: boolean;
+    standalone: boolean;
+    hideZero: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Chip.vue

@@ -20,7 +20,7 @@ const props = defineProps({
   standalone: { type: Boolean, required: false, default: false },
   hideZero: { type: Boolean, required: false, default: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const show = defineModel("show", { type: Boolean, ...{ default: true } });

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

@@ -61,6 +61,8 @@ export interface ChipSlots {
     content(props?: {}): any;
     trailing(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipProps & {
     show?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -69,9 +71,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipPr
     show?: boolean;
 }> & Readonly<{
     "onUpdate:show"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    inset: boolean;
+    inverted: boolean;
+    standalone: boolean;
+    hideZero: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -20,13 +20,15 @@ export interface CollapsibleSlots {
     }): any;
     content(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapsibleSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    unmountOnHide: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapsibleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Collapsible.vue

@@ -11,7 +11,7 @@ import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },

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

@@ -20,13 +20,15 @@ export interface CollapsibleSlots {
     }): any;
     content(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapsibleSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    unmountOnHide: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapsibleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -32,6 +32,8 @@ export type ColorPickerProps = {
     class?: any;
     b24ui?: ColorPicker['slots'];
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps & {
     modelValue?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -40,6 +42,8 @@ declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps & {
     modelValue?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    defaultValue: string;
+    throttle: number;
+    format: "hex" | "rgb" | "hsl" | "cmyk" | "lab";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ColorPicker.vue

@@ -35,7 +35,7 @@ const props = defineProps({
   format: { type: String, required: false, default: "hex" },
   size: { type: null, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const modelValue = defineModel({ type: String, ...void 0 });
 const appConfig = useAppConfig();

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

@@ -32,6 +32,8 @@ export type ColorPickerProps = {
     class?: any;
     b24ui?: ColorPicker['slots'];
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps & {
     modelValue?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -40,6 +42,8 @@ declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps & {
     modelValue?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    defaultValue: string;
+    throttle: number;
+    format: "hex" | "rgb" | "hsl" | "cmyk" | "lab";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -55,12 +55,16 @@ export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPalet
 /**
  * @memo not use loadingIcon
  */
-export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading'> {
+export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior' | 'by'>, Pick<UseComponentIconsProps, 'loading'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: CommandPalette['variants']['size'];
     /**
      * The icon displayed in the input.
      * @defaultValue icons.search
@@ -120,6 +124,11 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @IconComponent
      */
     backIcon?: IconComponent;
+    /**
+     * Configure the input or hide it with `false`.
+     * @defaultValue true
+     */
+    input?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
     groups?: G[];
     /**
      * Options for [useFuse](https://vueuse.org/integrations/useFuse).
@@ -146,11 +155,16 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
          */
         overscan?: number;
         /**
-         * Estimated size (in px) of each item
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
          * @defaultValue 32
          */
-        estimateSize?: number;
+        estimateSize?: number | ((index: number) => number);
     };
+    /**
+     * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+     * @defaultValue undefined
+     */
+    valueKey?: GetItemKeys<T>;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -197,13 +211,22 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
     'item-description': SlotProps<T>;
     'item-trailing': SlotProps<T>;
 } & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>;
-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_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(CommandPaletteProps<G, 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;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
-        ref: HTMLElement;
-        value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void) & ((evt: "update:searchTerm", value: string) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+        onHighlight?: ((payload: {
+            ref: HTMLElement;
+            value: T;
+        } | undefined) => any) | undefined;
+        onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+        onLeave?: ((event: Event) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -212,12 +235,12 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((evt: "update:searchTerm", value: string) => void);
+    } | undefined) => 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>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/CommandPalette.vue

@@ -4,7 +4,7 @@ import theme from "#build/b24ui/command-palette";
 
 <script setup>
 import { computed, ref, useTemplateRef, toRef } from "vue";
-import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from "reka-ui";
+import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick, createReusableTemplate, refThrottled } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
@@ -26,6 +26,7 @@ import B24Kbd from "./Kbd.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
+  size: { type: null, required: false },
   icon: { type: [Function, Object], required: false },
   trailingIcon: { type: [Function, Object], required: false },
   selectedIcon: { type: [Function, Object], required: false },
@@ -36,20 +37,23 @@ const props = defineProps({
   closeIcon: { type: [Function, Object], required: false },
   back: { type: [Boolean, Object], required: false, default: true },
   backIcon: { type: [Function, Object], required: false },
+  input: { type: [Boolean, Object], required: false, default: true },
   groups: { type: Array, required: false },
   fuse: { type: Object, required: false },
   virtualize: { type: [Boolean, Object], required: false, default: false },
+  valueKey: { type: null, required: false },
   labelKey: { type: null, required: false, default: "label" },
   descriptionKey: { type: null, required: false, default: "description" },
   preserveGroupOrder: { type: Boolean, required: false, default: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  modelValue: { type: null, required: false, default: "" },
+  modelValue: { type: null, required: false },
   defaultValue: { type: null, required: false },
   highlightOnHover: { type: Boolean, required: false, default: true },
   selectionBehavior: { type: String, required: false },
+  by: { type: [String, Function], required: false },
   loading: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:modelValue", "highlight", "entryFocus", "leave", "update:open"]);
@@ -57,12 +61,11 @@ const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover"), emits);
-const inputProps = useForwardProps(reactivePick(props, "loading"));
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover", "by"), emits);
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
   return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-    estimateSize: getEstimateSize(filteredItems.value, "md", props.descriptionKey)
+    estimateSize: getEstimateSize(filteredItems.value, "md", props.descriptionKey, !!slots["item-description"])
   });
 });
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
@@ -82,6 +85,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   }
 });
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.commandPalette || {} })({
+  size: props.size,
   virtualize: !!props.virtualize
 }));
 const fuse = computed(() => defu({}, props.fuse, {
@@ -210,13 +214,13 @@ function onSelect(e, item) {
 
 <template>
   <DefineItemTemplate v-slot="{ item, index, group }">
-    <ListboxItem
-      :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
-      :disabled="item.disabled"
-      as-child
-      @select="onSelect($event, item)"
-    >
-      <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+    <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+      <ListboxItem
+        :value="props.valueKey ? get(item, props.valueKey) : omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
+        :disabled="item.disabled"
+        as-child
+        @select="onSelect($event, item)"
+      >
         <B24LinkBase
           v-bind="slotProps"
           data-slot="item"
@@ -365,19 +369,20 @@ function onSelect(e, item) {
             </span>
           </slot>
         </B24LinkBase>
-      </B24Link>
-    </ListboxItem>
+      </ListboxItem>
+    </B24Link>
   </DefineItemTemplate>
 
   <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <ListboxFilter v-model="searchTerm" as-child>
+    <ListboxFilter v-if="input" v-model="searchTerm" as-child>
       <B24Input
-        :placeholder="placeholder"
         no-border
         no-padding
+        :size="size"
+        v-bind="typeof props.input === 'object' ? props.input : {}"
+        :placeholder="placeholder"
         :autofocus="autofocus"
-        v-bind="inputProps"
-        size="xl"
+        :loading="loading"
         :trailing-icon="trailingIcon"
         :icon="icon || icons.search"
         data-slot="input"
@@ -388,7 +393,7 @@ function onSelect(e, item) {
           <slot name="back" :b24ui="b24ui">
             <B24Button
               :icon="backIcon || icons.arrowLeft"
-              size="sm"
+              :size="size"
               color="air-selection"
               :aria-label="t('commandPalette.back')"
               v-bind="typeof back === 'object' ? back : {}"
@@ -404,7 +409,7 @@ function onSelect(e, item) {
             <B24Button
               v-if="close"
               :icon="closeIcon || icons.close"
-              size="sm"
+              :size="size"
               color="air-tertiary-no-accent"
               :aria-label="t('commandPalette.close')"
               v-bind="typeof close === 'object' ? close : {}"

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

@@ -55,12 +55,16 @@ export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPalet
 /**
  * @memo not use loadingIcon
  */
-export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading'> {
+export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior' | 'by'>, Pick<UseComponentIconsProps, 'loading'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: CommandPalette['variants']['size'];
     /**
      * The icon displayed in the input.
      * @defaultValue icons.search
@@ -120,6 +124,11 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @IconComponent
      */
     backIcon?: IconComponent;
+    /**
+     * Configure the input or hide it with `false`.
+     * @defaultValue true
+     */
+    input?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
     groups?: G[];
     /**
      * Options for [useFuse](https://vueuse.org/integrations/useFuse).
@@ -146,11 +155,16 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
          */
         overscan?: number;
         /**
-         * Estimated size (in px) of each item
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
          * @defaultValue 32
          */
-        estimateSize?: number;
+        estimateSize?: number | ((index: number) => number);
     };
+    /**
+     * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+     * @defaultValue undefined
+     */
+    valueKey?: GetItemKeys<T>;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -197,13 +211,22 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
     'item-description': SlotProps<T>;
     'item-trailing': SlotProps<T>;
 } & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>;
-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_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(CommandPaletteProps<G, 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;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
-        ref: HTMLElement;
-        value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void) & ((evt: "update:searchTerm", value: string) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+        onHighlight?: ((payload: {
+            ref: HTMLElement;
+            value: T;
+        } | undefined) => any) | undefined;
+        onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+        onLeave?: ((event: Event) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -212,12 +235,12 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((evt: "update:searchTerm", value: string) => void);
+    } | undefined) => 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>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};