mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-07 08:30:06 +00:00
fix(types): type ComfyDialog and ComfyAsyncDialog properly
ComfyDialog: - Type constructor buttons parameter as HTMLButtonElement[] | null - Type show method parameter as string | HTMLElement | HTMLElement[] - Use definite assignment for textElement ComfyAsyncDialog: - Make class generic with DialogAction<T> type - Type resolve function, show/showModal return types - Fix button creation with proper HTMLButtonElement cast - Add generic static prompt method ManageGroupDialog: - Update show method signature to match base class - Extract nodeType from parameter for string comparisons
This commit is contained in:
@@ -1,28 +1,28 @@
|
||||
import { $el } from '../../ui'
|
||||
import { ComfyDialog } from '../dialog'
|
||||
|
||||
export class ComfyAsyncDialog extends ComfyDialog<HTMLDialogElement> {
|
||||
// @ts-expect-error fixme ts strict error
|
||||
#resolve: (value: any) => void
|
||||
type DialogAction<T> = string | { value?: T; text: string }
|
||||
|
||||
constructor(actions?: Array<string | { value?: any; text: string }>) {
|
||||
export class ComfyAsyncDialog<
|
||||
T = string | null
|
||||
> extends ComfyDialog<HTMLDialogElement> {
|
||||
#resolve!: (value: T | null) => void
|
||||
|
||||
constructor(actions?: Array<DialogAction<T>>) {
|
||||
super(
|
||||
'dialog.comfy-dialog.comfyui-dialog',
|
||||
// @ts-expect-error fixme ts strict error
|
||||
actions?.map((opt) => {
|
||||
if (typeof opt === 'string') {
|
||||
opt = { text: opt }
|
||||
}
|
||||
const action = typeof opt === 'string' ? { text: opt } : opt
|
||||
return $el('button.comfyui-button', {
|
||||
type: 'button',
|
||||
textContent: opt.text,
|
||||
onclick: () => this.close(opt.value ?? opt.text)
|
||||
})
|
||||
textContent: action.text,
|
||||
onclick: () => this.close((action.value ?? action.text) as T)
|
||||
}) as HTMLButtonElement
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
override show(html: string | HTMLElement | HTMLElement[]) {
|
||||
override show(html: string | HTMLElement | HTMLElement[]): Promise<T | null> {
|
||||
this.element.addEventListener('close', () => {
|
||||
this.close()
|
||||
})
|
||||
@@ -34,7 +34,7 @@ export class ComfyAsyncDialog extends ComfyDialog<HTMLDialogElement> {
|
||||
})
|
||||
}
|
||||
|
||||
showModal(html: string | HTMLElement | HTMLElement[]) {
|
||||
showModal(html: string | HTMLElement | HTMLElement[]): Promise<T | null> {
|
||||
this.element.addEventListener('close', () => {
|
||||
this.close()
|
||||
})
|
||||
@@ -47,22 +47,22 @@ export class ComfyAsyncDialog extends ComfyDialog<HTMLDialogElement> {
|
||||
})
|
||||
}
|
||||
|
||||
override close(result = null) {
|
||||
override close(result: T | null = null) {
|
||||
this.#resolve(result)
|
||||
this.element.close()
|
||||
super.close()
|
||||
}
|
||||
|
||||
static async prompt({
|
||||
static async prompt<U = string>({
|
||||
title = null,
|
||||
message,
|
||||
actions
|
||||
}: {
|
||||
title: string | null
|
||||
message: string
|
||||
actions: Array<string | { value?: any; text: string }>
|
||||
}) {
|
||||
const dialog = new ComfyAsyncDialog(actions)
|
||||
actions: Array<DialogAction<U>>
|
||||
}): Promise<U | null> {
|
||||
const dialog = new ComfyAsyncDialog<U>(actions)
|
||||
const content = [$el('span', message)]
|
||||
if (title) {
|
||||
content.unshift($el('h3', title))
|
||||
|
||||
@@ -4,11 +4,10 @@ export class ComfyDialog<
|
||||
T extends HTMLElement = HTMLElement
|
||||
> extends EventTarget {
|
||||
element: T
|
||||
// @ts-expect-error fixme ts strict error
|
||||
textElement: HTMLElement
|
||||
textElement!: HTMLElement
|
||||
#buttons: HTMLButtonElement[] | null
|
||||
|
||||
constructor(type = 'div', buttons = null) {
|
||||
constructor(type = 'div', buttons: HTMLButtonElement[] | null = null) {
|
||||
super()
|
||||
this.#buttons = buttons
|
||||
this.element = $el(type + '.comfy-modal', { parent: document.body }, [
|
||||
@@ -35,8 +34,7 @@ export class ComfyDialog<
|
||||
this.element.style.display = 'none'
|
||||
}
|
||||
|
||||
// @ts-expect-error fixme ts strict error
|
||||
show(html) {
|
||||
show(html: string | HTMLElement | HTMLElement[]): void {
|
||||
if (typeof html === 'string') {
|
||||
this.textElement.innerHTML = html
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user