add empty_option to the form component (#694)

* Update form.handlebars

Add empty option to select

* Update 01_documentation.sql

Add documentation

* Update examples/official-site/sqlpage/migrations/01_documentation.sql

* Update sqlpage/templates/form.handlebars

* add empty_option example

* empty_option

---------

Co-authored-by: Ophir LOJKINE <[email protected]>

Author: xylle

CHANGELOG.md

@@ -38,6 +38,7 @@
   - Fixed a problem where database errors would be displayed twice in the error message.
 - Fixed layout issues in the card component when embedding content with `embed`: remove double border and padding.
   - ![embedded card screenshot](https://github.com/user-attachments/assets/ea85438d-5fcb-4eed-b90b-a4385675355d)
+- Added support for `empty_option` in the form component to add an empty option before the options defined in `options`. Useful when generating other options from a database table.
 
 ## 0.30.1 (2024-10-31)
 - fix a bug where table sorting would break if table search was not also enabled.

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -251,6 +251,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('max', 'The maximum value to accept for an input of type number', 'REAL', FALSE, TRUE),
     ('checked', 'Used only for checkboxes and radio buttons. Indicates whether the checkbox should appear as already checked.', 'BOOLEAN', FALSE, TRUE),
     ('multiple', 'Used only for select elements. Indicates that multiple elements can be selected simultaneously. When using multiple, you should add square brackets after the variable name: ''my_variable[]'' as name', 'BOOLEAN', FALSE, TRUE),
+    ('empty_option', 'Only for inputs of type `select`. Adds an empty option with the given label before the ones defined in `options`. Useful when generating other options from a database table.', 'TEXT', FALSE, TRUE),
     ('searchable', 'For select and multiple-select elements, displays them with a nice dropdown that allows searching for options.', 'BOOLEAN', FALSE, TRUE),
     ('dropdown', 'An alias for "searchable".', 'BOOLEAN', FALSE, TRUE),
     ('create_new', 'In a multiselect with a dropdown, this option allows the user to enter new values, that are not in the list of options.', 'BOOLEAN', FALSE, TRUE),
@@ -322,15 +323,18 @@ In SQLite, the query would look like
 ```sql
 SELECT 
     ''select'' as type,
+    ''Select a fruit...'' as empty_option,
     json_group_array(json_object(
         ''label'', name,
         ''value'', id
     )) as options
 FROM fruits
 ```
 ', json('[{"component":"form", "action":"examples/show_variables.sql"},
-    {"name": "Fruit", "type": "select", "searchable": true, "value": 1, "options":
-        "[{\"label\": \"Orange\", \"value\": 0}, {\"label\": \"Apple\", \"value\": 1}, {\"label\": \"Banana\", \"value\": 3}]"}
+    {"name": "Fruit", "type": "select",
+        "empty_option": "Select a fruit...",
+        "options":
+            "[{\"label\": \"Orange\", \"value\": 0}, {\"label\": \"Apple\", \"value\": 1}, {\"label\": \"Banana\", \"value\": 3}]"}
     ]')),
     ('form', '### Multi-select
 You can authorize the user to select multiple options by setting the `multiple` property to `true`.

sqlpage/templates/form.handlebars

@@ -75,6 +75,7 @@
                         {{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
                         {{~#if create_new}} data-create_new={{create_new}} {{/if~}}
                         >
+                        {{#if empty_option}}<option value="">{{empty_option}}</option>{{/if}}
                         {{#each (parse_json options)}}
                             <option value="{{value}}" {{#if (or (eq ../value value) selected)}}selected{{/if}}>{{label}}</option>
                         {{/each}}