Merge branch 'main' into oidc

Author: lovasoa

CHANGELOG.md

@@ -5,6 +5,9 @@
  - Update default chart colors and text shadows for better readability with all themes
  - Optimize memory layout by boxing large structs. Slightly reduces memory usage.
  - New example: [Rich text editor](./examples/rich-text-editor/). Let your users safely write formatted text with links and images.
+ - Update the Tabler CSS library to [v1.2](https://tabler.io/changelog#/changelog/tabler-1.2). This fixes issues with 
+   - the alignment inside chart tooltips
+   - the display of lists
 
 ## v0.34 (2025-03-23)
 

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "sqlpage"
-version = "0.34.0"
+version = "0.35.0"
 edition = "2021"
 description = "Build data user interfaces entirely in SQL. A web server that takes .sql files and formats the query result using pre-made configurable professional-looking components."
 keywords = ["web", "sql", "framework"]

Cargo.toml

@@ -770,6 +770,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('sort', 'Make the columns clickable to let the user sort by the value contained in the column.', 'BOOLEAN', TRUE, TRUE),
     ('search', 'Add a search bar at the top of the table, letting users easily filter table rows by value.', 'BOOLEAN', TRUE, TRUE),
     ('initial_search_value', 'Pre-fills the search bar used to filter the table. The user will still be able to edit the value to display table rows that will initially be filtered out.', 'TEXT', TRUE, TRUE),
+    ('search_placeholder', 'Customizes the placeholder text shown in the search input field. Replaces the default "Search..." with text that better describes what users should search for.', 'TEXT', TRUE, TRUE),
     ('markdown', 'Set this to the name of a column whose content should be interpreted as markdown . Used to display rich text with links in the table. This argument can be repeated multiple times to intepret multiple columns as markdown.', 'TEXT', TRUE, TRUE),
     ('icon', 'Set this to the name of a column whose content should be interpreted as a tabler icon name. Used to display icons in the table. This argument can be repeated multiple times to intepret multiple columns as icons. Introduced in v0.8.0.', 'TEXT', TRUE, TRUE),
     ('align_right', 'Name of a column the contents of which should be right-aligned. This argument can be repeated multiple times to align multiple columns to the right. Introduced in v0.15.0.', 'TEXT', TRUE, TRUE),
@@ -801,9 +802,11 @@ INSERT INTO example(component, description, properties) VALUES
     ('table', 'The most basic table.',
         json('[{"component":"table"}, {"a": 1, "b": 2}, {"a": 3, "b": 4}]')),
     ('table', 'A table of users with filtering and sorting.',
-        json('[{"component":"table", "sort":true, "search":true}, '||
-        '{"First Name": "Ophir", "Last Name": "Lojkine", "Pseudonym": "lovasoa"},' ||
-        '{"First Name": "Linus", "Last Name": "Torvalds", "Pseudonym": "torvalds"}]')),
+        json('[
+        {"component":"table", "sort":true, "search":true, "search_placeholder": "Filter by name"},
+        {"First Name": "Ophir", "Last Name": "Lojkine", "Pseudonym": "lovasoa"},
+        {"First Name": "Linus", "Last Name": "Torvalds", "Pseudonym": "torvalds"}
+    ]')),
     ('table', 'A table that uses markdown to display links',
         json('[{"component":"table", "markdown": "Name", "icon": "icon", "search": true}, '||
         '{"icon": "table", "name": "[Table](?component=table)", "description": "Displays SQL results as a searchable table.", "_sqlpage_color": "red"},
@@ -835,8 +838,12 @@ Numbers can be displayed
     'table',
     'A table with some presentation options',
     json(
-        '[{"component":"table", "hover": true, "striped_rows": true, "description": "Some Star Trek Starfleet starships", "small": true, "initial_search_value": "NCC-" },'||
-        '{"name": "USS Enterprise", "registry": "NCC-1701-C", "class":"Ambassador"},
+        '[{"component":"table",
+                "hover": true, "striped_rows": true,
+                "description": "Some Star Trek Starfleet starships",
+                "small": true, "initial_search_value": "NCC-"
+        },
+         {"name": "USS Enterprise", "registry": "NCC-1701-C", "class":"Ambassador"},
          {"name": "USS Archer", "registry": "NCC-44278", "class":"Archer"},
          {"name": "USS Endeavour", "registry": "NCC-06", "class":"Columbia"},
          {"name": "USS Constellation", "registry": "NCC-1974", "class":"Constellation"},
@@ -1174,6 +1181,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('fixed_top_menu', 'Fixes the top bar with menu at the top (the top bar remains visible when scrolling long pages).', 'BOOLEAN', TRUE, TRUE),
     ('search_target', 'When this is set, a search field will appear in the top navigation bar, and load the specified sql file with an URL parameter named "search" when the user searches something.', 'TEXT', TRUE, TRUE),
     ('search_value', 'This value will be placed in the search field when "search_target" is set. Using the "$search" query parameter value will mirror the value that the user has searched for.', 'TEXT', TRUE, TRUE),
+    ('search_placeholder', 'Customizes the placeholder text shown in the search input field. Replaces the default "Search" with text that better describes what users should search for.', 'TEXT', TRUE, TRUE),
+    ('search_button', 'Customizes the text displayed on the search button. Replaces the default "Search" label with custom text that may better match your applications terminology or language.', 'TEXT', TRUE, TRUE),
     ('norobot', 'Forbids robots to save this page in their database and follow the links on this page. This will prevent this page to appear in Google search results for any query, for instance.', 'BOOLEAN', TRUE, TRUE),
     ('font', 'Specifies the font to be used for displaying text, which can be a valid font name from fonts.google.com or the path to a local WOFF2 font file starting with a slash (e.g., "/fonts/MyLocalFont.woff2").', 'TEXT', TRUE, TRUE),
     ('font_size', 'Font size on the page, in pixels. Set to 18 by default.', 'INTEGER', TRUE, TRUE),

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

@@ -2,13 +2,38 @@ INSERT INTO component (name, description, icon, introduced_in_version)
 VALUES (
         'redirect',
         'Redirects the user to another page.
-        This component is useful for implementing redirects after a form submission,
-        or to redirect users to a login page if they are not logged in.
-        
-        Contrary to the http_header component, this component completely stops the execution of the page after it is called,
-        so it is suitable to use to hide sensitive information from users that are not logged in, for example.
 
-        Since it uses an HTTP header to redirect the user, it is not possible to use this component after the page has started being sent to the browser.',
+This component helps you:
+1. Send users to a different page
+1. Stop execution of the current page
+
+### Conditional logic
+
+There is no `IF` statement in SQL. Even when you use a [`CASE` expression](https://modern-sql.com/caniuse/case_(simple)), all branches are always evaluated (and only one is returned).
+
+To conditionally execute a component or a [SQLPage function](/functions.sql), you can use the `redirect` component.
+A common use case is error handling. You may want to proceed with the rest of a page only when certain pre-conditions are met.
+
+```sql
+SELECT
+    ''redirect'' AS component,
+    ''error_page.sql'' AS link
+WHERE NOT your_condition;
+
+-- The rest of the page is only executed if the condition is true
+```
+### Technical limitation
+
+You must use this component **at the beginning of your SQL file**, before any other components that might send content to the browser.
+Since the component needs to tell the browser to go to a different page by sending an *HTTP header*,
+it will fail if the HTTP headers have already been sent by the time it is executed.
+
+> **Important difference from [http_header](?component=http_header)**
+>
+> This component completely stops the page from running after it''s called.
+> This makes it a good choice for protecting sensitive information from unauthorized users.
+
+',
         'arrow-right',
         '0.7.2'
     );

examples/official-site/sqlpage/migrations/09_redirect.sql

@@ -0,0 +1,52 @@
+INSERT INTO component(name, icon, description, introduced_in_version) VALUES
+    ('empty_state', 'info-circle', 'Displays a large placeholder message to communicate a single information to the user and invite them to take action.
+
+Typically includes a title, an optional icon/image, descriptive text (rich text formatting and images supported via Markdown), and a call-to-action button.
+
+Ideal for first-use screens, empty data sets, "no results" pages, or error messages.', '0.35.0');
+
+INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'empty_state', * FROM (VALUES
+    ('title','Description of the empty state.','TEXT',TRUE,FALSE),
+    ('header','Text displayed on the top of the empty state.','TEXT',TRUE,TRUE),
+    ('icon','Name of an icon to be displayed on the top of the empty state.','ICON',TRUE,TRUE),
+    ('image','The URL (absolute or relative) of an image to display at the top of the empty state.','URL',TRUE,TRUE),
+    ('description','A short text displayed below the title.','TEXT',TRUE,TRUE),
+    ('link_text','The text displayed on the button.','TEXT',TRUE,FALSE),
+    ('link_icon','Name of an icon to be displayed on the left side of the button.','ICON',TRUE,FALSE),
+    ('link','The URL to which the button should navigate when clicked.','URL',TRUE,FALSE),
+    ('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 scrolling to this item through links (use "#id" in link url).','TEXT',TRUE,TRUE)
+) x;
+
+INSERT INTO example(component, description, properties) VALUES
+    ('empty_state', '
+This example shows how to create a 404-style "Not Found" empty state with 
+ - a prominent header displaying "404",
+ - a helpful description suggesting to adjust search parameters, and
+ - a "Search again" button with a search icon that links back to the search page.
+',
+    json('[{
+        "component": "empty_state",
+        "title": "No results found",
+        "header": "404",
+        "description": "Try adjusting your search or filter to find what you''re looking for.",
+        "link_text": "Search again",
+        "link_icon": "search",
+        "link": "#not-found",
+        "id": "not-found"
+    }]')),
+    ('empty_state', '
+It''s possible to use an icon or an image to illustrate the problem.
+',
+    json('[{
+        "component": "empty_state",
+        "title": "A critical problem has occurred",
+        "icon": "mood-wrrr",
+        "description_md": "SQLPage can do a lot of things, but this is not one of them.
+
+Please restart your browser and **cross your fingers**.",
+        "link_text": "Close and restart",
+        "link_icon": "rotate-clockwise",
+        "link": "#"
+    }]'));
+

examples/official-site/sqlpage/migrations/60_empty_state.sql

@@ -1,5 +1,6 @@
-/* !include https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler.min.css */
-/* !include https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-vendors.min.css */
+/* !include https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler.min.css */
+/* !include https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.bootstrap5.css */
+/* !include https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-vendors.min.css */
 
 :root {
   /* Workaround for https://github.com/tabler/tabler/issues/1879 */

sqlpage/sqlpage.css

@@ -1,4 +1,4 @@
-/* !include https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0/dist/js/tabler.min.js */
+/* !include https://cdn.jsdelivr.net/npm/@tabler/core@1.2.0/dist/js/tabler.min.js */
 const nonce = document.currentScript.nonce;
 
 function sqlpage_card() {

sqlpage/sqlpage.js

@@ -0,0 +1,29 @@
+<div class="empty{{#if class}} {{class}}{{/if}}"{{#if id}} id="{{id}}"{{/if}}>
+  {{#if header}}
+    <div class="empty-header">{{header}}</div>
+  {{else}}
+    {{#if icon}}
+      <div class="empty-icon">
+        <span>{{icon_img icon }}</span>
+      </div>
+    {{else}}
+      {{#if image}}
+        <div class="empty-img"><img src="{{image}}" height="128" alt="{{image}}"/></div>
+      {{/if}}
+    {{/if}}
+  {{/if}}
+  <p class="empty-title">{{title}}</p>
+  <div class="empty-subtitle text-secondary remove-bottom-margin">
+    {{~#if description}}<p>{{description}}</p>{{/if~}}
+    {{~#if description_md~}}
+      {{{markdown description_md}}}
+    {{~/if~}}
+  </div>
+
+  <div class="empty-action">
+    <a href="{{link}}" class="btn btn-primary">
+      <span class="me-1">{{icon_img link_icon}}</span>
+      {{link_text}}
+    </a>
+  </div>
+</div>

sqlpage/templates/empty_state.handlebars

@@ -11,7 +11,7 @@
             <div class="row align-items-center m-0">
                 {{#if link}}<a href="{{link}}"
                 {{~else}}<div {{/if}}
-                    class="col row align-items-center text-decoration-none link-body-emphasis m-0 {{#if ../compact}}p-1{{else}}p-3{{/if}}">
+                    class="col row align-items-center text-decoration-none text-body m-0 {{#if ../compact}}p-1{{else}}p-3{{/if}}">
                     {{#if color}}
                         <div class="col-auto"><span class="badge bg-{{color}}"></span></div>
                     {{/if}}
@@ -48,7 +48,7 @@
 
                 {{#if delete_link}}
                     <form method="POST" action="{{delete_link}}" class="col-auto m-0 p-0">
-                        <button type="submit" class="btn btn-link link-secondary p-0 border-0" title="Delete">
+                        <button type="submit" class="btn btn-link link-secondary p-0 border-0 bg-transparent" title="Delete">
                             {{~icon_img 'trash'~}}
                         </button>
                     </form>