@itrocks/list 0.7.0 → 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/cjs/feed.html +1 -1
- package/cjs/filter.js +1 -1
- package/cjs/filter.js.map +1 -1
- package/cjs/list.html +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/cjs/feed.html
CHANGED
package/cjs/filter.js
CHANGED
|
@@ -11,7 +11,7 @@ class Filter extends parameter_1.Parameter {
|
|
|
11
11
|
}
|
|
12
12
|
getParams(request) {
|
|
13
13
|
for (const property of this.columns.map(property => property.name)) {
|
|
14
|
-
this.search[property]
|
|
14
|
+
this.search[property] ??= '';
|
|
15
15
|
}
|
|
16
16
|
for (const [property, search] of Object.entries(request.data.search ?? {})) {
|
|
17
17
|
if (!(property in this.search))
|
package/cjs/filter.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter.js","sourceRoot":"","sources":["../src/filter.ts"],"names":[],"mappings":";;;AAIA,2CAAuC;AAIvC,MAAa,MAAyB,SAAQ,qBAAS;IAKnC;IAFnB,MAAM,GAAW,EAAE,CAAA;IAEnB,YAAmB,OAAmB;QAErC,KAAK,EAAE,CAAA;QAFW,YAAO,GAAP,OAAO,CAAY;IAGtC,CAAC;IAED,SAAS,CAAC,OAAgB;QAEzB,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACpE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"filter.js","sourceRoot":"","sources":["../src/filter.ts"],"names":[],"mappings":";;;AAIA,2CAAuC;AAIvC,MAAa,MAAyB,SAAQ,qBAAS;IAKnC;IAFnB,MAAM,GAAW,EAAE,CAAA;IAEnB,YAAmB,OAAmB;QAErC,KAAK,EAAE,CAAA;QAFW,YAAO,GAAP,OAAO,CAAY;IAGtC,CAAC;IAED,SAAS,CAAC,OAAgB;QAEzB,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACpE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;QAC7B,CAAC;QACD,KAAK,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,EAAE,CAAC;YAC5E,IAAI,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC;gBAAE,SAAQ;YACxC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAA;QAC/B,CAAC;IACF,CAAC;IAED,WAAW,CAAC,UAAU,IAAI,KAAa;QAEtC,OAAO,OAAO,CAAA;IACf,CAAC;IAED,YAAY,CAAC,IAAU;QAEtB,MAAM,MAAM,GAAW,EAAE,CAAA;QACzB,KAAK,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;YAC7D,IAAI,KAAK,KAAK,EAAE;gBAAE,SAAQ;YAC1B,MAAM,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAA;QACzB,CAAC;QACD,OAAO,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;IACrD,CAAC;IAED,SAAS;QAER,OAAO,IAAI,CAAC,MAAM,CAAA;IACnB,CAAC;IAED,WAAW,CAAC,IAAY;QAEvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;IACnB,CAAC;CAED;AA9CD,wBA8CC"}
|
package/cjs/list.html
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
</ul>
|
|
26
26
|
</header>
|
|
27
27
|
<form action="app://(type.@route)/list" autocomplete="off" method="post" target="main">
|
|
28
|
-
<table class="objects" data-link="{type.@route}">
|
|
28
|
+
<table class="objects" data-feed-fields="search.*" data-link="{type.@route}">
|
|
29
29
|
<thead>
|
|
30
30
|
<tr class="properties">
|
|
31
31
|
<th class="select" data-freeze><input name="select" type="checkbox" value="all"></th>
|
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
|
}
|