github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 06:23:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 17

Recipe Chips (inkl remove unused)

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 09:50:31 +00:00
commit 275b89a9eb
1 changed files with 27 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

66
frontend/components/Domain/Recipe/RecipeChips.vue
View file

@ -23,52 +23,31 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import type { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe"; import type { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
export type UrlPrefixParam = "tags" | "categories" | "tools"; export type UrlPrefixParam = "tags" | "categories" | "tools";
export default defineNuxtComponent({ interface Props {
props: { truncate?: boolean;
truncate: { items?: RecipeCategory[] | RecipeTag[] | RecipeTool[];
type: Boolean, title?: boolean;
default: false, urlPrefix?: UrlPrefixParam;
}, limit?: number;
items: { small?: boolean;
type: Array as () => RecipeCategory[] | RecipeTag[] | RecipeTool[], maxWidth?: string | null;
default: () => [], }
}, const props = withDefaults(defineProps<Props>(), {
title: { truncate: false,
type: Boolean, items: () => [],
default: false, title: false,
}, urlPrefix: "categories",
urlPrefix: { limit: 999,
type: String as () => UrlPrefixParam, small: false,
default: "categories", maxWidth: null,
},
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}`;
}); });
defineEmits(["item-selected"]);
function truncateText(text: string, length = 20, clamp = "...") { function truncateText(text: string, length = 20, clamp = "...") {
if (!props.truncate) return text; if (!props.truncate) return text;
const node = document.createElement("div"); const node = document.createElement("div");
@ -76,13 +55,6 @@ export default defineNuxtComponent({
const content = node.textContent || ""; const content = node.textContent || "";
return content.length > length ? content.slice(0, length) + clamp : content; return content.length > length ? content.slice(0, length) + clamp : content;
} }
return {
baseRecipeRoute,
truncateText,
};
},
});
</script> </script>
<style></style> <style></style>