Add countup functionality and update documentation example

docs/ui/components/countup.mdx

@@ -11,9 +11,7 @@ To be able to use the countup in your application you will need to install the c
 
 To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
+```html example libs="countup"
 <h1 data-countup>30000</h1>
 ```
 

src/js/src/countup.js

@@ -0,0 +1,17 @@
+const elements = document.querySelectorAll('[data-countup]');
+
+if (elements.length) {
+	elements.forEach(function (element) {
+		let options = {};
+		try {
+			options = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
+		} catch (error) {}
+
+		const value = parseInt(element.innerHTML, 10);
+
+		const countUp = new window.countUp.CountUp(element, value, options);
+		if (!countUp.error) {
+			countUp.start();
+		}
+	});
+}

src/js/tabler.esm.js

@@ -1,6 +1,7 @@
 //Vendor
 
 import "./src/autosize"
+import "./src/countup"
 import "./src/input-mask"
 import "./src/dropdown"
 import "./src/tooltip"

src/js/tabler.js

@@ -1,6 +1,7 @@
 //Vendor
 
 import "./src/autosize"
+import "./src/countup"
 import "./src/input-mask"
 import "./src/dropdown"
 import "./src/tooltip"

src/pages/_data/libs.json

@@ -9,7 +9,7 @@
     "bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
     "apexcharts": "apexcharts/dist/apexcharts.min.js",
     "nouislider": "nouislider/dist/nouislider.min.js",
-    "countup": "countup.js/dist/countUp.js",
+    "countup": "countup.js/dist/countUp.umd.js",
     "lists": "list.js/dist/list.min.js",
     "masonry": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js",
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js",