From 8ff39fbf2e2cd4e7d638720df7368b5152f2b409 Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Thu, 1 May 2025 17:14:13 +0200 Subject: [PATCH 1/6] form improvements with new types of field: header and switch --- .../sqlpage/migrations/01_documentation.sql | 18 +++++++++++++ sqlpage/templates/form.handlebars | 26 ++++++++++++++++++- 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql index 21a163b6..47e44e71 100644 --- a/examples/official-site/sqlpage/migrations/01_documentation.sql +++ b/examples/official-site/sqlpage/migrations/01_documentation.sql @@ -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", "description": "Enable dark theme"},' || + '{"type": "switch", "label": "A required toggle switch", "required": true},' || + '{"type": "switch", "label": "A disabled toggle switch", "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..41d443aa 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}} @@ -129,9 +151,11 @@ {{~#if description_md~}} {{{markdown description_md}}} {{~/if~}} - + {{~/if~}} {{/if}} + {{/if}} + {{/if}} {{#if (eq type "file")}} {{#delay}}formenctype="multipart/form-data"{{/delay}} From 153ecd87638a2bf7ae508cb90387959440de5db2 Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Thu, 1 May 2025 17:34:38 +0200 Subject: [PATCH 2/6] added checked toggle switch example --- examples/official-site/sqlpage/migrations/01_documentation.sql | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql index 47e44e71..4287fdb5 100644 --- a/examples/official-site/sqlpage/migrations/01_documentation.sql +++ b/examples/official-site/sqlpage/migrations/01_documentation.sql @@ -361,7 +361,7 @@ When loading the page, the value for `:username` will be `NULL` if no value has ('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", "description": "Enable dark theme"},' || - '{"type": "switch", "label": "A required toggle switch", "required": true},' || + '{"type": "switch", "label": "A required toggle switch", "required": true,"checked": true},' || '{"type": "switch", "label": "A disabled toggle switch", "disabled": true},' || ']')), From 44e398f461efb0411c4032efbb9c3ac1e3065111 Mon Sep 17 00:00:00 2001 From: lovasoa Date: Tue, 20 May 2025 00:42:07 +0200 Subject: [PATCH 3/6] add names to the switch checkboxes --- .../sqlpage/migrations/01_documentation.sql | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql index ad6c5c23..27d897d6 100644 --- a/examples/official-site/sqlpage/migrations/01_documentation.sql +++ b/examples/official-site/sqlpage/migrations/01_documentation.sql @@ -359,11 +359,11 @@ When loading the page, the value for `:username` will be `NULL` if no value has ']')), ('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", "description": "Enable dark theme"},' || - '{"type": "switch", "label": "A required toggle switch", "required": true,"checked": true},' || - '{"type": "switch", "label": "A disabled toggle switch", "disabled": true},' || - ']')), + 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, From b656e2143c177f94c2a71a1ff5d8c9e63fbbafcd Mon Sep 17 00:00:00 2001 From: lovasoa Date: Tue, 20 May 2025 00:51:26 +0200 Subject: [PATCH 4/6] update form header margins --- CHANGELOG.md | 2 ++ sqlpage/templates/form.handlebars | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) 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/sqlpage/templates/form.handlebars b/sqlpage/templates/form.handlebars index 41d443aa..e734fec0 100644 --- a/sqlpage/templates/form.handlebars +++ b/sqlpage/templates/form.handlebars @@ -16,7 +16,7 @@
{{#each_row}} {{#if (eq type "header")}} -

{{label}}

+

{{label}}

{{else}} {{#if (or (eq type "radio") (eq type "checkbox"))}}
From d16e8e40583773b7ac0aa56186ec60fa09b70a0c Mon Sep 17 00:00:00 2001 From: lovasoa Date: Tue, 20 May 2025 00:51:59 +0200 Subject: [PATCH 5/6] trailing whitespace --- sqlpage/templates/form.handlebars | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sqlpage/templates/form.handlebars b/sqlpage/templates/form.handlebars index e734fec0..7cb05fe3 100644 --- a/sqlpage/templates/form.handlebars +++ b/sqlpage/templates/form.handlebars @@ -151,7 +151,7 @@ {{~#if description_md~}} {{{markdown description_md}}} {{~/if~}} - + {{~/if~}} {{/if}} {{/if}} From 44d1125dbbf468b150cd4948528d922a4cbbf230 Mon Sep 17 00:00:00 2001 From: lovasoa Date: Tue, 20 May 2025 00:53:15 +0200 Subject: [PATCH 6/6] docs --- examples/official-site/sqlpage/migrations/01_documentation.sql | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql index 27d897d6..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),