Support prefix and suffix row-level parameters when using a 'select' element in a form

CHANGELOG.md

@@ -14,6 +14,7 @@
 - `cargo install sqlpage`, and any build from the crates.io tarball, no longer needs internet access. The browser libraries now come from npm and ship inside the published crate. Building from a git checkout needs `npm ci` first. Pre-built binaries and the Docker image are unaffected.
 - The browser libraries are now part of the browser scripts. SQLPage no longer defines the `window.tabler` and `window.bootstrap` globals; custom scripts that reached for them should load their own copy of Bootstrap.
 - The startup message now reports the address the server actually bound instead of the one it was configured with.
+- Inside a form component you can now use the `prefix`, `prefix_icon` and `suffix` row-level parameters when `type` is `select`. 
 
 ## v0.46.3
 

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

@@ -386,6 +386,7 @@ In SQLite, the query would look like
 SELECT 
     ''select'' as type,
     ''Select a fruit...'' as empty_option,
+    ''cherry'' as prefix_icon,
     json_group_array(json_object(
         ''label'', name,
         ''value'', id

sqlpage/templates/form.handlebars

@@ -87,26 +87,30 @@
                         {{~#if value includeZero=true}}{{value}}{{/if~}}
                         </textarea>
                     {{~else~}}{{#if (eq type 'select')~}}
-                        <select name="{{name}}" 
-                            class="form-select {{class}}"
-                        {{~#if id}} id="{{id}}" {{/if~}}
-                        {{~#if required}} required="required" {{/if~}}
-                        {{~#if autofocus}} autofocus {{/if~}}
-                        {{~#if disabled}}disabled {{/if~}}
-                        {{~#if multiple}} multiple {{/if~}}
-                        {{~#if (or dropdown searchable options_source)}} 
-                            data-pre-init="select-dropdown"
-                            data-sqlpage-js="{{static_path 'tomselect.js'}}"
-                        {{/if~}}
-                        {{~#if options_source}} data-options_source="{{options_source}}" {{/if~}}
-                        {{~#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 (loose_eq ../value value) selected)}}selected{{/if}}>{{label}}</option>
-                        {{/each}}
-                        </select>
+                        <div class="input-group">
+                            {{#if prefix_icon}}<span class="input-group-text">{{icon_img prefix_icon}}</span>{{/if}}
+                            {{#if prefix}}<span class="input-group-text">{{prefix}}</span>{{/if}}
+                            <select name="{{name}}"  class="form-select {{class}}"
+                                {{~#if id}} id="{{id}}" {{/if~}}
+                                {{~#if required}} required="required" {{/if~}}
+                                {{~#if autofocus}} autofocus {{/if~}}
+                                {{~#if disabled}}disabled {{/if~}}
+                                {{~#if multiple}} multiple {{/if~}}
+                                {{~#if (or dropdown searchable options_source)}} 
+                                    data-pre-init="select-dropdown"
+                                    data-sqlpage-js="{{static_path 'tomselect.js'}}"
+                                {{/if~}}
+                                {{~#if options_source}} data-options_source="{{options_source}}" {{/if~}}
+                                {{~#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 (loose_eq ../value value) selected)}}selected{{/if}}>{{label}}</option>
+                                {{/each}}
+                            </select>
+                            {{#if suffix}}<span class="input-group-text">{{suffix}}</span>{{/if}}
+                        </div>
                     {{else}}
                         <div class="input-group">
                             {{#if prefix_icon}}<span class="input-group-text">{{icon_img prefix_icon}}</span>{{/if}}

tests/sql_test_files/component_rendering/form_select_uses_prefix.sql

@@ -0,0 +1,4 @@
+select 'form' as component;
+select 'select' as type,
+    'It works !' as prefix,
+    '[{"label": "Orange", "value": 0}, {"label": "Apple", "value": 1}, {"label": "Banana", "value": 3}]' as options;