Skip to content

Commit f2a56a1

Browse files
lorefnonlorefnon
committed
Add id/class to the components
1 parent 41c1318 commit f2a56a1

25 files changed

+123
-48
lines changed

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ INSERT INTO component(name, icon, description) VALUES
193193
INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'form', * FROM (VALUES
194194
-- top level
195195
('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),
196-
('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),
196+
('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),
197197
('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),
198198
('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),
199199
('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
730730
"css": "/prism-tabler-theme.css",
731731
"footer": "Official [SQLPage](https://sql.ophir.dev) documentation"
732732
}]'));
733+

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ VALUES (
2424
(
2525
'tab',
2626
'link',
27-
'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.',
27+
'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.',
2828
'TEXT',
2929
FALSE,
3030
TRUE
@@ -88,9 +88,9 @@ View the [dynamic tabs example](examples/tabs.sql).
8888
JSON(
8989
'[
9090
{ "component": "tab" },
91-
{ "title": "My First tab", "active": true },
92-
{ "title": "This is tab two" },
93-
{ "title": "Third tab is crazy" }
91+
{ "title": "My First tab", "active": true, "id": "first" },
92+
{ "title": "This is tab two", "id": "second" },
93+
{ "title": "Third tab is crazy", "id": "third" }
9494
]'
9595
)
9696
),
@@ -106,4 +106,4 @@ View the [dynamic tabs example](examples/tabs.sql).
106106
]'
107107
)
108108
)
109-
;
109+
;

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

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
-- 1
2+
INSERT INTO parameter(component, top_level, name, description, type, optional)
3+
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
4+
FROM (VALUES
5+
('alert', TRUE),
6+
('breadcrumb', TRUE),
7+
('chart', TRUE),
8+
-- ('code', TRUE),
9+
('csv', TRUE),
10+
('datagrid', TRUE),
11+
('hero', TRUE),
12+
('list', TRUE),
13+
('list', FALSE),
14+
('map', TRUE),
15+
('tab', FALSE),
16+
('table', TRUE),
17+
('timeline', TRUE),
18+
('timeline', FALSE),
19+
-- ('title', TRUE),
20+
('tracking', TRUE),
21+
('text', TRUE)
22+
);
23+
24+
-- 2
25+
INSERT INTO parameter(component, top_level, name, description, type, optional)
26+
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
27+
FROM (VALUES
28+
('steps', TRUE)
29+
);
30+
31+
-- 3
32+
INSERT INTO parameter(component, top_level, name, description, type, optional)
33+
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
34+
FROM (VALUES
35+
('alert', TRUE),
36+
('breadcrumb', TRUE),
37+
('button', TRUE),
38+
('card', FALSE),
39+
('chart', TRUE),
40+
-- ('code', TRUE),
41+
('csv', TRUE),
42+
('datagrid', TRUE),
43+
('divider', TRUE),
44+
('form', TRUE),
45+
('list', TRUE),
46+
('list', FALSE),
47+
('map', TRUE),
48+
('tab', FALSE),
49+
('table', TRUE),
50+
('timeline', TRUE),
51+
('timeline', FALSE),
52+
-- ('title', TRUE),
53+
('tracking', TRUE)
54+
);
55+

‎examples/official-site/sqlpage/sqlpage.yaml

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@
22
database_url: "sqlite::memory:"
33

44
# We have a file upload example, and would like to limit the size of the uploaded files
5-
max_uploaded_file_size: 256000
5+
max_uploaded_file_size: 256000
6+
7+
listen_on: "0.0.0.0:9898"
8+

‎sqlpage/templates/alert.handlebars

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
<div class="
2-
alert
3-
alert-{{default color "info"}}
4-
{{#if dismissible}}alert-dismissible{{/if}}
5-
{{#if important}}alert-important{{/if}}
6-
" role="alert">
1+
<div
2+
{{#if id}}id="{{id}}"{{/if}}
3+
class="
4+
alert
5+
alert-{{default color "info"}}
6+
{{#if dismissible}}alert-dismissible{{/if}}
7+
{{#if important}}alert-important{{/if}}
8+
{{class}}
9+
"
10+
role="alert"
11+
>
712
<div class="d-flex">
813

914
{{#if icon}}

‎sqlpage/templates/breadcrumb.handlebars

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<nav aria-label="breadcrumb" class="my-1">
1+
<nav {{#if id}}id="{{id}}"{{/if}} aria-label="breadcrumb" class="my-1 {{class}}">
22
<ol class="breadcrumb">
33
{{#each_row}}
44
<li class="breadcrumb-item{{#if active}} active{{/if}}" {{#if active}}aria-current="page"{{/if}}>

‎sqlpage/templates/button.handlebars

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="btn-list mb-2 {{#if justify}}justify-content-{{justify}}{{/if}}">
1+
<div class="btn-list mb-2 {{#if justify}}justify-content-{{justify}}{{/if}} {{class}}">
22
{{#each_row}}
33
{{#if form}}
44
<button type="submit" form="{{form}}" {{#if link}}formaction="{{link}}"{{/if}}
@@ -22,4 +22,4 @@
2222
</a>
2323
{{/if}}
2424
{{/each_row}}
25-
</div>
25+
</div>

‎sqlpage/templates/card.handlebars

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020
row-cols-xl-5
2121
{{/if}}
2222
gx-2 gy-2
23-
mt-1 mb-3">
23+
mt-1 mb-3 {{class}}">
2424
{{#each_row}}
25-
<div class="col">
25+
<div class="col {{class}}" {{#if id}}id="{{id}}"{{/if}}>
2626
<div class="card h-100 {{#if active}}card-active{{/if}}" {{#if embed }}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
2727
{{#if link}}
2828
<a href="{{link}}" style="text-decoration: inherit; color: inherit">

‎sqlpage/templates/chart.handlebars

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
<div class="card my-2" data-pre-init="chart" data-js="/{{static_path 'apexcharts.js'}}">
1+
<div
2+
{{#if id}}id="{{id}}"{{/if}}
3+
class="card my-2 {{class}}"
4+
data-pre-init="chart"
5+
data-js="/{{static_path 'apexcharts.js'}}"
6+
>
27
<div class="card-body">
38
<div class="d-flex">
49
<h3 class="card-title">{{title}}</h3>

‎sqlpage/templates/code.handlebars

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="code-component my-1">
1+
<div class="code-component my-1 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
22
{{#each_row}}
33
<h2>{{title}}</h2>
44
<p>{{description}}</p>

‎sqlpage/templates/csv.handlebars

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="my-2">
1+
<div class="my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
22
<a href="data:text/csv;charset=UTF-8,
33
{{~#each_row~}}
44
{{~#if (eq @row_index 0)~}}{{! header }}
@@ -21,4 +21,4 @@
2121
{{~icon_img (default icon "download")~}}
2222
{{default title "Download"}}
2323
</a>
24-
</div>
24+
</div>

‎sqlpage/templates/datagrid.handlebars

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="card my-2">
1+
<div class="card my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
22
{{#if title}}
33
<div class="card-header">
44
{{#if image_url}}

‎sqlpage/templates/divider.handlebars

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{#if contents}}
2-
<div class="hr-text {{#if position}}hr-text-{{position}}{{/if}} {{#if color}}text-{{color}}{{/if}}">{{contents}}</div>
2+
<div class="hr-text {{#if position}}hr-text-{{position}}{{/if}} {{#if color}}text-{{color}}{{/if}} {{class}}">{{contents}}</div>
33
{{else}}
4-
<hr />
5-
{{/if}}
4+
<hr class="{{class}}" />
5+
{{/if}}

‎sqlpage/templates/error.handlebars

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,4 @@
2323
{{#if note}}
2424
<p class="fs-5 mt-1 p-1 my-1">{{note}}</p>
2525
{{/if}}
26-
</div>
26+
</div>

‎sqlpage/templates/form.handlebars

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<form
22
{{#if id}}id="{{id}}"{{/if}}
3-
class="my-3"
3+
class="my-3 {{class}}"
44
method="{{default method "post"}}"
5-
{{#if action}}action="{{action}}"{{/if}}
5+
{{#if action}}action="{{action}}"
6+
{{else}}
7+
{{#if id}}action="#{{id}}"{{/if}}
8+
{{/if}}
69
>
710
<fieldset class="form-fieldset">
811
{{#if title}}

‎sqlpage/templates/hero.handlebars

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<header class="row align-items-center">
1+
<header class="row align-items-center" {{#if id}} id="{{id}}"{{/if}}>
22
<div class="hero-title col text-center">
33
<h1 class="lh-lg" style="font-size: 3rem">{{title}}</h1>
44
<div class="fs-1 mx-5 text-muted">
@@ -50,4 +50,4 @@
5050
</div>
5151
</div>
5252
{{~/each_row~}}
53-
</div>
53+
</div>

‎sqlpage/templates/list.handlebars

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="card my-2">
1+
<div class="card my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
22
{{#if title}}
33
<div class="card-header ">
44
<h2 class="card-title">{{title}}</h2>
@@ -7,7 +7,9 @@
77
<div class="list-group list-group-flush list-group-hoverable">
88
{{#each_row}}
99
<{{#if link}}a href="{{link}}" {{else}}div{{/if}}
10-
class="list-group-item list-group-item-action {{#if active}}active{{/if}}">
10+
{{#if id}}id="{{id}}"{{/if}}
11+
class="list-group-item list-group-item-action {{#if active}}active{{/if}} {{class}}">
12+
1113
<div class="row align-items-center">
1214
{{#if color}}
1315
<div class="col-auto"><span class="badge bg-{{color}}"></span></div>
@@ -50,4 +52,4 @@
5052
</a>
5153
{{/if}}
5254
</div>
53-
</div>
55+
</div>

‎sqlpage/templates/map.handlebars

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="card my-3">
1+
<div class="card my-3 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
22
<div class="card-body">
33
<h3 class="card-title">{{title}}</h3>
44
<div

‎sqlpage/templates/steps.handlebars

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
{{#if id}}<a id="{{id}}" />{{/if}}
12
{{#if title}}
23
<h2 class="mt-3 mb-0">{{title}}</h2>
34
{{/if}}
@@ -20,4 +21,4 @@
2021
{{title}}
2122
{{#if link}}</a>{{else}}</span>{{/if}}
2223
{{/each_row}}
23-
</div>
24+
</div>

‎sqlpage/templates/tab.handlebars

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<ul class="nav nav-bordered mb-3 {{#if center}}justify-content-evenly{{/if}}">
1+
<ul class="nav nav-bordered mb-3 {{#if center}}justify-content-evenly{{/if}} {{class}}" {{#if id}}id="{{id}}"{{/if}}>
22
{{~#each_row~}}
3-
<li class="nav-item">
3+
<li class="nav-item {{class}}" {{#if id}}id="{{id}}"{{/if}}>
44
<a
55
class="nav-link {{#if active~}}
66
active
@@ -13,7 +13,7 @@
1313
href="{{#if link}}
1414
{{~link~}}
1515
{{~else~}}
16-
?tab={{title}}
16+
?tab={{title}}{{#if id}}#{{id}}{{/if}}
1717
{{~/if}}"
1818

1919
{{#if description~}}
@@ -29,4 +29,4 @@
2929
</a>
3030
</li>
3131
{{~/each_row~}}
32-
</ul>
32+
</ul>

‎sqlpage/templates/table.handlebars

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

‎sqlpage/templates/text.handlebars

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,4 @@
2727
{{{markdown contents_md}}}
2828
{{~/if~}}
2929
{{~/each_row~}}
30-
</p>
30+
</p>

‎sqlpage/templates/timeline.handlebars

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<ul class="timeline {{#if simple}}timeline-simple{{/if}}">
1+
<ul class="timeline {{#if simple}}timeline-simple{{/if}} {{class}}" {{#if id}}id="{{id}}"{{/if}}>
22
{{#each_row}}
3-
<li class="timeline-event">
3+
<li class="timeline-event {{class}}" {{#if id}}id="{{id}}"{{/if}}>
44
<div class="timeline-event-icon {{#if color}}bg-{{color}}-lt{{/if}}">
55
{{~icon_img (default icon 'git-commit')~}}
66
</div>
@@ -28,4 +28,4 @@
2828
{{~/if~}}
2929
</li>
3030
{{/each_row}}
31-
</ul>
31+
</ul>

‎sqlpage/templates/title.handlebars

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<h{{default level 1}} class="mt-2 mb-1">{{contents}}</h{{default level 1}}>
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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}}">
1+
<div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}} {{class}}" {{#if id}}id="{{id}}"{{/if}}>
22
<div class="card-body">
33
<div class="d-flex align-items-center">
44
<div class="subheader">{{title}}</div>
@@ -23,4 +23,4 @@
2323
</div>
2424
</div>
2525
</div>
26-
</div>
26+
</div>

0 commit comments

Comments
 (0)