mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-02 12:49:02 -05:00
36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<template>
|
|
<div v-if="props.keywords">
|
|
<slot name="prepend"></slot>
|
|
|
|
<v-chip class="me-1 mb-1" :label="props.label" :color="props.color" :size="props.size" :variant="props.variant" v-for="k in keywords"> {{ k.label }}</v-chip>
|
|
|
|
<slot name="append"></slot>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import {Keyword, KeywordLabel} from "@/openapi";
|
|
import {computed, PropType} from "vue";
|
|
|
|
const props = defineProps({
|
|
keywords: Array as PropType<Array<Keyword> | Array<KeywordLabel> | undefined>,
|
|
size: {type: String, default: 'x-small'},
|
|
color: {type: String, default: ''},
|
|
variant: {type: String as PropType<NonNullable<"tonal" | "flat" | "text" | "elevated" | "outlined" | "plain"> | undefined>, default: 'tonal'},
|
|
label: {type: Boolean, default: true},
|
|
// maximum number of keywords, 0 for all
|
|
maxKeywords : {type: Number, default: 0},
|
|
})
|
|
|
|
const keywords = computed(() => {
|
|
if (props.maxKeywords > 0){
|
|
return props.keywords?.slice(0, props.maxKeywords)
|
|
} else {
|
|
return props.keywords
|
|
}
|
|
})
|
|
|
|
</script>
|