feat: Add compability with Alpine 3

Gustavinho · Gustavinho · commit ede49864b79b · 2021-06-21T19:07:48.000-05:00
I added compatibility with Alpine 3, by default it is still loading the
v2.29 of Alpine but this customizable to import Alpine manually.

- I moved the Pickaday and moment dependencias to import them by a CDN
  since with alpine 3 the `init` method is called automatically when the
component is rendered
diff --git a/public/laravel-views.js b/public/laravel-views.js
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
@@ -1,41 +1,17 @@
 import feather from 'feather-icons'
-import Pikaday from 'pikaday'
 
 try {
   const setUpUiLibraries = () => {
     feather.replace()
   }
 
-  const datePicker = (id) => {
-    return {
-      picker: null,
-      id: null,
-      dispatch: null,
-      init (id, dispatch) {
-        this.id = id
-        this.dispatch = dispatch
-        this.picker = new Pikaday({
-          field: this.$refs[this.id],
-          format: "YYYY-MM-DD",
-          onSelect: this.onSelect.bind(this)
-        })
-      },
-      onSelect (date) {
-        this.dispatch("input", this.picker.toString("YYYY-MM-DD"));
-      }
-    }
-  }
-
-  // require('bootstrap')
   document.addEventListener("DOMContentLoaded", () => {
     setUpUiLibraries()
 
     Livewire.hook('message.processed', () => {
       setUpUiLibraries()
     })
   })
-
-  window.laravelViews = {
-    datePicker
-  }
-} catch (e) {}
+} catch (error) {
+  throw new Error(error)
+}
diff --git a/resources/views/components/form/datepicker.blade.php b/resources/views/components/form/datepicker.blade.php
@@ -13,13 +13,12 @@
  - $id
 --}}
 
-@component('laravel-views::components.form.input', [
-  'label' => $label ?? '',
-  'name' => $name ?? '',
-  'placeholder' => $placeholder ?? '',
-  'value' => $value ?? '',
-  'model' => $model ?? '',
-  'id' => $id,
-  'attributes' => 'x-data="window.laravelViews.datePicker()" x-ref="'.$id.'" x-init="init(\'' . $id . '\', $dispatch)"',
-])
-@endcomponent
+<x-lv-input
+  :value="$value"
+  :id="$id"
+  wire:model="{{ $model }}"
+  x-data="{ picker: null }"
+  x-ref="{{ $id }}"
+  x-init="picker = new Pikaday({ field: $refs['{{ $id }}'], format: 'YYYY-MM-DD', onSelect: () => $dispatch('input', picker.toString('YYYY-MM-DD')) })"
+>
+</x-lv-input>
diff --git a/resources/views/components/form/input.blade.php b/resources/views/components/form/input.blade.php
@@ -12,21 +12,18 @@
  - $id
  - $attributes
 --}}
+@props(['label' => null])
 <div class="text-left mb-4">
-  <label class="block">
-    {{ $label ?? '' }}
-  </label>
+  @if ($label)
+    <label class="block">
+      {{ $label ?? '' }}
+    </label>
+  @endif
+
   <input
+    {{ $attributes }}
     class="block appearance-none w-full bg-white border-gray-300 hover:border-gray-500 px-4 py-2 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-blue-600 focus:border-2 border"
     type="text"
-    name="{{ $name ?? '' }}"
-    placeholder="{{ $placeholder ?? ''}}"
     autocomplete="off"
-    @if (isset($id))
-      id="{{ $id ?? ''}}"
-    @endif
-    wire:model="{{ $model ?? '' }}"
-
-    {!! $attributes ?? null !!}
   >
 </div>
diff --git a/resources/views/components/toolbar/filters.blade.php b/resources/views/components/toolbar/filters.blade.php
@@ -23,5 +23,5 @@
         </button>
       </div>
     @endif
-    </x-lv-drop-down>
+  </x-lv-drop-down>
 @endif
diff --git a/src/LaravelViews.php b/src/LaravelViews.php
@@ -30,7 +30,8 @@ public function components()
             'form.input-group' => 'form.input-group',
             'icon' => 'icon',
             'modal' => 'modal',
-            'form.checkbox' => 'checkbox'
+            'form.checkbox' => 'checkbox',
+            'form.input' => 'input',
         ];
     }
 
@@ -80,7 +81,9 @@ public function js($options = '')
         $assets = [
             'livewire' => Livewire::scripts(),
             'alpine' => '<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>',
-            'laravel-views' => '<script src="' . asset('/vendor/laravel-views.js') . '" type="text/javascript" defer></script>'
+            'laravel-views' => '<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
+<script src="' . asset('/vendor/laravel-views.js') . '" type="text/javascript" defer></script>'
         ];
 
         return $this->getCustomizedLinks($assets, $options);
@@ -116,6 +119,9 @@ private function getCustomizedLinks($assets = [], $options = '')
             $links = $assets;
         }
 
-        return implode("\n", $links);
+        $linksStr = implode(PHP_EOL, $links);
+        return <<<HTML
+{$linksStr}
+HTML;
     }
 }
diff --git a/tests/Unit/LaravelViewsTest.php b/tests/Unit/LaravelViewsTest.php
@@ -26,8 +26,10 @@ public function testRenderJsLinks()
         $js = LaravelViews::js();
         $this->assertEquals(
             $js,
-            \Livewire\Livewire::scripts()."\n".
-            '<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>'."\n".
+            \Livewire\Livewire::scripts().PHP_EOL.
+            '<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>'.PHP_EOL.
+            '<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'.PHP_EOL.
+            '<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>'.PHP_EOL.
             '<script src="' . asset('/vendor/laravel-views.js') . '" type="text/javascript" defer></script>'
         );
     }
@@ -49,14 +51,18 @@ public function testRenderCustomizedJsLinks()
 
         $this->assertEquals(
             $js,
+            '<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'.PHP_EOL.
+            '<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>'.PHP_EOL.
             '<script src="' . asset('/vendor/laravel-views.js') . '" type="text/javascript" defer></script>'
         );
 
         $js = LaravelViews::js('laravel-views,alpine');
 
         $this->assertEquals(
             $js,
-            '<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>'."\n".
+            '<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>'.PHP_EOL.
+            '<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'.PHP_EOL.
+            '<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>'.PHP_EOL.
             '<script src="' . asset('/vendor/laravel-views.js') . '" type="text/javascript" defer></script>'
         );
     }
