Skip to content

Commit ba1d459

Browse files
wakaztahirwakaztahir
committed
updates
1 parent d9dcfb6 commit ba1d459

1 file changed

Lines changed: 98 additions & 70 deletions

File tree

‎src/pages/components.ch‎

Lines changed: 98 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -107,16 +107,15 @@ func ComponentsDocPage(page : &mut HtmlPage) {
107107
color: var(--chx-text-muted);
108108
margin-bottom: 1rem;
109109
}
110+
.tooltip-demo-wrap:hover > span:last-child { opacity: 1; }
110111
}
111112

112113
#html {
113114
{"""<div class="container" style="max-width:100%;padding:0;"><div class="docs-layout">"""}
114115
<nav class="docs-sidebar">
115116
<div class="docs-sidebar-group">
116117
<div class="docs-sidebar-group-title">Typography</div>
117-
<a href="#h1" class="docs-sidebar-item active" data-comp="h1">H1</a>
118-
<a href="#h2" class="docs-sidebar-item" data-comp="h2">H2</a>
119-
<a href="#h3" class="docs-sidebar-item" data-comp="h3">H3</a>
118+
<a href="#headings" class="docs-sidebar-item active" data-comp="headings">Headings</a>
120119
<a href="#text" class="docs-sidebar-item" data-comp="text">Text</a>
121120
<a href="#lead" class="docs-sidebar-item" data-comp="lead">Lead</a>
122121
<a href="#caption" class="docs-sidebar-item" data-comp="caption">Caption</a>
@@ -205,25 +204,26 @@ func ComponentsDocPage(page : &mut HtmlPage) {
205204
</div>
206205
</nav>
207206
{"""<main class="docs-main">"""}
208-
<div class="docs-section active" id="docs-h1" data-comp="h1">
209-
<h1 class="docs-component-title">H1</h1>
210-
<p class="docs-component-desc">Top-level heading. Renders an h1 element.</p>
207+
<div class="docs-section active" id="docs-headings" data-comp="headings">
208+
<h1 class="docs-component-title">Headings</h1>
209+
<p class="docs-component-desc">Heading levels 1 through 3 for document structure.</p>
211210
<table class="docs-props-table">
212211
<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
213212
<tbody>
214213
<tr><td class="docs-prop-name">children</td><td class="docs-prop-type">*char</td><td class="docs-prop-default">-</td><td class="docs-prop-desc">Heading text</td></tr>
215-
<tr><td class="docs-prop-name">class</td><td class="docs-prop-type">*char</td><td class="docs-prop-default">-</td><td class="docs-prop-desc">CSS classes</td></tr>
216214
</tbody>
217215
</table>
218216
<div class="docs-demo-box">
219217
<div class="docs-demo-label">Live Demo</div>
220218
<H1>Heading Level 1</H1>
219+
<div style="height:0.6rem"></div>
220+
<H2>Heading Level 2</H2>
221+
<div style="height:0.6rem"></div>
222+
<H3>Heading Level 3</H3>
221223
</div>
222224
</div>
223225
}
224-
225-
renderH2(page)
226-
renderH3(page)
226+
227227
renderText(page)
228228
renderLead(page)
229229
renderCaption(page)
@@ -290,46 +290,6 @@ func ComponentsDocPage(page : &mut HtmlPage) {
290290
SocialFooter(page)
291291
SetupThemeScript(page)
292292
}
293-
func renderH2(page : &mut HtmlPage) {
294-
#html {
295-
<div class="docs-section" id="docs-h2" data-comp="h2">
296-
<h1 class="docs-component-title">H2</h1>
297-
<p class="docs-component-desc">Second-level heading. Renders an h2 element.</p>
298-
<table class="docs-props-table">
299-
<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
300-
<tbody>
301-
<tr><td class="docs-prop-name">children</td><td class="docs-prop-type">*char</td><td class="docs-prop-default">-</td><td class="docs-prop-desc">Heading text</td></tr>
302-
<tr><td class="docs-prop-name">class</td><td class="docs-prop-type">*char</td><td class="docs-prop-default">-</td><td class="docs-prop-desc">CSS classes</td></tr>
303-
</tbody>
304-
</table>
305-
<div class="docs-demo-box">
306-
<div class="docs-demo-label">Live Demo</div>
307-
<H2>Heading Level 2</H2>
308-
</div>
309-
</div>
310-
}
311-
}
312-
313-
func renderH3(page : &mut HtmlPage) {
314-
#html {
315-
<div class="docs-section" id="docs-h3" data-comp="h3">
316-
<h1 class="docs-component-title">H3</h1>
317-
<p class="docs-component-desc">Third-level heading. Renders an h3 element.</p>
318-
<table class="docs-props-table">
319-
<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
320-
<tbody>
321-
<tr><td class="docs-prop-name">children</td><td class="docs-prop-type">*char</td><td class="docs-prop-default">-</td><td class="docs-prop-desc">Heading text</td></tr>
322-
<tr><td class="docs-prop-name">class</td><td class="docs-prop-type">*char</td><td class="docs-prop-default">-</td><td class="docs-prop-desc">CSS classes</td></tr>
323-
</tbody>
324-
</table>
325-
<div class="docs-demo-box">
326-
<div class="docs-demo-label">Live Demo</div>
327-
<H3>Heading Level 3</H3>
328-
</div>
329-
</div>
330-
}
331-
}
332-
333293
func renderText(page : &mut HtmlPage) {
334294
#html {
335295
<div class="docs-section" id="docs-text" data-comp="text">
@@ -607,7 +567,7 @@ func renderIconButton(page : &mut HtmlPage) {
607567
</table>
608568
<div class="docs-demo-box">
609569
<div class="docs-demo-label">Live Demo</div>
610-
<IconButton label="settings">&gt;</IconButton>
570+
<IconButton aria-label="settings">&gt;</IconButton>
611571
</div>
612572
</div>
613573
}
@@ -1001,18 +961,45 @@ func renderTabs(page : &mut HtmlPage) {
1001961
<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
1002962
<tbody>
1003963
<tr><td class="docs-prop-name">children</td><td class="docs-prop-type">*char</td><td class="docs-prop-default">-</td><td class="docs-prop-desc">Tab and panel elements</td></tr>
1004-
<tr><td class="docs-prop-name">activeTab</td><td class="docs-prop-type">int</td><td class="docs-prop-default">0</td><td class="docs-prop-desc">Active tab index</td></tr>
1005964
</tbody>
1006965
</table>
1007966
<div class="docs-demo-box">
1008967
<div class="docs-demo-label">Live Demo</div>
1009-
<Tabs>
1010-
<Tab label="Tab 1">Panel 1</Tab>
1011-
<Tab label="Tab 2">Panel 2</Tab>
1012-
</Tabs>
968+
<div id="tabs-demo">
969+
<TabList>
970+
<Tab data-tab="0" style="background:var(--chx-primary);color:var(--chx-primary-fg);">Tab 1</Tab>
971+
<Tab data-tab="1">Tab 2</Tab>
972+
<Tab data-tab="2">Tab 3</Tab>
973+
</TabList>
974+
<TabPanel data-panel="0">Content for Tab 1 — this panel is visible when Tab 1 is active.</TabPanel>
975+
<TabPanel data-panel="1" style="display:none">Content for Tab 2 — this panel is visible when Tab 2 is active.</TabPanel>
976+
<TabPanel data-panel="2" style="display:none">Content for Tab 3 — this panel is visible when Tab 3 is active.</TabPanel>
977+
</div>
1013978
</div>
1014979
</div>
1015980
}
981+
#html {
982+
<script>{"""
983+
(function(){
984+
var root = document.getElementById('tabs-demo');
985+
if(!root)return;
986+
var btns = root.querySelectorAll('[data-tab]');
987+
var panels = root.querySelectorAll('[data-panel]');
988+
btns.forEach(function(b, i){
989+
b.addEventListener('click', function(){
990+
btns.forEach(function(x){
991+
x.style.background = '';
992+
x.style.color = '';
993+
});
994+
panels.forEach(function(p){ p.style.display = 'none'; });
995+
b.style.background = 'var(--chx-primary)';
996+
b.style.color = 'var(--chx-primary-fg)';
997+
if(panels[i]) panels[i].style.display = '';
998+
});
999+
});
1000+
})();
1001+
"""}</script>
1002+
}
10161003
}
10171004

10181005
func renderPagination(page : &mut HtmlPage) {
@@ -1030,7 +1017,13 @@ func renderPagination(page : &mut HtmlPage) {
10301017
</table>
10311018
<div class="docs-demo-box">
10321019
<div class="docs-demo-label">Live Demo</div>
1033-
<Pagination current="1" total="5" />
1020+
<Pagination>
1021+
<PageItem href="#">1</PageItem>
1022+
<PageItemActive href="#">2</PageItemActive>
1023+
<PageItem href="#">3</PageItem>
1024+
<PageItem href="#">4</PageItem>
1025+
<PageItem href="#">5</PageItem>
1026+
</Pagination>
10341027
</div>
10351028
</div>
10361029
}
@@ -1162,9 +1155,13 @@ func renderAppBar(page : &mut HtmlPage) {
11621155
</table>
11631156
<div class="docs-demo-box">
11641157
<div class="docs-demo-label">Live Demo</div>
1165-
<div style="position:relative;height:64px;border:1px solid var(--chx-border);border-radius:8px;overflow:hidden;">
1166-
<AppBar title="Application" />
1167-
</div>
1158+
<AppBar>
1159+
<span style="font-weight:700;font-size:1.05rem;">Application</span>
1160+
<span style="display:flex;gap:0.75rem;">
1161+
<ButtonSm>Home</ButtonSm>
1162+
<ButtonSm>Settings</ButtonSm>
1163+
</span>
1164+
</AppBar>
11681165
</div>
11691166
</div>
11701167
}
@@ -1185,7 +1182,13 @@ func renderDrawer(page : &mut HtmlPage) {
11851182
</table>
11861183
<div class="docs-demo-box">
11871184
<div class="docs-demo-label">Live Demo</div>
1188-
<Drawer open="false">Drawer content</Drawer>
1185+
<Drawer>
1186+
<span style="font-weight:700;padding:0.35rem 0.65rem;font-size:1rem;">Navigation</span>
1187+
<MenuItem href="#">Dashboard</MenuItem>
1188+
<MenuItem href="#">Orders</MenuItem>
1189+
<MenuItem href="#">Customers</MenuItem>
1190+
<MenuItem href="#">Settings</MenuItem>
1191+
</Drawer>
11891192
</div>
11901193
</div>
11911194
}
@@ -1205,11 +1208,12 @@ func renderMenu(page : &mut HtmlPage) {
12051208
</table>
12061209
<div class="docs-demo-box">
12071210
<div class="docs-demo-label">Live Demo</div>
1208-
<div style="position:relative;display:inline-block;">
1209-
<Menu open="true">
1211+
<div id="menu-demo" style="position:relative;display:inline-block;">
1212+
<Button onclick="toggleMenu()" id="menu-trigger">Open Menu</Button>
1213+
<Menu id="menu-dropdown" style="display:none;position:absolute;top:100%;left:0;margin-top:0.5rem;z-index:10;">
12101214
<MenuItem>Profile</MenuItem>
12111215
<MenuItem>Settings</MenuItem>
1212-
<MenuItem divider>Logout</MenuItem>
1216+
<MenuItem>Logout</MenuItem>
12131217
</Menu>
12141218
</div>
12151219
</div>
@@ -1233,7 +1237,7 @@ func renderPopover(page : &mut HtmlPage) {
12331237
<div class="docs-demo-box">
12341238
<div class="docs-demo-label">Live Demo</div>
12351239
<div style="position:relative;display:inline-block;">
1236-
<Popover open="true" position="bottom">Popover content</Popover>
1240+
<Popover>Popover content placed below the trigger area.</Popover>
12371241
</div>
12381242
</div>
12391243
</div>
@@ -1288,7 +1292,10 @@ func renderSnackbar(page : &mut HtmlPage) {
12881292
</table>
12891293
<div class="docs-demo-box">
12901294
<div class="docs-demo-label">Live Demo</div>
1291-
<Snackbar>Item saved successfully!</Snackbar>
1295+
<div id="snackbar-demo" style="position:relative;display:flex;flex-direction:column;gap:1rem;align-items:flex-start;">
1296+
<Button onclick="showSnackbar()">Show Snackbar</Button>
1297+
<Snackbar id="snackbar-toast" style="display:none;">Item saved successfully!</Snackbar>
1298+
</div>
12921299
</div>
12931300
</div>
12941301
}
@@ -1309,7 +1316,10 @@ func renderTooltip(page : &mut HtmlPage) {
13091316
</table>
13101317
<div class="docs-demo-box">
13111318
<div class="docs-demo-label">Live Demo</div>
1312-
<Tooltip text="This is a tooltip"><Button>Hover me</Button></Tooltip>
1319+
<div style="position:relative;display:inline-block;" class="tooltip-demo-wrap">
1320+
<Button>Hover me</Button>
1321+
<span style="position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:0.5rem;padding:0.45rem 0.65rem;border-radius:10px;border:1px solid var(--chx-border);background:var(--chx-surface-2);color:var(--chx-text-main);font-size:0.82rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.18s ease;">This is a tooltip</span>
1322+
</div>
13131323
</div>
13141324
</div>
13151325
}
@@ -1522,7 +1532,7 @@ func renderKbd(page : &mut HtmlPage) {
15221532
</table>
15231533
<div class="docs-demo-box">
15241534
<div class="docs-demo-label">Live Demo</div>
1525-
<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>
1535+
<span style="display:inline-flex;align-items:center;gap:0.3rem;"><Kbd>Ctrl</Kbd><span style="color:var(--chx-text-muted);font-size:0.9rem;">+</span><Kbd>C</Kbd></span>
15261536
</div>
15271537
</div>
15281538
}
@@ -1573,7 +1583,7 @@ func SetupComponentNav(page : &mut HtmlPage) {
15731583
(function() {
15741584
var sections = document.querySelectorAll('.docs-section');
15751585
var sidebarItems = document.querySelectorAll('.docs-sidebar-item');
1576-
var currentHash = window.location.hash.slice(1) || 'h1';
1586+
var currentHash = window.location.hash.slice(1) || 'headings';
15771587
function showComponent(id) {
15781588
sections.forEach(function(s) { s.classList.remove('active'); });
15791589
sidebarItems.forEach(function(s) { s.classList.remove('active'); });
@@ -1589,7 +1599,25 @@ func SetupComponentNav(page : &mut HtmlPage) {
15891599
});
15901600
});
15911601
window.addEventListener('hashchange', function() {
1592-
showComponent(window.location.hash.slice(1) || 'h1');
1602+
showComponent(window.location.hash.slice(1) || 'headings');
1603+
});
1604+
window.toggleMenu = function() {
1605+
var m = document.getElementById('menu-dropdown');
1606+
if (m) m.style.display = m.style.display === 'none' ? '' : 'none';
1607+
};
1608+
window.showSnackbar = function() {
1609+
var s = document.getElementById('snackbar-toast');
1610+
if (s) {
1611+
s.style.display = '';
1612+
setTimeout(function(){ s.style.display = 'none'; }, 3000);
1613+
}
1614+
};
1615+
document.addEventListener('click', function(e) {
1616+
var m = document.getElementById('menu-dropdown');
1617+
var t = document.getElementById('menu-trigger');
1618+
if (m && t && !t.contains(e.target) && !m.contains(e.target)) {
1619+
m.style.display = 'none';
1620+
}
15931621
});
15941622
}());
15951623
"""}</script>

0 commit comments

Comments
 (0)