spiral/toolkit

Dynamic forms and Grids toolkit

Spiral Toolkit

AJAX and form serialization toolkit for Spiral Framework.

Repository consists of 2 main components: Toolkit and Keeper

Toolkit is set of modules implementing a simple front-end framework, capable of serializing forms, showing loaders and datagrids

Keeper is set of scripts that demonstrate typical toolkit usage with Spiral Frameworks, including default styles based on bootstrap 4.

Prerequisites

• node 11.15.0+ use recent LTS version
• yarn 1.17.0+ use recent stable version

Project is based on Lerna.

Starting Up

1. Execute npx lerna bootstrap to install dependencies and link packages
2. Build toolkit package and dependencies yarn build

Additional development commands

When developing both in co-dependent packages use separate commands like so:

• yarn build:core to build core package.
• yarn build:form to build form package.
• yarn build:lock to build lock package.
• yarn build:toolkit to build toolkit package.
• yarn build:datagrid to build datagrid package.
• yarn build:keeper to build keeper package.

Alternatively execute yarn build from package folder.

Additional commands

npx lerna run lint to lint every package. Note this command is expected to be successfully completed before pushing data to repository.

Project structure

Project is a mono-repository with following packages:

• packages/core - core of the toolkit
• packages/form - form module for the toolkit
• packages/lock - lock module for the toolkit
• packages/core - main toolkit package

Making a release

In separate branch do following:

• lerna publish
• bump version in lerna and in root package.json manually
• yarn gitrelease

Windows

On windows execute git config core.autocrlf false to disable automatic line ending conversion.

---

MIT License (MIT). Please see LICENSE for more information. Maintained by Spiral Scout.

toolkit's Issues

Finish Resource Manager

Add new types for grids: date, datetime

Frontend default asset management

We have to come up with some sort of dependencies management for zero configurated frontend.

Some thoughts:

<require:script module=«spiral.core» href=«fallback path»/>
<require:script href=«compiled.js» includes=«spiral.*,project.*»/>

After all we need to have ability to bundle frontend with tools like gulp or webpack.

Make alerts on callbacks handle array values (error or message for example)

Now when you return something like {status:200,message:...} the only thing you will see is
[object Object]

Add block error element

Often there's a situation when we need to highlight more than just an input when an error occurred.
Now red highlight is applied only to label.item-form.error css style. So to emulate such behavior we need to do something like this:

<label data-message-placeholder="custom-message-placeholder" class="item-form">
    <span class="item-label">[[Text emulating label text]]</span>
    <form:radio name="some-name-1" value="some-value-1"/>
    <form:radio name="some-name-2" value="some-value-2"/>
    <form:radio name="some-name-3" value="some-value-3"/>
</label>

Expected like this:

<form:error placeholder="custom-message-placeholder">
    <span class="item-label">[[Text emulating label text]]</span>
    <form:radio name="some-name-1" value="some-value-1"/>
    <form:radio name="some-name-2" value="some-value-2"/>
    <form:radio name="some-name-3" value="some-value-3"/>
</form:error>

form:input in foreach generates the same ID (as for 1st elem)

form:input in foreach generates the same ID (as for 1st elem)

[Select] Add ability to define size

Could you add ability to add attribute size for select input as it was made for textarea here.

Sometimes it is very useful to have ability to define select size

Remove input error after changing its value

Steps to reproduce:
1 Submit a form with empty required field
2 Field is highlighted with red color
3 Start typing anything
4 Field stays in red

Expected: Field red highlight should be removed after field value is changed

Restore datalisting and visual editor components

grid syntax is weird

lets pretend we have next grid row columns:

{
  "name": "name",
  "fullName": "full name",
}

And I want to use a sorting here:
right now, sort name and column name are tied together:

<grid:cell.text name="fullName" label="[[Name]]" sort="true" body="{fullName}" sort-dir="asc" sort-default="true"/>

body? what for?

What I propose is to explicitly and separately define column and sorter name:

<grid:cell.text name="fullName" label="[[Name]]" sort="name" sort-dir="asc" sort-default="true"/>

Meaning render fullName column and apply a sorter named name

Restore image cropper input

[Grid]: Add ability to use selectable records

Now we have some strange example about selectable grid records - with grid description via big js array.

It is not comfortable to work with it in normal projects.

It will be more comfortable to have some options in GridSchema and use it on js-side.

As an example it can be smth like:

class SomeGrid extends GridSchema
{
    public function __construct() {
        $this->setOptions(
            [
                'selectable' => [
                    'type' => 'multi', // can be some const from toolkit
                    'id' => 'id',
                ]
            ]
        );
    ...

As I can see from toolkit code js already works with grid option:

if (this.options.selectable) ...

Additionally it should be described in doc with more adequate example