FEATURE: Support boolean, enum and integer fields for schema theme settings (#25933)

Continue from https://github.com/discourse/discourse/pull/25673 and https://github.com/discourse/discourse/pull/25811.

This commit adds support for boolean, integer and enum types for schema theme settings.

app/assets/javascripts/admin/addon/components/schema-theme-setting/editor.gjs

@@ -96,7 +96,7 @@ export default class SchemaThemeSettingEditor extends Component {
       }
       list.push({
         name,
-        type: spec.type,
+        spec,
         value: node.object[name],
       });
     }
@@ -194,8 +194,8 @@ export default class SchemaThemeSettingEditor extends Component {
       {{#each this.fields as |field|}}
         <FieldInput
           @name={{field.name}}
-          @type={{field.type}}
           @value={{field.value}}
+          @spec={{field.spec}}
           @onValueChange={{fn this.inputFieldChanged field}}
         />
       {{/each}}

app/assets/javascripts/admin/addon/components/schema-theme-setting/field.gjs

@@ -1,29 +1,34 @@
 import Component from "@glimmer/component";
-import { Input } from "@ember/component";
+import BooleanField from "./types/boolean";
+import EnumField from "./types/enum";
+import IntegerField from "./types/integer";
+import StringField from "./types/string";
 
 export default class SchemaThemeSettingField extends Component {
-  #bufferVal;
-
   get component() {
-    if (this.args.type === "string") {
-      return Input;
+    switch (this.args.spec.type) {
+      case "string":
+        return StringField;
+      case "integer":
+        return IntegerField;
+      case "boolean":
+        return BooleanField;
+      case "enum":
+        return EnumField;
+      default:
+        throw new Error("unknown type");
     }
   }
 
-  get value() {
-    return this.#bufferVal || this.args.value;
-  }
-
-  set value(v) {
-    this.#bufferVal = v;
-    this.args.onValueChange(v);
-  }
-
   <template>
     <div class="schema-field" data-name={{@name}}>
       <label>{{@name}}</label>
       <div class="input">
-        <this.component @value={{this.value}} />
+        <this.component
+          @value={{@value}}
+          @spec={{@spec}}
+          @onChange={{@onValueChange}}
+        />
       </div>
     </div>
   </template>

app/assets/javascripts/admin/addon/components/schema-theme-setting/types/boolean.gjs

@@ -0,0 +1,15 @@
+import Component from "@glimmer/component";
+import { Input } from "@ember/component";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+
+export default class SchemaThemeSettingTypeBoolean extends Component {
+  @action
+  onInput(event) {
+    this.args.onChange(event.currentTarget.checked);
+  }
+
+  <template>
+    <Input @checked={{@value}} {{on "input" this.onInput}} @type="checkbox" />
+  </template>
+}

app/assets/javascripts/admin/addon/components/schema-theme-setting/types/enum.gjs

@@ -0,0 +1,36 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import ComboBox from "select-kit/components/combo-box";
+
+export default class SchemaThemeSettingTypeEnum extends Component {
+  @tracked value;
+
+  constructor() {
+    super(...arguments);
+    this.value = this.args.value;
+  }
+
+  get content() {
+    return this.args.spec.choices.map((choice) => {
+      return {
+        name: choice,
+        id: choice,
+      };
+    });
+  }
+
+  @action
+  onInput(newVal) {
+    this.value = newVal;
+    this.args.onChange(newVal);
+  }
+
+  <template>
+    <ComboBox
+      @content={{this.content}}
+      @value={{this.value}}
+      @onChange={{this.onInput}}
+    />
+  </template>
+}

app/assets/javascripts/admin/addon/components/schema-theme-setting/types/integer.gjs

@@ -0,0 +1,15 @@
+import Component from "@glimmer/component";
+import { Input } from "@ember/component";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+
+export default class SchemaThemeSettingTypeInteger extends Component {
+  @action
+  onInput(event) {
+    this.args.onChange(event.currentTarget.value);
+  }
+
+  <template>
+    <Input @value={{@value}} {{on "input" this.onInput}} @type="number" />
+  </template>
+}

app/assets/javascripts/admin/addon/components/schema-theme-setting/types/string.gjs

@@ -0,0 +1,15 @@
+import Component from "@glimmer/component";
+import { Input } from "@ember/component";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+
+export default class SchemaThemeSettingTypeString extends Component {
+  @action
+  onInput(event) {
+    this.args.onChange(event.currentTarget.value);
+  }
+
+  <template>
+    <Input @value={{@value}} {{on "input" this.onInput}} />
+  </template>
+}