cleans stuff up.

resources/public/js/alpine-vals.js

@@ -1,6 +1,6 @@
 document.addEventListener('alpine:init', () => {
     Alpine.directive('hx-val', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
-        var config = function(evt) {
+        var config = function (evt) {
             evt.detail.parameters[value] = evaluate(expression); // add a new parameter into the request
         }
         el.addEventListener('htmx:configRequest', config);
@@ -8,8 +8,8 @@ document.addEventListener('alpine:init', () => {
             el.removeEventListener('htmx:configRequest', config);
         })
     })
-Alpine.directive('hx-header', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
-        var config = function(evt) {
+    Alpine.directive('hx-header', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
+        var config = function (evt) {
             evt.detail.headers[value] = evaluate(expression); // add a new parameter into the request
         }
         el.addEventListener('htmx:configRequest', config);
@@ -20,7 +20,7 @@ Alpine.directive('hx-header', (el, { value, expression }, { evaluateLater, effec
 
     Alpine.directive('dispatch', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
         let dependent_properties = evaluateLater(expression)
-    
+
         effect(() => {
             dependent_properties(props => {
                 el.dispatchEvent(
@@ -38,16 +38,16 @@ Alpine.directive('hx-header', (el, { value, expression }, { evaluateLater, effec
     Alpine.directive(
         "destroy",
         (el, { expression }, { evaluateLater, cleanup }) => {
-          const onDestroy = evaluateLater(expression);
-          cleanup(onDestroy);
+            const onDestroy = evaluateLater(expression);
+            cleanup(onDestroy);
         }
-      );
+    );
     Alpine.data('popper', () => ({
         show: false,
         popper: null,
         init() {
             this.$nextTick(() => this.popper = Popper.createPopper(this.$refs.source, this.$refs.tooltip,
-                        { placement: 'bottom', strategy: 'fixed', modifiers: [{ name: 'preventOverflow' }, { name: 'offset', options: { offset: [0, 10] } }] }))
+                { placement: 'bottom', strategy: 'fixed', modifiers: [{ name: 'preventOverflow' }, { name: 'offset', options: { offset: [0, 10] } }] }))
             let reveal = () => {
                 if (!this.show) {
                     this.show = true;
@@ -62,10 +62,17 @@ Alpine.directive('hx-header', (el, { value, expression }, { evaluateLater, effec
         },
         tooltip: {
 
-            [':class']() { return {'opacity-0': !this.show, 'opacity-100': this.show, 'pointer-events-none': !this.show, 'transition': true } },
+            [':class']() { return { 'opacity-0': !this.show, 'opacity-100': this.show, 'pointer-events-none': !this.show, 'transition': true } },
             ["x-ref"]: 'tooltip',
             ['x-transition']: true
         }
-    }))
+    }));
+    Alpine.store('darkMode', {
+        on: false,
+
+        toggle() {
+            this.on = ! this.on
+        }
+    })
 })