@kong/kongponents 9.29.7 → 9.29.8

package/dist/types/components/KDropdown/KDropdownItem.vue.d.ts

@@ -1,229 +1,21 @@
-import type { DropdownItem, DropdownItemRenderedRecord, DropdownItemRenderedType } from '../../../types';
-import type { PropType } from 'vue';
-declare const label: import("vue").ComputedRef<string>;
-declare const componentType: import("vue").ComputedRef<DropdownItemRenderedType>;
-declare const availableComponents: import("vue").ComputedRef<DropdownItemRenderedRecord>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_9: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_9) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    item: {
-        type: PropType<DropdownItem>;
-        default: null;
-        validator: (item: DropdownItem) => boolean;
-    };
-    /**
-     * Use this prop to add a divider above the item.
-     */
-    hasDivider: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    danger: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selected: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Internal use only - for tracking selection in conjunction with items prop.
-     */
-    selectionMenuChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onClick: {
-        type: FunctionConstructor;
-        default: undefined;
-    };
-    /**
-     * @deprecated in favor of `danger`
-     */
-    isDangerous: {
-        type: BooleanConstructor;
-        default: boolean;
-        validator: (value: boolean) => boolean;
-    };
-}>, {
-    label: typeof label;
-    componentType: typeof componentType;
-    availableComponents: typeof availableComponents;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (val: Event) => any;
-    change: (item: DropdownItem) => any;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    item: {
-        type: PropType<DropdownItem>;
-        default: null;
-        validator: (item: DropdownItem) => boolean;
-    };
-    /**
-     * Use this prop to add a divider above the item.
-     */
-    hasDivider: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    danger: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selected: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Internal use only - for tracking selection in conjunction with items prop.
-     */
-    selectionMenuChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onClick: {
-        type: FunctionConstructor;
-        default: undefined;
-    };
-    /**
-     * @deprecated in favor of `danger`
-     */
-    isDangerous: {
-        type: BooleanConstructor;
-        default: boolean;
-        validator: (value: boolean) => boolean;
-    };
-}>> & Readonly<{
-    onClick?: ((val: Event) => any) | undefined;
-    onChange?: ((item: DropdownItem) => any) | undefined;
-}>, {
-    danger: boolean;
-    disabled: boolean;
-    selected: boolean;
-    onClick: Function;
-    item: DropdownItem;
-    hasDivider: boolean;
-    selectionMenuChild: boolean;
-    isDangerous: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    item: {
-        type: PropType<DropdownItem>;
-        default: null;
-        validator: (item: DropdownItem) => boolean;
-    };
-    /**
-     * Use this prop to add a divider above the item.
-     */
-    hasDivider: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    danger: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selected: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Internal use only - for tracking selection in conjunction with items prop.
-     */
-    selectionMenuChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onClick: {
-        type: FunctionConstructor;
-        default: undefined;
-    };
-    /**
-     * @deprecated in favor of `danger`
-     */
-    isDangerous: {
-        type: BooleanConstructor;
-        default: boolean;
-        validator: (value: boolean) => boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (val: Event) => any;
-    change: (item: DropdownItem) => any;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    item: {
-        type: PropType<DropdownItem>;
-        default: null;
-        validator: (item: DropdownItem) => boolean;
-    };
-    /**
-     * Use this prop to add a divider above the item.
-     */
-    hasDivider: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    danger: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selected: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Internal use only - for tracking selection in conjunction with items prop.
-     */
-    selectionMenuChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onClick: {
-        type: FunctionConstructor;
-        default: undefined;
-    };
-    /**
-     * @deprecated in favor of `danger`
-     */
-    isDangerous: {
-        type: BooleanConstructor;
-        default: boolean;
-        validator: (value: boolean) => boolean;
-    };
-}>> & Readonly<{
-    onClick?: ((val: Event) => any) | undefined;
-    onChange?: ((item: DropdownItem) => any) | undefined;
-}>, {
-    danger: boolean;
-    disabled: boolean;
-    selected: boolean;
-    onClick: Function;
-    item: DropdownItem;
-    hasDivider: boolean;
-    selectionMenuChild: boolean;
-    isDangerous: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+import type { DropdownItem, DropdownItemProps } from '../../../types';
+declare const _default: <T extends DropdownItem<string | number> | null = null>(__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<Pick<Partial<{}> & Omit<{
+        readonly onClick?: ((event: MouseEvent) => any) | undefined;
+        readonly onChange?: ((item: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onClick"> & DropdownItemProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default?: ((props: {}) => any) | undefined;
+    };
+    emit: ((evt: "click", event: MouseEvent) => void) & ((evt: "change", item: T) => void);
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/types/components/KSelect/KSelect.vue.d.ts

@@ -50,10 +50,10 @@ declare const boundKPopAttributes: import("vue").ComputedRef<{
     maxWidth: string;
     disabled: boolean;
     placement: import("../../../types").PopPlacement;
-    offset?: string | undefined;
-    'data-testid'?: string | undefined;
     popoverTimeout: number;
+    offset?: string | undefined;
     hideCaret: boolean;
+    'data-testid'?: string | undefined;
 }>;
 declare const placeholderText: import("vue").ComputedRef<string>;
 declare const isClearVisible: import("vue").ComputedRef<boolean>;

package/dist/types/types/dropdown.d.ts

@@ -1,8 +1,10 @@
 import type { Component } from 'vue';
-export interface DropdownItem {
+import type { ButtonAppearance } from './button';
+import type { PopoverAttributes } from './popover';
+export interface DropdownItem<T extends string | number = string | number> {
     label: string;
     to?: string | object;
-    value?: string | number;
+    value?: T;
     selected?: boolean;
     hasDivider?: boolean;
     danger?: boolean;
@@ -11,7 +13,7 @@ export type DropdownItemType = 'link' | 'button' | 'default';
 export type DropdownItemRenderedType = 'link' | 'router-link' | 'button' | 'div';
 export interface DropdownItemRenderedComponent {
     tag: string | Component;
-    onClick?: ((event: Event) => void);
+    onClick?: ((event: MouseEvent) => void);
     attrs: {
         type?: 'button';
         class?: string;
@@ -22,3 +24,147 @@ export interface DropdownItemRenderedComponent {
     };
 }
 export type DropdownItemRenderedRecord = Record<DropdownItemRenderedType, DropdownItemRenderedComponent>;
+export interface DropdownItemProps<T extends DropdownItem<string | number> | null> {
+    /**
+     * See `DropdownItem`.
+     * @default null
+     */
+    item?: T;
+    /**
+     * Use this prop to add a divider above the item.
+     * @default false
+     */
+    hasDivider?: boolean;
+    /**
+     * Whether to apply danger styles to the item.
+     * @default false
+     */
+    danger?: boolean;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the item is selected.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Internal use only - for tracking selection in conjunction with items prop.
+     * @internal
+     * @default false
+     */
+    selectionMenuChild?: boolean;
+    /**
+     * The event handler that triggers when the item is clicked.
+     */
+    onClick?: (event: MouseEvent) => any;
+    /**
+     * Triggers when the item is clicked.
+     */
+    /**
+     * Whether to apply danger styles to the item.
+     * @deprecated Use `danger` instead.
+     * @default false
+     */
+    isDangerous?: boolean;
+}
+export interface DropdownItemEmits<T extends DropdownItem<string | number> | null> {
+    /**
+     * Triggers when the item is clicked.
+     */
+    click: [event: MouseEvent];
+    /**
+     * Triggers when the item is clicked when `selectionMenuChild` is true.
+     * Returns the selected menu item object or `null`.
+     */
+    change: [item: T];
+}
+export interface DropdownItemSlots {
+    /**
+     * The label of the item.
+     */
+    default?: () => any;
+}
+export interface DropdownProps<T extends string | number> {
+    /**
+     * Use this prop when a visual indication of the currently selected menu item is needed.
+     * @default false
+     */
+    selectionMenu?: boolean;
+    /**
+     * Use this prop to customize the default trigger KButton's `appearance` prop.
+     * @default 'primary'
+     */
+    appearance?: ButtonAppearance;
+    /**
+     * The text for the dropdown trigger button.
+     * @default ''
+     */
+    triggerText?: string;
+    /**
+     * Whether the trigger button should show a caret icon.
+     * @default false
+     */
+    showCaret?: boolean;
+    /**
+     * The width of the dropdown body (defaults to `''`).
+     * @default ''
+     */
+    width?: string;
+    /**
+     * Use the `kpopAttributes` prop to configure the KPop props dropdown.
+     * @default {}
+     */
+    kpopAttributes?: Omit<PopoverAttributes, 'target' | 'trigger'>;
+    /**
+     * An array of objects containing a required `label` property and other optional properties which will render a menu of KDropdownItems.
+     * @default []
+     */
+    items?: DropdownItem<T>[];
+    /**
+     * Whether the dropdown is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text to display on hover if dropdown is disabled.
+     * @default ''
+     */
+    disabledTooltip?: string;
+    /**
+     * The text for the dropdown trigger button.
+     * @deprecated Use `triggerText` instead.
+     */
+    label?: string;
+}
+export interface DropdownEmits<T extends string | number> {
+    /**
+     * Triggers when dropdown is opened/closed.
+     */
+    toggleDropdown: [open: boolean];
+    /**
+     * Triggers when an item is selected.
+     */
+    change: [item: DropdownItem<T>];
+}
+export interface DropdownSlots {
+    /**
+     * The trigger element for opening/closing the menu.
+     */
+    default?: () => any;
+    /**
+     * You can customize the appearance of dropdown items using this slot.
+     */
+    items?: (props: {
+        /**
+         * Function that triggers dropdown close.
+         */
+        closeDropdown: () => void;
+        /**
+         * Function that lets KDropdown track selected item when selectionMenu is true.
+         */
+        handleSelection: (item: DropdownItem) => void;
+    }) => any;
+}

package/dist/types/types/popover.d.ts

@@ -146,7 +146,7 @@ export interface PopSlots {
      */
     footer?: () => any;
 }
-export type PopoverAttributes = Pick<PopProps, 'placement' | 'popoverClasses' | 'offset' | 'width'
+export type PopoverAttributes = Pick<PopProps, 'placement' | 'popoverClasses' | 'popoverTimeout' | 'offset' | 'width' | 'hideCaret'
 /** Not supported in KDropdown, KSelect and KMultiselect */
  | 'target' | 'trigger'> & {
     'data-testid'?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong/kongponents",
-  "version": "9.29.7",
+  "version": "9.29.8",
   "description": "Kong Component library",
   "type": "module",
   "repository": {