@itrocks/list 0.3.5 → 0.4.1

package/build.js

@@ -1,4 +1,6 @@
 import { build } from '@itrocks/build/build.js';
+import { TableColumnReorder } from '@itrocks/table/column-reorder.js';
+import { TableColumnReorderFreeze } from '@itrocks/table/column-reorder-freeze.js';
 import { TableFeed } from '@itrocks/table/feed.js';
 import { TableFreeze } from '@itrocks/table/freeze.js';
 import { TableFreezeInheritBackground } from '@itrocks/table/freeze/inherit-background.js';
@@ -16,7 +18,10 @@ build('article[data-action="list"] > form > table.objects', table => {
         }
     });
     tableByElement(table, {
-        plugins: [TableFeed, TableFreeze, TableFreezeInheritBackground, TableFreezeInheritBorder, tableLink]
+        plugins: [
+            TableColumnReorder, TableColumnReorderFreeze, TableFeed, TableFreeze, TableFreezeInheritBackground,
+            TableFreezeInheritBorder, tableLink
+        ]
     });
     table.addEventListener('click', event => {
         const element = event.target;

package/cjs/list.html

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

package/list.css

@@ -1,3 +1,8 @@
+html.column-reorder,
+html.column-reorder * {
+  cursor: grabbing !important;
+}
+
 main > article[data-action=list] > header > .summary {
   padding: 13px 10px 12px;
   position: absolute;
@@ -31,6 +36,7 @@ table.objects tr td, table.objects tr th {
   border-bottom: 1px solid #d8d8d8;
   border-spacing: 0;
   padding: 0.6em;
+  white-space: nowrap;
 }
 table.objects tr td:last-child, table.objects tr th:last-child {
   border-right: 1px solid #d8d8d8;
@@ -38,6 +44,13 @@ table.objects tr td:last-child, table.objects tr th:last-child {
 table.objects tr.properties > .select > input[name=select] {
   display: none;
 }
+table.objects > * > tr > .column-reorder {
+  --column-reorder-tint: inset 0 0 0 100vmax rgb(0 0 0 / 2%);
+  box-shadow: var(--column-reorder-tint);
+}
+table.objects > * > tr > .column-reorder input {
+  box-shadow: var(--column-reorder-tint);
+}
 table.objects > tbody > tr > td > ul {
   display: block;
   margin: 0;
@@ -56,6 +69,9 @@ table.objects > tbody:first-child > tr:nth-child(even) > td {
 table.objects > tbody:first-child > tr:nth-child(odd) > td {
   background: #f8f8f8;
 }
+table.objects > thead > tr.properties > th {
+  user-select: none;
+}
 table.objects > thead > tr.properties > th[data-property] {
   cursor: pointer;
 }
@@ -103,7 +119,7 @@ table.objects > thead > tr.search > th > input:not([type=submit]) {
 }
 table.objects > thead > tr.search > th > input:focus {
   outline: none;
-  box-shadow: inset 0 0 0 2px Highlight;
+  box-shadow: inset 0 0 0 2px Highlight, var(--column-reorder-tint, 0 0 transparent);
 }
 table.objects > thead + tbody > tr:nth-child(even) > td {
   background: #f8f8f8;

package/package.json

@@ -69,5 +69,5 @@
 		"build:css": "sass --no-source-map src/list.scss:list.css && cp src/*.svg ./",
 		"build:front": "tsc -p src/front/tsconfig.json"
 	},
-	"version": "0.3.5"
+	"version": "0.4.1"
 }