Skip to content

v2 #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

v2 #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 75 additions & 70 deletions Configuration/Ext/Form/Yaml/Setup.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,175 +14,180 @@ TYPO3:
renderingOptions:
formNavigation:
btnNextClassAttribute: 'btn btn-primary'
btnPreviousClassAttribute: 'btn btn-outline btn-primary'
btnPreviousClassAttribute: 'btn btn-secondary'
btnSubmitClassAttribute: 'btn btn-primary'
navigationWrapperClassAttribute: 'mt-form'
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'
descriptionClassAttribute: 'form-description'
errorClassAttribute: ''
errorMsgClassAttribute: 'form-error'
requiredMarkClassAttribute: 'required'
visuallyHiddenClassAttribute: 'sr-only'
SummaryPage:
variants:
-
renderingOptions:
listRowClassAttribute: 'grid grid-cols-2 gap-4'
listClassAttribute: 'space-y-2'
listRowClassAttribute: 'grid grid-cols-2 gap-form'
labelWrapperClassAttribute: 'form-label'
valueWrapperClassAttribute: ''

# 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
fieldsetClassAttribute: 'form-field form-field-advancedpassword'
containerClassAttribute: 'form-field'
elementClassAttribute: 'form-input'
confirmationClassAttribute: 'form-input'
labelClassAttribute: 'form-label'
legendVisuallyHidden: 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'
containerClassAttribute: 'form-field form-field-checkbox'
elementClassAttribute: 'form-checkbox'
labelTextClassAttribute: 'leading-none form-label'
labelClassAttribute: 'flex items-center gap-2'
ContentElement:
variants:
1:
properties:
outerContainerClassAttribute: 'mb-4 [&_.container]:max-w-none [&_.frame]:py-0'
outerContainerClassAttribute: 'form-field form-field-contentelement'
CountrySelect:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-select mb-4'
elementClassAttribute: 'select select-bordered'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-select'
elementClassAttribute: 'form-select'
labelClassAttribute: 'form-label'
Date:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-date mb-4'
elementClassAttribute: 'input input-bordered'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-date'
elementClassAttribute: 'form-input'
labelClassAttribute: 'form-label'
DatePicker:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-date mb-4'
elementClassAttribute: 'input input-bordered'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-date'
elementClassAttribute: 'form-input'
labelClassAttribute: 'form-label'
SingleSelect:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-select mb-4'
elementClassAttribute: 'select select-bordered'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-select'
elementClassAttribute: 'form-select'
labelClassAttribute: 'form-label'
StaticText:
variants:
1:
properties:
containerClassAttribute: 'form-element-statictext mb-4 [&>h2]:font-bold [&>h2]:text-base [&>h2]:mb-1 [&>p]:label-text'
containerClassAttribute: 'form-field form-field-statictext'
Email:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-email mb-4'
elementClassAttribute: 'input input-bordered'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-email'
elementClassAttribute: 'form-input'
labelClassAttribute: 'form-label'
Fieldset:
variants:
-
properties:
elementClassAttribute: 'form-element-fieldset mb-4 [&>legend]:font-bold'
elementClassAttribute: 'form-field form-field-fieldset gap-0 [&>legend]:form-legend [&>legend]:mb-form-field'
FileUpload:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-fileupload mb-4'
containerClassAttribute: 'form-field form-field-fileupload'
elementClassAttribute: 'file-input file-input-bordered'
labelClassAttribute: 'label label-text justify-start'
labelClassAttribute: 'form-label'
ImageUpload:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-imageupload mb-4'
containerClassAttribute: 'form-field form-field-imageupload'
elementClassAttribute: 'file-input file-input-bordered'
labelClassAttribute: 'label label-text justify-start'
labelClassAttribute: 'form-label'
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'
fieldsetClassAttribute: 'form-field form-field-checkbox [&>legend]:form-legend [&>legend]:mb-form-field'
containerClassAttribute: 'mb-2 last:mb-0'
elementClassAttribute: 'form-checkbox'
labelTextClassAttribute: 'form-label leading-none'
labelClassAttribute: 'flex items-center gap-2'
MultiSelect:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-multiselect mb-4'
elementClassAttribute: 'select select-bordered'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-multiselect'
elementClassAttribute: 'form-multiselect'
labelClassAttribute: 'form-label'
Number:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-number mb-4'
elementClassAttribute: 'input input-bordered'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-number'
elementClassAttribute: 'form-input'
labelClassAttribute: 'form-label'
Password:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-password mb-4'
elementClassAttribute: 'input input-bordered'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-password'
elementClassAttribute: 'form-input'
labelClassAttribute: 'form-label'
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'
fieldsetClassAttribute: 'form-field form-field-radiobutton [&>legend]:form-legend [&>legend]:mb-form-field'
containerClassAttribute: 'mb-2 last:mb-0'
elementClassAttribute: 'form-radio'
labelTextClassAttribute: 'form-label leading-none'
labelClassAttribute: 'flex items-center gap-2'
legendVisuallyHidden: 0
Telephone:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-phone mb-4'
elementClassAttribute: 'input input-bordered'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-phone'
elementClassAttribute: 'form-input'
labelClassAttribute: 'form-label'
Text:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-text mb-4'
elementClassAttribute: 'input input-bordered'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-text'
elementClassAttribute: 'form-input'
labelClassAttribute: 'form-label'
Textarea:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-textarea mb-4'
elementClassAttribute: 'textarea textarea-bordered h-24'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-textarea'
elementClassAttribute: 'form-textarea'
labelClassAttribute: 'form-label'
Url:
variants:
-
properties:
containerClassAttribute: 'form-control form-element-url mb-4'
elementClassAttribute: 'input input-bordered'
labelClassAttribute: 'label label-text justify-start'
containerClassAttribute: 'form-field form-field-url'
elementClassAttribute: 'form-input'
labelClassAttribute: 'form-label'
GridRow:
variants:
-
properties:
elementClassAttribute: 'form-element form-element-gridrow grid gap-x-4'
elementClassAttribute: 'form-element form-field-gridrow grid gap-form'
gridColumnClassAutoConfiguration:
gridSize: 12
viewPorts:
Expand All @@ -197,4 +202,4 @@ TYPO3:
xl:
classPattern: 'xl:col-span-{@numbersOfColumnsToUse}'
xxl:
classPattern: 'xxl:col-span-{@numbersOfColumnsToUse}'
classPattern: 'xxl:col-span-{@numbersOfColumnsToUse}'
12 changes: 12 additions & 0 deletions Resources/Private/Ext/Form/Partials/Page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
<formvh:renderRenderable renderable="{page}">
<div class="prose">
<f:if condition="{page.label}">
<h2>{formvh:translateElementProperty(element: page, property: 'label')}</h2>
</f:if>
<f:for each="{page.elements}" as="element">
<f:render partial="{element.templateName}" arguments="{element: element}" />
</f:for>
</div>
</formvh:renderRenderable>
</html>
18 changes: 0 additions & 18 deletions Resources/Private/Tailwind/Src/Plugin.ts
View file
Open in desktop

This file was deleted.

27 changes: 0 additions & 27 deletions Resources/Private/Tailwind/Src/Preset.ts
View file
Open in desktop

This file was deleted.

46 changes: 30 additions & 16 deletions Resources/Private/Tailwind/Src/Safelist.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,36 @@
// TODO: adjust safelist handling after stable tailwind v4
import * as fs from 'fs';
import * as path from 'path';

function safelistGrid(minGridCols: number, maxGridCols: number) {
let gridColsRegexPatterns: string[] = [];
let classes: string[] = [];

for (let i = minGridCols; i <= maxGridCols; i++) {
gridColsRegexPatterns.push(`(col-span|grid-cols)-${i}`);
classes.push(`col-span-${i}`, `grid-cols-${i}`);
}

if (gridColsRegexPatterns.length > 0) {
return {
pattern: new RegExp(gridColsRegexPatterns.join('|')),
variants: ['sm', 'md', 'lg', 'xl', '2xl'],
};
} else {
return null;
}
const variants = ['sm', 'md', 'lg', 'xl', '2xl'];

let classesWithVariants: string[] = [];
variants.forEach(variant => {
classes.map(className => {
classesWithVariants.push(`${variant}:${className}`);
});
});

return [...classes, ...classesWithVariants];
};

export default [
safelistGrid(1, 12),
{
pattern: /text-(left|center|right)/,
},
];
(() => {
const safelist = [
...safelistGrid(1, 12),
...['text-center', 'text-left', 'text-right'],
];

const filePath = path.resolve(import.meta.dirname, '../__tsc.safelist');

fs.writeFileSync(filePath, safelist.join('\n'), 'utf8');
console.log(`Safelist classes written to ${filePath}`);

return safelist;
})();
21 changes: 21 additions & 0 deletions Resources/Private/Tailwind/Src/Styles/Container.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
@utility container {
margin-inline: auto;
padding-inline: 1.5rem;
}

@layer components {
.container.none {
max-width: none;
}
.container.full {
max-width: none;
padding-left: 0px;
padding-right: 0px;
}
.frame:has(.container.indent-right) {
margin-right: '33.33%';
}
.frame:has(.container.indent-left) {
margin-left: '33.33%';
}
}
Loading