Skip to content

Commit 5f15972

Browse files
lovasoalovasoa
committed
add a "tab" component to create tabbed interfaces
1 parent bf116b7 commit 5f15972

File tree

6 files changed

+162
-19
lines changed

6 files changed

+162
-19
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# CHANGELOG.md
22

3+
## unreleased (0.9.5)
4+
5+
- New `tab` component to create tabbed interfaces. See [the documentation](https://sql.ophir.dev/documentation.sql?component=tab#component).
6+
37
## 0.9.4 (2023-08-04)
48

59
Small bugfix release

‎Cargo.lock

Lines changed: 17 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Cargo.toml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[package]
22
name = "sqlpage"
3-
version = "0.9.4"
3+
version = "0.9.5"
44
edition = "2021"
55
description = "A SQL-only web application framework. Takes .sql files and formats the query result using pre-made configurable professional-looking components."
66
keywords = ["web", "sql", "framework"]

‎examples/official-site/sqlpage/migrations/10_map.sql

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ VALUES (
8686
FALSE,
8787
TRUE
8888
);
89-
-- Insert an example usage of the http_header component into the example table
89+
-- Insert an example usage of the map component into the example table
9090
INSERT INTO example (component, description, properties)
9191
VALUES (
9292
'map',

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
INSERT INTO component (name, description, icon, introduced_in_version)
2+
VALUES (
3+
'tab',
4+
'Build a tabbed interface, with each tab being a link to a page. Each tab can be in two states: active or inactive.',
5+
'row-insert-bottom',
6+
'0.9.5'
7+
);
8+
-- Insert the parameters for the http_header component into the parameter table
9+
INSERT INTO parameter (
10+
component,
11+
name,
12+
description,
13+
type,
14+
top_level,
15+
optional
16+
)
17+
VALUES (
18+
'tab',
19+
'title',
20+
'Text to display on the tab.',
21+
'TEXT',
22+
FALSE,
23+
FALSE
24+
),
25+
(
26+
'tab',
27+
'link',
28+
'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.',
29+
'TEXT',
30+
FALSE,
31+
TRUE
32+
),
33+
(
34+
'tab',
35+
'active',
36+
'Whether the tab is active or not. Defaults to false.',
37+
'BOOLEAN',
38+
FALSE,
39+
TRUE
40+
),
41+
(
42+
'tab',
43+
'icon',
44+
'Name of the icon to display on the tab. See tabler-icons.io for a list of available icons.',
45+
'TEXT',
46+
FALSE,
47+
TRUE
48+
),
49+
(
50+
'tab',
51+
'color',
52+
'Color of the tab. See preview.tabler.io/colors.html for a list of available colors.',
53+
'TEXT',
54+
FALSE,
55+
TRUE
56+
),
57+
(
58+
'tab',
59+
'description',
60+
'Description of the tab. This is displayed when the user hovers over the tab.',
61+
'TEXT',
62+
FALSE,
63+
TRUE
64+
),
65+
(
66+
'tab',
67+
'center',
68+
'Whether the tabs should be centered or not. Defaults to false.',
69+
'BOOLEAN',
70+
TRUE,
71+
TRUE
72+
)
73+
;
74+
75+
INSERT INTO example (component, description, properties)
76+
VALUES (
77+
'tab',
78+
'This example shows a very basic set of three tabs. The first tab is active. You could use this at the top of a page for easy navigation.
79+
80+
To implement contents that change based on the active tab, use the `tab` parameter in the page query string.
81+
For example, if the page is `/my-page.sql`, then the first tab will have a link of `/my-page.sql?tab=My+First+tab`.
82+
83+
You could then for instance display contents coming from the database based on the value of the `tab` parameter.
84+
For instance: `SELECT ''text'' AS component, contents_md FROM my_page_contents WHERE tab = $tab`
85+
',
86+
JSON(
87+
'[
88+
{ "component": "tab" },
89+
{ "title": "My First tab", "active": true },
90+
{ "title": "This is tab two" },
91+
{ "title": "Third tab is crazy" }
92+
]'
93+
)
94+
),
95+
(
96+
'tab',
97+
'This example shows a more sophisticated set of tabs. The tabs are centered, the active tab has a different color, and all the tabs have a custom link and icon.',
98+
JSON(
99+
'[
100+
{ "component": "tab", "center": true },
101+
{ "title": "Hero", "link": "?component=hero#component", "icon": "home", "description": "The hero component is a full-width banner with a title and an image." },
102+
{ "title": "Tab", "active": true, "link": "?component=tab#component", "icon": "user", "color": "dark" },
103+
{ "title": "Card", "link": "?component=card#component", "icon": "credit-card" }
104+
]'
105+
)
106+
)
107+
;

‎sqlpage/templates/tab.handlebars

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<ul class="nav nav-bordered mb-3 {{#if center}}justify-content-evenly{{/if}}">
2+
{{~#each_row~}}
3+
<li class="nav-item">
4+
<a
5+
class="nav-link {{#if active~}}
6+
active
7+
{{~/if}} {{#if color~}}
8+
text-{{color}} border-{{color}}
9+
{{~/if}} {{#if center~}}
10+
mx-auto
11+
{{~/if}}"
12+
13+
href="{{#if link}}
14+
{{~link~}}
15+
{{~else~}}
16+
?tab={{title}}
17+
{{~/if}}"
18+
19+
{{#if description~}}
20+
title="{{description}}"
21+
{{~/if}}
22+
>
23+
{{~#if icon~}}
24+
<span class="me-1">
25+
{{~icon_img icon 20~}}
26+
</span>
27+
{{~/if}}
28+
{{~title~}}
29+
</a>
30+
</li>
31+
{{~/each_row~}}
32+
</ul>

0 commit comments

Comments
 (0)