Merge branch 'mealie-next' into feat/standardize-units

frontend/components/Domain/Group/GroupDataPage.vue

@@ -2,9 +2,11 @@
   <!-- Create Dialog -->
   <BaseDialog
     v-model="createDialog"
-    :title="$t('general.create')"
+    :title="createTitle || $t('general.create')"
     :icon="icon"
     color="primary"
+    max-width="600px"
+    width="100%"
     :submit-disabled="!createFormValid"
     can-confirm
     @confirm="emit('create-one', createForm.data)"
@@ -15,6 +17,7 @@
         v-model="createForm.data"
         v-model:is-valid="createFormValid"
         :items="createForm.items"
+        class="py-2"
       />
     </div>
   </BaseDialog>
@@ -22,18 +25,22 @@
   <!-- Edit Dialog -->
   <BaseDialog
     v-model="editDialog"
-    :title="$t('general.edit')"
+    :title="editTitle || $t('general.edit')"
     :icon="icon"
     color="primary"
+    max-width="600px"
+    width="100%"
     :submit-disabled="!editFormValid"
     can-confirm
     @confirm="emit('edit-one', editForm.data)"
   >
     <div class="mx-2 mt-2">
+      <slot name="edit-dialog-top" />
       <AutoForm
         v-model="editForm.data"
         v-model:is-valid="editFormValid"
         :items="editForm.items"
+        class="py-2"
       />
     </div>
     <template #custom-card-action>
@@ -153,6 +160,12 @@ defineProps({
     type: String,
     required: true,
   },
+  createTitle: {
+    type: String,
+  },
+  editTitle: {
+    type: String,
+  },
   tableConfig: {
     type: Object as PropType<TableConfig>,
     default: () => ({

frontend/components/global/AutoForm.vue

@@ -7,134 +7,137 @@
       :width="width"
       class="my-2"
     >
-      <v-row>
-        <v-col
-          v-for="(inputField, index) in items"
-          :key="index"
-          cols="12"
-          sm="12"
-        >
-          <v-divider
+      <v-row no-gutters>
+        <template v-for="(inputField, index) in items" :key="index">
+          <v-col
             v-if="inputField.section"
-            class="my-2"
-          />
-          <v-card-title
-            v-if="inputField.section"
-            class="pl-0"
+            :cols="12"
+            class="px-2"
           >
-            {{ inputField.section }}
-          </v-card-title>
-          <v-card-text
-            v-if="inputField.sectionDetails"
-            class="pl-0 mt-0 pt-0"
+            <v-divider
+              class="my-2"
+            />
+            <v-card-title
+              class="pl-0"
+            >
+              {{ inputField.section }}
+            </v-card-title>
+            <v-card-text
+              v-if="inputField.sectionDetails"
+              class="pl-0 mt-0 pt-0"
+            >
+              {{ inputField.sectionDetails }}
+            </v-card-text>
+          </v-col>
+          <v-col
+            :cols="inputField.cols || 12"
+            class="px-2"
           >
-            {{ inputField.sectionDetails }}
-          </v-card-text>
+            <!-- Check Box -->
+            <v-checkbox
+              v-if="inputField.type === fieldTypes.BOOLEAN"
+              v-model="model[inputField.varName]"
+              :name="inputField.varName"
+              :readonly="fieldState[inputField.varName]?.readonly"
+              :disabled="fieldState[inputField.varName]?.disabled"
+              :hint="inputField.hint"
+              :hide-details="!inputField.hint"
+              :persistent-hint="!!inputField.hint"
+              density="comfortable"
+              validate-on="input"
+            >
+              <template #label>
+                <span class="ml-4">
+                  {{ inputField.label }}
+                </span>
+              </template>
+            </v-checkbox>
 
-          <!-- Check Box -->
-          <v-checkbox
-            v-if="inputField.type === fieldTypes.BOOLEAN"
-            v-model="model[inputField.varName]"
-            :name="inputField.varName"
-            :readonly="fieldState[inputField.varName]?.readonly"
-            :disabled="fieldState[inputField.varName]?.disabled"
-            :hint="inputField.hint"
-            :hide-details="!inputField.hint"
-            :persistent-hint="!!inputField.hint"
-            density="comfortable"
-            validate-on="input"
-          >
-            <template #label>
-              <span class="ml-4">
-                {{ inputField.label }}
-              </span>
-            </template>
-          </v-checkbox>
+            <!-- Text Field -->
+            <v-text-field
+              v-else-if="inputField.type === fieldTypes.TEXT || inputField.type === fieldTypes.PASSWORD"
+              v-model="model[inputField.varName]"
+              :readonly="fieldState[inputField.varName]?.readonly"
+              :disabled="fieldState[inputField.varName]?.disabled"
+              :type="inputField.type === fieldTypes.PASSWORD ? 'password' : 'text'"
+              variant="solo-filled"
+              flat
+              density="comfortable"
+              :label="inputField.label"
+              :name="inputField.varName"
+              :hint="inputField.hint || ''"
+              :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
+              validate-on="input"
+            />
 
-          <!-- Text Field -->
-          <v-text-field
-            v-else-if="inputField.type === fieldTypes.TEXT || inputField.type === fieldTypes.PASSWORD"
-            v-model="model[inputField.varName]"
-            :readonly="fieldState[inputField.varName]?.readonly"
-            :disabled="fieldState[inputField.varName]?.disabled"
-            :type="inputField.type === fieldTypes.PASSWORD ? 'password' : 'text'"
-            variant="solo-filled"
-            flat
-            density="comfortable"
-            :label="inputField.label"
-            :name="inputField.varName"
-            :hint="inputField.hint || ''"
-            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
-            validate-on="input"
-          />
+            <!-- Text Area -->
+            <v-textarea
+              v-else-if="inputField.type === fieldTypes.TEXT_AREA"
+              v-model="model[inputField.varName]"
+              :readonly="fieldState[inputField.varName]?.readonly"
+              :disabled="fieldState[inputField.varName]?.disabled"
+              variant="solo-filled"
+              flat
+              rows="3"
+              auto-grow
+              density="comfortable"
+              :label="inputField.label"
+              :name="inputField.varName"
+              :hint="inputField.hint || ''"
+              :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
+              validate-on="input"
+            />
 
-          <!-- Text Area -->
-          <v-textarea
-            v-else-if="inputField.type === fieldTypes.TEXT_AREA"
-            v-model="model[inputField.varName]"
-            :readonly="fieldState[inputField.varName]?.readonly"
-            :disabled="fieldState[inputField.varName]?.disabled"
-            variant="solo-filled"
-            flat
-            rows="3"
-            auto-grow
-            density="comfortable"
-            :label="inputField.label"
-            :name="inputField.varName"
-            :hint="inputField.hint || ''"
-            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
-            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"
+            />
 
-          <!-- 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"
+              v-model="model[inputField.varName]"
+              :readonly="fieldState[inputField.varName]?.readonly"
+              :disabled="fieldState[inputField.varName]?.disabled"
+              variant="solo-filled"
+              flat
+              :label="inputField.label"
+              :name="inputField.varName"
+              :items="inputField.options"
+              item-title="text"
+              :item-value="inputField.selectReturnValue || 'text'"
+              :return-object="false"
+              :hint="inputField.hint"
+              density="comfortable"
+              persistent-hint
+              :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
+              validate-on="input"
+            />
 
-          <!-- Option Select -->
-          <v-select
-            v-else-if="inputField.type === fieldTypes.SELECT"
-            v-model="model[inputField.varName]"
-            :readonly="fieldState[inputField.varName]?.readonly"
-            :disabled="fieldState[inputField.varName]?.disabled"
-            variant="solo-filled"
-            flat
-            :label="inputField.label"
-            :name="inputField.varName"
-            :items="inputField.options"
-            item-title="text"
-            :item-value="inputField.selectReturnValue || 'text'"
-            :return-object="false"
-            :hint="inputField.hint"
-            density="comfortable"
-            persistent-hint
-            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
-            validate-on="input"
-          />
-
-          <!-- Color Picker -->
-          <div
-            v-else-if="inputField.type === fieldTypes.COLOR"
-            class="d-flex"
-            style="width: 100%"
-          >
-            <InputColor v-model="model[inputField.varName]" />
-          </div>
-        </v-col>
+            <!-- Color Picker -->
+            <div
+              v-else-if="inputField.type === fieldTypes.COLOR"
+              class="d-flex"
+              style="width: 100%"
+            >
+              <InputColor v-model="model[inputField.varName]" />
+            </div>
+          </v-col>
+        </template>
       </v-row>
     </v-card>
   </v-form>