@design.estate/dees-catalog 1.0.189 → 1.0.191

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist_bundle/bundle.js +144 -146
  2. package/dist_bundle/bundle.js.map +4 -4
  3. package/dist_ts_web/00_commitinfo_data.js +1 -1
  4. package/dist_ts_web/elements/dees-table.d.ts +4 -3
  5. package/dist_ts_web/elements/dees-table.demo.d.ts +1 -0
  6. package/dist_ts_web/elements/dees-table.demo.js +113 -0
  7. package/dist_ts_web/elements/dees-table.js +34 -126
  8. package/dist_watch/bundle.js +148 -132
  9. package/dist_watch/bundle.js.map +4 -4
  10. package/package.json +3 -3
  11. package/ts_web/00_commitinfo_data.ts +1 -1
  12. package/ts_web/elements/dees-table.demo.ts +113 -0
  13. package/ts_web/elements/dees-table.ts +39 -130
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@design.estate/dees-catalog",
3
- "version": "1.0.189",
3
+ "version": "1.0.191",
4
4
  "private": false,
5
5
  "description": "website for lossless.com",
6
6
  "main": "dist_ts_web/index.js",
@@ -15,7 +15,7 @@
15
15
  "author": "Lossless GmbH",
16
16
  "license": "MIT",
17
17
  "dependencies": {
18
- "@design.estate/dees-domtools": "^2.0.39",
18
+ "@design.estate/dees-domtools": "^2.0.40",
19
19
  "@design.estate/dees-element": "^2.0.27",
20
20
  "@design.estate/dees-wcctools": "^1.0.78",
21
21
  "@fortawesome/fontawesome-svg-core": "^6.4.2",
@@ -35,7 +35,7 @@
35
35
  "@gitzone/tswatch": "^2.0.7",
36
36
  "@push.rocks/projectinfo": "^5.0.2",
37
37
  "@push.rocks/tapbundle": "^5.0.15",
38
- "@types/node": "^20.5.9"
38
+ "@types/node": "^20.6.0"
39
39
  },
40
40
  "files": [
41
41
  "ts/**/*",
package/ts_web/00_commitinfo_data.ts CHANGED
@@ -3,6 +3,6 @@
3
3
  */
4
4
  export const commitinfo = {
5
5
  name: '@design.estate/dees-catalog',
6
- version: '1.0.189',
6
+ version: '1.0.191',
7
7
  description: 'website for lossless.com'
8
8
  }
package/ts_web/elements/dees-table.demo.ts ADDED
@@ -0,0 +1,113 @@
1
+ import { type ITableAction } from './dees-table.js';
2
+ import * as plugins from './plugins.js';
3
+ import { html } from '@design.estate/dees-element';
4
+
5
+ export const demoFunc = () => html`
6
+ <style>
7
+ .demoWrapper {
8
+ box-sizing: border-box;
9
+ position: absolute;
10
+ width: 100%;
11
+ height: 100%;
12
+ padding: 20px;
13
+ background: #000000;
14
+ }
15
+ </style>
16
+ <div class="demoWrapper">
17
+ <dees-table
18
+ heading1="Current Account Statement"
19
+ heading2="Bunq - Payment Account 2 - April 2021"
20
+ .data=${[
21
+ {
22
+ date: '2021-04-01',
23
+ amount: '2464.65 €',
24
+ description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
25
+ },
26
+ {
27
+ date: '2021-04-02',
28
+ amount: '165.65 €',
29
+ description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
30
+ },
31
+ {
32
+ date: '2021-04-03',
33
+ amount: '2999,00 €',
34
+ description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
35
+ },
36
+ {
37
+ date: '2021-04-01',
38
+ amount: '2464.65 €',
39
+ description: 'Office-Supplies - STAPLES BREMEN',
40
+ },
41
+ {
42
+ date: '2021-04-01',
43
+ amount: '2464.65 €',
44
+ description: 'Office-Supplies - STAPLES BREMEN',
45
+ },
46
+ ]}
47
+ dataName="transactions"
48
+ .dataActions="${[
49
+ {
50
+ name: 'upload',
51
+ iconName: 'bell',
52
+ useTableBehaviour: 'upload',
53
+ type: ['inRow'],
54
+ actionFunc: async (itemArg: any) => {
55
+ alert(itemArg.amount);
56
+ },
57
+ },
58
+ {
59
+ name: 'visibility',
60
+ iconName: 'copy',
61
+ type: ['inRow'],
62
+ useTableBehaviour: 'preview',
63
+ actionFunc: async (itemArg: any) => {},
64
+ },
65
+ {
66
+ name: 'create new',
67
+ iconName: 'instagram',
68
+ type: ['header'],
69
+ useTableBehaviour: 'preview',
70
+ actionFunc: async (itemArg: any) => {},
71
+ },
72
+ {
73
+ name: 'to gallery',
74
+ iconName: 'message',
75
+ type: ['footer'],
76
+ useTableBehaviour: 'preview',
77
+ actionFunc: async (itemArg: any) => {},
78
+ },
79
+ {
80
+ name: 'copy',
81
+ iconName: 'copySolid',
82
+ type: ['contextmenu', 'inRow'],
83
+ action: async () => {
84
+ return null;
85
+ },
86
+ },
87
+ {
88
+ name: 'edit (from demo)',
89
+ iconName: 'penToSquare',
90
+ type: ['contextmenu'],
91
+ action: async () => {
92
+ return null;
93
+ },
94
+ },
95
+ {
96
+ name: 'paste',
97
+ iconName: 'pasteSolid',
98
+ type: ['contextmenu'],
99
+ action: async () => {
100
+ return null;
101
+ },
102
+ },
103
+ ] as ITableAction[]}"
104
+ .displayFunction=${(itemArg) => {
105
+ return {
106
+ ...itemArg,
107
+ onlyDisplayProp: 'onlyDisplay',
108
+ };
109
+ }}
110
+ >This is a slotted Text</dees-table
111
+ >
112
+ </div>
113
+ `;
package/ts_web/elements/dees-table.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import * as plugins from './plugins.js';
2
+ import { demoFunc } from './dees-table.demo.js';
1
3
  import {
2
4
  customElement,
3
5
  html,
@@ -12,7 +14,7 @@ import {
12
14
  resolveExec,
13
15
  } from '@design.estate/dees-element';
14
16
 
15
- import { DeesContextmenu } from './dees-contextmenu.js'
17
+ import { DeesContextmenu } from './dees-contextmenu.js';
16
18
 
17
19
  import * as domtools from '@design.estate/dees-domtools';
18
20
  import { type TIconKey } from './dees-icon.js';
@@ -24,7 +26,7 @@ declare global {
24
26
  }
25
27
 
26
28
  // interfaces
27
- export interface IDataAction<T = any> {
29
+ export interface ITableAction<T = any> {
28
30
  name: string;
29
31
  iconName: TIconKey;
30
32
  /**
@@ -35,7 +37,7 @@ export interface IDataAction<T = any> {
35
37
  /**
36
38
  * the type of the action
37
39
  */
38
- type: 'inRow' | 'rightClick' | 'footer' | 'header' | 'preview' | 'keyCombination';
40
+ type: ('inRow' | 'contextmenu' | 'footer' | 'header' | 'preview' | 'keyCombination')[];
39
41
  /**
40
42
  * allows to check if the action is relevant for the given item
41
43
  * @param itemArg
@@ -55,91 +57,7 @@ export type TDisplayFunction<T = any> = (itemArg: T) => object;
55
57
  // the table implementation
56
58
  @customElement('dees-table')
57
59
  export class DeesTable<T> extends DeesElement {
58
- public static demo = () => html`
59
- <style>
60
- .demoWrapper {
61
- box-sizing: border-box;
62
- position: absolute;
63
- width: 100%;
64
- height: 100%;
65
- padding: 20px;
66
- background: #000000;
67
- }
68
- </style>
69
- <div class="demoWrapper">
70
- <dees-table
71
- heading1="Current Account Statement"
72
- heading2="Bunq - Payment Account 2 - April 2021"
73
- .data=${[
74
- {
75
- date: '2021-04-01',
76
- amount: '2464.65 €',
77
- description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
78
- },
79
- {
80
- date: '2021-04-02',
81
- amount: '165.65 €',
82
- description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
83
- },
84
- {
85
- date: '2021-04-03',
86
- amount: '2999,00 €',
87
- description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
88
- },
89
- {
90
- date: '2021-04-01',
91
- amount: '2464.65 €',
92
- description: 'Office-Supplies - STAPLES BREMEN',
93
- },
94
- {
95
- date: '2021-04-01',
96
- amount: '2464.65 €',
97
- description: 'Office-Supplies - STAPLES BREMEN',
98
- },
99
- ]}
100
- dataName="transactions"
101
- .dataActions="${[
102
- {
103
- name: 'upload',
104
- iconName: 'bell',
105
- useTableBehaviour: 'upload',
106
- type: 'inRow',
107
- actionFunc: async (itemArg: any) => {
108
- alert(itemArg.amount);
109
- },
110
- },
111
- {
112
- name: 'visibility',
113
- iconName: 'copy',
114
- type: 'inRow',
115
- useTableBehaviour: 'preview',
116
- actionFunc: async (itemArg: any) => {},
117
- },
118
- {
119
- name: 'create new',
120
- iconName: 'instagram',
121
- type: 'header',
122
- useTableBehaviour: 'preview',
123
- actionFunc: async (itemArg: any) => {},
124
- },
125
- {
126
- name: 'to gallery',
127
- iconName: 'message',
128
- type: 'footer',
129
- useTableBehaviour: 'preview',
130
- actionFunc: async (itemArg: any) => {},
131
- },
132
- ] as IDataAction[]}"
133
- .displayFunction=${(itemArg) => {
134
- return {
135
- ...itemArg,
136
- onlyDisplayProp: 'onlyDisplay',
137
- };
138
- }}
139
- >This is a slotted Text</dees-table
140
- >
141
- </div>
142
- `;
60
+ public static demo = demoFunc;
143
61
 
144
62
  // INSTANCE
145
63
  @property({
@@ -166,7 +84,7 @@ export class DeesTable<T> extends DeesElement {
166
84
  @property({
167
85
  type: Array,
168
86
  })
169
- public dataActions: IDataAction[] = [];
87
+ public dataActions: ITableAction[] = [];
170
88
 
171
89
  @property({
172
90
  attribute: false,
@@ -367,7 +285,7 @@ export class DeesTable<T> extends DeesElement {
367
285
  ${resolveExec(async () => {
368
286
  const resultArray: TemplateResult[] = [];
369
287
  for (const action of this.dataActions) {
370
- if (action.type !== 'header') continue;
288
+ if (!action.type.includes('header')) continue;
371
289
  resultArray.push(
372
290
  html`<div
373
291
  class="headerAction"
@@ -465,28 +383,17 @@ export class DeesTable<T> extends DeesElement {
465
383
  }
466
384
  }}
467
385
  @contextmenu=${async (eventArg: MouseEvent) => {
468
- DeesContextmenu.openContextMenuWithOptions(eventArg, [
469
- {
470
- name: 'copy',
471
- iconName: 'copySolid',
472
- action: async () => {
473
- return null;
474
- },
475
- },
476
- {
477
- name: 'edit',
478
- iconName: 'penToSquare',
386
+ DeesContextmenu.openContextMenuWithOptions(eventArg, this.getActionsForType('contextmenu').map(action => {
387
+ const menuItem: plugins.tsclass.website.IMenuItem = {
388
+ name: action.name,
389
+ iconName: action.iconName as any,
479
390
  action: async () => {
391
+ await action.actionFunc(itemArg);
480
392
  return null;
481
- },
482
- },{
483
- name: 'paste',
484
- iconName: 'pasteSolid',
485
- action: async () => {
486
- return null;
487
- },
488
- },
489
- ])
393
+ }
394
+ }
395
+ return menuItem;
396
+ }));
490
397
  }}
491
398
  class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
492
399
  >
@@ -502,25 +409,18 @@ export class DeesTable<T> extends DeesElement {
502
409
  return html`
503
410
  <td>
504
411
  <div class="innerCellContainer">
505
- ${(() => {
506
- const actions: TemplateResult[] = [];
507
- for (const action of this.dataActions) {
508
- if (action.type !== 'inRow') continue;
509
- actions.push(
510
- html`<div
511
- class="action"
512
- @click=${() => action.actionFunc(itemArg)}
513
- >
514
- ${action.iconName
515
- ? html`
516
- <dees-icon .iconFA=${action.iconName}></dees-icon>
517
- `
518
- : action.name}
519
- </div>`
520
- );
521
- }
522
- return actions;
523
- })()}
412
+ ${this.getActionsForType('inRow').map(
413
+ (actionArg) => html`<div
414
+ class="action"
415
+ @click=${() => actionArg.actionFunc(itemArg)}
416
+ >
417
+ ${actionArg.iconName
418
+ ? html`
419
+ <dees-icon .iconFA=${actionArg.iconName}></dees-icon>
420
+ `
421
+ : actionArg.name}
422
+ </div>`
423
+ )}
524
424
  </div>
525
425
  </td>
526
426
  `;
@@ -543,7 +443,7 @@ export class DeesTable<T> extends DeesElement {
543
443
  ${resolveExec(async () => {
544
444
  const resultArray: TemplateResult[] = [];
545
445
  for (const action of this.dataActions) {
546
- if (action.type !== 'footer') continue;
446
+ if (!action.type.includes('footer')) continue;
547
447
  resultArray.push(
548
448
  html`<div
549
449
  class="footerAction"
@@ -567,4 +467,13 @@ export class DeesTable<T> extends DeesElement {
567
467
  }
568
468
 
569
469
  public async firstUpdated() {}
470
+
471
+ getActionsForType(typeArg: ITableAction['type'][0]) {
472
+ const actions: ITableAction[] = [];
473
+ for (const action of this.dataActions) {
474
+ if (!action.type.includes(typeArg)) continue;
475
+ actions.push(action);
476
+ }
477
+ return actions;
478
+ }
570
479
  }