zero-query 1.1.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +2 -0
- package/cli/args.js +33 -33
- package/cli/commands/build-api.js +442 -442
- package/cli/commands/build.js +253 -247
- package/cli/commands/bundle.js +1226 -1224
- package/cli/commands/create.js +178 -121
- package/cli/commands/dev/devtools/index.js +56 -56
- package/cli/commands/dev/devtools/js/components.js +49 -49
- package/cli/commands/dev/devtools/js/core.js +423 -423
- package/cli/commands/dev/devtools/js/elements.js +421 -421
- package/cli/commands/dev/devtools/js/network.js +166 -166
- package/cli/commands/dev/devtools/js/performance.js +73 -73
- package/cli/commands/dev/devtools/js/router.js +105 -105
- package/cli/commands/dev/devtools/js/source.js +132 -132
- package/cli/commands/dev/devtools/js/stats.js +35 -35
- package/cli/commands/dev/devtools/js/tabs.js +79 -79
- package/cli/commands/dev/devtools/panel.html +95 -95
- package/cli/commands/dev/devtools/styles.css +244 -244
- package/cli/commands/dev/index.js +107 -107
- package/cli/commands/dev/logger.js +75 -75
- package/cli/commands/dev/overlay.js +858 -858
- package/cli/commands/dev/server.js +220 -220
- package/cli/commands/dev/validator.js +94 -94
- package/cli/commands/dev/watcher.js +172 -172
- package/cli/help.js +114 -112
- package/cli/index.js +52 -52
- package/cli/scaffold/default/LICENSE +21 -21
- package/cli/scaffold/default/app/app.js +207 -207
- package/cli/scaffold/default/app/components/about.js +201 -201
- package/cli/scaffold/default/app/components/api-demo.js +143 -143
- package/cli/scaffold/default/app/components/contact-card.js +231 -231
- package/cli/scaffold/default/app/components/contacts/contacts.css +706 -706
- package/cli/scaffold/default/app/components/contacts/contacts.html +200 -200
- package/cli/scaffold/default/app/components/contacts/contacts.js +196 -196
- package/cli/scaffold/default/app/components/counter.js +127 -127
- package/cli/scaffold/default/app/components/home.js +249 -249
- package/cli/scaffold/default/app/components/not-found.js +16 -16
- package/cli/scaffold/default/app/components/playground/playground.css +115 -115
- package/cli/scaffold/default/app/components/playground/playground.html +161 -161
- package/cli/scaffold/default/app/components/playground/playground.js +116 -116
- package/cli/scaffold/default/app/components/todos.js +225 -225
- package/cli/scaffold/default/app/components/toolkit/toolkit.css +97 -97
- package/cli/scaffold/default/app/components/toolkit/toolkit.html +146 -146
- package/cli/scaffold/default/app/components/toolkit/toolkit.js +280 -280
- package/cli/scaffold/default/app/routes.js +15 -15
- package/cli/scaffold/default/app/store.js +101 -101
- package/cli/scaffold/default/global.css +552 -552
- package/cli/scaffold/default/index.html +99 -99
- package/cli/scaffold/minimal/app/app.js +85 -85
- package/cli/scaffold/minimal/app/components/about.js +68 -68
- package/cli/scaffold/minimal/app/components/counter.js +122 -122
- package/cli/scaffold/minimal/app/components/home.js +68 -68
- package/cli/scaffold/minimal/app/components/not-found.js +16 -16
- package/cli/scaffold/minimal/app/routes.js +9 -9
- package/cli/scaffold/minimal/app/store.js +36 -36
- package/cli/scaffold/minimal/global.css +300 -300
- package/cli/scaffold/minimal/index.html +44 -44
- package/cli/scaffold/ssr/app/app.js +41 -41
- package/cli/scaffold/ssr/app/components/about.js +55 -55
- package/cli/scaffold/ssr/app/components/blog/index.js +65 -65
- package/cli/scaffold/ssr/app/components/blog/post.js +86 -86
- package/cli/scaffold/ssr/app/components/home.js +37 -37
- package/cli/scaffold/ssr/app/components/not-found.js +15 -15
- package/cli/scaffold/ssr/app/routes.js +8 -8
- package/cli/scaffold/ssr/global.css +228 -228
- package/cli/scaffold/ssr/index.html +37 -37
- package/cli/scaffold/ssr/package.json +8 -8
- package/cli/scaffold/ssr/server/data/posts.js +144 -144
- package/cli/scaffold/ssr/server/index.js +213 -213
- package/cli/scaffold/webrtc/app/app.js +11 -0
- package/cli/scaffold/webrtc/app/components/video-room.js +441 -0
- package/cli/scaffold/webrtc/assets/.gitkeep +0 -0
- package/cli/scaffold/webrtc/global.css +250 -0
- package/cli/scaffold/webrtc/index.html +21 -0
- package/cli/scaffold/webrtc/package.json +16 -0
- package/cli/scaffold/webrtc/server/index.js +198 -0
- package/cli/utils.js +305 -287
- package/dist/API.md +661 -0
- package/dist/zquery.dist.zip +0 -0
- package/dist/zquery.js +10454 -6614
- package/dist/zquery.min.js +8 -631
- package/index.d.ts +570 -371
- package/index.js +311 -240
- package/package.json +77 -70
- package/src/component.js +1758 -1691
- package/src/core.js +929 -921
- package/src/diff.js +497 -497
- package/src/errors.js +209 -209
- package/src/expression.js +929 -922
- package/src/http.js +242 -242
- package/src/package.json +1 -1
- package/src/reactive.js +271 -255
- package/src/router.js +878 -843
- package/src/ssr.js +421 -418
- package/src/store.js +325 -318
- package/src/utils.js +534 -515
- package/src/webrtc/e2ee.js +351 -0
- package/src/webrtc/errors.js +116 -0
- package/src/webrtc/ice.js +301 -0
- package/src/webrtc/index.js +131 -0
- package/src/webrtc/joinToken.js +119 -0
- package/src/webrtc/observe.js +172 -0
- package/src/webrtc/peer.js +351 -0
- package/src/webrtc/reactive.js +268 -0
- package/src/webrtc/room.js +625 -0
- package/src/webrtc/sdp.js +302 -0
- package/src/webrtc/sfu/index.js +43 -0
- package/src/webrtc/sfu/livekit.js +131 -0
- package/src/webrtc/sfu/mediasoup.js +150 -0
- package/src/webrtc/signaling.js +373 -0
- package/src/webrtc/turn.js +237 -0
- package/tests/_helpers/webrtcFakes.js +289 -0
- package/tests/audit.test.js +4158 -4158
- package/tests/bench/render.bench.js +77 -0
- package/tests/cli.test.js +1136 -1103
- package/tests/compare.test.js +497 -486
- package/tests/component.test.js +4076 -3938
- package/tests/core.test.js +1926 -1910
- package/tests/dev-server.test.js +489 -489
- package/tests/diff.test.js +1416 -1416
- package/tests/docs.test.js +1664 -1650
- package/tests/electron-features.test.js +864 -864
- package/tests/errors.test.js +619 -619
- package/tests/expression.test.js +1087 -1056
- package/tests/http.test.js +693 -648
- package/tests/reactive.test.js +844 -819
- package/tests/router.test.js +2423 -2327
- package/tests/ssr.test.js +916 -870
- package/tests/store.test.js +840 -830
- package/tests/test-minifier.js +153 -153
- package/tests/test-ssr.js +27 -27
- package/tests/utils.test.js +1411 -1377
- package/tests/webrtc/e2ee.test.js +283 -0
- package/tests/webrtc/ice.test.js +202 -0
- package/tests/webrtc/joinToken.test.js +89 -0
- package/tests/webrtc/observe.test.js +111 -0
- package/tests/webrtc/peer.test.js +373 -0
- package/tests/webrtc/reactive.test.js +235 -0
- package/tests/webrtc/room.test.js +406 -0
- package/tests/webrtc/sdp.test.js +151 -0
- package/tests/webrtc/sfu-livekit.test.js +119 -0
- package/tests/webrtc/sfu.test.js +160 -0
- package/tests/webrtc/signaling.test.js +251 -0
- package/tests/webrtc/turn.test.js +256 -0
- package/types/collection.d.ts +383 -383
- package/types/component.d.ts +186 -186
- package/types/errors.d.ts +135 -135
- package/types/http.d.ts +92 -92
- package/types/misc.d.ts +201 -201
- package/types/reactive.d.ts +98 -98
- package/types/router.d.ts +190 -190
- package/types/ssr.d.ts +102 -102
- package/types/store.d.ts +146 -146
- package/types/utils.d.ts +245 -245
- package/types/webrtc.d.ts +653 -0
|
@@ -1,99 +1,99 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>{{NAME}}</title>
|
|
7
|
-
<base href="/">
|
|
8
|
-
<link rel="stylesheet" href="global.css">
|
|
9
|
-
<link rel="icon" type="image/png" href="favicon.ico">
|
|
10
|
-
<script src="zquery.min.js"></script>
|
|
11
|
-
<script type="module" src="app/app.js"></script>
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
|
|
15
|
-
<!-- Sidebar Navigation -->
|
|
16
|
-
<aside class="sidebar" id="sidebar">
|
|
17
|
-
<div class="sidebar-header">
|
|
18
|
-
<span class="brand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--accent)" style="width:18px;height:18px;vertical-align:-3px;margin-right:0.2rem;"><path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" clip-rule="evenodd"/></svg> {{NAME}}</span>
|
|
19
|
-
</div>
|
|
20
|
-
<nav class="sidebar-nav">
|
|
21
|
-
<a z-link="/" class="nav-link" z-active-route="/" z-active-exact>
|
|
22
|
-
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg></span> Home
|
|
23
|
-
</a>
|
|
24
|
-
<a z-link="/counter" class="nav-link" z-active-route="/counter">
|
|
25
|
-
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/></svg></span> Counter
|
|
26
|
-
</a>
|
|
27
|
-
<a z-link="/todos" class="nav-link" z-active-route="/todos">
|
|
28
|
-
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg></span> Todos
|
|
29
|
-
</a>
|
|
30
|
-
<a z-link="/contacts" class="nav-link" z-active-route="/contacts">
|
|
31
|
-
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/></svg></span> Contacts
|
|
32
|
-
</a>
|
|
33
|
-
<a z-link="/api" class="nav-link" z-active-route="/api">
|
|
34
|
-
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/></svg></span> API Demo
|
|
35
|
-
</a>
|
|
36
|
-
<a z-link="/playground" class="nav-link" z-active-route="/playground">
|
|
37
|
-
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"/></svg></span> Playground
|
|
38
|
-
</a>
|
|
39
|
-
<a z-link="/toolkit" class="nav-link" z-active-route="/toolkit">
|
|
40
|
-
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z"/></svg></span> Toolkit
|
|
41
|
-
</a>
|
|
42
|
-
<a z-link="/about" class="nav-link" z-active-route="/about">
|
|
43
|
-
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg></span> About
|
|
44
|
-
</a>
|
|
45
|
-
</nav>
|
|
46
|
-
<div class="sidebar-contacts" id="sidebar-contacts">
|
|
47
|
-
<div class="sc-header">
|
|
48
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:13px;height:13px;"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/></svg>
|
|
49
|
-
Contacts
|
|
50
|
-
</div>
|
|
51
|
-
<div class="sc-list" id="sc-list">
|
|
52
|
-
<!-- Populated from $.store('main') by app.js -->
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
<div class="sidebar-stats" id="sidebar-stats">
|
|
56
|
-
<button class="sidebar-stats-toggle" id="stats-toggle">
|
|
57
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:14px;height:14px;"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"/></svg>
|
|
58
|
-
Stats
|
|
59
|
-
<span class="sidebar-stats-arrow open" id="stats-arrow">▸</span>
|
|
60
|
-
</button>
|
|
61
|
-
<div class="sidebar-stats-body" id="stats-body">
|
|
62
|
-
<div class="ss-row"><span class="ss-label">Page Views</span><span class="ss-value" id="ss-visits">0</span></div>
|
|
63
|
-
<div class="ss-group-label">Todos</div>
|
|
64
|
-
<div class="ss-row ss-indent"><span class="ss-label">Total</span><span class="ss-value" id="ss-todos">0</span></div>
|
|
65
|
-
<div class="ss-row ss-indent"><span class="ss-label">Pending</span><span class="ss-value" id="ss-pending">0</span></div>
|
|
66
|
-
<div class="ss-row ss-indent"><span class="ss-label">Done</span><span class="ss-value" id="ss-done">0</span></div>
|
|
67
|
-
<div class="ss-group-label">Contacts</div>
|
|
68
|
-
<div class="ss-row ss-indent"><span class="ss-label">Total</span><span class="ss-value" id="ss-contacts">0</span></div>
|
|
69
|
-
<div class="ss-row ss-indent"><span class="ss-label">Favorited</span><span class="ss-value" id="ss-favorites">0</span></div>
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
<div class="sidebar-footer">
|
|
73
|
-
<small>zQuery <span id="nav-version"></span></small>
|
|
74
|
-
</div>
|
|
75
|
-
</aside>
|
|
76
|
-
|
|
77
|
-
<!-- Mobile Top Bar -->
|
|
78
|
-
<header class="topbar" id="topbar">
|
|
79
|
-
<button class="hamburger" id="menu-toggle" aria-label="Toggle menu">
|
|
80
|
-
<span></span><span></span><span></span>
|
|
81
|
-
</button>
|
|
82
|
-
<span class="topbar-brand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--accent)" style="width:16px;height:16px;vertical-align:-2px;margin-right:0.15rem;"><path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" clip-rule="evenodd"/></svg> {{NAME}}</span>
|
|
83
|
-
</header>
|
|
84
|
-
|
|
85
|
-
<!-- Overlay for mobile menu -->
|
|
86
|
-
<div class="overlay" id="overlay"></div>
|
|
87
|
-
|
|
88
|
-
<!-- @ Router Outlet @ -->
|
|
89
|
-
<z-outlet class="content"></z-outlet>
|
|
90
|
-
<!-- @ Auto-detected by $.router() @ -->
|
|
91
|
-
|
|
92
|
-
<!-- Toast container for notifications -->
|
|
93
|
-
<div class="toast-container" id="toasts"></div>
|
|
94
|
-
|
|
95
|
-
<!-- Global contact card popup (works from any page) -->
|
|
96
|
-
<contact-card></contact-card>
|
|
97
|
-
|
|
98
|
-
</body>
|
|
99
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>{{NAME}}</title>
|
|
7
|
+
<base href="/">
|
|
8
|
+
<link rel="stylesheet" href="global.css">
|
|
9
|
+
<link rel="icon" type="image/png" href="favicon.ico">
|
|
10
|
+
<script src="zquery.min.js"></script>
|
|
11
|
+
<script type="module" src="app/app.js"></script>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
|
|
15
|
+
<!-- Sidebar Navigation -->
|
|
16
|
+
<aside class="sidebar" id="sidebar">
|
|
17
|
+
<div class="sidebar-header">
|
|
18
|
+
<span class="brand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--accent)" style="width:18px;height:18px;vertical-align:-3px;margin-right:0.2rem;"><path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" clip-rule="evenodd"/></svg> {{NAME}}</span>
|
|
19
|
+
</div>
|
|
20
|
+
<nav class="sidebar-nav">
|
|
21
|
+
<a z-link="/" class="nav-link" z-active-route="/" z-active-exact>
|
|
22
|
+
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg></span> Home
|
|
23
|
+
</a>
|
|
24
|
+
<a z-link="/counter" class="nav-link" z-active-route="/counter">
|
|
25
|
+
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/></svg></span> Counter
|
|
26
|
+
</a>
|
|
27
|
+
<a z-link="/todos" class="nav-link" z-active-route="/todos">
|
|
28
|
+
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg></span> Todos
|
|
29
|
+
</a>
|
|
30
|
+
<a z-link="/contacts" class="nav-link" z-active-route="/contacts">
|
|
31
|
+
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/></svg></span> Contacts
|
|
32
|
+
</a>
|
|
33
|
+
<a z-link="/api" class="nav-link" z-active-route="/api">
|
|
34
|
+
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/></svg></span> API Demo
|
|
35
|
+
</a>
|
|
36
|
+
<a z-link="/playground" class="nav-link" z-active-route="/playground">
|
|
37
|
+
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"/></svg></span> Playground
|
|
38
|
+
</a>
|
|
39
|
+
<a z-link="/toolkit" class="nav-link" z-active-route="/toolkit">
|
|
40
|
+
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z"/></svg></span> Toolkit
|
|
41
|
+
</a>
|
|
42
|
+
<a z-link="/about" class="nav-link" z-active-route="/about">
|
|
43
|
+
<span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg></span> About
|
|
44
|
+
</a>
|
|
45
|
+
</nav>
|
|
46
|
+
<div class="sidebar-contacts" id="sidebar-contacts">
|
|
47
|
+
<div class="sc-header">
|
|
48
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:13px;height:13px;"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/></svg>
|
|
49
|
+
Contacts
|
|
50
|
+
</div>
|
|
51
|
+
<div class="sc-list" id="sc-list">
|
|
52
|
+
<!-- Populated from $.store('main') by app.js -->
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="sidebar-stats" id="sidebar-stats">
|
|
56
|
+
<button class="sidebar-stats-toggle" id="stats-toggle">
|
|
57
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:14px;height:14px;"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"/></svg>
|
|
58
|
+
Stats
|
|
59
|
+
<span class="sidebar-stats-arrow open" id="stats-arrow">▸</span>
|
|
60
|
+
</button>
|
|
61
|
+
<div class="sidebar-stats-body" id="stats-body">
|
|
62
|
+
<div class="ss-row"><span class="ss-label">Page Views</span><span class="ss-value" id="ss-visits">0</span></div>
|
|
63
|
+
<div class="ss-group-label">Todos</div>
|
|
64
|
+
<div class="ss-row ss-indent"><span class="ss-label">Total</span><span class="ss-value" id="ss-todos">0</span></div>
|
|
65
|
+
<div class="ss-row ss-indent"><span class="ss-label">Pending</span><span class="ss-value" id="ss-pending">0</span></div>
|
|
66
|
+
<div class="ss-row ss-indent"><span class="ss-label">Done</span><span class="ss-value" id="ss-done">0</span></div>
|
|
67
|
+
<div class="ss-group-label">Contacts</div>
|
|
68
|
+
<div class="ss-row ss-indent"><span class="ss-label">Total</span><span class="ss-value" id="ss-contacts">0</span></div>
|
|
69
|
+
<div class="ss-row ss-indent"><span class="ss-label">Favorited</span><span class="ss-value" id="ss-favorites">0</span></div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="sidebar-footer">
|
|
73
|
+
<small>zQuery <span id="nav-version"></span></small>
|
|
74
|
+
</div>
|
|
75
|
+
</aside>
|
|
76
|
+
|
|
77
|
+
<!-- Mobile Top Bar -->
|
|
78
|
+
<header class="topbar" id="topbar">
|
|
79
|
+
<button class="hamburger" id="menu-toggle" aria-label="Toggle menu">
|
|
80
|
+
<span></span><span></span><span></span>
|
|
81
|
+
</button>
|
|
82
|
+
<span class="topbar-brand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--accent)" style="width:16px;height:16px;vertical-align:-2px;margin-right:0.15rem;"><path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" clip-rule="evenodd"/></svg> {{NAME}}</span>
|
|
83
|
+
</header>
|
|
84
|
+
|
|
85
|
+
<!-- Overlay for mobile menu -->
|
|
86
|
+
<div class="overlay" id="overlay"></div>
|
|
87
|
+
|
|
88
|
+
<!-- @ Router Outlet @ -->
|
|
89
|
+
<z-outlet class="content"></z-outlet>
|
|
90
|
+
<!-- @ Auto-detected by $.router() @ -->
|
|
91
|
+
|
|
92
|
+
<!-- Toast container for notifications -->
|
|
93
|
+
<div class="toast-container" id="toasts"></div>
|
|
94
|
+
|
|
95
|
+
<!-- Global contact card popup (works from any page) -->
|
|
96
|
+
<contact-card></contact-card>
|
|
97
|
+
|
|
98
|
+
</body>
|
|
99
|
+
</html>
|
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
// app.js - Application entry point
|
|
2
|
-
//
|
|
3
|
-
// Bootstraps the app: imports components, sets up routing,
|
|
4
|
-
// and wires the responsive sidebar.
|
|
5
|
-
//
|
|
6
|
-
// Key APIs used:
|
|
7
|
-
// $.router - SPA navigation (history mode)
|
|
8
|
-
// $.ready - run after DOM is loaded
|
|
9
|
-
// $.on - global delegated event listeners
|
|
10
|
-
// $.storage - localStorage wrapper
|
|
11
|
-
|
|
12
|
-
import './store.js';
|
|
13
|
-
import './components/home.js';
|
|
14
|
-
import './components/counter.js';
|
|
15
|
-
import './components/about.js';
|
|
16
|
-
import './components/not-found.js';
|
|
17
|
-
import { routes } from './routes.js';
|
|
18
|
-
|
|
19
|
-
// ---------------------------------------------------------------------------
|
|
20
|
-
// Router
|
|
21
|
-
// ---------------------------------------------------------------------------
|
|
22
|
-
const router = $.router({
|
|
23
|
-
routes,
|
|
24
|
-
fallback: 'not-found',
|
|
25
|
-
mode: 'history'
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
// Close mobile menu on route change
|
|
29
|
-
router.onChange(() => {
|
|
30
|
-
closeMobileMenu();
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
// ---------------------------------------------------------------------------
|
|
34
|
-
// Responsive sidebar toggle
|
|
35
|
-
// ---------------------------------------------------------------------------
|
|
36
|
-
const $sidebar = $('#sidebar');
|
|
37
|
-
const $overlay = $('#overlay');
|
|
38
|
-
const $toggle = $('#menu-toggle');
|
|
39
|
-
|
|
40
|
-
function toggleMobileMenu(open) {
|
|
41
|
-
$sidebar.toggleClass('open', open);
|
|
42
|
-
$overlay.toggleClass('visible', open);
|
|
43
|
-
$toggle.toggleClass('active', open);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
function closeMobileMenu() { toggleMobileMenu(false); }
|
|
47
|
-
|
|
48
|
-
$.on('click', '#menu-toggle', () => toggleMobileMenu(!$sidebar.hasClass('open')));
|
|
49
|
-
$.on('click', '#overlay', closeMobileMenu);
|
|
50
|
-
$.on('keydown', (e) => { if (e.key === 'Escape') closeMobileMenu(); });
|
|
51
|
-
|
|
52
|
-
// ---------------------------------------------------------------------------
|
|
53
|
-
// On DOM ready
|
|
54
|
-
// ---------------------------------------------------------------------------
|
|
55
|
-
$.ready(() => {
|
|
56
|
-
// Display version in the sidebar footer
|
|
57
|
-
$('#nav-version').text('v' + $.version);
|
|
58
|
-
|
|
59
|
-
// Theme: restore saved preference or auto-detect from system
|
|
60
|
-
const saved = $.storage.get('theme');
|
|
61
|
-
const preference = saved || 'system';
|
|
62
|
-
applyTheme(preference);
|
|
63
|
-
|
|
64
|
-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
65
|
-
const current = $.storage.get('theme') || 'system';
|
|
66
|
-
if (current === 'system') applyTheme('system');
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
// Active nav highlighting is handled by z-active-route in the HTML
|
|
70
|
-
|
|
71
|
-
console.log('⚡ {{NAME}} - powered by zQuery v' + $.version);
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
// ---------------------------------------------------------------------------
|
|
75
|
-
// Theme helper
|
|
76
|
-
// ---------------------------------------------------------------------------
|
|
77
|
-
function applyTheme(preference) {
|
|
78
|
-
let resolved = preference;
|
|
79
|
-
if (preference === 'system') {
|
|
80
|
-
resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
81
|
-
}
|
|
82
|
-
$('html').attr('data-theme', resolved);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
window.__applyTheme = applyTheme;
|
|
1
|
+
// app.js - Application entry point
|
|
2
|
+
//
|
|
3
|
+
// Bootstraps the app: imports components, sets up routing,
|
|
4
|
+
// and wires the responsive sidebar.
|
|
5
|
+
//
|
|
6
|
+
// Key APIs used:
|
|
7
|
+
// $.router - SPA navigation (history mode)
|
|
8
|
+
// $.ready - run after DOM is loaded
|
|
9
|
+
// $.on - global delegated event listeners
|
|
10
|
+
// $.storage - localStorage wrapper
|
|
11
|
+
|
|
12
|
+
import './store.js';
|
|
13
|
+
import './components/home.js';
|
|
14
|
+
import './components/counter.js';
|
|
15
|
+
import './components/about.js';
|
|
16
|
+
import './components/not-found.js';
|
|
17
|
+
import { routes } from './routes.js';
|
|
18
|
+
|
|
19
|
+
// ---------------------------------------------------------------------------
|
|
20
|
+
// Router
|
|
21
|
+
// ---------------------------------------------------------------------------
|
|
22
|
+
const router = $.router({
|
|
23
|
+
routes,
|
|
24
|
+
fallback: 'not-found',
|
|
25
|
+
mode: 'history'
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// Close mobile menu on route change
|
|
29
|
+
router.onChange(() => {
|
|
30
|
+
closeMobileMenu();
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
// ---------------------------------------------------------------------------
|
|
34
|
+
// Responsive sidebar toggle
|
|
35
|
+
// ---------------------------------------------------------------------------
|
|
36
|
+
const $sidebar = $('#sidebar');
|
|
37
|
+
const $overlay = $('#overlay');
|
|
38
|
+
const $toggle = $('#menu-toggle');
|
|
39
|
+
|
|
40
|
+
function toggleMobileMenu(open) {
|
|
41
|
+
$sidebar.toggleClass('open', open);
|
|
42
|
+
$overlay.toggleClass('visible', open);
|
|
43
|
+
$toggle.toggleClass('active', open);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function closeMobileMenu() { toggleMobileMenu(false); }
|
|
47
|
+
|
|
48
|
+
$.on('click', '#menu-toggle', () => toggleMobileMenu(!$sidebar.hasClass('open')));
|
|
49
|
+
$.on('click', '#overlay', closeMobileMenu);
|
|
50
|
+
$.on('keydown', (e) => { if (e.key === 'Escape') closeMobileMenu(); });
|
|
51
|
+
|
|
52
|
+
// ---------------------------------------------------------------------------
|
|
53
|
+
// On DOM ready
|
|
54
|
+
// ---------------------------------------------------------------------------
|
|
55
|
+
$.ready(() => {
|
|
56
|
+
// Display version in the sidebar footer
|
|
57
|
+
$('#nav-version').text('v' + $.version);
|
|
58
|
+
|
|
59
|
+
// Theme: restore saved preference or auto-detect from system
|
|
60
|
+
const saved = $.storage.get('theme');
|
|
61
|
+
const preference = saved || 'system';
|
|
62
|
+
applyTheme(preference);
|
|
63
|
+
|
|
64
|
+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
65
|
+
const current = $.storage.get('theme') || 'system';
|
|
66
|
+
if (current === 'system') applyTheme('system');
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
// Active nav highlighting is handled by z-active-route in the HTML
|
|
70
|
+
|
|
71
|
+
console.log('⚡ {{NAME}} - powered by zQuery v' + $.version);
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
// ---------------------------------------------------------------------------
|
|
75
|
+
// Theme helper
|
|
76
|
+
// ---------------------------------------------------------------------------
|
|
77
|
+
function applyTheme(preference) {
|
|
78
|
+
let resolved = preference;
|
|
79
|
+
if (preference === 'system') {
|
|
80
|
+
resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
81
|
+
}
|
|
82
|
+
$('html').attr('data-theme', resolved);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
window.__applyTheme = applyTheme;
|
|
@@ -1,68 +1,68 @@
|
|
|
1
|
-
// about.js - About page with theme switcher
|
|
2
|
-
//
|
|
3
|
-
// Features used:
|
|
4
|
-
// $.storage - localStorage wrapper (get / set)
|
|
5
|
-
// $.version - library version string
|
|
6
|
-
// data-theme - dark / light theming
|
|
7
|
-
|
|
8
|
-
$.component('about-page', {
|
|
9
|
-
styles: `
|
|
10
|
-
.theme-switch { display: inline-flex; border-radius: var(--radius); overflow: hidden;
|
|
11
|
-
border: 1px solid var(--border); background: var(--bg); }
|
|
12
|
-
.theme-btn { padding: 0.45rem 1rem; font-size: 0.82rem; font-weight: 500;
|
|
13
|
-
background: transparent; border: none; color: var(--text-muted);
|
|
14
|
-
cursor: pointer; transition: all .15s ease; font-family: inherit; }
|
|
15
|
-
.theme-btn:hover { color: var(--text); background: var(--bg-hover); }
|
|
16
|
-
.theme-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
|
|
17
|
-
.theme-btn + .theme-btn { border-left: 1px solid var(--border); }
|
|
18
|
-
|
|
19
|
-
.next-steps { padding-left: 1.25rem; }
|
|
20
|
-
.next-steps li { margin-bottom: 0.4rem; font-size: 0.9rem; color: var(--text-muted); }
|
|
21
|
-
.next-steps a { color: var(--accent); }
|
|
22
|
-
`,
|
|
23
|
-
|
|
24
|
-
state: () => ({
|
|
25
|
-
theme: 'system',
|
|
26
|
-
}),
|
|
27
|
-
|
|
28
|
-
mounted() {
|
|
29
|
-
this.state.theme = $.storage.get('theme') || 'system';
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
setTheme(mode) {
|
|
33
|
-
this.state.theme = mode;
|
|
34
|
-
$.storage.set('theme', mode);
|
|
35
|
-
window.__applyTheme(mode);
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
render() {
|
|
39
|
-
const t = this.state.theme;
|
|
40
|
-
return `
|
|
41
|
-
<div class="page-header">
|
|
42
|
-
<h1>About</h1>
|
|
43
|
-
<p class="subtitle">zQuery v${$.version} - zero-dependency frontend micro-library.</p>
|
|
44
|
-
</div>
|
|
45
|
-
|
|
46
|
-
<div class="card">
|
|
47
|
-
<h3>Theme</h3>
|
|
48
|
-
<p>Choose your preferred appearance. <strong>System</strong> follows your OS setting.</p>
|
|
49
|
-
<div class="theme-switch">
|
|
50
|
-
<button class="theme-btn ${t === 'system' ? 'active' : ''}" @click="setTheme('system')">System</button>
|
|
51
|
-
<button class="theme-btn ${t === 'dark' ? 'active' : ''}" @click="setTheme('dark')">Dark</button>
|
|
52
|
-
<button class="theme-btn ${t === 'light' ? 'active' : ''}" @click="setTheme('light')">Light</button>
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
<div class="card">
|
|
57
|
-
<h3>Next Steps</h3>
|
|
58
|
-
<ul class="next-steps">
|
|
59
|
-
<li>Read the <a href="https://z-query.com/docs" target="_blank" rel="noopener">full documentation</a></li>
|
|
60
|
-
<li>Explore the <a href="https://github.com/tonywied17/zero-query" target="_blank" rel="noopener">source on GitHub</a></li>
|
|
61
|
-
<li>Run <code>npx zquery bundle</code> to build for production</li>
|
|
62
|
-
<li>Run <code>npx zquery dev</code> for live-reload development</li>
|
|
63
|
-
<li>Try <code>npx zquery create my-app</code> for the full-featured scaffold</li>
|
|
64
|
-
</ul>
|
|
65
|
-
</div>
|
|
66
|
-
`;
|
|
67
|
-
}
|
|
68
|
-
});
|
|
1
|
+
// about.js - About page with theme switcher
|
|
2
|
+
//
|
|
3
|
+
// Features used:
|
|
4
|
+
// $.storage - localStorage wrapper (get / set)
|
|
5
|
+
// $.version - library version string
|
|
6
|
+
// data-theme - dark / light theming
|
|
7
|
+
|
|
8
|
+
$.component('about-page', {
|
|
9
|
+
styles: `
|
|
10
|
+
.theme-switch { display: inline-flex; border-radius: var(--radius); overflow: hidden;
|
|
11
|
+
border: 1px solid var(--border); background: var(--bg); }
|
|
12
|
+
.theme-btn { padding: 0.45rem 1rem; font-size: 0.82rem; font-weight: 500;
|
|
13
|
+
background: transparent; border: none; color: var(--text-muted);
|
|
14
|
+
cursor: pointer; transition: all .15s ease; font-family: inherit; }
|
|
15
|
+
.theme-btn:hover { color: var(--text); background: var(--bg-hover); }
|
|
16
|
+
.theme-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
|
|
17
|
+
.theme-btn + .theme-btn { border-left: 1px solid var(--border); }
|
|
18
|
+
|
|
19
|
+
.next-steps { padding-left: 1.25rem; }
|
|
20
|
+
.next-steps li { margin-bottom: 0.4rem; font-size: 0.9rem; color: var(--text-muted); }
|
|
21
|
+
.next-steps a { color: var(--accent); }
|
|
22
|
+
`,
|
|
23
|
+
|
|
24
|
+
state: () => ({
|
|
25
|
+
theme: 'system',
|
|
26
|
+
}),
|
|
27
|
+
|
|
28
|
+
mounted() {
|
|
29
|
+
this.state.theme = $.storage.get('theme') || 'system';
|
|
30
|
+
},
|
|
31
|
+
|
|
32
|
+
setTheme(mode) {
|
|
33
|
+
this.state.theme = mode;
|
|
34
|
+
$.storage.set('theme', mode);
|
|
35
|
+
window.__applyTheme(mode);
|
|
36
|
+
},
|
|
37
|
+
|
|
38
|
+
render() {
|
|
39
|
+
const t = this.state.theme;
|
|
40
|
+
return `
|
|
41
|
+
<div class="page-header">
|
|
42
|
+
<h1>About</h1>
|
|
43
|
+
<p class="subtitle">zQuery v${$.version} - zero-dependency frontend micro-library.</p>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="card">
|
|
47
|
+
<h3>Theme</h3>
|
|
48
|
+
<p>Choose your preferred appearance. <strong>System</strong> follows your OS setting.</p>
|
|
49
|
+
<div class="theme-switch">
|
|
50
|
+
<button class="theme-btn ${t === 'system' ? 'active' : ''}" @click="setTheme('system')">System</button>
|
|
51
|
+
<button class="theme-btn ${t === 'dark' ? 'active' : ''}" @click="setTheme('dark')">Dark</button>
|
|
52
|
+
<button class="theme-btn ${t === 'light' ? 'active' : ''}" @click="setTheme('light')">Light</button>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div class="card">
|
|
57
|
+
<h3>Next Steps</h3>
|
|
58
|
+
<ul class="next-steps">
|
|
59
|
+
<li>Read the <a href="https://z-query.com/docs" target="_blank" rel="noopener">full documentation</a></li>
|
|
60
|
+
<li>Explore the <a href="https://github.com/tonywied17/zero-query" target="_blank" rel="noopener">source on GitHub</a></li>
|
|
61
|
+
<li>Run <code>npx zquery bundle</code> to build for production</li>
|
|
62
|
+
<li>Run <code>npx zquery dev</code> for live-reload development</li>
|
|
63
|
+
<li>Try <code>npx zquery create my-app</code> for the full-featured scaffold</li>
|
|
64
|
+
</ul>
|
|
65
|
+
</div>
|
|
66
|
+
`;
|
|
67
|
+
}
|
|
68
|
+
});
|