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

149
themes/lucentui/views/components/form/configoption.blade.php Normal file
View File

@@ -0,0 +1,149 @@
<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>