feat: add form design
This commit is contained in:
200
packages/base/Configuration/Ext/Form/Yaml/Setup.yaml
Normal file
200
packages/base/Configuration/Ext/Form/Yaml/Setup.yaml
Normal file
@@ -0,0 +1,200 @@
|
||||
TYPO3:
|
||||
CMS:
|
||||
Form:
|
||||
prototypes:
|
||||
standard:
|
||||
formElementsDefinition:
|
||||
Form:
|
||||
renderingOptions:
|
||||
templateVariant: version2
|
||||
partialRootPaths:
|
||||
20: 'EXT:base/Resources/Private/Extensions/Form/Partials/'
|
||||
variants:
|
||||
-
|
||||
renderingOptions:
|
||||
formNavigation:
|
||||
btnNextClassAttribute: 'btn btn-primary'
|
||||
btnPreviousClassAttribute: 'btn btn-outline btn-primary'
|
||||
btnSubmitClassAttribute: 'btn btn-primary'
|
||||
fieldProperties:
|
||||
descriptionClassAttribute: 'form-text'
|
||||
errorClassAttribute: 'peer [&_input]:input-error [&_[type=checkbox]]:checkbox-error [&_[type=file]]:file-input-error [&_[type=radio]]:radio-error [&_select]:select-error [&_textarea]:textarea-error'
|
||||
errorMsgClassAttribute: 'label label-text-alt justify-start text-error peer-[.form-control]:-mt-4'
|
||||
requiredMarkClassAttribute: 'required'
|
||||
visuallyHiddenClassAttribute: 'sr-only'
|
||||
SummaryPage:
|
||||
variants:
|
||||
-
|
||||
renderingOptions:
|
||||
listRowClassAttribute: 'grid grid-cols-2 gap-4'
|
||||
|
||||
# Form elements
|
||||
AdvancedPassword:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
fieldsetClassAttribute: 'form-control form-element-advancedpassword mb-4'
|
||||
containerClassAttribute: 'form-control mb-4'
|
||||
elementClassAttribute: 'input input-bordered'
|
||||
confirmationClassAttribute: 'input input-bordered'
|
||||
labelClassAttribute: 'label label-text justify-start'
|
||||
renderFieldset: 0
|
||||
Checkbox:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-checkbox mb-4'
|
||||
elementClassAttribute: 'checkbox'
|
||||
labelTextClassAttribute: 'label-text'
|
||||
labelClassAttribute: 'label cursor-pointer justify-start gap-2'
|
||||
ContentElement:
|
||||
variants:
|
||||
1:
|
||||
properties:
|
||||
outerContainerClassAttribute: 'mb-4 [&_.container]:max-w-none [&_.frame]:py-0'
|
||||
CountrySelect:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-select mb-4'
|
||||
elementClassAttribute: 'select select-bordered'
|
||||
labelClassAttribute: 'label label-text justify-start'
|
||||
Date:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-date mb-4'
|
||||
elementClassAttribute: 'input input-bordered'
|
||||
labelClassAttribute: 'label label-text justify-start'
|
||||
DatePicker:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-date mb-4'
|
||||
elementClassAttribute: 'input input-bordered'
|
||||
labelClassAttribute: 'label label-text justify-start'
|
||||
SingleSelect:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-select mb-4'
|
||||
elementClassAttribute: 'select select-bordered'
|
||||
labelClassAttribute: 'label label-text justify-start'
|
||||
StaticText:
|
||||
variants:
|
||||
1:
|
||||
properties:
|
||||
containerClassAttribute: 'form-element-statictext mb-4 [&>p]:label-text'
|
||||
Email:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-email mb-4'
|
||||
elementClassAttribute: 'border border-primary block w-full p-2'
|
||||
labelClassAttribute: 'label label-text font-bold justify-start block w-full mb-2'
|
||||
Fieldset:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
elementClassAttribute: 'form-element-fieldset mb-4 [&>legend]:font-bold'
|
||||
FileUpload:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-fileupload mb-4'
|
||||
elementClassAttribute: 'file-input file-input-bordered'
|
||||
labelClassAttribute: 'label label-text justify-start'
|
||||
ImageUpload:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-imageupload mb-4'
|
||||
elementClassAttribute: 'file-input file-input-bordered'
|
||||
labelClassAttribute: 'label label-text justify-start'
|
||||
MultiCheckbox:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
fieldsetClassAttribute: 'mb-4 [&>legend]:label [&>legend]:label-text [&>legend]:justify-start'
|
||||
containerClassAttribute: 'form-control form-element-checkbox'
|
||||
elementClassAttribute: 'checkbox'
|
||||
labelTextClassAttribute: 'label-text'
|
||||
labelClassAttribute: 'label cursor-pointer justify-start gap-2'
|
||||
MultiSelect:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-multiselect mb-4'
|
||||
elementClassAttribute: 'select select-bordered'
|
||||
labelClassAttribute: 'label label-text justify-start'
|
||||
Number:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-number mb-4'
|
||||
elementClassAttribute: 'input input-bordered'
|
||||
labelClassAttribute: 'label label-text justify-start'
|
||||
Password:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-password mb-4'
|
||||
elementClassAttribute: 'input input-bordered'
|
||||
labelClassAttribute: 'label label-text justify-start'
|
||||
RadioButton:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
fieldsetClassAttribute: 'mb-4 [&>legend]:label [&>legend]:label-text [&>legend]:justify-start'
|
||||
containerClassAttribute: 'form-control form-element-radio'
|
||||
elementClassAttribute: 'radio'
|
||||
labelTextClassAttribute: 'label-text'
|
||||
labelClassAttribute: 'label cursor-pointer justify-start gap-2'
|
||||
Telephone:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-phone mb-4'
|
||||
elementClassAttribute: 'border border-primary block w-full p-2'
|
||||
labelClassAttribute: 'label label-text font-bold justify-start block w-full mb-2'
|
||||
Text:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-text mb-4'
|
||||
elementClassAttribute: 'border border-primary block w-full p-2'
|
||||
labelClassAttribute: 'label label-text font-bold justify-start block w-full mb-2'
|
||||
Textarea:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-textarea mb-4'
|
||||
elementClassAttribute: 'border border-primary block w-full p-2 h-24'
|
||||
labelClassAttribute: 'label label-text font-bold justify-start block w-full mb-2'
|
||||
Url:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
containerClassAttribute: 'form-control form-element-url mb-4'
|
||||
elementClassAttribute: 'border border-primary block w-full p-2'
|
||||
labelClassAttribute: 'label label-text font-bold justify-start block w-full mb-2'
|
||||
GridRow:
|
||||
variants:
|
||||
-
|
||||
properties:
|
||||
elementClassAttribute: 'form-element form-element-gridrow grid grid-cols-12 gap-8 md:gap-16'
|
||||
gridColumnClassAutoConfiguration:
|
||||
gridSize: 12
|
||||
viewPorts:
|
||||
xs:
|
||||
classPattern: 'col-span-{@numbersOfColumnsToUse}'
|
||||
sm:
|
||||
classPattern: 'sm:col-span-{@numbersOfColumnsToUse}'
|
||||
md:
|
||||
classPattern: 'md:col-span-{@numbersOfColumnsToUse}'
|
||||
lg:
|
||||
classPattern: 'lg:col-span-{@numbersOfColumnsToUse}'
|
||||
xl:
|
||||
classPattern: 'xl:col-span-{@numbersOfColumnsToUse}'
|
||||
xxl:
|
||||
classPattern: 'xxl:col-span-{@numbersOfColumnsToUse}'
|
||||
Reference in New Issue
Block a user