80 lines
2.1 KiB
Vue
80 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import {useLabelEditorStore} from "~/store/labelEditorStore";
|
|
import {originToString} from "~/types/origin";
|
|
|
|
let store = useLabelEditorStore();
|
|
|
|
//const rules = [(v: string | any[]) => v.length <= 256 || 'Maximal 256 Zeichen.'];
|
|
</script>
|
|
|
|
<template>
|
|
<v-container>
|
|
<v-card v-if="store.article != null">
|
|
<v-card-title>{{ store.article.name }}</v-card-title>
|
|
|
|
<v-divider/>
|
|
|
|
<v-card-text>
|
|
<v-row no-gutters>
|
|
<v-col cols="2">
|
|
<v-row no-gutters>
|
|
<v-checkbox
|
|
v-model="store.article.bio"
|
|
label="BIO"
|
|
:readonly=true
|
|
/>
|
|
</v-row>
|
|
|
|
<v-row no-gutters>
|
|
<v-col cols="5">
|
|
<v-sheet>
|
|
Herkunft:
|
|
</v-sheet>
|
|
</v-col>
|
|
<v-col>
|
|
<v-sheet>
|
|
{{ originToString(store.article.origin) }}
|
|
</v-sheet>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
|
|
<v-col cols="5" style="padding: 5px;">
|
|
<v-textarea
|
|
:model-value="store.article.description"
|
|
:tile=true
|
|
label="Beschreibung"
|
|
counter
|
|
:persistentCounter=true
|
|
rows="6"
|
|
>
|
|
<template v-slot:counter="{ counter }">
|
|
<span>{{ counter }} von {{ store.ingredientsMaxChars }} Zeichen.</span>
|
|
</template>
|
|
</v-textarea>
|
|
|
|
</v-col>
|
|
|
|
<v-col cols="5" style="padding: 5px;">
|
|
<v-textarea
|
|
:model-value="store.article.ingredients"
|
|
:tile=true
|
|
label="Zutaten"
|
|
counter
|
|
:persistentCounter=true
|
|
rows="6"
|
|
>
|
|
<template v-slot:counter="{ counter }">
|
|
<span>{{ counter }} von {{ store.ingredientsMaxChars }} Zeichen.</span>
|
|
</template>
|
|
</v-textarea>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |