Add all files

themes/default/views/components/form/checkbox.blade.php

@@ -0,0 +1,17 @@
+<div class="flex items-center {{ $divClass ?? '' }}">
+    {{-- <input type="hidden" name="{{ $name }}" value="0" /> --}}
+    <input type="checkbox" name="{{ $name }}" id="{{ $id ?? $name }}"
+        {{ $attributes->except(['label', 'name', 'id', 'class', 'divClass', 'required']) }}
+        class="form-checkbox size-4 text-primary rounded focus:ring-secondary hover:bg-secondary ring-offset-primary-800 focus:ring-2 bg-background-secondary border-neutral" />
+    <label class="ml-2 text-sm text-primary-100" for="{{ $id ?? $name }}">
+        @if(isset($label))
+            {{ $label }}
+        @else
+            {{ $slot }}
+        @endif
+    </label>
+
+    @error($name)
+        <p class="text-red-500 text-xs">{{ $message }}</p>
+    @enderror
+</div>

themes/default/views/components/form/configoption.blade.php

@@ -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>

themes/default/views/components/form/input.blade.php

@@ -0,0 +1,22 @@
+@props(['name', 'label' => null, 'required' => false, 'divClass' => null, 'class' => null,'placeholder' => null, 'id' => null, 'type' => null, 'hideRequiredIndicator' => false, 'dirty' => false])
+<fieldset class="flex flex-col relative mt-3 w-full {{ $divClass ?? '' }}">
+    @if ($label)
+        <legend>
+            <label for="{{ $name }}"
+                class="text-sm text-primary-100 absolute -translate-y-1/2 start-1 ml-1 bg-background-secondary px-2 rounded-md">
+                {{ $label }}
+                @if ($required && !$hideRequiredIndicator)
+                    <span class="text-red-500">*</span>
+                @endif
+            </label>
+        </legend>
+    @endif
+    <input type="{{ $type ?? 'text' }}" id="{{ $id ?? $name }}" name="{{ $name }}"
+        class="block w-full text-sm text-base bg-background-secondary border border-neutral rounded-md shadow-sm focus:outline-none transition-all duration-300 ease-in-out disabled:bg-background-secondary/50 disabled:cursor-not-allowed {{ $class ?? '' }} @if ($type !== 'color') px-2.5 py-2.5 @endif"
+        placeholder="{{ $placeholder ?? ($label ?? '') }}"
+        @if ($dirty && isset($attributes['wire:model'])) wire:dirty.class="!border-yellow-600" @endif
+        {{ $attributes->except(['placeholder', 'label', 'id', 'name', 'type', 'class', 'divClass', 'required', 'hideRequiredIndicator', 'dirty']) }} @required($required) />
+    @error($name)
+        <p class="text-red-500 text-xs">{{ $message }}</p>
+    @enderror
+</fieldset>

themes/default/views/components/form/properties.blade.php

@@ -0,0 +1,43 @@
+@props(['properties', 'custom_properties' => []])
+
+@foreach ($custom_properties as $property)
+    @switch($property->type)
+        @case('date')
+        @case('string')
+
+        @case('number')
+            <x-form.input :type="$property->type" name="properties.{{ $property->key }}" :label="$property->name" :required="$property->required"
+                wire:model="properties.{{ $property->key }}" :value="$properties[$property->key] ?? ''" />
+        @break
+
+        @case('checkbox')
+            <x-form.checkbox name="properties.{{ $property->key }}" :label="$property->name" :required="$property->required"
+                wire:model="properties.{{ $property->key }}" :checked="$properties[$property->key] ?? false" />
+        @break
+
+        @case('radio')
+            @foreach ($property->allowed_values as $value)
+                <div class="flex items-center">
+                    <input type="radio" value="{{ $value }}" name="properties.{{ $property->key }}" type="radio"
+                        @checked($properties[$property->key] === $value ?? false) label="{{ $value }}" @required($property->required)
+                        wire:model="properties.{{ $property->key }}"
+                        class="form-radio size-4 text-primary rounded-full focus:ring-secondary hover:bg-secondary ring-offset-primary-800 focus:ring-2 bg-background-secondary border-neutral" />
+                    <label class="ml-2 text-sm text-primary-100"
+                        for="properties.{{ $property->key }}">{{ $value }}</label>
+                </div>
+            @endforeach
+        @break
+
+        @case('select')
+            <x-form.select name="properties.{{ $property->key }}" :label="$property->name"
+                wire:model="properties.{{ $property->key }}" :required="$property->required" :options="$property->allowed_values" :selected="$properties[$property->key] ?? ''" />
+        @break
+
+        @case('text')
+            <x-form.textarea :type="$property->type" name="properties.{{ $property->key }}" :label="$property->name" :required="$property->required"
+                wire:model="properties.{{ $property->key }}">{{ $properties[$property->key] ?? '' }}</x-form.textarea>
+        @break
+
+        @default
+    @endswitch
+@endforeach

themes/default/views/components/form/radio.blade.php

@@ -0,0 +1,45 @@
+@props([
+'name',
+'label' => null,
+'options' => [],
+'selected' => null,
+'multiple' => false,
+'required' => false,
+'divClass' => null,
+'hideRequiredIndicator' => false,
+])
+<fieldset class="flex flex-col relative mt-3 w-full {{ $divClass ?? '' }}" name="{{ $name }}">
+    @if ($label)
+    <legend>
+        <label for="{{ $name }}"
+            class="text-sm text-primary-100 absolute -translate-y-1/2 start-1 ml-1 bg-background-secondary rounded-md px-2">
+            {{ $label }}
+            @if ($required && !$hideRequiredIndicator)
+            <span class="text-red-500">*</span>
+            @endif
+        </label>
+    </legend>
+    @endif
+
+    <div
+        class="block px-2.5 py-2.5 w-full text-sm text-primary-100 bg-background-secondary border-2 border-neutral rounded-md outline-none focus:outline-none focus:border-secondary transition-all duration-300 ease-in-out">
+        @if (count($options) == 0 && $slot)
+        {{ $slot }}
+        @else
+        @foreach ($options as $key => $option)
+        <div class="flex items-center gap-2">
+            <input type="radio" id="{{ $name }}_{{ $key }}" name="{{ $name }}"
+                value="{{ gettype($options) == 'array' ? $option : $key }}" {{ ($multiple && $selected ? in_array($key,
+                $selected) : $selected==$option) ? 'checked' : '' }} />
+            <label for="{{ $name }}_{{ $key }}">
+                {{ $option }}
+            </label>
+        </div>
+        @endforeach
+        @endif
+    </div>
+
+    @error($name)
+    <p class="text-red-500 text-xs">{{ $message }}</p>
+    @enderror
+</fieldset>

themes/default/views/components/form/select.blade.php

@@ -0,0 +1,46 @@
+@props([
+'name',
+'label' => null,
+'options' => [],
+'selected' => null,
+'multiple' => false,
+'required' => false,
+'divClass' => null,
+'hideRequiredIndicator' => false,
+])
+<fieldset class="flex flex-col relative mt-3 w-full {{ $divClass ?? '' }}">
+    @if ($label)
+    <legend>
+        <label for="{{ $name }}"
+            class="text-sm text-primary-100 absolute -translate-y-1/2 start-1 ml-1 bg-background-secondary rounded-md px-2">
+            {{ $label }}
+            @if ($required && !$hideRequiredIndicator)
+            <span class="text-red-500">*</span>
+            @endif
+        </label>
+    </legend>
+    @endif
+
+    <select id="{{ $id ?? $name }}" {{ $multiple ? 'multiple' : '' }} {{ $attributes->only(['required', 'wire:model',
+        'wire:dirty.class', 'wire:model.live']) }}
+        class="block px-2.5 py-2.5 w-full text-sm text-primary-100 bg-background-secondary border-2 border-neutral
+        rounded-md outline-none focus:outline-none focus:border-secondary transition-all duration-300 ease-in-out form-select">
+        @if (count($options) == 0 && $slot)
+        {{ $slot }}
+        @else
+        @foreach ($options as $key => $option)
+        <option value="{{ gettype($options) == 'array' ? $option : $key }}" {{ ($multiple && $selected ? in_array($key,
+            $selected) : $selected==$option) ? 'selected' : '' }}>
+            {{ $option }}</option>
+        @endforeach
+        @endif
+    </select>
+    @if ($multiple)
+    <p class="text-xs text-base">
+        {{ __('Pro tip: Hold down the Ctrl (Windows) / Command (Mac) button to select multiple options.') }}</p>
+    @endif
+
+    @error($name)
+    <p class="text-red-500 text-xs">{{ $message }}</p>
+    @enderror
+</fieldset>

themes/default/views/components/form/setting.blade.php

@@ -0,0 +1,38 @@
+<div class="flex flex-col gap-1">
+    @switch($setting->type)
+        @case('select')
+            <x-form.select name="fields.{{ $key }}.{{ $setting->name }}" :label="__($setting->label ?? $setting->name)" :required="$setting->required ?? false"
+                :options="$setting->options" :selected="config('settings.' . $setting->name)" :multiple="$setting->multiple ?? false"
+                wire:model="fields.{{ $key }}.{{ $setting->name }}" />
+        @break
+
+        @case('text')
+        @case('password')
+
+        @case('email')
+        @case('number')
+
+        @case('color')
+        @case('file')
+            <x-form.input name="fields.{{ $key }}.{{ $setting->name }}" :type="$setting->type" :label="__($setting->label ?? $setting->name)"
+                :placeholder="$setting->default ?? ''" :required="$setting->required ?? false" wire:model="fields.{{ $key }}.{{ $setting->name }}" />
+        @break
+
+        @case('checkbox')
+            <x-form.checkbox name="fields.{{ $key }}.{{ $setting->name }}" type="checkbox" :label="__($setting->label ?? $setting->name)"
+                :required="$setting->required ?? false" :checked="config('settings.' . $setting->name) ? true : false" wire:model="fields.{{ $key }}.{{ $setting->name }}" />
+        @break
+
+        @default
+    @endswitch
+    @isset($setting->description)
+        @isset($setting->link)
+            <a href="{{ $setting->link }}" class="text-xs text-primary-500 hover:underline hover:text-secondary group">
+                {{ $setting->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">{{ $setting->description }}</p>
+        @endisset
+    @endisset
+</div>

themes/default/views/components/form/textarea.blade.php

@@ -0,0 +1,33 @@
+@props([
+'name',
+'label' => null,
+'required' => false,
+'divClass' => null,
+'class' => null,
+'placeholder' => null,
+'id' => null,
+'type' => null,
+'hideRequiredIndicator' => false,
+'dirty' => false,
+])
+<fieldset class="flex flex-col relative mt-3 w-full {{ $divClass ?? '' }}">
+    @if ($label)
+    <legend>
+        <label for="{{ $name }}"
+            class="text-sm text-primary-100 absolute -translate-y-1/2 start-1 ml-1 bg-primary-800 px-2 rounded-md">
+            {{ $label }}
+            @if ($required && !$hideRequiredIndicator)
+            <span class="text-red-500">*</span>
+            @endif
+        </label>
+    </legend>
+    @endif
+    <textarea type="{{ $type ?? 'text' }}" id="{{ $id ?? $name }}" name="{{ $name }}"
+        class="block w-full text-sm text-primary-100 bg-primary-800 border-2 border-neutral rounded-md outline-none focus:outline-none focus:border-secondary transition-all duration-300 ease-in-out disabled:bg-primary-700 disabled:cursor-not-allowed {{ $class ?? '' }} @if ($type !== 'color') px-2.5 py-2.5 @endif"
+        placeholder="{{ $placeholder ?? ($label ?? '') }}" @if ($dirty && isset($attributes['wire:model']))
+        wire:dirty.class="!border-yellow-600" @endif {{ $attributes->except(['placeholder', 'label', 'id', 'name', 'type', 'class', 'divClass', 'required', 'hideRequiredIndicator', 'dirty']) }}
+        @required($required)>{{ $slot }}</textarea>
+    @error($name)
+    <p class="text-red-500 text-xs">{{ $message }}</p>
+    @enderror
+</fieldset>