HouseholdPreferenceEditor

frontend/components/Domain/Household/HouseholdPreferencesEditor.vue

@@ -41,27 +41,19 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { ReadHouseholdPreferences } from "~/lib/api/types/household";
 
-export default defineNuxtComponent({
-  props: {
-    modelValue: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, context) {
-    const i18n = useI18n();
+const preferences = defineModel<ReadHouseholdPreferences>({ required: true });
+const i18n = useI18n();
 
-		type Preference = {
+type Preference = {
   key: keyof ReadHouseholdPreferences;
   label: string;
   description: string;
-		};
+};
 
-		const recipePreferences: Preference[] = [
+const recipePreferences: Preference[] = [
   {
     key: "recipePublic",
     label: i18n.t("group.allow-users-outside-of-your-group-to-see-your-recipes"),
@@ -92,9 +84,9 @@ export default defineNuxtComponent({
     label: i18n.t("group.disable-organizing-recipe-ingredients-by-units-and-food"),
     description: i18n.t("group.disable-organizing-recipe-ingredients-by-units-and-food-description"),
   },
-		];
+];
 
-		const allDays = [
+const allDays = [
   {
     name: i18n.t("general.sunday"),
     value: 0,
@@ -123,24 +115,7 @@ export default defineNuxtComponent({
     name: i18n.t("general.saturday"),
     value: 6,
   },
-		];
-
-		const preferences = computed({
-		  get() {
-		    return props.modelValue;
-		  },
-		  set(val) {
-		    context.emit("update:modelValue", val);
-		  },
-		});
-
-		return {
-		  allDays,
-		  preferences,
-		  recipePreferences,
-		};
-  },
-});
+];
 </script>
 
 <style lang="css">