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

This commit is contained in:
2026-04-01 05:00:21 +00:00
parent b1c8a7446e
commit af1f660486
78 changed files with 429 additions and 399 deletions

View File

@@ -15,7 +15,7 @@ export const demoFunc = () => {
.filter(key => {
// Skip utility functions and focus on icon components (first letter is uppercase)
const isUppercaseFirst = key[0] === key[0].toUpperCase() && key[0] !== key[0].toLowerCase();
const isFunction = typeof lucideIcons[key] === 'function';
const isFunction = typeof (lucideIcons as any)[key] === 'function';
const notUtility = !['createElement', 'createIcons', 'default'].includes(key);
return isFunction && isUppercaseFirst && notUtility;
})
@@ -63,7 +63,7 @@ export const demoFunc = () => {
const searchIcons = (event: InputEvent) => {
const searchTerm = (event.target as HTMLInputElement).value.toLowerCase().trim();
// Get the demo container first, then search within it
const demoContainer = (event.target as HTMLElement).closest('.demoContainer');
const demoContainer = (event.target as HTMLElement).closest('.demoContainer')!;
const containers = demoContainer.querySelectorAll('.iconContainer');
containers.forEach(container => {
@@ -79,7 +79,7 @@ export const demoFunc = () => {
});
// Update counts - search within demoContainer
demoContainer.querySelectorAll('.section-container').forEach(section => {
demoContainer!.querySelectorAll('.section-container').forEach(section => {
const visibleIcons = section.querySelectorAll('.iconContainer:not(.hidden)').length;
const countElement = section.querySelector('.icon-count');
if (countElement) {

View File

@@ -208,7 +208,7 @@ export class DeesIcon extends DeesElement {
accessor icon: IconWithPrefix | undefined = undefined;
@property({ type: Number })
accessor iconSize: number;
accessor iconSize!: number;
@property({ type: String })
accessor color: string = 'currentColor';
@@ -292,13 +292,13 @@ export class DeesIcon extends DeesElement {
const pascalCaseName = iconName.charAt(0).toUpperCase() + iconName.slice(1);
// Check if the icon exists in lucideIcons
if (!lucideIcons[pascalCaseName]) {
if (!(lucideIcons as any)[pascalCaseName]) {
console.warn(`Lucide icon '${pascalCaseName}' not found in lucideIcons object`);
return '';
}
// Use the exact pattern from Lucide documentation
const svgElement = createElement(lucideIcons[pascalCaseName], {
const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
color: this.color,
size: this.iconSize,
strokeWidth: this.strokeWidth
@@ -404,9 +404,9 @@ export class DeesIcon extends DeesElement {
// Convert to PascalCase
const pascalCaseName = name.charAt(0).toUpperCase() + name.slice(1);
if (lucideIcons[pascalCaseName]) {
if ((lucideIcons as any)[pascalCaseName]) {
// Use the documented pattern from Lucide docs
const svgElement = createElement(lucideIcons[pascalCaseName], {
const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
color: this.color,
size: this.iconSize,
strokeWidth: this.strokeWidth

View File

@@ -33,12 +33,12 @@ export class DeesUpdater extends DeesElement {
@property({
type: String,
})
accessor currentVersion: string;
accessor currentVersion!: string;
@property({
type: String,
})
accessor updatedVersion: string;
accessor updatedVersion!: string;
constructor() {
super();
@@ -107,7 +107,7 @@ export class DeesUpdater extends DeesElement {
}
public async destroy() {
this.parentElement.removeChild(this);
this.parentElement!.removeChild(this);
}
private windowLayerClicked() {}