Laravel Livewire

Blade LiveWire By Examples Ehtu.html

<a wire:click="$set('vote', 1)">Set var value</a>
<a wire:click.prevent="$toogle('booleanval')">Toggle boolean</a>
<div wire:offline>Show this when user offline</div>
<!-- simple input text: -->
<input type='text' wire:model.debounce.2s .500ms="name">

<!-- button confirm and event prevent: -->
<button wire:click.prevent="delete({{ $product->id }})" onclick="confirm('Are you sure') || event.stopImmediatePropagation()">
  Delete
</button>

Date Range Picker Component.blade.php

{{-- Docs: http://www.daterangepicker.com/#examples --}}

<input class="daterange form-control" style="width: 260px;" [size]="myInput.value.length"
       x-data
    x-ref="input"
{{--   @apply.daterangepicker="$dispatch('input', $event.target.value)"--}}
{{--    x-init="new daterangepicker()"--}}
    @"apply.daterangepicker"="$dispatch('input', $event.target.val)"
    type="text"
    {{ $attributes }}
>

<script>
    window.addEventListener("load", function (event)
        {
            $('.daterange').daterangepicker({
                opens: 'left',
                "showDropdowns": true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                "autoApply": false,
                "locale": {
                    "format": "YYYY-MM-DD",
                    "separator": " - ",
                    "applyLabel": "Apply",
                    "cancelLabel": "Cancel",
                    "fromLabel": "From",
                    "toLabel": "To",
                    "customRangeLabel": "Custom",
                    "weekLabel": "W",
                    "daysOfWeek": [
                        "Su",
                        "Mo",
                        "Tu",
                        "We",
                        "Th",
                        "Fr",
                        "Sa"
                    ],
                    "monthNames": [
                        "January",
                        "February",
                        "March",
                        "April",
                        "May",
                        "June",
                        "July",
                        "August",
                        "September",
                        "October",
                        "November",
                        "December"
                    ],
                    "firstDay": 1
                },
            });

            $('.daterange').on('change', function (e) {
                @this.set('{{ $id }}', e.target.value);
            });
        }
        , false
    );
</script>

@push('scripts')
    <script>
        // $('.daterange').daterangepicker();

        $(function() {
            // ... func
        });
    </script>

@endpush

Laravel Livewire By Examples Ehtu.com.txt

php artisan make:livewire post.show
php artisan make:livewire post/show

// rename / move livewire components:
php artisan livewire:move Rating Rate

Laravel Livewire Edit Modal Example.blade.php

<!-- Modal -->
<div wire:ignore.self  class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog mw-100 w-75">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">{{ $title ?? "whatelse" }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ $slot }}
            </div>
            <div class="modal-footer">
                {{ $modalFooter }}
            </div>
        </div>
    </div>
</div>