This repository was archived by the owner on Jun 1, 2026. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
226 lines (211 loc) · 14 KB
/
Copy pathindex.html
File metadata and controls
226 lines (211 loc) · 14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tiny Components</title>
<link rel="stylesheet" href="/src/styles/index.css">
<script type="module" src="/src/main.ts"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<lit-nav is-full>
<lit-tab key="intro">Intro</lit-tab>
<lit-tab key="buttons">Buttons</lit-tab>
<lit-tab key="alerts">Alerts</lit-tab>
<lit-tab key="modals">Modals</lit-tab>
<lit-tab key="tables">Tables</lit-tab>
<div slot="intro">
<p>
A small web component library built using <a href="https://lit.dev/">Lit</a> with <a href="https://jenil.github.io/chota/">Chota</a>
for styling. The goal is create a set of lightweight components that provide the core functionality needed for a typical CRUD app.
Inspect this page to see how each component is used. This library is best used with a server-side rendered application (using
something like Rails or DotNetCore Razor) that needs a bit more client side interactivity than the browser can natively provide.
</p>
<p>
The navigation menu above uses the <code>lit-nav</code> and <code>lit-tab</code> tags. <code>lit-nav</code> has a single boolean
attribute <code>is-full</code> to control whether the nav menu is the full width of the container. The inner content of each
<code>lit-tab</code> is displayed in the nav menu, and each <code>lit-tab</code> has a <code>key</code> attribute that specifies
the unique key for that tab. The content displayed for each tab is contained in a <code>div</code> with a <code>slot</code> attribute
value that corresponds to a <code>key</code> from the <code>lit-tab</code>. <code>lit-tab</code> can also have a boolean
<code>is-active</code> attribute to specify that tab should be displayed by default. If no active tab is specified, the first tab
is displayed by default. If multiple tabs have <code>is-active</code>, the first is displayed by default.
</p>
</div>
<div slot="buttons">
<div class="container">
<div class="row">
<div class="col">
<a class="button">Default</a>
<a class="button primary">Primary</a>
<a class="button secondary">Secondary</a>
<a class="button dark">Dark</a>
<a class="button error">Error</a>
<a class="button success">Success</a>
</div>
</div>
<div class="row">
<div class="col">
<a class="button outline">Outline</a>
<a class="button primary outline">Primary</a>
<a class="button secondary outline">Secondary</a>
<a class="button dark outline">Dark</a>
<a class="button clear">Clear</a>
<a class="button icon">Icon ✎</a>
<a class="button icon-only">✎</a>
</div>
</div>
</div>
<br />
<details>
<summary class="cursor-pointer">Would you like to know more?</summary>
<p>
Buttons are standard Chota styling, included here since they are used in components.
</p>
</details>
</div>
<div slot="alerts">
<lit-alert type="success">Success</lit-alert>
<lit-alert type="error" lang="en">Error</lit-alert>
<lit-alert type="error" lang="es">Español</lit-alert>
<lit-alert type="success" no-dismiss>You can't dismiss me</lit-alert>
<!-- renders nothing since the type is invalid -->
<lit-alert type="blah">Blah blah</lit-alert>
<br />
<details>
<summary class="cursor-pointer">Would you like to know more?</summary>
<p>
Alerts are created using the <code>lit-alert</code> tag. The inner content is displayed within the alert.
</p>
<h5><code>lit-alert</code> Attributes</h5>
<dl>
<dt><code>type</code></dt>
<dd>
Controls the styling of the alert. Accepts a value of <code>success</code> or <code>error</code>. Defaults to
<code>success</code>. An alert with an invalid <code>type</code> value will render nothing.
</dd>
<dt><code>no-dismiss</code></dt>
<dd>Boolean that prevents the alert from being dismissed.</dd>
<dt><code>lang</code></dt>
<dd>Language for i18n. Accepts value of <code>en</code> or <code>es</code>. Defaults to <code>en</code>.</dd>
</dl>
</details>
</div>
<div slot="modals">
<lit-modal>
<div slot="button">
<button class="button primary">Open Dialog</button>
</div>
<div slot="modal-header"><h4>Dialog Modal Header</h4></div>
<div slot="modal-content">Dialog modal inner content</div>
</lit-modal>
<br />
<lit-modal><div slot="modal-header"><h4>Dialog Modal Header</h4></div><div slot="modal-content">Dialog modal inner content</div></lit-modal>
<br />
<lit-modal type="confirm" href="test">
<div slot="button">
<button class="button primary">Open Confirm</button>
</div>
<div slot="modal-header"><h4>Confirm Modal Header</h4></div>
<div slot="modal-content">Confirm modal inner content</div>
</lit-modal>
<br />
<lit-modal type="confirm" href="test" lang="es">
<div slot="button">
<button class="button primary">Abrir Confirmar</button>
</div>
<div slot="modal-header"><h4>Confirmar encabezado modal</h4></div>
<div slot="modal-content">Confirmar contenido interno modal</div>
</lit-modal>
<br />
<details>
<summary class="cursor-pointer">Would you like to know more?</summary>
<p>
</p>
<h5><code>lit-modal</code> Attributes</h5>
<dl>
<dt><code>type</code></dt>
<dd>Controls what type of modal is displayed. Accepts a value of <code>dialog</code> or <code>confirm</code>. A modal with an invalid <code>type</code> value will render nothing.</dd>
<dt><code>href</code></dt>
<dd>URL to redirect to if the confirmation dialog is confirmed. Does nothing when type is <code>dialog</code>.</dd>
<dt><code>lang</code></dt>
<dd>Language for i18n. Accepts value of <code>en</code> or <code>es</code>. Defaults to <code>en</code>.</dd>
</dl>
<h5><code>lit-modal</code> Slots</h5>
<dl>
<dt><code>button</code></dt>
<dd>Button that is displayed to trigger the modal.</dd>
<dt><code>modal-header</code></dt>
<dd>Content displayed at the top of the modal in the header section.</dd>
<dt><code>modal-content</code></dt>
<dd>Content displayed in the body of the modal.</dd>
</dl>
</details>
</div>
<div slot="tables">
<lit-table key="testTable" src="https://jsonplaceholder.typicode.com/comments" row-key="id" add-url="https://localhost/add"
edit-url="https://localhost/edit?id=${id}&postId=${postId}" delete-url="https://localhost/delete?id=${id}&postId=${postId}"
>
<lit-table-header property="postId">PostId</lit-table-header>
<lit-table-header property="id">Id</lit-table-header>
<lit-table-header property="name">Name</lit-table-header>
<lit-table-header property="email">Email</lit-table-header>
<lit-table-header property="body">Body</lit-table-header>
<div slot="rowActions">
<a class="button primary button-action icon" href="https://localhost/edit?id=${id}&postId=${postId}" title="Edit Me">✎</a>
<lit-modal type="confirm" href="https://localhost/delete?id=${id}&postId=${postId}" lang="en">
<span slot="button">
<button class="button dark button-action icon" title="Delete Me">✖</button>
</span>
<span slot="modal-header"><h4>Confirm</h4></span>
<span slot="modal-content">Are you sure you want to delete?</span>
</lit-modal>
</div>
</lit-table>
<br />
<details>
<summary class="cursor-pointer">Would you like to know more?</summary>
<p>
<code>lit-table</code> renders JSON data in table format. It provides common table functionality including paging,
filtering, and multi-column sorting. <code>lit-table</code> uses sessionStorage to remember these settings and
restores the table to it's previous state if the user navigates away and back. This component is designed to handle
the most common use cases for a table in a CRUD app. But it is somewhat simplistic in that it does not offer complex
rendering/formatting options currently.
</p>
<h5><code>lit-table</code> Attributes</h5>
<dl>
<dt><code>key</code></dt>
<dd>Unique identifier for the table. Required to use sessionStorage, otherwise optional.</dd>
<dt><code>src</code></dt>
<dd>Specifies the URL to fetch JSON table data from.</dd>
<dt><code>row-key</code></dt>
<dd>Name of the property within the JSON data that uniquely identifies each row.</dd>
<dt><code>add-url</code></dt>
<dd>Optional URL for adding records. If provided, an add button is displayed in the header of the left-most table column.</dd>
<dt><code>edit-url</code></dt>
<dd>Optional URL for editing records. If provided, an edit button is displayed in the left-most table column for each row.</dd>
<dt><code>delete-url</code></dt>
<dd>Optional URL for deleting records. If provided, a delete button is displayed in the left-most table column for each row. A modal is used to confirm before redirecting to the URL.</dd>
<dt><code>lang</code></dt>
<dd>Language for i18n. Accepts value of <code>en</code> or <code>es</code>. Defaults to <code>en</code>.</dd>
</dl>
<p>
Both the edit and delete URL properties can include values from the JSON data that are replaced when rendering the table.
For example, the URL <code>https://localhost/edit?id=${id}</code> would replace <code>${id}</code> with the value of the
<code>id</code> property for each row.
</p>
<p>
Each <code>lit-table</code> contains one to many <code>lit-table-header</code> tags that define the columns to display
in the table. The inner content of the tag is displayed in the table header. The <code>property</code> attribute specifies the
property in the JSON data to display for the column.
</p>
</details>
</div>
</lit-nav>
<!-- permanently hidden because its not defined, just to show how the CSS works -->
<lit-test property="body">Body</lit-test>
</div>
</body>
</html>