fix RqueryFilterBuilder Hydration issues and move to script setup

frontend/components/Domain/QueryFilterBuilder.vue

@@ -163,14 +163,14 @@
                 max-width="290px"
                 min-width="auto"
               >
-                <template #activator="{ props }">
+                <template #activator="{ props: activatorProps }">
                   <v-text-field
                     v-model="field.value"
                     persistent-hint
                     :prepend-icon="$globals.icons.calendar"
                     variant="underlined"
                     color="primary"
-                    v-bind="props"
+                    v-bind="activatorProps"
                     readonly
                   />
                 </template>
@@ -184,53 +184,48 @@
               </v-menu>
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Category"
-                :model-value="field.organizers"
+                v-model="field.organizers"
                 :selector-type="Organizer.Category"
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
-                @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Tag"
-                :model-value="field.organizers"
+                v-model="field.organizers"
                 :selector-type="Organizer.Tag"
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
-                @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Tool"
-                :model-value="field.organizers"
+                v-model="field.organizers"
                 :selector-type="Organizer.Tool"
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
-                @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Food"
-                :model-value="field.organizers"
+                v-model="field.organizers"
                 :selector-type="Organizer.Food"
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
-                @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
                 v-else-if="field.type === Organizer.Household"
-                :model-value="field.organizers"
+                v-model="field.organizers"
                 :selector-type="Organizer.Household"
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
                 variant="underlined"
-                @update:model-value="setOrganizerValues(field, index, $event)"
               />
             </v-col>
             <!-- right parenthesis -->
@@ -297,7 +292,7 @@
   </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VueDraggable } from "vue-draggable-plus";
 import { useDebounceFn } from "@vueuse/core";
 import { useHouseholdSelf } from "~/composables/use-households";
@@ -307,12 +302,7 @@ import type { LogicalOperator, QueryFilterJSON, QueryFilterJSONPart, RelationalK
 import { useCategoryStore, useFoodStore, useHouseholdStore, useTagStore, useToolStore } from "~/composables/store";
 import { type Field, type FieldDefinition, type FieldValue, type OrganizerBase, useQueryFilterBuilder } from "~/composables/use-query-filter-builder";
 
-export default defineNuxtComponent({
+const props = defineProps({
-  components: {
-    VueDraggable,
-    RecipeOrganizerSelector,
-  },
-  props: {
   fieldDefs: {
     type: Array as () => FieldDefinition[],
     required: true,
@@ -321,9 +311,13 @@ export default defineNuxtComponent({
     type: Object as () => QueryFilterJSON | null,
     default: null,
   },
-  },
+});
-  emits: ["input", "inputJSON"],
+
-  setup(props, context) {
+const emit = defineEmits<{
+  (event: "input", value: string | undefined): void;
+  (event: "inputJSON", value: QueryFilterJSON | undefined): void;
+}>();
+
 const { household } = useHouseholdSelf();
 const { logOps, relOps, buildQueryFilterString, getFieldFromFieldDef, isOrganizerType } = useQueryFilterBuilder();
 
@@ -337,6 +331,7 @@ export default defineNuxtComponent({
   datePickers: [] as boolean[],
   drag: false,
 });
+const { showAdvanced, datePickers, drag } = toRefs(state);
 
 const storeMap = {
   [Organizer.Category]: useCategoryStore(),
@@ -369,7 +364,7 @@ export default defineNuxtComponent({
     id: useUid(),
   });
   state.datePickers.push(false);
-		};
+}
 
 function setField(index: number, fieldLabel: string) {
   state.datePickers[index] = false;
@@ -427,7 +422,7 @@ export default defineNuxtComponent({
 function removeField(index: number) {
   fields.value.splice(index, 1);
   state.datePickers.splice(index, 1);
-		};
+}
 
 const fieldsUpdater = useDebounceFn((/* newFields: typeof fields.value */) => {
   /* newFields.forEach((field, index) => {
@@ -441,8 +436,8 @@ export default defineNuxtComponent({
   }
   state.qfValid = !!qf;
 
-		  context.emit("input", qf || undefined);
+  emit("input", qf || undefined);
-		  context.emit("inputJSON", qf ? buildQueryFilterJSON() : undefined);
+  emit("inputJSON", qf ? buildQueryFilterJSON() : undefined);
 }, 500);
 
 watch(fields, fieldsUpdater, { deep: true });
@@ -452,7 +447,7 @@ export default defineNuxtComponent({
     return;
   }
 
-		  field.organizers = [];
+  const newField = { ...field, organizers: [] as OrganizerBase[] };
 
   const { store, actions } = storeMap[field.type];
   if (!store.value.length) {
@@ -467,8 +462,8 @@ export default defineNuxtComponent({
     }
     return organizer;
   });
-		  field.organizers = organizers.filter(organizer => organizer !== undefined) as OrganizerBase[];
+  newField.organizers = organizers.filter(organizer => organizer !== undefined) as OrganizerBase[];
-		  setOrganizerValues(field, index, field.organizers);
+  setOrganizerValues(newField, index, newField.organizers);
 }
 
 function initFieldsError(error = "") {
@@ -485,7 +480,7 @@ export default defineNuxtComponent({
 function initializeFields() {
   if (!props.initialQueryFilter?.parts?.length) {
     return initFieldsError();
-		  };
+  }
 
   const initFields: FieldWithId[] = [];
   let error = false;
@@ -561,7 +556,7 @@ export default defineNuxtComponent({
   else {
     initFieldsError();
   }
-		};
+}
 
 try {
   initializeFields();
@@ -643,30 +638,6 @@ export default defineNuxtComponent({
     },
   };
 });
-
-		return {
-		  Organizer,
-		  ...toRefs(state),
-		  logOps,
-		  relOps,
-		  config,
-		  firstDayOfWeek,
-		  onDragEnd,
-		  // Fields
-		  fields,
-		  addField,
-		  setField,
-		  setLeftParenthesisValue,
-		  setRightParenthesisValue,
-		  setLogicalOperatorValue,
-		  setRelationalOperatorValue,
-		  setFieldValue,
-		  setFieldValues,
-		  setOrganizerValues,
-		  removeField,
-		};
-  },
-});
 </script>
 
 <style scoped>

frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue

@@ -3,7 +3,7 @@
     v-model="selected"
     v-bind="inputAttrs"
     v-model:search="searchInput"
-    :items="storeItem"
+    :items="items"
     :label="label"
     chips
     closable-chips
@@ -46,67 +46,40 @@
   </v-autocomplete>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { IngredientFood, RecipeCategory, RecipeTag } from "~/lib/api/types/recipe";
 import type { RecipeTool } from "~/lib/api/types/admin";
 import { Organizer, type RecipeOrganizer } from "~/lib/api/types/non-generated";
 import type { HouseholdSummary } from "~/lib/api/types/household";
 import { useCategoryStore, useFoodStore, useHouseholdStore, useTagStore, useToolStore } from "~/composables/store";
 
-export default defineNuxtComponent({
+interface Props {
-  props: {
+  selectorType: RecipeOrganizer;
-    modelValue: {
+  inputAttrs?: Record<string, any>;
-      type: Array as () => (
+  returnObject?: boolean;
+  showAdd?: boolean;
+  showLabel?: boolean;
+  showIcon?: boolean;
+  variant?: "filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  inputAttrs: () => ({}),
+  returnObject: true,
+  showAdd: true,
+  showLabel: true,
+  showIcon: true,
+  variant: "outlined",
+});
+
+const selected = defineModel<(
   | HouseholdSummary
   | RecipeTag
   | RecipeCategory
   | RecipeTool
   | IngredientFood
   | string
-      )[] | undefined,
+)[] | undefined>({ required: true });
-      required: true,
-    },
-    /**
-     * The type of organizer to use.
-     */
-    selectorType: {
-      type: String as () => RecipeOrganizer,
-      required: true,
-    },
-    inputAttrs: {
-      type: Object as () => Record<string, any>,
-      default: () => ({}),
-    },
-    returnObject: {
-      type: Boolean,
-      default: true,
-    },
-    showAdd: {
-      type: Boolean,
-      default: true,
-    },
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-    showIcon: {
-      type: Boolean,
-      default: true,
-    },
-    variant: {
-      type: String as () => "filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled",
-      default: "outlined",
-    },
-  },
-  emits: ["update:modelValue"],
-
-  setup(props, context) {
-    const selected = computed({
-      get: () => props.modelValue,
-      set: (val) => {
-        context.emit("update:modelValue", val);
-      },
-    });
 
 onMounted(() => {
   if (selected.value === undefined) {
@@ -205,21 +178,6 @@ export default defineNuxtComponent({
 function resetSearchInput() {
   searchInput.value = "";
 }
-
-    return {
-      Organizer,
-      appendCreated,
-      dialog,
-      storeItem: items,
-      label,
-      icon,
-      selected,
-      removeByIndex,
-      searchInput,
-      resetSearchInput,
-    };
-  },
-});
 </script>
 
 <style scoped>