Fixes date dropdown not showing if the livewire component re-renders #9…

… (#10)

re-initialize flatpickr when the page is refreshed after livewire component is re-rendered #9

.gitignore

@@ -12,3 +12,5 @@ testbench.yaml
 vendor
 node_modules
 .php-cs-fixer.cache
+/**/.DS_Store
+resources/to-be-minified

resources/views/components/script.blade.php

@@ -1,56 +1,5 @@
 <script src="{{ $url ?? config('flatpickr.js_url') ?? asset('vendor/flatpickr/js/flatpickr.js') }}"></script>
-{{-- <script>
-    (function () {
-        let supportedEventNames = ['onChange', 'onOpen', 'onClose', 'onMonthChange', 'onYearChange', 'onReady', 'onValueUpdate', 'onDayCreate'];
-
-        document.addEventListener("DOMContentLoaded", function(event) {
-            document.querySelectorAll('.flatpickr-input').forEach((el) => initializeFlatpickr(el))
-        })
-
-        function initializeFlatpickr(el) {
-            let selectorEl = document.getElementById(el.getAttribute('data-selector-id'));
-
-            flatpickr(selectorEl, config(el))
-        }
-
-        function config(el) {
-            let config = JSON.parse(el.getAttribute('data-config'));
-            let isWeekendDisabled = el.getAttribute('data-disable-weekend') === "1";
-
-            if (isWeekendDisabled) {
-                config.disable.push(disableWeekends())
-            }
-
-            return {
-                ...config,
-                ...events(el),
-            };
-        }
-
-        function disableWeekends() {
-            return function(date) {
-                return (date.getDay() === 0 || date.getDay() === 6);
-            }
-        }
-
-        function events(el) {
-            let elEvents = el.getAttributeNames().filter(name => name.startsWith('on'));
-
-            return elEvents.reduce((obj, elEventName) => {
-                let eventName = supportedEventNames.find(eventName => eventName.toLowerCase() === elEventName);
-
-                if (eventName) {
-                    obj[eventName] = function(...params) {
-                        eval(el.getAttribute(eventName))(...params)
-                    }
-                }
-
-                return obj;
-            }, {});
-        }
-    })();
-
-</script> --}}
+{{-- check /resources/to-be-minified/ folder for not minified scripts --}}
 <script>
-    !function(){let supportedEventNames=["onChange","onOpen","onClose","onMonthChange","onYearChange","onReady","onValueUpdate","onDayCreate"];function initializeFlatpickr(e){let t=document.getElementById(e.getAttribute("data-selector-id"));flatpickr(t,config(e))}function config(e){let t=JSON.parse(e.getAttribute("data-config"));return"1"===e.getAttribute("data-disable-weekend")&&t.disable.push(disableWeekends()),{...t,...events(e)}}function disableWeekends(){return function(e){return 0===e.getDay()||6===e.getDay()}}function events(el){let elEvents=el.getAttributeNames().filter(e=>e.startsWith("on"));return elEvents.reduce((obj,elEventName)=>{let eventName=supportedEventNames.find(e=>e.toLowerCase()===elEventName);return eventName&&(obj[eventName]=function(...params){eval(el.getAttribute(eventName))(...params)}),obj},{})}document.addEventListener("DOMContentLoaded",function(e){document.querySelectorAll(".flatpickr-input").forEach(e=>initializeFlatpickr(e))})}();
-</script>
+    window.LaravelFlatpickr={__supportedEventNames:["onChange","onOpen","onClose","onMonthChange","onYearChange","onReady","onValueUpdate","onDayCreate"],initializeFlatpickr:function(a){flatpickr(document.getElementById(a.getAttribute("data-selector-id")),this.__config(a))},__config:function(a){let b=JSON.parse(a.getAttribute("data-config"));return"1"===a.getAttribute("data-disable-weekend")&&b.disable.push(this.__disableWeekends()),{...b,...this.__events(a)}},__disableWeekends:function(){return function(a){return 0===a.getDay()||6===a.getDay()}},__events:function(el){let elEvents;return el.getAttributeNames().filter(a=>a.startsWith("on")).reduce((obj,elEventName)=>{let eventName=this.__supportedEventNames.find(a=>a.toLowerCase()===elEventName);return eventName&&(obj[eventName]=function(...params){eval(el.getAttribute(eventName))(...params)}),obj},{})}},document.addEventListener("DOMContentLoaded",function(a){document.querySelectorAll(".flatpickr-input").forEach(a=>window.LaravelFlatpickr.initializeFlatpickr(a))});var observer=new MutationObserver(a=>{a.forEach(a=>{a.removedNodes.length>0&&window.LaravelFlatpickr.initializeFlatpickr(a.previousSibling)})});document.querySelectorAll(".flatpickr-container").forEach(a=>{observer.observe(a,{childList:!0})})
+</script>

resources/views/components/style.blade.php

@@ -1,6 +1,7 @@
 <link rel="stylesheet" href="{{ $url ?? config('flatpickr.css_url') ?? asset('vendor/flatpickr/css/flatpickr.css') }}">
 @if(config('flatpickr.use_style'))
+{{-- check /resources/to-be-minified/ folder for not minified styles --}}
 <style>
-.flatpickr-container{display:flex}.flatpickr-input{flex-grow:1;appearance:none;background-color:#fff;border:1px solid #6b7280;padding:.5rem .75rem;line-height:1.5rem}.flatpickr-clearable{cursor:pointer;display:flex;align-items:center;background-color:#fff;border:1px solid #6b7280;border-left-width:0;padding:.5rem 1rem}.flatpickr-clearable>svg{width:1rem}
+    .flatpickr-container{display:flex}.flatpickr-container .form-control,.flatpickr-input{flex-grow:1;appearance:none;background-color:#fff;border:1px solid #6b7280;padding:.5rem .75rem;line-height:1.5rem}.flatpickr-container .form-control[readonly],.flatpickr-input[readonly]{cursor:pointer}.flatpickr-container .form-control[disabled],.flatpickr-input[disabled]{cursor:not-allowed;background:#ededed}.flatpickr-clearable{cursor:pointer;display:flex;align-items:center;background-color:#fff;border:1px solid #6b7280;border-left-width:0;padding:.5rem 1rem}.flatpickr-clearable>svg{width:1rem}
 </style>
-@endif
+@endif

tests/FlatpickrStyleAndScriptTest.php

@@ -36,11 +36,11 @@
 it("can render scripts", function () {
     test()->blade('<x-flatpickr::script />')
         ->assertSee('flatpickr(')
-        ->assertSee('supportedEventNames')
-        ->assertSee('function initializeFlatpickr')
-        ->assertSee('function config')
-        ->assertSee('function disableWeekends')
-        ->assertSee('function events')
+        ->assertSee('__supportedEventNames:')
+        ->assertSee('initializeFlatpickr:function')
+        ->assertSee('__config:function')
+        ->assertSee('__disableWeekends:function')
+        ->assertSee('__events:function')
         ->assertSee('vendor/flatpickr/js/flatpickr.js');
 });