@xleddyl/443-components-vue 0.2.3 → 0.4.0

package/dist/components/data/FilterPill.vue.d.ts

@@ -0,0 +1,445 @@
+import type { IconName } from '../../composables/useIcons';
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{
+    label?: string;
+    valueLabel?: string;
+    icon?: IconName;
+    count?: number;
+    active?: boolean;
+    pressed?: boolean;
+    caret?: boolean;
+    size?: "sm" | "md";
+    disabled?: (boolean | "true" | "false") | undefined;
+    autofocus?: (boolean | "true" | "false") | undefined;
+    form?: string | undefined | undefined;
+    formaction?: string | undefined | undefined;
+    formenctype?: string | undefined | undefined;
+    formmethod?: string | undefined | undefined;
+    formnovalidate?: (boolean | "true" | "false") | undefined;
+    formtarget?: string | undefined | undefined;
+    name?: string | undefined | undefined;
+    type?: "submit" | "reset" | "button" | undefined | undefined;
+    value?: string | number | readonly string[] | undefined;
+    popovertarget?: string | undefined;
+    popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
+    innerHTML?: string | undefined | undefined;
+    class?: import("vue").ClassValue;
+    style?: import("vue").StyleValue;
+    accesskey?: string | undefined | undefined;
+    contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextmenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
+    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    id?: string | undefined | undefined;
+    inert?: (boolean | "true" | "false") | undefined;
+    lang?: string | undefined | undefined;
+    placeholder?: string | undefined | undefined;
+    spellcheck?: (boolean | "true" | "false") | undefined;
+    tabindex?: (string | number) | undefined;
+    title?: string | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radiogroup?: string | undefined | undefined;
+    role?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autocapitalize?: string | undefined | undefined;
+    autocorrect?: string | undefined | undefined;
+    autosave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemprop?: string | undefined | undefined;
+    itemscope?: (boolean | "true" | "false") | undefined;
+    itemtype?: string | undefined | undefined;
+    itemid?: string | undefined | undefined;
+    itemref?: string | undefined | undefined;
+    results?: (string | number) | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
+    'aria-activedescendant'?: string | undefined | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
+    'aria-colcount'?: (string | number) | undefined;
+    'aria-colindex'?: (string | number) | undefined;
+    'aria-colspan'?: (string | number) | undefined;
+    'aria-controls'?: string | undefined | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-describedby'?: string | undefined | undefined;
+    'aria-details'?: string | undefined | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    'aria-errormessage'?: string | undefined | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
+    'aria-flowto'?: string | undefined | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined | undefined;
+    'aria-label'?: string | undefined | undefined;
+    'aria-labelledby'?: string | undefined | undefined;
+    'aria-level'?: (string | number) | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined | undefined;
+    'aria-owns'?: string | undefined | undefined;
+    'aria-placeholder'?: string | undefined | undefined;
+    'aria-posinset'?: (string | number) | undefined;
+    'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
+    'aria-roledescription'?: string | undefined | undefined;
+    'aria-rowcount'?: (string | number) | undefined;
+    'aria-rowindex'?: (string | number) | undefined;
+    'aria-rowspan'?: (string | number) | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
+    'aria-setsize'?: (string | number) | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    'aria-valuemax'?: (string | number) | undefined;
+    'aria-valuemin'?: (string | number) | undefined;
+    'aria-valuenow'?: (string | number) | undefined;
+    'aria-valuetext'?: string | undefined | undefined;
+    onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+    onCut?: ((payload: ClipboardEvent) => void) | undefined;
+    onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+    onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+    onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+    onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+    onDrag?: ((payload: DragEvent) => void) | undefined;
+    onDragend?: ((payload: DragEvent) => void) | undefined;
+    onDragenter?: ((payload: DragEvent) => void) | undefined;
+    onDragexit?: ((payload: DragEvent) => void) | undefined;
+    onDragleave?: ((payload: DragEvent) => void) | undefined;
+    onDragover?: ((payload: DragEvent) => void) | undefined;
+    onDragstart?: ((payload: DragEvent) => void) | undefined;
+    onDrop?: ((payload: DragEvent) => void) | undefined;
+    onFocus?: ((payload: FocusEvent) => void) | undefined;
+    onFocusin?: ((payload: FocusEvent) => void) | undefined;
+    onFocusout?: ((payload: FocusEvent) => void) | undefined;
+    onBlur?: ((payload: FocusEvent) => void) | undefined;
+    onChange?: ((payload: Event) => void) | undefined;
+    onBeforeinput?: ((payload: InputEvent) => void) | undefined;
+    onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+    onInput?: ((payload: InputEvent) => void) | undefined;
+    onReset?: ((payload: Event) => void) | undefined;
+    onSubmit?: ((payload: SubmitEvent) => void) | undefined;
+    onInvalid?: ((payload: Event) => void) | undefined;
+    onFullscreenchange?: ((payload: Event) => void) | undefined;
+    onFullscreenerror?: ((payload: Event) => void) | undefined;
+    onLoad?: ((payload: Event) => void) | undefined;
+    onError?: ((payload: Event) => void) | undefined;
+    onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+    onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+    onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+    onDblclick?: ((payload: MouseEvent) => void) | undefined;
+    onMousedown?: ((payload: MouseEvent) => void) | undefined;
+    onMouseenter?: ((payload: MouseEvent) => void) | undefined;
+    onMouseleave?: ((payload: MouseEvent) => void) | undefined;
+    onMousemove?: ((payload: MouseEvent) => void) | undefined;
+    onMouseout?: ((payload: MouseEvent) => void) | undefined;
+    onMouseover?: ((payload: MouseEvent) => void) | undefined;
+    onMouseup?: ((payload: MouseEvent) => void) | undefined;
+    onAbort?: ((payload: UIEvent) => void) | undefined;
+    onCanplay?: ((payload: Event) => void) | undefined;
+    onCanplaythrough?: ((payload: Event) => void) | undefined;
+    onDurationchange?: ((payload: Event) => void) | undefined;
+    onEmptied?: ((payload: Event) => void) | undefined;
+    onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
+    onEnded?: ((payload: Event) => void) | undefined;
+    onLoadeddata?: ((payload: Event) => void) | undefined;
+    onLoadedmetadata?: ((payload: Event) => void) | undefined;
+    onLoadstart?: ((payload: Event) => void) | undefined;
+    onPause?: ((payload: Event) => void) | undefined;
+    onPlay?: ((payload: Event) => void) | undefined;
+    onPlaying?: ((payload: Event) => void) | undefined;
+    onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
+    onRatechange?: ((payload: Event) => void) | undefined;
+    onSeeked?: ((payload: Event) => void) | undefined;
+    onSeeking?: ((payload: Event) => void) | undefined;
+    onStalled?: ((payload: Event) => void) | undefined;
+    onSuspend?: ((payload: Event) => void) | undefined;
+    onTimeupdate?: ((payload: Event) => void) | undefined;
+    onVolumechange?: ((payload: Event) => void) | undefined;
+    onWaiting?: ((payload: Event) => void) | undefined;
+    onSelect?: ((payload: Event) => void) | undefined;
+    onScroll?: ((payload: Event) => void) | undefined;
+    onScrollend?: ((payload: Event) => void) | undefined;
+    onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+    onTouchend?: ((payload: TouchEvent) => void) | undefined;
+    onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+    onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+    onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+    onClick?: ((payload: PointerEvent) => void) | undefined;
+    onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+    onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+    onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
+    onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+    onPointermove?: ((payload: PointerEvent) => void) | undefined;
+    onPointerup?: ((payload: PointerEvent) => void) | undefined;
+    onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+    onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+    onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+    onPointerover?: ((payload: PointerEvent) => void) | undefined;
+    onPointerout?: ((payload: PointerEvent) => void) | undefined;
+    onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+    onToggle?: ((payload: ToggleEvent) => void) | undefined;
+    onWheel?: ((payload: WheelEvent) => void) | undefined;
+    onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+    onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+    onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
+    key?: PropertyKey | undefined;
+    ref?: import("vue").VNodeRef | undefined;
+    ref_for?: boolean | undefined | undefined;
+    ref_key?: string | undefined | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    label?: string;
+    valueLabel?: string;
+    icon?: IconName;
+    count?: number;
+    active?: boolean;
+    pressed?: boolean;
+    caret?: boolean;
+    size?: "sm" | "md";
+    disabled?: (boolean | "true" | "false") | undefined;
+    autofocus?: (boolean | "true" | "false") | undefined;
+    form?: string | undefined | undefined;
+    formaction?: string | undefined | undefined;
+    formenctype?: string | undefined | undefined;
+    formmethod?: string | undefined | undefined;
+    formnovalidate?: (boolean | "true" | "false") | undefined;
+    formtarget?: string | undefined | undefined;
+    name?: string | undefined | undefined;
+    type?: "submit" | "reset" | "button" | undefined | undefined;
+    value?: string | number | readonly string[] | undefined;
+    popovertarget?: string | undefined;
+    popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
+    innerHTML?: string | undefined | undefined;
+    class?: import("vue").ClassValue;
+    style?: import("vue").StyleValue;
+    accesskey?: string | undefined | undefined;
+    contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextmenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
+    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    id?: string | undefined | undefined;
+    inert?: (boolean | "true" | "false") | undefined;
+    lang?: string | undefined | undefined;
+    placeholder?: string | undefined | undefined;
+    spellcheck?: (boolean | "true" | "false") | undefined;
+    tabindex?: (string | number) | undefined;
+    title?: string | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radiogroup?: string | undefined | undefined;
+    role?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autocapitalize?: string | undefined | undefined;
+    autocorrect?: string | undefined | undefined;
+    autosave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemprop?: string | undefined | undefined;
+    itemscope?: (boolean | "true" | "false") | undefined;
+    itemtype?: string | undefined | undefined;
+    itemid?: string | undefined | undefined;
+    itemref?: string | undefined | undefined;
+    results?: (string | number) | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
+    'aria-activedescendant'?: string | undefined | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
+    'aria-colcount'?: (string | number) | undefined;
+    'aria-colindex'?: (string | number) | undefined;
+    'aria-colspan'?: (string | number) | undefined;
+    'aria-controls'?: string | undefined | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-describedby'?: string | undefined | undefined;
+    'aria-details'?: string | undefined | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    'aria-errormessage'?: string | undefined | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
+    'aria-flowto'?: string | undefined | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined | undefined;
+    'aria-label'?: string | undefined | undefined;
+    'aria-labelledby'?: string | undefined | undefined;
+    'aria-level'?: (string | number) | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined | undefined;
+    'aria-owns'?: string | undefined | undefined;
+    'aria-placeholder'?: string | undefined | undefined;
+    'aria-posinset'?: (string | number) | undefined;
+    'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
+    'aria-roledescription'?: string | undefined | undefined;
+    'aria-rowcount'?: (string | number) | undefined;
+    'aria-rowindex'?: (string | number) | undefined;
+    'aria-rowspan'?: (string | number) | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
+    'aria-setsize'?: (string | number) | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    'aria-valuemax'?: (string | number) | undefined;
+    'aria-valuemin'?: (string | number) | undefined;
+    'aria-valuenow'?: (string | number) | undefined;
+    'aria-valuetext'?: string | undefined | undefined;
+    onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+    onCut?: ((payload: ClipboardEvent) => void) | undefined;
+    onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+    onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+    onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+    onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+    onDrag?: ((payload: DragEvent) => void) | undefined;
+    onDragend?: ((payload: DragEvent) => void) | undefined;
+    onDragenter?: ((payload: DragEvent) => void) | undefined;
+    onDragexit?: ((payload: DragEvent) => void) | undefined;
+    onDragleave?: ((payload: DragEvent) => void) | undefined;
+    onDragover?: ((payload: DragEvent) => void) | undefined;
+    onDragstart?: ((payload: DragEvent) => void) | undefined;
+    onDrop?: ((payload: DragEvent) => void) | undefined;
+    onFocus?: ((payload: FocusEvent) => void) | undefined;
+    onFocusin?: ((payload: FocusEvent) => void) | undefined;
+    onFocusout?: ((payload: FocusEvent) => void) | undefined;
+    onBlur?: ((payload: FocusEvent) => void) | undefined;
+    onChange?: ((payload: Event) => void) | undefined;
+    onBeforeinput?: ((payload: InputEvent) => void) | undefined;
+    onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+    onInput?: ((payload: InputEvent) => void) | undefined;
+    onReset?: ((payload: Event) => void) | undefined;
+    onSubmit?: ((payload: SubmitEvent) => void) | undefined;
+    onInvalid?: ((payload: Event) => void) | undefined;
+    onFullscreenchange?: ((payload: Event) => void) | undefined;
+    onFullscreenerror?: ((payload: Event) => void) | undefined;
+    onLoad?: ((payload: Event) => void) | undefined;
+    onError?: ((payload: Event) => void) | undefined;
+    onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+    onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+    onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+    onDblclick?: ((payload: MouseEvent) => void) | undefined;
+    onMousedown?: ((payload: MouseEvent) => void) | undefined;
+    onMouseenter?: ((payload: MouseEvent) => void) | undefined;
+    onMouseleave?: ((payload: MouseEvent) => void) | undefined;
+    onMousemove?: ((payload: MouseEvent) => void) | undefined;
+    onMouseout?: ((payload: MouseEvent) => void) | undefined;
+    onMouseover?: ((payload: MouseEvent) => void) | undefined;
+    onMouseup?: ((payload: MouseEvent) => void) | undefined;
+    onAbort?: ((payload: UIEvent) => void) | undefined;
+    onCanplay?: ((payload: Event) => void) | undefined;
+    onCanplaythrough?: ((payload: Event) => void) | undefined;
+    onDurationchange?: ((payload: Event) => void) | undefined;
+    onEmptied?: ((payload: Event) => void) | undefined;
+    onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
+    onEnded?: ((payload: Event) => void) | undefined;
+    onLoadeddata?: ((payload: Event) => void) | undefined;
+    onLoadedmetadata?: ((payload: Event) => void) | undefined;
+    onLoadstart?: ((payload: Event) => void) | undefined;
+    onPause?: ((payload: Event) => void) | undefined;
+    onPlay?: ((payload: Event) => void) | undefined;
+    onPlaying?: ((payload: Event) => void) | undefined;
+    onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
+    onRatechange?: ((payload: Event) => void) | undefined;
+    onSeeked?: ((payload: Event) => void) | undefined;
+    onSeeking?: ((payload: Event) => void) | undefined;
+    onStalled?: ((payload: Event) => void) | undefined;
+    onSuspend?: ((payload: Event) => void) | undefined;
+    onTimeupdate?: ((payload: Event) => void) | undefined;
+    onVolumechange?: ((payload: Event) => void) | undefined;
+    onWaiting?: ((payload: Event) => void) | undefined;
+    onSelect?: ((payload: Event) => void) | undefined;
+    onScroll?: ((payload: Event) => void) | undefined;
+    onScrollend?: ((payload: Event) => void) | undefined;
+    onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+    onTouchend?: ((payload: TouchEvent) => void) | undefined;
+    onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+    onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+    onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+    onClick?: ((payload: PointerEvent) => void) | undefined;
+    onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+    onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+    onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
+    onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+    onPointermove?: ((payload: PointerEvent) => void) | undefined;
+    onPointerup?: ((payload: PointerEvent) => void) | undefined;
+    onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+    onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+    onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+    onPointerover?: ((payload: PointerEvent) => void) | undefined;
+    onPointerout?: ((payload: PointerEvent) => void) | undefined;
+    onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+    onToggle?: ((payload: ToggleEvent) => void) | undefined;
+    onWheel?: ((payload: WheelEvent) => void) | undefined;
+    onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+    onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+    onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
+    key?: PropertyKey | undefined;
+    ref?: import("vue").VNodeRef | undefined;
+    ref_for?: boolean | undefined | undefined;
+    ref_key?: string | undefined | undefined;
+}> & Readonly<{}>, {
+    size: "sm" | "md";
+    pressed: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/data/FilterPills.vue

@@ -5,24 +5,21 @@
       role="group"
       :aria-label="groupLabel"
    >
-      <button
-         v-for="option in options"
-         :key="option.value"
-         type="button"
-         class="k-filter-pill"
-         :aria-pressed="isActive(option.value) ? 'true' : 'false'"
-         :disabled="disabled || option.disabled"
-         @click="toggle(option.value)"
-      >
-         <span class="k-filter-pill-check" aria-hidden="true"><Icon name="check" /></span>
-         <Icon v-if="option.icon" :name="option.icon" class="k-filter-pill-icon" />
-         <span class="k-filter-pill-label">{{ option.label }}</span>
-         <span v-if="option.count !== void 0" class="k-filter-pill-count">{{
-            option.count
-         }}</span>
-      </button>
+      <template v-for="option in options" :key="option.value">
+         <slot
+            name="pill"
+            :option="option"
+            :active="isActive(option.value)"
+            :toggle="() => toggle(option.value)"
+            :size="size"
+            :disabled="Boolean(disabled || option.disabled)"
+            :default-pill="defaultPill(option.value)"
+         >
+            <component :is="defaultPill(option.value)" />
+         </slot>
+      </template>
       <Button
-         v-if="clearable && hasValue"
+         v-if="clearable && hasValue && !required"
          class="k-filter-pills-clear"
          variant="link"
          tone="neutral"
@@ -34,39 +31,115 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, h, ref, watch } from "vue";
 import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
-import Icon from "../core/Icon.vue";
+import DropdownMenu from "../overlays/DropdownMenu.vue";
+import Popover from "../overlays/Popover.vue";
+import FilterPill from "./FilterPill.vue";
 const props = defineProps({
   options: { type: Array, required: true },
-  multiple: { type: Boolean, required: false },
+  multiple: { type: null, required: false },
   label: { type: String, required: false },
   size: { type: String, required: false, default: "md" },
   clearable: { type: Boolean, required: false },
   clearLabel: { type: String, required: false },
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  required: { type: null, required: false }
 });
 const { t } = useLocale();
 const groupLabel = computed(() => props.label ?? t("filterPills.label"));
 const clearText = computed(() => props.clearLabel ?? t("common.clear"));
-const model = defineModel({ type: [String, Number, Array, null], ...{ default: null } });
+const slots = defineSlots();
+const model = defineModel({ type: null, ...{
+  default: null
+} });
+const openPanel = ref(null);
 const activeValues = computed(() => {
-  if (Array.isArray(model.value)) return model.value;
-  return model.value === null || model.value === void 0 ? [] : [model.value];
+  const value = model.value;
+  if (Array.isArray(value)) return value;
+  return value === null || value === void 0 ? [] : [value];
 });
 const hasValue = computed(() => activeValues.value.length > 0);
 function isActive(value) {
   return activeValues.value.includes(value);
 }
+function setModel(value) {
+  model.value = value;
+}
 function toggle(value) {
+  const active = isActive(value);
   if (props.multiple) {
-    model.value = isActive(value) ? activeValues.value.filter((item) => item !== value) : [...activeValues.value, value];
+    if (active && props.required && activeValues.value.length <= 1) return;
+    setModel(
+      active ? activeValues.value.filter((item) => item !== value) : [...activeValues.value, value]
+    );
     return;
   }
-  model.value = isActive(value) ? null : value;
+  if (active && props.required) return;
+  setModel(active ? null : value);
 }
 function clear() {
-  model.value = props.multiple ? [] : null;
+  setModel(props.multiple ? [] : null);
+}
+function setPanel(value, open) {
+  if (open) openPanel.value = value;
+  else if (openPanel.value === value) openPanel.value = null;
+}
+function renderPill(value) {
+  const option = props.options.find((entry) => entry.value === value);
+  if (!option) return null;
+  const base = {
+    label: option.label,
+    valueLabel: option.valueLabel,
+    icon: option.icon,
+    count: option.count,
+    size: props.size,
+    disabled: Boolean(props.disabled || option.disabled)
+  };
+  const active = option.active ?? isActive(value);
+  if (option.menu)
+    return h(
+      DropdownMenu,
+      { items: option.menu, label: option.menuLabel ?? option.label },
+      { default: () => h(FilterPill, { ...base, active, caret: true }) }
+    );
+  if (option.panel) {
+    const close = () => setPanel(value, false);
+    return h(
+      Popover,
+      {
+        open: openPanel.value === value,
+        "onUpdate:open": (open) => setPanel(value, open),
+        label: option.panelLabel ?? option.label
+      },
+      {
+        default: () => h(FilterPill, { ...base, active, caret: true }),
+        content: () => slots[`panel-${value}`]?.({
+          option,
+          active: isActive(value),
+          toggle: () => toggle(value),
+          close
+        })
+      }
+    );
+  }
+  return h(FilterPill, { ...base, pressed: isActive(value), onClick: () => toggle(value) });
 }
+const defaultPills = /* @__PURE__ */ new Map();
+function defaultPill(value) {
+  let pill = defaultPills.get(value);
+  if (!pill) {
+    pill = () => renderPill(value);
+    defaultPills.set(value, pill);
+  }
+  return pill;
+}
+watch(
+  () => props.options.map((option) => option.value),
+  (values) => {
+    const keep = new Set(values);
+    for (const key of defaultPills.keys()) if (!keep.has(key)) defaultPills.delete(key);
+  }
+);
 </script>