@itrocks/list 0.1.4 → 0.2.0

package/cjs/list.html

@@ -30,7 +30,7 @@
 					<tr class="properties">
 						<th class="select"><input name="select" type="checkbox" value="all"></th>
 						<!--columns-->
-						<th data-property="{name}">{@display}</th>
+						<th data-property="{name}" data-reverse="{?reverse}" data-sort="{?sort}">{@display}</th>
 						<!--end-->
 					</tr>
 				</thead>

package/cjs/sort.d.ts

@@ -3,6 +3,6 @@ import { Request } from '@itrocks/request-response';
 import { Option } from '@itrocks/storage';
 import { Columns } from './columns';
 export declare class Sort<T extends object> {
-    getParams(_request: Request, _type: Type, _columns: Columns<T>): void;
+    getParams(_request: Request, type: Type, columns: Columns<T>): void;
     readOptions(options?: Option[]): Option[];
 }

package/cjs/sort.js

@@ -1,9 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sort = void 0;
+const sort_1 = require("@itrocks/sort");
+const sort_2 = require("@itrocks/sort");
 const storage_1 = require("@itrocks/storage");
 class Sort {
-    getParams(_request, _type, _columns) {
+    getParams(_request, type, columns) {
+        let sortProperties;
+        for (const option of this.readOptions()) {
+            if (option instanceof storage_1.Sort) {
+                sortProperties = option.properties;
+            }
+        }
+        sortProperties ??= (0, sort_2.sortOf)(type);
+        const sortPropertyNames = sortProperties.map(property => '' + property);
+        for (const column of columns) {
+            const sortIndex = sortPropertyNames.indexOf(column.name) + 1;
+            column.reverse = !!(sortIndex && (sortProperties[sortIndex - 1] instanceof sort_1.Reverse));
+            column.sort = sortIndex ? sortIndex : undefined;
+        }
     }
     readOptions(options = new Array) {
         options.push(storage_1.Sort);

package/list.css

@@ -27,6 +27,30 @@ table.objects {
 table.objects th {
   background: #f8f8f8;
 }
+table.objects th[data-sort] {
+  padding-right: calc(0.6em + 16px);
+}
+table.objects th[data-sort]::after {
+  content: "";
+  height: 24px;
+  mask: url("sort.svg") right center/24px 24px no-repeat;
+  position: absolute;
+  right: 0;
+  top: calc(50% - 12px);
+  width: 24px;
+}
+table.objects th[data-sort][data-reverse]::after {
+  transform: scaleY(-1);
+}
+table.objects th[data-sort][data-sort="1"]::after {
+  background-color: #444;
+}
+table.objects th[data-sort][data-sort="2"]::after {
+  background-color: #888;
+}
+table.objects th[data-sort][data-sort="3"]::after {
+  background-color: #ccc;
+}
 table.objects tr td, table.objects tr th {
   border-bottom: 1px solid #d8d8d8;
   border-spacing: 0;

package/package.json

@@ -30,6 +30,7 @@
 		"LICENSE",
 		"README.md",
 		"cjs/*",
+		"/*.svg",
 		"*.css",
 		"*.d.ts",
 		"*.js",
@@ -67,9 +68,9 @@
 	"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:css": "sass --no-source-map src/list.scss:list.css && cp src/*.svg ./",
 		"build:front": "tsc -p esm/tsconfig.json && ../prepare-module/prepare-module.js esm"
 	},
 	"types": "./cjs/list.d.ts",
-	"version": "0.1.4"
+	"version": "0.2.0"
 }

package/sort.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 15l10 0-5-5z"/></svg>