convert to auto form

frontend/components/global/AutoForm.vue

@@ -86,6 +86,25 @@
             validate-on="input"
           />
 
+          <!-- Number Input -->
+          <v-number-input
+            v-else-if="inputField.type === fieldTypes.NUMBER"
+            v-model="model[inputField.varName]"
+            variant="underlined"
+            :control-variant="inputField.numberInputConfig?.controlVariant"
+            density="comfortable"
+            :label="inputField.label"
+            :name="inputField.varName"
+            :min="inputField.numberInputConfig?.min"
+            :max="inputField.numberInputConfig?.max"
+            :precision="inputField.numberInputConfig?.precision"
+            :hint="inputField.hint"
+            :hide-details="!inputField.hint"
+            :persistent-hint="!!inputField.hint"
+            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
+            validate-on="input"
+          />
+
           <!-- Option Select -->
           <v-select
             v-else-if="inputField.type === fieldTypes.SELECT"

frontend/composables/forms/use-field-types.ts

@@ -1,6 +1,7 @@
 export const fieldTypes = {
   TEXT: "text",
   TEXT_AREA: "textarea",
+  NUMBER: "number",
   SELECT: "select",
   BOOLEAN: "boolean",
   PASSWORD: "password",

frontend/pages/group/data/units.vue

@@ -218,6 +218,16 @@ const tableHeaders: TableHeaders[] = [
     show: true,
     sortable: true,
   },
+  {
+    text: i18n.t("data-pages.units.standard-quantity"),
+    value: "standardQuantity",
+    show: false,
+  },
+  {
+    text: i18n.t("data-pages.units.standard-unit"),
+    value: "standardUnit",
+    show: false,
+  },
   {
     text: i18n.t("general.date-added"),
     value: "createdAt",
@@ -230,7 +240,12 @@ const { store: unitStore, actions: unitActions } = useUnitStore();
 
 // ============================================================
 // Form items (shared)
-const formItems: AutoFormItems = [
+type StandardizedUnitTypeOption = {
+  text: string;
+  value: StandardizedUnitType;
+};
+
+const formItems = computed<AutoFormItems>(() => [
   {
     label: i18n.t("general.name"),
     varName: "name",
@@ -267,7 +282,57 @@ const formItems: AutoFormItems = [
     varName: "fraction",
     type: fieldTypes.BOOLEAN,
   },
-];
+  {
+    label: i18n.t("data-pages.units.standard-quantity"),
+    varName: "standardQuantity",
+    type: fieldTypes.NUMBER,
+    numberInputConfig: {
+      min: 0,
+      max: undefined,
+      precision: undefined,
+      controlVariant: "hidden",
+    },
+  },
+  {
+    label: i18n.t("data-pages.units.standard-unit"),
+    varName: "standardUnit",
+    type: fieldTypes.SELECT,
+    options: [
+      {
+        text: i18n.t("data-pages.units.standard-unit-labels.fluid-ounce"),
+        value: "fluid_ounce",
+      },
+      {
+        text: i18n.t("data-pages.units.standard-unit-labels.cup"),
+        value: "cup",
+      },
+      {
+        text: i18n.t("data-pages.units.standard-unit-labels.ounce"),
+        value: "ounce",
+      },
+      {
+        text: i18n.t("data-pages.units.standard-unit-labels.pound"),
+        value: "pound",
+      },
+      {
+        text: i18n.t("data-pages.units.standard-unit-labels.milliliter"),
+        value: "milliliter",
+      },
+      {
+        text: i18n.t("data-pages.units.standard-unit-labels.liter"),
+        value: "liter",
+      },
+      {
+        text: i18n.t("data-pages.units.standard-unit-labels.gram"),
+        value: "gram",
+      },
+      {
+        text: i18n.t("data-pages.units.standard-unit-labels.kilogram"),
+        value: "kilogram",
+      },
+    ] as StandardizedUnitTypeOption[],
+  },
+]);
 
 // ============================================================
 // Create

frontend/types/auto-forms.ts

@@ -1,11 +1,28 @@
 import type { VForm as VuetifyForm } from "vuetify/components/VForm";
 
-type FormFieldType = "text" | "textarea" | "list" | "select" | "object" | "boolean" | "color" | "password";
+type FormFieldType
+  = | "text"
+    | "textarea"
+    | "number"
+    | "list"
+    | "select"
+    | "object"
+    | "boolean"
+    | "color"
+    | "password";
 
 export type FormValidationRule = (value: any) => boolean | string;
 
 export interface FormSelectOption {
   text: string;
+  value?: string;
+}
+
+export interface FormFieldNumberInputConfig {
+  min?: number;
+  max?: number;
+  precision?: number;
+  controlVariant?: "split" | "default" | "hidden" | "stacked";
 }
 
 export interface FormField {
@@ -18,8 +35,9 @@ export interface FormField {
   rules?: FormValidationRule[];
   disableUpdate?: boolean;
   disableCreate?: boolean;
+  numberInputConfig?: FormFieldNumberInputConfig;
   options?: FormSelectOption[];
-  selectReturnValue?: string;
+  selectReturnValue?: "text" | "value";
 }
 
 export type AutoFormItems = FormField[];