form generator
This commit is contained in:
JACS
parent
80ae1c4f91
commit
58bd5490e2
7 changed files with 593 additions and 2 deletions
4
.env-dev
4
.env-dev
|
|
@ -5,7 +5,7 @@ APP_NAME=Tabler
|
|||
APP_ENV=local # local | testing | production
|
||||
APP_DEBUG_MODE=true
|
||||
App_HTTP_HOST=localhost
|
||||
App_HTTP_PORT=8080
|
||||
App_HTTP_PORT=8081
|
||||
App_USE_HTTPS=false
|
||||
App_USE_LETSENCRYPT=false
|
||||
App_USE_CORESERVICES=true
|
||||
|
|
@ -60,7 +60,7 @@ CACHE_DRIVER=redis
|
|||
REDIS_HOST=localhost
|
||||
REDIS_PORT=6379
|
||||
REDIS_PASSWORD=
|
||||
REDIS_DB=1
|
||||
REDIS_DB=2
|
||||
|
||||
#######################################
|
||||
###### Emails ######
|
||||
|
|
|
|||
|
|
@ -310,3 +310,258 @@ func TablerHome(c *core.Context) *core.Response {
|
|||
}
|
||||
return c.Response.Template("tabler_homepage.html", data)
|
||||
}
|
||||
|
||||
// DemoForm1 renders the sample contact form using the form generator.
|
||||
func DemoForm1(c *core.Context) *core.Response {
|
||||
type demoForm1Data struct {
|
||||
TablerPageData
|
||||
FormDefinition FormtablerFormDefinition
|
||||
}
|
||||
data := demoForm1Data{
|
||||
TablerPageData: TablerPageData{
|
||||
PageTitle: "Demo Form 1",
|
||||
PageDescription: "Sample contact form generated from JSON definition",
|
||||
ShowTopbar: true,
|
||||
Sidebar: false,
|
||||
PageHeader: "Contact Form",
|
||||
PagePretitle: "Demo Form Generator",
|
||||
UserName: "Jane Doe",
|
||||
UserRole: "Administrator",
|
||||
NavbarMenu: SampleNavbarMenu(),
|
||||
},
|
||||
FormDefinition: FormtablerFormDefinition{
|
||||
ID: "contact-form",
|
||||
Title: "Contact us",
|
||||
SuccessMessage: "Thanks! We'll get back to you soon.",
|
||||
Method: "POST",
|
||||
Fields: []FormtablerFormField{
|
||||
{
|
||||
Name: "name",
|
||||
Label: "Name",
|
||||
Type: "text",
|
||||
Required: true,
|
||||
Placeholder: "Jane Doe",
|
||||
},
|
||||
{
|
||||
Name: "email",
|
||||
Label: "Email",
|
||||
Type: "email",
|
||||
Required: true,
|
||||
Placeholder: "jane@example.com",
|
||||
},
|
||||
{
|
||||
Name: "phone",
|
||||
Label: "Phone",
|
||||
Type: "phone",
|
||||
Required: false,
|
||||
Placeholder: "+1 555 000 0000",
|
||||
},
|
||||
{
|
||||
Name: "message",
|
||||
Label: "Message",
|
||||
Type: "textarea",
|
||||
Required: true,
|
||||
Placeholder: "How can we help?",
|
||||
MaxLength: 1000,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
return c.Response.Template("apptabler_demoform.html", data)
|
||||
}
|
||||
|
||||
// DemoForm2 renders an advanced form using all available field types.
|
||||
func DemoForm2(c *core.Context) *core.Response {
|
||||
type demoForm2Data struct {
|
||||
TablerPageData
|
||||
FormDefinition FormtablerFormDefinition
|
||||
}
|
||||
data := demoForm2Data{
|
||||
TablerPageData: TablerPageData{
|
||||
PageTitle: "Demo Form 2",
|
||||
PageDescription: "Advanced form with all field types",
|
||||
ShowTopbar: true,
|
||||
Sidebar: false,
|
||||
PageHeader: "Advanced Registration Form",
|
||||
PagePretitle: "Demo Form Generator",
|
||||
UserName: "Jane Doe",
|
||||
UserRole: "Administrator",
|
||||
NavbarMenu: SampleNavbarMenu(),
|
||||
},
|
||||
FormDefinition: FormtablerFormDefinition{
|
||||
ID: "advanced-registration",
|
||||
Title: "User Registration",
|
||||
SuccessMessage: "Registration submitted successfully! We'll review your application.",
|
||||
Method: "POST",
|
||||
Columns: 3,
|
||||
FieldsetTitle: "Personal Information",
|
||||
FieldsetDescription: "Please fill in all required fields marked with an asterisk (*).",
|
||||
Fields: []FormtablerFormField{
|
||||
{
|
||||
Name: "first_name",
|
||||
Label: "First Name",
|
||||
Type: "text",
|
||||
Required: true,
|
||||
Placeholder: "John",
|
||||
MinLength: 2,
|
||||
MaxLength: 50,
|
||||
Autofocus: true,
|
||||
},
|
||||
{
|
||||
Name: "last_name",
|
||||
Label: "Last Name",
|
||||
Type: "text",
|
||||
Required: true,
|
||||
Placeholder: "Doe",
|
||||
MinLength: 2,
|
||||
MaxLength: 50,
|
||||
},
|
||||
{
|
||||
Name: "email",
|
||||
Label: "Email Address",
|
||||
Type: "email",
|
||||
Required: true,
|
||||
Placeholder: "john.doe@example.com",
|
||||
},
|
||||
{
|
||||
Name: "phone",
|
||||
Label: "Phone Number",
|
||||
Type: "phone",
|
||||
Required: true,
|
||||
Placeholder: "+1 (555) 000-0000",
|
||||
HelpText: "Include country code for international numbers.",
|
||||
},
|
||||
{
|
||||
Name: "account_type",
|
||||
Label: "Account Type",
|
||||
Type: "select",
|
||||
Required: true,
|
||||
Options: []FormtablerFormFieldOption{
|
||||
{Label: "Personal", Value: "personal", Selected: true},
|
||||
{Label: "Business", Value: "business"},
|
||||
{Label: "Enterprise", Value: "enterprise"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Name: "password",
|
||||
Label: "Password",
|
||||
Type: "password",
|
||||
Required: true,
|
||||
Placeholder: "••••••••",
|
||||
MinLength: 8,
|
||||
MaxLength: 128,
|
||||
HelpText: "At least 8 characters with uppercase, lowercase and numbers.",
|
||||
},
|
||||
{
|
||||
Name: "company",
|
||||
Label: "Company Name",
|
||||
Type: "text",
|
||||
Placeholder: "Acme Inc.",
|
||||
HelpText: "Only required for Business and Enterprise accounts.",
|
||||
},
|
||||
{
|
||||
Name: "website",
|
||||
Label: "Website",
|
||||
Type: "url",
|
||||
Placeholder: "https://example.com",
|
||||
},
|
||||
{
|
||||
Name: "bio",
|
||||
Label: "Biography",
|
||||
Type: "textarea",
|
||||
Placeholder: "Tell us about yourself...",
|
||||
MaxLength: 500,
|
||||
HelpText: "Maximum 500 characters.",
|
||||
},
|
||||
{
|
||||
Name: "birth_date",
|
||||
Label: "Date of Birth",
|
||||
Type: "date",
|
||||
},
|
||||
{
|
||||
Name: "preferred_language",
|
||||
Label: "Preferred Language",
|
||||
Type: "select",
|
||||
Options: []FormtablerFormFieldOption{
|
||||
{Label: "English", Value: "en", Selected: true},
|
||||
{Label: "Spanish", Value: "es"},
|
||||
{Label: "French", Value: "fr"},
|
||||
{Label: "German", Value: "de"},
|
||||
{Label: "Japanese", Value: "ja"},
|
||||
{Label: "Chinese", Value: "zh"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Name: "experience_level",
|
||||
Label: "Experience Level",
|
||||
Type: "radio",
|
||||
Required: true,
|
||||
Options: []FormtablerFormFieldOption{
|
||||
{Label: "Beginner", Value: "beginner", Checked: true},
|
||||
{Label: "Intermediate", Value: "intermediate"},
|
||||
{Label: "Advanced", Value: "advanced"},
|
||||
{Label: "Expert", Value: "expert"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Name: "skills",
|
||||
Label: "Skills & Technologies",
|
||||
Type: "checkbox",
|
||||
HelpText: "Select all that apply.",
|
||||
Options: []FormtablerFormFieldOption{
|
||||
{Label: "Go", Value: "go", Checked: true},
|
||||
{Label: "JavaScript", Value: "javascript", Checked: true},
|
||||
{Label: "Python", Value: "python"},
|
||||
{Label: "Rust", Value: "rust"},
|
||||
{Label: "Docker", Value: "docker"},
|
||||
{Label: "Kubernetes", Value: "kubernetes"},
|
||||
{Label: "PostgreSQL", Value: "postgresql"},
|
||||
{Label: "Redis", Value: "redis"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Name: "notifications",
|
||||
Label: "Email Notifications",
|
||||
Type: "toggle",
|
||||
HelpText: "Receive updates about new features and security alerts.",
|
||||
},
|
||||
{
|
||||
Name: "website_color",
|
||||
Label: "Preferred Accent Color",
|
||||
Type: "color",
|
||||
Value: "#206bc4",
|
||||
},
|
||||
{
|
||||
Name: "priority_level",
|
||||
Label: "Priority Level",
|
||||
Type: "range",
|
||||
Min: 1,
|
||||
Max: 10,
|
||||
Step: 1,
|
||||
Value: "5",
|
||||
HelpText: "1 = Lowest priority, 10 = Highest priority",
|
||||
},
|
||||
{
|
||||
Name: "agree_terms",
|
||||
Label: "I agree to the Terms of Service and Privacy Policy",
|
||||
Type: "checkbox",
|
||||
Required: true,
|
||||
},
|
||||
{
|
||||
Name: "marketing_consent",
|
||||
Label: "I would like to receive marketing communications",
|
||||
Type: "toggle",
|
||||
},
|
||||
{
|
||||
Name: "csrf_token",
|
||||
Type: "hidden",
|
||||
Value: "abc123xyz",
|
||||
},
|
||||
},
|
||||
SubmitText: "Create Account",
|
||||
ShowReset: true,
|
||||
ResetText: "Clear All",
|
||||
},
|
||||
}
|
||||
return c.Response.Template("apptabler_demoform.html", data)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,3 +82,60 @@ type AdminCustomersPage struct {
|
|||
type AuthLockPageData struct {
|
||||
PersonName string
|
||||
}
|
||||
|
||||
// FormtablerFormFieldOption is an option for select, radio, or checkbox fields.
|
||||
type FormtablerFormFieldOption struct {
|
||||
Label string
|
||||
Value string
|
||||
Selected bool
|
||||
Checked bool
|
||||
Disabled bool
|
||||
}
|
||||
|
||||
// FormtablerFormField represents a single field in a JSON-defined form.
|
||||
type FormtablerFormField struct {
|
||||
Name string
|
||||
Label string
|
||||
Type string // "text", "email", "phone", "textarea", "password", "select", "checkbox", "radio", "toggle", "file", "number", "url", "date", "datetime-local", "color", "range", "hidden"
|
||||
Required bool
|
||||
Placeholder string
|
||||
MaxLength int
|
||||
MinLength int
|
||||
Min float64
|
||||
Max float64
|
||||
Step float64
|
||||
Pattern string
|
||||
Value string
|
||||
Options []FormtablerFormFieldOption // for select, radio, checkbox
|
||||
Autofocus bool
|
||||
Readonly bool
|
||||
Disabled bool
|
||||
Multiple bool
|
||||
Accept string // file accept attribute
|
||||
Class string
|
||||
HelpText string
|
||||
ErrorText string
|
||||
Success bool
|
||||
Error bool
|
||||
ColSpan int // for grid layout, 1-12
|
||||
}
|
||||
|
||||
// FormtablerFormDefinition is the top-level structure for a JSON-defined form.
|
||||
type FormtablerFormDefinition struct {
|
||||
ID string
|
||||
Title string
|
||||
SuccessMessage string
|
||||
Fields []FormtablerFormField
|
||||
Method string // "GET" or "POST", default "POST"
|
||||
Action string // form action URL
|
||||
SubmitText string // button text, default "Submit"
|
||||
ResetText string // button text for reset
|
||||
ShowReset bool
|
||||
Class string // form class
|
||||
Layout string // "default", "inline", "horizontal", "card"
|
||||
Columns int // number of columns (1, 2, 3), default 1
|
||||
Enctype string // form enctype
|
||||
NoValidate bool
|
||||
FieldsetTitle string // optional fieldset wrapper
|
||||
FieldsetDescription string
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,6 +92,10 @@ func registerRoutes() {
|
|||
controller.Get("/admin/customers", controllers.AdminCustomers)
|
||||
controller.Post("/admin/customers", controllers.AdminCustomers)
|
||||
|
||||
// Form generator demo routes
|
||||
controller.Get("/demoform1", controllers.DemoForm1)
|
||||
controller.Get("/demoform2", controllers.DemoForm2)
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
1
storage/templates/apptabler_demoform.html
Normal file
1
storage/templates/apptabler_demoform.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
{{template "default_layout" .}}
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
<!-- Form Generator: renders a full HTML form from a FormtablerFormDefinition -->
|
||||
{{define "formtabler_generator"}}
|
||||
<div class="card{{if defaultVal "" .Class}} {{.Class}}{{end}}">
|
||||
{{if .Title}}
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{.Title}}</h3>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="card-body">
|
||||
<form
|
||||
id="{{defaultVal "form-generator" .ID}}"
|
||||
method="{{defaultVal "POST" .Method}}"
|
||||
{{if .Action}}action="{{.Action}}"{{end}}
|
||||
{{if .Class}}class="{{.Class}}"{{end}}
|
||||
{{if .Enctype}}enctype="{{.Enctype}}"{{end}}
|
||||
{{if .NoValidate}}novalidate{{end}}
|
||||
>
|
||||
{{if .SuccessMessage}}
|
||||
<div class="alert alert-success" role="alert">
|
||||
{{.SuccessMessage}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if .FieldsetTitle}}
|
||||
<fieldset class="form-fieldset">
|
||||
<legend>{{.FieldsetTitle}}</legend>
|
||||
{{if .FieldsetDescription}}<p class="text-secondary mb-3">{{.FieldsetDescription}}</p>{{end}}
|
||||
{{end}}
|
||||
|
||||
{{if gt .Columns 1}}
|
||||
<div class="row">
|
||||
{{end}}
|
||||
|
||||
{{$cols := .Columns}}
|
||||
{{$layout := .Layout}}
|
||||
{{range $i, $field := .Fields}}
|
||||
{{if and (gt $cols 1) (eq $layout "horizontal")}}
|
||||
<div class="col-md-6 mb-3">
|
||||
{{else if gt $cols 1}}
|
||||
{{if eq $cols 2}}
|
||||
<div class="col-md-6 mb-3">
|
||||
{{else}}
|
||||
<div class="col-md-4 mb-3">
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
{{if eq $field.Type "hidden"}}
|
||||
<input type="hidden" name="{{$field.Name}}" value="{{$field.Value}}">
|
||||
{{else if or (eq $field.Type "select") (eq $field.Type "multiselect")}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<select
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-select{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
{{if $field.Autofocus}}autofocus{{end}}
|
||||
{{if eq $field.Type "multiselect"}}multiple{{end}}
|
||||
>
|
||||
{{if not $field.Multiple}}<option value="">{{defaultVal "Select..." $field.Placeholder}}</option>{{end}}
|
||||
{{range $field.Options}}
|
||||
<option value="{{.Value}}"{{if .Selected}} selected{{end}}{{if .Disabled}} disabled{{end}}>{{.Label}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
{{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "textarea"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<textarea
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
placeholder="{{defaultVal "" $field.Placeholder}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Readonly}}readonly{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
{{if $field.Autofocus}}autofocus{{end}}
|
||||
{{if $field.MaxLength}}maxlength="{{$field.MaxLength}}"{{end}}
|
||||
{{if $field.MinLength}}minlength="{{$field.MinLength}}"{{end}}
|
||||
>{{$field.Value}}</textarea>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
{{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "checkbox"}}
|
||||
<div class="mb-3">
|
||||
<div class="form-label">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</div>
|
||||
{{if $field.Options}}
|
||||
{{range $field.Options}}
|
||||
<label class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="{{$field.Name}}"
|
||||
value="{{.Value}}"
|
||||
{{if .Checked}}checked{{end}}
|
||||
{{if .Disabled}}disabled{{end}}
|
||||
>
|
||||
<span class="form-check-label">{{.Label}}</span>
|
||||
</label>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<label class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="{{$field.Name}}"
|
||||
value="1"
|
||||
{{if eq $field.Value "true"}}checked{{end}}
|
||||
>
|
||||
<span class="form-check-label">{{defaultVal "Yes" $field.Placeholder}}</span>
|
||||
</label>
|
||||
{{end}}
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "radio"}}
|
||||
<div class="mb-3">
|
||||
<div class="form-label">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</div>
|
||||
{{range $field.Options}}
|
||||
<label class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="{{$field.Name}}"
|
||||
value="{{.Value}}"
|
||||
{{if .Checked}}checked{{end}}
|
||||
{{if .Disabled}}disabled{{end}}
|
||||
>
|
||||
<span class="form-check-label">{{.Label}}</span>
|
||||
</label>
|
||||
{{end}}
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "toggle"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-check form-switch">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="{{$field.Name}}"
|
||||
{{if eq $field.Value "true"}}checked{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
>
|
||||
<span class="form-check-label">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</span>
|
||||
</label>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "file"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<input
|
||||
type="file"
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
{{if $field.Multiple}}multiple{{end}}
|
||||
{{if $field.Accept}}accept="{{$field.Accept}}"{{end}}
|
||||
>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
{{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "color"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<input
|
||||
type="color"
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-control form-control-color{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
value="{{defaultVal "#206bc4" $field.Value}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "range"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<input
|
||||
type="range"
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-range{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
value="{{defaultVal "50" $field.Value}}"
|
||||
{{if $field.Min}}min="{{$field.Min}}"{{end}}
|
||||
{{if $field.Max}}max="{{$field.Max}}"{{end}}
|
||||
{{if $field.Step}}step="{{$field.Step}}"{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "phone"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
|
||||
</span>
|
||||
<input
|
||||
type="tel"
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
placeholder="{{defaultVal "" $field.Placeholder}}"
|
||||
value="{{$field.Value}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Readonly}}readonly{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
{{if $field.Autofocus}}autofocus{{end}}
|
||||
{{if $field.Pattern}}pattern="{{$field.Pattern}}"{{end}}
|
||||
{{if $field.MaxLength}}maxlength="{{$field.MaxLength}}"{{end}}
|
||||
>
|
||||
</div>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
{{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
|
||||
</div>
|
||||
{{else}}
|
||||
{{/* Default: text, email, number, url, date, datetime-local, password, and any unknown type */}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<input
|
||||
type="{{$field.Type}}"
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
placeholder="{{defaultVal "" $field.Placeholder}}"
|
||||
value="{{$field.Value}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Readonly}}readonly{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
{{if $field.Autofocus}}autofocus{{end}}
|
||||
{{if $field.Pattern}}pattern="{{$field.Pattern}}"{{end}}
|
||||
{{if $field.MaxLength}}maxlength="{{$field.MaxLength}}"{{end}}
|
||||
{{if $field.MinLength}}minlength="{{$field.MinLength}}"{{end}}
|
||||
{{if $field.Min}}min="{{$field.Min}}"{{end}}
|
||||
{{if $field.Max}}max="{{$field.Max}}"{{end}}
|
||||
{{if $field.Step}}step="{{$field.Step}}"{{end}}
|
||||
>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
{{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if and (gt $cols 1) (eq $layout "horizontal")}}
|
||||
</div>
|
||||
{{else if gt $cols 1}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
{{if gt .Columns 1}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if .FieldsetTitle}}
|
||||
</fieldset>
|
||||
{{end}}
|
||||
|
||||
<div class="form-footer{{if .FieldsetTitle}} mt-2{{end}}">
|
||||
<button type="submit" class="btn btn-primary">{{defaultVal "Submit" .SubmitText}}</button>
|
||||
{{if .ShowReset}}
|
||||
<button type="reset" class="btn btn-link link-secondary ms-auto">{{defaultVal "Reset" .ResetText}}</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
@ -42,6 +42,8 @@
|
|||
{{end}}
|
||||
{{else if hasField . "FormElements"}}
|
||||
{{template "tabler_formelements_content" .FormElements}}
|
||||
{{else if hasField . "FormDefinition"}}
|
||||
{{template "formtabler_generator" .FormDefinition}}
|
||||
{{else}}
|
||||
{{.Content}}
|
||||
{{end}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue