@itrocks/list 0.7.1 → 0.8.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/build.js +13 -8
- package/cjs/columns.d.ts +1 -0
- package/cjs/columns.js +8 -5
- package/cjs/columns.js.map +1 -1
- package/column-move.svg +1 -0
- package/column-remove.svg +1 -0
- package/list.css +30 -0
- package/package.json +2 -1
package/build.js
CHANGED
|
@@ -9,14 +9,19 @@ import { TableLink } from '@itrocks/table/link.js';
|
|
|
9
9
|
import { tableByElement } from '@itrocks/table/table.js';
|
|
10
10
|
import { xTargetCall } from '@itrocks/xtarget/xtarget.js';
|
|
11
11
|
build('article[data-action="list"] > form > table.objects', table => {
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
const saveColumns = () => {
|
|
13
|
+
const columns = table.tHead?.rows[0].querySelectorAll(':scope > th[data-property]');
|
|
14
|
+
const form = table.closest('form');
|
|
15
|
+
if (!columns || !form)
|
|
16
|
+
return;
|
|
17
|
+
const properties = Array.from(columns, column => encodeURIComponent(column.dataset.property ?? ''));
|
|
18
|
+
fetch(form.action + '?columns=' + properties.join(','), { keepalive: true }).catch(error => console.error('Columns save error:', error));
|
|
19
|
+
};
|
|
20
|
+
const tableColumnReorder = new TableColumnReorder({
|
|
21
|
+
isReorderable: header => header.dataset.property !== undefined,
|
|
22
|
+
onRemove: saveColumns,
|
|
23
|
+
onReorder: saveColumns
|
|
24
|
+
});
|
|
20
25
|
const tableLink = new TableLink({
|
|
21
26
|
call: url => xTargetCall(url, 'main'),
|
|
22
27
|
id: (element) => {
|
package/cjs/columns.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import { Request } from '@itrocks/request-response';
|
|
|
4
4
|
import { Option } from '@itrocks/storage';
|
|
5
5
|
import { Parameter } from './parameter';
|
|
6
6
|
export declare class Columns<T extends object> extends Parameter implements Iterable<ReflectProperty<T>> {
|
|
7
|
+
private configured;
|
|
7
8
|
properties: ReflectProperty<T, keyof T>[];
|
|
8
9
|
[Symbol.iterator](): ArrayIterator<ReflectProperty<T, keyof T>>;
|
|
9
10
|
getParams(request: Request, type: Type<T>): void;
|
package/cjs/columns.js
CHANGED
|
@@ -5,6 +5,7 @@ const list_properties_1 = require("@itrocks/list-properties");
|
|
|
5
5
|
const reflect_1 = require("@itrocks/reflect");
|
|
6
6
|
const parameter_1 = require("./parameter");
|
|
7
7
|
class Columns extends parameter_1.Parameter {
|
|
8
|
+
configured = false;
|
|
8
9
|
properties = new Array;
|
|
9
10
|
[Symbol.iterator]() {
|
|
10
11
|
return this.properties[Symbol.iterator]();
|
|
@@ -12,21 +13,22 @@ class Columns extends parameter_1.Parameter {
|
|
|
12
13
|
getParams(request, type) {
|
|
13
14
|
const data = request.data.columns;
|
|
14
15
|
if (data !== undefined) {
|
|
15
|
-
const propertyNames = (Array.isArray(data) ? data : [data]).flatMap(property => (typeof property === 'string') ? property.split(',') : property);
|
|
16
|
+
const propertyNames = (Array.isArray(data) ? data : [data]).flatMap(property => (typeof property === 'string') ? (property ? property.split(',') : []) : property);
|
|
16
17
|
if (propertyNames.every((property) => typeof property === 'string')) {
|
|
17
18
|
const reflected = new list_properties_1.ListReflectClass(type).listProperties();
|
|
18
19
|
const reordered = propertyNames.map(propertyName => reflected.find(property => property.name.toString() === propertyName));
|
|
19
20
|
const properties = reordered.filter((property) => !!property);
|
|
20
|
-
if ((
|
|
21
|
-
&& (properties.
|
|
22
|
-
|
|
21
|
+
if ((properties.length === propertyNames.length)
|
|
22
|
+
&& (new Set(properties).size === propertyNames.length)) {
|
|
23
|
+
this.configured = true;
|
|
23
24
|
this.properties = properties;
|
|
24
25
|
}
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
|
-
if (!this.length) {
|
|
28
|
+
if (!this.configured && !this.length) {
|
|
28
29
|
this.properties = new list_properties_1.ListReflectClass(type).listProperties();
|
|
29
30
|
}
|
|
31
|
+
this.configured = true;
|
|
30
32
|
}
|
|
31
33
|
get length() {
|
|
32
34
|
return this.properties.length;
|
|
@@ -52,6 +54,7 @@ class Columns extends parameter_1.Parameter {
|
|
|
52
54
|
return this.properties.map(property => property.name);
|
|
53
55
|
}
|
|
54
56
|
unserialize(data, type) {
|
|
57
|
+
this.configured = true;
|
|
55
58
|
this.properties = data.map(property => new reflect_1.ReflectProperty(type, property));
|
|
56
59
|
}
|
|
57
60
|
unshift(property) {
|
package/cjs/columns.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"columns.js","sourceRoot":"","sources":["../src/columns.ts"],"names":[],"mappings":";;;AACA,8DAA2D;AAC3D,8CAAmD;AAGnD,2CAA8C;AAE9C,MAAa,OAA0B,SAAQ,qBAAS;
|
|
1
|
+
{"version":3,"file":"columns.js","sourceRoot":"","sources":["../src/columns.ts"],"names":[],"mappings":"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"}
|
package/column-move.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 12h16M8 8l-4 4 4 4m8-8 4 4-4 4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="4"/></svg>
|
package/list.css
CHANGED
|
@@ -48,6 +48,12 @@ table.objects > * > tr > .column-reorder {
|
|
|
48
48
|
--column-reorder-tint: inset 0 0 0 100vmax rgb(0 0 0 / 2%);
|
|
49
49
|
box-shadow: var(--column-reorder-tint);
|
|
50
50
|
}
|
|
51
|
+
table.objects > * > tr > .column-reorder.moving {
|
|
52
|
+
--column-reorder-tint: inset 0 0 0 100vmax rgb(38 116 198 / 4%);
|
|
53
|
+
}
|
|
54
|
+
table.objects > * > tr > .column-reorder.removing {
|
|
55
|
+
--column-reorder-tint: inset 0 0 0 100vmax rgb(220 35 45 / 4%);
|
|
56
|
+
}
|
|
51
57
|
table.objects > * > tr > .column-reorder input {
|
|
52
58
|
box-shadow: var(--column-reorder-tint);
|
|
53
59
|
}
|
|
@@ -72,6 +78,30 @@ table.objects > tbody:first-child > tr:nth-child(odd) > td {
|
|
|
72
78
|
table.objects > thead > tr.properties > th {
|
|
73
79
|
user-select: none;
|
|
74
80
|
}
|
|
81
|
+
table.objects > thead > tr.properties > th.moving, table.objects > thead > tr.properties > th.removing {
|
|
82
|
+
z-index: 2;
|
|
83
|
+
}
|
|
84
|
+
table.objects > thead > tr.properties > th.moving::before, table.objects > thead > tr.properties > th.removing::before {
|
|
85
|
+
content: "";
|
|
86
|
+
display: inline-block;
|
|
87
|
+
height: 1em;
|
|
88
|
+
margin-left: -1.4em;
|
|
89
|
+
margin-right: 0.4em;
|
|
90
|
+
mask-position: center;
|
|
91
|
+
mask-repeat: no-repeat;
|
|
92
|
+
mask-size: contain;
|
|
93
|
+
pointer-events: none;
|
|
94
|
+
vertical-align: -0.22em;
|
|
95
|
+
width: 1em;
|
|
96
|
+
}
|
|
97
|
+
table.objects > thead > tr.properties > th.moving::before {
|
|
98
|
+
background: #2674c6;
|
|
99
|
+
mask-image: url("column-move.svg");
|
|
100
|
+
}
|
|
101
|
+
table.objects > thead > tr.properties > th.removing::before {
|
|
102
|
+
background: #d51d2c;
|
|
103
|
+
mask-image: url("column-remove.svg");
|
|
104
|
+
}
|
|
75
105
|
table.objects > thead > tr.properties > th[data-property] {
|
|
76
106
|
cursor: pointer;
|
|
77
107
|
}
|
package/package.json
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
"@itrocks/list-properties": "latest",
|
|
11
11
|
"@itrocks/reflect": "latest",
|
|
12
12
|
"@itrocks/request-response": "latest",
|
|
13
|
+
"@itrocks/sort": "latest",
|
|
13
14
|
"@itrocks/table": "latest",
|
|
14
15
|
"@itrocks/xtarget": "latest"
|
|
15
16
|
},
|
|
@@ -70,5 +71,5 @@
|
|
|
70
71
|
"build:front": "tsc -p src/front/tsconfig.json",
|
|
71
72
|
"test": "npm run build:cjs && node --test \"test/**/*.test.mjs\""
|
|
72
73
|
},
|
|
73
|
-
"version": "0.
|
|
74
|
+
"version": "0.8.0"
|
|
74
75
|
}
|