feat(ui): Add support for radio groups

packages/userscript/source/settings/Settings.ts

@@ -120,3 +120,16 @@ export class SettingTriggerMax extends SettingTrigger implements SettingMax {
     this.max = setting.max ?? this.max;
   }
 }
+
+export class SettingOptions<T = string> {
+  readonly #options: Array<{ label: string; value: T }>;
+  selected: T | undefined;
+
+  get options() {
+    return this.#options;
+  }
+
+  constructor(options = new Array<{ label: string; value: T }>()) {
+    this.#options = options;
+  }
+}

packages/userscript/source/ui/components/Fieldset.ts

@@ -0,0 +1,22 @@
+import { UserScript } from "../../UserScript";
+import { UiComponent } from "./UiComponent";
+
+export class Fieldset extends UiComponent {
+  readonly element: JQuery<HTMLElement>;
+
+  /**
+   * Constructs a `Fieldset`.
+   *
+   * @param host A reference to the host.
+   * @param label The label on the fieldset.
+   */
+  constructor(host: UserScript, label: string) {
+    super(host);
+
+    const element = $("<fieldset/>").addClass("ks-fieldset");
+    const legend = $("<legend/>").text(label).addClass("ks-label");
+    element.append(legend);
+
+    this.element = element;
+  }
+}

packages/userscript/source/ui/components/OptionsListItem.ts

@@ -0,0 +1,48 @@
+import { SettingOptions } from "../../settings/Settings";
+import { UserScript } from "../../UserScript";
+import { Fieldset } from "./Fieldset";
+import { RadioItem } from "./RadioItem";
+import { UiComponent } from "./UiComponent";
+
+export class OptionsListItem<TSetting extends SettingOptions = SettingOptions> extends UiComponent {
+  readonly fieldset: Fieldset;
+  readonly element: JQuery<HTMLElement>;
+
+  /**
+   * Construct a new options setting element.
+   * This is a list of options, where the selected option will be put into the setting.
+   *
+   * @param host The userscript instance.
+   * @param label The label on the setting element.
+   * @param setting The setting this element is linked to.
+   * @param handler The event handlers for this setting element.
+   * @param handler.onCheck Will be invoked when the user selects an option.
+   * @param readOnly Should the user be prevented from changing the value of the input?
+   */
+  constructor(
+    host: UserScript,
+    label: string,
+    setting: TSetting,
+    handler: {
+      onCheck: () => void;
+    },
+    readOnly = false
+  ) {
+    super(host);
+
+    this.element = $(`<li/>`);
+
+    this.fieldset = new Fieldset(host, label);
+    this.addChild(this.fieldset);
+
+    for (const option of setting.options) {
+      this.fieldset.addChild(
+        new RadioItem(host, setting, option, label, handler, false, false, readOnly)
+      );
+    }
+  }
+
+  refreshUi() {
+    super.refreshUi();
+  }
+}

packages/userscript/source/ui/components/RadioItem.ts

@@ -0,0 +1,74 @@
+import { SettingOptions } from "../../settings/Settings";
+import { UserScript } from "../../UserScript";
+import { UiComponent } from "./UiComponent";
+
+export class RadioItem<TSetting extends SettingOptions = SettingOptions> extends UiComponent {
+  readonly setting: TSetting;
+  readonly element: JQuery<HTMLElement>;
+  readonly input: JQuery<HTMLElement>;
+
+  readOnly: boolean;
+
+  /**
+   * Construct a new radio setting element.
+   * This is a radio input that is expected to be hosted in a `Fieldset`.
+   *
+   * @param host The userscript instance.
+   * @param setting The setting this element is linked to.
+   * @param option The specific option out of the setting that this radio item represents.
+   * @param groupKey A unique name for the group of radio items this one belongs to.
+   * @param handler The event handlers for this setting element.
+   * @param handler.onCheck Will be invoked when the user selects this radio item.
+   * @param delimiter Should there be additional padding below this element?
+   * @param upgradeIndicator Should an indicator be rendered in front of the elemnt,
+   * to indicate that this is an upgrade of a prior setting?
+   * @param readOnly Should the user be prevented from changing the value of the input?
+   */
+  constructor(
+    host: UserScript,
+    setting: TSetting,
+    option: TSetting["options"][0],
+    groupKey: string,
+    handler: {
+      onCheck: () => void;
+    },
+    delimiter = false,
+    upgradeIndicator = false,
+    readOnly = false
+  ) {
+    super(host);
+
+    const element = $(`<div/>`);
+    for (const cssClass of ["ks-setting", delimiter ? "ks-delimiter" : ""]) {
+      element.addClass(cssClass);
+    }
+
+    const elementLabel = $("<label/>", {
+      text: `${upgradeIndicator ? `⮤ ` : ""}${option.label}`,
+    }).addClass("ks-label");
+
+    const input = $("<input/>", {
+      name: groupKey,
+      type: "radio",
+    }).addClass("ks-radio");
+
+    this.readOnly = readOnly;
+
+    input.on("change", () => {
+      this.setting.selected = option.value;
+      handler.onCheck();
+    });
+
+    elementLabel.prepend(input);
+    element.append(elementLabel);
+
+    this.input = input;
+    this.element = element;
+    this.setting = setting;
+  }
+
+  refreshUi() {
+    super.refreshUi();
+    this.input.prop("disabled", this.readOnly);
+  }
+}