update: make tabs alpine component csp-safe

resources/js/components/alpine/tabs.js

@@ -1,9 +1,6 @@
 document.addEventListener('alpine:init', () => {
-    Alpine.data('tabs', () => ({
-        tab: null,
-        init() {
-            this.tab = this.$root.dataset.defaultTab;
-        },
+    Alpine.data('tabs', (defaultTab) => ({
+        tab: defaultTab,
         tabButton: {
             ['x-on:click']() {
                 this.tab = this.$el.dataset.tab;
@@ -12,7 +9,7 @@ document.addEventListener('alpine:init', () => {
                 return 'tab';
             },
             ['x-bind:class']() {
-                return this.tab === this.$el.dataset.tab
+                return String(this.tab) === this.$el.dataset.tab
                     ? 'panel__tab panel__tab--active'
                     : 'panel__tab';
             },

resources/views/livewire/conversation-search.blade.php

@@ -1,4 +1,4 @@
-<section class="panelV2" x-data="{ tab: @entangle('tab').live }">
+<section class="panelV2" x-data="tabs($wire.entangle('tab').live)">
     <header class="panel__header">
         <h2 class="panel__heading">{{ __('pm.inbox') }}</h2>
         <div class="panel__actions">
@@ -51,36 +51,16 @@
         </div>
     </header>
     <menu class="panel__tabs panel__tabs--centered">
-        <li
-            class="panel__tab panel__tab--full-width"
-            role="tab"
-            x-bind:class="tab === 'all' && 'panel__tab--active'"
-            x-on:click="tab = 'all'"
-        >
+        <li class="panel__tab--full-width" x-bind="tabButton" data-tab="all">
             {{ __('stat.all') }}
         </li>
-        <li
-            class="panel__tab panel__tab--full-width"
-            role="tab"
-            x-bind:class="tab === 'unread' && 'panel__tab--active'"
-            x-on:click="tab = 'unread'"
-        >
+        <li class="panel__tab--full-width" x-bind="tabButton" data-tab="unread">
             {{ __('pm.unread') }}
         </li>
-        <li
-            class="panel__tab panel__tab--full-width"
-            role="tab"
-            x-bind:class="tab === 'inbox' && 'panel__tab--active'"
-            x-on:click="tab = 'inbox'"
-        >
+        <li class="panel__tab--full-width" x-bind="tabButton" data-tab="inbox">
             {{ __('pm.inbox') }}
         </li>
-        <li
-            class="panel__tab panel__tab--full-width"
-            role="tab"
-            x-bind:class="tab === 'outbox' && 'panel__tab--active'"
-            x-on:click="tab = 'outbox'"
-        >
+        <li class="panel__tab--full-width" x-bind="tabButton" data-tab="outbox">
             {{ __('pm.outbox') }}
         </li>
     </menu>

resources/views/livewire/ticket-search.blade.php

@@ -1,4 +1,4 @@
-<section class="panelV2" x-data="{ tab: @entangle('tab').live }">
+<section class="panelV2" x-data="tabs($wire.entangle('tab').live)">
     <header class="panel__header">
         <h2 class="panel__heading">{{ __('ticket.helpdesk') }}</h2>
         <div class="panel__actions">
@@ -51,22 +51,8 @@
         </div>
     </header>
     <menu class="panel__tabs panel__tabs--centered">
-        <li
-            class="panel__tab panel__tab--full-width"
-            role="tab"
-            x-bind:class="tab === 'open' && 'panel__tab--active'"
-            x-on:click="tab = 'open'"
-        >
-            Open
-        </li>
-        <li
-            class="panel__tab panel__tab--full-width"
-            role="tab"
-            x-bind:class="tab === 'closed' && 'panel__tab--active'"
-            x-on:click="tab = 'closed'"
-        >
-            Closed
-        </li>
+        <li class="panel__tab--full-width" x-bind="tabButton" data-tab="open">Open</li>
+        <li class="panel__tab--full-width" x-bind="tabButton" data-tab="closed">Closed</li>
     </menu>
     <div class="data-table-wrapper">
         <table class="data-table">

resources/views/livewire/tmdb-person-credit.blade.php

@@ -1,102 +1,82 @@
-<section class="panelV2" x-data="{ tab: @entangle('occupationId').live }">
+<section class="panelV2" x-data="tabs($wire.entangle('occupationId').live)">
     <h2 class="panel__heading">{{ __('torrent.torrents') }}</h2>
     <menu class="panel__tabs">
         <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === {{ App\Enums\Occupation::CREATOR->value }} && 'panel__tab--active'"
+            x-bind="tabButton"
             x-cloak
-            x-on:click="tab = {{ App\Enums\Occupation::CREATOR->value }}"
+            data-tab="{{ App\Enums\Occupation::CREATOR->value }}"
             x-show="{{ $createdCount }} > 0"
         >
             Creator ({{ $createdCount }})
         </li>
         <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === {{ App\Enums\Occupation::DIRECTOR->value }} && 'panel__tab--active'"
+            x-bind="tabButton"
             x-cloak
-            x-on:click="tab = {{ App\Enums\Occupation::DIRECTOR->value }}"
+            data-tab="{{ App\Enums\Occupation::DIRECTOR->value }}"
             x-show="{{ $directedCount }} > 0"
         >
             Director ({{ $directedCount }})
         </li>
         <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === {{ App\Enums\Occupation::WRITER->value }} && 'panel__tab--active'"
+            x-bind="tabButton"
             x-cloak
-            x-on:click="tab = {{ App\Enums\Occupation::WRITER->value }}"
+            data-tab="{{ App\Enums\Occupation::WRITER->value }}"
             x-show="{{ $writtenCount }} > 0"
         >
             Writer ({{ $writtenCount }})
         </li>
         <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === {{ App\Enums\Occupation::PRODUCER->value }} && 'panel__tab--active'"
+            x-bind="tabButton"
             x-cloak
-            x-on:click="tab = {{ App\Enums\Occupation::PRODUCER->value }}"
+            data-tab="{{ App\Enums\Occupation::PRODUCER->value }}"
             x-show="{{ $producedCount }} > 0"
         >
             Producer ({{ $producedCount }})
         </li>
         <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === {{ App\Enums\Occupation::COMPOSER->value }} && 'panel__tab--active'"
+            x-bind="tabButton"
             x-cloak
-            x-on:click="tab = {{ App\Enums\Occupation::COMPOSER->value }}"
+            data-tab="{{ App\Enums\Occupation::COMPOSER->value }}"
             x-show="{{ $composedCount }} > 0"
         >
             Composer ({{ $composedCount }})
         </li>
         <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === {{ App\Enums\Occupation::CINEMATOGRAPHER->value }} && 'panel__tab--active'"
+            x-bind="tabButton"
             x-cloak
-            x-on:click="tab = {{ App\Enums\Occupation::CINEMATOGRAPHER->value }}"
+            data-tab="{{ App\Enums\Occupation::CINEMATOGRAPHER->value }}"
             x-show="{{ $cinematographedCount }} > 0"
         >
             Cinematographer ({{ $cinematographedCount }})
         </li>
         <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === {{ App\Enums\Occupation::EDITOR->value }} && 'panel__tab--active'"
+            x-bind="tabButton"
             x-cloak
-            x-on:click="tab = {{ App\Enums\Occupation::EDITOR->value }}"
+            data-tab="{{ App\Enums\Occupation::EDITOR->value }}"
             x-show="{{ $editedCount }} > 0"
         >
             Editor ({{ $editedCount }})
         </li>
         <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === {{ App\Enums\Occupation::PRODUCTION_DESIGNER->value }} && 'panel__tab--active'"
+            x-bind="tabButton"
             x-cloak
-            x-on:click="tab = {{ App\Enums\Occupation::PRODUCTION_DESIGNER->value }}"
+            data-tab="{{ App\Enums\Occupation::PRODUCTION_DESIGNER->value }}"
             x-show="{{ $productionDesignedCount }} > 0"
         >
             Production designer ({{ $productionDesignedCount }})
         </li>
         <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === {{ App\Enums\Occupation::ART_DIRECTOR->value }} && 'panel__tab--active'"
+            x-bind="tabButton"
             x-cloak
-            x-on:click="tab = {{ App\Enums\Occupation::ART_DIRECTOR->value }}"
+            data-tab="{{ App\Enums\Occupation::ART_DIRECTOR->value }}"
             x-show="{{ $artDirectedCount }} > 0"
         >
             Art director ({{ $artDirectedCount }})
         </li>
         <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === {{ App\Enums\Occupation::ACTOR->value }} && 'panel__tab--active'"
+            x-bind="tabButton"
             x-cloak
-            x-on:click="tab = {{ App\Enums\Occupation::ACTOR->value }}"
+            data-tab="{{ App\Enums\Occupation::ACTOR->value }}"
             x-show="{{ $actedCount }} > 0"
         >
             Actor ({{ $actedCount }})

resources/views/livewire/top-torrents.blade.php

@@ -1,4 +1,4 @@
-<section class="panelV2 blocks__top-torrents" x-data="{ tab: @entangle('tab').live }">
+<section class="panelV2 blocks__top-torrents" x-data="tabs($wire.entangle('tab').live)">
     <header class="panel__header">
         <h2 class="panel__heading">
             {{ __('blocks.top-torrents') }}
@@ -13,44 +13,19 @@
         </div>
     </header>
     <menu class="panel__tabs">
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'newest' && 'panel__tab--active'"
-            x-on:click="tab = 'newest'"
-        >
+        <li x-bind="tabButton" data-tab="newest">
             {{ __('blocks.new-torrents') }}
         </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'seeded' && 'panel__tab--active'"
-            x-on:click="tab = 'seeded'"
-        >
+        <li x-bind="tabButton" data-tab="seeded">
             {{ __('torrent.top-seeded') }}
         </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'leeched' && 'panel__tab--active'"
-            x-on:click="tab = 'leeched'"
-        >
+        <li x-bind="tabButton" data-tab="leeched">
             {{ __('torrent.top-leeched') }}
         </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'dying' && 'panel__tab--active'"
-            x-on:click="tab = 'dying'"
-        >
+        <li x-bind="tabButton" data-tab="dying">
             {{ __('torrent.dying-torrents') }}
         </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'dead' && 'panel__tab--active'"
-            x-on:click="tab = 'dead'"
-        >
+        <li x-bind="tabButton" data-tab="dead">
             {{ __('torrent.dead-torrents') }}
         </li>
     </menu>

resources/views/livewire/top-users.blade.php

@@ -1,105 +1,21 @@
-<section class="panelV2 blocks__uploaders" x-data="{ tab: @entangle('tab').live }">
+<section class="panelV2 blocks__uploaders" x-data="tabs($wire.entangle('tab').live)">
     <h2 class="panel__heading">Top users</h2>
     <menu class="panel__tabs">
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'uploaders' && 'panel__tab--active'"
-            x-on:click="tab = 'uploaders'"
-        >
-            Uploaders
-        </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'downloaders' && 'panel__tab--active'"
-            x-on:click="tab = 'downloaders'"
-        >
-            Downloaders
-        </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'uploaded' && 'panel__tab--active'"
-            x-on:click="tab = 'uploaded'"
-        >
-            Uploaded
-        </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'downloaded' && 'panel__tab--active'"
-            x-on:click="tab = 'downloaded'"
-        >
-            Downloaded
-        </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'seeders' && 'panel__tab--active'"
-            x-on:click="tab = 'seeders'"
-        >
-            Seeders
-        </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'seedtime' && 'panel__tab--active'"
-            x-on:click="tab = 'seedtime'"
-        >
-            Seedtime
-        </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'served' && 'panel__tab--active'"
-            x-on:click="tab = 'served'"
-        >
-            Users served
-        </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'commenters' && 'panel__tab--active'"
-            x-on:click="tab = 'commenters'"
-        >
-            Commenters
-        </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'posters' && 'panel__tab--active'"
-            x-on:click="tab = 'posters'"
-        >
-            Posters
-        </li>
+        <li x-bind="tabButton" data-tab="uploaders">Uploaders</li>
+        <li x-bind="tabButton" data-tab="downloaders">Downloaders</li>
+        <li x-bind="tabButton" data-tab="uploaded">Uploaded</li>
+        <li x-bind="tabButton" data-tab="downloaded">Downloaded</li>
+        <li x-bind="tabButton" data-tab="seeders">Seeders</li>
+        <li x-bind="tabButton" data-tab="seedtime">Seedtime</li>
+        <li x-bind="tabButton" data-tab="served">Users served</li>
+        <li x-bind="tabButton" data-tab="commenters">Commenters</li>
+        <li x-bind="tabButton" data-tab="posters">Posters</li>
         @if (config('other.thanks-system.is-enabled'))
-            <li
-                class="panel__tab"
-                role="tab"
-                x-bind:class="tab === 'thanked' && 'panel__tab--active'"
-                x-on:click="tab = 'thanked'"
-            >
-                Thanked
-            </li>
-            <li
-                class="panel__tab"
-                role="tab"
-                x-bind:class="tab === 'thankers' && 'panel__tab--active'"
-                x-on:click="tab = 'thankers'"
-            >
-                Thankers
-            </li>
+            <li x-bind="tabButton" data-tab="thanked">Thanked</li>
+            <li x-bind="tabButton" data-tab="thankers">Thankers</li>
         @endif
 
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'personals' && 'panel__tab--active'"
-            x-on:click="tab = 'personals'"
-        >
-            Personal releases
-        </li>
+        <li x-bind="tabButton" data-tab="personals">Personal releases</li>
     </menu>
     <div class="panel__body" wire:loading.block>Loading...</div>
     <div class="panel__body" wire:loading.remove>

resources/views/livewire/user-warnings.blade.php

@@ -1,4 +1,4 @@
-<section class="panelV2" x-data="{ tab: @entangle('warningTab').live }">
+<section class="panelV2" x-data="tabs($wire.entangle('warningTab').live)">
     <header class="panel__header">
         <h2 class="panel__heading">{{ __('user.warnings') }}</h2>
         @if (auth()->user()->group->is_modo)
@@ -66,28 +66,11 @@
         @endif
     </header>
     <menu class="panel__tabs">
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'automated' && 'panel__tab--active'"
-            x-on:click="tab = 'automated'"
-        >
+        <li x-bind="tabButton" data-tab="automated">
             Automated ({{ $automatedWarningsCount ?? 0 }})
         </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'manual' && 'panel__tab--active'"
-            x-on:click="tab = 'manual'"
-        >
-            Manual ({{ $manualWarningsCount ?? 0 }})
-        </li>
-        <li
-            class="panel__tab"
-            role="tab"
-            x-bind:class="tab === 'deleted' && 'panel__tab--active'"
-            x-on:click="tab = 'deleted'"
-        >
+        <li x-bind="tabButton" data-tab="manual">Manual ({{ $manualWarningsCount ?? 0 }})</li>
+        <li x-bind="tabButton" data-tab="deleted">
             Soft deleted ({{ $deletedWarningsCount ?? 0 }})
         </li>
     </menu>

resources/views/torrent/partials/buttons.blade.php

@@ -192,7 +192,7 @@
                     </div>
                 @endif
             </header>
-            <div x-bind="dialogForm" x-data="tabs" data-default-tab="hierarchy">
+            <div x-bind="dialogForm" x-data="tabs('hierarchy')">
                 <menu class="panel__tabs">
                     <li x-bind="tabButton" data-tab="hierarchy">Hierarchy</li>
                     <li x-bind="tabButton" data-tab="list">List</li>

resources/views/torrent/partials/extra-meta.blade.php

@@ -1,4 +1,4 @@
-<section class="panelV2" x-data="tabs" data-default-tab="also-downloaded" id="tab_wrapper">
+<section class="panelV2" x-data="tabs('also-downloaded')" id="tab_wrapper">
     <header class="panel__header">
         <h2 class="panel__heading">Relations</h2>
         <div class="panel__actions" x-data="posterRow">