Package form

import "gitlab.com/zoralab/bissetii/pkg/components/internal/form"

Package form is for render the input form in multiple formats.

The HTML template codes are written in Go’s string format under the corresponding group. This allows one to embed the HTML codes instead of parsing it from file.

Constants

All Bissetii Compressed Compiled CSS

const (
	CSSAMP = `form{margin:var(--margin-form);max-width:var(--max-width-form)}form ul,form ol{margin-left:var(--margin-left-form-list);list-style-type:var(--list-style-type-form-list);padding:var(--padding-form-list)}form ul.inline li,form ol.inline li{display:var(--display-form-list-item);margin-right:var(--margin-right-form-list-item)}form ul.inline li:last-child,form ol.inline li:last-child{--margin-right-form-list-item:0}fieldset{display:var(--display-form-fieldset);margin:var(--margin-form-fieldset);padding:var(--padding-fieldset);border-radius:var(--border-radius-fieldset);border:var(--border-fieldset);text-align:var(--text-align-fieldset)}fieldset.border{--border-fieldset:0.1rem solid var(--color-grey-500)}fieldset.center{--margin-form-fieldset:0 auto 3.5rem;--text-align-fieldset:center}legend{font-weight:var(--font-weight-legend)}input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],input[type=week],input:not([type]),select,textarea{font:var(--font-input);color:var(--color-input);background-color:var(--background-color-input);border-radius:var(--border-radius-input);border:var(--border-input);border-left:var(--border-left-input);outline:var(--outline-input);box-shadow:var(--box-shadow-input);box-sizing:var(--box-sizing-input);width:var(--width-input);height:var(--height-input);padding:var(--padding-input);-webkit-appearance:var(--appearance-input);-moz-appearance:var(--appearance-input);appearance:var(--appearance-input);-webkit-transition:var(--transition-input);-ms-transition:var(--transition-input);-moz-transition:var(--transition-input);-o-transition:var(--transition-input);transition:var(--transition-input)}input[type=color]:valid,input[type=date]:valid,input[type=datetime-local]:valid,input[type=email]:valid,input[type=month]:valid,input[type=number]:valid,input[type=password]:valid,input[type=search]:valid,input[type=tel]:valid,input[type=text]:valid,input[type=url]:valid,input[type=week]:valid,input:not([type]):valid,select:valid,textarea:valid{--border-left-input:0.4rem solid var(--color-green-300)}input[type=color]:invalid,input[type=date]:invalid,input[type=datetime-local]:invalid,input[type=email]:invalid,input[type=month]:invalid,input[type=number]:invalid,input[type=password]:invalid,input[type=search]:invalid,input[type=tel]:invalid,input[type=text]:invalid,input[type=url]:invalid,input[type=week]:invalid,input:not([type]):invalid,select:invalid,textarea:invalid{--border-input:0.1rem solid var(--color-red-500);--border-left-input:0.4rem solid var(--color-red-500)}input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,input[type=week]:focus,input:not([type]):focus,select:focus,textarea:focus{--border-input:0.1rem solid var(--color-blue-500);--border-left-input:0.4rem solid var(--color-blue-500)}input[type=color]::placeholder,input[type=date]::placeholder,input[type=datetime-local]::placeholder,input[type=email]::placeholder,input[type=month]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=tel]::placeholder,input[type=text]::placeholder,input[type=url]::placeholder,input[type=week]::placeholder,input:not([type])::placeholder,select::placeholder,textarea::placeholder{font-style:var(--font-style-input-placeholder);color:var(--color-input-placeholder)}textarea{min-height:var(--min-height-textarea)}label{font-size:var(--font-size-label);color:var(--color-label);width:var(--width-label);white-space:var(--white-space-label)}label.password-rule{--font-size-label:1.4rem;--white-space-label:pre}label.password-notice{--font-size-label:1.2rem;--white-space-label:pre;--color-label:var(--color-red-500)}input[required]{--border-input:0.1rem solid var(--color-red-500);--border-left-input:0.4rem solid var(--color-red-500)}input[required]:valid{--border-input:0.1rem solid var(--color-grey-400);--border-left-input:0.4rem solid var(--color-green-300)}input[required]:focus{--border-input:0.1rem solid var(--color-blue-500);--border-left-input:0.4rem solid var(--color-blue-500)}input[type=button],input[type=reset],input[type=submit],button,.button{display:var(--display-button);cursor:var(--cursor-button);opacity:var(--opacity-button);margin:var(--margin-button);padding:var(--padding-button);color:var(--color-button);background-color:var(--background-color-button);border:var(--border-button);border-radius:var(--border-radius-button);border-color:var(--border-color-button);font-size:var(--font-size-button);font-weight:var(--font-weight-button);letter-spacing:var(--letter-spacing-button);text-align:var(--text-align-button);text-decoration:var(--text-decoration-button);text-transform:var(--text-transform-button);-webkit-transition:var(--transition-button);-ms-transition:var(--transition-button);-moz-transition:var(--transition-button);-o-transition:var(--transition-button);transition:var(--transition-button)}input[type=button].pinpoint,input[type=reset].pinpoint,input[type=submit].pinpoint,button.pinpoint,.button.pinpoint{--color-button:var(--color-grey-50);--background-color-button:var(--color-primary-500);--border-color-button:var(--color-primary-300)}input[type=button].clean,input[type=reset].clean,input[type=submit].clean,button.clean,.button.clean{--background-color-button:transparent;--border-color-button:transparent}input[type=button]:focus:not([disabled]),input[type=button].pinpoint:focus:not([disabled]),input[type=button].pinpoint:focus:not([disabled]),input[type=button]:hover:not([disabled]),input[type=button].pinpoint:hover:not([disabled]),input[type=button].clean:hover:not([disabled]),input[type=reset]:focus:not([disabled]),input[type=reset].pinpoint:focus:not([disabled]),input[type=reset].pinpoint:focus:not([disabled]),input[type=reset]:hover:not([disabled]),input[type=reset].pinpoint:hover:not([disabled]),input[type=reset].clean:hover:not([disabled]),input[type=submit]:focus:not([disabled]),input[type=submit].pinpoint:focus:not([disabled]),input[type=submit].pinpoint:focus:not([disabled]),input[type=submit]:hover:not([disabled]),input[type=submit].pinpoint:hover:not([disabled]),input[type=submit].clean:hover:not([disabled]),button:focus:not([disabled]),button.pinpoint:focus:not([disabled]),button.pinpoint:focus:not([disabled]),button:hover:not([disabled]),button.pinpoint:hover:not([disabled]),button.clean:hover:not([disabled]),.button:focus:not([disabled]),.button.pinpoint:focus:not([disabled]),.button.pinpoint:focus:not([disabled]),.button:hover:not([disabled]),.button.pinpoint:hover:not([disabled]),.button.clean:hover:not([disabled]){--color-button:var(--color-primary-700);--background-color-button:var(--color-contrast-500);--border-color-button:var(--color-contrast-700)}input[type=button][disabled],input[type=button].pinpoint[disabled],input[type=button].clean[disabled],input[type=reset][disabled],input[type=reset].pinpoint[disabled],input[type=reset].clean[disabled],input[type=submit][disabled],input[type=submit].pinpoint[disabled],input[type=submit].clean[disabled],button[disabled],button.pinpoint[disabled],button.clean[disabled],.button[disabled],.button.pinpoint[disabled],.button.clean[disabled]{--cursor-button:default;--opacity-button:0.5}`

	CSSCritical = `form{margin:var(--margin-form);max-width:var(--max-width-form)}form ul,form ol{margin-left:var(--margin-left-form-list);list-style-type:var(--list-style-type-form-list);padding:var(--padding-form-list)}form ul.inline li,form ol.inline li{display:var(--display-form-list-item);margin-right:var(--margin-right-form-list-item)}form ul.inline li:last-child,form ol.inline li:last-child{--margin-right-form-list-item:0}fieldset{display:var(--display-form-fieldset);margin:var(--margin-form-fieldset);padding:var(--padding-fieldset);border-radius:var(--border-radius-fieldset);border:var(--border-fieldset);text-align:var(--text-align-fieldset)}fieldset.border{--border-fieldset:0.1rem solid var(--color-grey-500)}fieldset.center{--margin-form-fieldset:0 auto 3.5rem;--text-align-fieldset:center}legend{font-weight:var(--font-weight-legend)}input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],input[type=week],input:not([type]),select,textarea{font:var(--font-input);color:var(--color-input);background-color:var(--background-color-input);border-radius:var(--border-radius-input);border:var(--border-input);border-left:var(--border-left-input);outline:var(--outline-input);box-shadow:var(--box-shadow-input);box-sizing:var(--box-sizing-input);width:var(--width-input);height:var(--height-input);padding:var(--padding-input);-webkit-appearance:var(--appearance-input);-moz-appearance:var(--appearance-input);appearance:var(--appearance-input);-webkit-transition:var(--transition-input);-ms-transition:var(--transition-input);-moz-transition:var(--transition-input);-o-transition:var(--transition-input);transition:var(--transition-input)}input[type=color]:valid,input[type=date]:valid,input[type=datetime-local]:valid,input[type=email]:valid,input[type=month]:valid,input[type=number]:valid,input[type=password]:valid,input[type=search]:valid,input[type=tel]:valid,input[type=text]:valid,input[type=url]:valid,input[type=week]:valid,input:not([type]):valid,select:valid,textarea:valid{--border-left-input:0.4rem solid var(--color-green-300)}input[type=color]:invalid,input[type=date]:invalid,input[type=datetime-local]:invalid,input[type=email]:invalid,input[type=month]:invalid,input[type=number]:invalid,input[type=password]:invalid,input[type=search]:invalid,input[type=tel]:invalid,input[type=text]:invalid,input[type=url]:invalid,input[type=week]:invalid,input:not([type]):invalid,select:invalid,textarea:invalid{--border-input:0.1rem solid var(--color-red-500);--border-left-input:0.4rem solid var(--color-red-500)}input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,input[type=week]:focus,input:not([type]):focus,select:focus,textarea:focus{--border-input:0.1rem solid var(--color-blue-500);--border-left-input:0.4rem solid var(--color-blue-500)}input[type=color]::placeholder,input[type=date]::placeholder,input[type=datetime-local]::placeholder,input[type=email]::placeholder,input[type=month]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=tel]::placeholder,input[type=text]::placeholder,input[type=url]::placeholder,input[type=week]::placeholder,input:not([type])::placeholder,select::placeholder,textarea::placeholder{font-style:var(--font-style-input-placeholder);color:var(--color-input-placeholder)}textarea{min-height:var(--min-height-textarea)}label{font-size:var(--font-size-label);color:var(--color-label);width:var(--width-label);white-space:var(--white-space-label)}label.password-rule{--font-size-label:1.4rem;--white-space-label:pre}label.password-notice{--font-size-label:1.2rem;--white-space-label:pre;--color-label:var(--color-red-500)}input[required]{--border-input:0.1rem solid var(--color-red-500);--border-left-input:0.4rem solid var(--color-red-500)}input[required]:valid{--border-input:0.1rem solid var(--color-grey-400);--border-left-input:0.4rem solid var(--color-green-300)}input[required]:focus{--border-input:0.1rem solid var(--color-blue-500);--border-left-input:0.4rem solid var(--color-blue-500)}input[type=button],input[type=reset],input[type=submit],button,.button{display:var(--display-button);cursor:var(--cursor-button);opacity:var(--opacity-button);margin:var(--margin-button);padding:var(--padding-button);color:var(--color-button);background-color:var(--background-color-button);border:var(--border-button);border-radius:var(--border-radius-button);border-color:var(--border-color-button);font-size:var(--font-size-button);font-weight:var(--font-weight-button);letter-spacing:var(--letter-spacing-button);text-align:var(--text-align-button);text-decoration:var(--text-decoration-button);text-transform:var(--text-transform-button);-webkit-transition:var(--transition-button);-ms-transition:var(--transition-button);-moz-transition:var(--transition-button);-o-transition:var(--transition-button);transition:var(--transition-button)}input[type=button].pinpoint,input[type=reset].pinpoint,input[type=submit].pinpoint,button.pinpoint,.button.pinpoint{--color-button:var(--color-grey-50);--background-color-button:var(--color-primary-500);--border-color-button:var(--color-primary-300)}input[type=button].clean,input[type=reset].clean,input[type=submit].clean,button.clean,.button.clean{--background-color-button:transparent;--border-color-button:transparent}input[type=button]:focus:not([disabled]),input[type=button].pinpoint:focus:not([disabled]),input[type=button].pinpoint:focus:not([disabled]),input[type=button]:hover:not([disabled]),input[type=button].pinpoint:hover:not([disabled]),input[type=button].clean:hover:not([disabled]),input[type=reset]:focus:not([disabled]),input[type=reset].pinpoint:focus:not([disabled]),input[type=reset].pinpoint:focus:not([disabled]),input[type=reset]:hover:not([disabled]),input[type=reset].pinpoint:hover:not([disabled]),input[type=reset].clean:hover:not([disabled]),input[type=submit]:focus:not([disabled]),input[type=submit].pinpoint:focus:not([disabled]),input[type=submit].pinpoint:focus:not([disabled]),input[type=submit]:hover:not([disabled]),input[type=submit].pinpoint:hover:not([disabled]),input[type=submit].clean:hover:not([disabled]),button:focus:not([disabled]),button.pinpoint:focus:not([disabled]),button.pinpoint:focus:not([disabled]),button:hover:not([disabled]),button.pinpoint:hover:not([disabled]),button.clean:hover:not([disabled]),.button:focus:not([disabled]),.button.pinpoint:focus:not([disabled]),.button.pinpoint:focus:not([disabled]),.button:hover:not([disabled]),.button.pinpoint:hover:not([disabled]),.button.clean:hover:not([disabled]){--color-button:var(--color-primary-700);--background-color-button:var(--color-contrast-500);--border-color-button:var(--color-contrast-700)}input[type=button][disabled],input[type=button].pinpoint[disabled],input[type=button].clean[disabled],input[type=reset][disabled],input[type=reset].pinpoint[disabled],input[type=reset].clean[disabled],input[type=submit][disabled],input[type=submit].pinpoint[disabled],input[type=submit].clean[disabled],button[disabled],button.pinpoint[disabled],button.clean[disabled],.button[disabled],.button.pinpoint[disabled],.button.clean[disabled]{--cursor-button:default;--opacity-button:0.5}`

	CSSTablet     = ``

	CSSDesktop    = ``

	CSSWidescreen = ``

	CSSPrint      = ``
)

Constants for managing the package as a whole.

const (
	// Name is the block name (`{{- define "this-name" -}}`).
	Name = "form"

	// AMPName is the AMP HTML block name.
	AMPName = root.AMPPrefix + Name

	// ParametersComment are the list of comment headers
	// describing inputs.
	ParametersComment = `
{{- /* .Method            = Form method                             */ -}}
{{- /* .Action            = Form action                             */ -}}
{{- /* .Content           = Form content                            */ -}}
{{- /* .ID                = Form id attribute (optional)            */ -}}
{{- /* .Class             = Form class attribute (optional)         */ -}}
{{- /* .Label             = Form aria-label attribute (optional)    */ -}}
`
)

Dependencies are the dependent codes for building independent template.

This is useful for rendering portable template usage like Hugo partials where they do not share a common definition source.

const (
	// DepHTML is the vanilla HTML output type.
	DepHTML = ``

	// DepAMPHTML is the Accelerated Mobile Pages HTML output
	// type.
	DepAMPHTML = ``
)

Full HTML codes for rendering templates without needing to parse file.

const (
	// HTML is the vanilla HTML output type.
	HTML = `
<form method="{{- .Method -}}" action="{{- .Action -}}"
{{- if .ID }}

	id="{{- .ID -}}"
{{- end }}
{{- if .Class }}

	class="{{- .Class -}}"
{{- end }}
{{- if .Label }}

	aria-label="{{- .Label -}}"
{{- end -}}
>
{{- if .Content }}

	{{ .Content }}
{{- end }}
</form>
`

	// AMPHTML is the Accelerated Mobile Pages HTML output type.
	AMPHTML = `
<form method="{{- .Method -}}"
{{- if eq .Method "post" }}

	action-xhr="{{- .Action -}}"
{{- else }}

	action="{{- .Action -}}"
{{- end }}
{{- if .ID }}

	id="{{- .ID -}}"
{{- end }}
{{- if .Class }}

	class="{{- .Class -}}"
{{- end }}
{{- if .Label }}

	aria-label="{{- .Label -}}"
{{- end -}}
>

	{{ .Content }}
</form>
`
)

Data

type Data struct {
	Method  string
	Action  string
	Content string
	ID      string
	Class   string
	Label   string
}

Data is the data structure for rendering the component.