Release 4.0.0

README.txt

@@ -1,6 +1,6 @@
 MDB 5 Vue
 
-Version: FREE 3.2.0
+Version: FREE 4.0.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/vue/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-vue-ui-kit",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "type": "module",
   "main": "js/mdb.umd.min.js",
   "module": "js/mdb.es.min.js",

src/components/free/components/MDBDropdown.vue

@@ -23,6 +23,7 @@ import {
 import MDBPopper from "../../utils/MDBPopper";
 import { on, off } from "../../utils/MDBEventHandlers";
 import { handleBreakpoints } from "../../utils/MDBBreakpointHandler";
+import { useMotionReduced } from "../../../composables/free/useMotionReduced";
 
 const props = defineProps({
   tag: {
@@ -111,19 +112,25 @@ watch(
       isActive.value = props.modelValue;
       canUpdate.value = false;
     }
-    syncValuesTimeout.value = setTimeout(() => {
-      isActive.value = props.modelValue;
-    }, 300);
+    syncValuesTimeout.value = setTimeout(
+      () => {
+        isActive.value = props.modelValue;
+      },
+      useMotionReduced() ? 0 : 300
+    );
   }
 );
 
 watch(
   () => canUpdate.value,
   (curr) => {
     if (!curr) {
-      canUpdateTimeout.value = setTimeout(() => {
-        canUpdate.value = true;
-      }, 200);
+      canUpdateTimeout.value = setTimeout(
+        () => {
+          canUpdate.value = true;
+        },
+        useMotionReduced() ? 0 : 200
+      );
     }
   }
 );

src/components/free/components/MDBDropdownMenu.vue

@@ -56,6 +56,7 @@ export default {
 import { MDBInput } from "../../../index.free";
 import { computed, inject, onMounted, Ref, ref, watch } from "vue";
 import { on, off } from "../../utils/MDBEventHandlers";
+import { useMotionReduced } from "../../../composables/free/useMotionReduced";
 
 const props = defineProps({
   tag: {
@@ -88,7 +89,7 @@ const props = defineProps({
   },
 });
 
-const animationDuration = 550;
+const animationDuration = useMotionReduced() ? 0 : 550;
 
 const className = computed(() => {
   return [
@@ -137,9 +138,12 @@ if (isActive) {
     () => isActive.value,
     (cur) => {
       if (cur) {
-        setTimeout(() => {
-          setMenuMountedState(true, root.value as HTMLElement);
-        }, 100);
+        setTimeout(
+          () => {
+            setMenuMountedState(true, root.value as HTMLElement);
+          },
+          useMotionReduced() ? 0 : 100
+        );
       } else if (!cur && isPopperActive) {
         setInactive();
 

src/components/free/forms/MDBInput.vue

@@ -174,7 +174,7 @@ const inputClassName = computed(() => {
       : props.inputGroup &&
         props.inputGroup !== true &&
         `form-control-${props.inputGroup}`,
-    inputValue.value && "active",
+    (inputValue.value || inputValue.value === 0) && "active",
     showPlaceholder.value && "placeholder-active",
     isInputValidated.value && isInputValid.value && "is-valid",
     isInputValidated.value && !isInputValid.value && "is-invalid",

src/composables/free/useMotionReduced.ts

@@ -0,0 +1,6 @@
+export const useMotionReduced = (): boolean => {
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  return false; // default to false if not supported
+};

src/scss/free/_scrollspy.scss

@@ -0,0 +1,3 @@
+.nav-pills.menu-sidebar .nav-link {
+  border-left: 0 solid transparent;
+}

src/scss/index.free.scss

@@ -13,6 +13,7 @@
 @import "./free/navbar";
 @import "./free/tooltips";
 @import "./free/popovers";
+@import "./free/scrollspy";
 @import "./free/validation";
 @import "./free/tabs";
 @import "./free/input-group";

types/composables/free/useMotionReduced.d.ts

@@ -0,0 +1 @@
+export declare const useMotionReduced: () => boolean;