89 lines
5.3 KiB
HTML
89 lines
5.3 KiB
HTML
{% 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, settings) %}
|
|
<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.id" x-model="data.{{name}}" {% if settings.after %} @change="{{settings.after}}" {% endif %} 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 %}
|