mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-08 07:38:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

some styling stuff

Browse Source
This commit is contained in:
vabene1111
2024-12-23 12:28:42 +01:00
parent 205eae785e
commit 7a2b3c2d2e
6 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
vue3/src/components/display/KeywordsBar.vue
View File

@@ -2,7 +2,7 @@
<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 props.keywords"> {{ k.label }}</v-chip>
<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>
@@ -12,14 +12,24 @@
<script setup lang="ts">
import {Keyword, KeywordLabel} from "@/openapi";
import {PropType} from "vue";
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}
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>