- BsModel: fixed bug when the toObject method was overridden and its return value did not have a field that was mentioned by the idProperty property.

- BsListTile: remove `d-flex` from its classes
- BsSideDrawer: improvement when there are multiple `<BsApp>` and `<BsSideDrawer>` instances.
- Update CHANGELOG.md
- Fixed Typescript type-check error on Vue v3.51 or later
- Fixed coding style consistency

Author: ahmadfajar

CHANGELOG.md

@@ -5,13 +5,19 @@
 
 ## v2.0.11
 
-Released: August XX, 2024
+Released: September 08, 2024
 
 ### Features & Improvements
 
 - **BsListNavItem**, **BsListTile**, **BsTab**, **BsTabItem**:
   - Add `path-name` and `location` properties to better accommodate the `<RouterLink>` property.
 - **BsListNavItem**, **BsListTile**: improve route matcher
+- **BsSideDrawer**: improvement when there are multiple `<BsApp>` and `<BsSideDrawer>` instances.
+
+### Bug Fixes
+
+- **BsModel**: fixed bug when the `toObject` method was overridden and its return 
+  value did not have a field that was mentioned by the `idProperty` property.
 
 
 ## v2.0.10
@@ -26,7 +32,7 @@ Released: August 12, 2024
 - **BsTextField**, **BsNumericField**: add properties `prefix` and `suffix`.
 - **BsChip**: improve UI border-radius to comply material design spec.
 - **BsDateTimeField**: prevents the DatePicker from being displayed when the field is in read-only state.
-- **BsStore**: add `expression` property on `TFilterOption` object.
+- **BsStore**: add `expression` property on `TFilterOption` configuration.
 
 ### Bug Fixes
 

component.d.ts

@@ -1,10 +1,11 @@
 import type { AxiosInstance } from 'axios';
 import type {
     BsAlert,
-    BsAppContainer,
+    BsApp,
     BsAppbar,
     BsAppbarItems,
     BsAppbarTitle,
+    BsAppContainer,
     BsAvatar,
     BsBadge,
     BsButton,
@@ -33,6 +34,7 @@ import type {
     BsIconSvg,
     BsImageHolder,
     BsLightbox,
+    BsListbox,
     BsListNav,
     BsListNavItem,
     BsListTile,
@@ -42,7 +44,6 @@ import type {
     BsListTileSubtitle,
     BsListTileTitle,
     BsListView,
-    BsListbox,
     BsMaskLoader,
     BsModal,
     BsNotification,
@@ -67,18 +68,19 @@ import type {
     BsToggleField,
     BsToggleIcon,
     BsTooltip,
-    vClickOutside,
     IHttpService,
     INotificationProvider,
+    TVueMdb,
+    vClickOutside,
     vResize,
     vScroll,
-    TVueMdb,
     vTouch,
 } from './dist/vue-mdb';
 
 declare module '@vue/runtime-core' {
     export interface GlobalComponents {
         BsAlert: typeof BsAlert;
+        BsApp: typeof BsApp;
         BsAppContainer: typeof BsAppContainer;
         BsAppbar: typeof BsAppbar;
         BsAppbarItems: typeof BsAppbarItems;

package.json

@@ -62,13 +62,13 @@
     "type-check": "tsc --noEmit -p tsconfig.build.json --composite false"
   },
   "dependencies": {
-    "axios": "^1.7.4",
+    "axios": "^1.7.7",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "fast-xml-parser": "^4.4.1",
+    "fast-xml-parser": "^4.5.0",
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
     "resize-observer-polyfill": "^1.5.1",
-    "vue": "^3.4.38"
+    "vue": "^3.5.3"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -77,18 +77,18 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash": "^4.17.7",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^22.4.0",
+    "@types/node": "^22.5.4",
     "@vue/tsconfig": "^0.5.1",
     "bootstrap": "5.2.3",
     "clean-css-cli": "^5.6.3",
     "compass-mixins": "^0.12.12",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
     "rollup-plugin-dts": "^6.1.1",
-    "sass": "^1.77.8",
+    "sass": "^1.78.0",
     "terser": "^5.31.6",
     "typescript": "^5.5.4",
-    "vite": "^5.4.1",
+    "vite": "^5.4.3",
     "vue-router": "^4.4.3"
   },
   "browserslist": [

src/components/Alert/BsAlert.ts

@@ -1,10 +1,14 @@
-import type { ComponentOptionsMixin, ComputedOptions, EmitsOptions, MethodOptions } from 'vue';
 import { computed, defineComponent, nextTick, ref, watch } from 'vue';
-import type { TAlertOptionProps, TBsAlert, TRecord } from '../../types';
-import { useAlertClassNames, useAlertColorName, useAlertIconName, useRenderAlert } from './mixins/alertApi';
+import {
+    useAlertClassNames,
+    useAlertColorName,
+    useAlertIconName,
+    useRenderAlert,
+} from './mixins/alertApi';
 import { alertProps } from './mixins/alertProps';
+import type { TAlertOptionProps, TBsAlert } from './types';
 
-export default defineComponent<TBsAlert, TRecord, TRecord, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions>({
+export default defineComponent<TBsAlert>({
     name: 'BsAlert',
     props: alertProps,
     emits: [
@@ -15,26 +19,22 @@ export default defineComponent<TBsAlert, TRecord, TRecord, ComputedOptions, Meth
         /**
          * Event fired when this component's value is updated.
          */
-        'update:model-value'
+        'update:model-value',
     ],
-    setup(props, {emit, slots}) {
+    setup(props, { emit, slots }) {
         const thisProps = props as Readonly<TAlertOptionProps>;
         const dismiss = ref<boolean>(false);
-        const colorName = computed<string | undefined>(
-            () => useAlertColorName(thisProps)
-        );
-        const alertIconName = computed<string | undefined>(
-            () => useAlertIconName(thisProps)
-        );
-        const classNames = computed<Record<string, boolean | undefined>>(
-            () => useAlertClassNames(thisProps, colorName)
+        const colorName = computed<string | undefined>(() => useAlertColorName(thisProps));
+        const alertIconName = computed<string | undefined>(() => useAlertIconName(thisProps));
+        const classNames = computed<Record<string, boolean | undefined>>(() =>
+            useAlertClassNames(thisProps, colorName)
         );
         const show = computed(() => !dismiss.value && thisProps.modelValue);
         const dismissedAlert = () => {
             dismiss.value = true;
             emit('update:model-value', false);
-            nextTick().then(() => emit('close'))
-        }
+            nextTick().then(() => emit('close'));
+        };
 
         watch(
             () => thisProps.modelValue,
@@ -46,6 +46,14 @@ export default defineComponent<TBsAlert, TRecord, TRecord, ComputedOptions, Meth
         );
 
         return () =>
-            useRenderAlert(slots, thisProps, show, classNames, colorName, alertIconName, dismissedAlert);
-    }
+            useRenderAlert(
+                slots,
+                thisProps,
+                show,
+                classNames,
+                colorName,
+                alertIconName,
+                dismissedAlert
+            );
+    },
 });

src/components/Alert/index.ts

@@ -1,12 +1,12 @@
-import type {App, Plugin} from "vue";
-import BsAlert from "./BsAlert";
-import "../../../scss/_transitions.scss";
-import "./alert.scss";
+import type { App, Plugin } from 'vue';
+import BsAlert from './BsAlert';
+import '../../../scss/_transitions.scss';
+import './alert.scss';
 
 const BsAlertPlugin: Plugin = {
     install: (app: App): void => {
         app.component(BsAlert.name as string, BsAlert);
-    }
-}
+    },
+};
 
-export {BsAlertPlugin, BsAlert}
+export { BsAlertPlugin, BsAlert };

src/components/Alert/mixins/alertApi.ts

@@ -4,7 +4,7 @@ import {
     cssPrefix,
     useRenderSlotDefault,
     useRenderSlotWithWrapper,
-    useRenderTransition
+    useRenderTransition,
 } from '../../../mixins/CommonApi';
 import type { TAlertOptionProps, TBsButton, TBsIcon, TButtonMode } from '../../../types';
 import Helper from '../../../utils/Helper';
@@ -14,17 +14,18 @@ import { BsIcon } from '../../Icon';
 
 export function useAlertClassNames(
     props: Readonly<TAlertOptionProps>,
-    colorName: ComputedRef<string | undefined>,
+    colorName: ComputedRef<string | undefined>
 ): Record<string, boolean | undefined> {
     const solid = props.solidFill || props.filled;
     return {
         'alert d-flex': true,
         'align-items-center': true,
         'alert-dismissible': props.dismissible,
         [`alert-${colorName.value}`]: !Helper.isEmpty(colorName.value) && !props.outlined && !solid,
-        [`${cssPrefix}alert-solid-${colorName.value}`]: !Helper.isEmpty(colorName.value) && solid && !props.outlined,
+        [`${cssPrefix}alert-solid-${colorName.value}`]:
+            !Helper.isEmpty(colorName.value) && solid && !props.outlined,
         [`${cssPrefix}alert-outline-${colorName.value}`]: props.outlined,
-    }
+    };
 }
 
 export function useAlertColorName(props: Readonly<TAlertOptionProps>): string | undefined {
@@ -70,46 +71,49 @@ function doRenderAlert(
     classNames: ComputedRef<Record<string, boolean | undefined>>,
     alertColorName: ComputedRef<string | undefined>,
     alertIconName: ComputedRef<string | undefined>,
-    dismissHandler: VoidFunction,
+    dismissHandler: VoidFunction
 ): VNode {
     // openBlock();
     // return createElementBlock('div', {
-    return h('div', {
-        // class: normalizeClass(classNames.value),
-        class: classNames.value,
-        role: 'alert'
-    }, [
-        useRenderSlotWithWrapper(
-            slots, 'icon', Helper.uuid(),
-            {class: 'd-flex alert-icon me-3'},
-            (
+    return h(
+        'div',
+        {
+            // class: normalizeClass(classNames.value),
+            class: classNames.value,
+            role: 'alert',
+        },
+        [
+            useRenderSlotWithWrapper(
+                slots,
+                'icon',
+                Helper.uuid(),
+                { class: 'd-flex alert-icon me-3' },
                 alertIconName.value
                     ? h<TBsIcon>(BsIcon, {
-                        ...useCreateIconProps(props),
-                        icon: alertIconName.value as Prop<string | undefined>,
-                        size: 32 as Prop<number>,
-                    })
+                          ...useCreateIconProps(props),
+                          icon: alertIconName.value as Prop<string | undefined>,
+                          size: 32 as Prop<number>,
+                      })
                     : undefined
-            )
-        ),
-        useRenderSlotDefault('div', slots, 'flex-fill'),
-        props.dismissible
-            ? h<TBsButton>(BsButton, {
-                class: 'ms-auto',
-                color: (
-                    !(props.filled || props.solidFill)
-                        ? alertColorName.value
-                        : ['light', 'light-grey'].includes(props.color as string)
-                            ? 'dark' : 'light text-white'
-                ) as Prop<string>,
-                icon: 'close' as Prop<string>,
-                mode: 'icon' as Prop<TButtonMode>,
-                // @ts-ignore
-                flat: true as Prop<boolean>,
-                onClick: dismissHandler
-            })
-            : createCommentVNode(' v-if-alert-dismissible '),
-    ]);
+            ),
+            useRenderSlotDefault('div', slots, 'flex-fill'),
+            props.dismissible
+                ? h<TBsButton>(BsButton, {
+                      class: 'ms-auto',
+                      color: (!(props.filled || props.solidFill)
+                          ? alertColorName.value
+                          : ['light', 'light-grey'].includes(props.color as string)
+                            ? 'dark'
+                            : 'light text-white') as Prop<string>,
+                      icon: 'close' as Prop<string>,
+                      mode: 'icon' as Prop<TButtonMode>,
+                      // @ts-ignore
+                      flat: true as Prop<boolean>,
+                      onClick: dismissHandler,
+                  })
+                : createCommentVNode(' v-if-alert-dismissible '),
+        ]
+    );
 }
 
 export function useRenderAlert(
@@ -119,14 +123,12 @@ export function useRenderAlert(
     classNames: ComputedRef<Record<string, boolean | undefined>>,
     alertColorName: ComputedRef<string | undefined>,
     alertIconName: ComputedRef<string | undefined>,
-    dismissHandler: VoidFunction,
+    dismissHandler: VoidFunction
 ): VNode {
     return useRenderTransition(
-        {name: props.transition},
-        (
-            showAlert.value
-                ? doRenderAlert(slots, props, classNames, alertColorName, alertIconName, dismissHandler)
-                : createCommentVNode(' BsAlert ')
-        ),
+        { name: props.transition },
+        showAlert.value
+            ? doRenderAlert(slots, props, classNames, alertColorName, alertIconName, dismissHandler)
+            : createCommentVNode(' BsAlert ')
     );
 }

src/components/Alert/mixins/alertProps.ts

@@ -1,6 +1,11 @@
-import {booleanProp, booleanTrueProp, defaultTransitionProp, stringProp} from "../../../mixins/CommonProps";
-import {iconProps} from "../../Avatar/mixins/avatarProps";
-import {iconVariant} from "../../Icon/mixins/iconProps";
+import {
+    booleanProp,
+    booleanTrueProp,
+    defaultTransitionProp,
+    stringProp,
+} from '../../../mixins/CommonProps';
+import { iconProps } from '../../Avatar/mixins/avatarProps';
+import { iconVariant } from '../../Icon/mixins/iconProps';
 
 export const alertProps = {
     color: stringProp,
@@ -9,17 +14,19 @@ export const alertProps = {
     iconType: {
         type: String,
         default: undefined,
-        validator: (value: string): boolean => ["success", "info", "warning", "danger", "help"].includes(value)
+        validator: (value: string): boolean =>
+            ['success', 'info', 'warning', 'danger', 'help'].includes(value),
     },
     variant: {
         type: String,
         default: undefined,
-        validator: (value: string): boolean => ["success", "info", "warning", "danger", "help"].includes(value)
+        validator: (value: string): boolean =>
+            ['success', 'info', 'warning', 'danger', 'help'].includes(value),
     },
     outlined: booleanProp,
     filled: booleanProp,
     solidFill: booleanProp,
     transition: defaultTransitionProp,
     modelValue: booleanTrueProp,
     ...iconProps,
-}
+};