Merge branch 'cdmoro:main' into main

Author: sfe-efficy

apps/docs/docs/reference/types.md

@@ -243,3 +243,48 @@ type TransitionMode = 'in-out' | 'out-in'
 ```ts
 type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom'
 ```
+
+## Extending types
+
+You can extend some types to use your own values (e.g. colors, sizes). This requires the use of interface augmentation. You can augment next interfaces:
+
+- BaseColorVariant
+- BaseButtonVariant (extends BaseColorVariant)
+- BaseTextColorVariant (extends BaseColorVariant)
+- BaseSize
+- BaseInputSize
+
+Suppose we want to add a purple style and extra-large (xl) sizes.
+We need to create a declaration file in the root of vue project.
+
+**shims-bootstrap-vue-3.d.ts**
+
+```ts
+import 'bootstrap-vue-3'
+
+declare module 'bootstrap-vue-3/dist/types' {
+  export interface BaseColorVariant {
+    'purple': unknown // we use unknown type because it does not matter here
+  }
+  export interface BaseButtonVariant {
+    // there is no need to add "purple" (it inherits from BaseColorVariant)
+    'outline-purple': unknown // outline purple button
+  }
+  export interface BaseTextColorVariant {
+    // there is no need to add "purple" (it inherits from BaseColorVariant)
+  }
+  export interface BaseSize {
+    'xl': unknown // extra large
+  }
+  export interface BaseInputSize {
+    'xl': unknown // extra large (not inherits from BaseSize)
+  }
+}
+```
+
+New values can be used now and the type check will be successful:
+
+```html
+<b-button variant="purple" size="xl">Extra large purple button</b-button>
+<b-button variant="outline-purple">Outline purple button</b-button>
+```

packages/bootstrap-vue-3/src/types/ButtonVariant.d.ts

@@ -1,18 +1,20 @@
-import type {ColorVariant} from '.'
+import type {BaseColorVariant} from '.'
 
 /**
  * @external
  */
-type ButtonVariant =
-  | ColorVariant
-  | 'link'
-  | 'outline-primary'
-  | 'outline-secondary'
-  | 'outline-success'
-  | 'outline-danger'
-  | 'outline-warning'
-  | 'outline-info'
-  | 'outline-light'
-  | 'outline-dark'
+export interface BaseButtonVariant extends BaseColorVariant {
+  'link': unknown
+  'outline-primary': unknown
+  'outline-secondary': unknown
+  'outline-success': unknown
+  'outline-danger': unknown
+  'outline-warning': unknown
+  'outline-info': unknown
+  'outline-light': unknown
+  'outline-dark': unknown
+}
+
+type ButtonVariant = keyof BaseButtonVariant
 
 export default ButtonVariant

packages/bootstrap-vue-3/src/types/ColorVariant.d.ts

@@ -1,14 +1,17 @@
 /**
  * @external
  */
-type ColorVariant =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'warning'
-  | 'info'
-  | 'light'
-  | 'dark'
+ export interface BaseColorVariant {
+  'primary': unknown
+  'secondary': unknown
+  'success': unknown
+  'danger': unknown
+  'warning': unknown
+  'info': unknown
+  'light': unknown
+  'dark': unknown
+}
+
+type ColorVariant = keyof BaseColorVariant
 
 export default ColorVariant

packages/bootstrap-vue-3/src/types/InputSize.d.ts

@@ -1,6 +1,12 @@
 /**
  * @external
  */
-type InputSize = 'sm' | 'md' | 'lg'
+ export interface BaseInputSize {
+  'sm': unknown,
+  'md': unknown,
+  'lg': unknown,
+}
+
+type InputSize = keyof BaseInputSize
 
 export default InputSize

packages/bootstrap-vue-3/src/types/Size.d.ts

@@ -1,6 +1,11 @@
 /**
  * @external
  */
-type Size = 'sm' | 'lg' | undefined
+ export interface BaseSize {
+  'sm': unknown,
+  'lg': unknown,
+}
+
+type Size = keyof BaseSize | undefined
 
 export default Size

packages/bootstrap-vue-3/src/types/TextColorVariant.d.ts

@@ -1,20 +1,17 @@
+import type {BaseColorVariant} from '.'
+
 /**
  * @external
  */
-type TextColorVariant =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'warning'
-  | 'info'
-  | 'light'
-  | 'dark'
-  | 'white'
-  | 'body'
-  | 'muted'
-  | 'black-50'
-  | 'white-50'
-  | 'reset'
+ export interface BaseTextColorVariant extends BaseColorVariant {
+  'white': unknown
+  'body': unknown
+  'muted': unknown
+  'black-50': unknown
+  'white-50': unknown
+  'reset': unknown
+}
+
+type TextColorVariant = keyof BaseTextColorVariant
 
 export default TextColorVariant

packages/bootstrap-vue-3/src/types/index.ts

@@ -12,9 +12,9 @@ export type {
   RowColsBreakpointProps,
 } from './BreakpointProps'
 export type {default as ButtonType} from './ButtonType'
-export type {default as ButtonVariant} from './ButtonVariant'
+export type {default as ButtonVariant, BaseButtonVariant} from './ButtonVariant'
 export type {default as ClassValue} from './ClassValue'
-export type {default as ColorVariant} from './ColorVariant'
+export type {default as ColorVariant, BaseColorVariant} from './ColorVariant'
 export type {ContainerHorizontalAlign, ContainerPosition, ContainerVerticalAlign} from './Container'
 export type {default as InputSize} from './InputSize'
 export type {default as InputType} from './InputType'
@@ -27,12 +27,12 @@ export type {default as PlaceholderSize} from './PlaceholderSize'
 export type {default as Position} from './Position'
 export type {default as RadioOption} from './RadioOption'
 export type {default as SelectOption} from './SelectOption'
-export type {default as Size} from './Size'
+export type {default as Size, BaseSize} from './Size'
 export type {default as SkeletonAnimation} from './SkeletonAnimation'
 export type {default as SkeletonType} from './SkeletonType'
 export type {default as SpinnerType} from './SpinnerType'
 export type {default as TableField, TableFieldObject} from './TableField'
 export type {default as TableItem} from './TableItem'
-export type {default as TextColorVariant} from './TextColorVariant'
+export type {default as TextColorVariant, BaseTextColorVariant} from './TextColorVariant'
 export type {default as TransitionMode} from './TransitionMode'
 export type {default as VerticalAlign} from './VerticalAlign'