1.0.214

fix(core): update
1.0.213
2023-09-22 19:42:23 +02:00 · 2023-09-22 19:42:23 +02:00 · 2023-09-22 19:04:03 +02:00 · 2023-09-22 19:04:02 +02:00 · 2023-09-22 13:15:34 +02:00 · 2023-09-22 13:15:34 +02:00
7 changed files with 125 additions and 62 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-catalog",
-  "version": "1.0.209",
+  "version": "1.0.214",
  "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.209',
+  version: '1.0.214',
  description: 'website for lossless.com'
 }
--- a/ts_web/elements/dees-dataview-codebox.ts
+++ b/ts_web/elements/dees-dataview-codebox.ts
@ -1,4 +1,4 @@
-import  { demoFunc } from './dees-dataview-codebox.demo.js';
+import { demoFunc } from './dees-dataview-codebox.demo.js';
 import {
  DeesElement,
  html,
@ -6,6 +6,7 @@ import {
  type TemplateResult,
  property,
  state,
+  cssManager,
 } from '@design.estate/dees-element';

 import hlight from 'highlight.js';
@ -13,6 +14,7 @@ import hlight from 'highlight.js';
 import * as smartstring from '@push.rocks/smartstring';

 import * as domtools from '@design.estate/dees-domtools';
+import { DeesContextmenu } from './dees-contextmenu.js';

 declare global {
  interface HTMLElementTagNameMap {
@ -58,11 +60,11 @@ export class DeesDataviewCodebox extends DeesElement {
        }

        .appbar {
+          color: ${cssManager.bdTheme('#333', '#ccc')};
+          background: ${cssManager.bdTheme('#ffffff', '#161616')};
+          border-bottom: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
          height: 24px;
-          background: #161616;
-          border-bottom: 1px solid #222222;
          font-size: 12px;
-          color: #CCC;
          font-family: 'Hubot Sans', 'monospace';
          line-height: 24px;
        }
@ -88,15 +90,15 @@ export class DeesDataviewCodebox extends DeesElement {
        }

        .appbar .macControls div.close {
-          background: #FF5F57;
+          background: #ff5f57;
        }

        .appbar .macControls div.toDock {
-          background: #FFBD2E;
+          background: #ffbd2e;
        }

        .appbar .macControls div.minMax {
-          background: #27C93F;
+          background: #27c93f;
        }

        .appbar .macControls div:hover {
@ -108,11 +110,11 @@ export class DeesDataviewCodebox extends DeesElement {
        }

        .bottomBar {
+          color: ${cssManager.bdTheme('#333', '#ccc')};
+          background: ${cssManager.bdTheme('#ffffff', '#161616')};
+          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
          height: 24px;
-          background: #161616;
-          border-top: 1px solid #222222;
          font-size: 12px;
-          color: #888;
          font-family: 'Hubot Sans', 'monospace';
          line-height: 24px;
          text-align: right;
@ -120,7 +122,7 @@ export class DeesDataviewCodebox extends DeesElement {
        }

        .languageLabel {
-          color: #ccc;
+          color: ${cssManager.bdTheme('#333', '#ccc')};
          font-size: 12px;
          line-height: 24px;
          z-index: 10;
@ -143,7 +145,6 @@ export class DeesDataviewCodebox extends DeesElement {
        }

        .lineNumbers {
-          
          color: ${this.goBright ? '#acacac' : '#666666'};
          padding: 30px 16px 0px 0px;
          text-align: right;
@ -194,7 +195,20 @@ export class DeesDataviewCodebox extends DeesElement {
          color: ${this.goBright ? '#EF9300' : '#ffd765'};
        }
      </style>
-      <div class="mainbox">
+      <div
+        class="mainbox"
+        @contextmenu="${(eventArg) => {
+          DeesContextmenu.openContextMenuWithOptions(eventArg, [
+            {
+              name: 'About',
+              iconName: 'circleInfo',
+              action: async () => {
+                return null;
+              },
+            },
+          ]);
+        }}"
+      >
        <div class="appbar">
          <div class="macControls">
            <div class="close"></div>
--- a/ts_web/elements/dees-icon.demo.ts
+++ b/ts_web/elements/dees-icon.demo.ts
@ -0,0 +1,55 @@
+import { html } from '@design.estate/dees-element';
+
+import { faIcons } from './dees-icon.js';
+
+export const demoFunc = () => html`
+  <style>
+    .demoContainer {
+      
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      background: #111111;
+      padding: 10px; font-size: 30px;
+    }
+    dees-icon {
+      transition: color 0.02s;
+      color: #ffffff;
+    }
+    dees-icon:hover {
+      color: #e4002b;
+    }
+
+    .iconContainer {
+      display: block;
+      padding: 16px 16px 0px 16px;
+      border: 1px solid #333333;
+      margin-right: 8px;
+      margin-bottom: 8px;
+    }
+
+    .iconName {
+      font-size: 12px;
+      text-align: center;
+      color: #ccc;
+      background: #333333;
+      padding: 4px 8px;
+      padding-bottom: 4px;
+      margin-left: -16px;
+      margin-right: -16px;
+      margin-top: 16px;
+    }
+  </style>
+  
+    <div class="demoContainer">
+      ${Object.keys(faIcons).map(
+        (iconName) => html`
+          <div class="iconContainer">
+            <dees-icon .iconFA=${iconName as any}></dees-icon>
+            <div class="iconName">${iconName}</div>
+          </div>
+        `
+      )}
+    </div>
+  
+`;
--- a/ts_web/elements/dees-icon.ts
+++ b/ts_web/elements/dees-icon.ts
@ -29,6 +29,7 @@ import {
  faMessage as faMessageRegular,
  faPaste as faPasteRegular,
  faSun as faSunRegular,
+  faTrashCan as faTrashCanRegular,
 } from '@fortawesome/free-regular-svg-icons';
 import {
  faArrowRight as faArrowRightSolid,
@ -53,66 +54,57 @@ import {
  faMinus as faMinusSolid,
  faPaste as faPasteSolid,
  faPenToSquare as faPenToSquareSolid,
+  faPlus as faPlusSolid,
  faRss as faRssSolid,
  faUsers as faUsersSolid,
  faShare as faShareSolid,
  faSun as faSunSolid,
+  faTrash as faTrashSolid,
+  faTrashCan as faTrashCanSolid,
  faXmark as faXmarkSolid,
 } from '@fortawesome/free-solid-svg-icons';
+import { demoFunc } from './dees-icon.demo.js';

 export const faIcons = {
  // normal
  arrowRight: faArrowRightSolid,
  arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
-  arrowUpRightFromSquareSolid: faArrowUpRightFromSquareSolid,
  bell: faBellSolid,
-  bellSolid: faBellSolid,
  bug: faBugSolid,
-  bugSolid: faBugSolid,
  building: faBuildingSolid,
-  buildingSolid: faBuildingSolid,
  caretLeft: faCaretLeftSolid,
-  caretLeftSolid: faCaretLeftSolid,
  caretRight: faCaretRightSolid,
-  caretRightSolid: faCaretRightSolid,
  check: faCheckSolid,
-  checkSolid: faCheckSolid,
  circleInfo: faCircleInfoSolid,
-  circleInfoSolid: faCircleInfoSolid,
  circleCheck: faCircleCheckRegular,
  circleCheckSolid: faCircleCheckSolid,
  circleXmark: faCircleXmarkRegular,
  circleXmarkSolid: faCircleXmarkSolid,
  clockRotateLeft: faClockRotateLeftSolid,
-  clockRotateLeftSolid: faClockRotateLeftSolid,
  copy: faCopyRegular,
  copySolid: faCopySolid,
  desktop: faDesktopSolid,
-  desktopSolid: faDesktopSolid,
  eye: faEyeSolid,
-  eyeSolid: faEyeSolid,
  eyeSlash: faEyeSlashSolid,
-  eyeSlashSolid: faEyeSlashSolid,
  grip: faGripSolid,
-  gripSolid: faGripSolid,
  message: faMessageRegular,
  messageSolid: faMessageSolid,
  mugHot: faMugHotSolid,
-  mugHotSolid: faMugHotSolid,
  minus: faMinusSolid,
-  minusSolid: faMinusSolid,
  paste: faPasteRegular,
  pasteSolid: faPasteSolid,
  penToSquare: faPenToSquareSolid,
-  penToSquareSolid: faPenToSquareSolid,
+  plus: faPlusSolid,
  rss: faRssSolid,
-  rssSolid: faRssSolid,
  share: faShareSolid,
-  shareSolid: faShareSolid,
  sun: faSunRegular,
  sunSolid: faSunSolid,
+  trash: faTrashSolid,
+  trashSolid: faTrashSolid,
+  trashCan: faTrashCanRegular,
+  trashCanSolid: faTrashCanSolid,
+  users: faUsersSolid,
  xmark: faXmarkSolid,
-  xmarkSolid: faXmarkSolid,
  // brands
  facebook: faFacebook,
  google: faGoogle,
@ -122,7 +114,6 @@ export const faIcons = {
  slack: faSlackHash,
  tiktok: faTiktok,
  twitter: faTwitter,
-  users: faUsersSolid,
 };

 export type TIconKey = keyof typeof faIcons;
@ -135,24 +126,7 @@ declare global {

@customElement('dees-icon')
 export class DeesIcon extends DeesElement {
-  public static demo = () => html`
-    <dees-icon iconName="visibility"></dees-icon>
-    <div style="background: #fff; padding: 10px; font-size: 30px">
-      <style>
-        dees-icon {
-          transition: color 0.05s;
-        }
-        dees-icon:hover {
-          color: #e4002b;
-        }
-      </style>
-      <dees-icon .iconFA=${'messageSolid'}></dees-icon>
-      <dees-icon .iconFA=${'sun'}></dees-icon>
-      <dees-icon .iconFA=${'sunSolid'}></dees-icon>
-      <dees-icon .iconFA=${'facebook'}></dees-icon>
-      <dees-icon .iconFA=${'arrowUpRightFromSquare'}></dees-icon>
-    </div>
-  `;
+  public static demo = demoFunc;

  @property({
    type: String
--- a/ts_web/elements/dees-table.demo.ts
+++ b/ts_web/elements/dees-table.demo.ts
@ -58,8 +58,8 @@ export const demoFunc = () => html`
          iconName: 'bell',
          useTableBehaviour: 'upload',
          type: ['inRow'],
-          actionFunc: async (itemArg) => {
-            alert(itemArg.amount);
+          actionFunc: async (optionsArg) => {
+            alert(optionsArg.item.amount);
          },
        },
        {
@ -112,7 +112,7 @@ export const demoFunc = () => html`
          type: ['doubleClick', 'contextmenu'],
          iconName: 'eye',
          actionFunc: async (itemArg) => {
-            alert(itemArg.amount);
+            alert(itemArg.item.amount);
            return null;
          },
        }
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@ -57,7 +57,12 @@ export interface ITableAction<T = any> {
   * @param itemArg
   * @returns
   */
-  actionFunc: (itemArg: T) => Promise<any>;
+  actionFunc: (actionDataArg: ITableActionDataArg<T>) => Promise<any>;
+}
+
+export interface ITableActionDataArg<T> {
+  item: T,
+  dataArray: T[],
 }

 export type TDisplayFunction<T = any> = (itemArg: T) => object;
@ -339,7 +344,10 @@ export class DeesTable<T> extends DeesElement {
                  html`<div
                    class="headerAction"
                    @click=${() => {
-                      action.actionFunc(this.selectedDataRow);
+                      action.actionFunc({
+                        item: this.selectedDataRow,
+                        dataArray: this.data
+                      });
                    }}
                  >
                    ${action.iconName
@ -439,7 +447,10 @@ export class DeesTable<T> extends DeesElement {
                                name: action.name,
                                iconName: action.iconName as any,
                                action: async () => {
-                                  await action.actionFunc(itemArg);
+                                  await action.actionFunc({
+                                    item: itemArg,
+                                    dataArray: this.data
+                                  });
                                  return null;
                                },
                              };
@ -460,7 +471,10 @@ export class DeesTable<T> extends DeesElement {
                                    actionArg.type.includes('doubleClick')
                                  );
                                  if (wantedAction) {
-                                    wantedAction.actionFunc(itemArg);
+                                    wantedAction.actionFunc({
+                                      item: itemArg,
+                                      dataArray: this.data
+                                    });
                                  }
                                }
                              }}
@ -477,7 +491,10 @@ export class DeesTable<T> extends DeesElement {
                                  ${this.getActionsForType('inRow').map(
                                    (actionArg) => html`<div
                                      class="action"
-                                      @click=${() => actionArg.actionFunc(itemArg)}
+                                      @click=${() => actionArg.actionFunc({
+                                        item: itemArg,
+                                        dataArray: this.data
+                                      })}
                                    >
                                      ${actionArg.iconName
                                        ? html`
@ -513,7 +530,10 @@ export class DeesTable<T> extends DeesElement {
                  html`<div
                    class="footerAction"
                    @click=${() => {
-                      action.actionFunc(this.selectedDataRow);
+                      action.actionFunc({
+                        item: this.selectedDataRow,
+                        dataArray: this.data
+                      });
                    }}
                  >
                    ${action.iconName
Author	SHA1	Message	Date
Philipp Kunz	df7c5ebafc	1.0.214	2023-09-22 19:42:23 +02:00
Philipp Kunz	9927323a9d	fix(core): update	2023-09-22 19:42:23 +02:00
Philipp Kunz	66f3e66c8b	1.0.213	2023-09-22 19:04:03 +02:00
Philipp Kunz	c68b0c5090	fix(core): update	2023-09-22 19:04:02 +02:00
Philipp Kunz	53ac03507d	1.0.212	2023-09-22 13:15:34 +02:00
Philipp Kunz	0031b51bcf	fix(core): update	2023-09-22 13:15:34 +02:00
Philipp Kunz	67a8c6e591	1.0.211	2023-09-20 18:57:54 +02:00
Philipp Kunz	806390a068	fix(core): update	2023-09-20 18:57:54 +02:00
Philipp Kunz	508b18bc3b	1.0.210	2023-09-18 15:12:58 +02:00
Philipp Kunz	c2499ea507	fix(core): update	2023-09-18 15:12:57 +02:00