wi-events/views/macros.htm

{% macro field(context, name, label, required, type) %}
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
    <input name="{{name}}" type="{{type|default('text')}}" id="{{name}}" placeholder=" " class="bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full"  x-model="data.{{name}}" />
	<span
		class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0
        text-xs xs:text-sm peer-placeholder-shown:text-sm xs:peer-placeholder-shown:text-base peer-focus:text-xs xs:peer-focus:text-sm
        peer-focus:-top-3 peer-focus:bottom-auto "
        >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
	>
</label>
{% endmacro %}
{% macro textarea(context, name, label, required, type) %}
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
    <textarea name="{{name}}" rows="6" id="{{name}}" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full"  x-model="data.{{name}}">
    </textarea>
	<span
		class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-xs xs:text-sm"
        >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
	>
</label>
{% endmacro %}
{% macro select(context, name, label, required, options) %}
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" for="{{name}}">
    <select name="{{name}}" id="{{name}}" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full"  x-model="data.{{name}}">
        <option :selected="data.{{name}} === ''" value="">-- kein --</option>
        <template x-for="model in {{options}}">
            <option :selected="data.{{name}} === model.id" :value="model.id" x-text="model.name"></option>
        </template>
    </select>
	<span
		class="absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-xs xs:text-sm"
        >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
	>
</label>
{% endmacro %}
{% macro radio(context, name, label, required, options) %}
<div>
	<span
		class="text-gray-600 text-sm"
        >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
	>
    <div class="grid grid-cols-2 sm:grid-cols-1 gap-2">
        <template x-for="option, index in {{options}}">
            <label :for="`{{name}}-${index}`" class="block relative flex items-center">
                <input type="radio" name="{{name}}" :value="option.name" x-model="data.{{name}}" class="peer absolute invisible" :id="`{{name}}-${index}`" />
                <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
                <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
                <span class="pl-8" x-text="option.name"></span>
            </label>
        </template>
    </div>
</div>
{% endmacro %}
{% macro yesno(context, name, label, required) %}
<div>
    <div class="flex flex-col space-y-1">
        <label for="{{name}}" class="block relative flex items-center">
            <input type="checkbox" name="{{name}}" x-model="data.{{name}}" class="peer absolute invisible" id="{{name}}" />
            <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
            <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-sm block"></span>
            <span class="pl-8 text-sm">{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span>
        </label>
    </div>
</div>
{% endmacro %}
{% macro checkboxes(context, name, label, required, options) %}
<div>
	<span
		class="text-gray-600 flex text-sm"
        >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
	>
    <div class="mt-2 grid gap-2">
        <template x-for="option, index in {{options}}">
            <label :for="`{{name}}-${index}`" class="block relative flex items-center">
                <input type="checkbox" name="{{name}}[]" :value="option.name" x-model="data.{{name}}" class="peer absolute invisible" :id="`{{name}}-${index}`" />
                <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
                <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-sm block"></span>
                <span class="pl-8 text-sm sm:text-base flex flex-col">
                    <span x-text="option.name" class="block" class="leading-none"></span>
                    <template x-if="option.hint">
                    <span class="text-xs leading-none text-gray-500" x-text="option.hint"></span>
                    </template>
                </span>
            </label>
        </template>
    </div>
</div>
{% endmacro %}