Support id/class in built-in components

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
@@ -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,52 @@
+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)
+);
+
+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)
+);
+
+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)
+);
+

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>

sqlpage/templates/csv.handlebars

@@ -1,4 +1,4 @@
-<div class="my-2">
+<div class="my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
     <a href="data:text/csv;charset=UTF-8,
 {{~#each_row~}}
         {{~#if (eq @row_index 0)~}}{{! header }}
@@ -21,4 +21,4 @@
         {{~icon_img (default icon "download")~}}
         {{default title "Download"}}
     </a>
-</div>
+</div>

sqlpage/templates/datagrid.handlebars

@@ -1,4 +1,4 @@
-<div class="card my-2">
+<div class="card my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
     {{#if title}}
         <div class="card-header">
             {{#if image_url}}

sqlpage/templates/divider.handlebars

@@ -1,5 +1,5 @@
 {{#if contents}}
-    <div class="hr-text {{#if position}}hr-text-{{position}}{{/if}} {{#if color}}text-{{color}}{{/if}}">{{contents}}</div>
+    <div class="hr-text {{#if position}}hr-text-{{position}}{{/if}} {{#if color}}text-{{color}}{{/if}} {{class}}">{{contents}}</div>
 {{else}}
-    <hr />
-{{/if}}
+    <hr class="{{class}}" />
+{{/if}}

sqlpage/templates/error.handlebars

@@ -23,4 +23,4 @@
     {{#if note}}
         <p class="fs-5 mt-1 p-1 my-1">{{note}}</p>
     {{/if}}
-</div>
+</div>

sqlpage/templates/form.handlebars

@@ -1,8 +1,11 @@
 <form 
     {{#if id}}id="{{id}}"{{/if}}
-    class="my-3"
+    class="my-3 {{class}}"
     method="{{default method "post"}}"
-    {{#if action}}action="{{action}}"{{/if}}
+    {{#if action}}action="{{action}}"
+    {{else}}
+    {{#if id}}action="#{{id}}"{{/if}}
+    {{/if}}
 >
     <fieldset class="form-fieldset">
         {{#if title}}

sqlpage/templates/hero.handlebars

@@ -1,4 +1,4 @@
-<header class="row align-items-center">
+<header class="row align-items-center" {{#if id}} id="{{id}}"{{/if}}>
   <div class="hero-title col text-center">
     <h1 class="lh-lg" style="font-size: 3rem">{{title}}</h1>
     <div class="fs-1 mx-5 text-muted">
@@ -50,4 +50,4 @@
     </div>
   </div>
   {{~/each_row~}}
-</div>
+</div>

sqlpage/templates/list.handlebars

@@ -1,4 +1,4 @@
-<div class="card my-2">
+<div class="card my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
     {{#if title}}
         <div class="card-header ">
             <h2 class="card-title">{{title}}</h2>
@@ -7,7 +7,9 @@
     <div class="list-group list-group-flush list-group-hoverable">
         {{#each_row}}
             <{{#if link}}a href="{{link}}" {{else}}div{{/if}}
-                           class="list-group-item list-group-item-action {{#if active}}active{{/if}}">
+                {{#if id}}id="{{id}}"{{/if}}
+                class="list-group-item list-group-item-action {{#if active}}active{{/if}} {{class}}">
+
                 <div class="row align-items-center">
                     {{#if color}}
                         <div class="col-auto"><span class="badge bg-{{color}}"></span></div>
@@ -50,4 +52,4 @@
             </a>
         {{/if}}
     </div>
-</div>
+</div>

sqlpage/templates/map.handlebars

@@ -1,4 +1,4 @@
-<div class="card my-3">
+<div class="card my-3 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
   <div class="card-body">
     <h3 class="card-title">{{title}}</h3>
     <div

sqlpage/templates/steps.handlebars

@@ -1,3 +1,4 @@
+{{#if id}}<a id="{{id}}" />{{/if}} 
 {{#if title}}
     <h2 class="mt-3 mb-0">{{title}}</h2>
 {{/if}}
@@ -20,4 +21,4 @@
         {{title}}
         {{#if link}}</a>{{else}}</span>{{/if}}
     {{/each_row}}
-</div>
+</div>

sqlpage/templates/tab.handlebars

@@ -1,6 +1,6 @@
-<ul class="nav nav-bordered mb-3 {{#if center}}justify-content-evenly{{/if}}">
+<ul class="nav nav-bordered mb-3 {{#if center}}justify-content-evenly{{/if}} {{class}}" {{#if id}}id="{{id}}"{{/if}}>
     {{~#each_row~}}
-    <li class="nav-item">
+    <li class="nav-item {{class}}" {{#if id}}id="{{id}}"{{/if}}>
         <a 
             class="nav-link {{#if active~}}
                 active
@@ -13,7 +13,7 @@
             href="{{#if link}}
                 {{~link~}}
             {{~else~}}
-                ?tab={{title}}
+                ?tab={{title}}{{#if id}}#{{id}}{{/if}}
             {{~/if}}"
 
             {{#if description~}}
@@ -29,4 +29,4 @@
         </a>
     </li>
     {{~/each_row~}}
-</ul>
+</ul>

sqlpage/templates/table.handlebars

@@ -1,4 +1,4 @@
-<div class="card my-2">
+<div class="card my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
     <div class="card-body">
         <div class="table-responsive" {{#if (or sort search)}}data-pre-init="table"{{/if}}>
             {{#if search}}

sqlpage/templates/text.handlebars

@@ -27,4 +27,4 @@
             {{{markdown contents_md}}}
         {{~/if~}}
     {{~/each_row~}}
-</p>
+</p>

sqlpage/templates/timeline.handlebars

@@ -1,6 +1,6 @@
-<ul class="timeline {{#if simple}}timeline-simple{{/if}}">
+<ul class="timeline {{#if simple}}timeline-simple{{/if}} {{class}}" {{#if id}}id="{{id}}"{{/if}}>
   {{#each_row}}
-  <li class="timeline-event">
+  <li class="timeline-event {{class}}" {{#if id}}id="{{id}}"{{/if}}>
     <div class="timeline-event-icon {{#if color}}bg-{{color}}-lt{{/if}}">
         {{~icon_img (default icon 'git-commit')~}}
     </div>
@@ -28,4 +28,4 @@
     {{~/if~}}
   </li>
   {{/each_row}}
-</ul>
+</ul>

sqlpage/templates/title.handlebars

@@ -1 +1 @@
-<h{{default level 1}} class="mt-2 mb-1">{{contents}}</h{{default level 1}}>
+<h{{default level 1}} class="mt-2 mb-1 {{class}}" {{#if id}}id="{{id}}"{{/if}}>{{contents}}</h{{default level 1}}>

sqlpage/templates/tracking.handlebars

@@ -1,4 +1,4 @@
-<div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}}">
+<div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}} {{class}}" {{#if id}}id="{{id}}"{{/if}}>
 	<div class="card-body">
 		<div class="d-flex align-items-center">
 			<div class="subheader">{{title}}</div>
@@ -23,4 +23,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div>