@itrocks/list 0.0.16 → 0.0.18

package/cjs/feed.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head><title>list feed</title></head>
+<body>
+	<table class="objects">
+	<!--BEGIN-->
+
+		<!--objects-->
+		<tr>
+			<th class="select"><input name="id" type="checkbox" value="{id}"></th>
+			<!--%listProperties-->
+			<td>{outputOptionalContainer}</td>
+			<!--end-->
+		</tr>
+		<!--end-->
+
+	<!--END-->
+	</table>
+</body>
+</html>

package/cjs/list.html

@@ -26,7 +26,7 @@
 		</header>
 		<form action="app://(type.@route)" autocomplete="off" method="post" target="main">
 			<table class="objects">
-				<thead>
+			<thead>
 					<tr class="properties">
 						<th class="select" data-fix><input name="select" type="checkbox" value="all"></th>
 						<!--type.%listProperties-->
@@ -35,14 +35,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<!--objects-->
-					<tr>
-						<th class="select"><input name="id" type="checkbox" value="{id}"></th>
-						<!--%listProperties-->
-						<td>{outputOptionalContainer}</td>
-						<!--end-->
-					</tr>
-					<!--end-->
+					{./feed.html}
 				</tbody>
 			</table>
 			<footer>

package/cjs/list.js

@@ -62,13 +62,19 @@ let List = (() => {
         async html(request) {
             const header = request.request.headers['xhr-info'];
             const xhrInfo = header ? JSON.parse(header) : {};
-            const limit = Math.ceil((xhrInfo.targetHeight ?? 1000) / this.lineHeight);
+            const limit = xhrInfo.targetHeight
+                ? Math.ceil(xhrInfo.targetHeight / this.lineHeight)
+                : +(request.request.headers['xhr-visible-rows'] ?? 50);
+            const offset = request.request.data.offset;
             const type = request.type;
+            const objects = await (0, storage_1.dataSource)().readAll(type, [new storage_2.Limit(limit, +offset), storage_3.Sort]);
+            if (offset !== undefined) {
+                return this.htmlTemplateResponse({ objects, type }, request, __dirname + '/feed.html');
+            }
             const count = await (0, storage_1.dataSource)().count(type);
-            const objects = await (0, storage_1.dataSource)().readAll(type, [new storage_2.Limit(limit, +request.request.data.offset), storage_3.Sort]);
+            const route = (0, route_2.routeOf)(this);
             const generalActions = [];
             const selectionActions = [];
-            const route = (0, route_2.routeOf)(this);
             for (const action of (0, action_2.getActions)(type, route.slice(route.lastIndexOf('/') + 1))) {
                 const actions = (action.need === 'object') ? selectionActions : generalActions;
                 actions.push(action);

package/list.css

@@ -9,48 +9,62 @@ main > article[data-action=list] > form {
   grid-template-areas: "table" "footer";
   grid-template-rows: 1fr min-content;
 }
-main > article[data-action=list] > form > table {
+main > article[data-action=list] > form > footer {
+  grid-area: footer;
+  position: relative;
+}
+main > article[data-action=list] > form > table.objects > tbody > tr > :not(:first-child) {
+  cursor: pointer;
+}
+
+table.objects {
   border-collapse: collapse;
   display: block;
   grid-area: table;
   margin-bottom: -1px;
   overflow-y: auto;
 }
-main > article[data-action=list] > form > table tr > td, main > article[data-action=list] > form > table tr > th {
+table.objects th {
+  background: #f8f8f8;
+}
+table.objects tr td, table.objects tr th {
   border-bottom: 1px solid #d8d8d8;
   border-spacing: 0;
   padding: 0.6em;
 }
-main > article[data-action=list] > form > table tr > td:last-child, main > article[data-action=list] > form > table tr > th:last-child {
+table.objects tr td:last-child, table.objects tr th:last-child {
   border-right: 1px solid #d8d8d8;
 }
-main > article[data-action=list] > form > table tr > td:not(:first-child), main > article[data-action=list] > form > table tr > th:not(:first-child) {
-  cursor: pointer;
-}
-main > article[data-action=list] > form > table > thead > tr > * {
-  background: #f8f8f8;
-}
-main > article[data-action=list] > form > table > thead > .properties > .select > input[name=select] {
+table.objects tr.properties > .select > input[name=select] {
   display: none;
 }
-main > article[data-action=list] > form > table > tbody > tr:nth-child(even) > * {
-  background: #f8f8f8;
-}
-main > article[data-action=list] > form > table > tbody > tr:nth-child(odd) > * {
-  background: white;
-}
-main > article[data-action=list] > form > table > tbody > tr > td > ul {
+table.objects > tbody > tr > td > ul {
   display: block;
   margin: 0;
   padding: 0;
 }
-main > article[data-action=list] > form > table > tbody > tr > td > ul > li {
+table.objects > tbody > tr > td > ul > li {
   display: inline-block;
 }
-main > article[data-action=list] > form > table > tbody > tr > td > ul > li:not(:first-child):before {
+table.objects > tbody > tr > td > ul > li:not(:first-child):before {
   content: ", ";
 }
-main > article[data-action=list] > form > footer {
-  grid-area: footer;
-  position: relative;
+table.objects > tbody:first-child > tr:nth-child(even) > td {
+  background: white;
+}
+table.objects > tbody:first-child > tr:nth-child(odd) > td {
+  background: #f8f8f8;
+}
+table.objects > thead + tbody > tr:nth-child(even) > td {
+  background: #f8f8f8;
+}
+table.objects > thead + tbody > tr:nth-child(odd) > td {
+  background: white;
+}
+
+:not(article, article > form) > table.objects td, :not(article, article > form) > table.objects th {
+  border-top: 1px solid #d8d8d8;
+}
+:not(article, article > form) > table.objects td:first-child, :not(article, article > form) > table.objects th:first-child {
+  border-left: 1px solid #d8d8d8;
 }

package/package.json

@@ -63,5 +63,5 @@
 		"build:front": "tsc -p esm/tsconfig.json && ../prepare-module/prepare-module.js esm"
 	},
 	"types": "./cjs/list.d.ts",
-	"version": "0.0.16"
+	"version": "0.0.18"
 }