mkrieger/byos_laravel
1
0
Fork 0
mirror of https://github.com/usetrmnl/byos_laravel.git synced 2026-01-14 07:27:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: preview polling url tabs

Browse source
This commit is contained in:
jerremyng 2026-01-08 19:18:30 +00:00
parent 043f683db7
commit dab9fc705d
2 changed files with 78 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

26
resources/css/app.css
View file

@ -72,3 +72,29 @@ select:focus[data-flux-control] {
/* \[:where(&)\]:size-4 { /* \[:where(&)\]:size-4 {
@apply size-4; @apply size-4;
} */ } */
.tab-button {
@apply flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all;
@apply rounded-t-lg border-t border-x border-transparent;
/* This makes the button sit slightly over the box border */
margin-bottom: -1px;
position: relative;
z-index: 1;
}
.tab-button.is-active {
@apply text-white border-zinc-700;
/* Z-index 10 ensures the bottom border of the tab hides the top border of the box */
z-index: 10;
border-bottom: 1px solid theme('colors.zinc.800');
}
.tab-button:not(.is-active) {
@apply text-zinc-500;
}
.tab-button:not(.is-active):hover {
@apply bg-zinc-700/50 text-zinc-300 border-zinc-700/50;
cursor: pointer;
}

60
resources/views/livewire/plugins/recipe.blade.php
View file

@ -733,15 +733,62 @@ HTML;
</div> </div>
@if($data_strategy === 'polling') @if($data_strategy === 'polling')
<div class="mb-4"> <flux:label>Polling URL</flux:label>
<flux:textarea label="Polling URL" description="You can use configuration variables with Liquid syntax. Supports multiple requests via line break separation" wire:model="polling_url" id="polling_url"
<div x-data="{ subTab: 'settings' }" class="mt-2 mb-4">
<div class="flex">
<button
@click="subTab = 'settings'"
class="tab-button"
:class="subTab === 'settings' ? 'is-active' : ''"
>
<flux:icon.cog-6-tooth class="size-4"/>
Settings
</button>
<button
@click="subTab = 'preview'"
class="tab-button"
:class="subTab === 'preview' ? 'is-active' : ''"
>
<flux:icon.eye class="size-4" />
Preview URL
</button>
</div>
<div class="flex-col p-4 border border-zinc-700 rounded-b-xl rounded-tr-xl shadow-2xl">
<div x-show="subTab === 'settings'" x-transition:enter.opacity.duration.150ms>
<flux:field>
<flux:description>Enter the URL(s) to poll for data:</flux:description>
<flux:textarea
wire:model.live="polling_url"
placeholder="https://example.com/api" placeholder="https://example.com/api"
class="block w-full" type="text" name="polling_url" autofocus> rows="5"
</flux:input> />
<flux:button icon="cloud-arrow-down" wire:click="updateData" class="block mt-2 w-full"> <flux:description>
{!! 'Hint: Supports multiple requests via line break separation. You can also use configuration variables with <a href="https://help.usetrmnl.com/en/articles/12689499-dynamic-polling-urls">Liquid syntax</a>. ' !!}
</flux:description>
</flux:field>
</div>
<div x-show="subTab === 'preview'" x-cloak x-transition:enter.opacity.duration.150ms>
<flux:field>
<flux:description>Preview computed URLs here (readonly):</flux:description>
<flux:textarea
readonly
placeholder="Nothing to show..."
rows="5"
>
{{ $this->plugin->resolveLiquidVariables($this->polling_url) }}
</flux:textarea>
</flux:field>
</div>
<flux:button variant="primary" icon="cloud-arrow-down" wire:click="updateData" class="w-full mt-4">
Fetch data now Fetch data now
</flux:button> </flux:button>
</div> </div>
</div>
<div class="mb-4"> <div class="mb-4">
<flux:radio.group wire:model.live="polling_verb" label="Polling Verb" variant="segmented"> <flux:radio.group wire:model.live="polling_verb" label="Polling Verb" variant="segmented">
@ -905,9 +952,6 @@ HTML;
</div> </div>
</flux:field> </flux:field>
</div> </div>
@else @else
<div class="flex items-center gap-6 mb-4 mt-4"> <div class="flex items-center gap-6 mb-4 mt-4">