mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-11 06:46:47 +00:00
update to livewire 3
This commit is contained in:
HolgerHatGarKeineNode
@@ -19,7 +19,7 @@
|
||||
<div>
|
||||
<div class="flex space-x-6">
|
||||
<h1 class="text-4xl text-white py-8">Sent from my #₿indle🧡</h1>
|
||||
<x-input label="{{ __('Suche') }}" wire:model.debounce="search"/>
|
||||
<x-input label="{{ __('Suche') }}" wire:model.live.debounce="search"/>
|
||||
</div>
|
||||
|
||||
<ul role="list"
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
@php
|
||||
$defaultImage = Spatie\Comments\Support\Config::getGravatarDefaultImage();
|
||||
$defaultAvatar = "https://www.gravatar.com/avatar/unknown?d={$defaultImage}";
|
||||
|
||||
if ($user = auth()->user()) {
|
||||
$segment = md5(strtolower($user->email));
|
||||
$defaultAvatar = "https://www.gravatar.com/avatar/{$segment}?d={$defaultImage}";
|
||||
}
|
||||
@endphp
|
||||
|
||||
{{--<img
|
||||
class="comments-avatar"
|
||||
src="{{ isset($comment) && $comment->commentatorProperties() ? $comment->commentatorProperties()->avatar : $defaultAvatar }}"
|
||||
alt="avatar"
|
||||
>--}}
|
||||
@@ -1,12 +0,0 @@
|
||||
<button
|
||||
type="{{ isset($submit) && $submit ? 'submit' : 'button' }}"
|
||||
@class([
|
||||
'comments-button',
|
||||
'is-small' => isset($small) && $small,
|
||||
'is-danger' => isset($danger) && $danger,
|
||||
'is-link' => isset($link) && $link,
|
||||
])
|
||||
{{ $attributes->except('type', 'size', 'submit') }}
|
||||
>
|
||||
{{ $slot }}
|
||||
</button>
|
||||
@@ -1,7 +0,0 @@
|
||||
<time datetime="$date->format('Y-m-d H:i:s')" class="comments-date">
|
||||
@if($date->diffInMinutes() < 1)
|
||||
{{ __('comments::comments.just_now') }}
|
||||
@else
|
||||
{{ $date->diffForHumans() }}
|
||||
@endif
|
||||
</time>
|
||||
@@ -1,104 +0,0 @@
|
||||
<div
|
||||
x-data="compose({ text: @entangle($model), autofocus: @json($autofocus ?? false) })"
|
||||
x-init="
|
||||
$wire.on('comment', clear);
|
||||
@isset($comment)
|
||||
$wire.on('reply-{{ $comment->id }}', () => {
|
||||
clear();
|
||||
});
|
||||
@endisset
|
||||
"
|
||||
>
|
||||
<div wire:ignore>
|
||||
<textarea placeholder="{{ $placeholder ?? '' }}"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="comments-form-editor-tip">
|
||||
{!! __('You can use <a href="https://spatie.be/markdown" target="_blank" rel="nofollow noopener noreferrer">Markdown</a>') !!}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('comments-scripts')
|
||||
<script>
|
||||
document.addEventListener("alpine:init", () => {
|
||||
window.Alpine.data("compose", ({ text, autofocus = false } = {}) => {
|
||||
// Store the editor as a non-reactive instance property
|
||||
let editor;
|
||||
|
||||
return {
|
||||
text,
|
||||
|
||||
init() {
|
||||
if (editor) {
|
||||
return;
|
||||
}
|
||||
|
||||
const textarea = this.$el.querySelector("textarea");
|
||||
|
||||
if (!textarea) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadEasyMDE().then(() => {
|
||||
editor = new window.EasyMDE({
|
||||
element: textarea,
|
||||
hideIcons: [
|
||||
"heading",
|
||||
"image",
|
||||
"preview",
|
||||
"side-by-side",
|
||||
"fullscreen",
|
||||
"guide",
|
||||
],
|
||||
spellChecker: false,
|
||||
status: false,
|
||||
insertTexts: {
|
||||
link: ["[", "](https://)"],
|
||||
},
|
||||
});
|
||||
|
||||
editor.value(this.text);
|
||||
|
||||
if (autofocus) {
|
||||
editor.codemirror.focus();
|
||||
editor.codemirror.setCursor(editor.codemirror.lineCount(), 0);
|
||||
}
|
||||
|
||||
editor.codemirror.on("change", () => {
|
||||
this.text = editor.value();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
clear() {
|
||||
editor.value("");
|
||||
},
|
||||
|
||||
loadEasyMDE() {
|
||||
if (window.EasyMDE) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const loadScript = new Promise((resolve) => {
|
||||
const script = document.createElement("script");
|
||||
script.src = "https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js";
|
||||
script.addEventListener("load", resolve);
|
||||
document.getElementsByTagName("head")[0].appendChild(script);
|
||||
});
|
||||
|
||||
const loadCss = new Promise((resolve) => {
|
||||
const link = document.createElement("link");
|
||||
link.type = "text/css";
|
||||
link.rel = "stylesheet";
|
||||
link.href = "https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css";
|
||||
link.addEventListener("load", resolve);
|
||||
document.getElementsByTagName("head")[0].appendChild(link);
|
||||
});
|
||||
|
||||
return Promise.all([loadScript, loadCss]);
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -1 +0,0 @@
|
||||
<textarea wire:model.lazy="{{ $model }}" @isset($autofocus) autofocus @endisset class="comments-textarea"></textarea>
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="comments-icon"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
|
Before Width: | Height: | Size: 219 B |
@@ -1 +0,0 @@
|
||||
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="comments-icon"><path stroke-width="0" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 645 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="comments-icon"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
|
Before Width: | Height: | Size: 323 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="comments-icon"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
|
||||
|
Before Width: | Height: | Size: 295 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="comments-icon"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
||||
|
Before Width: | Height: | Size: 316 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="comments-icon"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
|
Before Width: | Height: | Size: 283 B |
@@ -1,14 +0,0 @@
|
||||
<div
|
||||
x-cloak
|
||||
@class(['comments-modal', 'is-compact' => $compact ?? false, 'is-left' => $left ?? false, 'is-bottom' => $bottom ?? false])
|
||||
{{ $attributes }}
|
||||
>
|
||||
@isset($title)
|
||||
<p class="comments-modal-title">
|
||||
{{ $title }}
|
||||
</p>
|
||||
@endisset
|
||||
<div class="comments-modal-contents">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,9 +0,0 @@
|
||||
<script>
|
||||
if (window.Alpine) {
|
||||
console.warn(
|
||||
'Laravel Comments scripts were loaded after Alpine. ' +
|
||||
'Please ensure Alpine is loaded last so Laravel Comments can initialize first.'
|
||||
);
|
||||
}
|
||||
</script>
|
||||
@stack('comments-scripts')
|
||||
@@ -1,3 +0,0 @@
|
||||
<style>
|
||||
{{ $stylesheet }}
|
||||
</style>
|
||||
@@ -1,196 +0,0 @@
|
||||
<div
|
||||
id="comment-{{ $comment->id }}"
|
||||
class="comments-group"
|
||||
x-data="{ confirmDelete: false, urlCopied: false }"
|
||||
x-effect="
|
||||
if (urlCopied) {
|
||||
window.navigator.clipboard.writeText(window.location.href.split('#')[0] + '#comment-{{ $comment->id }}');
|
||||
window.setTimeout(() => urlCopied = false, 2000);
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="comments-comment">
|
||||
@if($showAvatar)
|
||||
<x-comments::avatar :comment="$comment"/>
|
||||
@endif
|
||||
<div class="comments-comment-inner">
|
||||
<div class="comments-comment-header">
|
||||
@if($url = $comment->commentatorProperties()?->url)
|
||||
<a href="{{ $url }}">
|
||||
{{ $comment->commentatorProperties()->name }}
|
||||
</a>
|
||||
@else
|
||||
{{ $comment->commentatorProperties()?->name ?? __('comments::comments.guest') }}
|
||||
@endif
|
||||
<ul class="comments-comment-header-actions">
|
||||
<li>
|
||||
<a
|
||||
href="#comment-{{ $comment->id }}"
|
||||
@click.prevent="urlCopied = true"
|
||||
>
|
||||
<x-comments::date :date="$comment->created_at"/>
|
||||
<span class="comments-comment-header-copied" x-show="urlCopied" style="display: none;">
|
||||
✓ {{ __('comments::comments.copied') }}!
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
@if($writable)
|
||||
@can('update', $comment)
|
||||
<li>
|
||||
<a href="#" wire:click.prevent="startEditing" aria-role="button">{{__('comments::comments.edit')}}</a>
|
||||
</li>
|
||||
@endcan
|
||||
@can('delete', $comment)
|
||||
<li>
|
||||
<a href="#" @click.prevent="confirmDelete = true" aria-role="button">{{__('comments::comments.delete')}}</a>
|
||||
<x-comments::modal
|
||||
right
|
||||
bottom
|
||||
x-show="confirmDelete"
|
||||
@click.outside="confirmDelete = false"
|
||||
:title="__('comments::comments.delete_confirmation_title')"
|
||||
>
|
||||
<p>{{ __('comments::comments.delete_confirmation_text') }}</p>
|
||||
<x-comments::button danger small wire:click="deleteComment">
|
||||
{{ __('comments::comments.delete') }}
|
||||
</x-comments::button>
|
||||
</x-comments::modal>
|
||||
</li>
|
||||
@endcan
|
||||
@endif
|
||||
@include('comments::extraCommentHeaderActions')
|
||||
</ul>
|
||||
</div>
|
||||
@if($comment->isPending())
|
||||
<div class="comments-approval">
|
||||
<span>
|
||||
{{__('comments::comments.awaits_approval')}}
|
||||
</span>
|
||||
<span class="comments-approval-buttons">
|
||||
@can('reject', $comment)
|
||||
<button
|
||||
class="comments-button is-small is-danger"
|
||||
wire:click="reject">
|
||||
{{__('comments::comments.reject_comment')}}
|
||||
</button>
|
||||
@endcan
|
||||
@can('approve', $comment)
|
||||
<button
|
||||
class="comments-button is-small"
|
||||
wire:click="approve">
|
||||
{{__('comments::comments.approve_comment')}}
|
||||
</button>
|
||||
@endcan
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
@if($isEditing)
|
||||
<div class="comments-form">
|
||||
<form class="comments-form-inner" wire:submit.prevent="edit">
|
||||
<x-dynamic-component
|
||||
:component="\Spatie\LivewireComments\Support\Config::editor()"
|
||||
model="editText"
|
||||
:comment="$comment"
|
||||
autofocus
|
||||
/>
|
||||
@error('editText')
|
||||
<p class="comments-error">
|
||||
{{ $message }}
|
||||
</p>
|
||||
@enderror
|
||||
<x-comments::button submit>
|
||||
{{ __('comments::comments.edit_comment') }}
|
||||
</x-comments::button>
|
||||
<x-comments::button link wire:click="stopEditing">
|
||||
{{ __('comments::comments.cancel') }}
|
||||
</x-comments::button>
|
||||
</form>
|
||||
</div>
|
||||
@else
|
||||
<div class="comment-text">
|
||||
{!! $comment->text !!}
|
||||
</div>
|
||||
@if($writable || $comment->reactions->summary()->isNotEmpty())
|
||||
<div class="comments-reactions">
|
||||
@foreach($comment->reactions->summary() as $summary)
|
||||
<div
|
||||
wire:key="{{ $comment->id }}{{$summary['reaction']}}"
|
||||
@auth
|
||||
wire:click="toggleReaction('{{ $summary['reaction'] }}')"
|
||||
@endauth
|
||||
@class(['comments-reaction', 'is-reacted' => $summary['commentator_reacted']])
|
||||
>
|
||||
{{ $summary['reaction'] }} {{ $summary['count'] }}
|
||||
</div>
|
||||
@endforeach
|
||||
@if($writable)
|
||||
<div
|
||||
x-cloak
|
||||
x-data="{ open: false }"
|
||||
@click.outside="open = false"
|
||||
class="comments-reaction-picker"
|
||||
>
|
||||
@can('react', $comment)
|
||||
<button class="comments-reaction-picker-trigger" type="button"
|
||||
@click="open = !open">
|
||||
<x-comments::icons.smile/>
|
||||
</button>
|
||||
<x-comments::modal x-show="open" compact left>
|
||||
<div class="comments-reaction-picker-reactions">
|
||||
@foreach(config('comments.allowed_reactions') as $reaction)
|
||||
@php
|
||||
$commentatorReacted = ! is_bool(array_search(
|
||||
$reaction,
|
||||
array_column($comment->reactions->toArray(), 'reaction'),
|
||||
));
|
||||
@endphp
|
||||
<button
|
||||
type="button"
|
||||
@class(['comments-reaction-picker-reaction', 'is-reacted' => $commentatorReacted])
|
||||
wire:click="toggleReaction('{{ $reaction }}')"
|
||||
>
|
||||
{{ $reaction }}
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-comments::modal>
|
||||
@endcan
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($showReplies)
|
||||
|
||||
@if($comment->isTopLevel())
|
||||
|
||||
<div class="comments-nested">
|
||||
@if($this->newestFirst)
|
||||
@if(auth()->check() || config('comments.allow_anonymous_comments'))
|
||||
@include('comments::livewire.partials.replyTo')
|
||||
@endif
|
||||
|
||||
@endif
|
||||
@foreach ($comment->nestedComments as $nestedComment)
|
||||
@can('see', $nestedComment)
|
||||
<livewire:comments-comment
|
||||
:key="$nestedComment->id"
|
||||
:comment="$nestedComment"
|
||||
:show-avatar="$showAvatar"
|
||||
:newest-first="$newestFirst"
|
||||
:writable="$writable"
|
||||
/>
|
||||
@endcan
|
||||
@endforeach
|
||||
@if(! $this->newestFirst)
|
||||
@if(auth()->check() || config('comments.allow_anonymous_comments'))
|
||||
@include('comments::livewire.partials.replyTo')
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
@@ -1,61 +0,0 @@
|
||||
@php
|
||||
use Spatie\Comments\Enums\NotificationSubscriptionType;
|
||||
@endphp
|
||||
|
||||
<section class="comments {{ $newestFirst ? 'comments-newest-first' : '' }}">
|
||||
<header class="comments-header">
|
||||
@if($writable)
|
||||
@auth
|
||||
@if($showNotificationOptions)
|
||||
<div x-data="{ subscriptionsOpen: false}" class="comments-subscription">
|
||||
<button @click.prevent="subscriptionsOpen = true" class="comments-subscription-trigger">
|
||||
{{ NotificationSubscriptionType::from($selectedNotificationSubscriptionType)->longDescription() }}
|
||||
</button>
|
||||
<x-comments::modal
|
||||
bottom
|
||||
compact
|
||||
x-show="subscriptionsOpen"
|
||||
@click.outside="subscriptionsOpen = false"
|
||||
>
|
||||
@foreach(NotificationSubscriptionType::cases() as $case)
|
||||
<button class="comments-subscription-item" @click="subscriptionsOpen = false" wire:click="updateSelectedNotificationSubscriptionType('{{ $case->value }}')">
|
||||
{{ $case->description() }}
|
||||
</button>
|
||||
@endforeach
|
||||
</x-comments::modal>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
@endauth
|
||||
</header>
|
||||
|
||||
@if ($newestFirst)
|
||||
@include('comments::livewire.partials.newComment')
|
||||
@endif
|
||||
|
||||
@if($comments->count())
|
||||
@foreach($comments as $comment)
|
||||
@can('see', $comment)
|
||||
<livewire:comments-comment
|
||||
:key="$comment->id"
|
||||
:comment="$comment"
|
||||
:show-avatar="$showAvatars"
|
||||
:newest-first="$newestFirst"
|
||||
:writable="$writable"
|
||||
:show-replies="$showReplies"
|
||||
/>
|
||||
@endcan
|
||||
@endforeach
|
||||
|
||||
@if ($comments->hasPages())
|
||||
{{ $comments->links() }}
|
||||
@endif
|
||||
|
||||
@else
|
||||
<p class="comments-no-comment-yet">{{ $noCommentsText ?? __('comments::comments.no_comments_yet') }}</p>
|
||||
@endif
|
||||
|
||||
@if (! $newestFirst)
|
||||
@include('comments::livewire.partials.newComment')
|
||||
@endif
|
||||
</section>
|
||||
@@ -1,24 +0,0 @@
|
||||
@if($writable)
|
||||
@can('createComment', $model)
|
||||
<div class="comments-form">
|
||||
@if($showAvatars)
|
||||
<x-comments::avatar/>
|
||||
@endif
|
||||
<form class="comments-form-inner" wire:submit.prevent="comment">
|
||||
<x-dynamic-component
|
||||
:component="\Spatie\LivewireComments\Support\Config::editor()"
|
||||
model="text"
|
||||
:placeholder="__('comments::comments.write_comment')"
|
||||
/>
|
||||
@error('text')
|
||||
<p class="comments-error">
|
||||
{{ $message }}
|
||||
</p>
|
||||
@enderror
|
||||
<x-comments::button submit>
|
||||
{{ __('comments::comments.create_comment') }}
|
||||
</x-comments::button>
|
||||
</form>
|
||||
</div>
|
||||
@endcan
|
||||
@endif
|
||||
@@ -1,47 +0,0 @@
|
||||
@if($writable)
|
||||
<div class="comments-form comments-reply">
|
||||
@if($showAvatar)
|
||||
<x-comments::avatar/>
|
||||
@endif
|
||||
<form class="comments-form-inner" wire:submit.prevent="reply">
|
||||
<div
|
||||
x-data="{ isExpanded: false }"
|
||||
x-init="
|
||||
$wire.on('reply-{{ $comment->id }}', () => {
|
||||
isExpanded = false;
|
||||
});
|
||||
"
|
||||
>
|
||||
<input
|
||||
x-show="!isExpanded"
|
||||
@click="isExpanded = true"
|
||||
@focus="isExpanded = true"
|
||||
class="comments-placeholder"
|
||||
placeholder="{{ __('comments::comments.write_reply') }}"
|
||||
>
|
||||
<div x-show="isExpanded">
|
||||
<div>
|
||||
<x-dynamic-component
|
||||
:component="\Spatie\LivewireComments\Support\Config::editor()"
|
||||
model="replyText"
|
||||
:comment="$comment"
|
||||
:placeholder="__('comments::comments.write_reply')"
|
||||
autofocus
|
||||
/>
|
||||
@error('replyText')
|
||||
<p class="comments-error">
|
||||
{{ $message }}
|
||||
</p>
|
||||
@enderror
|
||||
<x-comments::button submit>
|
||||
{{ __('comments::comments.create_reply') }}
|
||||
</x-comments::button>
|
||||
<x-comments::button link @click="isExpanded = false">
|
||||
{{ __('comments::comments.cancel') }}
|
||||
</x-comments::button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
@@ -1,24 +0,0 @@
|
||||
@component('mail::message')
|
||||
# {{ __('comments::notifications.approved_comment_mail_title', [
|
||||
'commentable_name' => $topLevelComment->commentable->commentableName(),
|
||||
'commentable_url' => $topLevelComment->commentable->commentUrl(),
|
||||
'commentator_name' => $comment->commentatorProperties()->name ?? 'anonymous',
|
||||
]) }}
|
||||
|
||||
{{ __('comments::notifications.approved_comment_mail_body', [
|
||||
'commentable_name' => $topLevelComment->commentable->commentableName(),
|
||||
'commentable_url' => $topLevelComment->commentable->commentUrl(),
|
||||
'commentator_name' => $comment->commentatorProperties()->name ?? 'anonymous',
|
||||
]) }}
|
||||
|
||||
{!! $comment->text !!}
|
||||
|
||||
@component('mail::button', ['url' => $comment->commentUrl()])
|
||||
{{ __('comments::notifications.view_comment') }}
|
||||
@endcomponent
|
||||
|
||||
@if($unsubscribeUrl = $commentator->unsubscribeFromCommentNotificationsUrl($comment))
|
||||
<a href="{{ $unsubscribeUrl }}">{{ __('Unsubscribe from receive notification about :commentableName', ['commentableName' => $topLevelComment->commentable->commentableName()]) }}</a>
|
||||
@endif
|
||||
|
||||
@endcomponent
|
||||
@@ -1,20 +0,0 @@
|
||||
@component('mail::message')
|
||||
|
||||
{{ __('comments::notifications.pending_comment_mail_body', [
|
||||
'commentable_name' => $topLevelComment->commentable->commentableName(),
|
||||
'commentator_name' => $comment->commentatorProperties()->name ?? 'anonymous',
|
||||
]) }}
|
||||
|
||||
[{{ __('comments::notifications.view_comment') }}]({{ $comment->commentUrl() }})
|
||||
|
||||
{!! $comment->text !!}
|
||||
|
||||
@component('mail::button', ['url' => $comment->approveUrl()])
|
||||
{{ __('comments::notifications.approve_comment') }}
|
||||
@endcomponent
|
||||
|
||||
@component('mail::button', ['url' => $comment->rejectUrl()])
|
||||
{{ __('comments::notifications.reject_comment') }}
|
||||
@endcomponent
|
||||
|
||||
@endcomponent
|
||||
@@ -1,5 +0,0 @@
|
||||
<x-comments::signed-layout>
|
||||
|
||||
{{ __('The comment has been approved.') }}
|
||||
|
||||
</x-comments::signed-layout>
|
||||
@@ -1,15 +0,0 @@
|
||||
<x-comments::signed-layout>
|
||||
|
||||
{{ __('Do you want to approve the comment?') }}
|
||||
|
||||
<form class="form" method="POST">
|
||||
@csrf
|
||||
<button id="confirmationButton" class="button" type="submit">{{ __('Approve') }}</button>
|
||||
</form>
|
||||
|
||||
</x-comments::signed-layout>
|
||||
|
||||
<script>
|
||||
document.getElementById("confirmationButton").click();
|
||||
</script>
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
<x-comments::signed-layout>
|
||||
|
||||
{{ __('The comment has been rejected.') }}
|
||||
|
||||
</x-comments::signed-layout>
|
||||
@@ -1,14 +0,0 @@
|
||||
<x-comments::signed-layout>
|
||||
|
||||
{{ __('Do you want to reject the comment?') }}
|
||||
|
||||
<form class="form" method="POST">
|
||||
@csrf
|
||||
<button id="confirmationButton" class="button" type="submit">Approve</button>
|
||||
</form>
|
||||
|
||||
</x-comments::signed-layout>
|
||||
|
||||
<script>
|
||||
document.getElementById("confirmationButton").click();
|
||||
</script>
|
||||
@@ -1,5 +0,0 @@
|
||||
<x-comments::signed-layout>
|
||||
|
||||
{{ __('You have been unsubscribed.') }}
|
||||
|
||||
</x-comments::signed-layout>
|
||||
@@ -1,5 +0,0 @@
|
||||
<x-comments::signed-layout>
|
||||
|
||||
{{ __('You have been unsubscribed from every comment notification.') }}
|
||||
|
||||
</x-comments::signed-layout>
|
||||
@@ -1,14 +0,0 @@
|
||||
<x-comments::signed-layout>
|
||||
|
||||
{{ __('Do you want to unsubscribe from every comment notification?') }}
|
||||
|
||||
<form class="form" method="POST">
|
||||
@csrf
|
||||
<button id="confirmationButton" class="button" type="submit">{{ __('Approve') }}</button>
|
||||
</form>
|
||||
|
||||
</x-comments::signed-layout>
|
||||
|
||||
<script>
|
||||
document.getElementById("confirmationButton").click();
|
||||
</script>
|
||||
@@ -1,14 +0,0 @@
|
||||
<x-comments::signed-layout>
|
||||
|
||||
{{ __('Do you want to unsubscribe?') }}
|
||||
|
||||
<form class="form" method="POST">
|
||||
@csrf
|
||||
<button id="confirmationButton" class="button" type="submit">{{ __('Approve') }}</button>
|
||||
</form>
|
||||
|
||||
</x-comments::signed-layout>
|
||||
|
||||
<script>
|
||||
document.getElementById("confirmationButton").click();
|
||||
</script>
|
||||
@@ -1,10 +0,0 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -15,7 +15,7 @@
|
||||
</span>
|
||||
|
||||
@once
|
||||
<x-jet-dialog-modal wire:model="confirmingPassword">
|
||||
<x-jet-dialog-modal wire:model.live="confirmingPassword">
|
||||
<x-slot name="title">
|
||||
{{ $title }}
|
||||
</x-slot>
|
||||
@@ -26,7 +26,7 @@
|
||||
<div class="mt-4" x-data="{}" x-on:confirming-password.window="setTimeout(() => $refs.confirmable_password.focus(), 250)">
|
||||
<x-jet-input type="password" class="mt-1 block w-3/4" placeholder="{{ __('Password') }}"
|
||||
x-ref="confirmable_password"
|
||||
wire:model.defer="confirmablePassword"
|
||||
wire:model="confirmablePassword"
|
||||
wire:keydown.enter="confirmPassword" />
|
||||
|
||||
<x-jet-input-error for="confirmable_password" class="mt-2" />
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</x-jet-section-title>
|
||||
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<form wire:submit.prevent="{{ $submit }}">
|
||||
<form wire:submit="{{ $submit }}">
|
||||
<div class="px-4 py-5 bg-white sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}">
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
{{ $form }}
|
||||
|
||||
@@ -15,7 +15,7 @@ $maxWidth = [
|
||||
|
||||
<div
|
||||
x-data="{
|
||||
show: @entangle($attributes->wire('model')).defer,
|
||||
show: @entangle($attributes->wire('model')),
|
||||
focusables() {
|
||||
// All focusable element types...
|
||||
let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
|
||||
|
||||
@@ -1,139 +0,0 @@
|
||||
@aware(['component'])
|
||||
@props(['rows'])
|
||||
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($component->hasConfigurableAreaFor('before-pagination'))
|
||||
@include($component->getConfigurableAreaFor('before-pagination'), $component->getParametersForConfigurableArea('before-pagination'))
|
||||
@endif
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div>
|
||||
@if ($component->paginationVisibilityIsEnabled())
|
||||
<div class="mt-4 px-4 md:p-0 sm:flex justify-between items-center space-y-4 sm:space-y-0">
|
||||
<div>
|
||||
@if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
|
||||
<p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
|
||||
<span>@lang('Showing')</span>
|
||||
<span class="font-medium">{{ $rows->firstItem() }}</span>
|
||||
<span>@lang('to')</span>
|
||||
<span class="font-medium">{{ $rows->lastItem() }}</span>
|
||||
<span>@lang('of')</span>
|
||||
<span class="font-medium">{{ $rows->total() }}</span>
|
||||
<span>@lang('results')</span>
|
||||
</p>
|
||||
@elseif ($component->paginationIsEnabled() && $component->isPaginationMethod('simple'))
|
||||
<p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
|
||||
<span>@lang('Showing')</span>
|
||||
<span class="font-medium">{{ $rows->firstItem() }}</span>
|
||||
<span>@lang('to')</span>
|
||||
<span class="font-medium">{{ $rows->lastItem() }}</span>
|
||||
</p>
|
||||
@else
|
||||
<p class="total-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
|
||||
@lang('Showing')
|
||||
<span class="font-medium">{{ $rows->count() }}</span>
|
||||
@lang('results')
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if ($component->paginationIsEnabled())
|
||||
{{ $rows->links('livewire-tables::specific.tailwind.pagination') }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4')
|
||||
<div>
|
||||
@if ($component->paginationVisibilityIsEnabled())
|
||||
@if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 col-md-6 overflow-auto">
|
||||
{{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 text-center text-md-right text-muted">
|
||||
<span>@lang('Showing')</span>
|
||||
<strong>{{ $rows->count() ? $rows->firstItem() : 0 }}</strong>
|
||||
<span>@lang('to')</span>
|
||||
<strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
|
||||
<span>@lang('of')</span>
|
||||
<strong>{{ $rows->total() }}</strong>
|
||||
<span>@lang('results')</span>
|
||||
</div>
|
||||
</div>
|
||||
@elseif ($component->paginationIsEnabled() && $component->isPaginationMethod('simple'))
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 col-md-6 overflow-auto">
|
||||
{{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 text-center text-md-right text-muted">
|
||||
<span>@lang('Showing')</span>
|
||||
<strong>{{ $rows->count() ? $rows->firstItem() : 0 }}</strong>
|
||||
<span>@lang('to')</span>
|
||||
<strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 text-muted">
|
||||
@lang('Showing')
|
||||
<strong>{{ $rows->count() }}</strong>
|
||||
@lang('results')
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-5')
|
||||
<div>
|
||||
@if ($component->paginationVisibilityIsEnabled())
|
||||
@if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 col-md-6 overflow-auto">
|
||||
{{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 text-center text-md-end text-muted">
|
||||
<span>@lang('Showing')</span>
|
||||
<strong>{{ $rows->count() ? $rows->firstItem() : 0 }}</strong>
|
||||
<span>@lang('to')</span>
|
||||
<strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
|
||||
<span>@lang('of')</span>
|
||||
<strong>{{ $rows->total() }}</strong>
|
||||
<span>@lang('results')</span>
|
||||
</div>
|
||||
</div>
|
||||
@elseif ($component->paginationIsEnabled() && $component->isPaginationMethod('simple'))
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 col-md-6 overflow-auto">
|
||||
{{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 text-center text-md-end text-muted">
|
||||
<span>@lang('Showing')</span>
|
||||
<strong>{{ $rows->count() ? $rows->firstItem() : 0 }}</strong>
|
||||
<span>@lang('to')</span>
|
||||
<strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 text-muted">
|
||||
@lang('Showing')
|
||||
<strong>{{ $rows->count() }}</strong>
|
||||
@lang('results')
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->hasConfigurableAreaFor('after-pagination'))
|
||||
@include($component->getConfigurableAreaFor('after-pagination'), $component->getParametersForConfigurableArea('after-pagination'))
|
||||
@endif
|
||||
@@ -1,97 +0,0 @@
|
||||
@aware(['component'])
|
||||
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
|
||||
$customAttributes = [
|
||||
'wrapper' => $this->getTableWrapperAttributes(),
|
||||
'table' => $this->getTableAttributes(),
|
||||
'thead' => $this->getTheadAttributes(),
|
||||
'tbody' => $this->getTbodyAttributes(),
|
||||
];
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div {{
|
||||
$attributes->merge($customAttributes['wrapper'])
|
||||
->class(['shadow overflow-y-scroll border-b border-gray-200 dark:border-gray-700 sm:rounded-lg' => $customAttributes['wrapper']['default'] ?? true])
|
||||
->except('default')
|
||||
}}>
|
||||
<table {{
|
||||
$attributes->merge($customAttributes['table'])
|
||||
->class(['min-w-full divide-y divide-gray-200 dark:divide-none' => $customAttributes['table']['default'] ?? true])
|
||||
->except('default')
|
||||
}}>
|
||||
<thead {{
|
||||
$attributes->merge($customAttributes['thead'])
|
||||
->class(['bg-gray-50' => $customAttributes['thead']['default'] ?? true])
|
||||
->except('default')
|
||||
}}>
|
||||
<tr>
|
||||
{{ $thead }}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
@if ($component->reorderIsEnabled())
|
||||
wire:sortable="{{ $component->getReorderMethod() }}"
|
||||
@endif
|
||||
|
||||
{{
|
||||
$attributes->merge($customAttributes['tbody'])
|
||||
->class(['bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-none' => $customAttributes['tbody']['default'] ?? true])
|
||||
->except('default')
|
||||
}}
|
||||
>
|
||||
{{ $slot }}
|
||||
</tbody>
|
||||
|
||||
@if (isset($tfoot))
|
||||
<tfoot>
|
||||
{{ $tfoot }}
|
||||
</tfoot>
|
||||
@endif
|
||||
</table>
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<div {{
|
||||
$attributes->merge($customAttributes['wrapper'])
|
||||
->class(['table-responsive' => $customAttributes['wrapper']['default'] ?? true])
|
||||
->except('default')
|
||||
}}>
|
||||
<table {{
|
||||
$attributes->merge($customAttributes['table'])
|
||||
->class(['table table-striped' => $customAttributes['table']['default'] ?? true])
|
||||
->except('default')
|
||||
}}>
|
||||
<thead {{
|
||||
$attributes->merge($customAttributes['thead'])
|
||||
->class(['' => $customAttributes['thead']['default'] ?? true])
|
||||
->except('default')
|
||||
}}>
|
||||
<tr>
|
||||
{{ $thead }}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody
|
||||
@if ($component->reorderIsEnabled())
|
||||
wire:sortable="{{ $component->getReorderMethod() }}"
|
||||
@endif
|
||||
|
||||
{{
|
||||
$attributes->merge($customAttributes['tbody'])
|
||||
->class(['' => $customAttributes['tbody']['default'] ?? true])
|
||||
->except('default')
|
||||
}}
|
||||
>
|
||||
{{ $slot }}
|
||||
</tbody>
|
||||
|
||||
@if (isset($tfoot))
|
||||
<tfoot>
|
||||
{{ $tfoot }}
|
||||
</tfoot>
|
||||
@endif
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
@@ -1,22 +0,0 @@
|
||||
@aware(['component'])
|
||||
|
||||
@php
|
||||
$attributes = $attributes->merge(['wire:key' => 'empty-message-'.$component->id]);
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<tr {{ $attributes }}>
|
||||
<td colspan="{{ $component->getColspanCount() }}">
|
||||
<div class="flex justify-center items-center space-x-2 dark:bg-gray-800">
|
||||
<span class="font-medium py-8 text-gray-400 text-lg dark:text-white">{{ $component->getEmptyMessage() }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<tr {{ $attributes }}>
|
||||
<td colspan="{{ $component->getColspanCount() }}">
|
||||
{{ $component->getEmptyMessage() }}
|
||||
</td>
|
||||
</tr>
|
||||
@endif
|
||||
@@ -1,66 +0,0 @@
|
||||
@aware(['component'])
|
||||
@props(['row', 'rowIndex'])
|
||||
|
||||
@if ($component->collapsingColumnsAreEnabled() && $component->hasCollapsedColumns())
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
$columns = collect([]);
|
||||
|
||||
if ($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) {
|
||||
$columns->push($component->getCollapsedMobileColumns());
|
||||
$columns->push($component->getCollapsedTabletColumns());
|
||||
} elseif ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()) {
|
||||
$columns->push($component->getCollapsedTabletColumns());
|
||||
} elseif ($component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()) {
|
||||
$columns->push($component->getCollapsedMobileColumns());
|
||||
}
|
||||
|
||||
$columns = $columns->collapse();
|
||||
|
||||
// TODO: Column count
|
||||
$colspan = $columns->count() + 1;
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<tr
|
||||
wire:key="row-{{ $rowIndex }}-collapsed-contents"
|
||||
wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
|
||||
x-data
|
||||
@toggle-row-content.window="$event.detail.row === {{ $rowIndex }} ? $el.classList.toggle('hidden') : null"
|
||||
class="hidden md:hidden bg-white dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<td class="pt-4 pb-2 px-4" colspan="{{ $colspan }}">
|
||||
<div>
|
||||
@foreach($columns as $colIndex => $column)
|
||||
@continue($column->isHidden())
|
||||
@continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
|
||||
|
||||
<p class="block mb-2 @if($column->shouldCollapseOnMobile()) sm:hidden @endif @if($column->shouldCollapseOnTablet()) md:hidden @endif">
|
||||
<strong>{{ $column->getTitle() }}</strong>: {{ $column->renderContents($row) }}
|
||||
</p>
|
||||
@endforeach
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<tr
|
||||
wire:key="row-{{ $rowIndex }}-collapsed-contents"
|
||||
x-data
|
||||
@toggle-row-content.window="$event.detail.row === {{ $rowIndex }} ? $el.classList.toggle('d-none') : null"
|
||||
class="d-none d-md-none"
|
||||
>
|
||||
<td class="pt-3 p-2" colspan="{{ $colspan }}">
|
||||
<div>
|
||||
@foreach($columns as $colIndex => $column)
|
||||
@continue($column->isHidden())
|
||||
@continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
|
||||
|
||||
<p class="d-block mb-2 @if($column->shouldCollapseOnMobile()) d-sm-none @endif @if($column->shouldCollapseOnTablet()) d-md-none @endif">
|
||||
<strong>{{ $column->getTitle() }}</strong>: {{ $column->renderContents($row) }}
|
||||
</p>
|
||||
@endforeach
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endif
|
||||
@endif
|
||||
@@ -1,43 +0,0 @@
|
||||
@aware(['component', 'row', 'rowIndex'])
|
||||
@props(['column', 'colIndex'])
|
||||
|
||||
@php
|
||||
$attributes = $attributes->merge(['wire:key' => 'cell-'.$rowIndex.'-'.$colIndex.'-'.$component->id]);
|
||||
$theme = $component->getTheme();
|
||||
$customAttributes = $component->getTdAttributes($column, $row, $colIndex, $rowIndex)
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<td
|
||||
@if ($column->isClickable())
|
||||
onclick="window.open('{{ $component->getTableRowUrl($row) }}', '{{ $component->getTableRowUrlTarget($row) ?? '_self' }}')"
|
||||
@endif
|
||||
|
||||
{{
|
||||
$attributes->merge($customAttributes)
|
||||
->class(['px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $customAttributes['default'] ?? true])
|
||||
->class(['hidden sm:table-cell' => $column && $column->shouldCollapseOnMobile()])
|
||||
->class(['hidden md:table-cell' => $column && $column->shouldCollapseOnTablet()])
|
||||
->except('default')
|
||||
}}
|
||||
>
|
||||
{{ $slot }}
|
||||
</td>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<td
|
||||
@if ($column->isClickable())
|
||||
onclick="window.open('{{ $component->getTableRowUrl($row) }}', '{{ $component->getTableRowUrlTarget($row) ?? '_self' }}')"
|
||||
style="cursor:pointer"
|
||||
@endif
|
||||
|
||||
{{
|
||||
$attributes->merge($customAttributes)
|
||||
->class(['' => $customAttributes['default'] ?? true])
|
||||
->class(['d-none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()])
|
||||
->class(['d-none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()])
|
||||
->except('default')
|
||||
}}
|
||||
>
|
||||
{{ $slot }}
|
||||
</td>
|
||||
@endif
|
||||
@@ -1,43 +0,0 @@
|
||||
@aware(['component'])
|
||||
@props(['row'])
|
||||
|
||||
@if ($component->bulkActionsAreEnabled() && $component->hasBulkActions())
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<x-livewire-tables::table.td.plain>
|
||||
<div class="inline-flex rounded-md shadow-sm">
|
||||
<input
|
||||
wire:model="selected"
|
||||
wire:loading.attr.delay="disabled"
|
||||
value="{{ $row->{$this->getPrimaryKey()} }}"
|
||||
type="checkbox"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600"
|
||||
/>
|
||||
</div>
|
||||
</x-livewire-tables::table.td.plain>
|
||||
@elseif ($theme === 'bootstrap-4')
|
||||
<x-livewire-tables::table.td.plain>
|
||||
<input
|
||||
wire:model="selected"
|
||||
wire:loading.attr.delay="disabled"
|
||||
value="{{ $row->{$this->getPrimaryKey()} }}"
|
||||
type="checkbox"
|
||||
/>
|
||||
</x-livewire-tables::table.td.plain>
|
||||
@elseif ($theme === 'bootstrap-5')
|
||||
<x-livewire-tables::table.td.plain>
|
||||
<div class="form-check">
|
||||
<input
|
||||
wire:model="selected"
|
||||
wire:loading.attr.delay="disabled"
|
||||
value="{{ $row->{$this->getPrimaryKey()} }}"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
/>
|
||||
</div>
|
||||
</x-livewire-tables::table.td.plain>
|
||||
@endif
|
||||
@endif
|
||||
@@ -1,24 +0,0 @@
|
||||
@aware(['component'])
|
||||
@props(['column' => null, 'customAttributes' => []])
|
||||
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<td {{ $attributes
|
||||
->merge($customAttributes)
|
||||
->class(['px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $customAttributes['default'] ?? true])
|
||||
->class(['hidden sm:table-cell' => $column && $column->shouldCollapseOnMobile()])
|
||||
->class(['hidden md:table-cell' => $column && $column->shouldCollapseOnTablet()])
|
||||
->except('default')
|
||||
}}>{{ $slot }}</td>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<td {{ $attributes
|
||||
->merge($customAttributes)
|
||||
->class(['' => $customAttributes['default'] ?? true])
|
||||
->class(['d-none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()])
|
||||
->class(['d-none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()])
|
||||
->except('default')
|
||||
}}>{{ $slot }}</td>
|
||||
@endif
|
||||
@@ -1,21 +0,0 @@
|
||||
@aware(['component'])
|
||||
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($this->currentlyReorderingIsEnabled())
|
||||
@if ($theme === 'tailwind')
|
||||
<x-livewire-tables::table.td.plain wire:sortable.handle>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="inline w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</x-livewire-tables::table.td.plain>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<x-livewire-tables::table.td.plain wire:sortable.handle>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-inline" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</x-livewire-tables::table.td.plain>
|
||||
@endif
|
||||
@endif
|
||||
@@ -1,67 +0,0 @@
|
||||
@aware(['component'])
|
||||
@props(['rowIndex', 'hidden' => false])
|
||||
|
||||
@if ($component->collapsingColumnsAreEnabled() && $component->hasCollapsedColumns())
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<td
|
||||
@if (! $hidden) x-data="{open:false}" @endif
|
||||
{{
|
||||
$attributes
|
||||
->merge(['class' => 'p-3 table-cell text-center'])
|
||||
->class([
|
||||
'md:hidden' =>
|
||||
(($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
|
||||
($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
|
||||
])
|
||||
->class(['sm:hidden' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
|
||||
}}
|
||||
>
|
||||
@if (! $hidden)
|
||||
<button
|
||||
x-on:click.prevent="$dispatch('toggle-row-content', {'row': {{ $rowIndex }}});open = !open"
|
||||
>
|
||||
<svg x-show="!open" xmlns="http://www.w3.org/2000/svg" class="text-green-600 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
|
||||
<svg x-cloak x-show="open" xmlns="http://www.w3.org/2000/svg" class="text-yellow-600 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
</td>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<td
|
||||
@if (! $hidden) x-data="{open:false}" @endif
|
||||
{{
|
||||
$attributes
|
||||
->class([
|
||||
'd-md-none' =>
|
||||
(($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
|
||||
($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
|
||||
])
|
||||
->class(['d-sm-none' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
|
||||
}}
|
||||
>
|
||||
@if (! $hidden)
|
||||
<button
|
||||
x-on:click.prevent="$dispatch('toggle-row-content', {'row': {{ $rowIndex }}});open = !open"
|
||||
class="p-0"
|
||||
style="background:none;border:none;"
|
||||
>
|
||||
<svg x-show="!open" xmlns="http://www.w3.org/2000/svg" class="text-success" style="width:1.4em;height:1.4em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
|
||||
<svg x-cloak x-show="open" xmlns="http://www.w3.org/2000/svg" class="text-warning" style="width:1.4em;height:1.4em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
</td>
|
||||
@endif
|
||||
@endif
|
||||
@@ -1,95 +0,0 @@
|
||||
@aware(['component'])
|
||||
@props(['column', 'index'])
|
||||
|
||||
@php
|
||||
$attributes = $attributes->merge(['wire:key' => 'header-col-'.$index.'-'.$component->id]);
|
||||
$theme = $component->getTheme();
|
||||
$customAttributes = $component->getThAttributes($column);
|
||||
$customSortButtonAttributes = $component->getThSortButtonAttributes($column);
|
||||
$direction = $column->hasField() ? $component->getSort($column->getColumnSelectName()) : null;
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<th scope="col" {{
|
||||
$attributes->merge($customAttributes)
|
||||
->class(['px-6 py-3 text-left text-xs font-medium whitespace-nowrap text-gray-500 uppercase tracking-wider dark:bg-gray-800 dark:text-gray-400' => $customAttributes['default'] ?? true])
|
||||
->class(['hidden sm:table-cell' => $column->shouldCollapseOnMobile()])
|
||||
->class(['hidden md:table-cell' => $column->shouldCollapseOnTablet()])
|
||||
->except('default')
|
||||
}}>
|
||||
@unless ($component->sortingIsEnabled() && $column->isSortable())
|
||||
{{ $column->getTitle() }}
|
||||
@else
|
||||
<button
|
||||
wire:click="sortBy('{{ $column->getColumnSelectName() }}')"
|
||||
{{
|
||||
$attributes->merge($customSortButtonAttributes)
|
||||
->class(['flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none dark:text-gray-400' => $customSortButtonAttributes['default'] ?? true])
|
||||
->except(['default', 'wire:key'])
|
||||
}}
|
||||
>
|
||||
<span>{{ $column->getTitle() }}</span>
|
||||
|
||||
<span class="relative flex items-center">
|
||||
@if ($direction === 'asc')
|
||||
<svg class="w-3 h-3 group-hover:opacity-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
|
||||
</svg>
|
||||
|
||||
<svg class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
@elseif ($direction === 'desc')
|
||||
<svg class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
|
||||
<svg class="w-3 h-3 group-hover:opacity-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
|
||||
</svg>
|
||||
@endif
|
||||
</span>
|
||||
</button>
|
||||
@endunless
|
||||
</th>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<th scope="col" {{
|
||||
$attributes->merge($customAttributes)
|
||||
->class(['' => $customAttributes['default'] ?? true])
|
||||
->class(['d-none d-sm-table-cell' => $column->shouldCollapseOnMobile()])
|
||||
->class(['d-none d-md-table-cell' => $column->shouldCollapseOnTablet()])
|
||||
->except('default')
|
||||
}}>
|
||||
@unless ($component->sortingIsEnabled() && $column->isSortable())
|
||||
{{ $column->getTitle() }}
|
||||
@else
|
||||
<div
|
||||
class="d-flex align-items-center"
|
||||
wire:click="sortBy('{{ $column->getColumnSelectName() }}')"
|
||||
style="cursor:pointer;"
|
||||
>
|
||||
<span>{{ $column->getTitle() }}</span>
|
||||
|
||||
<span class="relative d-flex align-items-center">
|
||||
@if ($direction === 'asc')
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
@elseif ($direction === 'desc')
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
@else
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
|
||||
</svg>
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
@endunless
|
||||
</th>
|
||||
@endif
|
||||
@@ -1,36 +0,0 @@
|
||||
@aware(['component'])
|
||||
|
||||
@if ($component->bulkActionsAreEnabled() && $component->hasBulkActions())
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<x-livewire-tables::table.th.plain>
|
||||
<div class="inline-flex rounded-md shadow-sm">
|
||||
<input
|
||||
wire:model="selectAll"
|
||||
type="checkbox"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600"
|
||||
/>
|
||||
</div>
|
||||
</x-livewire-tables::table.th.plain>
|
||||
@elseif ($theme === 'bootstrap-4')
|
||||
<x-livewire-tables::table.th.plain>
|
||||
<input
|
||||
wire:model="selectAll"
|
||||
type="checkbox"
|
||||
/>
|
||||
</x-livewire-tables::table.th.plain>
|
||||
@elseif ($theme === 'bootstrap-5')
|
||||
<x-livewire-tables::table.th.plain>
|
||||
<div class="form-check">
|
||||
<input
|
||||
wire:model="selectAll"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
/>
|
||||
</div>
|
||||
</x-livewire-tables::table.th.plain>
|
||||
@endif
|
||||
@endif
|
||||
@@ -1,11 +0,0 @@
|
||||
@aware(['component'])
|
||||
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<th scope="col" {{ $attributes->merge(['class' => 'table-cell px-3 py-2 md:px-6 md:py-3 text-center md:text-left bg-gray-50 dark:bg-gray-800']) }}>{{ $slot }}</th>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<th scope="col">{{ $slot }}</th>
|
||||
@endif
|
||||
@@ -1,5 +0,0 @@
|
||||
@aware(['component'])
|
||||
|
||||
@if ($this->currentlyReorderingIsEnabled())
|
||||
<x-livewire-tables::table.th.plain />
|
||||
@endif
|
||||
@@ -1,37 +0,0 @@
|
||||
@aware(['component'])
|
||||
|
||||
@if ($component->collapsingColumnsAreEnabled() && $component->hasCollapsedColumns())
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<th
|
||||
scope="col"
|
||||
{{
|
||||
$attributes
|
||||
->merge(['class' => 'table-cell dark:bg-gray-800'])
|
||||
->class([
|
||||
'md:hidden' =>
|
||||
(($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
|
||||
($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
|
||||
])
|
||||
->class(['sm:hidden' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
|
||||
}}
|
||||
></th>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<th
|
||||
scope="col"
|
||||
{{
|
||||
$attributes
|
||||
->merge(['class' => 'd-table-cell'])
|
||||
->class([
|
||||
'd-md-none' =>
|
||||
(($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
|
||||
($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
|
||||
])
|
||||
->class(['d-sm-none' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
|
||||
}}
|
||||
></th>
|
||||
@endif
|
||||
@endif
|
||||
@@ -1,45 +0,0 @@
|
||||
@aware(['component'])
|
||||
@props(['row', 'rowIndex'])
|
||||
|
||||
@php
|
||||
$attributes = $attributes->merge(['wire:key' => 'row-'.$rowIndex.'-'.$component->id]);
|
||||
$theme = $component->getTheme();
|
||||
$customAttributes = $this->getTrAttributes($row, $rowIndex);
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<tr
|
||||
wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
|
||||
|
||||
@if ($component->reorderIsEnabled() && $component->currentlyReorderingIsEnabled())
|
||||
wire:sortable.item="{{ $row->getKey() }}"
|
||||
@endif
|
||||
|
||||
{{
|
||||
$attributes->merge($customAttributes)
|
||||
->class(['bg-white dark:bg-gray-700 dark:text-white' => ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0])
|
||||
->class(['bg-gray-50 dark:bg-gray-800 dark:text-white' => ($customAttributes['default'] ?? true) && $rowIndex % 2 !== 0])
|
||||
->class(['cursor-pointer' => $component->hasTableRowUrl()])
|
||||
->except('default')
|
||||
}}
|
||||
>
|
||||
{{ $slot }}
|
||||
</tr>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<tr
|
||||
wire:loading.class.delay=""
|
||||
|
||||
@if ($component->reorderIsEnabled() && $component->currentlyReorderingIsEnabled())
|
||||
wire:sortable.item="{{ $row->getKey() }}"
|
||||
@endif
|
||||
|
||||
{{
|
||||
$attributes->merge($customAttributes)
|
||||
->class(['' => ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0])
|
||||
->class(['' => ($customAttributes['default'] ?? true) && $rowIndex % 2 !== 0])
|
||||
->except('default')
|
||||
}}
|
||||
>
|
||||
{{ $slot }}
|
||||
</tr>
|
||||
@endif
|
||||
@@ -1,119 +0,0 @@
|
||||
@aware(['component'])
|
||||
@props(['rows'])
|
||||
|
||||
@if ($component->bulkActionsAreEnabled() && $component->hasBulkActions() && $component->hasSelected())
|
||||
@php
|
||||
$table = $component->getTableName();
|
||||
$theme = $component->getTheme();
|
||||
$colspan = $component->getColspanCount();
|
||||
$selected = $component->getSelectedCount();
|
||||
$selectAll = $component->selectAllIsEnabled();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<x-livewire-tables::table.tr.plain
|
||||
wire:key="bulk-select-message-{{ $table }}"
|
||||
class="bg-indigo-50 dark:bg-gray-900 dark:text-white"
|
||||
>
|
||||
<x-livewire-tables::table.td.plain :colspan="$colspan">
|
||||
@if ($selectAll)
|
||||
<div wire:key="all-selected-{{ $table }}">
|
||||
<span>
|
||||
@lang('You are currently selecting all')
|
||||
<strong>{{ number_format($rows->total()) }}</strong>
|
||||
@lang('rows').
|
||||
</span>
|
||||
|
||||
<button
|
||||
wire:click="clearSelected"
|
||||
wire:loading.attr="disabled"
|
||||
type="button"
|
||||
class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
|
||||
>
|
||||
@lang('Deselect All')
|
||||
</button>
|
||||
</div>
|
||||
@else
|
||||
<div wire:key="some-selected-{{ $table }}">
|
||||
<span>
|
||||
@lang('You have selected')
|
||||
<strong>{{ $selected }}</strong>
|
||||
@lang('rows, do you want to select all')
|
||||
<strong>{{ number_format($rows->total()) }}</strong>?
|
||||
</span>
|
||||
|
||||
<button
|
||||
wire:click="setAllSelected"
|
||||
wire:loading.attr="disabled"
|
||||
type="button"
|
||||
class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
|
||||
>
|
||||
@lang('Select All')
|
||||
</button>
|
||||
|
||||
<button
|
||||
wire:click="clearSelected"
|
||||
wire:loading.attr="disabled"
|
||||
type="button"
|
||||
class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
|
||||
>
|
||||
@lang('Deselect All')
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
</x-livewire-tables::table.td.plain>
|
||||
</x-livewire-tables::table.tr.plain>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<x-livewire-tables::table.tr.plain
|
||||
wire:key="bulk-select-message-{{ $table }}"
|
||||
>
|
||||
<x-livewire-tables::table.td.plain :colspan="$colspan">
|
||||
@if ($selectAll)
|
||||
<div wire:key="all-selected-{{ $table }}">
|
||||
<span>
|
||||
@lang('You are currently selecting all')
|
||||
<strong>{{ number_format($rows->total()) }}</strong>
|
||||
@lang('rows').
|
||||
</span>
|
||||
|
||||
<button
|
||||
wire:click="clearSelected"
|
||||
wire:loading.attr="disabled"
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
>
|
||||
@lang('Deselect All')
|
||||
</button>
|
||||
</div>
|
||||
@else
|
||||
<div wire:key="some-selected-{{ $table }}">
|
||||
<span>
|
||||
@lang('You have selected')
|
||||
<strong>{{ $selected }}</strong>
|
||||
@lang('rows, do you want to select all')
|
||||
<strong>{{ number_format($rows->total()) }}</strong>?
|
||||
</span>
|
||||
|
||||
<button
|
||||
wire:click="setAllSelected"
|
||||
wire:loading.attr="disabled"
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
>
|
||||
@lang('Select All')
|
||||
</button>
|
||||
|
||||
<button
|
||||
wire:click="clearSelected"
|
||||
wire:loading.attr="disabled"
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
>
|
||||
@lang('Deselect All')
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
</x-livewire-tables::table.td.plain>
|
||||
</x-livewire-tables::table.tr.plain>
|
||||
@endif
|
||||
@endif
|
||||
@@ -1,30 +0,0 @@
|
||||
@aware(['component'])
|
||||
@props(['rows'])
|
||||
|
||||
|
||||
<x-livewire-tables::table.tr.plain
|
||||
:customAttributes="$this->getFooterTrAttributes($rows)"
|
||||
wire:key="footer-{{ $this->getTableName() }}"
|
||||
>
|
||||
@if ($this->currentlyReorderingIsEnabled())
|
||||
<x-livewire-tables::table.td.plain />
|
||||
@endif
|
||||
|
||||
@if ($this->bulkActionsAreEnabled() && $this->hasBulkActions())
|
||||
<x-livewire-tables::table.td.plain />
|
||||
@endif
|
||||
|
||||
@if ($this->collapsingColumnsAreEnabled() && $this->hasCollapsedColumns())
|
||||
<x-livewire-tables::table.td.row-contents rowIndex="-1" :hidden="true" />
|
||||
@endif
|
||||
|
||||
@foreach($this->getColumns() as $colIndex => $column)
|
||||
@continue($column->isHidden())
|
||||
@continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
|
||||
@continue($this->currentlyReorderingIsDisabled() && $column->isReorderColumn() && $this->hideReorderColumnUnlessReorderingIsEnabled())
|
||||
|
||||
<x-livewire-tables::table.td.plain :column="$column" :customAttributes="$this->getFooterTdAttributes($column, $rows, $colIndex)">
|
||||
{{ $column->getFooterContents($rows) }}
|
||||
</x-livewire-tables::table.td.plain>
|
||||
@endforeach
|
||||
</x-livewire-tables::table.tr.plain>
|
||||
@@ -1,24 +0,0 @@
|
||||
@aware(['component'])
|
||||
@props(['customAttributes' => []])
|
||||
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<tr {{ $attributes
|
||||
->merge($customAttributes)
|
||||
->class(['bg-white dark:bg-gray-700 dark:text-white' => $customAttributes['default'] ?? true])
|
||||
->except('default')
|
||||
}}>
|
||||
{{ $slot }}
|
||||
</tr>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<tr {{ $attributes
|
||||
->merge($customAttributes)
|
||||
->class(['' => $customAttributes['default'] ?? true])
|
||||
->except('default')
|
||||
}}>
|
||||
{{ $slot }}
|
||||
</tr>
|
||||
@endif
|
||||
@@ -1,30 +0,0 @@
|
||||
@aware(['component'])
|
||||
@props(['rows'])
|
||||
|
||||
|
||||
<x-livewire-tables::table.tr.plain
|
||||
:customAttributes="$this->getSecondaryHeaderTrAttributes($rows)"
|
||||
wire:key="secondary-header-{{ $this->getTableName() }}"
|
||||
>
|
||||
@if ($this->currentlyReorderingIsEnabled())
|
||||
<x-livewire-tables::table.td.plain />
|
||||
@endif
|
||||
|
||||
@if ($this->bulkActionsAreEnabled() && $this->hasBulkActions())
|
||||
<x-livewire-tables::table.td.plain />
|
||||
@endif
|
||||
|
||||
@if ($this->collapsingColumnsAreEnabled() && $this->hasCollapsedColumns())
|
||||
<x-livewire-tables::table.td.row-contents rowIndex="-1" :hidden="true" />
|
||||
@endif
|
||||
|
||||
@foreach($this->getColumns() as $colIndex => $column)
|
||||
@continue($column->isHidden())
|
||||
@continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
|
||||
@continue($this->currentlyReorderingIsDisabled() && $column->isReorderColumn() && $this->hideReorderColumnUnlessReorderingIsEnabled())
|
||||
|
||||
<x-livewire-tables::table.td.plain :column="$column" :customAttributes="$this->getSecondaryHeaderTdAttributes($column, $rows, $colIndex)">
|
||||
{{ $column->getSecondaryHeaderContents($rows) }}
|
||||
</x-livewire-tables::table.td.plain>
|
||||
@endforeach
|
||||
</x-livewire-tables::table.tr.plain>
|
||||
@@ -1,15 +0,0 @@
|
||||
@aware(['component'])
|
||||
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div class="flex-col">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<div class="d-flex flex-column">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
@endif
|
||||
@@ -1,137 +0,0 @@
|
||||
@aware(['component'])
|
||||
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div>
|
||||
@if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedVisibleFiltersForPills())
|
||||
<div class="mb-4 px-4 md:p-0">
|
||||
<small class="text-gray-700 dark:text-white">@lang('Applied Filters'):</small>
|
||||
|
||||
@foreach($component->getAppliedFiltersWithValues() as $filterSelectName => $value)
|
||||
@php
|
||||
$filter = $component->getFilterByKey($filterSelectName);
|
||||
@endphp
|
||||
|
||||
@continue(is_null($filter))
|
||||
@continue($filter->isHiddenFromPills())
|
||||
|
||||
<span
|
||||
wire:key="{{ $component->getTableName() }}-filter-pill-{{ $filter->getKey() }}"
|
||||
class="max-w-2xl truncate inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-indigo-100 text-indigo-800 capitalize dark:bg-indigo-200 dark:text-indigo-900"
|
||||
>
|
||||
{{ $filter->getFilterPillTitle() }}: {{ $filter->getFilterPillValue($value) }}
|
||||
|
||||
<button
|
||||
wire:click="resetFilter('{{ $filter->getKey() }}')"
|
||||
type="button"
|
||||
class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
|
||||
>
|
||||
<span class="sr-only">@lang('Remove filter option')</span>
|
||||
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
|
||||
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
@endforeach
|
||||
|
||||
<button
|
||||
wire:click.prevent="setFilterDefaults"
|
||||
class="focus:outline-none active:outline-none"
|
||||
>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900">
|
||||
@lang('Clear')
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4')
|
||||
<div>
|
||||
@if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedVisibleFiltersForPills())
|
||||
<div class="mb-3">
|
||||
<small>@lang('Applied Filters'):</small>
|
||||
|
||||
@foreach($component->getAppliedFiltersWithValues() as $filterSelectName => $value)
|
||||
@php
|
||||
$filter = $component->getFilterByKey($filterSelectName);
|
||||
@endphp
|
||||
|
||||
@continue(is_null($filter))
|
||||
@continue($filter->isHiddenFromPills())
|
||||
|
||||
<span
|
||||
wire:key="{{ $component->getTableName() }}-filter-pill-{{ $filter->getKey() }}"
|
||||
class="badge badge-pill badge-info d-inline-flex align-items-center"
|
||||
>
|
||||
{{ $filter->getFilterPillTitle() }}: {{ $filter->getFilterPillValue($value) }}
|
||||
|
||||
<a
|
||||
href="#"
|
||||
wire:click="resetFilter('{{ $filter->getKey() }}')"
|
||||
class="text-white ml-2"
|
||||
>
|
||||
<span class="sr-only">@lang('Remove filter option')</span>
|
||||
<svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
|
||||
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
@endforeach
|
||||
|
||||
<a
|
||||
href="#"
|
||||
wire:click.prevent="setFilterDefaults"
|
||||
class="badge badge-pill badge-light"
|
||||
>
|
||||
@lang('Clear')
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-5')
|
||||
<div>
|
||||
@if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedVisibleFiltersForPills())
|
||||
<div class="mb-3">
|
||||
<small>@lang('Applied Filters'):</small>
|
||||
|
||||
@foreach($component->getAppliedFiltersWithValues() as $filterSelectName => $value)
|
||||
@php
|
||||
$filter = $component->getFilterByKey($filterSelectName);
|
||||
@endphp
|
||||
|
||||
@continue(is_null($filter))
|
||||
@continue($filter->isHiddenFromPills())
|
||||
|
||||
<span
|
||||
wire:key="{{ $component->getTableName() }}-filter-pill-{{ $filter->getKey() }}"
|
||||
class="badge rounded-pill bg-info d-inline-flex align-items-center"
|
||||
>
|
||||
{{ $filter->getFilterPillTitle() }}: {{ $filter->getFilterPillValue($value) }}
|
||||
|
||||
<a
|
||||
href="#"
|
||||
wire:click="resetFilter('{{ $filter->getKey() }}')"
|
||||
class="text-white ms-2"
|
||||
>
|
||||
<span class="visually-hidden">@lang('Remove filter option')</span>
|
||||
<svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
|
||||
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
@endforeach
|
||||
|
||||
<a
|
||||
href="#"
|
||||
wire:click.prevent="setFilterDefaults"
|
||||
class="badge rounded-pill bg-light text-dark text-decoration-none"
|
||||
>
|
||||
@lang('Clear')
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
@@ -1,29 +0,0 @@
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div class="rounded-md shadow-sm">
|
||||
<input
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
type="date"
|
||||
@if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
|
||||
@if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
|
||||
class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
|
||||
/>
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<div class="mb-3 mb-md-0 input-group">
|
||||
<input
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
type="date"
|
||||
@if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
|
||||
@if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
@endif
|
||||
@@ -1,29 +0,0 @@
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div class="rounded-md shadow-sm">
|
||||
<input
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
type="datetime-local"
|
||||
@if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
|
||||
@if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
|
||||
class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
|
||||
/>
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<div class="mb-3 mb-md-0 input-group">
|
||||
<input
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
type="datetime-local"
|
||||
@if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
|
||||
@if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
@endif
|
||||
@@ -1,60 +0,0 @@
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div class="rounded-md">
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-select-all"
|
||||
wire:input="selectAllFilterOptions('{{ $filter->getKey() }}')"
|
||||
{{ count($component->getAppliedFilterWithValue($filter->getKey()) ?? []) === count($filter->getOptions()) ? 'checked' : ''}}
|
||||
|
||||
class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
|
||||
>
|
||||
<label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-select-all" class="dark:text-white">@lang('All')</label>
|
||||
</div>
|
||||
|
||||
@foreach($filter->getOptions() as $key => $value)
|
||||
<div wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-multiselect-{{ $key }}">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}"
|
||||
value="{{ $key }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}"
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
{{ count($component->getAppliedFilterWithValue($filter->getKey()) ?? []) === count($filter->getOptions()) ? 'disabled' : ''}}
|
||||
:class="{'disabled:bg-gray-400 disabled:hover:bg-gray-400' : {{ count($component->getAppliedFilterWithValue($filter->getKey()) ?? []) === count($filter->getOptions()) ? 'true' : 'false' }}}"
|
||||
class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
|
||||
>
|
||||
<label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}" class="dark:text-white">{{ $value }}</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-select-all"
|
||||
wire:input="selectAllFilterOptions('{{ $filter->getKey() }}')"
|
||||
{{ count($component->getAppliedFilterWithValue($filter->getKey()) ?? []) === count($filter->getOptions()) ? 'checked' : ''}}
|
||||
class="form-check-input"
|
||||
>
|
||||
<label class="form-check-label" for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-select-all">@lang('All')</label>
|
||||
</div>
|
||||
|
||||
@foreach($filter->getOptions() as $key => $value)
|
||||
<div class="form-check" wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-multiselect-{{ $key }}">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}"
|
||||
value="{{ $key }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}"
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
>
|
||||
<label class="form-check-label" for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}">{{ $value }}</label>
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
@@ -1,29 +0,0 @@
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div class="rounded-md shadow-sm">
|
||||
<input
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
type="number"
|
||||
@if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
|
||||
@if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
|
||||
class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
|
||||
/>
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<div class="mb-3 mb-md-0 input-group">
|
||||
<input
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
type="number"
|
||||
@if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
|
||||
@if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
@endif
|
||||
@@ -1,45 +0,0 @@
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div class="rounded-md shadow-sm">
|
||||
<select
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
|
||||
>
|
||||
@foreach($filter->getOptions() as $key => $value)
|
||||
@if (is_iterable($value))
|
||||
<optgroup label="{{ $key }}">
|
||||
@foreach ($value as $optionKey => $optionValue)
|
||||
<option value="{{ $optionKey }}">{{ $optionValue }}</option>
|
||||
@endforeach
|
||||
</optgroup>
|
||||
@else
|
||||
<option value="{{ $key }}">{{ $value }}</option>
|
||||
@endif
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<select
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
class="{{ $theme === 'bootstrap-4' ? 'form-control' : 'form-select' }}"
|
||||
>
|
||||
@foreach($filter->getOptions() as $key => $value)
|
||||
@if (is_iterable($value))
|
||||
<optgroup label="{{ $key }}">
|
||||
@foreach ($value as $optionKey => $optionValue)
|
||||
<option value="{{ $optionKey }}">{{ $optionValue }}</option>
|
||||
@endforeach
|
||||
</optgroup>
|
||||
@else
|
||||
<option value="{{ $key }}">{{ $value }}</option>
|
||||
@endif
|
||||
@endforeach
|
||||
</select>
|
||||
@endif
|
||||
@@ -1,29 +0,0 @@
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div class="rounded-md shadow-sm">
|
||||
<input
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
type="text"
|
||||
@if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
|
||||
@if($filter->hasConfig('maxlength')) maxlength="{{ $filter->getConfig('maxlength') }}" @endif
|
||||
class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
|
||||
/>
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<div class="mb-3 mb-md-0 input-group">
|
||||
<input
|
||||
wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
|
||||
wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
type="text"
|
||||
@if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
|
||||
@if($filter->hasConfig('maxlength')) maxlength="{{ $filter->getConfig('maxlength') }}" @endif
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
@endif
|
||||
@@ -1,140 +0,0 @@
|
||||
@aware(['component'])
|
||||
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div>
|
||||
@if ($component->sortingPillsAreEnabled() && $component->hasSorts())
|
||||
<div class="mb-4 px-4 md:p-0">
|
||||
<small class="text-gray-700 dark:text-white">@lang('Applied Sorting'):</small>
|
||||
|
||||
@foreach($component->getSorts() as $columnSelectName => $direction)
|
||||
@php
|
||||
$column = $component->getColumnBySelectName($columnSelectName);
|
||||
@endphp
|
||||
|
||||
@continue(is_null($column))
|
||||
@continue($column->isHidden())
|
||||
@continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
|
||||
|
||||
<span
|
||||
wire:key="sorting-pill-{{ $columnSelectName }}"
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-indigo-100 text-indigo-800 capitalize dark:bg-indigo-200 dark:text-indigo-900"
|
||||
>
|
||||
{{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirection($component, $direction) }}
|
||||
|
||||
<button
|
||||
wire:click="clearSort('{{ $columnSelectName }}')"
|
||||
type="button"
|
||||
class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
|
||||
>
|
||||
<span class="sr-only">@lang('Remove sort option')</span>
|
||||
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
|
||||
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
@endforeach
|
||||
|
||||
<button
|
||||
wire:click.prevent="clearSorts"
|
||||
class="focus:outline-none active:outline-none"
|
||||
>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900">
|
||||
@lang('Clear')
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4')
|
||||
<div>
|
||||
@if ($component->sortingPillsAreEnabled() && $component->hasSorts())
|
||||
<div class="mb-3">
|
||||
<small>@lang('Applied Sorting'):</small>
|
||||
|
||||
@foreach($component->getSorts() as $columnSelectName => $direction)
|
||||
@php
|
||||
$column = $component->getColumnBySelectName($columnSelectName);
|
||||
@endphp
|
||||
|
||||
@continue(is_null($column))
|
||||
@continue($column->isHidden())
|
||||
@continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
|
||||
|
||||
<span
|
||||
wire:key="sorting-pill-{{ $columnSelectName }}"
|
||||
class="badge badge-pill badge-info d-inline-flex align-items-center"
|
||||
>
|
||||
{{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirection($component, $direction) }}
|
||||
|
||||
<a
|
||||
href="#"
|
||||
wire:click="clearSort('{{ $columnSelectName }}')"
|
||||
class="text-white ml-2"
|
||||
>
|
||||
<span class="sr-only">@lang('Remove sort option')</span>
|
||||
<svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
|
||||
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
@endforeach
|
||||
|
||||
<a
|
||||
href="#"
|
||||
wire:click.prevent="clearSorts"
|
||||
class="badge badge-pill badge-light"
|
||||
>
|
||||
@lang('Clear')
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-5')
|
||||
<div>
|
||||
@if ($component->sortingPillsAreEnabled() && $component->hasSorts())
|
||||
<div class="mb-3">
|
||||
<small>@lang('Applied Sorting'):</small>
|
||||
|
||||
@foreach($component->getSorts() as $columnSelectName => $direction)
|
||||
@php
|
||||
$column = $component->getColumnBySelectName($columnSelectName);
|
||||
@endphp
|
||||
|
||||
@continue(is_null($column))
|
||||
@continue($column->isHidden())
|
||||
@continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
|
||||
|
||||
<span
|
||||
wire:key="sorting-pill-{{ $columnSelectName }}"
|
||||
class="badge rounded-pill bg-info d-inline-flex align-items-center"
|
||||
>
|
||||
{{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirection($component, $direction) }}
|
||||
|
||||
<a
|
||||
href="#"
|
||||
wire:click="clearSort('{{ $columnSelectName }}')"
|
||||
class="text-white ms-2"
|
||||
>
|
||||
<span class="visually-hidden">@lang('Remove sort option')</span>
|
||||
<svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
|
||||
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
@endforeach
|
||||
|
||||
<a
|
||||
href="#"
|
||||
wire:click.prevent="clearSorts"
|
||||
class="badge rounded-pill bg-light text-dark text-decoration-none"
|
||||
>
|
||||
@lang('Clear')
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
@@ -1,878 +0,0 @@
|
||||
@aware(['component'])
|
||||
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($component->hasConfigurableAreaFor('before-toolbar'))
|
||||
@include($component->getConfigurableAreaFor('before-toolbar'), $component->getParametersForConfigurableArea('before-toolbar'))
|
||||
@endif
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
<div class="md:flex md:justify-between mb-4 px-4 md:p-0">
|
||||
<div class="w-full mb-4 md:mb-0 md:w-2/4 md:flex space-y-4 md:space-y-0 md:space-x-2">
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-left-start'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-left-start'), $component->getParametersForConfigurableArea('toolbar-left-start'))
|
||||
@endif
|
||||
|
||||
@if ($component->reorderIsEnabled())
|
||||
<button
|
||||
wire:click="{{ $component->currentlyReorderingIsEnabled() ? 'disableReordering' : 'enableReordering' }}"
|
||||
type="button"
|
||||
class="inline-flex justify-center items-center w-full md:w-auto px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
>
|
||||
@if ($component->currentlyReorderingIsEnabled())
|
||||
@lang('Done Reordering')
|
||||
@else
|
||||
@lang('Reorder')
|
||||
@endif
|
||||
</button>
|
||||
@endif
|
||||
|
||||
@if ($component->searchIsEnabled() && $component->searchVisibilityIsEnabled())
|
||||
<div class="flex rounded-md shadow-sm">
|
||||
<input
|
||||
wire:model{{ $component->getSearchOptions() }}="{{ $component->getTableName() }}.search"
|
||||
placeholder="{{ __('Search') }}"
|
||||
type="text"
|
||||
class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 dark:bg-gray-700 dark:text-white dark:border-gray-600 @if ($component->hasSearch()) rounded-none rounded-l-md focus:ring-0 focus:border-gray-300 @else focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md @endif"
|
||||
/>
|
||||
|
||||
@if ($component->hasSearch())
|
||||
<span wire:click.prevent="clearSearch" class="inline-flex items-center px-3 text-gray-500 bg-gray-50 rounded-r-md border border-l-0 border-gray-300 cursor-pointer sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters())
|
||||
<div
|
||||
@if ($component->isFilterLayoutPopover())
|
||||
x-data="{ open: false }"
|
||||
x-on:keydown.escape.stop="open = false"
|
||||
x-on:mousedown.away="open = false"
|
||||
@endif
|
||||
|
||||
class="relative block md:inline-block text-left"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
|
||||
@if ($component->isFilterLayoutPopover())
|
||||
x-on:click="open = !open"
|
||||
aria-haspopup="true"
|
||||
x-bind:aria-expanded="open"
|
||||
aria-expanded="true"
|
||||
@endif
|
||||
|
||||
@if ($component->isFilterLayoutSlideDown())
|
||||
x-on:click="filtersOpen = !filtersOpen"
|
||||
@endif
|
||||
>
|
||||
@lang('Filters')
|
||||
|
||||
@if ($count = $component->getFilterBadgeCount())
|
||||
<span class="ml-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-indigo-100 text-indigo-800 capitalize dark:bg-indigo-200 dark:text-indigo-900">
|
||||
{{ $count }}
|
||||
</span>
|
||||
@endif
|
||||
|
||||
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if ($component->isFilterLayoutPopover())
|
||||
<div
|
||||
x-cloak
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
x-transition:enter-end="transform opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="origin-top-left absolute left-0 mt-2 w-full md:w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50 dark:bg-gray-700 dark:text-white dark:divide-gray-600"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="filters-menu"
|
||||
>
|
||||
@foreach($component->getFilters() as $filter)
|
||||
@if($filter->isVisibleInMenus())
|
||||
<div class="py-1" role="none">
|
||||
<div class="block px-4 py-2 text-sm text-gray-700 space-y-1" role="menuitem">
|
||||
<label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
class="block text-sm font-medium leading-5 text-gray-700 dark:text-white">
|
||||
{{ $filter->getName() }}
|
||||
</label>
|
||||
|
||||
{{ $filter->render($component) }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
@if ($component->hasAppliedVisibleFiltersWithValuesThatCanBeCleared())
|
||||
<div class="block px-4 py-3 text-sm text-gray-700 dark:text-white" role="menuitem">
|
||||
<button
|
||||
wire:click.prevent="setFilterDefaults"
|
||||
x-on:click="open = false"
|
||||
type="button"
|
||||
class="w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:hover:border-gray-500"
|
||||
>
|
||||
@lang('Clear')
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-left-end'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-left-end'), $component->getParametersForConfigurableArea('toolbar-left-end'))
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="md:flex md:items-center space-y-4 md:space-y-0 md:space-x-2">
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-right-start'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-right-start'), $component->getParametersForConfigurableArea('toolbar-right-start'))
|
||||
@endif
|
||||
|
||||
@if ($component->showBulkActionsDropdown())
|
||||
<div class="w-full md:w-auto mb-4 md:mb-0">
|
||||
<div
|
||||
x-data="{ open: false }"
|
||||
@keydown.window.escape="open = false"
|
||||
x-on:click.away="open = false"
|
||||
class="relative inline-block text-left z-10 w-full md:w-auto"
|
||||
>
|
||||
<div>
|
||||
<span class="rounded-md shadow-sm">
|
||||
<button
|
||||
x-on:click="open = !open"
|
||||
type="button"
|
||||
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
aria-haspopup="true"
|
||||
x-bind:aria-expanded="open"
|
||||
aria-expanded="true"
|
||||
>
|
||||
@lang('Bulk Actions')
|
||||
|
||||
<svg class="-mr-1 ml-2 h-5 w-5" x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
x-cloak
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
x-transition:enter-end="transform opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="origin-top-right absolute right-0 mt-2 w-full md:w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50"
|
||||
>
|
||||
<div class="rounded-md bg-white shadow-xs dark:bg-gray-700 dark:text-white">
|
||||
<div class="py-1" role="menu" aria-orientation="vertical">
|
||||
@foreach($component->getBulkActions() as $action => $title)
|
||||
<button
|
||||
wire:click="{{ $action }}"
|
||||
wire:key="bulk-action-{{ $action }}-{{ $component->getTableName() }}"
|
||||
type="button"
|
||||
class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2 dark:text-white dark:hover:bg-gray-600"
|
||||
role="menuitem"
|
||||
>
|
||||
<span>{{ $title }}</span>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->columnSelectIsEnabled())
|
||||
<div class="mb-4 w-full md:w-auto md:mb-0 md:ml-2">
|
||||
<div
|
||||
x-data="{ open: false }"
|
||||
@keydown.window.escape="open = false"
|
||||
x-on:click.away="open = false"
|
||||
class="inline-block relative w-full text-left md:w-auto"
|
||||
wire:key="column-select-button-{{ $component->getTableName() }}"
|
||||
>
|
||||
<div>
|
||||
<span class="rounded-md shadow-sm">
|
||||
<button
|
||||
x-on:click="open = !open"
|
||||
type="button"
|
||||
class="inline-flex justify-center px-4 py-2 w-full text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 shadow-sm hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
aria-haspopup="true"
|
||||
x-bind:aria-expanded="open"
|
||||
aria-expanded="true"
|
||||
>
|
||||
@lang('Columns')
|
||||
|
||||
<svg class="-mr-1 ml-2 w-5 h-5" x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
x-cloak
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
x-transition:enter-end="transform opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="absolute right-0 z-50 mt-2 w-full bg-white rounded-md divide-y divide-gray-100 ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right md:w-48 focus:outline-none"
|
||||
>
|
||||
<div class="bg-white rounded-md shadow-xs dark:bg-gray-700 dark:text-white">
|
||||
<div class="p-2" role="menu" aria-orientation="vertical" aria-labelledby="column-select-menu">
|
||||
<div>
|
||||
<label
|
||||
wire:loading.attr="disabled"
|
||||
class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
|
||||
>
|
||||
<input
|
||||
class="text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
|
||||
@if($component->allDefaultVisibleColumnsAreSelected())
|
||||
checked
|
||||
wire:click="deselectAllColumns"
|
||||
@else
|
||||
unchecked
|
||||
wire:click="selectAllColumns"
|
||||
@endif
|
||||
wire:loading.attr="disabled"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span class="ml-2">{{ __('All Columns') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
@foreach($component->getColumns() as $column)
|
||||
@if ($column->isVisible() && $column->isSelectable())
|
||||
<div wire:key="columnSelect-{{ $loop->index }}-{{ $component->getTableName() }}">
|
||||
<label
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="selectedColumns"
|
||||
class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
|
||||
>
|
||||
<input
|
||||
class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
|
||||
wire:model="selectedColumns"
|
||||
wire:target="selectedColumns"
|
||||
wire:loading.attr="disabled"
|
||||
type="checkbox"
|
||||
value="{{ $column->getSlug() }}"
|
||||
/>
|
||||
<span class="ml-2">{{ $column->getTitle() }}</span>
|
||||
</label>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->paginationIsEnabled() && $component->perPageVisibilityIsEnabled())
|
||||
<div>
|
||||
<select
|
||||
wire:model="perPage"
|
||||
id="perPage"
|
||||
class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600"
|
||||
>
|
||||
@foreach ($component->getPerPageAccepted() as $item)
|
||||
<option value="{{ $item }}" wire:key="per-page-{{ $item }}-{{ $component->getTableName() }}">{{ $item === -1 ? __('All') : $item }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-right-end'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-right-end'), $component->getParametersForConfigurableArea('toolbar-right-end'))
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters() && $component->isFilterLayoutSlideDown())
|
||||
<div
|
||||
x-cloak
|
||||
x-show="filtersOpen"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform opacity-0"
|
||||
x-transition:enter-end="transform opacity-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100"
|
||||
x-transition:leave-end="transform opacity-0"
|
||||
>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 px-4 md:p-0 mb-6">
|
||||
@foreach($component->getFilters() as $filter)
|
||||
@if($filter->isVisibleInMenus())
|
||||
<div class="space-y-1">
|
||||
<label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
class="block text-sm font-medium leading-5 text-gray-700 dark:text-white">
|
||||
{{ $filter->getName() }}
|
||||
</label>
|
||||
|
||||
{{ $filter->render($component) }}
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@elseif ($theme === 'bootstrap-4')
|
||||
<div class="d-md-flex justify-content-between mb-3">
|
||||
<div class="d-md-flex">
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-left-start'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-left-start'), $component->getParametersForConfigurableArea('toolbar-left-start'))
|
||||
@endif
|
||||
|
||||
@if ($component->reorderIsEnabled())
|
||||
<div class="mr-0 mr-md-2 mb-3 mb-md-0">
|
||||
<button
|
||||
wire:click="{{ $component->currentlyReorderingIsEnabled() ? 'disableReordering' : 'enableReordering' }}"
|
||||
type="button"
|
||||
class="btn btn-default d-block w-100 d-md-inline"
|
||||
>
|
||||
@if ($component->currentlyReorderingIsEnabled())
|
||||
@lang('Done Reordering')
|
||||
@else
|
||||
@lang('Reorder')
|
||||
@endif
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->searchIsEnabled() && $component->searchVisibilityIsEnabled())
|
||||
<div class="mb-3 mb-md-0 input-group">
|
||||
<input
|
||||
wire:model{{ $component->getSearchOptions() }}="{{ $component->getTableName() }}.search"
|
||||
placeholder="{{ __('Search') }}"
|
||||
type="text"
|
||||
class="form-control"
|
||||
>
|
||||
|
||||
@if ($component->hasSearch())
|
||||
<div class="input-group-append">
|
||||
<button wire:click.prevent="clearSearch" class="btn btn-outline-secondary" type="button">
|
||||
<svg style="width:.75em;height:.75em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters())
|
||||
<div class="ml-0 ml-md-2 mb-3 mb-md-0">
|
||||
<div
|
||||
@if ($component->isFilterLayoutPopover())
|
||||
x-data="{ open: false }"
|
||||
x-on:keydown.escape.stop="open = false"
|
||||
x-on:mousedown.away="open = false"
|
||||
@endif
|
||||
|
||||
class="btn-group d-block d-md-inline"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn dropdown-toggle d-block w-100 d-md-inline"
|
||||
|
||||
@if ($component->isFilterLayoutPopover())
|
||||
x-on:click="open = !open"
|
||||
aria-haspopup="true"
|
||||
x-bind:aria-expanded="open"
|
||||
aria-expanded="true"
|
||||
@endif
|
||||
|
||||
@if ($component->isFilterLayoutSlideDown())
|
||||
x-on:click="filtersOpen = !filtersOpen"
|
||||
@endif
|
||||
>
|
||||
@lang('Filters')
|
||||
|
||||
@if ($count = $component->getFilterBadgeCount())
|
||||
<span class="badge badge-info">
|
||||
{{ $count }}
|
||||
</span>
|
||||
@endif
|
||||
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if ($component->isFilterLayoutPopover())
|
||||
<ul
|
||||
x-cloak
|
||||
class="dropdown-menu w-100 mt-md-5"
|
||||
x-bind:class="{'show' : open}"
|
||||
role="menu"
|
||||
>
|
||||
@foreach($component->getFilters() as $filter)
|
||||
@if($filter->isVisibleInMenus())
|
||||
<div wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}" class="p-2">
|
||||
<label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}" class="mb-2">
|
||||
{{ $filter->getName() }}
|
||||
</label>
|
||||
|
||||
{{ $filter->render($component) }}
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
@if ($component->hasAppliedVisibleFiltersWithValuesThatCanBeCleared())
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<button
|
||||
wire:click.prevent="setFilterDefaults"
|
||||
x-on:click="open = false"
|
||||
class="dropdown-item btn text-center"
|
||||
>
|
||||
@lang('Clear')
|
||||
</button>
|
||||
@endif
|
||||
</ul>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-left-end'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-left-end'), $component->getParametersForConfigurableArea('toolbar-left-end'))
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex">
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-right-start'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-right-start'), $component->getParametersForConfigurableArea('toolbar-right-start'))
|
||||
@endif
|
||||
|
||||
@if ($component->showBulkActionsDropdown())
|
||||
<div class="mb-3 mb-md-0">
|
||||
<div class="dropdown d-block d-md-inline">
|
||||
<button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="{{ $component->getTableName() }}-bulkActionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
@lang('Bulk Actions')
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="{{ $component->getTableName() }}-bulkActionsDropdown">
|
||||
@foreach($component->getBulkActions() as $action => $title)
|
||||
<a
|
||||
href="#"
|
||||
wire:click="{{ $action }}"
|
||||
wire:key="bulk-action-{{ $action }}-{{ $component->getTableName() }}"
|
||||
class="dropdown-item"
|
||||
>
|
||||
{{ $title }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->columnSelectIsEnabled())
|
||||
<div class="mb-3 mb-md-0 pl-0 pl-md-2">
|
||||
<div
|
||||
x-data="{ open: false }"
|
||||
x-on:keydown.escape.stop="open = false"
|
||||
x-on:mousedown.away="open = false"
|
||||
class="dropdown d-block d-md-inline"
|
||||
wire:key="column-select-button-{{ $component->getTableName() }}"
|
||||
>
|
||||
<button
|
||||
x-on:click="open = !open"
|
||||
class="btn dropdown-toggle d-block w-100 d-md-inline"
|
||||
type="button"
|
||||
id="columnSelect-{{ $component->getTableName() }}"
|
||||
aria-haspopup="true"
|
||||
x-bind:aria-expanded="open"
|
||||
>
|
||||
@lang('Columns')
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="dropdown-menu dropdown-menu-right w-100 mt-0 mt-md-3"
|
||||
x-bind:class="{'show' : open}"
|
||||
aria-labelledby="columnSelect-{{ $component->getTableName() }}"
|
||||
>
|
||||
<div>
|
||||
<label
|
||||
wire:loading.attr="disabled"
|
||||
class="px-2 mb-1"
|
||||
>
|
||||
<input
|
||||
@if($component->allDefaultVisibleColumnsAreSelected())
|
||||
checked
|
||||
wire:click="deselectAllColumns"
|
||||
@else
|
||||
unchecked
|
||||
wire:click="selectAllColumns"
|
||||
@endif
|
||||
wire:loading.attr="disabled"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span class="ml-2">{{ __('All Columns') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
@foreach($component->getColumns() as $column)
|
||||
@if ($column->isVisible() && $column->isSelectable())
|
||||
<div wire:key="columnSelect-{{ $loop->index }}-{{ $component->getTableName() }}">
|
||||
<label
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="selectedColumns"
|
||||
class="px-2 {{ $loop->last ? 'mb-0' : 'mb-1' }}"
|
||||
>
|
||||
<input
|
||||
wire:model="selectedColumns"
|
||||
wire:target="selectedColumns"
|
||||
wire:loading.attr="disabled"
|
||||
type="checkbox"
|
||||
value="{{ $column->getSlug() }}"
|
||||
/>
|
||||
<span class="ml-2">{{ $column->getTitle() }}</span>
|
||||
</label>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->paginationIsEnabled() && $component->perPageVisibilityIsEnabled())
|
||||
<div class="ml-0 ml-md-2">
|
||||
<select
|
||||
wire:model="perPage"
|
||||
id="perPage"
|
||||
class="form-control"
|
||||
>
|
||||
@foreach ($component->getPerPageAccepted() as $item)
|
||||
<option value="{{ $item }}" wire:key="per-page-{{ $item }}-{{ $component->getTableName() }}">{{ $item === -1 ? __('All') : $item }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-right-end'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-right-end'), $component->getParametersForConfigurableArea('toolbar-right-end'))
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters() && $component->isFilterLayoutSlideDown())
|
||||
<div
|
||||
x-cloak
|
||||
x-show="filtersOpen"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@foreach($component->getFilters() as $filter)
|
||||
@if($filter->isVisibleInMenus())
|
||||
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
|
||||
<label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
class="d-block">
|
||||
{{ $filter->getName() }}
|
||||
</label>
|
||||
|
||||
{{ $filter->render($component) }}
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@elseif ($theme === 'bootstrap-5')
|
||||
<div class="d-md-flex justify-content-between mb-3">
|
||||
<div class="d-md-flex">
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-left-start'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-left-start'), $component->getParametersForConfigurableArea('toolbar-left-start'))
|
||||
@endif
|
||||
|
||||
@if ($component->reorderIsEnabled())
|
||||
<div class="me-0 me-md-2 mb-3 mb-md-0">
|
||||
<button
|
||||
wire:click="{{ $component->currentlyReorderingIsEnabled() ? 'disableReordering' : 'enableReordering' }}"
|
||||
type="button"
|
||||
class="btn btn-default d-block w-100 d-md-inline"
|
||||
>
|
||||
@if ($component->currentlyReorderingIsEnabled())
|
||||
@lang('Done Reordering')
|
||||
@else
|
||||
@lang('Reorder')
|
||||
@endif
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->searchIsEnabled() && $component->searchVisibilityIsEnabled())
|
||||
<div class="mb-3 mb-md-0 input-group">
|
||||
<input
|
||||
wire:model{{ $component->getSearchOptions() }}="{{ $component->getTableName() }}.search"
|
||||
placeholder="{{ __('Search') }}"
|
||||
type="text"
|
||||
class="form-control"
|
||||
>
|
||||
|
||||
@if ($component->hasSearch())
|
||||
<button wire:click.prevent="clearSearch" class="btn btn-outline-secondary" type="button">
|
||||
<svg style="width:.75em;height:.75em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters())
|
||||
<div class="{{ $component->searchIsEnabled() ? 'ms-0 ms-md-2' : '' }} mb-3 mb-md-0">
|
||||
<div
|
||||
@if ($component->isFilterLayoutPopover())
|
||||
x-data="{ open: false }"
|
||||
x-on:keydown.escape.stop="open = false"
|
||||
x-on:mousedown.away="open = false"
|
||||
@endif
|
||||
|
||||
class="btn-group d-block d-md-inline"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn dropdown-toggle d-block w-100 d-md-inline"
|
||||
|
||||
@if ($component->isFilterLayoutPopover())
|
||||
x-on:click="open = !open"
|
||||
aria-haspopup="true"
|
||||
x-bind:aria-expanded="open"
|
||||
aria-expanded="true"
|
||||
@endif
|
||||
|
||||
@if ($component->isFilterLayoutSlideDown())
|
||||
x-on:click="filtersOpen = !filtersOpen"
|
||||
@endif
|
||||
>
|
||||
@lang('Filters')
|
||||
|
||||
@if ($count = $component->getFilterBadgeCount())
|
||||
<span class="badge bg-info">
|
||||
{{ $count }}
|
||||
</span>
|
||||
@endif
|
||||
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if ($component->isFilterLayoutPopover())
|
||||
<ul
|
||||
x-cloak
|
||||
class="dropdown-menu w-100"
|
||||
x-bind:class="{'show' : open}"
|
||||
role="menu"
|
||||
>
|
||||
@foreach($component->getFilters() as $filter)
|
||||
@if($filter->isVisibleInMenus())
|
||||
<div wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}" class="p-2">
|
||||
<label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}" class="mb-2">
|
||||
{{ $filter->getName() }}
|
||||
</label>
|
||||
|
||||
{{ $filter->render($component) }}
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
@if ($component->hasAppliedVisibleFiltersWithValuesThatCanBeCleared())
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<button
|
||||
wire:click.prevent="setFilterDefaults"
|
||||
x-on:click="open = false"
|
||||
class="dropdown-item text-center"
|
||||
>
|
||||
@lang('Clear')
|
||||
</button>
|
||||
@endif
|
||||
</ul>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-left-end'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-left-end'), $component->getParametersForConfigurableArea('toolbar-left-end'))
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex">
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-right-start'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-right-start'), $component->getParametersForConfigurableArea('toolbar-right-start'))
|
||||
@endif
|
||||
|
||||
@if ($component->showBulkActionsDropdown())
|
||||
<div class="mb-3 mb-md-0">
|
||||
<div class="dropdown d-block d-md-inline">
|
||||
<button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="{{ $component->getTableName() }}-bulkActionsDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
@lang('Bulk Actions')
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-end w-100" aria-labelledby="{{ $component->getTableName() }}-bulkActionsDropdown">
|
||||
@foreach($component->getBulkActions() as $action => $title)
|
||||
<a
|
||||
href="#"
|
||||
wire:click.prevent="{{ $action }}"
|
||||
wire:key="bulk-action-{{ $action }}-{{ $component->getTableName() }}"
|
||||
class="dropdown-item"
|
||||
>
|
||||
{{ $title }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->columnSelectIsEnabled())
|
||||
<div class="mb-3 mb-md-0 md-0 ms-md-2">
|
||||
<div
|
||||
x-data="{ open: false }"
|
||||
x-on:keydown.escape.stop="open = false"
|
||||
x-on:mousedown.away="open = false"
|
||||
class="dropdown d-block d-md-inline"
|
||||
wire:key="column-select-button-{{ $component->getTableName() }}"
|
||||
>
|
||||
<button
|
||||
x-on:click="open = !open"
|
||||
class="btn dropdown-toggle d-block w-100 d-md-inline"
|
||||
type="button"
|
||||
id="columnSelect-{{ $component->getTableName() }}"
|
||||
aria-haspopup="true"
|
||||
x-bind:aria-expanded="open"
|
||||
>
|
||||
@lang('Columns')
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="dropdown-menu dropdown-menu-end w-100"
|
||||
x-bind:class="{'show' : open}"
|
||||
aria-labelledby="columnSelect-{{ $component->getTableName() }}"
|
||||
>
|
||||
<div class="form-check ms-2">
|
||||
<input
|
||||
@if($component->allDefaultVisibleColumnsAreSelected())
|
||||
checked
|
||||
wire:click="deselectAllColumns"
|
||||
@else
|
||||
unchecked
|
||||
wire:click="selectAllColumns"
|
||||
@endif
|
||||
wire:loading.attr="disabled"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<label
|
||||
wire:loading.attr="disabled"
|
||||
class="form-check-label"
|
||||
>
|
||||
{{ __('All Columns') }}
|
||||
</label>
|
||||
</div>
|
||||
@foreach($component->getColumns() as $column)
|
||||
@if ($column->isVisible() && $column->isSelectable())
|
||||
<div wire:key="columnSelect-{{ $loop->index }}-{{ $component->getTableName() }}"
|
||||
class="form-check ms-2"
|
||||
>
|
||||
<input
|
||||
wire:model="selectedColumns"
|
||||
wire:target="selectedColumns"
|
||||
wire:loading.attr="disabled"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
value="{{ $column->getSlug() }}"
|
||||
/>
|
||||
<label
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="selectedColumns"
|
||||
class="{{ $loop->last ? 'mb-0' : 'mb-1' }} form-check-label"
|
||||
>{{ $column->getTitle() }}</label>
|
||||
|
||||
</label>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->paginationIsEnabled() && $component->perPageVisibilityIsEnabled())
|
||||
<div class="ms-0 ms-md-2">
|
||||
<select
|
||||
wire:model="perPage"
|
||||
id="perPage"
|
||||
class="form-select"
|
||||
>
|
||||
@foreach ($component->getPerPageAccepted() as $item)
|
||||
<option value="{{ $item }}" wire:key="per-page-{{ $item }}-{{ $component->getTableName() }}">{{ $item === -1 ? __('All') : $item }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($component->hasConfigurableAreaFor('toolbar-right-end'))
|
||||
@include($component->getConfigurableAreaFor('toolbar-right-end'), $component->getParametersForConfigurableArea('toolbar-righ-end'))
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters() && $component->isFilterLayoutSlideDown())
|
||||
<div
|
||||
x-cloak
|
||||
x-show="filtersOpen"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@foreach($component->getFilters() as $filter)
|
||||
@if($filter->isVisibleInMenus())
|
||||
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
|
||||
<label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
|
||||
class="d-block">
|
||||
{{ $filter->getName() }}
|
||||
</label>
|
||||
|
||||
{{ $filter->render($component) }}
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
@if ($component->hasConfigurableAreaFor('after-toolbar'))
|
||||
@include($component->getConfigurableAreaFor('after-toolbar'), $component->getParametersForConfigurableArea('after-toolbar'))
|
||||
@endif
|
||||
@@ -1,23 +0,0 @@
|
||||
@props(['component'])
|
||||
|
||||
@php
|
||||
$refresh = $this->getRefreshStatus();
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
<div
|
||||
{{ $attributes->merge($this->getComponentWrapperAttributes()) }}
|
||||
|
||||
@if ($component->hasRefresh())
|
||||
wire:poll{{ $component->getRefreshOptions() }}
|
||||
@endif
|
||||
|
||||
@if ($component->isFilterLayoutSlideDown())
|
||||
x-data="{ filtersOpen: false }"
|
||||
@endif
|
||||
>
|
||||
@include('livewire-tables::includes.debug')
|
||||
@include('livewire-tables::includes.offline')
|
||||
|
||||
{{ $slot }}
|
||||
</div>
|
||||
@@ -1,67 +0,0 @@
|
||||
<x-livewire-tables::wrapper :component="$this">
|
||||
<x-livewire-tables::tools>
|
||||
<x-livewire-tables::tools.sorting-pills />
|
||||
<x-livewire-tables::tools.filter-pills />
|
||||
<x-livewire-tables::tools.toolbar />
|
||||
</x-livewire-tables::tools>
|
||||
|
||||
<x-livewire-tables::table>
|
||||
<x-slot name="thead">
|
||||
<x-livewire-tables::table.th.reorder />
|
||||
<x-livewire-tables::table.th.bulk-actions />
|
||||
<x-livewire-tables::table.th.row-contents />
|
||||
|
||||
@foreach($columns as $index => $column)
|
||||
@continue($column->isHidden())
|
||||
@continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
|
||||
@continue($this->currentlyReorderingIsDisabled() && $column->isReorderColumn() && $this->hideReorderColumnUnlessReorderingIsEnabled())
|
||||
|
||||
<x-livewire-tables::table.th :column="$column" :index="$index" />
|
||||
@endforeach
|
||||
</x-slot>
|
||||
|
||||
@if($this->secondaryHeaderIsEnabled() && $this->hasColumnsWithSecondaryHeader())
|
||||
<x-livewire-tables::table.tr.secondary-header :rows="$rows" />
|
||||
@endif
|
||||
|
||||
<x-livewire-tables::table.tr.bulk-actions :rows="$rows" />
|
||||
|
||||
@forelse ($rows as $rowIndex => $row)
|
||||
<x-livewire-tables::table.tr :row="$row" :rowIndex="$rowIndex">
|
||||
<x-livewire-tables::table.td.reorder />
|
||||
<x-livewire-tables::table.td.bulk-actions :row="$row" />
|
||||
<x-livewire-tables::table.td.row-contents :rowIndex="$rowIndex" />
|
||||
|
||||
@foreach($columns as $colIndex => $column)
|
||||
@continue($column->isHidden())
|
||||
@continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
|
||||
@continue($this->currentlyReorderingIsDisabled() && $column->isReorderColumn() && $this->hideReorderColumnUnlessReorderingIsEnabled())
|
||||
|
||||
<x-livewire-tables::table.td :column="$column" :colIndex="$colIndex">
|
||||
{{ $column->renderContents($row) }}
|
||||
</x-livewire-tables::table.td>
|
||||
@endforeach
|
||||
</x-livewire-tables::table.tr>
|
||||
|
||||
<x-livewire-tables::table.row-contents :row="$row" :rowIndex="$rowIndex" />
|
||||
@empty
|
||||
<x-livewire-tables::table.empty />
|
||||
@endforelse
|
||||
|
||||
@if ($this->footerIsEnabled() && $this->hasColumnsWithFooter())
|
||||
<x-slot name="tfoot">
|
||||
@if ($this->useHeaderAsFooterIsEnabled())
|
||||
<x-livewire-tables::table.tr.secondary-header :rows="$rows" />
|
||||
@else
|
||||
<x-livewire-tables::table.tr.footer :rows="$rows" />
|
||||
@endif
|
||||
</x-slot>
|
||||
@endif
|
||||
</x-livewire-tables::table>
|
||||
|
||||
<x-livewire-tables::pagination :rows="$rows" />
|
||||
|
||||
@isset($customView)
|
||||
@include($customView)
|
||||
@endisset
|
||||
</x-livewire-tables::wrapper>
|
||||
@@ -1,57 +0,0 @@
|
||||
@php
|
||||
$theme = $component->getTheme();
|
||||
@endphp
|
||||
|
||||
@if ($theme === 'tailwind')
|
||||
@if ($status)
|
||||
@if ($type === 'icons')
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-5 w-5 @if ($successValue === true) text-green-500 @else text-red-500 @endif" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
@elseif ($type === 'yes-no')
|
||||
@if ($successValue === true)
|
||||
<span>Yes</span>
|
||||
@else
|
||||
<span>No</span>
|
||||
@endif
|
||||
@endif
|
||||
@else
|
||||
@if ($type === 'icons')
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-5 w-5 @if ($successValue === false) text-green-500 @else text-red-500 @endif" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
@elseif ($type === 'yes-no')
|
||||
@if ($successValue === false)
|
||||
<span>Yes</span>
|
||||
@else
|
||||
<span>No</span>
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
@if ($status)
|
||||
@if ($type === 'icons')
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="width:1.2em;height:1.2em;" class="d-inline-block @if ($successValue === true) text-success @else text-danger @endif" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
@elseif ($type === 'yes-no')
|
||||
@if ($successValue === true)
|
||||
<span>Yes</span>
|
||||
@else
|
||||
<span>No</span>
|
||||
@endif
|
||||
@endif
|
||||
@else
|
||||
@if ($type === 'icons')
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="width:1.2em;height:1.2em;" class="d-inline-block @if ($successValue === false) text-success @else text-danger @endif" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
@elseif ($type === 'yes-no')
|
||||
@if ($successValue === false)
|
||||
<span>Yes</span>
|
||||
@else
|
||||
<span>No</span>
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@@ -1,5 +0,0 @@
|
||||
<div {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!}>
|
||||
@foreach($buttons as $button)
|
||||
{!! $button->getContents($row) !!}
|
||||
@endforeach
|
||||
</div>
|
||||
@@ -1 +0,0 @@
|
||||
<img src="{{ $path }}" {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!} />
|
||||
@@ -1 +0,0 @@
|
||||
<a href="{{ $path }}" {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!}>{{ $title }}</a>
|
||||
@@ -1,20 +0,0 @@
|
||||
<div>
|
||||
@if ($component->debugIsEnabled())
|
||||
@php
|
||||
$debuggable = [
|
||||
'query' => $component->getQuerySql(),
|
||||
'filters' => $component->getAppliedFilters(),
|
||||
'sorts' => $component->getSorts(),
|
||||
'search' => $component->getSearch(),
|
||||
'select-all' => $component->getSelectAllStatus(),
|
||||
'selected' => $component->getSelected(),
|
||||
];
|
||||
@endphp
|
||||
|
||||
<p><strong>@lang('Debugging Values'):</strong></p>
|
||||
|
||||
@if (! app()->runningInConsole())
|
||||
<div class="mb-4">@dump($debuggable)</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
@if ($component->offlineIndicatorIsEnabled())
|
||||
@if ($theme === 'tailwind')
|
||||
<div wire:offline.class.remove="hidden" class="hidden">
|
||||
<div class="rounded-md bg-red-100 p-4 mb-4 dark:border-red-800 dark:bg-red-500">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-red-400 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800 dark:text-white">
|
||||
@lang('You are not connected to the internet.')
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
|
||||
<div wire:offline.class.remove="d-none" class="d-none">
|
||||
<div class="alert alert-danger d-flex align-items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="width:1.3em;height:1.3em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
|
||||
<span class="d-inline-block ml-2">@lang('You are not connected to the internet.')</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
@@ -1,52 +0,0 @@
|
||||
<div>
|
||||
@if ($paginator->hasPages())
|
||||
@php(isset($this->numberOfPaginatorsRendered[$paginator->getPageName()]) ? $this->numberOfPaginatorsRendered[$paginator->getPageName()]++ : $this->numberOfPaginatorsRendered[$paginator->getPageName()] = 1)
|
||||
|
||||
<nav>
|
||||
<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">‹</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() }}')" wire:loading.attr="disabled" rel="prev" aria-label="@lang('pagination.previous')">‹</button>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{-- Pagination Elements --}}
|
||||
@if ($elements ?? null)
|
||||
@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() }}-{{ $this->numberOfPaginatorsRendered[$paginator->getPageName()] }}-page-{{ $page }}" aria-current="page"><span class="page-link">{{ $page }}</span></li>
|
||||
@else
|
||||
<li class="page-item" wire:key="paginator-{{ $paginator->getPageName() }}-{{ $this->numberOfPaginatorsRendered[$paginator->getPageName()] }}-page-{{ $page }}"><button type="button" class="page-link" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')">{{ $page }}</button></li>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
@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() }}')" wire:loading.attr="disabled" rel="next" aria-label="@lang('pagination.next')">›</button>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
|
||||
<span class="page-link" aria-hidden="true">›</span>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
</nav>
|
||||
@endif
|
||||
</div>
|
||||
@@ -1,106 +0,0 @@
|
||||
<div>
|
||||
@if ($paginator->hasPages())
|
||||
@php(isset($this->numberOfPaginatorsRendered[$paginator->getPageName()]) ? $this->numberOfPaginatorsRendered[$paginator->getPageName()]++ : $this->numberOfPaginatorsRendered[$paginator->getPageName()] = 1)
|
||||
|
||||
<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
|
||||
<div class="flex justify-between flex-1 md: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-700 dark:text-white dark:border-gray-600">
|
||||
{!! __('pagination.previous') !!}
|
||||
</span>
|
||||
@else
|
||||
<button wire:click="previousPage('{{ $paginator->getPageName() }}')" 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:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:border-gray-600 dark:hover:bg-gray-600">
|
||||
{!! __('pagination.previous') !!}
|
||||
</button>
|
||||
@endif
|
||||
</span>
|
||||
|
||||
<span>
|
||||
@if ($paginator->hasMorePages())
|
||||
<button wire:click="nextPage('{{ $paginator->getPageName() }}')" 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:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:border-gray-600 dark:hover:bg-gray-600">
|
||||
{!! __('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:bg-gray-700 dark:text-white dark:border-gray-600">
|
||||
{!! __('pagination.next') !!}
|
||||
</span>
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex-1 md:flex md:items-center md:justify-between">
|
||||
<div>
|
||||
<span class="relative z-0 inline-flex 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-700 dark:text-white 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 wire:click="previousPage('{{ $paginator->getPageName() }}')" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" rel="prev" 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:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:border-gray-600 dark:hover:bg-gray-600" 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 --}}
|
||||
@if ($elements ?? null)
|
||||
@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-700 dark:text-white dark:border-gray-600">{{ $element }}</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
{{-- Array Of Links --}}
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
<span wire:key="paginator-{{ $paginator->getPageName() }}-{{ $this->numberOfPaginatorsRendered[$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-500 dark:text-white dark:border-gray-500">{{ $page }}</span>
|
||||
</span>
|
||||
@else
|
||||
<button wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" 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:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:border-gray-600 dark:hover:bg-gray-600" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
|
||||
{{ $page }}
|
||||
</button>
|
||||
@endif
|
||||
</span>
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
<span>
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<button wire:click="nextPage('{{ $paginator->getPageName() }}')" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" rel="next" 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:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:border-gray-600 dark:hover:bg-gray-600" 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-700 dark:text-white 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>
|
||||
@@ -1,27 +0,0 @@
|
||||
<div {{ $attributes->class($avatarClasses) }}>
|
||||
@if ($label)
|
||||
<span class="font-medium text-white dark:text-gray-200">
|
||||
{{ $label }}
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if ($src)
|
||||
<img @class([
|
||||
'shrink-0 object-cover object-center',
|
||||
'rounded-sm' => $squared,
|
||||
'rounded-full' => !$squared,
|
||||
$size,
|
||||
])
|
||||
src="{{ $src }}"
|
||||
/>
|
||||
@endif
|
||||
|
||||
@if (!$src && !$label)
|
||||
<svg
|
||||
class="shrink-0 text-gray-300 bg-gray-100 dark:bg-gray-600"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
@@ -1,23 +0,0 @@
|
||||
<span {{ $attributes }}>
|
||||
@if ($icon)
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
:name="$icon"
|
||||
class="{{ $iconSize }} shrink-0"
|
||||
/>
|
||||
@elseif (isset($prepend))
|
||||
<div {{ $prepend->attributes }}>{{ $prepend }}</div>
|
||||
@endif
|
||||
|
||||
{{ $label ?? $slot }}
|
||||
|
||||
@if ($rightIcon)
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
:name="$rightIcon"
|
||||
class="{{ $iconSize }} shrink-0"
|
||||
/>
|
||||
@elseif (isset($append))
|
||||
<div {{ $append->attributes }}>{{ $append }}</div>
|
||||
@endif
|
||||
</span>
|
||||
@@ -1,48 +0,0 @@
|
||||
@php
|
||||
$tag = $href ? 'a' : 'button';
|
||||
|
||||
$defaultAttributes = [
|
||||
'wire:loading.attr' => 'disabled',
|
||||
'wire:loading.class' => '!cursor-wait',
|
||||
'wire:target' => ($spinner && strlen($spinner) > 1) ? $spinner : null,
|
||||
];
|
||||
|
||||
$href === null
|
||||
? $defaultAttributes['type'] = 'button'
|
||||
: $defaultAttributes['href'] = $href;
|
||||
@endphp
|
||||
|
||||
<{{ $tag }} {{ $attributes->merge($defaultAttributes) }}>
|
||||
@if ($icon)
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
:name="$icon"
|
||||
class="{{ $iconSize }} shrink-0"
|
||||
/>
|
||||
@endif
|
||||
|
||||
{{ $label ?? $slot }}
|
||||
|
||||
@if ($rightIcon)
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
:name="$rightIcon"
|
||||
class="{{ $iconSize }} shrink-0"
|
||||
:wire:loading.remove="(bool) $spinner"
|
||||
/>
|
||||
@endif
|
||||
|
||||
@if ($spinner)
|
||||
<svg class="animate-spin {{ $iconSize }} shrink-0"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@if (preg_replace('/[^a-zA-Z]+/', '', $spinner))
|
||||
wire:target="{{ $spinner }}"
|
||||
@endif
|
||||
wire:loading.delay{{ $loadingDelay ? ".{$loadingDelay}":'' }}>
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
@endif
|
||||
</{{ $tag }}>
|
||||
@@ -1,23 +0,0 @@
|
||||
<div class="{{ $cardClasses }}">
|
||||
@if ($header)
|
||||
{{ $header }}
|
||||
@elseif ($title || $action)
|
||||
<div class="{{ $headerClasses }}">
|
||||
<h3 class="font-medium whitespace-normal text-md text-secondary-700 dark:text-secondary-400">{{ $title }}</h3>
|
||||
|
||||
@if ($action)
|
||||
{{ $action }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div {{ $attributes->merge(['class' => "{$padding} text-secondary-700 rounded-b-xl grow dark:text-secondary-400"]) }}>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
@if ($footer)
|
||||
<div class="{{ $footerClasses }}">
|
||||
{{ $footer }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@@ -1,50 +0,0 @@
|
||||
<div>
|
||||
<label for="{{ $id }}" class="flex items-center {{ $errors->has($name) ? 'text-negative-600':'' }}">
|
||||
<div class="relative flex items-start">
|
||||
@if ($leftLabel)
|
||||
<div class="mr-2 text-sm text-right">
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('label')"
|
||||
class=""
|
||||
:for="$id"
|
||||
:label="$leftLabel"
|
||||
:has-error="$errors->has($name)"
|
||||
/>
|
||||
@if($description)
|
||||
<div class="text-gray-500">{{ $description }}</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="flex items-center h-5">
|
||||
<input {{ $attributes->class([
|
||||
$getClasses($errors->has($name)),
|
||||
])->merge([
|
||||
'type' => 'checkbox',
|
||||
]) }} />
|
||||
</div>
|
||||
|
||||
@if ($label)
|
||||
<div class="ml-2 text-sm">
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('label')"
|
||||
class=""
|
||||
:for="$id"
|
||||
:label="$label"
|
||||
:has-error="$errors->has($name)"
|
||||
/>
|
||||
@if($description)
|
||||
<div id="{{ $id }} . comments-description" class="text-gray-500">{{ $description }}</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</label>
|
||||
|
||||
@if ($name)
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('error')"
|
||||
:name="$name"
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
@@ -1,11 +0,0 @@
|
||||
<span {{ $attributes->merge() }}>
|
||||
@if ($icon)
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
:name="$icon"
|
||||
class="{{ $iconSize }} shrink-0"
|
||||
/>
|
||||
@else
|
||||
{{ $label ?? $slot }}
|
||||
@endif
|
||||
</span>
|
||||
@@ -1,45 +0,0 @@
|
||||
@php
|
||||
$tag = $href ? 'a' : 'button';
|
||||
|
||||
$defaultAttributes = [
|
||||
'wire:loading.attr' => 'disabled',
|
||||
'wire:loading.class' => '!cursor-wait',
|
||||
];
|
||||
|
||||
$href === null
|
||||
? $defaultAttributes['type'] = 'button'
|
||||
: $defaultAttributes['href'] = $href;
|
||||
@endphp
|
||||
|
||||
<{{ $tag }} {{ $attributes->merge($defaultAttributes) }}>
|
||||
<div @if($spinner)
|
||||
@if (preg_replace('/[^a-zA-Z]+/', '', $spinner))
|
||||
wire:target="{{ $spinner }}"
|
||||
@endif
|
||||
wire:loading.remove
|
||||
@endif>
|
||||
@if ($icon)
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
:name="$icon"
|
||||
class="{{ $iconSize }} shrink-0"
|
||||
/>
|
||||
@else
|
||||
{{ $label ?? $slot }}
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if ($spinner)
|
||||
<svg class="animate-spin {{ $iconSize }} shrink-0"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@if (preg_replace('/[^a-zA-Z]+/', '', $spinner))
|
||||
wire:target="{{ $spinner }}"
|
||||
@endif
|
||||
wire:loading.delay{{ $loadingDelay ? ".{$loadingDelay}":'' }}>
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
@endif
|
||||
</{{ $tag }}>
|
||||
@@ -1,79 +0,0 @@
|
||||
<div x-data="wireui_color_picker({
|
||||
colorNameAsValue: @boolean($colorNameAsValue),
|
||||
|
||||
@if ($attributes->wire('model')->value())
|
||||
wireModifiers: @toJs($attributes->wireModifiers()),
|
||||
wireModel: @entangle($attributes->wire('model')),
|
||||
@endif
|
||||
|
||||
@if ($colors)
|
||||
colors: @toJs($getColors())
|
||||
@endif
|
||||
})" {{ $attributes->only(['class', 'wire:key'])->class('relative') }}>
|
||||
<x-dynamic-component
|
||||
{{ $attributes->except(['class', 'wire:key'])->whereDoesntStartWith('wire:model') }}
|
||||
:component="WireUi::component('input')"
|
||||
x-model="{{ $colorNameAsValue ? 'selected.name' : 'selected.value' }}"
|
||||
x-bind:class="{ 'pl-8': selected.value }"
|
||||
x-on:input="setColor($event.target.value)"
|
||||
x-ref="input"
|
||||
:label="$label"
|
||||
:prefix="null"
|
||||
:icon="null">
|
||||
<x-slot name="prefix">
|
||||
<template x-if="selected.value">
|
||||
<div
|
||||
class="w-4 h-4 rounded shadow border"
|
||||
:style="{ 'background-color': selected.value }"
|
||||
></div>
|
||||
</template>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="append">
|
||||
<div class="absolute inset-y-0 right-0 flex items-center p-0.5">
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('button')"
|
||||
class="h-full rounded-r-md"
|
||||
primary
|
||||
flat
|
||||
squared
|
||||
x-on:click="toggle"
|
||||
trigger
|
||||
:disabled="$disabled">
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
class="
|
||||
w-4 h-4 group-focus:text-primary-700 text-gray-400 dark:text-gray-600
|
||||
dark:group-hover:text-gray-500 dark:group-focus:text-primary-500
|
||||
"
|
||||
:name="$rightIcon"
|
||||
/>
|
||||
</x-dynamic-component>
|
||||
</div>
|
||||
</x-slot>
|
||||
</x-dynamic-component>
|
||||
|
||||
<x-wireui::parts.popover
|
||||
:margin="(bool) $label"
|
||||
class="
|
||||
max-h-56 py-3 px-2 sm:py-2 sm:px-1 sm:w-72 sm:rounded-xl
|
||||
overflow-y-auto soft-scrollbar border border-secondary-200
|
||||
">
|
||||
<div class="flex flex-wrap items-center justify-center gap-1 sm:gap-0.5 max-w-[18rem] mx-auto">
|
||||
<span class="sr-only">dropdown-open</span>
|
||||
|
||||
<template x-for="(color, index) in colors" :key="index">
|
||||
<button class="
|
||||
w-6 h-6 rounded shadow-lg border hover:scale-125 transition-all ease-in-out duration-100 cursor-pointer
|
||||
hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-600 sdark:focus:ring-gray-400
|
||||
dark:border-0 dark:hover:ring-2 dark:hover:ring-gray-400
|
||||
"
|
||||
:style="{ 'background-color': color.value }"
|
||||
x-on:click="select(color)"
|
||||
:title="color.name"
|
||||
type="button">
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</x-wireui::parts.popover>
|
||||
</div>
|
||||
@@ -1,222 +0,0 @@
|
||||
<div
|
||||
x-data="wireui_datetime_picker({
|
||||
model: @entangleable($attributes->wire('model')),
|
||||
})"
|
||||
x-props="{
|
||||
config: {
|
||||
interval: @toJs($interval),
|
||||
is12H: @boolean($timeFormat == '12'),
|
||||
readonly: @boolean($readonly),
|
||||
disabled: @boolean($disabled),
|
||||
min: @toJs($min ? $min->format('Y-m-d\TH:i') : null),
|
||||
max: @toJs($max ? $max->format('Y-m-d\TH:i') : null),
|
||||
minTime: @toJs($minTime),
|
||||
maxTime: @toJs($maxTime),
|
||||
},
|
||||
withoutTimezone: @boolean($withoutTimezone),
|
||||
timezone: @toJs($timezone),
|
||||
userTimezone: @toJs($userTimezone ?? ''),
|
||||
parseFormat: @toJs($parseFormat ?? ''),
|
||||
displayFormat: @toJs($displayFormat ?? ''),
|
||||
weekDays: @lang('wireui::messages.datePicker.days'),
|
||||
monthNames: @lang('wireui::messages.datePicker.months'),
|
||||
withoutTime: @boolean($withoutTime),
|
||||
}"
|
||||
{{ $attributes
|
||||
->only('wire:key')
|
||||
->class('relative')
|
||||
->merge(['wire:key' => "datepicker::{$name}"]) }}
|
||||
>
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('input')"
|
||||
{{ $attributes->whereDoesntStartWith(['wire:model', 'x-model', 'wire:key', 'readonly']) }}
|
||||
:borderless="$borderless"
|
||||
:shadowless="$shadowless"
|
||||
:label="$label"
|
||||
:hint="$hint"
|
||||
:corner-hint="$cornerHint"
|
||||
:icon="$icon"
|
||||
:prefix="$prefix"
|
||||
:prepend="$prepend"
|
||||
readonly
|
||||
x-on:click="toggle"
|
||||
x-bind:value="model ? getDisplayValue() : null">
|
||||
@if (!$readonly && !$disabled)
|
||||
<x-slot name="append">
|
||||
<div class="absolute inset-y-0 right-3 z-5 flex items-center justify-center">
|
||||
<div class="flex items-center gap-x-2 my-auto
|
||||
{{ $errors->has($name) ? 'text-negative-400 dark:text-negative-600' : 'text-secondary-400' }}">
|
||||
|
||||
@if ($clearable)
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
class="cursor-pointer w-4 h-4 hover:text-negative-500 transition-colors ease-in-out duration-150"
|
||||
x-cloak
|
||||
name="x"
|
||||
x-show="model"
|
||||
x-on:click="clearDate()"
|
||||
/>
|
||||
@endif
|
||||
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
class="cursor-pointer w-5 h-5"
|
||||
:name="$rightIcon"
|
||||
x-on:click="toggle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</x-slot>
|
||||
@endif
|
||||
</x-dynamic-component>
|
||||
|
||||
<x-wireui::parts.popover :margin="(bool) $label" class="max-h-96 overflow-y-auto p-3 sm:w-72">
|
||||
<div x-show="tab === 'date'" class="space-y-5">
|
||||
@unless ($withoutTips)
|
||||
<div class="grid grid-cols-3 gap-x-2 text-center text-secondary-600">
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('button')"
|
||||
class="bg-secondary-100 border-none dark:bg-secondary-800"
|
||||
x-on:click="selectYesterday"
|
||||
:label="__('wireui::messages.datePicker.yesterday')"
|
||||
/>
|
||||
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('button')"
|
||||
class="bg-secondary-100 border-none dark:bg-secondary-800"
|
||||
x-on:click="selectToday"
|
||||
:label="__('wireui::messages.datePicker.today')"
|
||||
/>
|
||||
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('button')"
|
||||
class="bg-secondary-100 border-none dark:bg-secondary-800"
|
||||
x-on:click="selectTomorrow"
|
||||
:label="__('wireui::messages.datePicker.tomorrow')"
|
||||
/>
|
||||
</div>
|
||||
@endunless
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('button')"
|
||||
class="rounded-lg shrink-0"
|
||||
x-show="!monthsPicker"
|
||||
x-on:click="previousMonth"
|
||||
icon="chevron-left"
|
||||
flat
|
||||
/>
|
||||
|
||||
<div class="w-full flex items-center justify-center gap-x-2 text-secondary-600 dark:text-secondary-500">
|
||||
<button class="focus:outline-none focus:underline"
|
||||
x-text="monthNames[month]"
|
||||
x-on:click="monthsPicker = !monthsPicker"
|
||||
type="button">
|
||||
</button>
|
||||
<input class="w-14 appearance-none p-0 ring-0 border-none focus:ring-0 focus:outline-none dark:bg-secondary-800"
|
||||
x-model="year"
|
||||
x-on:input.debounce.500ms="fillPickerDates"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('button')"
|
||||
class="rounded-lg shrink-0"
|
||||
x-show="!monthsPicker"
|
||||
x-on:click="nextMonth"
|
||||
icon="chevron-right"
|
||||
flat
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-white dark:bg-secondary-800 grid grid-cols-3 gap-3"
|
||||
x-show="monthsPicker"
|
||||
x-transition>
|
||||
<template x-for="(monthName, index) in monthNames" :key="`month.${monthName}`">
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('button')"
|
||||
class="text-secondary-400 dark:border-0 dark:hover:bg-secondary-700 uppercase"
|
||||
x-on:click="selectMonth(index)"
|
||||
x-text="monthName"
|
||||
xs
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-7 gap-2">
|
||||
<template x-for="day in weekDays" :key="`week-day.${day}`">
|
||||
<span class="text-secondary-400 text-3xs text-center uppercase pointer-events-none"
|
||||
x-text="day">
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template
|
||||
x-for="date in dates"
|
||||
:key="`date.${date.day}.${date.month}`"
|
||||
>
|
||||
<div class="flex justify-center picker-days">
|
||||
<button class="text-sm w-7 h-6 focus:outline-none rounded-md focus:ring-2 focus:ring-ofsset-2 focus:ring-primary-600
|
||||
hover:bg-primary-100 dark:hover:bg-secondary-700 dark:focus:ring-secondary-400
|
||||
disabled:cursor-not-allowed"
|
||||
:class="{
|
||||
'text-secondary-600 dark:text-secondary-400': !date.isDisabled && !date.isSelected && date.month === month,
|
||||
'text-secondary-400 dark:text-secondary-600': date.isDisabled || date.month !== month,
|
||||
'text-primary-600 border border-primary-600 dark:border-gray-400': date.isToday && !date.isSelected,
|
||||
'disabled:text-primary-400 disabled:border-primary-400': date.isToday && !date.isSelected,
|
||||
'!text-white bg-primary-600 font-semibold border border-primary-600': date.isSelected,
|
||||
'disabled:bg-primary-400 disabled:border-primary-400': date.isSelected,
|
||||
'hover:bg-primary-600 dark:bg-secondary-700 dark:border-secondary-400': date.isSelected,
|
||||
}"
|
||||
:disabled="date.isDisabled"
|
||||
x-on:click="selectDate(date)"
|
||||
x-text="date.day"
|
||||
type="button">
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="tab === 'time'" x-transition>
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('input')"
|
||||
id="search.{{ $attributes->wire('model')->value() }}"
|
||||
:label="__('wireui::messages.selectTime')"
|
||||
x-model="searchTime"
|
||||
x-bind:placeholder="getSearchPlaceholder"
|
||||
x-ref="searchTime"
|
||||
x-on:input.debounce.150ms="onSearchTime($event.target.value)"
|
||||
/>
|
||||
|
||||
<div x-ref="timesContainer"
|
||||
class="mt-1 w-full max-h-52 pb-1 pt-2 overflow-y-auto flex flex-col picker-times">
|
||||
<template x-for="time in filteredTimes" :key="time.value">
|
||||
<button class="group rounded-md focus:outline-none focus:bg-primary-100 dark:focus:bg-secondary-700
|
||||
relative py-2 pl-2 pr-9 text-left transition-colors ease-in-out duration-100 cursor-pointer select-none
|
||||
hover:text-white hover:bg-primary-600 dark:hover:bg-secondary-700 dark:text-secondary-400"
|
||||
:class="{
|
||||
'text-primary-600': modelTime === time.value,
|
||||
'text-secondary-700': modelTime !== time.value,
|
||||
}"
|
||||
:name="`times.${time.value}`"
|
||||
type="button"
|
||||
x-on:click="selectTime(time)">
|
||||
<span x-text="time.label"></span>
|
||||
<span class="text-primary-600 dark:text-secondary-400 group-hover:text-white
|
||||
absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
x-show="modelTime === time.value">
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
name="check"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</x-wireui::parts.popover>
|
||||
</div>
|
||||
@@ -1,95 +0,0 @@
|
||||
<div class="fixed inset-0 flex items-end overflow-y-auto sm:pt-16 justify-center {{ $align }} {{ $zIndex }}"
|
||||
x-data="wireui_dialog({ id: '{{ $dialog }}' })"
|
||||
x-show="show"
|
||||
x-on:wireui:{{ $dialog }}.window="showDialog($event.detail)"
|
||||
x-on:wireui:confirm-{{ $dialog }}.window="confirmDialog($event.detail)"
|
||||
x-on:keydown.escape.window="handleEscape"
|
||||
style="display: none"
|
||||
x-cloak>
|
||||
<div class="fixed inset-0 bg-secondary-400 bg-opacity-60 transform transition-opacity
|
||||
{{ $dialog }}-backdrop @if ($blur) {{ $blur }} @endif dark:bg-secondary-700 dark:bg-opacity-60"
|
||||
x-show="show"
|
||||
x-on:click="dismiss"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0">
|
||||
</div>
|
||||
|
||||
<div class="w-full transition-all p-4 sm:max-w-lg"
|
||||
x-show="show"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
x-on:mouseenter="pauseTimeout"
|
||||
x-on:mouseleave="resumeTimeout">
|
||||
<div class="relative shadow-md bg-white dark:bg-secondary-800 rounded-xl space-y-4 p-4"
|
||||
:class="{
|
||||
'sm:p-5 sm:pt-7': style === 'center',
|
||||
'sm:p-0 sm:pt-1': style === 'inline',
|
||||
}">
|
||||
<div class="bg-secondary-300 dark:bg-secondary-600 rounded-full transition-all duration-150 ease-linear absolute top-0 left-0"
|
||||
style="height: 2px; width: 100%;"
|
||||
x-ref="progressbar"
|
||||
x-show="dialog && dialog.progressbar && dialog.timeout">
|
||||
</div>
|
||||
|
||||
<div x-show="dialog && dialog.closeButton" class="absolute right-2 -top-2">
|
||||
<button class="{{ $dialog }}-button-close focus:outline-none p-1 focus:ring-2 focus:ring-secondary-200 rounded-full text-secondary-300"
|
||||
x-on:click="close"
|
||||
type="button">
|
||||
<span class="sr-only">{{ __('close') }}</span>
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
class="w-5 h-5"
|
||||
name="x"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4" :class="{ 'sm:space-x-4 sm:flex sm:items-center sm:space-y-0 sm:px-5 sm:py-2': style === 'inline' }">
|
||||
<div class="mx-auto flex items-center self-start justify-center shrink-0"
|
||||
:class="{ 'sm:items-start sm:mx-0': style === 'inline' }"
|
||||
x-show="dialog && dialog.icon">
|
||||
<div x-ref="iconContainer"></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 w-full" :class="{ 'sm:mt-5': style === 'center' }">
|
||||
<h3 class="text-lg leading-6 font-medium text-secondary-900 dark:text-secondary-400 text-center"
|
||||
:class="{ 'sm:text-left': style === 'inline' }"
|
||||
@unless($title) x-ref="title" @endunless>
|
||||
{{ $title }}
|
||||
</h3>
|
||||
|
||||
<p class="mt-2 text-sm text-secondary-500 text-center"
|
||||
:class="{ 'sm:text-left': style === 'inline' }"
|
||||
@unless($description) x-ref="description" @endunless>
|
||||
{{ $description }}
|
||||
</p>
|
||||
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-y-2 sm:gap-x-3 rounded-b-xl"
|
||||
:class="{
|
||||
'sm:grid-cols-2 sm:gap-y-0': style === 'center',
|
||||
'sm:p-4 sm:bg-secondary-100 sm:dark:bg-secondary-800 sm:grid-cols-none sm:flex sm:justify-end': style === 'inline',
|
||||
}"
|
||||
x-show="dialog && (dialog.accept || dialog.reject)">
|
||||
<div x-show="dialog && dialog.accept" class="sm:order-last" x-ref="accept"></div>
|
||||
<div x-show="dialog && dialog.reject" x-ref="reject"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center"
|
||||
x-show="dialog && dialog.close && !dialog.accept && !dialog.accept"
|
||||
x-ref="close">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,38 +0,0 @@
|
||||
<div class="relative inline-block text-left"
|
||||
x-data="wireui_dropdown"
|
||||
x-on:click.outside="close"
|
||||
x-on:keydown.escape.window="close"
|
||||
{{ $attributes->only('wire:key') }}>
|
||||
<div class="cursor-pointer focus:outline-none" x-on:click="toggle">
|
||||
@if (isset($trigger))
|
||||
{{ $trigger }}
|
||||
@else
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
class="w-4 h-4 text-secondary-500 hover:text-secondary-700
|
||||
dark:hover:text-secondary-600 transition duration-150 ease-in-out"
|
||||
name="dots-vertical"
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div x-show="status"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
{{ $attributes->except('wire:key')->class([
|
||||
$getAlign(),
|
||||
$width,
|
||||
'z-30 absolute mt-2 whitespace-nowrap'
|
||||
]) }}
|
||||
style="display: none;"
|
||||
@unless($persistent) x-on:click="close" @endunless>
|
||||
<div class="relative {{ $height }} soft-scrollbar overflow-auto border border-secondary-200
|
||||
rounded-lg shadow-lg p-1 bg-white dark:bg-secondary-800 dark:border-secondary-600">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,7 +0,0 @@
|
||||
<div class="@if($separator) border-t border-secondary-200 dark:border-secondary-600 @endif">
|
||||
<h6 {{ $attributes->merge(['class' => $classes]) }}>
|
||||
{{ $label }}
|
||||
</h6>
|
||||
|
||||
{{ $slot }}
|
||||
</div>
|
||||
@@ -1,15 +0,0 @@
|
||||
@if ($separator)
|
||||
<div class="w-full my-1 border-t border-secondary-200 dark:border-secondary-600"></div>
|
||||
@endif
|
||||
|
||||
<a {{ $attributes->merge(['class' => $getClasses()]) }}>
|
||||
@if ($icon)
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
:name="$icon"
|
||||
class="w-5 h-5 mr-2"
|
||||
/>
|
||||
@endif
|
||||
|
||||
{{ $label ?? $slot }}
|
||||
</a>
|
||||
@@ -1,5 +0,0 @@
|
||||
@error($name)
|
||||
<p {{ $attributes->merge(['class' => 'mt-2 text-sm text-negative-600']) }}>
|
||||
{{ $message }}
|
||||
</p>
|
||||
@enderror
|
||||
@@ -1,26 +0,0 @@
|
||||
@if ($hasErrors($errors))
|
||||
<div {{ $attributes->merge(['class' => 'rounded-lg bg-negative-50 dark:bg-secondary-800 dark:border dark:border-negative-600 p-4']) }}>
|
||||
<div class="flex items-center pb-3 border-b-2 border-negative-200 dark:border-negative-700">
|
||||
<x-dynamic-component
|
||||
:component="WireUi::component('icon')"
|
||||
class="w-5 h-5 text-negative-400 dark:text-negative-600 shrink-0 mr-3"
|
||||
name="exclamation-circle"
|
||||
/>
|
||||
|
||||
<span class="text-sm font-semibold text-negative-800 dark:text-negative-600">
|
||||
{{ str_replace('{errors}', $count($errors), $title) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="ml-5 pl-1 mt-2">
|
||||
<ul class="list-disc space-y-1 text-sm text-negative-700 dark:text-negative-600">
|
||||
@foreach ($getErrorMessages($errors) as $message)
|
||||
<li>{{ head($message) }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="hidden"></div>
|
||||
@endif
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<x-dynamic-component component="wireui::icons.{{ $style }}.{{ $name }}" {{ $attributes }} />
|
||||
@@ -1,5 +0,0 @@
|
||||
<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path fill="#fff" d="M12 14l9-5-9-5-9 5 9 5z" />
|
||||
<path fill="#fff" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 606 B |
@@ -1,3 +0,0 @@
|
||||
<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 337 B |
@@ -1,3 +0,0 @@
|
||||
<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 293 B |
@@ -1,3 +0,0 @@
|
||||
<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 283 B |
@@ -1,3 +0,0 @@
|
||||
<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 260 B |
@@ -1,3 +0,0 @@
|
||||
<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 261 B |
@@ -1,3 +0,0 @@
|
||||
<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 259 B |
@@ -1,3 +0,0 @@
|
||||
<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 258 B |
@@ -1,3 +0,0 @@
|
||||
<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 228 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user