mdb-vue-ui-kit - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

 {
   "name": "mdb-vue-ui-kit",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "js/mdb.umd.min.js",
@@ -5,0 +5,0 @@ "repository": "https://github.com/mdbootstrap/mdb-vue-ui-kit.git",

README.txt

 MDB 5 Vue
 
-Version: FREE 1.0.0
+Version: FREE 1.1.0
 
@@ -5,0 +5,0 @@ Documentation:

src/components/utils/formatPre.js

 export const formatPre = () => {
   const pre = document.querySelectorAll("pre");
 
-  pre.forEach(el => (el.innerText = el.innerHTML));
+  pre.forEach((el) => (el.innerText = el.innerHTML));
 
   pre.forEach(
-    el =>
+    (el) =>
       (el.innerText = el.innerText
@@ -9,0 +9,0 @@ .replace(/data-v-(.*?)=""/g, "")

src/components/utils/getUID.js

 const MAX_UID = 1000000;
 
-export const getUID = prefix => {
+export const getUID = (prefix) => {
   do {
@@ -5,0 +5,0 @@ prefix += Math.floor(Math.random() * MAX_UID);

src/components/utils/MDBBreakpointHandler.js

@@ -5,33 +5,33 @@ export const handleBreakpoints = (windowWidth, breakpointValues) => {
       width: 0,
-      attr: null
+      attr: null,
     },
     sm: {
       width: 576,
-      attr: null
+      attr: null,
     },
     md: {
       width: 768,
-      attr: null
+      attr: null,
     },
     lg: {
       width: 992,
-      attr: null
+      attr: null,
     },
     xl: {
       width: 1200,
-      attr: null
+      attr: null,
     },
     xxl: {
       width: 1400,
-      attr: null
+      attr: null,
     },
     mega: {
       width: 10000,
-      attr: null
-    }
+      attr: null,
+    },
   };
 
   // replace breakpoints attr values with corresponding props values
-  breakpointValues.forEach(value => {
-    const match = Object.keys(breakpoints).filter(breakpoint =>
+  breakpointValues.forEach((value) => {
+    const match = Object.keys(breakpoints).filter((breakpoint) =>
       value.includes(breakpoint) ? breakpoint : false
@@ -71,3 +71,3 @@ )[0];
         min: breakpoints[acc].width,
-        max: breakpoints[cur].width
+        max: breakpoints[cur].width,
       };
@@ -79,3 +79,3 @@ return cur;
           min: breakpoints[acc].width,
-          max: breakpoints[cur].width
+          max: breakpoints[cur].width,
         };
@@ -88,3 +88,3 @@ }
   // return single value that matches actual window width range
-  const value = Object.keys(ranges).filter(key => {
+  const value = Object.keys(ranges).filter((key) => {
     if (windowWidth > ranges[key].min && windowWidth < ranges[key].max) {
@@ -91,0 +91,0 @@ return key;

src/components/utils/MDBEventHandlers.js

 const stripNameRegex = /\..*/;
 const customEvents = {
   mouseenter: "mouseover",
-  mouseleave: "mouseout"
+  mouseleave: "mouseout",
 };
@@ -52,3 +52,3 @@ const nativeEvents = [
   "abort",
-  "scroll"
+  "scroll",
 ];
@@ -99,7 +99,7 @@
 
-export const on = function(element, event, handler, delegationFn) {
+export const on = function (element, event, handler, delegationFn) {
   addHandler(element, event, handler, delegationFn);
 };
 
-export const off = function(element, event, handler, delegationFn) {
+export const off = function (element, event, handler, delegationFn) {
   if (typeof event !== "string" || !element) {
@@ -123,3 +123,3 @@ return;
 
-export const onMulti = function(element, eventArray, handler, delegationFn) {
+export const onMulti = function (element, eventArray, handler, delegationFn) {
   const events = eventArray.split(" ");
@@ -132,3 +132,3 @@
 
-export const offMulti = function(element, eventArray, handler, delegationFn) {
+export const offMulti = function (element, eventArray, handler, delegationFn) {
   const events = eventArray.split(" ");
@@ -135,0 +135,0 @@

src/components/utils/MDBFocusTrap.js

@@ -24,3 +24,3 @@ import { ref } from "vue";
       )
-    ).filter(el => {
+    ).filter((el) => {
       return (
@@ -38,3 +38,3 @@ !el.classList.contains("ps__thumb-x") &&
     lastFocusableElement.value = focusable[focusable.length - 1];
-    on(lastFocusableElement.value, "keydown", e =>
+    on(lastFocusableElement.value, "keydown", (e) =>
       handleLastElementKeydown(e, true)
@@ -72,3 +72,3 @@ );
     initFocusTrap,
-    removeFocusTrap
+    removeFocusTrap,
   };
@@ -75,0 +75,0 @@ }

src/components/utils/MDBPopper.js

@@ -19,6 +19,6 @@ import { ref, nextTick, reactive } from "vue";
         offset: {
-          offset: "0"
-        }
+          offset: "0",
+        },
       },
-      ...config
+      ...config,
     };
@@ -89,3 +89,3 @@ }
     updatePopper,
-    destroyPopper
+    destroyPopper,
   };
@@ -92,0 +92,0 @@ }

src/components/utils/MDBStackableElements.js

 import { ref, reactive } from "vue";
 
-const isVisible = element => {
+const isVisible = (element) => {
   if (!element) {
@@ -39,3 +39,3 @@ return false;
       options.filter ||
-      function(el) {
+      function (el) {
         return el;
@@ -52,3 +52,3 @@ };
       .filter((el, i) => config.filter(el, i))
-      .map(el => ({ el, rect: el.getBoundingClientRect() }))
+      .map((el) => ({ el, rect: el.getBoundingClientRect() }))
       .filter(({ el, rect }) => {
@@ -70,5 +70,5 @@ const basicCondition =
     return [...document.querySelectorAll(stackableSelector.value)]
-      .filter(el => el.id !== stackableElement.value.id && isVisible(el))
+      .filter((el) => el.id !== stackableElement.value.id && isVisible(el))
       .filter((el, i) => config.filter(el, i))
-      .filter(el => {
+      .filter((el) => {
         return getBoundryOffset(el.getBoundingClientRect()) > offset.value;
@@ -116,3 +116,3 @@ });
     calculateStackingOffset,
-    resetStackingOffset
+    resetStackingOffset,
   };
@@ -119,0 +119,0 @@ }

src/directives/free/mdbClickOutside.js

@@ -7,3 +7,3 @@ export default {
   mounted(el, binding) {
-    const handler = e => {
+    const handler = (e) => {
       if (!el.contains(e.target) && el !== e.target) {
@@ -29,3 +29,3 @@ binding.value(e);
     delete el.clickOutside;
-  }
+  },
 };

src/directives/free/mdbFocusTrap.js

@@ -21,3 +21,3 @@ import { on, off } from "@/components/utils/MDBEventHandlers";
         )
-      ).filter(item => {
+      ).filter((item) => {
         return (
@@ -35,3 +35,3 @@ !item.classList.contains("ps__thumb-x") &&
       lastFocusableElement = focusable[focusable.length - 1];
-      on(lastFocusableElement, "keydown", e => el.focusFirstElement(e, true));
+      on(lastFocusableElement, "keydown", (e) => el.focusFirstElement(e, true));
     };
@@ -64,3 +64,3 @@
     el.removeFocusTrap();
-  }
+  },
 };

src/directives/free/mdbOnScroll.js

@@ -53,3 +53,3 @@ export default {
     window.removeEventListener("scroll", el.animate);
-  }
+  },
 };

src/directives/free/mdbRipple.js

@@ -9,3 +9,3 @@ const bsColors = [
   "light",
-  "dark"
+  "dark",
 ];
@@ -17,6 +17,6 @@ const gradient =
 
-const isBSColor = propColor => bsColors.includes(propColor.toLowerCase());
+const isBSColor = (propColor) => bsColors.includes(propColor.toLowerCase());
 
 const colorToRGB = (color, defaultColor) => {
-  const hexToRgb = color => {
+  const hexToRgb = (color) => {
     const HEX_COLOR_LENGTH = 7;
@@ -30,7 +30,7 @@ const IS_SHORT_HEX = color.length < HEX_COLOR_LENGTH;
       parseInt(color.substr(3, 2), 16),
-      parseInt(color.substr(5, 2), 16)
+      parseInt(color.substr(5, 2), 16),
     ];
   };
 
-  const namedColorsToRgba = color => {
+  const namedColorsToRgba = (color) => {
     const tempElem = document.body.appendChild(
@@ -56,4 +56,4 @@ document.createElement("fictum")
 
-  const rgbaToRgb = color => {
-    color = color.match(/[.\d]+/g).map(a => +Number(a));
+  const rgbaToRgb = (color) => {
+    color = color.match(/[.\d]+/g).map((a) => +Number(a));
     color.length = 3;
@@ -89,3 +89,3 @@ return color;
     third: top === false && left === true,
-    fourth: top === false && left === false
+    fourth: top === false && left === false,
   };
@@ -97,3 +97,3 @@
     bottomLeft: pythagorean(offsetX, height - offsetY),
-    bottomRight: pythagorean(width - offsetX, height - offsetY)
+    bottomRight: pythagorean(width - offsetX, height - offsetY),
   };
@@ -121,3 +121,3 @@
 
-const getBackgroundImage = color => {
+const getBackgroundImage = (color) => {
   if (color !== "") {
@@ -138,3 +138,3 @@ const rgbValue = colorToRGB(color, defaultColor).join(",");
     height: waveConfig.height,
-    width: waveConfig.width
+    width: waveConfig.width,
   };
@@ -145,3 +145,3 @@ const diameter = getDiameter(diameterConfig);
     delay: options.duration * transitionBreakOpacity,
-    duration: options.duration - options.duration * transitionBreakOpacity
+    duration: options.duration - options.duration * transitionBreakOpacity,
   };
@@ -159,3 +159,3 @@
     transitionDelay: `0s, ${opacity.delay}ms`,
-    transitionDuration: `${options.duration}ms, ${opacity.duration}ms`
+    transitionDuration: `${options.duration}ms, ${opacity.duration}ms`,
   };
@@ -196,7 +196,7 @@
       radius: (binding.value && binding.value.radius) || 0,
-      unbound: (binding.value && binding.value.unbound) || false
+      unbound: (binding.value && binding.value.unbound) || false,
     };
 
     el.classList.add("ripple-surface");
-    el.waves = e => {
+    el.waves = (e) => {
       const waveConfig = {
@@ -206,3 +206,3 @@ top: e.layerY,
         height: el.offsetHeight,
-        width: el.offsetWidth
+        width: el.offsetWidth,
       };
@@ -223,3 +223,3 @@ runRipple(el, waveConfig, options);
     el.removeEventListener("click", el.waves);
-  }
+  },
 };

src/directives/free/mdbScrollspy.js

@@ -8,3 +8,3 @@ const mdbScrollspy = {
       async: false,
-      offset: 0
+      offset: 0,
     };
@@ -21,11 +21,18 @@
 
-    el.scrollspy.findHrefs = node => {
+    el.scrollspy.findHrefs = (node) => {
       if (node.attributes && node.attributes.href) {
         el.scrollspy.links.push(node);
+        if (node.classList.contains("collapsible-scrollspy")) {
+          const list = node.parentNode.querySelector("ul");
+          list.dataset.mdbCollapsibleScrollspyHeight = list.clientHeight;
+
+          list.style.overflow = "hidden";
+          list.style.height = "0";
+        }
       } else if (node.childNodes) {
-        node.childNodes.forEach(child => el.scrollspy.findHrefs(child));
+        node.childNodes.forEach((child) => el.scrollspy.findHrefs(child));
       }
     };
 
-    el.scrollspy.setActive = index => {
+    el.scrollspy.setActive = (index) => {
       if (binding.value && binding.value.callback) {
@@ -36,7 +43,11 @@ binding.instance[binding.value.callback](index);
       el.scrollspy.links.forEach((link, i) => {
-        if (index === i) link.classList.add("active");
-        else link.classList.remove("active");
+        if (index === i) {
+          link.classList.add("active");
+        } else {
+          link.classList.remove("active");
+        }
       });
 
       setNestedActive(el.scrollspy.links, index, el.scrollspy.container);
+      setCollapsibleActive(el.scrollspy.links);
     };
@@ -51,3 +62,3 @@
 
-      el.scrollspy.links.forEach(link => {
+      el.scrollspy.links.forEach((link) => {
         const element = document.querySelector(link.hash);
@@ -76,3 +87,5 @@ if (!element) {
 
-      const activeLinks = el.scrollspy.links.filter(link => link.isLinkActive);
+      const activeLinks = el.scrollspy.links.filter(
+        (link) => link.isLinkActive
+      );
 
@@ -84,3 +97,5 @@ if (activeLinks.length > 0) {
         el.scrollspy.setActive(activeLink);
-      } else el.scrollspy.setActive(-1);
+      } else {
+        el.scrollspy.setActive(-1);
+      }
     };
@@ -105,3 +120,2 @@
           top: window.scrollY + rect.y - el.scrollspy.offset,
-          behavior: "smooth"
         });
@@ -117,2 +131,3 @@ } else {
       setParentsActive(el.scrollspy.links[link.scrollspyIndex], el);
+      setCollapsibleActive(el.scrollspy.links);
 
@@ -128,3 +143,3 @@ el.disableScrollTimeout = setTimeout(() => {
       link.scrollspyIndex = i;
-      link.addEventListener("click", e => el.scrollspy.clickHandler(e, link));
+      link.addEventListener("click", (e) => el.scrollspy.clickHandler(e, link));
     });
@@ -149,3 +164,3 @@
           link.scrollspyIndex = i;
-          link.addEventListener("click", e =>
+          link.addEventListener("click", (e) =>
             el.scrollspy.clickHandler(e, link)
@@ -163,3 +178,3 @@ );
     window.removeEventListener("resize", el.scrollspy.spy);
-  }
+  },
 };
@@ -169,2 +184,3 @@
   const allLinks = links[index];
+
   if (!allLinks) {
@@ -176,3 +192,3 @@ return;
   allNestedLinks.shift();
-  allNestedLinks.forEach(link => {
+  allNestedLinks.forEach((link) => {
     const element = document.querySelector(link.hash);
@@ -200,3 +216,3 @@ if (!element) {
 
-  const activeLinks = allNestedLinks.filter(link => link.isLinkActive);
+  const activeLinks = allNestedLinks.filter((link) => link.isLinkActive);
   if (activeLinks.length > 0) {
@@ -222,6 +238,25 @@ activeLinks[0].classList.add("active");
 
-const getScrollPostion = container => {
+const getScrollPostion = (container) => {
   return container === window ? container.scrollY : container.scrollTop;
 };
 
+const setCollapsibleActive = (links) => {
+  links.forEach((link) => {
+    if (
+      link.classList.contains("collapsible-scrollspy") &&
+      link.classList.contains("active")
+    ) {
+      const list = link.parentNode.querySelector("ul");
+
+      list.style.overflow = "hidden";
+      list.style.height = `${list.dataset.mdbCollapsibleScrollspyHeight}px`;
+    } else if (link.classList.contains("collapsible-scrollspy")) {
+      const list = link.parentNode.querySelector("ul");
+
+      list.style.overflow = "hidden";
+      list.style.height = "0";
+    }
+  });
+};
+
 export default mdbScrollspy;

src/index.free.js

@@ -141,3 +141,3 @@ /* ------------- Components ------------- */
   mdbRipple,
-  mdbScrollspy
+  mdbScrollspy,
 };

No alert changes

Improved metrics

Total package byte prevSize

3860226

increased by10.74%

Number of package files

315

increased by0.64%

Lines of code

16755

increased by6.88%

No dependency changes