116 lines
4.8 KiB
Plaintext
116 lines
4.8 KiB
Plaintext
{{ define "hidden-field" -}}
|
||
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InputField*/ -}}
|
||
<input type="hidden" name="{{ .Name }}"
|
||
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
|
||
value="{{ .Val }}">
|
||
{{- end }}
|
||
|
||
{{ define "input-field" -}}
|
||
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InputField*/ -}}
|
||
<div class="input {{ if .Errors }}has-errors{{ end }}">
|
||
{{ if eq .Type "textarea" }}
|
||
<textarea name="{{ .Name }}" id="{{ .Name }}-field"
|
||
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
|
||
{{ if .Required }}required="required"{{ end }} placeholder="{{ .Label }}"
|
||
>{{ .Val }}</textarea>
|
||
{{ else }}
|
||
<input type="{{ .Type }}" name="{{ .Name }}" id="{{ .Name }}-field"
|
||
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
|
||
{{ if .Required }}required="required"{{ end }} value="{{ .Val }}" placeholder="{{ .Label }}">
|
||
{{ end }}
|
||
<label for="{{ .Name }}-field">{{ .Label }}</label>
|
||
{{- if .Errors }}
|
||
<ul>
|
||
{{- range $error := .Errors }}
|
||
<li>{{ . }}</li>
|
||
{{- end }}
|
||
</ul>
|
||
{{- end }}
|
||
</div>
|
||
{{- end }}
|
||
|
||
{{ define "hidden-select-field" -}}
|
||
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.SelectField*/ -}}
|
||
{{- range $selected := .Selected }}
|
||
<input type="hidden" name="{{ $.Name }}"
|
||
{{- range $attribute := $.Attributes }} {{$attribute}} {{ end }}
|
||
value="{{ . }}">
|
||
{{- end }}
|
||
{{- end }}
|
||
|
||
{{ define "select-field" -}}
|
||
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.SelectField*/ -}}
|
||
<div class="input{{ if .Errors }} has-errors{{ end }}"
|
||
{{- if .Multiple }}
|
||
x-data="{
|
||
options: [
|
||
{{- range $option := .Options }}
|
||
{ value: '{{ .Value }}', label: '{{ .Label }}', selected: {{ if $.IsSelected .Value }}true{{ else }}false{{ end }} },
|
||
{{- end }}
|
||
],
|
||
open: false,
|
||
init() {
|
||
$el.querySelector('select').remove();
|
||
},
|
||
}"
|
||
{{- end -}}
|
||
>
|
||
<select id="{{ .Name }}-field" name="{{ .Name }}"
|
||
{{- range $attribute := .Attributes }} {{$attribute}} {{ end -}}
|
||
{{ if .Multiple }} multiple="multiple"{{ end -}}
|
||
{{ if .Required }} required="required"{{ end -}}
|
||
>
|
||
{{- with .EmptyLabel }}
|
||
<option value="">{{ . }}</option>
|
||
{{- end}}
|
||
{{- $withinGroup := "" -}}
|
||
{{- range $option := .Options }}
|
||
{{- if ne .Group $withinGroup }}
|
||
{{- if ne $withinGroup "" }}
|
||
</optgroup>
|
||
{{ end }}
|
||
<optgroup label="{{ .Group }}">
|
||
{{- $withinGroup = .Group -}}
|
||
{{ end }}
|
||
<option value="{{ .Value }}"
|
||
{{- if $.IsSelected .Value }} selected="selected"{{ end }}>{{ .Label }}</option>
|
||
{{- end }}
|
||
{{- if ne $withinGroup "" }}
|
||
</optgroup>
|
||
{{- end }}
|
||
</select>
|
||
{{- if .Multiple }}
|
||
<template x-if="true">
|
||
<div class="multiselect">
|
||
<ul class="tags" :class="{'empty': options.filter(option => option.selected).length === 0}"
|
||
@click="open = !open" @click.away="open = false">
|
||
<template x-for="(option) in options.filter(option => option.selected)">
|
||
<li>
|
||
<input type="hidden" name="{{ .Name }}" :value="option.value">
|
||
<span x-text="option.label"></span>
|
||
<button type="button" @click.stop="option.selected = false">×</button>
|
||
</li>
|
||
</template>
|
||
</ul>
|
||
<ul class="options" x-show.transition="open">
|
||
<template x-for="(option) in options.filter(option => !option.selected)">
|
||
<li
|
||
x-text="option.label"
|
||
@click.stop="option.selected = true"
|
||
></li>
|
||
</template>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
{{ end -}}
|
||
<label for="{{ .Name }}-field">{{ .Label }}</label>
|
||
{{- if .Errors }}
|
||
<ul>
|
||
{{- range $error := .Errors }}
|
||
<li>{{ . }}</li>
|
||
{{- end }}
|
||
</ul>
|
||
{{- end }}
|
||
</div>
|
||
{{- end }}
|