@design.estate/dees-catalog 1.0.207 → 1.0.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.207",
+  "version": "1.0.209",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -15,8 +15,8 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.40",
-    "@design.estate/dees-element": "^2.0.27",
+    "@design.estate/dees-domtools": "^2.0.41",
+    "@design.estate/dees-element": "^2.0.29",
     "@design.estate/dees-wcctools": "^1.0.78",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
@@ -35,7 +35,7 @@
     "@gitzone/tswatch": "^2.0.7",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.6.0"
+    "@types/node": "^20.6.2"
   },
   "files": [
     "ts/**/*",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.207',
+  version: '1.0.209',
   description: 'website for lossless.com'
 }

package/ts_web/elements/dees-dataview-codebox.ts

@@ -67,6 +67,42 @@ export class DeesDataviewCodebox extends DeesElement {
           line-height: 24px;
         }
 
+        .appbar .macControls {
+          position: absolute;
+          top: 6px;
+          left: 20px;
+          width: 200px;
+          display: grid;
+          grid-template-columns: 24px 24px 24px;
+        }
+
+        .appbar .macControls div {
+          width: 12px;
+          height: 12px;
+          display: inline-block;
+          border-radius: 50%;
+          margin: 0px;
+          padding: 0px;
+          cursor: pointer;
+          background: #222222;
+        }
+
+        .appbar .macControls div.close {
+          background: #FF5F57;
+        }
+
+        .appbar .macControls div.toDock {
+          background: #FFBD2E;
+        }
+
+        .appbar .macControls div.minMax {
+          background: #27C93F;
+        }
+
+        .appbar .macControls div:hover {
+          background: #333333;
+        }
+
         .appbar .fileName {
           text-align: center;
         }
@@ -76,13 +112,15 @@ export class DeesDataviewCodebox extends DeesElement {
           background: #161616;
           border-top: 1px solid #222222;
           font-size: 12px;
-          color: #CCC;
+          color: #888;
           font-family: 'Hubot Sans', 'monospace';
           line-height: 24px;
+          text-align: right;
+          padding-right: 100px;
         }
 
         .languageLabel {
-          color: #fff;
+          color: #ccc;
           font-size: 12px;
           line-height: 24px;
           z-index: 10;
@@ -158,6 +196,11 @@ export class DeesDataviewCodebox extends DeesElement {
       </style>
       <div class="mainbox">
         <div class="appbar">
+          <div class="macControls">
+            <div class="close"></div>
+            <div class="toDock"></div>
+            <div class="minMax"></div>
+          </div>
           <div class="fileName">index.ts</div>
         </div>
         <div class="codegrid">

package/ts_web/elements/dees-table.ts

@@ -99,6 +99,11 @@ export class DeesTable<T> extends DeesElement {
   })
   public displayFunction: TDisplayFunction = (itemArg: T) => itemArg as any;
 
+  @property({
+    attribute: false,
+  })
+  public reverseDisplayFunction: (itemArg: any) => T = (itemArg: any) => itemArg as T;
+
   @property({
     type: Object,
   })
@@ -112,6 +117,8 @@ export class DeesTable<T> extends DeesElement {
   public files: File[] = [];
   public fileWeakMap = new WeakMap();
 
+  public itemChangeSubject = new domtools.plugins.smartrx.rxjs.Subject();
+
   constructor() {
     super();
   }
@@ -259,7 +266,7 @@ export class DeesTable<T> extends DeesElement {
         font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
-        padding: 0px 6px
+        padding: 0px 6px;
       }
 
       .action {
@@ -535,35 +542,34 @@ export class DeesTable<T> extends DeesElement {
     // Get the table element
     const table = this.shadowRoot.querySelector('table');
     if (!table) return;
-  
+
     // Create a colgroup if it doesn't exist
     let colgroup = table.querySelector('colgroup');
     if (!colgroup) {
       colgroup = document.createElement('colgroup');
       table.insertBefore(colgroup, table.firstChild);
     }
-  
+
     // Get the first row's cells to measure the widths
     const cells = table.rows[0].cells;
-  
+
     for (let i = 0; i < cells.length; i++) {
       const cell = cells[i];
-  
+
       // Get computed width
       const width = window.getComputedStyle(cell).width;
-  
+
       // Check if there's already a <col> for this cell
       let col = colgroup.children[i] as HTMLElement;
       if (!col) {
         col = document.createElement('col');
         colgroup.appendChild(col);
       }
-  
+
       // Set the width
       col.style.width = width;
     }
   }
-  
 
   getActionsForType(typeArg: ITableAction['type'][0]) {
     const actions: ITableAction[] = [];
@@ -574,22 +580,34 @@ export class DeesTable<T> extends DeesElement {
     return actions;
   }
 
-  handleCellEditing(event: Event, item: T, key: string) {
+  handleCellEditing(event: Event, itemArg: T, key: string) {
     const target = event.target as HTMLElement;
-
+    const transformedItem = this.displayFunction(itemArg);
+    const initialValue = (transformedItem[key] as unknown as string) || '';
     // Create an input element
     const input = document.createElement('input');
     input.type = 'text';
-    input.value = (item[key] as unknown as string) || '';
+    input.value = initialValue;
+
+    const blurInput = (blurArg = true, saveArg = false) => {
+      if (blurArg) {
+        input.blur();
+      }
+      if (saveArg) {
+        itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
+        target.innerHTML = input.value; // Update the cell's display
+      } else {
+        target.innerHTML = initialValue;
+      }
+    };
 
     // When the input loses focus or the Enter key is pressed, update the data
     input.addEventListener('blur', () => {
-      item[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
-      target.innerHTML = input.value; // Update the cell's display
+      blurInput(false, false);
     });
     input.addEventListener('keydown', (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
-        input.blur(); // This will trigger the blur event handler above
+        blurInput(true, true); // This will trigger the blur event handler above
       }
     });