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

fix(ts_web): resolve TypeScript nullability and event typing issues across web components

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-01 05:00:21 +00:00
parent b1c8a7446e
commit af1f660486
78 changed files with 429 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts
View File

@@ -130,7 +130,7 @@ export class DeesContextmenu extends DeesElement {
type: Array,
})
accessor menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean; submenu?: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean } | { divider: true })[]; divider?: never } | { divider: true })[] = [];
windowLayer: DeesWindowLayer;
windowLayer!: DeesWindowLayer;
private submenu: DeesContextmenu | null = null;
private submenuTimeout: any = null;
@@ -278,7 +278,7 @@ export class DeesContextmenu extends DeesElement {
}
private handleKeydown = (event: KeyboardEvent) => {
const menuItems = Array.from(this.shadowRoot.querySelectorAll('.menuitem:not(.disabled)'));
const menuItems = Array.from(this.shadowRoot!.querySelectorAll('.menuitem:not(.disabled)'));
const currentIndex = menuItems.findIndex(item => item.matches(':hover'));
switch (event.key) {
@@ -352,7 +352,7 @@ export class DeesContextmenu extends DeesElement {
if (!menuItem.submenu || menuItem.submenu.length === 0) return;
// Find the menu item element
const menuItems = Array.from(this.shadowRoot.querySelectorAll('.menuitem'));
const menuItems = Array.from(this.shadowRoot!.querySelectorAll('.menuitem'));
const menuItemElement = menuItems.find(el => el.querySelector('.menuitem-text')?.textContent === menuItem.name) as HTMLElement;
if (!menuItemElement) return;

48
ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts
View File

@@ -49,7 +49,7 @@ export const demoFunc = () => html`
heading: 'With Help Button',
showHelpButton: true,
onHelp: async () => {
const helpModal = await DeesModal.createAndShow({
await DeesModal.createAndShow({
heading: 'Help',
width: 'small',
showCloseButton: true,
@@ -60,7 +60,7 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Got it',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
},
@@ -70,7 +70,7 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'OK',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>With Help Button</dees-button>
@@ -85,7 +85,7 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Close',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>No Close Button</dees-button>
@@ -101,7 +101,7 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Done',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Both Buttons</dees-button>
@@ -116,7 +116,7 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Close',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Clean Header</dees-button>
@@ -136,10 +136,10 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Cancel',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}, {
name: 'OK',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Small Modal</dees-button>
@@ -157,10 +157,10 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Cancel',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}, {
name: 'Sign Up',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Medium Modal</dees-button>
@@ -181,10 +181,10 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Cancel',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}, {
name: 'Save',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Large Modal</dees-button>
@@ -207,10 +207,10 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Save',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}, {
name: 'Cancel',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Fullscreen Modal</dees-button>
@@ -230,7 +230,7 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Close',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Custom 700px</dees-button>
@@ -245,7 +245,7 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Got it',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Max Width 600px</dees-button>
@@ -260,7 +260,7 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'OK',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Min Width 400px</dees-button>
@@ -279,13 +279,13 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Delete',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}, {
name: 'Cancel',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}, {
name: 'Save Changes',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Three Buttons</dees-button>
@@ -298,7 +298,7 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Acknowledge',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Single Button</dees-button>
@@ -322,10 +322,10 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Discard All Changes',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}, {
name: 'Save and Continue Editing',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Long Labels</dees-button>
@@ -347,7 +347,7 @@ export const demoFunc = () => html`
`,
menuOptions: [{
name: 'Close',
action: async (modal) => modal.destroy()
action: async (modal) => modal!.destroy()
}],
});
}}>Test Responsive</dees-button>

20
ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
View File

@@ -85,7 +85,7 @@ export class DeesModal extends DeesElement {
accessor heading = '';
@state({})
accessor content: TemplateResult;
accessor content!: TemplateResult;
@state({})
accessor menuOptions: plugins.tsclass.website.IMenuItem<DeesModal>[] = [];
@@ -94,10 +94,10 @@ export class DeesModal extends DeesElement {
accessor width: 'small' | 'medium' | 'large' | 'fullscreen' | number = 'medium';
@property({ type: Number })
accessor maxWidth: number;
accessor maxWidth!: number;
@property({ type: Number })
accessor minWidth: number;
accessor minWidth!: number;
@property({ type: Boolean })
accessor showCloseButton: boolean = true;
@@ -106,7 +106,7 @@ export class DeesModal extends DeesElement {
accessor showHelpButton: boolean = false;
@property({ attribute: false })
accessor onHelp: () => void | Promise<void>;
accessor onHelp!: () => void | Promise<void>;
@property({ type: Boolean })
accessor mobileFullscreen: boolean = false;
@@ -383,18 +383,18 @@ export class DeesModal extends DeesElement {
`;
}
private windowLayer: DeesWindowLayer;
private windowLayer!: DeesWindowLayer;
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
super.firstUpdated(_changedProperties);
const domtools = await this.domtoolsPromise;
await domtools.convenience.smartdelay.delayFor(30);
const modal = this.shadowRoot.querySelector('.modal');
modal.classList.add('show');
const modal = this.shadowRoot!.querySelector('.modal');
modal!.classList.add('show');
}
public async handleOutsideClick(eventArg: MouseEvent) {
eventArg.stopPropagation();
const modalContainer = this.shadowRoot.querySelector('.modalContainer');
const modalContainer = this.shadowRoot!.querySelector('.modalContainer');
if (eventArg.target === modalContainer) {
await this.destroy();
}
@@ -402,8 +402,8 @@ export class DeesModal extends DeesElement {
public async destroy() {
const domtools = await this.domtoolsPromise;
const modal = this.shadowRoot.querySelector('.modal');
modal.classList.add('predestroy');
const modal = this.shadowRoot!.querySelector('.modal');
modal!.classList.add('predestroy');
await domtools.convenience.smartdelay.delayFor(200);
document.body.removeChild(this);
await this.windowLayer.destroy();

12
ts_web/elements/00group-overlay/dees-speechbubble/dees-speechbubble.ts
View File

@@ -42,7 +42,7 @@ export class DeesSpeechbubble extends DeesElement {
speechbubble.manifested = true;
windowLayer.appendChild(speechbubble);
windowLayer.style.pointerEvents = 'none';
(windowLayer.shadowRoot.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none';
(windowLayer.shadowRoot!.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none';
return speechbubble;
}
@@ -50,13 +50,13 @@ export class DeesSpeechbubble extends DeesElement {
@property({
type: Object,
})
accessor reffedElement: HTMLElement;
accessor reffedElement!: HTMLElement;
@property({
type: String,
reflect: true,
})
accessor text: string;
accessor text!: string;
@property({
type: Boolean,
@@ -73,7 +73,7 @@ export class DeesSpeechbubble extends DeesElement {
})
accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
public windowLayer: DeesWindowLayer;
public windowLayer!: DeesWindowLayer;
constructor() {
super();
@@ -189,7 +189,7 @@ export class DeesSpeechbubble extends DeesElement {
}
if (this.manifested) {
await this.updatePosition();
(this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '1';
(this.shadowRoot!.querySelector('.maincontainer') as HTMLElement).style.opacity = '1';
} else {
// lets make sure we instrument it
let speechbubble: DeesSpeechbubble;
@@ -227,7 +227,7 @@ export class DeesSpeechbubble extends DeesElement {
public async show() {}
public async destroy() {
(this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '0';
(this.shadowRoot!.querySelector('.maincontainer') as HTMLElement).style.opacity = '0';
this.windowLayer.destroy();
}
}