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:
@@ -1,6 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
namespace App\Http\Livewire\Bindle;
|
namespace App\Livewire\Bindle;
|
||||||
|
|
||||||
use App\Models\LibraryItem;
|
use App\Models\LibraryItem;
|
||||||
use Illuminate\Database\Eloquent\Collection;
|
use Illuminate\Database\Eloquent\Collection;
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
namespace App\Http\Livewire\BooksForPlebs;
|
namespace App\Livewire\BooksForPlebs;
|
||||||
|
|
||||||
use Livewire\Component;
|
use Livewire\Component;
|
||||||
use RalphJSmit\Laravel\SEO\Support\SEOData;
|
use RalphJSmit\Laravel\SEO\Support\SEOData;
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
namespace App\Http\Livewire\Helper;
|
namespace App\Livewire\Helper;
|
||||||
|
|
||||||
use Livewire\Component;
|
use Livewire\Component;
|
||||||
use RalphJSmit\Laravel\SEO\Support\SEOData;
|
use RalphJSmit\Laravel\SEO\Support\SEOData;
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
namespace App\Http\Livewire;
|
namespace App\Livewire;
|
||||||
|
|
||||||
use Livewire\Component;
|
use Livewire\Component;
|
||||||
use WireUi\Traits\Actions;
|
use WireUi\Traits\Actions;
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
namespace App\Http\Livewire\Meetup;
|
namespace App\Livewire\Meetup;
|
||||||
|
|
||||||
use App\Models\Meetup;
|
use App\Models\Meetup;
|
||||||
use Illuminate\Http\Client\Pool;
|
use Illuminate\Http\Client\Pool;
|
||||||
@@ -156,7 +156,7 @@ class PrepareForBtcMapItem extends Component
|
|||||||
);
|
);
|
||||||
|
|
||||||
// emit event for AlpineJS
|
// emit event for AlpineJS
|
||||||
$this->emit('geoJsonUpdated');
|
$this->dispatch('geoJsonUpdated');
|
||||||
} catch (\Exception $e) {
|
} catch (\Exception $e) {
|
||||||
$this->notification()
|
$this->notification()
|
||||||
->error('Error', $e->getMessage());
|
->error('Error', $e->getMessage());
|
||||||
@@ -213,7 +213,7 @@ class PrepareForBtcMapItem extends Component
|
|||||||
->get($getUrl);
|
->get($getUrl);
|
||||||
if ($response->json()) {
|
if ($response->json()) {
|
||||||
$this->selectedItemPolygonsOSMfr = $response->json();
|
$this->selectedItemPolygonsOSMfr = $response->json();
|
||||||
$this->emit('geoJsonUpdated');
|
$this->dispatch('geoJsonUpdated');
|
||||||
} else {
|
} else {
|
||||||
$this->notification()
|
$this->notification()
|
||||||
->warning('No data', 'No data found for this area.');
|
->warning('No data', 'No data found for this area.');
|
||||||
@@ -260,14 +260,14 @@ class PrepareForBtcMapItem extends Component
|
|||||||
}
|
}
|
||||||
|
|
||||||
$this->selectedItemOSMBoundaries = $response->json();
|
$this->selectedItemOSMBoundaries = $response->json();
|
||||||
$this->emit('geoJsonUpdated');
|
$this->dispatch('geoJsonUpdated');
|
||||||
} else {
|
} else {
|
||||||
$this->notification()
|
$this->notification()
|
||||||
->warning('Warning', 'No water boundaries found');
|
->warning('Warning', 'No water boundaries found');
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
$this->selectedItemOSMBoundaries = null;
|
$this->selectedItemOSMBoundaries = null;
|
||||||
$this->emit('geoJsonUpdated');
|
$this->dispatch('geoJsonUpdated');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
namespace App\Http\Livewire\Meetup;
|
namespace App\Livewire\Meetup;
|
||||||
|
|
||||||
use Livewire\Component;
|
use Livewire\Component;
|
||||||
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
namespace App\Http\Livewire\Nostr;
|
namespace App\Livewire\Nostr;
|
||||||
|
|
||||||
use Livewire\Component;
|
use Livewire\Component;
|
||||||
|
|
||||||
@@ -7,7 +7,6 @@ use Illuminate\Database\Eloquent\Factories\HasFactory;
|
|||||||
use Illuminate\Database\Eloquent\Model;
|
use Illuminate\Database\Eloquent\Model;
|
||||||
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||||
use Illuminate\Database\Eloquent\Relations\HasMany;
|
use Illuminate\Database\Eloquent\Relations\HasMany;
|
||||||
use Spatie\Comments\Models\Concerns\HasComments;
|
|
||||||
use Spatie\Image\Manipulations;
|
use Spatie\Image\Manipulations;
|
||||||
use Spatie\MediaLibrary\HasMedia;
|
use Spatie\MediaLibrary\HasMedia;
|
||||||
use Spatie\MediaLibrary\InteractsWithMedia;
|
use Spatie\MediaLibrary\InteractsWithMedia;
|
||||||
@@ -16,7 +15,6 @@ use Spatie\MediaLibrary\MediaCollections\Models\Media;
|
|||||||
class BookCase extends Model implements HasMedia
|
class BookCase extends Model implements HasMedia
|
||||||
{
|
{
|
||||||
use HasFactory;
|
use HasFactory;
|
||||||
use HasComments;
|
|
||||||
use InteractsWithMedia;
|
use InteractsWithMedia;
|
||||||
use Geoly;
|
use Geoly;
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ use Illuminate\Database\Eloquent\Model;
|
|||||||
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||||
use Illuminate\Database\Eloquent\Relations\BelongsToMany;
|
use Illuminate\Database\Eloquent\Relations\BelongsToMany;
|
||||||
use Illuminate\Support\Facades\Cookie;
|
use Illuminate\Support\Facades\Cookie;
|
||||||
use Spatie\Comments\Models\Concerns\HasComments;
|
|
||||||
use Spatie\EloquentSortable\Sortable;
|
use Spatie\EloquentSortable\Sortable;
|
||||||
use Spatie\EloquentSortable\SortableTrait;
|
use Spatie\EloquentSortable\SortableTrait;
|
||||||
use Spatie\Feed\Feedable;
|
use Spatie\Feed\Feedable;
|
||||||
@@ -27,7 +26,6 @@ class LibraryItem extends Model implements HasMedia, Sortable, Feedable
|
|||||||
use SortableTrait;
|
use SortableTrait;
|
||||||
use HasStatuses;
|
use HasStatuses;
|
||||||
use HasSlug;
|
use HasSlug;
|
||||||
use HasComments;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The attributes that aren't mass assignable.
|
* The attributes that aren't mass assignable.
|
||||||
|
|||||||
@@ -5,12 +5,10 @@ namespace App\Models;
|
|||||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||||
use Illuminate\Database\Eloquent\Model;
|
use Illuminate\Database\Eloquent\Model;
|
||||||
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||||
use Spatie\Comments\Models\Concerns\HasComments;
|
|
||||||
|
|
||||||
class MeetupEvent extends Model
|
class MeetupEvent extends Model
|
||||||
{
|
{
|
||||||
use HasFactory;
|
use HasFactory;
|
||||||
use HasComments;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The attributes that aren't mass assignable.
|
* The attributes that aren't mass assignable.
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
"laravel/socialite": "^5.6",
|
"laravel/socialite": "^5.6",
|
||||||
"laravel/tinker": "^2.8",
|
"laravel/tinker": "^2.8",
|
||||||
"league/glide-laravel": "^1.0",
|
"league/glide-laravel": "^1.0",
|
||||||
"livewire/livewire": "^2.11",
|
"livewire/livewire": "^3.0",
|
||||||
"maatwebsite/excel": "^3.1",
|
"maatwebsite/excel": "^3.1",
|
||||||
"nova/start": "*",
|
"nova/start": "*",
|
||||||
"oneduo/nova-time-field": "^1.0",
|
"oneduo/nova-time-field": "^1.0",
|
||||||
@@ -38,8 +38,7 @@
|
|||||||
"pusher/pusher-php-server": "^7.2.2",
|
"pusher/pusher-php-server": "^7.2.2",
|
||||||
"qcod/laravel-gamify": "dev-master#6c0a55cf5351be5e7b4f31aa2499984853d895cf",
|
"qcod/laravel-gamify": "dev-master#6c0a55cf5351be5e7b4f31aa2499984853d895cf",
|
||||||
"ralphjsmit/laravel-seo": "^1.3",
|
"ralphjsmit/laravel-seo": "^1.3",
|
||||||
"ralphjsmit/livewire-urls": "^1.2",
|
"rappasoft/laravel-livewire-tables": "^3.1.3",
|
||||||
"rappasoft/laravel-livewire-tables": "^2.11",
|
|
||||||
"sentry/sentry-laravel": "^3.2",
|
"sentry/sentry-laravel": "^3.2",
|
||||||
"simplesoftwareio/simple-qrcode": "^4.2",
|
"simplesoftwareio/simple-qrcode": "^4.2",
|
||||||
"simplito/elliptic-php": "^1.0",
|
"simplito/elliptic-php": "^1.0",
|
||||||
@@ -47,8 +46,6 @@
|
|||||||
"spatie/eloquent-sortable": "^4.0",
|
"spatie/eloquent-sortable": "^4.0",
|
||||||
"spatie/icalendar-generator": "^2.5",
|
"spatie/icalendar-generator": "^2.5",
|
||||||
"spatie/laravel-ciphersweet": "^1.0",
|
"spatie/laravel-ciphersweet": "^1.0",
|
||||||
"spatie/laravel-comments": "^1.4",
|
|
||||||
"spatie/laravel-comments-livewire": "^1.2",
|
|
||||||
"spatie/laravel-feed": "^4.2",
|
"spatie/laravel-feed": "^4.2",
|
||||||
"spatie/laravel-google-fonts": "^1.2",
|
"spatie/laravel-google-fonts": "^1.2",
|
||||||
"spatie/laravel-markdown": "^2.2",
|
"spatie/laravel-markdown": "^2.2",
|
||||||
@@ -64,7 +61,7 @@
|
|||||||
"symfony/http-client": "^6.2",
|
"symfony/http-client": "^6.2",
|
||||||
"symfony/mailgun-mailer": "^6.2",
|
"symfony/mailgun-mailer": "^6.2",
|
||||||
"wesselperik/nova-status-field": "^2.1",
|
"wesselperik/nova-status-field": "^2.1",
|
||||||
"wireui/wireui": "^1.17.9",
|
"wireui/wireui": "^1.18.2",
|
||||||
"ziffmedia/nova-select-plus": "^2.0"
|
"ziffmedia/nova-select-plus": "^2.0"
|
||||||
},
|
},
|
||||||
"require-dev": {
|
"require-dev": {
|
||||||
|
|||||||
1610
composer.lock
generated
1610
composer.lock
generated
File diff suppressed because it is too large
Load Diff
@@ -35,11 +35,11 @@ return [
|
|||||||
|--------------------------------------------------------------------------
|
|--------------------------------------------------------------------------
|
||||||
| The default layout view that will be used when rendering a component via
|
| The default layout view that will be used when rendering a component via
|
||||||
| Route::get('/some-endpoint', SomeComponent::class);. In this case the
|
| Route::get('/some-endpoint', SomeComponent::class);. In this case the
|
||||||
| the view returned by SomeComponent will be wrapped in "layouts.app"
|
| the view returned by SomeComponent will be wrapped in "components.layouts.app"
|
||||||
|
|
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'layout' => 'layouts.app',
|
'layout' => 'components.layouts.app',
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|--------------------------------------------------------------------------
|
|--------------------------------------------------------------------------
|
||||||
|
|||||||
@@ -396,7 +396,7 @@
|
|||||||
"Rotate -90": "Rotar -90",
|
"Rotate -90": "Rotar -90",
|
||||||
"Rotate +90": "Rotar +90",
|
"Rotate +90": "Rotar +90",
|
||||||
"Update": "Actualizar",
|
"Update": "Actualizar",
|
||||||
"Add New \".concat(e)):this.__(\"Upload New \".concat(e))},mustCrop:function(){return\"mustCrop\"in this.field&&this.field.mustCrop}},watch:{modelValue:function(e){this.images=e||[]},images:function(e,t){this.queueNewImages(e,t),this.$emit(\"update:modelValue": "Añadir nuevo \".concat(e)):this.__(\"Upload New \".concat(e))},mustCrop:function(){return\"mustCrop\"in this.field&&this.field.mustCrop}},watch:{modelValue:function(e){this.images=e||[]},images:function(e,t){this.queueNewImages(e,t),this.$emit(\"update:modelValue",
|
"Add New \".concat(e)):this.__(\"Upload New \".concat(e))},mustCrop:function(){return\"mustCrop\"in this.field&&this.field.mustCrop}},watch:{modelValue:function(e){this.images=e||[]},images:function(e,t){this.queueNewImages(e,t),this.$dispatch(\"update:modelValue": "Añadir nuevo \".concat(e)):this.__(\"Upload New \".concat(e))},mustCrop:function(){return\"mustCrop\"in this.field&&this.field.mustCrop}},watch:{modelValue:function(e){this.images=e||[]},images:function(e,t){this.queueNewImages(e,t),this.$emit(\"update:modelValue",
|
||||||
"Maximum file size is :amount MB": "El tamaño máximo del archivo es :amount MB",
|
"Maximum file size is :amount MB": "El tamaño máximo del archivo es :amount MB",
|
||||||
"File type must be: :types": "El tipo de archivo debe ser: :types",
|
"File type must be: :types": "El tipo de archivo debe ser: :types",
|
||||||
"Uploading": "Cargando",
|
"Uploading": "Cargando",
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<div class="flex space-x-6">
|
<div class="flex space-x-6">
|
||||||
<h1 class="text-4xl text-white py-8">Sent from my #₿indle🧡</h1>
|
<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>
|
</div>
|
||||||
|
|
||||||
<ul role="list"
|
<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>
|
</span>
|
||||||
|
|
||||||
@once
|
@once
|
||||||
<x-jet-dialog-modal wire:model="confirmingPassword">
|
<x-jet-dialog-modal wire:model.live="confirmingPassword">
|
||||||
<x-slot name="title">
|
<x-slot name="title">
|
||||||
{{ $title }}
|
{{ $title }}
|
||||||
</x-slot>
|
</x-slot>
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
<div class="mt-4" x-data="{}" x-on:confirming-password.window="setTimeout(() => $refs.confirmable_password.focus(), 250)">
|
<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-jet-input type="password" class="mt-1 block w-3/4" placeholder="{{ __('Password') }}"
|
||||||
x-ref="confirmable_password"
|
x-ref="confirmable_password"
|
||||||
wire:model.defer="confirmablePassword"
|
wire:model="confirmablePassword"
|
||||||
wire:keydown.enter="confirmPassword" />
|
wire:keydown.enter="confirmPassword" />
|
||||||
|
|
||||||
<x-jet-input-error for="confirmable_password" class="mt-2" />
|
<x-jet-input-error for="confirmable_password" class="mt-2" />
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
</x-jet-section-title>
|
</x-jet-section-title>
|
||||||
|
|
||||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
<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="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">
|
<div class="grid grid-cols-6 gap-6">
|
||||||
{{ $form }}
|
{{ $form }}
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ $maxWidth = [
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
x-data="{
|
x-data="{
|
||||||
show: @entangle($attributes->wire('model')).defer,
|
show: @entangle($attributes->wire('model')),
|
||||||
focusables() {
|
focusables() {
|
||||||
// All focusable element types...
|
// All focusable element types...
|
||||||
let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
|
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>
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user