reorganize all frontend items

frontend/components/Domain/Recipe/RecipeChips.vue

@@ -2,14 +2,14 @@
   <div v-if="items.length > 0">
     <h2 v-if="title" class="mt-4">{{ title }}</h2>
     <v-chip
+      v-for="category in items.slice(0, limit)"
+      :key="category"
       label
       class="ma-1"
       color="accent"
       :small="small"
       dark
-      v-for="category in items.slice(0, limit)"
       :to="`/recipes/${urlParam}/${getSlug(category)}`"
-      :key="category"
     >
       {{ truncateText(category) }}
     </v-chip>
@@ -20,24 +20,33 @@
 export default {
   props: {
     truncate: {
+      type: Boolean,
       default: false,
     },
     items: {
-      default: [],
+      type: Array,
+      default: () => [],
     },
     title: {
-      default: null,
+      type: Boolean,
+      default: false,
     },
     isCategory: {
+      type: Boolean,
       default: true,
     },
     limit: {
+      type: Number,
       default: 999,
     },
     small: {
+      type: Boolean,
       default: false,
     },
-    maxWidth: {},
+    maxWidth: {
+      type: String,
+      default: null,
+    },
   },
   computed: {
     allCategories() {
@@ -55,19 +64,19 @@ export default {
       if (!name) return;
 
       if (this.isCategory) {
-        const matches = this.allCategories.filter(x => x.name == name);
+        const matches = this.allCategories.filter((x) => x.name === name);
         if (matches.length > 0) return matches[0].slug;
       } else {
-        const matches = this.allTags.filter(x => x.name == name);
+        const matches = this.allTags.filter((x) => x.name === name);
         if (matches.length > 0) return matches[0].slug;
       }
     },
     truncateText(text, length = 20, clamp) {
       if (!this.truncate) return text;
       clamp = clamp || "...";
-      var node = document.createElement("div");
+      const node = document.createElement("div");
       node.innerHTML = text;
-      var content = node.textContent;
+      const content = node.textContent;
       return content.length > length ? content.slice(0, length) + clamp : content;
     },
   },