fix(core): update

This commit is contained in:
Philipp Kunz 2023-10-24 14:18:03 +02:00
parent cd9b028e9b
commit 64074e37fc
5 changed files with 96 additions and 38 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.228', version: '1.0.229',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -1,12 +1,23 @@
import { html } from '@design.estate/dees-element'; import { html } from '@design.estate/dees-element';
export const demoFunc = () => html` export const demoFunc = () => html`
<style>
.demoContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background: #222;
}
</style>
<div class="demoContainer">
<dees-chips <dees-chips
selectionMode="none" selectionMode="none"
.selectableChips=${[ .selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' }, { key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' }, { key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' } { key: 'account3', value: 'Payment Account 3' },
]} ]}
></dees-chips> ></dees-chips>
<dees-chips <dees-chips
@ -14,7 +25,7 @@ export const demoFunc = () => html`
.selectableChips=${[ .selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' }, { key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' }, { key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' } { key: 'account3', value: 'Payment Account 3' },
]} ]}
></dees-chips> ></dees-chips>
<dees-chips <dees-chips
@ -22,7 +33,8 @@ export const demoFunc = () => html`
.selectableChips=${[ .selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' }, { key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' }, { key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' } { key: 'account3', value: 'Payment Account 3' },
]} ]}
></dees-chips> ></dees-chips>
</div>
`; `;

View File

@ -70,9 +70,10 @@ export class DeesChips extends DeesElement {
color: #fff; color: #fff;
border-radius: 40px; border-radius: 40px;
margin-right: 4px; margin-right: 4px;
margin-bottom: 8px; margin-bottom: 4px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
} }
.chip:hover { .chip:hover {

View File

@ -27,7 +27,42 @@ export class DeesContextmenu extends DeesElement {
public static demo = demoFunc public static demo = demoFunc
// STATIC // STATIC
// This will store all the accumulated menu items
public static contextMenuDeactivated = false;
public static accumulatedMenuItems: plugins.tsclass.website.IMenuItem[] = [];
// Add a global event listener for the right-click context menu
public static initializeGlobalListener() {
document.addEventListener('contextmenu', (event: MouseEvent) => {
if (this.contextMenuDeactivated) {
return;
}
event.preventDefault();
// Get the target element of the right-click
let target: EventTarget | null = event.target;
// Clear previously accumulated items
DeesContextmenu.accumulatedMenuItems = [];
// Traverse up the DOM tree to accumulate menu items
while (target) {
if ((target as any).getContextMenuItems) {
DeesContextmenu.accumulatedMenuItems.push(...(target as any).getContextMenuItems());
}
target = (target as Node).parentNode;
}
// Open the context menu with the accumulated items
DeesContextmenu.openContextMenuWithOptions(event, DeesContextmenu.accumulatedMenuItems);
});
}
// allows opening of a contextmenu with options
public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) { public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
if (this.contextMenuDeactivated) {
return;
}
eventArg.preventDefault(); eventArg.preventDefault();
eventArg.stopPropagation(); eventArg.stopPropagation();
const contextMenu = new DeesContextmenu(); const contextMenu = new DeesContextmenu();
@ -49,6 +84,7 @@ export class DeesContextmenu extends DeesElement {
contextMenu.style.transform = 'scale(1,1)'; contextMenu.style.transform = 'scale(1,1)';
} }
// INSTANCE
@property({ @property({
type: Array, type: Array,
}) })
@ -59,6 +95,9 @@ export class DeesContextmenu extends DeesElement {
super(); super();
} }
/**
* STATIC STYLES
*/
public static styles = [ public static styles = [
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
@ -115,10 +154,11 @@ export class DeesContextmenu extends DeesElement {
})} })}
${this.menuItems.length === 0 ? html` ${this.menuItems.length === 0 ? html`
<div class="menuitem" @click=${() => { <div class="menuitem" @click=${() => {
alert('No menu items...') DeesContextmenu.contextMenuDeactivated = true;
this.destroy();
}}> }}>
<dees-icon .iconFA=${'xmark'}></dees-icon <dees-icon .iconFA=${'xmark'}></dees-icon
>No menu item present... >Deactivate Contextmenu globally.
</div> </div>
` : html``} ` : html``}
</div> </div>
@ -144,3 +184,5 @@ export class DeesContextmenu extends DeesElement {
this.parentElement.removeChild(this); this.parentElement.removeChild(this);
} }
} }
DeesContextmenu.initializeGlobalListener();

View File

@ -61,8 +61,8 @@ export interface ITableAction<T = any> {
} }
export interface ITableActionDataArg<T> { export interface ITableActionDataArg<T> {
item: T, item: T;
table: DeesTable<T>, table: DeesTable<T>;
} }
export type TDisplayFunction<T = any> = (itemArg: T) => object; export type TDisplayFunction<T = any> = (itemArg: T) => object;
@ -396,6 +396,8 @@ export class DeesTable<T> extends DeesElement {
</div> </div>
<div class="headingSeparation"></div> <div class="headingSeparation"></div>
<dees-input-text></dees-input-text>
<!-- the actual table --> <!-- the actual table -->
<style></style> <style></style>
${this.data.length > 0 ${this.data.length > 0
@ -524,7 +526,8 @@ export class DeesTable<T> extends DeesElement {
${this.getActionsForType('inRow').map( ${this.getActionsForType('inRow').map(
(actionArg) => html`<div (actionArg) => html`<div
class="action" class="action"
@click=${() => actionArg.actionFunc({ @click=${() =>
actionArg.actionFunc({
item: itemArg, item: itemArg,
table: this, table: this,
})} })}
@ -584,8 +587,7 @@ export class DeesTable<T> extends DeesElement {
`; `;
} }
public async firstUpdated() { public async firstUpdated() {}
}
public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> { public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
super.updated(changedProperties); super.updated(changedProperties);
@ -609,7 +611,8 @@ export class DeesTable<T> extends DeesElement {
// Get computed width // Get computed width
const width = window.getComputedStyle(cell).width; const width = window.getComputedStyle(cell).width;
if (cell.textContent.includes('Actions')) { if (cell.textContent.includes('Actions')) {
const neededWidth = this.dataActions.filter(actionArg => actionArg.type.includes('inRow')).length * 35; const neededWidth =
this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 35;
cell.style.width = `${Math.max(neededWidth, 68)}px`; cell.style.width = `${Math.max(neededWidth, 68)}px`;
} else { } else {
cell.style.width = width; cell.style.width = width;
@ -620,7 +623,7 @@ export class DeesTable<T> extends DeesElement {
}); });
await done.promise; await done.promise;
} }
} };
if (cells[cells.length - 1].textContent.includes('Actions')) { if (cells[cells.length - 1].textContent.includes('Actions')) {
await handleColumnByIndex(cells.length - 1, true); await handleColumnByIndex(cells.length - 1, true);