From ebca62fc2d359c74e3b98f3f8bb9993113838e56 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Tue, 7 Jan 2025 23:12:54 +0100
Subject: [PATCH] Add countup functionality and update documentation example

---
 docs/ui/components/countup.mdx |  4 +---
 src/js/src/countup.js          | 17 +++++++++++++++++
 src/js/tabler.esm.js           |  1 +
 src/js/tabler.js               |  1 +
 src/pages/_data/libs.json      |  2 +-
 5 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 src/js/src/countup.js

diff --git a/docs/ui/components/countup.mdx b/docs/ui/components/countup.mdx
index 397ca3189..1d39f4a6d 100644
--- a/docs/ui/components/countup.mdx
+++ b/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>
 ```
 
diff --git a/src/js/src/countup.js b/src/js/src/countup.js
new file mode 100644
index 000000000..edc132bda
--- /dev/null
+++ b/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();
+		}
+	});
+}
\ No newline at end of file
diff --git a/src/js/tabler.esm.js b/src/js/tabler.esm.js
index f32972b65..53bdbd4ad 100644
--- a/src/js/tabler.esm.js
+++ b/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"
diff --git a/src/js/tabler.js b/src/js/tabler.js
index 25b88b8fc..99c09c9a7 100644
--- a/src/js/tabler.js
+++ b/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"
diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json
index 58db80519..1ec170fe5 100644
--- a/src/pages/_data/libs.json
+++ b/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",