Add id/class to the components

Author: lorefnon

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

@@ -193,7 +193,7 @@ INSERT INTO component(name, icon, description) VALUES
 INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'form', * FROM (VALUES
     -- top level
     ('method', 'Set this to ''GET'' to pass the form contents directly as URL parameters. If the user enters a value v in a field named x, submitting the form will load target.sql?x=v. If target.sql contains SELECT $x, it will display the value v.', 'TEXT', TRUE, TRUE),
-    ('action', 'An optional link to a target page that will handle the results of the form. By default the target page is the current page. Setting it to the name of a different sql file will load that file when the user submits the form.', 'TEXT', TRUE, TRUE),
+    ('action', 'An optional link to a target page that will handle the results of the form. By default the target page is the current page with the id of the form (if passed) used as hash - this will bring us back to the location of the form after submission. Setting it to the name of a different sql file will load that file when the user submits the form.', 'TEXT', TRUE, TRUE),
     ('title', 'A name to display at the top of the form. It will be displayed in a larger font size at the top of the form.', 'TEXT', TRUE, TRUE),
     ('validate', 'The text to display in the button at the bottom of the form that submits the values. Omit this property to let the browser display the default form validation text, or set it to the empty string to remove the button completely.', 'TEXT', TRUE, TRUE),
     ('validate_color', 'The color of the button at the bottom of the form that submits the values. Omit this property to use the default color.', 'COLOR', TRUE, TRUE),
@@ -730,3 +730,4 @@ On other engines (such as SQLite), you can use the [`dynamic`](?component=dynami
             "css": "/prism-tabler-theme.css",
             "footer": "Official [SQLPage](https://sql.ophir.dev) documentation"
         }]'));
+

examples/official-site/sqlpage/migrations/13_tab.sql

@@ -24,7 +24,7 @@ VALUES (
     (
         'tab',
         'link',
-        'Link to the page to display when the tab is clicked. By default, the link refers to the current page, with a ''tab'' parameter set to the tab''s title.',
+        'Link to the page to display when the tab is clicked. By default, the link refers to the current page, with a ''tab'' parameter set to the tab''s title and hash set to the id (if passed) - this brings us back to the location of the tab after submission.',
         'TEXT',
         FALSE,
         TRUE
@@ -88,9 +88,9 @@ View the [dynamic tabs example](examples/tabs.sql).
         JSON(
             '[
             { "component": "tab" },
-            { "title": "My First tab", "active": true },
-            { "title": "This is tab two" },
-            { "title": "Third tab is crazy" }
+            { "title": "My First tab", "active": true, "id": "first" },
+            { "title": "This is tab two", "id": "second" },
+            { "title": "Third tab is crazy", "id": "third" }
         ]'
         )
     ),
@@ -106,4 +106,4 @@ View the [dynamic tabs example](examples/tabs.sql).
         ]'
         )
     )
-    ;
+    ;

examples/official-site/sqlpage/migrations/32_shared_id_class_attributes.sql

@@ -0,0 +1,55 @@
+-- 1
+INSERT INTO parameter(component, top_level, name, description, type, optional) 
+SELECT *, '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
+FROM (VALUES
+    ('alert', TRUE),
+    ('breadcrumb', TRUE),
+    ('chart', TRUE),
+    -- ('code', TRUE),
+    ('csv', TRUE),
+    ('datagrid', TRUE),
+    ('hero', TRUE),
+    ('list', TRUE),
+    ('list', FALSE),
+    ('map', TRUE),
+    ('tab', FALSE),
+    ('table', TRUE),
+    ('timeline', TRUE),
+    ('timeline', FALSE),
+    -- ('title', TRUE),
+    ('tracking', TRUE),
+    ('text', TRUE)
+);
+
+-- 2
+INSERT INTO parameter(component, top_level, name, description, type, optional) 
+SELECT *, 'id', 'id attribute injected as an anchor in HTML. It can be used for scrolling to this item through links (use "#id" in link url)', 'TEXT', TRUE
+FROM (VALUES
+    ('steps', TRUE)
+);
+
+-- 3
+INSERT INTO parameter(component, top_level, name, description, type, optional) 
+SELECT *, 'class', 'class attribute added to the container in HTML. It can be used to apply custom styling to this item through css', 'TEXT', TRUE
+FROM (VALUES
+    ('alert', TRUE),
+    ('breadcrumb', TRUE),
+    ('button', TRUE),
+    ('card', FALSE),
+    ('chart', TRUE),
+    -- ('code', TRUE),
+    ('csv', TRUE),
+    ('datagrid', TRUE),
+    ('divider', TRUE),
+    ('form', TRUE),
+    ('list', TRUE),
+    ('list', FALSE),
+    ('map', TRUE),
+    ('tab', FALSE),
+    ('table', TRUE),
+    ('timeline', TRUE),
+    ('timeline', FALSE),
+    -- ('title', TRUE),
+    ('tracking', TRUE)
+);
+

examples/official-site/sqlpage/sqlpage.yaml

@@ -2,4 +2,7 @@
 database_url: "sqlite::memory:"
 
 # We have a file upload example, and would like to limit the size of the uploaded files 
-max_uploaded_file_size: 256000
+max_uploaded_file_size: 256000
+
+listen_on: "0.0.0.0:9898"
+

sqlpage/templates/alert.handlebars

@@ -1,9 +1,14 @@
-<div class="
-    alert
-    alert-{{default color "info"}}
-    {{#if dismissible}}alert-dismissible{{/if}}
-    {{#if important}}alert-important{{/if}}
-" role="alert">
+<div
+    {{#if id}}id="{{id}}"{{/if}}
+    class="
+        alert
+        alert-{{default color "info"}}
+        {{#if dismissible}}alert-dismissible{{/if}}
+        {{#if important}}alert-important{{/if}}
+        {{class}}
+    " 
+    role="alert"
+>
   <div class="d-flex">
 
     {{#if icon}}

sqlpage/templates/breadcrumb.handlebars

@@ -1,4 +1,4 @@
-<nav aria-label="breadcrumb" class="my-1">
+<nav {{#if id}}id="{{id}}"{{/if}} aria-label="breadcrumb" class="my-1 {{class}}">
   <ol class="breadcrumb">
   {{#each_row}}
     <li class="breadcrumb-item{{#if active}} active{{/if}}" {{#if active}}aria-current="page"{{/if}}>

sqlpage/templates/button.handlebars

@@ -1,4 +1,4 @@
-<div class="btn-list mb-2 {{#if justify}}justify-content-{{justify}}{{/if}}">
+<div class="btn-list mb-2 {{#if justify}}justify-content-{{justify}}{{/if}} {{class}}">
 {{#each_row}}
     {{#if form}}
     <button type="submit" form="{{form}}" {{#if link}}formaction="{{link}}"{{/if}} 
@@ -22,4 +22,4 @@
     </a>
     {{/if}}
 {{/each_row}}
-</div>
+</div>

sqlpage/templates/card.handlebars

@@ -20,9 +20,9 @@
         row-cols-xl-5
     {{/if}}
     gx-2 gy-2
-    mt-1 mb-3">
+    mt-1 mb-3 {{class}}">
     {{#each_row}}
-        <div class="col">
+        <div class="col {{class}}" {{#if id}}id="{{id}}"{{/if}}>
             <div class="card h-100 {{#if active}}card-active{{/if}}" {{#if embed }}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
                 {{#if link}}
                     <a href="{{link}}" style="text-decoration: inherit; color: inherit">

sqlpage/templates/chart.handlebars

@@ -1,4 +1,9 @@
-<div class="card my-2" data-pre-init="chart" data-js="/{{static_path 'apexcharts.js'}}">
+<div 
+    {{#if id}}id="{{id}}"{{/if}}
+    class="card my-2 {{class}}" 
+    data-pre-init="chart" 
+    data-js="/{{static_path 'apexcharts.js'}}"
+>
     <div class="card-body">
         <div class="d-flex">
             <h3 class="card-title">{{title}}</h3>

sqlpage/templates/code.handlebars

@@ -1,4 +1,4 @@
-<div class="code-component my-1">
+<div class="code-component my-1 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
     {{#each_row}}
         <h2>{{title}}</h2>
         <p>{{description}}</p>