@lumx/vue 4.13.0-next.5 → 4.14.0-next.0

package/components/combobox/ComboboxButton.d.ts

@@ -7,6 +7,12 @@ export type ComboboxButtonProps = VueToJSXProps<UIProps, 'label' | 'renderButton
     value?: string;
     /** Controls how the label/value is displayed. @default 'show-selection' */
     labelDisplayMode?: ComboboxButtonLabelDisplayMode;
+    /** Called when an option is selected. */
+    onSelect?: (option: {
+        value: string;
+    }) => void;
+    /** Custom render function replacing the default `<Button>`. See `ComboboxButtonProps.renderButton` in core. */
+    renderButton?: UIProps['renderButton'];
 };
 /**
  * Combobox.Button component - Button trigger for select-only combobox mode.
@@ -27,6 +33,12 @@ declare const ComboboxButton: import('vue').DefineSetupFnComponent<ComboboxButto
     value?: string;
     /** Controls how the label/value is displayed. @default 'show-selection' */
     labelDisplayMode?: ComboboxButtonLabelDisplayMode;
+    /** Called when an option is selected. */
+    onSelect?: (option: {
+        value: string;
+    }) => void;
+    /** Custom render function replacing the default `<Button>`. See `ComboboxButtonProps.renderButton` in core. */
+    renderButton?: UIProps["renderButton"];
 } & {
     onSelect?: ((option: {
         value: string;

package/components/combobox/index.d.ts

@@ -33,6 +33,10 @@ export declare const Combobox: {
         label: string;
         value?: string;
         labelDisplayMode?: import('@lumx/core/js/components/Combobox/ComboboxButton').ComboboxButtonLabelDisplayMode;
+        onSelect?: (option: {
+            value: string;
+        }) => void;
+        renderButton?: import('@lumx/core/js/components/Combobox/ComboboxButton').ComboboxButtonProps["renderButton"];
     } & {
         onSelect?: ((option: {
             value: string;

package/components/combobox/useWrappedRenderOptionSlot.d.ts

@@ -0,0 +1,11 @@
+import { ComputedRef, Slot } from 'vue';
+import { JSXElement } from '@lumx/core/js/types';
+import { RenderOptionContext } from '@lumx/core/js/utils/select/types';
+/** Render function passed as `renderOption` to a core Select* template. */
+type WrappedRenderOption = (option: unknown, context: RenderOptionContext) => JSXElement;
+/**
+ * Adapts a Vue scoped slot returning a `<ComboboxOption>` into the `renderOption`
+ * callback shape expected by the core Select* templates.
+ */
+export declare function useWrappedRenderOptionSlot(slot: Slot | undefined): ComputedRef<WrappedRenderOption | undefined>;
+export {};

package/components/combobox/useWrappedRenderSectionTitleSlot.d.ts

@@ -0,0 +1,10 @@
+import { ComputedRef, Slot } from 'vue';
+import { JSXElement } from '@lumx/core/js/types';
+/** Render function passed as `renderSectionTitle` to a core Select* template. */
+type WrappedRenderSectionTitle = (sectionId: string, options: unknown[]) => JSXElement;
+/**
+ * Adapts a Vue scoped section-title slot into the `renderSectionTitle` callback shape
+ * expected by the core Select* templates.
+ */
+export declare function useWrappedRenderSectionTitleSlot(slot: Slot | undefined): ComputedRef<WrappedRenderSectionTitle | undefined>;
+export {};

package/components/select-button/SelectButton.d.ts

@@ -0,0 +1,175 @@
+import { EmitFn, EmitsToProps, PublicProps, SlotsType } from 'vue';
+import { BaseSelectButtonWrapperProps } from '@lumx/core/js/utils/select/types';
+import { SelectButtonProps as UIProps } from '@lumx/core/js/components/SelectButton';
+import { EmitsOf } from '../../utils/VueToJSX';
+/**
+ * Props exposed to the `#button` scoped slot of `<SelectButton>`.
+ *
+ * `buttonProps` **must** be spread on the slot root element so that the combobox ARIA
+ * attributes (`role="combobox"`, `aria-controls`, `aria-haspopup`, `aria-expanded`,
+ * `aria-activedescendant`) and the internal `ref` callback reach the underlying DOM node.
+ *
+ * The `<Tooltip label={label}>` wrapper is always rendered around the slot root, keeping
+ * accessibility semantics consistent regardless of the element returned by the slot.
+ *
+ * @example
+ * ```html
+ * <!-- IconButton trigger (no text children — use labelDisplayMode="show-tooltip") -->
+ * <SelectButton label="More" label-display-mode="show-tooltip" ...>
+ *   <template #button="{ buttonProps, label }">
+ *     <IconButton v-bind="buttonProps" :icon="mdiDotsVertical" :label="label" :hide-tooltip="true" />
+ *   </template>
+ * </SelectButton>
+ *
+ * <!-- Chip trigger -->
+ * <SelectButton label="Status" ...>
+ *   <template #button="{ buttonProps, children }">
+ *     <Chip v-bind="buttonProps" is-clickable>{{ children }}</Chip>
+ *   </template>
+ * </SelectButton>
+ * ```
+ */
+export interface SelectButtonButtonSlotProps {
+    /**
+     * Merged props that **must** be spread on the slot root element.
+     *
+     * Contains: `role="combobox"`, `aria-controls`, `aria-haspopup="listbox"`,
+     * `aria-expanded`, `aria-activedescendant=""`, the internal `ref` callback,
+     * `className`, and any caller-provided button attrs.
+     */
+    buttonProps: Record<string, any>;
+    /**
+     * The configured label (always defined).
+     * Useful for setting the `label` prop of `<IconButton>` or `<Tooltip>`.
+     */
+    label: string;
+    /**
+     * Resolved button children computed from `labelDisplayMode`:
+     * - `'show-selection'` — selected option name, falls back to the label when nothing is selected.
+     * - `'show-label'` — always the label.
+     * - `'show-tooltip'` — `null` (label is surfaced only via the Tooltip; ignore this in the slot).
+     */
+    children: string | null;
+}
+/** Common props shared by single and multi modes. */
+interface BaseSelectButtonProps<O = any> extends BaseSelectButtonWrapperProps<O> {
+    /** Controls how the label/value is displayed in the button. */
+    labelDisplayMode?: UIProps<O>['labelDisplayMode'];
+    /** Props forwarded to the Combobox.Popover. */
+    popoverProps?: Record<string, any>;
+    /** CSS class. */
+    class?: string;
+}
+/**
+ * Single-selection props (`selectionType` defaults to `'single'`).
+ * Backwards-compatible — existing consumers do not need to set `selectionType`.
+ */
+export interface SingleSelectButtonProps<O = any> extends BaseSelectButtonProps<O> {
+    /** Selection type. Optional — defaults to `'single'`. */
+    selectionType?: 'single';
+    /** Selected option (or `undefined` when nothing is selected). */
+    value?: O;
+}
+/** Multi-selection props (`selectionType: 'multiple'` is required to opt in). */
+export interface MultipleSelectButtonProps<O = any> extends BaseSelectButtonProps<O> {
+    /** Selection type. */
+    selectionType: 'multiple';
+    /** Selected options. */
+    value?: O[];
+}
+/**
+ * SelectButton props — supports both single and multi selection.
+ * Discriminated on `selectionType`: when `'multiple'`, `value` is `O[]`.
+ */
+export type SelectButtonProps<O = any> = SingleSelectButtonProps<O> | MultipleSelectButtonProps<O>;
+/**
+ * SelectButton events schema
+ */
+export declare const emitSchema: {
+    /**
+     * Selection change. Payload type depends on `selectionType`:
+     * - default / `'single'` → `O | undefined` (option on select).
+     * - `'multiple'`         → `O[] | undefined` (toggled array).
+     *
+     * The runtime validator uses `unknown` since the typed payload can't be expressed
+     * without the component generic. The typed payload is restored via `SelectButtonEmits`.
+     */
+    change: (_newValue?: unknown) => boolean;
+    /** Bottom of the options list reached — consumer should fetch the next page. */
+    'load-more': () => boolean;
+    /** Dropdown opened or closed. */
+    open: (_isOpen: boolean) => boolean;
+};
+/**
+ * SelectButton emits typed over the option type O and the selection type S.
+ */
+type SelectButtonEmits<O, S extends 'single' | 'multiple'> = Omit<EmitsOf<typeof emitSchema>, 'change'> & {
+    change: (newValue: (S extends 'multiple' ? O[] : O) | undefined) => void;
+};
+type SingleSelectButtonPublicProps<O> = SingleSelectButtonProps<O> & EmitsToProps<SelectButtonEmits<O, 'single'>>;
+type MultipleSelectButtonPublicProps<O> = MultipleSelectButtonProps<O> & EmitsToProps<SelectButtonEmits<O, 'multiple'>>;
+/**
+ * SelectButton component constructor with generic type attached to props.
+ *
+ * Vue's `defineComponent` setup-fn overload cannot carry an unbound generic from the setup
+ * signature to the resulting component constructor, so the generic is layered on via cast.
+ *
+ * Two `new` overloads provide per-branch emit narrowing matching `SelectTextField`.
+ */
+export interface SelectButtonConstructor {
+    new <O = any>(props: SingleSelectButtonPublicProps<O> & PublicProps): {
+        $props: SingleSelectButtonPublicProps<O>;
+        $emit: EmitFn<SelectButtonEmits<O, 'single'>>;
+    };
+    new <O = any>(props: MultipleSelectButtonPublicProps<O> & PublicProps): {
+        $props: MultipleSelectButtonPublicProps<O>;
+        $emit: EmitFn<SelectButtonEmits<O, 'multiple'>>;
+    };
+}
+/**
+ * A Button with a select dropdown to choose between a list of options.
+ *
+ * Scoped slots:
+ * - `button({ buttonProps, label, content })` — replaces the default `<Button rightIcon={mdiMenuDown}>` trigger.
+ *   `buttonProps` **must** be spread on the slot root so that the combobox ARIA attributes and `ref`
+ *   reach the DOM node. The `<Tooltip>` wrapper is always rendered. See `SelectButtonButtonSlotProps`.
+ * - `option({ option, index })` — custom option rendering inside a `<Combobox.Option>`.
+ * - `sectionTitle({ sectionId, options })` — custom section header rendering.
+ */
+declare const SelectButton: import('vue').DefineSetupFnComponent<SelectButtonProps<any>, {
+    /**
+     * Selection change. Payload type depends on `selectionType`:
+     * - default / `'single'` → `O | undefined` (option on select).
+     * - `'multiple'`         → `O[] | undefined` (toggled array).
+     *
+     * The runtime validator uses `unknown` since the typed payload can't be expressed
+     * without the component generic. The typed payload is restored via `SelectButtonEmits`.
+     */
+    change: (_newValue?: unknown) => boolean;
+    /** Bottom of the options list reached — consumer should fetch the next page. */
+    'load-more': () => boolean;
+    /** Dropdown opened or closed. */
+    open: (_isOpen: boolean) => boolean;
+}, SlotsType<{
+    /**
+     * Replaces the default `<Button rightIcon={mdiMenuDown}>` trigger.
+     * `buttonProps` must be spread on the root element of the slot.
+     */
+    button: SelectButtonButtonSlotProps;
+    /** Custom option rendering inside a `<SelectButtonOption>`. */
+    option: {
+        option: unknown;
+        index: number;
+    };
+    /** Custom section header rendering. */
+    sectionTitle: {
+        sectionId: string;
+        options: unknown[];
+    };
+}>, SelectButtonProps<any> & {
+    onChange?: ((_newValue?: unknown) => any) | undefined;
+    onOpen?: ((_isOpen: boolean) => any) | undefined;
+    "onLoad-more"?: (() => any) | undefined;
+}, PublicProps>;
+declare const _default: SelectButtonConstructor & typeof SelectButton;
+export default _default;

package/components/select-button/SelectButton.stories.d.ts

@@ -0,0 +1,126 @@
+declare const _default: {
+    component: any;
+    play({ canvas }: any): Promise<void>;
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const WithSelectedValue: {
+    args: {
+        value: {
+            category: string;
+            categoryIcon: string;
+            id: string;
+            name: string;
+            icon: string;
+            description: string;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const WithSections: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const WithDescriptions: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const Disabled: {
+    args: {
+        value: {
+            category: string;
+            categoryIcon: string;
+            id: string;
+            name: string;
+            icon: string;
+            description: string;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const Loading: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const LoadingMore: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const ErrorState: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const MultipleSelection: {
+    args: {
+        value: never[];
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const MultipleWithPreselected: {
+    args: {
+        value: {
+            category: string;
+            categoryIcon: string;
+            id: string;
+            name: string;
+            icon: string;
+            description: string;
+        }[];
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const WithNbOptionMessage: {
+    args: {
+        value: undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    render: ({ value, onChange }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const LabelDisplayModes: {
+    play: () => void;
+    argTypes: {
+        labelDisplayMode: {
+            control: boolean;
+        };
+        value: {
+            control: boolean;
+        };
+    };
+    render: ({ value, labelDisplayMode }: any) => import("vue/jsx-runtime").JSX.Element;
+    decorators: ((story: any, context: any) => any)[];
+};
+/** SelectButton with a custom trigger (`#button` slot) and custom option rendering (`#option` slot) */
+export declare const CustomRender: {
+    render: () => {
+        components: {
+            StoryCustomRender: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        };
+        template: string;
+    };
+};

package/components/select-button/SelectButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/select-button/SelectButton.test.stories.d.ts

@@ -0,0 +1,33 @@
+declare const _default: {
+    title: string;
+    component: any;
+    tags: string[];
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+};
+export default _default;
+export declare const ClickOutsideCloses: {
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        value: undefined;
+        onChange: () => void;
+    };
+    play: ({ canvasElement }: any) => Promise<void>;
+};
+export declare const SelectionUpdates: {
+    render: () => any;
+    play: ({ canvasElement }: any) => Promise<void>;
+};
+/** Test infinite scroll loads more options when scrolling to the bottom */
+export declare const WithInfiniteScroll: {
+    render: () => {
+        components: {
+            StoryWithInfiniteScroll: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        };
+        template: string;
+    };
+    play({ canvasElement }: any): Promise<void>;
+};

package/components/select-button/Stories/CustomRender.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/select-button/Stories/WithInfiniteScroll.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/select-button/index.d.ts

@@ -0,0 +1,13 @@
+export { default as SelectButton, type SelectButtonProps, type SingleSelectButtonProps, type MultipleSelectButtonProps, type SelectButtonButtonSlotProps, } from './SelectButton';
+export type { SelectTextFieldStatus, SelectButtonTranslations } from '@lumx/core/js/utils/select/types';
+/** Selectable option within the dropdown list. */
+export declare const SelectButtonOption: import('vue').DefineSetupFnComponent<import('../combobox').ComboboxOptionProps, {
+    click: () => boolean;
+}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionPropsToOverride> & {
+    class?: import('../../utils/VueToJSX').ClassValue;
+} & {
+    tooltipProps?: Partial<import('../tooltip').TooltipProps>;
+    actionProps?: Record<string, any>;
+} & {
+    onClick?: (() => any) | undefined;
+}, import('vue').PublicProps>;

package/index.d.ts

@@ -42,4 +42,5 @@ export * from './components/thumbnail';
 export * from './components/toolbar';
 export * from './components/tooltip';
 export * from './components/user-block';
+export * from './components/select-button';
 export * from './components/select-text-field';