- Rename component BsFontAwesome to BsIconFontawesome

- Update component registration
- Update CHANGELOG.md
- Update typescript doc comments

Author: ahmadfajar

CHANGELOG.md

@@ -3,6 +3,21 @@
 > All notable changes to this project will be documented in this file.
 
 
+## v2.1.1
+
+Released: December 04, 2024
+
+### Improvements
+
+- **BsColorPicker**: rename property `outlineModeButton` to `modeButtonOutlined`. 
+- Rename component **BsFontAwesome** to **BsIconFontawesome** for consistency.
+- Improve typescript doc comments.
+
+### Bug Fixes
+
+- **BsTooltip**: fixed bug inconsistent arrow color.
+
+
 ## v2.1.0
 
 Released: December 03, 2024

component.d.ts

@@ -29,8 +29,8 @@ import type {
     BsDivider,
     BsDropdownMenu,
     BsExpandTransition,
-    BsFontAwesome,
     BsIcon,
+    BsIconFontawesome,
     BsIconSpinner,
     BsIconSvg,
     BsImageHolder,
@@ -113,8 +113,8 @@ declare module '@vue/runtime-core' {
         BsDivider: typeof BsDivider;
         BsDropdownMenu: typeof BsDropdownMenu;
         BsExpandTransition: typeof BsExpandTransition;
-        BsFontAwesome: typeof BsFontAwesome;
         BsIcon: typeof BsIcon;
+        BsIconFontawesome: typeof BsIconFontawesome;
         BsIconSpinner: typeof BsIconSpinner;
         BsIconSvg: typeof BsIconSvg;
         BsIconToggle: typeof BsToggleIcon;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-mdbootstrap",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Bootstrap5 Material Design Components for Vue.js",
   "author": {
     "name": "Ahmad Fajar",

scss/banner.scss

@@ -1,5 +1,5 @@
 /*!
- * Vue MDBootstrap v2.1.0
+ * Vue MDBootstrap v2.1.1
  * Released under the BSD-3 License.
  * Copyright Ahmad Fajar (https://ahmadfajar.github.io).
  */

src/components/Icon/BsFontAwesome.ts renamed to src/components/Icon/BsIconFontawesome.ts

@@ -6,8 +6,8 @@ import {
     useSvgClasses,
 } from '@/components/Icon/mixins/svgApi.ts';
 import type {
-    TBsFontAwesome,
-    TFontAwesomeOptionProps,
+    TBsIconFontawesome,
+    TIconFontawesomeOptionProps,
     TFontAwesomeVariant,
     TIconData,
 } from '@/components/Icon/types';
@@ -16,8 +16,8 @@ import type { TRecord } from '@/types';
 import Helper from '@/utils/Helper.ts';
 import { computed, defineComponent, h, onBeforeMount, type Prop, ref, watch } from 'vue';
 
-export default defineComponent<TBsFontAwesome>({
-    name: 'BsFontAwesome',
+export default defineComponent<TBsIconFontawesome>({
+    name: 'BsIconFontawesome',
     props: {
         size: iconSizeObjectProp,
         variant: {
@@ -32,7 +32,7 @@ export default defineComponent<TBsFontAwesome>({
         ...iconProps,
     },
     setup(props) {
-        const thisProps = props as Readonly<TFontAwesomeOptionProps>;
+        const thisProps = props as Readonly<TIconFontawesomeOptionProps>;
         const szWidth = useSizeWidth(thisProps) || 24;
         const szHeight = useSizeHeight(thisProps) || 24;
         const svgIcon = ref<TIconData>();

src/components/Icon/index.ts

@@ -3,18 +3,18 @@ import BsIcon from './BsIcon';
 import BsIconSvg from './BsIconSvg';
 import BsIconSpinner from './BsIconSpinner';
 import BsToggleIcon from './BsToggleIcon';
-import BsFontAwesome from './BsFontAwesome';
+import BsIconFontawesome from './BsIconFontawesome.ts';
 
 const BsIconPlugin: ObjectPlugin = {
     install: (app: App): void => {
         app.component(BsIcon.name as string, BsIcon);
         app.component(BsIconSvg.name as string, BsIconSvg);
         app.component(BsIconSpinner.name as string, BsIconSpinner);
         app.component(BsToggleIcon.name as string, BsToggleIcon);
-        app.component(BsFontAwesome.name as string, BsFontAwesome);
+        app.component(BsIconFontawesome.name as string, BsIconFontawesome);
         // Backward compatibility
         app.component('BsIconToggle', BsToggleIcon);
     },
 };
 
-export { BsIconPlugin, BsIcon, BsIconSvg, BsIconSpinner, BsToggleIcon, BsFontAwesome };
+export { BsIconPlugin, BsIcon, BsIconSvg, BsIconSpinner, BsToggleIcon, BsIconFontawesome };

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

@@ -95,6 +95,40 @@ export declare type TIconOptionProps = TSizeOptionProps & {
     rotate?: TIconRotation;
 };
 
+export declare type TIconFontawesomeOptionProps = TSizeOptionProps & {
+    /**
+     * Any valid font awesome icon name.
+     *
+     * @see [Font Awesome](https://fontawesome.com/v6/search?o=r&m=free) for details.
+     */
+    icon: string;
+    /**
+     * Font Awesome style variant, valid values are: `regular`, `solid`, `light`.
+     * Default is `solid`.
+     */
+    variant?: TFontAwesomeVariant;
+    /**
+     * Font Awesome vendor version. Default is `6.7.1`.
+     */
+    version?: string;
+    /**
+     * Apply **pulse** animation to the icon.
+     */
+    pulse?: boolean;
+    /**
+     * Apply **spin** animation to the icon.
+     */
+    spin?: boolean;
+    /**
+     * Flip the icon, valid values are: `horizontal`, `vertical`, `both`.
+     */
+    flip?: TFlipMode;
+    /**
+     * Rotate the icon, valid values are: `90`, `180`, `270`.
+     */
+    rotate?: TIconRotation;
+}
+
 export declare type TIconSpinnerOptionProps = {
     /**
      * The Icon color.
@@ -159,61 +193,27 @@ export declare type TToggleIconOptionProps = {
     size?: string | number;
 };
 
-export declare type TFontAwesomeOptionProps = TSizeOptionProps & {
-    /**
-     * Any valid font awesome icon name.
-     *
-     * @see [Font Awesome](https://fontawesome.com/v6/search?o=r&m=free) for details.
-     */
-    icon: string;
-    /**
-     * Font Awesome style variant, valid values are: `regular`, `solid`, `light`.
-     * Default is `solid`.
-     */
-    variant?: TFontAwesomeVariant;
-    /**
-     * Font Awesome vendor version. Default is `6.7.1`.
-     */
-    version?: string;
-    /**
-     * Apply **pulse** animation to the icon.
-     */
-    pulse?: boolean;
-    /**
-     * Apply **spin** animation to the icon.
-     */
-    spin?: boolean;
-    /**
-     * Flip the icon, valid values are: `horizontal`, `vertical`, `both`.
-     */
-    flip?: TFlipMode;
-    /**
-     * Rotate the icon, valid values are: `90`, `180`, `270`.
-     */
-    rotate?: TIconRotation;
-}
-
-export declare type TBsFontAwesome = ComponentObjectPropsOptions<TFontAwesomeOptionProps>;
-
 export declare type TBsIcon = ComponentObjectPropsOptions<TIconOptionProps>;
 
 export declare type TBsIconSvg = ComponentObjectPropsOptions<TIconOptionProps>;
 
 export declare type TBsIconSpinner = ComponentObjectPropsOptions<TIconSpinnerOptionProps>;
 
+export declare type TBsIconFontawesome = ComponentObjectPropsOptions<TIconFontawesomeOptionProps>;
+
 export declare type TBsToggleIcon = ComponentObjectPropsOptions<TToggleIconOptionProps>;
 
 export declare const spinnerSvgData = 'SVG+ML/data';
 
-export declare const BsFontAwesome: {
+export declare const BsIcon: {
     new (): {
-        $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & TFontAwesomeOptionProps;
+        $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & TIconOptionProps;
     };
 };
 
-export declare const BsIcon: {
+export declare const BsIconFontawesome: {
     new (): {
-        $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & TIconOptionProps;
+        $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & TIconFontawesomeOptionProps;
     };
 };