Add Turbo library integration and update dependencies (#2223)

.changeset/ten-walls-smell.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add Turbo library integration

core/scss/tabler-vendors.scss

@@ -12,3 +12,5 @@
 @import "vendor/stars-rating";
 @import "vendor/coloris";
 @import "vendor/typed";
+@import "vendor/turbo";
+

core/scss/vendor/_turbo.scss

@@ -0,0 +1,3 @@
+.turbo-progress-bar {
+  background: var(--#{$prefix}primary);
+}

pnpm-lock.yaml

@@ -101,6 +101,9 @@ importers:
 
   preview:
     dependencies:
+      '@hotwired/turbo':
+        specifier: ^8.0.13
+        version: 8.0.13
       '@melloware/coloris':
         specifier: ^0.24.0
         version: 0.24.0
@@ -380,6 +383,10 @@ packages:
   '@emnapi/[email protected]':
     resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
 
+  '@hotwired/[email protected]':
+    resolution: {integrity: sha512-M7qXUqcGab6G5PKOiwhgbByTtrPgKPFCTMNQ52QhzUEXEqmp0/ApEguUesh/FPiUjrmFec+3lq98KsWnYY2C7g==}
+    engines: {node: '>= 14'}
+
   '@img/[email protected]':
     resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3005,6 +3012,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@hotwired/[email protected]': {}
+
   '@img/[email protected]':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.0.4

preview/package.json

@@ -31,6 +31,7 @@
     "zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
   },
   "dependencies": {
+    "@hotwired/turbo": "^8.0.13",
     "@melloware/coloris": "^0.24.0",
     "@tabler/core": "workspace:*",
     "@tabler/icons": "^3.31.0",

preview/pages/_data/libs.json

@@ -1,10 +1,4 @@
 {
-  "global-libs": [
-  ],
-  "js-files": {
-    "countup": "countup",
-    "nouislider": "nouislider"
-  },
   "js": {
     "imask": "imask/dist/imask.min.js",
     "autosize": "autosize/dist/autosize.min.js",
@@ -29,6 +23,9 @@
     "typed.js": "typed.js/dist/typed.umd.js",
     "signature_pad": "signature_pad/dist/signature_pad.umd.min.js"
   },
+  "js-head": {
+    "turbo": "@hotwired/turbo/dist/turbo.es2017-umd.js"
+  },
   "css": {
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css",
     "dropzone": "dropzone/dist/dropzone.css",

preview/pages/_includes/layout/js-libs.html

@@ -0,0 +1,13 @@
+{% if page-libs -%}
+<!-- BEGIN PAGE LIBRARIES -->
+{% for lib in include.libs -%}
+{% if page-libs contains lib[0] -%}
+{% for file in lib[1] -%}
+<script
+	src="{% if file contains 'http://' or file contains 'https://' %}{{ file | replace: 'GOOGLE_MAPS_KEY', google-maps-key }}{% else %}{{ page | relative }}/libs/{% if environment != 'development' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}{% endif %}"
+	defer></script>
+{% endfor -%}
+{% endif -%}
+{% endfor -%}
+<!-- END PAGE LIBRARIES -->
+{% endif -%}

preview/pages/_includes/layout/js.html

@@ -3,17 +3,7 @@
 {% assign google-maps-key = site.googleMapsKey -%}
 {% endif -%}
 
-{% if page-libs -%}
-<!-- BEGIN PAGE LIBRARIES -->
-	{% for lib in libs.js -%}
-		{% if page-libs contains lib[0] or libs.global-libs contains lib[0] -%}
-			{% for file in lib[1] -%}
-			<script src="{% if file contains 'http://' or file contains 'https://' %}{{ file | replace: 'GOOGLE_MAPS_KEY', google-maps-key }}{% else %}{{ page | relative }}/libs/{% if environment != 'development' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}{% endif %}" defer></script>
-			{% endfor -%}
-		{% endif -%}
-	{% endfor -%}
-<!-- END PAGE LIBRARIES -->
-{% endif -%}
+{% include "layout/js-libs.html" libs=libs.js %}
 
 <!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
 <script src="{{ page | relative }}/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" defer></script>
@@ -23,16 +13,4 @@
 <script src="{{ page | relative }}/preview/js/demo{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" defer></script>
 <!-- END DEMO SCRIPTS -->
 
-{% scripts %}
-
-{% assign libs = page-libs | default: layout.page-libs %}
-{% for lib in libs.js-files %}
-{% if libs contains lib[0] or libs.global-libs contains lib[0] %}
-{% for file in lib[1] %}
-
-{% assign filename = 'js/' | append: file | append: '.html' %}
-{% include "{{ filename }}" %}
-
-{% endfor %}
-{% endif %}
-{% endfor %}
+{% scripts %}

preview/pages/_layouts/base.html

@@ -30,6 +30,7 @@
 	{% endif %}
 
 	{% include "layout/css.html" %}
+	{% include "layout/js-libs.html" libs=libs.js-head %}
 
 	<!-- BEGIN CUSTOM FONT -->
 	<style>

preview/pages/turbo-loader.html

@@ -0,0 +1,62 @@
+---
+permalink: turbo-loader.html
+layout: default
+page-libs: [turbo]
+---
+
+<div class="card">
+	<div class="card-body">
+		<div class="btn-list">
+			<button class="btn" id="show-loader">Show loader</button>
+			<button class="btn" id="hide-loader">Hide loader</button>
+			<button class="btn" id="set-10">Set 10%</button>
+			<button class="btn" id="set-50">Set 50%</button>
+			<button class="btn" id="set-100">Set 100%</button>
+		</div>
+	</div>
+</div>
+
+{% capture_script %}
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	Turbo.session.drive = false
+	
+	if(window.Turbo) {
+		var loader = Turbo.navigator.delegate.adapter.progressBar
+
+		console.log(loader);
+
+		document.getElementById("show-loader").addEventListener("click", function(e) {
+			loader.show()
+			e.preventDefault()
+		})
+
+		document.getElementById("hide-loader").addEventListener("click", function(e) {
+			loader.hide()
+			e.preventDefault()
+		})
+
+		document.getElementById("set-10").addEventListener("click", function(e) {
+			loader.show() 
+			loader.setValue(.1)
+			e.preventDefault()
+		})
+
+		document.getElementById("set-50").addEventListener("click", function(e) {
+			loader.show() 
+			loader.setValue(.5)
+			e.preventDefault()
+		})
+
+		document.getElementById("set-100").addEventListener("click", function(e) {
+			loader.show() 
+			loader.setValue(1)
+			setTimeout(function() {
+				loader.hide()
+			}, 1000)
+			e.preventDefault()
+		})
+	}
+});
+</script>
+{% endcapture_script %}