lightview 1.8.2 → 2.0.0

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.
Files changed (264) hide show
  1. package/.agent/workflows/daisyui-component-migration.md +155 -0
  2. package/.codacy/cli.sh +149 -0
  3. package/.codacy/codacy.yaml +15 -0
  4. package/.github/instructions/codacy.instructions.md +72 -0
  5. package/.wranglerignore +21 -0
  6. package/README.md +1330 -19
  7. package/_headers +4 -0
  8. package/build.js +70 -0
  9. package/components/actions/button.js +151 -0
  10. package/components/actions/dropdown.js +120 -0
  11. package/components/actions/modal.js +146 -0
  12. package/components/actions/swap.js +118 -0
  13. package/components/daisyui.js +288 -0
  14. package/components/data-display/accordion.js +128 -0
  15. package/components/data-display/alert.js +112 -0
  16. package/components/data-display/avatar.js +170 -0
  17. package/components/data-display/badge.js +82 -0
  18. package/components/data-display/card.js +151 -0
  19. package/components/data-display/carousel.js +94 -0
  20. package/components/data-display/chart.js +220 -0
  21. package/components/data-display/chat.js +128 -0
  22. package/components/data-display/collapse.js +103 -0
  23. package/components/data-display/countdown.js +69 -0
  24. package/components/data-display/diff.js +111 -0
  25. package/components/data-display/kbd.js +65 -0
  26. package/components/data-display/loading.js +75 -0
  27. package/components/data-display/progress.js +79 -0
  28. package/components/data-display/radial-progress.js +88 -0
  29. package/components/data-display/skeleton.js +66 -0
  30. package/components/data-display/stats.js +159 -0
  31. package/components/data-display/table.js +146 -0
  32. package/components/data-display/timeline.js +146 -0
  33. package/components/data-display/toast.js +72 -0
  34. package/components/data-display/tooltip.js +74 -0
  35. package/components/data-input/checkbox.js +253 -0
  36. package/components/data-input/file-input.js +224 -0
  37. package/components/data-input/input.js +264 -0
  38. package/components/data-input/radio.js +338 -0
  39. package/components/data-input/range.js +204 -0
  40. package/components/data-input/rating.js +219 -0
  41. package/components/data-input/select.js +287 -0
  42. package/components/data-input/textarea.js +287 -0
  43. package/components/data-input/toggle.js +201 -0
  44. package/components/index.js +137 -0
  45. package/components/layout/divider.js +72 -0
  46. package/components/layout/drawer.js +142 -0
  47. package/components/layout/footer.js +100 -0
  48. package/components/layout/hero.js +109 -0
  49. package/components/layout/indicator.js +90 -0
  50. package/components/layout/join.js +78 -0
  51. package/components/layout/navbar.js +110 -0
  52. package/components/navigation/breadcrumbs.js +91 -0
  53. package/components/navigation/dock.js +103 -0
  54. package/components/navigation/menu.js +126 -0
  55. package/components/navigation/pagination.js +105 -0
  56. package/components/navigation/steps.js +89 -0
  57. package/components/navigation/tabs.css +177 -0
  58. package/components/navigation/tabs.js +123 -0
  59. package/components/theme/theme-switch.css +65 -0
  60. package/components/theme/theme-switch.js +177 -0
  61. package/docs/about.html +164 -0
  62. package/docs/api/computed.html +184 -0
  63. package/docs/api/effects.html +173 -0
  64. package/docs/api/elements.html +180 -0
  65. package/docs/api/enhance.html +225 -0
  66. package/docs/api/hypermedia.html +165 -0
  67. package/docs/api/index.html +178 -0
  68. package/docs/api/nav.html +18 -0
  69. package/docs/api/signals.html +136 -0
  70. package/docs/api/state.html +217 -0
  71. package/docs/assets/images/logo-favicon.svg +42 -0
  72. package/docs/assets/images/logo-static.svg +40 -0
  73. package/docs/assets/images/logo.svg +66 -0
  74. package/docs/assets/js/examplify.js +395 -0
  75. package/docs/assets/styles/site.css +1102 -0
  76. package/docs/assets/styles/themes.css +236 -0
  77. package/docs/components/accordion.html +439 -0
  78. package/docs/components/alert.html +528 -0
  79. package/docs/components/avatar.html +586 -0
  80. package/docs/components/badge.html +531 -0
  81. package/docs/components/breadcrumbs.html +278 -0
  82. package/docs/components/button.html +579 -0
  83. package/docs/components/card.html +561 -0
  84. package/docs/components/carousel.html +286 -0
  85. package/docs/components/chart-area.html +702 -0
  86. package/docs/components/chart-bar.html +782 -0
  87. package/docs/components/chart-column.html +735 -0
  88. package/docs/components/chart-line.html +794 -0
  89. package/docs/components/chart-pie.html +823 -0
  90. package/docs/components/chart.html +610 -15
  91. package/docs/components/chat.html +547 -0
  92. package/docs/components/checkbox.html +641 -0
  93. package/docs/components/collapse.html +536 -0
  94. package/docs/components/component-nav.html +53 -0
  95. package/docs/components/countdown.html +470 -0
  96. package/docs/components/diff.html +245 -0
  97. package/docs/components/divider.html +240 -0
  98. package/docs/components/dock.html +277 -0
  99. package/docs/components/drawer.html +515 -0
  100. package/docs/components/dropdown.html +479 -0
  101. package/docs/components/file-input.html +591 -0
  102. package/docs/components/footer.html +301 -0
  103. package/docs/components/gallery.html +504 -0
  104. package/docs/components/hero.html +264 -0
  105. package/docs/components/index.css +840 -0
  106. package/docs/components/index.html +735 -0
  107. package/docs/components/indicator.html +342 -0
  108. package/docs/components/input.html +644 -0
  109. package/docs/components/join.html +285 -0
  110. package/docs/components/kbd.html +322 -0
  111. package/docs/components/loading.html +521 -0
  112. package/docs/components/menu.html +461 -0
  113. package/docs/components/modal.html +639 -0
  114. package/docs/components/navbar.html +321 -0
  115. package/docs/components/pagination.html +279 -0
  116. package/docs/components/progress.html +514 -0
  117. package/docs/components/radial-progress.html +434 -0
  118. package/docs/components/radio.html +655 -0
  119. package/docs/components/range.html +611 -0
  120. package/docs/components/rating.html +642 -0
  121. package/docs/components/select.html +696 -0
  122. package/docs/components/sidebar-setup.js +93 -0
  123. package/docs/components/skeleton.html +447 -0
  124. package/docs/components/spinner.html +68 -0
  125. package/docs/components/stats.html +486 -0
  126. package/docs/components/steps.html +356 -0
  127. package/docs/components/swap.html +517 -0
  128. package/docs/components/switch.html +68 -0
  129. package/docs/components/table.html +668 -0
  130. package/docs/components/tabs.html +506 -0
  131. package/docs/components/text-input.html +68 -0
  132. package/docs/components/textarea.html +603 -0
  133. package/docs/components/timeline.html +485 -42
  134. package/docs/components/toast.html +474 -0
  135. package/docs/components/toggle.html +564 -0
  136. package/docs/components/tooltip.html +423 -0
  137. package/docs/examples/getting-started-example.html +40 -0
  138. package/docs/examples/index.html +93 -0
  139. package/docs/getting-started/index.html +739 -0
  140. package/docs/getting-started/reviews.html +23 -0
  141. package/docs/getting-started/reviews.odom +108 -0
  142. package/docs/getting-started/reviews.vdom +84 -0
  143. package/docs/index.html +132 -42
  144. package/docs/playground.html +416 -0
  145. package/docs/router.html +285 -0
  146. package/docs/styles/index.html +190 -0
  147. package/functions/_middleware.js +32 -0
  148. package/index.html +309 -0
  149. package/lightview-router.js +364 -0
  150. package/lightview-x.js +1577 -0
  151. package/lightview.js +659 -1200
  152. package/lightview.js.backup +793 -0
  153. package/middleware/locale.js +25 -0
  154. package/middleware/markdown.js +44 -0
  155. package/middleware/notFound.js +37 -0
  156. package/package.json +27 -41
  157. package/watch.js +92 -0
  158. package/wrangler.toml +12 -0
  159. package/.idea/lightview.iml +0 -12
  160. package/.idea/modules.xml +0 -8
  161. package/.idea/vcs.xml +0 -6
  162. package/LICENSE +0 -21
  163. package/codepen-no-tabs-embed.css +0 -2
  164. package/docs/CNAME +0 -1
  165. package/docs/api.html +0 -674
  166. package/docs/blank.html +0 -10
  167. package/docs/comparedto.html +0 -89
  168. package/docs/components/chart-repl.html +0 -69
  169. package/docs/components/components.js +0 -113
  170. package/docs/components/contents.html +0 -17
  171. package/docs/components/gantt-repl.html +0 -61
  172. package/docs/components/gantt.html +0 -42
  173. package/docs/components/gauge-repl.html +0 -66
  174. package/docs/components/gauge.html +0 -20
  175. package/docs/components/orgchart-repl.html +0 -64
  176. package/docs/components/orgchart.html +0 -41
  177. package/docs/components/repl-as-src.html +0 -17
  178. package/docs/components/repl-repl.html +0 -95
  179. package/docs/components/repl.html +0 -527
  180. package/docs/components/timeline-repl.html +0 -72
  181. package/docs/components.html +0 -14
  182. package/docs/css/highlightjs.min.css +0 -9
  183. package/docs/css/tutorial.css +0 -35
  184. package/docs/examples/anchor.html +0 -11
  185. package/docs/examples/chart.html +0 -34
  186. package/docs/examples/counter.html +0 -26
  187. package/docs/examples/counter.test.mjs +0 -47
  188. package/docs/examples/counter2.html +0 -26
  189. package/docs/examples/directives.html +0 -79
  190. package/docs/examples/foreign.html +0 -50
  191. package/docs/examples/forgeinform.html +0 -98
  192. package/docs/examples/form.html +0 -61
  193. package/docs/examples/gauge.html +0 -18
  194. package/docs/examples/invalid-template-literals.html +0 -44
  195. package/docs/examples/medium/remote.html +0 -60
  196. package/docs/examples/message.html +0 -18
  197. package/docs/examples/nested.html +0 -11
  198. package/docs/examples/object-bound-form.html +0 -34
  199. package/docs/examples/remote-server.js +0 -51
  200. package/docs/examples/remote.html +0 -34
  201. package/docs/examples/remote.json +0 -1
  202. package/docs/examples/scratch.html +0 -69
  203. package/docs/examples/sensors/index.html +0 -44
  204. package/docs/examples/sensors/sensor-server.js +0 -30
  205. package/docs/examples/shared.html +0 -41
  206. package/docs/examples/template.html +0 -33
  207. package/docs/examples/timeline.html +0 -21
  208. package/docs/examples/todo.html +0 -40
  209. package/docs/examples/top.html +0 -10
  210. package/docs/examples/types.html +0 -94
  211. package/docs/examples/xor.html +0 -62
  212. package/docs/examples.html +0 -25
  213. package/docs/javascript/codejar.min.js +0 -8
  214. package/docs/javascript/highlightjs.min.js +0 -1173
  215. package/docs/javascript/isomorphic-git.js +0 -9
  216. package/docs/javascript/json5.min.js +0 -1
  217. package/docs/javascript/lightning-fs.js +0 -1
  218. package/docs/javascript/lightview.js +0 -1285
  219. package/docs/javascript/marked.min.js +0 -6
  220. package/docs/javascript/peerjs.min.js +0 -70
  221. package/docs/javascript/turndown.js +0 -973
  222. package/docs/javascript/types.js +0 -606
  223. package/docs/javascript/utils.js +0 -45
  224. package/docs/lightview.html +0 -63
  225. package/docs/old_index.html +0 -965
  226. package/docs/old_index.md +0 -1132
  227. package/docs/slidein.html +0 -51
  228. package/docs/tutorial/0-getting-started.html +0 -67
  229. package/docs/tutorial/1-intro-to-variables.html +0 -103
  230. package/docs/tutorial/10-template-components.html +0 -80
  231. package/docs/tutorial/11-linked-components.html +0 -76
  232. package/docs/tutorial/12-imported-components.html +0 -67
  233. package/docs/tutorial/13-input-binding.html +0 -94
  234. package/docs/tutorial/14-automatic-variable-creation.html +0 -74
  235. package/docs/tutorial/15-form-binding.html +0 -110
  236. package/docs/tutorial/16-if-directive.html +0 -60
  237. package/docs/tutorial/17-loop-directives.html +0 -83
  238. package/docs/tutorial/18-sanitizing-and-escaping-input.html +0 -79
  239. package/docs/tutorial/2-imported-and-exported-variables.html +0 -80
  240. package/docs/tutorial/3-data-types.html +0 -89
  241. package/docs/tutorial/4-extended-data-types.html +0 -83
  242. package/docs/tutorial/5-extended-functional-types.html +0 -96
  243. package/docs/tutorial/5.1-extended-functional-types.html +0 -79
  244. package/docs/tutorial/5.2-extended-functional-types.html +0 -70
  245. package/docs/tutorial/6-conventional-javascript.html +0 -75
  246. package/docs/tutorial/7-monitoring-with-observers.html +0 -107
  247. package/docs/tutorial/8-event-listeners.html +0 -65
  248. package/docs/tutorial/9-intro-to-components.html +0 -91
  249. package/docs/tutorial/contents.html +0 -32
  250. package/docs/tutorial/my-component.html +0 -29
  251. package/docs/tutorial/remote-value.json +0 -4
  252. package/docs/websiterepl.html +0 -46
  253. package/jest-puppeteer.config.js +0 -5
  254. package/jest.config.json +0 -12
  255. package/lightview.min.js +0 -1
  256. package/lightview_good.js +0 -1267
  257. package/lightview_optimized.js +0 -1274
  258. package/repl_hold.html +0 -320
  259. package/test/basic.html +0 -104
  260. package/test/basic.test.mjs +0 -315
  261. package/test/extended.html +0 -29
  262. package/test/extended.test.mjs +0 -448
  263. package/types.js +0 -607
  264. package/unsplash.key +0 -1
package/docs/components/timeline.html CHANGED
@@ -1,44 +1,487 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Lightview:Component:Timeline</title>
5
- <script src="../javascript/json5.min.js"></script>
6
- </head>
7
- <body>
8
- <div id="target"></div>
9
- <script id="lightview">
10
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
11
- const {chart} = await import(new URL("./components.js", this.componentBaseURI).href);
12
- chart(self, {
13
- packages: ["timeline"],
14
- columns: [
15
- {id: "RowLabel", type: "string"},
16
- {id: "BarLabel", type: "string"},
17
- {id: "Start", type: "date"},
18
- {id: "End", type: "date"}
19
- ],
20
- type: "Timeline",
21
- optionsTransform(options) {
22
- options = {...options};
23
- if ("showRowLabels" in options) {
24
- options.timeline = {showRowLabels: options.showRowLabels};
25
- }
26
- return options;
27
- },
28
- rowTransform(row, i) {
29
- return row.map((item, index) => {
30
- if (item && (index === 2 || index === 3)) {
31
- const date = new Date(item);
32
- if (!date || typeof (date) !== "object" || !(date instanceof Date)) {
33
- throw new TypeError(`row:${i} col:${index} is not a date`);
34
- }
35
- return date;
36
- }
37
- return item;
38
- })
39
- }
40
- });
1
+ <!-- SEO-friendly SPA Shim -->
2
+ <script src="/lightview-router.js"></script>
3
+ <script>
4
+ if (window.LightviewRouter) {
5
+ LightviewRouter.base('/index.html');
41
6
  }
42
7
  </script>
43
- </body>
44
- </html>
8
+
9
+ <!-- Load the page-specific stylesheet -->
10
+ <link rel="stylesheet" href="./index.css">
11
+
12
+ <!-- Gallery Structure -->
13
+ <div class="gallery-page">
14
+ <div class="gallery-layout">
15
+ <!-- Sidebar Overlay -->
16
+ <div id="sidebar-overlay" class="sidebar-overlay"></div>
17
+
18
+ <!-- Sidebar -->
19
+ <div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
20
+
21
+ <!-- Main Content -->
22
+ <div id="gallery-main" class="gallery-main">
23
+ <!-- Header Container -->
24
+ <div
25
+ style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
26
+ <!-- Breadcrumbs Row -->
27
+ <div style="padding: 0.75rem 1.5rem 0;">
28
+ <script>
29
+ (() => {
30
+ const { Breadcrumbs } = Lightview.tags;
31
+ const breadcrumbs = Breadcrumbs({
32
+ id: 'page-breadcrumbs',
33
+ items: [
34
+ { label: 'Components', href: '/docs/components' },
35
+ { label: 'Timeline' }
36
+ ]
37
+ });
38
+ document.currentScript.replaceWith(breadcrumbs.domEl);
39
+ })();
40
+ </script>
41
+ </div>
42
+ <!-- Title Row -->
43
+ <div class="gallery-header"
44
+ style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
45
+ <button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
46
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
47
+ style="stroke: currentColor; stroke-width: 2;">
48
+ <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
49
+ <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
50
+ </svg>
51
+ </button>
52
+ <h1 class="gallery-title">Timeline</h1>
53
+ </div>
54
+ </div>
55
+
56
+ <!-- Content -->
57
+ <div class="gallery-content">
58
+ <div class="section-content" style="max-width: 1000px;">
59
+ <p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
60
+ Timeline displays events in chronological order.
61
+ Supports horizontal, vertical, and colored connectors.
62
+ </p>
63
+
64
+ <!-- Basic Example with Examplify -->
65
+ <div class="card bg-base-200" style="margin-bottom: 2rem;">
66
+ <div class="card-body">
67
+ <h2 class="card-title">Basic Example</h2>
68
+ <p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Horizontal timeline with
69
+ events</p>
70
+
71
+ <!-- Tabs -->
72
+ <script>
73
+ window.switchSyntaxTab = (tabId) => {
74
+ const tabs = ['tagged', 'vdom', 'object'];
75
+ tabs.forEach(t => {
76
+ const tabEl = document.getElementById(`tab-btn-${t}`);
77
+ const contentEl = document.getElementById(`syntax-${t}`);
78
+ if (t === tabId) {
79
+ tabEl.classList.add('syntax-tab-active');
80
+ contentEl.style.display = 'block';
81
+ } else {
82
+ tabEl.classList.remove('syntax-tab-active');
83
+ contentEl.style.display = 'none';
84
+ }
85
+ });
86
+ };
87
+ </script>
88
+ <div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
89
+ <button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
90
+ onclick="switchSyntaxTab('tagged')">Tagged</button>
91
+ <button id="tab-btn-vdom" role="tab" class="syntax-tab"
92
+ onclick="switchSyntaxTab('vdom')">vDOM</button>
93
+ <button id="tab-btn-object" role="tab" class="syntax-tab"
94
+ onclick="switchSyntaxTab('object')">Object
95
+ DOM</button>
96
+ </div>
97
+
98
+ <!-- Tagged Syntax -->
99
+ <div id="syntax-tagged">
100
+ <pre><script>
101
+ examplify(document.currentScript.nextElementSibling, {
102
+ at: document.currentScript.parentElement,
103
+ scripts: ['/lightview.js', '/lightview-x.js'],
104
+ styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
105
+ type: 'module',
106
+ minHeight: 100,
107
+ autoRun: true
108
+ });
109
+ </script><code contenteditable="true">await import('/components/data-display/timeline.js');
110
+ const { tags, $ } = Lightview;
111
+ const { Timeline } = tags;
112
+
113
+ const events = [
114
+ { date: '2020', title: 'Project Started', done: true },
115
+ { date: '2021', title: 'First Release', done: true },
116
+ { date: '2022', title: 'V2 Launch', done: true },
117
+ { date: '2023', title: 'Enterprise', done: false }
118
+ ];
119
+
120
+ const timeline = Timeline({},
121
+ ...events.map((e, i) =>
122
+ Timeline.Item({ first: i === 0, last: i === events.length - 1 },
123
+ Timeline.Start({}, e.date),
124
+ Timeline.Middle({ done: e.done }),
125
+ Timeline.End({ box: true }, e.title),
126
+ i < events.length - 1 ? Timeline.Hr({ done: e.done }) : null
127
+ )
128
+ )
129
+ );
130
+
131
+ $('#example').content(timeline);</code></pre>
132
+ </div>
133
+
134
+ <!-- vDOM Syntax -->
135
+ <div id="syntax-vdom" style="display: none;">
136
+ <pre><script>
137
+ examplify(document.currentScript.nextElementSibling, {
138
+ at: document.currentScript.parentElement,
139
+ scripts: ['/lightview.js', '/lightview-x.js'],
140
+ styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
141
+ type: 'module',
142
+ minHeight: 100
143
+ });
144
+ </script><code contenteditable="true">await import('/components/data-display/timeline.js');
145
+ const { $, tags } = Lightview;
146
+ const { Timeline } = tags;
147
+
148
+ const events = [
149
+ { date: '2020', title: 'Project Started', done: true },
150
+ { date: '2021', title: 'First Release', done: true },
151
+ { date: '2022', title: 'V2 Launch', done: true },
152
+ { date: '2023', title: 'Enterprise', done: false }
153
+ ];
154
+
155
+ const timeline = {
156
+ tag: Timeline,
157
+ children: events.map((e, i) => ({
158
+ tag: Timeline.Item,
159
+ attributes: { first: i === 0, last: i === events.length - 1 },
160
+ children: [
161
+ { tag: Timeline.Start, children: [e.date] },
162
+ { tag: Timeline.Middle, attributes: { done: e.done } },
163
+ { tag: Timeline.End, attributes: { box: true }, children: [e.title] },
164
+ i < events.length - 1 ? { tag: Timeline.Hr, attributes: { done: e.done } } : null
165
+ ].filter(Boolean)
166
+ }))
167
+ };
168
+
169
+ $('#example').content(timeline);</code></pre>
170
+ </div>
171
+
172
+ <!-- Object DOM Syntax -->
173
+ <div id="syntax-object" style="display: none;">
174
+ <pre><script>
175
+ examplify(document.currentScript.nextElementSibling, {
176
+ at: document.currentScript.parentElement,
177
+ scripts: ['/lightview.js', '/lightview-x.js'],
178
+ styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
179
+ type: 'module',
180
+ minHeight: 100
181
+ });
182
+ </script><code contenteditable="true">await import('/components/data-display/timeline.js');
183
+ const { $ } = Lightview;
184
+
185
+ const events = [
186
+ { date: '2020', title: 'Project Started', done: true },
187
+ { date: '2021', title: 'First Release', done: true },
188
+ { date: '2022', title: 'V2 Launch', done: true },
189
+ { date: '2023', title: 'Enterprise', done: false }
190
+ ];
191
+
192
+ const timeline = {
193
+ Timeline: {
194
+ children: events.map((e, i) => ({
195
+ 'Timeline.Item': {
196
+ first: i === 0,
197
+ last: i === events.length - 1,
198
+ children: [
199
+ { 'Timeline.Start': { children: [e.date] } },
200
+ { 'Timeline.Middle': { done: e.done } },
201
+ { 'Timeline.End': { box: true, children: [e.title] } },
202
+ i < events.length - 1 ? { 'Timeline.Hr': { done: e.done } } : null
203
+ ].filter(Boolean)
204
+ }
205
+ }))
206
+ }
207
+ };
208
+
209
+ $('#example').content(timeline);</code></pre>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Reactive Example with Examplify -->
215
+ <div class="card bg-base-200" style="margin-bottom: 2rem;">
216
+ <div class="card-body">
217
+ <h2 class="card-title">Vertical Timeline</h2>
218
+ <p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Order tracking timeline</p>
219
+
220
+ <!-- Tabs -->
221
+ <script>
222
+ window.switchReactiveSyntaxTab = (tabId) => {
223
+ const tabs = ['tagged', 'vdom', 'object'];
224
+ tabs.forEach(t => {
225
+ const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
226
+ const contentEl = document.getElementById(`reactive-syntax-${t}`);
227
+ if (t === tabId) {
228
+ tabEl.classList.add('syntax-tab-active');
229
+ contentEl.style.display = 'block';
230
+ } else {
231
+ tabEl.classList.remove('syntax-tab-active');
232
+ contentEl.style.display = 'none';
233
+ }
234
+ });
235
+ };
236
+ </script>
237
+ <div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
238
+ <button id="reactive-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
239
+ onclick="switchReactiveSyntaxTab('tagged')">Tagged</button>
240
+ <button id="reactive-tab-btn-vdom" role="tab" class="syntax-tab"
241
+ onclick="switchReactiveSyntaxTab('vdom')">vDOM</button>
242
+ <button id="reactive-tab-btn-object" role="tab" class="syntax-tab"
243
+ onclick="switchReactiveSyntaxTab('object')">Object DOM</button>
244
+ </div>
245
+
246
+ <!-- Tagged Syntax -->
247
+ <div id="reactive-syntax-tagged">
248
+ <pre><script>
249
+ examplify(document.currentScript.nextElementSibling, {
250
+ at: document.currentScript.parentElement,
251
+ scripts: ['/lightview.js', '/lightview-x.js'],
252
+ styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
253
+ type: 'module',
254
+ minHeight: 280
255
+ });
256
+ </script><code contenteditable="true">await import('/components/data-display/timeline.js');
257
+ const { tags, $ } = Lightview;
258
+ const { Timeline } = tags;
259
+
260
+ const steps = [
261
+ { title: 'Order Placed', desc: 'Dec 10, 2023', done: true },
262
+ { title: 'Processing', desc: 'Dec 11, 2023', done: true },
263
+ { title: 'Shipped', desc: 'Dec 12, 2023', done: true },
264
+ { title: 'Delivered', desc: 'Expected Dec 15', done: false }
265
+ ];
266
+
267
+ const timeline = Timeline({ vertical: true },
268
+ ...steps.map((s, i) =>
269
+ Timeline.Item({ first: i === 0, last: i === steps.length - 1 },
270
+ Timeline.Start({ box: true }, s.title),
271
+ Timeline.Middle({ done: s.done, color: s.done ? 'primary' : undefined }),
272
+ Timeline.End({}, s.desc),
273
+ i < steps.length - 1 ? Timeline.Hr({ done: steps[i+1].done, color: s.done ? 'primary' : undefined }) : null
274
+ )
275
+ )
276
+ );
277
+
278
+ $('#example').content(timeline);</code></pre>
279
+ </div>
280
+
281
+ <!-- vDOM Syntax -->
282
+ <div id="reactive-syntax-vdom" style="display: none;">
283
+ <pre><script>
284
+ examplify(document.currentScript.nextElementSibling, {
285
+ at: document.currentScript.parentElement,
286
+ scripts: ['/lightview.js', '/lightview-x.js'],
287
+ styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
288
+ type: 'module',
289
+ minHeight: 280
290
+ });
291
+ </script><code contenteditable="true">await import('/components/data-display/timeline.js');
292
+ const { $, tags } = Lightview;
293
+ const { Timeline } = tags;
294
+
295
+ const steps = [
296
+ { title: 'Order Placed', desc: 'Dec 10, 2023', done: true },
297
+ { title: 'Processing', desc: 'Dec 11, 2023', done: true },
298
+ { title: 'Shipped', desc: 'Dec 12, 2023', done: true },
299
+ { title: 'Delivered', desc: 'Expected Dec 15', done: false }
300
+ ];
301
+
302
+ const timeline = {
303
+ tag: Timeline,
304
+ attributes: { vertical: true },
305
+ children: steps.map((s, i) => ({
306
+ tag: Timeline.Item,
307
+ attributes: { first: i === 0, last: i === steps.length - 1 },
308
+ children: [
309
+ { tag: Timeline.Start, attributes: { box: true }, children: [s.title] },
310
+ { tag: Timeline.Middle, attributes: { done: s.done, color: s.done ? 'primary' : undefined } },
311
+ { tag: Timeline.End, children: [s.desc] },
312
+ i < steps.length - 1 ? { tag: Timeline.Hr, attributes: { done: steps[i+1].done, color: s.done ? 'primary' : undefined } } : null
313
+ ].filter(Boolean)
314
+ }))
315
+ };
316
+
317
+ $('#example').content(timeline);</code></pre>
318
+ </div>
319
+
320
+ <!-- Object DOM Syntax -->
321
+ <div id="reactive-syntax-object" style="display: none;">
322
+ <pre><script>
323
+ examplify(document.currentScript.nextElementSibling, {
324
+ at: document.currentScript.parentElement,
325
+ scripts: ['/lightview.js', '/lightview-x.js'],
326
+ styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
327
+ type: 'module',
328
+ minHeight: 280
329
+ });
330
+ </script><code contenteditable="true">await import('/components/data-display/timeline.js');
331
+ const { $ } = Lightview;
332
+
333
+ const steps = [
334
+ { title: 'Order Placed', desc: 'Dec 10, 2023', done: true },
335
+ { title: 'Processing', desc: 'Dec 11, 2023', done: true },
336
+ { title: 'Shipped', desc: 'Dec 12, 2023', done: true },
337
+ { title: 'Delivered', desc: 'Expected Dec 15', done: false }
338
+ ];
339
+
340
+ const timeline = {
341
+ Timeline: {
342
+ vertical: true,
343
+ children: steps.map((s, i) => ({
344
+ 'Timeline.Item': {
345
+ first: i === 0,
346
+ last: i === steps.length - 1,
347
+ children: [
348
+ { 'Timeline.Start': { box: true, children: [s.title] } },
349
+ { 'Timeline.Middle': { done: s.done, color: s.done ? 'primary' : undefined } },
350
+ { 'Timeline.End': { children: [s.desc] } },
351
+ i < steps.length - 1 ? { 'Timeline.Hr': { done: steps[i+1].done, color: s.done ? 'primary' : undefined } } : null
352
+ ].filter(Boolean)
353
+ }
354
+ }))
355
+ }
356
+ };
357
+
358
+ $('#example').content(timeline);</code></pre>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- Props Tables -->
364
+ <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Timeline Props</h2>
365
+ <div style="overflow-x: auto; margin-bottom: 2rem;">
366
+ <table class="table table-zebra">
367
+ <thead>
368
+ <tr>
369
+ <th>Prop</th>
370
+ <th>Type</th>
371
+ <th>Default</th>
372
+ <th>Description</th>
373
+ </tr>
374
+ </thead>
375
+ <tbody>
376
+ <tr>
377
+ <td><code>vertical</code></td>
378
+ <td>boolean</td>
379
+ <td>false</td>
380
+ <td>Vertical layout</td>
381
+ </tr>
382
+ <tr>
383
+ <td><code>snap</code></td>
384
+ <td>boolean</td>
385
+ <td>false</td>
386
+ <td>Snap to items</td>
387
+ </tr>
388
+ <tr>
389
+ <td><code>compact</code></td>
390
+ <td>boolean</td>
391
+ <td>false</td>
392
+ <td>Compact layout</td>
393
+ </tr>
394
+ </tbody>
395
+ </table>
396
+ </div>
397
+
398
+ <!-- Sub-components -->
399
+ <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sub-components</h2>
400
+ <div style="overflow-x: auto; margin-bottom: 2rem;">
401
+ <table class="table table-zebra">
402
+ <thead>
403
+ <tr>
404
+ <th>Component</th>
405
+ <th>Props</th>
406
+ <th>Description</th>
407
+ </tr>
408
+ </thead>
409
+ <tbody>
410
+ <tr>
411
+ <td><code>Timeline.Item</code></td>
412
+ <td>first, last</td>
413
+ <td>Individual timeline event</td>
414
+ </tr>
415
+ <tr>
416
+ <td><code>Timeline.Start</code></td>
417
+ <td>box</td>
418
+ <td>Left/top content</td>
419
+ </tr>
420
+ <tr>
421
+ <td><code>Timeline.Middle</code></td>
422
+ <td>done, color</td>
423
+ <td>Center icon/indicator</td>
424
+ </tr>
425
+ <tr>
426
+ <td><code>Timeline.End</code></td>
427
+ <td>box</td>
428
+ <td>Right/bottom content</td>
429
+ </tr>
430
+ <tr>
431
+ <td><code>Timeline.Hr</code></td>
432
+ <td>done, color</td>
433
+ <td>Connector line</td>
434
+ </tr>
435
+ </tbody>
436
+ </table>
437
+ </div>
438
+
439
+ <!-- Static Example -->
440
+ <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Interactive Demo</h2>
441
+ <ul class="timeline" style="margin-bottom: 2rem;">
442
+ <li>
443
+ <div class="timeline-start">1984</div>
444
+ <div class="timeline-middle">
445
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
446
+ class="h-5 w-5 text-primary">
447
+ <path fill-rule="evenodd"
448
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
449
+ clip-rule="evenodd" />
450
+ </svg>
451
+ </div>
452
+ <div class="timeline-end timeline-box">First Macintosh</div>
453
+ <hr class="bg-primary" />
454
+ </li>
455
+ <li>
456
+ <hr class="bg-primary" />
457
+ <div class="timeline-start">1998</div>
458
+ <div class="timeline-middle">
459
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
460
+ class="h-5 w-5 text-primary">
461
+ <path fill-rule="evenodd"
462
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
463
+ clip-rule="evenodd" />
464
+ </svg>
465
+ </div>
466
+ <div class="timeline-end timeline-box">iMac</div>
467
+ <hr />
468
+ </li>
469
+ <li>
470
+ <hr />
471
+ <div class="timeline-start">2007</div>
472
+ <div class="timeline-middle">
473
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
474
+ class="h-5 w-5">
475
+ <path fill-rule="evenodd"
476
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
477
+ clip-rule="evenodd" />
478
+ </svg>
479
+ </div>
480
+ <div class="timeline-end timeline-box">iPhone</div>
481
+ </li>
482
+ </ul>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>