@aurodesignsystem-dev/auro-table 0.0.0-pr134.1 → 0.0.0-pr139.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.
- package/README.md +267 -43
- package/custom-elements.json +563 -0
- package/demo/api.html +1 -1
- package/demo/api.md +43 -31
- package/demo/auro-table.min.js +532 -59
- package/demo/index.html +1 -1
- package/demo/index.md +26 -120
- package/dist/auro-table-C52RNUva.js +12 -0
- package/dist/index.d.ts +185 -15
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +20 -11
- package/dist/auro-table-CifFJTj6.js +0 -11
package/README.md
CHANGED
|
@@ -15,71 +15,295 @@ The following sections are editable by making changes to the following files:
|
|
|
15
15
|
| Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
|
|
16
16
|
| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
|
|
17
17
|
| Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
|
|
18
|
-
-->
|
|
19
|
-
|
|
20
|
-
#
|
|
18
|
+
-->
|
|
19
|
+
|
|
20
|
+
# Table
|
|
21
21
|
|
|
22
22
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
|
|
23
|
-
<!--
|
|
24
|
-
|
|
23
|
+
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
24
|
+
Use the `auro-table` custom element to illustrate tabular data or content. The auro-table element is responsive, with a flexible layout and an easy-to-use JSON API. Alternatively, an HTML5 `<table>` may be used inside of the tag to create more dynamic tabular data.
|
|
25
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
25
26
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
|
|
26
|
-
<!--
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
28
|
+
<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
|
|
29
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
30
|
+
|
|
31
|
+
## Use Cases
|
|
29
32
|
|
|
30
|
-
<!-- AURO-GENERATED-CONTENT:START (
|
|
31
|
-
<!--
|
|
33
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
34
|
+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
35
|
+
The `<auro-table>` element should be used in situations where users may:
|
|
32
36
|
|
|
37
|
+
* Show static or dynamic tabular data or content
|
|
38
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
39
|
+
|
|
33
40
|
## Install
|
|
34
41
|
|
|
35
42
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
43
|
+
[](https://github.com/AlaskaAirlines/auro-table/actions/workflows/release.yml)
|
|
44
|
+
[](https://www.npmjs.com/package/@aurodesignsystem/auro-table)
|
|
45
|
+
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
```shell
|
|
49
|
+
$ npm i @aurodesignsystem/auro-table
|
|
50
|
+
```
|
|
42
51
|
|
|
43
|
-
|
|
52
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
53
|
+
|
|
54
|
+
### Define Dependency in Project
|
|
44
55
|
|
|
45
56
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
|
|
46
|
-
|
|
57
|
+
Defining the dependency within each project that is using the `<auro-table>` component.
|
|
47
58
|
|
|
48
|
-
<!-- AURO-GENERATED-CONTENT:
|
|
49
|
-
<!-- AURO-GENERATED-CONTENT:
|
|
59
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
60
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
|
|
61
|
+
|
|
62
|
+
```js
|
|
63
|
+
import "@aurodesignsystem/auro-table";
|
|
64
|
+
```
|
|
50
65
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
## Use CDN
|
|
66
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
67
|
+
|
|
68
|
+
### Use CDN
|
|
56
69
|
|
|
57
70
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
## {{ withAuroNamespace name }} use cases
|
|
71
|
+
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
61
72
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
## API Code Examples
|
|
73
|
+
```html
|
|
74
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-table@latest/+esm"></script>
|
|
75
|
+
```
|
|
66
76
|
|
|
67
|
-
|
|
77
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
78
|
+
|
|
79
|
+
## Basic Example
|
|
68
80
|
|
|
69
81
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
70
|
-
<!--
|
|
82
|
+
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<auro-table
|
|
86
|
+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
|
|
87
|
+
componentData='[
|
|
88
|
+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
|
|
89
|
+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
|
|
90
|
+
{"": "Team meeting", "Wednesday": "10:00am" },
|
|
91
|
+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
|
|
92
|
+
]'
|
|
93
|
+
>
|
|
94
|
+
</auro-table>
|
|
95
|
+
<auro-table>
|
|
96
|
+
<table>
|
|
97
|
+
<thead>
|
|
98
|
+
<tr>
|
|
99
|
+
<th></th>
|
|
100
|
+
<th>Monday</th>
|
|
101
|
+
<th>Tuesday</th>
|
|
102
|
+
<th>Wednesday</th>
|
|
103
|
+
<th>Thursday</th>
|
|
104
|
+
<th>Friday</th>
|
|
105
|
+
<th>Saturday</th>
|
|
106
|
+
<th>Sunday</th>
|
|
107
|
+
</tr>
|
|
108
|
+
</thead>
|
|
109
|
+
<tbody>
|
|
110
|
+
<tr>
|
|
111
|
+
<td>Dance class</td>
|
|
112
|
+
<td>5:00pm</td>
|
|
113
|
+
<td></td>
|
|
114
|
+
<td>5:00pm</td>
|
|
115
|
+
<td></td>
|
|
116
|
+
<td></td>
|
|
117
|
+
<td></td>
|
|
118
|
+
<td></td>
|
|
119
|
+
</tr>
|
|
120
|
+
<tr>
|
|
121
|
+
<td>Night classes</td>
|
|
122
|
+
<td></td>
|
|
123
|
+
<td></td>
|
|
124
|
+
<td></td>
|
|
125
|
+
<td>7:00pm</td>
|
|
126
|
+
<td>7:00pm</td>
|
|
127
|
+
<td></td>
|
|
128
|
+
<td></td>
|
|
129
|
+
</tr>
|
|
130
|
+
<tr>
|
|
131
|
+
<td>Team meeting</td>
|
|
132
|
+
<td></td>
|
|
133
|
+
<td></td>
|
|
134
|
+
<td>10:00am</td>
|
|
135
|
+
<td></td>
|
|
136
|
+
<td></td>
|
|
137
|
+
<td></td>
|
|
138
|
+
<td></td>
|
|
139
|
+
</tr>
|
|
140
|
+
<tr>
|
|
141
|
+
<td>Morning workout</td>
|
|
142
|
+
<td>8:00am</td>
|
|
143
|
+
<td>8:00am</td>
|
|
144
|
+
<td>8:00am</td>
|
|
145
|
+
<td>8:00am</td>
|
|
146
|
+
<td>8:00am</td>
|
|
147
|
+
<td></td>
|
|
148
|
+
<td></td>
|
|
149
|
+
</tr>
|
|
150
|
+
</tbody>
|
|
151
|
+
</table>
|
|
152
|
+
</auro-table>
|
|
153
|
+
```
|
|
154
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
155
|
+
|
|
156
|
+
## Custom Component Registration for Version Management
|
|
157
|
+
|
|
158
|
+
There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
|
|
159
|
+
The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
|
|
71
160
|
|
|
72
|
-
|
|
161
|
+
When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
|
|
73
162
|
|
|
74
|
-
|
|
75
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
163
|
+
However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
|
|
76
164
|
|
|
77
|
-
|
|
165
|
+
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
78
166
|
|
|
79
|
-
<!-- AURO-GENERATED-CONTENT:START (
|
|
80
|
-
<!--
|
|
167
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
168
|
+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
169
|
+
|
|
170
|
+
```js
|
|
171
|
+
// Import the class only
|
|
172
|
+
import { AuroTable } from '@aurodesignsystem/auro-table/class';
|
|
81
173
|
|
|
82
|
-
|
|
174
|
+
// Register with a custom name if desired
|
|
175
|
+
AuroTable.register('custom-table');
|
|
176
|
+
```
|
|
83
177
|
|
|
84
|
-
|
|
85
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
178
|
+
This will create a new custom element `<custom-table>` that behaves exactly like `<auro-table>`, allowing both to coexist on the same page without interfering with each other.
|
|
179
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
180
|
+
<div class="exampleWrapper exampleWrapper--flex">
|
|
181
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
|
|
182
|
+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
|
|
183
|
+
<custom-table>
|
|
184
|
+
<table>
|
|
185
|
+
<thead>
|
|
186
|
+
<tr>
|
|
187
|
+
<th></th>
|
|
188
|
+
<th>Monday</th>
|
|
189
|
+
<th>Tuesday</th>
|
|
190
|
+
<th>Wednesday</th>
|
|
191
|
+
<th>Thursday</th>
|
|
192
|
+
<th>Friday</th>
|
|
193
|
+
<th>Saturday</th>
|
|
194
|
+
<th>Sunday</th>
|
|
195
|
+
</tr>
|
|
196
|
+
</thead>
|
|
197
|
+
<tbody>
|
|
198
|
+
<tr>
|
|
199
|
+
<td>Dance class</td>
|
|
200
|
+
<td>5:00pm</td>
|
|
201
|
+
<td></td>
|
|
202
|
+
<td>5:00pm</td>
|
|
203
|
+
<td></td>
|
|
204
|
+
<td></td>
|
|
205
|
+
<td></td>
|
|
206
|
+
<td></td>
|
|
207
|
+
</tr>
|
|
208
|
+
<tr>
|
|
209
|
+
<td>Night classes</td>
|
|
210
|
+
<td></td>
|
|
211
|
+
<td></td>
|
|
212
|
+
<td></td>
|
|
213
|
+
<td>7:00pm</td>
|
|
214
|
+
<td>7:00pm</td>
|
|
215
|
+
<td></td>
|
|
216
|
+
<td></td>
|
|
217
|
+
</tr>
|
|
218
|
+
<tr>
|
|
219
|
+
<td>Team meeting</td>
|
|
220
|
+
<td></td>
|
|
221
|
+
<td></td>
|
|
222
|
+
<td>10:00am</td>
|
|
223
|
+
<td></td>
|
|
224
|
+
<td></td>
|
|
225
|
+
<td></td>
|
|
226
|
+
<td></td>
|
|
227
|
+
</tr>
|
|
228
|
+
<tr>
|
|
229
|
+
<td>Morning workout</td>
|
|
230
|
+
<td>8:00am</td>
|
|
231
|
+
<td>8:00am</td>
|
|
232
|
+
<td>8:00am</td>
|
|
233
|
+
<td>8:00am</td>
|
|
234
|
+
<td>8:00am</td>
|
|
235
|
+
<td></td>
|
|
236
|
+
<td></td>
|
|
237
|
+
</tr>
|
|
238
|
+
</tbody>
|
|
239
|
+
</table>
|
|
240
|
+
</custom-table>
|
|
241
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
242
|
+
</div>
|
|
243
|
+
<auro-accordion alignRight>
|
|
244
|
+
<span slot="trigger">See code</span>
|
|
245
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
|
|
246
|
+
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
|
|
247
|
+
|
|
248
|
+
```html
|
|
249
|
+
<custom-table>
|
|
250
|
+
<table>
|
|
251
|
+
<thead>
|
|
252
|
+
<tr>
|
|
253
|
+
<th></th>
|
|
254
|
+
<th>Monday</th>
|
|
255
|
+
<th>Tuesday</th>
|
|
256
|
+
<th>Wednesday</th>
|
|
257
|
+
<th>Thursday</th>
|
|
258
|
+
<th>Friday</th>
|
|
259
|
+
<th>Saturday</th>
|
|
260
|
+
<th>Sunday</th>
|
|
261
|
+
</tr>
|
|
262
|
+
</thead>
|
|
263
|
+
<tbody>
|
|
264
|
+
<tr>
|
|
265
|
+
<td>Dance class</td>
|
|
266
|
+
<td>5:00pm</td>
|
|
267
|
+
<td></td>
|
|
268
|
+
<td>5:00pm</td>
|
|
269
|
+
<td></td>
|
|
270
|
+
<td></td>
|
|
271
|
+
<td></td>
|
|
272
|
+
<td></td>
|
|
273
|
+
</tr>
|
|
274
|
+
<tr>
|
|
275
|
+
<td>Night classes</td>
|
|
276
|
+
<td></td>
|
|
277
|
+
<td></td>
|
|
278
|
+
<td></td>
|
|
279
|
+
<td>7:00pm</td>
|
|
280
|
+
<td>7:00pm</td>
|
|
281
|
+
<td></td>
|
|
282
|
+
<td></td>
|
|
283
|
+
</tr>
|
|
284
|
+
<tr>
|
|
285
|
+
<td>Team meeting</td>
|
|
286
|
+
<td></td>
|
|
287
|
+
<td></td>
|
|
288
|
+
<td>10:00am</td>
|
|
289
|
+
<td></td>
|
|
290
|
+
<td></td>
|
|
291
|
+
<td></td>
|
|
292
|
+
<td></td>
|
|
293
|
+
</tr>
|
|
294
|
+
<tr>
|
|
295
|
+
<td>Morning workout</td>
|
|
296
|
+
<td>8:00am</td>
|
|
297
|
+
<td>8:00am</td>
|
|
298
|
+
<td>8:00am</td>
|
|
299
|
+
<td>8:00am</td>
|
|
300
|
+
<td>8:00am</td>
|
|
301
|
+
<td></td>
|
|
302
|
+
<td></td>
|
|
303
|
+
</tr>
|
|
304
|
+
</tbody>
|
|
305
|
+
</table>
|
|
306
|
+
</custom-table>
|
|
307
|
+
```
|
|
308
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
309
|
+
</auro-accordion>
|