design.estate/dees-catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/00_commitinfo_data.ts
View File

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

18
ts_web/elements/dees-chips.demo.ts
View File

@ -1,12 +1,23 @@
import { html } from '@design.estate/dees-element';
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
selectionMode="none"
.selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' }
{ key: 'account3', value: 'Payment Account 3' },
]}
></dees-chips>
<dees-chips
@ -14,7 +25,7 @@ export const demoFunc = () => html`
.selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' }
{ key: 'account3', value: 'Payment Account 3' },
]}
></dees-chips>
<dees-chips
@ -22,7 +33,8 @@ export const demoFunc = () => html`
.selectableChips=${[
{ key: 'account1', value: 'Payment Account 1' },
{ key: 'account2', value: 'PaymentAccount2' },
{ key: 'account3', value: 'Payment Account 3' }
{ key: 'account3', value: 'Payment Account 3' },
]}
></dees-chips>
</div>
`;

3
ts_web/elements/dees-chips.ts
View File

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

46
ts_web/elements/dees-contextmenu.ts
View File

@ -27,7 +27,42 @@ export class DeesContextmenu extends DeesElement {
public static demo = demoFunc
// 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[]) {
if (this.contextMenuDeactivated) {
return;
}
eventArg.preventDefault();
eventArg.stopPropagation();
const contextMenu = new DeesContextmenu();
@ -49,6 +84,7 @@ export class DeesContextmenu extends DeesElement {
contextMenu.style.transform = 'scale(1,1)';
}
// INSTANCE
@property({
type: Array,
})
@ -59,6 +95,9 @@ export class DeesContextmenu extends DeesElement {
super();
}
/**
* STATIC STYLES
*/
public static styles = [
cssManager.defaultStyles,
css`
@ -115,10 +154,11 @@ export class DeesContextmenu extends DeesElement {
})}
${this.menuItems.length === 0 ? html`
<div class="menuitem" @click=${() => {
alert('No menu items...')
DeesContextmenu.contextMenuDeactivated = true;
this.destroy();
}}>
<dees-icon .iconFA=${'xmark'}></dees-icon
>No menu item present...
>Deactivate Contextmenu globally.
</div>
` : html``}
</div>
@ -144,3 +184,5 @@ export class DeesContextmenu extends DeesElement {
this.parentElement.removeChild(this);
}
}
DeesContextmenu.initializeGlobalListener();

17
ts_web/elements/dees-table.ts
View File

@ -61,8 +61,8 @@ export interface ITableAction<T = any> {
}
export interface ITableActionDataArg<T> {
item: T,
table: DeesTable<T>,
item: T;
table: DeesTable<T>;
}
export type TDisplayFunction<T = any> = (itemArg: T) => object;
@ -396,6 +396,8 @@ export class DeesTable<T> extends DeesElement {
</div>
<div class="headingSeparation"></div>
<dees-input-text></dees-input-text>
<!-- the actual table -->
<style></style>
${this.data.length > 0
@ -524,7 +526,8 @@ export class DeesTable<T> extends DeesElement {
${this.getActionsForType('inRow').map(
(actionArg) => html`<div
class="action"
@click=${() => actionArg.actionFunc({
@click=${() =>
actionArg.actionFunc({
item: itemArg,
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> {
super.updated(changedProperties);
@ -609,7 +611,8 @@ export class DeesTable<T> extends DeesElement {
// Get computed width
const width = window.getComputedStyle(cell).width;
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`;
} else {
cell.style.width = width;
@ -620,7 +623,7 @@ export class DeesTable<T> extends DeesElement {
});
await done.promise;
}
}
};
if (cells[cells.length - 1].textContent.includes('Actions')) {
await handleColumnByIndex(cells.length - 1, true);