release 3.1.1

Author: smolenski-mikolaj

README.txt

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

js/mdb.es.min.js

@@ -1053,7 +1053,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     tag: {
       type: String,
       default: "ul"
-    }
+    },
+    light: Boolean,
+    small: Boolean
   },
   setup(__props) {
     const props = __props;
@@ -1062,7 +1064,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         "list-group",
         props.horizontal && horizontalClass.value,
         props.flush && "list-group-flush",
-        props.numbered && "list-group-numbered"
+        props.numbered && "list-group-numbered",
+        props.light && "list-group-light",
+        props.small && "list-group-small"
       ];
     });
     const horizontalClass = computed(() => {
@@ -1105,21 +1109,38 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: false
     },
-    color: String
+    color: String,
+    noBorder: Boolean,
+    spacing: {
+      type: [Boolean, String],
+      default: false
+    },
+    ripple: {
+      type: [Object, Boolean],
+      default: false
+    }
   },
   setup(__props) {
     const props = __props;
+    const spacingClass = computed(() => {
+      if (!props.spacing) {
+        return;
+      }
+      return props.spacing !== true ? props.spacing : "px-3";
+    });
     const className = computed(() => {
       return [
         "list-group-item",
         props.active && "active",
         props.disabled && "disabled",
         props.action && "list-group-item-action",
-        props.color && `list-group-item-${props.color}`
+        props.color && `list-group-item-${props.color}`,
+        props.noBorder && `border-0`,
+        props.spacing && spacingClass.value
       ];
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+      return withDirectives((openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
         class: normalizeClass(unref(className)),
         "aria-current": __props.active ? true : null,
         "aria-disabled": __props.disabled ? true : null,
@@ -1129,7 +1150,9 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 8, ["class", "aria-current", "aria-disabled", "disabled"]);
+      }, 8, ["class", "aria-current", "aria-disabled", "disabled"])), [
+        [unref(RippleDirective), props.ripple]
+      ]);
     };
   }
 });
@@ -3457,6 +3480,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const animationDuration = 550;
     const className = computed(() => {
       return [
         "dropdown-menu",
@@ -3482,7 +3506,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       }
       setTimeout(() => {
         fadeClass.value = false;
-      }, 300);
+      }, animationDuration);
     };
     const setMenuMountedState = inject("setMenuMountedState", () => false);
     const isActive = inject("isActive", false);
@@ -3498,7 +3522,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             setInactive();
             setTimeout(() => {
               setMenuMountedState(false);
-            }, 300);
+            }, animationDuration);
           }
         }
       );
@@ -3518,7 +3542,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       } else if (isActive && !isActive.value && isPopperActive && !isPopperActive.value) {
         setTimeout(() => {
           return false;
-        }, 300);
+        }, animationDuration);
       }
       return false;
     });
@@ -4376,9 +4400,12 @@ function useMDBModal(props, emit) {
     el.style.opacity = "0";
     el.style.display = "block";
     setScrollbar();
-    document.body.style.paddingRight = `${scrollbarWidth.value}px`;
-    el.style.paddingRight = `${scrollbarWidth.value}px`;
-    document.body.classList.add("modal-open");
+    isOnlyNonInvasiveModal();
+    if (onlyNonInvasiveModal.value) {
+      document.body.style.paddingRight = `${scrollbarWidth.value}px`;
+      el.style.paddingRight = `${scrollbarWidth.value}px`;
+      document.body.classList.add("modal-open");
+    }
     emit("show", root.value);
   };
   const afterEnter = (el) => {
@@ -4403,11 +4430,13 @@ function useMDBModal(props, emit) {
     const child = el.childNodes[0];
     child.style.transform = dialogTransform.value;
     el.style.opacity = "0";
-    setTimeout(() => {
-      el.style.paddingRight = "";
-      document.body.style.paddingRight = "";
-      document.body.classList.remove("modal-open");
-    }, 200);
+    if (onlyNonInvasiveModal.value) {
+      setTimeout(() => {
+        el.style.paddingRight = "";
+        document.body.style.paddingRight = "";
+        document.body.classList.remove("modal-open");
+      }, 200);
+    }
     emit("hide", thisElement.value);
     if (props.keyboard) {
       off(window, "keyup", handleEscKeyUp);
@@ -4423,6 +4452,10 @@ function useMDBModal(props, emit) {
   onBeforeUnmount(() => {
     off(window, "keyup", handleEscKeyUp);
   });
+  const onlyNonInvasiveModal = ref(true);
+  const isOnlyNonInvasiveModal = () => {
+    onlyNonInvasiveModal.value = document.body.classList.contains("modal-open") ? document.querySelector(".modal.non-invasive") ? true : false : true;
+  };
   return {
     wrapperClass,
     dialogClass,
@@ -4447,7 +4480,9 @@ function useMDBModal(props, emit) {
     dialogTransform,
     animateStaticModal,
     fullscreenClass,
-    clickFromBackdrop
+    clickFromBackdrop,
+    isOnlyNonInvasiveModal,
+    onlyNonInvasiveModal
   };
 }
 const __default__$y = {
@@ -7224,10 +7259,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$2 = ["for"];
 const _hoisted_2$2 = ["id"];
+const MDBFileList = typeof FileList !== "undefined" ? FileList : Object;
 const __default__$2 = {
   name: "MDBFile"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = defineComponent({
   ...__default__$2,
   props: {
     id: String,
@@ -7239,7 +7275,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     label: String,
     labelClass: String,
     modelValue: {
-      type: [FileList, Array],
+      type: [MDBFileList, Array],
       default: () => []
     },
     size: String,

js/mdb.umd.min.js

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

package.json

@@ -88,6 +88,8 @@ const props = defineProps({
   },
 });
 
+const animationDuration = 550;
+
 const className = computed(() => {
   return [
     "dropdown-menu",
@@ -118,7 +120,7 @@ const handleAnimation = () => {
 
   setTimeout(() => {
     fadeClass.value = false;
-  }, 300);
+  }, animationDuration);
 };
 
 // ------------------- isActive -------------------
@@ -143,7 +145,7 @@ if (isActive) {
 
         setTimeout(() => {
           setMenuMountedState(false);
-        }, 300);
+        }, animationDuration);
       }
     }
   );
@@ -179,7 +181,7 @@ const isMounted = computed(() => {
     /* eslint-disable */
     setTimeout(() => {
       return false;
-    }, 300);
+    }, animationDuration);
     /* eslint-enable */
   }
 

src/components/free/components/MDBDropdownMenu.vue

@@ -27,13 +27,17 @@ const props = defineProps({
     type: String,
     default: "ul",
   },
+  light: Boolean,
+  small: Boolean,
 });
 const className = computed(() => {
   return [
     "list-group",
     props.horizontal && horizontalClass.value,
     props.flush && "list-group-flush",
     props.numbered && "list-group-numbered",
+    props.light && "list-group-light",
+    props.small && "list-group-small",
   ];
 });
 

src/components/free/components/MDBListGroup.vue

@@ -5,6 +5,7 @@
     :aria-current="active ? true : null"
     :aria-disabled="disabled ? true : null"
     :disabled="disabled ? true : null"
+    v-mdb-ripple="props.ripple"
   >
     <slot />
   </component>
@@ -18,6 +19,7 @@ export default {
 
 <script setup lang="ts">
 import { computed } from "vue";
+import vMdbRipple from "../../../directives/free/mdbRipple";
 
 const props = defineProps({
   tag: {
@@ -37,6 +39,22 @@ const props = defineProps({
     default: false,
   },
   color: String,
+  noBorder: Boolean,
+  spacing: {
+    type: [Boolean, String],
+    default: false,
+  },
+  ripple: {
+    type: [Object, Boolean],
+    default: false,
+  },
+});
+
+const spacingClass = computed(() => {
+  if (!props.spacing) {
+    return;
+  }
+  return props.spacing !== true ? props.spacing : "px-3";
 });
 
 const className = computed(() => {
@@ -46,6 +64,8 @@ const className = computed(() => {
     props.disabled && "disabled",
     props.action && "list-group-item-action",
     props.color && `list-group-item-${props.color}`,
+    props.noBorder && `border-0`,
+    props.spacing && spacingClass.value,
   ];
 });
 </script>

src/components/free/components/MDBListGroupItem.vue

@@ -16,6 +16,8 @@
 </template>
 
 <script lang="ts">
+export const MDBFileList = typeof FileList !== "undefined" ? FileList : Object;
+
 export default {
   name: "MDBFile",
 };
@@ -35,7 +37,7 @@ const props = defineProps({
   label: String,
   labelClass: String,
   modelValue: {
-    type: [FileList, Array] as PropType<FileList | File[]>,
+    type: [MDBFileList, Array] as PropType<FileList | File[]>,
     default: () => [],
   },
   size: String,

src/components/free/forms/MDBFile.vue

@@ -2,6 +2,12 @@ import { ref } from "vue";
 
 const debounce = ref(false);
 
+const onlyModal = ref<boolean>(null);
+
+const isOnlyModal = () => {
+  onlyModal.value = !document.body.classList.contains("modal-open");
+};
+
 export const useScrollbarWidth = () => {
   // Animation
   const defaultPaddingRight = document.body.style.paddingRight;
@@ -16,19 +22,24 @@ export const useScrollbarWidth = () => {
   };
   const beforeEnter = () => {
     if (document.body.scrollHeight > window.innerHeight) {
+      !onlyModal.value && isOnlyModal();
       debounce.value = true;
       document.body.classList.add("modal-open");
-      const paddingRightWhenActive = Number(getScrollbarWidth().toFixed(2));
-      if (paddingRightWhenActive > 0) {
-        document.body.style.paddingRight = `${paddingRightWhenActive}px`;
+      if (onlyModal.value) {
+        const paddingRightWhenActive = Number(getScrollbarWidth().toFixed(2));
+        if (paddingRightWhenActive > 0) {
+          document.body.style.paddingRight = `${paddingRightWhenActive}px`;
+        }
+        setTimeout(() => (debounce.value = false), 500);
       }
-      setTimeout(() => (debounce.value = false), 500);
     }
   };
   const afterLeave = () => {
     if (debounce.value) return;
-    document.body.classList.remove("modal-open");
-    document.body.style.paddingRight = defaultPaddingRight;
+    if (onlyModal.value) {
+      document.body.classList.remove("modal-open");
+      document.body.style.paddingRight = defaultPaddingRight;
+    }
   };
 
   return {