New modal component

examples/official-site/examples/form.sql

@@ -0,0 +1,8 @@
+select 
+    'form'     as component,
+    'Save'     as validate;
+select 
+    'username' as name;
+select
+    'password' as name,
+    'password' as type;

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

@@ -0,0 +1,80 @@
+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,TRUE),
+    ('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),
+    ('scrollable','Create 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),
+    ('large','Indicates that the modal box has an increased width.','BOOLEAN',TRUE,TRUE),
+    ('small','Indicates that the modal box has a reduced width.','BOOLEAN',TRUE,TRUE),
+    ('embed','Embed remote content in an iframe.','TEXT',TRUE,TRUE),
+    ('embed_mode','Use "iframe" to display embedded content within an iframe.','TEXT',TRUE,TRUE),
+    ('height','Height of the embedded content.','INTEGER',TRUE,TRUE),
+    ('allow','For embedded content, this attribute specifies the features or permissions that can be used.','TEXT',TRUE,TRUE),
+    ('sandbox','For embedded content, this attribute specifies the security restrictions on the loaded content.','TEXT',TRUE,TRUE),
+    ('style','Applies CSS styles to the embedded content.','TEXT',TRUE,TRUE)
+) 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"}
+        ]')
+    ),
+    ('modal',
+    'Example of modal form content',
+    json('[
+        {
+            "component":"modal",
+            "id":"my_embed_form_modal",
+            "title":"Embeded form content",
+            "large":true,
+            "embed":"/examples/form.sql?_sqlpage_embed"
+        },
+        {"component": "button"},
+        {"title":"Open","modal":"my_embed_form_modal"}
+        ]')
+    ),
+    ('modal',
+    'Example of modal chart content',
+    json('[
+        {
+            "component":"modal",
+            "id":"my_embed_chart_modal",
+            "title":"Embeded chart content",
+            "close":"Close",
+            "embed":"/examples/chart.sql?_sqlpage_embed"
+        },
+        {"component": "button"},
+        {"title":"Open","modal":"my_embed_chart_modal"}
+        ]')
+    ),
+    ('modal',
+    'Example of modal video content',
+    json('[
+        {
+            "component":"modal",
+            "id":"my_embed_video_modal",
+            "title":"Embeded video content",
+            "close":"Close",
+            "embed":"https://www.youtube.com/embed/mXdgmSdaXkg",
+            "allow":"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+            "embed_mode":"iframe",
+            "height":"350"
+        },
+        {"component": "button"},
+        {"title":"Open","modal":"my_embed_video_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,50 @@
+<div class="modal{{~#if class}} {{class}}{{/if~}}" id="{{id}}" tabindex="-1" aria-hidden="false" aria-labelledby="{{title}}">
+    <div role="document" class="modal-dialog {{#if small}} modal-sm{{/if}}{{#if large}} modal-lg{{/if}}{{#if scrollable}} modal-dialog-scrollable{{/if}}">
+        <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="{{default close "close"}}"></button>
+            </div>
+            <div class="modal-body">
+                <div class="card bg-transparent border-0"
+                    {{~#if (and embed (ne embed_mode "iframe"))}} data-pre-init="card" data-embed="{{embed}}"{{/if ~}}
+                >
+                    <div class="card-body p-0">
+                        <div class="card-content remove-bottom-margin"></div>
+                        {{~#if embed ~}}
+                            {{~#if (eq embed_mode "iframe")}}
+                                <iframe src="{{embed}}" 
+                                    width="100%"
+                                    {{~#if height}} height="{{height}}"{{/if~}}
+                                    {{~#if allow}} allow="{{allow}}"{{/if~}}
+                                    {{~#if sandbox}} sandbox="{{sandbox}}"{{/if~}}
+                                    {{~#if style}} style="{{style}}"{{/if~}}
+                                >
+                                </iframe>
+                            {{~else~}}
+                                <div class="d-flex justify-content-center h-100 align-items-center card-loading-placeholder">
+                                    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
+                                        <span class="visually-hidden">Loading...</span>
+                                    </div>
+                                </div>
+                            {{~/if~}}   
+                        {{~/if~}}
+                        {{~#each_row~}}
+                            <p>
+                                {{~#if contents_md~}}
+                                    {{{markdown contents_md}}}
+                                {{else}}
+                                    {{~contents~}}
+                                {{~/if~}}
+                            </p>
+                        {{~/each_row~}}
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                {{#if close}}<button type="button" class="btn me-primary" data-bs-dismiss="modal">{{close}}</button>{{/if}}
+            </div>
+        </div>
+    </div>
+</div>
+