-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
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.
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
Implement the declarative rich form creator (generator, builder) #6111
Comments
A very brief PoC: import { generateForm, bindProperty } from 'form/utils.js';
import FormValidators from 'validators.js';
const form = generateForm( {
items: [
{
type: 'row',
items: [
{
name: 'borderStyle',
type: 'dropdown',
label: t( 'Border style' ),
isEnabled: true,
defaultValue: 'none',
options: [
{ value: 'none', label: t( 'None' ) },
{ value: 'solid', label: t( 'Solid' ) },
{ value: 'dotted', label: t( 'Dotted' ) },
],
on: {
change: ( oldValue, newValue ) => {
// Do something in the controller.
editor.execute( 'tableCellBorderStyle', {
value: newValue
} );
}
}
},
{
name: 'borderWidth',
type: 'inputtext',
label: t( 'Border width' ),
isEnabled: bindProperty( 'borderStyle', 'isEnabled', value => {
value !== 'none';
} ),
defaultValue: '',
validators: [
FormValidators.unit( {
units: [ 'em', 'px', '%', 'pt' ],
message: t( 'The border width must be either em, px or...' )
} ),
FormValidators.length( {
minLength: 1,
maxLength: 20,
message: t( 'Border width must be 1 up to 20 characters' )
} )
],
on: {
input: ( value ) => {
// Do something in the controller.
editor.execute( 'tableCellBorderWidth', value );
}
}
},
{
name: 'borderColor',
type: 'inputtext',
label: t( 'Border color' ),
isEnabled: bindProperty( 'borderStyle', 'isEnabled', value => {
value !== 'none';
} ),
defaultValue: '',
validators: [
FormValidators.color( {
formats: [ 'rgb', 'hex' ],
message: t( 'The border color must be either in rgb (rgb(255,255,255)) or hex (#FFFFFF) format.' )
} ),
FormValidators.regex( {
// ...
} )
],
on: {
input: ( value ) => {
// Do something in the controller.
editor.execute( 'tableCellBorderWidth', value );
}
}
}
]
},
{
type: 'row',
// Labeled form row like "Border" in table cell properties.
label: t( 'Border' ),
items: [
// ...
]
}
],
actions: [
{
type: 'save',
label: t( 'Save form' ),
// #isFormValid could be a property of FormView.
isEnabled: bindProperty( 'isFormValid' ),
action: () => {
// Close the form
}
},
{
type: 'cancel',
label: t( 'Cancel' ),
isEnabled: true,
action: () => {
// Undo changes made by the form.
editor.execute( 'undo' );
}
}
]
} );
// As the fields are defined so are the observable properties that can be used to communicate
// as an external interface.
form.set( {
borderStyle: 'dotted',
borderWidth: '3px'
} ); |
There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue. |
We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it). |
📝 Provide a description of the new feature
A follow-up of #6049.
Until the table (cell) properties UI, our forms were fairly simple, usually a single field and some action buttons. But now we have forms with multiple rows and multiple fields and I learned the hard way that creating and validating them becomes a problem.
We need a form builder that would:
Such a builder would make creating new forms a breeze, there would be no low–level code but a declarative form definition only.
An issue about validating the table properties form.
A related issue about form validation with some (old) ideas.
If you'd like to see this feature implemented, add a 👍 reaction to this post.
The text was updated successfully, but these errors were encountered: