form-js / forms.js Goto Github PK

https://codepen.io/trilmatic/pen/ZEwZWaW

The group prefix schema should prefix its elements inside the data object with its ID.

We want to make sure the forms are as accessable as possible so we need to look if it is accorging to standards.
Also we need to add aria-labelby and aria-describedby

Some reference:

https://www.w3.org/WAI/tutorials/forms/instructions/

https://webaim.org/techniques/forms/controls

https://www.a11yproject.com/posts/how-to-write-accessible-forms/

This applies to the /packages/core

Instead of 'This field is required' string for example have an imported variable potentially from constants.ts file.
This needs to be done for all validation static field in core package.

Move docs to this repo and pull them from github on main website so they are editable along with source changes

An clickable form builder on main website where you can create forms by drag and droping fields and defining parameters.

This form can be then output into json file and from this file it can be loaded (Form class could be initiated on that json file and would create the form like normal)

Update Form class to accept HTMLElement as first parameter instead of just string id.

We could create some global definitions that would allow to one time configure of the forms.js.
It would allow to pass overwritten defaults and any other things needed for the fields so there is not need to pass it into each field.

Additionally this could also allow to define input versions based on settings, so instead if having to type all default settings you could just define sub input like text-custom that would auto initialize with certain defaults and settings.

Why would this be useful? If I have a custom icon that I want for the input currently I would have to pass this long string or URL or something into each input I would want with the icon. That would be annoying and clutter the code. Instead I could define default one time in main.js similar to how license is now works. Any initialization of the field would then pull the custom defaults if available.

This new field should be a mix of multiple fields under the hood. Also it should be available to connect custom autocomplete into it.

Could be done through using group with multiple fields. It should have change method where all address parts are passed.

Update default validate functions for number field to include min and max options.

If number is under min or over max it should trigger validation error.

Create a string based conditions logic. conditions option should now accept string or function.

the logic behind should be something like 'myfield=1&myfield=2|myfield=3'; and this defines that if myfield value is 1 and 2 or 3 then the field should be hidden.

Consider using custom elements or some other way of rendering.

All enhanced date inputs, text, email, url, number, enhanced select should have the ability to append or prepend icon.

We want to implement min, max and step attributes into the date fields where it matters, this will only affect html5 inputs, in flatpickr this should be done through options so no need to implement it there.

Just have an option like

buildForm(FormOptions)
mountForm(Form, element)

The reason why this would be usefull is when we will be using the formsjs with reactive frameworks we could let asynchronously generate the form before the content is rendered and then render the form with the rest of the page istead of waiting for container element to render and init the form after that. Could make a difference in render speed on very large forms.

How exactly would this be done needs to be designed yet, this is just a very simple example and reasoning.

Set Form class as default export.

We want to implement container for Vuejs3.

We want to implement container for React.

The main Form class could be initiated on json file instead of object input.

It is connected to the #30 issue

Switch the packages and update the scripts, make sure that everything runs and clear all eslint errors

There is an issue with file field, its value is only single last uploaded file instead of FilePondFile array.

Create GitHub actions to run eslint and tests and format + build on all packages on pull requests.

https://docs.github.com/en/actions/guides

The enhanced date inputs using flatpickr could use an icon to indicate it is date input.
The icon could be part of the options and could be ovewritten by custom icon.

• BADGES (Not sure what to put there yet, maybe someone will have some idea. Just need to make it look better)
• look at styles of good repos and try to update based on that

Set each major class as default export from the main files:

• packages/core/field.ts
• packages/core/group.ts
• packages/core/button.ts

Update all imports accordingly.

we need to have way to allow disabeling or enabeling autocomplete on fields.

This should be done by new option on all fields where it makes sense.

Create npm run publish script that updates the version of package, automatically creates commit and runs npm publish

We still have some any types in the project that can be removed.

Not all of the any types can be but most of them should be converted to proper types.

We want to implement container for Angular.

Bug on a week field, the field wount render due to issue with the week flatpickr plugin.

Have a destroy function on form class that releases all instances of fields etc.

Create and rating field visualized by stars.

We want to prepare server side select field. It will be done through tom select as it already has options, just connect the tomselect ssr fetch to fields options accordingly.

We want to implement new box field which will be radios but with custom content instead of radio buttons.

Each radio button should have template option. And it should come with default styles.

on Form class in core package merge methods:

• getButtons into getButton (when no parameters passed)

• getGroups into getGroup (when no parameters passed)

• update getField method to return all fields when no parameter passsed

In scope of this task:

• still keep of getButtons and getGroups but mark as deprecated
• update documentation
• update automated tests in form.test.ts

We have established jest structure, we need to create test cases for main fields and write the tests

it might be best to first implement #39

• what templates would be necessary?
• what templates would be nice to have?

Currently when conditions are not met, the field is removed from the DOM, but the data object of Form class still contains the values.
Ideally the value should be removed from the data object and appended again when the conditions are met and field is rendered back on page.

update usePlugin function to accept both array of PluginSettings and single PluginSettings passed into it

Update each field to have properly typed internal _value instead of just using broad FieldValue.

When radio main label is not put in, radio labels dissapear.