@itrocks/list 0.0.1

package/LICENSE

@@ -0,0 +1,14 @@
+ISC License
+Copyright (C) 2024, Baptiste Pillot <baptiste@pillot.fr>
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
+OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
+CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+[![npm version](https://img.shields.io/npm/v/@itrocks/list?logo=npm)](https://www.npmjs.org/package/@itrocks/list)
+[![npm downloads](https://img.shields.io/npm/dm/@itrocks/list)](https://www.npmjs.org/package/@itrocks/list)
+[![GitHub](https://img.shields.io/github/last-commit/itrocks-ts/list?color=2dba4e&label=commit&logo=github)](https://github.com/itrocks-ts/list)
+[![issues](https://img.shields.io/github/issues/itrocks-ts/list)](https://github.com/itrocks-ts/list/issues)
+[![discord](https://img.shields.io/discord/1314141024020467782?color=7289da&label=discord&logo=discord&logoColor=white)](https://25.re/ditr)
+
+# list
+
+Generic action-based object list navigation in HTML and JSON.

package/build.d.ts

@@ -0,0 +1 @@
+export {};

package/build.js

@@ -0,0 +1,36 @@
+import build from '../build/build.js';
+import { xTargetCall } from '../xtarget/xtarget.js';
+import TableFreeze from '../table/freeze.js';
+import TableFreezeInheritBackground from '../table/freeze/inherit-background.js';
+import TableFreezeInheritBorder from '../table/freeze/inherit-border.js';
+import { tableByElement } from '../table/table.js';
+build('article[data-action="list"] > form > table.objects', element => {
+    tableByElement(element, { plugins: [TableFreeze, TableFreezeInheritBackground, TableFreezeInheritBorder] });
+    element.querySelector(':scope > tbody')?.addEventListener('click', async (event) => {
+        const td = event.target;
+        if (!(td instanceof HTMLTableCellElement))
+            return;
+        const tr = td.closest('tr');
+        if (!tr)
+            return;
+        let select = td.closest('.select');
+        if (select) {
+            const input = select.querySelector('input');
+            if (!input)
+                return;
+            input.click();
+            input.focus();
+            return;
+        }
+        const checkBox = tr.querySelector(':scope > th.select > input[name=id]');
+        if (!checkBox)
+            return;
+        const id = checkBox.value;
+        if (!id)
+            return;
+        const form = tr.closest('form');
+        if (!form)
+            return;
+        return xTargetCall(form.getAttribute('action') + '/' + id, 'main');
+    });
+});

package/cjs/list.d.ts

@@ -0,0 +1,6 @@
+import { Action } from '@itrocks/action';
+import { Request } from '@itrocks/action-request';
+export declare class List extends Action {
+    html(request: Request): Promise<import("@itrocks/core-responses").HtmlResponse>;
+    json(request: Request): Promise<import("@itrocks/core-responses").JsonResponse>;
+}

package/cjs/list.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<link href="../../action-bar/action.css" rel="stylesheet">
+	<link href="../../ux-core/css/app.css" rel="stylesheet">
+	<link href="../../ux-core/css/article.css" rel="stylesheet">
+	<link href="../list.css" rel="stylesheet">
+	<meta charset="utf-8">
+	<script src="../build.js" type="module"></script>
+	<title>{type.@output.ucFirst} list</title>
+</head>
+<body>
+<main>
+<!--BEGIN-->
+
+	<article data-action="list" data-class="{type.name}" data-route="{type.@route}">
+		<header>
+			<h2>{type.@output.ucFirst} list</h2>
+			<section class="summary">{objects.length} elements</section>
+			<ul class="general actions">
+				<li class="new"><a href="app://(type.@route)/new" target="main">New</a></li>
+			</ul>
+		</header>
+		<form action="app://(type.@route)" autocomplete="off" method="post" target="main">
+			<table class="objects">
+				<thead>
+					<tr class="properties">
+						<th class="select" data-fix><input name="select" type="checkbox" value="all"></th>
+						<!--type.%properties.*-->
+						<th data-property="{name}">{@display}</th>
+						<!--end-->
+					</tr>
+				</thead>
+				<tbody>
+					<!--objects-->
+					<tr>
+						<th class="select"><input name="id" type="checkbox" value="{id}"></th>
+						<!--%properties.*-->
+						<td>{outputOptionalContainer}</td>
+						<!--end-->
+					</tr>
+					<!--end-->
+				</tbody>
+			</table>
+			<footer>
+				<ul class="selection actions">
+					<li class="delete">
+						<input formaction="app://(type.@route)/delete" formtarget="#notification" type="submit" value="Delete">
+					</li>
+				</ul>
+			</footer>
+		</form>
+	</article>
+
+<!--END-->
+</main>
+</body>
+</html>

package/cjs/list.js

@@ -0,0 +1,70 @@
+"use strict";
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const action_1 = require("@itrocks/action");
+const action_2 = require("@itrocks/action");
+const route_1 = require("@itrocks/route");
+const storage_1 = require("@itrocks/storage");
+let List = (() => {
+    let _classDecorators = [(0, action_2.Need)('Store', 'new'), (0, route_1.Route)('/list')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = action_1.Action;
+    var List = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            List = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        async html(request) {
+            const type = request.type;
+            const objects = await (0, storage_1.dataSource)().search(type);
+            return this.htmlTemplateResponse({ objects, type }, request, __dirname + '/list.html');
+        }
+        async json(request) {
+            const objects = await (0, storage_1.dataSource)().search(request.type);
+            return this.jsonResponse(objects);
+        }
+    };
+    return List = _classThis;
+})();
+exports.List = List;
+//# sourceMappingURL=list.js.map

package/list.css

@@ -0,0 +1,68 @@
+main > article[data-action=list] {
+  display: grid;
+  grid-template-areas: "header" "form";
+  grid-template-rows: min-content 1fr;
+  height: 100%;
+}
+main > article[data-action=list] > header {
+  grid-area: header;
+}
+main > article[data-action=list] > header > .summary {
+  padding: 13px 10px 12px;
+  position: absolute;
+  right: 0;
+  white-space: nowrap;
+}
+main > article[data-action=list] > form {
+  display: grid;
+  grid-area: form;
+  grid-template-areas: "table" "footer";
+  grid-template-rows: 1fr min-content;
+  height: 100%;
+  overflow: auto;
+}
+main > article[data-action=list] > form > table {
+  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 {
+  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 {
+  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] {
+  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 {
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+main > article[data-action=list] > form > table > tbody > tr > td > ul > li {
+  display: inline-block;
+}
+main > article[data-action=list] > form > table > tbody > tr > td > ul > li:not(:first-child):before {
+  content: ", ";
+}
+main > article[data-action=list] > form > footer {
+  grid-area: footer;
+  position: relative;
+}

package/package.json

@@ -0,0 +1,72 @@
+{
+	"author": {
+		"name": "Baptiste Pillot",
+		"email": "baptiste@pillot.fr"
+	},
+	"dependencies": {
+		"@itrocks/action": "latest",
+		"@itrocks/action-bar": "latest",
+		"@itrocks/action-request": "latest",
+		"@itrocks/build": "latest",
+		"@itrocks/route": "latest",
+		"@itrocks/storage": "latest",
+		"@itrocks/table": "latest",
+		"@itrocks/ux-core": "latest",
+		"@itrocks/xtarget": "latest"
+	},
+	"description": "Generic action-based object list navigation in HTML and JSON",
+	"devDependencies": {
+		"@itrocks/prepare-module": "latest",
+		"@types/node": "^22.9",
+		"sass": "^1.83",
+		"typescript": "~5.6"
+	},
+	"engines": {
+		"node": ">=18"
+	},
+	"exports": "./cjs/list.js",
+	"homepage": "https://it.rocks",
+	"files": [
+		"LICENSE",
+		"README.md",
+		"cjs/*",
+		"*.css",
+		"*.d.ts",
+		"*.js",
+		"!*.map"
+	],
+	"keywords": [
+		"API",
+		"backend",
+		"browse",
+		"component",
+		"display",
+		"filter",
+		"interactive",
+		"json",
+		"list",
+		"it.rocks",
+		"output",
+		"responsive",
+		"search",
+		"select",
+		"selection",
+		"UI",
+		"UX"
+	],
+	"license": "ISC",
+	"name": "@itrocks/list",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/itrocks-ts/list.git"
+	},
+	"scripts": {
+		"build": "npm run build:cjs && npm run build:css && npm run build:front",
+		"build:cjs": "tsc -p tsconfig.cjs.json && cp src/*.html cjs/",
+		"build:css": "sass --no-source-map src/list.scss:list.css",
+		"build:front": "tsc -p esm/tsconfig.json && npm run prepare",
+		"prepare": "prepare-module esm"
+	},
+	"types": "./cjs/list.d.ts",
+	"version": "0.0.1"
+}