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; 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; 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; /** * 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 any; "update:modelValue": (value: AcceptableValue | AcceptableValue[] | undefined) => any; }, string, import("vue").PublicProps, Readonly & 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 & { new (): { $slots: S; }; };