New modal component

examples/official-site/sqlpage/migrations/63_modal.sql

@@ -0,0 +1,28 @@
+INSERT INTO component(name, icon, description, introduced_in_version) VALUES
+    ('modal', 'app-window', 'Defines the content of a modal box. Useful for displaying additional information or help.', '0.36.0');
+
+INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'modal', * FROM (VALUES
+    ('title','Description of the modal box.','TEXT',TRUE,FALSE),
+    ('close','The text to display in the Close button.','TEXT',TRUE,FALSE),
+    ('contents','A paragraph of text to display, without any formatting, without having to make additional queries.','TEXT',FALSE,TRUE),
+    ('contents_md','Rich text in the markdown format. Among others, this allows you to write bold text using **bold**, italics using *italics*, and links using [text](https://example.com).','TEXT',FALSE,TRUE),
+    ('unsafe_contents_md','Markdown format with html blocks. Use this only with trusted content. See the html-blocks section of the Commonmark spec for additional info.','TEXT',FALSE,TRUE),
+    ('scrollable','Dreate a scrollable modal that allows scroll the modal body.','BOOLEAN',TRUE,TRUE),
+    ('class','Class attribute added to the container in HTML. It can be used to apply custom styling to this item through css.','TEXT',TRUE,TRUE),
+    ('id','ID attribute added to the container in HTML. It can be used to target this item through css or for displaying this item.','TEXT',TRUE,FALSE)
+) x;
+
+INSERT INTO example(component, description, properties) VALUES
+    ('modal', 
+    'This example shows how to create a modal box that displays a paragraph of text. The modal window is opened with the help of a button.',
+    json('[
+        {"component": "modal","id": "my_modal","title": "A modal box","close": "Close"},
+        {"contents":"I''m a modal window, and I allow you to display additional information or help for the user."},
+        {"component": "button"},
+        {"title":"Open","modal":"my_modal"}
+        ]')
+    );
+
+INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'button', * FROM (VALUES
+    ('modal','Display the modal window corresponding to the specified ID.','TEXT',FALSE,TRUE)
+) x;

sqlpage/templates/button.handlebars

@@ -17,6 +17,7 @@
         {{~#if download}} download="{{download}}"{{/if}}
         {{~#if rel}} rel="{{rel}}"{{/if}}
         {{~#if tooltip}} data-bs-toggle="tooltip" data-bs-placement="top" title="{{tooltip}}"{{/if}}
+        {{~#if modal}} data-bs-toggle="modal" data-bs-target="#{{modal}}"{{/if}}
         role="button">
         {{~#if image~}}
             <span {{~#if title}} class="me-1"{{/if}}>

sqlpage/templates/modal.handlebars

@@ -0,0 +1,28 @@
+<div class="modal{{~#if class}} {{class}}{{/if~}}" id="{{id}}" tabindex="-1" aria-hidden="false" aria-labelledby="{{title}}">
+    <div class="modal-dialog{{#if scrollable}} modal-dialog-scrollable"{{/if}} role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">{{title}}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{close}}"></button>
+            </div>
+            <div class="modal-body">
+                {{~#each_row~}}
+                    <p>
+                        {{~#if contents_md~}}
+                            {{{markdown contents_md}}}
+                        {{else}}
+                            {{~#if unsafe_contents_md~}}
+                                {{{markdown unsafe_contents_md 'allow_unsafe'}}}
+                            {{else}}
+                                {{~contents~}}
+                            {{~/if~}}
+                        {{~/if~}}
+                    </p>
+                {{~/each_row~}}
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn me-primary" data-bs-dismiss="modal">{{close}}</button>
+            </div>
+        </div>
+    </div>
+</div>