36 lines
1.2 KiB
Vue
36 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { useBoatStore } from '~/stores/boat';
|
|
import type { Boat } from '~/utils/boat.types';
|
|
|
|
const boats = useBoatStore().boats;
|
|
const boat = <Boat | undefined>undefined;
|
|
</script>
|
|
|
|
<template>
|
|
<q-select v-model="boat" :options="boats" option-value="id" option-label="name" label="Boat">
|
|
<template v-slot:prepend>
|
|
<q-item-section avatar>
|
|
<q-img v-if="boat?.iconSrc" :src="boat?.iconSrc" />
|
|
<q-icon v-else name="sailing" />
|
|
</q-item-section>
|
|
</template>
|
|
<template v-slot:option="scope">
|
|
<q-item v-bind="scope.itemProps">
|
|
<q-item-section avatar>
|
|
<q-img :src="scope.opt.iconsrc" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>{{ scope.opt.name }}</q-item-label>
|
|
<q-item-label caption>{{ scope.opt.class }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section avatar v-if="scope.opt.defects">
|
|
<q-icon name="warning" color="warning" />
|
|
<q-tooltip class="bg-amber text-black shadow-7">
|
|
This boat has notices. Select it to see details.
|
|
</q-tooltip>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
</template>
|