Laravel 11, Vuexy Admin 10.3, by admin@koneko.mx

This commit is contained in:
2025-01-25 04:23:40 -06:00
parent c3045b43b1
commit 64d505910f
1283 changed files with 140198 additions and 0 deletions

View File

@ -0,0 +1,13 @@
@php
$livewireModel = $attributes->get('wire:model', $attributes->get('wire:model.defer'));
$name = $attributes->get('name', $livewireModel);
$id = $attributes->get('id', $name);
$parentClass = $attributes->get('parent_class', 'form-check-secondary'); // Uso de la segunda opción de $attributes->get()
$checked = isset($checked) && $checked? 'checked' : ''; // Asegurarse de que la variable esté definida y sea booleana
@endphp
<div class="form-check {{ $parentClass }}">
<input type="checkbox" id="{{ $id }}" name="{{ $name }}" {!! $attributes->except(['id', 'name', 'parent_class'])->merge(['class' => 'form-check-input']) !!} {{ $checked }}>
<label class="form-check-label" for="{{ $id }}">
{{ $slot }}
</label>
</div>

View File

@ -0,0 +1,25 @@
@props([
'options' => [],
'name' => null,
'placeholder' => '',
'selected' => null,
'id' => null
])
@php
$livewireModel = $attributes->get('wire:model', $attributes->get('wire:model.defer'));
$name = $attributes->get('name', $livewireModel);
$id = $attributes->get('id', $name);
$options = is_array($options) ? collect($options) : $options;
@endphp
<select id="{{ $id }}" name="{{ $name }}" {{ $attributes->merge(['class' => 'form-select']) }}>
@if(!empty($placeholder))
<option value="">{{ $placeholder }}</option>
@endif
@foreach($options as $key => $value)
<option value="{{ $key }}" {{ (string) $key === (string) old($name, $selected) ? 'selected' : '' }}>
{{ $value }}
</option>
@endforeach
</select>

View File

@ -0,0 +1,18 @@
@extends('layouts.porto.layout')
@section('title', 'Página no encontrada ¡Ups!')
@section('content')
<!-- Error -->
<div class="container-xxl container-p-y">
<div class="misc-wrapper">
<h1 class="mb-2 mx-2 fs-xxlarge" style="line-height: 6rem;font-size: 6rem;">404</h1>
<h4 class="mb-2 mx-2">Página no encontrada ⚠️</h4>
<p class="mb-6 mx-2">No pudimos encontrar la página que estás buscando.</p>
<a href="{{url('/')}}" class="btn btn-primary mb-10">Regresar al inicio</a>
<div class="mt-4">
<img src="{{ asset('assets/admin/img/illustrations/page-misc-error.png') }}" alt="page-misc-error" width="225" class="img-fluid">
</div>
</div>
</div>
@endsection

View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
@php
use Illuminate\Support\Facades\Route;
@endphp
<html lang="{{ session()->get('locale') ?? app()->getLocale() }}"
data-assets-path="{{ asset('/assets') . '/' }}"
data-base-url="{{ url('/') }}"
data-route="{{ Route::currentRouteName() }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@hasSection('title') @yield('title') | @endif{{ $_web['title'] }}</title>
<meta name="description" content="{{ config('_var.appDescription') }}" />
<meta name="author" content="{{ config('_var.author') }}">
<!-- laravel CRUD token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Favicons-->
<link rel="icon" href="{{ asset('storage/' . $_web['favicon']['16x16']) }}" type="image/x-icon">
<link rel="icon" sizes="192x192" href="{{ asset('storage/' . $_web['favicon']['192x192']) }}">
<link rel="apple-touch-icon" type="image/x-icon" sizes="76x76" href="{{ asset('storage/' . $_web['favicon']['76x76']) }}">
<link rel="apple-touch-icon" type="image/x-icon" sizes="120x120" href="{{ asset('storage/' . $_web['favicon']['120x120']) }}">
<link rel="apple-touch-icon" type="image/x-icon" sizes="152x152" href="{{ asset('storage/' . $_web['favicon']['152x152']) }}">
<link rel="apple-touch-icon" type="image/x-icon" sizes="180x180" href="{{ asset('storage/' . $_web['favicon']['180x180']) }}">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
<!-- Include Styles -->
@include('layouts.porto.sections.styles')
<!-- Include Scripts -->
@include('layouts.porto.sections.scriptsIncludes')
</head>
<body data-plugin-page-transition>
<!-- Layout Content -->
@yield('content')
<!--/ Layout Content -->
<!-- Include Scripts -->
@include('layouts.porto.sections.scripts')
</body>
</html>

View File

@ -0,0 +1,23 @@
@php
$containerFooter = (isset($configData['contentLayout']) && $configData['contentLayout'] === 'compact') ? 'container-xxl' : 'container-fluid';
@endphp
<!-- Footer-->
<footer class="content-footer footer bg-footer-theme">
<div class="{{ $containerFooter }}">
<div class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column">
<div class="text-body">
© <script>document.write(new Date().getFullYear())</script>, Hecho con ❤️ por <a href="{{ (!empty(config('_var.creatorUrl')) ? config('_var.creatorUrl') : '') }}" target="_blank" class="footer-link">{{ (!empty(config('_var.creatorName')) ? config('_var.creatorName') : '') }}</a>
</div>
<div class="d-none d-lg-inline-block">
@if (config('_var.licenseUrl'))
<a href="{{ config('_var.licenseUrl') }}" class="footer-link me-4" target="_blank">Licencia</a>
@endif
@if (config('_var.supportUrl'))
<a href="{{ config('_var.supportUrl') }}" target="_blank" class="footer-link d-none d-sm-inline-block">Soporte</a>
@endif
</div>
</div>
</div>
</footer>
<!--/ Footer-->

View File

@ -0,0 +1,18 @@
<!-- BEGIN: Vendor JS-->
<script src="/assets/vendor/plugins/js/plugins.min.js"></script>
<!-- Theme Base, Components and Settings -->
<script src="/assets/js/theme.js"></script>
@yield('vendor-script')
<!-- END: Page Vendor JS-->
<!-- Theme Custom -->
<script src="/assets/js/custom.js"></script>
<!-- Theme Initialization Files -->
<script src="/assets/js/theme.init.js"></script>
<!-- BEGIN: Page JS-->
@yield('page-script')
<!-- END: Page JS-->

View File

@ -0,0 +1,39 @@
<!-- BEGIN: Theme CSS-->
<!-- Web Fonts -->
<link id="googleFonts" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800%7CShadows+Into+Light&display=swap" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
@vite([
"resources/assets/vendor/bootstrap/css/bootstrap.min.css",
"resources/assets/vendor/fontawesome-free/css/all.min.css",
"resources/assets/vendor/animate/animate.compat.css",
"resources/assets/vendor/simple-line-icons/css/simple-line-icons.min.css",
"resources/assets/vendor/owl.carousel/assets/owl.carousel.min.css",
"resources/assets/vendor/owl.carousel/assets/owl.theme.default.min.css",
"resources/assets/vendor/magnific-popup/magnific-popup.min.css",
])
<!-- Theme CSS -->
@vite([
"resources/css/theme.css",
"resources/css/theme-elements.css",
"resources/css/theme-blog.css",
"resources/css/theme-shop.css",
])
<!-- Skin CSS -->
@vite([
"resources/css/skins/default.css",
])
<!-- Theme Custom CSS -->
@vite([
"resources/css/custom.css",
])
@yield('vendor-style')
<!-- Page Styles -->
@yield('page-style')

View File

@ -0,0 +1,168 @@
@extends('layouts.porto.layout')
@section('content')
<div class="body coming-soon">
<header id="header" data-plugin-options="{'stickyEnabled': false}">
<div class="header-body border border-top-0 border-end-0 border-start-0">
<div class="header-container container py-2">
<div class="header-row">
<div class="header-column">
<div class="header-row">
<p class="mb-0 text-dark"><strong>Get in touch!</strong> (123) 456-789</span><span
class="d-none d-sm-inline-block ps-1"> | <a href="#">mail@domain.com</a></span>
</p>
</div>
</div>
<div class="header-column justify-content-end">
<div class="header-row">
<ul class="header-social-icons social-icons me-2">
<li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank"
title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
<li class="social-icons-x"><a href="http://www.x.com/" target="_blank" title="X"><i
class="fab fa-x-twitter"></i></a></li>
<li class="social-icons-linkedin"><a href="http://www.linkedin.com/" target="_blank"
title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
<div class="header-nav-features">
<div class="header-nav-features-search-reveal-container">
<div
class="header-nav-feature header-nav-features-search header-nav-features-search-reveal d-inline-flex">
<a href="#"
class="header-nav-features-search-show-icon d-inline-flex text-decoration-none"><i
class="fas fa-search header-nav-top-icon"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header-nav-features header-nav-features-no-border p-static">
<div
class="header-nav-feature header-nav-features-search header-nav-features-search-reveal header-nav-features-search-reveal-big-search header-nav-features-search-reveal-big-search-full">
<div class="container">
<div class="row h-100 d-flex">
<div class="col h-100 d-flex">
<form role="search" class="d-flex h-100 w-100" action="page-search-results.html"
method="get">
<div class="big-search-header input-group">
<input class="form-control text-1" id="headerSearch" name="q" type="search"
value="" placeholder="Type and hit enter...">
<a href="#" class="header-nav-features-search-hide-icon"><i
class="fas fa-times header-nav-top-icon"></i></a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</header>
<div role="main" class="main" style="min-height: calc(100vh - 393px);">
<pre>
@php
print_r($_web);
@endphp
</pre>
<div class="container">
<div class="row mt-5">
<div class="col text-center">
<div class="logo">
<a href="index.html">
<img width="100" height="48" src="/assets/img/logo-default-slim.png" alt="Porto">
</a>
</div>
</div>
</div>
<div class="row">
<div class="col">
<hr class="solid my-5">
</div>
</div>
<section class="http-error py-0">
<div class="row justify-content-center py-3">
<div class="col-6 text-center">
<div class="http-error-main">
<h2 class="mb-0">500!</h2>
<span class="text-6 font-weight-bold text-color-dark">UNEXPECTED ERROR</span>
<p class="text-3 my-4 line-height-8">An unexpected error has occured. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Phasellus blandit massa enim.</p>
</div>
<a href="index.html"
class="btn btn-primary btn-rounded btn-xl font-weight-semibold text-2 px-4 py-3 mt-1 mb-4"><i
class="fas fa-angle-left pe-3"></i>GO BACK TO HOME PAGE</a>
</div>
</div>
</section>
</div>
</div>
<footer id="footer">
<div class="container">
<div class="row py-5">
<div class="col-md-4 d-flex justify-content-center justify-content-md-start mb-4 mb-lg-0">
<a href="index.html" class="logo pe-0 pe-lg-3 ps-3 ps-md-0">
<img alt="Porto Website Template" src="/assets/img/logo-footer.png" height="32">
</a>
</div>
<div class="col-md-8 d-flex justify-content-center justify-content-md-end mb-4 mb-lg-0">
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<div class="ms-3 text-center text-md-end">
<h5 class="text-3 mb-0 text-color-light">NEW YORK</h5>
<p class="text-4 mb-0"><i
class="fab fa-whatsapp text-color-primary top-1 p-relative"></i><span
class="ps-1">(123) 465-7890</span></p>
</div>
</div>
<div class="col-md-6">
<div class="ms-3 text-center text-md-end">
<h5 class="text-3 mb-0 text-color-light">LOS ANGELES</h5>
<p class="text-4 mb-0"><i
class="fab fa-whatsapp text-color-primary top-1 p-relative"></i><span
class="ps-1">(123) 465-7890</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-copyright footer-copyright-style-2">
<div class="container py-2">
<div class="row py-4">
<div
class="col-md-4 d-flex align-items-center justify-content-center justify-content-md-start mb-2 mb-lg-0">
<p>© Copyright 2024. All Rights Reserved.</p>
</div>
<div
class="col-md-8 d-flex align-items-center justify-content-center justify-content-md-end mb-4 mb-lg-0">
<p><i class="far fa-envelope text-color-primary top-1 p-relative"></i><a
href="mailto:mail@example.com" class="opacity-7 ps-1">mail@example.com</a></p>
<ul class="footer-social-icons social-icons social-icons-clean social-icons-icon-light ms-3">
<li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank"
title="Facebook"><i class="fab fa-facebook-f text-2"></i></a></li>
<li class="social-icons-x"><a href="http://www.x.com/" target="_blank" title="X"><i
class="fab fa-x-twitter text-2"></i></a></li>
<li class="social-icons-linkedin"><a href="http://www.linkedin.com/" target="_blank"
title="Linkedin"><i class="fab fa-linkedin-in text-2"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
<a class="style-switcher-open-loader" href="#" data-base-path="" data-skin-src="" data-bs-toggle="tooltip"
data-bs-animation="false" data-bs-placement="right" title="Style Switcher" aria-label="Style Switcher"><i
class="fas fa-cogs"></i>
<div class="style-switcher-tooltip"><strong>Style Switcher</strong>
<p>Check out different color options and styles.</p>
</div>
</a>
@endsection

View File

@ -0,0 +1,102 @@
@php
if (! isset($scrollTo)) {
$scrollTo = 'body';
}
$scrollIntoViewJsSnippet = ($scrollTo !== false)
? <<<JS
(\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
JS
: '';
@endphp
<div>
@if ($paginator->hasPages())
<nav class="d-flex justify-items-center justify-content-between">
<div class="d-flex justify-content-between flex-fill d-sm-none">
<ul class="pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="page-item disabled" aria-disabled="true">
<span class="page-link">@lang('pagination.previous')</span>
</li>
@else
<li class="page-item">
<button type="button" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.previous')</button>
</li>
@endif
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li class="page-item">
<button type="button" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.next')</button>
</li>
@else
<li class="page-item disabled" aria-disabled="true">
<span class="page-link" aria-hidden="true">@lang('pagination.next')</span>
</li>
@endif
</ul>
</div>
<div class="d-none flex-sm-fill d-sm-flex align-items-sm-center justify-content-sm-between">
<div>
<p class="small text-muted">
{!! __('Showing') !!}
<span class="fw-semibold">{{ $paginator->firstItem() }}</span>
{!! __('to') !!}
<span class="fw-semibold">{{ $paginator->lastItem() }}</span>
{!! __('of') !!}
<span class="fw-semibold">{{ $paginator->total() }}</span>
{!! __('results') !!}
</p>
</div>
<div>
<ul class="pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
<span class="page-link" aria-hidden="true">&lsaquo;</span>
</li>
@else
<li class="page-item">
<button type="button" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" aria-label="@lang('pagination.previous')">&lsaquo;</button>
</li>
@endif
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
@endif
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="page-item active" wire:key="paginator-{{ $paginator->getPageName() }}-page-{{ $page }}" aria-current="page"><span class="page-link">{{ $page }}</span></li>
@else
<li class="page-item" wire:key="paginator-{{ $paginator->getPageName() }}-page-{{ $page }}"><button type="button" class="page-link" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}">{{ $page }}</button></li>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li class="page-item">
<button type="button" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" aria-label="@lang('pagination.next')">&rsaquo;</button>
</li>
@else
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
<span class="page-link" aria-hidden="true">&rsaquo;</span>
</li>
@endif
</ul>
</div>
</div>
</nav>
@endif
</div>

View File

@ -0,0 +1,53 @@
@php
if (! isset($scrollTo)) {
$scrollTo = 'body';
}
$scrollIntoViewJsSnippet = ($scrollTo !== false)
? <<<JS
(\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
JS
: '';
@endphp
<div>
@if ($paginator->hasPages())
<nav>
<ul class="pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="page-item disabled" aria-disabled="true">
<span class="page-link">@lang('pagination.previous')</span>
</li>
@else
@if(method_exists($paginator,'getCursorName'))
<li class="page-item">
<button dusk="previousPage" type="button" class="page-link" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $paginator->previousCursor()->encode() }}" wire:click="setPage('{{$paginator->previousCursor()->encode()}}','{{ $paginator->getCursorName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.previous')</button>
</li>
@else
<li class="page-item">
<button type="button" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.previous')</button>
</li>
@endif
@endif
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
@if(method_exists($paginator,'getCursorName'))
<li class="page-item">
<button dusk="nextPage" type="button" class="page-link" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $paginator->nextCursor()->encode() }}" wire:click="setPage('{{$paginator->nextCursor()->encode()}}','{{ $paginator->getCursorName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.next')</button>
</li>
@else
<li class="page-item">
<button type="button" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled">@lang('pagination.next')</button>
</li>
@endif
@else
<li class="page-item disabled" aria-disabled="true">
<span class="page-link">@lang('pagination.next')</span>
</li>
@endif
</ul>
</nav>
@endif
</div>

View File

@ -0,0 +1,56 @@
@php
if (! isset($scrollTo)) {
$scrollTo = 'body';
}
$scrollIntoViewJsSnippet = ($scrollTo !== false)
? <<<JS
(\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
JS
: '';
@endphp
<div>
@if ($paginator->hasPages())
<nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
<span>
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:text-gray-600 dark:bg-gray-800 dark:border-gray-600">
{!! __('pagination.previous') !!}
</span>
@else
@if(method_exists($paginator,'getCursorName'))
<button type="button" dusk="previousPage" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $paginator->previousCursor()->encode() }}" wire:click="setPage('{{$paginator->previousCursor()->encode()}}','{{ $paginator->getCursorName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
{!! __('pagination.previous') !!}
</button>
@else
<button
type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
{!! __('pagination.previous') !!}
</button>
@endif
@endif
</span>
<span>
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
@if(method_exists($paginator,'getCursorName'))
<button type="button" dusk="nextPage" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $paginator->nextCursor()->encode() }}" wire:click="setPage('{{$paginator->nextCursor()->encode()}}','{{ $paginator->getCursorName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
{!! __('pagination.next') !!}
</button>
@else
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
{!! __('pagination.next') !!}
</button>
@endif
@else
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
{!! __('pagination.next') !!}
</span>
@endif
</span>
</nav>
@endif
</div>

View File

@ -0,0 +1,126 @@
@php
if (! isset($scrollTo)) {
$scrollTo = 'body';
}
$scrollIntoViewJsSnippet = ($scrollTo !== false)
? <<<JS
(\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
JS
: '';
@endphp
<div>
@if ($paginator->hasPages())
<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
<div class="flex justify-between flex-1 sm:hidden">
<span>
@if ($paginator->onFirstPage())
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
{!! __('pagination.previous') !!}
</span>
@else
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
{!! __('pagination.previous') !!}
</button>
@endif
</span>
<span>
@if ($paginator->hasMorePages())
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
{!! __('pagination.next') !!}
</button>
@else
<span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:text-gray-600 dark:bg-gray-800 dark:border-gray-600">
{!! __('pagination.next') !!}
</span>
@endif
</span>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700 leading-5 dark:text-gray-400">
<span>{!! __('Showing') !!}</span>
<span class="font-medium">{{ $paginator->firstItem() }}</span>
<span>{!! __('to') !!}</span>
<span class="font-medium">{{ $paginator->lastItem() }}</span>
<span>{!! __('of') !!}</span>
<span class="font-medium">{{ $paginator->total() }}</span>
<span>{!! __('results') !!}</span>
</p>
</div>
<div>
<span class="relative z-0 inline-flex rtl:flex-row-reverse rounded-md shadow-sm">
<span>
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
<span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
</span>
@else
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.previous') }}">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</button>
@endif
</span>
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<span aria-disabled="true">
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300">{{ $element }}</span>
</span>
@endif
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
<span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}">
@if ($page == $paginator->currentPage())
<span aria-current="page">
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600">{{ $page }}</span>
</span>
@else
<button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:text-gray-300 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
{{ $page }}
</button>
@endif
</span>
@endforeach
@endif
@endforeach
<span>
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.next') }}">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</button>
@else
<span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
<span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</span>
</span>
@endif
</span>
</span>
</div>
</div>
</nav>
@endif
</div>