NumberRangeFixes - Prepopulated Positions (#1774)

* NumberRangeFixes
rappasoft · Jul 16, 2024 · 1717da5 · 1717da5
1 parent d77545d
commit 1717da5
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 43 deletions.
diff --git a/resources/css/laravel-livewire-tables.css b/resources/css/laravel-livewire-tables.css
@@ -137,13 +137,11 @@
 
 .range-slider::before {
     --before: 1;
-    --at-edge: var(--thumb-close-to-min);
     counter-reset: x var(--min);
     left: var(--offset);
 }
 
 .range-slider::after {
-    --at-edge: var(--thumb-close-to-max);
     counter-reset: x var(--max);
     right: var(--offset);
 }

diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css
diff --git a/resources/js/laravel-livewire-tables.js b/resources/js/laravel-livewire-tables.js
@@ -60,14 +60,20 @@ document.addEventListener('alpine:init', () => {
         defaultMin: filterConfig['minRange'],
         defaultMax: filterConfig['maxRange'],
         restrictUpdates: false,
-        updateStyles() {
+        initialiseStyles()
+        {
             let numRangeFilterContainer = document.getElementById(parentElementPath);
-            let currentFilterMin = document.getElementById(childElementRoot + "-min");
-            let currentFilterMax = document.getElementById(childElementRoot + "-max");
-            numRangeFilterContainer.style.setProperty('--value-a', currentFilterMin.value);
-            numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(currentFilterMin.value));
-            numRangeFilterContainer.style.setProperty('--value-b', currentFilterMax.value);
-            numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(currentFilterMax.value));
+            numRangeFilterContainer.style.setProperty('--value-a', this.wireValues['min'] ?? this.filterMin);
+            numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(this.wireValues['min'] ?? this.filterMin));
+            numRangeFilterContainer.style.setProperty('--value-b', this.wireValues['max'] ?? this.filterMax);
+            numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(this.wireValues['max'] ?? this.filterMax));
+        },
+        updateStyles(filterMin, filterMax) {
+            let numRangeFilterContainer = document.getElementById(parentElementPath);
+            numRangeFilterContainer.style.setProperty('--value-a', filterMin);
+            numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(filterMin));
+            numRangeFilterContainer.style.setProperty('--value-b', filterMax);
+            numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(filterMax));
         },
         setupWire() {
             if (this.wireValues !== undefined) {
@@ -77,7 +83,7 @@ document.addEventListener('alpine:init', () => {
                 this.filterMin = this.originalMin = this.defaultMin;
                 this.filterMax = this.originalMax = this.defaultMax;
             }
-            this.updateStyles();
+            this.updateStyles(this.filterMin, this.filterMax);
         },
         allowUpdates() {
             this.updateWire();
@@ -95,17 +101,17 @@ document.addEventListener('alpine:init', () => {
                 this.originalMin = tmpFilterMin;
                 this.originalMax = tmpFilterMax;
             }
-            this.updateStyles();
+            this.updateStyles(this.filterMin,this.filterMax);
         },
         updateWireable() {
             if (this.hasUpdate) {
                 this.hasUpdate = false;
                 this.wireValues = { 'min': this.filterMin, 'max': this.filterMax };
                 wire.set('filterComponents.' + filterKey, this.wireValues);
             }
-
         },
         init() {
+            this.initialiseStyles();
             this.setupWire();
             this.$watch('allFilters', value => this.setupWire());
         },
@@ -117,13 +123,13 @@ document.addEventListener('alpine:init', () => {
             mode: 'range',
             clickOpens: true,
             allowInvalidPreload: true,
-            defaultDate: filterConfig['defaultDate'] ?? [],
+            defaultDate: [],
             ariaDateFormat: filterConfig['ariaDateFormat'],
             allowInput: filterConfig['allowInput'],
             altFormat: filterConfig['altFormat'],
             altInput: filterConfig['altInput'],
             dateFormat: filterConfig['dateFormat'],
-            locale: filterConfig['locale'] ?? 'en',
+            locale: 'en',
             minDate: filterConfig['earliestDate'],
             maxDate: filterConfig['latestDate'],
             onOpen: function () {