Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add all files

Browse Source
This commit is contained in:
root
2025-11-30 11:57:22 +01:00
parent 2ee51cac4f
commit 044271db3d
1476 changed files with 142544 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
themes/default/views/components/form/configoption.blade.php Normal file
View File

@@ -0,0 +1,115 @@
<div class="flex flex-col gap-1">
@switch($config->type)
@case('select')
<x-form.select name="{{ $name }}" :label="__($config->label ?? $config->name)" :required="$config->required ?? false"
:selected="config('configs.' . $config->name)" :multiple="$config->multiple ?? false"
wire:model.live="{{ $name }}" :placeholder="$config->placeholder ?? ''">
{{ $slot }}
</x-form.select>
@break
@case('slider')
<div x-data="{
options: @js($config->children->map(fn($child) => ['option' => $child->name, 'value' => $child->id, 'price' => ($showPriceTag && $child->price(billing_period: $plan->billing_period, billing_unit: $plan->billing_unit)->available) ? (string)$child->price(billing_period: $plan->billing_period, billing_unit: $plan->billing_unit) : ''])),
showPriceTag: @js($showPriceTag),
selectedOption: 0,
backendOption: $wire.entangle('{{ $name }}').live,
progressOption: '0%',
segmentsWidthOption: '0%',
init() {
const initialValue = this.$wire.get('{{ $name }}');
const foundIndex = this.options.findIndex(plan => plan.value == initialValue);
if (foundIndex !== -1) {
this.selectedOption = foundIndex;
}
this.updateSliderVisuals();
$watch('selectedOption', Alpine.debounce(() => this.backendOption = this.options[this.selectedOption].value, 300))
},
updateSliderVisuals() {
this.progressOption = `${(this.selectedOption / (this.options.length - 1)) * 100}%`;
this.segmentsWidthOption = `${100 / (this.options.length - 1)}%`;
},
setOptionValue(index) {
this.selectedOption = parseInt(index);
this.updateSliderVisuals();
}
}" class="flex flex-col gap-1 relative">
<label for="{{ $name }}"
class="text-sm text-primary-100 w-fit start-1 ml-2 bg-background-secondary rounded-md px-2">
{{ $config->label ?? $config->name }}
</label>
<div class="relative flex items-center" :style="`--progress:${progressOption};--segments-width:${segmentsWidthOption}`" wire:ignore>
<div class="
absolute left-2.5 right-2.5 h-1.5 bg-background-secondary rounded-full overflow-hidden transition-all duration-500 ease-in-out
before:absolute before:inset-0 before:bg-primary
before:[mask-image:_linear-gradient(to_right,theme(colors.white),theme(colors.white)_var(--progress),transparent_var(--progress))]
[&[x-cloak]]:hidden" aria-hidden="true" x-cloak></div>
<input class="
relative appearance-none cursor-pointer w-full bg-transparent focus:outline-none transition-all duration-500 ease-in-out
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-none
[&::-webkit-slider-thumb]:focus:ring-0 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5
[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-base [&::-moz-range-thumb]:border-none
[&::-moz-range-thumb]:shadow-none [&::-moz-range-thumb]:focus:ring-0
" type="range" min="0" :max="options.length - 1" x-model="selectedOption" @input="setOptionValue(selectedOption)" aria-label="Option Slider" name="{{ $name }}" id="{{ $name }}" />
</div>
<!-- Options -->
<ul class="flex justify-between text-xs font-medium text-light px-2.5">
@foreach($config->children as $child)
<li class="relative @if($showPriceTag) pb-7 @else pb-2 @endif">
<button @click="setOptionValue({{ $loop->index }})" class="absolute flex flex-col items-center -translate-x-1/2">
<span class="text-sm font-semibold">
{{ $child->name }}
</span>
@if($showPriceTag)
<span class="text-sm font-semibold">
{{ ($showPriceTag && $child->price(billing_period: $plan->billing_period, billing_unit: $plan->billing_unit)->available) ? $child->price(billing_period: $plan->billing_period, billing_unit: $plan->billing_unit) : '' }}
</span>
@endif
</button>
</li>
@endforeach
</ul>
</div>
@break
@case('text')
@case('password')
@case('email')
@case('number')
@case('color')
@case('file')
<x-form.input name="{{ $name }}" :type="$config->type" :label="__($config->label ?? $config->name)"
:placeholder="$config->default ?? ''" :required="$config->required ?? false" wire:model.live="{{ $name }}" :placeholder="$config->placeholder ?? ''" />
@break
@case('checkbox')
<x-form.checkbox name="{{ $name }}" type="checkbox" :label="__($config->label ?? $config->name)"
:required="$config->required ?? false" :checked="config('configs.' . $config->name) ? true : false" wire:model.live="{{ $name }}" />
@break
@case('radio')
<x-form.radio name="{{ $name }}" :label="__($config->label ?? $config->name)"
:selected="config('configs.' . $config->name)" :required="$config->required ?? false" wire:model.live="{{ $name }}">
{{ $slot }}
</x-form.radio>
@break
@default
@endswitch
@isset($config->description)
@isset($config->link)
<a href="{{ $config->link }}" class="text-xs text-primary-500 hover:underline hover:text-secondary group">
{{ $config->description }}
<x-ri-arrow-right-long-line class="ml-1 size-3 inline-block -rotate-45 group-hover:rotate-0 transition" />
</a>
@else
<p class="text-xs text-primary-500">{{ $config->description }}</p>
@endisset
@endisset
</div>