[Refactor] Extract 'FormItem' and 'SettingItem' (#1619)

* Extract SettingItem component

* Extract GeneralSettingItem

* Rename to FormItem

* nit

* nit

src/components/common/FormItem.vue

@@ -0,0 +1,102 @@
+<!-- A generalized form item for rendering in a form. -->
+<template>
+  <div class="form-label flex flex-grow items-center">
+    <span class="text-[var(--p-text-muted-color)]">
+      <slot name="name-prefix"></slot>
+      {{ props.item.name }}
+      <i
+        v-if="props.item.tooltip"
+        class="pi pi-info-circle bg-transparent"
+        v-tooltip="props.item.tooltip"
+      />
+      <slot name="name-suffix"></slot>
+    </span>
+  </div>
+  <div class="form-input flex justify-end">
+    <component
+      :is="markRaw(getFormComponent(props.item))"
+      :id="props.id"
+      v-model:modelValue="formValue"
+      v-bind="getFormAttrs(props.item)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FormItem } from '@/types/settingTypes'
+import { markRaw, type Component } from 'vue'
+import InputText from 'primevue/inputtext'
+import InputNumber from 'primevue/inputnumber'
+import Select from 'primevue/select'
+import ToggleSwitch from 'primevue/toggleswitch'
+import CustomFormValue from '@/components/common/CustomFormValue.vue'
+import InputSlider from '@/components/common/InputSlider.vue'
+
+const formValue = defineModel<any>('formValue')
+const props = withDefaults(
+  defineProps<{
+    item: FormItem
+    id: string | undefined
+  }>(),
+  {
+    id: undefined
+  }
+)
+
+function getFormAttrs(item: FormItem) {
+  const attrs = { ...(item.attrs || {}) }
+  const inputType = item.type
+  if (typeof inputType === 'function') {
+    attrs['renderFunction'] = () =>
+      inputType(
+        props.item.name,
+        (v: any) => (formValue.value = v),
+        formValue.value,
+        item.attrs
+      )
+  }
+  switch (item.type) {
+    case 'combo':
+      attrs['options'] =
+        typeof item.options === 'function'
+          ? item.options(formValue.value)
+          : item.options
+      if (typeof item.options[0] !== 'string') {
+        attrs['optionLabel'] = 'text'
+        attrs['optionValue'] = 'value'
+      }
+      break
+  }
+  return attrs
+}
+
+function getFormComponent(item: FormItem): Component {
+  if (typeof item.type === 'function') {
+    return CustomFormValue
+  }
+  switch (item.type) {
+    case 'boolean':
+      return ToggleSwitch
+    case 'number':
+      return InputNumber
+    case 'slider':
+      return InputSlider
+    case 'combo':
+      return Select
+    default:
+      return InputText
+  }
+}
+</script>
+
+<style scoped>
+.form-input :deep(.input-slider) .p-inputnumber input,
+.form-input :deep(.input-slider) .slider-part {
+  @apply w-20;
+}
+
+.form-input :deep(.p-inputtext),
+.form-input :deep(.p-select) {
+  @apply w-44;
+}
+</style>

src/components/dialog/content/setting/SettingGroup.vue

@@ -7,45 +7,15 @@
       :key="setting.id"
       class="setting-item flex items-center mb-4"
     >
-      <div class="setting-label flex flex-grow items-center">
-        <span class="text-[var(--p-text-muted-color)]">
-          <Tag v-if="setting.experimental" :value="$t('experimental')" />
-          <Tag
-            v-if="setting.deprecated"
-            :value="$t('deprecated')"
-            severity="danger" />
-          {{ setting.name }}
-          <i
-            v-if="setting.tooltip"
-            class="pi pi-info-circle bg-transparent"
-            v-tooltip="setting.tooltip"
-        /></span>
-      </div>
-      <div class="setting-input flex justify-end">
-        <component
-          :is="markRaw(getSettingComponent(setting))"
-          :id="setting.id"
-          :modelValue="settingStore.get(setting.id)"
-          @update:modelValue="updateSetting(setting, $event)"
-          v-bind="getSettingAttrs(setting)"
-        />
-      </div>
+      <SettingItem :setting="setting" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useSettingStore } from '@/stores/settingStore'
-import { SettingParams } from '@/types/settingTypes'
-import { markRaw, type Component } from 'vue'
-import InputText from 'primevue/inputtext'
-import InputNumber from 'primevue/inputnumber'
-import Select from 'primevue/select'
-import ToggleSwitch from 'primevue/toggleswitch'
 import Divider from 'primevue/divider'
-import Tag from 'primevue/tag'
-import CustomSettingValue from '@/components/dialog/content/setting/CustomSettingValue.vue'
-import InputSlider from '@/components/common/InputSlider.vue'
+import SettingItem from '@/components/dialog/content/setting/SettingItem.vue'
+import { SettingParams } from '@/types/settingTypes'
 import { formatCamelCase } from '@/utils/formatUtil'
 
 defineProps<{
@@ -55,67 +25,4 @@ defineProps<{
   }
   divider?: boolean
 }>()
-
-const settingStore = useSettingStore()
-
-function getSettingAttrs(setting: SettingParams) {
-  const attrs = { ...(setting.attrs || {}) }
-  const settingType = setting.type
-  if (typeof settingType === 'function') {
-    attrs['renderFunction'] = () =>
-      settingType(
-        setting.name,
-        (v) => updateSetting(setting, v),
-        settingStore.get(setting.id),
-        setting.attrs
-      )
-  }
-  switch (setting.type) {
-    case 'combo':
-      attrs['options'] =
-        typeof setting.options === 'function'
-          ? setting.options(settingStore.get(setting.id))
-          : setting.options
-      if (typeof setting.options[0] !== 'string') {
-        attrs['optionLabel'] = 'text'
-        attrs['optionValue'] = 'value'
-      }
-      break
-  }
-  return attrs
-}
-
-const updateSetting = (setting: SettingParams, value: any) => {
-  settingStore.set(setting.id, value)
-}
-
-function getSettingComponent(setting: SettingParams): Component {
-  if (typeof setting.type === 'function') {
-    return CustomSettingValue
-  }
-  switch (setting.type) {
-    case 'boolean':
-      return ToggleSwitch
-    case 'number':
-      return InputNumber
-    case 'slider':
-      return InputSlider
-    case 'combo':
-      return Select
-    default:
-      return InputText
-  }
-}
 </script>
-
-<style scoped>
-.setting-input :deep(.input-slider) .p-inputnumber input,
-.setting-input :deep(.input-slider) .slider-part {
-  @apply w-20;
-}
-
-.setting-input :deep(.p-inputtext),
-.setting-input :deep(.p-select) {
-  @apply w-44;
-}
-</style>

src/components/dialog/content/setting/SettingItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <FormItem
+    :item="setting"
+    :id="setting.id"
+    :formValue="settingValue"
+    @update:formValue="updateSettingValue"
+  >
+    <template #name-prefix>
+      <Tag v-if="setting.experimental" :value="$t('experimental')" />
+      <Tag
+        v-if="setting.deprecated"
+        :value="$t('deprecated')"
+        severity="danger"
+      />
+    </template>
+  </FormItem>
+</template>
+
+<script setup lang="ts">
+import Tag from 'primevue/tag'
+import FormItem from '@/components/common/FormItem.vue'
+import { useSettingStore } from '@/stores/settingStore'
+import { SettingParams } from '@/types/settingTypes'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  setting: SettingParams
+}>()
+
+const settingStore = useSettingStore()
+const settingValue = computed(() => settingStore.get(props.setting.id))
+const updateSettingValue = (value: any) => {
+  settingStore.set(props.setting.id, value)
+}
+</script>

src/types/settingTypes.ts

@@ -29,15 +29,10 @@ export interface Setting {
   render: () => HTMLElement
 }
 
-export interface SettingParams {
+export interface SettingParams extends FormItem {
   id: keyof Settings
-  name: string
-  type: SettingInputType | SettingCustomRenderer
   defaultValue: any
   onChange?: (newValue: any, oldValue?: any) => void
-  attrs?: any
-  tooltip?: string
-  options?: Array<string | SettingOption> | ((value: any) => SettingOption[])
   // By default category is id.split('.'). However, changing id to assign
   // new category has poor backward compatibility. Use this field to overwrite
   // default category from id.
@@ -52,3 +47,14 @@ export interface SettingParams {
   // Version of the setting when it was last modified
   versionModified?: string
 }
+
+/**
+ * The base form item for rendering in a form.
+ */
+export interface FormItem {
+  name: string
+  type: SettingInputType | SettingCustomRenderer
+  tooltip?: string
+  attrs?: Record<string, any>
+  options?: Array<string | SettingOption> | ((value: any) => SettingOption[])
+}