fix(core): update

This commit is contained in:
Philipp Kunz 2023-09-12 13:42:55 +02:00
parent 1c0f5129a9
commit 9ca000cf06
4 changed files with 155 additions and 132 deletions

View File

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

View File

@ -0,0 +1,113 @@
import { type ITableAction } from './dees-table.js';
import * as plugins from './plugins.js';
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`
<style>
.demoWrapper {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
background: #000000;
}
</style>
<div class="demoWrapper">
<dees-table
heading1="Current Account Statement"
heading2="Bunq - Payment Account 2 - April 2021"
.data=${[
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
},
{
date: '2021-04-02',
amount: '165.65 €',
description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
},
{
date: '2021-04-03',
amount: '2999,00 €',
description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
},
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Office-Supplies - STAPLES BREMEN',
},
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Office-Supplies - STAPLES BREMEN',
},
]}
dataName="transactions"
.dataActions="${[
{
name: 'upload',
iconName: 'bell',
useTableBehaviour: 'upload',
type: ['inRow'],
actionFunc: async (itemArg: any) => {
alert(itemArg.amount);
},
},
{
name: 'visibility',
iconName: 'copy',
type: ['inRow'],
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {},
},
{
name: 'create new',
iconName: 'instagram',
type: ['header'],
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {},
},
{
name: 'to gallery',
iconName: 'message',
type: ['footer'],
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {},
},
{
name: 'copy',
iconName: 'copySolid',
type: ['contextmenu', 'inRow'],
action: async () => {
return null;
},
},
{
name: 'edit (from demo)',
iconName: 'penToSquare',
type: ['contextmenu'],
action: async () => {
return null;
},
},
{
name: 'paste',
iconName: 'pasteSolid',
type: ['contextmenu'],
action: async () => {
return null;
},
},
] as ITableAction[]}"
.displayFunction=${(itemArg) => {
return {
...itemArg,
onlyDisplayProp: 'onlyDisplay',
};
}}
>This is a slotted Text</dees-table
>
</div>
`;

View File

@ -1,3 +1,5 @@
import * as plugins from './plugins.js';
import { demoFunc } from './dees-table.demo.js';
import { import {
customElement, customElement,
html, html,
@ -12,7 +14,7 @@ import {
resolveExec, resolveExec,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { DeesContextmenu } from './dees-contextmenu.js' import { DeesContextmenu } from './dees-contextmenu.js';
import * as domtools from '@design.estate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
import { type TIconKey } from './dees-icon.js'; import { type TIconKey } from './dees-icon.js';
@ -24,7 +26,7 @@ declare global {
} }
// interfaces // interfaces
export interface IDataAction<T = any> { export interface ITableAction<T = any> {
name: string; name: string;
iconName: TIconKey; iconName: TIconKey;
/** /**
@ -35,7 +37,7 @@ export interface IDataAction<T = any> {
/** /**
* the type of the action * the type of the action
*/ */
type: 'inRow' | 'rightClick' | 'footer' | 'header' | 'preview' | 'keyCombination'; type: ('inRow' | 'contextmenu' | 'footer' | 'header' | 'preview' | 'keyCombination')[];
/** /**
* allows to check if the action is relevant for the given item * allows to check if the action is relevant for the given item
* @param itemArg * @param itemArg
@ -55,91 +57,7 @@ export type TDisplayFunction<T = any> = (itemArg: T) => object;
// the table implementation // the table implementation
@customElement('dees-table') @customElement('dees-table')
export class DeesTable<T> extends DeesElement { export class DeesTable<T> extends DeesElement {
public static demo = () => html` public static demo = demoFunc;
<style>
.demoWrapper {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
background: #000000;
}
</style>
<div class="demoWrapper">
<dees-table
heading1="Current Account Statement"
heading2="Bunq - Payment Account 2 - April 2021"
.data=${[
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
},
{
date: '2021-04-02',
amount: '165.65 €',
description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
},
{
date: '2021-04-03',
amount: '2999,00 €',
description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
},
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Office-Supplies - STAPLES BREMEN',
},
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Office-Supplies - STAPLES BREMEN',
},
]}
dataName="transactions"
.dataActions="${[
{
name: 'upload',
iconName: 'bell',
useTableBehaviour: 'upload',
type: 'inRow',
actionFunc: async (itemArg: any) => {
alert(itemArg.amount);
},
},
{
name: 'visibility',
iconName: 'copy',
type: 'inRow',
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {},
},
{
name: 'create new',
iconName: 'instagram',
type: 'header',
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {},
},
{
name: 'to gallery',
iconName: 'message',
type: 'footer',
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {},
},
] as IDataAction[]}"
.displayFunction=${(itemArg) => {
return {
...itemArg,
onlyDisplayProp: 'onlyDisplay',
};
}}
>This is a slotted Text</dees-table
>
</div>
`;
// INSTANCE // INSTANCE
@property({ @property({
@ -166,7 +84,7 @@ export class DeesTable<T> extends DeesElement {
@property({ @property({
type: Array, type: Array,
}) })
public dataActions: IDataAction[] = []; public dataActions: ITableAction[] = [];
@property({ @property({
attribute: false, attribute: false,
@ -367,7 +285,7 @@ export class DeesTable<T> extends DeesElement {
${resolveExec(async () => { ${resolveExec(async () => {
const resultArray: TemplateResult[] = []; const resultArray: TemplateResult[] = [];
for (const action of this.dataActions) { for (const action of this.dataActions) {
if (action.type !== 'header') continue; if (!action.type.includes('header')) continue;
resultArray.push( resultArray.push(
html`<div html`<div
class="headerAction" class="headerAction"
@ -465,28 +383,17 @@ export class DeesTable<T> extends DeesElement {
} }
}} }}
@contextmenu=${async (eventArg: MouseEvent) => { @contextmenu=${async (eventArg: MouseEvent) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, [ DeesContextmenu.openContextMenuWithOptions(eventArg, this.getActionsForType('contextmenu').map(action => {
{ const menuItem: plugins.tsclass.website.IMenuItem = {
name: 'copy', name: action.name,
iconName: 'copySolid', iconName: action.iconName as any,
action: async () => { action: async () => {
await action.actionFunc(itemArg);
return null; return null;
}, }
}, }
{ return menuItem;
name: 'edit', }));
iconName: 'penToSquare',
action: async () => {
return null;
},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {
return null;
},
},
])
}} }}
class="${itemArg === this.selectedDataRow ? 'selected' : ''}" class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
> >
@ -502,25 +409,18 @@ export class DeesTable<T> extends DeesElement {
return html` return html`
<td> <td>
<div class="innerCellContainer"> <div class="innerCellContainer">
${(() => { ${this.getActionsForType('inRow').map(
const actions: TemplateResult[] = []; (actionArg) => html`<div
for (const action of this.dataActions) { class="action"
if (action.type !== 'inRow') continue; @click=${() => actionArg.actionFunc(itemArg)}
actions.push( >
html`<div ${actionArg.iconName
class="action" ? html`
@click=${() => action.actionFunc(itemArg)} <dees-icon .iconFA=${actionArg.iconName}></dees-icon>
> `
${action.iconName : actionArg.name}
? html` </div>`
<dees-icon .iconFA=${action.iconName}></dees-icon> )}
`
: action.name}
</div>`
);
}
return actions;
})()}
</div> </div>
</td> </td>
`; `;
@ -543,7 +443,7 @@ export class DeesTable<T> extends DeesElement {
${resolveExec(async () => { ${resolveExec(async () => {
const resultArray: TemplateResult[] = []; const resultArray: TemplateResult[] = [];
for (const action of this.dataActions) { for (const action of this.dataActions) {
if (action.type !== 'footer') continue; if (!action.type.includes('footer')) continue;
resultArray.push( resultArray.push(
html`<div html`<div
class="footerAction" class="footerAction"
@ -567,4 +467,13 @@ export class DeesTable<T> extends DeesElement {
} }
public async firstUpdated() {} public async firstUpdated() {}
getActionsForType(typeArg: ITableAction['type'][0]) {
const actions: ITableAction[] = [];
for (const action of this.dataActions) {
if (!action.type.includes(typeArg)) continue;
actions.push(action);
}
return actions;
}
} }

View File

@ -5,7 +5,8 @@
"target": "ES2022", "target": "ES2022",
"module": "ES2022", "module": "ES2022",
"moduleResolution": "nodenext", "moduleResolution": "nodenext",
"esModuleInterop": true "esModuleInterop": true,
"verbatimModuleSyntax": true
}, },
"exclude": [ "exclude": [
"dist_*/**/*.d.ts" "dist_*/**/*.d.ts"