fix(ts_web): resolve TypeScript nullability and event typing issues across web components
This commit is contained in:
@@ -30,7 +30,7 @@ export class DeesFormSubmit extends DeesElement {
|
||||
accessor disabled = false;
|
||||
|
||||
@property({ type: String })
|
||||
accessor text: string;
|
||||
accessor text!: string;
|
||||
|
||||
@property({ type: String })
|
||||
accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
@@ -42,7 +42,7 @@ export class DeesFormSubmit extends DeesElement {
|
||||
accessor size: 'sm' | 'default' | 'lg' | 'icon' | 'small' | 'normal' | 'large' = 'default';
|
||||
|
||||
@property({ type: String })
|
||||
accessor icon: string;
|
||||
accessor icon!: string;
|
||||
|
||||
@property({ type: String })
|
||||
accessor iconPosition: 'left' | 'right' = 'left';
|
||||
|
||||
@@ -57,10 +57,10 @@ export const demoFunc = () => html`
|
||||
const outputDiv = elementArg.querySelector('.form-output');
|
||||
|
||||
if (form && outputDiv) {
|
||||
form.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||||
form.addEventListener('formData', (async (eventArg: CustomEvent) => {
|
||||
const data = eventArg.detail.data;
|
||||
console.log('Form submitted with data:', data);
|
||||
|
||||
|
||||
// Show processing state
|
||||
form.setStatus('pending', 'Processing your registration...');
|
||||
outputDiv.innerHTML = `<strong>Submitted Data:</strong>\n${JSON.stringify(data, null, 2)}`;
|
||||
@@ -75,7 +75,7 @@ export const demoFunc = () => html`
|
||||
await domtools.plugins.smartdelay.delayFor(2000);
|
||||
form.reset();
|
||||
outputDiv.innerHTML = '<em>Form has been reset</em>';
|
||||
});
|
||||
}) as unknown as EventListener);
|
||||
|
||||
// Track individual field changes
|
||||
const inputs = form.querySelectorAll('dees-input-text, dees-input-dropdown, dees-input-checkbox');
|
||||
@@ -158,14 +158,14 @@ export const demoFunc = () => html`
|
||||
console.log('Horizontal form layout active');
|
||||
|
||||
// Monitor filter changes
|
||||
form.addEventListener('formData', (event: CustomEvent) => {
|
||||
form.addEventListener('formData', ((event: CustomEvent) => {
|
||||
const filters = event.detail.data;
|
||||
console.log('Filter applied:', filters);
|
||||
|
||||
|
||||
// Simulate search
|
||||
const resultsCount = Math.floor(Math.random() * 100) + 1;
|
||||
console.log(`Found ${resultsCount} results with filters:`, filters);
|
||||
});
|
||||
}) as unknown as EventListener);
|
||||
|
||||
// Setup real-time filter updates
|
||||
const inputs = form.querySelectorAll('[key]');
|
||||
@@ -224,7 +224,7 @@ export const demoFunc = () => html`
|
||||
const statusDiv = elementArg.querySelector('#status-display');
|
||||
|
||||
if (form) {
|
||||
form.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||||
form.addEventListener('formData', (async (eventArg: CustomEvent) => {
|
||||
const data = eventArg.detail.data;
|
||||
console.log('Advanced form data:', data);
|
||||
|
||||
@@ -252,7 +252,7 @@ export const demoFunc = () => html`
|
||||
}
|
||||
|
||||
console.log('Form data logged:', data);
|
||||
});
|
||||
}) as unknown as EventListener);
|
||||
|
||||
// Monitor file uploads
|
||||
const fileUpload = form.querySelector('dees-input-fileupload');
|
||||
|
||||
@@ -156,8 +156,9 @@ export class DeesForm extends DeesElement {
|
||||
requiredOK = false;
|
||||
}
|
||||
}
|
||||
if (this.getSubmitButton()) {
|
||||
this.getSubmitButton().disabled = !requiredOK;
|
||||
const submitButton = this.getSubmitButton();
|
||||
if (submitButton) {
|
||||
submitButton.disabled = !requiredOK;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -200,6 +201,7 @@ export class DeesForm extends DeesElement {
|
||||
) {
|
||||
const inputChildren = this.getFormElements();
|
||||
const submitButton = this.getSubmitButton();
|
||||
if (!submitButton) return;
|
||||
|
||||
switch (visualStateArg) {
|
||||
case 'normal':
|
||||
@@ -240,7 +242,6 @@ export class DeesForm extends DeesElement {
|
||||
*/
|
||||
reset() {
|
||||
const inputChildren = this.getFormElements();
|
||||
const submitButton = this.getSubmitButton();
|
||||
|
||||
for (const inputChild of inputChildren) {
|
||||
inputChild.value = null;
|
||||
|
||||
Reference in New Issue
Block a user