fix(core): update
This commit is contained in:
parent
462df2b648
commit
cfd48de885
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '1.0.202',
|
||||
version: '1.0.203',
|
||||
description: 'website for lossless.com'
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@ export const demoFunc = () => html`
|
||||
<dees-table
|
||||
heading1="Current Account Statement"
|
||||
heading2="Bunq - Payment Account 2 - April 2021"
|
||||
.editableFields="${['description']}"
|
||||
.data=${[
|
||||
{
|
||||
date: '2021-04-01',
|
||||
|
||||
@ -37,7 +37,15 @@ export interface ITableAction<T = any> {
|
||||
/**
|
||||
* the type of the action
|
||||
*/
|
||||
type: ('inRow' | 'contextmenu' | 'doubleClick' | 'footer' | 'header' | 'preview' | 'keyCombination')[];
|
||||
type: (
|
||||
| 'inRow'
|
||||
| 'contextmenu'
|
||||
| 'doubleClick'
|
||||
| 'footer'
|
||||
| 'header'
|
||||
| 'preview'
|
||||
| 'keyCombination'
|
||||
)[];
|
||||
/**
|
||||
* allows to check if the action is relevant for the given item
|
||||
* @param itemArg
|
||||
@ -96,6 +104,11 @@ export class DeesTable<T> extends DeesElement {
|
||||
})
|
||||
public selectedDataRow: T;
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public editableFields: string[] = [];
|
||||
|
||||
public files: File[] = [];
|
||||
public fileWeakMap = new WeakMap();
|
||||
|
||||
@ -185,7 +198,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
tr:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
tr:hover .innerCellContainer {
|
||||
tr:hover td {
|
||||
background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
|
||||
}
|
||||
tr:first-child:hover {
|
||||
@ -194,7 +207,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
tr:first-child:hover .innerCellContainer {
|
||||
background: none;
|
||||
}
|
||||
tr.selected .innerCellContainer {
|
||||
tr.selected td {
|
||||
background: ${cssManager.bdTheme('#22222220', '#ffffff40')};
|
||||
}
|
||||
th {
|
||||
@ -202,11 +215,17 @@ export class DeesTable<T> extends DeesElement {
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 3px 0px;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
|
||||
}
|
||||
.innerCellContainer {
|
||||
min-height: 36px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
line-height: 24px;
|
||||
}
|
||||
th:first-child .innerCellContainer,
|
||||
td:first-child .innerCellContainer {
|
||||
@ -220,6 +239,23 @@ export class DeesTable<T> extends DeesElement {
|
||||
td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
td input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
border: 2px solid #fa6101;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
background: #00000060;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
padding: 0px 6px
|
||||
}
|
||||
|
||||
.action {
|
||||
margin: -8px 0px;
|
||||
@ -383,27 +419,39 @@ export class DeesTable<T> extends DeesElement {
|
||||
}
|
||||
}}
|
||||
@contextmenu=${async (eventArg: MouseEvent) => {
|
||||
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;
|
||||
}
|
||||
}
|
||||
return menuItem;
|
||||
}));
|
||||
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;
|
||||
},
|
||||
};
|
||||
return menuItem;
|
||||
})
|
||||
);
|
||||
}}
|
||||
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
|
||||
>
|
||||
${headings.map(
|
||||
(headingArg) => html`
|
||||
<td @dblclick=${() => {
|
||||
const wantedAction = this.dataActions.find((actionArg) => actionArg.type.includes('doubleClick'));
|
||||
if (!wantedAction) return;
|
||||
wantedAction.actionFunc(itemArg);
|
||||
}}>
|
||||
<td
|
||||
@dblclick=${(e: Event) => {
|
||||
if (this.editableFields.includes(headingArg)) {
|
||||
this.handleCellEditing(e, itemArg, headingArg);
|
||||
} else {
|
||||
const wantedAction = this.dataActions.find((actionArg) =>
|
||||
actionArg.type.includes('doubleClick')
|
||||
);
|
||||
if (wantedAction) {
|
||||
wantedAction.actionFunc(itemArg);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="innerCellContainer">${transformedItem[headingArg]}</div>
|
||||
</td>
|
||||
`
|
||||
@ -480,4 +528,29 @@ export class DeesTable<T> extends DeesElement {
|
||||
}
|
||||
return actions;
|
||||
}
|
||||
|
||||
handleCellEditing(event: Event, item: T, key: string) {
|
||||
const target = event.target as HTMLElement;
|
||||
|
||||
// Create an input element
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.value = (item[key] as unknown as string) || '';
|
||||
|
||||
// When the input loses focus or the Enter key is pressed, update the data
|
||||
input.addEventListener('blur', () => {
|
||||
item[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
|
||||
target.innerHTML = input.value; // Update the cell's display
|
||||
});
|
||||
input.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
input.blur(); // This will trigger the blur event handler above
|
||||
}
|
||||
});
|
||||
|
||||
// Replace the cell's content with the input
|
||||
target.innerHTML = '';
|
||||
target.appendChild(input);
|
||||
input.focus();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user