149 lines
7.7 KiB
PHP
149 lines
7.7 KiB
PHP
<div class="space-y-4">
|
|
@switch($config->type)
|
|
@case('select')
|
|
<div class="group">
|
|
<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 ?? ''"
|
|
class="transition-all duration-300 focus:ring-2 focus:ring-primary focus:border-primary-500 rounded-xl"
|
|
>
|
|
{{ $slot }}
|
|
</x-form.select>
|
|
</div>
|
|
@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">
|
|
<div class="relative flex items-center" :style="`--progress:${progressOption};--segments-width:${segmentsWidthOption}`">
|
|
<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">
|
|
</div>
|
|
<!-- Options -->
|
|
<ul class="flex justify-between text-xs font-medium text-light px-2.5">
|
|
<template x-for="(plan, index) in options" :key="index">
|
|
<li class="relative @if($showPriceTag) pb-7 @else pb-2 @endif">
|
|
<button @click="setOptionValue(index)" class="fixed flex flex-col items-center -translate-x-1/2">
|
|
<span class="hidden lg:inline text-sm font-semibold" x-text="`${plan.option}`"></span>
|
|
<span class="hidden lg:inline text-sm font-semibold" x-text="`${plan.price}`"></span>
|
|
<span class="inline lg:hidden" x-text="`${plan.option}`"></span>
|
|
</button>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
@break
|
|
|
|
@case('text')
|
|
@case('password')
|
|
|
|
@case('email')
|
|
@case('number')
|
|
|
|
@case('color')
|
|
@case('file')
|
|
<div class="group">
|
|
<x-form.input
|
|
name="{{ $name }}"
|
|
:type="$config->type"
|
|
:label="__($config->label ?? $config->name)"
|
|
:placeholder="$config->placeholder ?? ($config->default ?? '')"
|
|
:required="$config->required ?? false"
|
|
wire:model.live="{{ $name }}"
|
|
class="transition-all duration-300 focus:ring-2 focus:ring-primary focus:border-primary rounded-xl border-2 border-gray hover:border-gray"
|
|
/>
|
|
</div>
|
|
@break
|
|
|
|
@case('checkbox')
|
|
<div class="group">
|
|
<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="{{ $name }}"
|
|
class="rounded-2xl border-2 border-gray-200 text-primary-600 focus:ring-primary focus:ring-2 transition-all duration-300"
|
|
/>
|
|
</div>
|
|
@break
|
|
|
|
@case('radio')
|
|
<div class="group">
|
|
<x-form.radio
|
|
name="{{ $name }}"
|
|
:label="__($config->label ?? $config->name)"
|
|
:selected="config('configs.' . $config->name)"
|
|
:required="$config->required ?? false"
|
|
wire:model="{{ $name }}"
|
|
class="border-2 border-gray-200 text-primary-600 focus:ring-primary focus:ring-2 transition-all duration-300"
|
|
>
|
|
{{ $slot }}
|
|
</x-form.radio>
|
|
</div>
|
|
@break
|
|
|
|
@default
|
|
<div class="p-4 bg-gray-50 rounded-xl border-2 border-dashed border-gray-300">
|
|
<p class="text-sm text-gray-500 text-center">Unsupported field type: {{ $config->type }}</p>
|
|
</div>
|
|
@endswitch
|
|
|
|
@if(isset($config->description))
|
|
<div class="mt-3">
|
|
@if(isset($config->link))
|
|
<a href="{{ $config->link }}"
|
|
class="inline-flex items-center text-sm text-primary-600 hover:text-primary-700 transition-colors duration-200 group">
|
|
<span class="mr-2">{{ $config->description }}</span>
|
|
<x-ri-arrow-right-long-line class="w-4 h-4 transform transition-transform duration-200 group-hover:translate-x-1" />
|
|
</a>
|
|
@else
|
|
<p class="text-sm text-gray-600 leading-relaxed">{{ $config->description }}</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endif
|
|
</div> |