1.0.260

fix(core): update
1.0.259
2024-01-22 01:26:13 +01:00 · 2024-01-22 01:26:13 +01:00 · 2024-01-22 01:11:29 +01:00 · 2024-01-22 01:11:28 +01:00 · 2024-01-22 00:59:26 +01:00 · 2024-01-22 00:59:25 +01:00
5 changed files with 122 additions and 40 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-catalog",
-  "version": "1.0.252",
+  "version": "1.0.260",
  "private": false,
  "description": "website for lossless.com",
  "main": "dist_ts_web/index.js",
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '1.0.252',
+  version: '1.0.260',
  description: 'website for lossless.com'
 }
--- a/ts_web/elements/dees-icon.ts
+++ b/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,
--- a/ts_web/elements/dees-simple-appdash.ts
+++ b/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')};
-        border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#333')};
+        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+        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>
--- a/ts_web/elements/dees-table.ts
+++ b/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,
  })
@ -169,9 +178,9 @@ export class DeesTable<T> extends DeesElement {
        display: block;
        width: 100%;
        min-height: 50px;
-        background: ${cssManager.bdTheme('#ffffff', '#333333')};
+        background: ${cssManager.bdTheme('#ffffff', '#222222')};
        border-radius: 3px;
-        border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff10')};
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
        overflow-x: auto;
        cursor: default;
@ -199,15 +208,20 @@ export class DeesTable<T> extends DeesElement {

      .headingSeparation {
        margin-top: 7px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#444444')};
      }

      .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 {
@ -219,9 +233,21 @@ export class DeesTable<T> extends DeesElement {
      }

      .searchGrid {
+        background: ${cssManager.bdTheme('#fff', '#111111')};
        display: grid;
        grid-gap: 16px;
        grid-template-columns: 1fr 200px;
+        margin-top: 16px;
+        padding: 0px 16px;
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff20')};
+        border-radius: 8px;
+      }
+
+      .searchGrid.hidden {
+        height: 0px;
+        opacity: 0;
+        overflow: hidden;
+        margin-top: 0px;
      }

      table,
@ -311,22 +337,20 @@ export class DeesTable<T> extends DeesElement {
        font-weight: inherit;
        padding: 0px 6px;
      }
-
+      .actionsContainer {
+        display: flex;
+        flex-direction: row;
+        height: 24px;
+        transform: translateY(-4px);
+        margin-left: -6px;
+      }
      .action {
        position: relative;
-        margin: -4px 0px;
        padding: 8px 10px;
        line-height: 24px;
        height: 32px;
        size: 16px;
-        display: inline-block;
        border-radius: 8px;
-        overflow: hidden;
-      }
-
-      .action:first-child {
-        margin-left: -6px;
-        width: min-content;
      }

      .action:hover {
@ -417,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=${`
@ -427,7 +451,8 @@ export class DeesTable<T> extends DeesElement {
              name: "john" AND age: 18
              \`\`\`
              
-            `}></dees-input-text>
+            `}
+          ></dees-input-text>
          <dees-input-multitoggle
            .label=${'search mode'}
            .options=${['table', 'data', 'server']}
@ -568,22 +593,28 @@ export class DeesTable<T> extends DeesElement {
                            return html`
                              <td>
                                <div class="innerCellContainer">
-                                  ${this.getActionsForType('inRow').map(
-                                    (actionArg) => html`<div
-                                      class="action"
-                                      @click=${() =>
-                                        actionArg.actionFunc({
-                                          item: itemArg,
-                                          table: this,
-                                        })}
-                                    >
-                                      ${actionArg.iconName
-                                        ? html`
-                                            <dees-icon .iconFA=${actionArg.iconName}></dees-icon>
-                                          `
-                                        : actionArg.name}
-                                    </div>`
-                                  )}
+                                  <div class="actionsContainer">
+                                    ${this.getActionsForType('inRow').map(
+                                      (actionArg) => html`
+                                        <div
+                                          class="action"
+                                          @click=${() =>
+                                            actionArg.actionFunc({
+                                              item: itemArg,
+                                              table: this,
+                                            })}
+                                        >
+                                          ${actionArg.iconName
+                                            ? html`
+                                                <dees-icon
+                                                  .iconFA=${actionArg.iconName}
+                                                ></dees-icon>
+                                              `
+                                            : actionArg.name}
+                                        </div>
+                                      `
+                                    )}
+                                  </div>
                                </div>
                              </td>
                            `;
@ -632,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() {
Author	SHA1	Message	Date
Philipp Kunz	b474b7986c	1.0.260	2024-01-22 01:26:13 +01:00
Philipp Kunz	98542252cb	fix(core): update	2024-01-22 01:26:13 +01:00
Philipp Kunz	0d78deadf2	1.0.259	2024-01-22 01:11:29 +01:00
Philipp Kunz	5108f47e56	fix(core): update	2024-01-22 01:11:28 +01:00
Philipp Kunz	7d4e5f2ca7	1.0.258	2024-01-22 00:59:26 +01:00
Philipp Kunz	c0ad0f4570	fix(core): update	2024-01-22 00:59:25 +01:00
Philipp Kunz	d56eb602a9	1.0.257	2024-01-21 22:37:39 +01:00
Philipp Kunz	f1c791eb12	fix(core): update	2024-01-21 22:37:39 +01:00
Philipp Kunz	e872188be7	1.0.256	2024-01-21 17:14:16 +01:00
Philipp Kunz	2d712e78b0	fix(core): update	2024-01-21 17:14:15 +01:00
Philipp Kunz	ebeecd0686	1.0.255	2024-01-21 14:25:03 +01:00
Philipp Kunz	1d09f994c6	fix(core): update	2024-01-21 14:25:02 +01:00
Philipp Kunz	686c3714fc	1.0.254	2024-01-21 14:14:57 +01:00
Philipp Kunz	e29086036c	fix(core): update	2024-01-21 14:14:57 +01:00
Philipp Kunz	78e24aa720	1.0.253	2024-01-21 13:57:46 +01:00
Philipp Kunz	7c8876c835	fix(core): update	2024-01-21 13:57:46 +01:00