@stonecrop/atable 0.2.5
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 +82 -0
- package/dist/atable.js +775 -0
- package/dist/atable.js.map +1 -0
- package/dist/atable.umd.cjs +2 -0
- package/dist/atable.umd.cjs.map +1 -0
- package/dist/style.css +1 -0
- package/package.json +66 -0
- package/src/components/ACell.vue +213 -0
- package/src/components/AExpansionRow.vue +88 -0
- package/src/components/ARow.vue +116 -0
- package/src/components/ATable.vue +210 -0
- package/src/components/ATableHeader.vue +60 -0
- package/src/components/ATableModal.vue +50 -0
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# ATable
|
|
2
|
+
|
|
3
|
+
## User Guide
|
|
4
|
+
|
|
5
|
+
<details><summary>Key navigation</summary>
|
|
6
|
+
|
|
7
|
+
| Key(s) | Function |
|
|
8
|
+
| :------------ | :-------- |
|
|
9
|
+
| Enter | `downCell` |
|
|
10
|
+
| Tab | `nextCell` |
|
|
11
|
+
| Shift + Enter | `upCell` |
|
|
12
|
+
| Shift+ Tab | `prevCell` |
|
|
13
|
+
| ← | `prevCell` |
|
|
14
|
+
| ↑ | `upCell` |
|
|
15
|
+
| → | `nextCell` |
|
|
16
|
+
| ↓ | `downCell` |
|
|
17
|
+
| Home | `lastCell` |
|
|
18
|
+
| End | `firstCell` |
|
|
19
|
+
|
|
20
|
+
</details>
|
|
21
|
+
|
|
22
|
+
## Column API
|
|
23
|
+
|
|
24
|
+
The primary API for ATable is the column object.
|
|
25
|
+
|
|
26
|
+
- `title`: String; optional
|
|
27
|
+
- `name`: String; required (a reference to the column that must follow rules for valid JS variable naming)
|
|
28
|
+
- `type`: String; optional (a valid data types, full list [below](#column-data-types))
|
|
29
|
+
- `align`: String; optional (one of `left`, `right` or `center`; defaults to `center`)
|
|
30
|
+
- `edit`: Boolean; optional (indicates if the field is editable; defaults to `false`)
|
|
31
|
+
- `width`: String; optional (used to indicate the width of the cell; defaults to `40ch`)
|
|
32
|
+
- `mask`: Function; optional (a custom mask for the field, several are provided with types by default)
|
|
33
|
+
- `options`: Function; optional (used with `Select`, `Currency`, and `Quantity` fields)
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
{
|
|
37
|
+
title: 'Batch Name',
|
|
38
|
+
name: 'name',
|
|
39
|
+
type: 'Data',
|
|
40
|
+
align: 'right',
|
|
41
|
+
edit: false,
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
title: 'Species',
|
|
45
|
+
name: 'species',
|
|
46
|
+
type: 'Select',
|
|
47
|
+
align: 'left',
|
|
48
|
+
edit: true,
|
|
49
|
+
width: '30ch',
|
|
50
|
+
required: true,
|
|
51
|
+
options: () => ['Rainbow Trout', 'Steelhead', 'Golden Trout', 'Pacific Salmon']
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
title: 'Date',
|
|
55
|
+
name: 'set_date',
|
|
56
|
+
type: 'Date',
|
|
57
|
+
align: 'center',
|
|
58
|
+
edit: true,
|
|
59
|
+
width: '30ch',
|
|
60
|
+
mask: value => `${value}+/-`,
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Column Data Types
|
|
65
|
+
|
|
66
|
+
`v0.1`
|
|
67
|
+
|
|
68
|
+
- Data/ Text (unformatted text)
|
|
69
|
+
- Number (can be backed by int, decimal or float)
|
|
70
|
+
- Hyperlink
|
|
71
|
+
- Currency
|
|
72
|
+
- Quantity
|
|
73
|
+
- Date
|
|
74
|
+
- Date Range
|
|
75
|
+
- Select / Datalist / Combobox
|
|
76
|
+
|
|
77
|
+
`v0.2`
|
|
78
|
+
|
|
79
|
+
- Rich Text Editor
|
|
80
|
+
- Image
|
|
81
|
+
- File
|
|
82
|
+
- Diagram
|