chore: script setup #3 - recipe components (#5849)

frontend/components/Domain/Recipe/RecipeChips.vue

@@ -23,66 +23,38 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
 
 export type UrlPrefixParam = "tags" | "categories" | "tools";
 
-export default defineNuxtComponent({
-  props: {
-    truncate: {
-      type: Boolean,
-      default: false,
-    },
-    items: {
-      type: Array as () => RecipeCategory[] | RecipeTag[] | RecipeTool[],
-      default: () => [],
-    },
-    title: {
-      type: Boolean,
-      default: false,
-    },
-    urlPrefix: {
-      type: String as () => UrlPrefixParam,
-      default: "categories",
-    },
-    limit: {
-      type: Number,
-      default: 999,
-    },
-    small: {
-      type: Boolean,
-      default: false,
-    },
-    maxWidth: {
-      type: String,
-      default: null,
-    },
-  },
-  emits: ["item-selected"],
-  setup(props) {
-    const $auth = useMealieAuth();
-
-    const route = useRoute();
-    const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
-    const baseRecipeRoute = computed<string>(() => {
-      return `/g/${groupSlug.value}`;
-    });
-
-    function truncateText(text: string, length = 20, clamp = "...") {
-      if (!props.truncate) return text;
-      const node = document.createElement("div");
-      node.innerHTML = text;
-      const content = node.textContent || "";
-      return content.length > length ? content.slice(0, length) + clamp : content;
-    }
-
-    return {
-      baseRecipeRoute,
-      truncateText,
-    };
-  },
+interface Props {
+  truncate?: boolean;
+  items?: RecipeCategory[] | RecipeTag[] | RecipeTool[];
+  title?: boolean;
+  urlPrefix?: UrlPrefixParam;
+  limit?: number;
+  small?: boolean;
+  maxWidth?: string | null;
+}
+const props = withDefaults(defineProps<Props>(), {
+  truncate: false,
+  items: () => [],
+  title: false,
+  urlPrefix: "categories",
+  limit: 999,
+  small: false,
+  maxWidth: null,
 });
+
+defineEmits(["item-selected"]);
+function truncateText(text: string, length = 20, clamp = "...") {
+  if (!props.truncate) return text;
+  const node = document.createElement("div");
+  node.innerHTML = text;
+  const content = node.textContent || "";
+  return content.length > length ? content.slice(0, length) + clamp : content;
+}
 </script>
 
 <style></style>