- BsListNavItem, BsListTile: improve route matcher

- Improved TypeScript type declarations for better type checking

Author: ahmadfajar

CHANGELOG.md

@@ -11,6 +11,7 @@ Released: August XX, 2024
 
 - **BsListNavItem**, **BsListTile**, **BsTab**, **BsTabItem**:
   - Add `path-name` and `location` properties to better accommodate the `<RouterLink>` property.
+- **BsListNavItem**, **BsListTile**: improve route matcher
 
 
 ## v2.0.10

src/components/Alert/types/index.d.ts

@@ -6,7 +6,7 @@ import {
     VNode,
     VNodeProps
 } from 'vue';
-import { EventClosableProps, EventUpdateModelValueProps, TIconProps, TIconVariant } from '../../../types';
+import { EventVoidClosableProps, EventUpdateModelValueProps, TIconProps, TIconVariant } from '../../../types';
 
 export declare type TAlertOptionProps = TIconProps & {
     /**
@@ -57,7 +57,7 @@ export declare type TAlertOptionProps = TIconProps & {
 export declare type TBsAlert = ComponentObjectPropsOptions<TAlertOptionProps>;
 
 declare type AllowedAlertProps = AllowedComponentProps &
-    ComponentCustomProps & VNodeProps & EventClosableProps &
+    ComponentCustomProps & VNodeProps & EventVoidClosableProps &
     EventUpdateModelValueProps<boolean>;
 
 export declare const BsAlert: {

src/components/Appbar/types/index.d.ts

@@ -49,6 +49,7 @@ export declare type TBsAppbarTitle = ComponentObjectPropsOptions<TAppbarTitleOpt
 
 declare type AllowedAppbarProps = AllowedComponentProps & ComponentCustomProps & VNodeProps & {
     onResize?: (target: HTMLElement) => void;
+    '@resize'?: (target: HTMLElement) => void;
 }
 
 export declare const BsAppbar: {

src/components/Chip/types/index.d.ts

@@ -6,8 +6,7 @@ import {
     VNode,
     VNodeProps
 } from 'vue';
-import { TLabelPosition } from '../../../types';
-import { EventClosableProps, EventUpdateModelValueProps, TIconProps } from '../../../types';
+import { EventUpdateModelValueProps, EventVoidClosableProps, TIconProps, TLabelPosition } from '../../../types';
 
 export declare type TChipValue = {
     id: string;
@@ -179,14 +178,17 @@ export declare type TBsChip = ComponentObjectPropsOptions<TChipOptionProps>;
 export declare type TBsChipGroup = ComponentObjectPropsOptions<TChipGroupOptionProps>;
 
 declare type AllowedChipProps = AllowedComponentProps & ComponentCustomProps &
-    VNodeProps & EventClosableProps & EventUpdateModelValueProps<boolean> & {
+    VNodeProps & EventVoidClosableProps & EventUpdateModelValueProps<boolean> & {
     'onUpdate:active'?: (active: boolean) => void;
+    '@update:active'?: (active: boolean) => void;
 }
 
 declare type AllowedChipGroupProps = AllowedComponentProps & ComponentCustomProps &
     VNodeProps & EventUpdateModelValueProps<TChipValue | TChipValue[] | null> & {
     onChange?: (newValue: TChipValue | TChipValue[] | null) => void;
     'onItem:close'?: (dismissedItem: TChipValue) => void;
+    '@change'?: (newValue: TChipValue | TChipValue[] | null) => void;
+    '@item:close'?: (dismissedItem: TChipValue) => void;
 }
 
 export declare const BsChip: {

src/components/ColorPicker/types/index.d.ts

@@ -120,6 +120,7 @@ export declare type TBsColorPicker = ComponentObjectPropsOptions<TColorPickerOpt
 declare type AllowedColorPickerProps = AllowedComponentProps & ComponentCustomProps &
     VNodeProps & EventUpdateOpenProps & EventUpdateModelValueProps<string> & {
     'onUpdate:mode'?: (mode: TColorPickerMode) => void;
+    '@update:mode'?: (mode: TColorPickerMode) => void;
 }
 
 export declare const BsColorPicker: {

src/components/Combobox/types/index.d.ts

@@ -7,8 +7,8 @@ import {
     VNodeProps
 } from 'vue';
 import {
-    EventClosableProps,
     EventUpdateModelValueProps,
+    EventVoidClosableProps,
     IBsModel,
     TDataSource,
     TInputFieldProps,
@@ -154,7 +154,7 @@ export declare type TComboboxOptionProps = TInputFieldProps & {
 export declare type TBsCombobox = ComponentObjectPropsOptions<TComboboxOptionProps>;
 
 declare type AllowedComboboxProps = AllowedComponentProps &
-    ComponentCustomProps & VNodeProps & EventClosableProps &
+    ComponentCustomProps & VNodeProps & EventVoidClosableProps &
     EventUpdateModelValueProps<string | number | string[] | number[] | undefined> & {
     onClear?: VoidFunction;
     onOpen?: VoidFunction;
@@ -164,6 +164,14 @@ declare type AllowedComboboxProps = AllowedComponentProps &
     onDataError?: (error: unknown) => void;
     onDataFilter?: (data: IBsModel[]) => void;
     'onUpdate:selected-value'?: (selected: IBsModel[]) => void;
+    '@clear'?: VoidFunction;
+    '@open'?: VoidFunction;
+    '@select'?: (item: IBsModel) => void;
+    '@deselect'?: (item: IBsModel) => void;
+    '@data-bind'?: (data: IBsModel[]) => void;
+    '@data-error'?: (error: unknown) => void;
+    '@data-filter'?: (data: IBsModel[]) => void;
+    '@update:selected-value'?: (selected: IBsModel[]) => void;
 }
 
 export declare const BsCombobox: {

src/components/Container/types/index.d.ts

@@ -38,6 +38,7 @@ export declare type TBsContent = ComponentObjectPropsOptions<TContainerOptionPro
 
 export declare type AllowedContainerProps = AllowedComponentProps & ComponentCustomProps & VNodeProps & {
     onResize?: (target: HTMLElement) => void;
+    '@resize'?: (target: HTMLElement) => void;
 }
 
 export declare const BsAppContainer: {

src/components/DatePicker/types/index.d.ts

@@ -7,8 +7,8 @@ import {
     VNodeProps
 } from 'vue';
 import {
-    EventClosableProps,
     EventUpdateModelValueProps,
+    EventVoidClosableProps,
     TInputFieldProps,
     TPopoverPosition
 } from '../../../types';
@@ -201,11 +201,15 @@ declare type AllowedDatePickerProps = AllowedComponentProps & ComponentCustomPro
     VNodeProps & EventUpdateModelValueProps<string>;
 
 declare type AllowedDateTimeFieldProps = AllowedComponentProps & ComponentCustomProps & VNodeProps &
-    EventClosableProps & EventUpdateModelValueProps<string> & {
+    EventVoidClosableProps & EventUpdateModelValueProps<string> & {
     onBlur?: (event: Event) => void;
     onFocus?: (event: Event) => void;
     onClear?: VoidFunction;
     onOpen?: VoidFunction;
+    '@blur'?: (event: Event) => void;
+    '@focus'?: (event: Event) => void;
+    '@clear'?: VoidFunction;
+    '@open'?: VoidFunction;
 }
 
 export declare const BsDatePicker: {

src/components/Drawer/types/index.d.ts

@@ -32,6 +32,7 @@ declare type AllowedSideDrawerProps = AllowedComponentProps &
     VNodeProps &
     EventUpdateOpenProps & {
         onResize?: (target: HTMLElement) => void;
+        '@resize'?: (target: HTMLElement) => void;
     };
 
 export declare const BsSideDrawer: {

src/components/Field/types/index.d.ts

@@ -366,6 +366,10 @@ declare type AllowedTextFieldProps = AllowedComponentProps & ComponentCustomProp
     onClear?: VoidFunction;
     onFocus?: EventListener;
     onKeydown?: EventListener;
+    '@blur'?: EventListener;
+    '@clear'?: VoidFunction;
+    '@focus'?: EventListener;
+    '@keydown'?: EventListener;
 }
 
 export declare const BsTextField: {
@@ -447,6 +451,11 @@ declare type AllowedChipFieldProps = AllowedComponentProps & ComponentCustomProp
     onFocus?: EventListener;
     onKeydown?: EventListener;
     'onDelete-item'?: (deletedItem: string) => void;
+    '@blur'?: EventListener;
+    '@clear'?: VoidFunction;
+    '@focus'?: EventListener;
+    '@keydown'?: EventListener;
+    '@delete-item'?: (deletedItem: string) => void;
 }
 
 export declare const BsChipField: {
@@ -495,6 +504,10 @@ declare type AllowedNumericFieldProps = AllowedComponentProps & ComponentCustomP
     onClear?: VoidFunction;
     onFocus?: EventListener;
     onKeydown?: EventListener;
+    '@blur'?: EventListener;
+    '@clear'?: VoidFunction;
+    '@focus'?: EventListener;
+    '@keydown'?: EventListener;
 }
 
 export declare const BsNumericField: {
@@ -541,6 +554,12 @@ declare type AllowedSearchFieldProps = AllowedComponentProps & ComponentCustomPr
     onOpen?: VoidFunction;
     onFocus?: EventListener;
     onSearch?: (value: string) => void;
+    '@blur'?: EventListener;
+    '@clear'?: VoidFunction;
+    '@close'?: VoidFunction;
+    '@open'?: VoidFunction;
+    '@focus'?: EventListener;
+    '@search'?: (value: string) => void;
 }
 
 export declare const BsSearchField: {