Migreate ui.js (#8)

* Rename js to ts

* Migrate ui.js

src/scripts/ui/dialog.js

@@ -1,4 +1,4 @@
-import { $el } from "../ui.js";
+import { $el } from "../ui";
 
 export class ComfyDialog {
 	constructor() {

src/scripts/ui/draggableList.js

@@ -25,7 +25,7 @@
     SOFTWARE.
 */
 
-import { $el } from "../ui.js";
+import { $el } from "../ui";
 
 $el("style", {
     parent: document.head,

src/scripts/ui/imagePreview.js

@@ -1,4 +1,4 @@
-import { $el } from "../ui.js";
+import { $el } from "../ui";
 
 export function calculateImageGrid(imgs, dw, dh) {
 	let best = 0;

src/scripts/ui/settings.ts

@@ -1,8 +1,9 @@
-import { $el } from "../ui.js";
+import { $el } from "../ui";
 import { api } from "../api.js";
 import { ComfyDialog } from "./dialog.js";
 import type { ComfyApp } from "../app.js";
 
+/* The Setting entry stored in `ComfySettingsDialog` */
 interface Setting {
     id: string;
     onChange?: (value: any, oldValue?: any) => void;
@@ -10,6 +11,22 @@ interface Setting {
     render: () => HTMLElement;
 }
 
+interface SettingOption {
+    text: string;
+    value?: string;
+}
+
+interface SettingParams {
+    id: string;
+    name: string;
+    type: string | ((name: string, setter: (v: any) => void, value: any, attrs: any) => HTMLElement);
+    defaultValue: any;
+    onChange?: (newValue: any, oldValue?: any) => void;
+    attrs?: any;
+    tooltip?: string;
+    options?: SettingOption[] | ((value: any) => SettingOption[]);
+}
+
 export class ComfySettingsDialog extends ComfyDialog {
 	app: ComfyApp;
 	settingsValues: any;
@@ -114,7 +131,8 @@ export class ComfySettingsDialog extends ComfyDialog {
 		});
 	}
 
-	addSetting({ id, name, type, defaultValue, onChange, attrs = {}, tooltip = "", options = undefined }) {
+	addSetting(params: SettingParams) {
+		const { id, name, type, defaultValue, onChange, attrs = {}, tooltip = "", options = undefined } = params;
 		if (!id) {
 			throw new Error("Settings must have an ID");
 		}
@@ -321,8 +339,6 @@ export class ComfySettingsDialog extends ComfyDialog {
 				{
 					style: { display: "none" },
 				},
-				// TODO remove this once ui.js is migrated.
-				// @ts-ignore
 				[$el("th"), $el("th", { style: { width: "33%" } })]
 			),
 			...this.settings.sort((a, b) => a.name.localeCompare(b.name)).map((s) => s.render())

src/scripts/ui/toggleSwitch.js

@@ -1,4 +1,4 @@
-import { $el } from "../ui.js";
+import { $el } from "../ui";
 
 /**
  * @typedef { { text: string, value?: string, tooltip?: string } } ToggleSwitchItem

src/scripts/ui/userSelection.js

@@ -1,5 +1,5 @@
 import { api } from "../api.js";
-import { $el } from "../ui.js";
+import { $el } from "../ui";
 import { addStylesheet } from "../utils.js";
 import { createSpinner } from "./spinner.js";