Release 2.0.0

README.txt

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-vue-ui-kit",
-  "version": "1.14.0",
+  "version": "2.0.0",
   "main": "js/mdb.umd.min.js",
   "repository": "https://github.com/mdbootstrap/mdb-vue-ui-kit.git",
   "author": "MDBootstrap",

src/components/free/components/MDBCarousel.vue

@@ -22,9 +22,12 @@
       ></button>
     </div>
 
-    <div class="carousel-inner" ref="carouselInnerRef">
+    <div :class="innerClassName" ref="carouselInnerRef">
       <div v-for="(item, key) in items" class="carousel-item" :key="key">
-        <img :src="item.src" :alt="item.alt" :class="itemsClass" />
+        <video v-if="item.video" class="img-fluid" autoplay loop muted>
+          <source :src="item.video" :type="item.videoType" />
+        </video>
+        <img v-else :src="item.src" :alt="item.alt" :class="itemsClass" />
         <div v-if="item.label || item.caption" :class="captionsClass">
           <h5 v-if="item.label">{{ item.label }}</h5>
           <p v-if="item.caption">{{ item.caption }}</p>
@@ -105,6 +108,7 @@ export default {
       type: Boolean,
       default: true,
     },
+    innerClass: String,
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
@@ -116,6 +120,9 @@ export default {
         props.dark && "carousel-dark",
       ];
     });
+    const innerClassName = computed(() => {
+      return ["carousel-inner", props.innerClass];
+    });
 
     const activeItemKey = ref(props.modelValue);
     const carouselInnerRef = ref(null);
@@ -334,6 +341,7 @@ export default {
 
     return {
       className,
+      innerClassName,
       carouselInnerRef,
       activeItemKey,
       handleMouseenter,

src/components/free/components/MDBListGroup.vue

@@ -21,6 +21,14 @@ export default {
       type: String,
       default: "ul",
     },
+    light: {
+      type: Boolean,
+      default: false,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     const className = computed(() => {
@@ -29,6 +37,8 @@ export default {
         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/MDBListGroupItem.vue

@@ -5,12 +5,14 @@
     :aria-current="active ? true : null"
     :aria-disabled="disabled ? true : null"
     :disabled="disabled ? true : null"
+    v-mdb-ripple="props.ripple"
     ><slot></slot
   ></component>
 </template>
 
 <script>
 import { computed } from "vue";
+import mdbRipple from "@/directives/free/mdbRipple";
 
 export default {
   name: "MDBListGroupItem",
@@ -32,15 +34,37 @@ export default {
       default: false,
     },
     color: String,
+    noBorder: {
+      type: Boolean,
+      default: false,
+    },
+    spacing: {
+      type: [Boolean, String],
+      default: false,
+    },
+    ripple: {
+      type: [Object, Boolean],
+      default: false,
+    },
   },
+  directives: { mdbRipple },
   setup(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.noBorder && `border-0`,
+        props.spacing && spacingClass.value,
       ];
     });
 

src/composables/free/useMDBModal.js

@@ -0,0 +1,206 @@
+import { computed, onBeforeUnmount, provide, ref, watchEffect } from "vue";
+import { on, off } from "../../components/utils/MDBEventHandlers";
+import MDBFocusTrap from "@/components/utils/MDBFocusTrap.js";
+
+export default function useMDBModal(props, emit) {
+  const root = ref("root");
+  const dialog = ref("dialog");
+  const dialogTransform = ref("");
+  const focusTrap = ref(null);
+
+  const isActive = ref(props.modelValue);
+
+  const thisElement = ref(null);
+
+  watchEffect(() => {
+    isActive.value = props.modelValue;
+    if (isActive.value) {
+      emit("update:modelValue", true);
+    }
+  });
+
+  const wrapperClass = computed(() => {
+    return [
+      "modal",
+      props.animation && "fade",
+      isActive.value && "show",
+      props.staticBackdrop && "modal-static",
+    ];
+  });
+
+  const dialogClass = computed(() => {
+    return [
+      "modal-dialog",
+      props.size && "modal-" + props.size,
+      props.centered && "modal-dialog-centered",
+      props.scrollable && "modal-dialog-scrollable",
+      props.fullscreen && fullscreenClass.value,
+      props.dialogClasses,
+    ];
+  });
+
+  const backdropStyle = computed(() => {
+    return props.removeBackdrop
+      ? false
+      : { "background-color": `rgba(0,0,0, 0.5)` };
+  });
+
+  // shouldOverflow with backdropOverflowStyle prevents bottom modal create additional scrollbar on show
+  const shouldOverflow = ref(false);
+  const backdropOverflowStyle = computed(() => {
+    if (shouldOverflow.value || props.keepOverflow) {
+      return;
+    }
+    return "overflow: hidden";
+  });
+
+  const computedContentStyle = computed(() => {
+    return props.bgSrc
+      ? { "background-image": `url("${props.bgSrc}")` }
+      : false;
+  });
+
+  const fullscreenClass = computed(() => {
+    if (!props.fullscreen) {
+      return false;
+    }
+    return [
+      props.fullscreen !== true
+        ? `modal-fullscreen-${props.fullscreen}`
+        : "modal-fullscreen",
+    ];
+  });
+
+  const animateStaticBackdrop = () => {
+    animateStaticModal(dialog.value);
+  };
+
+  const closeModal = () => {
+    emit("update:modelValue", false);
+  };
+
+  provide("closeModal", closeModal);
+
+  const animateStaticModal = (el) => {
+    el.style.transform = `scale(1.02)`;
+    setTimeout(() => (el.style.transform = `scale(1.0)`), 300);
+  };
+
+  const handleEscKeyUp = (e) => {
+    if (e.key === "Escape" && isActive.value) {
+      closeModal();
+    }
+  };
+
+  const isBodyOverflowing = ref(null);
+  const scrollbarWidth = ref(0);
+
+  // Bootstrap way to measure scrollbar width
+  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 setScrollbar = () => {
+    const rect = document.body.getBoundingClientRect();
+    isBodyOverflowing.value =
+      Math.round(rect.left + rect.right) < window.innerWidth;
+    scrollbarWidth.value = isBodyOverflowing.value
+      ? getScrollbarWidth().toFixed(2)
+      : 0;
+  };
+
+  const enter = (el) => {
+    shouldOverflow.value = false;
+
+    dialogTransform.value = "translate(0, -25%)";
+
+    el.childNodes[0].style.transform = dialogTransform.value;
+    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");
+
+    emit("show", root.value);
+  };
+  const afterEnter = (el) => {
+    el.childNodes[0].style.transform = "translate(0,0)";
+    el.style.opacity = 1;
+
+    setTimeout(() => {
+      shouldOverflow.value = true;
+      emit("shown", root.value);
+    }, 400);
+    thisElement.value = root.value;
+
+    if (props.keyboard) {
+      on(window, "keyup", handleEscKeyUp);
+    }
+
+    if (props.focus) {
+      focusTrap.value = MDBFocusTrap();
+      focusTrap.value.initFocusTrap(root.value);
+    }
+  };
+  const beforeLeave = (el) => {
+    el.childNodes[0].style.transform = dialogTransform.value;
+    el.style.opacity = 0;
+    setTimeout(() => {
+      el.style.paddingRight = null;
+      document.body.style.paddingRight = null;
+      document.body.classList.remove("modal-open");
+    }, 200);
+
+    emit("hide", thisElement.value);
+
+    if (props.keyboard) {
+      off(window, "keyup", handleEscKeyUp);
+    }
+    if (props.focus && focusTrap.value) {
+      focusTrap.value.removeFocusTrap();
+    }
+  };
+  const afterLeave = () => {
+    emit("hidden", thisElement.value);
+    shouldOverflow.value = false;
+  };
+
+  onBeforeUnmount(() => {
+    off(window, "keyup", handleEscKeyUp);
+  });
+
+  return {
+    wrapperClass,
+    dialogClass,
+    backdropStyle,
+    backdropOverflowStyle,
+    computedContentStyle,
+    root,
+    dialog,
+    isActive,
+    closeModal,
+    animateStaticBackdrop,
+    enter,
+    afterEnter,
+    beforeLeave,
+    afterLeave,
+    scrollbarWidth,
+    setScrollbar,
+    shouldOverflow,
+    thisElement,
+    handleEscKeyUp,
+    focusTrap,
+    dialogTransform,
+    animateStaticModal,
+    fullscreenClass,
+  };
+}

src/index.free.js

@@ -72,6 +72,7 @@ import MDBRange from "@/components/free/forms/MDBRange";
 import MDBSwitch from "@/components/free/forms/MDBSwitch";
 
 /* ------------- Directives ------------- */
+import mdbClickOutside from "@/directives/free/mdbClickOutside";
 import mdbRipple from "@/directives/free/mdbRipple";
 import mdbScrollspy from "@/directives/free/mdbScrollspy";
 
@@ -137,6 +138,7 @@ export {
   MDBFile,
   MDBRange,
   MDBSwitch,
+  mdbClickOutside,
   mdbRipple,
   mdbScrollspy,
 };

src/scss/free/_variables.scss

@@ -1,2 +1,2 @@
-$valid-color: #00b74a;
-$invalid-color: #f93154;
+$valid-color: #00b74a !default;
+$invalid-color: #f93154 !default;

src/scss/standard/free/_card.scss

@@ -8,10 +8,20 @@
     border-top-left-radius: $card-border-radius;
     border-top-right-radius: $card-border-radius;
   }
+
+  &[class*='bg-'] {
+    .card-header {
+      border-bottom-color: $card-border-color;
+    }
+    .card-footer {
+      border-top-color: $card-border-color;
+    }
+  }
 }
 
 .card-header {
   background-color: $card-header-background-color;
+  border-bottom: $card-header-border-width solid $card-header-border-color;
 }
 
 .card-body {
@@ -23,6 +33,7 @@
 
 .card-footer {
   background-color: $card-footer-background-color;
+  border-top: $card-header-border-width solid $card-header-border-color;
 }
 
 .card-img-left {

src/scss/standard/free/_dropdown.scss

@@ -114,3 +114,8 @@
 .fade-out {
   animation-name: fade-out;
 }
+
+.dropdown-divider {
+  border-top: 2px solid $dropdown-divider-bg;
+  opacity: 1;
+}