1.0.260

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.255",
+  "version": "1.0.260",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

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

ts_web/elements/dees-icon.ts

@@ -52,6 +52,7 @@ import {
   faFileInvoiceDollar as faFileInvoiceDollarSolid,
   faGear as faGearSolid,
   faGrip as faGripSolid,
+  faMagnifyingGlass as faMagnifyingGlassSolid,
   faMessage as faMessageSolid,
   faMoneyCheckDollar as faMoneyCheckDollarSolid,
   faMugHot as faMugHotSolid,
@@ -97,6 +98,7 @@ export const faIcons = {
   fileInvoiceDoller: faFileInvoiceDollarSolid,
   gear: faGearSolid,
   grip: faGripSolid,
+  magnifyingGlass: faMagnifyingGlassSolid,
   message: faMessageRegular,
   messageSolid: faMessageSolid,
   moneyCheckDollar: faMoneyCheckDollarSolid,

ts_web/elements/dees-simple-appdash.ts

@@ -27,30 +27,54 @@ export class DeesSimpleAppDash extends DeesElement {
   @property()
   public name = 'Dees Simple Login';
 
+  @property()
+  public views: Array<{ name: string; icon: string; viewFunction: () => Promise<TemplateResult> }> = [];
+
   public static styles = [
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: ${cssManager.bdTheme('#333', '#ccc')};
         user-select: none;
       }
       .appbar {
-        position: absolute;
+        position: fixed;
         top: 0;
         height: 40px;
         width: 100%;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
+        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
-        border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#333')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#ffffff10')};
         font-size: 14px;
         line-height: 40px;
         font-family: 'Roboto', 'Inter', sans-serif;
         padding: 0px 16px;
+        z-index: 2;
+        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+        display: grid;
+        grid-template-columns: min-content 1fr auto;
       }
+
+      .appName {
+        white-space: nowrap;
+      }
+
+      .appActions {
+        display: flex;
+      }
+
+      .appActions .action {}
+      .appActions .action:hover {
+        color: ${cssManager.bdTheme('#000', '#fff')};
+      }
+
       .appcontent {
-        position: absolute;
+        z-index: 1;
+        position: fixed;
         top: 40px;
-        bottom: 0;
+        height: calc(100vh - 40px);
+        bottom: 0px;
         width: 100%;
+        overflow: auto;
         background: ${cssManager.bdTheme('#eeeeeb', '#000')};
       }
     `,
@@ -59,7 +83,13 @@ export class DeesSimpleAppDash extends DeesElement {
   public render(): TemplateResult {
     return html`
       <div class="appbar">
-        configvault v1.2.3
+        <div class="appName">${this.name}</div>
+        <div class="viewTabs"></div>
+        <div class="appActions">
+          <div class="action">
+            Logout
+          </div>
+        </div>
       </div>
       <div class="appcontent">
         <slot></slot>

ts_web/elements/dees-table.ts

@@ -117,12 +117,21 @@ export class DeesTable<T> extends DeesElement {
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
   // end dees-form compatibility -----------------------------------------
 
+  /**
+   * What does a row of data represent?
+   */
   @property({
     type: String,
     reflect: true,
   })
   public dataName: string;
 
+
+  @property({
+    type: Boolean,
+  })
+  searchable: boolean = true;
+
   @property({
     type: Array,
   })
@@ -203,11 +212,16 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .headerActions {
+        user-select: none;
+        display: flex;
+        flex-direction: row;
         margin-left: auto;
       }
       .headerAction {
         display: flex;
+        flex-direction: row;
         color: ${cssManager.bdTheme('#333', '#ccc')};
+        margin-left: 16px;
       }
 
       .headerAction:hover {
@@ -223,9 +237,17 @@ export class DeesTable<T> extends DeesElement {
         display: grid;
         grid-gap: 16px;
         grid-template-columns: 1fr 200px;
-        margin: 0px -16px;
+        margin-top: 16px;
         padding: 0px 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#fff', '#ffffff20')};
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff20')};
+        border-radius: 8px;
+      }
+
+      .searchGrid.hidden {
+        height: 0px;
+        opacity: 0;
+        overflow: hidden;
+        margin-top: 0px;
       }
 
       table,
@@ -315,10 +337,12 @@ export class DeesTable<T> extends DeesElement {
         font-weight: inherit;
         padding: 0px 6px;
       }
-      .actionContainer {
+      .actionsContainer {
+        display: flex;
+        flex-direction: row;
         height: 24px;
-        display: inline-block;
         transform: translateY(-4px);
+        margin-left: -6px;
       }
       .action {
         position: relative;
@@ -329,11 +353,6 @@ export class DeesTable<T> extends DeesElement {
         border-radius: 8px;
       }
 
-      .actionContainer:first-child {
-        margin-left: -6px;
-        width: min-content;
-      }
-
       .action:hover {
         background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
       }
@@ -422,7 +441,7 @@ export class DeesTable<T> extends DeesElement {
           </div>
         </div>
         <div class="headingSeparation"></div>
-        <div class="searchGrid">
+        <div class="searchGrid hidden">
           <dees-input-text
             .label=${'lucene syntax search'}
             .description=${`
@@ -574,24 +593,28 @@ export class DeesTable<T> extends DeesElement {
                             return html`
                               <td>
                                 <div class="innerCellContainer">
-                                  ${this.getActionsForType('inRow').map(
+                                  <div class="actionsContainer">
-                                    (actionArg) => html`<div class="actionContainer">
+                                    ${this.getActionsForType('inRow').map(
-                                      <div
+                                      (actionArg) => html`
-                                        class="action"
+                                        <div
-                                        @click=${() =>
+                                          class="action"
-                                          actionArg.actionFunc({
+                                          @click=${() =>
-                                            item: itemArg,
+                                            actionArg.actionFunc({
-                                            table: this,
+                                              item: itemArg,
-                                          })}
+                                              table: this,
-                                      >
+                                            })}
-                                        ${actionArg.iconName
+                                        >
-                                          ? html`
+                                          ${actionArg.iconName
-                                              <dees-icon .iconFA=${actionArg.iconName}></dees-icon>
+                                            ? html`
-                                            `
+                                                <dees-icon
-                                          : actionArg.name}
+                                                  .iconFA=${actionArg.iconName}
-                                      </div>
+                                                ></dees-icon>
-                                    </div>`
+                                              `
-                                  )}
+                                            : actionArg.name}
+                                        </div>
+                                      `
+                                    )}
+                                  </div>
                                 </div>
                               </td>
                             `;
@@ -640,11 +663,30 @@ export class DeesTable<T> extends DeesElement {
     `;
   }
 
-  public async firstUpdated() {}
+  public async firstUpdated() {
+    
+  }
 
   public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.updated(changedProperties);
     this.determineColumnWidths();
+    if (this.searchable) {
+      const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
+      if (!existing) {
+        this.dataActions.unshift({
+          name: 'Search',
+          iconName: 'magnifyingGlass',
+          type: ['header'],
+          actionFunc: async () => {
+            console.log('open search');
+            const searchGrid = this.shadowRoot.querySelector('.searchGrid');
+            searchGrid.classList.toggle('hidden');
+          }
+        });
+        console.log(this.dataActions);
+        this.requestUpdate();
+      };
+    }
   }
 
   public async determineColumnWidths() {