Release 1.12.0

Author: dwaju

README.txt

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

css/mdb.dark.min.css

@@ -1,8 +1,7 @@
 {
   "name": "mdb-vue-ui-kit",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "main": "js/mdb.umd.min.js",
-  "homepage": "https://mdbootstrap.com/docs/b5/vue/",
   "repository": "https://github.com/mdbootstrap/mdb-vue-ui-kit.git",
   "author": "MDBootstrap",
   "license": "MIT",

css/mdb.dark.min.css.map

@@ -10,6 +10,7 @@ import { computed } from "vue";
 export default {
   name: "MDBBadge",
   props: {
+    badge: String,
     color: String,
     pill: Boolean,
     dot: Boolean,
@@ -24,6 +25,7 @@ export default {
       return [
         "badge",
         props.color && `bg-${props.color}`,
+        props.badge && `badge-${props.badge}`,
         props.pill && "rounded-pill",
         props.dot && "badge-dot",
         props.notification && "badge-notification",

css/mdb.dark.rtl.min.css

@@ -193,7 +193,6 @@ export default {
       if (!el.style.height) {
         el.classList.add("show");
         el.style.height = collapse.value.scrollHeight + "px";
-        console.log(el.style.height);
       }
     };
     const leave = (el) => {

css/mdb.min.css

@@ -15,13 +15,17 @@ export default {
     icon: String,
     flag: String,
     size: String,
+    fw: Boolean,
+    solid: Boolean,
   },
   setup(props) {
     const className = computed(() => {
       return [
         !props.flag && props.iconStyle,
         props.flag ? `flag flag-${props.flag}` : `fa-${props.icon}`,
         props.size && `fa-${props.size}`,
+        props.fw && "fa-fw",
+        props.solid && "fa-solid",
       ];
     });
 

css/mdb.min.css.map

@@ -245,7 +245,7 @@ export default {
       }
     }
 
-    const currentLength = ref(0);
+    const currentLength = ref(inputValue.value?.length || 0);
 
     function handleInput(e) {
       if (props.counter) {
@@ -293,6 +293,16 @@ export default {
     });
 
     watchEffect(() => {
+      if (props.counter) {
+        if (props.modelValue?.length > props.maxlength) {
+          inputValue.value = props.modelValue.slice(0, props.maxlength);
+          currentLength.value = props.maxlength;
+          return;
+        }
+
+        currentLength.value = props.modelValue?.length || 0;
+      }
+
       inputValue.value = props.modelValue;
     });
 

css/mdb.rtl.min.css

@@ -74,6 +74,7 @@ import {
   onMounted,
   onUpdated,
   watchEffect,
+  watch,
   onUnmounted,
 } from "vue";
 import { on, off } from "../../utils/MDBEventHandlers";
@@ -221,7 +222,7 @@ export default {
       }
     }
 
-    const currentLength = ref(0);
+    const currentLength = ref(textareaValue.value?.length || 0);
 
     function handleInput(e) {
       if (props.counter) {
@@ -255,7 +256,29 @@ export default {
       off(textareaRef.value, props.validationEvent, handleValidation);
     });
 
-    watchEffect(() => (textareaValue.value = props.modelValue));
+    watchEffect(() => {
+      if (props.counter) {
+        if (props.modelValue?.length > props.maxLength) {
+          textareaValue.value = props.modelValue.slice(0, props.maxLength);
+          currentLength.value = props.maxLength;
+          return;
+        }
+
+        currentLength.value = props.modelValue?.length || 0;
+      }
+
+      textareaValue.value = props.modelValue;
+    });
+
+    watch(
+      () => props.isValidated,
+      (value) => (isInputValidated.value = value)
+    );
+
+    watch(
+      () => props.isValid,
+      (value) => (isInputValid.value = value)
+    );
 
     return {
       textareaRef,

js/mdb.common.js

@@ -0,0 +1,38 @@
+import { ref } from "vue";
+
+const debounce = ref(false);
+
+export const useScrollbarWidth = () => {
+  // Animation
+  const defaultPaddingRight = document.body.style.paddingRight;
+  const getScrollbarWidth = () => {
+    const scrollDiv = document.createElement("div");
+    scrollDiv.className = "modal-scrollbar-measure";
+    document.body.appendChild(scrollDiv);
+    const scrollbarWidth =
+      scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
+    document.body.removeChild(scrollDiv);
+    return scrollbarWidth;
+  };
+  const beforeEnter = () => {
+    if (document.body.scrollHeight > window.innerHeight) {
+      debounce.value = true;
+      document.body.classList.add("modal-open");
+      const paddingRightWhenActive = getScrollbarWidth().toFixed(2);
+      if (paddingRightWhenActive > 0) {
+        document.body.style.paddingRight = `${paddingRightWhenActive}px`;
+      }
+      setTimeout(() => (debounce.value = false), 500);
+    }
+  };
+  const afterLeave = () => {
+    if (debounce.value) return;
+    document.body.classList.remove("modal-open");
+    document.body.style.paddingRight = defaultPaddingRight;
+  };
+
+  return {
+    beforeEnter,
+    afterLeave,
+  };
+};

js/mdb.common.js.map

@@ -0,0 +1,8 @@
+.form-check {
+  &-input[type=checkbox] {
+    margin-right: 0px;
+  }
+  &-label {
+    padding-left: 0.15rem;
+  }
+}

js/mdb.umd.min.js

@@ -2,6 +2,7 @@
 @import "./standard/mdb.free";
 
 // MDB Vue Free
+@import "./free/checkboxes";
 @import "./free/badges";
 @import "./free/buttons";
 @import "./free/button-group";

js/mdb.umd.min.js.map

@@ -1,3 +1,4 @@
 :root {
   --mdb-font-roboto: #{inspect($font-family-roboto)};
+  --mdb-bg-opacity: 1;
 }

package.json

@@ -65,6 +65,12 @@
   "MDBAccordionItem/itemClasses": {
     "type": "string"
   },
+  "mdb-badge/badge": {
+    "type": "string"
+  },
+  "MDBBadge/badge": {
+    "type": "string"
+  },
   "mdb-badge/color": {
     "type": "string"
   },
@@ -1109,6 +1115,18 @@
   "MDBIcon/size": {
     "type": "string"
   },
+  "mdb-icon/fw": {
+    "type": "boolean"
+  },
+  "MDBIcon/fw": {
+    "type": "boolean"
+  },
+  "mdb-icon/solid": {
+    "type": "boolean"
+  },
+  "MDBIcon/solid": {
+    "type": "boolean"
+  },
   "mdb-table/tag": {
     "type": "string"
   },

src/components/free/components/MDBBadge.vue

@@ -43,6 +43,7 @@
   },
   "mdb-badge": {
     "attributes": [
+      "badge",
       "color",
       "pill",
       "dot",
@@ -53,6 +54,7 @@
   },
   "MDBBadge": {
     "attributes": [
+      "badge",
       "color",
       "pill",
       "dot",
@@ -696,7 +698,9 @@
       "iconStyle",
       "icon",
       "flag",
-      "size"
+      "size",
+      "fw",
+      "solid"
     ],
     "description": ""
   },
@@ -705,7 +709,9 @@
       "iconStyle",
       "icon",
       "flag",
-      "size"
+      "size",
+      "fw",
+      "solid"
     ],
     "description": ""
   },

src/components/free/components/MDBCollapse.vue

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "mdb-vue-ui-kit",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -121,6 +121,13 @@
           "name": "MDBBadge",
           "description": "",
           "attributes": [
+            {
+              "name": "badge",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "color",
               "value": {
@@ -1734,6 +1741,20 @@
                 "kind": "expression",
                 "type": "string"
               }
+            },
+            {
+              "name": "fw",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "solid",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
             }
           ],
           "slots": [