diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a31ee74..653be95d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,8 @@ - Updated sqlparser to [v0.56](https://github.com/apache/datafusion-sqlparser-rs/blob/main/changelog/0.56.0.md), with many improvements including: - Add support for the xmltable(...) function in postgres - Add support for MSSQL IF/ELSE statements. + - Add support for nice "switch" checkboxes in the form component using `'switch' as type` + - Add support for headers in the form component using ## v0.34 (2025-03-23) diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql index ff73bcc5..7b4b3d62 100644 --- a/examples/official-site/sqlpage/migrations/01_documentation.sql +++ b/examples/official-site/sqlpage/migrations/01_documentation.sql @@ -276,7 +276,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S ('id', 'A unique identifier for the form, which can then be used to validate the form from a button outside of the form.', 'TEXT', TRUE, TRUE), ('auto_submit', 'Automatically submit the form when the user changes any of its fields, and remove the validation button.', 'BOOLEAN', TRUE, TRUE), -- item level - ('type', 'The type of input to use: text for a simple text field, textarea for a multi-line text input control, number to accept only numbers, checkbox or radio for a button that is part of a group specified in the ''name'' parameter, hidden for a value that will be submitted but not shown to the user. text by default.', 'TEXT', FALSE, TRUE), + ('type', 'The type of input to use: text for a simple text field, textarea for a multi-line text input control, number to accept only numbers, checkbox, switch, or radio for a button that is part of a group specified in the ''name'' parameter, header for a form header, hidden for a value that will be submitted but not shown to the user. text by default.', 'TEXT', FALSE, TRUE), ('name', 'The name of the input field, that you can use in the target page to get the value the user entered for the field.', 'TEXT', FALSE, FALSE), ('label', 'A friendly name for the text field to show to the user.', 'TEXT', FALSE, TRUE), ('placeholder', 'A placeholder text that will be shown in the field when is is empty.', 'TEXT', FALSE, TRUE), @@ -347,6 +347,24 @@ When loading the page, the value for `:username` will be `NULL` if no value has json('[{"component":"form"}, '|| '{"name": "Your account", "prefix_icon": "mail", "prefix": "Email:", "suffix": "@mydomain.com"}, ' || ']')), + + ('form','With the header type, you can group your input fields based on a theme. For example, you can categorize fields according to a person''s identity and their contact information.', + json('[{"component":"form","title":"Information about the person"}, '|| + '{"type": "header", "label": "Identity"},' || + '{"name": "Name"},' || + '{"name": "Surname"},' || + '{"type": "header","label": "Contact"},' || + '{"name": "phone", "label": "Phone number"},' || + '{"name": "Email"},' || + ']')), + + ('form','A toggle switch in an HTML form is a user interface element that allows users to switch between two states, typically "on" and "off." It visually resembles a physical switch and is often used for settings or options that can be enabled or disabled.', + json('[{"component":"form"}, + {"type": "switch", "label": "Dark theme", "name": "dark", "description": "Enable dark theme"}, + {"type": "switch", "label": "A required toggle switch", "name": "my_checkbox", "required": true,"checked": true}, + {"type": "switch", "label": "A disabled toggle switch", "name": "my_field", "disabled": true} + ]')), + ('form', 'This example illustrates the use of the `select` type. In this select input, the various options are hardcoded, but they could also be loaded from a database table, [using a function to convert the rows into a json array](/blog.sql?post=JSON%20in%20SQL%3A%20A%20Comprehensive%20Guide) like diff --git a/sqlpage/templates/form.handlebars b/sqlpage/templates/form.handlebars index 62fa8b6e..7cb05fe3 100644 --- a/sqlpage/templates/form.handlebars +++ b/sqlpage/templates/form.handlebars @@ -15,6 +15,9 @@ {{/if}}
{{#each_row}} + {{#if (eq type "header")}} +

{{label}}

+ {{else}} {{#if (or (eq type "radio") (eq type "checkbox"))}}
{{else}} + {{~#if (eq type "switch")}} +
+ +
+ {{else}} {{~#if (eq type "hidden")}} {{else}} @@ -132,6 +154,8 @@ {{~/if~}} {{/if}} + {{/if}} + {{/if}} {{#if (eq type "file")}} {{#delay}}formenctype="multipart/form-data"{{/delay}}