@bitrix24/b24ui-nuxt/dist/runtime/components/PageCardGroup.vue.d.ts

Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE

import type { VNode } from 'vue';
import type { AppConfig } from '@nuxt/schema';
import theme from '#build/b24ui/page-card-group';
import type { IconComponent, AvatarProps, BadgeProps, PageCardProps } from '../types';
import type { AcceptableValue } from '../types/utils';
import type { ComponentConfig } from '../types/tv';
type PageCardGroup = ComponentConfig<typeof theme, AppConfig, 'pageCardGroup'>;
export type PageCardGroupValue = AcceptableValue;
export interface PageCardGroupItem {
    label?: string;
    description?: string;
    /**
     * Plain icon shown in the leading position. Takes precedence over `avatar` —
     * when both are set, the plain icon wins and Avatar is not rendered.
     * @IconComponent
     */
    icon?: IconComponent;
    /**
     * Avatar config for the leading position. Used only when `icon` is not set.
     * Merged on top of the group-level `avatar` prop.
     */
    avatar?: Partial<AvatarProps>;
    value?: PageCardGroupValue;
    disabled?: boolean;
    category?: string;
    class?: any;
    [key: string]: any;
}
export interface PageCardGroupProps {
    /**
     * The element or component this component should render as.
     * @defaultValue 'div'
     */
    as?: any;
    legend?: string;
    items?: PageCardGroupItem[];
    /** The controlled value. Can be bound with `v-model`. Single value when `multiple` is false, array otherwise. */
    modelValue?: PageCardGroupValue | PageCardGroupValue[];
    /** The initial value when uncontrolled. */
    defaultValue?: PageCardGroupValue | PageCardGroupValue[];
    /**
     * @defaultValue 'value'
     */
    valueKey?: string;
    /**
     * @defaultValue 'label'
     */
    labelKey?: string;
    /**
     * @defaultValue 'description'
     */
    descriptionKey?: string;
    /**
     * @defaultValue 'icon'
     */
    iconKey?: string;
    /**
     * Item field used to group cards into sections. Set to an empty string to disable grouping.
     * @defaultValue 'category'
     */
    categoryKey?: string;
    /**
     * Switch to multi-select mode (checkbox semantics, value is an array).
     * @defaultValue false
     */
    multiple?: boolean;
    disabled?: boolean;
    required?: boolean;
    name?: string;
    /**
     * Card size — drives the inner avatar size, inner gap and title/description text size.
     * @defaultValue 'md'
     */
    size?: PageCardGroup['variants']['size'];
    /**
     * Variant forwarded to each `PageCard`.
     * @defaultValue 'outline'
     */
    variant?: PageCardProps['variant'];
    /**
     * Umbrella accent color. Drives both the highlighted card border and the corner badge
     * unless `highlightColor` / `badgeColor` are set explicitly.
     * @defaultValue 'air-primary-success'
     */
    color?: PageCardProps['highlightColor'];
    /**
     * Highlight color forwarded to the selected `PageCard`. Falls back to `color` when not set.
     */
    highlightColor?: PageCardProps['highlightColor'];
    /**
     * Color of the corner badge shown on the selected card. Falls back to `color` when not set.
     */
    badgeColor?: BadgeProps['color'];
    /**
     * Size of the corner badge shown on the selected card. Falls back to a value derived
     * from the group `size` when not set.
     */
    badgeSize?: BadgeProps['size'];
    /**
     * Group-level Avatar defaults forwarded to every card whose item opts into avatar mode
     * (`item.avatar` set or this prop set). Per-item `avatar` field merges on top.
     */
    avatar?: Partial<AvatarProps>;
    /**
     * Max columns on desktop.
     * @defaultValue 3
     */
    columns?: PageCardGroup['variants']['columns'];
    class?: any;
    b24ui?: PageCardGroup['slots'];
}
export interface PageCardGroupSlots {
    legend?(props?: {
        b24ui: PageCardGroup['b24ui'];
    }): VNode[];
    categoryLabel?(props: {
        category: string;
        items: PageCardGroupItem[];
        b24ui: PageCardGroup['b24ui'];
    }): VNode[];
    leading?(props: {
        item: PageCardGroupItem;
        selected: boolean;
        b24ui: PageCardGroup['b24ui'];
    }): VNode[];
    badge?(props: {
        item: PageCardGroupItem;
        selected: boolean;
        b24ui: PageCardGroup['b24ui'];
    }): VNode[];
}
export type PageCardGroupEmits = {
    'update:modelValue': [value: PageCardGroupValue | PageCardGroupValue[] | undefined];
    'change': [event: Event];
};
declare const _default: typeof __VLS_export;
export default _default;
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageCardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
    change: (event: Event) => any;
    "update:modelValue": (value: AcceptableValue | AcceptableValue[] | undefined) => any;
}, string, import("vue").PublicProps, Readonly<PageCardGroupProps> & Readonly<{
    onChange?: ((event: Event) => any) | undefined;
    "onUpdate:modelValue"?: ((value: AcceptableValue | AcceptableValue[] | undefined) => any) | undefined;
}>, {
    size: PageCardGroup["variants"]["size"];
    color: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-primary-warning";
    variant: "filled" | "filled-success" | "filled-alert" | "filled-warning" | "filled-copilot" | "filled-no-accent" | "filled-black" | "tinted" | "tinted-alt" | "tinted-accent-1" | "tinted-success" | "tinted-alert" | "tinted-warning" | "tinted-no-accent" | "outline" | "outline-alt" | "outline-accent" | "outline-accent-2" | "outline-success" | "outline-alert" | "outline-warning" | "outline-copilot" | "outline-no-accent" | "plain" | "plain-accent" | "plain-no-accent" | "selection";
    multiple: boolean;
    valueKey: string;
    labelKey: string;
    as: any;
    descriptionKey: string;
    iconKey: string;
    categoryKey: string;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageCardGroupSlots>;
type __VLS_WithSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};