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

20
ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.demo.ts
View File

@@ -109,14 +109,14 @@ export const demoFunc = () => html`
<dees-panel .title=${'Interactive Shopping Cart'} .subtitle=${'Product cards with dynamic cart calculation'} .runAfterRender=${async (elementArg: HTMLElement) => {
const products = [
{ id: 'laptop', element: null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }},
{ id: 'ipad', element: null, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }},
{ id: 'keyboard', element: null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }}
{ id: 'laptop', element: null as DeesShoppingProductcard | null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }},
{ id: 'ipad', element: null as DeesShoppingProductcard | null, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }},
{ id: 'keyboard', element: null as DeesShoppingProductcard | null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }}
];
const updateCartSummary = () => {
let total = 0;
const items = [];
const items: string[] = [];
products.forEach(product => {
const element = elementArg.querySelector(`#${product.id}`) as DeesShoppingProductcard;
@@ -216,8 +216,8 @@ export const demoFunc = () => html`
const output = document.querySelector('#selection-output');
if (output) {
const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
const selectedProducts = [];
selectedCards.forEach((card: DeesShoppingProductcard) => {
const selectedProducts: string[] = [];
(selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
if (card.selected) {
selectedProducts.push(card.productData.name);
}
@@ -243,8 +243,8 @@ export const demoFunc = () => html`
const output = document.querySelector('#selection-output');
if (output) {
const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
const selectedProducts = [];
selectedCards.forEach((card: DeesShoppingProductcard) => {
const selectedProducts: string[] = [];
(selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
if (card.selected) {
selectedProducts.push(card.productData.name);
}
@@ -271,8 +271,8 @@ export const demoFunc = () => html`
const output = document.querySelector('#selection-output');
if (output) {
const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
const selectedProducts = [];
selectedCards.forEach((card: DeesShoppingProductcard) => {
const selectedProducts: string[] = [];
(selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
if (card.selected) {
selectedProducts.push(card.productData.name);
}

12
ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
View File

@@ -46,7 +46,7 @@ export class DeesSimpleAppDash extends DeesElement {
accessor terminalSetupCommand: string = `echo "Terminal ready"`;
@state()
accessor selectedView: IView;
accessor selectedView!: IView;
public static styles = [
@@ -386,7 +386,7 @@ export class DeesSimpleAppDash extends DeesElement {
`;
}
public async firstUpdated(_changedProperties): Promise<void> {
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
const domtools = await this.domtoolsPromise;
super.firstUpdated(_changedProperties);
if (this.viewTabs && this.viewTabs.length > 0) {
@@ -395,7 +395,7 @@ export class DeesSimpleAppDash extends DeesElement {
}
}
public currentTerminal: DeesWorkspaceTerminal;
public currentTerminal: DeesWorkspaceTerminal | null = null;
public async launchTerminal() {
const domtools = await this.domtoolsPromise;
if (this.currentTerminal) {
@@ -404,7 +404,7 @@ export class DeesSimpleAppDash extends DeesElement {
return;
}
const maincontainer = this.shadowRoot.querySelector('.maincontainer');
const maincontainer = this.shadowRoot!.querySelector('.maincontainer')! as HTMLElement;
const { DeesWorkspaceTerminal } = await import('../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js');
const terminal = new DeesWorkspaceTerminal();
terminal.setupCommand = this.terminalSetupCommand;
@@ -444,9 +444,9 @@ export class DeesSimpleAppDash extends DeesElement {
}
private currentView: DeesElement;
private currentView!: DeesElement;
public async loadView(viewArg: IView) {
const appcontent = this.shadowRoot.querySelector('.appcontent');
const appcontent = this.shadowRoot!.querySelector('.appcontent')!;
const view = new viewArg.element();
if (this.currentView) {
this.currentView.remove();

12
ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
View File

@@ -141,15 +141,15 @@ export class DeesSimpleLogin extends DeesElement {
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
super.firstUpdated(_changedProperties);
const form = this.shadowRoot.querySelector('dees-form') as any;
const form = this.shadowRoot!.querySelector('dees-form') as any;
if (form) {
form.addEventListener('formData', (event: CustomEvent) => {
form.addEventListener('formData', ((event: CustomEvent) => {
this.dispatchEvent(new CustomEvent('login', {
detail: event.detail,
bubbles: true,
composed: true
}));
});
}) as EventListener);
}
}
@@ -158,9 +158,9 @@ export class DeesSimpleLogin extends DeesElement {
*/
public async switchToSlottedContent() {
const domtools = await this.domtoolsPromise;
const loginDiv: HTMLDivElement = this.shadowRoot.querySelector('.login');
const loginContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.loginContainer');
const slotContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.slotContainer');
const loginDiv = this.shadowRoot!.querySelector('.login') as HTMLDivElement;
const loginContainerDiv = this.shadowRoot!.querySelector('.loginContainer') as HTMLDivElement;
const slotContainerDiv = this.shadowRoot!.querySelector('.slotContainer') as HTMLDivElement;
loginDiv.style.opacity = '0';
loginDiv.style.transform = 'translateY(20px)';
loginContainerDiv.style.pointerEvents = 'none';