Allow setting options per field

Author: jissereitsma

README.md

@@ -39,6 +39,20 @@ The Flatpickr directive is inserted via a block `loki.directives.flatpickr`. If
 </referenceBlock>
 ```
 
+Instead of a global configuration, options can also be set per field:
+```xml
+<block name="example" template="Loki_FieldComponents::form/field.phtml">
+    <arguments>
+        <argument name="input_type" xsi:type="string">date</argument>
+        <argument name="field_attributes" xsi:type="array">
+            <item name="x-flatpickr" xsi:type="array">
+                <item name="altFormat" xsi:type="string">d-m-Y</item>
+            </item>
+        </argument>
+    </arguments>
+</block>
+```
+
 For all options, see [https://flatpickr.js.org/options/](https://flatpickr.js.org/options/)
 
 Note that changing the `dateFormat` will also change the value sent to Magento. It is probably best to keep this at its default (`Y-m-d`).

view/frontend/templates/script/directive-flatpickr.phtml

@@ -1,21 +1,25 @@
 <?php
 declare(strict_types=1);
 
-/** @version 1.0.6 */
-
 use Loki\Components\Factory\ViewModelFactory;
 use Loki\Flatpickr\ViewModel\Options;
 use Magento\Framework\View\Element\Template;
 
+/** @version 1.0.6 */
 /** @var Template $block */
 /** @var ViewModelFactory $viewModelFactory */
 /** @var Options $options */
 $options = $viewModelFactory->create(Options::class);
 ?>
 <script>
     document.addEventListener('alpine:init', () => {
-        Alpine.directive('flatpickr', (el, {}) => {
-            flatpickr(el, JSON.parse('<?= /* @noEscape */ $options->toJson($block) ?>'));
+        Alpine.directive('flatpickr', (el, {expression}) => {
+            const options = Object.assign(
+                JSON.parse('<?= /* @noEscape */ $options->toJson($block) ?>'),
+                expression.length > 0 ? JSON.parse(expression) : {},
+            );
+
+            flatpickr(el, options);
         });
     });
 </script>