Merge pull request #31 from savannabits/3.x-dev

3.x dev

bin/build.js

@@ -45,6 +45,6 @@ const defaultOptions = {
 
 compile({
     ...defaultOptions,
-    entryPoints: ['./resources/js/components/datepicker.js'],
-    outfile: './resources/js/dist/components/datepicker.js',
+    entryPoints: ['./resources/js/components/flatpickr.js'],
+    outfile: './resources/js/dist/components/flatpickr-component.js',
 })

config/coolsam-flatpickr.php

@@ -0,0 +1,7 @@
+<?php
+
+use Coolsam\FilamentFlatpickr\Enums\FlatpickrTheme;
+
+return [
+    'default_theme' => FlatpickrTheme::DEFAULT,
+];

resources/js/components/flatpickr.js

@@ -0,0 +1,78 @@
+import flatpickr from "flatpickr";
+import ConfirmDate from "../../assets/flatpickr/dist/esm/plugins/confirmDate/confirmDate.js";
+import MonthSelect from "../../assets/flatpickr/dist/esm/plugins/monthSelect/index.js";
+import WeekSelect from "../../assets/flatpickr/dist/esm/plugins/weekSelect/weekSelect.js";
+// import RangePlugin from "../../assets/flatpickr/dist/esm/plugins/rangePlugin.js";
+export default function flatpickrDatepicker(args) {
+    return {
+        state: args.state,
+        mode: 'light',
+        attribs: args.attribs ?? {},
+        packageConfig: args.packageConfig ?? {},
+        fp: null,
+        get darkStatus() {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches;
+        },
+        get getMode() {
+            if (localStorage.getItem('theme')) {
+                return localStorage.getItem('theme');
+            }
+            this.mode = this.darkStatus ? 'dark' : 'light';
+            return this.mode;
+        },
+        get darkLightAssetUrl() {
+            return this.darkStatus ? this.attribs.darkThemeAsset : this.attribs.lightThemeAsset
+        },
+        init: function () {
+            this.mode = this.darkStatus ? 'dark' : 'light';
+            const config = {
+                mode: this.attribs.mode,
+                time_24hr: true,
+                altFormat: 'F j, Y',
+                disableMobile: true,
+                initialDate: this.state,
+                allowInvalidPreload: false,
+                static: false,
+                defaultDate: this.state,
+                ...this.packageConfig,
+                plugins: [new ConfirmDate({
+                    confirmText: "OK",
+                    showAlways: false,
+                    theme: this.mode
+                })],
+            };
+            if (this.getMode === 'dark') {
+                let el = document.querySelector('#pickr-theme')
+                console.log(el);
+                if (el) {
+                    el.href = this.attribs.darkThemeAsset;
+                }
+            }
+            if (this.attribs.monthSelect) {
+                config.plugins.push(new MonthSelect({
+                    shorthand: false, //defaults to false
+                    dateFormat: "F Y", //defaults to "F Y"
+                    altInput: true,
+                    altFormat: "F, Y", //defaults to "F Y"
+                    theme: this.mode // defaults to "light"
+                }))
+            } else if (this.attribs.weekSelect) {
+                config.plugins.push(new WeekSelect({}))
+            }/* else if (this.attribs.rangePicker) {
+                config.plugins.push(new RangePlugin({}))
+            }*/
+            this.fp = flatpickr(this.$refs.picker, config);
+            this.fp.parseDate(this.state, this.packageConfig.dateFormat)
+            window.addEventListener('theme-changed', e => {
+                this.mode = e.detail;
+                let href;
+                if (this.mode === 'dark') {
+                    href = this.attribs.darkThemeAsset;
+                } else {
+                    href = this.attribs.themeAsset;
+                }
+                document.querySelector('#pickr-theme').href = href;
+            })
+        },
+    }
+}

resources/views/forms/components/flatpickr.blade.php

@@ -0,0 +1,88 @@
+@php
+    $extraAlpineAttributes = $getExtraAlpineAttributes();
+    $id = $getId();
+    $isConcealed = $isConcealed();
+    $isDisabled = $isDisabled();
+    $isPrefixInline = $isPrefixInline();
+    $isSuffixInline = $isSuffixInline();
+    $prefixActions = $getPrefixActions();
+    $prefixIcon = $getPrefixIcon();
+    $prefixLabel = $getPrefixLabel();
+    $suffixActions = $getSuffixActions();
+    $suffixIcon = $getSuffixIcon();
+    $suffixLabel = $getSuffixLabel();
+    $statePath = $getStatePath();
+    $config =array_merge($getConfig(), $getCustomConfig());
+    $attribs = [
+        "disabled" => $isDisabled,
+        "theme" => $getTheme() =='default' ? 'default' : $getTheme(),
+        "themeAsset" => $getThemeAsset(),
+        "lightThemeAsset" => $getLightThemeAsset(),
+        "darkThemeAsset" => $getDarkThemeAsset(),
+        'monthSelect'   => $isMonthSelect(),
+        'weekSelect'    => $isWeekSelect(),
+        'mode'          => $getMode(),
+        'rangePicker'   => $isRangePicker(),
+    ];
+@endphp
+<x-dynamic-component
+    :component="$getFieldWrapperView()"
+    :field="$field"
+>
+    <link rel="stylesheet" id="pickr-theme" type="text/css" href="{{$getThemeAsset()}}">
+    <div
+        x-data="flatpickrDatepicker({
+{{--                state: $wire.{{ $applyStateBindingModifiers("entangle('{$getStatePath()}')") }},--}}
+                packageConfig: @js($config),
+                attribs: @js($attribs)
+            })"
+        x-ignore
+        ax-load
+        x-load-css="[
+            @js(\Filament\Support\Facades\FilamentAsset::getStyleHref('flatpickr-css', \Coolsam\FilamentFlatpickr\FilamentFlatpickr::getPackageName())),
+            @js(\Filament\Support\Facades\FilamentAsset::getStyleHref('month-select-style', \Coolsam\FilamentFlatpickr\FilamentFlatpickr::getPackageName())),
+            @js(\Filament\Support\Facades\FilamentAsset::getStyleHref('flatpickr-confirm-date-style', \Coolsam\FilamentFlatpickr\FilamentFlatpickr::getPackageName())),
+            {{--@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('flatpickr-'.$attribs['theme'].'-theme', \Coolsam\FilamentFlatpickr\FilamentFlatpickr::getPackageName()))--}}
+        ]"
+        ax-load-src="{{\Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('flatpickr-component',package: \Coolsam\FilamentFlatpickr\FilamentFlatpickr::getPackageName())}}"
+    >
+        <x-filament::input.wrapper
+            :disabled="$isDisabled"
+            :inline-prefix="$isPrefixInline"
+            :inline-suffix="$isSuffixInline"
+            :prefix="$prefixLabel"
+            :prefix-actions="$prefixActions"
+            :prefix-icon="$prefixIcon"
+            :suffix="$suffixLabel"
+            :suffix-actions="$suffixActions"
+            :suffix-icon="$suffixIcon"
+            :valid="! $errors->has($statePath)"
+            class="fi-fo-text-input"
+            :attributes="
+            \Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())
+                ->class(['overflow-hidden'])
+        "
+        >
+            <x-filament::input
+                :attributes="
+                \Filament\Support\prepare_inherited_attributes($getExtraInputAttributeBag())
+                    ->merge($extraAlpineAttributes, escape: false)
+                    ->merge([
+                        'autocapitalize' => $getAutocapitalize(),
+                        'autocomplete' => $getAutocomplete(),
+                        'autofocus' => $isAutofocused(),
+                        'disabled' => $isDisabled,
+                        'id' => $id,
+                        'x-ref' => 'picker',
+                        'inlinePrefix' => $isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
+                        'inlineSuffix' => $isSuffixInline && (count($suffixActions) || $suffixIcon || filled($suffixLabel)),
+                        'placeholder' => $getPlaceholder(),
+                        'readonly' => $isReadOnly(),
+                        'required' => $isRequired() && (! $isConcealed),
+                        'type' => 'text',
+                    ], escape: false)
+            "
+            />
+        </x-filament::input.wrapper>
+    </div>
+</x-dynamic-component>

src/Enums/FlatpickrMode.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace Coolsam\FilamentFlatpickr\Enums;
+
+enum FlatpickrMode: string
+{
+    case RANGE = 'range';
+    case SINGLE = 'single';
+    case MULTIPLE = 'multiple';
+    case TIME = 'time';
+}