fix(core): update
This commit is contained in:
parent
1c0f5129a9
commit
9ca000cf06
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '1.0.189',
|
||||
version: '1.0.190',
|
||||
description: 'website for lossless.com'
|
||||
}
|
||||
|
||||
113
ts_web/elements/dees-table.demo.ts
Normal file
113
ts_web/elements/dees-table.demo.ts
Normal 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>
|
||||
`;
|
||||
@ -1,3 +1,5 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import { demoFunc } from './dees-table.demo.js';
|
||||
import {
|
||||
customElement,
|
||||
html,
|
||||
@ -12,7 +14,7 @@ import {
|
||||
resolveExec,
|
||||
} 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 { type TIconKey } from './dees-icon.js';
|
||||
@ -24,7 +26,7 @@ declare global {
|
||||
}
|
||||
|
||||
// interfaces
|
||||
export interface IDataAction<T = any> {
|
||||
export interface ITableAction<T = any> {
|
||||
name: string;
|
||||
iconName: TIconKey;
|
||||
/**
|
||||
@ -35,7 +37,7 @@ export interface IDataAction<T = any> {
|
||||
/**
|
||||
* 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
|
||||
* @param itemArg
|
||||
@ -55,91 +57,7 @@ export type TDisplayFunction<T = any> = (itemArg: T) => object;
|
||||
// the table implementation
|
||||
@customElement('dees-table')
|
||||
export class DeesTable<T> extends DeesElement {
|
||||
public static demo = () => 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) => {},
|
||||
},
|
||||
] as IDataAction[]}"
|
||||
.displayFunction=${(itemArg) => {
|
||||
return {
|
||||
...itemArg,
|
||||
onlyDisplayProp: 'onlyDisplay',
|
||||
};
|
||||
}}
|
||||
>This is a slotted Text</dees-table
|
||||
>
|
||||
</div>
|
||||
`;
|
||||
public static demo = demoFunc;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
@ -166,7 +84,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public dataActions: IDataAction[] = [];
|
||||
public dataActions: ITableAction[] = [];
|
||||
|
||||
@property({
|
||||
attribute: false,
|
||||
@ -367,7 +285,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
${resolveExec(async () => {
|
||||
const resultArray: TemplateResult[] = [];
|
||||
for (const action of this.dataActions) {
|
||||
if (action.type !== 'header') continue;
|
||||
if (!action.type.includes('header')) continue;
|
||||
resultArray.push(
|
||||
html`<div
|
||||
class="headerAction"
|
||||
@ -465,28 +383,17 @@ export class DeesTable<T> extends DeesElement {
|
||||
}
|
||||
}}
|
||||
@contextmenu=${async (eventArg: MouseEvent) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'copy',
|
||||
iconName: 'copySolid',
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, this.getActionsForType('contextmenu').map(action => {
|
||||
const menuItem: plugins.tsclass.website.IMenuItem = {
|
||||
name: action.name,
|
||||
iconName: action.iconName as any,
|
||||
action: async () => {
|
||||
await action.actionFunc(itemArg);
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
iconName: 'penToSquare',
|
||||
action: async () => {
|
||||
return null;
|
||||
},
|
||||
},{
|
||||
name: 'paste',
|
||||
iconName: 'pasteSolid',
|
||||
action: async () => {
|
||||
return null;
|
||||
},
|
||||
},
|
||||
])
|
||||
}
|
||||
}
|
||||
return menuItem;
|
||||
}));
|
||||
}}
|
||||
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
|
||||
>
|
||||
@ -502,25 +409,18 @@ export class DeesTable<T> extends DeesElement {
|
||||
return html`
|
||||
<td>
|
||||
<div class="innerCellContainer">
|
||||
${(() => {
|
||||
const actions: TemplateResult[] = [];
|
||||
for (const action of this.dataActions) {
|
||||
if (action.type !== 'inRow') continue;
|
||||
actions.push(
|
||||
html`<div
|
||||
class="action"
|
||||
@click=${() => action.actionFunc(itemArg)}
|
||||
>
|
||||
${action.iconName
|
||||
? html`
|
||||
<dees-icon .iconFA=${action.iconName}></dees-icon>
|
||||
`
|
||||
: action.name}
|
||||
</div>`
|
||||
);
|
||||
}
|
||||
return actions;
|
||||
})()}
|
||||
${this.getActionsForType('inRow').map(
|
||||
(actionArg) => html`<div
|
||||
class="action"
|
||||
@click=${() => actionArg.actionFunc(itemArg)}
|
||||
>
|
||||
${actionArg.iconName
|
||||
? html`
|
||||
<dees-icon .iconFA=${actionArg.iconName}></dees-icon>
|
||||
`
|
||||
: actionArg.name}
|
||||
</div>`
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
`;
|
||||
@ -543,7 +443,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
${resolveExec(async () => {
|
||||
const resultArray: TemplateResult[] = [];
|
||||
for (const action of this.dataActions) {
|
||||
if (action.type !== 'footer') continue;
|
||||
if (!action.type.includes('footer')) continue;
|
||||
resultArray.push(
|
||||
html`<div
|
||||
class="footerAction"
|
||||
@ -567,4 +467,13 @@ export class DeesTable<T> extends DeesElement {
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"moduleResolution": "nodenext",
|
||||
"esModuleInterop": true
|
||||
"esModuleInterop": true,
|
||||
"verbatimModuleSyntax": true
|
||||
},
|
||||
"exclude": [
|
||||
"dist_*/**/*.d.ts"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user