fix(ts_web): resolve TypeScript nullability and event typing issues across web components
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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() {}
|
||||
|
||||
Reference in New Issue
Block a user